/* ===================================================================== Le Cygne — feuille de style (tokens issus de maquette_lecygne.html, étendue pour l'application complète). La couleur primaire est pilotée par la variable --primary, surchargée au runtime depuis le branding de la société (table company.primary_color). ===================================================================== */ :root{ --bg:#f4f5f7; --surface:#ffffff; --line:#e3e5e9; --line2:#cfd2d8; --text:#1c2128; --muted:#5b626c; --hint:#8a909a; --primary:#1d6fb8; --primary-soft:#e6f1fb; --primary-text:#0c447c; --radius:12px; --radius-sm:8px; --teal:#0f6e56; --teal-soft:#e1f5ee; --amber:#854f0b; --amber-soft:#faeeda; --green:#15803d; --green-soft:#e7f6ec; --red:#b42318; --red-soft:#fdeceb; --gray-soft:#eef0f3; } /* ---- Thème sombre (data-theme="dark" sur ) ---- */ :root[data-theme="dark"]{ --bg:#0f1419; --surface:#1a2027; --line:#2a3138; --line2:#3a424b; --text:#e6e9ed; --muted:#9aa3ae; --hint:#6b7480; --primary-soft:#13314d; --primary-text:#7db8ec; --teal:#3ca387; --teal-soft:#0e2b24; --amber:#d59a4a; --amber-soft:#3a2a14; --green:#4ade80; --green-soft:#13301d; --red:#f87171; --red-soft:#3a1714; --gray-soft:#252c34; color-scheme:dark; } *{box-sizing:border-box; margin:0; padding:0;} body{font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased;} button{font-family:inherit;} a{color:var(--primary-text); text-decoration:none;} .app{display:flex; min-height:100vh;} /* ---- Sidebar ---- */ .side{width:218px; background:var(--surface); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:2px; position:sticky; top:0; height:100vh; overflow-y:auto;} .brand{font-size:17px; font-weight:600; padding:6px 10px 16px; display:flex; align-items:center; gap:10px;} .brand img{width:28px; height:28px; object-fit:contain; border-radius:6px;} .brand .brand-mark{width:28px; height:28px; border-radius:6px; background:var(--primary-soft); color:var(--primary-text); display:flex; align-items:center; justify-content:center; font-size:16px; flex:0 0 auto;} .nav-group{font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--hint); padding:14px 12px 6px;} .nav{font-size:14px; color:var(--muted); padding:9px 12px; border-radius:var(--radius-sm); display:flex; align-items:center; gap:10px; cursor:pointer; border:none; background:none; width:100%; text-align:left;} .nav:hover{background:var(--bg);} .nav.active{background:var(--primary-soft); color:var(--primary-text); font-weight:500;} .nav .ico{width:18px; text-align:center; flex:0 0 auto;} .side-foot{margin-top:auto; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted);} .side-foot .who{padding:6px 12px;} .side-foot button{margin-top:4px;} /* ---- Main ---- */ .main{flex:1; padding:22px 26px; min-width:0;} .topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; gap:16px;} .topbar h1{font-size:20px; font-weight:600;} .search{height:38px; width:280px; border:1px solid var(--line2); border-radius:var(--radius-sm); padding:0 12px; font-size:14px; background:var(--surface);} /* ---- Cards / stats ---- */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px;} .stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px;} .stat .lbl{font-size:13px; color:var(--muted);} .stat .val{font-size:24px; font-weight:600; margin-top:6px;} .stat .sub{font-size:12px; color:var(--teal); margin-top:4px;} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px;} .card h2{font-size:16px; font-weight:600; margin-bottom:14px; display:flex; justify-content:space-between; align-items:center; gap:12px;} /* ---- Forms ---- */ .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-bottom:14px;} .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px;} label{font-size:12px; color:var(--muted); display:block; margin-bottom:5px;} .field, input.field, select.field, textarea.field{height:38px; width:100%; border:1px solid var(--line2); border-radius:var(--radius-sm); padding:0 12px; font-size:14px; display:flex; align-items:center; background:var(--surface); color:var(--text);} textarea.field{height:auto; min-height:76px; padding:10px 12px;} .field.read{border-color:var(--line); background:var(--bg);} /* ---- Table ---- */ .tbl-wrap{overflow-x:auto;} table{width:100%; border-collapse:collapse; font-size:14px;} th{text-align:left; font-size:12px; color:var(--muted); font-weight:500; padding:8px;} td{padding:10px 8px; border-top:1px solid var(--line);} tr.row-click{cursor:pointer;} tr.row-click:hover td{background:var(--bg);} .right{text-align:right;} .num{text-align:right; font-variant-numeric:tabular-nums;} /* ---- Pills / status ---- */ .pill{background:var(--gray-soft); color:var(--muted); padding:3px 10px; border-radius:var(--radius-sm); font-size:12px; display:inline-block;} .pill.teal{background:var(--teal-soft); color:var(--teal);} .pill.amber{background:var(--amber-soft); color:var(--amber);} .pill.blue{background:var(--primary-soft); color:var(--primary-text);} .pill.green{background:var(--green-soft); color:var(--green);} .pill.red{background:var(--red-soft); color:var(--red);} .pill.gray{background:var(--gray-soft); color:var(--muted);} /* ---- Buttons ---- */ .addline{margin-top:10px; font-size:14px; color:var(--primary-text); background:none; border:none; cursor:pointer; display:flex; align-items:center; gap:6px;} .actions{display:flex; gap:10px; justify-content:flex-end; margin-top:14px;} .btn{height:40px; padding:0 18px; border-radius:var(--radius-sm); font-size:14px; border:1px solid var(--line2); background:var(--surface); cursor:pointer; display:inline-flex; align-items:center; gap:8px; color:var(--text);} .btn:hover{background:var(--bg);} .btn.primary{background:var(--primary); border-color:var(--primary); color:#fff;} .btn.primary:hover{filter:brightness(.95);} .btn.danger{color:var(--red); border-color:var(--red-soft);} .btn.sm{height:32px; padding:0 12px; font-size:13px;} .badge{font-size:12px; padding:5px 12px; border-radius:var(--radius-sm); background:var(--primary-soft); color:var(--primary-text);} /* ---- Totals ---- */ .totals{display:flex; justify-content:flex-end; margin-top:16px;} .totals .box{width:280px; font-size:14px;} .totals .row{display:flex; justify-content:space-between; padding:5px 0; color:var(--muted);} .totals .grand{display:flex; justify-content:space-between; padding:10px 0; border-top:1px solid var(--line2); font-weight:600; font-size:16px; color:var(--text);} /* ---- Auth / login ---- */ .auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); padding:24px;} .auth-card{width:380px; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px;} .auth-card .brand{justify-content:center; font-size:22px; padding-bottom:8px;} .auth-card p.sub{text-align:center; color:var(--muted); font-size:13px; margin-bottom:20px;} .auth-card label{margin-top:12px;} .auth-card .btn.primary{width:100%; justify-content:center; margin-top:18px; height:42px;} .auth-err{background:var(--red-soft); color:var(--red); padding:8px 12px; border-radius:var(--radius-sm); font-size:13px; margin-top:12px;} /* ---- Misc ---- */ .empty{padding:40px; text-align:center; color:var(--muted);} .spinner{padding:60px; text-align:center; color:var(--muted);} .logo-preview{width:64px; height:64px; border:1px solid var(--line); border-radius:var(--radius-sm); object-fit:contain; background:var(--bg);} .row-flex{display:flex; gap:14px; align-items:center;} .toolbar{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap;} .toolbar .grow{flex:1;} .hint{font-size:12px; color:var(--hint); margin-top:6px;} /* ---- Accessibilité : focus visible ---- */ .field:focus, input.field:focus, select.field:focus, textarea.field:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); } .btn:focus-visible, .nav:focus-visible{ outline:2px solid var(--primary); outline-offset:2px; } /* ---- Responsive ---- */ @media (max-width:880px){ .stats{grid-template-columns:repeat(2,1fr);} .grid3{grid-template-columns:1fr;} } @media (max-width:680px){ .app{flex-direction:column;} .side{width:100%; height:auto; position:static; flex-direction:row; flex-wrap:wrap; gap:4px; align-items:center;} .side .brand{padding:6px 10px; width:100%;} .nav-group{display:none;} .nav{width:auto;} .side-foot{margin:0 0 0 auto; border-top:none; padding-top:0;} .side-foot .who{display:none;} .main{padding:16px;} .stats{grid-template-columns:1fr 1fr;} .grid2{grid-template-columns:1fr;} .search{width:100%;} .topbar{flex-wrap:wrap;} .dash-2col{grid-template-columns:1fr !important;} } /* ---- Toasts ---- */ #lc-toast-host{position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:8px; z-index:100;} .lc-toast{background:var(--text); color:var(--surface); padding:11px 16px; border-radius:var(--radius-sm); font-size:13px; box-shadow:0 6px 20px rgba(0,0,0,.18); opacity:0; transform:translateY(8px); transition:opacity .2s, transform .2s; max-width:340px;} .lc-toast.show{opacity:1; transform:translateY(0);} .lc-toast-success{background:var(--green); color:#fff;} .lc-toast-error{background:var(--red); color:#fff;} /* ---- Palette de recherche ---- */ .palette{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); width:560px; max-width:100%; box-shadow:0 16px 50px rgba(0,0,0,.25); overflow:hidden;} .palette-input{width:100%; height:52px; border:none; border-bottom:1px solid var(--line); padding:0 18px; font-size:15px; background:var(--surface); color:var(--text); outline:none;} .palette-results{max-height:330px; overflow-y:auto; padding:6px;} .palette-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; border:none; background:none; padding:10px 12px; border-radius:var(--radius-sm); cursor:pointer; color:var(--text); font-size:14px;} .palette-item.active{background:var(--primary-soft); color:var(--primary-text);} .palette-item .ico{display:flex;} .palette-label{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .palette-sub{font-size:12px; color:var(--muted);} .palette-empty{padding:20px; text-align:center; color:var(--muted); font-size:14px;} .palette-foot{border-top:1px solid var(--line); padding:8px 14px; font-size:11px; color:var(--hint);} .side-search{display:flex; align-items:center; gap:8px; margin:0 4px 8px; padding:8px 12px; border:1px solid var(--line2); border-radius:var(--radius-sm); color:var(--muted); font-size:13px; cursor:pointer; background:var(--surface);} .side-search:hover{background:var(--bg);} .side-search kbd{margin-left:auto; font-size:11px; background:var(--gray-soft); border-radius:4px; padding:1px 6px; color:var(--muted);} /* ---- Modal ---- */ .modal-overlay{position:fixed; inset:0; background:rgba(20,24,30,.45); display:flex; align-items:center; justify-content:center; z-index:50; padding:24px;} .modal{background:var(--surface); border-radius:var(--radius); width:560px; max-width:100%; max-height:90vh; overflow-y:auto; padding:24px;} .modal h2{font-size:17px; font-weight:600; margin-bottom:16px;}