/* Baromètre emploi BizNC — couche minimale par-dessus satellite.css.
   Structure et encres : tokens du thème (--ink, --muted, --hair, --card, --w).
   Données : la palette de l'onglet Stat de l'app, reprise à l'identique —
   couleurs de secteur de SECTOR_COLORS (app.js), vert/rouge de
   .biznc-stat-delta (style.css), courbe bleue à dégradé et halo de
   buildRadarChartSVG. Un secteur porte donc la même couleur dans l'app et
   dans le baromètre. Ce fichier n'ajoute que ce que le kit bento n'a pas : le
   chiffre géant, le classement à barres, les tableaux et la courbe. */

/* ---------- Hero : le chiffre est l'élément graphique principal ---------- */
.bar-hero h1,
.bar-hero h2 {
  margin: 6px 0 0;
  font-size: clamp(1.35rem, 3.4vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 22ch;
}
.bar-hero.is-hub h1 { max-width: 18ch; }

.bar-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 14px;
  margin: 26px 0 0;
}
.bar-figure strong {
  font-size: clamp(4rem, 15vw, 7.5rem);
  line-height: 0.86;
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.bar-figure span {
  font-size: 1.02rem;
  color: var(--muted);
}

.bar-var {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 0;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
}
.bar-var span[aria-hidden] {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--hair);
  border-radius: 999px;
  font-size: 0.9rem;
}
/* Vert / rouge de .biznc-stat-delta (style.css) : une variation se lit dans
   l'onglet Stat avec ces teintes-là. Les valeurs sombres sont la base, les
   valeurs claires (plus saturées) passent en surcharge de thème. */
.bar-var.is-up { color: #4ade80; }
.bar-var.is-down { color: #f87171; }
.bar-var.is-up span[aria-hidden],
.bar-var.is-down span[aria-hidden] { border-color: currentColor; color: currentColor; }
:root[data-theme="light"] .bar-var.is-up { color: #16a34a; }
:root[data-theme="light"] .bar-var.is-down { color: #dc2626; }
.bar-var.is-none { font-weight: 400; color: var(--muted); font-size: 0.92rem; }

.bar-sub {
  margin: 18px 0 0;
  font-size: 0.98rem;
  color: var(--ink);
}
.bar-method {
  margin: 10px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--hair);
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

/* ---------- À retenir ---------- */
.bar-takeaway-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.bar-takeaway-list li {
  padding: 14px 0 14px 18px;
  border-top: 1px solid var(--hair);
  border-left: 2px solid var(--gold);
  padding-left: 16px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}
.bar-takeaway-list li:first-child { border-top: 0; }

/* ---------- Classement à barres (secteurs, localisations) ---------- */
.bar-rank { list-style: none; margin: 0; padding: 0; }
.bar-rank-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 0;
  border-top: 1px solid var(--hair);
}
.bar-rank-row:first-child { border-top: 0; }
.bar-rank.is-plain .bar-rank-row { grid-template-columns: minmax(0, 1fr) auto; }
.bar-rank-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--muted);
}
.bar-rank-label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
}
.bar-rank-label a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.bar-rank-label a:hover { border-bottom-color: var(--gold); }
.bar-rank-value {
  font-size: 0.88rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Rail repris de .stat-bar (satellite.css) ; le remplissage, lui, prend la
   couleur du secteur (voir --bar-color plus bas). */
.bar-rank-bar {
  grid-column: 1 / -1;
  display: block;
  height: 4px;
  margin-top: 8px;
  background: rgba(var(--w), 0.08);
  border-radius: 999px;
  overflow: hidden;
}
.bar-rank.is-plain .bar-rank-bar { grid-column: 1 / -1; }
/* --bar-color est posée par le builder depuis SECTOR_COLORS : un secteur garde
   la couleur qu'il a dans « Ce qui monte ». Le repli neutre sert aux classements
   sans identité de secteur (localisations). */
.bar-rank-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--bar-color, rgba(var(--w), 0.34));
  box-shadow: 0 0 10px -1px var(--bar-color, transparent);
}
:root[data-theme="light"] .bar-rank-bar { background: rgba(24, 26, 22, 0.10); }
:root[data-theme="light"] .bar-rank-bar i { background: var(--bar-color, rgba(24, 26, 22, 0.42)); }
/* Pastille de secteur devant le libellé, comme la puce de légende de l'onglet
   Stat — le rang seul ne rattachait la couleur à rien. */
.bar-rank-row[style*="--bar-color"] .bar-rank-num::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  margin: 6px 0 0;
  border-radius: 999px;
  background: var(--bar-color);
}

/* ---------- Tableaux éditoriaux (métiers, employeurs, historique) ----------
   `main.fiche` est une grille : ses panneaux ont donc une taille minimale
   automatique égale à leur min-content. Le tableau des employeurs (4 colonnes,
   noms d'organismes entiers) imposait 417 px et poussait toute la page en
   défilement horizontal sur mobile, au lieu de défiler dans son propre cadre.
   `min-width: 0` rend la main au conteneur ; le tableau, lui, défile. */
main.fiche > .panel,
main.fiche .bento > .panel { min-width: 0; }
.bar-table-wrap { overflow-x: auto; min-width: 0; }
.bar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.bar-table th,
.bar-table td {
  padding: 12px 14px 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--hair);
  vertical-align: baseline;
}
.bar-table th {
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.bar-table td { color: var(--ink); }
.bar-table td:first-child,
.bar-table th:first-child { width: 3.5rem; }
.bar-table.is-compact td:first-child,
.bar-table.is-compact th:first-child { width: auto; }
.bar-table td:last-child,
.bar-table th:last-child { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.bar-table tr:last-child td { border-bottom: 0; }
.bar-table a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hair); }
.bar-table a:hover { border-bottom-color: var(--gold); }
.bar-na { color: var(--muted); }

/* Sous-titre de section : sépare « Secteur privé » et « Secteur public » dans
   le panneau employeurs, sans introduire un second niveau de cadre. */
.bar-subhead {
  margin: 22px 0 10px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
}
.bar-subhead:first-of-type { margin-top: 4px; }

/* Focus clavier : même règle que les cadres cliquables du bento
   (satellite.css) — 2 px, offset 2 px, encre du thème. Le site déclare son
   anneau composant par composant ; sans cette ligne, les liens du baromètre
   retomberaient sur l'anneau par défaut du navigateur. */
.bar-table a:focus-visible,
.bar-rank-label a:focus-visible,
.bar-archives a:focus-visible,
.bar-nav a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; }

/* ---------- Histogramme ---------- */
.bar-chart { display: block; width: 100%; height: auto; margin: 4px 0 0; }
/* Courbe : le tracé, son halo et son aplat sont peints dans le SVG (couleur de
   série reprise de l'onglet Stat). Ne restent ici que la grille et les
   étiquettes, qui doivent suivre le thème. */
.bar-chart-grid { stroke: var(--hair); stroke-width: 1; }
.bar-chart-value { fill: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.bar-chart-value.is-current { fill: var(--ink); font-weight: 700; }
.bar-chart-tick { fill: var(--muted); font-size: 12px; }
.bar-chart-text {
  margin: 14px 0 18px;
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink);
}

/* ---------- Bloc éditorial ---------- */
.bar-editorial h2 {
  margin: 0 0 14px;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
}
.bar-editorial p {
  margin: 0 0 12px;
  max-width: 70ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}
.bar-editorial p:last-child { margin-bottom: 0; }

/* ---------- Presse ---------- */
.bar-press-h3 {
  margin: 20px 0 8px;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bar-quote {
  margin: 0;
  padding: 16px 18px;
  border-left: 2px solid var(--gold);
  background: transparent;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--ink);
}
.bar-figures {
  margin: 16px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.75;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-x: auto;
}
.bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
}

/* ---------- Archives et navigation ---------- */
.bar-archives {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0 18px;
}
.bar-archives li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--hair);
}
.bar-archives a { color: var(--ink); text-decoration: none; font-weight: 600; }
.bar-archives a:hover { color: var(--gold); }
.bar-archives span { color: var(--muted); font-size: 0.86rem; font-variant-numeric: tabular-nums; }

.bar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--hair);
  font-size: 0.92rem;
}
.bar-nav strong { color: var(--muted); font-weight: 600; }
.bar-nav a { color: var(--ink); text-decoration: none; }
.bar-nav a:hover { color: var(--gold); }

@media (max-width: 560px) {
  .bar-archives { grid-template-columns: 1fr; }
  .bar-nav { flex-direction: column; align-items: flex-start; gap: 8px; }
  .bar-figure strong { line-height: 0.9; }

  /* Le compteur (« 106 offres · 23,4 % ») ne tient pas à côté du libellé sur
     un écran étroit : en colonne `auto` insécable, il fixait une largeur
     minimale de grille supérieure au viewport et poussait toute la page en
     débordement horizontal. Sous 560 px il passe donc à la ligne, sous le
     libellé, et la barre reprend toute la largeur. */
  .bar-rank-row { grid-template-columns: 28px minmax(0, 1fr); }
  .bar-rank.is-plain .bar-rank-row { grid-template-columns: minmax(0, 1fr); }
  .bar-rank-value { grid-column: 2 / -1; white-space: normal; margin-top: 2px; }
  .bar-rank.is-plain .bar-rank-value { grid-column: 1 / -1; }
}