/* Les polices sont chargées depuis le des pages (chargement non bloquant) plutôt que par @import, qui retarde le rendu du texte. */ /* Systeme de design d'excellence - Plateforme EIE Maroc */ :root{ --bg:#F5F7F5; --surface:#FFFFFF; --surface-2:#F9FBF9; --ink:#121E17; --muted:#55665C; --faint:#86958B; --line:#E0E7E1; --line-strong:#C7D3C9; --accent:#2A664A; --accent-d:#1D4B36; --accent-soft:#E8F2EC; --clay:#A75F35; --ok:#24744E; --ok-bg:#E2F2E9; --warn:#A26F15; --warn-bg:#FDF3E3; --err:#B03C24; --err-bg:#FCE8E3; --info:#2D577F; --info-bg:#E7F0F8; --mono:ui-monospace,"Cascadia Code",Consolas,monospace; --font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --heading-font:'Outfit','Inter',-apple-system,sans-serif; --radius:14px; --shadow:0 4px 20px rgba(18,30,23,0.04),0 1px 3px rgba(18,30,23,0.03); --shadow-lg:0 12px 36px rgba(18,30,23,0.08),0 2px 6px rgba(18,30,23,0.04); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} a{color:var(--accent);text-decoration:none;transition:color .15s} a:hover{color:var(--accent-d);text-decoration:underline} h1,h2,h3,h4{margin:0;font-family:var(--heading-font);letter-spacing:-.02em;line-height:1.2} h1{font-size:28px;font-weight:800} h2{font-size:21px;font-weight:700} h3{font-size:16.5px;font-weight:700} p{margin:.4em 0} .mono{font-family:var(--mono)} .muted{color:var(--muted)} .faint{color:var(--faint)} .small{font-size:13px} .tiny{font-size:11.5px} .center{text-align:center} .row{display:flex;gap:12px;align-items:center} .row.wrap{flex-wrap:wrap} .spread{display:flex;justify-content:space-between;align-items:center;gap:12px} .grow{flex:1} .stack{display:flex;flex-direction:column;gap:14px} .hidden{display:none!important} /* ---- Focus visible ---- */ :focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px} button:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--accent);outline-offset:0} /* ---- App shell ---- */ .app{display:grid;grid-template-columns:248px 1fr;min-height:100vh} /* La barre latérale défile quand les entrées dépassent la hauteur d'écran (sans quoi les derniers liens et la déconnexion deviennent inaccessibles). */ .sidebar{background:var(--accent-d);color:#EAF3EC;padding:20px 14px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent} .sidebar::-webkit-scrollbar{width:7px} .sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:4px} .sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.45)} .sidebar::-webkit-scrollbar-track{background:transparent} .navlink{flex:0 0 auto} .sidebar .brand{display:flex;gap:10px;align-items:center;padding:6px 8px 16px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:10px} .sidebar .brand .logo{width:30px;height:30px;border-radius:8px;background:#EAF3EC;color:var(--accent-d);display:grid;place-items:center;font-weight:800;font-size:16px} .sidebar .brand b{font-size:14.5px;line-height:1.15} .sidebar .brand .role{font-size:11px;opacity:.8;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em} .navlink{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:9px;color:#DCEAE0;cursor:pointer;font-size:14px;font-weight:500} .navlink:hover{background:rgba(255,255,255,.08);text-decoration:none} .navlink.active{background:#EAF3EC;color:var(--accent-d);font-weight:700} .navlink .ic{width:18px;text-align:center} /* Le pied (utilisateur + déconnexion) reste accessible même menu défilé. */ .sidebar .foot{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px;position:sticky;bottom:0;background:var(--accent-d);flex:0 0 auto} .sidebar .foot .u{opacity:.9} .sidebar .foot button{margin-top:8px;width:100%} .main{padding:26px 30px;max-width:1180px} .pagehead{margin-bottom:20px} .pagehead .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:600} /* En dessous de 820px le menu passe en bandeau horizontal : ni hauteur fixe, ni défilement vertical, ni pied collant. */ @media(max-width:820px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;max-height:none;flex-direction:row;flex-wrap:wrap;overflow-x:auto;overflow-y:visible}.sidebar .foot{width:100%;position:static;margin-top:8px}} /* ---- Cards ---- */ .card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)} .card.pad{padding:18px} .card-h{padding:14px 18px;border-bottom:1px solid var(--line);font-weight:700;display:flex;justify-content:space-between;align-items:center} .card-b{padding:16px 18px} .grid{display:grid;gap:14px} .grid.c2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))} .grid.c3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} .grid.c4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))} /* ---- Stat tiles ---- */ .stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px} .stat .n{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .stat .l{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono)} /* ---- Buttons ---- */ button,.btn{font-family:inherit;font-size:14px;font-weight:600;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);padding:8px 14px;border-radius:9px;cursor:pointer;display:inline-flex;gap:7px;align-items:center;transition:.12s} button:hover,.btn:hover{border-color:var(--accent);text-decoration:none} button:disabled{opacity:.5;cursor:not-allowed} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d)} .btn-ghost{background:transparent;border-color:transparent} .btn-sm{padding:5px 10px;font-size:13px} .btn-danger{color:var(--err);border-color:#E7C4BA} .btn-danger:hover{background:var(--err-bg);border-color:var(--err)} /* ---- Badges / pills ---- */ .pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;font-family:var(--mono);padding:3px 9px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;border:1px solid transparent;white-space:nowrap} .pill::before{content:"";width:6px;height:6px;border-radius:50%} .pill.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok)}.pill.ok::before{background:var(--ok)} .pill.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn)}.pill.warn::before{background:var(--warn)} .pill.err{color:var(--err);background:var(--err-bg);border-color:var(--err)}.pill.err::before{background:var(--err)} .pill.info{color:var(--info);background:var(--info-bg);border-color:var(--info)}.pill.info::before{background:var(--info)} .pill.neutral{color:var(--muted);background:var(--surface-2);border-color:var(--line-strong)}.pill.neutral::before{background:var(--faint)} .tag{font-size:11px;font-family:var(--mono);color:var(--clay);background:rgba(167,95,53,0.12);padding:1px 6px;border-radius:5px} /* ---- Forms ---- */ label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px} input,select,textarea{width:100%;font-family:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink)} input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)} textarea{resize:vertical;min-height:70px} .field{margin-bottom:14px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:640px){.form-grid{grid-template-columns:1fr}} /* ---- Tables ---- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)} table{border-collapse:collapse;width:100%;font-size:14px} th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle} thead th{background:var(--surface-2);font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600} tbody tr:last-child td{border-bottom:0} tbody tr:hover{background:var(--surface-2)} td.num{font-variant-numeric:tabular-nums} /* ---- Section rapport ---- */ .section{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);margin-bottom:12px;overflow:hidden} .section .sh{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)} .section .sh .num{font-family:var(--mono);font-weight:700;color:var(--accent);font-size:13px} .section .sb{padding:14px 16px;white-space:pre-wrap;font-size:14px;line-height:1.6} .section .cites{padding:8px 16px 14px;display:flex;gap:6px;flex-wrap:wrap} /* ---- Misc ---- */ .divider{height:1px;background:var(--line);margin:18px 0} .empty{padding:40px;text-align:center;color:var(--faint)} .empty .big{font-size:34px;margin-bottom:8px} .toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:100;font-size:14px;max-width:360px;animation:slideup .2s} .toast.err{background:var(--err)} .toast.ok{background:var(--accent)} @keyframes slideup{from{transform:translateY(10px);opacity:0}} @keyframes spin{to{transform:rotate(360deg)}} .spinner{width:20px;height:20px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear;display:inline-block;vertical-align:middle;margin-right:8px} .modal-bg{position:fixed;inset:0;background:rgba(20,30,25,.45);display:grid;place-items:center;z-index:50;padding:20px} .modal{background:var(--surface);border-radius:14px;max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)} .modal .mh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center} .modal .mb{padding:20px} .modal .mf{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px} .steps{display:flex;gap:0;margin:8px 0 20px;flex-wrap:wrap} .steps .st{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--faint);padding:6px 14px 6px 0} .steps .st .dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--line-strong);display:grid;place-items:center;font-size:11px;font-weight:700;font-family:var(--mono)} .steps .st.done .dot{background:var(--accent);border-color:var(--accent);color:#fff} .steps .st.done{color:var(--accent);font-weight:600} .steps .st.cur .dot{border-color:var(--accent);color:var(--accent)} .steps .st.cur{color:var(--ink);font-weight:700} .progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden} .progress > i{display:block;height:100%;background:var(--accent);border-radius:999px} /* ---- Rich Admin Dashboard Styles ---- */ .stat.hero { background: linear-gradient(135deg, #1E4634 0%, #2F6B4F 100%); color: #FFFFFF; border: none; box-shadow: 0 4px 14px rgba(47, 107, 79, 0.25); } .stat.hero .n { color: #FFFFFF; } .stat.hero .l { color: #DCEAE0; opacity: 0.9; } .stat.hero .sub { color: #A8D5B5; font-size: 12px; margin-top: 4px; font-weight: 500; } .stat .sub { font-size: 12px; color: var(--muted); margin-top: 4px; } .trend-pill { font-size: 11px; font-family: var(--mono); padding: 2px 7px; border-radius: 6px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; } .trend-pill.up { background: rgba(44, 122, 84, 0.15); color: #1E6441; } .trend-pill.neutral { background: rgba(53, 96, 137, 0.12); color: #2B4E70; } .donut-container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 10px 0; } .donut-svg { transform: rotate(-90deg); border-radius: 50%; } .donut-legend { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 140px; } .donut-legend-item { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; } .donut-color-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; } .health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .health-item { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; } .health-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--surface); display: grid; place-items: center; font-size: 18px; border: 1px solid var(--line); } .status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .status-dot.active { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .status-dot.idle { background: var(--warn); } .bar-chart-wrap { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; } .bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; } .bar-label { width: 130px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-track { flex: 1; height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 5px; transition: width 0.4s ease; } .bar-val { width: 65px; text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink); } .timeline-stream { display: flex; flex-direction: column; gap: 10px; } .timeline-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 12px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); transition: .15s; } .timeline-row:hover { background: var(--surface-2); border-color: var(--line-strong); } .timeline-badge { padding: 3px 8px; border-radius: 6px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } /* ---- Fluid UX Enhancements ---- */ .dropzone { border: 2px dashed var(--line-strong); border-radius: 10px; padding: 16px; text-align: center; background: var(--surface-2); cursor: pointer; transition: all 0.2s ease; margin: 10px 0; } .dropzone:hover, .dropzone.dragover { border-color: var(--accent); background: var(--accent-soft); } .dropzone .drop-title { font-weight: 600; font-size: 13px; color: var(--ink); } .dropzone .drop-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; } .save-status { font-size: 11.5px; font-family: var(--mono); color: var(--ok); display: inline-flex; align-items: center; gap: 4px; transition: opacity 0.2s ease; } .save-status.saving { color: var(--warn); } [data-tooltip] { position: relative; cursor: help; } [data-tooltip]:hover::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 4px 8px; border-radius: 6px; font-size: 11px; white-space: nowrap; z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }