/* =========================================================================
   Cartographie interactive de métadonnées — feuille de style
   Palette et agencement repris des maquettes (design/).
   ========================================================================= */
:root{
  --ink:#23201C; --paper:#F7F4EE; --line:#E0DBD0; --panel:#FBF9F4;
  --panel2:#F4F1EA; --muted:#8A857B;
  --green:#1D8A68; --amber:#C07A1A; --sel:#B8453F; --blue:#3B6FA8;
  --violet:#7B5BD6;
  --role-node:#1D8A68; --role-edge:#B8453F; --role-attr:#3B6FA8; --role-off:#B5B0A6;
  --rail-w:272px; --detail-w:320px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Georgia,'Times New Roman',serif;background:var(--paper);color:var(--ink);
  overflow:hidden}
button{font-family:inherit;cursor:pointer}
.sans{font-family:system-ui,Arial,sans-serif}
.hidden{display:none !important}

/* ----------------------------------------------------------------- Upload */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,#fff 0%,var(--paper) 70%);z-index:50}
.dropcard{width:540px;max-width:92vw;background:var(--panel);border:1px solid var(--line);
  border-radius:18px;padding:38px 40px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.06)}
.dropcard .logo{width:44px;height:44px;border-radius:50%;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--green),var(--amber))}
.dropcard h1{font-size:23px;margin-bottom:6px}
.dropcard p{font-size:13.5px;color:var(--muted);font-family:system-ui,Arial,sans-serif;margin-bottom:22px}
.dropzone{display:block;cursor:pointer;border:2px dashed var(--line);border-radius:14px;
  padding:34px 20px;background:#fff;transition:border-color .15s,background .15s}
.dropzone.drag{border-color:var(--green);background:#F2F8F5}
.dropzone .big{font-size:15px;margin-bottom:6px}
.dropzone .small{font-size:12px;color:var(--muted);font-family:system-ui,Arial,sans-serif}
.btn{border:1px solid var(--line);background:#fff;border-radius:9px;padding:9px 16px;
  font-size:13px;color:var(--ink)}
.btn:hover{background:var(--panel2)}
.btn.primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.primary:hover{background:#000}
.btn.accent{background:var(--green);color:#fff;border-color:var(--green)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row-btns{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.err{color:var(--sel);font-size:12.5px;font-family:system-ui,Arial,sans-serif;margin-top:14px;min-height:16px}

/* ------------------------------------------------------------ Rôles modal */
.overlay{position:fixed;inset:0;background:rgba(35,32,28,.42);z-index:60;
  display:flex;align-items:flex-start;justify-content:center;overflow:auto;padding:28px 16px}
.modal{width:920px;max-width:96vw;background:var(--paper);border:1px solid var(--line);
  border-radius:16px;padding:26px 28px;box-shadow:0 10px 50px rgba(0,0,0,.18)}
.modal h2{font-size:21px;margin-bottom:3px}
.modal .sub{font-size:13px;color:var(--muted);font-style:italic;margin-bottom:18px;
  font-family:system-ui,Arial,sans-serif}
.legend{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap;font-family:system-ui,Arial,sans-serif;font-size:12px}
.legend span{display:flex;align-items:center;gap:6px}
.chip{width:12px;height:12px;border-radius:4px;flex:none}
.roles-table{width:100%;border-collapse:separate;border-spacing:0 8px}
.roles-table th{text-align:left;font-family:system-ui,Arial,sans-serif;font-size:10px;
  text-transform:uppercase;letter-spacing:1px;color:var(--muted);padding:0 12px 4px}
.rrow td{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:11px 12px;vertical-align:middle}
.rrow td:first-child{border-left:1px solid var(--line);border-radius:10px 0 0 10px}
.rrow td:last-child{border-right:1px solid var(--line);border-radius:0 10px 10px 0}
.col-name{font-size:15px;font-weight:bold}
.col-sample{font-size:11px;color:var(--muted);font-family:system-ui,Arial,sans-serif;margin-top:2px}
.uniq{font-family:system-ui,Arial,sans-serif;font-size:11.5px;color:var(--muted);white-space:nowrap}
.uniq .bar{display:inline-block;width:56px;height:5px;border-radius:3px;background:var(--line);
  vertical-align:middle;margin-left:7px;overflow:hidden}
.uniq .bar i{display:block;height:100%;background:var(--amber)}
.roles{display:flex;gap:5px;justify-content:flex-end}
/* case « Carte » de la modale (présence sur la carte, indépendante du rôle) */
.card-cell{text-align:center;vertical-align:middle}
.card-cell input{cursor:pointer;width:16px;height:16px;accent-color:var(--sel)}
.card-cell.disabled{opacity:.28}
.card-cell.disabled input{cursor:not-allowed}
.role{padding:6px 12px;border-radius:8px;font-family:system-ui,Arial,sans-serif;font-size:12px;
  border:1.5px solid var(--line);background:#fff;color:var(--role-off);white-space:nowrap}
.role:hover{border-color:var(--muted)}
.role.node.on{background:var(--role-node);border-color:var(--role-node);color:#fff}
.role.edge.on{background:var(--role-edge);border-color:var(--role-edge);color:#fff}
.role.attribute.on{background:var(--role-attr);border-color:var(--role-attr);color:#fff}
.role.ignore.on{background:#EFEDE7;border-color:var(--line);color:var(--muted)}
.hintbar{margin-top:6px;background:var(--panel);border:1px solid var(--line);border-radius:11px;
  padding:13px 16px;font-size:12.5px;font-family:system-ui,Arial,sans-serif;line-height:1.5}
.hintbar b.n{color:var(--role-node)} .hintbar b.e{color:var(--role-edge)} .hintbar b.a{color:var(--role-attr)}
.unit-field{margin-top:14px;font-family:system-ui,Arial,sans-serif}
.unit-head{display:flex;flex-direction:column;gap:3px;margin-bottom:9px}
.unit-head label{font-weight:bold;color:var(--ink);font-size:13px}
.unit-help{color:var(--muted);font-style:italic;font-size:12px;line-height:1.45}
.unit-inputs{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.unit-inputs input{width:170px;border:1.5px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:13px;color:var(--ink);background:#fff}
.unit-inputs select{border:1.5px solid var(--line);border-radius:8px;
  padding:7px 10px;font-size:13px;color:var(--ink);background:#fff;max-width:320px}
.unit-inputs input:focus,.unit-inputs select:focus{outline:none;border-color:var(--green)}
.unit-preview{color:var(--muted);font-size:12px;font-style:italic}
.modal-actions{margin-top:18px;display:flex;justify-content:space-between;align-items:center;gap:10px}

/* --------------------------------------------------------------- App 3 zones */
.app{display:flex;height:100vh;position:relative}
.rail{width:var(--rail-w);flex:none;background:var(--panel);border-right:1px solid var(--line);
  padding:18px 18px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.brand{font-size:15px;font-weight:bold;display:flex;align-items:center;gap:9px}
.brand .dot{width:11px;height:11px;border-radius:50%;flex:none;
  background:linear-gradient(135deg,var(--green),var(--amber))}
.brand small{display:block;font-size:10.5px;color:var(--muted);font-weight:normal;
  font-family:system-ui,Arial,sans-serif;margin-top:2px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search input{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:#fff;font-family:inherit;font-size:13px;color:var(--ink)}
.side-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;
  font-family:system-ui,Arial,sans-serif;font-size:12.5px;color:var(--ink);cursor:pointer}
.side-btn:hover{background:var(--panel2);border-color:var(--green);color:var(--green)}
.side-btn span{font-size:14px;line-height:1}
.grp-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);
  font-family:system-ui,Arial,sans-serif;font-weight:bold;margin-bottom:8px;display:flex;
  justify-content:space-between;align-items:center}
.grp-label a{font-size:10px;color:var(--green);text-decoration:none;cursor:pointer;letter-spacing:0;text-transform:none}
.pivot button{display:block;width:100%;text-align:left;padding:8px 11px;border:1px solid transparent;
  border-radius:8px;background:transparent;font-family:inherit;font-size:13px;color:var(--ink);margin-bottom:4px}
.pivot button:hover{background:#fff}
.pivot button.on{background:#fff;border-color:var(--line);font-weight:bold}
.pivot .pin{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--line);
  margin-right:8px;vertical-align:middle}
.pivot button.on .pin{background:var(--sel)}
.layer{display:flex;align-items:center;gap:9px;padding:5px 4px;font-size:13px;user-select:none;cursor:pointer}
.layer .tog{width:34px;height:19px;border-radius:11px;background:var(--green);position:relative;flex:none;transition:background .15s}
.layer.off .tog{background:var(--line)}
.layer .tog::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:2px;left:17px;transition:left .15s}
.layer.off .tog::after{left:2px}
.layer .sw{width:10px;height:10px;border-radius:3px;flex:none}
.layer .ct{margin-left:auto;font-size:11px;color:var(--muted);font-family:system-ui,Arial,sans-serif}
/* Couches à 3 états (affiché / relie / masqué) — clic pour cycler */
.layer3{display:flex;align-items:center;gap:9px;padding:6px 8px;margin-bottom:3px;font-size:13px;
  user-select:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;background:#fff}
.layer3 .sw{width:10px;height:10px;border-radius:3px;flex:none}
.layer3 .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer3 .st{font-size:10px;text-transform:uppercase;letter-spacing:.5px;font-family:system-ui,Arial,sans-serif;
  padding:2px 7px;border-radius:9px;flex:none}
.layer3 .ct{font-size:11px;color:var(--muted);font-family:system-ui,Arial,sans-serif;flex:none}
.layer3.shown .st{background:var(--green);color:#fff}
.layer3.connector{border-style:dashed}
.layer3.connector .st{background:var(--amber);color:#fff}
.layer3.connector .nm{font-style:italic}
.layer3.off{opacity:.5}
.layer3.off .sw{filter:grayscale(1)}
.layer3.off .st{background:var(--panel2);color:var(--muted)}
/* Colonne non activable (trop de valeurs) : présente mais inerte */
.layer3.disabled{opacity:.45;cursor:not-allowed}
.layer3.disabled .st{background:var(--panel2);color:var(--muted)}
/* Colonne quasi-unique : signaler (en nœud = points isolés) */
.layer3.warn .nm{color:var(--sel)}
.adv{border-top:1px solid var(--line);padding-top:6px}
.adv-toggle{font-size:12.5px;color:var(--muted);font-style:italic;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;padding:6px 0}
.adv-toggle .caret{transition:transform .15s}
.adv.open .adv-toggle .caret{transform:rotate(90deg)}
.adv-body{display:none;padding-top:6px}
.adv.open .adv-body{display:block}
.ctrl{margin-top:12px}
.ctrl label{font-size:11px;color:var(--muted);display:block;margin-bottom:5px;font-family:system-ui,Arial,sans-serif}
.seg{display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.seg span{flex:1;padding:6px 4px;background:#fff;text-align:center;font-size:11px;color:var(--muted);
  font-family:system-ui,Arial,sans-serif}
.seg span.on{background:var(--ink);color:#fff}
.ctrl select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:7px;background:#fff;
  color:var(--ink);font-family:inherit;font-size:12px}
.card-fields{display:flex;flex-direction:column;gap:5px;max-height:160px;overflow:auto;
  border:1px solid var(--line);border-radius:7px;padding:8px 9px;background:#fff}
.cf{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink);
  font-family:system-ui,Arial,sans-serif;cursor:pointer}
.cf input{margin:0;cursor:pointer}
.card-fields.inactive{opacity:.4;pointer-events:none}
.cf-note{display:none;font-size:11px;color:var(--muted);font-style:italic;margin-top:5px;
  font-family:system-ui,Arial,sans-serif}
.cf-note.show{display:block}

/* canvas */
.canvas{flex:1;position:relative;min-width:0;display:flex;flex-direction:column;
  background:radial-gradient(circle at 45% 42%,#fff 0%,var(--paper) 75%)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 18px;border-bottom:1px solid var(--line);background:rgba(251,249,244,.7)}
.timewrap{font-size:12px;color:var(--muted);font-family:system-ui,Arial,sans-serif;
  display:flex;align-items:center;gap:9px;flex-wrap:nowrap}
.timewrap b{color:var(--ink);min-width:30px;text-align:center}
.tl-play{width:28px;height:28px;flex:none;border:1px solid var(--line);border-radius:50%;
  background:#fff;color:var(--ink);font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center}
.tl-play:hover{border-color:var(--sel);color:var(--sel)}
.tl-play.playing{background:var(--sel);color:#fff;border-color:var(--sel)}
.tl-speed{border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted);
  font-family:inherit;font-size:11px;padding:4px 5px}
/* Frise : histogramme + poignées superposées */
.tl{position:relative;width:240px;height:40px;flex:none;cursor:crosshair}
#tl-hist{position:absolute;left:0;top:0;width:100%;height:32px;display:block}
.tl-window{position:absolute;top:0;height:32px;background:rgba(184,69,63,.12);
  border-left:1.5px solid var(--sel);border-right:1.5px solid var(--sel);pointer-events:none}
.tl input[type=range]{position:absolute;left:0;bottom:0;width:100%;height:14px;margin:0;
  background:none;pointer-events:none;-webkit-appearance:none;accent-color:var(--sel)}
.tl input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;
  width:13px;height:13px;border-radius:50%;background:var(--sel);cursor:grab;border:2px solid #fff;box-shadow:0 0 2px rgba(0,0,0,.3)}
.tl input[type=range]::-moz-range-thumb{pointer-events:auto;width:13px;height:13px;border-radius:50%;
  background:var(--sel);cursor:grab;border:2px solid #fff}
.tl.window-mode #yr-max{display:none}
.modepick{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  font-family:system-ui,Arial,sans-serif;font-size:11px}
.modepick span{padding:6px 10px;background:#fff;color:var(--muted);border-right:1px solid var(--line)}
.modepick span:last-child{border-right:none}
.modepick span.on{background:var(--ink);color:#fff}
.actions{display:flex;align-items:center;gap:8px}
.actions .btn{padding:7px 13px;font-size:12.5px}
#net{flex:1;position:relative;min-height:0}
#sigma{position:absolute;inset:0}
#cards{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hint{text-align:center;font-family:system-ui,Arial,sans-serif;font-size:11.5px;color:var(--muted);
  padding:6px;border-top:1px solid var(--line)}
.statusline{position:absolute;left:14px;bottom:40px;font-family:system-ui,Arial,sans-serif;
  font-size:11px;color:var(--muted);background:rgba(251,249,244,.8);padding:5px 9px;border-radius:7px;
  border:1px solid var(--line);pointer-events:none}
/* légende du dégradé par époque */
.epoch-legend{position:absolute;right:16px;bottom:14px;display:flex;align-items:center;gap:8px;
  background:rgba(251,249,244,.92);border:1px solid var(--line);border-radius:9px;padding:7px 11px;
  font-family:system-ui,Arial,sans-serif;font-size:11px;color:var(--muted);pointer-events:none}
.epoch-legend .el-bar{width:120px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,#3B6FA8,#9C8E5A,#C07A1A)}
.epoch-legend .el-lab{color:var(--ink);font-weight:bold}
.epoch-legend .el-cap{margin-left:4px;font-style:italic}
/* axe des années (réseau temporel) */
.time-axis{position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;
  font-family:system-ui,Arial,sans-serif;font-size:10px;color:var(--muted)}
.time-axis .tick{position:absolute;bottom:4px;transform:translateX(-50%);text-align:center}
.time-axis .tick::before{content:"";position:absolute;left:50%;bottom:13px;width:1px;height:7px;
  background:var(--line)}
.time-axis .axis-line{position:absolute;left:0;right:0;bottom:17px;height:1px;background:var(--line)}
/* axes porteurs de sens (disposition « axes ») : graduations X (bas) et Y (gauche) */
.axis-decor{position:absolute;pointer-events:none;z-index:3;
  font-family:system-ui,Arial,sans-serif;font-size:10px;color:var(--muted)}
.axis-decor-x{left:0;right:0;bottom:0;height:22px}
.axis-decor-x .tick{position:absolute;bottom:3px;transform:translateX(-50%);text-align:center;white-space:nowrap}
.axis-decor-x .tick::before{content:"";position:absolute;left:50%;bottom:12px;width:1px;height:6px;background:var(--line)}
.axis-decor-y{left:0;top:0;bottom:0;width:88px}
.axis-decor-y .tick{position:absolute;left:6px;transform:translateY(-50%);white-space:nowrap;
  max-width:80px;overflow:hidden;text-overflow:ellipsis}
.axis-decor-y .tick::before{content:"";position:absolute;left:-5px;top:50%;width:6px;height:1px;background:var(--line)}
.axis-decor .axis-cap{position:absolute;font-style:italic;font-weight:600;color:var(--ink)}
.axis-decor-x .axis-cap{right:8px;bottom:6px}
.axis-decor-y .axis-cap{left:6px;top:6px}
/* cases à cocher (réglages de force) */
.chk{display:flex;align-items:center;gap:6px;cursor:pointer;margin:3px 0;
  font-family:system-ui,Arial,sans-serif;font-size:12.5px;color:var(--ink)}
.chk input{cursor:pointer;accent-color:var(--sel)}
/* barre de focalisation (mode ego) : superposée en haut du canvas */
/* centrée dans la zone À GAUCHE du panneau de détail (toujours ouvert en focalisation),
   pour ne pas passer dessous (le panneau est superposé à droite) */
.focus-bar{position:absolute;top:10px;left:calc((100% - var(--detail-w)) / 2);transform:translateX(-50%);z-index:15;
  display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:6px 12px;box-shadow:0 3px 14px rgba(0,0,0,.12);
  font-family:system-ui,Arial,sans-serif;font-size:12.5px;color:var(--ink)}
.focus-bar .fb-lab b{color:var(--sel)}
.focus-bar .fb-depth{display:flex;align-items:center;gap:6px;color:var(--muted)}
.focus-bar .fb-depth input{width:80px;accent-color:var(--sel)}
.focus-bar .fb-btn{border:1px solid var(--line);background:#fff;border-radius:7px;
  padding:4px 10px;font-size:12px;color:var(--ink);cursor:pointer}
.focus-bar .fb-btn:hover{background:var(--panel2)}
/* bouton « Focaliser » dans la fiche de nœud */
.focus-btn{width:100%;margin-bottom:10px;border:1px solid var(--sel);background:#fff;color:var(--sel);
  border-radius:8px;padding:7px;font-size:12.5px;font-family:system-ui,Arial,sans-serif;
  font-weight:bold;cursor:pointer}
.focus-btn:hover{background:var(--sel);color:#fff}

/* tooltip */
#tooltip{position:absolute;z-index:30;pointer-events:none;background:var(--ink);color:#fff;
  font-family:system-ui,Arial,sans-serif;font-size:11.5px;padding:5px 9px;border-radius:7px;
  white-space:nowrap;transform:translate(-50%,-140%);opacity:0;transition:opacity .1s}
#tooltip .t2{opacity:.7;font-size:10px}

/* node-cards (overlay HTML) */
.ncard{position:absolute;pointer-events:auto;background:#fff;border:1px solid var(--line);
  border-radius:9px;min-width:130px;max-width:230px;box-shadow:0 3px 12px rgba(0,0,0,.1);
  transform:translate(-50%,-50%);font-family:system-ui,Arial,sans-serif;overflow:hidden}
.ncard .band{height:7px}
.ncard .body{padding:7px 10px 9px}
.ncard .t{font-size:11.5px;font-weight:bold;line-height:1.2}
.ncard .s{font-size:10px;color:var(--muted);margin-top:5px;line-height:1.4}
/* carte « riche » : une ligne par champ — pastille de type · LIBELLÉ · valeur */
.ncard .s .cl{display:flex;align-items:center;gap:5px;margin:2px 0}
.ncard .s .cl-dot{width:7px;height:7px;border-radius:50%;flex:none}
.ncard .s .cl-dot-attr{background:transparent;border:1.5px solid var(--line)}
.ncard .s .ck{font-size:8px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);
  font-weight:bold;flex:none;min-width:46px}
.ncard .s .cv{font-size:10.5px;color:var(--ink);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncard .s .cl-sub{margin-bottom:4px}
.ncard .s .cl-sub .cv{color:var(--muted);font-style:italic}
.ncard .pin-btn{position:absolute;top:3px;right:4px;font-size:11px;color:var(--muted);
  cursor:pointer;line-height:1;opacity:.6}
.ncard.pinned .pin-btn{opacity:1;color:var(--sel)}

/* detail panel — superposé (overlay) : ne réserve PAS de largeur quand il est
   fermé, sinon le canvas serait rétréci en permanence (bande morte à droite).
   Il glisse par-dessus le bord droit du canvas à l'ouverture. */
.detail{position:absolute;right:0;top:0;bottom:0;width:var(--detail-w);z-index:20;
  background:var(--panel);border-left:1px solid var(--line);box-shadow:-4px 0 16px rgba(0,0,0,.06);
  overflow-y:auto;transform:translateX(100%);transition:transform .22s ease}
.detail.open{transform:translateX(0)}
.dhead{color:#fff;padding:18px 20px;position:relative}
.dhead h2{font-size:19px;line-height:1.15}
.dhead p{font-size:11.5px;opacity:.9;font-style:italic;margin-top:3px;font-family:system-ui,Arial,sans-serif}
.dclose{position:absolute;top:14px;right:16px;color:#fff;opacity:.8;font-size:17px;background:none;border:none}
.dbody{padding:16px 20px}
.stat{margin-bottom:14px}
.stat .k{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);
  font-family:system-ui,Arial,sans-serif;font-weight:bold}
.stat .v{font-size:13.5px;margin-top:2px}
.dtag{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:2px 9px;font-size:11px;font-family:system-ui,Arial,sans-serif;margin:3px 4px 0 0}
.work{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 11px;margin-bottom:7px}
.work .t{font-size:12.5px;font-weight:bold}
.work .s{font-size:10.5px;color:var(--muted);font-family:system-ui,Arial,sans-serif;margin-top:2px}

/* export modal */
.modal.export-modal{width:560px}
.exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px;margin:6px 0 4px}
.exp-extra{border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.exp-extra .grp-label{margin-bottom:10px}
.exp-extra .btn{margin:0 6px 8px 0}

/* instantanés (petits multiples) */
.modal.snapshots-modal{width:min(1100px,94vw)}
.snap-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.snap-bar{display:flex;align-items:center;gap:12px;margin:14px 0;padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.snap-bar select{font-family:system-ui,Arial,sans-serif;font-size:12px;padding:6px 9px;border-radius:7px;border:1px solid var(--line);background:#fff}
.snap-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;
  max-height:64vh;overflow:auto}
.snap-cell{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.snap-cell .cap{display:flex;justify-content:space-between;align-items:baseline;
  padding:8px 11px;border-bottom:1px solid var(--line);font-family:system-ui,Arial,sans-serif}
.snap-cell .cap .per{font-size:12.5px;font-weight:bold;color:var(--ink)}
.snap-cell .cap .cnt{font-size:10.5px;color:var(--muted)}
.snap-cell svg{display:block;width:100%;height:auto;background:radial-gradient(circle at 50% 45%,#fff,#FBF9F4)}

/* chronologie */
.modal.chrono-modal{width:min(1100px,95vw)}
.chrono-scroll{max-height:68vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px}
.chrono-scroll svg{display:block;width:100%;height:auto}
.chrono-row-bg:hover{fill:#F4F1EA}
.chrono-dot{cursor:pointer}
.chrono-dot:hover{stroke:var(--ink);stroke-width:1.5}
.chrono-lbl{font-family:system-ui,Arial,sans-serif;font-size:11px;fill:var(--ink)}
.chrono-axis{font-family:system-ui,Arial,sans-serif;font-size:10px;fill:var(--muted)}
.chrono-life{stroke:#CFC9BD;stroke-width:1.4}
.chrono-grid{stroke:#EFEDE7;stroke-width:1}
.chrono-leg{font-family:system-ui,Arial,sans-serif;font-size:11px;fill:var(--ink)}

/* spinner */
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
  border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}