/* ============================================================ Lenergy Group — Design System tokens ============================================================ Mini DS partagé entre lenergy.fr, lenergysmart.fr, lenergysolar.fr. À inclure en début de chaque feuille de style des 3 sites : Stratégie : - Tokens globaux dans :root (couleurs, typo, espacements) - Override d'accent par site via .ds-site-smart / .ds-site-solar placés sur ou - Components de base (.btn, .card, .badge, .ribbon...) ============================================================ */ :root { /* ---- Couleurs neutres (partagées) ---- */ --ds-ink: #14140f; /* charcoal — texte principal */ --ds-ink-2: #3f3f37; /* texte secondaire */ --ds-muted: #7a7a6e; /* texte tertiaire / labels */ --ds-surface: #ffffff; --ds-bg: #fafaf6; /* fond de page warm off-white */ --ds-bg-2: #f4f1e9; /* fond surfaces secondaires */ --ds-line: #e7e5dd; /* bordures */ --ds-line-2: #ebe9e0; --ds-dark: #14140f; /* fond panneaux sombres */ --ds-dark-2: #0a0a07; /* footer */ --ds-cream: #fafaf6; /* texte sur fond sombre */ /* ---- Accents par filiale ---- */ --ds-accent-holding: #5BA22D; /* lenergy.fr — vert */ --ds-accent-smart: #3B4FD4; /* lenergysmart.fr — bleu */ --ds-accent-solar: #D97706; /* lenergysolar.fr — orange */ /* Site actif : remplacé par classe .ds-site-* sur . Par défaut on est sur le holding. */ --ds-accent: var(--ds-accent-holding); --ds-accent-soft: color-mix(in oklch, var(--ds-accent), white 88%); --ds-accent-border: color-mix(in oklch, var(--ds-accent), white 70%); /* ---- Status / state colors ---- */ --ds-success: #5BA22D; --ds-warning: #9c6a1f; --ds-info: #3B4FD4; --ds-danger: #c44d3a; /* ---- Typographies ---- */ --ds-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --ds-font-serif: 'Fraunces', Georgia, serif; --ds-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* Échelle typo */ --ds-text-xs: 0.6875rem; /* 11 */ --ds-text-sm: 0.8125rem; /* 13 */ --ds-text-base: 0.9375rem; /* 15 */ --ds-text-lg: 1.0625rem; /* 17 */ --ds-text-xl: 1.25rem; /* 20 */ --ds-text-2xl: 1.5rem; /* 24 */ --ds-text-3xl: 2rem; /* 32 */ --ds-text-4xl: 2.5rem; /* 40 */ --ds-text-5xl: 3rem; /* 48 */ --ds-text-6xl: 4rem; /* 64 */ --ds-text-7xl: 4.5rem; /* 72 */ /* ---- Espacements (8px base) ---- */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-8: 32px; --ds-space-10: 40px; --ds-space-12: 48px; --ds-space-16: 64px; --ds-space-20: 80px; --ds-space-24: 96px; /* ---- Radius ---- */ --ds-radius-sm: 4px; --ds-radius: 6px; --ds-radius-md: 8px; --ds-radius-lg: 10px; --ds-radius-pill: 999px; /* ---- Shadows ---- */ --ds-shadow-sm: 0 1px 2px rgba(20,20,15,0.04); --ds-shadow: 0 4px 12px rgba(20,20,15,0.06); --ds-shadow-md: 0 8px 24px rgba(20,20,15,0.08); --ds-shadow-lg: 0 16px 40px -16px rgba(20,20,15,0.12); /* ---- Layout ---- */ --ds-container: 1320px; --ds-gutter: 32px; --ds-nav-height: 72px; /* ---- Motion ---- */ --ds-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ds-duration-fast: 120ms; --ds-duration: 200ms; --ds-duration-slow: 400ms; } /* ---- Site overrides ---- */ .ds-site-smart { --ds-accent: var(--ds-accent-smart); --ds-accent-soft: color-mix(in oklch, var(--ds-accent-smart), white 88%); --ds-accent-border: color-mix(in oklch, var(--ds-accent-smart), white 70%); } .ds-site-solar { --ds-accent: var(--ds-accent-solar); --ds-accent-soft: color-mix(in oklch, var(--ds-accent-solar), white 88%); --ds-accent-border: color-mix(in oklch, var(--ds-accent-solar), white 70%); } /* ============================================================ RESET + base ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--ds-font-sans); background: var(--ds-bg); color: var(--ds-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; text-wrap: pretty; } a { color: inherit; text-decoration: none; transition: color var(--ds-duration) var(--ds-ease); } img, svg, video { display: block; max-width: 100%; height: auto; } button { font: inherit; cursor: pointer; } /* ============================================================ Typography ============================================================ */ .ds-eyebrow { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ds-muted); } .ds-eyebrow-accent { color: var(--ds-accent); } .ds-h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; } .ds-h2 { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; } .ds-h3 { font-size: var(--ds-text-xl); font-weight: 600; line-height: 1.3; } .ds-serif { font-family: var(--ds-font-serif); font-style: italic; font-weight: 500; } .ds-mono { font-family: var(--ds-font-mono); } /* ============================================================ Layout primitives ============================================================ */ .ds-container { width: 100%; max-width: var(--ds-container); margin: 0 auto; padding: 0 var(--ds-gutter); } /* ============================================================ Buttons ============================================================ */ .ds-btn { display: inline-flex; align-items: center; gap: var(--ds-space-2); padding: 14px 24px; border-radius: var(--ds-radius); font-size: var(--ds-text-sm); font-weight: 600; border: 1px solid transparent; transition: all var(--ds-duration) var(--ds-ease); cursor: pointer; } .ds-btn--primary { background: var(--ds-ink); color: var(--ds-cream); } .ds-btn--primary:hover { background: #000; transform: translateY(-1px); } .ds-btn--accent { background: var(--ds-accent); color: var(--ds-cream); } .ds-btn--ghost { background: transparent; color: var(--ds-ink); border-color: var(--ds-ink); } .ds-btn--ghost:hover { background: var(--ds-ink); color: var(--ds-cream); } .ds-btn--link { background: transparent; color: var(--ds-ink); padding: 4px 0; border-bottom: 1px solid var(--ds-ink); border-radius: 0; } /* ============================================================ Badges ============================================================ */ .ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-2); font-family: var(--ds-font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; padding: 3px 8px; border-radius: var(--ds-radius-sm); } .ds-badge--accent { color: var(--ds-accent); background: var(--ds-accent-soft); } .ds-badge--warning { color: var(--ds-warning); background: #f5edd9; } .ds-badge--success { color: var(--ds-success); background: rgba(91,162,45,0.1); } /* ============================================================ Cards ============================================================ */ .ds-card { background: var(--ds-surface); border: 1px solid var(--ds-line); border-radius: var(--ds-radius-md); padding: var(--ds-space-6); transition: all var(--ds-duration) var(--ds-ease); } .ds-card--dark { background: var(--ds-dark); color: var(--ds-cream); border-color: rgba(255,255,255,0.08); } .ds-card--featured { background: var(--ds-dark); color: var(--ds-cream); } .ds-card:hover { border-color: var(--ds-ink); transform: translateY(-2px); } /* ============================================================ Nav shell — utility bar + main nav (commun aux 3 sites) ============================================================ */ .ds-utility-bar { background: var(--ds-dark); color: var(--ds-cream); font-size: var(--ds-text-xs); } .ds-utility-bar .ds-container { display: flex; justify-content: space-between; align-items: center; padding: var(--ds-space-2) var(--ds-gutter); } .ds-nav { background: var(--ds-bg); border-bottom: 1px solid var(--ds-line); position: sticky; top: 0; z-index: 100; } .ds-nav .ds-container { height: var(--ds-nav-height); display: flex; align-items: center; justify-content: space-between; } .ds-logo { display: flex; align-items: center; gap: var(--ds-space-3); } .ds-logo__mark { width: 32px; height: 32px; background: var(--ds-ink); border-radius: var(--ds-radius-sm); position: relative; } .ds-logo__mark::after { content: ""; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; background: var(--ds-accent); border-radius: 50%; } .ds-logo__brand { font-weight: 800; font-size: 17px; letter-spacing: 0.08em; } .ds-logo__sub { font-size: 9px; color: var(--ds-accent); letter-spacing: 0.22em; margin-top: 3px; font-weight: 700; } /* ============================================================ Ribbon impact — bandeau de KPIs (3 sites identique) ============================================================ */ .ds-ribbon { background: var(--ds-surface); border-top: 1px solid var(--ds-line); border-bottom: 1px solid var(--ds-line); padding: var(--ds-space-8) var(--ds-gutter); } .ds-ribbon__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-space-8); } .ds-ribbon__kpi { border-left: 1px solid var(--ds-line); padding-left: var(--ds-space-6); } .ds-ribbon__kpi:first-child { border-left: none; padding-left: 0; } .ds-ribbon__value { font-size: 26px; font-weight: 700; font-family: var(--ds-font-mono); line-height: 1; } .ds-ribbon__unit { font-size: 14px; color: var(--ds-muted); margin-left: 4px; } .ds-ribbon__label { font-size: var(--ds-text-xs); color: var(--ds-muted); margin-top: 6px; } .ds-ribbon__delta { color: var(--ds-accent); font-weight: 600; } /* ============================================================ Mega-menu V3 — 2-pane editorial ============================================================ */ .ds-megamenu { background: var(--ds-surface); border-bottom: 1px solid var(--ds-line); box-shadow: var(--ds-shadow-lg); } .ds-megamenu__inner { display: grid; grid-template-columns: 260px 1fr; padding: var(--ds-space-8) 0; min-height: 380px; } .ds-megamenu__tabs { border-right: 1px solid var(--ds-line); padding-right: var(--ds-space-6); } .ds-megamenu__tab { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-radius: var(--ds-radius); font-size: var(--ds-text-sm); color: var(--ds-ink-2); cursor: pointer; } .ds-megamenu__tab--active { background: var(--ds-ink); color: var(--ds-cream); font-weight: 600; } /* ============================================================ Footer ============================================================ */ .ds-footer { background: var(--ds-dark-2); color: rgba(250,250,246,0.7); padding: 64px 0 36px; } .ds-footer a:hover { color: var(--ds-accent); } /* ============================================================ Forms ============================================================ */ .ds-input { padding: 13px 16px; background: var(--ds-bg); border: 1px solid var(--ds-line); border-radius: var(--ds-radius); font-size: var(--ds-text-sm); font-family: inherit; width: 100%; transition: border-color var(--ds-duration) var(--ds-ease); } .ds-input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 3px var(--ds-accent-soft); } /* ============================================================ A11Y — Focus visible & prefers-reduced-motion ============================================================ */ *:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; } /* Skip link — masqué jusqu'au focus, obligatoire RGAA 12.7 */ .ds-skip-link { position: absolute; left: -9999px; top: 0; padding: 12px 20px; background: var(--ds-ink); color: var(--ds-cream); z-index: 9999; font-weight: 600; text-decoration: none; } .ds-skip-link:focus { left: 0; } /* Screen reader only — pour textes accessibles non visibles */ .ds-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Respecter prefers-reduced-motion — RGAA 13.8 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .ds-pulse { animation: none; } } /* ============================================================ Utilities ============================================================ */ .ds-divider { height: 1px; background: var(--ds-line); margin: var(--ds-space-8) 0; border: none; } .ds-pulse { animation: dsPulse 2s infinite; } @keyframes dsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* ============================================================ Responsive — collapse to single column under 1024px ============================================================ */ @media (max-width: 1024px) { .ds-megamenu__inner { grid-template-columns: 1fr; } .ds-megamenu__tabs { border-right: none; border-bottom: 1px solid var(--ds-line); padding-right: 0; padding-bottom: var(--ds-space-4); } .ds-ribbon__kpis { grid-template-columns: repeat(2, 1fr); gap: var(--ds-space-4); } } @media (max-width: 768px) { :root { --ds-gutter: 20px; } .ds-nav .ds-container { height: 60px; } .ds-ribbon__kpis { grid-template-columns: 1fr; } .ds-ribbon__kpi { border-left: none; padding-left: 0; border-top: 1px solid var(--ds-line); padding-top: var(--ds-space-3); } .ds-ribbon__kpi:first-child { border-top: none; padding-top: 0; } }