/* COVERAGE: city-hub, hub-wrap, hub-breadcrumb, hub-hero, hub-hero-grid, hub-hero-grid--mismatch, hub-kicker, hub-pill, hub-pill--green, hub-lead, hub-local-note, hub-mismatch, hub-mismatch-grid, hub-search, hub-btn, hub-btn--primary, hub-btn--green, hub-chips, hub-chips--compact, hub-activity, hub-stat-grid, hub-stat, hub-live, hub-section, hub-section--white, hub-prose, hub-title, hub-lead-block, hub-editorial, hub-eyebrow, hub-sub, hub-head, hub-cat-grid, hub-cat, hub-image-fallback, hub-cat-body, hub-cat-top, hub-icon, hub-meta, hub-cat-cta, hub-service-links, hub-service-link-grid, hub-service-link, hub-service-link__icon, hub-ai-summary, hub-ai-facts, hub-human-grid, hub-human-card, hub-human-card--trust, hub-trust-grid, hub-ai-answer-panel, hub-ai-answer-grid, hub-two, hub-panel, hub-list, hub-guide, hub-provider-grid, hub-provider, hub-provider-avatar, hub-provider-type, hub-faq, hub-final, hub-final-signals, hub-sticky */

/* =====================================================================
   askaide.com — Page VILLE (hub local, /be/fr/gand) — akmk 3D reskin (2026)
   Scope  : main.city-hub (contient tous les .hub-wrap) + .hub-sticky (barre
            mobile, frere de <main>). Tokens declares sur les trois hooks.
   Markup : GELE — cette feuille ne restyle que les hooks .hub-* existants.
   Charge : APRES city-hub.css et public-deep-pages-2026.css. Les regles
            !important sont listees et justifiees dans hub-COVERAGE.md.
   Theme  : tokens clairs sur le scope, sombre sous html[data-theme="dark"]
            ET prefers-color-scheme garde par html:not([data-theme="light"]).
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,600;10..48,700;10..48,800&family=Figtree:wght@400;500;600;700&display=swap');

/* ── 1. TOKENS ─────────────────────────────────────────────────────── */
.city-hub, .hub-wrap, .hub-sticky {
  --ground:#FAF7F2; --surface:#FFFFFF; --surface-2:#F4F0E8; --raise:#FBF9F5;
  --ink:#191C26; --ink-soft:#565B6B; --ink-faint:#8B8F9C; --line:#ECE6DC; --line-2:#DED7C9;
  --primary:#2B4CF0; --primary-ink:#FFFFFF; --primary-soft:#EAEEFF; --primary-line:#CFD8FF; --violet:#6A4BF2;
  --accent:#FF6A45; --accent-soft:#FFEDE7; --accent-ink:#B33A1E;
  --trust:#0FA968; --trust-soft:#E3F6ED; --trust-ink:#0A7A4B; --gold:#F5A623; --danger:#E5484D; --danger-soft:#FDECEC;
  --r:26px; --r-sm:15px; --r-pill:999px;
  --display:'Bricolage Grotesque','Figtree',system-ui,sans-serif;
  --body:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* profondeur akmk */
  --shadow:0 1px 1px rgba(25,28,38,.05),0 4px 8px -3px rgba(25,28,38,.10),0 16px 30px -12px rgba(25,28,38,.16);
  --lift:0 24px 44px -14px rgba(25,28,38,.24),0 46px 100px -30px rgba(43,76,240,.28);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(25,28,38,.03);
  --grad:linear-gradient(135deg,var(--primary),var(--violet));
  --glass:rgba(255,255,255,.78);
  --br:12px; /* rayon du focus ring, redefini par composant */
  --final-a:#1B2CA8; --final-b:#2B4CF0; --final-c:#6A4BF2; /* CTA final : litteraux, texte blanc AA dans les 2 themes */
  color-scheme:light;
}

html[data-theme="dark"] .city-hub,
html[data-theme="dark"] .hub-wrap,
html[data-theme="dark"] .hub-sticky {
  --ground:#0E1017; --surface:#171A22; --surface-2:#1E2230; --raise:#1B1F29;
  --ink:#F1EFEA; --ink-soft:#A7ABB8; --ink-faint:#767B8B; --line:#272B37; --line-2:#353B4B;
  --primary:#6B84FF; --primary-ink:#0C1024; --primary-soft:#1A2242; --primary-line:#2C3768; --violet:#8B78FF;
  --accent:#FF7E5C; --accent-soft:#39241D; --accent-ink:#FFB59F;
  --trust:#34D399; --trust-soft:#122A20; --trust-ink:#7EE9BE; --gold:#FBBF52; --danger:#F87171; --danger-soft:#3A1D1F;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.72);
  --lift:0 28px 54px -16px rgba(0,0,0,.8),0 56px 116px -34px rgba(107,132,255,.42);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35);
  --glass:rgba(23,26,34,.82);
  --final-a:#16227A; --final-b:#2440C9; --final-c:#5C3FD6;
  color-scheme:dark;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .city-hub,
  html:not([data-theme="light"]) .hub-wrap,
  html:not([data-theme="light"]) .hub-sticky {
  --ground:#0E1017; --surface:#171A22; --surface-2:#1E2230; --raise:#1B1F29;
  --ink:#F1EFEA; --ink-soft:#A7ABB8; --ink-faint:#767B8B; --line:#272B37; --line-2:#353B4B;
  --primary:#6B84FF; --primary-ink:#0C1024; --primary-soft:#1A2242; --primary-line:#2C3768; --violet:#8B78FF;
  --accent:#FF7E5C; --accent-soft:#39241D; --accent-ink:#FFB59F;
  --trust:#34D399; --trust-soft:#122A20; --trust-ink:#7EE9BE; --gold:#FBBF52; --danger:#F87171; --danger-soft:#3A1D1F;
  --shadow:0 1px 1px rgba(0,0,0,.5),0 6px 14px -6px rgba(0,0,0,.6),0 20px 40px -16px rgba(0,0,0,.72);
  --lift:0 28px 54px -16px rgba(0,0,0,.8),0 56px 116px -34px rgba(107,132,255,.42);
  --edge:inset 0 1.5px 0 rgba(255,255,255,.09),inset 0 -1px 0 rgba(0,0,0,.35);
  --glass:rgba(23,26,34,.82);
  --final-a:#16227A; --final-b:#2440C9; --final-c:#5C3FD6;
  color-scheme:dark;
}
}

/* ── 2. GROUND — creme + aurora + grille de points (hero uniquement) ── */
.city-hub {
  position:relative; isolation:isolate; overflow-x:hidden; background:var(--ground); color:var(--ink);
  font-family:var(--body); font-size:15.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.city-hub *, .city-hub *::before, .city-hub *::after, .hub-sticky *{ box-sizing:border-box; }
.city-hub::before, .city-hub::after {
  content:""; position:absolute; left:0; right:0; top:0; height:980px; pointer-events:none; z-index:-1;
}
.city-hub::before {
  background:
    radial-gradient(56% 46% at 6% 2%,color-mix(in srgb,var(--primary) 20%,transparent),transparent 70%),
    radial-gradient(40% 36% at 26% 14%,color-mix(in srgb,var(--violet) 13%,transparent),transparent 72%),
    radial-gradient(44% 40% at 96% 40%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 70%),
    radial-gradient(34% 28% at 72% 66%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 72%);
  filter:blur(8px);
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent);
  mask-image:linear-gradient(180deg,#000 55%,transparent);
}
.city-hub::after {
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 18%,transparent) .6px,transparent .7px);
  background-size:22px 22px; opacity:.5;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 70%);
}
/* typographie : corps en Figtree, titres en Bricolage (l'ancien shell force Roboto/Fraunces) */
html body .city-hub :is(a, p, span, small, strong, em, b, i, li, dt, dd, label, input, button, summary, article, div){ font-family:var(--body); }
html body .city-hub :is(h1, h2, h3, h4){ font-family:var(--display); color:var(--ink); letter-spacing:-.02em; text-wrap:balance; }
.city-hub p{ margin:0; }
.city-hub a{ color:var(--primary); text-decoration:none; }

.hub-wrap{ position:relative; width:min(100% - 44px,1200px); margin-inline:auto; }

/* ── 3. FIL D'ARIANE ───────────────────────────────────────────────── */
.city-hub .hub-breadcrumb {
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:22px auto 0; padding:0;
  color:var(--ink-soft); font-size:.84rem; font-weight:500;
}
.city-hub .hub-breadcrumb a {
  --br:var(--r-pill); display:inline-flex; align-items:center; min-height:32px; padding:0 10px; margin-inline:-4px;
  border-radius:var(--r-pill); color:var(--primary); font-weight:600; text-decoration:none;
  transition:background .2s,color .2s;
}
.city-hub .hub-breadcrumb a:hover{ background:var(--primary-soft); text-decoration:none; }
.city-hub .hub-breadcrumb > span{ color:var(--ink-faint); } /* separateurs "/" ; la page courante est re-encree ci-dessous */
.city-hub .hub-breadcrumb > span:last-child{ color:var(--ink-soft); font-weight:600; }

/* ── 4. HERO ───────────────────────────────────────────────────────── */
.city-hub .hub-hero{ position:relative; padding:34px 0 64px; }
.city-hub .hub-hero-grid {
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(340px,400px); gap:clamp(32px,4.5vw,64px);
  align-items:end;
}
.city-hub .hub-hero-grid--mismatch{ align-items:start; }
.city-hub .hub-kicker{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.city-hub .hub-pill {
  display:inline-flex; align-items:center; gap:7px; min-height:32px; padding:0 13px; border-radius:var(--r-pill);
  background:color-mix(in srgb,var(--surface) 82%,transparent); border:1px solid var(--primary-line);
  color:var(--primary); font-size:.78rem; font-weight:700; letter-spacing:.02em; box-shadow:var(--edge);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.city-hub .hub-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px var(--primary-line); }
.city-hub .hub-pill--green{ background:var(--trust-soft); border-color:color-mix(in srgb,var(--trust) 40%,transparent); color:var(--trust-ink); }
.city-hub .hub-pill--green::before{ background:var(--trust); box-shadow:0 0 0 3px color-mix(in srgb,var(--trust) 30%,transparent); }
/* h1 : les deux anciennes feuilles le forcent en Roboto/Fraunces avec !important (specificite 0,2,1) → 0,2,3 + !important */
html body .city-hub .hub-hero h1 {
  margin:0 !important; max-width:15ch !important; font-family:var(--display) !important;
  font-size:clamp(2.45rem,5.3vw,4.7rem) !important; font-weight:800 !important; line-height:1.02 !important;
  letter-spacing:-.035em !important; color:var(--ink) !important; text-wrap:balance;
}
.city-hub .hub-lead {
  max-width:64ch; margin:22px 0 0; color:var(--ink-soft); font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.68;
}
.city-hub .hub-local-note {
  position:relative; margin:20px 0 0; padding:16px 20px 16px 24px; border-radius:var(--r-sm);
  background:color-mix(in srgb,var(--surface) 80%,transparent); border:1px solid var(--line);
  color:var(--ink-soft); line-height:1.6; box-shadow:var(--shadow),var(--edge); overflow:hidden;
}
.city-hub .hub-local-note::before {
  content:""; position:absolute; inset-block:0; inset-inline-start:0; width:5px;
  background:linear-gradient(180deg,var(--trust),var(--primary));
}
.city-hub .hub-local-note :is(p, li){ margin:0; color:var(--ink-soft); }
.city-hub .hub-local-note :is(p, li) + :is(p, li){ margin-top:6px; }
.city-hub .hub-local-note strong{ color:var(--ink); }

/* barre de recherche flottante */
.city-hub .hub-search {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; margin-top:28px; padding:8px;
  background:color-mix(in srgb,var(--surface) 90%,transparent); border:1px solid var(--line);
  border-radius:var(--r-pill); box-shadow:var(--lift),var(--edge);
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
}
.city-hub .hub-search input {
  --br:var(--r-pill); min-height:52px; width:100%; padding:0 20px; border:1.5px solid transparent;
  border-radius:var(--r-pill); background:var(--surface-2); color:var(--ink); font-size:1rem; outline:0;
  box-shadow:inset 0 1px 2px rgba(25,28,38,.05); transition:border-color .2s,background .2s,box-shadow .2s;
}
.city-hub .hub-search input::placeholder{ color:var(--ink-faint); opacity:1; }
.city-hub .hub-search input:hover{ border-color:var(--line-2); }
.city-hub .hub-search input:focus{ border-color:var(--primary); background:var(--surface); box-shadow:0 0 0 4px var(--primary-soft); }

/* ── 5. BOUTONS PILULE ─────────────────────────────────────────────── */
.city-hub .hub-btn, .hub-sticky .hub-btn {
  --br:var(--r-pill); position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:0 24px; border:1.5px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); color:var(--ink); font-family:var(--display); font-size:1rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.2; text-decoration:none; white-space:nowrap; cursor:pointer;
  overflow:hidden; isolation:isolate; box-shadow:var(--edge);
  transition:transform .25s cubic-bezier(.2,.8,.3,1.1),box-shadow .25s,filter .2s,border-color .2s,color .2s,background .2s;
}
.city-hub .hub-btn:hover, .hub-sticky .hub-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow),var(--edge); border-color:var(--primary-line); color:var(--primary); }
.city-hub .hub-btn:active, .hub-sticky .hub-btn:active{ transform:translateY(0) scale(.99); }
.city-hub .hub-btn--primary, .hub-sticky .hub-btn--primary {
  background:var(--grad); border-color:transparent; color:var(--primary-ink);
  box-shadow:var(--shadow),0 10px 22px -8px color-mix(in srgb,var(--primary) 70%,transparent),inset 0 1.5px 0 rgba(255,255,255,.28);
}
.city-hub .hub-btn--primary::after, .hub-sticky .hub-btn--primary::after {
  content:""; position:absolute; top:-20%; left:-70%; width:45%; height:140%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent); transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.2,.8,.2,1); pointer-events:none;
}
.city-hub .hub-btn--primary:hover, .hub-sticky .hub-btn--primary:hover{ filter:brightness(1.06); color:var(--primary-ink); border-color:transparent; box-shadow:var(--lift),inset 0 1.5px 0 rgba(255,255,255,.28); }
.city-hub .hub-btn--primary:hover::after, .hub-sticky .hub-btn--primary:hover::after{ left:130%; }
.city-hub .hub-btn--green, .hub-sticky .hub-btn--green {
  background:var(--trust-soft); border-color:color-mix(in srgb,var(--trust) 45%,transparent); color:var(--trust-ink);
}
.city-hub .hub-btn--green:hover, .hub-sticky .hub-btn--green:hover{ background:var(--trust); border-color:var(--trust); color:#06261A; }
.city-hub .hub-btn--green::before, .hub-sticky .hub-btn--green::before{ content:"+"; font-weight:800; font-size:1.1em; line-height:1; margin-inline-end:-2px; } /* signe non-couleur pour "publier" */

/* chips */
.city-hub .hub-chips{ display:flex; flex-wrap:wrap; gap:9px; }
.city-hub .hub-chips a {
  --br:var(--r-pill); display:inline-flex; align-items:center; min-height:42px; padding:0 15px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink); font-size:.9rem; font-weight:600;
  text-decoration:none; box-shadow:var(--edge);
  transition:transform .2s,box-shadow .2s,background .2s,border-color .2s,color .2s;
}
.city-hub .hub-chips a:hover{ transform:translateY(-2px); background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary); box-shadow:var(--shadow); }
.city-hub .hub-chips--compact{ margin-top:18px; }
.city-hub .hub-chips--compact a{ min-height:40px; padding:0 13px; font-size:.86rem; }

/* ── 6. ACTIVITE (aside hero) — carte empilee 3D ───────────────────── */
.city-hub .hub-activity {
  position:relative; padding:24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--lift),var(--edge); overflow:visible;
  animation:hubFadeUp .6s cubic-bezier(.2,.8,.2,1) .1s both;
}
.city-hub .hub-activity::before { /* carte fantome derriere, decalee : superposition */
  content:""; position:absolute; inset:14px -10px -12px 10px; z-index:-1; border-radius:var(--r);
  background:color-mix(in srgb,var(--surface) 70%,var(--primary-soft)); border:1px solid var(--line);
  transform:rotate(1.4deg); opacity:.9;
}
.city-hub .hub-activity::after { /* halo */
  content:""; position:absolute; inset:-30px; z-index:-2; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 16%,transparent),transparent);
  filter:blur(20px);
}
.city-hub .hub-activity h2 {
  display:flex; align-items:center; gap:10px; margin:0 0 16px; font-size:1.12rem; font-weight:800; letter-spacing:-.015em;
}
.city-hub .hub-activity h2::before {
  content:""; width:10px; height:10px; border-radius:50%; background:var(--trust); flex:none;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--trust) 25%,transparent); animation:hubPulse 2.2s ease-out infinite;
}
.city-hub .hub-stat-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.city-hub .hub-stat {
  padding:14px 15px; border-radius:18px; background:var(--surface-2); border:1px solid var(--line); box-shadow:var(--edge);
}
.city-hub .hub-stat strong {
  display:block; font-family:var(--display); font-size:1.7rem; font-weight:800; line-height:1.05; letter-spacing:-.03em;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.city-hub .hub-stat span{ display:block; margin-top:4px; color:var(--ink-soft); font-size:.84rem; font-weight:500; }
.city-hub .hub-live{ display:grid; gap:8px; margin-top:14px; }
.city-hub .hub-live span {
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--surface);
  border:1px solid var(--line); color:var(--ink-soft); font-size:.9rem; font-weight:500; box-shadow:var(--edge);
}
.city-hub .hub-live i {
  flex:none; width:9px; height:9px; border-radius:50%; background:var(--trust);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--trust) 22%,transparent);
}

/* ── 7. SECTIONS ALTERNEES + TETES DE SECTION ──────────────────────── */
.city-hub .hub-section{ position:relative; padding:clamp(44px,6vw,68px) 0; content-visibility:auto; contain-intrinsic-size:auto 720px; }
.city-hub .hub-section--white {
  background:var(--surface); border-block:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.4);
}
.city-hub .hub-section--white + .hub-section--white{ border-top:0; }
.city-hub .hub-head{ display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:26px; }
.city-hub .hub-eyebrow {
  display:inline-flex; align-items:center; gap:8px; margin:0 0 14px; padding:6px 13px; border-radius:var(--r-pill);
  background:var(--primary-soft); border:1px solid var(--primary-line); color:var(--primary);
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.city-hub .hub-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 3px var(--primary-line); }
html body .city-hub .hub-title {
  margin:0; font-family:var(--display); font-size:clamp(1.75rem,3vw,2.6rem); font-weight:800; line-height:1.1;
  letter-spacing:-.028em; color:var(--ink); text-wrap:balance;
}
.city-hub .hub-sub{ max-width:66ch; margin:12px 0 0; color:var(--ink-soft); font-size:1rem; line-height:1.68; }

/* editorial */
.city-hub .hub-prose{ max-width:78ch; }
.city-hub .hub-lead-block{ color:var(--ink); font-size:1.06rem; line-height:1.68; }
.city-hub .hub-lead-block :is(p, li){ color:var(--ink); }
.city-hub .hub-editorial{ color:var(--ink-soft); line-height:1.72; }
.city-hub :is(.hub-lead-block, .hub-editorial) p{ margin:0 0 12px; }
.city-hub :is(.hub-lead-block, .hub-editorial) p:last-child{ margin-bottom:0; }
.city-hub :is(.hub-lead-block, .hub-editorial) :is(h2, h3){ margin:22px 0 8px; font-size:1.25rem; }
.city-hub :is(.hub-lead-block, .hub-editorial) :is(ul, ol){ margin:0 0 12px; padding-inline-start:22px; }
.city-hub :is(.hub-lead-block, .hub-editorial) strong{ color:var(--ink); }
.city-hub :is(.hub-lead-block, .hub-editorial) a{ color:var(--primary); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ── 8. TUILES CATEGORIES (degrade) ────────────────────────────────── */
.city-hub .hub-cat-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.city-hub .hub-cat {
  --br:var(--r); position:relative; display:grid; grid-template-rows:auto 1fr; overflow:hidden; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none;
  box-shadow:var(--shadow),var(--edge);
  transition:transform .28s cubic-bezier(.2,.8,.3,1.1),box-shadow .28s,border-color .2s;
}
.city-hub .hub-cat::before { /* voile degrade sur l'image : primaire → surface, pour la lecture du titre */
  content:""; position:absolute; left:0; right:0; top:0; height:156px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 18%,transparent),transparent 45%,color-mix(in srgb,var(--surface) 92%,transparent) 100%);
}
.city-hub .hub-cat:hover{ transform:translateY(-5px); box-shadow:var(--lift),var(--edge); border-color:var(--primary-line); }
.city-hub .hub-cat img {
  display:block; width:100%; height:156px; object-fit:cover; background:var(--surface-2);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.city-hub .hub-cat:hover img{ transform:scale(1.05); }
.city-hub .hub-image-fallback {
  position:relative; display:grid; place-items:center; height:156px; overflow:hidden; color:var(--primary);
  background:
    radial-gradient(circle at 18% 20%,color-mix(in srgb,var(--trust) 22%,transparent) 0 16%,transparent 17%),
    linear-gradient(135deg,var(--primary-soft),var(--surface) 58%,var(--trust-soft));
}
.city-hub .hub-image-fallback i {
  display:grid; place-items:center; width:70px; height:70px; border-radius:22px; font-style:normal; font-size:2.2rem;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow),var(--edge);
}
.city-hub .hub-image-fallback span {
  position:absolute; left:14px; right:14px; bottom:12px; z-index:2; padding:6px 10px; border-radius:var(--r-pill);
  background:var(--glass); color:var(--ink); font-size:.76rem; font-weight:700; text-align:center;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.city-hub .hub-cat-body{ position:relative; z-index:2; display:flex; flex-direction:column; padding:18px 20px 20px; }
.city-hub .hub-cat-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top:-38px; }
.city-hub .hub-cat h3{ margin:26px 0 0; font-size:1.15rem; font-weight:800; line-height:1.25; letter-spacing:-.015em; color:var(--ink); }
.city-hub .hub-icon {
  display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:16px; font-size:1.35rem;
  background:var(--grad); color:var(--primary-ink);
  box-shadow:var(--edge),0 12px 26px -10px color-mix(in srgb,var(--primary) 60%,transparent);
  transition:transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.city-hub .hub-cat:hover .hub-icon{ transform:rotate(-6deg) scale(1.08); }
.city-hub .hub-cat p{ margin:10px 0 14px; color:var(--ink-soft); font-size:.93rem; line-height:1.55; }
.city-hub .hub-meta{ display:flex; flex-wrap:wrap; gap:7px; margin-top:auto; }
.city-hub .hub-meta span {
  display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); font-size:.76rem; font-weight:600;
}
.city-hub .hub-meta span:first-child{ background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary); }
.city-hub .hub-cat-cta {
  display:inline-flex; align-items:center; gap:6px; margin-top:14px; color:var(--primary); font-weight:700; font-size:.93rem;
  transition:gap .2s;
}
.city-hub .hub-cat:hover .hub-cat-cta{ gap:10px; }

/* ── 9. LIENS SERVICES (maillage local) ────────────────────────────── */
.city-hub .hub-service-links {
  position:relative; display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:28px; align-items:start;
  padding:clamp(22px,3vw,32px); border-radius:var(--r); overflow:hidden;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 78%,var(--primary-soft)));
  border:1px solid var(--line); box-shadow:var(--shadow),var(--edge);
}
.city-hub .hub-service-links::before {
  content:""; position:absolute; top:-120px; inset-inline-end:-120px; width:360px; height:360px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--violet) 16%,transparent),transparent);
}
.city-hub .hub-service-link-grid{ position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.city-hub .hub-service-link {
  --br:20px; display:flex; align-items:center; gap:12px; min-height:78px; padding:13px 14px; border-radius:20px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; box-shadow:var(--shadow),var(--edge);
  transition:transform .22s cubic-bezier(.2,.8,.3,1.1),box-shadow .22s,border-color .2s;
}
.city-hub .hub-service-link:hover{ transform:translateY(-3px); border-color:var(--primary-line); box-shadow:var(--lift),var(--edge); }
.city-hub .hub-service-link__icon {
  display:grid; place-items:center; flex:none; width:44px; height:44px; border-radius:15px; font-size:1.25rem;
  background:linear-gradient(135deg,var(--primary-soft),color-mix(in srgb,var(--violet) 22%,var(--surface)));
  border:1px solid var(--primary-line); box-shadow:var(--edge); transition:transform .3s cubic-bezier(.2,.8,.3,1.3);
}
.city-hub .hub-service-link:hover .hub-service-link__icon{ transform:scale(1.1) rotate(-5deg); }
.city-hub .hub-service-link > span:last-child{ min-width:0; }
.city-hub .hub-service-link b{ display:block; font-size:.95rem; font-weight:700; line-height:1.25; color:var(--ink); }
.city-hub .hub-service-link small{ display:block; margin-top:4px; color:var(--ink-soft); font-size:.78rem; font-weight:500; }
.city-hub .hub-ai-summary{ display:block; margin-top:14px; color:var(--ink-soft); font-size:.92rem; line-height:1.6; }
.city-hub .hub-ai-facts {
  display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:7px 12px; border-radius:var(--r-pill);
  background:var(--surface); border:1px solid var(--primary-line); color:var(--primary); font-size:.82rem; font-weight:700;
  line-height:1.4; box-shadow:var(--edge);
}
.city-hub .hub-ai-facts::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--trust); box-shadow:0 0 0 3px color-mix(in srgb,var(--trust) 28%,transparent); flex:none; }

/* ── 10. CONFIANCE + CONTEXTE (human cards) ────────────────────────── */
.city-hub .hub-human-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:20px; align-items:stretch; }
.city-hub .hub-human-card, .city-hub .hub-ai-answer-panel, .city-hub .hub-panel {
  position:relative; padding:clamp(22px,2.6vw,28px); border-radius:var(--r); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow),var(--edge); overflow:hidden;
}
.city-hub .hub-human-card--trust{ background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--surface) 80%,var(--trust-soft))); }
.city-hub .hub-human-card--trust .hub-eyebrow{ background:var(--trust-soft); border-color:color-mix(in srgb,var(--trust) 40%,transparent); color:var(--trust-ink); }
.city-hub .hub-human-card--trust .hub-eyebrow::before{ background:var(--trust); box-shadow:0 0 0 3px color-mix(in srgb,var(--trust) 30%,transparent); }
.city-hub .hub-trust-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:20px; }
.city-hub .hub-trust-grid span {
  display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-radius:16px; background:var(--surface);
  border:1px solid var(--line); color:var(--ink); font-size:.9rem; font-weight:600; line-height:1.4; box-shadow:var(--edge);
}
.city-hub .hub-trust-grid i {
  display:grid; place-items:center; flex:none; width:22px; height:22px; margin-top:1px; border-radius:50%; font-style:normal; font-size:.72rem; font-weight:800;
  background:linear-gradient(135deg,var(--trust),color-mix(in srgb,var(--trust) 65%,var(--primary))); color:#fff;
  box-shadow:0 4px 10px -4px color-mix(in srgb,var(--trust) 70%,transparent);
}

/* ── 11. REPONSES DIRECTES (AEO) ───────────────────────────────────── */
.city-hub .hub-ai-answer-panel{ background:linear-gradient(150deg,var(--surface),color-mix(in srgb,var(--surface) 82%,var(--primary-soft))); }
.city-hub .hub-ai-answer-panel::after {
  content:""; position:absolute; top:-140px; inset-inline-end:-100px; width:380px; height:380px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 14%,transparent),transparent);
}
.city-hub .hub-ai-answer-grid{ position:relative; z-index:1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:20px; counter-reset:hubq; }
.city-hub .hub-ai-answer-grid article {
  position:relative; padding:20px 18px 18px; border-radius:20px; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow),var(--edge); counter-increment:hubq;
  transition:transform .22s,box-shadow .22s;
}
.city-hub .hub-ai-answer-grid article:hover{ transform:translateY(-3px); box-shadow:var(--lift),var(--edge); }
.city-hub .hub-ai-answer-grid article::before {
  content:counter(hubq,decimal-leading-zero); display:inline-grid; place-items:center; min-width:34px; height:28px; padding:0 8px; margin-bottom:12px;
  border-radius:var(--r-pill); background:var(--grad); color:var(--primary-ink); font-family:var(--display); font-size:.78rem; font-weight:800;
  letter-spacing:.04em; box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
.city-hub .hub-ai-answer-grid h3{ margin:0 0 8px; font-size:1.02rem; font-weight:800; line-height:1.35; color:var(--ink); }
.city-hub .hub-ai-answer-grid p{ margin:0; color:var(--ink-soft); font-size:.93rem; line-height:1.6; }

/* ── 12. DEUX COLONNES : recherches, besoins, guides, villes voisines ─ */
.city-hub .hub-two{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.city-hub .hub-panel h3{ margin:0; font-size:1.3rem; font-weight:800; line-height:1.2; letter-spacing:-.02em; }
.city-hub .hub-list{ display:grid; gap:10px; margin:0; padding:0; list-style:none; }
.city-hub .hub-list li{ margin:0; }
.city-hub .hub-list a, .city-hub .hub-guide {
  --br:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:56px; padding:13px 16px;
  border-radius:18px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); text-decoration:none; box-shadow:var(--edge);
  transition:transform .2s,box-shadow .2s,border-color .2s,background .2s;
}
.city-hub .hub-list a:hover, .city-hub .hub-guide:hover{ transform:translateY(-2px); background:var(--surface); border-color:var(--primary-line); box-shadow:var(--shadow),var(--edge); }
.city-hub .hub-list b, .city-hub .hub-guide b{ color:var(--ink); font-weight:700; }
.city-hub .hub-guide > span > span{ color:var(--ink-soft); font-size:.88rem; }
.city-hub .hub-list a > span{ flex:none; color:var(--primary); font-size:.88rem; font-weight:700; }
.city-hub .hub-guide > span:first-child{ min-width:0; }
.city-hub .hub-guide > b:last-child {
  display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--primary-soft);
  border:1px solid var(--primary-line); color:var(--primary); font-size:1rem; transition:transform .2s,background .2s,color .2s;
}
.city-hub .hub-guide:hover > b:last-child{ background:var(--primary); color:var(--primary-ink); transform:translateX(3px); }

/* ── 13. PRESTATAIRES / ANNONCES PREMIUM ───────────────────────────── */
.city-hub .hub-provider-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.city-hub .hub-provider {
  --br:22px; position:relative; display:flex; align-items:center; gap:14px; padding:16px; border-radius:22px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; box-shadow:var(--shadow),var(--edge);
  overflow:hidden; transition:transform .25s cubic-bezier(.2,.8,.3,1.1),box-shadow .25s,border-color .2s;
}
.city-hub .hub-provider::before {
  content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--grad); opacity:0; transition:opacity .25s;
}
.city-hub .hub-provider:hover{ transform:translateY(-4px); box-shadow:var(--lift),var(--edge); border-color:var(--primary-line); }
.city-hub .hub-provider:hover::before{ opacity:1; }
.city-hub .hub-provider > img, .city-hub .hub-provider-avatar {
  flex:none; width:56px; height:56px; padding:3px; border-radius:50%; object-fit:cover; background:var(--surface);
  border:0; box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--primary) 55%,var(--violet)),var(--shadow);
}
.city-hub .hub-provider-avatar{ display:grid; place-items:center; overflow:hidden; }
.city-hub .hub-provider-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:0; box-shadow:none; padding:0; }
.city-hub .hub-provider > span{ min-width:0; flex:1 1 auto; display:block; }
.city-hub .hub-provider b{ display:block; font-weight:700; line-height:1.3; color:var(--ink); overflow-wrap:anywhere; }
.city-hub .hub-provider small{ display:block; margin-top:3px; color:var(--ink-soft); font-size:.8rem; font-weight:500; }
.city-hub .hub-provider-type {
  display:inline-flex; align-items:center; margin-bottom:6px; padding:3px 9px; border-radius:var(--r-pill);
  background:var(--trust-soft); border:1px solid color-mix(in srgb,var(--trust) 35%,transparent); color:var(--trust-ink);
  font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
.city-hub .hub-provider em {
  display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:38px; padding:0 14px; margin-inline-start:auto;
  border-radius:var(--r-pill); background:var(--primary-soft); border:1px solid var(--primary-line); color:var(--primary);
  font-style:normal; font-family:var(--display); font-weight:700; font-size:.88rem; transition:background .2s,color .2s;
}
.city-hub .hub-provider:hover em{ background:var(--primary); color:var(--primary-ink); }

/* ── 14. FAQ ───────────────────────────────────────────────────────── */
.city-hub .hub-faq{ display:grid; gap:12px; }
.city-hub .hub-faq details {
  --br:20px; border-radius:20px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow),var(--edge); overflow:hidden;
  transition:border-color .2s,box-shadow .2s;
}
.city-hub .hub-faq details[open]{ border-color:var(--primary-line); box-shadow:var(--lift),var(--edge); }
.city-hub .hub-faq summary {
  position:relative; display:flex; align-items:center; gap:14px; min-height:60px; padding:16px 60px 16px 22px; cursor:pointer;
  list-style:none; font-family:var(--display); font-size:1.05rem; font-weight:700; letter-spacing:-.01em; line-height:1.35; color:var(--ink);
}
.city-hub .hub-faq summary::-webkit-details-marker{ display:none; }
.city-hub .hub-faq summary::after { /* marqueur "+" → "×" : etat non porte par la seule couleur */
  content:"+"; position:absolute; top:50%; inset-inline-end:16px; transform:translateY(-50%); display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink);
  font-family:var(--body); font-size:1.25rem; font-weight:600; line-height:1; transition:transform .3s cubic-bezier(.2,.8,.3,1.2),background .2s,color .2s;
}
.city-hub .hub-faq details[open] summary::after{ transform:translateY(-50%) rotate(45deg); background:var(--grad); border-color:transparent; color:var(--primary-ink); }
.city-hub .hub-faq summary:hover::after{ background:var(--primary-soft); border-color:var(--primary-line); color:var(--primary); }
.city-hub .hub-faq p{ margin:0; padding:0 22px 20px; color:var(--ink-soft); line-height:1.72; animation:hubFadeUp .35s cubic-bezier(.2,.8,.2,1) both; }

/* ── 15. CTA FINAL — degrade profond + halos ───────────────────────── */
.city-hub .hub-final {
  position:relative; display:flex; align-items:center; justify-content:space-between; gap:28px; margin:0 auto 80px;
  padding:clamp(28px,4vw,44px); border-radius:calc(var(--r) + 6px); overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg,var(--final-a),var(--final-b) 55%,var(--final-c)); color:#fff;
  box-shadow:0 30px 70px -20px rgba(27,44,168,.45),inset 0 1.5px 0 rgba(255,255,255,.22);
  content-visibility:auto; contain-intrinsic-size:auto 320px;
}
.city-hub .hub-final::before, .city-hub .hub-final::after{ content:""; position:absolute; border-radius:50%; pointer-events:none; z-index:-1; }
.city-hub .hub-final::before{ top:-160px; inset-inline-end:-80px; width:420px; height:420px; background:radial-gradient(closest-side,rgba(255,255,255,.22),transparent); }
.city-hub .hub-final::after{ bottom:-200px; inset-inline-start:10%; width:480px; height:480px; background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 45%,transparent),transparent); filter:blur(10px); }
.city-hub .hub-final > div{ min-width:0; }
html body .city-hub .hub-final h2 {
  margin:0; font-size:clamp(1.7rem,3vw,2.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.08; color:#fff;
}
.city-hub .hub-final p{ max-width:66ch; margin:12px 0 0; color:rgba(255,255,255,.86); line-height:1.65; }
.city-hub .hub-final-signals{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.city-hub .hub-final-signals em {
  display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; font-style:normal; font-size:.84rem; font-weight:600;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
/* le bouton "publier" sur fond degrade : pilule blanche, encre litterale (AA sur blanc dans les 2 themes) */
.city-hub .hub-final .hub-btn--green{ flex:none; background:#fff; border-color:transparent; color:#1B2CA8; box-shadow:0 14px 30px -12px rgba(0,0,0,.45),inset 0 1.5px 0 rgba(255,255,255,.9); }
.city-hub .hub-final .hub-btn--green:hover{ background:#fff; color:#1B2CA8; filter:brightness(1.03); transform:translateY(-3px); }

/* ── 16. BARRE MOBILE (.hub-sticky, hors <main>) ───────────────────── */
.hub-sticky{ display:none; font-family:var(--body); }

/* ── 17. BLOC PAYS/VILLE INCOHERENTS (.hub-mismatch — styles inline) ─ */
/* le markup porte des litteraux clairs inline (#eff6ff / #bfdbfe / #0f172a / #fff) : !important obligatoire pour le theme sombre */
.city-hub .hub-mismatch {
  margin:20px 0 24px !important; padding:20px !important; border:1px solid color-mix(in srgb,var(--gold) 55%,transparent) !important;
  border-radius:var(--r-sm) !important; background:color-mix(in srgb,var(--gold) 12%,var(--surface)) !important; color:var(--ink) !important;
  box-shadow:var(--shadow),var(--edge);
}
.city-hub .hub-mismatch h2{ font-size:1.25rem !important; font-weight:800; color:var(--ink); }
.city-hub .hub-mismatch p{ color:var(--ink-soft); }
.city-hub .hub-mismatch .hub-btn{ min-height:46px; padding:0 18px; font-size:.94rem; }
.city-hub .hub-mismatch-grid > div {
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r-sm) !important; padding:14px !important;
  box-shadow:var(--edge); color:var(--ink-soft);
}
.city-hub .hub-mismatch-grid strong{ color:var(--ink); }
.city-hub .hub-mismatch-grid dt{ color:var(--ink); }
.city-hub .hub-mismatch-grid a[style] {
  --br:var(--r-pill); min-height:36px; align-items:center; border-color:var(--line-2) !important; background:var(--surface-2) !important;
  color:var(--ink) !important; font-weight:600; font-size:.88rem; text-decoration:none; transition:background .2s,border-color .2s,color .2s;
}
.city-hub .hub-mismatch-grid a[style]:hover{ background:var(--primary-soft) !important; border-color:var(--primary-line) !important; color:var(--primary) !important; }
.city-hub .hub-mismatch-grid p > a:not([style]){ font-weight:700; text-decoration:underline; text-underline-offset:3px; }

/* ── 18. BANDEAU "CONSEILS LOCAUX" (div inline dans .hub-wrap) ─────── */
/* degrade + bordure + lien inline (#f0f7ff / #dbe7f5 / #1558bd) : !important pour retokeniser dans les 2 themes */
.city-hub .hub-wrap > div[style*="linear-gradient"] {
  position:relative; overflow:hidden; border-radius:var(--r) !important; padding:clamp(22px,3vw,30px) !important;
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 80%,var(--primary-soft))) !important;
  border:1px solid var(--line) !important; box-shadow:var(--shadow),var(--edge);
}
.city-hub .hub-wrap > div[style*="linear-gradient"]::before {
  content:""; position:absolute; top:-140px; inset-inline-end:-120px; width:360px; height:360px; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--primary) 16%,transparent),transparent);
}
.city-hub .hub-wrap > div[style*="linear-gradient"] > div{ position:relative; }
.city-hub .hub-wrap > div[style*="linear-gradient"] p{ color:var(--ink-soft) !important; }
.city-hub .hub-wrap > div[style*="linear-gradient"] > a[style] {
  --br:var(--r-pill); position:relative; min-height:50px; padding:0 22px !important; border-radius:var(--r-pill) !important;
  background:var(--grad) !important; color:var(--primary-ink) !important; font-family:var(--display); font-weight:700 !important;
  box-shadow:var(--shadow),0 10px 22px -8px color-mix(in srgb,var(--primary) 70%,transparent),inset 0 1.5px 0 rgba(255,255,255,.28);
  transition:transform .25s cubic-bezier(.2,.8,.3,1.1),box-shadow .25s,filter .2s;
}
.city-hub .hub-wrap > div[style*="linear-gradient"] > a[style]:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:var(--lift); }

/* ── 19. PARTIELS EMBARQUES (geo-* : rotation, AEO, entites, prix, quartiers, FAQ contextuelle, chrome, behavior) ── */
/* Hors famille hub-* mais rendus DANS .hub-section > .hub-wrap ; l'ancienne feuille les force en blanc via
   .city-hub .geo-* {…!important} (0,2,0) → html body .city-hub (0,2,2) + !important pour retokeniser (theme sombre). */
html body .city-hub .geo-rotation{ display:grid; gap:18px; margin-top:8px; }
html body .city-hub :is(.geo-contextual-faq, .geo-districts-block, .geo-pricing-block, .geo-rotation .geo-aeo, .geo-rotation .geo-entities, .geo-aeo, .geo-entities, .geo-behavior, .geo-chrome) {
  background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:var(--r) !important;
  padding:clamp(18px,2.4vw,24px) !important; box-shadow:var(--shadow),var(--edge) !important; color:var(--ink);
}
html body .city-hub .geo-aeo{ background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 82%,var(--primary-soft))) !important; }
html body .city-hub .geo-pricing-block::before{ width:6px; background:var(--grad); border-radius:0; }
html body .city-hub :is(.geo-block-title, .geo-districts-block__title, .geo-pricing-block__title, .geo-rotation h2) {
  margin:0 !important; font-family:var(--display) !important; font-size:clamp(1.3rem,2vw,1.8rem) !important; font-weight:800 !important;
  line-height:1.15 !important; letter-spacing:-.025em; color:var(--ink) !important;
}
html body .city-hub :is(.geo-aeo__eyebrow, .geo-entities__eyebrow, .geo-behavior__eyebrow, .geo-chrome__eyebrow) {
  display:inline-flex; align-items:center; margin:0 0 10px; padding:5px 11px; border-radius:var(--r-pill); background:var(--primary-soft);
  border:1px solid var(--primary-line); color:var(--primary); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
html body .city-hub :is(.geo-districts-block__sub, .geo-pricing-block__note, .geo-pricing-block__sub, .geo-districts-block__needs, .geo-behavior__list li, .geo-behavior__terms, .geo-aeo__facts li, .geo-aeo__trust, .geo-aeo__qa-list dd, .geo-entities__districts, .geo-entities__profiles li, .geo-entities__titles li, .geo-entities__sig, .geo-chrome__zones, .geo-chrome__aeo-list, .geo-chrome__aeo-line, .geo-chrome__narrative, .geo-chrome__microline, .geo-contextual-faq .geo-faq-a){ color:var(--ink-soft) !important; }
html body .city-hub :is(.geo-behavior__list strong, .geo-aeo__facts strong, .geo-entities__profiles strong, .geo-districts-block__name, .geo-aeo__qa-list dt, .geo-chrome__zone, .geo-pricing-block__row dd, .geo-contextual-faq .geo-faq-q){ color:var(--ink) !important; }
html body .city-hub .geo-pricing-block__sample{ color:var(--primary) !important; font-weight:700; }
html body .city-hub :is(.geo-pricing-block__row, .geo-districts-block__item, .geo-entities__row, .geo-aeo__facts li, .geo-entities__profiles li, .geo-entities__titles li, .geo-aeo__qa-list dt, .geo-aeo__qa-list dd, .geo-contextual-faq .geo-faq-item, .geo-chrome__split-right) {
  background:var(--surface-2) !important; border:1px solid var(--line) !important; border-radius:16px !important; box-shadow:var(--edge);
}
html body .city-hub .geo-aeo__qa-list dt{ border-radius:16px 16px 0 0 !important; padding:10px 12px; }
html body .city-hub .geo-aeo__qa-list dd{ border-top:0 !important; border-radius:0 0 16px 16px !important; padding:10px 12px; }
html body .city-hub .geo-aeo__qa{ border-top:0 !important; }
html body .city-hub .geo-pricing-block__row dt{ color:var(--ink-soft) !important; font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
html body .city-hub .geo-pricing-block__row dd{ font-family:var(--display); font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
html body .city-hub :is(.geo-pricing-block__items li, .geo-entities__chip, .geo-chrome__chip, .geo-districts-block__badge) {
  display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:var(--r-pill) !important;
  background:var(--surface) !important; border:1px solid var(--line-2) !important; color:var(--ink) !important; font-size:.8rem; font-weight:600; line-height:1.4;
}
html body .city-hub .geo-pricing-block__items li{ background:color-mix(in srgb,var(--gold) 16%,var(--surface)) !important; border-color:color-mix(in srgb,var(--gold) 45%,transparent) !important; }
html body .city-hub :is(.geo-districts-block__badge--actif, .geo-chrome__chip--verified){ background:var(--trust-soft) !important; border-color:color-mix(in srgb,var(--trust) 40%,transparent) !important; color:var(--trust-ink) !important; }
html body .city-hub :is(.geo-districts-block__badge--proche, .geo-chrome__chip--today, .geo-chrome__chip--zones, .geo-entities__chip){ background:var(--primary-soft) !important; border-color:var(--primary-line) !important; color:var(--primary) !important; }
html body .city-hub :is(.geo-chrome__chip--fresh, .geo-chrome__chip--reviews){ background:color-mix(in srgb,var(--gold) 16%,var(--surface)) !important; border-color:color-mix(in srgb,var(--gold) 45%,transparent) !important; }
html body .city-hub .geo-chrome__chip--peak{ background:color-mix(in srgb,var(--violet) 14%,var(--surface)) !important; border-color:color-mix(in srgb,var(--violet) 40%,transparent) !important; color:var(--violet) !important; }
html body .city-hub :is(.geo-chrome__chip--weekend, .geo-chrome__chip--urgent){ background:var(--accent-soft) !important; border-color:color-mix(in srgb,var(--accent) 45%,transparent) !important; color:var(--accent-ink) !important; }
html body .city-hub :is(.geo-districts-block__cta, .geo-chrome a, .geo-aeo a, .geo-entities a){ color:var(--primary) !important; font-weight:700; }
html body .city-hub .geo-contextual-faq .geo-faq-item{ overflow:hidden; }
html body .city-hub .geo-contextual-faq .geo-faq-q{ background:var(--surface-2) !important; padding:15px 18px !important; font-family:var(--display); font-weight:700 !important; }
html body .city-hub .geo-contextual-faq .geo-faq-a{ background:var(--surface) !important; padding:14px 18px 16px !important; margin:0 !important; line-height:1.7 !important; }
html body .city-hub :is(.geo-chrome--a, .geo-chrome--b, .geo-chrome--c, .geo-chrome--d){ background:var(--surface) !important; }

/* ── 20. KEYFRAMES ─────────────────────────────────────────────────── */
@keyframes hubFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes hubPulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--trust) 45%,transparent); } 100%{ box-shadow:0 0 0 12px transparent; } }

/* ── 21. RESPONSIVE (mobile-first verifie 360 / 768 / 1024 / 1440) ── */
@media (max-width: 1024px) {
  .city-hub .hub-hero-grid{ grid-template-columns:1fr; align-items:stretch; gap:34px; }
  .city-hub .hub-activity{ max-width:none; }
  .city-hub .hub-activity::before{ inset:12px -6px -8px 6px; transform:rotate(.8deg); }
  .city-hub .hub-cat-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .city-hub .hub-service-links{ grid-template-columns:1fr; gap:22px; }
  .city-hub .hub-service-link-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .city-hub .hub-provider-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .city-hub .hub-human-grid, .city-hub .hub-ai-answer-grid, .city-hub .hub-two{ grid-template-columns:1fr; }
  .city-hub .hub-final{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 768px) {
  .city-hub .hub-search{ grid-template-columns:1fr; border-radius:var(--r); }
  .city-hub .hub-search .hub-btn{ width:100%; }
  .city-hub .hub-head{ display:block; }
  .city-hub .hub-provider-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px) {
  .hub-wrap{ width:calc(100% - 28px); }
  .city-hub{ font-size:15px; }
  .city-hub .hub-breadcrumb{ margin-top:14px; }
  .city-hub .hub-hero{ padding:16px 0 40px; }
  .city-hub .hub-kicker{ gap:6px; margin-bottom:16px; }
  .city-hub .hub-pill{ min-height:30px; padding:0 11px; font-size:.74rem; }
  /* l'ancienne feuille redefinit le h1 mobile en !important (0,2,1) → meme parade */
  html body .city-hub .hub-hero h1{ max-width:none !important; font-size:clamp(2.05rem,10.5vw,2.9rem) !important; line-height:1.06 !important; }
  .city-hub .hub-lead{ font-size:1rem; margin-top:16px; }
  .city-hub .hub-local-note{ padding:14px 16px 14px 20px; font-size:.94rem; }
  .city-hub .hub-search{ margin-top:22px; padding:8px; }
  .city-hub .hub-chips a{ min-height:44px; }
  .city-hub .hub-activity{ padding:18px; border-radius:22px; }
  .city-hub .hub-stat strong{ font-size:1.5rem; }
  .city-hub .hub-section{ padding:38px 0; }
  /* tuiles categories : scroller horizontal a accroche DANS son conteneur (le body ne scrolle jamais en X) */
  .city-hub .hub-cat-grid {
    display:flex; gap:12px; overflow-x:auto; padding:6px 4px 14px; margin-inline:-4px; scroll-snap-type:x mandatory;
    scroll-padding-inline:4px; scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  }
  .city-hub .hub-cat{ flex:0 0 84%; min-width:0; scroll-snap-align:start; }
  .city-hub .hub-cat img, .city-hub .hub-image-fallback, .city-hub .hub-cat::before{ height:132px; }
  .city-hub .hub-cat-body{ padding:16px 16px 18px; }
  .city-hub .hub-service-links{ border-radius:22px; padding:18px; }
  .city-hub .hub-service-link-grid{ grid-template-columns:1fr; }
  .city-hub .hub-service-link{ min-height:68px; }
  .city-hub .hub-trust-grid{ grid-template-columns:1fr; }
  .city-hub .hub-human-card, .city-hub .hub-ai-answer-panel, .city-hub .hub-panel{ border-radius:22px; padding:18px; }
  .city-hub .hub-two{ gap:14px; }
  .city-hub .hub-provider{ flex-wrap:wrap; }
  .city-hub .hub-provider em{ margin-inline-start:70px; }
  .city-hub .hub-faq summary{ padding:14px 56px 14px 16px; font-size:1rem; }
  .city-hub .hub-faq p{ padding:0 16px 16px; }
  .city-hub .hub-final{ width:calc(100% - 28px); border-radius:24px; padding:24px 20px; margin-bottom:104px; }
  .city-hub .hub-final .hub-btn--green{ width:100%; }
  .city-hub .hub-mismatch{ padding:16px !important; }
  .city-hub .hub-wrap > div[style*="linear-gradient"]{ padding:20px 18px !important; }
  .city-hub .hub-wrap > div[style*="linear-gradient"] > a[style]{ width:100%; justify-content:center; }
  /* barre mobile fixe : verre + 2 pilules (44px+) */
  .hub-sticky {
    position:fixed; z-index:30; left:12px; right:12px; bottom:12px; display:flex; gap:8px; padding:8px;
    background:var(--glass); border:1px solid var(--line); border-radius:var(--r-pill);
    box-shadow:var(--lift),var(--edge); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2);
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
  .hub-sticky .hub-btn{ flex:1 1 0; min-height:46px; padding:0 12px; font-size:.92rem; }
  .hub-sticky .hub-btn:last-child{ display:inline-flex; } /* l'ancienne feuille masquait "publier" (0,2,1) : on garde les 2 CTA */
}
@media (max-width: 380px) {
  .city-hub .hub-stat-grid{ grid-template-columns:1fr 1fr; gap:8px; }
  .city-hub .hub-stat{ padding:12px; }
  .city-hub .hub-btn, .hub-sticky .hub-btn{ padding-inline:16px; }
  .city-hub .hub-cat{ flex-basis:88%; }
}
@media (min-width: 1440px) {
  .hub-wrap{ width:min(100% - 64px,1240px); }
  .city-hub .hub-hero{ padding:44px 0 80px; }
  .city-hub .hub-hero-grid{ grid-template-columns:minmax(0,1.15fr) 420px; }
}

/* ── 22. RTL ───────────────────────────────────────────────────────── */
html[dir="rtl"] .city-hub, .city-hub[dir="rtl"]{ text-align:start; }
html[dir="rtl"] .city-hub .hub-btn--primary::after, .city-hub[dir="rtl"] .hub-btn--primary::after{ transform:skewX(18deg); }
html[dir="rtl"] .city-hub .hub-activity::before, .city-hub[dir="rtl"] .hub-activity::before{ inset:14px 10px -12px -10px; transform:rotate(-1.4deg); }
html[dir="rtl"] .city-hub .hub-cat:hover .hub-icon, .city-hub[dir="rtl"] .hub-cat:hover .hub-icon{ transform:rotate(6deg) scale(1.08); }
html[dir="rtl"] .city-hub .hub-service-link:hover .hub-service-link__icon, .city-hub[dir="rtl"] .hub-service-link:hover .hub-service-link__icon{ transform:scale(1.1) rotate(5deg); }
/* fleches "→" litterales : le <b> du guide ne contient que la fleche → miroir ; les autres restent (texte mixte) */
html[dir="rtl"] .city-hub .hub-guide > b:last-child, .city-hub[dir="rtl"] .hub-guide > b:last-child{ transform:scaleX(-1); }
html[dir="rtl"] .city-hub .hub-guide:hover > b:last-child, .city-hub[dir="rtl"] .hub-guide:hover > b:last-child{ transform:scaleX(-1) translateX(3px); }
html[dir="rtl"] .city-hub .hub-faq summary, .city-hub[dir="rtl"] .hub-faq summary{ padding:16px 22px 16px 60px; }
html[dir="rtl"] .city-hub .hub-local-note, .city-hub[dir="rtl"] .hub-local-note{ padding:16px 24px 16px 20px; }
@media (max-width: 640px) {
  html[dir="rtl"] .city-hub .hub-faq summary, .city-hub[dir="rtl"] .hub-faq summary{ padding:14px 16px 14px 56px; }
  html[dir="rtl"] .city-hub .hub-local-note, .city-hub[dir="rtl"] .hub-local-note{ padding:14px 20px 14px 16px; }
}

/* ── 23. MOTION + FOCUS (scopes .city-hub et .hub-sticky uniquement) ── */
@media (prefers-reduced-motion: reduce) {
  .city-hub *, .city-hub *::before, .city-hub *::after, .hub-sticky *, .hub-sticky *::before, .hub-sticky *::after {
    animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .city-hub .hub-cat-grid{ scroll-snap-type:none; }
}
/* anneau --primary plein (>=3:1 sur --ground et --surface dans les 2 themes). L'ancienne feuille pose outline:0
   sur :focus-visible de .hub-cat / .hub-provider / .hub-service-link / .hub-chips a (0,2,0) → 0,2,3 + !important */
html body .city-hub :is(a, button, input, summary):focus-visible,
html body .hub-sticky a:focus-visible {
  outline:3px solid var(--primary) !important; outline-offset:3px !important; border-radius:var(--br,12px);
}
html body .city-hub .hub-search input:focus-visible{ outline-offset:0 !important; }

/* ── 24. GUARD anti feuilles PARTAGEES (retokenisation sombre) ─────────
   public-deep-pages-2026.min.css impose, en NON-important, des fonds/bordures
   CLAIRS qui ne basculent pas en sombre :
     .city-hub :is(.hub-search,.hub-activity,.hub-cat,.hub-panel,.hub-provider,
       .hub-service-links,.hub-service-link,.hub-faq details){
         border-color:var(--hub-border); background:#fffefa; box-shadow:… }   (0,2,1)
     .city-hub :is(.hub-breadcrumb a,.hub-cat-cta,.hub-provider em){color:#2b4cf0} (0,2,1)
   var(--hub-border)=#ded7ca et var(--hub-text)=#1b2340 restent CLAIRS en sombre
   (le deep sheet ne les redefinit pas) → cartes/textes illisibles en dark.
   Parade : html body .city-hub <hook> = (0,2,2) > (0,2,1), SANS !important sur
   border-color/box-shadow pour laisser vivre les etats :hover (0,3,0) et
   details[open] (0,3,1). city-hub.css (feuille de famille) ne force ces hooks
   qu'en (0,1,0) non-important → battu a fortiori. La feuille unified ne cible
   que .geo-city-hub (aucune regle .city-hub). */
html body .city-hub{ background:var(--ground); } /* neutralise le radial/linear clair du deep sheet (0,1,0) */

html body .city-hub .hub-search{
  background:color-mix(in srgb,var(--surface) 90%,transparent); border-color:var(--line); box-shadow:var(--lift),var(--edge);
}
html body .city-hub .hub-activity{
  background:var(--surface); border-color:var(--line); box-shadow:var(--lift),var(--edge);
}
html body .city-hub .hub-cat{
  background:var(--surface); border-color:var(--line); box-shadow:var(--shadow),var(--edge);
}
html body .city-hub .hub-panel{
  background:var(--surface); border-color:var(--line); box-shadow:var(--shadow),var(--edge);
}
html body .city-hub .hub-provider{
  background:var(--surface); border-color:var(--line); box-shadow:var(--shadow),var(--edge);
}
html body .city-hub .hub-service-links{
  background:linear-gradient(135deg,var(--surface),color-mix(in srgb,var(--surface) 78%,var(--primary-soft)));
  border-color:var(--line); box-shadow:var(--shadow),var(--edge);
}
html body .city-hub .hub-service-link{
  background:var(--surface); border-color:var(--line); box-shadow:var(--shadow),var(--edge);
}
html body .city-hub .hub-faq details{
  background:var(--surface); border-color:var(--line); box-shadow:var(--shadow),var(--edge);
}
/* liens forces en bleu clair litteral #2b4cf0 (0,2,1) → reencrage sur token qui bascule */
html body .city-hub .hub-breadcrumb a{ color:var(--primary); }
html body .city-hub .hub-cat-cta{ color:var(--primary); }
html body .city-hub .hub-provider em{ color:var(--primary); }
/* fonds litteraux du deep sheet a egale specificite (0,2,0) — verrouilles ici en (0,2,2) */
html body .city-hub .hub-btn--primary{ background:var(--grad); }
html body .city-hub .hub-final{
  background:linear-gradient(135deg,var(--final-a),var(--final-b) 55%,var(--final-c));
}