/* * SmartOne — Atelier de la Maison Connectée * Design tokens v2 — Atelier warm (cream/or/ink) * Source : mockup-homepage-v2.html (validé 2026-05-08) * Pattern: Trust & Authority + Conversion (plugin ui-ux-pro-max) * Typo: Plus Jakarta Sans (Friendly SaaS pairing) */ :root { /* === Palette v2 — atelier warm === */ --so-bg: #FAF5F2; /* cream warm — fond de page */ --so-bg-soft: #F4ECE5; /* cream plus soutenu */ --so-surface: #FFFFFF; /* cards, blocs blancs */ --so-surface-alt: #FCF8F4; /* sections alternées */ --so-ink: #1C1917; /* noir chaud — texte principal & marque dominante */ --so-ink-2: #3A3631; /* texte secondaire profond */ --so-muted: #615C58; /* stone — texte secondaire (AA: 6.10 sur cream, 6.60 sur surface) */ --so-muted-soft: #78716C; /* stone clair — texte tertiaire / meta (AA borderline 4.43) */ --so-border: #EEEDED; /* bordures fines */ --so-border-strong:#D6D3D1; /* bordures marquées */ /* Accent doré — CTA principal - --so-gold : ambre vif, RÉSERVÉ aux fonds décoratifs et halos (badges, gold-soft tints, lueurs ink). Sur fond clair il ne passe pas WCAG AA en texte (3.18 sur white). - --so-gold-text : ambre profond, pour TOUT TEXTE en gold (eyebrow, links inline, tags inline). Passe AA sur cream/white/gold-soft. - --so-gold-cta : ambre profond, pour FONDS de boutons (texte white dessus atteint 5.02 AA). C'est l'ancien --so-gold-hover. */ --so-gold: #D97706; /* ambre vif (fonds décor / halos) */ --so-gold-text: #9A4F08; /* ambre profond TEXTE (AA: 5.55 cream, 6.01 white) */ --so-gold-cta: #B45309; /* ambre profond FOND bouton (white = 5.02 AA) */ --so-gold-hover: #8B3A0A; /* ambre très profond (hover : 7.17 cream) */ --so-gold-soft: #FEF3E7; --so-gold-bright: #FBBF24; /* sur fond sombre uniquement */ /* Navy — RÉSERVÉ aux signaux trust + bandeau Pro/CD CONNECT */ --so-navy: #1E3A8A; --so-navy-soft: #EFF4FF; /* Sémantiques */ --so-success: #15803D; --so-success-soft: #ECFDF5; --so-error: #DC2626; --so-error-soft: #FEF2F2; --so-info: #1E3A8A; /* === Aliases rétro-compatibles === L'ancien thème référençait --so-navy/--so-amber/--so-cream/--so-text/--so-blue/--so-light-blue. On remappe vers la palette v2 pour que les CSS existants prennent la nouvelle teinte immédiatement, le temps de les refactorer. */ --so-text: var(--so-ink); --so-text-mute: var(--so-muted); --so-cream: var(--so-bg); --so-light-gray: var(--so-bg-soft); --so-amber: var(--so-gold); --so-pale-amber: var(--so-gold-soft); --so-blue: var(--so-navy); /* ex-CTA bleu → navy seulement en zone B2B */ --so-light-blue: var(--so-muted-soft); --so-pale-blue: var(--so-bg-soft); --so-green: var(--so-success); --so-pale-green: var(--so-success-soft); --so-white: var(--so-surface); /* Aliases Bootstrap remap */ --bs-primary: var(--so-ink); --bs-primary-rgb: 28, 25, 23; --bs-secondary: var(--so-gold); --bs-secondary-rgb: 217, 119, 6; --bs-body-color: var(--so-ink); --bs-body-bg: var(--so-bg); --bs-link-color: var(--so-gold); --bs-link-hover-color: var(--so-gold-hover); --bs-border-color: var(--so-border); /* === Typographie — Plus Jakarta Sans single-family === */ --so-font-stack: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --so-font-weight-light: 300; --so-font-weight-regular: 400; --so-font-weight-medium: 500; --so-font-weight-semibold: 600; --so-font-weight-bold: 700; /* === Espacement (multiples de 4px) === */ --so-space-1: 4px; --so-space-2: 8px; --so-space-3: 12px; --so-space-4: 16px; --so-space-5: 20px; --so-space-6: 24px; --so-space-8: 32px; --so-space-10: 40px; --so-space-12: 48px; --so-space-14: 56px; --so-space-16: 64px; --so-space-20: 80px; --so-space-24: 96px; /* === Radius — radius doux v2 === */ --so-radius-xs: 6px; --so-radius-sm: 10px; --so-radius-md: 16px; --so-radius-lg: 24px; --so-radius-xl: 36px; --so-radius-pill: 999px; /* === Ombres — warm-tinted === */ --so-shadow-1: 0 1px 2px rgba(28,25,23,.04), 0 2px 4px rgba(28,25,23,.04); --so-shadow-2: 0 2px 4px rgba(28,25,23,.04), 0 12px 24px -8px rgba(28,25,23,.10); --so-shadow-3: 0 4px 8px rgba(28,25,23,.05), 0 24px 48px -12px rgba(28,25,23,.16); --so-shadow-gold: 0 8px 24px -8px rgba(217,119,6,.4); /* === Animation === Vocabulaire motion (Emil Kowalski) : - ease-out (strong) pour les sorties / hover / feedback rapide - ease-in-out (strong) pour les mouvements sur écran - drawer pour les overlays / panneaux glissants */ --so-ease: cubic-bezier(.2,.7,.3,1); /* ease-out doux (legacy) */ --so-ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* ease-out-quart, snappy */ --so-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);/* mouvements on-screen */ --so-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-like overlays */ --so-duration-press: 120ms; /* :active feedback */ --so-duration-fast: 180ms; /* hover, tooltips */ --so-duration: 240ms; /* dropdowns, transitions UI */ --so-duration-slow: 400ms; /* modales, drawers */ /* === Layout === */ --so-container: 1240px; } /* Body baseline — applique la police globalement */ body { font-family: var(--so-font-stack); font-size: 16px; line-height: 1.6; color: var(--so-ink); background: var(--so-bg); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01"; } ::selection { background: var(--so-gold-soft); color: var(--so-ink); } /* Respect prefers-reduced-motion */ @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; } } /* Animation utilitaire — pulse pour dots de signal */ @keyframes so-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.6; } }