/* copié depuis cockpit/public/css/build-ui.css le 29/09/2026, ne pas modifier ici (source : dépôt cockpit, commit 6da75ec ; toute évolution se fait dans le cockpit puis se recopie). */ /* =========================================================================== KIT BUILD UI — tokens des deux thèmes, palette sémantique, coque (sidebar noire, logo, navigation, interrupteur de thème) et composants génériques (cartes, KPI, boutons, pastilles, jauges, tableaux, champs, modales, toasts). Référence visuelle de tous les outils BUILD (cockpit, Qualiopi, Portail…) : ce fichier se copie TEL QUEL. Aucun sélecteur propre à un produit ici. Thème : , posé avant rendu par theme.js. La sidebar reste noire dans les deux thèmes : elle reçoit le bloc sombre. Documentation des classes : DESIGN_TOKENS.md, « Kit BUILD UI ». =========================================================================== */ :root,:root[data-theme="dark"],.sidebar{ color-scheme:dark; --bg:#000000; --bg-2:#000000; --panel:#05070e; --panel-2:#080c17; --navy:#0e2a5e; --page-bg:#000000; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --line-3:rgba(255,255,255,.28); --blue:#2f6bff; --blue-2:#7aa6ff; --cyan:#7aa6ff; --text:#ffffff; --text-strong:#ffffff; --text-body:#d3d8ea; --muted:#c2c9da; --muted-2:#808aa0; --grad:linear-gradient(125deg,#21539f 0%,#0c265c 100%); --grad-text:linear-gradient(95deg,#9cbcff,#3f78ff); --grad-soft:linear-gradient(120deg,rgba(47,107,255,.16),rgba(20,50,120,.20)); --grad-bar:linear-gradient(90deg,#0c265c,#2f6bff); /* surfaces */ --surface:linear-gradient(165deg,var(--panel),var(--bg-2)); --surface-2:linear-gradient(165deg,var(--panel-2),var(--bg-2)); --fill:rgba(255,255,255,.03); --fill-2:rgba(255,255,255,.06); --fill-3:rgba(255,255,255,.08); --hover:rgba(255,255,255,.025); --track:rgba(255,255,255,.06); --zebra:transparent; --thead-bg:transparent; --input-bg:rgba(255,255,255,.025); --input-focus-bg:rgba(47,107,255,.06); --topbar-bg:rgba(0,0,0,.72); --toast-bg:rgba(8,12,23,.92); --backdrop:rgba(0,0,0,.7); --shadow:none; --shadow-lg:0 40px 90px -30px rgba(0,0,0,.9); --shadow-toast:0 24px 60px -24px rgba(0,0,0,.85); --btn-shadow:0 10px 40px -12px rgba(31,79,163,.55); --btn-shadow-hover:0 18px 50px -10px rgba(31,79,163,.7); --selection:rgba(31,79,163,.4); --selection-ink:#ffffff; --glow-r:9px; /* halo des pastilles (0 en clair) */ /* sémantique : trait/fond graphique (--x), texte (--x-ink), fond doux (--x-bg), filet (--x-line) */ --ok:#46d39a; --ok-ink:#46d39a; --ok-bg:rgba(70,211,154,.08); --ok-line:rgba(70,211,154,.3); --warn:#ffb454; --warn-ink:#ffb454; --warn-bg:rgba(255,180,84,.08); --warn-line:rgba(255,180,84,.3); --danger:#ff6b6b; --danger-ink:#ff8f8f; --danger-bg:rgba(255,107,107,.08); --danger-line:rgba(255,107,107,.3); --info:#7aa6ff; --info-ink:#7aa6ff; --info-bg:rgba(47,107,255,.1); --info-line:rgba(91,140,255,.3); --neutral-ink:#808aa0; --neutral-bg:rgba(255,255,255,.03); --neutral-line:rgba(255,255,255,.16); --fill-ok:linear-gradient(90deg,#1c7f5a,#46d39a); --fill-warn:linear-gradient(90deg,#b9791f,#ffb454); --fill-danger:linear-gradient(90deg,#a83232,#ff6b6b); --on-warn:#000000; /* texte posé sur un aplat --warn-solid */ --warn-solid:#ffb454; /* graphiques : séries (bleu, vert, orange, bleu clair, rouge, bleu nuit) + gris « autres » */ --series-1:#2f6bff; --series-2:#46d39a; --series-3:#ffb454; --series-4:#9cbcff; --series-5:#ff6b6b; --series-6:#5b8cff; --series-muted:#3a4256; --series-machine:#5b6478; --chart-grid:rgba(255,255,255,.06); --chart-label:#808aa0; --chart-value:#c2c9da; --chart-center:#ffffff; --chart-track:rgba(255,255,255,.05); --r:18px; --ease:cubic-bezier(.22,.61,.36,1); --sidebar:248px; /* couleur EasyVJ — réservée aux éléments produit (tag/badge), pas au cockpit */ --evj:#FF4D00; --evj-2:#FF8000; } :root[data-theme="light"]{ color-scheme:light; --bg:#f4f6fb; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#ffffff; --navy:#0e2a5e; --page-bg:#f4f6fb; --line:#e3e8f2; --line-2:#d6ddea; --line-3:#b8c2d6; --blue:#2f6bff; --blue-2:#21539f; --cyan:#21539f; --text:#05070e; --text-strong:#05070e; --text-body:#39415a; --muted:#5b6680; --muted-2:#677289; --grad:linear-gradient(125deg,#21539f 0%,#0c265c 100%); --grad-text:linear-gradient(95deg,#21539f,#21539f); --grad-soft:linear-gradient(120deg,#eaf1ff,#f3f7ff); --grad-bar:linear-gradient(90deg,#5b8cff,#2f6bff); --surface:#ffffff; --surface-2:#ffffff; --fill:#f6f8fc; --fill-2:#eef2f8; --fill-3:#e6ebf4; --hover:#f5f8ff; --track:#e8edf5; --zebra:#fbfcfe; --thead-bg:#f7f9fc; --input-bg:#ffffff; --input-focus-bg:#ffffff; --topbar-bg:rgba(244,246,251,.86); --toast-bg:#ffffff; --backdrop:rgba(11,18,32,.36); --shadow:0 1px 2px rgba(5,7,14,.06),0 12px 32px -20px rgba(5,7,14,.28); --shadow-lg:0 30px 70px -24px rgba(5,7,14,.30); --shadow-toast:0 24px 60px -24px rgba(5,7,14,.55); --btn-shadow:0 10px 30px -12px rgba(12,38,92,.55); --btn-shadow-hover:0 16px 40px -12px rgba(12,38,92,.65); --selection:rgba(47,107,255,.18); --selection-ink:#0b1220; --glow-r:0px; --ok:#12a150; --ok-ink:#0f7a3d; --ok-bg:#e8f7ef; --ok-line:#b9e5cb; --warn:#d97706; --warn-ink:#a14a06; --warn-bg:#fff4e0; --warn-line:#f5d7a1; --danger:#e5484d; --danger-ink:#c42b31; --danger-bg:#fdecec; --danger-line:#f5c2c4; --info:#2f6bff; --info-ink:#21539f; --info-bg:#eaf1ff; --info-line:#c6d6fb; --neutral-ink:#5b6680; --neutral-bg:#f1f3f8; --neutral-line:#dde3ee; --fill-ok:linear-gradient(90deg,#12a150,#2cc16c); --fill-warn:linear-gradient(90deg,#d97706,#f59e0b); --fill-danger:linear-gradient(90deg,#d63a40,#ef5a5f); --on-warn:#ffffff; --warn-solid:#b45309; --series-1:#2f6bff; --series-2:#12a150; --series-3:#e58a0c; --series-4:#8fb0ff; --series-5:#e5484d; --series-6:#1f3f8f; --series-muted:#c3cad8; --series-machine:#a3acbf; --chart-grid:#e9edf5; --chart-label:#677289; --chart-value:#3b4660; --chart-center:#0b1220; --chart-track:#eef1f7; } *{box-sizing:border-box;margin:0;padding:0} html{background:var(--page-bg)} body{ background:var(--page-bg);color:var(--text); font-family:'General Sans',system-ui,sans-serif;font-size:15.5px;line-height:1.6; -webkit-font-smoothing:antialiased;position:relative;min-height:100vh; } /* grain — overlay de bruit SVG (identique au site) */ body::before{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity:.035;mix-blend-mode:overlay; } ::selection{background:var(--selection);color:var(--selection-ink)} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:'Clash Display',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em} .mono{font-family:'Spline Sans Mono',monospace} .grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} :focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;border-radius:6px} /* halos / orbs flous (jamais trop forts) */ .orb{position:fixed;border-radius:50%;filter:blur(110px);opacity:.26;z-index:0;pointer-events:none} .orb-1{width:520px;height:520px;background:#1e4fa0;top:-200px;left:160px} .orb-2{width:460px;height:460px;background:#16356f;bottom:-200px;right:-120px;opacity:.2} .eyebrow{ font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.22em; text-transform:uppercase;color:var(--blue-2);display:inline-flex;align-items:center;gap:10px;white-space:nowrap; } .eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6} /* ===== Layout : sidebar + contenu ===== */ .app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;position:relative;z-index:2} .sidebar{ position:sticky;top:0;height:100vh;border-right:1px solid var(--line);color:var(--text); background:#000;display:flex;flex-direction:column;padding:22px 14px 16px;gap:2px;z-index:3; overflow-y:auto;overflow-x:hidden; } /* Logo : cube + « build. » + sous-titre mono, centrés verticalement ; le bord gauche du cube s'aligne sur celui des pictos du menu (14 + 1 + 12 px). */ .logo{display:flex;align-items:center;gap:12px;padding:2px 13px 22px;text-decoration:none} .logo .cube{width:30px;height:30px;flex:none;display:block} .logo .bt{display:flex;flex-direction:column;justify-content:center;min-width:0} .logo b{display:block;font-family:'Clash Display',sans-serif;font-weight:700;font-size:21px;line-height:1.05;letter-spacing:-.03em;color:#fff} .logo small{display:block;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#808aa0;margin-top:4px;white-space:nowrap} .logo .dot{color:var(--blue-2)} .nav-label{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#808aa0;padding:16px 13px 6px} .nav-label:first-child{padding-top:4px} .nav-item{ display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;margin:1px 0; color:#c2c9da;font-weight:500;font-size:14.5px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease); border:1px solid transparent;position:relative;text-decoration:none; } button.nav-item{background:transparent;font:inherit;font-weight:500;font-size:14.5px;text-align:left;width:100%} .nav-item svg{width:18px;height:18px;flex:none;color:#808aa0;transition:color .25s var(--ease)} .nav-item:hover{background:rgba(255,255,255,.045);color:#fff} .nav-item:hover svg{color:#d3d8ea} .nav-item.active{background:rgba(47,107,255,.16);border-color:rgba(122,166,255,.22);color:#fff} .nav-item.active svg{color:#7aa6ff} /* Compteur : pastille rouge (quelque chose attend une action) */ .nav-item .badge{margin-left:auto;font-family:'Spline Sans Mono',monospace;font-size:10.5px;min-width:22px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:#e5484d;color:#fff} .nav-item .badge[hidden]{display:none} .sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line)} .side-meta{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#808aa0;padding:10px 13px 0} /* Voile mobile : position:fixed + display:none par défaut pour qu'il ne soit JAMAIS un item de la grille (sinon il pousse .main hors de sa colonne). */ .sidebar-scrim{position:fixed;inset:0;background:var(--backdrop);z-index:55;display:none} .main{position:relative;min-height:100vh;overflow:hidden} .topbar{ position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px; padding:18px 34px;border-bottom:1px solid var(--line); background:var(--topbar-bg);backdrop-filter:blur(18px); } .topbar h1{font-size:23px;font-weight:600} .topbar .sub{font-family:'Spline Sans Mono';font-size:11.5px;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase} .topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px} .content{padding:34px;max-width:1240px} /* ===== Boutons (radius 100px) ===== */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:100px; font-weight:600;font-size:14.5px;cursor:pointer;border:none;transition:.35s var(--ease); font-family:'General Sans',sans-serif;position:relative;white-space:nowrap; } .btn svg{width:18px;height:18px} .btn-primary{background:var(--grad);color:#fff;box-shadow:var(--btn-shadow)} .btn-primary:hover{transform:translateY(-2px);box-shadow:var(--btn-shadow-hover)} .btn-ghost{background:var(--fill);color:var(--text);border:1px solid var(--line-2)} .btn-ghost:hover{background:var(--fill-3);border-color:var(--line-3)} .btn-sm{padding:8px 15px;font-size:13px} .btn-danger{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-ink)} .btn-danger:hover{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)} .btn:disabled{opacity:.5;cursor:not-allowed;transform:none} .icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);background:var(--fill);color:var(--muted);cursor:pointer;transition:.28s var(--ease)} .icon-btn:hover{color:var(--text-strong);border-color:var(--line-3);background:var(--fill-3)} .icon-btn svg{width:17px;height:17px} /* ===== Cartes (bordure dégradée au hover via mask-composite) ===== */ .card{ background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow); border-radius:var(--r);padding:24px;transition:.45s var(--ease);position:relative;overflow:hidden; } .card::before{ content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:var(--grad); opacity:0;transition:.45s var(--ease); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none; } .card.hover:hover{transform:translateY(-5px);border-color:transparent} .card.hover:hover::before{opacity:.55} .card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px} .card-head h3{font-size:18px} .card-head .eyebrow{margin-bottom:0} /* ===== KPI ===== */ .kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px} .kpi .lbl{font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)} .kpi .val{font-family:'Clash Display';font-weight:600;font-size:38px;margin-top:10px;line-height:1;letter-spacing:-.02em} .kpi .val.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent} .kpi .sub{font-size:13px;color:var(--muted);margin-top:8px} /* ===== Jauges / barres de progression ===== */ .gauge{margin-top:6px} .gauge .gauge-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--muted);margin-bottom:8px} .gauge .gauge-top b{color:var(--text);font-weight:600} .bar{height:11px;border-radius:8px;background:var(--track);overflow:hidden;position:relative} .bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--grad);transition:width .9s var(--ease)} .bar .fill.ok{background:var(--fill-ok)} .bar .fill.warn{background:var(--fill-warn)} .bar .fill.danger{background:var(--fill-danger)} .gauge .gauge-pct.ok{color:var(--ok-ink)}.gauge .gauge-pct.warn{color:var(--warn-ink)}.gauge .gauge-pct.danger{color:var(--danger-ink)} /* ===== Tables ===== */ /* overflow-x:auto (et non hidden) : sur mobile, un tableau plus large que l'écran défile dans son cadre au lieu d'être coupé. Le coin arrondi reste rogné de la même façon. */ .table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--surface);box-shadow:var(--shadow)} table{width:100%;border-collapse:collapse} thead th{ text-align:left;font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase; color:var(--muted-2);padding:15px 18px;border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap; background:var(--thead-bg); } tbody td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text-body);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr{transition:.25s var(--ease);cursor:default} tbody tr.clickable{cursor:pointer} tbody tr:nth-child(even){background:var(--zebra)} tbody tr:hover{background:var(--hover)} td .name{color:var(--text-strong);font-weight:500} .num{font-family:'Spline Sans Mono';font-variant-numeric:tabular-nums} .right{text-align:right} /* ===== Badges de statut / tags ===== */ .badge-status{display:inline-flex;align-items:center;gap:7px;font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:100px;border:1px solid var(--neutral-line);background:var(--neutral-bg);color:var(--neutral-ink);text-transform:uppercase;white-space:nowrap;--tone:var(--muted-2)} .badge-status .dot{width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 var(--glow-r) var(--tone)} .badge-status.s-blue{color:var(--info-ink);border-color:var(--info-line);background:var(--info-bg);--tone:var(--info)} .badge-status.s-ok{color:var(--ok-ink);border-color:var(--ok-line);background:var(--ok-bg);--tone:var(--ok)} .badge-status.s-warn{color:var(--warn-ink);border-color:var(--warn-line);background:var(--warn-bg);--tone:var(--warn)} .badge-status.s-danger{color:var(--danger-ink);border-color:var(--danger-line);background:var(--danger-bg);--tone:var(--danger)} /* Constats de conformité (tableau de bord) — phrases entières, pas des étiquettes : ni majuscules ni police monospace, à la différence de .badge-status qui reste réservé aux statuts courts. Le liseré porte la gravité, le texte reste lisible. */ .constat{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5; padding:8px 12px;border-radius:0 8px 8px 0;margin-top:8px;color:var(--muted)} .constat .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-top:6px} .constat.g-anomalie{border-left:3px solid var(--danger);background:var(--danger-bg);color:var(--text-body)} .constat.g-anomalie .dot{background:var(--danger);box-shadow:0 0 var(--glow-r) var(--danger)} .constat.g-avertissement{border-left:3px solid var(--warn);background:var(--warn-bg);color:var(--text-body)} .constat.g-avertissement .dot{background:var(--warn);box-shadow:0 0 var(--glow-r) var(--warn)} .constat.g-ok{border-left:3px solid var(--ok);background:var(--ok-bg);color:var(--text-body)} .constat.g-ok .dot{background:var(--ok)} .badge-status.s-muted{color:var(--neutral-ink)} .tag{display:inline-flex;align-items:center;font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:7px;border:1px solid var(--line-2);background:var(--fill);color:var(--muted)} /* ===== Formulaires ===== */ .field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .field label{font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)} .field .hint{font-size:12px;color:var(--muted-2);margin-top:-2px} input,select,textarea{ width:100%;background:var(--input-bg);border:1px solid var(--line-2);border-radius:11px; padding:11px 13px;color:var(--text);font-family:'General Sans',sans-serif;font-size:14.5px;transition:.25s var(--ease); } input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:var(--input-focus-bg);box-shadow:0 0 0 3px rgba(47,107,255,.14)} input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none} input[type=checkbox],input[type=radio]{accent-color:var(--blue)} input::placeholder,textarea::placeholder{color:var(--muted-2)} textarea{resize:vertical;min-height:84px;line-height:1.5} select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808aa0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px} .form-grid .full{grid-column:1 / -1} /* Champ fichier (justificatif PDF) : bouton lisible dans les deux thèmes */ input[type=file]{padding:9px 12px;font-size:13px;cursor:pointer} input[type=file]::file-selector-button{font-family:'General Sans',sans-serif;font-size:12.5px;color:var(--text);cursor:pointer;background:var(--fill-2);border:1px solid var(--line-2);border-radius:8px;padding:6px 12px;margin-right:12px;transition:.2s var(--ease)} input[type=file]::file-selector-button:hover{background:var(--fill-3);border-color:var(--line-3)} /* Lien inline accent BUILD (ouvrir un justificatif…) */ .link{color:var(--blue-2);display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:500} .link:hover{color:var(--text-strong);text-decoration:underline} .link svg{flex:none} fieldset{border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px} legend{font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);padding:0 8px} /* ===== Recherche ===== */ .search{position:relative;flex:1;max-width:360px} .search input{padding-left:40px} .search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted-2)} /* ===== Modal ===== */ .modal-backdrop{position:fixed;inset:0;z-index:100;background:var(--backdrop);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto;opacity:0;transition:opacity .3s var(--ease)} .modal-backdrop.in{opacity:1} .modal{width:100%;max-width:680px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);border-radius:22px;padding:30px;box-shadow:var(--shadow-lg);transform:translateY(14px);transition:transform .3s var(--ease);position:relative} .modal-backdrop.in .modal{transform:none} .modal.wide{max-width:920px} .modal-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px} .modal-head h2{font-size:25px} .modal-head .close{margin-left:auto} .modal-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} /* ===== Toasts : pilule sombre en bas au centre, bouton blanc facultatif ===== */ .toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column-reverse;align-items:center;gap:10px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)} .toast{display:flex;align-items:center;gap:10px;background:#05070e;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:100px;padding:10px 12px 10px 18px;font-size:14px;font-weight:500;box-shadow:var(--shadow-toast);transform:translateY(16px);opacity:0;transition:.3s var(--ease);pointer-events:auto;min-height:44px} .toast.in{transform:none;opacity:1} .toast>span:last-child{padding-right:6px} .toast-ic{display:grid;place-items:center;flex:none;color:#7aa6ff} .toast.ok .toast-ic{color:#46d39a}.toast.err .toast-ic{color:#ff6b6b}.toast.warn .toast-ic{color:#ffb454} .toast-btn{border:0;background:#fff;color:#05070e;border-radius:100px;padding:7px 14px;font:600 13px 'General Sans',sans-serif;cursor:pointer;margin-left:4px} .toast-btn:hover{background:#e8edf7} /* ===== États vides ===== */ .empty{text-align:center;padding:70px 20px;color:var(--muted-2)} .empty .ic{width:58px;height:58px;border-radius:15px;background:var(--grad-soft);border:1px solid var(--line-2);display:grid;place-items:center;margin:0 auto 20px;color:var(--blue-2)} .empty h3{font-size:20px;color:var(--text);margin-bottom:8px} .empty p{max-width:380px;margin:0 auto 22px;font-size:14.5px} /* ===== Utilitaires ===== */ .row{display:flex;align-items:center;gap:12px} .row.wrap{flex-wrap:wrap} .between{justify-content:space-between} .gap-lg{gap:18px} .mt{margin-top:18px}.mt-lg{margin-top:28px}.mb{margin-bottom:18px} .muted{color:var(--muted)}.muted-2{color:var(--muted-2)} .ok-text{color:var(--ok-ink)}.danger-text{color:var(--danger-ink)}.info-text{color:var(--info-ink)} .section-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px} .section-title h2{font-size:22px} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .spinner{width:22px;height:22px;border:2px solid var(--line-2);border-top-color:var(--blue-2);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .center-screen{min-height:60vh;display:grid;place-items:center} /* reveal — animation d'entrée AUTO en fill-mode 'both' : l'élément finit TOUJOURS visible (opacity:1), même sans JS. Impossible de rester bloqué en invisible (leçon : ne jamais dépendre d'un JS pour rendre du contenu visible). */ @keyframes reveal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} .reveal{animation:reveal-in .55s var(--ease) both} .reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.10s} .reveal.d3{animation-delay:.15s}.reveal.d4{animation-delay:.20s} @media(prefers-reduced-motion:reduce){ .reveal{animation:none} *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important} .card.hover:hover,.btn-primary:hover{transform:none} } /* ===== Responsive ===== */ @media(max-width:900px){ :root{--sidebar:0px} .app{grid-template-columns:1fr} .sidebar{position:fixed;left:0;top:0;width:248px;transform:translateX(-100%);transition:transform .35s var(--ease);z-index:60} .sidebar.open{transform:none} .sidebar-scrim.in{display:block} /* base définie plus haut (display:none) */ .burger{display:inline-grid !important} .form-grid,.grid-2,.grid-3{grid-template-columns:1fr} .content{padding:22px 18px} .topbar{padding:16px 18px} } .burger{display:none} /* =========================================================================== KPI sémantiques — la couleur porte un sens, jamais un décor. k-blue : volume / objectif · k-ok : encaissé, positif · k-warn : à provisionner, à surveiller · k-danger : retard, négatif. Liseré à gauche + chiffre coloré. =========================================================================== */ .kpi.k-blue,.kpi.k-ok,.kpi.k-warn,.kpi.k-danger{--k:var(--info)} .kpi.k-ok{--k:var(--ok)}.kpi.k-warn{--k:var(--warn)}.kpi.k-danger{--k:var(--danger)} .kpi.k-blue::after,.kpi.k-ok::after,.kpi.k-warn::after,.kpi.k-danger::after{ content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--k);pointer-events:none} .val.t-ok{color:var(--ok-ink)}.val.t-warn{color:var(--warn-ink)}.val.t-danger{color:var(--danger-ink)}.val.t-blue{color:var(--info-ink)} /* Compteurs « À suivre » du tableau de bord */ .counter .val{font-family:'Clash Display';font-size:26px;font-weight:700} .counter .lbl{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--muted-2);text-transform:uppercase} /* =========================================================================== Interrupteur clair / sombre (bas de la sidebar, toujours sombre) =========================================================================== */ .theme-toggle .ic-sun,.theme-toggle .ic-moon{display:none} :root[data-theme="dark"] .theme-toggle .ic-sun{display:block} :root[data-theme="light"] .theme-toggle .ic-moon{display:block} /* =========================================================================== Thème clair — ajustements qui ne se résument pas à un token =========================================================================== */ :root[data-theme="light"] body::before, :root[data-theme="light"] .orb{display:none} /* ni grain ni halos en clair */ :root[data-theme="light"] .sidebar{border-right-color:#000} /* Chiffres en dégradé → couleur pleine, lisible sur blanc */ :root[data-theme="light"] .grad-text, :root[data-theme="light"] .kpi .val.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--blue-2)} :root[data-theme="light"] .kpi .val{color:var(--text)} :root[data-theme="light"] .kpi .val.grad{color:var(--blue-2)} :root[data-theme="light"] .kpi .val.t-ok{color:var(--ok-ink)} :root[data-theme="light"] .kpi .val.t-warn{color:var(--warn-ink)} :root[data-theme="light"] .kpi .val.t-danger{color:var(--danger-ink)} /* Cartes : survol par ombre plutôt que par bordure lumineuse */ :root[data-theme="light"] .card.hover:hover{box-shadow:0 2px 4px rgba(16,24,40,.05),0 14px 32px -12px rgba(16,24,40,.16)} :root[data-theme="light"] .card::before{background:linear-gradient(125deg,#2f6bff,#8fb0ff)} :root[data-theme="light"] .btn-ghost{background:#fff} :root[data-theme="light"] .btn-ghost:hover{border-color:var(--muted-2);background:#fff} :root[data-theme="light"] .topbar{box-shadow:0 1px 0 var(--line)} :root[data-theme="light"] .empty .ic{color:var(--blue-2)} :root[data-theme="light"] .btn-primary:disabled{box-shadow:none}