/* ========================================================================== GLOBAL CS® — CATALOGUE TÉLÉPHONES IP Feuille de style commune — Landing Pages Produits Version 1.0 · Mai 2026 Typo : Montserrat (Google Fonts) Palette : #8CBF44 (vert) · #242E3D (navy) · #B7B7B7 (gris) · #E5E5E5 (clair) ========================================================================== */ /* -------------------------------------------------------------------------- IMPORT TYPOGRAPHIE -------------------------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap'); /* -------------------------------------------------------------------------- VARIABLES GLOBALES — CHARTE GLOBAL CS -------------------------------------------------------------------------- */ :root { /* Palette principale */ --green: #8CBF44; --green-dark: #6DA030; --navy: #242E3D; --navy-deep: #1A2230; --black: #000000; --gray: #B7B7B7; --light: #E5E5E5; --white: #FFFFFF; --text-muted: #5A6A7A; /* Typographie */ --ff: 'Montserrat', sans-serif; /* Accents par défaut (vert GLOBAL CS — U31P) */ --accent: var(--green); --accent-dark: var(--green-dark); --accent-lt: #C5E08F; --accent-bg: #F0F8E4; --accent-deep: #1A2A10; /* Rayons et ombres */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; --shadow-sm: 0 2px 8px rgba(0,0,0,.08); --shadow-md: 0 8px 32px rgba(0,0,0,.10); --shadow-lg: 0 16px 48px rgba(0,0,0,.14); /* Transitions */ --transition: all .3s cubic-bezier(.4,0,.2,1); --transition-fast: all .2s ease; } /* -------------------------------------------------------------------------- ACCENTS PAR PRODUIT — appliqués via class sur ou Exemple : -------------------------------------------------------------------------- */ /* U31P · Vert GLOBAL CS seul */ .product-u31p { --accent: #8CBF44; --accent-dark: #6DA030; --accent-lt: #C5E08F; --accent-bg: #F0F8E4; --accent-deep: #1A2A10; } /* U33P · Vert + DSS LED tricolore */ .product-u33p { --accent: #8CBF44; --accent-dark: #6DA030; --accent-lt: #C5E08F; --accent-bg: #F0F8E4; --accent-deep: #1A2A10; --accent-alt: #F97316; /* LED orange */ --accent-alt2: #EF4444; /* LED rouge */ } /* U35P · Vert + Or Premium */ .product-u35p { --accent: #C9A84C; --accent-dark: #A8882A; --accent-lt: #F0D88A; --accent-bg: #FDF8EC; --accent-deep: #2A1E00; } /* U42P · Visiophone Cyan */ .product-u42p { --accent: #0EA5E9; --accent-dark: #0284C7; --accent-lt: #7DD3FC; --accent-bg: #F0F9FF; --accent-deep: #0C2A40; } /* WiFi SIP Cordless · Émeraude Mobilité */ .product-wifi-sip { --accent: #10B981; --accent-dark: #059669; --accent-lt: #6EE7B7; --accent-bg: #ECFDF5; --accent-deep: #0A2A1A; } /* SIP-U111 · Bleu PME/TPE */ .product-sipu111 { --accent: #2563EB; --accent-dark: #1D4ED8; --accent-lt: #93C5FD; --accent-bg: #EFF6FF; --accent-deep: #0D1B3E; } /* SIP-U121 · Violet Entreprise */ .product-sipu121 { --accent: #7C3AED; --accent-dark: #6D28D9; --accent-lt: #C4B5FD; --accent-bg: #F5F3FF; --accent-deep: #2D1B69; } /* SIP-U131 · Vert Forêt Dirigeants */ .product-sipu131 { --accent: #16A34A; --accent-dark: #15803D; --accent-lt: #86EFAC; --accent-bg: #F0FDF4; --accent-deep: #14532D; } /* IMAGINE 110 · Cyan UC&C */ .product-imagine110 { --accent: #0891B2; --accent-dark: #0E7490; --accent-lt: #67E8F9; --accent-bg: #ECFEFF; --accent-deep: #0A2A40; } /* IMAGINE 120 · Lime/Chartreuse */ .product-imagine120 { --accent: #84CC16; --accent-dark: #65A30D; --accent-lt: #D9F99D; --accent-bg: #F7FEE7; --accent-deep: #1A2800; } /* -------------------------------------------------------------------------- RESET & BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--ff); background: var(--white); color: var(--navy); overflow-x: hidden; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { text-decoration: none; } /* -------------------------------------------------------------------------- NAVIGATION STICKY -------------------------------------------------------------------------- */ nav { position: sticky; top: 0; z-index: 100; background: rgba(36, 46, 61, .97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(var(--accent), .2); } .nav-in { max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; } /* Logo/Marque */ .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .brand-logo { width: 38px; height: 38px; background: var(--green); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--navy); flex-shrink: 0; } .brand-name { font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: .5px; } .brand-name span { color: var(--green); } /* Liens de navigation */ .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { color: var(--gray); font-size: 13px; font-weight: 500; transition: var(--transition-fast); } .nav-links a:hover { color: var(--accent-lt, var(--green)); } /* Bouton CTA nav */ .btn-nav { background: var(--accent, var(--green)) !important; color: var(--white) !important; font-weight: 700 !important; font-size: 13px !important; padding: 9px 20px; border-radius: var(--radius-sm); transition: var(--transition-fast) !important; } .btn-nav:hover { background: var(--accent-dark, var(--green-dark)) !important; transform: translateY(-1px); } /* -------------------------------------------------------------------------- HERO SECTION -------------------------------------------------------------------------- */ .hero { background: var(--navy-deep); min-height: 92vh; display: flex; align-items: center; position: relative; overflow: hidden; } /* Barre supérieure dégradée */ .hero::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(to right, var(--green), var(--accent, var(--green)), var(--green)); } /* Fondu bas vers blanc */ .hero-fade { position: absolute; bottom: -2px; left: 0; right: 0; height: 80px; background: linear-gradient(to bottom, transparent, var(--white)); z-index: 2; } /* Lueur décorative arrière-plan */ .hero-glow { position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(255,255,255,.05), transparent 70%); pointer-events: none; } .hero-in { max-width: 1200px; margin: auto; padding: 80px 24px 100px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; } /* Badges hero */ .badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--accent-lt, var(--gray)); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: var(--radius-full); margin-bottom: 10px; letter-spacing: .3px; } .badge-product { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--green)) 25%, transparent), color-mix(in srgb, var(--accent, var(--green)) 10%, transparent)); border: 1px solid var(--accent, var(--green)); color: var(--white); font-size: 11px; font-weight: 800; padding: 5px 14px; border-radius: 4px; margin-bottom: 20px; letter-spacing: 1px; text-transform: uppercase; } .dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--green)); display: inline-block; animation: pulse 1.8s ease infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } } /* Titre principal */ .hero h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; color: var(--white); line-height: 1.12; letter-spacing: -1px; margin-bottom: 20px; } .hero h1 em { font-style: normal; color: var(--accent-lt, var(--green)); } .hero p { color: var(--gray); font-size: 15px; line-height: 1.7; max-width: 480px; margin-bottom: 32px; } /* Boutons hero */ .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; } /* KPIs stats hero */ .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .hstat { border-left: 2px solid rgba(255,255,255,.2); padding-left: 14px; } .hstat .v { font-size: 26px; font-weight: 800; color: var(--accent-lt, var(--green)); line-height: 1; } .hstat .v.g { color: var(--green); } .hstat .l { font-size: 11px; color: var(--gray); margin-top: 3px; font-weight: 500; line-height: 1.3; } /* -------------------------------------------------------------------------- CARTE PRODUIT (côté droit du hero) -------------------------------------------------------------------------- */ .phone-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl); padding: 40px 32px; position: relative; } .phone-card::before { content: attr(data-label); position: absolute; top: -1px; right: 24px; background: linear-gradient(135deg, var(--accent, var(--green)), var(--accent-dark, var(--green-dark))); color: var(--white); font-size: 10px; font-weight: 800; padding: 4px 14px; border-radius: 0 0 8px 8px; letter-spacing: 1px; text-transform: uppercase; } .phone-visual { width: 100%; aspect-ratio: 4/3; background: var(--navy); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 28px; position: relative; overflow: hidden; } .phone-visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.04), transparent 60%); } .phone-screen-main { font-size: 90px; filter: drop-shadow(0 8px 24px rgba(0,0,0,.6)); position: relative; z-index: 1; } /* -------------------------------------------------------------------------- CHIPS / BADGES PRODUIT -------------------------------------------------------------------------- */ .phone-chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); color: var(--accent-lt, var(--gray)); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-full); font-family: var(--ff); } .chip-accent { background: rgba(255,255,255,.12); border-color: var(--accent, var(--green)); font-weight: 800; } .chip-green { background: rgba(140, 191, 68, .12); border-color: rgba(140, 191, 68, .3); color: var(--green); } .chip-orange { background: rgba(249, 115, 22, .12); border-color: rgba(249, 115, 22, .3); color: #FED7AA; } /* -------------------------------------------------------------------------- BOUTONS GLOBAUX -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; padding: 13px 26px; border-radius: 7px; font-family: var(--ff); font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; border: none; transition: var(--transition); } /* Bouton accent principal */ .btn-primary { background: var(--accent, var(--green)); color: var(--white); } .btn-primary:hover { background: var(--accent-dark, var(--green-dark)); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.2); } /* Bouton vert secondaire */ .btn-secondary { background: var(--green); color: var(--navy); } .btn-secondary:hover { background: var(--green-dark); transform: translateY(-1px); } /* Bouton outline */ .btn-outline { background: transparent; color: var(--accent-lt, var(--green)); border: 1.5px solid var(--accent, var(--green)); } .btn-outline:hover { background: rgba(255,255,255,.08); } /* Bouton submit formulaire */ .btn-submit { width: 100%; background: var(--accent, var(--green)); color: var(--white); font-family: var(--ff); font-size: 14px; font-weight: 800; padding: 14px; border: none; border-radius: 7px; cursor: pointer; letter-spacing: .5px; transition: var(--transition); margin-top: 4px; } .btn-submit:hover { background: var(--accent-dark, var(--green-dark)); transform: translateY(-1px); } /* -------------------------------------------------------------------------- BANDE DE MÉTRIQUES CLÉS -------------------------------------------------------------------------- */ .band { background: var(--navy); padding: 60px 0; border-top: 2px solid rgba(255,255,255,.08); } .band-inner { display: flex; justify-content: space-around; align-items: center; gap: 32px; flex-wrap: wrap; } .band-item { text-align: center; } .band-item .num { font-size: 38px; font-weight: 800; color: var(--accent-lt, var(--green)); line-height: 1; } .band-item .num.g { color: var(--green); } .band-item .lbl { font-size: 13px; color: var(--gray); margin-top: 6px; font-weight: 500; max-width: 120px; line-height: 1.4; } /* -------------------------------------------------------------------------- LAYOUT SECTIONS -------------------------------------------------------------------------- */ .wrap { max-width: 1200px; margin: auto; padding: 0 24px; } section { padding: 96px 0; } .section-light { background: var(--accent-bg, #F8F9FA); } .section-dark { background: var(--navy-deep); } /* Eyebrow / surtitre */ .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent, var(--green)); margin-bottom: 12px; } /* Titres de section */ .sh { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; color: var(--navy); letter-spacing: -1px; line-height: 1.2; margin-bottom: 16px; } .sh span { color: var(--accent, var(--green)); } .sh span.g { color: var(--green); } .sh.on-dark { color: var(--white); } /* Sous-titre de section */ .ssub { font-size: 15px; color: var(--text-muted); max-width: 560px; line-height: 1.7; margin-bottom: 48px; font-weight: 400; } .ssub.on-dark { color: var(--gray); } /* -------------------------------------------------------------------------- GRILLE HIGHLIGHTS (4 KPIs) -------------------------------------------------------------------------- */ .hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 48px; } .hl-card { background: var(--white); border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; transition: var(--transition); } .hl-card:hover { border-color: var(--accent, var(--green)); box-shadow: var(--shadow-md); transform: translateY(-3px); } .hl-card-accent { border-top: 3px solid var(--accent, var(--green)); } .hl-card-green { border-top: 3px solid var(--green); } .hl-val { font-size: 52px; font-weight: 800; color: var(--accent, var(--green)); line-height: 1; margin-bottom: 8px; } .hl-val.g { color: var(--green); } .hl-lbl { font-size: 13px; font-weight: 600; color: var(--navy); margin-bottom: 4px; } .hl-sub { font-size: 11px; color: #6B7280; } /* -------------------------------------------------------------------------- GRILLE FONCTIONNALITÉS (6 cartes) -------------------------------------------------------------------------- */ .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feat-card { background: var(--white); border: 1px solid var(--light); border-radius: var(--radius-lg); padding: 32px 28px; transition: var(--transition); position: relative; } .feat-card:hover { border-color: var(--accent, var(--green)); box-shadow: var(--shadow-md); transform: translateY(-3px); } .feat-card.sec-card { border-color: rgba(249,115,22,.2); } .feat-icon { width: 48px; height: 48px; background: linear-gradient(135deg, color-mix(in srgb, var(--accent, var(--green)) 15%, transparent), color-mix(in srgb, var(--accent, var(--green)) 5%, transparent)); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 18px; } .feat-icon.gi { background: linear-gradient(135deg, rgba(140,191,68,.15), rgba(140,191,68,.05)); } .feat-icon.oi { background: linear-gradient(135deg, rgba(249,115,22,.15), rgba(249,115,22,.05)); } .feat-card h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin-bottom: 8px; } .feat-card p { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; } /* Tags fonctionnalités */ .feat-tag { display: inline-block; background: color-mix(in srgb, var(--accent, var(--green)) 10%, transparent); color: var(--accent, var(--green)); font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 4px; margin-top: 14px; } .feat-tag.g { background: rgba(140,191,68,.1); color: var(--green); } .feat-tag.o { background: rgba(249,115,22,.1); color: #F97316; } /* Badges positionnés */ .feat-badge { position: absolute; top: 16px; right: 16px; background: var(--accent, var(--green)); color: var(--white); font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 12px; letter-spacing: .5px; text-transform: uppercase; } /* -------------------------------------------------------------------------- TABLEAU SPÉCIFICATIONS TECHNIQUES -------------------------------------------------------------------------- */ .specs-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .spec-block { margin-bottom: 32px; } .spec-block h4 { font-size: 13px; font-weight: 700; color: var(--accent, var(--green)); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--light); } .spec-block h4.g { color: var(--green); } .spec-block h4.o { color: #F97316; } .spec-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid #F0F0F0; gap: 16px; } .spec-row:last-child { border-bottom: none; } .spec-lbl { font-size: 13px; color: var(--text-muted); font-weight: 500; flex: 0 0 auto; max-width: 48%; } .spec-val { font-size: 13px; color: var(--navy); font-weight: 600; text-align: right; flex: 1; } /* Badges specs */ .spec-badge { background: var(--accent, var(--green)); color: var(--white); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 3px; vertical-align: middle; margin-left: 4px; } .spec-badge.g { background: var(--green); color: var(--navy); } .spec-badge.o { background: #F97316; color: var(--white); } .spec-badge.ex { background: var(--navy); color: var(--accent-lt, var(--green)); border: 1px solid var(--accent, var(--green)); } /* -------------------------------------------------------------------------- GRILLE PROTOCOLES (fond sombre) -------------------------------------------------------------------------- */ .proto-bg { background: var(--navy-deep); } .proto-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .proto-item { background: var(--navy); color: var(--white); font-family: var(--ff); font-size: 12px; font-weight: 600; padding: 10px 12px; border-radius: 8px; text-align: center; letter-spacing: .3px; line-height: 1.5; } .proto-item small { opacity: .6; font-weight: 400; display: block; margin-top: 2px; } /* -------------------------------------------------------------------------- BLOC SÉCURITÉ -------------------------------------------------------------------------- */ .sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .sec-pill { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 8px; padding: 14px 12px; text-align: center; } .sec-pill h5 { font-size: 13px; font-weight: 800; color: var(--accent-lt, var(--green)); margin-bottom: 3px; } .sec-pill p { font-size: 11px; color: var(--gray); } .sec-pill.orange { border-color: rgba(249,115,22,.3); } .sec-pill.orange h5 { color: #FED7AA; } /* -------------------------------------------------------------------------- FORMULAIRE DE DEVIS (CTA) -------------------------------------------------------------------------- */ .cta-sec { background: var(--navy-deep); padding: 96px 0; } .cta-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .cta-list { list-style: none; margin-bottom: 32px; } .cta-list li { font-size: 14px; color: var(--gray); padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; gap: 10px; } .cta-list li::before { content: '✓'; color: var(--accent-lt, var(--green)); font-weight: 800; flex-shrink: 0; } /* Bloc contact */ .contact-block { margin-top: 32px; padding: 20px 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; } .contact-block .label { font-size: 12px; font-weight: 700; color: var(--accent-lt, var(--green)); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; } .contact-block .phone { color: var(--white); font-size: 14px; font-weight: 500; margin-bottom: 4px; } .contact-block .email { color: var(--gray); font-size: 13px; } /* Carte formulaire */ .lead-card { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-lg); padding: 36px 32px; position: relative; } .lead-card::before { content: attr(data-label); position: absolute; top: -1px; right: 24px; background: linear-gradient(135deg, var(--accent, var(--green)), var(--accent-dark, var(--green-dark))); color: var(--white); font-size: 10px; font-weight: 800; padding: 4px 14px; border-radius: 0 0 8px 8px; letter-spacing: 1px; text-transform: uppercase; } .lead-card h3 { font-size: 18px; font-weight: 700; color: var(--white); margin-bottom: 6px; } .lead-card .sub { font-size: 13px; color: var(--gray); margin-bottom: 24px; } /* Grille 2 colonnes dans le formulaire */ .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Champs formulaire */ .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; font-weight: 600; color: var(--gray); margin-bottom: 6px; font-family: var(--ff); } .field input, .field select, .field textarea { width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 7px; padding: 11px 14px; font-family: var(--ff); font-size: 13px; color: var(--white); outline: none; transition: border-color .2s; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent, var(--green)); } .field select option { background: var(--navy); color: var(--white); } .form-legal { font-size: 11px; color: rgba(255,255,255,.35); text-align: center; margin-top: 10px; } /* -------------------------------------------------------------------------- FOOTER -------------------------------------------------------------------------- */ footer { background: var(--black); padding: 60px 0 0; } .foot-g { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,.08); } footer h6 { font-size: 12px; font-weight: 700; color: var(--white); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 16px; font-family: var(--ff); } footer a { display: block; font-size: 13px; color: var(--gray); text-decoration: none; margin-bottom: 8px; transition: color .2s; } footer a:hover { color: var(--accent-lt, var(--green)); } footer p { font-size: 13px; color: var(--gray); line-height: 1.6; } .foot-bot { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 12px; color: rgba(255,255,255,.3); } /* -------------------------------------------------------------------------- ANIMATION D'APPARITION AU SCROLL -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.4,0,.2,1); } .reveal.visible { opacity: 1; transform: translateY(0); } /* Délais d'animation en cascade */ .reveal:nth-child(2) { transition-delay: .05s; } .reveal:nth-child(3) { transition-delay: .10s; } .reveal:nth-child(4) { transition-delay: .15s; } /* -------------------------------------------------------------------------- UTILITAIRES -------------------------------------------------------------------------- */ /* Espacement */ .mt-4 { margin-top: 16px; } .mt-8 { margin-top: 32px; } .mt-12 { margin-top: 48px; } .mb-4 { margin-bottom: 16px; } .mb-8 { margin-bottom: 32px; } /* Texte */ .text-center { text-align: center; } .text-accent { color: var(--accent, var(--green)); } .text-green { color: var(--green); } .text-white { color: var(--white); } .text-gray { color: var(--gray); } .text-muted { color: var(--text-muted); } .fw-800 { font-weight: 800; } .fw-700 { font-weight: 700; } .ls-wide { letter-spacing: 2px; } /* Grilles génériques */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; } /* Divider */ .divider { height: 1px; background: var(--light); margin: 48px 0; } .divider-accent { height: 2px; background: linear-gradient(to right, var(--accent, var(--green)), transparent); margin: 48px 0; } /* -------------------------------------------------------------------------- RESPONSIVE — TABLETTE (< 900px) -------------------------------------------------------------------------- */ @media (max-width: 900px) { .hero-in, .specs-layout, .cta-in { grid-template-columns: 1fr; gap: 40px; } .hero-stats { grid-template-columns: repeat(2, 1fr); } .feat-grid, .hl-grid { grid-template-columns: 1fr 1fr; } .foot-g { grid-template-columns: 1fr 1fr; gap: 32px; } .proto-grid { grid-template-columns: repeat(3, 1fr); } .sec-grid { grid-template-columns: 1fr 1fr; } .band-inner { gap: 24px; } } /* -------------------------------------------------------------------------- RESPONSIVE — MOBILE (< 600px) -------------------------------------------------------------------------- */ @media (max-width: 600px) { section { padding: 64px 0; } .nav-links { display: none; /* hamburger à implémenter si besoin */ } .hero-in { padding: 48px 16px 80px; } .hero h1 { font-size: 2rem; } .feat-grid, .hl-grid, .grid-3, .grid-4 { grid-template-columns: 1fr; } .frow, .proto-grid, .sec-grid { grid-template-columns: 1fr 1fr; } .foot-g { grid-template-columns: 1fr; } .foot-bot { flex-direction: column; gap: 8px; text-align: center; } .band-item .num { font-size: 28px; } .cta-in { gap: 32px; } } /* -------------------------------------------------------------------------- SCRIPT D'INITIALISATION DES ANIMATIONS (à copier en bas de page) -------------------------------------------------------------------------- ========================================================================== */