/* ============================================ SoclAi - Base : Variables, Reset, Utilities Refonte sobre (style Limova) : violet doux, filets clairs, coins doux, beaucoup d'air. SCOPE : thème de l'APPLICATION PRINCIPALE (toutes les pages servies par head.php). Variables sans prefixe (--accent, --text-primary, --radius...). C'est LE systeme de reference pour la palette SoclAi. ============================================ */ :root { /* Surfaces */ --bg-primary: #ffffff; --bg-secondary: #fafafa; /* gris tres leger : entetes de table, pieds de carte */ --bg-card: #ffffff; --bg-card-hover: #f6f6f8; /* survol tres discret */ --bg-input: #f5f5f7; /* remplissage doux : champs, pills, badges neutres */ --bg-sidebar: #ffffff; /* sidebar blanche (style Limova) */ /* Filets (volontairement tres clairs) */ --border: #ececef; --border-light: #e3e3e7; /* Texte */ --text-primary: #1b1b22; /* presque-noir neutre */ --text-secondary: #5c5c68; --text-muted: #90909c; /* gris clair aere */ /* Accent - violet doux SoclAi (override par societe via head.php :root{--accent:...}). Variantes derivees via color-mix() pour appliquer le branding par societe sans JS. */ --accent: #6d5bd0; --accent-dark: color-mix(in srgb, var(--accent) 78%, black); --accent-hover: color-mix(in srgb, var(--accent) 88%, black); --accent-glow: color-mix(in srgb, var(--accent) 14%, transparent); --accent-soft: color-mix(in srgb, var(--accent) 9%, transparent); --accent-light: color-mix(in srgb, var(--accent) 50%, white); /* Champs de saisie (input / select / textarea + select custom) : teinte violette TRES legere + bordure visible, pour qu'on voie tout de suite que c'est interactif (affordance). Hover = bordure plus marquee + teinte un peu plus soutenue. Derivees de --accent -> suivent le branding societe. Le focus (plus fort : halo + fond blanc) reste defini cote composants. */ --field-bg: color-mix(in srgb, var(--accent) 6%, var(--bg-input)); --field-bg-hover: color-mix(in srgb, var(--accent) 9%, var(--bg-input)); --field-border: color-mix(in srgb, var(--accent) 28%, var(--border)); --field-border-hover: color-mix(in srgb, var(--accent) 48%, var(--border)); /* Interrupteurs (toggle) au repos : meme affordance que les champs -> piste teintee violet (au lieu d'un gris neutre) pour qu'on voie tout de suite que c'est activable. Hover = plus soutenu. L'etat actif (piste pleine --accent) reste defini cote composants. */ --toggle-off: color-mix(in srgb, var(--accent) 30%, var(--border-light)); --toggle-off-hover: color-mix(in srgb, var(--accent) 45%, var(--border-light)); --red: #ef4444; --danger: #e5484d; --danger-hover: #d13438; --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent); --success: #16a34a; --success-soft: color-mix(in srgb, var(--success) 12%, transparent); --warning: #ca8a04; --warning-soft: color-mix(in srgb, var(--warning) 12%, transparent); --info: #2f5bd6; --info-soft: color-mix(in srgb, var(--info) 12%, transparent); --geo: #12805c; /* vert/teal GEO (visibilite IA), distinct de --success */ --stop: #d05b5b; /* rouge bouton stop (chat/composer) */ --stop-hover: #b94e4e; /* Layout */ --sidebar-width: 248px; --sidebar-collapsed: 64px; --topbar-height: 64px; /* Radius (coins doux) */ --radius-sm: 8px; --radius-md: 10px; --radius: 12px; --radius-lg: 16px; --radius-pill: 999px; /* Ombres douces (calmes, jamais lourdes) */ --shadow-sm: 0 1px 2px rgba(20, 20, 40, 0.04); --shadow-md: 0 4px 16px rgba(20, 20, 40, 0.06); --shadow-lg: 0 16px 48px rgba(20, 20, 40, 0.10); /* Transitions */ --transition: all 0.18s ease; } /* Palette d'accent selectionnable (defaut societe + override user, cf. accent.php). La classe est posee sur par index.php : --accent surcharge :root, et toutes les variables derivees (--accent-dark / -hover / -glow / -soft / -light, --field-*, --toggle-*) se recalculent toutes seules. CSP : un hex inline est interdit -> chaque couleur vit dans une classe predefinie. */ html.accent--violet { --accent: #6d5bd0; } html.accent--indigo { --accent: #4763e4; } html.accent--azur { --accent: #0ea5e9; } html.accent--emeraude { --accent: #10b981; } html.accent--teal { --accent: #0d9488; } html.accent--orange { --accent: #ea580c; } html.accent--rouge { --accent: #e5484d; } html.accent--rose { --accent: #ec4899; } html.accent--magenta { --accent: #a855f7; } html.accent--citron { --accent: #ca8a04; } html.accent--noir { --accent: #1f2937; } /* Reset */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 15.5px; scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-secondary); display: flex; min-height: 100vh; min-height: 100dvh; /* mobile : suit la hauteur visible (barre d'URL). Sans ca le body deborde de la hauteur de la barre -> petit scroll residuel. */ overflow-x: hidden; -webkit-font-smoothing: antialiased; letter-spacing: -0.005em; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } input, select, textarea, button { font-family: inherit; font-size: inherit; } /* Scrollbar (discrete) */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } .empty-state { text-align: center; padding: 4.5rem 2rem; } .empty-state > i { font-size: 3rem; color: var(--text-muted); display: block; margin-bottom: 1rem; } .empty-state h2 { color: var(--text-primary); margin-bottom: 0.5rem; font-weight: 600; } .empty-state p { color: var(--text-muted); } .empty-state .btn { margin-top: 1.25rem; }