/* ============================================================================ PINLANE DESIGN SYSTEM v2 : « Precision Tooling » Fichier cœur : fonts, tokens light/dark, reset, base, composants canoniques. Source de vérité : DESIGN.md. Aucune couleur en dur hors de ce fichier. Architecture : pinlane.css → pinlane-staff.css / pinlane-client.css / pinlane-landing.css. Aucune autre feuille autorisée. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. FONTS : Geist + Geist Mono, variables, self-hosted -------------------------------------------------------------------------- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('./fonts/geist-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------------------------------------------------------------------------- 2. TOKENS : light (référence) puis dark. `data-theme` posé sur avant paint par le snippet inline de chaque page. -------------------------------------------------------------------------- */ :root { /* Neutres */ --page: #fafafa; --surface: #ffffff; --raised: #ffffff; --subtle: #f2f2f2; --line: #ebebeb; --line-strong: #d9d9d9; --text: #0a0a0a; --muted: #666666; --faint: #6f6f6f; /* AA : 5.0:1 sur --surface, 4.5:1 sur --subtle */ /* Accent (unique) */ --accent: #0070f3; --accent-strong: #0761d1; /* texte accent sur fond clair/-soft : AA (5.0:1+) */ --accent-soft: #e8f1fd; --accent-contrast: #ffffff; /* Statuts : fond -soft + texte plein, contraste AA garanti */ --success: #0f7b3c; --success-soft: #e6f4ea; --warning: #a35200; --warning-soft: #fff3e0; --danger: #cb2a2f; --danger-soft: #fdecec; --info: #0070f3; --info-soft: #e8f1fd; --info-strong: var(--accent-strong); /* Tenant (Fun Galaxy : logo seulement, accent = système) */ --tenant-accent: var(--accent); --tenant-accent-soft: var(--accent-soft); /* Data-viz catégoriel : ordre fixe, palette validée CVD+contraste (light) */ --chart-1: #0070f3; --chart-2: #0d9488; --chart-3: #c2410c; /* Typo */ --font-ui: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-data: 'Geist Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Forme */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; /* containers (cards majeures), échelle Astryx */ --radius-full: 9999px; /* Contrôles : échelle de hauteur unique (Astryx : sm/md/lg partagés par boutons, inputs, tabs). Adoption progressive. */ --h-sm: 28px; --h-md: 32px; --h-lg: 36px; /* États en VOILE (Astryx) : un overlay semi-transparent par-dessus le fond, identique pour toutes les variantes : pas de recoloration par thème. */ --overlay-hover: rgba(0, 0, 0, 0.05); --overlay-pressed: rgba(0, 0, 0, 0.1); /* Espacement (grille 4px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* Profondeur : bordure d'abord, ombre = surfaces flottantes uniquement */ --shadow-border: 0 0 0 1px var(--line); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.12); --backdrop: rgba(0, 0, 0, 0.4); /* Motion */ --ease: cubic-bezier(0.25, 0.1, 0.25, 1); --dur-fast: 120ms; --dur: 160ms; --dur-slow: 200ms; /* Extension du meme systeme (pas un systeme parallele) : les courbes CSS natives sont trop molles pour de l'interface, elles font trainer la fin du mouvement. Deux courbes fortes suffisent a tout couvrir. --ease-out-strong : entrees et retours d'action. Jamais d'ease-in sur de l'interface : ca demarre lentement au moment precis ou l'oeil regarde. --ease-in-out-strong : deplacement d'un point A a un point B (indicateur qui glisse d'un segment a l'autre). Durees : --dur-press pour ce qui se presse (vu des dizaines de fois par jour), --dur-enter pour une surface vue occasionnellement, --dur-exit TOUJOURS plus court que --dur-enter : a l'entree on decouvre, a la sortie on a deja decide. */ --ease-out-strong: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out-strong: cubic-bezier(0.77, 0, 0.175, 1); --dur-press: 160ms; --dur-move: 180ms; --dur-enter: 240ms; --dur-exit: 150ms; /* Layout */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; color-scheme: light; } [data-theme='dark'] { --page: #000000; --surface: #0a0a0a; --raised: #111111; --subtle: #1a1a1a; --line: #262626; --line-strong: #3d3d3d; --text: #ededed; --muted: #a1a1a1; --faint: #828282; /* AA : 4.6:1 sur --subtle #1a1a1a */ --accent: #3291ff; --accent-strong: #52a8ff; --accent-soft: #0d2137; /* #3291ff est trop clair pour du texte blanc (3.17:1), texte sombre = 6.2:1 */ --accent-contrast: #0a0a0a; --success: #3dd68c; --success-soft: #0e2517; --warning: #f5a623; --warning-soft: #2a1e05; --danger: #f75555; --danger-soft: #2c1213; --info: #3291ff; --info-soft: #0d2137; --info-strong: var(--accent-strong); /* Data-viz : steps recalés pour surface sombre (validés L 0.48-0.67) */ --chart-1: #3291ff; --chart-2: #0d9488; --chart-3: #ea580c; --shadow-border: 0 0 0 1px var(--line); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); /* Rim-light Astryx : en dark, les surfaces flottantes se détachent par un liseré blanc translucide interne, pas seulement par l'ombre. */ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); --shadow-overlay: 0 8px 30px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1); --backdrop: rgba(0, 0, 0, 0.6); /* Voiles d'état en dark = blancs (Astryx) */ --overlay-hover: rgba(255, 255, 255, 0.06); --overlay-pressed: rgba(255, 255, 255, 0.12); color-scheme: dark; } /* ---------------------------------------------------------------------------- 3. RESET + BASE -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font-ui); font-size: 14px; font-weight: 400; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--text); } h1 { font-size: 24px; } h2 { font-size: 20px; } h3 { font-size: 16px; } h4, h5, h6 { font-size: 14px; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } img, svg, canvas { max-width: 100%; display: block; } hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; } code, kbd, samp, pre { font-family: var(--font-data); font-size: 0.92em; } ::selection { background: var(--accent-soft); color: var(--text); } /* Scrollbars discrètes */ * { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-full); } *::-webkit-scrollbar-track { background: transparent; } /* Focus visible : tout élément interactif, les deux thèmes */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Data = mono + chiffres tabulaires */ .mono, .num { font-family: var(--font-data); font-variant-numeric: tabular-nums; } /* Utilitaire d'état partagé : le JS legacy (app-main.js) toggle `.hidden` sur les vues, steps et blocs. Les couches page ne doivent jamais poser de `display` avec une spécificité supérieure sur un élément togglé. */ .hidden { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------------------------------------------------------------------------- 4. BOUTONS : recettes canoniques (§6 DESIGN.md) Primaire = inversion (noir sur blanc / blanc sur noir), signature du système. -------------------------------------------------------------------------- */ /* NB : pas de `button.btn`, la spécificité (0,1,1) écraserait `.btn-primary`/`.btn-secondary` (0,1,0) sur les