/* ========================================================================== Lucid Archviz — jetons de marque partagés Repris tels quels de grapheva/website (css/style.css) pour que l'en-tête et la galerie soient visuellement identiques au site. Palette et typographie viennent du guide « Grapheva Visual Identity » (2026). Le thème est porté par [data-theme] sur . Les deux pages de Lucid Archviz sont en clair — la maquette parce que son habillage 3D l'est, la galerie par choix — et aucune ne propose de bascule. Le bloc sombre reste la base dont le clair dérive : toute nouvelle surface doit donc être déclinée dans les DEUX blocs. ========================================================================== */ :root{ /* Palette brute — uniquement les hex du PDF de marque */ --c-primary: #111111; --c-secondary: #393a44; --c-tertiary: #7b8087; --c-slate: #4c5166; --c-charcoal: #1b1b1e; --c-light: #ededed; --c-white: #ffffff; --c-offwhite: #fafafa; --c-black: #000000; /* ---- Jetons sémantiques : thème SOMBRE (défaut) ---- */ --bg: var(--c-primary); --bg-elevated: var(--c-charcoal); --bg-elevated-hover: var(--c-secondary); --ink: var(--c-white); --ink-muted: var(--c-tertiary); --border: rgba(255,255,255,0.08); --surface-tint: rgba(255,255,255,0.06); --surface-tint-strong: rgba(255,255,255,0.22); --accent-fill: var(--c-white); --accent-fill-hover: var(--c-light); --accent-on-fill: var(--c-primary); --accent-text: var(--c-tertiary); --header-bg: rgba(17,17,17,.7); --header-bg-scrolled: rgba(17,17,17,.92); --header-blur: blur(14px); --grid-line: rgba(255,255,255,.035); --shadow-dropdown: 0 20px 40px rgba(0,0,0,.4); --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --container-w: 1240px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 18px; --ease: cubic-bezier(.16,.84,.44,1); } /* ---- Jetons sémantiques : thème CLAIR ---- */ :root[data-theme="light"]{ --bg: var(--c-offwhite); --bg-elevated: var(--c-light); --bg-elevated-hover: #e2e2e2; --ink: var(--c-primary); --ink-muted: var(--c-tertiary); --border: rgba(17,17,17,0.1); --surface-tint: rgba(17,17,17,0.05); --surface-tint-strong: rgba(17,17,17,0.18); --accent-fill: var(--c-primary); --accent-fill-hover: var(--c-secondary); --accent-on-fill: var(--c-white); --accent-text: var(--c-secondary); /* Verre : nettement plus transparent qu'en sombre, et un flou saturé qui ravive ce qui passe dessous — c'est la saturation qui fait lire la plaque comme du verre plutôt que comme un voile blanc. */ --header-bg: rgba(250,250,250,.52); --header-bg-scrolled: rgba(250,250,250,.62); --header-blur: blur(20px) saturate(180%); --grid-line: rgba(17,17,17,.045); --shadow-dropdown: 0 20px 40px rgba(17,17,17,.12); } /* ========================================================================== Boutons (repris du site) ========================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 15px 26px; font-family: var(--font-sans); font-size:.94rem; font-weight:600; border-radius: var(--radius-sm); border: 1px solid transparent; transition: transform .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); white-space: nowrap; } .btn svg{ transition: transform .25s var(--ease); } .btn:hover{ transform: translateY(-2px); } .btn:hover svg{ transform: translateX(3px); } .btn-accent{ background: var(--accent-fill); color: var(--accent-on-fill); } .btn-accent:hover{ background: var(--accent-fill-hover); } .btn-outline{ background: transparent; color: var(--ink); border-color: var(--surface-tint-strong); } .btn-outline:hover{ border-color: var(--accent-fill); background: var(--surface-tint); } .btn-sm{ padding: 10px 20px; font-size:.85rem; }