/* base.css — variables, reset, mise en page, topbar, recherche, grilles. */

:root{
  --bg:#E8EDF5; --surface:#FFFFFF; --surface-2:#FBFCFE;
  --ink:#0E1F36; --ink-2:#3D4E67; --ink-3:#748199; --line:#D7E0EC; --line-2:#E9EEF5;
  --activite:#4F6BED; --delai:#0FB5AE; --panne:#F59E0B; --ok:#17B26A;
  --hs:#F04438; --preventif:#7A5AF8; --client:#F97316;
  --activite-b:#EAEEFE; --delai-b:#E1F7F6; --panne-b:#FEF4E2; --ok-b:#E4F7EE;
  --hs-b:#FEE9E7; --preventif-b:#EFEBFE; --client-b:#FEEEE0;
  --disp:'Space Grotesk',sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace;
  --r:14px; --r-s:10px; --r-l:20px;
  --sh:0 1px 2px rgba(16,32,60,.05),0 6px 20px rgba(16,32,60,.08);
  --sh-l:0 12px 38px rgba(16,32,60,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);background:var(--bg);color:var(--ink-2);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:var(--disp)}
.mono{font-family:var(--mono)}
button{font-family:inherit;cursor:pointer}
input{font-family:inherit}
::selection{background:#0FB5AE33}
/* ── TOPBAR (dashboard only) ── */
.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);height:58px;display:none;align-items:center;gap:12px;padding:0 24px}
body.dash-on .top{display:flex}
.brand{display:flex;align-items:center;gap:11px}
.mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,#0FB5AE,#4F6BED);display:grid;place-items:center;box-shadow:0 4px 12px #4f6bed33}
.mark svg{width:18px;height:18px;color:#fff}
.brand-t{font-family:var(--disp);font-weight:600;color:var(--ink);font-size:14px;letter-spacing:.2px}
.brand-t b{background:linear-gradient(120deg,#0FB5AE,#4F6BED);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.top-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-shrink:0}
/* ══ LANDING / SEARCH ══ */
#search{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;background:
  radial-gradient(900px 500px at 50% -10%,#e9f6f7 0%,transparent 60%),
  radial-gradient(700px 500px at 90% 20%,#eef0fe 0%,transparent 55%),var(--bg)}
.hero{text-align:center;margin-bottom:38px}
.lockup{display:inline-flex;align-items:center;gap:16px;margin-bottom:22px}
.lockup .mark-lg{width:66px;height:66px;border-radius:18px;background:linear-gradient(135deg,#0FB5AE,#4F6BED);display:grid;place-items:center;box-shadow:0 12px 30px #4f6bed3a,inset 0 1px 0 rgba(255,255,255,.35)}
.lockup .mark-lg svg{width:36px;height:36px;color:#fff}
.wordmark{text-align:left}
.wordmark .l1{font-family:var(--disp);font-weight:500;font-size:15px;letter-spacing:5px;color:var(--ink-3);text-transform:uppercase}
.wordmark .l2{font-family:var(--disp);font-weight:700;font-size:40px;line-height:1;letter-spacing:-1px;color:var(--ink)}
.wordmark .l2 b{background:linear-gradient(120deg,#0FB5AE,#4F6BED);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{font-size:15.5px;color:var(--ink-3);max-width:480px;margin:0 auto}
.search-panel{width:100%;max-width:660px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:var(--sh-l)}
.search-box{position:relative}
.search-box>svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--ink-3)}
.search-input{width:100%;height:56px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface-2);padding:0 18px 0 50px;font-size:16px;color:var(--ink);transition:.15s}
.search-input:focus{outline:none;border-color:var(--delai);background:#fff;box-shadow:0 0 0 4px #0fb5ae1f}
.search-hint{font-size:12px;color:var(--ink-3);margin:12px 4px 4px}
.results{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.result{display:flex;align-items:center;gap:14px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;transition:.15s;text-align:left;width:100%}
.result:hover{border-color:var(--delai);box-shadow:var(--sh);transform:translateY(-1px)}
.result-ic{width:40px;height:40px;border-radius:10px;background:var(--activite-b);color:var(--activite);display:grid;place-items:center;font-family:var(--disp);font-weight:700;flex-shrink:0}
.result-main{flex:1;min-width:0}
.result-name{font-weight:600;color:var(--ink);font-size:14px}
.result-meta{font-size:12px;color:var(--ink-3);font-family:var(--mono);margin-top:2px}
.result-tag{font-size:11px;font-weight:600;padding:4px 9px;border-radius:20px;background:var(--delai-b);color:#0a8a85;white-space:nowrap}
.result-arrow{color:var(--ink-3);width:18px;height:18px}
.hero-foot{margin-top:34px;font-size:12px;color:var(--ink-3)}
/* ══ DASHBOARD ══ */
#dash{display:none;width:100%;padding:22px 32px 60px}
body.dash-on #dash{display:block}
.client-head{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:22px 26px;box-shadow:var(--sh);margin-bottom:16px;position:relative;overflow:hidden}
.client-head::before{content:'';position:absolute;inset:0 auto 0 0;width:5px;background:linear-gradient(180deg,#0FB5AE,#4F6BED)}
.ch-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:16px}
.ch-name{font-family:var(--disp);font-size:26px;font-weight:600;color:var(--ink);letter-spacing:-.6px;line-height:1.1}
.ch-sub{font-family:var(--mono);font-size:12.5px;color:var(--ink-3);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
.ch-sub b{color:var(--ink-2);font-weight:500}
.contract-badge{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.contract-pill{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#0E1F36,#28406a);color:#fff;padding:9px 16px;border-radius:30px;font-size:13px;font-weight:600;box-shadow:0 6px 18px #0e1f3626}
.contract-pill .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px #4ade8033}
.contract-val{font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.date-in{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13px;color:var(--ink);background:#fff}
/* ── sections & grids ── */
.section{margin-bottom:28px}
.sec-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sec-num{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:500}
.sec-title{font-family:var(--disp);font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.3px}
.sec-line{flex:1;height:1px;background:var(--line)}
.sec-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.g-2-1{grid-template-columns:2fr 1fr}
.g-1-2{grid-template-columns:1fr 2fr}
.g6{grid-template-columns:repeat(6,1fr)}
.gk{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
canvas{cursor:pointer}
.top-client{display:flex;align-items:center;gap:14px;padding-left:16px;margin-left:2px;border-left:1px solid var(--line);min-width:0;flex:1;overflow:hidden}
.tc-name{font-family:var(--disp);font-weight:600;color:var(--ink);font-size:14px;white-space:nowrap}
.tc-meta{display:flex;gap:10px;font-family:var(--mono);font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden}
.tc-contract{margin-left:auto;font-size:11px;font-weight:600;background:var(--delai-b);color:#0a8a85;padding:4px 11px;border-radius:20px;white-space:nowrap;flex-shrink:0}
.cmp-note{background:var(--activite-b);border:1px solid #cdd8fb;color:#33489f;font-size:12.5px;padding:9px 14px;border-radius:10px;margin-bottom:16px;display:flex;gap:8px;align-items:center}
.cmp-note b{color:#26347a}
@media(max-width:1050px){.top-client .tc-meta{display:none}}
.trend{font-weight:600;font-size:11px;padding:2px 7px;border-radius:20px;white-space:nowrap}
.trend.up{background:var(--ok-b);color:#0a7a45}
.trend.down{background:var(--hs-b);color:#c0271a}
.trend.neu{background:var(--line-2);color:var(--ink-3)}
.split-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:#c5d2e6}
.split-item .sd{width:10px;height:10px;border-radius:3px}
.split-item b{color:#fff;font-family:var(--mono);font-weight:600}
@keyframes pop{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
.footer{text-align:center;padding:26px;font-size:12px;color:var(--ink-3)}
.footer b{color:var(--ink-2)}
@media(max-width:1400px){.g6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3,.g-2-1,.g-1-2,.g2{grid-template-columns:1fr}.g6{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion){*{transition:none!important;animation:none!important}}

/* ── Connexion live SMFv2 ── */
.api-status{width:100%;max-width:660px;margin:0 0 12px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.86);font-size:12.5px;color:var(--ink-2);box-shadow:var(--sh)}
.api-dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 4px #74819922;flex-shrink:0}
.api-status[data-state="loading"] .api-dot{background:var(--activite);box-shadow:0 0 0 4px #4f6bed22;animation:pulse-dot 1.2s infinite}
.api-status[data-state="ok"]{border-color:#b9e6cf;background:#f4fcf8}.api-status[data-state="ok"] .api-dot{background:var(--ok);box-shadow:0 0 0 4px #17b26a22}
.api-status[data-state="warn"]{border-color:#f3d49a;background:#fffaf0}.api-status[data-state="warn"] .api-dot{background:var(--panne);box-shadow:0 0 0 4px #f59e0b22}
.api-status[data-state="error"]{border-color:#f4b8b2;background:#fff6f5}.api-status[data-state="error"] .api-dot{background:var(--hs);box-shadow:0 0 0 4px #f0443822}
.api-retry{margin-left:auto;border:none;background:none;color:var(--activite);font-weight:600;font-size:12px;padding:4px 8px;border-radius:6px}.api-retry:hover{background:var(--activite-b)}.api-retry:disabled{opacity:.45;cursor:default}
@keyframes pulse-dot{50%{opacity:.35}}
.search-message{padding:17px 14px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--ink-3);font-size:13px;display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap}
.search-message.warning{border-color:#f0d397;background:#fffaf0;color:#8a5a00}.search-message.error{border-color:#f2b8b3;background:#fff7f6;color:#9f261d;flex-direction:column}.search-message.error span{color:var(--ink-3)}
.mini-spinner,.spinner{display:inline-block;border-radius:50%;border:2px solid var(--line);border-top-color:var(--activite);animation:spin .8s linear infinite}.mini-spinner{width:16px;height:16px}.spinner{width:34px;height:34px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.live-loading,.live-error{max-width:720px;margin:70px auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-l);padding:42px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}.live-loading strong,.live-error h2{font-family:var(--disp);font-size:20px;color:var(--ink)}.live-loading span,.live-error p{color:var(--ink-3)}.live-error>div:first-child{width:46px;height:46px;border-radius:12px;background:var(--hs-b);color:var(--hs);display:grid;place-items:center}.live-error>div:first-child svg{width:24px}.live-error-actions{display:flex;gap:10px;margin-top:8px}
.data-warning{display:flex;align-items:flex-start;gap:9px;border:1px solid #f0d397;background:#fffaf0;color:#7a560c;border-radius:10px;padding:10px 13px;font-size:12.5px;margin-bottom:14px}.data-warning svg{width:17px;flex-shrink:0}.data-warning.subtle{margin-top:12px;margin-bottom:0;background:#fbfcfe;border-color:var(--line);color:var(--ink-3)}
.empty-block,.empty-cell{text-align:center!important;color:var(--ink-3)!important;padding:24px!important}.table-scroll{overflow:auto;max-height:390px}.table-card-head{padding:18px 20px 0}.raw-card{padding:0;overflow:hidden}.raw-scroll{max-height:620px}
.gk{grid-template-columns:repeat(2,minmax(0,1fr))}
.single-kpi-stack{grid-template-columns:1fr;gap:14px}
@media(max-width:760px){.gk{grid-template-columns:1fr}.api-status{max-width:100%}.top{padding:0 12px}.top-actions .btn:not(.pri){font-size:0;padding:8px}.top-actions .btn svg{margin:0}.modal{padding:12px}.modal-h{align-items:flex-start;flex-direction:column}.modal-tools{width:100%}.modal-search{flex:1}.modal-search input{width:100%}}