/* ═══════════════════════════════════════════════════════════════════════════ NECObot — jetons de conception (noir et blanc) Servi sous /theme/tokens.css. À charger après /theme/fonts/fonts.css et avant base.css, components.css ou overlay.css. Direction artistique (réponse q02 de NecoTho : « noir et blanc », chaîne Twitch necotho) : quasi-noir et blanc cassé, gris neutres, UNE seule couleur d'état : un rouge discret réservé aux erreurs et aux actions dangereuses. Succès, avertissement et info restent neutres et se distinguent par une icône et un texte (jamais par la couleur seule). Thèmes : · sombre par défaut ; clair si le système le demande (prefers-color-scheme: light) ; · choix explicite sur n'importe quel élément : data-theme="dark" ou data-theme="light" (sur pour toute la page, ou sur un bloc : les jetons dérivés sont recalculés). · Overlays OBS : jeu --overlay-* indépendant du thème du système (carte sombre par défaut, variante claire avec data-overlay="clair"). Chaque couleur sémantique a sa variante -rgb (triplet « R V B ») pour les transparences : background: rgb(var(--color-text-rgb) / .06); Les valeurs hexadécimales sont celles de brand.json ; outils/verifier-marque.js contrôle la concordance, les triplets et les contrastes (AA : 4,5:1 pour le texte, 3:1 pour les contours). ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1. Jetons communs aux deux thèmes ── */ :root { /* Polices (fonts/fonts.css), avec replis système */ --font-display: 'Space Grotesk', 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-body: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji'; --font-mono: ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', 'DejaVu Sans Mono', monospace; /* Graisses */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Échelle des tailles (1rem = 16 px) */ --fs-xs: 0.75rem; /* 12 px : mentions, pieds de tableau */ --fs-sm: 0.875rem; /* 14 px : libellés, texte dense */ --fs-md: 1rem; /* 16 px : texte courant */ --fs-lg: 1.125rem; /* 18 px : texte d'accroche */ --fs-xl: 1.375rem; /* 22 px : titre de carte */ --fs-2xl: 1.75rem; /* 28 px : titre de page */ --fs-3xl: 2.25rem; /* 36 px : grand titre */ --fs-4xl: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem); /* 40 à 56 px : vitrine */ /* Interlignes et approches */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-normal: 1.55; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.09em; /* petites capitales espacées (libellés, badges) */ /* Espacements (pas de 4 px) */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* Rayons : nets, un clin d'œil au pixel art */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Traits et focus */ --border-width: 1px; --focus-width: 2px; --focus-offset: 2px; --pixel: 4px; /* taille d'un « pixel » des motifs décoratifs */ --color-avatar-bg: #181818; /* fond de l'avatar de NecoTho (image fixe : même valeur dans les deux thèmes) */ /* Mouvement (remis à 0 si l'utilisateur réduit les animations, voir plus bas) */ --ease: cubic-bezier(0.2, 0, 0, 1); --ease-in: cubic-bezier(0.3, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* Plans (z-index) */ --z-sticky: 100; --z-nav: 200; --z-dropdown: 300; --z-modal: 1000; --z-toast: 1100; /* Mise en page du panel */ --nav-height: 3.5rem; --sidebar-width: 15rem; --content-max: 75rem; --control-height: 2.5rem; /* boutons et champs : cible tactile de 40 px */ --control-height-sm: 2rem; /* ── Overlays OBS (pensés pour une source navigateur 1920 × 1080 à l'échelle 1) ── Tailles en px : 1 px = 1 pixel de l'image du stream. Un spectateur regarde souvent en 720p ou sur téléphone : rien en dessous de --overlay-fs-min. */ --overlay-font-display: var(--font-display); --overlay-font-body: var(--font-body); --overlay-card-rgb: 12 12 12; --overlay-card-alpha: 0.86; --overlay-text: #f3f2ee; --overlay-text-rgb: 243 242 238; --overlay-text-muted: #c9c9c9; --overlay-text-muted-rgb: 201 201 201; --overlay-fill: #f3f2ee; --overlay-fill-rgb: 243 242 238; --overlay-on-fill: #0c0c0c; --overlay-danger: #f2766e; --overlay-danger-rgb: 242 118 110; /* Texte posé sur la vidéo (sans carte) : clair à contour noir, comme des sous-titres, quelle que soit la variante de carte */ --overlay-video-text: #f3f2ee; --overlay-video-text-rgb: 243 242 238; --overlay-video-halo-rgb: 0 0 0; /* Paliers de NECOThink (0-3, 4-7, 8-10, 11-13, 14-16, 17-20), du plus faible au plus fort */ --overlay-tier-1: #7a7a7a; --overlay-tier-2: #959595; --overlay-tier-3: #afafaf; --overlay-tier-4: #c8c8c8; --overlay-tier-5: #dfdfdf; --overlay-tier-6: #f3f2ee; --overlay-fs-min: 22px; /* plus petit texte autorisé à l'écran */ --overlay-fs-label: 22px; /* libellés en capitales (SONDAGE, NECOTHINK) */ --overlay-fs-body: 28px; /* options, avis, détails */ --overlay-fs-title: 36px; /* question, sujet du vote */ --overlay-fs-number: 56px; /* compte à rebours, pourcentages mis en avant */ --overlay-fs-hero: 120px; /* note finale */ --overlay-radius: 18px; --overlay-pad: 28px; --overlay-gap: 16px; --overlay-bar-height: 32px; --overlay-bar-radius: 6px; --overlay-stroke-width: 4px; /* contour du texte dessiné (canvas, SVG) : couleur --overlay-stroke */ --overlay-safe: 48px; /* marge minimale au bord de l'image */ --overlay-width: 640px; /* largeur conseillée d'une carte (sondage, vote) */ } /* ── 2. Thème sombre (par défaut) ── */ :root, [data-theme="dark"] { color-scheme: dark; --color-bg: #0f0f0f; --color-bg-rgb: 15 15 15; --color-bg-inset: #0a0a0a; --color-bg-inset-rgb: 10 10 10; --color-surface: #181818; --color-surface-rgb: 24 24 24; /* = fond de l'avatar */ --color-surface-2: #202020; --color-surface-2-rgb: 32 32 32; --color-surface-3: #262626; --color-surface-3-rgb: 38 38 38; --color-border: #2e2e2e; --color-border-rgb: 46 46 46; /* séparateurs (décoratif) */ --color-border-strong: #727272; --color-border-strong-rgb: 114 114 114; /* contour des champs (≥ 3:1) */ --color-text: #f3f2ee; --color-text-rgb: 243 242 238; --color-text-muted: #ababab; --color-text-muted-rgb: 171 171 171; --color-text-subtle: #949494; --color-text-subtle-rgb: 148 148 148; --color-brand: #f3f2ee; --color-brand-rgb: 243 242 238; --color-on-brand: #0f0f0f; --color-on-brand-rgb: 15 15 15; --color-success: #f3f2ee; --color-success-rgb: 243 242 238; --color-warning: #f3f2ee; --color-warning-rgb: 243 242 238; --color-info: #ababab; --color-info-rgb: 171 171 171; --color-danger: #f2766e; --color-danger-rgb: 242 118 110; --color-on-danger: #0f0f0f; --color-on-danger-rgb: 15 15 15; --color-focus: #f3f2ee; --color-focus-rgb: 243 242 238; --color-backdrop: rgb(0 0 0 / 0.66); --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.5); --shadow-md: 0 6px 18px rgb(0 0 0 / 0.45); --shadow-lg: 0 18px 50px rgb(0 0 0 / 0.6); } /* ── 3. Thème clair : demandé par le système (sauf choix explicite du sombre) ── */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --color-bg: #f4f3ef; --color-bg-rgb: 244 243 239; --color-bg-inset: #ebe9e4; --color-bg-inset-rgb: 235 233 228; --color-surface: #fcfbf9; --color-surface-rgb: 252 251 249; --color-surface-2: #efeee9; --color-surface-2-rgb: 239 238 233; --color-surface-3: #ffffff; --color-surface-3-rgb: 255 255 255; --color-border: #dcdad4; --color-border-rgb: 220 218 212; --color-border-strong: #858585; --color-border-strong-rgb: 133 133 133; --color-text: #141414; --color-text-rgb: 20 20 20; --color-text-muted: #525252; --color-text-muted-rgb: 82 82 82; --color-text-subtle: #686868; --color-text-subtle-rgb: 104 104 104; --color-brand: #141414; --color-brand-rgb: 20 20 20; --color-on-brand: #f4f3ef; --color-on-brand-rgb: 244 243 239; --color-success: #141414; --color-success-rgb: 20 20 20; --color-warning: #141414; --color-warning-rgb: 20 20 20; --color-info: #525252; --color-info-rgb: 82 82 82; --color-danger: #b3322b; --color-danger-rgb: 179 50 43; --color-on-danger: #ffffff; --color-on-danger-rgb: 255 255 255; --color-focus: #141414; --color-focus-rgb: 20 20 20; --color-backdrop: rgb(20 20 20 / 0.42); --shadow-sm: 0 1px 2px rgb(20 20 20 / 0.08); --shadow-md: 0 6px 18px rgb(20 20 20 / 0.10); --shadow-lg: 0 18px 50px rgb(20 20 20 / 0.18); } } /* ── 4. Thème clair : choix explicite (mêmes valeurs que le bloc 3) ── */ [data-theme="light"] { color-scheme: light; --color-bg: #f4f3ef; --color-bg-rgb: 244 243 239; --color-bg-inset: #ebe9e4; --color-bg-inset-rgb: 235 233 228; --color-surface: #fcfbf9; --color-surface-rgb: 252 251 249; --color-surface-2: #efeee9; --color-surface-2-rgb: 239 238 233; --color-surface-3: #ffffff; --color-surface-3-rgb: 255 255 255; --color-border: #dcdad4; --color-border-rgb: 220 218 212; --color-border-strong: #858585; --color-border-strong-rgb: 133 133 133; --color-text: #141414; --color-text-rgb: 20 20 20; --color-text-muted: #525252; --color-text-muted-rgb: 82 82 82; --color-text-subtle: #686868; --color-text-subtle-rgb: 104 104 104; --color-brand: #141414; --color-brand-rgb: 20 20 20; --color-on-brand: #f4f3ef; --color-on-brand-rgb: 244 243 239; --color-success: #141414; --color-success-rgb: 20 20 20; --color-warning: #141414; --color-warning-rgb: 20 20 20; --color-info: #525252; --color-info-rgb: 82 82 82; --color-danger: #b3322b; --color-danger-rgb: 179 50 43; --color-on-danger: #ffffff; --color-on-danger-rgb: 255 255 255; --color-focus: #141414; --color-focus-rgb: 20 20 20; --color-backdrop: rgb(20 20 20 / 0.42); --shadow-sm: 0 1px 2px rgb(20 20 20 / 0.08); --shadow-md: 0 6px 18px rgb(20 20 20 / 0.10); --shadow-lg: 0 18px 50px rgb(20 20 20 / 0.18); } /* ── 5. Jetons dérivés : redéclarés dans chaque portée de thème, sinon un bloc data-theme imbriqué hériterait des valeurs déjà calculées pour la racine ── */ :root, [data-theme] { --color-accent: var(--color-brand); /* pas de couleur d'accent : la marque est noir et blanc */ --color-accent-rgb: var(--color-brand-rgb); --color-hover: rgb(var(--color-text-rgb) / 0.06); --color-active: rgb(var(--color-text-rgb) / 0.1); --color-selected: rgb(var(--color-text-rgb) / 0.08); --color-danger-soft: rgb(var(--color-danger-rgb) / 0.12); --color-danger-line: rgb(var(--color-danger-rgb) / 0.6); --color-selection-bg: var(--color-text); /* sélection inversée */ --color-selection-text: var(--color-bg); --focus-ring: 0 0 0 var(--focus-offset) var(--color-bg), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus); /* Damier « pixel » très discret pour les fonds décoratifs (écran de connexion, vitrine) */ --texture-pixel: repeating-conic-gradient(rgb(var(--color-text-rgb) / 0.05) 0 25%, transparent 0 50%) 0 0 / calc(var(--pixel) * 2) calc(var(--pixel) * 2); } /* ── 6. Overlays OBS : variante claire et jetons dérivés ── */ [data-overlay="clair"] { --overlay-card-rgb: 243 242 238; --overlay-card-alpha: 0.94; --overlay-text: #141414; --overlay-text-rgb: 20 20 20; --overlay-text-muted: #474747; --overlay-text-muted-rgb: 71 71 71; --overlay-fill: #141414; --overlay-fill-rgb: 20 20 20; --overlay-on-fill: #f3f2ee; --overlay-danger: #b3322b; --overlay-danger-rgb: 179 50 43; --overlay-tier-1: #7a7a7a; --overlay-tier-2: #666666; --overlay-tier-3: #525252; --overlay-tier-4: #3e3e3e; --overlay-tier-5: #2a2a2a; --overlay-tier-6: #141414; } :root, [data-overlay] { --overlay-card: rgb(var(--overlay-card-rgb) / var(--overlay-card-alpha)); --overlay-border: rgb(var(--overlay-text-rgb) / 0.2); --overlay-track: rgb(var(--overlay-text-rgb) / 0.14); --overlay-shadow: 0 18px 48px rgb(0 0 0 / 0.45), 0 2px 6px rgb(0 0 0 / 0.35); /* Texte posé directement sur la vidéo : halo serré qui fait contour (toutes versions d'OBS) */ --overlay-text-shadow: 0 0 2px rgb(var(--overlay-video-halo-rgb) / 0.95), 0 0 4px rgb(var(--overlay-video-halo-rgb) / 0.85), 0 2px 12px rgb(var(--overlay-video-halo-rgb) / 0.7); --overlay-stroke: rgb(var(--overlay-video-halo-rgb) / 0.88); } /* ── 7. Animations réduites : durées à zéro (base.css coupe aussi les animations) ── */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }