/* ============================================================================
   Analyseur de récits nocturnes : feuille de style
   Système visuel repris de SCAN (voir scan-frontend/DESIGN.md) :
   thème clair, flat, sharp. La hiérarchie passe par le contraste typographique
   et des filets 1px, jamais par des ombres, des dégradés ou de la couleur.
   La couleur est réservée à la donnée (carte, graphiques, légendes).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  /* Fonds : on n'empile jamais plus de 2 niveaux */
  --canvas:#F5F6F8; --surface:#FFFFFF; --subtle:#EEF0F3; --sunken:#E4E7EB;
  /* Échelle neutre */
  --n100:#EEF0F3; --n200:#E1E4E9; --n300:#CBD0D8; --n400:#98A1AE; --n600:#5B6472; --n900:#14181F;
  /* Accent unique : action principale, état actif, sélection, focus. Rien d'autre. */
  --accent-50:#EDF2FE; --accent-100:#D9E3FD; --accent-500:#2C5FF6; --accent-600:#1F4ED6; --accent-700:#1A3FAC;
  /* Sémantiques sobres (bg / border / fg) */
  --success-bg:#E9F4EE; --success-border:#BFE0CD; --success-fg:#0F7A4D;
  --warning-bg:#FBF3E4; --warning-border:#EFDBB0; --warning-fg:#9A6400;
  --danger-bg:#FCEDEB;  --danger-border:#F3C8C3;  --danger-fg:#B42318;
  /* Élévation : 2 niveaux, uniquement pour ce qui flotte réellement */
  --raised:0 1px 2px rgba(20,24,31,.04), 0 2px 8px -2px rgba(20,24,31,.08);
  --overlay:0 1px 2px rgba(20,24,31,.04), 0 12px 32px -8px rgba(20,24,31,.14);
  /* Contour des marqueurs de carte : indispensable à forte densité */
  --marker-ring:#FFFFFF;
  --mapbox-invert:none;
}

/* Mode sombre : même langage (flat, filets 1px, aucun glow), neutres inversés.
   L'accent est éclairci pour rester ≥ 4.5:1 sur les fonds sombres. */
[data-theme="dark"]{
  --canvas:#14181F; --surface:#1A1F27; --subtle:#232830; --sunken:#2E343E;
  --n100:#232830; --n200:#2E343E; --n300:#3C444F; --n400:#79828F; --n600:#A3ACB8; --n900:#F2F4F7;
  --accent-50:#1B2434; --accent-100:#24304A; --accent-500:#6B93FF; --accent-600:#89A9FF; --accent-700:#A7BEFF;
  --success-bg:#16241D; --success-border:#25412F; --success-fg:#5FC08C;
  --warning-bg:#241E12; --warning-border:#3E3521; --warning-fg:#D9A643;
  --danger-bg:#241615;  --danger-border:#3F2321;  --danger-fg:#E4796C;
  --raised:0 1px 2px rgba(0,0,0,.24), 0 2px 8px -2px rgba(0,0,0,.36);
  --overlay:0 1px 2px rgba(0,0,0,.24), 0 12px 32px -8px rgba(0,0,0,.48);
  --marker-ring:#14181F;
  --mapbox-invert:invert(1);
}

*{box-sizing:border-box;}
html{height:100%;}

/* §2.1 : réglages typographiques globaux non négociables */
body{
  margin:0; min-height:100vh;
  background:var(--canvas); color:var(--n900);
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size:14px; line-height:20px;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'cv05' 1, 'ss03' 1;
  display:flex; flex-direction:column;
}
body.has-data{height:100vh;overflow:hidden;}
::selection{background:var(--accent-100);}
h1,h2,h3,h4{margin:0;font-weight:600;}
select,input,button{font-family:inherit;}
[data-theme="dark"] select{color-scheme:dark;}

/* §4.4 : focus ring unique, jamais supprimé, jamais d'une autre couleur */
:focus-visible{outline:2px solid var(--accent-500);outline-offset:2px;}

/* Tout chiffre susceptible de varier porte tabular-nums : sans ça les colonnes
   de nombres tremblent à chaque rafraîchissement. */
.num{font-variant-numeric:tabular-nums;}

/* ---------- Échelle typographique (§2.2) ---------- */
.t-sm{font-size:12px;line-height:16px;}
.t-lg{font-size:14px;line-height:20px;letter-spacing:-.005em;font-weight:600;}
.muted{color:var(--n600);}

/* ============================================================================
   Topbar (§5.2) : 56px, opaque, bordure basse, aucune ombre
   ============================================================================ */
.header{
  flex:0 0 auto; height:56px; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--surface); border-bottom:1px solid var(--n200);
}
.header-left{display:flex;align-items:center;gap:12px;min-width:0;}
.header-sep{width:1px;height:20px;background:var(--n200);flex-shrink:0;}
.eyebrow{display:none;}
.title{font-size:16px;line-height:24px;letter-spacing:-.005em;font-weight:600;color:var(--n900);white-space:nowrap;}
.subtitle{font-size:12px;line-height:16px;color:var(--n600);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums;}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}

/* ============================================================================
   Boutons (§5.6) : h-9 par défaut, h-8 compact. Aucune ombre, aucun dégradé,
   aucun rounded-full. Un seul bouton primaire par vue.
   ============================================================================ */
.btn{
  height:36px; padding:0 14px; border-radius:4px;
  font-size:12px; font-weight:600; line-height:1;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  white-space:nowrap; cursor:pointer; border:1px solid transparent;
  transition:background-color .1s, border-color .1s, color .1s;
}
.btn-sm{height:32px;padding:0 12px;}
.btn-primary{background:var(--accent-500);color:#fff;border-color:var(--accent-500);}
.btn-primary:hover{background:var(--accent-600);border-color:var(--accent-600);}
.btn-primary:active{background:var(--accent-700);border-color:var(--accent-700);}
.btn-secondary{background:var(--surface);border-color:var(--n200);color:var(--n900);}
.btn-secondary:hover{background:var(--n100);border-color:var(--n300);}
.btn-secondary:active{background:var(--n200);}
.btn-ghost{background:transparent;color:var(--n600);border-color:transparent;}
.btn-ghost:hover{background:var(--n100);color:var(--n900);}
.btn-block{width:100%;}
.btn-icon{height:32px;width:32px;padding:0;border-radius:4px;background:transparent;border-color:transparent;color:var(--n600);}
.btn-icon:hover{background:var(--n100);color:var(--n900);}

.reset-btn,.theme-toggle{
  height:32px;padding:0 12px;border-radius:4px;font-size:12px;font-weight:600;
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  background:var(--surface);border:1px solid var(--n200);color:var(--n900);
  transition:background-color .1s, border-color .1s;
}
.reset-btn:hover,.theme-toggle:hover{background:var(--n100);border-color:var(--n300);}

/* ============================================================================
   Écran d'import
   ============================================================================ */
.container{padding:24px;max-width:640px;margin:0 auto;width:100%;}
body.has-data .container{
  flex:1;min-height:0;display:flex;flex-direction:column;max-width:none;padding:0;margin:0;
}
body.has-data #app{flex:1;min-height:0;display:flex;flex-direction:column;}

.dropzone{
  border:1px dashed var(--n300); border-radius:6px; background:var(--surface);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:48px 24px; transition:border-color .1s, background-color .1s;
}
.dropzone.drag{border-color:var(--accent-500);background:var(--accent-50);}
.dropzone p{margin:0;}
.dropzone .lead{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.005em;color:var(--n900);}
.dropzone .hint{font-size:14px;color:var(--n600);margin-top:4px;}
.file-label{
  margin-top:16px;height:36px;padding:0 14px;border-radius:4px;
  font-size:14px;font-weight:600;background:var(--accent-500);color:#fff;
  display:inline-flex;align-items:center;cursor:pointer;transition:background-color .1s;
}
.file-label:hover{background:var(--accent-600);}
.error-box{
  margin-top:16px;display:flex;align-items:center;gap:8px;font-size:14px;
  background:var(--danger-bg);color:var(--danger-fg);
  border:1px solid var(--danger-border);padding:8px 12px;border-radius:4px;
}

/* ============================================================================
   Espace de travail : carte full-bleed + panneau latéral (§3.4)
   ============================================================================ */
.workspace{flex:1;min-height:0;display:flex;align-items:stretch;}
.map-column{flex:1;min-width:0;position:relative;background:var(--sunken);}
.side-column{
  flex:0 0 520px;width:520px;min-width:0;
  background:var(--surface);border-left:1px solid var(--n200);
  display:flex;flex-direction:column;min-height:0;
}
.side-head{
  flex:0 0 auto;padding:8px 12px;display:flex;align-items:center;
  border-bottom:1px solid var(--n200);
}
.side-body{flex:1;min-height:0;overflow-y:auto;padding:12px;}

@media(max-width:1400px){ .side-column{flex-basis:460px;width:460px;} }
@media(max-width:1100px){ .side-column{flex-basis:400px;width:400px;} }
@media(max-width:900px){
  body.has-data{height:auto;overflow:visible;}
  body.has-data .container{flex:none;}
  .workspace{flex-direction:column;}
  .map-column{flex:none;height:420px;}
  .side-column{flex:none;width:100%;border-left:none;border-top:1px solid var(--n200);}
  .side-body{overflow-y:visible;}
}

/* ---------- Contrôle segmenté (§5.2) ---------- */
.tabs{
  display:flex;gap:2px;padding:2px;border-radius:4px;background:var(--subtle);
  flex-wrap:wrap;width:100%;
}
.tab{
  height:28px;padding:0 12px;border-radius:2px;font-size:12px;font-weight:400;
  border:none;cursor:pointer;background:transparent;color:var(--n600);
  white-space:nowrap;flex-shrink:0;transition:background-color .1s, color .1s;
}
.tab:hover{color:var(--n900);}
.tab.active{background:var(--surface);color:var(--n900);font-weight:600;box-shadow:var(--raised);}

/* ---------- Card de statistique (§5.3) : label → valeur → variation ---------- */
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.kpi{
  background:var(--surface);border:1px solid var(--n200);border-radius:6px;
  padding:12px;display:flex;flex-direction:column;gap:2px;
}
.kpi .label{font-size:11px;line-height:16px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:var(--n600);}
.kpi .value{font-size:18px;line-height:24px;letter-spacing:-.01em;font-weight:600;color:var(--n900);font-variant-numeric:tabular-nums;}
.kpi .sub{font-size:12px;line-height:16px;color:var(--n600);}

/* ---------- Cards / panneaux (§4.2 : bordure, zéro ombre) ---------- */
.panel{
  background:var(--surface);border:1px solid var(--n200);border-radius:6px;
  padding:12px;margin-bottom:12px;
}
.panel:last-child{margin-bottom:0;}
.panel h3{font-size:14px;line-height:20px;letter-spacing:-.005em;font-weight:600;color:var(--n900);margin-bottom:4px;}
.panel h4{
  font-size:11px;line-height:16px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  color:var(--n600);margin-bottom:8px;
}
.panel .desc{font-size:12px;line-height:16px;color:var(--n600);margin:0 0 16px;}
.panel .desc:last-child{margin-bottom:0;}
.section-sep{border-top:1px solid var(--n100);margin-top:16px;padding-top:16px;}

/* ---------- Barres horizontales (§5.10 : rounded-none, aucun dégradé) ---------- */
.barchart{display:flex;flex-direction:column;gap:8px;}
.barrow{display:grid;grid-template-columns:150px 1fr 40px;align-items:center;gap:8px;font-size:12px;line-height:16px;}
.barrow .barlabel{color:var(--n900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bartrack{height:6px;background:var(--sunken);overflow:hidden;display:flex;border-radius:0;}
.barfill{height:100%;border-radius:0;transition:width .15s linear;}
.barrow .barcount{color:var(--n600);text-align:right;font-variant-numeric:tabular-nums;}
.barrow .barrank{color:var(--n600);font-weight:600;font-variant-numeric:tabular-nums;}
.legend-note{font-size:12px;line-height:16px;color:var(--n600);margin:8px 0 0;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.legend-note span{display:inline-flex;align-items:center;gap:6px;}

/* ---------- Champs (§5.7) ---------- */
.controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center;}
.search{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:4px;
  flex:1;min-width:180px;background:var(--surface);border:1px solid var(--n200);
  transition:border-color .1s;
}
.search:hover{border-color:var(--n300);}
.search:focus-within{border-color:var(--accent-500);}
.search svg{flex-shrink:0;color:var(--n400);}
.search input{background:transparent;border:none;outline:none;color:var(--n900);font-size:12px;flex:1;min-width:0;}
.search input::placeholder{color:var(--n400);}
select.villeselect{
  height:36px;padding:0 32px 0 12px;border-radius:4px;width:100%;font-size:12px;
  background:var(--surface);border:1px solid var(--n200);color:var(--n900);
  appearance:none;transition:border-color .1s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2398A1AE' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
select.villeselect:hover{border-color:var(--n300);}
.field-label{font-size:11px;line-height:16px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:var(--n600);display:block;margin-bottom:4px;}

/* ---------- Chips & badges (§5.8) : h-5 pour un badge, h-8 pour un chip cliquable ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px;}
.chip{
  display:inline-flex;align-items:flex-start;gap:6px;min-height:20px;padding:2px 6px;
  border-radius:2px;max-width:100%;
  font-size:11px;line-height:14px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  background:var(--n100);border:1px solid var(--n200);color:var(--n600);
  overflow-wrap:anywhere;
}
.chip .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px;}
.chip-action{
  min-height:32px;height:auto;padding:6px 10px;border-radius:4px;cursor:pointer;
  align-items:center;text-align:left;
  background:var(--surface);border:1px solid var(--n200);color:var(--n600);
  font-size:12px;letter-spacing:0;text-transform:none;font-weight:400;gap:8px;
  transition:background-color .1s, border-color .1s, color .1s;
}
.chip-action .swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;opacity:.35;transition:opacity .1s;margin-top:2px;}
.chip-action.active .swatch{opacity:1;}
.chip-action:hover{background:var(--n100);color:var(--n900);}
.chip-action.active{background:var(--accent-50);border-color:var(--accent-100);color:var(--n900);font-weight:600;}
.chip-count{margin-left:2px;color:var(--n400);font-variant-numeric:tabular-nums;}
.chip-action.active .chip-count{color:var(--n600);}

/* Sémantique de tonalité, portée par la couleur ET le libellé */
.badge-fav{background:var(--success-bg);border-color:var(--success-border);color:var(--success-fg);}
.badge-def{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger-fg);}
.badge-mit{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-fg);}

/* ---------- Liste de récits ---------- */
.result-count{font-size:12px;line-height:16px;color:var(--n600);margin-bottom:8px;font-variant-numeric:tabular-nums;}
.cards{display:flex;flex-direction:column;gap:8px;}
.card{border-radius:6px;padding:10px;background:var(--surface);border:1px solid var(--n200);}
.card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.ville-badge{
  display:inline-flex;align-items:center;min-height:20px;padding:2px 6px;border-radius:2px;
  line-height:14px;
  font-size:11px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  background:var(--n100);border:1px solid var(--n200);color:var(--n600);
}
.card-id{font-size:12px;color:var(--n600);font-family:'JetBrains Mono', ui-monospace, monospace;font-variant-numeric:tabular-nums;}
.word-count{font-size:12px;color:var(--n600);font-variant-numeric:tabular-nums;}
.recit-text{font-size:13px;line-height:19px;color:var(--n900);white-space:pre-line;margin:0;}
.linklike{
  background:none;border:none;padding:0;margin-top:8px;color:var(--accent-500);
  font-size:12px;cursor:pointer;font-weight:600;
}
.linklike:hover{color:var(--accent-600);text-decoration:underline;}
.card-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.more-note{text-align:center;font-size:12px;color:var(--n600);margin-top:12px;}

/* ---------- Registres ---------- */
.reg-bar{height:6px;background:var(--sunken);margin-bottom:4px;overflow:hidden;border-radius:0;}
.reg-bar-fill{height:100%;border-radius:0;}

/* ---------- Score / classement ---------- */
.score-row{
  padding:8px;margin:0 -8px;border-radius:4px;cursor:pointer;
  transition:background-color .1s;
}
.score-row:hover{background:var(--canvas);}
.score-list{display:flex;flex-direction:column;}

/* ---------- Actions ---------- */
.action-card{border-radius:6px;padding:10px;background:var(--surface);border:1px solid var(--n200);}
.action-known{background:var(--success-bg);border-color:var(--success-border);}
.action-title{font-size:13px;line-height:18px;font-weight:600;color:var(--n900);}
.action-meta{font-size:12px;line-height:16px;color:var(--n600);margin:8px 0 0;}
.impact{
  font-size:12px;letter-spacing:.12em;white-space:nowrap;flex-shrink:0;
  color:var(--n900);font-family:'JetBrains Mono', ui-monospace, monospace;
}
.impact .off{color:var(--n300);}
.tagpill{
  display:inline-flex;align-items:center;min-height:20px;padding:2px 6px;border-radius:2px;
  max-width:100%;
  font-size:11px;line-height:14px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  background:var(--n100);border:1px solid var(--n200);color:var(--n600);
  overflow-wrap:anywhere;
}
.gainpill{
  display:inline-flex;align-items:flex-start;gap:6px;min-height:20px;padding:2px 6px;
  border-radius:2px;max-width:100%;
  font-size:11px;line-height:14px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;
  background:var(--n100);border:1px solid var(--n200);color:var(--n600);
  overflow-wrap:anywhere;
}
.gainpill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:4px;}

/* ---------- Palmarès ---------- */
.pilier-picker{display:flex;flex-wrap:wrap;gap:6px;}
.pilier-pill{
  display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 10px;border-radius:4px;
  font-size:12px;border:1px solid var(--n200);background:var(--surface);color:var(--n600);
  cursor:pointer;white-space:nowrap;transition:background-color .1s, border-color .1s, color .1s;
}
.pilier-pill .swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;opacity:.35;transition:opacity .1s;}
.pilier-pill.active .swatch{opacity:1;}
.pilier-pill:hover{background:var(--n100);color:var(--n900);}
.pilier-pill.active{background:var(--accent-50);border-color:var(--accent-100);color:var(--n900);font-weight:600;}

.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 0 0;}
.podium-item{
  text-align:center;background:var(--surface);border:1px solid var(--n200);border-radius:6px;
  padding:12px 8px;display:flex;flex-direction:column;gap:4px;
}
.podium-item.rank-1{order:1;} .podium-item.rank-2{order:2;} .podium-item.rank-3{order:3;}
.podium-rank{
  font-size:11px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:var(--n600);
  font-variant-numeric:tabular-nums;
}
.podium-ville{font-size:13px;font-weight:600;color:var(--n900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.podium-score{font-size:18px;line-height:24px;letter-spacing:-.01em;font-weight:600;font-variant-numeric:tabular-nums;}

/* Légende séquentielle : 5 paliers discrets accolés, jamais une rampe continue */
.scale-legend{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:var(--n600);}
.scale-swatches{display:flex;flex:0 0 auto;}
.scale-swatches span{width:24px;height:10px;display:block;}
.gradient-legend{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:12px;color:var(--n600);}

/* ============================================================================
   Carte (§5.9) : fond clair désaturé, panneaux blancs opaques, aucun glow
   ============================================================================ */
#mapContainer{position:absolute;inset:0;background:var(--sunken);}

.map-status{
  position:absolute;top:16px;left:16px;z-index:2;max-width:min(420px, calc(100% - 32px));
  background:var(--surface);border:1px solid var(--n200);border-radius:4px;box-shadow:var(--raised);
  padding:8px 12px;font-size:12px;line-height:16px;color:var(--n600);
}
.map-legend{
  position:absolute;right:16px;bottom:16px;z-index:2;max-width:264px;
  background:var(--surface);border:1px solid var(--n200);border-radius:4px;box-shadow:var(--raised);
  padding:12px;display:flex;flex-direction:column;gap:6px;
}
.map-legend .legend-title{
  font-size:11px;line-height:16px;letter-spacing:.06em;font-weight:600;text-transform:uppercase;color:var(--n600);
}
.map-legend .legend-item{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--n900);}
.map-legend .legend-foot{
  font-size:12px;line-height:16px;color:var(--n600);margin:2px 0 0;
  padding-top:8px;border-top:1px solid var(--n100);
}
.map-legend .legend-item .swatch{width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.map-missing{
  position:absolute;left:16px;bottom:16px;z-index:2;max-width:min(420px, calc(100% - 320px));
  font-size:12px;line-height:16px;color:var(--n600);
  background:var(--surface);border:1px solid var(--n200);border-radius:4px;box-shadow:var(--raised);
  padding:8px 12px;
}
.map-missing:empty{display:none;}

/* Point lumineux : cercle plein, contour 1.5px, aucun halo ni pulsation */
.map-marker{
  border-radius:50%;cursor:pointer;
  box-shadow:0 0 0 1.5px var(--marker-ring);
  transition:box-shadow .1s;
}
.map-marker:hover{box-shadow:0 0 0 1.5px var(--marker-ring), 0 0 0 3px var(--n900);}
.map-marker.active{box-shadow:0 0 0 1.5px var(--marker-ring), 0 0 0 4px rgba(44,95,246,.35);}

/* Tooltip de survol : seul élément à fond sombre du produit */
.mapboxgl-popup-content{
  background:var(--n900);color:var(--surface);border-radius:4px;font-family:inherit;
  font-size:12px;line-height:16px;padding:4px 8px;box-shadow:none;
}
[data-theme="dark"] .mapboxgl-popup-content{background:#F2F4F7;color:#14181F;}
.mapboxgl-popup-tip{display:none;}
.mapboxgl-popup-close-button{color:var(--n400);}
.mapboxgl-ctrl-attrib{background:rgba(255,255,255,.9) !important;color:var(--n600) !important;font-size:10px !important;}
[data-theme="dark"] .mapboxgl-ctrl-attrib{background:rgba(20,24,31,.9) !important;}
.mapboxgl-ctrl-attrib a{color:var(--n600) !important;}
/* Pile de contrôles : 32×32, bordure 1px, shadow-raised, séparateurs 1px */
.mapboxgl-ctrl-group{
  background:var(--surface) !important;border:1px solid var(--n200) !important;
  border-radius:4px !important;box-shadow:var(--raised) !important;overflow:hidden;
}
.mapboxgl-ctrl-group button{
  background:var(--surface) !important;width:32px !important;height:32px !important;
  border-bottom:1px solid var(--n200) !important;
}
.mapboxgl-ctrl-group button:last-child{border-bottom:none !important;}
.mapboxgl-ctrl-group button:hover{background:var(--n100) !important;}
.mapboxgl-ctrl-icon{filter:var(--mapbox-invert);}

/* ---------- Tableau (§5.4) : pas de zébrure, pas de bordure verticale ---------- */
table.heatmap{border-collapse:collapse;width:100%;font-size:12px;}
table.heatmap th{
  padding:6px 5px;color:var(--n600);font-size:11px;letter-spacing:.06em;font-weight:600;
  text-transform:uppercase;white-space:nowrap;text-align:center;
  background:var(--canvas);border-bottom:1px solid var(--n200);
}
table.heatmap th.rowlabel{text-align:left;}
table.heatmap td{
  padding:6px 5px;text-align:center;border-radius:0;font-variant-numeric:tabular-nums;
  border-bottom:1px solid var(--n100);
}
table.heatmap tr:last-child td{border-bottom:none;}
table.heatmap td.rowlabel{
  text-align:left;color:var(--n900);font-weight:400;white-space:nowrap;background:transparent !important;
}

/* ---------- État vide (§5.4) : pas d'illustration ---------- */
.empty-state{display:flex;flex-direction:column;align-items:center;gap:4px;padding:48px 0;text-align:center;}
.empty-state .empty-title{font-size:14px;line-height:20px;font-weight:600;letter-spacing:-.005em;color:var(--n900);}
.empty-state .empty-text{font-size:12px;line-height:16px;color:var(--n600);max-width:260px;}

/* ============================================================================
   Modale : voile neutre, panneau blanc opaque bordé. Sert à sortir un tableau
   dense du panneau latéral, trop étroit pour le lire confortablement.
   ============================================================================ */
.modal{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  padding:24px;
}
.modal-backdrop{position:absolute;inset:0;background:rgba(20,24,31,.20);}
.modal-panel{
  position:relative;background:var(--surface);border:1px solid var(--n200);border-radius:6px;
  box-shadow:var(--overlay);width:min(1280px,100%);max-height:calc(100vh - 48px);
  display:flex;flex-direction:column;min-height:0;
}
.modal-head{
  flex:0 0 auto;height:48px;padding:0 8px 0 16px;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--n200);
}
.modal-body{flex:1;min-height:0;overflow:auto;padding:16px;}
/* Au large, le tableau peut respirer : on relâche la densité du panneau. */
.modal-body table.heatmap{font-size:14px;}
.modal-body table.heatmap th{padding:10px 8px;}
.modal-body table.heatmap td{padding:10px 8px;}
@media(max-width:900px){ .modal{padding:12px;} .modal-panel{max-height:calc(100vh - 24px);} }

@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important;}
}