/* ============================================================ KEUROU XAM XAM — Design System v2.0 La Maison du Savoir · kxam.sn ============================================================ */ /* ── TOKENS ───────────────────────────────────────────────── */ :root { --green: #1B5E20; --green-mid: #2E7D32; --green-light: #4CAF50; --green-pale: #E8F5E9; --gold: #FFB300; --gold-light: #FFD54F; --gold-dark: #FF8F00; --navy: #0A1628; --navy-mid: #112240; --sidebar-bg: #0D2616; --bg: #F0F4F8; --surface: #FFFFFF; --surface-2: #F8FAFC; --border: #E2E8F0; --text: #0F172A; --muted: #64748B; --faint: #94A3B8; --risk-g: #16A34A; --risk-gb: #DCFCE7; --risk-y: #D97706; --risk-yb: #FEF9C3; --risk-o: #EA580C; --risk-ob: #FFEDD5; --risk-r: #DC2626; --risk-rb: #FEE2E2; --sidebar-w: 268px; --sidebar-text:#C8E6C9; --r-sm: 6px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px; --shadow-xs: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04); --shadow-sm: 0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -1px rgba(0,0,0,.05); --shadow-md: 0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -2px rgba(0,0,0,.05); --shadow-lg: 0 20px 25px -5px rgba(0,0,0,.10),0 10px 10px -5px rgba(0,0,0,.04); --glow-green: 0 0 0 3px rgba(27,94,32,.18); --glow-gold: 0 0 0 3px rgba(255,179,0,.25); --ease: cubic-bezier(.4,0,.2,1); --ease-apple: cubic-bezier(0.25, 0.1, 0.25, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --t1:.15s var(--ease); --t2:.25s var(--ease); --t3:.35s var(--ease); } /* Future dark-mode preparation — variables only, pas appliquées tant que `data-theme="dark"` n'est pas posé sur . */ /* [data-theme="dark"] { --bg: #0B0F19; --surface: #111827; --surface-2: #1F2937; --border: #2A3344; --text: #E5E7EB; --muted: #94A3B8; --faint: #64748B; } */ /* ── RESET ────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{font-size:16px;scroll-behavior:smooth} body{ font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg);color:var(--text);line-height:1.6; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; font-feature-settings:'kern' 1,'liga' 1; text-rendering:optimizeLegibility; min-height:100vh; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} button{font-family:inherit;cursor:pointer;border:none;background:none} input,textarea,select{font-family:inherit;font-size:inherit} ul,ol{list-style:none} ::-webkit-scrollbar{width:5px;height:5px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#CBD5E1;border-radius:var(--r-full)} ::-webkit-scrollbar-thumb:hover{background:#94A3B8} /* ── APP LAYOUT ───────────────────────────────────────────── */ .kxam-app{display:flex;min-height:100vh} .kxam-main{flex:1;margin-left:var(--sidebar-w);display:flex;flex-direction:column;min-height:100vh;transition:margin-left var(--t3)} .kxam-content{flex:1;padding:28px 32px;max-width:1400px;width:100%} /* ── SIDEBAR ──────────────────────────────────────────────── */ .kxam-sidebar{ position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh; background:var(--sidebar-bg); display:flex;flex-direction:column;z-index:1000;overflow:hidden; transition:transform var(--t3); } /* kente stripe */ .kxam-sidebar::after{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--green-light) 0%,var(--gold) 33%,var(--green-light) 66%,var(--gold) 100%); } /* ambient light */ .kxam-sidebar::before{ content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 0%,rgba(255,179,0,.05) 0%,transparent 60%); } .sb-logo{ padding:28px 20px 20px; display:flex;align-items:center;gap:12px; border-bottom:1px solid rgba(255,255,255,.06); position:relative; } .sb-logo-mark{ width:44px;height:44px;border-radius:12px;flex-shrink:0; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex;align-items:center;justify-content:center;font-size:22px; box-shadow:0 4px 14px rgba(255,179,0,.35); } .sb-logo-title{font-size:14.5px;font-weight:800;color:#fff;letter-spacing:.2px;line-height:1.2} .sb-logo-sub{font-size:11px;color:var(--sidebar-text);opacity:.55;margin-top:2px} .sb-school{ margin:14px 12px 0;padding:11px 14px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07); border-radius:var(--r-md);display:flex;align-items:center;gap:10px; } .sb-school-ico{ width:30px;height:30px;border-radius:8px;flex-shrink:0;font-size:15px; background:rgba(76,175,80,.18);display:flex;align-items:center;justify-content:center; } .sb-school-name{font-size:12px;font-weight:700;color:#fff;line-height:1.3} .sb-school-role{font-size:10.5px;color:var(--gold);font-weight:700;margin-top:1px} .sb-nav{flex:1;overflow-y:auto;padding:14px 10px;scrollbar-width:none} .sb-nav::-webkit-scrollbar{display:none} .sb-section{ font-size:9.5px;font-weight:800;color:rgba(255,255,255,.28); letter-spacing:1.4px;text-transform:uppercase; padding:12px 10px 6px; } .sb-item{ display:flex;align-items:center;gap:10px; padding:9px 12px;border-radius:var(--r-md); color:var(--sidebar-text);font-size:13px;font-weight:600; cursor:pointer;transition:all var(--t2);position:relative; margin-bottom:2px;white-space:nowrap; } .sb-item-ico{ width:32px;height:32px;border-radius:9px;flex-shrink:0;font-size:16px; background:rgba(255,255,255,.06); display:flex;align-items:center;justify-content:center; transition:all var(--t2); } .sb-item:hover{background:rgba(255,255,255,.07);color:#fff} .sb-item:hover .sb-item-ico{background:rgba(255,255,255,.11)} .sb-item.active{background:rgba(255,179,0,.11);color:var(--gold)} .sb-item.active .sb-item-ico{background:rgba(255,179,0,.18)} .sb-item.active::before{ content:'';position:absolute;left:0;top:7px;bottom:7px; width:3px;background:var(--gold);border-radius:0 var(--r-full) var(--r-full) 0; } .sb-badge{ margin-left:auto;background:var(--gold);color:#000; font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:var(--r-full); } .sb-footer{padding:12px;border-top:1px solid rgba(255,255,255,.06)} .sb-user{ display:flex;align-items:center;gap:10px;padding:10px 10px; border-radius:var(--r-md);cursor:pointer;transition:background var(--t2); } .sb-user:hover{background:rgba(255,255,255,.06)} .sb-avatar{ width:36px;height:36px;border-radius:var(--r-full);flex-shrink:0; background:linear-gradient(135deg,var(--green-mid),var(--green-light)); display:flex;align-items:center;justify-content:center; font-weight:800;font-size:13px;color:#fff; border:2px solid rgba(255,255,255,.14); } .sb-user-name{font-size:12.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sb-user-role{font-size:10.5px;color:var(--sidebar-text);opacity:.55} .sb-logout{color:rgba(255,255,255,.3);font-size:17px;transition:color var(--t1);margin-left:auto} .sb-user:hover .sb-logout{color:rgba(255,255,255,.65)} /* ── TOP NAV ──────────────────────────────────────────────── */ .kxam-topnav{ position:sticky;top:0;z-index:100;height:62px; background:rgba(240,244,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--border); padding:0 32px;display:flex;align-items:center;gap:14px; } .tn-title{font-size:17px;font-weight:800;color:var(--text);flex:1} .tn-title small{font-size:13px;font-weight:400;color:var(--muted);margin-left:8px} .tn-btn{ width:38px;height:38px;border-radius:var(--r-full); background:var(--surface);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:17px;color:var(--muted);cursor:pointer;transition:all var(--t2);position:relative; } .tn-btn:hover{background:var(--green-pale);border-color:var(--green-light);color:var(--green)} .tn-dot{ position:absolute;top:7px;right:7px;width:7px;height:7px; background:var(--gold);border-radius:50%;border:2px solid var(--bg); } .mobile-toggle{ display:none;width:38px;height:38px;align-items:center;justify-content:center; border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border); font-size:19px;cursor:pointer;color:var(--muted); } /* ── PAGE HEADER ──────────────────────────────────────────── */ .page-header{ margin-bottom:24px;display:flex;align-items:flex-end; justify-content:space-between;gap:16px;flex-wrap:wrap; } .page-title{font-size:24px;font-weight:800;color:var(--text);line-height:1.2} .page-sub{font-size:13.5px;color:var(--muted);margin-top:3px;font-weight:500} /* ── KPI GRID ─────────────────────────────────────────────── */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;margin-bottom:28px} .kpi{ background:var(--surface);border-radius:var(--r-lg); padding:20px 24px;box-shadow:var(--shadow-sm);border:1px solid var(--border); position:relative;overflow:hidden;transition:all var(--t2);cursor:default; } .kpi::before{ content:'';position:absolute;top:0;left:0;right:0;height:3px; background:var(--kpi-accent,var(--green-light));border-radius:var(--r-lg) var(--r-lg) 0 0; } .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .kpi-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .kpi-ico{ width:42px;height:42px;border-radius:var(--r-md);font-size:20px; display:flex;align-items:center;justify-content:center; background:color-mix(in srgb,var(--kpi-accent,var(--green-light)) 14%,transparent); color:var(--kpi-accent,var(--green-light)); } .kpi-pill{ font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:var(--r-full); } .kpi-up {background:#DCFCE7;color:#16A34A} .kpi-down{background:#FEE2E2;color:#DC2626} .kpi-neu {background:#F1F5F9;color:#64748B} .kpi-val{font-size:30px;font-weight:800;color:var(--text);line-height:1;margin-bottom:3px} .kpi-lbl{font-size:12.5px;color:var(--muted);font-weight:600} .kpi-hint{font-size:11.5px;color:var(--faint);margin-top:4px} .kpi-g{--kpi-accent:var(--green-light)} .kpi-gold{--kpi-accent:var(--gold)} .kpi-b{--kpi-accent:#3B82F6} .kpi-p{--kpi-accent:#8B5CF6} .kpi-r{--kpi-accent:#EF4444} .kpi-t{--kpi-accent:#14B8A6} .kpi-o{--kpi-accent:#F97316} /* ── CARD ─────────────────────────────────────────────────── */ .card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);box-shadow:var(--shadow-xs);overflow:hidden} .card-head{ padding:18px 24px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; } .card-head-title{font-size:14.5px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:8px} .card-body{padding:24px} .card-foot{padding:14px 24px;border-top:1px solid var(--border);background:var(--surface-2);font-size:12.5px;color:var(--muted)} .card-hero{ background:linear-gradient(135deg,var(--navy) 0%,#0F2C10 50%,var(--green) 100%); color:#fff;border:none;position:relative;overflow:hidden;border-radius:var(--r-xl); padding:32px;margin-bottom:28px; } .card-hero::before{content:'';position:absolute;top:-50px;right:-50px;width:220px;height:220px;border-radius:50%;background:rgba(255,179,0,.07)} .card-hero::after{content:'';position:absolute;bottom:-70px;left:-40px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.04)} .card-hero h2{font-size:21px;font-weight:800;position:relative;margin-bottom:6px} .card-hero p{font-size:13.5px;opacity:.75;position:relative;max-width:480px;line-height:1.6} .hero-stats{display:flex;gap:32px;margin-top:20px;position:relative;flex-wrap:wrap} .hero-stat-val{font-size:26px;font-weight:800;color:var(--gold);line-height:1} .hero-stat-lbl{font-size:11.5px;opacity:.65;margin-top:3px} /* ── GRID HELPERS ─────────────────────────────────────────── */ .g2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .ga{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .flex{display:flex}.flex-between{display:flex;align-items:center;justify-content:space-between} .flex-center{display:flex;align-items:center;justify-content:center} .ai-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px} .mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}.mt-4{margin-top:16px}.mt-6{margin-top:24px} .w-full{width:100%}.text-right{text-align:right}.text-center{text-align:center} .text-muted{color:var(--muted)}.text-faint{color:var(--faint)}.text-sm{font-size:12.5px} .text-xs{font-size:11.5px}.text-bold{font-weight:800}.text-green{color:var(--green)} .text-gold{color:var(--gold)}.text-red{color:var(--risk-r)}.pointer{cursor:pointer} .d-none{display:none!important}.opacity-5{opacity:.5} /* ── TABLE ────────────────────────────────────────────────── */ .tbl-wrap{overflow-x:auto;border-radius:var(--r-md)} table{width:100%;border-collapse:collapse;font-size:13.5px} thead{background:var(--surface-2)} thead th{ padding:11px 16px;text-align:left;font-size:10.5px;font-weight:800; color:var(--muted);letter-spacing:.7px;text-transform:uppercase; white-space:nowrap;border-bottom:2px solid var(--border); } tbody tr{border-bottom:1px solid var(--border);transition:background var(--t1)} tbody tr:last-child{border-bottom:none} tbody tr:hover{background:var(--surface-2)} tbody td{padding:12px 16px;color:var(--text);vertical-align:middle} .td-name{font-weight:700;display:flex;align-items:center;gap:10px} .td-ava{ width:32px;height:32px;border-radius:var(--r-full);flex-shrink:0; background:linear-gradient(135deg,var(--green-mid),var(--green-light)); display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:800;color:#fff; } /* ── TABS ─────────────────────────────────────────────────── */ .tabs{ border-bottom:2px solid var(--border);display:flex;gap:0; overflow-x:auto;scrollbar-width:none;margin-bottom:24px; } .tabs::-webkit-scrollbar{display:none} .tab-btn{ padding:13px 20px;font-size:13.5px;font-weight:700;color:var(--muted); cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px; white-space:nowrap;transition:all var(--t2); display:flex;align-items:center;gap:6px; background:none;border-top:none;border-left:none;border-right:none; font-family:inherit; } .tab-btn:hover{color:var(--green)} .tab-btn.active{color:var(--green);border-bottom-color:var(--green)} .tab-panel{display:none} .tab-panel.active{display:block;animation:fadeInUp .2s var(--ease)} .tabs-pills{ display:flex;gap:6px;background:var(--surface-2); border-radius:var(--r-full);padding:4px;border:1px solid var(--border); margin-bottom:24px;flex-wrap:wrap; } .tab-pill{ padding:7px 16px;border-radius:var(--r-full);font-size:12.5px; font-weight:700;color:var(--muted);cursor:pointer;transition:all var(--t2); background:none;white-space:nowrap;font-family:inherit;border:none; } .tab-pill:hover{color:var(--text)} .tab-pill.active{background:var(--green);color:#fff;box-shadow:var(--shadow-sm)} /* ── BUTTONS ──────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;gap:7px;padding:10px 20px; border-radius:var(--r-md);font-size:13.5px;font-weight:700; font-family:inherit;cursor:pointer;transition:all var(--t2); border:none;text-decoration:none;white-space:nowrap; } .btn-primary{ background:linear-gradient(135deg,var(--green-mid),var(--green));color:#fff; box-shadow:0 2px 8px rgba(27,94,32,.3); } .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(27,94,32,.4)} .btn-primary:active{transform:translateY(0)} .btn-gold{ background:linear-gradient(135deg,var(--gold),var(--gold-dark));color:#000; box-shadow:0 2px 8px rgba(255,179,0,.3); } .btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,179,0,.4)} .btn-outline{ background:transparent;border:1.5px solid var(--border);color:var(--muted); } .btn-outline:hover{border-color:var(--green);color:var(--green);background:var(--green-pale)} .btn-ghost{background:transparent;color:var(--muted);padding:8px 12px} .btn-ghost:hover{background:var(--surface-2);color:var(--text)} .btn-danger{background:#FEE2E2;color:#DC2626} .btn-danger:hover{background:#FECACA} .btn-sm{padding:6px 13px;font-size:12px;border-radius:8px} .btn-lg{padding:14px 28px;font-size:15px;border-radius:var(--r-lg)} .btn-icon{padding:8px;border-radius:var(--r-md)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important} /* ── FORMS ────────────────────────────────────────────────── */ .fg{margin-bottom:18px} .flabel{display:block;font-size:12.5px;font-weight:700;color:var(--text);margin-bottom:6px} .flabel .req{color:var(--gold-dark);margin-left:2px} .finput{ width:100%;padding:10px 14px;border:1.5px solid var(--border); border-radius:var(--r-md);font-size:14px;color:var(--text); background:var(--surface);transition:all var(--t2);outline:none; } .finput:hover{border-color:#CBD5E1} .finput:focus{border-color:var(--green);box-shadow:var(--glow-green)} .finput::placeholder{color:var(--faint)} .fhint{font-size:11.5px;color:var(--muted);margin-top:4px} .ferr{font-size:11.5px;color:var(--risk-r);margin-top:4px} select.finput{ appearance:none;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 13px center;padding-right:38px; } /* ── BADGES ───────────────────────────────────────────────── */ .badge{ display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:var(--r-full);font-size:11.5px;font-weight:700; } .badge-g{background:#DCFCE7;color:#15803D} .badge-y{background:#FEF9C3;color:#A16207} .badge-o{background:#FFEDD5;color:#C2410C} .badge-r{background:#FEE2E2;color:#B91C1C} .badge-b{background:#DBEAFE;color:#1D4ED8} .badge-p{background:#EDE9FE;color:#7C3AED} .badge-gray{background:#F1F5F9;color:#475569} .risk-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-full);font-size:12px;font-weight:700} .risk-vert {background:var(--risk-gb);color:var(--risk-g)} .risk-jaune {background:var(--risk-yb);color:var(--risk-y)} .risk-orange{background:var(--risk-ob);color:var(--risk-o)} .risk-rouge {background:var(--risk-rb);color:var(--risk-r)} /* ── SEARCH BAR ───────────────────────────────────────────── */ .search{position:relative;display:flex;align-items:center} .search-ico{position:absolute;left:12px;color:var(--faint);font-size:15px;pointer-events:none} .search .finput{padding-left:36px;background:var(--surface-2);border-color:transparent;min-width:230px} .search .finput:focus{background:var(--surface);border-color:var(--green)} /* ── FILTER BAR ───────────────────────────────────────────── */ .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:18px} .fsel{ appearance:none;background:var(--surface);border:1.5px solid var(--border); border-radius:var(--r-md);padding:8px 30px 8px 13px;font-size:12.5px; font-weight:600;font-family:inherit;color:var(--text);cursor:pointer;outline:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center; transition:border-color var(--t2); } .fsel:focus{border-color:var(--green)} /* ── MODAL ────────────────────────────────────────────────── */ .modal-bg{ position:fixed;inset:0;background:rgba(10,22,40,.55); backdrop-filter:blur(4px);z-index:2000; display:flex;align-items:flex-end;justify-content:center; padding:16px;opacity:0;visibility:hidden;transition:all var(--t2); } .modal-bg.open{opacity:1;visibility:visible} .modal-bg.open .modal-box{transform:translateY(0);opacity:1} .modal-box{ background:var(--surface);border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%;max-width:560px;max-height:92vh;overflow-y:auto; transform:translateY(40px);opacity:0;transition:all var(--t3); } @media(min-width:640px){ .modal-bg{align-items:center} .modal-box{border-radius:var(--r-xl);margin:auto} } .modal-head{ padding:22px 24px;border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; position:sticky;top:0;background:var(--surface);z-index:1; } .modal-title{font-size:16px;font-weight:800;color:var(--text)} .modal-close{ width:30px;height:30px;border-radius:var(--r-full); background:var(--surface-2);border:1px solid var(--border); display:flex;align-items:center;justify-content:center; font-size:17px;color:var(--muted);cursor:pointer;transition:all var(--t1); } .modal-close:hover{background:#FEE2E2;color:var(--risk-r)} .modal-body{padding:24px} .modal-foot{padding:14px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end} /* ── PROGRESS ─────────────────────────────────────────────── */ .pbar{height:7px;background:var(--border);border-radius:var(--r-full);overflow:hidden} .pbar-fill{ height:100%;border-radius:var(--r-full);transition:width .6s var(--ease); background:linear-gradient(90deg,var(--green-mid),var(--green-light)); } .pbar-fill.gold{background:linear-gradient(90deg,#FF8F00,var(--gold))} .pbar-fill.red {background:linear-gradient(90deg,#B91C1C,#EF4444)} .pbar-fill.blue{background:linear-gradient(90deg,#1D4ED8,#3B82F6)} /* ── STAT ROW ─────────────────────────────────────────────── */ .stat-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--border)} .stat-row:last-child{border-bottom:none} .stat-lbl{flex:1;font-size:13px;color:var(--muted);font-weight:600} .stat-val{font-weight:800;color:var(--text)} .stat-bar{flex:2} /* ── TIMELINE ─────────────────────────────────────────────── */ .timeline{display:flex;flex-direction:column} .tl-item{display:flex;gap:14px;padding-bottom:16px;position:relative} .tl-item::before{content:'';position:absolute;left:15px;top:30px;bottom:0;width:2px;background:var(--border)} .tl-item:last-child::before{display:none} .tl-dot{ width:32px;height:32px;border-radius:var(--r-full);flex-shrink:0; background:var(--surface-2);border:2px solid var(--border); display:flex;align-items:center;justify-content:center;font-size:14px;position:relative;z-index:1; } .tl-dot.g{background:#DCFCE7;border-color:#86EFAC} .tl-dot.gold{background:#FEF9C3;border-color:#FDE68A} .tl-dot.r{background:#FEE2E2;border-color:#FECACA} .tl-body{flex:1;padding-top:5px} .tl-title{font-size:13px;font-weight:700;color:var(--text)} .tl-sub{font-size:11.5px;color:var(--muted);margin-top:2px} .tl-time{font-size:11px;color:var(--faint);white-space:nowrap;padding-top:7px} /* ── EMPTY STATE ──────────────────────────────────────────── */ .empty{text-align:center;padding:48px 24px;color:var(--muted)} .empty-ico{font-size:44px;margin-bottom:14px;opacity:.4} .empty-ttl{font-size:15px;font-weight:700;color:var(--text);margin-bottom:6px} .empty-desc{font-size:13px;max-width:300px;margin:0 auto 18px;line-height:1.6} /* ── SKELETON ─────────────────────────────────────────────── */ .skel{ background:linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 50%,#E2E8F0 75%); background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--r-md); } .skel-line{height:13px;margin-bottom:7px} .skel-h{height:22px;width:55%;margin-bottom:10px} .skel-card{height:110px} .skel-row{height:46px;margin-bottom:3px;border-radius:6px} /* ── TOAST ────────────────────────────────────────────────── */ .toast-wrap{position:fixed;bottom:22px;right:22px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none} .toast{ display:flex;align-items:center;gap:11px; background:var(--navy);color:#fff;padding:12px 18px; border-radius:var(--r-lg);box-shadow:var(--shadow-lg); font-size:13px;font-weight:600;min-width:250px;max-width:370px; pointer-events:all;animation:slideInRight .3s var(--ease); border-left:4px solid var(--green-light); } .toast.error {border-left-color:#EF4444} .toast.warning{border-left-color:var(--gold)} .toast.info {border-left-color:#3B82F6} .toast-ico{font-size:16px;flex-shrink:0} .toast-msg{flex:1} .toast.hiding{animation:slideOutRight .3s var(--ease) forwards} /* ── ALERT ────────────────────────────────────────────────── */ .alert{display:flex;gap:11px;padding:14px 18px;border-radius:var(--r-md);font-size:13px;border:1px solid;margin-bottom:18px} .alert-ico{font-size:17px;flex-shrink:0;margin-top:1px} .alert-info {background:#DBEAFE;border-color:#BFDBFE;color:#1D4ED8} .alert-success{background:#DCFCE7;border-color:#BBF7D0;color:#15803D} .alert-warning{background:#FEF9C3;border-color:#FDE68A;color:#92400E} .alert-danger {background:#FEE2E2;border-color:#FECACA;color:#991B1B} /* ── ATTENDANCE ───────────────────────────────────────────── */ .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px} .cal-day{ aspect-ratio:1;border-radius:6px;display:flex;align-items:center;justify-content:center; font-size:11px;font-weight:700;cursor:default; } .cal-day.hdr{font-size:9.5px;color:var(--muted);background:none;font-weight:800} .cal-day.present{background:#DCFCE7;color:#15803D} .cal-day.absent {background:#FEE2E2;color:#B91C1C} .cal-day.late {background:#FEF9C3;color:#A16207} .cal-day.we {background:var(--surface-2);color:var(--faint)} .cal-day.empty {background:transparent} /* ── GRADE CHIP ───────────────────────────────────────────── */ .note{ display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:var(--r-md);font-size:14px;font-weight:800; } .note-ex{background:#DCFCE7;color:#15803D} .note-b {background:#DBEAFE;color:#1D4ED8} .note-p {background:#FEF9C3;color:#A16207} .note-in{background:#FFEDD5;color:#C2410C} .note-f {background:#FEE2E2;color:#B91C1C} /* ── AI CHAT ──────────────────────────────────────────────── */ .ai-chat{display:flex;flex-direction:column;height:500px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)} .ai-head{ background:linear-gradient(135deg,var(--navy),var(--green)); padding:14px 20px;display:flex;align-items:center;gap:11px; } .ai-head-ico{ width:36px;height:36px;border-radius:var(--r-full); background:rgba(255,179,0,.2);border:2px solid rgba(255,179,0,.35); display:flex;align-items:center;justify-content:center;font-size:18px; } .ai-head-name{font-weight:800;color:#fff;font-size:13.5px} .ai-head-status{font-size:11.5px;color:var(--gold)} .ai-dot{display:inline-block;width:6px;height:6px;background:var(--gold);border-radius:50%;margin-right:4px;animation:pulse 2s infinite} .ai-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px;background:#FAFBFC} .ai-msg{display:flex;gap:10px;animation:fadeInUp .2s var(--ease)} .ai-msg.user{flex-direction:row-reverse} .ai-msg-ava{width:30px;height:30px;border-radius:var(--r-full);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0} .ai-msg.bot .ai-msg-ava{background:linear-gradient(135deg,var(--navy),var(--green))} .ai-msg.user .ai-msg-ava{background:linear-gradient(135deg,var(--green-mid),var(--green-light))} .ai-bubble{max-width:76%;padding:10px 14px;border-radius:var(--r-lg);font-size:13.5px;line-height:1.6} .ai-msg.bot .ai-bubble{background:var(--surface);border:1px solid var(--border);border-radius:4px var(--r-lg) var(--r-lg) var(--r-lg);color:var(--text);box-shadow:var(--shadow-xs)} .ai-msg.user .ai-bubble{background:linear-gradient(135deg,var(--green-mid),var(--green));color:#fff;border-radius:var(--r-lg) 4px var(--r-lg) var(--r-lg)} .ai-bubble p{margin-bottom:6px}.ai-bubble p:last-child{margin-bottom:0} .ai-bubble strong{font-weight:800} .ai-bubble ul{padding-left:16px}.ai-bubble li{margin-bottom:3px;list-style:disc} .typing-dots{display:flex;gap:5px;align-items:center;padding:12px 16px} .typing-dots span{width:7px;height:7px;background:#94A3B8;border-radius:50%;animation:typing .8s ease-in-out infinite} .typing-dots span:nth-child(2){animation-delay:.15s} .typing-dots span:nth-child(3){animation-delay:.3s} .ai-quick{display:flex;gap:6px;flex-wrap:wrap;padding:0 16px 10px;background:var(--surface)} .ai-quick-btn{ padding:5px 11px;background:var(--surface-2);border:1px solid var(--border); border-radius:var(--r-full);font-size:11.5px;font-weight:600;color:var(--muted); cursor:pointer;transition:all var(--t2);white-space:nowrap;font-family:inherit; } .ai-quick-btn:hover{border-color:var(--green);color:var(--green);background:var(--green-pale)} .ai-foot{padding:14px;border-top:1px solid var(--border);background:var(--surface);display:flex;gap:10px;align-items:flex-end} .ai-foot textarea{ flex:1;resize:none;border:1.5px solid var(--border);border-radius:var(--r-md); padding:9px 13px;font-size:13.5px;font-family:inherit;outline:none; transition:border-color var(--t2);min-height:42px;max-height:110px; overflow-y:auto;line-height:1.5;color:var(--text);background:var(--surface); } .ai-foot textarea:focus{border-color:var(--green)} .ai-send{ width:42px;height:42px;border-radius:var(--r-md); background:linear-gradient(135deg,var(--green-mid),var(--green)); border:none;color:#fff;font-size:17px;cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all var(--t2);flex-shrink:0; } .ai-send:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(27,94,32,.4)} .ai-send:disabled{opacity:.45;transform:none;cursor:not-allowed} /* ── STUDENT CARD ─────────────────────────────────────────── */ .stu-card{background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border);overflow:hidden;transition:all var(--t2)} .stu-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .stu-head{ background:linear-gradient(135deg,var(--navy),var(--green)); padding:20px 22px;display:flex;align-items:center;gap:14px;color:#fff; } .stu-ava{ width:52px;height:52px;border-radius:var(--r-full);flex-shrink:0; background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.25); display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800; } .stu-name{font-size:16px;font-weight:800} .stu-id{font-size:11.5px;opacity:.65;margin-top:3px;font-family:monospace} .stu-body{padding:18px 22px} /* ── CHIP ─────────────────────────────────────────────────── */ .chip{ display:inline-flex;align-items:center;gap:5px; padding:5px 11px;border-radius:var(--r-full);font-size:12px;font-weight:700; background:var(--surface-2);border:1px solid var(--border);color:var(--muted);cursor:default; } .chip.on{background:var(--green-pale);border-color:var(--green-light);color:var(--green)} /* ── PAYMENT CARDS ────────────────────────────────────────── */ .pay-card{border:2px solid var(--border);border-radius:var(--r-md);padding:14px;cursor:pointer;transition:all var(--t2);display:flex;align-items:center;gap:11px} .pay-card:hover{border-color:var(--green);background:var(--green-pale)} .pay-card.sel{border-color:var(--green);background:var(--green-pale);box-shadow:var(--glow-green)} .pay-ico{width:40px;height:40px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px} /* ── LOGIN ────────────────────────────────────────────────── */ .login-page{min-height:100vh;display:flex;background:var(--navy)} .login-panel{ width:460px;background:var(--surface);display:flex;flex-direction:column; justify-content:center;padding:56px 52px;position:relative;z-index:1;box-shadow:var(--shadow-lg); } .login-bg{ flex:1;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden; background:linear-gradient(135deg,var(--navy) 0%,#0E2A0E 40%,var(--green) 100%); } .login-bg::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 70%,rgba(255,179,0,.06) 0%,transparent 50%),radial-gradient(ellipse at 70% 30%,rgba(76,175,80,.07) 0%,transparent 50%)} .login-bg-wrap{position:relative;text-align:center;color:#fff;padding:56px} .login-bg-ico{font-size:72px;margin-bottom:20px;filter:drop-shadow(0 6px 20px rgba(255,179,0,.3))} .login-bg-title{font-size:28px;font-weight:800;margin-bottom:10px} .login-bg-sub{font-size:14.5px;opacity:.68;max-width:340px;line-height:1.6} .login-logo{display:flex;align-items:center;gap:11px;margin-bottom:36px} .login-mark{ width:46px;height:46px;border-radius:12px; background:linear-gradient(135deg,var(--gold),var(--gold-dark)); display:flex;align-items:center;justify-content:center;font-size:24px; box-shadow:0 4px 14px rgba(255,179,0,.3); } .login-name{font-size:17px;font-weight:800;color:var(--green)} .login-tag{font-size:11.5px;color:var(--muted)} @media(max-width:768px){.login-panel{width:100%;padding:40px 28px}.login-bg{display:none}} /* ── CHART WRAPPER ────────────────────────────────────────── */ .chart-wrap{position:relative;height:210px} .chart-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;justify-content:center} .chart-leg-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);font-weight:600} .chart-leg-dot{width:10px;height:10px;border-radius:3px} /* ── KEUROU ID ────────────────────────────────────────────── */ .kxam-id{ font-family:'Courier New',monospace;font-size:11.5px;font-weight:700; color:var(--muted);background:var(--surface-2);border:1px solid var(--border); padding:2px 8px;border-radius:6px; } /* ── EMPLOI DU TEMPS GRID ─────────────────────────────────── */ .sched-wrap{overflow-x:auto;background:var(--surface);border-radius:var(--r-lg);border:1px solid var(--border)} .sched-grid{ display:grid;grid-template-columns:80px repeat(6,minmax(120px,1fr)); min-width:760px;font-size:12.5px; } .sched-hdr{ background:var(--surface-2);padding:14px 10px;text-align:center; font-size:11.5px;font-weight:800;color:var(--muted); text-transform:uppercase;letter-spacing:.6px; border-bottom:2px solid var(--border);position:sticky;top:0;z-index:1; } .sched-time-col{ background:var(--surface-2);padding:14px 8px; font-size:10.5px;font-weight:700;color:var(--faint); text-align:center;border-right:1px solid var(--border); border-bottom:1px solid var(--border); } .sched-cell{ padding:6px;min-height:80px;border-right:1px solid var(--border); border-bottom:1px solid var(--border);position:relative; display:flex;flex-direction:column;justify-content:flex-start;gap:4px; } .sched-block{ border-radius:8px;padding:8px 10px;color:#fff; font-weight:700;font-size:11.5px;line-height:1.3; box-shadow:0 1px 3px rgba(0,0,0,.08); cursor:default;transition:transform var(--t1); } .sched-block:hover{transform:translateY(-1px) scale(1.01)} .sched-block-sub{font-size:10px;font-weight:600;opacity:.85;margin-top:2px} .sched-block-room{font-size:10px;opacity:.7;margin-top:1px} /* Couleurs par matière (génératif via hash) */ .sched-block.s-math {background:linear-gradient(135deg,#1E40AF,#3B82F6)} .sched-block.s-fr {background:linear-gradient(135deg,#7C2D12,#EA580C)} .sched-block.s-en {background:linear-gradient(135deg,#5B21B6,#8B5CF6)} .sched-block.s-hg {background:linear-gradient(135deg,#831843,#EC4899)} .sched-block.s-svt {background:linear-gradient(135deg,#14532D,#16A34A)} .sched-block.s-pc {background:linear-gradient(135deg,#0E7490,#06B6D4)} .sched-block.s-eps {background:linear-gradient(135deg,#92400E,#F59E0B)} .sched-block.s-arts {background:linear-gradient(135deg,#9D174D,#F472B6)} .sched-block.s-civ {background:linear-gradient(135deg,#1F2937,#4B5563)} .sched-block.s-default {background:linear-gradient(135deg,#374151,#6B7280)} @media(max-width:640px){ .sched-grid{grid-template-columns:60px repeat(6,minmax(96px,1fr));font-size:11px} .sched-block{padding:6px 7px;font-size:10.5px} } /* ── PROGRAMME / CURRICULUM ───────────────────────────────── */ .curr-list{display:flex;flex-direction:column;gap:8px} .curr-item{ display:flex;align-items:center;gap:12px;padding:12px 14px; background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);transition:all var(--t2); } .curr-item:hover{border-color:var(--green-light)} .curr-item.done{background:var(--green-pale);border-color:var(--green-light)} .curr-checkbox{ width:22px;height:22px;border-radius:50%;flex-shrink:0; border:2px solid var(--border);background:var(--surface); display:flex;align-items:center;justify-content:center; cursor:pointer;transition:all var(--t2); font-size:13px;color:transparent; } .curr-checkbox:hover{border-color:var(--green)} .curr-item.done .curr-checkbox{ background:var(--green);border-color:var(--green);color:#fff; } .curr-num{ font-family:'Courier New',monospace;font-size:11px;font-weight:800; color:var(--muted);background:var(--surface-2); padding:2px 8px;border-radius:6px;flex-shrink:0; } .curr-name{flex:1;font-size:13.5px;font-weight:600;color:var(--text);line-height:1.4} .curr-item.done .curr-name{text-decoration:line-through;opacity:.7} .curr-due{font-size:11px;color:var(--muted);white-space:nowrap} .curr-due.late{color:var(--risk-r);font-weight:700} .curr-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:18px} .curr-summary-card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:16px 18px; } .curr-summary-subj{font-size:13px;font-weight:800;color:var(--text);margin-bottom:6px;display:flex;align-items:center;gap:8px} .curr-summary-stats{font-size:11.5px;color:var(--muted);margin-bottom:10px} .curr-summary-stats strong{color:var(--text);font-size:14px;font-weight:800} /* ── DIVIDER ──────────────────────────────────────────────── */ hr.div{border:none;border-top:1px solid var(--border);margin:20px 0} .div-text{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.5px} .div-text::before,.div-text::after{content:'';flex:1;border-top:1px solid var(--border)} /* ── SIDEBAR OVERLAY MOBILE ───────────────────────────────── */ .sb-overlay{display:none;position:fixed;inset:0;background:rgba(10,22,40,.5);z-index:1099;backdrop-filter:blur(2px)} .sb-overlay.open{display:block} /* ── ANIMATIONS ───────────────────────────────────────────── */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes fadeInUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} @keyframes slideInRight{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}} @keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}} @keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}} @keyframes typing{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}} .animate-in{animation:fadeInUp .3s var(--ease)} .loading{animation:spin .7s linear infinite} /* ── RESPONSIVE ───────────────────────────────────────────── */ @media(max-width:1024px){:root{--sidebar-w:240px}} @media(max-width:768px){ :root{--sidebar-w:0px} .kxam-sidebar{transform:translateX(-268px);width:268px;z-index:1100} .kxam-sidebar.open{transform:translateX(0)} .kxam-main{margin-left:0} .mobile-toggle{display:flex} .kpi-grid{grid-template-columns:repeat(2,1fr);gap:14px} .kxam-content{padding:16px} .kxam-topnav{padding:0 16px} .g2,.g3{grid-template-columns:1fr} .page-header{flex-direction:column;align-items:flex-start} .card-hero{padding:22px;border-radius:var(--r-lg)} .hero-stats{gap:20px} } @media(max-width:480px){ .kpi-grid{grid-template-columns:1fr 1fr} .kpi-val{font-size:24px} .page-title{font-size:20px} } /* ============================================================ POLISH — Apple-quality micro-interactions ============================================================ */ /* Selection style */ ::selection{background:var(--gold);color:var(--navy)} ::-moz-selection{background:var(--gold);color:var(--navy)} /* Focus visible (accessibilité — clavier seulement) */ *:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:4px; } button:focus:not(:focus-visible), a:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible){outline:none} /* KPI hover refiné avec courbe Apple */ .kpi{transition:transform .35s var(--ease-apple),box-shadow .35s var(--ease-apple),border-color var(--t2)} .kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:#CBD5E1} /* Card hover subtile */ .card{transition:box-shadow .25s var(--ease-apple),transform .25s var(--ease-apple)} /* Boutons : scale subtil sur active (feedback tactile) */ .btn{transition:transform .2s var(--ease-apple),box-shadow .2s var(--ease-apple),background var(--t2),color var(--t2),border-color var(--t2)} .btn:active:not(:disabled){transform:scale(0.98)} /* Liens sidebar : transition douce sur l'icône */ .sb-item-ico{transition:background .35s var(--ease-apple),color .35s var(--ease-apple),transform .35s var(--ease-apple)} .sb-item:hover .sb-item-ico{transform:scale(1.06)} .sb-item.active .sb-item-ico{transform:scale(1.04)} /* Loading state unifié — animation plus subtile */ .loading{ position:relative; pointer-events:none; animation:spin .9s var(--ease-apple) infinite; } .skel{animation:shimmer 1.6s var(--ease-apple) infinite} /* Toasts : courbe d'entrée plus naturelle */ .toast{animation:slideInRight .35s var(--ease-bounce)} .toast.hiding{animation:slideOutRight .25s var(--ease-apple) forwards} /* Modal : courbes raffinées */ .modal-bg{transition:opacity .25s var(--ease-apple),visibility .25s var(--ease-apple)} .modal-box{transition:transform .35s var(--ease-bounce),opacity .25s var(--ease-apple)} /* Inputs : transition fluide sur le focus */ .finput,.fsel{transition:border-color .2s var(--ease-apple),box-shadow .2s var(--ease-apple),background var(--t2)} /* Reduced motion — respecter les préférences système */ @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; } }