/* ═══════════════════════════════════════════════════════════════════════════ SMQ › DOCUMENTS — « Le Cockpit » (maquette B validée par Selim le 30/07/2026) Préfixe unique : sd-* · aucun sélecteur générique, aucune collision possible avec nexus.css. Chargé par index.html juste après nexus.css. Le référentiel documentaire natif (collection Firestore `smqDocs`) remplace l'ancien explorateur de fichiers dans l'onglet Documents. L'explorateur historique (`smqItems`) n'est PAS supprimé : il devient le « Drive SMQ », affiché dans un tiroir latéral — d'où les règles .sd-drawer #smq-* en fin de fichier, qui le ré-habillent sans toucher à son balisage. ═══════════════════════════════════════════════════════════════════════════ */ /* Les jetons sont posés sur :root et non sur #smq-pane-docs : le tiroir, la fiche et les modales vivent en fin de , hors de .tab-content. Raison : .tab-content.active porte une animation `both` se terminant sur transform:translateY(0) — un ancêtre transformé devient le référentiel des position:fixed, ce qui décalerait tous les panneaux. */ :root{ --sd-navy-950:#071a3a; --sd-navy-900:#0a2249; --sd-navy-800:#0d2d5e; --sd-navy-700:#143b78; --sd-navy-600:#1a4fa0; --sd-navy-100:#dbeafe; --sd-navy-50:#eff5fc; --sd-ink-900:#0f172a; --sd-ink-700:#334155; --sd-ink-500:#64748b; --sd-ink-400:#94a3b8; --sd-ink-200:#e2e8f0; --sd-ink-100:#f1f5f9; --sd-ink-50:#f8fafc; --sd-coral:#F97316; --sd-coral-600:#EA580C; --sd-coral-50:#fff7ed; --sd-green:#16A34A; --sd-red:#DC2626; --sd-sky:#0EA5E9; --sd-violet:#7C3AED; --sd-sh-sm:0 1px 3px rgba(15,23,42,.05); --sd-sh-md:0 6px 20px rgba(15,23,42,.07); --sd-sh-lg:0 24px 60px rgba(10,34,73,.20); --sd-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace; } /* nexus.css ligne 15 pose `*{box-sizing:border-box;margin:0;padding:0; font-family:'Segoe UI',…}` — une règle universelle qui s'applique DIRECTEMENT à chaque élément, donc l'héritage ne suffit pas à imposer notre police. `.sd-scope *` a une spécificité de (0,1,0) : elle bat le `*` global, tout en restant battue par nos propres règles Sora (0,1,1 et plus). Les conteneurs portent la classe sd-scope dans index.html. */ .sd-scope, .sd-scope *{ box-sizing:border-box; font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; } /* ─────────────────────────── Boutons ─────────────────────────── */ .sd-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:11px; font-family:inherit;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:.16s;white-space:nowrap} .sd-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .sd-btn-navy{background:var(--sd-navy-800);color:#fff;box-shadow:0 3px 10px rgba(13,45,94,.24)} .sd-btn-navy:hover{background:var(--sd-navy-700)} .sd-btn-coral{background:var(--sd-coral);color:#fff;box-shadow:0 3px 10px rgba(249,115,22,.3)} .sd-btn-coral:hover{background:var(--sd-coral-600)} .sd-btn-w{background:#fff;color:var(--sd-navy-800);border:1px solid var(--sd-ink-200);box-shadow:var(--sd-sh-sm)} .sd-btn-w:hover{border-color:var(--sd-navy-600)} .sd-btn-soft{background:var(--sd-ink-100);color:var(--sd-ink-700)} .sd-btn-soft:hover{background:var(--sd-ink-200)} .sd-btn-danger{background:#fff;color:var(--sd-red);border:1px solid #fecaca} .sd-btn-danger:hover{background:#fef2f2} .sd-btn-sm{padding:7px 12px;font-size:12px;border-radius:9px} .sd-btn-sm svg{width:13px;height:13px} .sd-btn[disabled]{opacity:.5;cursor:not-allowed} .sd-ib{width:27px;height:27px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center; color:var(--sd-ink-500);background:#fff;border:1px solid var(--sd-ink-200);cursor:pointer;box-shadow:var(--sd-sh-sm)} .sd-ib:hover{background:var(--sd-navy-800);color:#fff;border-color:var(--sd-navy-800)} .sd-ib svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2} .sd-mono{font-family:var(--sd-mono)} /* ───────────────────── Bandeau santé documentaire ───────────────────── */ .sd-health{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;margin-top:4px} .sd-hcard{background:linear-gradient(150deg,#0a2249,#1a4fa0 78%);color:#fff;border-radius:18px;padding:22px; position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(10,34,73,.24)} .sd-hcard::after{content:'';position:absolute;right:-42px;top:-42px;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.05)} .sd-hcard .sd-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.11em;color:rgba(255,255,255,.6);font-weight:700} .sd-ring{display:flex;align-items:center;gap:16px;margin-top:14px;position:relative;z-index:1} .sd-ring svg{width:82px;height:82px;flex-shrink:0;transform:rotate(-90deg)} .sd-ring .sd-pc{font-family:'Sora','Inter',sans-serif;font-size:30px;font-weight:800;line-height:1} .sd-ring .sd-sub{font-size:12px;color:rgba(255,255,255,.75);margin-top:5px;line-height:1.45} .sd-hbars{margin-top:16px;display:grid;gap:8px;position:relative;z-index:1} .sd-hbar{display:flex;align-items:center;gap:9px;font-size:11.5px;background:none;border:none;padding:0; width:100%;cursor:pointer;color:inherit;font-family:inherit;text-align:left} .sd-hbar:hover .sd-l{color:#fff;text-decoration:underline} .sd-hbar .sd-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0} .sd-hbar .sd-l{color:rgba(255,255,255,.82);flex:1} .sd-hbar .sd-v{font-family:var(--sd-mono);font-weight:700} .sd-alerts{background:#fff;border-radius:18px;padding:18px 20px;box-shadow:var(--sd-sh-sm);border:1px solid #e9edf4;min-width:0} .sd-alerts-h{display:flex;align-items:center;gap:9px;margin-bottom:13px;flex-wrap:wrap} .sd-alerts-h h3{font-family:'Sora','Inter',sans-serif;font-size:14.5px;font-weight:700;color:var(--sd-navy-800);margin:0} .sd-alerts-h .sd-b{background:#fef2f2;color:var(--sd-red);font-size:11px;font-weight:800;padding:2px 9px;border-radius:20px} .sd-alerts-h .sd-sp{flex:1} .sd-alist{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:9px} .sd-alert{display:flex;gap:10px;padding:11px 13px;border-radius:12px;background:var(--sd-ink-50); border:1px solid var(--sd-ink-100);cursor:pointer;transition:.15s;align-items:flex-start;text-align:left;font-family:inherit} .sd-alert:hover{border-color:var(--sd-acol);background:#fff;box-shadow:var(--sd-sh-sm)} .sd-alert .sd-ic{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center; flex-shrink:0;background:var(--sd-acol);color:#fff} .sd-alert .sd-ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2} .sd-alert .sd-t{font-size:12.5px;font-weight:650;color:var(--sd-ink-900);line-height:1.35} .sd-alert .sd-s{font-size:11px;color:var(--sd-ink-500);margin-top:3px;line-height:1.4} .sd-allgood{display:flex;align-items:center;gap:10px;padding:14px;border-radius:12px;background:#f0fdf4;border:1px solid #bbf7d0} .sd-allgood svg{width:20px;height:20px;stroke:var(--sd-green);fill:none;stroke-width:2.4;flex-shrink:0} .sd-allgood span{font-size:12.5px;color:#15803d;font-weight:600} /* ───────────────────── Rail des étapes du cycle ───────────────────── */ .sd-flow{display:grid;grid-template-columns:.82fr repeat(6,minmax(0,1fr));gap:9px;margin-top:16px} .sd-stage{background:#fff;border-radius:16px;padding:14px 13px 12px;border:1.5px solid #e9edf4;cursor:pointer; transition:.18s;position:relative;overflow:hidden;text-align:left;font-family:inherit;min-width:0} .sd-stage::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--sd-scol);opacity:.3;transition:.18s} .sd-stage:hover{box-shadow:var(--sd-sh-md);border-color:var(--sd-scol)} .sd-stage.sd-on{border-color:var(--sd-scol);box-shadow:var(--sd-sh-md)} .sd-stage.sd-on::before{opacity:1;height:5px} /* Les enfants sont des (le bouton ne peut pas contenir de
en HTML valide) : on les repasse en block, sinon tout s'écrit à la suite. */ .sd-stage .sd-num{display:block;font-family:'Sora','Inter',sans-serif;font-size:11px;font-weight:800;color:var(--sd-scol);letter-spacing:.08em} .sd-stage .sd-nm{display:block;font-family:'Sora','Inter',sans-serif;font-size:13.5px;font-weight:750;color:var(--sd-navy-800); margin-top:5px;line-height:1.25;letter-spacing:-.012em} .sd-stage .sd-sb{display:block;font-size:10.5px;color:var(--sd-ink-400);margin-top:4px;line-height:1.35;min-height:42px} .sd-stage .sd-bot{display:flex;align-items:center;gap:6px;margin-top:11px;padding-top:10px;border-top:1px solid var(--sd-ink-100)} .sd-stage .sd-cnt{display:block;font-family:'Sora','Inter',sans-serif;font-size:20px;font-weight:800;color:var(--sd-navy-800);line-height:1} .sd-stage .sd-cl{display:block;font-size:10.5px;color:var(--sd-ink-400);line-height:1.2} .sd-stage .sd-warn{margin-left:auto;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#fef2f2; color:var(--sd-red);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800} /* ───────────────────── Barre de filtres ───────────────────── */ .sd-tb{display:flex;gap:9px;align-items:center;margin-top:18px;flex-wrap:wrap} .sd-search{position:relative;flex:1;min-width:200px} .sd-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:15px;height:15px; stroke:var(--sd-ink-400);fill:none;stroke-width:2;pointer-events:none} .sd-search input{width:100%;padding:11px 14px 11px 37px;border:1px solid #e9edf4;border-radius:12px; font-family:inherit;font-size:13px;background:#fff;outline:none;box-shadow:var(--sd-sh-sm);transition:.15s} .sd-search input:focus{border-color:var(--sd-coral);box-shadow:0 0 0 3px rgba(249,115,22,.12)} .sd-chip{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:20px;font-family:inherit; font-size:12.5px;font-weight:600;background:#fff;color:var(--sd-ink-500);border:1px solid #e9edf4; box-shadow:var(--sd-sh-sm);cursor:pointer;transition:.15s} .sd-chip:hover{border-color:var(--sd-navy-600);color:var(--sd-navy-700)} .sd-chip.sd-on{background:var(--sd-navy-800);color:#fff;border-color:var(--sd-navy-800)} .sd-chip i{width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0} /* ───────────────────── Sections + cartes ───────────────────── */ .sd-sec{margin-top:22px} .sd-sec-h{display:flex;align-items:center;gap:11px;margin-bottom:12px;flex-wrap:wrap} .sd-sec-h .sd-bar{width:4px;height:22px;border-radius:4px;background:var(--sd-gcol);flex-shrink:0} .sd-sec-h h2{font-family:'Sora','Inter',sans-serif;font-size:17px;font-weight:750;color:var(--sd-navy-800); letter-spacing:-.015em;margin:0} .sd-sec-h .sd-sub{font-size:12.5px;color:var(--sd-ink-400)} .sd-sec-h .sd-cnt{margin-left:auto;font-size:12px;font-weight:700;color:var(--sd-gcol);background:var(--sd-ink-100);padding:3px 11px;border-radius:20px} .sd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:12px} .sd-card{background:#fff;border-radius:15px;border:1px solid #e9edf4;padding:15px;cursor:pointer;transition:.17s; position:relative;overflow:hidden;box-shadow:var(--sd-sh-sm);text-align:left;font-family:inherit;min-width:0} .sd-card:hover{box-shadow:var(--sd-sh-md);border-color:var(--sd-dcol)} .sd-card.sd-drop{outline:2.5px dashed var(--sd-coral);outline-offset:-2px;background:var(--sd-coral-50)} .sd-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sd-dcol)} .sd-c-top{display:flex;align-items:flex-start;gap:9px} .sd-c-code{font-family:var(--sd-mono);font-size:10.5px;font-weight:700;color:#fff;background:var(--sd-dcol); padding:2px 7px;border-radius:5px;letter-spacing:.03em} .sd-c-ver{margin-left:auto;font-family:var(--sd-mono);font-size:11.5px;font-weight:700;color:var(--sd-navy-800); background:var(--sd-navy-50);padding:2px 8px;border-radius:6px} .sd-c-nom{font-size:13.5px;font-weight:700;color:var(--sd-ink-900);line-height:1.32;margin-top:10px; min-height:53px;letter-spacing:-.005em;overflow-wrap:anywhere} .sd-c-mid{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap} .sd-tp{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px} .sd-tp svg{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4} .sd-tp-texte{background:#eef2ff;color:#4338ca} .sd-tp-genere{background:var(--sd-coral-50);color:var(--sd-coral-600)} .sd-tp-tableur{background:#f0fdf4;color:#15803d} .sd-tp-depot{background:var(--sd-ink-100);color:var(--sd-ink-500)} .sd-st{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:20px} .sd-st i{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0} .sd-c-foot{display:flex;align-items:center;gap:7px;margin-top:11px;padding-top:10px;border-top:1px solid var(--sd-ink-100)} .sd-c-foot .sd-dif{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--sd-ink-500);font-weight:500} .sd-c-foot .sd-dif i{width:7px;height:7px;border-radius:2px;flex-shrink:0} .sd-c-foot .sd-dt{margin-left:auto;font-family:var(--sd-mono);font-size:10.5px;color:var(--sd-ink-400)} .sd-c-flag{position:absolute;top:0;right:0;background:#fef3c7;color:#92400e;font-size:9.5px;font-weight:800; padding:3px 9px;border-radius:0 0 0 9px;letter-spacing:.04em} .sd-c-acts{position:absolute;right:11px;bottom:11px;display:flex;gap:3px;opacity:0;transition:.15s} .sd-card:hover .sd-c-acts{opacity:1} .sd-empty{padding:50px 20px;text-align:center;grid-column:1/-1} .sd-empty svg{width:44px;height:44px;stroke:var(--sd-ink-200);fill:none;stroke-width:1.4} .sd-empty p{color:var(--sd-ink-400);font-size:13px;margin-top:11px} /* ───────────────────── Tiroir Drive ───────────────────── */ .sd-dov{position:fixed;inset:0;background:rgba(10,34,73,.28);z-index:1400;display:none;opacity:0;transition:.2s} .sd-dov.sd-show{display:block;opacity:1} /* Tiroir Drive : 880 px (le double des 430 px d'origine) — l'explorateur de fichiers y tient enfin à l'aise, dossiers sur deux colonnes et noms complets. */ .sd-drawer{position:fixed;top:0;right:0;bottom:0;width:880px;max-width:94vw;background:#fff;z-index:1401; box-shadow:var(--sd-sh-lg);transform:translateX(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1); display:flex;flex-direction:column} .sd-drawer.sd-show{transform:none} .sd-dr-h{background:linear-gradient(150deg,#0a2249,#1a4fa0);color:#fff;padding:20px 22px;flex-shrink:0} .sd-dr-h .sd-t{display:flex;align-items:center;gap:9px} .sd-dr-h h3{font-family:'Sora','Inter',sans-serif;font-size:17px;font-weight:750;margin:0} .sd-dr-h svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2} .sd-dr-h .sd-x{margin-left:auto;opacity:.72;background:none;border:none;color:#fff;cursor:pointer;padding:4px} .sd-dr-h .sd-x:hover{opacity:1} .sd-dr-h p{margin:9px 0 0;font-size:12px;color:rgba(255,255,255,.75);line-height:1.5} .sd-dr-body{flex:1;overflow-y:auto;min-height:0;padding:0 4px} .sd-dr-f{padding:12px 20px;border-top:1px solid var(--sd-ink-100);background:var(--sd-ink-50);font-size:11.5px; color:var(--sd-ink-500);display:flex;align-items:center;gap:8px;flex-shrink:0} .sd-dr-f svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0} /* Ré-habillage de l'explorateur historique (smqItems) une fois dans le tiroir. On ne touche PAS à son balisage : ses ids smq-* restent intacts, donc toutes les fonctions smq*() de nexus-app.js continuent de fonctionner à l'identique. */ .sd-drawer .docs-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:12px 16px 0;margin:0} .sd-drawer .docs-kpi{padding:10px 12px} .sd-drawer .docs-kpi .val{font-size:17px} .sd-drawer .smq-explorer{border:none;border-radius:0;box-shadow:none;margin:0} .sd-drawer .smq-toolbar{flex-wrap:wrap;gap:8px;padding:12px 16px} .sd-drawer .smq-toolbar-actions{width:100%} .sd-drawer .smq-toolbar-actions input{flex:1;min-width:0} .sd-drawer .smq-content{padding:0 12px 16px} .sd-drawer .smq-folders{grid-template-columns:repeat(3,minmax(0,1fr))} .sd-drag-hint{margin:12px 16px 0;padding:10px 12px;border-radius:10px;background:var(--sd-coral-50); border:1px solid #fed7aa;font-size:11.5px;color:#9a3412;line-height:1.5;display:flex;gap:8px} .sd-drag-hint svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;margin-top:1px} /* ───────────────────── Fiche document (slide-over) ───────────────────── */ .sd-fiche{position:fixed;top:0;right:0;bottom:0;width:min(1040px,96vw);background:#f7f9fc;z-index:1450; box-shadow:var(--sd-sh-lg);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex} .sd-fiche.sd-show{transform:none} /* ⚠️ `flex:0 0 74px` et pas seulement `width` : ce rail est un