/* ===================== Polices (embarquées) ===================== */ @font-face { font-family: "Plex Sans"; font-weight: 400; src: url(/static/vendor/fonts/ibm-plex-sans-400.woff2) format("woff2"), url(/static/vendor/fonts/ibm-plex-sans-ext-400.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Plex Sans"; font-weight: 500; src: url(/static/vendor/fonts/ibm-plex-sans-500.woff2) format("woff2"), url(/static/vendor/fonts/ibm-plex-sans-ext-500.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Plex Sans"; font-weight: 600; src: url(/static/vendor/fonts/ibm-plex-sans-600.woff2) format("woff2"), url(/static/vendor/fonts/ibm-plex-sans-ext-600.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Plex Mono"; font-weight: 400; src: url(/static/vendor/fonts/ibm-plex-mono-400.woff2) format("woff2"), url(/static/vendor/fonts/ibm-plex-mono-ext-400.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Plex Mono"; font-weight: 500; src: url(/static/vendor/fonts/ibm-plex-mono-500.woff2) format("woff2"), url(/static/vendor/fonts/ibm-plex-mono-ext-500.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Source Sans 3"; font-weight: 400; src: url(/static/vendor/fonts/source-sans-3-400.woff2) format("woff2"), url(/static/vendor/fonts/source-sans-3-ext-400.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Source Sans 3"; font-weight: 600; src: url(/static/vendor/fonts/source-sans-3-600.woff2) format("woff2"), url(/static/vendor/fonts/source-sans-3-ext-600.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Source Sans 3"; font-weight: 700; src: url(/static/vendor/fonts/source-sans-3-700.woff2) format("woff2"), url(/static/vendor/fonts/source-sans-3-ext-700.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "VT323"; font-weight: 400; src: url(/static/vendor/fonts/vt323-400.woff2) format("woff2"), url(/static/vendor/fonts/vt323-ext-400.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Silkscreen"; font-weight: 400; src: url(/static/vendor/fonts/silkscreen-400.woff2) format("woff2"); font-display: swap; } /* ===================== Thèmes ===================== */ :root { --head: var(--sans); --graph-font: "Plex Sans"; --sans: "Plex Sans", -apple-system, "Segoe UI", sans-serif; --mono: "Plex Mono", ui-monospace, Menlo, monospace; --bg: #f3f1ea; --surface: #fbfaf6; --surface2: #ecebe4; --ink: #1c1d20; --ink2: #43454b; --muted: #74777e; --rule: #d8d5cb; --rule2: #e6e3d9; --accent: #0d6b61; --accent-ink: #ffffff; --accent-soft: rgba(13,107,97,.10); --danger: #a4261c; --warn: #9a6407; --ok: #2f6b2f; --t-strong: #0d6b61; --t-name: #7a4a1e; --t-weak: #9a6407; --sel: rgba(13,107,97,.14); --shadow: 0 6px 24px rgba(28,29,32,.14); --side-w: 216px; /* Graphe : palette de la maquette (pastilles pleines, icône blanche, liens violet sombre fléchés) */ --g-purple: #8B5CF6; --g-yellow: #FBBF24; --g-red: #EF4444; --g-teal: #4ADE80; --g-hub: #9CA3AF; --g-edge: #4C1D95; --g-icon: #FFFFFF; --g-label: var(--muted); /* Kit « Phare » (gabarit graphe) : couleur pleine + teinte + encre lisible sur la teinte. Lus par les pastilles .pill--*, le segment, les bandeaux, les jauges, la chaîne de preuve et la légende « force du lien ». */ --blue: #1E56C9; --blue-bg: #E6EEFC; --blue-ink: #153E92; --orange: #D96A14; --orange-bg: #FBE6D4; --orange-ink: #9A4E00; --violet: #6B4FD8; --violet-bg: #ECE7FA; --violet-ink: #4A32A6; --red: #C7384D; --red-bg: #FBE4E8; --red-ink: #9B2335; --green: #1B7F4C; --green-bg: #E3F3EA; --green-ink: #166239; --amber: #B7791F; --amber-bg: #FFF1CC; --amber-ink: #7A4F00; --gray: #7A8494; --gray-bg: #F1F3F7; --gray-ink: #3C4656; --ai: #7C4DD6; --ai-ink: #5A2FB3; --on-fill: #FFFFFF; /* Graphe : scène à points, anneau de sélection, enregistrements (séparés des acteurs), tirets des hubs */ --stage: var(--surface); --dot: var(--rule2); --g-rec: var(--g-red); --g-sel: var(--ink); --g-link: var(--g-edge); } :root[data-theme="dark"], :root[data-theme="midnight"], :root[data-theme="pixel"], :root[data-theme="comcyber-dark"] { --g-edge: #8B6FE0; --g-hub: #6B7280; } :root:is([data-theme="dark"], [data-theme="midnight"], [data-theme="pixel"], [data-theme="comcyber-dark"], [data-theme="phare-dark"]) { --blue: #5B8DF0; --blue-bg: #1A2A4A; --blue-ink: #AFC6F8; --orange: #F08A3A; --orange-bg: #3D2A17; --orange-ink: #F6B77E; --violet: #9B85F0; --violet-bg: #2A2347; --violet-ink: #C9BCF8; --red: #EF6478; --red-bg: #43202A; --red-ink: #F7A3B0; --green: #4DC57E; --green-bg: #163827; --green-ink: #8FE0B0; --amber: #E6B04A; --amber-bg: #3D3014; --amber-ink: #F2D18A; --gray: #8E99AB; --gray-bg: #222B38; --gray-ink: #C3CCD9; --ai: #A98BF5; --ai-ink: #C9B6FF; --on-fill: #0F1420; } :root[data-theme="dark"] { --bg: #16181c; --surface: #1d2025; --surface2: #262a31; --ink: #e9e7e0; --ink2: #c3c1ba; --muted: #8c9099; --rule: #30343c; --rule2: #262a31; --accent: #5fc1b3; --accent-ink: #0e1a18; --accent-soft: rgba(95,193,179,.14); --danger: #ef7b72; --warn: #e0a84a; --ok: #7fc47f; --t-strong: #5fc1b3; --t-name: #d9a06a; --t-weak: #e0a84a; --sel: rgba(95,193,179,.18); --shadow: 0 8px 28px rgba(0,0,0,.5); } /* ===================== Base ===================== */ * { box-sizing: border-box; } html { height: 100%; overflow: hidden; } /* Coque stable : la page ne défile jamais ; la barre latérale, l'en-tête et l'inspecteur restent en place, seule la zone de travail (main) défile, et chaque vue y place ses propres ascenseurs (listes, fiches, panneaux). */ body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; } body { font: 14px/1.5 var(--sans); color: var(--ink); background: var(--bg); display: flex; align-items: stretch; -webkit-font-smoothing: antialiased; } h1 { font-size: 20px; font-weight: 600; margin: 0; letter-spacing: -.01em; } h2 { font-size: 15px; font-weight: 600; margin: 0 0 10px; } h2.section { margin: 26px 0 10px; padding-top: 10px; border-top: 1px solid var(--rule); } h3 { font-size: 14px; font-weight: 600; margin: 0 0 6px; } p { margin: 0 0 8px; } a { color: var(--accent); } code, .mono { font-family: var(--mono); font-size: .92em; } code { background: var(--surface2); padding: 0 4px; border-radius: 3px; } .muted { color: var(--muted); } .small { font-size: 12px; } .num { font-variant-numeric: tabular-nums; text-align: right; } .grow { flex: 1; min-width: 160px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .hint { color: var(--muted); font-size: 12.5px; margin: 6px 0 14px; max-width: 110ch; } .sep { color: var(--muted); margin: 0 6px; } .empty { color: var(--muted); padding: 24px 0; } input[type=text], input[type=search], input[type=date], input[type=password], input[type=number], input[type=email], input:not([type]), select, textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 3px; padding: 6px 9px; min-width: 0; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { width: 100%; resize: vertical; } label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } label > input, label > select, label > textarea { color: var(--ink); font-size: 14px; } .btn { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 3px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--ink2); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; } .btn.danger { color: var(--danger); } .btn.small { font-size: 12px; padding: 3px 8px; } .btn:disabled { opacity: .45; cursor: default; } /* ===================== Barre latérale ===================== */ .side { width: var(--side-w); flex: 0 0 var(--side-w); height: 100%; min-height: 0; background: var(--surface); border-right: 1px solid var(--rule); display: flex; flex-direction: column; } .nav { overflow-y: auto; min-height: 0; } .brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; } .brand-mark { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .08em; background: var(--ink); color: var(--bg); padding: 3px 6px; border-radius: 3px; } .brand-name { font-weight: 600; font-size: 15px; letter-spacing: -.01em; } .nav { display: flex; flex-direction: column; padding: 4px 10px; gap: 1px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 4px; color: var(--ink2); text-decoration: none; font-weight: 500; font-size: 13.5px; } .nav a .ic { width: 16px; height: 16px; opacity: .85; flex: none; } .nav a:hover { background: var(--surface2); color: var(--ink); } .nav a.active { background: var(--accent-soft); color: var(--accent); } .side-foot { margin-top: auto; padding: 14px 18px 18px; border-top: 1px solid var(--rule2); display: flex; flex-direction: column; gap: 10px; } .stats { font-size: 12px; color: var(--muted); line-height: 1.6; } .stats b { color: var(--ink2); font-weight: 500; font-variant-numeric: tabular-nums; } .stats .path { font-family: var(--mono); font-size: 10.5px; word-break: break-all; opacity: .8; } /* ===================== Entête / omnibar ===================== */ .shell { flex: 1; min-width: 0; min-height: 0; height: 100%; display: flex; flex-direction: column; } /* En-tête sur une seule ligne : omnibar, bouton Inspecteur, dossier actif */ .top { flex: none; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .omni { display: flex; gap: 6px; flex: 1 1 56%; min-width: 0; } .top-row { flex: 0 1 auto; } .top-row > .grow { display: none; } @media (max-width: 1500px) { body.insp-on .insp-toggle .lbl, body.insp-on .omni .btn .lbl { display: none; } } .omni input { flex: 1; font-size: 15px; padding: 9px 12px; background: var(--surface); } .trail { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-height: 22px; margin-top: 8px; font-size: 12px; } .trail-label { color: var(--muted); margin-right: 6px; text-transform: uppercase; letter-spacing: .08em; font-size: 10.5px; font-family: var(--mono); } .crumb { font: inherit; font-size: 12px; border: 0; background: transparent; color: var(--ink2); padding: 1px 6px; border-radius: 3px; cursor: pointer; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crumb:hover { background: var(--surface2); color: var(--ink); } .crumb.graph { color: var(--accent); } .crumb.clear { color: var(--muted); margin-left: 8px; } .trail .sep { margin: 0 2px; } main { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 18px 20px 40px; max-width: none; width: 100%; box-sizing: border-box; } .view { display: none; } .view.active { display: block; } .toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .toolbar h1 { margin-right: 10px; } .scope { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; color: var(--ink2); font-size: 13px; } .scope select { max-width: 380px; } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 1100px) { .two { grid-template-columns: 1fr; } } .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ===================== Pivots ===================== */ .pv { cursor: pointer; border-bottom: 1px dotted var(--rule); border-radius: 2px; } .pv:hover { background: var(--sel); border-bottom-color: var(--accent); } .pv.t-strong { color: var(--t-strong); } .pv.t-name { color: var(--t-name); } .pv.t-weak { color: var(--t-weak); } .pv.hit { background: var(--sel); border-bottom: 1px solid var(--accent); font-weight: 500; } .pv.ref { color: var(--ink); font-weight: 500; border-bottom-color: var(--rule); } .pv.actor { color: var(--accent); font-weight: 500; border-bottom: 0; } .pv.tag { font-family: var(--mono); font-size: 12px; color: var(--ink2); border-bottom: 0; margin-right: 6px; } .pv.tag:hover, .pv.tag.active { color: var(--accent); } .kind { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .kind.t-strong { color: var(--t-strong); } .kind.t-name { color: var(--t-name); } .kind.t-weak { color: var(--t-weak); } i.t-strong, i.t-name, i.t-weak { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px; vertical-align: middle; } i.t-strong { background: var(--t-strong); } i.t-name { background: var(--t-name); } i.t-weak { background: var(--t-weak); } .pop { position: fixed; z-index: 50; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; box-shadow: var(--shadow); min-width: 240px; max-width: 360px; padding: 4px; } .pop-head { padding: 8px 10px 6px; border-bottom: 1px solid var(--rule2); margin-bottom: 4px; } .pop-title { font-weight: 500; word-break: break-all; } .pop-sub { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 2px; } .pop-act { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; text-align: left; font: inherit; font-size: 13px; padding: 6px 10px; border: 0; background: transparent; color: var(--ink); border-radius: 3px; cursor: pointer; } .pop-act:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); } .pop-act:disabled { color: var(--muted); cursor: default; } .pop-act small { color: var(--muted); font-size: 11px; white-space: nowrap; } /* ===================== Tables ===================== */ table.grid { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; } table.grid th { font-family: var(--mono); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); background: var(--surface2); } table.grid td { padding: 7px 10px; border-bottom: 1px solid var(--rule2); vertical-align: top; } table.grid tr:last-child td { border-bottom: 0; } table.grid tbody tr:hover td { background: var(--surface2); } table.grid .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .status { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } .status.done { color: var(--ok); } .status.running, .status.queued { color: var(--warn); } .status.error { color: var(--danger); } .progress { height: 6px; background: var(--surface2); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; min-width: 120px; } .progress > div { height: 100%; background: var(--accent); transition: width .5s; } /* ===================== Résultats / enregistrements ===================== */ .empty-state { max-width: 70ch; padding: 40px 0; } .empty-state h1 { margin-bottom: 10px; } .result-head { padding: 6px 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; } .group { margin-top: 22px; } .group-head { font-size: 14px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; } .rec { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 10px 14px; margin: 8px 0; } .rec-meta { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 12px; margin-bottom: 6px; } .rec-meta .match { color: var(--ink2); } .rec-meta .right { margin-left: auto; } dl.fields { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 0 28px; } dl.fields .f { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 10px; padding: 2px 0; border-bottom: 1px solid var(--rule2); font-size: 13px; } dl.fields dt { color: var(--muted); font-family: var(--mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-top: 2px; } dl.fields dd { margin: 0; word-break: break-word; font-family: var(--mono); font-size: 12.5px; } dl.fields.compact { grid-template-columns: 1fr; } .tags { display: flex; flex-wrap: wrap; gap: 2px 4px; align-items: center; } .tags .count { color: var(--muted); font-size: 11px; } /* ===================== Verdict / comparaison ===================== */ .verdict { background: var(--surface); border: 1px solid var(--rule); border-left: 4px solid var(--muted); border-radius: 4px; padding: 16px 20px; margin: 10px 0 18px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; } .verdict.recycled, .verdict.mostly { border-left-color: var(--danger); } .verdict.partial, .verdict.marginal { border-left-color: var(--warn); } .verdict.new { border-left-color: var(--ok); } .verdict h2 { font-size: 20px; margin-bottom: 6px; } .verdict .lead { font-size: 15px; margin-bottom: 8px; } .verdict ul { margin: 6px 0 0 18px; padding: 0; } .verdict li { margin: 3px 0; } .verdict .venn { text-align: center; } .venn svg text { font-family: var(--sans); } @media (max-width: 1000px) { .verdict { grid-template-columns: 1fr; } } .cov { padding: 10px 0; border-bottom: 1px solid var(--rule2); } .cov-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .cov-pct { font-variant-numeric: tabular-nums; font-weight: 600; } .bar { height: 8px; background: var(--surface2); border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; margin-top: 6px; } .bar > div { height: 100%; } .c-high { color: var(--danger); } .c-mid { color: var(--warn); } .c-low { color: var(--ok); } .b-high { background: var(--danger); } .b-mid { background: var(--warn); } .b-low { background: var(--ok); } details.cv { margin-top: 6px; } details.cv > summary { cursor: pointer; font-size: 12.5px; color: var(--accent); list-style: none; display: inline-block; padding: 2px 0; margin-right: 16px; } details.cv > summary::before { content: "▸ "; font-size: 10px; } details.cv[open] > summary::before { content: "▾ "; } details.cv > summary::-webkit-details-marker { display: none; } .cv-body { margin: 8px 0 4px; } .vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2px 18px; font-family: var(--mono); font-size: 12.5px; } .pager { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 8px; } table.raw { width: 100%; border-collapse: collapse; } table.raw th { font-family: var(--mono); font-weight: 500; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rule); } table.raw th.a { color: var(--accent); } table.raw th.b { color: var(--t-name); } table.raw td { vertical-align: top; padding: 8px; border-bottom: 1px solid var(--rule2); width: 42%; } table.raw td:first-child { width: 16%; font-family: var(--mono); font-size: 12px; word-break: break-all; } table.raw .rec { margin: 0 0 6px; padding: 8px 10px; } .shared { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } details.tech { margin-top: 18px; } details.tech > summary { cursor: pointer; color: var(--accent); font-weight: 500; } .structure { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; } @media (max-width: 1000px) { .structure { grid-template-columns: 1fr; } } .cand { display: grid; grid-template-columns: 1fr 90px auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule2); } .cand .bar { margin-top: 4px; } /* ===================== Catalogue / détail ===================== */ .ds-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 8px; padding-top: 14px; border-top: 1px solid var(--rule); } .meta { font-family: var(--mono); font-size: 11.5px; color: var(--muted); word-break: break-all; } .tbl { border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); padding: 10px 14px; margin: 8px 0; } .tbl-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .atoms { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0; font-size: 12.5px; } .atoms b { font-weight: 500; font-variant-numeric: tabular-nums; } details.cols > summary { cursor: pointer; color: var(--accent); font-size: 12.5px; } .samples { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: pre-wrap; margin: 0; } .timeline { border-left: 2px solid var(--rule); margin: 6px 0 0 6px; padding-left: 16px; } .timeline > div { position: relative; margin: 10px 0; } .timeline > div::before { content: ""; position: absolute; left: -21px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .date { font-family: var(--mono); font-size: 12px; color: var(--ink2); } /* ===================== Graphe ===================== */ .graph-wrap { display: grid; grid-template-columns: 1fr 360px; gap: 14px; } #cy { height: 72vh; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; } .g-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; max-height: 72vh; overflow: auto; } .legend { display: inline-flex; gap: 2px 6px; flex-wrap: wrap; margin-left: 4px; } .legend span { display: inline-flex; align-items: center; gap: 4px; } .legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; } /* ===================== Ingestion ===================== */ .ingest-layout { display: grid; grid-template-columns: minmax(420px, 620px) minmax(0, 1fr); gap: 18px; align-items: start; } .ingest-panel { max-width: none; } .jobs-panel { position: sticky; top: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 120px); padding: 0; overflow: hidden; } .jobs-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); } .jobs-head h2 { margin: 0; font-size: 14px; display: flex; align-items: center; gap: 8px; } .jobs-scroll { overflow: auto; min-height: 120px; padding: 0 6px 6px; } .jobs-scroll table.grid thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; } .jobs-scroll table.grid td:nth-child(2) { min-width: 200px; } .jobs-scroll table.grid td:nth-child(6) { min-width: 220px; } @media (max-width: 1180px) { .ingest-layout { grid-template-columns: 1fr; } .jobs-panel { position: static; max-height: none; } } /* avec l'inspecteur ouvert, la place manque pour deux colonnes avant 1 640 px : les travaux passent sous le formulaire */ @media (max-width: 1640px) { body.insp-on .ingest-layout { grid-template-columns: 1fr; } body.insp-on .jobs-panel { position: static; max-height: none; } } .staged-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; } .staged-list .staged { margin: 0; } .staged-list .staged-more { font-size: 12px; color: var(--muted); padding: 2px 6px; } .ingest-panel h2 { font-size: 14px; } .dropzone { border: 1px dashed var(--rule); border-radius: 4px; padding: 22px; text-align: center; color: var(--ink2); background: var(--bg); } .dropzone.over { border-color: var(--accent); background: var(--accent-soft); } .or-sep { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 10px 0; } .or-sep::before, .or-sep::after { content: ""; flex: 1; height: 1px; background: var(--rule); } .staged { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent-soft); } .link { color: var(--accent); cursor: pointer; text-decoration: underline; display: inline; } .browser { max-height: 55vh; overflow: auto; border: 1px solid var(--rule); border-radius: 4px; margin-top: 10px; } .browser div { padding: 6px 10px; cursor: pointer; display: flex; gap: 10px; border-bottom: 1px solid var(--rule2); } .browser div:hover { background: var(--surface2); } .browser .size { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 12px; } /* ===================== Modale / toast ===================== */ .modal-bg { position: fixed; inset: 0; background: rgba(20,20,22,.45); display: none; align-items: center; justify-content: center; z-index: 40; } .modal-bg.open { display: flex; } .modal { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; box-shadow: var(--shadow); width: min(1400px, 95vw); max-height: 90vh; overflow: auto; padding: 18px 20px; } .toast { position: fixed; bottom: 18px; right: 18px; background: var(--ink); color: var(--bg); padding: 9px 14px; border-radius: 4px; z-index: 60; display: none; font-size: 13px; } .toast.err { background: var(--danger); color: #fff; } /* Tables larges : défilement horizontal interne */ #catalog-list, #jobs, #actors-list, .modal > div, details.tech { overflow-x: auto; } #catalog-list table.grid { min-width: 960px; } .rec { overflow-wrap: anywhere; } .panel > .btn, form.panel > .btn { align-self: flex-start; } /* ===================== Icônes ===================== */ .ic { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; flex: none; } .btn .ic { margin-right: 6px; } .btn .ic:only-child, .btn .ic + .lbl:empty { margin-right: 0; } .btn-group { display: inline-flex; } .btn-group .btn { border-radius: 0; margin-left: -1px; padding: 6px 9px; } .btn-group .btn:first-child { border-radius: 3px 0 0 3px; margin-left: 0; } .btn-group .btn:last-child { border-radius: 0 3px 3px 0; } .btn-group .btn .ic { margin: 0; } .ic.big { width: 26px; height: 26px; stroke-width: 1.3; color: var(--muted); margin-bottom: 6px; } .kind .ic { width: 11px; height: 11px; margin-right: 3px; vertical-align: -1.5px; } dl.fields dt .ic { width: 11px; height: 11px; margin-left: 5px; vertical-align: -2px; stroke-width: 1.8; } dl.fields dt .ic.t-strong, .ic.t-strong { color: var(--t-strong); } dl.fields dt .ic.t-name, .ic.t-name { color: var(--t-name); } dl.fields dt .ic.t-weak, .ic.t-weak { color: var(--t-weak); } .pop-act .ic { width: 14px; height: 14px; margin-right: 8px; color: var(--muted); } .pop-act:hover:not(:disabled) .ic { color: var(--accent); } .pop-act span { display: inline-flex; align-items: center; } .verdict h2 .ic { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; } .verdict.recycled h2 .ic, .verdict.mostly h2 .ic { color: var(--danger); } .verdict.partial h2 .ic, .verdict.marginal h2 .ic { color: var(--warn); } .verdict.new h2 .ic { color: var(--ok); } .status .ic { width: 12px; height: 12px; margin-right: 4px; } @keyframes spin { to { transform: rotate(360deg); } } .ic.spin { animation: spin 1.1s linear infinite; transform-origin: center; } .group-head .ic, .ds-head .ic { width: 15px; height: 15px; color: var(--muted); margin-right: 6px; } .side-toggle { margin-left: auto; padding: 2px 5px; color: var(--muted); } .side-toggle .ic { margin: 0; transition: transform .25s; } .pv.actor .ic { width: 12px; height: 12px; margin-right: 2px; vertical-align: -1px; } /* ===================== Barre latérale repliée ===================== */ .side.collapsed { --side-w: 60px; } .side.collapsed .brand { padding: 18px 0 14px; justify-content: center; flex-direction: column; gap: 10px; } .side.collapsed .brand-name, .side.collapsed .lbl, .side.collapsed .stats { display: none; } .side.collapsed .side-toggle { margin: 0; } .side.collapsed .side-toggle .ic { transform: rotate(180deg); } .side.collapsed .nav a { justify-content: center; padding: 10px 0; } .side.collapsed .nav a .ic { width: 18px; height: 18px; } .side.collapsed .side-foot { padding: 12px 8px 16px; align-items: center; } .side.collapsed #theme-toggle .ic { margin: 0; } /* ===================== Graphe : infobulle ===================== */ .graph-wrap { position: relative; } .g-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--bg); font-size: 12px; padding: 4px 8px; border-radius: 3px; max-width: 340px; word-break: break-all; box-shadow: var(--shadow); } .g-tip small { display: block; opacity: .7; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } #cy { cursor: grab; } #cy:active { cursor: grabbing; } /* ===================== Responsive ===================== */ @media (max-width: 1280px) { .graph-wrap { grid-template-columns: 1fr 300px; } .scope select { max-width: 260px; } } @media (max-width: 980px) { body { flex-direction: column; align-items: stretch; } .side, .side.collapsed { --side-w: auto; width: 100%; flex: none; height: auto; z-index: 12; flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--rule); padding: 0 8px; } .brand, .side.collapsed .brand { padding: 8px 8px; flex-direction: row; gap: 8px; } .brand-name, .side-toggle { display: none !important; } .nav { flex-direction: row; padding: 0; gap: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .nav a, .side.collapsed .nav a { padding: 10px 10px; font-size: 12.5px; white-space: nowrap; } .nav-group { flex-direction: row; } .nav-sub, .side.collapsed .nav-sub { display: flex; flex-direction: row; margin: 0; padding: 0; border: 0; } .nav-parent { display: none; } .side.collapsed .lbl { display: inline; } .side-foot { margin: 0 0 0 auto; padding: 0 4px; border: 0; flex-direction: row; align-items: center; gap: 6px; } .stats, .side.collapsed .stats { display: none; } #theme-toggle .lbl { display: none; } #theme-toggle .ic { margin: 0; } .top { padding: 8px 12px; gap: 6px; } .omni { flex-basis: 100%; } .top-row { margin-left: 0; width: 100%; } .top-row .grow { display: none; } .case-bar { margin-left: auto; } .who-link .lbl { display: none; } #wiki-link .lbl { display: none; } main { padding: 14px 12px 40px; } .graph-wrap { grid-template-columns: 1fr; } #cy { height: 56vh; } .g-panel { max-height: 36vh; } .two, .structure, .verdict, .grid2 { grid-template-columns: 1fr; } .cand { grid-template-columns: 1fr auto; } .cand .btn { grid-column: 1 / -1; justify-self: start; } dl.fields { grid-template-columns: 1fr; } table.raw td { display: block; width: auto !important; } table.raw thead { display: none; } table.raw td:first-child { background: var(--surface2); } } @media (max-width: 640px) { .omni input { min-width: 0; font-size: 14px; } .omni .btn .lbl { display: none; } .side .nav a .lbl, .side.collapsed .nav a .lbl { display: none; } .nav a .ic { width: 18px; height: 18px; } .toolbar h1 { width: 100%; padding-right: 36px; } .toolbar .grow { flex-basis: 100%; } .toolbar { position: relative; } .toolbar > .help-btn { position: absolute; top: 4px; right: 0; } .scope { width: 100%; } .scope select { max-width: none; flex: 1; } dl.fields .f { grid-template-columns: 1fr; gap: 0; padding: 4px 0; } .trail { display: none; } .modal { padding: 12px; } } /* ===================== Tuiles : une icône encadrée par type d'objet ===================== */ .tile { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 5px; border: 1px solid currentColor; color: var(--muted); background: var(--surface); vertical-align: -6px; margin-right: 7px; flex: none; } .tile .ic { width: 13px; height: 13px; margin: 0; stroke-width: 1.8; vertical-align: 0; } .tile.xs { width: 16px; height: 16px; border-radius: 4px; vertical-align: -4px; margin-right: 5px; } .tile.xs .ic { width: 10px; height: 10px; stroke-width: 2; } .tile.sm { width: 18px; height: 18px; border-radius: 4px; vertical-align: -4px; margin-right: 6px; } .tile.sm .ic { width: 11px; height: 11px; } .tile.lg { width: 30px; height: 30px; border-radius: 7px; vertical-align: -9px; margin-right: 10px; } .tile.lg .ic { width: 17px; height: 17px; stroke-width: 1.6; } .tile.xl { width: 44px; height: 44px; border-radius: 10px; margin: 0 0 12px; } .tile.xl .ic { width: 24px; height: 24px; stroke-width: 1.4; } .tile.t-strong { color: var(--t-strong); background: color-mix(in srgb, var(--t-strong) 9%, var(--surface)); } .tile.t-name { color: var(--t-name); background: color-mix(in srgb, var(--t-name) 9%, var(--surface)); } .tile.t-weak { color: var(--t-weak); background: color-mix(in srgb, var(--t-weak) 9%, var(--surface)); } .tile.t-ui, .tile.t-ds { color: var(--accent); background: var(--accent-soft); } .tile.t-actor { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); } .tile.t-tag { color: var(--ink2); background: var(--surface2); } .tile.t-rec { color: var(--muted); background: var(--surface2); border-color: var(--rule); } .tile.t-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); } .tile.t-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); } .tile.t-ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); } h1 .tile.lg { vertical-align: -8px; } h2 .tile { vertical-align: -6px; } .kind { display: inline-flex; align-items: center; gap: 0; } .kind .tile { margin-right: 5px; } .pop-head { display: flex; gap: 10px; align-items: center; } .pop-head .tile.lg { margin: 0; } .pop-head > div { min-width: 0; } .nav a .tile { margin-right: 0; color: var(--ink2); background: transparent; border-color: var(--rule); } .nav a:hover .tile { color: var(--ink); border-color: var(--ink2); } .nav a.active .tile { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); } .side.collapsed .nav a .tile { width: 28px; height: 28px; border-radius: 7px; } .side.collapsed .nav a .tile .ic { width: 15px; height: 15px; } .legend .tile { margin-right: 4px; } .rec-meta .tile { margin-right: 4px; } table.grid td .tile.sm { vertical-align: -4px; } .status .tile.xs { margin-right: 5px; border-color: currentColor; background: transparent; } .status { white-space: nowrap; display: inline-flex; align-items: center; } .pv.tag { white-space: nowrap; display: inline-flex; align-items: center; margin: 1px 8px 1px 0; } .tags .count { margin-left: -6px; margin-right: 6px; } /* ===================== Graphe : panneau actif, légende cliquable ===================== */ .hint:has(#g-legend) { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; } .legend-k { font: inherit; font-size: 12.5px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 1px 6px 1px 2px; cursor: pointer; display: inline-flex; align-items: center; } .legend-k:hover { border-color: var(--rule); color: var(--ink); } .legend-k.off { opacity: .4; text-decoration: line-through; } #g-leaves.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .g-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--rule2); font-size: 13px; } .g-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-group { margin: 10px 0 2px; font-size: 13px; } .btn.icon { padding: 2px 5px; line-height: 1; } .btn.icon .ic { margin: 0; } .g-panel dl.fields dd.row { display: flex; align-items: center; } .g-panel h3 .tile.lg { vertical-align: -9px; } #g-undim.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ===================== Échantillon / référence : code couleur ===================== */ .ds-chip { display: inline-block; padding: 0 6px; border-radius: 3px; font-weight: 600; border: 1px solid; line-height: 1.5; max-width: 100%; vertical-align: baseline; } .ds-chip.a { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 45%, transparent); } .ds-chip.b { color: var(--t-name); background: color-mix(in srgb, var(--t-name) 10%, var(--surface)); border-color: color-mix(in srgb, var(--t-name) 45%, transparent); } .scope { flex-direction: row; align-items: center; gap: 8px; } .scope .scope-lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 2px 6px; border-radius: 3px; } .scope.a .scope-lbl { color: var(--accent); background: var(--accent-soft); } .scope.a select { border-left: 4px solid var(--accent); } .scope.b .scope-lbl { color: var(--t-name); background: color-mix(in srgb, var(--t-name) 10%, var(--surface)); } .scope.b select { border-left: 4px solid var(--t-name); } .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; } .dot.a { background: var(--accent); } .dot.b { background: var(--t-name); } .verdict .lead .ds-chip, .cov-line .ds-chip { font-size: .95em; } #g-freeze.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .g-panel .raw { margin: 4px 0 8px 22px; } .g-panel .raw dl.fields .f { font-size: 12px; } dl.fields dd .btn.icon { margin-left: 6px; vertical-align: middle; } .g-panel h4 { margin: 12px 0 4px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; } /* Panneau du graphe : champs empilés (étroit) */ .g-panel dl.fields .f { grid-template-columns: 1fr; gap: 0; padding: 4px 0; } .g-panel dl.fields dt { white-space: normal; } .g-panel dl.fields dd { word-break: break-all; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; } .g-panel .raw { margin-left: 8px; padding-left: 10px; border-left: 2px solid var(--rule); } .g-panel .raw .rec { border: 0; padding: 0; background: transparent; } /* ===================== Entête : parcours + dossier actif ===================== */ .top-row { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; } .top-row .trail { margin-top: 0; flex: 1; } .case-bar { display: flex; align-items: center; gap: 4px; margin-left: auto; } .case-bar .tile { margin-right: 2px; } .case-bar select { font-size: 12px; padding: 3px 6px; max-width: 220px; } /* ===================== Comparaison : rubriques délimitées, anneaux ===================== */ .cov-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; margin: 12px 0; overflow: hidden; } .cov-head { display: flex; align-items: center; gap: 14px; padding: 14px 16px; flex-wrap: wrap; } .cov-title { font-size: 15px; } .cov-metrics { display: flex; gap: 22px; margin-left: auto; } .metric { display: flex; align-items: center; gap: 10px; } .metric .small { max-width: 150px; line-height: 1.3; } .donut { display: block; } .donut text { font-family: var(--sans); font-weight: 600; } .cov-tabs { display: flex; gap: 0; border-top: 1px solid var(--rule); background: var(--surface2); padding: 0 10px; } .cov-tabs .tab { font: inherit; font-size: 12.5px; font-weight: 500; padding: 8px 14px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .cov-tabs .tab:hover { color: var(--ink); } .cov-tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); } .cov-body { padding: 12px 16px 16px; border-top: 1px solid var(--rule); background: var(--surface); } .cov-body:empty { display: none; } .vals-box { border: 1px solid var(--rule); border-radius: 4px; max-height: 360px; overflow: auto; background: var(--bg); } .vals-box .vals { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; } .vals-box .vals > div { padding: 3px 10px; border-bottom: 1px solid var(--rule2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vals-box .vals > div:nth-child(odd) { background: var(--surface); } .pager { margin: 0 0 8px; gap: 10px; } .pager input { font-size: 12px; padding: 3px 8px; } table.raw { border: 1px solid var(--rule); border-radius: 4px; } table.raw th { background: var(--surface2); } table.raw th.a { color: var(--accent); } table.raw th.b { color: var(--t-name); } .quality { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule); border-left-width: 4px; border-radius: 4px; background: var(--bg); } .quality.good { border-left-color: var(--ok); } .quality.mid { border-left-color: var(--warn); } .quality.bad { border-left-color: var(--danger); } .quality.unknown { border-left-color: var(--muted); } .qstats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin-top: 8px; } .qstats b { font-variant-numeric: tabular-nums; } .prec { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--rule); color: var(--muted); } .prec.after { color: var(--danger); border-color: var(--danger); } .prec.before { color: var(--ok); border-color: var(--ok); } .prec.same { color: var(--muted); } .rel { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; } .rel.fiable { color: var(--ok); } .rel.recycleur { color: var(--danger); } .rel.verifier { color: var(--warn); } .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; } .item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); } .item .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item input { font-size: 12px; padding: 2px 6px; width: 100%; } /* ===================== Thème pixel art ===================== */ :root[data-theme="pixel"] { --head: "Silkscreen", "Plex Mono", monospace; --graph-font: "Plex Sans"; --bg: #0b0d1a; --surface: #141733; --surface2: #1e2248; --ink: #eaf2ff; --ink2: #c9d2f4; --muted: #8f98c6; --rule: #3d4583; --rule2: #2b3062; --accent: #5ef2a0; --accent-ink: #0b0d1a; --accent-soft: rgba(94,242,160,.16); --danger: #ff5d8f; --warn: #ffb347; --ok: #5ef2a0; --t-strong: #5ef2a0; --t-name: #ffb347; --t-weak: #ff8ab0; --sel: rgba(94,242,160,.25); --shadow: 6px 6px 0 #05060f; } [data-theme="pixel"] .brand-name, [data-theme="pixel"] .nav a .lbl, [data-theme="pixel"] h1 { font-family: var(--head); letter-spacing: 0; } [data-theme="pixel"] h1 { font-size: 13px; } [data-theme="pixel"] .nav a .lbl { font-size: 8.5px; } [data-theme="pixel"] .brand-name { font-size: 9px; } [data-theme="pixel"] *, [data-theme="pixel"] *::before, [data-theme="pixel"] *::after { border-radius: 0 !important; } [data-theme="pixel"] .panel, [data-theme="pixel"] .rec, [data-theme="pixel"] .cov-card, [data-theme="pixel"] .verdict, [data-theme="pixel"] table.grid, [data-theme="pixel"] .pop, [data-theme="pixel"] .modal, [data-theme="pixel"] .tbl, [data-theme="pixel"] .g-panel, [data-theme="pixel"] #cy, [data-theme="pixel"] .item, [data-theme="pixel"] .quality, [data-theme="pixel"] .dropzone, [data-theme="pixel"] .vals-box { border-width: 2px; box-shadow: 5px 5px 0 #05060f; } [data-theme="pixel"] .btn { border-width: 2px; box-shadow: 3px 3px 0 #05060f; padding: 7px 12px; } [data-theme="pixel"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #05060f; } [data-theme="pixel"] .btn.primary { border-color: var(--accent); } [data-theme="pixel"] .tile { border-width: 2px; background: var(--surface2); } [data-theme="pixel"] .nav a.active .tile { background: var(--accent); } [data-theme="pixel"] .ic { shape-rendering: crispEdges; stroke-width: 2.4; } [data-theme="pixel"] input, [data-theme="pixel"] select, [data-theme="pixel"] textarea { border-width: 2px; } [data-theme="pixel"] .side { border-right-width: 2px; } [data-theme="pixel"] .top { border-bottom-width: 2px; } [data-theme="pixel"] .brand-mark { background: var(--accent); color: var(--accent-ink); font-family: var(--head); font-size: 9px; } [data-theme="pixel"] .bar > div, [data-theme="pixel"] .progress > div { background-image: repeating-linear-gradient(90deg, transparent 0 6px, rgba(5,6,15,.35) 6px 8px); } [data-theme="pixel"] .pv { border-bottom: 2px dotted var(--rule); } [data-theme="pixel"] .pv:hover { background: var(--sel); } [data-theme="pixel"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 200; background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; } [data-theme="pixel"] .toast { box-shadow: 4px 4px 0 #05060f; } [data-theme="pixel"] .empty-state h1 { font-size: 16px; } /* ===================== Détection ===================== */ .stack { display: flex; height: 16px; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; background: var(--surface2); } .stack > div { height: 100%; min-width: 0; } .stack .s-personal { background: var(--t-name); } .stack .s-corporate { background: var(--danger); } .stack .s-other { background: var(--muted); } .stack-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; margin-top: 6px; } .stack-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .domains { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; } .domains .pv { font-family: var(--mono); font-size: 12.5px; } .domains .n { color: var(--muted); font-size: 11.5px; margin-left: 3px; } .wl { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px; margin: 8px 0; } .wl .entries { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0; max-height: 220px; overflow: auto; } .wl .entry { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; padding: 1px 4px 1px 8px; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); } .wl .entry small { color: var(--muted); font-family: var(--sans); } .wl .entry .btn.icon { padding: 0 3px; } .profile-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 1000px) { .profile-two { grid-template-columns: 1fr; } } .theme-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; } .theme-card { border: 1px solid var(--rule); border-radius: 6px; padding: 12px; background: var(--surface); cursor: pointer; display: flex; flex-direction: column; gap: 8px; } .theme-card:hover { border-color: var(--accent); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .theme-preview { height: 72px; border-radius: 4px; border: 1px solid var(--rule); display: grid; grid-template-columns: 32px 1fr; overflow: hidden; } .theme-preview .tp-side { border-right: 1px solid var(--rule); } .theme-preview .tp-main { padding: 8px; display: flex; flex-direction: column; gap: 5px; } .theme-preview .tp-line { height: 6px; border-radius: 2px; width: 70%; } .theme-preview .tp-line.short { width: 40%; } /* ===================== Thème Minuit ===================== */ :root[data-theme="midnight"] { --bg: #0e1424; --surface: #151c30; --surface2: #1d2640; --ink: #e8edff; --ink2: #c2cbe8; --muted: #8592bb; --rule: #2d3858; --rule2: #232c47; --accent: #f2b544; --accent-ink: #1a1200; --accent-soft: rgba(242,181,68,.14); --danger: #ff6b6b; --warn: #ffa94d; --ok: #69db7c; --t-strong: #4cc9f0; --t-name: #c084fc; --t-weak: #ffa94d; --sel: rgba(242,181,68,.22); --shadow: 0 10px 30px rgba(0,0,0,.55); } /* ===================== Outil de veille ===================== */ .veille-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; } .vcred { display: inline-flex; gap: 6px; align-items: baseline; font-size: 12.5px; padding: 1px 9px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface2); } .vcred.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); } .vcred.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .vcred.bad { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .vcred.na { color: var(--muted); border-style: dashed; } .vchip { display: inline-block; padding: 0 6px; margin: 1px 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--surface2); font-size: 12px; } /* ===================== IA locale (bêta) et connecteurs ===================== */ :root { --beta: #7c3aed; --beta-soft: #f5f0ff; --beta-line: #d6c4fb; --beta-ink: #5b21b6; } :root:is([data-theme="dark"], [data-theme="midnight"], [data-theme="pixel"], [data-theme="comcyber-dark"]) { --beta-soft: #211a33; --beta-line: #4c3a7a; --beta-ink: #c9b6ff; } .beta-tag { display: inline-block; font-family: var(--sans); font-size: 9.5px; font-weight: 700; line-height: 1.35; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: var(--beta); border-radius: 3px; padding: 0 5px; margin-left: 6px; vertical-align: 1px; } .ai-btn { position: relative; gap: 6px; font-weight: 600; border-color: var(--beta-line); } .ai-btn:not(:disabled):hover { border-color: var(--beta); background: var(--beta-soft); } .ai-btn .beta-tag { position: absolute; top: -9px; right: -9px; margin: 0; box-shadow: 0 0 0 2px var(--surface); } .ai-btn:disabled .ai-logo, .ai-btn:disabled .ai-star { filter: grayscale(1); opacity: .5; } .ai-logo { display: inline-block; width: 18px; height: 18px; vertical-align: -4px; } .ai-star { color: var(--beta); font-size: 15px; line-height: 1; } .ai-out { margin-top: 12px; border: 1px solid var(--beta-line); border-left: 4px solid var(--beta); border-radius: 6px; background: var(--surface); padding: 12px 14px; } .ai-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .ai-head .ai-logo { width: 20px; height: 20px; } .ai-text { font-size: 13.5px; } .ai-text h4 { margin: 10px 0 4px; font-size: 13px; } .ai-text p { margin: 4px 0; } .ai-text ul, .ai-text ol { margin: 4px 0 6px; padding-left: 20px; } .ai-text li { margin: 2px 0; } .ai-wait { display: inline-flex; gap: 8px; align-items: center; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--beta-line); background: var(--beta-soft); color: var(--beta-ink); font-weight: 600; animation: ai-pulse 1.2s ease-in-out infinite; } @keyframes ai-pulse { 50% { opacity: .55; } } .ai-ctx { max-height: 260px; overflow: auto; font-size: 11px; background: var(--surface2); padding: 8px; border-radius: 4px; white-space: pre-wrap; margin: 6px 0 0; } .conn { display: flex; flex-direction: column; gap: 8px; } .conn + .conn { border-top: 1px solid var(--rule2); padding-top: 12px; margin-top: 12px; } .conn h3 { display: flex; align-items: center; gap: 6px; margin: 0; } .conn h3 .ai-logo { width: 20px; height: 20px; } label.check, span.check { flex-direction: row; align-items: center; gap: 8px; display: flex; } span.check { display: inline-flex; margin-top: 4px; color: var(--muted); } /* ===================== Thème COMCYBER (charte de l'outil de veille) ===================== */ /* Couleurs, police système et formes reprises de veille-comcyber (veille/web/templates/base.html) : bleu France, cartes blanches sur fond gris clair, angles de 8 px, en-tête blanc. Échantillon / référence : bleu et orange, comme GN / PN dans la veille. */ :root[data-theme="comcyber"], :root[data-theme="comcyber-dark"] { --sans: system-ui, -apple-system, "Segoe UI", sans-serif; --head: var(--sans); --graph-font: system-ui; /* sans guillemets : mot-clé générique */ --mono: ui-monospace, SFMono-Regular, Menlo, monospace; } :root[data-theme="comcyber"] { --bg: #f3f4f7; --surface: #ffffff; --surface2: #f7f8fa; --ink: #1b1d22; --ink2: #3b4048; --muted: #5b616b; --rule: #d7dbe2; --rule2: #e6e8ec; --accent: #000091; --accent-ink: #ffffff; --accent-soft: #e8e8ff; --danger: #b00020; --warn: #9a5b00; --ok: #1f7a3a; --t-strong: #2a78d6; --t-name: #eb6834; --t-weak: #9a5b00; --sel: rgba(0,0,145,.10); --shadow: 0 6px 20px rgba(27,29,34,.12); --flat: 0 1px 2px rgba(0,0,0,.06); } :root[data-theme="comcyber-dark"] { --bg: #111317; --surface: #1a1d23; --surface2: #20242b; --ink: #e7e9ee; --ink2: #c5cad3; --muted: #9aa1ab; --rule: #2d323b; --rule2: #262a31; --accent: #9b9bff; --accent-ink: #0b0b3a; --accent-soft: #23234a; --danger: #ff8a9a; --warn: #f2b85c; --ok: #6fd597; --t-strong: #5598e7; --t-name: #e8834f; --t-weak: #f2b85c; --sel: rgba(155,155,255,.18); --shadow: 0 8px 28px rgba(0,0,0,.5); --flat: none; } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) :is(.panel, table.grid, .pop, .modal, .theme-card) { border-radius: 8px; box-shadow: var(--flat); } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) :is(.pop, .modal) { box-shadow: var(--shadow); } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) .btn { border-radius: 6px; background: var(--surface2); } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) .btn:hover { border-color: var(--muted); } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) .btn.primary { background: var(--accent); font-weight: 600; } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) :is(input, select, textarea) { border-radius: 6px; } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) .top { background: var(--surface); box-shadow: var(--flat); } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) .nav a.active { box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) .brand-mark { background: var(--accent); color: var(--accent-ink); font-family: var(--sans); font-weight: 700; } :is([data-theme="comcyber"], [data-theme="comcyber-dark"]) :is(table.grid th, .kind) { font-family: var(--sans); font-weight: 600; letter-spacing: .03em; } /* ===================== Couleurs personnalisées ===================== */ .colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 16px; } .colors label { flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); } .colors input[type=color] { width: 36px; height: 26px; padding: 0; border: 1px solid var(--rule); border-radius: 4px; background: transparent; cursor: pointer; } .colors .sw { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; } /* ===================== Catalogue : mode avancé ===================== */ #cat-adv.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .sens { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; } .sens .s { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--rule); background: var(--bg); white-space: nowrap; } .sens .s b { font-variant-numeric: tabular-nums; font-weight: 500; } .sens .s.critical { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); } .sens .s.high { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); } .sens .s.medium { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } .sens .s.low { color: var(--muted); } .sens-level { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 3px; font-weight: 500; } .sens-level.critical { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); } .sens-level.high { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); } .sens-level.medium { background: var(--accent-soft); color: var(--accent); } .sens-level.low, .sens-level.none { background: var(--surface2); color: var(--muted); } /* ===================== Acteurs : tableau de bord glisser-déposer ===================== */ .board { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; align-items: start; } @media (max-width: 1100px) { .board { grid-template-columns: 1fr; } } .col { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; min-height: 200px; } .col-head { display: flex; align-items: center; gap: 8px; font-weight: 600; padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; } .col-head input { font-size: 12px; padding: 3px 8px; font-weight: 400; } .card { border: 1px solid var(--rule); border-radius: 4px; padding: 7px 9px; margin: 6px 0; background: var(--bg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .card[draggable="true"] { cursor: grab; } .card.dragging { opacity: .4; } .card .grow { min-width: 0; } .card .meta-line { width: 100%; font-size: 11.5px; color: var(--muted); } .gcard { border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; margin: 8px 0; background: var(--bg); transition: box-shadow .15s, border-color .15s; } .gcard.over, .card.over { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .gcard .zone { border: 1px dashed var(--rule); border-radius: 4px; padding: 6px 8px; margin-top: 6px; min-height: 30px; font-size: 12.5px; } .gcard .zone .lbl { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 6px; } .gcard .zone > span { display: inline-flex; align-items: center; gap: 2px; margin: 2px 8px 2px 0; } .drag-hint { font-size: 11.5px; color: var(--muted); } /* ===================== Comparaison : chronologie (carte de chaleur) ===================== */ .heat { overflow-x: auto; padding-bottom: 6px; } .heat table { border-collapse: separate; border-spacing: 3px; } .heat th { font-family: var(--mono); font-size: 10px; color: var(--muted); font-weight: 500; text-align: left; white-space: nowrap; padding: 0 6px 0 0; } .heat th.m { text-align: center; padding: 0; height: 14px; vertical-align: bottom; } .heat td { width: 12px; height: 12px; padding: 0; } .heat td i { display: block; width: 12px; height: 12px; border-radius: 2px; background: var(--surface2); } .heat td i.l1 { opacity: .35; } .heat td i.l2 { opacity: .55; } .heat td i.l3 { opacity: .78; } .heat td i.l4 { opacity: 1; } .heat tr.a td i.l1, .heat tr.a td i.l2, .heat tr.a td i.l3, .heat tr.a td i.l4 { background: var(--accent); } .heat tr.b td i.l1, .heat tr.b td i.l2, .heat tr.b td i.l3, .heat tr.b td i.l4 { background: var(--t-name); } .heat tr.c td i.l1, .heat tr.c td i.l2, .heat tr.c td i.l3, .heat tr.c td i.l4 { background: var(--danger); } /* ===================== Aide consolidée (bouton ? à droite de chaque barre) ===================== */ .hint { display: none; } .help-btn { margin-left: auto; flex: none; width: 26px; height: 26px; padding: 0; border-radius: 50%; border: 1.5px solid var(--rule); background: transparent; color: var(--muted); font: 600 13px/1 var(--sans); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s, border-color .15s; } .help-btn:hover, .help-btn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; } .help-panel { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 92vw); background: var(--surface); border-left: 1px solid var(--rule); box-shadow: var(--shadow); z-index: 45; padding: 16px 20px 24px; overflow: auto; } .help-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 12px; } .help-head .btn { margin-left: auto; } #help-body p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.55; } #help-body p + p { padding-top: 10px; border-top: 1px solid var(--rule2); } .legend-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12.5px; color: var(--muted); } .toolbar + .hint + .hint + .hint, .toolbar + .hint { margin: 0; } .empty-state { padding: 60px 0; text-align: left; } .empty-state h1 { font-size: 24px; } /* ===================== Chronologie : infobulle et colonne active ===================== */ .heat td i { transition: transform .08s; } .heat td.hl i { outline: 2px solid var(--ink); outline-offset: -1px; } .heat th.m { font-size: 10px; } .heat th.m span { display: inline-block; transform: translateX(-2px); } .heat-tip { position: absolute; z-index: 30; background: var(--ink); color: var(--bg); padding: 8px 10px; border-radius: 4px; font-size: 12px; max-width: 320px; pointer-events: none; box-shadow: var(--shadow); line-height: 1.45; } .heat-tip b { color: inherit; } .heat-wrap { position: relative; } /* ===================== Acteurs : rôle modifiable, dépôt immédiat ===================== */ .role { font-size: 11px; color: var(--muted); cursor: pointer; border-bottom: 1px dotted var(--rule); } .role:hover { color: var(--accent); } .card.ghost-add, .gcard .zone > span.ghost-add { opacity: .55; } .sens .s small { color: var(--muted); font-weight: 400; } /* ===================== IA au travail ===================== */ .ai-wait { position: relative; } .ai-orb { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; } .ai-orb::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; background: radial-gradient(circle, var(--beta-soft, rgba(124,58,237,.25)) 0%, transparent 70%); animation: ai-glow 1.6s ease-in-out infinite; } .ai-orb .ai-logo, .ai-orb .ai-star { position: relative; animation: ai-bob 1.6s ease-in-out infinite; } @keyframes ai-glow { 0%, 100% { transform: scale(.8); opacity: .5; } 50% { transform: scale(1.35); opacity: 1; } } @keyframes ai-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-2px) rotate(8deg); } } .ai-dots { display: inline-flex; gap: 3px; margin-left: 2px; } .ai-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; display: inline-block; animation: ai-dot 1.2s infinite ease-in-out; } .ai-dots i:nth-child(2) { animation-delay: .2s; } .ai-dots i:nth-child(3) { animation-delay: .4s; } @keyframes ai-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } } .ai-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--muted); } .ai-steps span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--rule); transition: all .3s; } .ai-steps span.on { color: var(--beta-ink, var(--accent)); border-color: var(--beta, var(--accent)); background: var(--beta-soft, var(--accent-soft)); } .ai-steps span.done { color: var(--ok); border-color: var(--ok); } .ai-wait-box { padding: 10px 12px; border: 1px solid var(--beta-line, var(--rule)); border-left: 4px solid var(--beta, var(--accent)); border-radius: 6px; background: var(--surface); } /* ===================== Digestion (qualité d'ingestion) ===================== */ .q-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .q-head .donut { flex: none; } .q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px 14px; margin: 10px 0; } .q-grid > div { border: 1px solid var(--rule2); border-radius: 4px; padding: 6px 10px; background: var(--bg); } .q-grid b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .q-grid span { font-size: 11.5px; color: var(--muted); } .q-grid > div.bad b { color: var(--danger); } .q-grid > div.warn b { color: var(--warn); } .q-samples { max-height: 260px; overflow: auto; border: 1px solid var(--rule); border-radius: 4px; background: var(--bg); font-family: var(--mono); font-size: 11.5px; } .q-samples > div { padding: 4px 8px; border-bottom: 1px solid var(--rule2); white-space: pre-wrap; word-break: break-all; } .q-samples .why { font-family: var(--sans); color: var(--danger); font-size: 11px; display: block; } .parser-editor { border: 1px solid var(--rule); border-radius: 6px; padding: 12px 14px; margin-top: 10px; background: var(--bg); } .parser-editor .grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 12px; } .parser-editor label { gap: 3px; } .pv-table { overflow: auto; max-height: 300px; border: 1px solid var(--rule); border-radius: 4px; margin-top: 8px; } .pv-table table { border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 11.5px; } .pv-table th { position: sticky; top: 0; background: var(--surface2); text-align: left; padding: 4px 8px; font-weight: 500; color: var(--muted); white-space: nowrap; } .pv-table td { padding: 3px 8px; border-top: 1px solid var(--rule2); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; } .q-level { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; } /* ===================== Administration technique ===================== */ .adm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; } .adm-kpi { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); } .adm-kpi-v { font-size: 22px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; } .adm-kpi-l { font-size: 12px; margin-top: 2px; } .adm-dig { margin-bottom: 14px; } .adm-seg { display: flex; height: 16px; border-radius: 3px; overflow: hidden; background: var(--surface2); margin: 12px 0 8px; } .adm-seg i { display: block; height: 100%; } .adm-seg i.ok, .adm-seg-leg i.ok { background: var(--ok); } .adm-seg i.warn, .adm-seg-leg i.warn { background: var(--warn); } .adm-seg i.danger, .adm-seg-leg i.danger { background: var(--danger); } .adm-seg-leg { display: flex; flex-wrap: wrap; gap: 14px; color: var(--muted); } .adm-seg-leg span { display: inline-flex; align-items: center; gap: 5px; } .adm-seg-leg i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; } .adm-dig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; margin-top: 12px; } .adm-dig-grid > div { display: flex; flex-direction: column; } .adm-dig-grid b { font-size: 16px; font-variant-numeric: tabular-nums; } .adm-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; } .adm-br { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12px; } .adm-br-l { flex: 0 0 42%; display: flex; align-items: center; gap: 5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .adm-br-bar { flex: 1; height: 7px; border-radius: 4px; background: var(--surface2); overflow: hidden; } .adm-br-bar i { display: block; height: 100%; background: var(--accent); } .adm-br-n { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 56px; text-align: right; } .adm-store { margin-bottom: 14px; } .adm-purge { margin-bottom: 8px; border-color: color-mix(in srgb, var(--danger) 35%, var(--rule)); } .adm-confirm { margin-top: 12px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--danger) 8%, transparent); } .adm-confirm p { margin: 0 0 10px; } .adm-tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 4px; } .adm-table { margin: 0; min-width: 920px; } .adm-table th, .adm-table td { white-space: nowrap; } .adm-table tr.adm-err td { background: color-mix(in srgb, var(--danger) 7%, transparent); } @media (max-width: 1100px) { .adm-kpis, .adm-cols { grid-template-columns: 1fr 1fr; } .adm-dig-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .adm-kpis, .adm-cols, .adm-dig-grid { grid-template-columns: 1fr; } } /* ===================== Comparaison : conteneurs (carrés visuels) ===================== */ .cont-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .chip-tab { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 12px; cursor: pointer; } .chip-tab:hover { border-color: var(--accent); } .chip-tab.on { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); } .containers { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: start; } .cont { text-align: center; min-width: 0; } .cont-head { margin-bottom: 8px; } .cont-foot { margin-top: 10px; line-height: 1.4; } .waffle { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; width: 100%; max-width: 230px; margin: 0 auto; } .waffle.right { direction: rtl; } .waffle i { aspect-ratio: 1 / 1; border-radius: 2px; background: var(--surface2); } .waffle i.a { background: var(--accent); } .waffle i.b { background: var(--t-name); } .waffle i.c { background: var(--danger); } .cont-mid { align-self: center; padding-top: 20px; } .cont-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 4px; } .cont-link b { font-size: 18px; font-variant-numeric: tabular-nums; color: var(--t-strong); } @media (max-width: 680px) { .containers { grid-template-columns: 1fr; } .cont-mid { padding: 6px 0; } .waffle.right { direction: ltr; } } /* ===================== Sous-menus Catalogue (gauche) : Jeux / Infosteal / Ingestion / Administration ===================== */ .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 3px 19px; padding-left: 9px; border-left: 1px solid var(--rule); } .nav-sub a { padding: 5px 10px; font-size: 12.5px; font-weight: 500; color: var(--muted); } .nav-sub a .tile, .nav-sub a .ic { width: 14px; height: 14px; } .nav-sub a:hover { color: var(--ink); background: var(--surface2); } .nav-sub a.on { color: var(--accent); background: var(--accent-soft); } /* barre repliée (icônes seules) : les sous-items disparaissent, seul le parent Catalogue reste */ .side.collapsed .nav-sub { display: none; } /* ----- Catalogue : nom cliquable + logo + menu ----- */ .ds-cell { display: inline-flex; align-items: center; gap: 6px; } .ds-link { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; font-weight: 500; color: var(--ink); } .ds-link:hover { color: inherit; text-decoration: none; } .row-menu { opacity: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 3px; display: inline-flex; } .row-menu .ic { width: 15px; height: 15px; } tr:hover .row-menu { opacity: 1; } .row-menu:hover { background: var(--surface2); color: var(--ink); } .ds-logo { object-fit: contain; border-radius: 3px; background: var(--surface); vertical-align: middle; } .ds-logo.sm { width: 18px; height: 18px; } .ds-logo.lg { width: 38px; height: 38px; border-radius: 6px; } /* ----- Fiche : zone de dépôt du logo ----- */ .ds-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .logo-drop { position: relative; width: 52px; height: 52px; border: 1px dashed var(--rule); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface); flex: 0 0 auto; } .logo-drop.over { border-color: var(--accent); background: var(--accent-soft); } .logo-drop .logo-pic, .logo-drop .tile, .logo-drop .ds-logo { pointer-events: none; } .logo-drop .ds-logo.lg { width: 44px; height: 44px; } .logo-badge { position: absolute; right: -6px; bottom: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s; } .logo-badge .ic { width: 11px; height: 11px; } .logo-drop.over .logo-badge { opacity: 1; } /* ----- Éditeur de tags ----- */ .tag-editor { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding: 5px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); min-height: 34px; } .tag-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 4px 2px 7px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--rule); font-size: 12px; } .tag-chip .tag-lbl { display: inline-flex; align-items: center; gap: 4px; cursor: text; } .tag-chip .tag-lbl:hover { color: var(--accent); } .tag-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: inline-flex; padding: 1px; border-radius: 50%; } .tag-x .ic { width: 12px; height: 12px; } .tag-x:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } .tag-in-wrap { position: relative; flex: 1; min-width: 120px; } .tag-in { border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink); width: 100%; padding: 3px 4px; outline: none; } .tag-chip.editing { padding: 1px 4px; } .tag-chip.editing .tag-edit { width: 90px; } .tag-sug { position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; min-width: 180px; max-width: 280px; background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; box-shadow: var(--shadow); padding: 3px; max-height: 240px; overflow: auto; } .tag-sug-item { display: flex; align-items: center; gap: 5px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 12.5px; color: var(--ink); padding: 5px 7px; border-radius: 3px; cursor: pointer; text-align: left; } .tag-sug-item:hover { background: var(--accent-soft); } .tag-sug-item .count { margin-left: auto; color: var(--muted); font-size: 11px; } /* ===================== Barre de recherche unique : requête comprise ===================== */ .omni input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); } .q-expr { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 12px; vertical-align: middle; } .q-term { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--rule); font-family: var(--mono); font-size: 12px; color: var(--ink); cursor: help; } .q-term .ic { width: 12px; height: 12px; } .q-term.like { border-style: dashed; } .q-term.void { opacity: .55; text-decoration: line-through; } .q-op { font: 600 10.5px var(--mono); letter-spacing: .06em; color: var(--accent); padding: 0 2px; } .q-op.not { color: var(--danger); } .q-par { color: var(--muted); font-family: var(--mono); } /* ===================== Champs en puces (source / auteur, tags, acteurs) ===================== */ .lbl-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 0; } .lbl-field .tag-editor { color: var(--ink); } .tag-chip .pv { padding: 0; border: 0; background: none; } .chip-role { border: 0; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font: 500 10.5px var(--mono); padding: 1px 6px; border-radius: 999px; cursor: pointer; margin-left: 2px; } .chip-role:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .actor-editor { min-height: 38px; } /* ===================== Graphe : style de la maquette (fond transparent, pastilles, liens fléchés) ===================== */ #cy { background: transparent; border: 0; border-radius: 0; } .g-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12.5px; color: var(--muted); } /* Barres du graphe : requête (toolbar), outils (historique, données brutes, rendu, réglages, ⋯), légende + filtre d'affichage */ .g-tools { gap: 8px; margin: -2px 0 8px; } .g-tools .g-count { margin-left: auto; white-space: nowrap; } #g-undim:not(.on) { display: none; } .g-legendbar { align-items: center; } .g-legendbar .legend { flex: 1 1 320px; min-width: 0; } .g-legend-tools { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; flex-wrap: wrap; } .g-legend-tools .g-filter { width: 190px; max-width: 42vw; } #g-filter-n:empty, #g-cards-note:empty { display: none; } /* zoom : boutons ronds sur le canevas (rendu libre ; le gabarit a les siens) */ .g-zoomtools { position: absolute; left: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 8px; z-index: 3; } .graph-wrap .g-zoomtools .btn.btn--round { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: var(--surface); box-shadow: var(--flat, 0 1px 2px rgba(0,0,0,.08)); } .g-zoomtools .btn--round .ic { margin: 0; width: 17px; height: 17px; } .g-zoomtools .btn--round:hover { color: var(--ink); background: var(--surface2); } .g-main[data-render="gabarit"] .g-zoomtools { display: none; } @media (max-width: 1280px) { body.insp-on #view-graph .toolbar .m-hide, body.insp-on .g-tools .m-hide { display: none; } } @media (max-width: 640px) { #view-graph .toolbar .m-hide, .g-tools .m-hide { display: none; } .g-legend-tools { margin-left: 0; } } .g-dot { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-right: 5px; color: var(--g-icon); } .g-dot .ic { width: 10px; height: 10px; stroke-width: 2.6; } .g-dot.sq { border-radius: 4px; } .g-dot.dia { border-radius: 2px; transform: rotate(45deg) scale(.86); } .g-dot.dia .ic { transform: rotate(-45deg); } .g-panel:empty { display: none; } .graph-wrap { grid-template-columns: minmax(0, 1fr) 360px; } .graph-wrap:has(.g-panel:empty) { grid-template-columns: minmax(0, 1fr); } #cy { min-width: 0; overflow: hidden; } @media (max-width: 1280px) { .graph-wrap { grid-template-columns: minmax(0, 1fr) 300px; } } @media (max-width: 980px) { .graph-wrap, .graph-wrap:has(.g-panel:empty) { grid-template-columns: minmax(0, 1fr); } } .help-sub { margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } /* ===================== Pertinence (score explicable) et qualification ===================== */ .rv { font: 600 11.5px/1 var(--mono); font-variant-numeric: tabular-nums; min-width: 30px; padding: 3px 6px; border-radius: 3px; border: 1px solid var(--rule); background: var(--surface2); color: var(--muted); cursor: pointer; margin-right: 8px; text-align: center; } .rv.lg { font-size: 14px; padding: 6px 8px; min-width: 40px; margin: 0; cursor: default; } .rv.lv-high { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); } .rv.lv-medium { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); } .rv.lv-low { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); } .rv:hover { box-shadow: 0 0 0 2px var(--accent-soft); } .rv.q-bruit, .rv.q-fp { text-decoration: line-through; text-decoration-thickness: 1px; } .pop.wide { width: min(500px, calc(100vw - 16px)); max-width: none; min-width: 0; } .rv-fs { display: grid; gap: 5px; padding: 6px 8px 4px; } .rv-f { display: grid; grid-template-columns: 150px 90px 62px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12.5px; } .rv-l { color: var(--ink2); } .rv-bar { height: 6px; background: var(--rule2); border-radius: 3px; overflow: hidden; } .rv-bar i { display: block; height: 100%; background: var(--accent); } .rv-p { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } .rv-p small { color: var(--muted); } .rv-d { color: var(--muted); font-size: 11.5px; } .rv-mod { margin: 4px 8px 6px; padding-top: 6px; border-top: 1px solid var(--rule2); font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; } .rv-mod .ic { width: 13px; height: 13px; color: var(--muted); } #ds-relevance .rv-fs { padding: 10px 0 4px; } .rv-qual { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule2); } .rv-qual input { min-width: 200px; } .rv-cell { white-space: nowrap; } @media (max-width: 760px) { .rv-f { grid-template-columns: minmax(0, 1fr) 70px 56px; } .rv-d { grid-column: 1 / -1; margin-top: -3px; } } /* statuts : vert (confirmé, pertinent), ambre (à vérifier), gris barré (bruit), rouge (faux positif) */ .qseg { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--surface); } .qseg button { font: inherit; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border: 0; border-right: 1px solid var(--rule2); background: transparent; color: var(--muted); cursor: pointer; } .qseg button:last-child { border-right: 0; } .qseg button .ic { width: 12px; height: 12px; } .qseg button:hover { color: var(--ink); background: var(--surface2); } .qseg button.on { color: var(--accent-ink); } .qseg button.q-conf.on, .qseg button.q-pert.on { background: var(--ok); } .qseg button.q-verif.on { background: var(--warn); } .qseg button.q-bruit.on { background: var(--muted); } .qseg button.q-fp.on { background: var(--danger); } .qchip { font: inherit; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border: 1px dashed var(--rule); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; opacity: .55; } .qchip .ic { width: 11px; height: 11px; } .qchip:hover, tr:hover .qchip, .rec:hover .qchip { opacity: 1; } .qchip.on { opacity: 1; border-style: solid; } .qchip.q-conf, .qchip.q-pert { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); } .qchip.q-verif { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); } .qchip.q-bruit { color: var(--muted); } .qchip.q-fp { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); } .rec.q-bruit, .rec.q-fp { opacity: .55; } .rec.q-conf, .rec.q-pert { box-shadow: inset 3px 0 0 var(--ok); } .rec.q-verif { box-shadow: inset 3px 0 0 var(--warn); } .rec.q-fp { box-shadow: inset 3px 0 0 var(--danger); } .qc-sample .rec { margin-top: 8px; } .qc-sample .qseg span { display: none; } @media (min-width: 1100px) { .qc-sample .qseg span { display: inline; } } /* ===================== Fiabilité d'ingestion : diagnostic, journal, contexte machines ===================== */ .status.warning { color: var(--warn); } .diag { border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--rule)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); border-radius: 4px; padding: 8px 10px; margin: 8px 0; } .diag-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .diag-file { margin-top: 8px; } table.diag-t { margin-top: 6px; font-size: 12px; } table.diag-t td, table.diag-t th { padding: 4px 8px; } .qc-dates { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 2px; } .qc-dates .ic { width: 13px; height: 13px; color: var(--muted); } .qc-limits { margin: 4px 0 0 16px; padding: 0; } .prov { font-family: var(--mono); font-size: 10px; color: var(--muted); border: 1px solid var(--rule2); border-radius: 3px; padding: 0 4px; margin-left: 6px; white-space: nowrap; } .mprof.multi { border-top: 1px solid var(--rule2); padding-top: 8px; margin-top: 8px; } .tag-sug-item.on { background: var(--accent-soft); color: var(--accent); } .btn.small.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ===================== Édition directe (enregistrement à la validation / sortie du champ) ===================== */ .save-state { display: none; font-size: 11.5px; color: var(--muted); align-items: center; gap: 4px; font-weight: 400; text-transform: none; letter-spacing: 0; } .save-state.saving, .save-state.saved, .save-state.error, .save-state.cancel { display: inline-flex; flex-wrap: wrap; } .save-state.saved { color: var(--ok); } .save-state.error { color: var(--danger); } .save-state .ic { width: 12px; height: 12px; } .save-err { border-color: var(--danger) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 14%, transparent) !important; } .link-btn { font: inherit; background: none; border: 0; color: var(--accent); text-decoration: underline; cursor: pointer; padding: 0; } .back-btn { margin-right: 2px; align-self: center; } .h1-host { display: inline-flex; flex-direction: column; flex: 1 1 260px; min-width: 0; } input.h1-input { font: 600 20px/1.3 var(--head); letter-spacing: -.01em; border-color: transparent !important; background: transparent !important; padding: 2px 6px; width: 100%; } .h1-input:focus { border-color: var(--accent) !important; background: var(--surface) !important; } label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-size: 13px; } label.check input { margin: 0; } /* ===================== Clients et expositions ===================== */ .xwrap { overflow-x: auto; max-width: 100%; } .cl-table tr.clickable, .x-table tr.clickable { cursor: pointer; } table.grid tr.on td { background: var(--accent-soft); } .cl-name { display: inline-flex; align-items: center; } .cl-rules code { font-size: 11px; } .xtabs { border: 1px solid var(--rule); border-radius: 4px; flex-wrap: wrap; margin-top: 4px; } .xtabs .count { font-family: var(--mono); font-size: 11px; color: var(--muted); } .x-tools { margin: 8px 0; } .x-tools select { flex: 0 1 auto; min-width: 0; max-width: 100%; } .x-tools #x-q { flex: 1 1 12rem; min-width: 12rem; } /* trois contrôles : le champ passe à la ligne plutôt que d'être écrasé */ .xstate { display: inline-flex; align-items: center; font-size: 12.5px; white-space: nowrap; } .xfresh { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; } .xdate { display: inline-flex; align-items: center; gap: 4px; margin-right: 10px; flex-wrap: wrap; } .xdate .ic { width: 12px; height: 12px; } .x-panel { margin: 4px 0 14px; border-left: 3px solid var(--accent); } .x-head { gap: 6px; } .x-ident { font-size: 15px; word-break: break-all; } .x-why { padding: 8px 10px; background: var(--surface2); border-radius: 4px; font-size: 13px; } .x-why.w-alerte { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); } .x-why.w-masque, .x-why.w-silence_ecoule { background: color-mix(in srgb, var(--ok) 8%, var(--surface)); } .x-dates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } /* Lot A : décision lisible (remontée, répétition écartée, fraîcheur inconnue, trop ancienne), preuve nouvelle pendant le silence */ .xdec { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; padding: 0 6px; border-radius: 3px; border: 1px solid var(--rule); color: var(--ink2); background: var(--surface); line-height: 18px; margin: 1px 4px 1px 0; } .xdec.d-up { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, var(--rule)); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); } .xdec.d-up.d-done { color: var(--ink2); border-color: var(--rule); background: var(--surface); } /* remontée déjà signalée / acquittée */ .xdec.d-rep { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, var(--rule)); } .xdec.d-unk { color: var(--muted); } .xdec.d-old { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, var(--rule)); } .xdec.d-out { color: var(--muted); border-style: dashed; } .xdec.d-proof { color: var(--accent-ink); background: var(--danger); border-color: var(--danger); } .xdec.d-note { color: var(--t-weak); border-style: dashed; } .x-decs { margin-top: 2px; } .x-dec { padding: 6px 10px; border: 1px solid var(--rule2); border-radius: 4px; font-size: 13px; margin: 6px 0; } .x-dec .x-note { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--ink2); } .x-dec .x-note .ic { width: 12px; height: 12px; } .x-obs-why { color: var(--ink2); } .x-proof { margin: 6px 0; padding: 6px 10px; border: 1px solid var(--danger); border-radius: 4px; background: color-mix(in srgb, var(--danger) 6%, var(--surface)); font-size: 13px; } .adm-key .mono { overflow-wrap: anywhere; } .adm-key.bad { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); } .x-dates > div { border: 1px solid var(--rule2); border-radius: 4px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .x-obs { border-top: 1px solid var(--rule2); padding: 8px 0; display: flex; flex-direction: column; gap: 4px; } .x-obs.gone { opacity: .8; } .x-mach { display: inline-flex; align-items: center; margin-right: 10px; } .x-bulk { margin: 6px 0; } .x-bulk:empty { display: none; } .x-hist { max-height: 340px; overflow-y: auto; } .assoc { padding: 4px 0; border-bottom: 1px solid var(--rule2); } .assoc:last-of-type { border-bottom: 0; } .assoc .btn.icon { margin-left: 4px; } .assoc-add { margin-top: 6px; max-width: 100%; } .panel.ctx { background: var(--surface2); } #cl-new input { min-width: 240px; } @media (max-width: 980px) { .x-dates { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .x-dates { grid-template-columns: 1fr; } .x-table th:nth-child(6), .x-table td:nth-child(6), .x-table th:nth-child(8), .x-table td:nth-child(8) { display: none; } .cl-table th:nth-child(2), .cl-table td:nth-child(2), .cl-table th:nth-child(n+5), .cl-table td:nth-child(n+5) { display: none; } #cl-new { width: 100%; } #cl-new input { flex: 1; min-width: 0; } .ds-head .h1-host { flex-basis: 100%; order: 2; } .x-panel .qseg { flex-wrap: wrap; } .x-actions input { flex-basis: 100%; } } /* Barre de navigation mobile : les règles de base des sous-menus (déclarées plus haut que la requête média d'origine) l'emportaient et empilaient les sous-items à la verticale ; on réaffirme la disposition en ligne. */ @media (max-width: 980px) { .nav-group { flex-direction: row; } .nav-sub, .side.collapsed .nav-sub { display: flex; flex-direction: row; margin: 0; padding: 0; border: 0; } .nav-parent { display: none; } } /* =================================================================================================== Lot 4 — utilisation évidente : navigation, listes, fiches, inspecteur Conventions : une liste = lignes sélectionnables (clic → aperçu dans l'inspecteur, double-clic → fiche), actions toujours visibles (pas de survol requis), tri explicite, focus visible, couleurs + libellés. =================================================================================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .ic.flip { transform: scaleX(-1); margin: 0 0 0 6px !important; } /* Focus visible au clavier, partout (les champs gardent leur halo) */ :where(button, a, summary, [tabindex], .pv, .tag-lbl):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } :where(tr, .card, .rec)[data-sel]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Contrôles : hauteurs homogènes, hiérarchie principale / secondaire / sensible */ .btn { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; gap: 0; line-height: 1.2; } .btn.small { min-height: 26px; } .btn.icon { min-width: 26px; min-height: 26px; } .btn.ghost:hover { background: var(--surface2); } .btn.danger { border-color: color-mix(in srgb, var(--danger) 35%, var(--rule)); } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border-color: var(--danger); } input[type=text], input[type=search], input[type=date], input[type=password], input[type=number], select { min-height: 32px; } .toolbar { min-height: 40px; } .toolbar h1 { white-space: nowrap; } .create-form { gap: 6px; flex-wrap: nowrap; } .create-form input { min-width: 240px; } .pop-sep { height: 1px; background: var(--rule2); margin: 4px 0; } .pop-act.danger, .pop-act.danger .ic { color: var(--danger); } .pop-act.danger:hover:not(:disabled), .pop-act.danger:hover:not(:disabled) .ic { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); } .pop-act:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface2); color: var(--ink2); white-space: nowrap; } .badge .ic { width: 12px; height: 12px; } .badge.on, .badge.t-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 9%, var(--surface)); } .badge.t-warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); } .badge.t-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); } .badge.t-ui { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); } /* Tableaux : en-têtes lisibles, tri explicite, lignes sélectionnables, actions visibles sans survol */ table.grid th { font-size: 11px; color: var(--ink2); letter-spacing: .05em; vertical-align: bottom; } table.grid th[aria-sort] { padding: 0; } .th-sort { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: transparent; border: 0; padding: 8px 10px; width: 100%; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; text-align: inherit; justify-content: flex-start; } th.num .th-sort { justify-content: flex-end; } .th-sort .ic { width: 12px; height: 12px; opacity: .35; flex: none; } .th-sort:hover { color: var(--ink); background: var(--rule2); } .th-sort.on { color: var(--accent); } .th-sort.on .ic { opacity: 1; } tr[data-sel], .card[data-sel], .rec[data-sel] { cursor: pointer; } table.grid tr.sel td { background: var(--accent-soft); } table.grid tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .card.sel, .rec.sel { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--accent-soft); } .row-title { font-weight: 600; color: var(--ink); } .c-act { width: 1%; white-space: nowrap; text-align: right; } .row-acts { display: inline-flex; gap: 4px; align-items: center; } .row-menu, tr .row-menu { opacity: 1; } .qchip { opacity: .8; } .list-meta { margin: 2px 0 6px; } .pager-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 10px 0 4px; } .cat-table td { vertical-align: middle; } .cat-table .c-name { min-width: 220px; } .cat-table .meta { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #catalog-list table.grid { min-width: 0; } .cl-table td, .cs-table td { vertical-align: middle; } /* États vides : la situation en une phrase, une action pour en sortir */ .empty-state { display: flex; gap: 16px; align-items: flex-start; max-width: 74ch; padding: 32px 0; text-align: left; } .empty-state .tile.xl { margin: 0; flex: none; } .empty-state .es-title { font-size: 16px; font-weight: 600; margin: 4px 0 4px; color: var(--ink); } .empty-state .es-text { color: var(--muted); margin: 0 0 12px; } .empty-state.compact { padding: 12px 0; gap: 12px; } .empty-state.compact .es-title { font-size: 14px; margin-top: 2px; } .empty-state.compact .es-text { font-size: 12.5px; margin-bottom: 8px; } .empty-state.danger .es-title { color: var(--danger); } .col .empty-state { padding: 6px 0; } /* Liste ↔ fiche : la fiche remplace la liste de sa vue (la liste garde son état en mémoire) */ .view.fiche-open > .list-pane { display: none; } .view:not(.fiche-open) > .fiche-pane { display: none; } .back-btn { padding-left: 6px; color: var(--ink2); } .back-btn .ic { margin-right: 6px; } /* Barre supérieure : bouton Inspecteur */ .insp-toggle.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* panneau fermé mais un aperçu est disponible pour la sélection : point d'accent sur le bouton */ .insp-toggle { position: relative; } .insp-toggle.has-sel::after { content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); } /* ===================== Inspecteur global ===================== */ .inspector { height: 100%; min-height: 0; width: var(--insp-w, 400px); flex: 0 0 var(--insp-w, 400px); background: var(--surface); border-left: 1px solid var(--rule); display: flex; flex-direction: column; z-index: 11; } .inspector[hidden] { display: none; } .insp-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--rule); flex: none; } .insp-head .insp-kind { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .insp-head-acts { margin-left: auto; display: inline-flex; gap: 2px; flex: none; } .insp-head .tile { margin: 0; } .insp-back { display: none; } .insp-body { padding: 14px 16px 40px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 14px; } .insp-id { display: flex; gap: 12px; align-items: flex-start; } .insp-id .ds-logo.lg, .insp-id .tile.lg { flex: none; margin: 0; } .insp-id h2 { margin: 0; font-size: 16px; line-height: 1.3; word-break: break-word; } .insp-id .sub { font-size: 12px; color: var(--muted); margin-top: 2px; word-break: break-word; } .insp-actions { display: flex; flex-wrap: wrap; gap: 6px; } .insp-sec { border-top: 1px solid var(--rule2); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; } .insp-sec > h3 { margin: 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); display: flex; align-items: center; gap: 6px; } .insp-sec > h3 .tile { margin: 0; } .kv { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 4px 10px; font-size: 13px; margin: 0; } .kv dt { color: var(--muted); font-size: 12px; } .kv dd { margin: 0; word-break: break-word; min-width: 0; } .insp-body .rv-f { grid-template-columns: minmax(0, 1fr) 64px 54px; } .insp-body .rv-d { grid-column: 1 / -1; margin-top: -3px; } .insp-body .rv-fs { padding: 0; } .insp-body .qseg { flex-wrap: wrap; } .insp-body dl.fields { grid-template-columns: 1fr; } .insp-body dl.fields .f { grid-template-columns: minmax(90px, 36%) minmax(0, 1fr); } .insp-list { display: flex; flex-direction: column; gap: 2px; font-size: 13px; } .insp-list > div { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-bottom: 1px solid var(--rule2); min-width: 0; } .insp-list > div > :first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .insp-list .n { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .insp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; } .insp-kpis > div { border: 1px solid var(--rule2); border-radius: 4px; padding: 6px 8px; background: var(--bg); min-width: 0; } .insp-kpis b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; } .insp-kpis span { font-size: 11px; color: var(--muted); } .insp-note { font-size: 11.5px; color: var(--muted); } .ai-disclaimer { font-size: 11.5px; color: var(--muted); border-left: 3px solid var(--beta-line); padding-left: 8px; } /* Ordinateur : l'inspecteur est toujours une colonne à droite (jamais par-dessus la vue), quelle que soit la largeur ; ses bornes (LC.inspWidth) gardent une zone de travail d'au moins 640 px. */ /* Mobile : plein écran, retour explicite vers la liste */ @media (max-width: 980px) { .inspector { position: fixed; inset: 0; width: auto; height: 100%; flex: none; border: 0; z-index: 35; } .insp-back { display: inline-flex; } .insp-head #insp-close { display: none; } .insp-head .tile, .insp-head > b { display: none; } .insp-head .insp-kind { margin-left: auto; } body.insp-on { overflow: hidden; } .insp-toggle .lbl { display: none; } .create-form { width: 100%; } .create-form input { flex: 1; min-width: 0; } } @media (max-width: 760px) { .cat-table .m-hide { display: none; } .cat-table .c-name { min-width: 150px; } .cat-table .meta { max-width: 52vw; } .cs-table th:nth-child(4), .cs-table td:nth-child(4), .cs-table th:nth-child(5), .cs-table td:nth-child(5) { display: none; } .empty-state { flex-direction: column; gap: 8px; } } @media (max-width: 1500px) { .cat-table .w-hide { display: none; } } .cat-table td.mono, .cat-table td.num { white-space: nowrap; } /* inspecteur ancré : le tableau garde l'essentiel, le reste est dans l'aperçu */ @media (min-width: 981px) { body.insp-on .cat-table .i-hide, body.insp-on .cat-table .w-hide { display: none; } body.insp-on .cl-table .i-hide { display: none; } } /* fenêtre moyenne avec l'inspecteur : le statut (visible dans l'inspecteur) laisse la place ; aucun défilement horizontal */ @media (min-width: 981px) and (max-width: 1400px) { body.insp-on .cat-table .n-hide { display: none; } body.insp-on .cat-table .meta { max-width: 150px; } body.insp-on .cat-table .c-name { min-width: 0; } body.insp-on .cat-table .c-act .btn { padding: 3px 5px; } } .date { white-space: nowrap; } .cl-table .cl-name { white-space: nowrap; } .cl-table td:first-child { min-width: 200px; } /* Acteurs : cartes compactes (nom, fiabilité, menu), rôles cliquables sans allure de bouton */ .card[data-sel] { flex-wrap: wrap; } .card .row-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; } .card .row-acts { margin-left: 2px; } button.role { font: inherit; font-size: 11px; background: transparent; border: 0; border-bottom: 1px dotted var(--rule); padding: 0 2px; color: var(--muted); cursor: pointer; } button.role:hover { color: var(--accent); } @media (min-width: 1280px) { body.insp-on .board { grid-template-columns: 1fr 1.2fr; } body.insp-on .board > .col:nth-child(3) { grid-column: 1 / -1; } body.insp-on #ds-list .sel-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 10px; } } .card .row-title { flex: 1 1 0; } .card .grow { display: none; } .meta-line:empty { display: none; } .m-only { display: none; } @media (max-width: 760px) { .m-only { display: inline-flex; margin-left: 6px; } .cat-table .row-title, .cl-table .row-title, .cs-table .row-title { white-space: normal; word-break: break-word; } .cat-table .ds-cell { align-items: flex-start; } .cat-table .qchip { display: none; } .top-row .grow { display: none; } .top-row { justify-content: flex-end; } .omni .btn { padding: 6px 10px; } } @media (max-width: 420px) { .cat-table .s-hide { display: none; } } @media (max-width: 760px) { table.grid td, .th-sort { padding-left: 6px; padding-right: 6px; } .row-acts .btn:not([data-rowmenu]):not(.row-menu) { display: none; } /* sur écran tactile : toucher la ligne → aperçu → « Ouvrir la fiche » */ .tags .count { margin-left: -6px; } .pv.tag { margin-right: 4px; } } @media (max-width: 760px) { .cat-table .c-name { min-width: 0; } .cat-table .meta { max-width: 44vw; } } /* ===================== Fiches : structure commune ===================== */ .fiche { display: flex; flex-direction: column; gap: 14px; } .fiche-head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--rule); } .fiche-head .back-btn { align-self: start; margin-top: 8px; } .fiche-pic { display: flex; } .fiche-pic .logo-drop { width: 52px; height: 52px; } .fiche-pic > .tile.lg { width: 44px; height: 44px; border-radius: 10px; margin: 0; } .fiche-pic > .tile.lg .ic { width: 22px; height: 22px; } .fiche-title { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .fiche-title .h1-host { display: flex; flex-direction: column; min-width: 0; } .h1-wrap { position: relative; display: flex; align-items: center; min-width: 0; } .h1-wrap .edit-hint { position: absolute; right: 8px; width: 14px; height: 14px; color: var(--muted); opacity: .55; pointer-events: none; } .h1-wrap input.h1-input { padding-right: 30px; margin-left: -6px; } .h1-input:focus + .edit-hint { opacity: 0; } .fiche-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 12.5px; color: var(--muted); } .fiche-meta .status { font-size: 10.5px; } .fiche-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; } .fiche-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); overflow: hidden; } .fkpi { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px; border-right: 1px solid var(--rule2); min-width: 0; } .fkpi:last-child { border-right: 0; } .fkpi-l { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .fkpi-v { font-size: 15px; font-weight: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 24px; } .fkpi-v .rv { margin: 0; } .fkpi[role="button"] { cursor: pointer; } .fkpi[role="button"]:hover { background: var(--surface2); } .fkpi.alert .fkpi-v { color: var(--danger); } .fkpi.on { box-shadow: inset 0 -3px 0 var(--accent); background: var(--accent-soft); } .fiche-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; } .fiche-main, .fiche-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .fiche-aside { position: sticky; top: 0; } .fiche .panel { padding: 14px 16px; gap: 10px; } .fiche h2 { display: flex; align-items: center; gap: 0; font-size: 14px; margin: 0; } .fiche h2 .tile { width: 18px; height: 18px; border-radius: 4px; margin-right: 8px; vertical-align: 0; } .fiche h2 .tile .ic { width: 11px; height: 11px; } .fform { display: flex; flex-direction: column; gap: 12px; } .fsec-tech dd { word-break: break-all; } .fiche .tbl { margin: 0; background: var(--bg); } .fiche .tbl + .tbl { margin-top: 8px; } body.insp-on .fiche-grid { grid-template-columns: minmax(0, 1fr); } body.insp-on .fiche-aside { position: static; } @media (max-width: 1100px) { .fiche-grid { grid-template-columns: minmax(0, 1fr); } .fiche-aside { position: static; } } @media (max-width: 760px) { .fiche-head { grid-template-columns: auto minmax(0, 1fr); } .fiche-head .back-btn { grid-column: 1 / -1; margin: 0; justify-self: start; } .fiche-actions { grid-column: 1 / -1; justify-content: flex-start; } .fiche-kpis { grid-template-columns: 1fr 1fr; } .fkpi { border-bottom: 1px solid var(--rule2); } .fiche-actions .btn-group { flex-wrap: wrap; } } .fiche-title .h1-host { flex: none; } .pin-h { display: flex; align-items: center; font-size: 13px; margin: 6px 0 2px; } .item .item-note { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Fiche cliente : la file d'expositions (tableau large) prend toute la largeur ; identité, périmètre et notes suivent en colonnes */ @media (max-width: 1699px) { .cl-fiche .fiche-grid { grid-template-columns: minmax(0, 1fr); } .cl-fiche .fiche-aside { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; } } /* en-tête de fiche : le titre garde sa place, les actions passent à la ligne s'il le faut */ .fiche-head { display: flex; flex-wrap: wrap; align-items: center; } .fiche-head .back-btn { margin-top: 0; align-self: center; } .fiche-title { flex: 1 1 340px; } .fiche-actions { flex: 0 1 auto; margin-left: auto; } @media (max-width: 760px) { .fiche-head .back-btn { flex-basis: 100%; justify-content: flex-start; } .fiche-title { flex-basis: 200px; } .fiche-actions { margin-left: 0; } } .xwrap, table.grid th.c-act { position: relative; } /* le libellé masqué « Actions » reste dans le tableau (pas de débordement de page) */ /* ===================== Graphe : légende unifiée, sélection, historique, données brutes (lot Graphe) ===================== */ /* plus de panneau latéral : le détail d'un nœud est dans l'inspecteur global */ .graph-wrap, .graph-wrap:has(.g-panel:empty) { grid-template-columns: minmax(0, 1fr); } #cy:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .g-dot.lg { width: 28px; height: 28px; margin-right: 0; } .g-dot.lg .ic { width: 15px; height: 15px; } .g-dot.box { background: transparent !important; border: 1.5px dashed; color: var(--muted); border-radius: 4px; } .g-dot.sq { border-radius: 4px; } .g-dot.hex { clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); border-radius: 0; } .g-dots { display: inline-flex; } .g-dots .g-dot { margin-right: -4px; box-shadow: 0 0 0 1.5px var(--surface); } .legend-k b { font-weight: 600; color: var(--ink); margin-left: 3px; font-variant-numeric: tabular-nums; } .legend-k b small { font-weight: 400; color: var(--muted); } .legend-k.static { cursor: default; } .legend-k.static:hover { border-color: transparent; } .legend-k[aria-pressed="false"] b { color: var(--muted); } .legend-sep { width: 1px; align-self: stretch; background: var(--rule); margin: 2px 4px; } .legend-e { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); } .legend-e b { color: var(--ink); font-weight: 600; } .g-line { display: inline-block; width: 18px; height: 0; border-top: 1.5px solid var(--g-edge); } .g-line.dashed { border-top-style: dashed; } .g-line.dotted { border-top-style: dotted; } .g-line.thick { border-top-width: 4px; opacity: .45; } .g-line.role { border-top: 1.5px dashed var(--g-red); } .g-ring { display: inline-block; width: 13px; height: 13px; border-radius: 50%; background: var(--g-purple); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); margin: 0 3px; } .g-star { display: inline-block; width: 13px; height: 13px; background: var(--ink); clip-path: polygon(50% 4%, 62% 37%, 97% 38%, 69% 59%, 79% 93%, 50% 72%, 21% 93%, 31% 59%, 3% 38%, 38% 37%); } /* ligne d'état en surimpression dans le cadre du graphe : elle n'en décale jamais la position (clics justes) */ .g-statusbar { position: absolute; left: 8px; top: 6px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 12.5px; pointer-events: none; z-index: 2; max-width: calc(100% - 16px); } .g-statusbar > * { background: color-mix(in srgb, var(--surface) 88%, transparent); padding: 2px 8px; border-radius: 3px; } .g-status[hidden], .g-pending[hidden] { display: none; } .g-status { color: var(--muted); } .g-status .ic { margin-right: 5px; } .g-status.error { color: var(--danger); } .g-status.busy { color: var(--ink2); } .g-pending { color: var(--muted); font-family: var(--mono); } .g-selbar { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); font-size: 13px; min-width: 0; } .g-selbar .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-selbar[hidden] { display: none !important; } body.insp-on .g-selbar { display: none; } @media (max-width: 980px) { body.insp-on .g-selbar { display: flex; } .g-selbar { flex-wrap: wrap; } .g-selbar .grow { flex-basis: 60%; } } .btn:disabled .ic { opacity: .45; } /* inspecteur : sources d'un nœud */ .g-srcs { display: flex; flex-direction: column; gap: 2px; } .g-src { display: flex; align-items: center; gap: 6px; padding: 3px 0; border-bottom: 1px solid var(--rule2); font-size: 13px; min-width: 0; } .g-src > .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .g-src .n { color: var(--muted); white-space: nowrap; } .g-src.off { opacity: .85; } .x-why.w-off { background: color-mix(in srgb, var(--danger) 8%, var(--surface)); margin: 6px 0; } .linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; text-align: left; min-width: 0; } .linkish:hover { text-decoration: underline; } .inspector .g-row { display: flex; align-items: center; gap: 6px; padding: 2px 0; min-width: 0; } .inspector .g-row .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .inspector .g-group { margin: 8px 0 2px; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .inspector .raw { margin: 2px 0 8px 10px; padding-left: 10px; border-left: 2px solid var(--rule); } .inspector .raw .rec { border: 0; padding: 0; background: transparent; } .inspector .mprof h4 { margin: 10px 0 4px; font-size: 12px; } /* vue des enregistrements bruts : dans la colonne de droite (inspecteur), le graphe reste visible */ .g-raw[hidden] { display: none; } .raw-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .raw-head h1 { margin: 0; font-size: 20px; } .raw-head h1:focus { outline: none; } .raw-head .kind { cursor: help; } .raw-who { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; min-width: 0; word-break: break-all; } .raw-srcs { display: flex; flex-direction: column; gap: 4px; max-width: 900px; } .raw-src { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 8px 10px; cursor: pointer; min-width: 0; } .raw-src:hover, .raw-src:focus-visible { border-color: var(--accent); } .raw-src .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .raw-src .n { color: var(--muted); white-space: nowrap; } .raw-src.off { cursor: not-allowed; opacity: .7; } .raw-src-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; margin-bottom: 8px; } .raw-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .raw-tools .grow { min-width: 160px; } .raw-tools .pager { display: inline-flex; align-items: center; gap: 6px; } .raw-table table.grid td, .raw-table table.grid th { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .raw-table table.grid th { position: sticky; top: 0; background: var(--surface); z-index: 1; } .raw-table tr.linked td { background: color-mix(in srgb, var(--accent) 9%, transparent); } .raw-table tr.linked td:first-child { box-shadow: inset 3px 0 0 var(--accent); } .raw-table td.hit { background: color-mix(in srgb, var(--warn) 18%, transparent); } @media (max-width: 760px) { .raw-head h1 { font-size: 17px; } .raw-tools .pager { margin-left: auto; } .raw-table table.grid td, .raw-table table.grid th { max-width: 200px; } } /* ===================== Finitions du lot Graphe ===================== */ /* Survol stable : un jeu ou une table ne change pas de couleur au passage de la souris (fond, logo, pictogramme, libellé). Seuls le curseur et l'infobulle signalent l'interaction ; la sélection (fond accent + filet) et le focus clavier (contour) restent les seuls états visibles. */ .pv.ref:hover, [data-theme] .pv.ref:hover { background: none; border-bottom-color: var(--rule); } table.grid tbody tr[data-sel^="dataset:"]:hover td { background: transparent; } table.grid tr.sel:hover td, table.grid tr[data-sel^="dataset:"].sel:hover td { background: var(--accent-soft); } /* Bloc d'identité (fiche et inspecteur) : logo ou pictogramme, puis le nom juste à droite, aligné sur le haut */ .fiche-head { align-items: flex-start; } .fiche-head .back-btn { align-self: flex-start; margin-top: 2px; } .fiche-ident { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 360px; min-width: 0; } .fiche-ident .fiche-pic { flex: none; } .fiche-ident .fiche-title { flex: 1 1 auto; min-width: 0; } .fiche-actions { align-self: flex-start; margin-top: 6px; } .h1-wrap { align-items: flex-start; gap: 4px; } .h1-wrap textarea.h1-input { font: 600 20px/1.3 var(--head); letter-spacing: -.01em; border: 1px solid transparent !important; background: transparent !important; padding: 2px 6px; margin-left: -6px; resize: none; overflow: hidden; min-height: 0; height: auto; width: auto; max-width: 100%; field-sizing: content; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); cursor: text; box-shadow: none; } .h1-wrap textarea.h1-input:focus { border-color: var(--accent) !important; background: var(--surface) !important; box-shadow: 0 0 0 3px var(--accent-soft); } .h1-wrap .edit-hint { position: static; flex: none; margin-top: 9px; width: 14px; height: 14px; color: var(--muted); opacity: .55; cursor: text; pointer-events: auto; } .h1-wrap label.edit-lbl { display: inline-flex; flex: none; } .h1-wrap textarea.h1-input:focus ~ label .edit-hint { opacity: 0; } .h1-wrap.save-err textarea.h1-input, .h1-wrap textarea.h1-input.save-err { border-color: var(--danger) !important; } .fiche-title .fiche-meta { padding-left: 0; } @media (max-width: 760px) { .fiche-ident { flex-basis: 100%; } .fiche-actions { margin-top: 0; flex-basis: 100%; } .h1-wrap textarea.h1-input { font-size: 18px; } } .insp-id { align-items: flex-start; } .insp-id h2 { overflow-wrap: anywhere; } .q-gone { opacity: .45; } .q-gone button:disabled, button.q-gone:disabled { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } .pv.ref { overflow-wrap: anywhere; } /* ===== Lot recherche étendue + fichettes (2026-10-17) ===== */ /* Résultats : notes de troncature / largeur / index manquant / approchées, pagination par table */ .s-note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0; padding: 7px 10px; border: 1px solid var(--rule); border-left: 3px solid var(--muted); border-radius: 4px; background: var(--surface); font-size: 13px; } .s-note.warn { border-left-color: var(--warn); } .s-note > span { flex: 1 1 320px; min-width: 0; } .s-note .ic { flex: none; color: var(--muted); } .s-note.warn > .ic { color: var(--warn); } .result-head .right.row { margin-left: auto; gap: 6px; align-items: center; } .group-more { display: flex; gap: 8px; justify-content: center; padding: 8px 0 4px; } .rec-meta .match.approx { color: var(--warn); } .approx-tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); border: 1px solid currentColor; border-radius: 3px; padding: 0 4px; margin-left: 2px; } /* Formulaire « Critères » */ .pop .crit { display: grid; gap: 8px; padding: 10px 12px 12px; min-width: 300px; max-width: 420px; } .pop .crit label { display: grid; gap: 3px; font-size: 12px; color: var(--muted); } .pop .crit select, .pop .crit input[type=text] { font: inherit; font-size: 13.5px; color: var(--ink); } .crit-modes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; } .crit-modes legend { font-size: 12px; color: var(--muted); padding: 0; margin-bottom: 3px; } .crit-modes label { display: inline-flex !important; align-items: center; gap: 4px; color: var(--ink) !important; font-size: 13px !important; cursor: pointer; } .crit-help { margin: 0; min-height: 1em; line-height: 1.35; } .crit-prev code { font-family: var(--mono); font-size: 12.5px; word-break: break-all; } /* Barre secondaire du graphe : fichettes + filtre local */ .g-bar2 { margin-top: -2px; } .g-card.pinned { border-top-color: var(--ink); } .gc-head { display: flex; align-items: center; gap: 4px; min-height: 0; } .gc-head .gc-src { flex: 1 1 auto; min-width: 0; margin: 0; } .gc-pin { flex: none; border: 1px solid transparent; background: none; color: var(--muted); border-radius: 3px; padding: 1px; line-height: 0; cursor: pointer; margin: -1px -3px 0 auto; } .gc-pin .ic { width: 11px; height: 11px; transform: rotate(35deg); } .gc-pin:hover, .gc-pin:focus-visible { color: var(--ink); border-color: var(--rule); } .gc-pin:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .gc-pin.on { color: var(--surface); background: var(--ink); } .gc-pin.on .ic { transform: none; fill: currentColor; } .g-card.compact .gc-head { position: absolute; right: 3px; top: 1px; } .g-card.compact { padding-right: 18px; } .g-bar2 .g-ctl { display: inline-flex !important; flex-direction: row; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); margin: 0; } .g-ctl select { font: inherit; font-size: 12.5px; padding: 2px 4px; } .g-filter { width: 230px; max-width: 100%; font-size: 12.5px; padding: 3px 8px; } .g-status.warn { color: var(--warn); } .g-dot.tag { border-radius: 3px 9px 9px 3px; } /* Fichettes : calque au-dessus du canevas, une fiche par enregistrement, attachée sous son nœud */ .g-cards { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .g-cards[hidden] { display: none; } .g-card { position: absolute; left: 0; top: 0; transform-origin: 0 0; width: max-content; min-width: 120px; max-width: 220px; pointer-events: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-top: 2px solid var(--g-red); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.12); font-size: 10.5px; line-height: 1.3; padding: 3px 6px 3px; contain: layout style; } .g-card.sel { border-color: var(--ink); border-top-color: var(--ink); z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,.22); } .g-card.dim { opacity: .16; } .g-card.compact { padding: 1px 5px; max-width: 170px; min-width: 0; border-top-width: 1px; } .gc-src { font-family: var(--mono); font-size: 9.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 1px; } .gc-f { display: flex; align-items: baseline; gap: 5px; min-width: 0; } .gc-l { flex: none; color: var(--muted); font-size: 9.5px; text-transform: lowercase; } .gc-v.pv { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 10.5px; padding: 0; background: none; border: 0; cursor: pointer; } .gc-v.pv:hover, .gc-v.pv:focus-visible { text-decoration: underline; } .gc-f.hit .gc-v { font-weight: 600; background: color-mix(in srgb, var(--warn) 18%, transparent); border-radius: 2px; } .gc-m { flex: none; font-size: 9px; color: var(--warn); border: 1px solid currentColor; border-radius: 3px; padding: 0 3px; } .gc-f.approx .gc-m { border-style: dashed; } .gc-foot { display: flex; align-items: center; gap: 4px; margin-top: 2px; justify-content: flex-end; } .gc-foot .small { margin-right: auto; font-size: 9.5px; } .gc-b { border: 1px solid var(--rule); background: var(--surface2); color: var(--ink2); border-radius: 3px; padding: 1px 3px; line-height: 0; cursor: pointer; } .gc-b .ic { width: 11px; height: 11px; } .gc-b:hover, .gc-b:focus-visible { border-color: var(--ink); color: var(--ink); } @media (max-width: 980px) { .g-filter { width: 100%; } .g-card { max-width: 180px; } } .q-term .q-mode { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 4px; } #g-unpin[hidden] { display: none !important; } /* écran tactile : punaise et boutons de fichette assez grands pour le doigt */ @media (pointer: coarse), (max-width: 980px) { .gc-pin { padding: 6px; margin: -5px -6px -3px auto; } .gc-pin .ic { width: 14px; height: 14px; } .gc-b { padding: 4px 6px; } } /* ---- Fiche client : rattachement des données distinct de l'enregistrement des domaines ---- */ .cl-attach { margin-top: 6px; padding: 6px 8px; border-radius: 4px; border: 1px solid var(--rule2); background: var(--bg); font-size: 13px; } .cl-attach.ok { border-color: var(--rule2); } .cl-attach.err { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); } .cl-attach.err b { color: var(--danger); display: flex; align-items: center; gap: 4px; } .cl-attach .btn { margin-top: 6px; } .tag-in.save-err, .tag-in[aria-invalid="true"] { outline: 1px solid var(--danger); outline-offset: 1px; } /* ---- Administration › Journal d'événements ---- */ .ev-filters { gap: 8px 12px; margin: 8px 0; align-items: flex-end; } .ev-filters label { display: flex; flex-direction: column; gap: 2px; } .ev-filters select, .ev-filters input { font-size: 12.5px; } .ev-table td { vertical-align: top; } .ev-table tr.ev-done td { opacity: .72; } .ev-det { margin-top: 4px; } .ev-det summary { cursor: pointer; color: var(--muted); } .ev-det[open] { background: var(--bg); border: 1px solid var(--rule2); border-radius: 4px; padding: 6px 8px; } .ev-det dl.kv { margin: 6px 0; } .toast .link-btn { color: inherit; text-decoration: underline; margin-left: 6px; } /* ---- Graphe : barre de pertinence (seuil unique) ---- */ .g-relbar { gap: 8px 14px; flex-wrap: wrap; align-items: center; padding: 4px 0; } .g-relbar label, .g-relbar .g-rel-th { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; margin: 0; } .g-relbar input[type=range] { width: 140px; accent-color: var(--accent); } .g-relbar #g-relonly.on, .g-relbar #g-linkonly.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } .g-star.hl { background: var(--accent); } /* ===================== Inspecteur redimensionnable (colonne à droite du graphe) ===================== */ .insp-resizer { position: absolute; left: -5px; top: 0; bottom: 0; width: 10px; cursor: col-resize; z-index: 13; touch-action: none; } .insp-resizer::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: transparent; transition: background .12s; } .insp-resizer:hover::after, .insp-resizer:focus-visible::after, body.insp-resizing .insp-resizer::after { background: var(--accent); } .insp-resizer:focus-visible { outline: none; } body.insp-resizing, body.insp-resizing * { cursor: col-resize !important; user-select: none !important; } /* réduit : une bande qui garde l'accès au panneau ; le graphe prend la place */ body.insp-collapsed .inspector { width: 44px; flex-basis: 44px; } body.insp-collapsed .inspector .insp-body, body.insp-collapsed .inspector .insp-raw, body.insp-collapsed .insp-resizer, body.insp-collapsed .insp-head .insp-kind, body.insp-collapsed .insp-head > b, body.insp-collapsed .insp-head > .tile, body.insp-collapsed #insp-reset, body.insp-collapsed #insp-close { display: none; } body.insp-collapsed .insp-head { flex-direction: column; padding: 10px 4px; border-bottom: 0; } body.insp-collapsed .insp-head-acts { margin: 0; flex-direction: column; } body.insp-collapsed #insp-collapse svg { transform: rotate(180deg); } body.insp-collapsed .inspector::after { content: "Inspecteur"; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 8px auto; } #insp-collapse svg { transition: transform .15s; } @media (max-width: 980px) { .insp-resizer, #insp-reset, #insp-collapse { display: none; } body.insp-collapsed .inspector { width: auto; } body.insp-collapsed .inspector .insp-body { display: flex; } } /* données brutes dans le panneau : défilement horizontal interne, toutes les colonnes */ .insp-raw { padding: 10px 14px 40px; overflow-y: auto; flex: 1; min-height: 0; } .inspector.raw-mode .insp-body { display: none; } .insp-raw .raw-head { position: sticky; top: -10px; background: var(--surface); padding: 6px 0; z-index: 2; } .insp-raw .raw-head h1 { font-size: 15px; } .insp-raw .raw-srcs { max-width: none; } .insp-raw .raw-src { font-size: 13px; padding: 6px 8px; } .insp-raw .xwrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--rule2); border-radius: 4px; } .insp-raw .raw-table table.grid { width: max-content; min-width: 100%; } .insp-raw .raw-table table.grid td, .insp-raw .raw-table table.grid th { max-width: 280px; } .raw-table.full table.grid td { white-space: pre-wrap; word-break: break-word; max-width: 420px; overflow: visible; text-overflow: clip; } .raw-back { display: inline-flex; align-items: center; gap: 4px; } .raw-cols-note { font-size: 11.5px; color: var(--muted); } .ev-table td { white-space: normal; } .ev-table td:nth-child(4) { min-width: 260px; max-width: 560px; word-break: break-word; } .ev-table .ev-det dd { word-break: break-word; } .ev-table td:nth-child(5) { max-width: 200px; word-break: break-word; } /* ---- Administration › Index de champs : suivi par table ---- */ .fx-table td { vertical-align: top; white-space: normal; } .fx-table .fx-diag { min-width: 240px; max-width: 520px; word-break: break-word; } .fx-table .progress { margin-top: 3px; } /* ===================== Espace Acteurs (lot A-Bis et sa suite) ===================== Deux niveaux pour un seul modèle : #view-actors[data-mode=simple|avance]. Ordinateur, mode simple : la page défile, la liste est collante (son propre ascenseur), l'en-tête de fiche est collant. Ordinateur, mode avancé : l'espace tient dans la hauteur de la fenêtre (--aws-top mesuré) ; la liste et chaque colonne ont leur ascenseur, jamais imbriqué. Corps de fiche : deux colonnes (data-cols=two) ou une (fiche étroite, mobile). Mobile (≤ 980 px) : liste puis fiche, une colonne, défilement de page. Aucun défilement horizontal. */ .btn-link { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-align: left; } .btn-link:hover { text-decoration: underline; } #view-actors .hint { display: none; } /* aide de la vue : bouton « ? » (panneau d'aide) */ .aws-list-pane { display: flex; flex-direction: column; min-width: 0; } .aws-list-head { flex: none; } .aws-list-head .toolbar { margin-bottom: 6px; flex-wrap: wrap; gap: 6px; } .aws-seg, #aws-view { display: inline-flex; gap: 0; } .aws-seg .btn, #aws-view .btn { border-radius: 0; margin: 0; } .aws-seg .btn:first-child, #aws-view .btn:first-child { border-radius: 4px 0 0 4px; } .aws-seg .btn:last-child, #aws-view .btn:last-child { border-radius: 0 4px 4px 0; margin-left: -1px; } .aws-seg .btn[aria-pressed=true], #aws-view .btn[aria-pressed=true] { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); position: relative; z-index: 1; font-weight: 600; } .aws-list-head .toolbar .aws-seg { margin-left: auto; } #aws-view[hidden] { display: none; } .aws-new { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; } .aws-new input { flex: 1 1 140px; min-width: 0; } .aws-new-hint { margin: 2px 0 6px; min-height: 1em; overflow-wrap: anywhere; } .aws-new-hint .ic { width: 12px; height: 12px; color: var(--warn); margin-right: 3px; } .aws-counters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 4px 0 8px; } .aws-ctr { font: inherit; font-size: 12px; display: flex; align-items: center; gap: 5px; text-align: left; border: 1px solid var(--rule); background: var(--surface); color: var(--ink2); border-radius: 4px; padding: 4px 6px; cursor: pointer; min-width: 0; } .aws-ctr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .aws-ctr .ic { width: 12px; height: 12px; flex: none; } .aws-ctr b { font-family: var(--mono); color: var(--ink); } .aws-ctr.warn b { color: var(--danger); } .aws-ctr[aria-pressed=true] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .aws-ctr:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .aws-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .aws-filters input { flex: 1 1 100%; min-width: 0; } .aws-filters select { flex: 1 1 110px; min-width: 0; font-size: 12.5px; } .aws-filters select[hidden] { display: none; } .aws-count { margin: 6px 0 4px; min-height: 1em; } .aws-scroll { min-height: 0; position: relative; } .aws-rows .card { margin: 4px 0; cursor: default; } .aws-row .row-title { flex: 1 1 0; } .aws-row.open, .aws-table tr.open td { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); } .aws-row.open { border-left: 3px solid var(--accent); padding-left: 7px; } .aws-names { overflow-wrap: anywhere; } .aws-flags { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; } .aws-type { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; white-space: nowrap; } .aws-type.t-intrusion-set { color: var(--t-name); } .aws-type.t-campaign { color: var(--accent); } .aws-type.t-grouping { border-style: dashed; } .aws-type.t-persona { color: var(--ok); } .aws-type.t-identite { color: var(--warn); } .aws-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: var(--danger); white-space: nowrap; } .aws-flag.warn { color: var(--warn); } .aws-flag.info { color: var(--ink2); } .aws-flag .ic { width: 12px; height: 12px; } .aws-table { width: 100%; table-layout: auto; } .aws-table td { vertical-align: top; overflow-wrap: anywhere; } .aws-table .num { text-align: right; } /* provenance : pastille (couleur + forme, jamais la couleur seule : libellé pour les lecteurs d'écran et au survol) */ .pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; margin-right: 5px; vertical-align: 0; flex: none; box-sizing: border-box; } .pdot.n-rev { color: var(--t-name); border-radius: 1px; transform: rotate(45deg) scale(.85); } .pdot.n-obs { color: var(--ok); background: currentColor; } .pdot.n-doc { color: var(--accent); background: currentColor; border-radius: 2px; } .pdot.n-hyp { color: var(--warn); border-style: dashed; } .pdot.n-ia { color: var(--muted); border-style: dotted; } .pdot.n-x { color: var(--muted); opacity: .6; } /* fiche */ .aws-f { display: flex; flex-direction: column; min-width: 0; } .aws-f.aws-empty { justify-content: flex-start; padding: 12px 4px; } .aws-head { flex: none; background: var(--bg); z-index: 5; padding-bottom: 6px; border-bottom: 1px solid var(--rule2); } .aws-head .fiche-head { padding-bottom: 6px; } .aws-head .fiche-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; } .aws-head .fiche-meta .mono { overflow-wrap: anywhere; } .aws-head .fiche-actions { flex-wrap: wrap; } .aws-per { font-size: 12.5px; color: var(--ink2); } .aws-confw { font-size: 12.5px; color: var(--ink2); display: inline-flex; align-items: center; gap: 3px; } .aws-confw .ic { width: 12px; height: 12px; } .aws-al { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; } .aws-chip { font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 12px; padding: 1px 9px; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; } .aws-chip.off { opacity: .6; text-decoration: line-through; } .aws-chip.more { color: var(--accent); border-style: dashed; } .aws-chip:focus-visible, .aws-v-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .aws-al-add { display: inline-flex; gap: 6px; align-items: center; } .aws-al-add input { width: 9em; min-width: 0; font-size: 12.5px; padding: 2px 6px; } .aws-warn { margin: 6px 0 0; color: var(--warn); display: flex; gap: 5px; align-items: flex-start; } .aws-warn .ic { width: 13px; height: 13px; flex: none; margin-top: 2px; } .aws-body { display: grid; gap: 14px; margin-top: 10px; min-width: 0; } .aws-f[data-cols=two] .aws-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .aws-f[data-cols=one] .aws-body { grid-template-columns: minmax(0, 1fr); } .aws-col { min-width: 0; display: flex; flex-direction: column; } .aws-col-h { font-size: 12px; font-family: var(--mono); font-weight: 500; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin: 0 0 4px; } .aws-col-b { position: relative; min-width: 0; } .aws-col-b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .aws-blk { border-top: 1px solid var(--rule2); padding: 4px 0 8px; } .aws-blk:first-child { border-top: 0; } .aws-h3 { font-size: 13px; margin: 6px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .aws-h3-acts { margin-left: auto; display: inline-flex; gap: 4px; flex-wrap: wrap; } .aws-h3 .n { font-family: var(--mono); font-size: 10.5px; color: var(--muted); font-weight: 400; } .aws-field { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink2); margin: 6px 0; } .aws-field textarea, .aws-field select { width: 100%; max-width: 100%; box-sizing: border-box; } .aws-desc textarea { font-size: 13.5px; } .aws-kv { grid-template-columns: minmax(90px, 40%) minmax(0, 1fr); } .aws-pls { display: flex; flex-direction: column; gap: 4px; } .aws-pl { display: grid; grid-template-columns: minmax(80px, 34%) minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; font-size: 13px; } .aws-pl-k { color: var(--ink2); font-size: 12.5px; } .aws-pl-v { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: baseline; min-width: 0; } .aws-pl-add { opacity: .7; } .aws-pl:hover .aws-pl-add, .aws-pl-add:focus-visible { opacity: 1; } .aws-v { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-width: 0; } .aws-v.wide { display: flex; padding: 2px 0; } .aws-v.off .aws-v-b { opacity: .6; text-decoration: line-through; } .aws-v-b { font: inherit; background: none; border: 0; padding: 0; color: var(--ink); cursor: pointer; text-align: left; overflow-wrap: anywhere; display: inline-flex; align-items: baseline; } .aws-v-b:hover { color: var(--accent); } .aws-plat { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink2); border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; white-space: nowrap; } .aws-plats { display: inline-flex; flex-wrap: wrap; gap: 3px; } .aws-src-n { font-size: 11.5px; color: var(--ink2); white-space: nowrap; } .aws-src-n.none { color: var(--muted); } .aws-src-n .ic { width: 11px; height: 11px; margin-right: 2px; } .aws-verb { margin: 2px 0 6px; } .aws-verb-h { font-size: 12px; color: var(--muted); } .aws-rl { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; padding: 4px 30px 4px 0; border-bottom: 1px dashed var(--rule2); font-size: 13px; min-width: 0; } .aws-rl:last-child { border-bottom: 0; } .aws-rl.off { opacity: .62; } .aws-rl.disputed { border-left: 3px solid var(--danger); padding-left: 6px; } .aws-rl-m { display: inline-flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; font-size: 12px; min-width: 0; } .aws-rl-acts { display: inline-flex; gap: 4px; margin-left: auto; } .aws-rl .aws-imenu { position: absolute; top: 2px; right: 0; } .aws-ident > .ic { width: 13px; height: 13px; color: var(--warn); } .aws-item { position: relative; border: 1px solid var(--rule2); border-radius: 4px; padding: 6px 34px 6px 8px; margin: 5px 0; background: var(--bg); min-width: 0; } .aws-item.off { opacity: .62; } .aws-item-t { overflow-wrap: anywhere; font-size: 13px; } .aws-item-m { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; margin-top: 3px; font-size: 12px; } .aws-imenu { position: absolute; top: 4px; right: 4px; } .aws-nat, .aws-st, .aws-conf { font-size: 11px; border-radius: 3px; padding: 0 5px; border: 1px solid var(--rule); white-space: nowrap; display: inline-flex; align-items: center; gap: 2px; } .aws-st .ic { width: 10px; height: 10px; } .aws-nat.n-rev { color: var(--t-name); border-color: currentColor; } .aws-nat.n-obs { color: var(--ok); border-color: currentColor; } .aws-nat.n-doc { color: var(--accent); border-color: currentColor; } .aws-nat.n-hyp { color: var(--warn); border-color: currentColor; border-style: dashed; } .aws-nat.n-ia { color: var(--ink2); border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 4px, var(--accent-soft) 4px 8px); } .aws-st.st-confirme { color: var(--ok); border-color: currentColor; font-weight: 600; } .aws-st.st-conteste { color: var(--danger); border-color: currentColor; } .aws-st.st-refute, .aws-st.st-retire { color: var(--muted); } .aws-st.st-ext { color: var(--muted); border-style: dashed; } .aws-conf { color: var(--ink2); } .aws-dates { font-family: var(--mono); font-size: 11.5px; color: var(--ink2); } .aws-year { margin: 4px 0 8px; } .aws-y { font-family: var(--mono); font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--rule2); margin-bottom: 3px; } .aws-ev { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 8px; padding: 3px 0; font-size: 12.5px; align-items: baseline; } .aws-ev.off { opacity: .6; } .aws-ev-w { overflow-wrap: anywhere; min-width: 0; } .aws-ev-b { grid-column: 2; display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; } .aws-ev-b .aws-imenu { position: static; margin-left: auto; } .aws-oref { display: inline-flex; align-items: center; max-width: 100%; overflow-wrap: anywhere; } .aws-wrap { overflow-wrap: anywhere; word-break: break-word; } .aws-note-b { white-space: pre-wrap; font-size: 13px; margin-top: 4px; overflow-wrap: anywhere; } .aws-note.k-suggestion_ia { border-style: dashed; } .aws-sugg { background: color-mix(in srgb, var(--accent) 5%, transparent); border: 1px dashed var(--rule); border-radius: 4px; padding: 4px 8px 8px; margin-bottom: 8px; } .aws-sug { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--rule2); font-size: 13px; } .aws-sug-t { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; } .aws-sug-a { display: inline-flex; gap: 4px; flex-wrap: wrap; } .aws-hist { margin-top: 14px; font-size: 12px; } .aws-hist > div { padding: 2px 0; overflow-wrap: anywhere; } .aws-hl { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .4s; } .aws-ul { margin: 4px 0; padding-left: 18px; font-size: 12.5px; } /* création : tuiles de type */ .aws-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin: 8px 0 12px; } .aws-tile { font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 10px; cursor: pointer; min-width: 0; } .aws-tile:hover, .aws-tile:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; } .aws-tile:focus-visible { box-shadow: 0 0 0 2px var(--accent); } /* formulaires */ .aws-form { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .aws-form.wide { max-width: 860px; } .aws-form h2 { margin: 0; font-size: 17px; display: flex; align-items: center; gap: 6px; overflow-wrap: anywhere; } .aws-form-g { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 12px; } .aws-form-g label, .aws-form > label { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--ink2); min-width: 0; } .aws-form-g label:has(textarea), .aws-form-g label:has(#awf-target-q) { grid-column: 1 / -1; } .aws-form-g input, .aws-form-g select, .aws-form-g textarea { width: 100%; box-sizing: border-box; min-width: 0; } .aws-form-g .aws-pick, .aws-form-g #awf-target-chosen, .aws-form-g .aws-fs, .aws-form-g .aws-chk, .aws-form-g .aws-cits, .aws-form-g > p, .aws-form-g > div, .aws-form-g > fieldset { grid-column: 1 / -1; } .aws-det { border: 1px solid var(--rule); border-radius: 4px; padding: 4px 10px; } .aws-det > summary { cursor: pointer; font-size: 13px; padding: 4px 0; } .aws-det-b { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 8px; } .aws-pills { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; } .aws-pills legend { font-size: 12px; color: var(--ink2); padding: 0; margin-bottom: 3px; width: 100%; } .aws-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--rule); border-radius: 12px; padding: 2px 9px; font-size: 12.5px; cursor: pointer; background: var(--surface); color: var(--ink); max-width: 100%; } .aws-pill input { margin: 0; width: auto; } .aws-pill:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } .aws-pill:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; } .aws-verbs .aws-pill { border-radius: 4px; } #awf-verbs-b { display: flex; flex-direction: column; gap: 4px; } .aws-fs { border: 1px solid var(--rule); border-radius: 4px; padding: 6px 10px 10px; margin: 0; min-width: 0; } .aws-fs legend { font-size: 12px; color: var(--ink2); padding: 0 4px; } .aws-pick { display: flex; flex-wrap: wrap; gap: 4px; } .aws-pick-i { font: inherit; font-size: 12.5px; border: 1px solid var(--rule); background: var(--surface); border-radius: 3px; padding: 3px 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; overflow-wrap: anywhere; text-align: left; color: var(--ink); } .aws-pick-i[aria-selected=true] { border-color: var(--accent); background: var(--accent-soft); } .aws-pick-i.new { border-style: dashed; color: var(--accent); } .aws-chk { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--danger); } .aws-chk.muted-chk { color: var(--ink2); } .aws-cits { margin: 0; padding-left: 18px; font-size: 12.5px; } .aws-cits li { margin: 4px 0; overflow-wrap: anywhere; } .aws-cands { padding-left: 18px; } .aws-cands li { margin: 6px 0; overflow-wrap: anywhere; } .aws-json { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.45 var(--mono); background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; padding: 10px; max-width: 100%; max-height: 60vh; overflow: auto; } .aws-arb-s { border-top: 1px solid var(--rule2); padding: 6px 0; } .aws-arb-s h3 { font-size: 13.5px; margin: 4px 0; display: flex; gap: 6px; align-items: center; } .aws-arb-s ul { list-style: none; margin: 0; padding: 0; } .aws-arb-v, .aws-piste { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--rule2); font-size: 13px; } .aws-arb-v > span:first-child, .aws-piste > span:first-child { min-width: 0; overflow-wrap: anywhere; flex: 1 1 200px; } .aws-arb-a, .aws-piste-a { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; } .aws-piste-a select { max-width: 220px; font-size: 12.5px; } .aws-piste.off { opacity: .65; } /* mini-fiche (survol d'un lien) et carte de recherche */ .aws-mini { position: fixed; z-index: 60; background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 6px 22px rgba(0,0,0,.18); padding: 8px 10px; font-size: 13px; pointer-events: none; } .aws-mini[hidden] { display: none; } .aws-mini-c { display: flex; gap: 8px; align-items: flex-start; min-width: 0; } .aws-mini-c > div { min-width: 0; } .aws-scard { border: 1px solid var(--accent); border-radius: 6px; background: color-mix(in srgb, var(--accent) 5%, var(--surface)); padding: 8px 10px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; } .aws-scard-i { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; } .aws-scard-i .row { margin: 0; } @media (min-width: 981px) { #view-actors.active { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 14px; align-items: start; } #view-actors > .list-pane, #view-actors.fiche-open > .list-pane { display: flex; min-height: 0; } #view-actors > .fiche-pane, #view-actors:not(.fiche-open) > .fiche-pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; } #view-actors .aws-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 2px; overscroll-behavior: contain; } #view-actors .aws-head .back-btn { margin-top: 2px; } /* simple : la page défile ; la liste reste visible (collante, son propre ascenseur) ; l'en-tête de fiche colle sous la barre */ #view-actors[data-mode=simple] > .list-pane { position: sticky; top: 0; max-height: calc(100vh - var(--top-h, 96px) - 36px); max-height: calc(100dvh - var(--top-h, 96px) - 36px); } #view-actors[data-mode=simple] .aws-head { position: sticky; top: 0; padding-top: 4px; } /* avancé : l'espace tient dans la fenêtre ; chaque colonne défile seule */ body[data-view="actors"]:has(#view-actors[data-mode=avance]) main { padding-bottom: 12px; } #view-actors[data-mode=avance].active { align-items: stretch; grid-template-rows: minmax(0, 1fr); height: calc(100vh - var(--aws-top, 120px) - 12px); height: calc(100dvh - var(--aws-top, 120px) - 12px); min-height: 320px; } #view-actors[data-mode=avance] .aws-f { height: 100%; min-height: 0; } #view-actors[data-mode=avance] .aws-body { flex: 1; min-height: 0; } #view-actors[data-mode=avance] .aws-f[data-cols=two] .aws-body { grid-template-rows: minmax(0, 1fr); } #view-actors[data-mode=avance] .aws-f[data-cols=two] .aws-col { min-height: 0; } #view-actors[data-mode=avance] .aws-f[data-cols=two] .aws-col-b { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 6px; } #view-actors[data-mode=avance] .aws-f[data-cols=one] .aws-body { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; align-content: start; padding-right: 6px; } } @media (min-width: 981px) and (max-width: 1180px) { #view-actors.active { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); } } @media (max-width: 980px) { .aws-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .aws-pl { grid-template-columns: minmax(0, 1fr) auto; } .aws-pl-k { grid-column: 1 / -1; } } /* fenêtre basse : la barre latérale défile au lieu de dépasser */ @media (min-width: 981px) { .side { overflow-y: auto; overflow-x: hidden; } } .aws-form [hidden], .aws-f [hidden], .aws-det-b [hidden] { display: none !important; } /* ===================== Lot E : solidité des liens du graphe ===================== Barre « Filtres » sur deux lignes (pertinence, rattachement), légende des liens, chaîne de preuve et paires dans l'inspecteur, avis IA. Couleurs : variables du thème (clair / sombres) ; la force se lit aussi par l'épaisseur et le tracé, jamais par la seule couleur. */ .g-relbar { flex-wrap: wrap; row-gap: 6px; } .g-line-h { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 92px; } .g-linkline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex-basis: 100%; border-top: 1px dashed var(--rule2); padding-top: 6px; } .g-linkline select { font-size: 12.5px; max-width: 100%; } .g-linklegend { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; margin-left: auto; } .lk-key { display: inline-flex; align-items: center; gap: 4px; } .lk-key i { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--g-edge, var(--ink2)); } .lk-key-fort i { border-top-width: 3.5px; } .lk-key-moyen i { border-top-width: 1.6px; } .lk-key-faible i { border-top: 1.4px dashed var(--g-edge, var(--ink2)); } .lk-key-contexte i { border-top: 1.6px dotted var(--g-edge, var(--ink2)); } .lk-chain { margin: 4px 0 6px; padding-left: 18px; font-size: 12.5px; } .lk-chain li { margin: 2px 0; overflow-wrap: anywhere; } .lk-step { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .lk-h { font-size: 12.5px; margin: 10px 0 4px; } .lk-pair { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: center; padding: 4px 0; border-bottom: 1px dashed var(--rule2); min-width: 0; } .lk-pair > span { min-width: 0; overflow-wrap: anywhere; } .lk-pair.ok b { color: var(--ok); } .lk-pair.warn b { color: var(--warn); } .lk-pair.off { opacity: .6; } .lk-pair.muted b { color: var(--ink2); } .lk-pair-a { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: auto; } .g-ai-panel { display: block; max-height: 46vh; overflow: auto; } .lk-ai-out { margin-top: 8px; } /* ===================== Thème « Phare » (clair / sombre) : gabarit graphe ===================== */ /* Jetons du gabarit phare-theme.css posés sur les variables de l'application : fond gris-bleu très clair, cartes blanches, bleu d'action, Source Sans 3, angles de 10 à 12 px. Le graphe y prend ses couleurs par TYPE de nœud : bleu = pivot et enregistrements, orange = identifiants, violet = machines, rouge = personas et acteurs, gris = contexte. */ :root[data-theme="phare"], :root[data-theme="phare-dark"] { --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --head: var(--sans); --graph-font: "Source Sans 3"; --radius: 12px; --radius-sm: 8px; --ctrl: 40px; --g-purple: var(--orange); --g-yellow: var(--amber); --g-teal: var(--violet); --g-red: var(--red); --g-rec: var(--blue); --g-hub: var(--gray); --g-edge: var(--blue); --g-link: var(--blue); --g-icon: var(--on-fill); --g-label: var(--text-2); --g-sel: var(--blue); } :root[data-theme="phare"] { --bg: #F6F8FB; --surface: #FFFFFF; --surface2: #F1F3F7; --ink: #1B2230; --ink2: #3C4656; --muted: #5B6472; --text-2: #5B6472; --rule: #E3E7EE; --rule2: #EDF0F4; --accent: #1E56C9; --accent-ink: #FFFFFF; --accent-soft: #E6EEFC; --danger: #C7384D; --warn: #B7791F; --ok: #1B7F4C; --t-strong: #1E56C9; --t-name: #D96A14; --t-weak: #B7791F; --sel: rgba(30,86,201,.12); --shadow: 0 8px 28px rgba(20,30,50,.12); --flat: 0 1px 2px rgba(20,30,50,.08); --stage: #FBFCFE; --dot: #D9DEE7; } :root[data-theme="phare-dark"] { --bg: #11161F; --surface: #171D28; --surface2: #1F2735; --ink: #E8EDF5; --ink2: #C3CCD9; --muted: #9AA6B8; --text-2: #9AA6B8; --rule: #26303F; --rule2: #1F2834; --accent: #5B8DF0; --accent-ink: #0F1420; --accent-soft: #1A2A4A; --danger: #EF6478; --warn: #E6B04A; --ok: #4DC57E; --t-strong: #5B8DF0; --t-name: #F08A3A; --t-weak: #E6B04A; --sel: rgba(91,141,240,.2); --shadow: 0 12px 32px rgba(0,0,0,.5); --flat: none; --stage: #141A24; --dot: #2A3344; } /* composants : formes et poids du gabarit, sans toucher aux autres thèmes */ :is([data-theme="phare"], [data-theme="phare-dark"]) body { font-size: 14px; line-height: 1.4; } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(h1, h2, h3) { font-weight: 700; letter-spacing: 0; } :is([data-theme="phare"], [data-theme="phare-dark"]) h1 { font-size: 22px; } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(.panel, table.grid, .pop, .modal, .theme-card, .g-panel, .rec, .cov-card, .verdict, .fiche-pane > *) { border-radius: var(--radius); } :is([data-theme="phare"], [data-theme="phare-dark"]) .panel { box-shadow: var(--flat); } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(.pop, .modal, .toast) { box-shadow: var(--shadow); } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn { border-radius: 10px; padding: 7px 14px; font-weight: 600; border-color: #D5DBE5; } :root[data-theme="phare-dark"] .btn { border-color: #334054; } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn:hover { background: var(--surface2); border-color: var(--muted); } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn.small { border-radius: var(--radius-sm); padding: 4px 10px; } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn.primary { background: var(--accent); border-color: var(--accent); color: #FFFFFF; } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn.primary:hover { background: var(--blue-ink); border-color: var(--blue-ink); filter: none; } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn.ai-btn, :is([data-theme="phare"], [data-theme="phare-dark"]) .ai-btn { border: 1.5px solid var(--ai); color: var(--ai-ink); } :is([data-theme="phare"], [data-theme="phare-dark"]) .btn.on, :is([data-theme="phare"], [data-theme="phare-dark"]) .btn[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--accent-soft); color: var(--accent); } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(input[type=text], input[type=search], input[type=date], input[type=password], input[type=number], select, textarea) { border-radius: 10px; padding: 7px 11px; } :is([data-theme="phare"], [data-theme="phare-dark"]) .omni input { border-radius: 12px; } :is([data-theme="phare"], [data-theme="phare-dark"]) .top { background: var(--surface); border-bottom-color: var(--rule); } :is([data-theme="phare"], [data-theme="phare-dark"]) .side { background: var(--surface); } :is([data-theme="phare"], [data-theme="phare-dark"]) .nav a { border-radius: var(--radius-sm); font-weight: 600; color: var(--muted); } :is([data-theme="phare"], [data-theme="phare-dark"]) .nav a:hover { color: var(--ink); } :is([data-theme="phare"], [data-theme="phare-dark"]) .nav a.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); } :is([data-theme="phare"], [data-theme="phare-dark"]) .brand-mark { background: var(--accent); color: #FFFFFF; font-family: var(--sans); font-weight: 700; border-radius: 8px; letter-spacing: .04em; } :is([data-theme="phare"], [data-theme="phare-dark"]) .brand-name { font-weight: 700; font-size: 16px; } :is([data-theme="phare"], [data-theme="phare-dark"]) .tile { border-radius: 8px; border-color: transparent; } :is([data-theme="phare"], [data-theme="phare-dark"]) .tile.lg { border-radius: 12px; } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(table.grid th, .kind) { font-family: var(--sans); font-weight: 600; letter-spacing: .03em; text-transform: none; font-size: 12px; } :is([data-theme="phare"], [data-theme="phare-dark"]) .seg, :is([data-theme="phare"], [data-theme="phare-dark"]) .btn-group { gap: 4px; padding: 4px; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface2); display: inline-flex; } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(.seg, .btn-group) .btn, :is([data-theme="phare"], [data-theme="phare-dark"]) .btn-group .btn:is(:first-child, :last-child) { border: 0; border-radius: 7px; margin-left: 0; padding: 5px 9px; background: transparent; color: var(--muted); } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(.seg, .btn-group) .btn:hover { color: var(--ink); background: var(--surface); } :is([data-theme="phare"], [data-theme="phare-dark"]) :is(.seg, .btn-group) .btn[aria-pressed="true"], :is([data-theme="phare"], [data-theme="phare-dark"]) :is(.seg, .btn-group) .btn.on { background: var(--surface); color: var(--ink); box-shadow: var(--flat, 0 1px 2px rgba(0,0,0,.3)); border: 0; } :is([data-theme="phare"], [data-theme="phare-dark"]) .hint { color: var(--muted); } :is([data-theme="phare"], [data-theme="phare-dark"]) code { border-radius: 4px; } :is([data-theme="phare"], [data-theme="phare-dark"]) .g-tip { border-radius: 8px; background: var(--ink); color: var(--bg); } /* ===================== Kit général : pastilles, segment, bandeau, jauges, chaîne de preuve ===================== */ /* Disponibles dans tous les thèmes (les jetons --blue, --orange… sont définis en clair et en sombre). */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; line-height: 1.5; } .pill--blue { background: var(--blue-bg); color: var(--blue-ink); } .pill--orange { background: var(--orange-bg); color: var(--orange-ink); } .pill--violet { background: var(--violet-bg); color: var(--violet-ink); } .pill--red { background: var(--red-bg); color: var(--red-ink); } .pill--green { background: var(--green-bg); color: var(--green-ink); } .pill--amber { background: var(--amber-bg); color: var(--amber-ink); border-color: var(--amber); } .pill--gray { background: var(--gray-bg); color: var(--gray-ink); } .pill--solid-red { background: var(--red); color: var(--on-fill); } .pill--solid-green { background: var(--green); color: var(--on-fill); } .pill--solid-blue { background: var(--blue); color: #FFFFFF; } .count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--blue); color: #FFFFFF; font-size: 10px; font-weight: 700; } /* ===================== Graphe : langage visuel du gabarit (scène à points, disques par type, force des liens) ===================== */ #cy { background-color: var(--stage); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 22px 22px; border: 1px solid var(--rule); border-radius: var(--radius, 10px); } .g-cards, .g-tip { font-family: var(--sans); } /* pastille d'un type dans la légende, les compteurs, l'inspecteur : pleine (identifiants, machines, acteurs) ou en contour teinté (enregistrements, tables, jeux), comme sur le graphe */ .g-dot.outline { background: color-mix(in srgb, var(--dc) 14%, var(--surface)) !important; border: 1.5px solid var(--dc); color: var(--dc); } .g-dot.dotted { background: var(--surface) !important; border: 1.5px dotted var(--dc); color: var(--dc); } .g-dot.dashed { border: 1.5px dashed var(--dc); } /* légende « force du lien » : même vocabulaire que les arêtes */ .lk-key i { border-top-color: var(--g-link, var(--g-edge, var(--ink2))); width: 30px; } .lk-key-fort i { border-top-width: 3px; } .lk-key-moyen i { border-top-width: 2px; } .lk-key-faible i { border-top: 2px dashed var(--g-link, var(--g-edge, var(--ink2))); } .lk-key-contexte i { border-top: 2px dotted var(--g-hub, var(--muted)); } .lk-key-suggestion i { border-top: 2px dotted var(--amber); } .lk-key-contexte, .lk-key-suggestion { color: var(--muted); } .g-linklegend { display: inline-flex; gap: 14px; flex-wrap: wrap; align-items: center; } /* nœud « fort / moyen / faible » dans l'inspecteur et les fichettes */ .lk-fort-t { color: var(--green-ink); font-weight: 600; } .lk-moyen-t { color: var(--orange-ink); font-weight: 600; } .lk-faible-t { color: var(--red-ink); font-weight: 600; } /* ===================== Graphe : réglages (pertinence, rattachement) dans un panneau sous la roue dentée ===================== */ .g-main { position: relative; } #g-relbar { position: absolute; z-index: 7; right: 0; width: min(720px, 100%); margin: 0; padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius, 10px); box-shadow: var(--shadow); font-size: 13px; } #g-relbar[hidden] { display: none; } .g-relbar__head { display: flex; align-items: center; gap: 10px; flex-basis: 100%; padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px solid var(--rule2); } .g-relbar__head strong { font-size: 14px; } .g-relbar__head .btn { margin-left: auto; } #g-relbar .g-line-h { flex-basis: 100%; min-width: 0; margin-top: 4px; } #g-relbar .g-linkline { border-top: 1px solid var(--rule2); margin-top: 6px; padding-top: 10px; } #g-rel[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); } /* ===================== Couche sémantique : une couleur = un sens, partout, dans tous les thèmes ===================== */ /* Chaque thème garde son fond, ses surfaces et son accent ; les SENS prennent les familles du kit (clair et sombre) : structure (jeux, tables, enregistrements, liens, actions) = bleu · identité (e-mail, téléphone, nom, pseudo, adresse) = orange · secrets (mot de passe, hash, IBAN, carte) = ambre · machines et réseau (poste infecté, IP, domaine, HWID) = violet · acteurs et personas = rouge · contexte (ville, pays, texte, hub) = gris · états : bon = vert, à vérifier = ambre, problème = rouge, information = bleu · IA = violet IA (distinct du violet machine : plus clair, toujours avec l'étoile). Les anciennes variables (--t-*, --danger, --warn, --ok, --beta*, --g-*) pointent désormais ici. */ :root, :root[data-theme] { --c-structure: var(--blue); --c-structure-bg: var(--blue-bg); --c-structure-ink: var(--blue-ink); --c-identite: var(--orange); --c-identite-bg: var(--orange-bg); --c-identite-ink: var(--orange-ink); --c-secret: var(--amber); --c-secret-bg: var(--amber-bg); --c-secret-ink: var(--amber-ink); --c-machine: var(--violet); --c-machine-bg: var(--violet-bg); --c-machine-ink: var(--violet-ink); --c-acteur: var(--red); --c-acteur-bg: var(--red-bg); --c-acteur-ink: var(--red-ink); --c-contexte: var(--gray); --c-contexte-bg: var(--gray-bg); --c-contexte-ink: var(--gray-ink); --c-ok: var(--green); --c-ok-bg: var(--green-bg); --c-ok-ink: var(--green-ink); --c-warn: var(--amber); --c-warn-bg: var(--amber-bg); --c-warn-ink: var(--amber-ink); --c-danger: var(--red); --c-danger-bg: var(--red-bg); --c-danger-ink: var(--red-ink); --c-info: var(--blue); --c-info-bg: var(--blue-bg); --c-info-ink: var(--blue-ink); --c-ia: var(--ai); --c-ia-bg: var(--violet-bg); --c-ia-ink: var(--ai-ink); /* anciennes variables → couche sémantique */ --t-strong: var(--c-structure); --t-name: var(--c-identite); --t-weak: var(--c-secret); --danger: var(--c-danger); --warn: var(--c-warn); --ok: var(--c-ok); --beta: var(--c-ia); --beta-soft: var(--c-ia-bg); --beta-line: var(--c-ia); --beta-ink: var(--c-ia-ink); --g-purple: var(--c-identite); --g-yellow: var(--c-secret); --g-teal: var(--c-machine); --g-red: var(--c-acteur); --g-rec: var(--c-structure); --g-hub: var(--c-contexte); --g-edge: var(--c-structure); --g-link: var(--c-structure); --g-icon: var(--on-fill); --g-sel: var(--c-structure); } /* tuiles (icône encadrée) : même famille, fond teinté, icône de la couleur pleine */ .tile.t-strong, .tile.t-ui, .tile.t-ds { color: var(--c-structure); background: var(--c-structure-bg); } .tile.t-name { color: var(--c-identite); background: var(--c-identite-bg); } .tile.t-weak { color: var(--c-secret); background: var(--c-secret-bg); } .tile.t-machine { color: var(--c-machine); background: var(--c-machine-bg); } .tile.t-actor { color: var(--c-acteur); background: var(--c-acteur-bg); } .tile.t-tag, .tile.t-rec { color: var(--c-contexte-ink); background: var(--c-contexte-bg); border-color: var(--c-contexte-bg); } .tile.t-danger { color: var(--c-danger); background: var(--c-danger-bg); } .tile.t-warn { color: var(--c-warn); background: var(--c-warn-bg); } .tile.t-ok { color: var(--c-ok); background: var(--c-ok-bg); } .tile.t-ia { color: var(--c-ia); background: var(--c-ia-bg); } .tile { border-color: transparent; } /* rubriques (libellés de type) */ .kind.t-strong { color: var(--c-structure-ink); } .kind.t-name { color: var(--c-identite-ink); } .kind.t-weak { color: var(--c-secret-ink); } .kind.t-machine { color: var(--c-machine-ink); } .kind.t-actor { color: var(--c-acteur-ink); } /* provenance (espace Acteurs) : revendication = rouge acteur, observation = bleu structure, documenté = vert, hypothèse = ambre, IA = violet IA */ .pdot.n-rev, .aws-nat.n-rev { color: var(--c-acteur); } .pdot.n-obs, .aws-nat.n-obs { color: var(--c-structure); } .pdot.n-doc, .aws-nat.n-doc { color: var(--c-ok); } .pdot.n-hyp, .aws-nat.n-hyp { color: var(--c-warn); } .pdot.n-ia { color: var(--c-ia); border-style: dotted; } .aws-nat.n-ia { color: var(--c-ia-ink); border-color: var(--c-ia); background: var(--c-ia-bg); } /* qualifications et scores */ .qseg button.q-conf.on, .qseg button.q-pert.on { background: var(--c-ok); color: #fff; } .qseg button.q-verif.on { background: var(--c-warn); color: #fff; } .qseg button.q-bruit.on { background: var(--c-contexte); color: #fff; } .qseg button.q-fp.on { background: var(--c-danger); color: #fff; } .rv.lv-high { color: var(--c-danger-ink); border-color: var(--c-danger); background: var(--c-danger-bg); } .rv.lv-medium { color: var(--c-warn-ink); border-color: var(--c-warn); background: var(--c-warn-bg); } .rv.lv-low { color: var(--c-structure-ink); border-color: var(--c-structure); background: var(--c-structure-bg); } .rv-bar i { background: var(--c-structure); } .c-high { color: var(--c-danger-ink); } .c-mid { color: var(--c-warn-ink); } .c-low { color: var(--c-ok-ink); } /* IA : bouton bordé violet IA, étoile, sortie encadrée */ .ai-btn { border: 1.5px solid var(--c-ia); color: var(--c-ia-ink); } .ai-btn:not(:disabled):hover { background: var(--c-ia-bg); border-color: var(--c-ia); } .beta-tag { background: var(--c-ia); } .ai-out { border-color: var(--c-ia); border-left-width: 4px; } /* bandeaux d'erreur / toasts */ .toast.err { background: var(--c-danger); } /* ===================== Chasse infostealer (fiche acteur / persona / groupe) ===================== */ .hj-sum { margin: 0 0 8px; } .hj-h4 { margin: 12px 0 6px; font-size: 13px; font-weight: 700; } .hj-h4 .small { font-weight: 400; margin-left: 6px; } .hj-pivot { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 7px 8px; border: 1px solid var(--rule2); border-radius: var(--radius-sm, 8px); margin-bottom: 6px; background: var(--surface); } .hj-pivot.hj-essential { border-color: var(--c-structure); box-shadow: inset 3px 0 0 var(--c-structure); } .hj-pivot-m { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .hj-pivot-m b { overflow-wrap: anywhere; } .hj-pivot-s { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .hj-pivot-a { display: flex; gap: 4px; grid-column: 2 / span 2; justify-content: flex-end; } .hj-pivot-a:empty { display: none; } .hj-bar { display: block; height: 4px; width: 120px; border-radius: 999px; background: var(--c-contexte-bg); overflow: hidden; } .hj-bar i { display: block; height: 100%; background: var(--c-identite); } .hj-hubs { margin: 4px 0 8px; } .hj-hubs .pill { margin: 2px 2px 0 0; } .hj-cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .hj-cand { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; } .hj-cand-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .hj-shared { display: flex; flex-wrap: wrap; gap: 4px; } .hj-cand-a { gap: 6px; } .hj-ai-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--c-ia-ink); background: var(--c-ia-bg); border-radius: 6px; padding: 2px 8px; margin-top: 2px; } .hj-ai-note .ai-logo { width: 14px; height: 14px; } @media (max-width: 760px) { .hj-pivot { grid-template-columns: auto minmax(0, 1fr); } .hj-pivot-s, .hj-pivot-a { grid-column: 2; justify-content: flex-start; flex-direction: row; } } /* ===================== Capitaliser depuis le graphe (barre de cibles, glisser-déposer, carte « Compléter ») ===================== */ .g-capbar { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; margin: 8px 0 0; padding: 5px 8px; border: 1px dashed var(--rule); border-radius: var(--radius, 10px); background: var(--surface); min-height: 44px; box-sizing: border-box; } .g-capbar .cap-hint { white-space: nowrap; } .g-capbar .cap-new, .g-capbar #cap-pick { flex: none; white-space: nowrap; } @media (max-width: 760px) { .g-capbar .cap-hint { display: none; } } .cap-h { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; } .cap-h .ic { width: 15px; height: 15px; color: var(--c-structure); } .cap-targets { display: flex; gap: 6px; flex-wrap: nowrap; flex: 1; min-width: 120px; overflow-x: auto; scrollbar-width: thin; padding: 2px 0; } .cap-targets:empty { min-width: 0; flex: 0; } .cap-target { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 5px; flex: none; white-space: nowrap; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; text-align: left; transition: border-color .12s, box-shadow .12s, transform .12s; } .cap-target .tile { margin: 0; } .cap-target__n { display: flex; flex-direction: column; line-height: 1.15; } .cap-target__n b { font-size: 12.5px; } .cap-target__n span { font-size: 11px; } .cap-target.is-current { border-color: var(--c-structure); background: var(--c-structure-bg); } .cap-target:hover { border-color: var(--muted); } body.cap-dragging .g-capbar { border-color: var(--c-structure); background: var(--c-structure-bg); } body.cap-dragging .cap-target, body.cap-dragging #cap-new { box-shadow: 0 0 0 2px var(--c-structure-bg); } .cap-target.is-over, #cap-new.is-over { border-color: var(--c-structure); box-shadow: 0 0 0 3px var(--c-structure-bg), 0 0 0 5px var(--c-structure); transform: scale(1.03); } .pg__node[draggable="true"] { cursor: grab; } .toast.cap-toast { background: var(--c-structure); color: #fff; } .toast.cap-toast .link-btn { color: #fff; text-decoration: underline; margin-left: 10px; font-weight: 600; } .cap-complete { margin: 0 0 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--c-structure-bg); } .cap-complete__h { display: flex; align-items: center; gap: 6px; } .cap-complete__h .ic { width: 15px; height: 15px; color: var(--c-structure); } .cap-complete__h .btn { margin-left: auto; } .cap-complete__item { margin: 6px 0; display: flex; flex-direction: column; gap: 3px; } .cap-complete__form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 6px; } .cap-complete__form label { font-size: 12px; } .cap-complete__form label:nth-child(3), .cap-complete__form .row, .cap-complete__form .hint-inline { grid-column: 1 / -1; } .cap-complete__form select, .cap-complete__form input { width: 100%; } /* ===================== Espace Acteurs : mode simple en trois zones, saisie directe, glisser-déposer ===================== */ .aws-more { margin-top: 10px; border-top: 1px dashed var(--rule); padding-top: 6px; } .aws-more > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; padding: 4px 0; list-style: none; } .aws-more > summary::-webkit-details-marker { display: none; } .aws-more > summary::before { content: "▸"; font-size: 11px; color: var(--muted); transition: transform .12s; } .aws-more[open] > summary::before { transform: rotate(90deg); } .aws-more > summary .ic { width: 14px; height: 14px; } .aws-more > .aws-blk, .aws-more > .aws-field { margin-top: 8px; } .aws-todo { border: 1px solid var(--c-warn); background: var(--c-warn-bg); border-radius: var(--radius-sm, 8px); padding: 8px 12px 10px; } .aws-todo .aws-h3 { margin-top: 0; } .aws-todo-l { display: flex; flex-wrap: wrap; gap: 6px; } .aws-todo-i { font: inherit; font-size: 12.5px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; } .aws-todo-i .ic, .aws-todo-i .ai-logo { width: 13px; height: 13px; } .aws-todo-i.warn { border-color: var(--c-danger); color: var(--c-danger-ink); } .aws-todo-i.ia { border-color: var(--c-ia); color: var(--c-ia-ink); } .aws-todo-i:hover { background: var(--surface2); } .as-quick { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; } .as-quick input { flex: 1; min-width: 220px; font-size: 13px; padding: 5px 9px; } .as-quick input:disabled { opacity: .6; } body.as-dragging .aws-blk#aws-personas, body.as-dragging .aws-blk#aws-machines, body.as-dragging .aws-head { outline: 2px dashed var(--c-structure-bg); outline-offset: 2px; border-radius: var(--radius-sm, 8px); } .as-over, .aws-row.as-over { outline: 2px solid var(--c-structure) !important; outline-offset: 2px; background: var(--c-structure-bg) !important; border-radius: var(--radius-sm, 8px); } .aws-chip[draggable="true"], .aws-row[draggable="true"], .hj-cand[draggable="true"] { cursor: grab; } .aws-chip[draggable="true"]:active, .aws-row[draggable="true"]:active { cursor: grabbing; } /* marqueurs connus (Clients : n · Acteurs : n) */ .mk-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; vertical-align: middle; } .pill.mk-pill { cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; } .pill.mk-pill:hover { filter: brightness(0.95); box-shadow: 0 0 0 2px var(--accent-soft); } .pill.mk-pill .ic { width: 12px; height: 12px; } .mk-fiche { border: 1px solid var(--rule); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; background: var(--surface); } .mk-fiche-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .mk-fiche table.grid td { padding: 3px 6px; } .mk-fiche .c-act .row { display: inline-flex; gap: 4px; white-space: nowrap; } .mk-body { max-height: 60vh; overflow: auto; } /* explorateur unitaire d'une machine infostealée */ .mex-wrap { display: flex; flex-direction: column; gap: 10px; min-width: min(900px, 86vw); max-width: 1000px; } .mex-head { display: flex; align-items: baseline; gap: 10px; } .mex-head h2 { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 8px; } .mex-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .mex-search { display: flex; gap: 6px; flex: 1; min-width: 260px; } .mex-search input { flex: 1; } .mex-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mex-actions .grow { flex: 1; } .mex-table { max-height: 54vh; overflow: auto; border: 1px solid var(--rule); border-radius: 6px; } .mex-table table.grid { margin: 0; } .mex-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; } .mex-table td { padding: 4px 8px; } .mex-ck { width: 30px; text-align: center; } .mex-row.off { opacity: 0.55; } .mex-host { cursor: pointer; border: 0; background: none; font: inherit; padding: 2px 6px; } .mex-pw { white-space: nowrap; } .mex-foot { display: flex; align-items: center; justify-content: space-between; } .mex-tabs { margin-left: auto; } .mex-frow.sensitive td.mono { color: var(--danger, #b4232a); } .mex-frow td { padding: 4px 8px; } /* ===================== Vue graphe : tenir dans la hauteur de l'écran ===================== */ /* La zone du graphe se contracte pour laisser la barre « Capitaliser » (et la barre de sélection) toujours visibles, sans ascenseur de page qui les masquerait. Sur écran large seulement ; sur mobile la vue défile normalement. */ @media (min-width: 981px) { body[data-view="graph"] main { padding-top: 12px; padding-bottom: 10px; overflow: hidden; display: flex; flex-direction: column; } body[data-view="graph"] #view-graph.active { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body[data-view="graph"] #view-graph > .g-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } body[data-view="graph"] #view-graph > .g-main > .toolbar, body[data-view="graph"] #view-graph > .g-main > .g-bar, body[data-view="graph"] #view-graph > .g-main > #g-capbar, body[data-view="graph"] #view-graph > .g-main > #g-selbar { flex: 0 0 auto; } body[data-view="graph"] #view-graph .graph-wrap { flex: 1 1 auto; min-height: 180px; grid-template-rows: minmax(0, 1fr); } body[data-view="graph"] #view-graph #cy, body[data-view="graph"] #view-graph .pg { height: 100%; } body[data-view="graph"] #g-capbar { margin-top: 8px; } } /* ===================== Accès (comptes, passkeys, organisations) et marquage TLP ===================== */ .who { margin-bottom: 6px; } .who-link { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; color: var(--ink2); text-decoration: none; font-size: 12.5px; line-height: 1.25; } .who-link:hover { background: var(--surface2); color: var(--ink); } .who-link.warn { color: var(--warn); } .who-link .ic { width: 16px; height: 16px; flex: none; } .side.collapsed .who-link .lbl { display: none; } .ac-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; } .ac-org h3, #access-body h3 { font-size: 14px; margin: 16px 0 6px; } .ac-me p { margin: 4px 0; } .ac-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px 12px; margin: 6px 0; } .ac-perms label { display: flex; gap: 6px; align-items: baseline; } .ac-perms code { font-size: 11px; } .ac-dialog { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 20px 22px; width: min(560px, 92vw); box-shadow: 0 16px 40px rgba(0,0,0,.18); } .ac-dialog::backdrop { background: rgba(0,0,0,.35); } .ac-dialog h2 { margin: 0 0 10px; font-size: 16px; } .ac-dialog label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; } .ac-dialog-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; } .badge .link-btn { border: 0; background: none; color: inherit; cursor: pointer; font: inherit; padding: 0 0 0 4px; opacity: .6; } .badge .link-btn:hover { opacity: 1; } .tlp-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 10.5px var(--mono); letter-spacing: .04em; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--rule); cursor: pointer; background: var(--surface2); color: var(--ink2); } .tlp-chip .ic { width: 12px; height: 12px; } .tlp-chip.tlp-none { border-style: dashed; color: var(--muted); } .tlp-chip.tlp-clear { background: #ffffff; color: #000000; border-color: #999; } .tlp-chip.tlp-green { background: #000000; color: #33ff00; border-color: #000; } .tlp-chip.tlp-amber { background: #000000; color: #ffc000; border-color: #000; } .tlp-chip.tlp-red { background: #000000; color: #ff2b2b; border-color: #000; } .who-logout { margin: 2px 0 0 8px; } .side.collapsed .who-logout .lbl { display: none; } .acting-band { position: fixed; top: 0; left: 0; right: 0; z-index: 60; display: flex; align-items: center; gap: 10px; padding: 6px 14px; background: #7c2d12; color: #fff; font-size: 13px; } .acting-band .ic { width: 16px; height: 16px; } .acting-band .btn { margin-left: auto; } body.acting { padding-top: 34px; } .ac-log td { font-size: 12.5px; } .ac-code { font: 600 15px var(--mono); letter-spacing: .14em; background: var(--surface2); padding: 4px 10px; border-radius: 4px; display: inline-block; user-select: all; } /* ---- Accès : interrupteurs, boîtes de dialogue lisibles, tableaux défilants ---- */ .ac-dialog { color-scheme: light dark; width: min(600px, 96vw); max-height: 92vh; overflow: auto; } .ac-dialog input, .ac-dialog select, .ac-dialog textarea { width: 100%; box-sizing: border-box; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); } .ac-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 14px; } .ac-perms label { display: flex; align-items: center; gap: 10px; padding: 4px 0; cursor: pointer; } .ac-perms label > span { flex: 1; min-width: 0; } .switch, .ac-perms input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 34px; height: 20px; flex: none; border-radius: 999px; background: var(--rule); position: relative; cursor: pointer; transition: background .15s; border: 0; margin: 0; } .switch::after, .ac-perms input[type=checkbox]::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; } .switch:checked, .ac-perms input[type=checkbox]:checked { background: var(--accent); } .switch:checked::after, .ac-perms input[type=checkbox]:checked::after { left: 16px; } .switch:focus-visible, .ac-perms input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ac-switch { display: flex; align-items: center; gap: 10px; padding: 6px 0; } .ac-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .ac-scroll table.grid { min-width: 640px; } #access-body .fsec { overflow: hidden; } .ac-raw { white-space: pre-wrap; word-break: break-all; font: 11.5px var(--mono); background: var(--surface2); padding: 8px; border-radius: 4px; margin: 4px 0 0; max-height: 240px; overflow: auto; } @media (max-width: 720px) { .ac-tabs { flex-direction: column; align-items: stretch; } .ac-dialog { padding: 14px; } .ac-dialog-acts .btn { flex: 1; } } .ac-dialog .ac-perms label, .ac-dialog .ac-switch { flex-direction: row; align-items: center; gap: 10px; } .ac-dialog .ac-perms input[type=checkbox] { width: 34px; } /* ===================== Sécurité (centre de surveillance) et accès dans la fiche cliente ===================== */ .sec-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; } .sec-tabs .chip-tab .ic { width: 14px; height: 14px; } .sec-count { font-weight: 700; color: var(--danger); } .nav-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--danger); color: #fff; font: 700 10px/16px var(--sans); text-align: center; } .nav a .tile { position: relative; } .sec-state { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 6px; border: 1px solid var(--rule); background: var(--surface); margin-bottom: 12px; } .sec-state .ic { width: 20px; height: 20px; } .sec-state.t-danger { border-left: 4px solid var(--danger); } .sec-state.t-warn { border-left: 4px solid var(--warn); } .sec-state.t-ok { border-left: 4px solid var(--ok); } .sec-state.t-danger > .ic { color: var(--danger); } .sec-state.t-warn > .ic { color: var(--warn); } .sec-state.t-ok > .ic { color: var(--ok); } .sec-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 8px; margin-bottom: 12px; } .sec-kpi { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; } .sec-kpi-v { font: 600 22px/1.1 var(--sans); } .sec-kpi-l { font-size: 12.5px; color: var(--ink2); margin-top: 2px; } .sec-kpi.warn { border-left: 3px solid var(--warn); } .sec-kpi.crit { border-left: 3px solid var(--danger); } .small-kpis .sec-kpi-v { font-size: 18px; } .sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; } .sec-grid > .fsec { margin: 0; min-width: 0; } .sec-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 6px 0; } .sec-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; } .sec-bar-pair { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; border-bottom: 1px solid var(--rule); } .sec-bar-pair span { width: 40%; max-width: 18px; min-height: 1px; border-radius: 3px 3px 0 0; } .b-ok { background: var(--accent); } .b-bad { background: var(--danger); } .sec-leg { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: middle; margin: 0 4px 0 8px; } .sec-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 8px; } .sec-check { display: flex; gap: 10px; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface); } .sec-check > .ic { width: 18px; height: 18px; flex: none; margin-top: 2px; } .sec-check.ok > .ic { color: var(--ok); } .sec-check.warn { border-left: 3px solid var(--warn); } .sec-check.warn > .ic { color: var(--warn); } .sec-check.crit { border-left: 3px solid var(--danger); } .sec-check.crit > .ic { color: var(--danger); } .sec-list { display: flex; flex-direction: column; } .sec-ev { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 10px; padding: 8px 4px; border-bottom: 1px solid var(--rule2); align-items: start; } .sec-ev-ic .ic { width: 16px; height: 16px; margin-top: 2px; } .sec-ev.error .sec-ev-ic { color: var(--danger); } .sec-ev.warning .sec-ev-ic { color: var(--warn); } .sec-ev.info .sec-ev-ic { color: var(--ok); } .sec-ev.done { opacity: .62; } .sec-ev-main { min-width: 0; overflow-wrap: anywhere; } .sec-ev-acts { display: flex; gap: 4px; } .sec-ev .ac-raw { grid-column: 1 / -1; } .sec-filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .sec-chips { display: flex; flex-wrap: wrap; gap: 6px; } .sec-frow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sec-frow input[type=search] { flex: 1 1 260px; } .sec-cur { background: var(--accent-soft); } .sec-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .sec-lists label { display: flex; flex-direction: column; gap: 4px; } .sec-lists textarea { font: 13px var(--mono); } .sec-num { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; padding: 8px 0; border-bottom: 1px solid var(--rule2); } .sec-num > span:first-child { display: flex; flex-direction: column; } .sec-num input[type=number] { width: 110px; } .ac-org-card { border: 1px solid var(--rule); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface); } .ac-org-card.off { opacity: .75; border-style: dashed; } .ac-org-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .ac-org-head h3 { margin: 0; font-size: 15px; flex: 1; } .ac-org-card h4, #sec-team h4, #fc-tab-acces h4 { margin: 14px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .ac-members { display: flex; flex-direction: column; } .ac-member { display: grid; grid-template-columns: minmax(180px, 1.3fr) minmax(160px, 1.6fr) minmax(110px, .8fr) auto; gap: 8px 12px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--rule2); } .ac-member.off { opacity: .6; } .ac-m-id { display: flex; gap: 8px; align-items: flex-start; min-width: 0; overflow-wrap: anywhere; } .ac-m-id > .ic { width: 18px; height: 18px; margin-top: 2px; flex: none; } .ac-m-roles { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .ac-m-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; } .ac-invite-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--rule2); } .ac-invite-row.off { opacity: .6; } .ac-invite-row code.ac-code { cursor: copy; font-size: 13px; padding: 2px 8px; } .ac-empty { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; } .ac-empty > .ic { width: 28px; height: 28px; color: var(--muted); flex: none; } .ac-pill { margin-left: 6px; font-size: 10.5px; } .ac-pill .ic { width: 11px; height: 11px; } @media (max-width: 860px) { .ac-member { grid-template-columns: 1fr; } .ac-m-acts { justify-content: flex-start; } .sec-ev { grid-template-columns: auto minmax(0, 1fr); } .sec-ev-acts { grid-column: 2; } .sec-grid { grid-template-columns: 1fr; } } .ac-switch, .ac-perms label, .ac-dialog .ac-perms label { display: flex; flex-direction: row !important; align-items: center; gap: 10px; color: var(--ink); font-size: 13px; } .ac-switch.small { font-size: 12.5px; } .ac-switch > span { min-width: 0; } #fc-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: thin; } #fc-tabs .tab { flex: none; } #fc-tab-acces, .ac-org-card, .ac-members, .ac-member > * { min-width: 0; } .ac-org-card .ac-perms { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } label.sec-num { flex-direction: row !important; align-items: center; color: var(--ink); font-size: 13px; text-align: left; } label.sec-num > span:first-child { align-items: flex-start; } .sec-lists label { color: var(--ink); font-size: 13px; } /* Telegram (sous-onglet Catalogue) */ .tg-detail { padding: 10px 12px; background: var(--surface2); border-radius: 10px; } .tg-detail-row > td { padding: 0 0 12px; } .tg-text { white-space: pre-wrap; word-break: break-word; font-size: 13px; margin: 2px 0; } .tg-msg:first-of-type { border-top: 0 !important; } .tg-av-list .panel { border-left: 3px solid var(--violet, #7c5cff); } .meter { height: 7px; border-radius: 999px; background: var(--surface2, #e9edf3); overflow: hidden; margin-top: 3px; border: 1px solid var(--line); } .meter > i { display: block; height: 100%; border-radius: 999px; } .tg-crit { font-size: 13px; } /* ===================== Supervision : forfaits, activité, alertes ===================== */ .quota-band { display: flex; gap: 10px; align-items: flex-start; padding: 9px 14px; margin: 0 0 12px; border-radius: 6px; border: 1px solid var(--warn); border-left-width: 4px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: var(--ink); font-size: 13px; } .quota-band.full { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, var(--surface)); } .quota-band .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; } .sup-gauge { margin: 8px 0; } .sup-bar { height: 8px; border-radius: 999px; background: var(--surface2); overflow: hidden; margin-top: 4px; border: 1px solid var(--rule2); } .sup-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .sup-gauge.warn .sup-bar span { background: var(--warn); } .sup-gauge.full .sup-bar span { background: var(--danger); } .sup-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 8px 0 12px; } .sup-custom { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; } label.sec-txt { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--rule2); color: var(--ink); font-size: 13px; } label.sec-txt textarea { font: 12.5px var(--mono); } #sup-client .ac-org-card { margin-top: 12px; } /* Version de PHARE (bas de la barre latérale) */ .app-version { font-size: 10.5px; color: var(--muted); opacity: .7; text-align: center; padding: 2px 0; font-family: var(--mono, monospace); letter-spacing: .02em; } .side.collapsed .app-version { display: none; } /* ===================== Sécurité › Santé (temps réel) et Administration ===================== */ .hl { min-width: 0; } .hl-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 10px; } .hl-bar .btn .ic { width: 14px; height: 14px; } .hl-win { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; color: var(--ink); } .hl-win select { width: auto; min-height: 0; height: 30px; padding: 2px 26px 2px 8px; font-size: 13px; } .hl-ago { font-variant-numeric: tabular-nums; } .hl-ago.stale { color: var(--warn); } .hl-err { color: var(--danger); padding: 2px 8px; border-radius: 4px; background: color-mix(in srgb, var(--danger) 9%, transparent); } .hl-state { align-items: flex-start; } .hl-state > b { margin-right: 4px; } .hl-issues { flex-basis: 100%; list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .hl-issues li { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; } .hl-issues li .ic { width: 15px; height: 15px; flex: none; margin-top: 1px; } .hl-issues li.warn .ic { color: var(--warn); } .hl-issues li.crit .ic { color: var(--danger); } .hl-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; margin-bottom: 12px; } .hl-kpi { min-width: 0; } .hl-kpi .sec-kpi-v { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hl-kpi .small { overflow-wrap: anywhere; } .hl-kpi-u { font-size: 13px; font-weight: 400; color: var(--muted); } .hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 12px; margin-bottom: 12px; } .hl-grid > .fsec { margin: 0; min-width: 0; } .hl .fsec { min-width: 0; } .hl-chart-in { position: relative; } .hl-svg { display: block; width: 100%; height: 120px; overflow: visible; } .hl-max { position: absolute; top: -2px; left: 4px; font-size: 11px; background: color-mix(in srgb, var(--surface) 80%, transparent); padding: 0 3px; border-radius: 3px; font-variant-numeric: tabular-nums; } .hl-grid-l { stroke: var(--rule2); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; } .hl-axis { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; } .hl-line { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; } .hl-line.a { stroke: var(--accent); } .hl-line.w { stroke: var(--warn); } .hl-line.d { stroke: var(--danger); stroke-width: 2; } .hl-area { stroke: none; } .hl-area.a { fill: color-mix(in srgb, var(--accent) 16%, transparent); } .hl-xaxis { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; } .hl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; align-items: center; } .hl-leg { display: inline-flex; align-items: center; gap: 5px; } .hl-leg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; } .hl-leg.a i { background: var(--accent); } .hl-leg.p i { background: var(--violet); } .hl-leg.m i { background: var(--orange); } .hl-leg.ing i { width: 14px; height: 10px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--c-structure) 60%, transparent); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-structure) 55%, transparent) 0 1.5px, transparent 1.5px 5px); } .hl-leg.ing .hl-band-ic { position: static; transform: none; } .hl-line.p { stroke: var(--violet); } .hl-line.m { stroke: var(--orange); stroke-dasharray: 5 3; } /* bandes d'ingestion : sous les courbes (le SVG ne capte pas la souris, le survol de la bande donne le détail) */ .hl-chart-in .hl-svg { position: relative; z-index: 1; pointer-events: none; } .hl-chart-in .hl-max { z-index: 2; } .hl-bands { position: absolute; inset: 0 0 0 0; height: 120px; z-index: 0; } .hl-band { position: absolute; top: 0; bottom: 0; min-width: 4px; transform: translateX(-0px); cursor: help; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-structure) 38%, transparent) 0 1.5px, color-mix(in srgb, var(--c-structure) 7%, transparent) 1.5px 6px); border-left: 1.5px solid color-mix(in srgb, var(--c-structure) 70%, transparent); border-right: 1.5px solid color-mix(in srgb, var(--c-structure) 70%, transparent); } .hl-band.run { border-right-style: dashed; } .hl-band.err { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c-danger, var(--danger)) 38%, transparent) 0 1.5px, color-mix(in srgb, var(--c-danger, var(--danger)) 7%, transparent) 1.5px 6px); border-color: color-mix(in srgb, var(--c-danger, var(--danger)) 70%, transparent); } .hl-band:hover { filter: saturate(1.6) brightness(1.05); } .hl-band-ic { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; color: var(--c-structure); background: var(--c-structure-bg); box-shadow: 0 0 0 1.5px var(--surface); z-index: 3; } .hl-band-ic .ic { width: 12px; height: 12px; } .hl-band.err .hl-band-ic { color: var(--c-danger, var(--danger)); background: var(--c-danger-bg, var(--surface2)); } .hl-gauges-in { margin-top: 14px; } .hl-leg.w i { background: var(--warn); } .hl-leg.d i { background: var(--danger); } .hl-leg b { font-variant-numeric: tabular-nums; } .hl-gauge { margin: 4px 0 12px; } .hl-gauge-h { display: flex; justify-content: space-between; gap: 8px; font-variant-numeric: tabular-nums; } .hl-gauge-bar { height: 10px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--rule2); overflow: hidden; margin: 4px 0 2px; } .hl-gauge-bar span { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .4s ease; } .hl-gauge.warn .hl-gauge-bar span { background: var(--warn); } .hl-gauge.crit .hl-gauge-bar span { background: var(--danger); } .hl-table td, .hl-table th { vertical-align: top; } .hl-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .hl-wrap { overflow-wrap: anywhere; word-break: break-word; } .hl-act { text-align: right; white-space: nowrap; } .hl-st { display: inline-block; min-width: 34px; text-align: center; padding: 0 5px; border-radius: 4px; font: 600 11.5px/18px var(--mono); } .hl-st.s2 { color: var(--ok); background: color-mix(in srgb, var(--ok) 13%, transparent); } .hl-st.s3 { color: var(--muted); background: var(--surface2); } .hl-st.s4 { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); } .hl-st.s5 { color: #fff; background: var(--danger); } .hl-evs { display: flex; flex-direction: column; max-height: 320px; overflow: auto; } .hl-ev { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; padding: 6px 2px; border-bottom: 1px solid var(--rule2); font-size: 13px; } .hl-ev-ic .ic { width: 15px; height: 15px; margin-top: 2px; } .hl-ev.error .hl-ev-ic { color: var(--danger); } .hl-ev.warning .hl-ev-ic { color: var(--warn); } .hl-ev.info .hl-ev-ic { color: var(--ok); } .hl-ev-main { min-width: 0; overflow-wrap: anywhere; } .hl-live-sec { margin-bottom: 12px; } .hl-live-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; } .hl-live-bar input[type=search] { flex: 1 1 240px; min-width: 0; } .hl-live-head, .hl-row { display: grid; grid-template-columns: 70px 54px minmax(0, 1fr) 48px 68px minmax(90px, 140px) minmax(80px, 170px); gap: 8px; align-items: center; } .hl-live-head { padding: 0 8px 4px; border-bottom: 1px solid var(--rule); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; } .hl-live { max-height: 380px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; overflow-anchor: none; border: 1px solid var(--rule2); border-top: 0; border-radius: 0 0 6px 6px; background: var(--bg); } .hl-row { padding: 3px 8px; font-size: 12.5px; border-bottom: 1px solid var(--rule2); border-left: 3px solid transparent; animation: hl-in .5s ease-out; } .hl-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hl-row.s4 { border-left-color: var(--warn); } .hl-row.s5 { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, transparent); } .hl-row .mono { font-size: 12px; } .hl-t, .hl-ms { font-variant-numeric: tabular-nums; color: var(--muted); } .hl-ms { text-align: right; } .hl-m { font-weight: 600; color: var(--ink2); } .hl-u { color: var(--ink2); } .hl-live-empty { padding: 10px; margin: 0; } @keyframes hl-in { from { background: var(--accent-soft); } to { background: transparent; } } @media (prefers-reduced-motion: reduce) { .hl-row { animation: none; } .hl-gauge-bar span { transition: none; } } @media (max-width: 760px) { .hl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hl-kpi .sec-kpi-v { font-size: 19px; } .hl-grid { grid-template-columns: minmax(0, 1fr); } .hl-live-head { display: none; } .hl-row { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "t m p s" "ms ip ip u"; row-gap: 1px; padding: 5px 8px; } .hl-t { grid-area: t; } .hl-m { grid-area: m; } .hl-row > .hl-p { grid-area: p; white-space: normal; overflow-wrap: anywhere; } .hl-s { grid-area: s; } .hl-ms { grid-area: ms; text-align: left; } .hl-ip { grid-area: ip; } .hl-u { grid-area: u; text-align: right; } } @media (max-width: 380px) { .hl-kpis { grid-template-columns: minmax(0, 1fr); } } /* Administration technique montée dans Sécurité › Administration */ .adm-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; } .adm-head h2 { margin: 0; flex: 1; display: flex; align-items: center; gap: 8px; font-size: 17px; } #adm-panel, #admin-body { min-width: 0; } .ac-scroll table.hl-table { min-width: 0; } .hl-table td.mono, .hl-table td.hl-wrap { white-space: normal; } @media (max-width: 760px) { .hl-table th, .hl-table td { padding: 6px 7px; } } /* Sécurité : navigation en groupes, mode classique / avancé, tableau de bord (security.js, préfixe sg-) */ #security-body { min-width: 0; } .sg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; margin: 0 0 8px; } .sg-crumb { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; color: var(--ink2); } .sg-crumb .ic { width: 15px; height: 15px; color: var(--accent); } .sg-mode { margin-left: auto; padding: 4px 10px 4px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); } .sg-mode .muted { font-weight: 400; } .sg-nav { display: flex; gap: 8px; margin: 0 0 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 2px 2px 6px; scroll-snap-type: x proximity; } .sg-grp { flex: 1 1 0; min-width: 158px; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); scroll-snap-align: start; } .sg-grp.on { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); } .sg-grp-h { display: flex; align-items: center; gap: 7px; width: 100%; padding: 2px 0; border: 0; background: none; color: var(--ink); font: 600 13.5px/1.3 var(--sans); text-align: left; cursor: pointer; white-space: nowrap; } .sg-grp-h .ic { width: 16px; height: 16px; color: var(--muted); flex: none; } .sg-grp.on .sg-grp-h .ic, .sg-grp-h:hover .ic { color: var(--accent); } .sg-grp-h:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .sg-grp-sub { padding-left: 23px; } .sg-subs { display: flex; flex-wrap: wrap; gap: 4px; } .sg-subs .chip-tab { padding: 2px 8px; } .sg-subs .chip-tab .ic, .sg-more .chip-tab .ic { width: 13px; height: 13px; } .sg-subs .chip-tab, .sg-more .chip-tab { white-space: nowrap; } .sg-gcount, .sg-grp-h .sec-count { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font: 700 10.5px/17px var(--sans); text-align: center; } .sg-gcount:empty, .sg-grp-h .sec-count:empty { display: none; } .sg-more { display: flex; align-items: center; gap: 4px 6px; margin: 0 0 12px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .sg-more > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; margin-right: 2px; } .sg-more > span .ic { width: 13px; height: 13px; } .sg-more .chip-tab.sg-adv { border-style: dashed; } .sg-none { margin-top: 8px; } .sg-none-act { margin: 10px 0 0; } /* tableau de bord : cartes d'état côte à côte */ .sg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 0 0 14px; } .sg-tile { display: flex; min-width: 0; border: 1px solid var(--rule); border-left: 4px solid var(--rule); border-radius: 6px; background: var(--surface); } .sg-tile[data-st="ok"] { border-left-color: var(--ok); } .sg-tile[data-st="warn"] { border-left-color: var(--warn); } .sg-tile[data-st="crit"] { border-left-color: var(--danger); } .sg-tile > .sec-dash-card { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; } .sg-card-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; } .sg-card-h b { font-size: 13.5px; } .sg-card-h .badge { margin-left: auto; } .sg-card-ic .ic { width: 16px; height: 16px; color: var(--muted); } .sg-tile[data-st="ok"] .sg-card-ic .ic { color: var(--ok); } .sg-tile[data-st="warn"] .sg-card-ic .ic { color: var(--warn); } .sg-tile[data-st="crit"] .sg-card-ic .ic { color: var(--danger); } .sg-card-b { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--ink2); } .sg-card-b p { margin: 0 0 4px; } .sg-card-f { display: flex; flex-wrap: wrap; gap: 6px 10px; } .sg-issues { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 3px; } .sg-iss { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: start; } .sg-iss .ic { width: 13px; height: 13px; margin-top: 2px; color: var(--warn); } .sg-iss.crit .ic { color: var(--danger); } .sg-open { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--accent); white-space: nowrap; text-decoration: none; } .sg-open:hover { text-decoration: underline; } .sg-open .ic { width: 12px; height: 12px; } .sec-state .sg-open { margin-left: auto; } /* Clients › Forfaits */ .sg-cltabs { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; } .sg-cltabs .chip-tab .ic { width: 14px; height: 14px; } .list-pane.sg-clq > .hint, .list-pane.sg-clq #clients-list, .list-pane.sg-clq #cl-filter, .list-pane.sg-clq #cl-new { display: none; } @media (max-width: 760px) { .sg-mode { margin-left: 0; } .sg-grp { flex: 0 0 auto; min-width: 150px; } .sg-cards { grid-template-columns: minmax(0, 1fr); } } /* Sécurité › Sauvegardes et › Conservation (sec-data.js) */ .bk { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .bk .panel { margin: 0; } .bk-state b { overflow-wrap: anywhere; } .bk-issues { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .bk-issues li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .bk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .bk-running { color: var(--warn); display: inline-flex; align-items: center; gap: 6px; } .bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .bk-grid p { margin: 0 0 6px; overflow-wrap: anywhere; } .bk-what { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; } .bk-cfg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; } .bk-cfg input[type=number] { width: 70px; } .bk-path { font-size: 11px; overflow-wrap: anywhere; } .bk-table td { vertical-align: top; } .bk-ret .bk-days { white-space: nowrap; } .bk-ret .bk-days input[type=number] { width: 78px; } .bk-ret .bk-days-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin-bottom: 4px; } .bk-ret .bk-days-row label { margin: 0; } .bk-ret tr.bk-info td { background: var(--surface2); } @media (max-width: 760px) { .bk-grid { grid-template-columns: minmax(0, 1fr); } .bk-ret thead { display: none; } .bk-ret, .bk-ret tbody, .bk-ret tr, .bk-ret td { display: block; width: auto; min-width: 0; } .bk-ret tr { padding: 8px 0; border-bottom: 1px solid var(--rule); } .ac-scroll table.grid.bk-ret { min-width: 0; } table.grid.bk-ret td { border: 0; padding: 2px 10px; white-space: normal; } .bk-ret td[data-l] { display: inline-block; } .bk-ret td[data-l]::before { content: attr(data-l) " : "; color: var(--muted); } .bk-ret td.bk-empty { display: none; } } /* ===================== Verrouillage d'urgence, Mises à jour (sec-ops.js) ===================== */ .lk-band { position: fixed; top: 0; left: 0; right: 0; z-index: 61; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: #b3141b; color: #fff; font-size: 13.5px; box-shadow: 0 2px 6px rgba(0,0,0,.25); } .lk-band .ic { width: 18px; height: 18px; flex: none; } .lk-band > span { flex: 1 1 auto; min-width: 0; } .lk-band .lk-band-why { opacity: .9; font-style: italic; } .lk-band .btn { margin-left: auto; background: #fff; color: #b3141b; border-color: #fff; } body.lk-locked { padding-top: var(--lk-h, 40px); } body.lk-locked.acting { padding-top: calc(var(--lk-h, 40px) + 34px); } body.lk-locked.acting .acting-band { top: var(--lk-h, 40px); } .btn.lk-big, .btn.lk-unlock, .lk-dlg .btn, #upd-refresh { gap: 7px; } .lk-card h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 15px; } .lk-card h3 .ic { width: 18px; height: 18px; } .btn.lk-big { background: #c0161e; border-color: #c0161e; color: #fff; font-weight: 600; font-size: 14.5px; padding: 9px 16px; } .btn.lk-big:hover:not(:disabled) { background: #9c1118; border-color: #9c1118; } .btn.lk-big:disabled { opacity: .5; cursor: not-allowed; } .btn.lk-big .ic { color: #fff; } .lk-card.lk-on { border: 2px solid #c0161e; background: color-mix(in srgb, #c0161e 9%, var(--surface)); } .lk-on-head { display: flex; align-items: center; gap: 10px; color: #c0161e; font-size: 16px; } .lk-on-head .ic { width: 28px; height: 28px; flex: none; } .lk-on-head .small { color: var(--ink2); font-size: 12.5px; } .lk-reason { margin: 8px 0; padding: 6px 10px; border-left: 3px solid #c0161e; background: var(--surface); white-space: pre-wrap; word-break: break-word; } .lk-facts { margin: 6px 0 10px; padding-left: 18px; } .lk-facts li { margin: 2px 0; } .btn.lk-unlock { border-color: #c0161e; color: #c0161e; font-weight: 600; } .lk-dlg { max-width: 640px; } .lk-dlg-title { color: #c0161e; } .lk-recap { margin: 6px 0 12px; padding-left: 20px; } .lk-recap li { margin: 4px 0; } .lk-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; } .lk-field textarea { font: inherit; font-weight: 400; width: 100%; box-sizing: border-box; } .lk-actions { justify-content: flex-end; gap: 8px; margin-top: 10px; } .lk-upd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; margin-bottom: 12px; } .lk-upd-grid .sec-kpi .btn { margin-top: 6px; } .lk-mono { font-family: var(--mono, ui-monospace, monospace); } .lk-h3 { margin: 16px 0 6px; font-size: 15px; } table.lk-pkgs { max-width: 720px; } @media (max-width: 760px) { .lk-band { font-size: 12.5px; } } /* ---------------------------------------------------------------- Sécurité › Attaques (sec-attacks.js), fil En direct marqué */ .at-pill { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; font-size: 11.5px; line-height: 1.5; white-space: nowrap; color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); } .at-pill.at-protocol, .at-pill.at-scanner { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); } .at .sec-state { flex-wrap: wrap; } .at-per { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; } .at-bars { display: flex; align-items: flex-end; gap: 2px; height: 140px; padding: 6px 0 18px; border-bottom: 1px solid var(--rule); } .at-bar { flex: 1; position: relative; height: 100%; display: flex; align-items: flex-end; min-width: 0; } .at-bar span { width: 100%; min-height: 1px; border-radius: 2px 2px 0 0; background: var(--danger); opacity: .85; } .at-bar i { position: absolute; bottom: -17px; left: 0; font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; } .at-cats { display: flex; flex-direction: column; gap: 6px; } .at-cat { display: grid; grid-template-columns: minmax(0, 220px) minmax(40px, 1fr) auto; align-items: center; gap: 8px; } .at-cat .at-pill { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .at-cat-bar { height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; } .at-cat-bar span { display: block; height: 100%; background: var(--danger); } .at-recent td { vertical-align: top; } .at-ex code { display: block; max-width: 420px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; } .at-recent tr.at-sev-grave td:first-child { box-shadow: inset 3px 0 0 var(--danger); } .at-how li { margin: 3px 0; } .at-tile-cats { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; } .hl-row.at-live { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); } .at-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 4px; vertical-align: 1px; } .at-live-cat { color: var(--danger); font-family: inherit; font-weight: 600; font-size: 11.5px; } @media (max-width: 760px) { .at-cat { grid-template-columns: minmax(0, 1fr) 60px auto; } .at-per { margin-left: 0; } .at-ex code { max-width: 220px; } } /* ---------------------------------------------------------------- Sécurité › Périmètre (journaux Google, sec-edge.js) */ .eg-state .eg-state-act { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .eg-seg { display: inline-flex; gap: 0; } .eg-seg .btn { border-radius: 0; } .eg-seg .btn:first-child { border-radius: 6px 0 0 6px; } .eg-seg .btn:last-child { border-radius: 0 6px 6px 0; margin-left: -1px; } .eg-seg .btn.on { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; } .eg-errs { margin: 0 0 12px; padding: 8px 12px 8px 28px; border: 1px solid var(--rule); border-left: 3px solid var(--warn); border-radius: 6px; background: var(--surface); } .eg-off { border: 1px dashed var(--rule); border-radius: 8px; padding: 6px 14px 12px; margin-bottom: 12px; background: var(--surface); } .eg-off .eg-help { margin-top: 0; } .eg-chart { position: relative; height: 130px; padding-top: 10px; } .eg-chart svg { width: 100%; height: 120px; display: block; } .eg-max { position: absolute; top: -6px; left: 0; } .eg-axis { stroke: var(--rule); stroke-width: 1; vector-effect: non-scaling-stroke; } rect.eg-b-armor, .eg-legend i.eg-b-armor { fill: var(--danger); background: var(--danger); } rect.eg-b-prev, .eg-legend i.eg-b-prev { fill: var(--warn); background: var(--warn); opacity: .55; } rect.eg-b-fw, .eg-legend i.eg-b-fw { fill: var(--blue); background: var(--blue); } .eg-xaxis { display: flex; justify-content: space-between; margin-top: 2px; } .eg-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; align-items: center; } .eg-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; } .eg-table td { vertical-align: top; } .eg-code { margin-top: 2px; word-break: break-all; } .eg-path { max-width: 260px; overflow-wrap: anywhere; } .eg-ips .badge { white-space: nowrap; margin: 0 2px 2px 0; } .eg-ctry { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .eg-ctry li { display: grid; grid-template-columns: minmax(110px, 160px) 1fr auto; gap: 10px; align-items: center; } .eg-ctry-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .eg-ctry-bar { height: 8px; background: var(--surface2); border-radius: 4px; overflow: hidden; } .eg-ctry-bar i { display: block; height: 100%; background: var(--danger); opacity: .75; } .eg-sync-sw { display: flex; gap: 10px; align-items: flex-start; } .eg-sync-sw > span { display: flex; flex-direction: column; gap: 2px; } .eg-risk { margin: 10px 0; } .eg-help { margin: 12px 0; border: 1px solid var(--rule); border-radius: 6px; padding: 8px 12px; background: var(--surface); } .eg-help summary { cursor: pointer; font-weight: 600; display: flex; gap: 6px; align-items: center; } .eg-help ol { margin: 8px 0 4px; padding-left: 20px; display: grid; gap: 6px; } .eg-filters { list-style: none; padding: 0; display: grid; gap: 8px; margin: 8px 0 0; } .eg-filters li { display: grid; gap: 2px; } .eg-filters code { white-space: pre-wrap; word-break: break-word; font-size: 12px; } .eg-sum { display: grid; gap: 6px; padding: 10px 12px; border: 1px solid var(--rule); border-left: 3px solid var(--blue); border-radius: 6px; background: var(--surface); } .eg-sum-off { border-left-color: var(--rule); } .eg-sum > b { display: flex; gap: 6px; align-items: center; } .eg-sum-kpis { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; } @media (max-width: 760px) { .eg-state .eg-state-act { margin-left: 0; } .eg-ctry li { grid-template-columns: 100px 1fr auto; } }