/* ══════════════════════════════════════════════════════════════════ ELECOOLING — Design System layer Source : projet Claude Design "Elecooling Design System" 7bda00f6-1a40-44d9-bbda-525bd7de4d33 Miroir local des sources : /design-system/ Ce fichier se charge APRES /css/style.css. Il fait deux choses : 1. Il declare les tokens du design system. 2. Il remappe les variables historiques du site sur ces tokens, puis reaccorde les composants sur les specs du DS. Rollback : retirer le vers /css/ds.css et remettre les polices Lexend / Source Sans 3 dans le . Aucun autre fichier n'est modifie. ══════════════════════════════════════════════════════════════════ */ /* ═══ 1. TOKENS DU DESIGN SYSTEM ════════════════════════════════════ */ :root { /* ---- Brand: Cool Azure (primary) ---- */ --blue-50: #eef6ff; --blue-100: #d9ebff; --blue-200: #b6d6ff; --blue-300: #85baff; --blue-400: #4f97fb; --blue-500: #2477ee; /* core brand */ --blue-600: #0f5fd6; --blue-700: #0d4dac; --blue-800: #113f86; --blue-900: #14376b; /* ---- Sky: cool-air highlight / gradients ---- */ --sky-300: #7dd3fc; --sky-400: #38bdf8; --sky-500: #0ea5e9; /* ---- Ink: deep navy surfaces, footers, hero overlays ---- */ --navy-700: #12243a; --navy-800: #0d1b2e; --navy-900: #081321; /* ---- Ember: warm heating accent (reversible / air-eau) ---- */ --ember-300: #ffb26b; --ember-400: #ff8f3c; --ember-500: #f26a1b; /* core accent */ --ember-600: #d4530e; /* ---- Neutrals (cool gray) ---- */ --gray-0: #ffffff; --gray-50: #f6f8fb; --gray-100: #eef2f7; --gray-200: #e0e7ef; --gray-300: #cbd5e1; --gray-400: #94a3b8; --gray-500: #64748b; --gray-600: #475569; --gray-700: #334155; --gray-800: #1e293b; --gray-900: #0f172a; /* ---- Semantic status ---- */ --green-500: #16a34a; --green-50: #e9f8ef; --amber-500: #d97706; --amber-50: #fdf3e6; --red-500: #dc2626; --red-50: #fdeaea; /* ---- Semantic aliases ---- */ --color-brand: var(--blue-500); --color-brand-strong: var(--blue-700); --color-brand-soft: var(--blue-50); --color-accent: var(--ember-500); --color-accent-strong: var(--ember-600); --color-accent-soft: #fff1e6; --text-strong: var(--navy-900); --text-body: var(--gray-700); --text-muted: var(--gray-500); --text-inverse: var(--gray-0); --text-brand: var(--blue-600); --text-link: var(--blue-600); --text-link-hover: var(--blue-800); --surface-page: var(--gray-50); --surface-card: var(--gray-0); --surface-sunken: var(--gray-100); --surface-ink: var(--navy-900); --surface-ink-2: var(--navy-800); --surface-brand: var(--blue-500); --border-subtle: var(--gray-200); --border-default: var(--gray-300); --border-strong: var(--gray-400); --border-brand: var(--blue-500); --focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent); --gradient-cool: linear-gradient(135deg, var(--navy-900) 0%, var(--blue-800) 55%, var(--sky-500) 130%); --gradient-brand: linear-gradient(135deg, var(--blue-600) 0%, var(--sky-500) 100%); --scrim-hero: linear-gradient(180deg, rgba(8,19,33,.35) 0%, rgba(8,19,33,.78) 100%); /* ---- Typography ---- */ --font-display: "Sora", "Segoe UI", system-ui, sans-serif; --font-body: "Manrope", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; --ls-tight: -0.02em; --ls-eyebrow: 0.12em; --lh-heading: 1.15; --lh-body: 1.6; /* ---- Spacing / layout ---- */ --container-max: 1200px; --section-y: 96px; /* ---- Effects ---- */ --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(13, 27, 46, 0.06); --shadow-sm: 0 2px 8px rgba(13, 27, 46, 0.08); --shadow-md: 0 8px 24px rgba(13, 27, 46, 0.10); --shadow-lg: 0 18px 48px rgba(13, 27, 46, 0.14); --shadow-brand: 0 12px 30px rgba(36, 119, 238, 0.28); --shadow-accent: 0 12px 30px rgba(242, 106, 27, 0.28); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 380ms; } /* ═══ 2. PONT VERS LES VARIABLES HISTORIQUES ════════════════════════ Les 49 pages utilisent deja --navy, --blue, --font-h, etc. On les rebranche sur les tokens du DS : tout le site se re-teinte sans toucher au HTML. ─────────────────────────────────────────────────────────────────── */ :root { --navy: var(--navy-900); --navy-deep: var(--navy-900); --navy-light: var(--navy-700); --blue: var(--blue-500); --blue-light: var(--blue-400); /* --red et --gold portaient l'ambre des CTA. Le DS impose le bleu de marque en action primaire et reserve l'ember aux accents. */ --red: var(--blue-500); --red-dark: var(--blue-600); --gold: var(--ember-500); --gold-light: var(--ember-400); --green: var(--green-500); --amber: var(--amber-500); --bg: var(--surface-page); --bg-warm: var(--surface-sunken); --bg-alt: var(--surface-sunken); --white: var(--surface-card); --text: var(--text-body); --text-light: var(--gray-600); --text-muted: var(--gray-500); --border: var(--border-subtle); --border-light: var(--surface-sunken); --font-h: var(--font-display); --font-b: var(--font-body); --shadow-subtle: var(--shadow-xs); --shadow-card: var(--shadow-sm); --shadow-elevated: var(--shadow-md); --shadow-dramatic: var(--shadow-md); --shadow-float: var(--shadow-lg); --ease: var(--ease-standard); --radius: var(--radius-sm); } /* ═══ 3. FONDATIONS ═════════════════════════════════════════════════ */ body { font-family: var(--font-body); color: var(--text-body); line-height: var(--lh-body); background: var(--surface-page); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); } a { color: inherit; } :focus-visible { outline: 2px solid var(--blue-500); outline-offset: 2px; } ::selection { background: var(--blue-500); color: #fff; } .section { padding: var(--section-y) 0; } .section--alt { background: var(--surface-card); } .section--alt::before { margin-bottom: var(--section-y); } /* ═══ 4. HEADER — surface claire (spec DS Header) ═══════════════════ Le logo reel (/img/logo.svg) porte un lettrage bleu fonce #004ca8 : il etait illisible sur l'ancien bandeau navy. Fond clair = lisible. ─────────────────────────────────────────────────────────────────── */ .header { background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(150%) blur(10px); -webkit-backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--border-subtle); } .header-inner { height: 72px; } .header-nav a { font-family: var(--font-body); color: var(--text-body); font-size: .9375rem; font-weight: 600; border-radius: var(--radius-xs); } .header-nav a:hover { color: var(--text-strong); background: var(--surface-sunken); } .header-phone { font-family: var(--font-body); color: var(--text-strong); font-weight: 700; border-radius: var(--radius-xs); } .header-phone:hover { color: var(--text-strong); background: var(--surface-sunken); } .header-phone svg { color: var(--blue-600); } /* CTA header = Button variant="primary" du DS */ .header-cta { background: var(--blue-500); color: #fff; font-family: var(--font-body); font-weight: 700; padding: 11px 22px; border-radius: var(--radius-md); box-shadow: var(--shadow-brand); transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard); } .header-cta:hover { background: var(--blue-600); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-brand); } /* Bouton menu mobile = IconButton variant="outline" du DS */ .mobile-toggle { border: 1px solid var(--border-default); background: var(--surface-card); border-radius: var(--radius-md); width: 40px; height: 40px; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease-standard); } .mobile-toggle:hover { background: var(--surface-sunken); } .mobile-toggle svg { color: var(--text-strong); } .nav-dropdown__menu { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .nav-dropdown__menu a { color: var(--text-body) !important; font-family: var(--font-body); } .nav-dropdown__menu a:hover { background: var(--blue-50); color: var(--text-link) !important; } /* ═══ 5. HERO — scrim navy vertical + contenu aligne a gauche ═══════ */ .hero-overlay { background: radial-gradient(120% 90% at 15% 20%, rgba(15,95,214,.34), transparent 60%), linear-gradient(180deg, rgba(8,19,33,.62) 0%, rgba(8,19,33,.86) 100%); } .hero-content { max-width: 760px; margin: 0; text-align: left; padding: 88px 0 84px; } .hero-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 700; font-size: .78rem; letter-spacing: .02em; color: #fff; padding: 8px 16px; margin-bottom: 22px; } .hero-badge svg { color: var(--sky-400); } .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 4.4vw, 3.375rem); line-height: 1.05; letter-spacing: var(--ls-tight); text-shadow: none; } .hero-subtitle { font-family: var(--font-body); font-size: 1.25rem; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 620px; margin: 20px 0 30px; } .hero-actions { justify-content: flex-start; } .breadcrumb { justify-content: flex-start; font-family: var(--font-body); } /* ═══ 6. BOUTONS (spec DS Button) ══════════════════════════════════ */ .btn { font-family: var(--font-body); font-weight: 700; font-size: 1.0625rem; line-height: 1; padding: 15px 30px; border-radius: var(--radius-md); gap: 10px; transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard); } /* variant="primary" */ .btn-red { background: var(--blue-500); color: #fff !important; border: 1px solid transparent; box-shadow: var(--shadow-brand); } .btn-red:hover { background: var(--blue-600); color: #fff !important; transform: translateY(-1px); box-shadow: var(--shadow-brand); } /* variant="outline" sur fond sombre */ .btn-ghost { background: rgba(255,255,255,.10); color: #fff !important; border: 1px solid rgba(255,255,255,.35); } .btn-ghost:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.6); transform: translateY(-1px); } /* ═══ 7. EN-TETES DE SECTION ═══════════════════════════════════════ */ .section-header h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.125rem); letter-spacing: var(--ls-tight); } /* Le DS structure ses sections en eyebrow -> titre -> lead, sans filet sous le titre. Le markup actuel n'a pas d'element eyebrow : on retire le filet (invention hors DS) en attendant de l'introduire. */ .section-header h2::after { display: none; } .section-header p { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.55; color: var(--text-body); max-width: 720px; } /* ═══ 8. CARTES (spec DS Card : radius-lg, ombre navy, lift -4px) ══ */ .service-card, .step-card, .cert-card, .testimonial-card, .feature-card, .gen-card, .zone-card, .tech-card, .value-card, .cert-box, .vmc-adv-card, .vmc-comp-card, .vmc-step-card, .vmc-vs-card, .vmc-related-card, .vmc-brand-card { border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); } .service-card:hover, .step-card:hover, .cert-card:hover, .gen-card:hover, .zone-card:hover, .tech-card:hover, .feature-card:hover, .vmc-adv-card:hover, .vmc-comp-card:hover, .vmc-related-card:hover { border-color: var(--border-subtle); box-shadow: var(--shadow-lg); transform: translateY(-4px); } /* Le DS n'utilise AUCUN filet colore en bordure de carte : la carte est blanche, filet 1px --border-subtle, rayon --radius-lg, ombre douce. On neutralise ici tous les filets 3-4px herites de style.css. */ .feature-card, .feature-card:nth-child(1), .feature-card:nth-child(2), .feature-card:nth-child(3), .feature-card:nth-child(4), .cert-box { border-left: 1px solid var(--border-subtle); } .tech-card, .tech-card:nth-child(1), .tech-card:nth-child(2), .tech-card:nth-child(3), .tech-card:nth-child(4), .value-card, .value-card:nth-child(1), .value-card:nth-child(2), .value-card:nth-child(3), .value-card:nth-child(4), .vmc-adv-card, .vmc-related-card, .vmc-vs-card, .vmc-step-card, .vmc-comp-card { border-top: 1px solid var(--border-subtle); } .vmc-vs-card, .vmc-vs-card--neuf, .vmc-vs-card--reno { border-left: 1px solid var(--border-subtle); } /* Encarts d'information : panneau teinte marque, rayon plein, pas de barre laterale (spec DS ExtraSections/Pricing, note Renolution). */ .vmc-primes-box, .vmc-peb-highlight { background: var(--color-brand-soft); border-left: none; border-radius: var(--radius-md); } /* Le DS ne souligne pas les titres. */ .container-narrow h3 { border-bottom: none; } .service-card h3, .step-card h3, .cert-card h3, .gen-card h3, .zone-card h3, .tech-card h3, .value-card h3, .feature-card h3, .service-card__body h3 { font-family: var(--font-display); letter-spacing: -0.01em; color: var(--text-strong); } /* ServiceCard : tags = composant Tag du DS (pilule blanche, pas de capitales) */ .service-tag { font-family: var(--font-body); font-size: .78rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--text-body); background: var(--surface-card); border: 1px solid var(--border-default); padding: 5px 11px; border-radius: var(--radius-pill); } .service-tags { gap: 8px; } .service-link { font-family: var(--font-body); font-weight: 700; font-size: .9375rem; color: var(--text-link); } .service-card:hover .service-link { color: var(--text-link-hover); } /* Pastilles d'icone — spec DS FeatureItem / CertCard : fond --blue-50, glyphe --blue-600. Une seule teinte, partout. `!important` assume : les pages generees posent des fonds de pastille en navy / ambre / vert soit dans leur propre