/* ============================================================================ KAÏSA — assets/css/kaisa.css Design system central : couleurs, typographie, composants réutilisables. Polices système uniquement (le logiciel doit fonctionner sans connexion internet permanente, donc pas de dépendance à une police distante). ============================================================================ */ :root { /* --- Couleurs de marque --- */ --k-black: #1A1A1A; --k-black-soft: #262626; --k-orange: #F5820D; --k-orange-dark: #C96A0A; --k-orange-light: #FDECD8; --k-white: #FFFFFF; /* --- Neutres UI --- */ --k-bg: #F5F6F8; --k-surface: #FFFFFF; --k-border: #E4E4E8; --k-text: #1A1A1A; --k-text-muted: #6B6B70; --k-text-faint: #9A9AA0; /* --- États --- */ --k-success: #1F8B4C; --k-success-bg: #E7F6ED; --k-danger: #D64545; --k-danger-bg: #FBEAEA; --k-warning: #C98A0A; --k-warning-bg: #FDF3E0; /* --- Typo --- */ --k-font-display: Georgia, 'Times New Roman', 'DejaVu Serif', serif; --k-font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif; /* --- Ombres & rayons --- */ --k-radius-sm: 8px; --k-radius: 14px; --k-radius-lg: 22px; --k-shadow-sm: 0 1px 3px rgba(20,20,20,0.06); --k-shadow: 0 8px 24px rgba(20,20,20,0.08); --k-shadow-lg: 0 24px 60px rgba(20,20,20,0.18); } /* ========================================================================= THÈME SOMBRE — activé via Seuls les neutres (fond/texte/bordures/surfaces) changent : le noir et l'orange de marque restent identiques pour préserver l'identité Kaïsa. ========================================================================= */ html[data-theme="sombre"] { --k-bg: #121214; --k-surface: #1C1C1F; --k-border: #2E2E33; --k-text: #F2F2F3; --k-text-muted: #A7A7AD; --k-text-faint: #77777D; --k-orange-light: #3A2A18; --k-success-bg: #163625; --k-danger-bg: #3A2020; --k-warning-bg: #3A2E14; --k-shadow-sm: 0 1px 3px rgba(0,0,0,0.3); --k-shadow: 0 8px 24px rgba(0,0,0,0.35); --k-shadow-lg: 0 24px 60px rgba(0,0,0,0.5); } html[data-theme="sombre"] body { background: var(--k-bg); } html[data-theme="sombre"] ::-webkit-scrollbar-thumb { background: #3A3A40; } html[data-theme="sombre"] ::-webkit-scrollbar-thumb:hover { background: #4A4A52; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--k-font-body); color: var(--k-text); background: var(--k-bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--k-font-display); margin: 0; font-weight: 700; } p { margin: 0; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } /* Focus clavier visible partout (accessibilité) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--k-orange); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* --------------------------------------------------------------------- Logo mark (le "K" — réutilisé partout : login, sidebar, splash) --------------------------------------------------------------------- */ .k-logo-mark { display: inline-flex; align-items: center; justify-content: center; border-radius: 22%; flex-shrink: 0; } .k-logo-mark svg { display: block; } /* --------------------------------------------------------------------- Boutons --------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: var(--k-radius-sm); border: 1px solid transparent; font-size: 15px; font-weight: 600; transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease; white-space: nowrap; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--k-orange); color: var(--k-black); box-shadow: 0 4px 14px rgba(245,130,13,0.35); } .btn-primary:hover { background: var(--k-orange-dark); } .btn-dark { background: var(--k-black); color: var(--k-white); } .btn-dark:hover { background: var(--k-black-soft); } .btn-ghost { background: transparent; color: var(--k-text); border-color: var(--k-border); } .btn-ghost:hover { border-color: var(--k-text-faint); background: var(--k-bg); } .btn-block { width: 100%; } .btn-lg { padding: 16px 28px; font-size: 16px; } .btn:disabled { opacity: .5; cursor: not-allowed; transform: none; } /* --------------------------------------------------------------------- Champs de formulaire --------------------------------------------------------------------- */ .field { margin-bottom: 20px; text-align: left; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--k-text-muted); margin-bottom: 7px; text-transform: uppercase; letter-spacing: .04em; } .field input, .field select { width: 100%; padding: 13px 15px; border: 1.5px solid var(--k-border); border-radius: var(--k-radius-sm); font-size: 15px; color: var(--k-text); background: var(--k-white); transition: border-color .15s ease, box-shadow .15s ease; } .field input:focus, .field select:focus { border-color: var(--k-orange); outline: none; box-shadow: 0 0 0 4px var(--k-orange-light); } .field .hint { font-size: 12.5px; color: var(--k-text-faint); margin-top: 6px; } .field .erreur-msg { font-size: 12.5px; color: var(--k-danger); margin-top: 6px; display: none; } /* --------------------------------------------------------------------- Cartes / conteneurs --------------------------------------------------------------------- */ .card { background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius); box-shadow: var(--k-shadow-sm); } /* --------------------------------------------------------------------- Alertes / bandeaux de message --------------------------------------------------------------------- */ .alert { padding: 13px 16px; border-radius: var(--k-radius-sm); font-size: 14px; display: flex; align-items: center; gap: 10px; } .alert-danger { background: var(--k-danger-bg); color: var(--k-danger); } .alert-success { background: var(--k-success-bg); color: var(--k-success); } .alert-warning { background: var(--k-warning-bg); color: var(--k-warning); } /* --------------------------------------------------------------------- Badges de statut (pastilles) --------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; } .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .badge-success { background: var(--k-success-bg); color: var(--k-success); } .badge-danger { background: var(--k-danger-bg); color: var(--k-danger); } .badge-warning { background: var(--k-warning-bg); color: var(--k-warning); } .badge-neutral { background: var(--k-bg); color: var(--k-text-muted); } /* --------------------------------------------------------------------- Scrollbar discrète --------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #D5D5DA; border-radius: 10px; } ::-webkit-scrollbar-thumb:hover { background: #B8B8BE; }