/*
 * public/css/ntyb.css — Stylesheet NTYB · système « G » (2026-06-10)
 *
 * Direction validée user : blanc / encre / vermillon parcimonieux / mono
 * pour la data. Squelettes : G1 affiche (accueils), G2 index (tables
 * dept), G3 pupitre (fiches commune — phase suivante).
 * Réf. visuelles : design-v3-preview/g1-affiche.html, g2-index.html,
 * g3-pupitre.html. Mémoire : project_design_direction_g.
 *
 * Servi par Workers Assets, cache-busting `?v={CSS_V}` (bump dans
 * versions.js à chaque modif — atomic flip aligné NTYP).
 *
 * Règle d'or : le vermillon ne DÉCORE jamais — il marque (hover d'action,
 * ponctuation, signal warning). Tout le reste est encre sur blanc.
 */

:root {
  /* Spacing scale (4px base) */
  --sp1: 4px;  --sp2: 8px;  --sp3: 12px; --sp4: 16px;
  --sp6: 24px; --sp8: 32px; --sp12: 48px;

  /* Système G */
  --ink: #0B0B0B;
  --mut: #555555;
  --faint: #9A9A9A;
  --hair: #E4E4E4;
  --fire: #E8400C;
  --paper: #F4F3F0;

  /* Aliases legacy (anciens noms encore référencés) */
  --color-bg: #FFFFFF;
  --color-text: var(--ink);
  --color-muted: var(--mut);
  --color-success: var(--ink);
  --color-warning: var(--fire);
  --color-neutral: var(--faint);
  --color-accent: var(--fire);

  /* Coins carrés partout (registre G) */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;

  --maxw: 1080px;
  --prose: 680px;

  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Inter Tight', 'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
}

* { box-sizing: border-box; }

body.ntyb {
  margin: 0 auto;
  padding: 0 var(--sp6) var(--sp8);
  font: 15.5px/1.6 var(--sans);
  color: var(--ink);
  background: #FFFFFF;
  max-width: var(--maxw);
}
body.ntyb > main { display: block; }

h1, h2, h3 { letter-spacing: -0.02em; }
a { color: inherit; }
main a { text-decoration-color: var(--faint); text-underline-offset: 2px; }
main a:hover { color: var(--fire); text-decoration-color: var(--fire); }

/* ─── Top bar (chrome global) ───────────────────────────────────── */
.ntyb-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp4); padding: 18px 0; border-bottom: 1px solid var(--ink);
  margin-bottom: var(--sp6); flex-wrap: wrap;
}
.ntyb-topbar__brand {
  font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
  text-decoration: none; color: var(--ink);
}
.ntyb-topbar__brand i { color: var(--fire); font-style: normal; }
.ntyb-topbar__nav { display: flex; gap: var(--sp6); align-items: center; flex-wrap: wrap; }
.ntyb-topbar__nav a {
  font-size: 13.5px; font-weight: 500; color: var(--mut); text-decoration: none;
}
.ntyb-topbar__nav a:hover { color: var(--ink); }
.ntyb-topbar__cta {
  background: var(--ink); color: #fff !important; font-weight: 600;
  font-size: 13px; padding: 10px 18px;
}
.ntyb-topbar__cta:hover { background: var(--fire); }

/* ─── Barre de recherche header (header-search.js, injectée) ─────── */
.ntyb-hsearch { position: relative; flex: 1 1 240px; max-width: 360px; min-width: 0; }
.ntyb-hsearch__input {
  width: 100%; box-sizing: border-box; padding: 9px 12px;
  border: 1px solid var(--ink); background: #fff; color: var(--ink);
  font: 14px var(--sans); border-radius: 0; outline: none;
  transition: border-color .12s;
}
.ntyb-hsearch__input::placeholder { color: var(--faint); }
.ntyb-hsearch__input:focus { border-color: var(--fire); }
.ntyb-hsearch__drop {
  position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 1000;
  background: #fff; border: 1px solid var(--ink); border-top: none;
  max-height: 320px; overflow-y: auto;
}
.ntyb-hsearch__item {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  background: transparent; border: none; border-bottom: 1px solid var(--hair);
  cursor: pointer; font: 13px var(--sans); color: var(--ink);
}
.ntyb-hsearch__item:last-child { border-bottom: none; }
.ntyb-hsearch__item:hover { background: var(--paper); }
.ntyb-hsearch__item-label { display: block; font-weight: 500; }
.ntyb-hsearch__item-meta { display: block; margin-top: 2px; font: 11px var(--mono); color: var(--mut); }
.ntyb-hsearch__empty { padding: 12px; font: italic 13px var(--sans); color: var(--mut); }
@media (max-width: 640px) { .ntyb-hsearch { order: 3; flex-basis: 100%; max-width: none; } }

/* ─── Recherche hero (home) ─────────────────────────────────────── */
.ntyb-herosearch {
  position: relative; display: flex; gap: 0; margin: var(--sp8) 0 var(--sp6);
  max-width: 720px;
}
.ntyb-herosearch__input {
  flex: 1 1 auto; min-width: 0; box-sizing: border-box;
  padding: 16px 18px; border: 1.5px solid var(--ink); border-right: none;
  background: #fff; color: var(--ink); font: 500 17px var(--sans);
  border-radius: 0; outline: none; transition: border-color .12s;
}
.ntyb-herosearch__input::placeholder { color: var(--faint); font-weight: 400; }
.ntyb-herosearch__input:focus { border-color: var(--fire); }
.ntyb-herosearch__btn {
  flex: 0 0 auto; padding: 0 24px; border: 1.5px solid var(--ink);
  background: var(--ink); color: #fff; font: 600 15px var(--sans);
  cursor: pointer; border-radius: 0; transition: background .12s, border-color .12s;
}
.ntyb-herosearch__btn:hover { background: var(--fire); border-color: var(--fire); }
.ntyb-herosearch__geo {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: 13px var(--sans); color: var(--mut);
}
.ntyb-herosearch__geo:hover { color: var(--fire); }
.ntyb-herosearch__geo:disabled { opacity: .6; cursor: wait; }
.ntyb-herosearch__geo.is-loading svg { animation: ntyb-spin 1s linear infinite; }
.ntyb-herosearch__drop {
  position: absolute; top: calc(100% - 1.5px); left: 0; right: 0; z-index: 1000;
  background: #fff; border: 1.5px solid var(--ink); border-top: none;
  max-height: 340px; overflow-y: auto;
}
@media (max-width: 520px) {
  .ntyb-herosearch { flex-wrap: wrap; }
  .ntyb-herosearch__input { flex-basis: 100%; border-right: 1.5px solid var(--ink); }
  .ntyb-herosearch__btn { flex-basis: 100%; margin-top: -1.5px; padding: 14px; }
}

/* ─── Hero (spokes + hubs) ──────────────────────────────────────── */
.ntyb-hero { margin: var(--sp4) 0 var(--sp8); max-width: 760px; }
.ntyb-hero__h1 {
  font-size: clamp(30px, 4.6vw, 44px); font-weight: 800;
  line-height: 1.06; letter-spacing: -0.03em; margin: 0 0 var(--sp4);
}
.ntyb-hero__lede { color: var(--mut); font-size: 15.5px; margin: 0; max-width: 620px; }

/* ─── Manchette G1 (accueils) ───────────────────────────────────── */
.ntyb-manchette { padding: var(--sp12) 0 var(--sp8); border-top: 1px solid var(--ink); }
.ntyb-manchette__kicker {
  font: 500 12px var(--mono); letter-spacing: .08em; color: var(--mut);
  text-transform: uppercase;
}
.ntyb-manchette__kicker b { color: var(--fire); font-weight: 500; }
.ntyb-manchette__h1 {
  font-size: clamp(44px, 7.4vw, 88px); line-height: .98; font-weight: 800;
  letter-spacing: -0.035em; margin: var(--sp6) 0 0; max-width: 1020px;
}
.ntyb-manchette__h1 i { color: var(--fire); font-style: normal; }
.ntyb-manchette__lede {
  margin: var(--sp8) 0 0; max-width: 460px; font-size: 16px; color: var(--mut);
}

/* Ticker de stats (G1) */
.ntyb-ticker {
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: 13px 0; overflow: hidden; white-space: nowrap;
  margin: var(--sp8) 0 var(--sp4);
}
.ntyb-ticker span {
  font: 500 12.5px var(--mono); color: var(--mut);
  margin-right: var(--sp12); letter-spacing: .03em;
}
.ntyb-ticker b { color: var(--ink); font-weight: 500; }
.ntyb-ticker i { color: var(--fire); font-style: normal; }

/* Rangées éditoriales numérotées (G1) */
.ntyb-rows { list-style: none; margin: 0; padding: 0; }
.ntyb-row {
  display: grid; grid-template-columns: 90px 1fr 40px;
  gap: var(--sp6); align-items: baseline;
  padding: 26px 0; border-bottom: 1px solid var(--hair);
}
.ntyb-row:hover { border-bottom-color: var(--ink); }
.ntyb-row a { text-decoration: none; }
.ntyb-row__num { font: 500 13px var(--mono); color: var(--faint); }
.ntyb-row__title {
  font-size: 25px; font-weight: 700; letter-spacing: -0.02em;
  margin: 0; line-height: 1.12; color: var(--ink);
}
.ntyb-row:hover .ntyb-row__title { color: var(--fire); }
.ntyb-row__sub { margin: 6px 0 0; font-size: 13px; color: var(--mut); max-width: 560px; }
.ntyb-row__go { font-size: 20px; color: var(--faint); text-align: right; }
.ntyb-row:hover .ntyb-row__go { color: var(--fire); }
@media (max-width: 700px) {
  .ntyb-row { grid-template-columns: 50px 1fr; }
  .ntyb-row__go { display: none; }
}

/* ─── KPI (cartouches data) ─────────────────────────────────────── */
.ntyb-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp3); margin: var(--sp6) 0;
}
.ntyb-kpi { padding: 15px 17px; border: 1px solid var(--ink); background: #fff; }
.ntyb-kpi__label {
  font: 500 10.5px var(--mono); letter-spacing: .07em;
  margin: 0 0 var(--sp2); color: var(--mut); text-transform: uppercase;
}
.ntyb-kpi__value {
  font: 600 22px var(--sans); line-height: 1.25;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.ntyb-kpi__source {
  font: 11px var(--mono); color: var(--faint);
  margin-top: var(--sp3); padding-top: var(--sp2); border-top: 1px solid var(--hair);
}
.ntyb-kpi--success { border-left: 3px solid var(--ink); }
.ntyb-kpi--warning { border-left: 3px solid var(--fire); }
.ntyb-kpi--neutral { }
.ntyb-kpi--unknown { border: 1px dashed var(--faint); }
.ntyb-kpi--unknown .ntyb-kpi__value { color: var(--faint); font-weight: 500; }
.ntyb-kpi__link { color: var(--fire); text-decoration: none; font-weight: 600; }
.ntyb-kpi__link:hover { text-decoration: underline; }

/* ─── Drill-down dépliable d'une card (SSR, zéro JS) ─────────────── */
.ntyb-kpi__detail { margin-top: var(--sp3); border-top: 1px solid var(--hair); }
.ntyb-kpi__detail-summary {
  cursor: pointer; list-style: none; padding-top: var(--sp2);
  font: 600 11px var(--mono); letter-spacing: .04em; color: var(--fire);
  display: flex; align-items: center; gap: 6px;
}
.ntyb-kpi__detail-summary::-webkit-details-marker { display: none; }
.ntyb-kpi__detail-summary::before { content: '+'; font-weight: 700; }
.ntyb-kpi__detail[open] .ntyb-kpi__detail-summary::before { content: '–'; }
.ntyb-kpi__detail-summary:hover { text-decoration: underline; }
.ntyb-kpi__detail-body { margin-top: var(--sp2); }
.ntyb-kpi__detail-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ntyb-kpi__detail-table th {
  font: 500 10px var(--mono); letter-spacing: .05em; text-transform: uppercase;
  color: var(--mut); text-align: left; padding: 3px 0; border-bottom: 1px solid var(--hair);
}
.ntyb-kpi__detail-table td { padding: 3px 0; border-bottom: 1px solid var(--hair); }
.ntyb-kpi__detail-num { text-align: right; font-variant-numeric: tabular-nums; }
.ntyb-kpi__detail-code { color: var(--faint); font: 10.5px var(--mono); }

/* ─── Score d'opportunité (moteur) ──────────────────────────────── */
.ntyb-oppscore__lede { color: var(--mut); font-size: 14.5px; max-width: 640px; margin: 0 0 var(--sp6); }
.ntyb-oppscore__list { list-style: none; margin: 0 0 var(--sp6); padding: 0; display: grid; gap: var(--sp4); }
.ntyb-oppscore__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp4); }
.ntyb-oppscore__label { font-weight: 600; font-size: 15px; }
.ntyb-oppscore__val { font: 700 20px var(--sans); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.ntyb-oppscore__val small { font-size: 12px; font-weight: 500; color: var(--faint); }
.ntyb-oppscore__track { height: 8px; background: var(--hair); margin: var(--sp2) 0 var(--sp1); }
.ntyb-oppscore__fill { display: block; height: 100%; background: var(--fire); }
.ntyb-oppscore__ex { margin: 0; font: 11px var(--mono); color: var(--faint); }
.ntyb-oppscore__banner {
  margin: 0; padding: var(--sp4); border-left: 3px solid var(--fire);
  background: var(--paper); font-size: 13.5px; color: var(--mut);
}
.ntyb-oppscore__unavailable { color: var(--mut); font-style: italic; font-size: 14px; margin: 0 0 var(--sp4); }
.ntyb-oppscore__source { margin-top: var(--sp3); font: 11px var(--mono); color: var(--faint); }
.ntyb-oppscore__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp4) var(--sp8); }
.ntyb-oppscore__lvl { font-size: 13px; color: var(--fire); margin-left: 2px; }
@media (max-width: 640px) { .ntyb-oppscore__grid { grid-template-columns: 1fr; } }

/* ─── Sections narratives : hairlines, pas de cartes ────────────── */
.ntyb-section {
  margin: var(--sp8) 0 0; padding: var(--sp4) 0 0;
  border: 0; border-top: 1px solid var(--ink); background: none;
  max-width: var(--prose);
}
.ntyb-section h2 {
  margin: 0 0 var(--sp3); font-size: 19px; font-weight: 700;
}
.ntyb-section p { color: var(--mut); line-height: 1.7; font-size: 14px; }
.ntyb-section--cta a:not(.ntyb-affiliate__cta) { font-weight: 600; }

/* ─── FAQ ───────────────────────────────────────────────────────── */
.ntyb-faq { margin: var(--sp8) 0 0; max-width: var(--prose); border-top: 1px solid var(--ink); padding-top: var(--sp4); }
.ntyb-faq__heading { font-size: 19px; font-weight: 700; margin: 0 0 var(--sp3); }
.ntyb-faq__q { font-weight: 600; margin-top: var(--sp4); font-size: 14.5px; }
.ntyb-faq__q::before { content: '— '; color: var(--fire); }
.ntyb-faq__a { margin: var(--sp2) 0 0; color: var(--mut); font-size: 13.5px; line-height: 1.65; }

/* ─── Footer ────────────────────────────────────────────────────── */
.ntyb-footer {
  margin-top: var(--sp12); padding-top: var(--sp6);
  border-top: 1px solid var(--ink); color: var(--mut); text-align: left;
}
.ntyb-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp6); justify-content: flex-start; margin-bottom: var(--sp4); }
.ntyb-footer__links a { color: var(--mut); text-decoration: none; font-size: 13px; font-weight: 500; }
.ntyb-footer__links a:hover { color: var(--fire); text-decoration: none; }
.ntyb-footer__copyright { display: block; font: 11px var(--mono); line-height: 1.8; color: var(--faint); letter-spacing: .02em; }
.ntyb-footer__editor {
  display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp3);
  font: 500 11px var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--mut);
}
/* Marque Platypus Forge (logo recoloré via mask → prend la couleur du texte). */
.ntyb-pf-mark {
  display: inline-block; width: 15px; height: 15px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url(/brand/platypus-forge.svg) center / contain no-repeat;
  mask: url(/brand/platypus-forge.svg) center / contain no-repeat;
}

/* ─── Affiliation : encadré pointillé feu ───────────────────────── */
.ntyb-affiliate {
  margin: var(--sp6) 0; padding: var(--sp4);
  border: 1px dashed var(--fire); background: #fff; position: relative;
  max-width: var(--prose);
}
.ntyb-affiliate__label {
  position: absolute; top: -9px; left: var(--sp4); background: #fff;
  color: var(--fire); padding: 0 var(--sp2);
  font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .1em;
}
.ntyb-affiliate__offer { margin: var(--sp3) 0; }
.ntyb-affiliate__partner { margin: 0 0 var(--sp2); font-size: 15px; font-weight: 700; }
.ntyb-affiliate__pitch { margin: 0 0 var(--sp3); color: var(--mut); font-size: 13px; }
.ntyb-affiliate__cta {
  display: inline-block; padding: 10px 18px; background: var(--ink);
  color: #fff; text-decoration: none; font-size: 13px; font-weight: 600;
}
.ntyb-affiliate__cta:hover { background: var(--fire); filter: none; }
.ntyb-affiliate__offer--inline-link a.ntyb-affiliate__cta {
  background: transparent; color: var(--ink); padding: 0;
  text-decoration: underline; text-decoration-color: var(--fire);
}
.ntyb-affiliate__offer--inline-link a.ntyb-affiliate__cta:hover { color: var(--fire); }
/* Placeholder non hydraté (modèle dynamique NTYP) : jamais visible. */
.ntyb-affiliate[hidden] { display: none !important; }
.ntyb-affiliate__disclaimer { margin: var(--sp2) 0 0; color: var(--faint); font-size: 11px; }

/* ─── Lead « être mis en relation » : bloc plein encre ──────────── */
.ntyb-lead {
  margin: var(--sp8) 0; padding: var(--sp6); background: var(--ink); color: #fff;
  max-width: var(--prose);
}
.ntyb-lead__heading { margin: 0 0 var(--sp2); font-size: 19px; font-weight: 800; color: #fff; }
.ntyb-lead__lede { margin: 0 0 var(--sp4); color: #d8d8d8; font-size: 14px; }
.ntyb-lead__row { margin: 0 0 var(--sp3); }
.ntyb-lead__row--split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp3); }
@media (max-width: 480px) { .ntyb-lead__row--split { grid-template-columns: 1fr; } }
.ntyb-lead__field { display: block; }
.ntyb-lead__field > span { display: block; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #bdbdbd; margin: 0 0 var(--sp1); }
.ntyb-lead__field > span em { font-style: normal; color: #8f8f8f; text-transform: none; letter-spacing: 0; }
.ntyb-lead__field input, .ntyb-lead__field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #555; background: #fff;
  color: var(--ink); font: 14px var(--sans); box-sizing: border-box;
}
.ntyb-lead__field input:focus, .ntyb-lead__field textarea:focus { outline: 2px solid var(--fire); outline-offset: 0; }
.ntyb-lead__field textarea { resize: vertical; }
.ntyb-lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ntyb-lead__consent { display: flex; gap: var(--sp2); align-items: flex-start; margin: 0 0 var(--sp4); font-size: 12.5px; color: #d8d8d8; }
.ntyb-lead__consent input { margin-top: 2px; flex: 0 0 auto; }
.ntyb-lead__consent a { color: #fff; text-decoration: underline; text-decoration-color: var(--fire); }
.ntyb-lead__submit {
  display: inline-block; padding: 11px 22px; background: var(--fire); color: #fff;
  border: none; font: 600 14px var(--sans); cursor: pointer;
}
.ntyb-lead__submit:hover { filter: brightness(1.08); }
.ntyb-lead__submit:disabled { opacity: .55; cursor: default; }
.ntyb-lead__status { margin: var(--sp3) 0 0; font-size: 13px; font-weight: 600; }
.ntyb-lead__status--ok { color: #7CFFB0; }
.ntyb-lead__status--err { color: #FFB4A2; }
.ntyb-lead__status--sending { color: #d8d8d8; }
.ntyb-lead__note { margin: var(--sp3) 0 0; font-size: 11.5px; color: #9a9a9a; }

/* ─── Cross-links + voisines : chips carrées ────────────────────── */
.ntyb-crosslinks { margin: var(--sp8) 0 var(--sp6); padding: var(--sp4) 0 0; border-top: 1px solid var(--hair); }
.ntyb-crosslinks__heading { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--sp3); color: var(--faint); }
.ntyb-crosslinks__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp2); }
.ntyb-crosslinks__list a {
  display: inline-block; padding: 7px 14px; background: #fff;
  border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; font-size: 12.5px; font-weight: 600;
}
.ntyb-crosslinks__list a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.ntyb-related { margin: var(--sp6) 0; padding-top: var(--sp4); border-top: 1px solid var(--hair); }
.ntyb-related__heading { font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 var(--sp3); color: var(--faint); }
.ntyb-related__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp2); }
.ntyb-related__list a {
  display: inline-block; padding: 7px 14px; background: #fff;
  border: 1px solid var(--ink); color: var(--ink);
  text-decoration: none; font-size: 12.5px; font-weight: 600;
}
.ntyb-related__list a:hover { background: var(--ink); color: #fff; }

/* ─── Update meta : tampon mono ─────────────────────────────────── */
.ntyb-updatemeta {
  margin: var(--sp6) 0; padding: var(--sp3) 0 0;
  background: none; border-top: 1px dashed var(--hair);
  font: 11.5px var(--mono); color: var(--faint); letter-spacing: .02em;
  max-width: var(--prose);
}
.ntyb-updatemeta__date { margin: 0 0 var(--sp2); }
.ntyb-updatemeta__sources { margin-top: var(--sp2); }
.ntyb-updatemeta__sources summary { cursor: pointer; font-weight: 500; color: var(--mut); }
.ntyb-updatemeta__sources-list { margin: var(--sp2) 0 0; padding-left: var(--sp4); }

/* ─── Top-5 zones (/ou-ouvrir/) : rangées hairline ──────────────── */
.ntyb-topzones { list-style: none; counter-reset: topzone; padding: 0; margin: var(--sp4) 0 0; max-width: var(--prose); }
.ntyb-topzone {
  counter-increment: topzone;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp3); padding: var(--sp3) 0; margin: 0;
  background: none; border: 0; border-bottom: 1px solid var(--hair);
}
.ntyb-topzone::before {
  content: counter(topzone, decimal-leading-zero);
  flex: 0 0 auto; width: auto; height: auto;
  background: none; color: var(--fire);
  font: 500 13px var(--mono); border-radius: 0;
}
.ntyb-topzone__name { flex: 1 1 auto; font-weight: 600; }
.ntyb-topzone__badge {
  flex: 0 0 auto; padding: 3px 10px; border: 1px solid var(--hair);
  font: 500 12px var(--mono); background: none; color: var(--mut);
  font-variant-numeric: tabular-nums;
}
.ntyb-topzone__badge--4, .ntyb-topzone__badge--5 { background: var(--ink); color: #fff; border-color: var(--ink); }
.ntyb-topzone__badge--1, .ntyb-topzone__badge--2 { border-color: var(--fire); color: var(--fire); background: none; }

/* Exemples constat (/commerce-rural/) */
.ntyb-exemples { margin: var(--sp3) 0 0; padding-left: var(--sp4); max-width: var(--prose); }
.ntyb-exemples li { margin-bottom: var(--sp2); color: var(--mut); font-size: 14px; }

/* ─── Breadcrumbs : mono discret ────────────────────────────────── */
.ntyb-breadcrumbs { font: 11.5px var(--mono); color: var(--faint); margin: 0 0 var(--sp6); letter-spacing: .03em; }
.ntyb-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp1); }
.ntyb-breadcrumbs li + li::before { content: '/'; margin: 0 var(--sp2); color: var(--hair); }
.ntyb-breadcrumbs a { color: var(--faint); text-decoration: none; }
.ntyb-breadcrumbs a:hover { color: var(--ink); text-decoration: none; }
.ntyb-breadcrumbs [aria-current="page"] { color: var(--ink); }

/* ─── Hubs : grilles de liens carrées ───────────────────────────── */
.ntyb-hub-grid {
  list-style: none; padding: 0; margin: var(--sp4) 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--sp2);
}
.ntyb-hub-grid a {
  display: block; padding: 11px 14px; background: #fff;
  border: 1px solid var(--hair); color: var(--ink);
  text-decoration: none; font-size: 13.5px; font-weight: 600;
}
.ntyb-hub-grid a:hover { border-color: var(--ink); color: var(--fire); }
.ntyb-hub-depts__details summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.ntyb-hub-depts__details summary:hover { color: var(--fire); }

/* ─── Index dept (G2) : table cote ──────────────────────────────── */
.ntyb-deptindex__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ntyb-deptindex__table th {
  text-align: left; padding: var(--sp2) var(--sp3) var(--sp2) 0;
  border-bottom: 1px solid var(--ink);
  font: 500 10.5px var(--mono); letter-spacing: .08em;
  color: var(--faint); text-transform: uppercase;
}
.ntyb-deptindex__table td { padding: 12px var(--sp3) 12px 0; border-bottom: 1px solid var(--hair); }
.ntyb-deptindex__table tr:hover td { background: #FAFAFA; }
.ntyb-deptindex__table td a { text-decoration: none; font-weight: 600; }
.ntyb-deptindex__table td a:hover { color: var(--fire); }
.ntyb-deptindex__rank { color: var(--faint); width: 2.5em; font: 500 12px var(--mono); }
.ntyb-deptindex__num { text-align: right; font: 500 14px var(--mono); font-variant-numeric: tabular-nums; }

/* ─── Shell G3 « pupitre » (fiches commune) ─────────────────────── */
.ntyb-shell {
  display: grid; grid-template-columns: 290px minmax(0, 1fr);
  gap: var(--sp12); align-items: start;
}
.ntyb-rail { position: sticky; top: 0; padding: var(--sp1) var(--sp6) var(--sp6) 0; border-right: 1px solid var(--ink); }
.ntyb-rail__card { border: 1px solid var(--ink); padding: var(--sp4); background: #fff; }
.ntyb-rail__name { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.015em; }
.ntyb-rail__name small { font: 500 11px var(--mono); color: var(--faint); margin-left: var(--sp2); letter-spacing: 0; }
.ntyb-rail__facts { margin: var(--sp3) 0 0; display: grid; grid-template-columns: auto 1fr; gap: 7px var(--sp4); }
.ntyb-rail__facts dt { font: 500 10px var(--mono); color: var(--faint); letter-spacing: .06em; align-self: baseline; }
.ntyb-rail__facts dd { margin: 0; font: 500 13px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.ntyb-rail__edition {
  margin: var(--sp3) 0 0; padding-top: var(--sp3); border-top: 1px solid var(--hair);
  font: 500 10px var(--mono); color: var(--fire); letter-spacing: .08em;
}
.ntyb-rail__menu { display: flex; flex-direction: column; margin-top: var(--sp6); }
.ntyb-rail__menu-h {
  font: 600 10px var(--mono); letter-spacing: .12em; color: var(--faint);
  margin: 0 0 var(--sp2); text-transform: uppercase;
}
.ntyb-rail__menu a {
  display: block; padding: 9px 0; border-bottom: 1px solid var(--hair);
  font-size: 14px; font-weight: 600; color: var(--mut); text-decoration: none;
}
.ntyb-rail__menu a:hover { color: var(--fire); }
.ntyb-rail__menu a.ntyb-rail__item--on { color: var(--ink); }
.ntyb-rail__menu a.ntyb-rail__item--on::after { content: ' ●'; color: var(--fire); font-size: 9px; }
.ntyb-rail__meth { margin: var(--sp6) 0 0; font: 11px var(--mono); color: var(--faint); line-height: 1.8; letter-spacing: .02em; }
@media (max-width: 880px) {
  .ntyb-shell { grid-template-columns: 1fr; gap: var(--sp6); }
  .ntyb-rail { position: static; border-right: 0; border-bottom: 1px solid var(--ink); padding: 0 0 var(--sp6); }
}

/* Hubs : h1 en registre manchette (G1) */
.page-hub .ntyb-hero__h1 {
  font-size: clamp(38px, 6vw, 64px); line-height: 1.0; letter-spacing: -0.035em;
}

/* ─── Outil zone de chalandise ──────────────────────────────────── */
.ntyb-tool { margin: var(--sp6) 0 0; }
.ntyb-tool__controls { position: relative; max-width: 760px; }
.ntyb-tool__input {
  width: 100%; border: 1px solid var(--ink); padding: 14px 16px;
  font: 15px var(--sans); color: var(--ink); outline: none; background: #fff;
}
.ntyb-tool__input:focus { border-color: var(--fire); }
.ntyb-tool__searchrow { display: flex; gap: 8px; align-items: stretch; }
.ntyb-tool__searchrow .ntyb-tool__input { flex: 1 1 auto; width: auto; }
.ntyb-tool__geoloc {
  flex: 0 0 auto; width: 48px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--ink); background: #fff;
  color: var(--ink); cursor: pointer;
}
.ntyb-tool__geoloc:hover { border-color: var(--fire); color: var(--fire); }
.ntyb-tool__geoloc:disabled { opacity: .5; cursor: wait; }
.ntyb-tool__geoloc.is-loading svg { animation: ntyb-spin 1s linear infinite; }
@keyframes ntyb-spin { to { transform: rotate(360deg); } }
.ntyb-tool__suggest {
  position: absolute; z-index: 1001; left: 0; right: 0; top: 100%;
  background: #fff; border: 1px solid var(--ink); border-top: 0;
}
.ntyb-tool__suggest-item {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--hair); padding: 10px 16px;
  font: 13.5px var(--sans); color: var(--ink); cursor: pointer;
}
.ntyb-tool__suggest-item:hover { background: var(--paper); color: var(--fire); }
.ntyb-tool__opts { display: flex; gap: var(--sp3); margin-top: var(--sp3); flex-wrap: wrap; align-items: stretch; }
.ntyb-tool__seg { display: inline-flex; border: 1px solid var(--ink); }
.ntyb-tool__segbtn {
  border: 0; background: #fff; padding: 10px 16px; cursor: pointer;
  font: 600 13px var(--sans); color: var(--mut);
}
.ntyb-tool__segbtn.is-on { background: var(--ink); color: #fff; }
.ntyb-tool__select {
  border: 1px solid var(--ink); background: #fff; padding: 10px 12px;
  font: 600 13px var(--sans); color: var(--ink);
}
.ntyb-tool__go {
  border: 0; background: var(--fire); color: #fff; padding: 10px 20px;
  font: 600 13.5px var(--sans); cursor: pointer;
}
.ntyb-tool__go:hover { background: #D4380A; }
.ntyb-tool__go:disabled { opacity: .6; cursor: wait; }
.ntyb-tool__layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--sp4); margin-top: var(--sp4); align-items: start;
}
@media (max-width: 820px) { .ntyb-tool__layout { grid-template-columns: 1fr; } }
.ntyb-tool__map { height: 460px; border: 1px solid var(--ink); background: var(--paper); }
.ntyb-tool__stats { display: flex; flex-direction: column; gap: var(--sp3); }
.ntyb-tool__stat { border: 1px solid var(--ink); background: #fff; padding: 14px 16px; }
.ntyb-tool__stat-l {
  display: block; font: 500 10px var(--mono); letter-spacing: .08em;
  color: var(--mut); margin-bottom: 4px;
}
.ntyb-tool__stat-v {
  display: block; font: 600 26px var(--sans); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.ntyb-tool__stat-s { display: block; font: 10.5px var(--mono); color: var(--faint); margin-top: 5px; }
.ntyb-tool__note {
  font: 12px/1.5 var(--sans); color: var(--mut);
  background: var(--paper); border-left: 2px solid var(--fire);
  padding: 9px 11px; margin: 0 0 var(--sp3);
}
.ntyb-tool__note strong { color: var(--ink); font-weight: 600; }
.ntyb-tool__stat-link {
  display: flex; justify-content: space-between; gap: var(--sp2);
  padding: 7px 0; border-bottom: 1px solid var(--hair);
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.ntyb-tool__stat-link:hover { color: var(--fire); }
.ntyb-tool__stat-link small { font: 11px var(--mono); color: var(--faint); font-weight: 400; }
.ntyb-tool__attrib { font: 10.5px var(--mono); color: var(--faint); margin-top: var(--sp2); }
.ntyb-tool__attrib a { color: var(--faint); }
.ntyb-tool__badge {
  display: inline-block; margin-top: 7px; padding: 3px 10px;
  border: 1px solid var(--ink); font: 600 11px var(--sans); color: var(--ink);
}
.ntyb-tool__badge--hot { border-color: var(--fire); color: var(--fire); }
.ntyb-tool__csv {
  display: block; margin-top: var(--sp2); border: 0; background: none;
  padding: 0; font: 600 12px var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--fire);
  cursor: pointer; text-align: left;
}
.ntyb-tool__csv:hover { color: var(--fire); }
.ntyb-tool__zone-chip {
  display: flex; align-items: center; gap: 8px; padding: 6px 0;
  border-bottom: 1px solid var(--hair); font-size: 12.5px; font-weight: 600;
}
.ntyb-tool__zone-chip i { width: 10px; height: 10px; flex: none; }
.ntyb-tool__zone-chip button {
  margin-left: auto; border: 0; background: none; cursor: pointer;
  font: 600 14px var(--sans); color: var(--faint);
}
.ntyb-tool__zone-chip button:hover { color: var(--fire); }
.ntyb-tool__dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
.ntyb-tool__cmp { font-size: 12.5px; margin-top: 8px; }
.ntyb-tool__cmp td, .ntyb-tool__cmp th { padding: 8px 8px 8px 0; }
.ntyb-tool__dossier {
  display: block; width: 100%; margin-top: var(--sp4); border: 0;
  background: var(--fire); color: #fff; padding: 14px 16px; cursor: pointer;
  font: 700 14px var(--sans); text-align: left; letter-spacing: -0.01em;
}
.ntyb-tool__dossier:hover { background: #D4380A; }
.ntyb-tool__dossier:disabled { opacity: .7; cursor: wait; }
.ntyb-tool__dossier small { display: block; margin-top: 4px; font: 400 11px var(--sans); opacity: .9; }

/* Fallback thin content */
.ntyb-unavailable__links { padding-left: var(--sp4); }
.ntyb-unavailable__links li { margin-bottom: var(--sp2); }