/* ════════════════════════════════════════════════════════════════
   GÉOPOL v2 — THÈME
   Palette papier / éditoriale reprise de l'app actuelle (identité forte
   à conserver) + ajout d'une famille d'affichage (Fraunces) pour les titres.
═════════════════════════════════════════════════════════════════ */
:root {
  /* Hauteurs des barres fixes (sticky) — centralisées pour un empilement cohérent.
     Tout top: sticky se cale dessus via calc(), pour qu'aucune barre ne se chevauche. */
  --h-header:  50px;   /* bandeau onglets + outils */
  --h-context: 48px;   /* barre Sujet + temps (logée la frise) */
  --h-topbars: 98px;   /* = header + context : base des barres de 2e niveau et volets */
  --bg:       #f7f5f0;
  --bg2:      #ffffff;
  --bg3:      #f0ede6;
  --bg4:      #e8e4db;
  --bg5:      #ddd9cf;
  --border:   #d8d3c8;
  --border2:  #b8b2a4;
  --text:     #1a1c22;
  --text2:    #4a4e5c;
  --text3:    #888070;
  --green:    #0a6e4a;
  --green-d:  rgba(10,110,74,.07);
  --green-b:  rgba(10,110,74,.2);
  --orange:   #b45309;
  --orange-d: rgba(180,83,9,.07);
  --orange-b: rgba(180,83,9,.2);
  --red:      #b91c1c;
  --red-d:    rgba(185,28,28,.07);
  --red-b:    rgba(185,28,28,.2);
  --blue:     #1d4ed8;
  --blue-d:   rgba(29,78,216,.07);
  --blue-b:   rgba(29,78,216,.2);
  --terra:    #c2410c;
  --terra-d:  rgba(194,65,12,.08);
  --terra-b:  rgba(194,65,12,.25);
  --mono:     'IBM Plex Mono', monospace;
  --sans:     'IBM Plex Sans', sans-serif;
  --display:  'Fraunces', Georgia, serif;
  --shadow:   0 1px 2px rgba(26,28,34,.04), 0 4px 16px rgba(26,28,34,.05);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  /* texture grain très subtile pour l'atmosphère papier */
  background-image: radial-gradient(var(--bg4) 0.5px, transparent 0.5px);
  background-size: 22px 22px;
}

/* ── App shell ───────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Header ──────────────────────────────────────────────────── */
header {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  min-height: 50px; flex-shrink: 0;
  position: sticky; top: 0; z-index: 50;
}
.header-vars { display: inline-flex; align-items: center; gap: 10px; padding-left: 6px; }
#contextBar {
  position: sticky; top: var(--h-header); z-index: 46;
  display: flex; align-items: center; gap: 10px;
  height: var(--h-context); box-sizing: border-box;
  padding: 0 18px; background: var(--bg2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; overflow-y: hidden;
}
.facette-pane { display: none; }
.facette-pane.active { display: block; }
.ctx-facettes { margin-left: auto; display: inline-flex; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; }
.facette-btn { border: none; background: transparent; color: var(--text2); font-family: var(--display); font-size: 12.5px; font-weight: 600;
  padding: 4px 14px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.facette-btn.on { background: var(--green); color: #fff; }
.facette-btn:not(.on):hover { color: var(--text); background: var(--bg2); }
.analyse-finalite { font-size: 12px; color: var(--text3); padding: 4px 4px 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.finalite-txt { flex: 1; min-width: 200px; }
.passerelles { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.passerelle-btn { border: 1px solid var(--border); background: var(--bg2); color: var(--green);
  font-family: var(--display); font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.passerelle-btn:hover { background: var(--green); color: #fff; border-color: var(--green); }
.logo {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: .22em; color: var(--green);
  display: flex; align-items: center; gap: 10px;
}
.logo-mark {
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--green), #064e34);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,.2);
}
.logo-sub {
  font-size: 9px; font-weight: 400; letter-spacing: .15em;
  color: var(--text3); text-transform: uppercase; font-family: var(--mono);
}

/* ── Onglets (Synthèse / Puissance / Relations) ──────────────── */
.tabs { display: flex; gap: 2px; margin-left: 8px; height: 100%; }
.tab {
  display: flex; align-items: center; padding: 0 16px;
  font-size: 12px; font-weight: 500; color: var(--text3);
  cursor: pointer; border-bottom: 2px solid transparent;
  letter-spacing: .02em; transition: color .15s, border-color .15s;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: var(--sans);
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--green); border-bottom-color: var(--green); font-weight: 600; }

.header-spacer { flex: 1; }

/* ── Bouton générique header ─────────────────────────────────── */
.hbtn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; font-size: 11px; font-family: var(--mono);
  color: var(--text2); background: var(--bg2);
  border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; transition: all .15s;
}
.hbtn:hover { border-color: var(--border2); color: var(--text); }
.hbtn .kbd {
  font-size: 9px; padding: 1px 4px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--border);
  border-bottom-width: 2px;
}

/* ── Badge DB ────────────────────────────────────────────────── */
.db-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 10px; color: var(--text3);
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 6px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text3); }
.dot.ok { background: var(--green); box-shadow: 0 0 0 3px var(--green-d); }
.dot.loading { background: var(--orange); animation: pulse 1.2s ease-in-out infinite; }
.dot.error { background: var(--red); }
.dot.demo { background: var(--blue); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Variables globales (sujet + année), désormais dans le header ── */
.ctx-label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
  color: var(--text3); text-transform: uppercase;
}
#demoBanner {
  background: #b45309; color: #fff;
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-align: center; padding: 6px 12px;
  border-bottom: 1px solid #92400e;
}
.legend-nodata { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 10px; color: var(--text3); }
.state-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.15); border-radius: 2px; }
.hatch-uncov { display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(0,0,0,.15); border-radius: 2px;
  background-image: repeating-linear-gradient(45deg, #f2efe8 0 2px, #c4bba8 2px 3px); }
.frise-wrap { display: inline-flex; align-items: center; gap: 10px; }
.frise { display: inline-flex; gap: 3px; align-items: flex-end; }
.frise-cell { width: 24px; height: 30px; border-radius: 4px; background: var(--bg3); display: flex; align-items: flex-end; justify-content: center;
  cursor: pointer; position: relative; transition: background .1s; border: 1px solid transparent; }
.frise-cell .frise-yr { font-family: var(--mono); font-size: 9px; color: var(--text2); padding-bottom: 3px; pointer-events: none; }
.frise-cell:hover:not(.empty) { background: var(--green-d); border-color: var(--green); }
.frise-cell.sel { background: var(--green); }
.frise-cell.sel .frise-yr { color: #fff; }
.frise-cell.anchor { outline: 2px solid var(--green); outline-offset: 1px; }
.frise-cell.empty { cursor: default; background: var(--bg2); opacity: .5; }
.frise-cell.empty .frise-yr { color: var(--text3); opacity: .6; }
.frise-label { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--text); min-width: 78px; }
.hatch-swatch { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--border2); border-radius: 2px;
  background-image: repeating-linear-gradient(45deg, #e9ecef 0 2px, #b9c2cc 2px 3px); }
.subject-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 20px;
  background: var(--green-d); border: 1px solid var(--green-b);
  color: var(--green); font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.subject-chip:hover { background: var(--green-b); }
.subject-chip .flag { font-size: 15px; }
.subject-chip.empty { background: var(--bg3); border-color: var(--border); color: var(--text3); font-style: italic; }
.subject-chip.empty.world { background: rgba(10,110,74,.08); border-color: var(--green); color: var(--green); font-style: normal; font-weight: 600; }
.subject-chip .x { opacity: .5; font-size: 13px; line-height: 1; }
.subject-chip .x:hover { opacity: 1; }

.ctx-sep { width: 1px; height: 18px; background: var(--border); }

/* slider année */
.year-control { display: inline-flex; align-items: center; gap: 9px; }
.year-control input[type=range] { width: 150px; accent-color: var(--green); }
.year-out {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  color: var(--text); min-width: 36px; text-align: right;
}
/* menu déroulant d'année (Puissance / Relations) */
.year-select {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  padding: 4px 26px 4px 10px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="%23666" stroke-width="1.5"/></svg>') no-repeat right 8px center;
  appearance: none; cursor: pointer; color: var(--text);
}
.year-select:hover { border-color: var(--border2); }
.year-select:focus { outline: none; border-color: var(--green); }
.ident-sub-select {
  font-family: var(--sans); font-size: 12px; font-weight: 500; margin-left: 10px;
  padding: 4px 24px 4px 9px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg2) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><path d="M2 4l3 3 3-3" fill="none" stroke="%23666" stroke-width="1.5"/></svg>') no-repeat right 7px center;
  appearance: none; cursor: pointer; color: var(--text); max-width: 160px;
}
.ident-sub-select:hover { border-color: var(--border2); }
.ident-sub-select:focus { outline: none; border-color: var(--green); }

/* ── Zone principale ─────────────────────────────────────────── */
main { flex: 1; padding: 16px 18px 28px; }
.view { display: none; animation: fadeIn .25s ease; }
.view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* placeholder d'onglet (étape 0) */
.placeholder {
  border: 1.5px dashed var(--border2); border-radius: 12px;
  padding: 60px 30px; text-align: center; color: var(--text3);
  background: var(--bg2); max-width: 760px; margin: 30px auto;
}
.placeholder h2 {
  font-family: var(--display); font-size: 26px; font-weight: 500;
  color: var(--text); margin-bottom: 10px; letter-spacing: -.01em;
}
.placeholder .tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--green);
  background: var(--green-d); padding: 4px 10px; border-radius: 20px;
  display: inline-block; margin-bottom: 18px;
}
.placeholder p { font-size: 13px; line-height: 1.7; max-width: 520px; margin: 0 auto 8px; }
.placeholder ul { text-align: left; max-width: 460px; margin: 16px auto 0; font-size: 12.5px; line-height: 1.9; }

/* ── Overlay de chargement ───────────────────────────────────── */
#loadingScreen {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 22px;
  transition: opacity .4s; 
}
#loadingScreen.hidden { opacity: 0; pointer-events: none; }
.load-logo {
  font-family: var(--mono); font-size: 14px; font-weight: 600;
  letter-spacing: .3em; color: var(--green);
}
.load-bar-wrap { width: 240px; height: 3px; background: var(--bg4); border-radius: 2px; overflow: hidden; }
.load-bar { height: 100%; width: 0%; background: var(--green); transition: width .4s ease; border-radius: 2px; }
#loadingMsg { font-family: var(--mono); font-size: 11px; color: var(--text3); }

/* ── Popover de recherche sujet (⌘K minimal pour l'étape 0) ──── */
#searchOverlay {
  position: fixed; inset: 0; z-index: 150; display: none;
  background: rgba(26,28,34,.25); backdrop-filter: blur(2px);
  align-items: flex-start; justify-content: center; padding-top: 12vh;
}
#searchOverlay.open { display: flex; }
.search-box {
  width: min(540px, 92vw); background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 12px;
  box-shadow: 0 18px 50px rgba(26,28,34,.22); overflow: hidden;
}
.search-box input {
  width: 100%; padding: 16px 18px; border: none; outline: none;
  font-family: var(--sans); font-size: 16px; background: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.search-results { max-height: 320px; overflow-y: auto; }
.search-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  cursor: pointer; font-size: 13px; border-bottom: 1px solid var(--bg3);
}
.search-item:hover, .search-item.sel { background: var(--green-d); }
.search-item .flag { font-size: 17px; }
.search-item .iso { font-family: var(--mono); font-size: 10px; color: var(--text3); margin-left: auto; }
.search-item .kind { font-family: var(--mono); font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; }
.search-empty { padding: 22px; text-align: center; color: var(--text3); font-size: 12px; }
/* case à cocher (pays seulement ; les zones se choisissent en 1 clic) */
.search-item .chk {
  width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--border2); display: inline-flex;
  align-items: center; justify-content: center; font-size: 11px;
  color: #fff; background: var(--bg2); transition: all .12s;
}
.search-item.checked .chk { background: var(--green); border-color: var(--green); }
.search-item .chk-spacer { width: 16px; flex-shrink: 0; } /* alignement pour les zones */
.search-hint {
  padding: 8px 18px; font-family: var(--mono); font-size: 9px;
  letter-spacing: .06em; color: var(--text3); text-transform: uppercase;
  background: var(--bg3); border-bottom: 1px solid var(--border);
}
/* bandeau de validation de la sélection multiple */
.search-tray {
  display: none; align-items: center; gap: 10px; padding: 11px 16px;
  border-top: 1px solid var(--border); background: var(--bg3);
}
.search-tray.show { display: flex; }
.search-tray .tray-chips { flex: 1; display: flex; flex-wrap: wrap; gap: 5px; }
.tray-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  background: var(--bg2); border: 1px solid var(--green-b); border-radius: 14px;
  font-size: 11px; color: var(--green);
}
.tray-chip .flag { font-size: 13px; }
.tray-chip .rm { cursor: pointer; opacity: .5; font-size: 12px; }
.tray-chip .rm:hover { opacity: 1; }
.tray-validate {
  padding: 7px 14px; background: var(--green); color: #fff; border: none;
  border-radius: 7px; font-family: var(--sans); font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.tray-validate:hover { background: #064e34; }
/* ════════════════════════════════════════════════════════════════
   ONGLET SYNTHÈSE
═════════════════════════════════════════════════════════════════ */
.syn-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 920px){ .syn-grid { grid-template-columns: 1fr; } }
.card {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.card-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text2); font-weight: 600;
}
.card-sub { font-size: 11px; color: var(--text3); }
.card-body { padding: 6px 16px 14px; }

/* tableau valeurs clés */
.kv-row {
  display: grid; grid-template-columns: 1.4fr auto auto 88px; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--bg3);
  cursor: pointer; transition: background .12s; margin: 0 -8px; padding-left: 8px; padding-right: 8px;
  border-radius: 6px;
}
.kv-row:last-child { border-bottom: none; }
.kv-row:hover { background: var(--green-d); }
.kv-name { font-size: 12.5px; color: var(--text); }
.kv-name .cat { font-family: var(--mono); font-size: 8.5px; color: var(--text3); text-transform: uppercase; letter-spacing: .05em; display: block; margin-top: 1px; }
.kv-val { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--green); text-align: right; }
.kv-val .u { font-size: 9px; color: var(--text3); font-weight: 400; margin-left: 3px; }
.kv-rank { font-family: var(--mono); font-size: 10.5px; color: var(--text3); text-align: right; white-space: nowrap; }
.kv-spark { height: 26px; }
.kv-spark svg { display: block; width: 100%; height: 100%; }
.kv-empty { padding: 30px; text-align: center; color: var(--text3); font-size: 12.5px; line-height: 1.6; }
/* Uniformité des états vides : tons, espacement et ligne cohérents partout. */
.kv-empty, .rel-empty, .cross-tile-empty, .pano-empty,
.cmp-empty-sub, .need-subject p {
  color: var(--text3); line-height: 1.6;
}
.need-subject .big, .cmp-empty-title { font-family: var(--display); font-weight: 600; color: var(--text); }

/* panorama des flux */
.flux-block { margin-bottom: 6px; }
.flux-block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 9px 0 6px; 
}
.flux-block-head .t { font-size: 13px; font-weight: 600; color: var(--text); }
.flux-block-head .h { font-size: 10px; color: var(--text3); }
.pano-row {
  display: grid; grid-template-columns: 92px 1fr 64px 46px; gap: 9px;
  align-items: center; padding: 7px 6px; cursor: pointer; border-radius: 6px;
  border-bottom: 1px solid var(--bg3);
}
.pano-row:last-child { border-bottom: none; }
.pano-row:hover { background: var(--bg3); }
.pano-flux { font-size: 11px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pano-partner { display: flex; align-items: center; gap: 6px; font-size: 12px; min-width: 0; }
.pano-partner .flag { font-size: 14px; flex-shrink: 0; }
.pano-partner .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pano-bar { height: 8px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.pano-fill { height: 100%; border-radius: 3px; transition: width .4s ease; }
.pano-fill.clair    { opacity: .55; }
.pano-fill.moyen    { opacity: .8; }
.pano-fill.intense  { opacity: 1; }
.pano-fill.partner  { background: var(--blue); }
.pano-fill.influence{ background: var(--green); }
.pano-val { font-family: var(--mono); font-size: 11px; font-weight: 600; text-align: right; }
.pano-empty { padding: 16px 6px; color: var(--text3); font-size: 11.5px; font-style: italic; }
/* dépliage top 5 */
.pano-wrap { border-bottom: 1px solid var(--bg3); }
.pano-wrap:last-child { border-bottom: none; }
.pano-row { border-bottom: none; }
.pano-row { grid-template-columns: 86px 1fr 60px 40px 14px; }
.pano-caret { font-size: 9px; color: var(--text3); text-align: center; }
.pano-detail { display: none; padding: 4px 6px 10px 6px; }
.pano-detail.open { display: block; animation: fadeIn .2s ease; }
/* F3 : bandeau dépliable des flux moins saillants */
.pano-replie-wrap { border-top: 1px dashed var(--border); margin-top: 4px; }
.pano-replie-toggle { font-size: 11px; color: var(--text3); cursor: pointer; padding: 7px 6px 4px;
  font-family: var(--mono); letter-spacing: .02em; user-select: none; }
.pano-replie-toggle:hover { color: var(--text2); }
/* ── Organisations (Profil) ── */
.org-card { margin-top: 14px; }
.org-fam { margin-bottom: 11px; }
.org-fam-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--text2); }
.org-fam-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.org-fam-chips { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 15px; }
.org-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 6px; line-height: 1.3; }
.org-chip.org-membre { background: color-mix(in srgb, var(--ohex) 12%, transparent); color: var(--ohex); border: 0.5px solid color-mix(in srgb, var(--ohex) 45%, transparent); font-weight: 500; }
.org-chip.org-partiel { background: transparent; color: var(--ohex); border: 1px dashed color-mix(in srgb, var(--ohex) 60%, transparent); }
.org-chip.org-degrade { background: transparent; color: var(--text3); border: 0.5px solid var(--border2); text-decoration: line-through; }
.org-chip .org-st { opacity: .7; font-size: 10.5px; }
.org-chip .org-univ { font-size: 9.5px; opacity: .6; }
.org-abs { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.org-abs-head { font-size: 12px; color: #b45309; margin-bottom: 7px; display: flex; align-items: center; gap: 6px; font-weight: 600; }
.org-abs-ico { font-size: 13px; }
.org-abs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.org-abs-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 6px;
  background: rgba(220,80,60,.10); color: #b04030; border: 0.5px solid rgba(220,80,60,.45); }
/* ── Organisations Face-à-face (3 colonnes) ── */
.cmp-orga-card { margin-top: 14px; }
.cmp-orga-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cmp-orga-col { border: 0.5px solid var(--border); border-radius: 8px; padding: 9px 10px; min-width: 0; }
.cmp-orga-col.mid { background: var(--bg3); border-color: var(--border2); }
.cmp-orga-col-head { font-size: 11.5px; font-weight: 600; color: var(--text2); margin-bottom: 7px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cmp-orga-col-head .n { font-family: var(--mono); font-size: 11px; color: var(--text3); }
.cmp-orga-col.mid .cmp-orga-col-head { color: var(--green); }
.cmp-orga-col-body { display: flex; flex-wrap: wrap; gap: 5px; }
.cmp-orga-empty { color: var(--text3); font-size: 12px; }
.cmp-orga-diverg { margin-top: 12px; border-top: 1px dashed var(--border); padding-top: 10px; }
.cmp-orga-diverg-head { font-size: 12px; color: #b45309; font-weight: 600; margin-bottom: 7px; }
.cmp-orga-diverg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cmp-orga-diverg-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; padding: 3px 9px; border-radius: 6px;
  background: rgba(220,130,20,.10); color: #b45309; border: 0.5px solid rgba(220,130,20,.40); }
.cmp-orga-diverg-chip .who { opacity: .75; font-size: 10.5px; }
/* Marqueur de co-appartenance (liste) : petit point coloré inline */
.org-comark { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-left: 5px;
  vertical-align: middle; cursor: help; box-shadow: 0 0 0 1px var(--bg) ; }
/* En-tête de catégorie cliquable = jeu d'indicateurs radar */
.cmp-nav-cat-set { cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.cmp-nav-cat-set:hover { color: var(--green); }
.cmp-nav-set-ico { font-size: 11px; opacity: 0; transition: opacity .12s; }
.cmp-nav-cat-set:hover .cmp-nav-set-ico { opacity: .7; }
.dep-seuil-select { font-family: var(--mono); font-size: 10px; color: var(--text3); background: var(--bg3);
  border: 1px solid var(--border); border-radius: 5px; padding: 2px 4px; cursor: pointer; }
.dep-seuil-select:hover { border-color: var(--border2); color: var(--text2); }
.pano-detail-title { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin: 4px 0 6px; }
.pano-sub { display: grid; grid-template-columns: 16px 1fr 80px 36px; gap: 8px; align-items: center; padding: 3px 0; font-size: 11.5px; }
.pano-sub .flag { font-size: 13px; }
.pano-sub .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text2); }
.pano-sub .bar { width: 80px; height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; display: block; }
.pano-sub .fill { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.pano-sub .fill.partner { background: var(--blue); opacity: .7; }
.pano-sub .fill.influence { background: var(--green); opacity: .7; }
.pano-sub .v { font-family: var(--mono); font-size: 10px; text-align: right; color: var(--text2); }
.pano-detail-link { font-size: 10.5px; color: var(--green); cursor: pointer; margin-top: 8px; display: inline-block; font-weight: 500; }
.pano-detail-link:hover { text-decoration: underline; }

/* bloc ressources (Synthèse) */
.res-block { margin-top: 14px; }
.res-group { margin-bottom: 10px; }
.res-group-head { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-bottom: 6px; padding: 0 2px; }
.res-row { display: grid; grid-template-columns: 130px 1fr 50px; gap: 10px; align-items: center; padding: 5px 2px; font-size: 12px; }
.res-name { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-name .sub { font-family: var(--mono); font-size: 9px; color: var(--text3); margin-left: 4px; }
.res-bar { height: 7px; background: var(--bg4); border-radius: 3px; overflow: hidden; position: relative; }
.res-fill { height: 100%; background: var(--green); border-radius: 3px; opacity: .8; min-width: 2px; }
.res-fill.reserves { background: var(--terra); }
.res-pct { font-family: var(--mono); font-size: 11px; font-weight: 600; text-align: right; color: var(--text); }
.res-empty { padding: 12px; text-align: center; color: var(--text3); font-size: 11.5px; font-style: italic; }
.res-empty .link-btn { background: none; border: none; color: var(--green); text-decoration: underline; cursor: pointer; font-size: inherit; font-family: inherit; padding: 0; }

/* Section commerce de ressources (resourcetrade.earth) — tableau 3 colonnes */
.res-trade { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 14px; }
.trade-year { font-family: var(--mono); color: var(--text3); font-weight: 400; font-size: 9px; }
.trade-thead {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 10px;
  padding: 6px 2px 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.trade-th {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3); display: flex; align-items: center; gap: 5px;
}
.trade-th-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.trade-th-dot.imp { background: var(--terra); }
.trade-th-dot.exp { background: var(--green); }
.trade-row {
  display: grid;
  grid-template-columns: 130px 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 2px;
  font-size: 12px;
  border-bottom: 1px dashed transparent;
}
.trade-row:not(:last-child) { border-bottom-color: var(--border); }
.trade-row:hover { background: rgba(180,83,9,0.03); }
.trade-name { color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-cell { display: grid; grid-template-columns: 1fr 60px; gap: 6px; align-items: center; }
.trade-cell.empty { text-align: center; color: var(--text3); font-family: var(--mono); font-size: 10px; }
.trade-cell-bar { background: #e2dcce; height: 8px; border-radius: 3px; overflow: hidden; position: relative; }
.trade-cell-fill { height: 100%; border-radius: 3px; min-width: 3px; }
.trade-cell-fill.imp { background: var(--terra); }
.trade-cell-fill.exp { background: var(--green); }
.trade-cell-val { font-family: var(--mono); font-size: 10.5px; color: var(--text); text-align: right; font-weight: 600; }

/* Modal de réglage du seuil de notabilité ressources */
.seuil-overlay {
  position: fixed; inset: 0; z-index: 160; display: none;
  background: rgba(26,28,34,.3); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
.seuil-overlay.open { display: flex; }
.seuil-box {
  width: min(420px, 92vw); background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.seuil-body { padding: 16px 18px 18px; }
.seuil-help { margin: 0 0 14px; font-size: 12px; color: var(--text2); line-height: 1.5; }
.seuil-opts { display: flex; flex-direction: column; gap: 8px; }
.seuil-opt {
  display: flex; align-items: baseline; gap: 14px; padding: 12px 14px; cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg);
  font-family: var(--sans); font-size: 13px; text-align: left; transition: all .12s;
}
.seuil-opt:hover { border-color: var(--green); background: var(--bg3); }
.seuil-opt.on { border-color: var(--green); background: rgba(10,110,74,.08); }
.seuil-opt .v { font-family: var(--mono); font-size: 16px; font-weight: 700; color: var(--text); min-width: 36px; }
.seuil-opt .lbl { color: var(--text2); font-size: 12px; }
.seuil-opt.on .lbl { color: var(--green); font-weight: 600; }

/* hint sujet absent */
.need-subject {
  border: 1.5px dashed var(--border2); border-radius: 12px;
  padding: 48px 30px; text-align: center; color: var(--text3);
  background: var(--bg2); max-width: 620px; margin: 40px auto;
}
.need-subject .big { font-family: var(--display); font-size: 22px; color: var(--text); margin-bottom: 8px; }
.need-subject button {
  margin-top: 16px; padding: 9px 18px; background: var(--green); color: #fff;
  border: none; border-radius: 8px; font-family: var(--sans); font-size: 13px;
  font-weight: 600; cursor: pointer;
}

/* bouton config (engrenage) dans l'en-tête de carte */
.card-cog {
  font-size: 13px; color: var(--text3); cursor: pointer; background: none;
  border: none; padding: 2px 4px; border-radius: 5px; transition: all .12s;
}
.card-cog:hover { color: var(--text); background: var(--bg3); }

/* infobulle générique */
.tip { position: relative; }
#globalTip {
  position: fixed; z-index: 300; pointer-events: none; display: none;
  background: var(--text); color: var(--bg); font-size: 11px; line-height: 1.5;
  padding: 7px 10px; border-radius: 7px; max-width: 240px;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); font-family: var(--sans);
}
#globalTip .tt { font-family: var(--mono); font-size: 9px; opacity: .65; text-transform: uppercase; letter-spacing: .06em; }
#globalTip b { color: #fff; }

/* Système d'aide contextuelle : icône (ⓘ) discrète + popover au clic */
.help-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg3); color: var(--text3);
  font-size: 9px; font-family: var(--sans); font-weight: 700;
  cursor: help; margin-left: 4px; user-select: none;
  transition: all .12s; vertical-align: middle;
}
.help-tip:hover { background: var(--green); color: #fff; }
.help-tip.active { background: var(--green); color: #fff; }
#helpPopover {
  position: fixed; z-index: 250; display: none;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2); border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  max-width: 360px; padding: 14px 16px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55;
}
#helpPopover.open { display: block; }
#helpPopover .help-title {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--green); margin-bottom: 8px;
}
#helpPopover .help-body p { margin: 0 0 8px; color: var(--text); }
#helpPopover .help-body p:last-child { margin-bottom: 0; }
#helpPopover .help-body strong { color: var(--text); font-weight: 600; }
#helpPopover .help-body em { color: var(--text2); font-style: normal; font-family: var(--mono); font-size: 11px; }
#helpPopover .help-close {
  position: absolute; top: 6px; right: 8px;
  background: none; border: none; color: var(--text3);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px;
}
#helpPopover .help-close:hover { color: var(--text); }

/* modale de configuration des indicateurs épinglés */
#pinModal {
  position: fixed; inset: 0; z-index: 160; display: none;
  background: rgba(26,28,34,.3); backdrop-filter: blur(2px);
  align-items: center; justify-content: center;
}
#pinModal.open { display: flex; }
.pin-box {
  width: min(560px, 92vw); max-height: 80vh; background: var(--bg2);
  border: 1px solid var(--border2); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.pin-head {
  padding: 15px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.pin-head .t { font-family: var(--display); font-size: 17px; font-weight: 500; }
.pin-head .x { cursor: pointer; font-size: 20px; color: var(--text3); }
.pin-head .x:hover { color: var(--text); }
.pin-body { overflow-y: auto; padding: 8px 0; }
.pin-cat { font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); padding: 10px 18px 4px; }
.pin-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 18px; cursor: pointer;
  font-size: 13px;
}
.pin-item:hover { background: var(--bg3); }
.pin-chk {
  width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid var(--border2);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  background: var(--bg2); font-size: 11px; flex-shrink: 0;
}
.pin-item.on .pin-chk { background: var(--green); border-color: var(--green); }
.pin-item .miss { font-size: 9px; color: var(--orange); font-family: var(--mono); margin-left: auto; }
.pin-foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.pin-foot .count { font-size: 11px; color: var(--text3); }
.pin-foot button { padding: 8px 16px; background: var(--green); color: #fff; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.pin-foot .reset { background: none; color: var(--text3); margin-right: auto; }
.pin-foot .reset:hover { color: var(--text); }
/* ════════════════════════════════════════════════════════════════
   ONGLET PUISSANCE
═════════════════════════════════════════════════════════════════ */
.pu-layout { display: grid; grid-template-columns: 230px 1fr; gap: 14px; align-items: start; }
@media (max-width: 860px){ .pu-layout { grid-template-columns: 1fr; } }

/* navigateur d'indicateurs */
.pu-nav {
  background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden;
  position: sticky; top: var(--h-topbars); max-height: calc(100vh - var(--h-topbars));
  display: flex; flex-direction: column;
}
.pu-nav-search { padding: 10px; border-bottom: 1px solid var(--border); }
.pu-nav-search input { width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; font-family: var(--sans); font-size: 12px; background: var(--bg); outline: none; }
.pu-nav-search input:focus { border-color: var(--green); }
.pu-nav-body { flex: 1; overflow-y: auto; padding: 4px 0 8px; }
.pu-section { border-bottom: 1px solid var(--border); }
.pu-section:last-child { border-bottom: none; }
.pu-section-head { display: flex; align-items: center; gap: 7px; padding: 10px 12px; cursor: pointer; font-family: var(--display); font-size: 12px; font-weight: 600; color: var(--text); }
.pu-section-head:hover { color: var(--green); }
.pu-section-head .caret { transition: transform .15s; font-size: 9px; color: var(--text3); }
.pu-section.collapsed .caret { transform: rotate(-90deg); }
.pu-section.collapsed .pu-section-body { display: none; }
.pu-cat-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 4px; cursor: pointer; font-family: var(--mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.pu-cat-head:hover { color: var(--text2); }
.pu-cat-head .caret { transition: transform .15s; font-size: 8px; }
.pu-cat.collapsed .caret { transform: rotate(-90deg); }
.pu-cat.collapsed .pu-cat-list { display: none; }
.pu-ind { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 12.5px; color: var(--text2); border-left: 2px solid transparent; }
.pu-ind:hover { background: var(--bg3); color: var(--text); }
.pu-ind.active { background: var(--green-d); color: var(--green); border-left-color: var(--green); font-weight: 600; }
.pu-ind .radar-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); flex-shrink: 0; opacity: .55; }
.pu-ind .radar-dot.off { background: transparent; }
.pu-ind .rel-deplie { margin-left: auto; font-size: 11px; color: var(--text3); opacity: .65; flex-shrink: 0; }
.pu-ind:hover .rel-deplie, .pu-ind.active .rel-deplie { opacity: 1; }
.rel-sens-seg { display: inline-flex; margin-left: 10px; background: var(--bg2); border: 1px solid var(--border); border-radius: 7px; padding: 2px; gap: 2px; }
.rel-sens-seg button { border: none; background: transparent; color: var(--text2); font-family: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 5px; cursor: pointer; }
.rel-sens-seg button.on { background: var(--green); color: #fff; }
.rel-sens-seg button:not(.on):hover { color: var(--text); background: var(--bg3); }
.rel-sens-static { margin-left: 10px; font-size: 12px; color: var(--text2); }
.rel-scope-crumb { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 12.5px; }
.rel-scope-crumb .scope-step { display: inline-flex; align-items: center; gap: 4px; color: var(--text2); }
.rel-scope-crumb .scope-step.current { color: var(--text); font-weight: 600; }
.rel-scope-crumb .scope-step.link { cursor: pointer; color: var(--green); }
.rel-scope-crumb .scope-step.link:hover { text-decoration: underline; }
.rel-scope-crumb .scope-sep { color: var(--text3); }
.rel-scope-crumb .scope-x { cursor: pointer; margin-left: 4px; opacity: .55; font-size: 11px; }
.rel-scope-crumb .scope-x:hover { opacity: 1; }

/* zone principale Puissance */
.pu-main { display: flex; flex-direction: column; gap: 14px; }
.pu-head { display: flex; align-items: baseline; gap: 12px; padding: 2px 4px; }
.pu-head .name { font-family: var(--display); font-size: 22px; font-weight: 500; letter-spacing: -.01em; }
.pu-head .meta { font-size: 11px; color: var(--text3); }
.pu-cells { display: grid; gap: 14px; grid-template-columns: 1fr; }
.pu-cells .top-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 920px){ .pu-cells .top-row { grid-template-columns: 1fr; } }

/* radar */
.pu-radar-wrap { display: flex; align-items: center; justify-content: center; min-height: 280px; }
.pu-radar-wrap svg { display: block; max-width: 100%; height: auto; }
.radar-axis { stroke: var(--border); stroke-width: .6; }
.radar-grid { stroke: var(--border); stroke-width: .4; fill: none; opacity: .5; }
.radar-median { stroke: var(--text3); stroke-width: 1; stroke-dasharray: 3 3; fill: none; opacity: .55; }
.radar-poly { fill: var(--green); fill-opacity: .15; stroke: var(--green); stroke-width: 1.8; }
.radar-pt { fill: var(--green); }
.radar-axis-label { font-family: var(--mono); font-size: 9px; fill: var(--text2); }
.radar-legend { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 11.5px; color: var(--text2); }
.radar-legend span { display: inline-flex; align-items: center; gap: 5px; }
.radar-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.radar-note { font-family: var(--mono); font-size: 9.5px; color: var(--text3); }
.radar-pt.active { fill: var(--orange); r: 4.5; stroke: #fff; stroke-width: 1.5; }
.radar-lbl { font-family: var(--sans); font-size: 10px; fill: var(--text2); }
.radar-lbl.active { fill: var(--orange); font-weight: 600; }
.radar-empty { padding: 30px; text-align: center; color: var(--text3); font-size: 12px; }
.pu-cell { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.pu-cell-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--border); }
.pu-cell-title { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); font-weight: 600; }
.pu-cell-body { padding: 14px 16px; }

/* cellule courbe */
.pu-curve-wrap { width: 100%; }
.pu-curve-wrap svg { display: block; width: 100%; height: 260px; }
.curve-line { fill: none; stroke: var(--green); stroke-width: 2; }
.curve-area { fill: var(--green); opacity: .07; }
.curve-dot { fill: var(--green); }
.curve-axis { stroke: var(--border); stroke-width: .5; }
.curve-grid { stroke: var(--border); stroke-width: .5; opacity: .5; stroke-dasharray: 2 3; }
.curve-lbl { font-family: var(--mono); font-size: 9px; fill: var(--text3); }
.curve-proj { stroke-dasharray: 4 3; opacity: .6; }

/* cellule carte */
#puMapContainer { position: relative; width: 100%; }
#puMap { display: block; width: 100%; height: 340px; border-radius: 8px; background: #dce8f0; }
.map-country { stroke: var(--border); stroke-width: .4px; cursor: pointer; transition: fill-opacity .15s; }
.pu-map-legend { display: flex; align-items: center; gap: 8px; padding: 10px 4px 0; font-size: 10px; color: var(--text3); }
.pu-map-legend .bar { height: 8px; width: 120px; border-radius: 3px; background: linear-gradient(to right, #e8f0e8, #9ec9a8, #4f9e6a, #0a6e4a, #064e34); }

/* Composition par sub1 (Puissance, indicateurs ressources) */
.compo-wrap { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
.compo-row {
  display: grid;
  grid-template-columns: 180px 1fr 110px;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.compo-name { font-size: 12.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compo-bar-track {
  background: var(--bg3); border-radius: 2px; height: 12px; overflow: hidden; position: relative;
}
.compo-bar-fill { height: 100%; border-radius: 2px; transition: width .25s ease; }
.compo-bar-fill.a { background: var(--green); }
.compo-bar-val { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text); text-align: right; }
.compo-hidden {
  font-size: 10.5px; color: var(--text3); font-style: italic;
  padding: 8px 4px 2px; text-align: center;
}