:root {
  --bg: #0f1216;
  --bg-2: #161b22;
  --panel: #1c232d;
  --panel-2: #232c38;
  --border: #2c3644;
  --text: #e6edf3;
  --muted: #8b98a9;
  --accent: #4f9dff;
  --accent-2: #2f6fd6;
  --danger: #f47067;   /* 5,6:1 sur les panneaux (le rouge précédent tombait à 4,3:1) */
  --ok: #3fb950;

  --fait: #4f9dff;
  --constat: #a371f7;
  --cause: #f0883e;
  --consequence: #e5534b;
  --these: #3fb950;
  --objection: #8b98a9;
  --proposition: #2dd4bf;
  --narratif: #d29922;
  --bifurcation: #f778ba;
  --hypothese: #56d4dd;

  --radius: 10px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 18px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  font-size: 26px; color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(79,157,255,.4));
}
.brand h1 { font-size: 20px; margin: 0; letter-spacing: .5px; }
.tagline { margin: 0; font-size: 12px; color: var(--muted); }

.topbar-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.theme-filter { font-size: 12px; color: var(--muted); display: flex; flex-direction: column; gap: 3px; }
.views { display: flex; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.view-btn {
  background: transparent; color: var(--muted); border: none;
  padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.view-btn:hover { color: var(--text); }
.view-btn.active { background: var(--accent-2); color: #fff; }
.io { display: flex; gap: 8px; }

/* ---------- Buttons ---------- */
.btn {
  border: 1px solid var(--border); background: var(--panel);
  color: var(--text); padding: 8px 14px; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; transition: .12s;
}
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.btn.primary:hover { background: #1f5fc4; border-color: #1f5fc4; }
.btn.ghost { background: transparent; }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: #b93a33; border-color: #b93a33; color: #fff; }
.btn.small { padding: 5px 10px; font-size: 12px; }
.btn.active { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.icon-btn { background: none; border: none; color: var(--muted); font-size: 18px; cursor: pointer; }
.icon-btn:hover { color: var(--text); }
select, input, textarea {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; font-family: inherit;
}
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); }
/* Focus bien visible au clavier (l'anneau par défaut était presque noir sur fond sombre) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
#graph g[tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--accent-2); color: #fff;
  padding: 8px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 8px; }

/* ---------- Views layout ---------- */
main { flex: 1; overflow: hidden; position: relative; }
.view { position: absolute; inset: 0; display: flex; flex-direction: column; }
.spacer { flex: 1; }
.muted { color: var(--muted); }
.hint { font-size: 12px; color: var(--muted); }

/* ---------- Graph ---------- */
.graph-toolbar, .list-toolbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--bg-2);
  flex-wrap: wrap;
}
.link-mode-box { display: flex; align-items: center; gap: 8px; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.legend .lg { display: flex; align-items: center; gap: 5px; }
.legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.graph-wrap { flex: 1; position: relative; overflow: hidden; }
#graph { width: 100%; height: 100%; display: block; cursor: grab; background:
  radial-gradient(circle at 1px 1px, #1e2733 1px, transparent 0) 0 0 / 26px 26px; }
#graph.panning { cursor: grabbing; }

.node-card { cursor: pointer; }
.node-rect { rx: 10; stroke-width: 2; }
.node-title { font-size: 13px; font-weight: 600; fill: var(--text); pointer-events: none; }
.node-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; pointer-events: none; }
.node-meta { font-size: 10px; pointer-events: none; }
.edge-line { stroke: #5a6b80; stroke-width: 2; fill: none; }
.edge-line.contredit { stroke: var(--danger); stroke-dasharray: 6 4; }
.edge-line.soutient { stroke: var(--ok); }
/* les liens de cause à effet ressortent : c'est eux qu'on suit pour voir qui entraîne quoi */
.edge-line.causal { stroke: var(--cause); stroke-width: 2.5; opacity: .9; }
.edge-line.theme-link { stroke: #46566b; opacity: .75; }
.edge-line.aurait_permis { stroke: var(--hypothese); stroke-dasharray: 3 5; opacity: .9; }
.node-rect.node-dashed { stroke-dasharray: 7 4; }
.edge-hit { stroke: transparent; stroke-width: 14; fill: none; cursor: pointer; }
.edge-label { font-size: 10px; fill: var(--muted); pointer-events: none; }
.edge-label-bg { fill: var(--bg); }
.node-selected .node-rect { stroke: var(--accent) !important; stroke-width: 3; }
.node-linking .node-rect { stroke: var(--ok) !important; stroke-dasharray: 5 3; }

.empty-state {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; color: var(--muted);
}

/* ---------- Barre de navigation de la carte ---------- */
.graph-nav {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.breadcrumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumb {
  background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 3px 7px; border-radius: 6px; font-family: inherit;
}
.crumb:hover { background: var(--panel); }
.crumb.current { color: var(--text); cursor: default; background: var(--panel); border: 1px solid var(--border); }
.crumb-sep { color: var(--muted); font-size: 13px; }
.depth-box { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.depth-box select { padding: 4px 7px; font-size: 12px; }

.graph-search { position: relative; }
.graph-search input { width: 230px; font-size: 12.5px; padding: 6px 10px; }
.search-results {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 20; width: 380px; max-width: 80vw;
  max-height: 300px; overflow-y: auto; background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: var(--shadow); padding: 5px;
}
.search-results button {
  display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text);
  font-size: 12.5px; font-family: inherit; padding: 7px 9px; border-radius: 7px; cursor: pointer; line-height: 1.35;
}
.search-results button:hover { background: var(--panel); }
.search-results button span { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-right: 5px; }
.search-results .hint { padding: 8px 9px; }

.filters { position: relative; font-size: 12.5px; }
.filters > summary {
  cursor: pointer; list-style: none; padding: 6px 11px; border: 1px solid var(--border);
  border-radius: 8px; color: var(--muted); font-weight: 600; background: var(--panel);
}
.filters > summary::-webkit-details-marker { display: none; }
.filters.active > summary { border-color: var(--accent); color: var(--accent); }
.filters[open] > summary { border-color: var(--accent); }
.filter-body {
  position: absolute; top: calc(100% + 5px); left: 0; z-index: 20; width: 270px;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 14px; display: flex; flex-direction: column; gap: 11px;
}
.filter-body label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.filter-body label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.filter-body input[type=number] { width: 66px; }

.sub-themes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sub-chip {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 20px; padding: 3px 10px; font-size: 11.5px; cursor: pointer; font-family: inherit;
}
.sub-chip:hover { border-color: var(--accent); color: var(--text); }
.sub-chip.on { background: var(--accent-2); border-color: var(--accent-2); color: #fff; }
.sub-chip b { opacity: .7; font-weight: 600; }
.chip.chip-main { border-color: var(--accent); color: var(--accent); }

/* ---------- Bulles de thème ---------- */
.bubble { cursor: pointer; }
.bubble-bg { fill: var(--panel); stroke: var(--accent); stroke-width: 2; transition: .12s; }
.bubble:hover .bubble-bg { fill: var(--panel-2); stroke-width: 3; }
.bubble.portal .bubble-bg { fill: transparent; stroke: var(--muted); stroke-dasharray: 5 4; }
.bubble.portal:hover .bubble-bg { stroke: var(--accent); }
.bubble-gauge { fill: none; stroke: var(--cause); stroke-width: 3; opacity: .85; }
.bubble-label { font-size: 12.5px; font-weight: 600; fill: var(--text); pointer-events: none; }
.bubble-count { font-size: 10.5px; fill: var(--muted); pointer-events: none; }

/* ---------- Atténuation au survol ---------- */
.node-card.dim, .bubble.dim { opacity: .22; }
.edge-line.dim { opacity: .12; }
/* chaîne de cause à effet de la fiche survolée : causes en amont, conséquences en aval */
.node-card.chain-up .node-rect { stroke: var(--cause); stroke-width: 3; }
.node-card.chain-down .node-rect { stroke: var(--danger); stroke-width: 3; }
.edge-line.chain-lit { stroke-width: 4; opacity: 1; }
.chain-info { font-size: 12px; color: var(--cause); }
.node-focus .node-rect { stroke-width: 3; filter: drop-shadow(0 0 10px rgba(79,157,255,.45)); }

/* ---------- Panneau de détail ---------- */
.detail-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(390px, 100%);
  background: var(--bg-2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.35); z-index: 5;
}
.detail-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.detail-body { flex: 1; overflow-y: auto; padding: 14px; }
.detail-body .d-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.detail-body h3 { margin: 6px 0 10px; font-size: 16px; line-height: 1.35; }
.detail-body h4 { margin: 16px 0 7px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.detail-body h4 .count { background: var(--panel-2); border-radius: 20px; padding: 1px 7px; font-size: 11px; }
.detail-body .d-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 10px; }
.detail-body .d-none { font-size: 12.5px; color: var(--danger); }
.d-sources { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.d-sources li { font-size: 12.5px; border-left: 2px solid var(--border); padding-left: 9px; }
.d-sources a { color: var(--accent); word-break: break-word; }
.d-sources .q { color: var(--muted); font-size: 12px; margin-top: 3px; font-style: italic; }
.d-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.d-links .rel { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.d-jump {
  display: block; text-align: left; background: none; border: none; color: var(--accent);
  font-size: 12.5px; font-family: inherit; padding: 2px 0; cursor: pointer; line-height: 1.35;
}
.d-jump:hover { text-decoration: underline; }
.detail-actions { display: flex; gap: 7px; padding: 11px 14px; border-top: 1px solid var(--border); flex-wrap: wrap; }

@media (max-width: 760px) {
  .detail-panel, .atelier { width: 100%; }
  .graph-search input { width: 160px; }
}

/* ---------- List ---------- */
.list-toolbar #searchInput { flex: 1; }
.list-container { flex: 1; overflow-y: auto; padding: 16px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-content: start; }
.claim-card {
  content-visibility: auto; contain-intrinsic-size: auto 150px;
  background: var(--panel); border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius); padding: 14px; cursor: pointer; transition: .12s;
}
.claim-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.claim-card .tag-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.claim-card h3 { margin: 6px 0; font-size: 15px; }
.claim-card .desc { font-size: 13px; color: var(--muted); margin: 0 0 10px; }
.claim-card .meta-row { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; margin-bottom: 8px; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; padding: 2px 9px; font-size: 11px; }
.chip.conf-etabli { color: var(--ok); border-color: var(--ok); }
.chip.conf-suppose, .chip.conf-conteste { color: var(--cause); border-color: var(--cause); }
.src-count { font-size: 11px; color: var(--muted); }
.src-count.none { color: var(--danger); }

/* ---------- Sources in modal ---------- */
.sources-block { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.sources-head { display: flex; align-items: center; justify-content: space-between; }
.sources-head h3 { margin: 0; font-size: 14px; }
.sources-list { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.source-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.source-row .full { grid-column: 1 / -1; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex;
  align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-card { background: var(--bg-2); border: 1px solid var(--border); border-radius: 14px;
  width: 640px; max-width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); }
.modal-card.small { width: 460px; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-2); }
.modal-head h2 { margin: 0; font-size: 17px; }
.modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.modal-body label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.modal-body label input, .modal-body label textarea, .modal-body label select { color: var(--text); font-weight: 400; }
.modal-body .row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.modal-body label.checkbox { flex-direction: row; align-items: center; gap: 8px; }
.modal-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.edge-endpoints { font-size: 13px; background: var(--panel); padding: 10px; border-radius: 8px; }
.edge-endpoints b { color: var(--accent); }

/* ---------- Argument view ---------- */
.argument-layout { display: grid; grid-template-columns: 300px 1fr; height: 100%; }
.argument-builder { padding: 20px; border-right: 1px solid var(--border); background: var(--bg-2); display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.argument-builder h2 { margin: 0; font-size: 17px; }
.argument-builder label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 600; }
.argument-builder label.checkbox { flex-direction: row; align-items: center; }
.argument-output { padding: 30px 40px; overflow-y: auto; }
.argument-output h1 { font-size: 24px; margin-top: 0; }
.arg-step { border-left: 3px solid var(--accent); padding: 4px 0 18px 18px; margin-left: 8px; position: relative; }
.arg-step::before { content: ''; position: absolute; left: -8px; top: 6px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--bg); }
.arg-step h3 { margin: 0 0 4px; font-size: 16px; }
.arg-step.arg-hypo { border-left-style: dashed; }
.arg-step.arg-hypo::before { background: var(--hypothese); }
.arg-hypo-flag { font-size: 12px; color: var(--hypothese); margin: 2px 0 6px; }
.arg-step .arg-type { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.arg-step .arg-link { font-size: 12px; color: var(--muted); font-style: italic; margin: 2px 0 6px; }
.arg-step .arg-sources { font-size: 12px; }
.arg-step .arg-sources a { color: var(--accent); word-break: break-all; }
.arg-step ul { margin: 6px 0; padding-left: 18px; }

/* ---------- Atelier (panneau conversationnel sur le graphe) ---------- */
.atelier { position: absolute; top: 0; right: 0; bottom: 0; width: min(460px, 100%); background: var(--bg-2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; box-shadow: -8px 0 30px rgba(0,0,0,.35); z-index: 6; }
.atelier-head { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.atelier-about { flex: 1; min-width: 0; }
.atelier-head h3 { margin: 2px 0 0; font-size: 14px; line-height: 1.3; }
.atelier-feed { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.atelier .msg { border-radius: 12px; padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.atelier .msg.me { background: var(--accent-2); color: #fff; align-self: flex-end; max-width: 90%; white-space: pre-wrap; }
.atelier .msg.ai { background: var(--panel); border: 1px solid var(--border); align-self: stretch; }
.atelier .msg.ai.err { border-color: var(--danger); color: var(--danger); }
.atelier .msg.ai.loading { color: var(--accent); border-color: var(--accent); }
.atelier .msg.welcome { color: var(--muted); }
.atelier .msg h4 { margin: 10px 0 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.atelier .pt { border-left: 3px solid var(--border); padding: 4px 10px; margin: 4px 0; font-size: 12.5px; }
.atelier .pt.pour { border-color: var(--ok); }
.atelier .pt.contre { border-color: var(--danger); }
.atelier .pt a { color: var(--accent); font-size: 12px; word-break: break-all; }
.atelier .verdict { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; margin-right: 6px; }
.atelier .proposal { border: 1px solid rgba(63,185,80,.4); background: rgba(63,185,80,.06); border-radius: 10px; padding: 10px; margin-top: 10px; }
.atelier .proposal h4 { margin-top: 0; color: var(--ok); }
.atelier .prop-item { display: flex; gap: 8px; align-items: flex-start; padding: 8px; background: var(--bg); border-radius: 8px; margin-bottom: 6px; font-size: 12.5px; }
.atelier .prop-item input[type=checkbox] { margin-top: 3px; }
.atelier .prop-item .t { font-weight: 600; }
.atelier .prop-item .m { color: var(--muted); font-size: 12px; margin-top: 2px; }
.atelier .prop-item .s a { color: var(--accent); font-size: 11.5px; word-break: break-all; }
.atelier .prop-links { font-size: 12px; color: var(--muted); margin: 6px 0; }
.atelier .prop-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.atelier .questions li { font-size: 12.5px; }
.atelier-composer { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--border); }
.atelier-composer textarea { flex: 1; resize: none; font-size: 13px; }
.mic-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 17px; cursor: pointer; flex-shrink: 0; }
.mic-btn.on { background: var(--danger); border-color: var(--danger); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .mic-btn.on { animation: none; } }

/* ---------- Bibliothèque de thèmes ---------- */
.library-list { display: flex; flex-direction: column; gap: 10px; }
.pack { display: flex; gap: 14px; align-items: flex-start; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; }
.pack .body { flex: 1; min-width: 0; }
.pack h3 { margin: 0 0 4px; font-size: 15px; }
.pack .desc { font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.pack .counts { font-size: 11.5px; color: var(--muted); }
.pack .counts b { color: var(--text); }
.pack .btn.done { border-color: var(--ok); color: var(--ok); pointer-events: none; }

/* ---------- Boîte à preuves ---------- */
.badge { background: var(--danger); color: #fff; border-radius: 20px; padding: 0 6px; font-size: 10px; margin-left: 4px; vertical-align: middle; }
.view-btn.active .badge { background: #fff; color: var(--accent-2); }
.server-hint { margin: 14px 16px 0; padding: 12px 14px; border: 1px solid var(--cause); background: rgba(240,136,62,.1); border-radius: 8px; font-size: 13px; }
.server-hint code { background: var(--bg); padding: 2px 6px; border-radius: 4px; }
.list-toolbar #preuveUrl { flex: 1; min-width: 220px; }
.preuve-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.preuve-card .head { display: flex; gap: 10px; align-items: flex-start; }
.preuve-card img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.preuve-card h3 { margin: 4px 0 0; font-size: 14px; line-height: 1.3; }
.preuve-card .meta { font-size: 11px; color: var(--muted); }
.preuve-card .meta a { color: var(--accent); }
.preuve-card .text { font-size: 12.5px; color: var(--muted); white-space: pre-wrap; max-height: 90px; overflow: hidden; }
.preuve-card .note { font-size: 12.5px; border-left: 3px solid var(--accent); padding-left: 8px; }
.preuve-card .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.preuve-card .actions select { flex: 1; min-width: 150px; font-size: 12px; padding: 6px 8px; }
.prov { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 20px; }
.prov-x { background: #000; color: #fff; border: 1px solid #444; }
.prov-youtube { background: #c00; color: #fff; }
.prov-web { background: var(--accent-2); color: #fff; }

/* ---------- Transcription / extraction dans une preuve ---------- */
.preuve-card.expanded { grid-column: 1 / -1; }
.extract-panel { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.transcript-box summary { cursor: pointer; font-size: 12px; color: var(--muted); }
.transcript-text { width: 100%; margin-top: 8px; font-size: 12px; line-height: 1.4; }
.extract-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.extract-result { display: flex; flex-direction: column; gap: 12px; }

/* ---------- IA dans la modale ---------- */
.ai-block { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; }
.ai-result { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.ai-banner { font-size: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(240,136,62,.12); border: 1px solid var(--cause); color: var(--cause); }
.ai-banner.err { background: rgba(229,83,75,.12); border-color: var(--danger); color: var(--danger); }
.ai-banner.loading { background: rgba(79,157,255,.1); border-color: var(--accent); color: var(--accent); }
.ai-section h4 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.ai-section h4 .count { background: var(--panel-2); border-radius: 20px; padding: 0 8px; font-size: 11px; font-weight: 600; }
.ai-item { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 6px; }
.ai-item .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.ai-item .ai-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ai-item .ai-actions .btn { padding: 4px 9px; font-size: 11px; }
.ai-item .ai-actions .btn.done { border-color: var(--ok); color: var(--ok); pointer-events: none; }
.sol { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.sol-solide { background: rgba(63,185,80,.15); color: var(--ok); }
.sol-a_nuancer { background: rgba(240,136,62,.15); color: var(--cause); }
.sol-fragile { background: rgba(229,83,75,.15); color: var(--danger); }
.conf-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; }
.conf-haute { color: var(--ok); } .conf-moyenne { color: var(--cause); } .conf-faible { color: var(--danger); }

/* ---------- Audit / Solidité ---------- */
.audit-wrap { flex: 1; overflow-y: auto; padding: 26px 34px; max-width: 960px; width: 100%; margin: 0 auto; }
.audit-header { display: flex; gap: 26px; align-items: center; margin-bottom: 24px; }
.score-ring {
  width: 118px; height: 118px; flex-shrink: 0; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: conic-gradient(var(--ring-color, var(--muted)) var(--ring-deg, 0deg), var(--panel) 0deg);
  position: relative;
}
.score-ring::after {
  content: ''; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg);
}
.score-ring span, .score-ring small { position: relative; z-index: 1; }
.score-ring span { font-size: 34px; font-weight: 800; }
.score-ring small { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.audit-intro h2 { margin: 0 0 6px; }
.audit-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.audit-summary .stat { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; font-size: 13px; }
.audit-summary .stat b { font-size: 18px; display: block; }

.audit-group { margin-bottom: 22px; }
.audit-group h3 { font-size: 14px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.audit-group h3 .count { background: var(--panel-2); border-radius: 20px; padding: 1px 9px; font-size: 12px; }
.finding {
  display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--border); border-left-width: 4px; border-radius: 8px; cursor: pointer;
}
.finding:hover { border-color: var(--accent); }
.finding.sev-high { border-left-color: var(--danger); }
.finding.sev-med { border-left-color: var(--cause); }
.finding.sev-low { border-left-color: var(--muted); }
.finding .ficon { font-size: 18px; line-height: 1.2; }
.finding .fbody { flex: 1; }
.finding .ftitle { font-weight: 600; font-size: 14px; }
.finding .fdesc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.audit-clean { text-align: center; padding: 50px 20px; color: var(--ok); }
.audit-clean .big { font-size: 46px; }

@media print {
  .topbar, .argument-builder, .graph-toolbar { display: none !important; }
  body, .argument-output { background: #fff; color: #000; overflow: visible; height: auto; }
  .arg-step .arg-sources a { color: #0645ad; }
}

@media (max-width: 720px) {
  .argument-layout { grid-template-columns: 1fr; }
  .modal-body .row { grid-template-columns: 1fr; }
}

/* ============================================================
   COLLABORATION — identité, revue, commentaires, propositions,
   journal du robot, comptes, page de connexion
   ============================================================ */

/* Qui est connecté */
.who { display: flex; align-items: center; gap: 8px; min-width: 240px; }
/* la place du bandeau « qui suis-je » est réservée dès le chargement : sans ça, son
   apparition faisait passer Importer/Exporter à la ligne et toute la page sautait */
.who[hidden] { display: flex !important; visibility: hidden; }
@media (max-width: 900px) { .who { min-width: 0; } .who[hidden] { display: none !important; } }
.who-name { font-weight: 600; font-size: 13px; }
.who-role { font-size: 11px; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 8px; }

/* Pastille de revue */
.review-badge { display: inline-block; font-size: 12px; margin: 6px 0 2px;
  border-left: 3px solid var(--border); padding: 4px 8px; border-radius: 4px; background: var(--panel-2, rgba(255,255,255,.03)); }
.review-badge .rb-note { color: var(--text); }
.r-pertinent { border-color: var(--these); color: var(--these); }
.r-a_revoir { border-color: var(--narratif); color: var(--narratif); }
.r-sources_a_verifier { border-color: var(--cause); color: var(--cause); }
.r-hors_sujet { border-color: var(--danger); color: var(--danger); }

/* Avertissement des récits qui circulent */
.d-warn { font-size: 12px; line-height: 1.45; color: var(--narratif);
  border: 1px solid var(--narratif); border-radius: 6px; padding: 8px 10px; margin: 8px 0; }

/* Boutons « pointer l'information » */
.review-box { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.review-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rv { font: inherit; font-size: 12px; cursor: pointer; padding: 5px 9px; border-radius: 6px;
  background: transparent; color: var(--muted); border: 1px solid var(--border); }
.rv:hover { color: var(--text); border-color: var(--muted); }
.rv.on { color: #0f1216; font-weight: 600; }
.rv-pertinent.on { background: var(--these); border-color: var(--these); }
.rv-a_revoir.on { background: var(--narratif); border-color: var(--narratif); }
.rv-sources_a_verifier.on { background: var(--cause); border-color: var(--cause); }
.rv-hors_sujet.on { background: var(--danger); border-color: var(--danger); }
.review-note { width: 100%; font: inherit; font-size: 12px; padding: 6px 8px; margin-bottom: 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }

/* Commentaires et pistes */
.comment-box { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 12px; }
.c-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.cm { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; font-size: 13px; }
.cm-piste { border-left: 3px solid var(--proposition); }
.cm-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cm-head .hint { font-size: 11px; }
.cm-del { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px; }
.cm-del:hover { color: var(--danger); }
.cm-text { white-space: pre-wrap; line-height: 1.45; }
.cm-lead { margin-top: 5px; font-size: 12px; color: var(--proposition); }
.chip-piste { background: rgba(45,212,191,.12); color: var(--proposition); }
.c-input, .c-lead { width: 100%; font: inherit; font-size: 13px; padding: 7px 9px; margin-bottom: 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; resize: vertical; }

/* Propositions */
.prop-tabs { display: flex; gap: 4px; }
.tab-btn { font: inherit; font-size: 13px; cursor: pointer; padding: 6px 12px; border-radius: 6px;
  background: transparent; color: var(--muted); border: 1px solid var(--border); }
.tab-btn.active { background: var(--panel); color: var(--text); border-color: var(--muted); }
.prop-list { display: flex; flex-direction: column; gap: 14px; padding: 0 20px 40px; }
.prop { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--panel); }
.prop.waiting { border-left: 3px solid var(--proposition); }
.prop-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prop-head h3 { margin: 0; font-size: 15px; flex: 1 1 240px; }
.prop-origin { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; }
.prop-origin.is-robot { color: var(--proposition); border-color: var(--proposition); }
.prop-msg { white-space: pre-wrap; font-size: 13px; line-height: 1.5; margin: 10px 0; color: var(--text); }
.prop h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pc-list, .pe-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pc { display: flex; gap: 8px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
.pc .checkbox { margin: 0; }
.pc-body { flex: 1; min-width: 0; }
.pc-type { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.pc-title { font-weight: 600; font-size: 13px; margin: 2px 0; }
.pc-desc { font-size: 12px; color: var(--muted); line-height: 1.45; }
.pc-src { margin: 5px 0 0; padding-left: 16px; font-size: 12px; }
.pc-src a { color: var(--fait); }
.pc-nosrc { font-size: 12px; color: var(--danger); margin-top: 5px; }
.pe-list { font-size: 12px; color: var(--muted); }
.pe-list .rel { color: var(--text); }
.prop-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.prop-note { flex: 1 1 200px; font: inherit; font-size: 12px; padding: 7px 9px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.prop-verdict { margin-top: 12px; font-size: 12px; color: var(--muted);
  border-top: 1px solid var(--border); padding-top: 8px; }
#propIntro { padding: 0 20px; }

/* Journal du robot */
.job-list { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 40px; }
.job { border: 1px solid var(--border); border-left-width: 3px; border-radius: 6px;
  padding: 9px 12px; background: var(--panel); font-size: 13px; }
.job-propose { border-left-color: var(--these); }
.job-erreur { border-left-color: var(--danger); }
.job-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.job-subject { margin-top: 4px; color: var(--muted); }
.job-error { margin-top: 4px; color: var(--danger); font-size: 12px; }

/* Comptes */
.users-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; padding: 20px; align-items: start; }
.user-form { border: 1px solid var(--border); border-radius: 10px; padding: 16px; background: var(--panel);
  display: flex; flex-direction: column; gap: 10px; }
.user-form h2 { margin: 0; font-size: 15px; }
.user-list { display: flex; flex-direction: column; gap: 8px; }
.user { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--panel); }
.user-id { flex: 1 1 180px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.user-role { font: inherit; font-size: 12px; padding: 5px 7px; border-radius: 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); }
@media (max-width: 800px) { .users-layout { grid-template-columns: 1fr; } }

/* Page de connexion */
.login-page { display: flex; min-height: 100vh; }
.login-wrap { margin: auto; padding: 24px; width: 100%; max-width: 380px; }
.login-card { border: 1px solid var(--border); border-radius: 12px; padding: 24px; background: var(--panel);
  display: flex; flex-direction: column; gap: 16px; }
.login-card h1 { margin: 0; font-size: 20px; }
.login-card form { display: flex; flex-direction: column; gap: 12px; }
.login-card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muted); }
.login-card input { font: inherit; padding: 9px 11px; border-radius: 6px;
  background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.login-error { margin: 0; font-size: 13px; color: var(--danger); }
.small { font-size: 12px; }

/* Consommation de l'IA */
#usageBox { padding: 0 20px; }
.usage { border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 12px 14px; margin: 10px 0 14px; font-size: 13px; }
.usage-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 8px; }
.usage-bar { height: 6px; border-radius: 3px; background: var(--bg); overflow: hidden; margin-bottom: 6px; }
.usage-bar span { display: block; height: 100%; background: var(--accent); }
.usage-line { margin-bottom: 4px; }
.usage-table { border-collapse: collapse; margin-top: 8px; font-size: 12px; }
.usage-table th, .usage-table td { text-align: left; padding: 3px 12px 3px 0; border-bottom: 1px solid var(--border); }
.usage-table th { color: var(--muted); font-weight: 600; }

/* Sauvegardes */
.backup-box { margin: 0 20px 40px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel); padding: 16px; }
.backup-box h2 { margin: 0 0 6px; font-size: 15px; }
.backup-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.backup-actions label.btn { cursor: pointer; }
.backup-list { display: flex; flex-direction: column; gap: 6px; }
.backup { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 6px 0; border-top: 1px solid var(--border); }
.backup-name { flex: 1; }

/* Riposte en trente secondes */
.riposte-card { width: 640px; }
.r30 { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; }
.r30-k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.r30-big { font-size: 17px; line-height: 1.4; margin: 4px 0; font-weight: 600; }
.r30 p { margin: 4px 0; }
.r30-src { font-size: 12px; color: var(--muted); }
.r30-src a { color: var(--accent); }
.r30-warn { border-left-color: var(--cause); font-size: 13px; }
.r30-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.r30-actions .hint { margin-right: auto; }

/* Chiffres qui périment */
.fresh { font-size: 12px; color: var(--muted); margin: 6px 0; }
.fresh-due { color: var(--cause); border: 1px solid var(--cause); border-radius: 6px; padding: 6px 9px; }
.refresh-box { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; }
.history-box { margin: 10px 0; font-size: 12.5px; }
.history-box summary { cursor: pointer; color: var(--muted); }
.hist { border-left: 2px solid var(--border); padding: 4px 0 4px 9px; margin-top: 6px; }
.hist-title { font-size: 12.5px; }
.maj { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.maj-side { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; }
.maj-side:last-child { border-color: var(--proposition); }
.maj-k { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.maj-note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
@media (max-width: 720px) { .maj { grid-template-columns: 1fr; } }

/* ---------- Mode présentation ---------- */
.presentation { position: fixed; inset: 0; z-index: 200; background: var(--bg); color: var(--text);
  display: flex; flex-direction: column; outline: none; }
.presentation[hidden] { display: none; }
body.presenting { overflow: hidden; }
.pr-top { display: flex; align-items: center; gap: 16px; padding: 14px 24px; color: var(--muted); font-size: 14px; }
.pr-brand { font-weight: 700; letter-spacing: .04em; }
.pr-count { margin-left: auto; font-variant-numeric: tabular-nums; }
.pr-slide { flex: 1; overflow-y: auto; display: flex; align-items: center; justify-content: center;
  padding: 2vh 6vw; cursor: pointer; user-select: text; }
.pr-cover { max-width: 1100px; text-align: left; }
.pr-cover h1 { font-size: clamp(30px, 5.2vw, 68px); line-height: 1.1; margin: 12px 0 28px; border-left: 8px solid; padding-left: 24px; }
.pr-kicker { text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-size: clamp(13px, 1.4vw, 18px); }
.pr-hint { color: var(--muted); font-size: 15px; }
.pr-step { max-width: 1100px; width: 100%; border-left: 8px solid var(--tc); padding-left: clamp(16px, 2.4vw, 32px); }
.pr-step.pr-hypo { border-left-style: dashed; }
.pr-link { color: var(--muted); font-size: clamp(14px, 1.5vw, 20px); margin-bottom: 10px; font-style: italic; }
.pr-type { color: var(--tc); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: clamp(13px, 1.4vw, 18px); }
.pr-warn { margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--tc); border-radius: 8px; font-size: clamp(13px, 1.3vw, 17px); color: var(--muted); }
.pr-step h2 { font-size: clamp(26px, 4vw, 54px); line-height: 1.15; margin: 14px 0 16px; }
.pr-desc { font-size: clamp(16px, 1.8vw, 24px); line-height: 1.45; color: var(--text); opacity: .9; margin: 0 0 18px; }
.pr-fresh { color: var(--warn, #d29922); font-size: clamp(14px, 1.4vw, 18px); margin-bottom: 12px; }
.pr-sources { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; font-size: clamp(14px, 1.5vw, 20px); }
.pr-sources li { padding-left: 14px; border-left: 3px solid var(--border); }
.pr-sources q { display: block; font-style: italic; color: var(--muted); margin-top: 2px; }
.pr-host { color: var(--muted); font-size: .85em; }
.pr-nosrc { color: var(--danger); }
.pr-more { color: var(--muted); }
.pr-nav { display: flex; align-items: center; gap: 16px; padding: 12px 24px 18px; }
.pr-progress { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
#presentBar { height: 100%; background: var(--accent); transition: width .2s; }
@media (max-width: 600px) { .pr-top, .pr-nav { padding-left: 16px; padding-right: 16px; } .pr-slide { padding: 2vh 16px; } }
@media print { .presentation { display: none !important; } }

/* ---------- Contradictions internes ---------- */
.contra-box { margin-top: 24px; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel, transparent); }
.contra-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.contra-head h3 { margin: 0 0 6px; }
.contra-head p { margin: 0; max-width: 70ch; }
.contra-item { margin-top: 12px; padding: 12px 14px; border-left: 4px solid var(--border); border-radius: 8px; background: rgba(127,127,127,.06); }
.contra-item.sev-high { border-left-color: var(--danger); }
.contra-item.sev-med { border-left-color: var(--cause); }
.contra-item p { margin: 6px 0; }
.contra-tags { display: flex; gap: 6px; margin-bottom: 6px; }
.contra-tags .chip { font-size: 12px; padding: 2px 8px; border-radius: 10px; border: 1px solid var(--border); color: var(--muted); }
.contra-pair { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; font-weight: 600; }
.contra-pair span { color: var(--danger); }
.contra-piste { color: var(--muted); }
.contra-pair a { color: var(--text); text-decoration: underline dotted; }
.contra-item p, .contra-head p { font-size: 13.5px; }

/* ---------- Conséquences par domaine ---------- */
.bilan { margin: 14px 0; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-2); }
.bilan h4 { margin: 0 0 2px; }
.bilan .hint { margin: 0 0 8px; }
.bilan-doms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bilan-dom { font-size: 12px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--dc); color: var(--text); }
.bilan-dom b { color: var(--dc); }
.bilan-qui { font-size: 13px; margin: 6px 0 8px; }
.bilan-group { border-left: 3px solid var(--dc); padding: 2px 0 2px 10px; margin: 6px 0; }
.bilan-group summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
.imp-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 6px; }
.imp { display: flex; gap: 8px; font-size: 13px; line-height: 1.4; }
.imp-sens { flex: 0 0 auto; font-size: 11px; margin-top: 2px; }
.imp-negatif .imp-sens { color: var(--danger); }
.imp-positif .imp-sens { color: var(--ok); }
.imp-mixte .imp-sens { color: var(--cause); }
.imp-chiffre { color: var(--text); }
.imp-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.imp-qui { padding: 0 6px; border-radius: 8px; background: rgba(127,127,127,.15); color: var(--text); }
.imp-nature.imp-attendu { color: var(--hypothese, #56d4dd); font-style: italic; }
.imp-via { font-size: 11.5px; padding: 0; background: none; border: none; color: var(--accent); cursor: pointer; text-align: left; }
.impacts-list { display: grid; gap: 8px; }
.impact-row { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 6px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.impact-row .im-resume { grid-column: 1 / 4; }
.impact-row .im-chiffre { grid-column: 1 / 3; }
.impact-row .im-del { grid-row: 1; grid-column: 4; }
@media (max-width: 600px) { .impact-row { grid-template-columns: 1fr 1fr auto; } .impact-row .im-resume, .impact-row .im-chiffre { grid-column: 1 / -1; } }
.arg-impacts { margin: 8px 0; padding-left: 18px; font-size: 14px; }
.arg-bilan { margin-top: 28px; padding: 16px 20px; border: 2px solid var(--accent); border-radius: 12px; }
.arg-bilan h2 { margin-top: 0; }
.arg-bilan h3 { margin: 14px 0 6px; }
.pr-impacts { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; }
.pr-imp { font-size: clamp(14px, 1.5vw, 20px); border-left: 4px solid var(--dc); padding-left: 10px; }
.pr-bilan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 10px; }
.pr-dom { border-top: 4px solid var(--dc); padding-top: 8px; }
.pr-dom h3 { margin: 0 0 8px; font-size: clamp(16px, 1.8vw, 24px); }
.pr-dom ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: clamp(14px, 1.4vw, 19px); }
@media print { .arg-bilan { border-color: #000; } }

/* ---------- Synchronisation et conflits ---------- */
.sync-state { font-size: 12px; color: var(--muted); white-space: nowrap; }
.sync-state[data-kind="erreur"] { color: var(--danger); }
.sync-state[data-kind="maj"] { color: var(--accent); }
.conflict-bar { position: sticky; top: 0; z-index: 60; display: grid; gap: 6px; padding: 8px 16px; background: var(--panel-2); border-bottom: 2px solid var(--cause); }
.conflict { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; font-size: 13.5px; }
.cf-actions { display: flex; gap: 6px; }
.cf-row { display: flex; gap: 8px; margin-top: 6px; font-size: 12.5px; }
.cf-k { color: var(--muted); min-width: 80px; }
.cf-theirs { color: var(--cause); } .cf-mine { color: var(--accent); }
.hist-diff { font-size: 12.5px; margin: 4px 0; } .hist-diff s { color: var(--muted); }
.hist .hist-revert { margin-top: 4px; }
.journal-box { margin-top: 20px; } .journal-box .hist { border-top: 1px solid var(--border); padding: 8px 0; }

/* ---------- Doublons ---------- */
.dup-hint { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--cause); background: rgba(240,136,62,.08); font-size: 13px; border-radius: 4px; }
.linkish { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; text-align: left; font: inherit; text-decoration: underline dotted; }
.merge-card { display: flex; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; cursor: pointer; }
.merge-card:has(input:checked) { border-color: var(--accent); }
.merge-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }

/* ---------- Partager ---------- */
.share-card { width: 680px; }
.share-kind { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.share-preview { width: 100%; border-radius: 8px; border: 1px solid var(--border); display: block; margin-bottom: 10px; }
.share-url { display: flex; gap: 6px; } .share-url input { flex: 1; }
.share-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* ---------- Qui paie ? ---------- */
.qp-lead { font-size: 15px; }
.qp-wrap { overflow-x: auto; margin: 12px 0; -webkit-overflow-scrolling: touch; }
.qp { border-collapse: separate; border-spacing: 3px; min-width: 640px; font-size: 13px; }
.qp th { font-weight: 600; text-align: left; white-space: nowrap; padding: 4px 8px; }
.qp thead th { text-align: center; font-size: 18px; } .qp thead th span { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.qp td { padding: 0; }
.qp-cell { width: 100%; min-width: 64px; height: 34px; border: 1px solid transparent; border-radius: 6px; color: var(--text); cursor: pointer; font: inherit; font-weight: 600; background: var(--panel-2); }
.qp-cell.sel, .qp-cell:hover { border-color: var(--accent); }
.qp-all { background: var(--panel-2); }
.qp-empty { background: transparent; }
.qp-list { max-width: 900px; }

/* Sur téléphone, la barre d'onglets défile au lieu d'élargir la page */
@media (max-width: 900px) {
  .topbar-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  .views { max-width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .views::-webkit-scrollbar { display: none; }
  .view-btn { flex: 0 0 auto; }
}

/* ---------- Carte au doigt ---------- */
#graph { touch-action: none; }
.node-grabbed .node-rect { stroke-width: 3; filter: drop-shadow(0 4px 12px rgba(0,0,0,.5)); }

/* ---------- Archivage des sources ---------- */
.arch { font-size: 12px; color: var(--muted); margin-left: 6px; white-space: nowrap; }
.archive-box { margin-top: 20px; }
.arch-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; max-width: 420px; }
.arch-bar div { height: 100%; background: var(--ok); }

/* ---------- Conséquences à valider ---------- */
.imp-ia { color: var(--cause); font-style: italic; }
.rv-card .imp { align-items: flex-start; }
.rv-card .imp-body { flex: 1; }
.rv-btns { display: flex; gap: 4px; flex: 0 0 auto; }
.rv-ok { opacity: .6; }
.rv-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.rv-desc { margin: 6px 0; font-size: 13px; }

.list-more { grid-column: 1 / -1; justify-self: center; }

/* Sur grand écran, rien ne passe à la ligne : les onglets réservés aux éditeurs apparaissent
   après la connexion, et faisaient sauter toute la page ; la barre d'onglets défile plutôt. */
@media (min-width: 901px) {
  .topbar-actions { flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; justify-content: flex-end; }
  .views { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .view-btn { flex: 0 0 auto; }
  .who, .io, .theme-filter { flex: 0 0 auto; }
}
@media (min-width: 901px) and (max-width: 1350px) {
  .view-btn { padding: 8px 9px; }
  .who { min-width: 0; } .who-role, .who-name { display: none; }
  .io .btn { padding-left: 10px; padding-right: 10px; }
}

/* Mouvements réduits : pas d'animations ni de transitions pour qui les a désactivées */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}
/* Au doigt : des cibles d'au moins 44 px */
@media (pointer: coarse) {
  .btn, .view-btn, .icon-btn, select, input[type=search], input[type=text], input[type=url] { min-height: 44px; }
  .btn.small { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }
  label.checkbox { min-height: 44px; }
}

/* ---------- Téléphone : la carte d'abord ----------
   En-tête et barres d'outils prenaient les deux tiers du premier écran, et la carte
   n'avait plus que quelques centimètres. On compacte : une ligne pour la marque et le
   compte, une ligne d'onglets qui défile, une ligne d'outils qui défile. */
@media (max-width: 600px) {
  .topbar { padding: 6px 10px; gap: 6px; }
  .tagline, .who-name, .who-role, .theme-filter { display: none; }
  .brand h1 { font-size: 18px; } .logo { font-size: 20px; }
  .topbar-actions { gap: 6px; width: 100%; }
  .views { order: 3; width: 100%; }
  .io { margin-left: auto; }
  .io .btn { padding: 4px 10px; font-size: 12px; min-height: 36px; }
  .graph-toolbar { flex-wrap: nowrap; overflow-x: auto; padding: 6px 10px; gap: 6px; scrollbar-width: none; }
  .graph-toolbar::-webkit-scrollbar { display: none; }
  .graph-toolbar .btn, .link-mode-box .btn { flex: 0 0 auto; white-space: nowrap; }
  .link-mode-box { display: contents; }
  .graph-toolbar .spacer, #linkHint:empty { display: none; }
  .graph-nav { padding-top: 6px; padding-bottom: 6px; gap: 6px; }
  .graph-nav .legend, #graphStats { display: none; }
  .graph-wrap { min-height: 62vh; }
}

/* ---------- Relecture rapide ---------- */
.quick-review { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.qr-top { display: flex; align-items: center; gap: 12px; }
.qr-top .qr-stop { margin-left: auto; }
.qr-count { font-weight: 700; font-size: 15px; }
.qr-claim { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.qr-claim h3 { margin: 4px 0 8px; font-size: 16px; }
.qr-desc { font-size: 13px; line-height: 1.5; color: var(--text); margin: 0 0 8px; max-height: 40vh; overflow: auto; }
.qr-src { font-size: 12px; margin: 0; padding-left: 18px; }
.qr-impact { border: 2px solid var(--cause); border-radius: 10px; padding: 14px 16px; background: var(--bg-2); }
.qr-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.qr-text { font-size: 16px; line-height: 1.45; margin-bottom: 6px; }
.qr-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-actions kbd { font: inherit; font-size: 11px; opacity: .75; border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.qr-bilan { color: var(--ok); font-weight: 600; }

.usage-alert { color: var(--danger); font-weight: 600; font-size: 12px; }
.usage-bar.warn span { background: var(--danger); }

.offsite { font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.offsite.warn { color: var(--danger); }