/* =========================================================================
   Miranda Mode Marché — Étude de marché (porte du MVP standalone 2026-05-27)
   Hero produit+prix + waterfall + pourquoi + alertes + 7 cards drivers
   DA Miranda stricte : noir/blanc/bleu #9FC8FF + gris neutres + Montserrat/Inter
   ========================================================================= */

/* Variables CSS Miranda — scope global (utilisees aussi par d'autres modules
   futurs si besoin). Coherent avec 08_Design/DA_Miranda.md. */
:root {
  --noir: #000000;
  --blanc: #FFFFFF;
  --bleu: #9FC8FF;
  --gris-900: #111113;
  --gris-700: #3F3F46;
  --gris-500: #71717A;
  --gris-300: #D4D4D8;
  --gris-100: #F4F4F5;
  --vert: #22C55E;
  --rouge: #EF4444;
  --orange: #F59E0B;
  --ff-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-text:    'Inter',      -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --shadow-soft: 0 20px 40px -12px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Bouton export synthese dans la topbar #etude-marche-wrap */
.emk-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--bleu);
  color: var(--noir);
  border: 0;
  padding: 9px 16px;
  border-radius: 6px;
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.emk-export-btn:hover { opacity: 0.85; }
.emk-export-btn .emk-export-icon { font-size: 14px; line-height: 1; }

/* Override du container .emk-body du monolithe : utilise toute la largeur
   du viewport (sinon cap 1400px laisse trop de marges blanches lateraux). */
body.mode-marche #etude-marche-wrap #emk-body {
  max-width: none !important;
  padding: 24px 40px !important;
}

/* =========================================================================
   Loading overlay : logo Miranda 2x2 anime + texte
   - Carre bleu en haut a droite (identite Miranda)
   - 4 carres pulsent en cascade pour signaler activite
   - Cale au centre du #emk-body avec espace vertical confortable
   ========================================================================= */
.emk-loading-overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
  gap: 14px;
  text-align: center;
  padding: 40px 24px;
}
.emk-loading-logo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 6px;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
}
.emk-loading-logo .emk-sq {
  display: block;
  border-radius: 3px;
  animation: emkPulse 1.6s ease-in-out infinite;
}
.emk-loading-logo .emk-sq-1 { background: var(--noir); animation-delay: 0s; }
.emk-loading-logo .emk-sq-2 { background: var(--bleu); animation-delay: 0.2s; }
.emk-loading-logo .emk-sq-3 { background: var(--noir); animation-delay: 0.6s; }
.emk-loading-logo .emk-sq-4 { background: var(--noir); animation-delay: 0.4s; }
@keyframes emkPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.92); }
  35%      { opacity: 1;    transform: scale(1.00); }
}
.emk-loading-eyebrow {
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bleu);
}
.emk-loading-title {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gris-900);
  margin-top: 2px;
}
.emk-loading-sub {
  font-family: var(--ff-text);
  font-size: 12px;
  color: var(--gris-500);
  letter-spacing: 0.02em;
  margin-top: 4px;
}

/* ----- Hero card ----- */
.hero-card {
  margin: 32px 0 0; width: 100%; box-sizing: border-box;
  padding: 36px 40px;
  background: var(--noir);
  color: var(--blanc);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  max-width: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.hero-eyebrow {
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 12px;
}
.hero-product {
  font-family: var(--ff-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--blanc);
}
.hero-mix {
  margin-top: 14px;
  font-family: var(--ff-text);
  font-size: 13px;
  color: var(--gris-300);
  letter-spacing: 0.02em;
}
.hero-price {
  font-family: var(--ff-display);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--blanc);
}
.hero-price .unit {
  font-size: 22px;
  color: var(--gris-300);
  font-weight: 500;
  margin-left: 4px;
  letter-spacing: 0;
}
.hero-price-sub {
  margin-top: 10px;
  font-family: var(--ff-text);
  font-size: 13px;
  color: var(--gris-300);
}
.hero-fallback-tag {
  display: inline-block;
  margin-top: 14px;
  padding: 4px 10px;
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--noir);
  background: var(--bleu);
  border-radius: 99px;
}
.hero-noprice {
  margin-top: 18px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--bleu);
  font-family: var(--ff-text);
  font-size: 13px;
  color: var(--gris-300);
  line-height: 1.55;
  max-width: 60ch;
}
.hero-error {
  padding: 14px 16px;
  background: rgba(239, 68, 68, 0.15);
  border-left: 3px solid var(--rouge);
  color: var(--blanc);
  font-size: 13px;
}

/* ----- Waterfall prix ----- */
.waterfall-card {
  margin: 18px 0 0; width: 100%; box-sizing: border-box;
  max-width: none;
  padding: 0;
}
.waterfall-card.hidden { display: none; }
.waterfall-inner {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  padding: 22px 28px;
  box-shadow: var(--shadow-card);
}
.waterfall-title {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 14px;
}
.waterfall-rows { display: flex; flex-direction: column; gap: 4px; }
.waterfall-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  font-family: var(--ff-text);
  font-size: 13px;
  border-bottom: 1px dashed var(--gris-100);
}
.waterfall-row.total {
  border-top: 2px solid var(--noir);
  border-bottom: 0;
  padding-top: 12px;
  margin-top: 6px;
}
.waterfall-op {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--gris-500);
  line-height: 1;
}
.waterfall-row.total .waterfall-op { color: var(--noir); font-size: 22px; }
.waterfall-label {
  color: var(--gris-700);
  font-size: 13px;
}
.waterfall-label .waterfall-sub {
  display: block;
  font-size: 11px;
  color: var(--gris-500);
  margin-top: 2px;
}
.waterfall-val {
  font-family: var(--ff-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--gris-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.waterfall-row.total .waterfall-val {
  font-size: 22px;
  color: var(--bleu);
  letter-spacing: -0.01em;
}
.waterfall-margin {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(159, 200, 255, 0.10);
  border-left: 3px solid var(--bleu);
  font-size: 12px;
  color: var(--gris-700);
  line-height: 1.55;
  border-radius: 0 4px 4px 0;
}
.waterfall-source {
  display: block;
  font-size: 10px;
  color: var(--gris-500);
  font-style: italic;
  margin-top: 2px;
  line-height: 1.4;
}
.waterfall-cf {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--noir);
  color: var(--blanc);
  border-radius: 6px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
}
.waterfall-cf-label {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--bleu);
}
.waterfall-cf-sub {
  display: block;
  font-family: var(--ff-text);
  font-size: 11px;
  color: var(--gris-300);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
  line-height: 1.5;
  max-width: 70ch;
}
.waterfall-cf-val {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--blanc);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.waterfall-cf-val .unit {
  font-size: 11px;
  color: var(--gris-300);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0;
}

/* ----- Pourquoi ce prix ----- */
.pourquoi-card {
  margin: 24px 0 0; width: 100%; box-sizing: border-box;
  max-width: none;
  padding: 0;
}
.pourquoi-card.hidden { display: none; }
.pourquoi-inner {
  background: var(--blanc);
  border: 1px solid var(--gris-300);
  border-left: 4px solid var(--bleu);
  border-radius: 8px;
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}
.pourquoi-title {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 4px;
}
.pourquoi-question {
  font-family: var(--ff-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gris-900);
  margin-bottom: 18px;
}
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 28px;
}
.fact-row {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 12px;
  padding: 4px 0;
}
.fact-icon {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
  letter-spacing: -0.05em;
  color: var(--bleu);
}
.fact-icon.up         { color: #8FBE7C; }   /* vert modéré */
.fact-icon.up.strong  { color: #2F8645; font-size: 13px; }   /* vert foncé fort */
.fact-icon.down       { color: #E89A8A; }   /* rouge modéré */
.fact-icon.down.strong{ color: #C0392B; font-size: 13px; }   /* rouge foncé fort */
.fact-icon.flat       { color: var(--gris-500); }
.fact-icon.warn       { color: var(--orange); }
.fact-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.fact-label {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.fact-value {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--gris-900);
  letter-spacing: -0.005em;
}
.fact-interp {
  font-family: var(--ff-text);
  font-size: 12px;
  color: var(--gris-700);
  line-height: 1.45;
}

/* ----- Alertes terrain : pill compacte au lieu de bandeau pleine largeur.
   Gain ~70px de fold par tab. Detail au hover (title attribute). ----- */
.alertes-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: #FFFBEB;
  border: 1px solid #FED7AA;
  margin: 0 0 18px 0;
  cursor: help;
  max-width: 100%;
}
.alertes-pill.hidden { display: none; }
.alertes-pill.has-critical {
  background: #FEF2F2;
  border-color: #FECACA;
}
.alertes-pill-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: var(--orange, #F59E0B);
  flex-shrink: 0;
}
.alertes-pill.has-critical .alertes-pill-dot { background: var(--rouge, #EF4444); }
.alertes-pill-txt {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--gris-700);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alertes-pill-txt b { color: #C2410C; font-weight: 600; }
.alertes-pill.has-critical .alertes-pill-txt b { color: #B91C1C; }
.alertes-pill-chevron {
  color: var(--gris-500);
  font-size: 10px;
  margin-left: 2px;
  flex-shrink: 0;
}

/* ----- Alertes (ancien bandeau) — conservé pour retrocompat, mais masqué
   par défaut quand .alertes-pill est utilisée à la place. ----- */
.alertes-card {
  margin: 16px 0 0; width: 100%; box-sizing: border-box;
  max-width: none;
  padding: 0;
}
.alertes-card.hidden { display: none; }
.alertes-inner {
  border-radius: 8px;
  padding: 18px 24px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--gris-300);
}
.alertes-inner.ok {
  background: var(--blanc);
  border-left: 4px solid var(--bleu);
}
.alertes-inner.has-alerts {
  background: #FFF8F1;
  border-left: 4px solid var(--orange);
}
.alertes-title {
  font-family: var(--ff-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 10px;
}
.alertes-inner.ok .alertes-title { color: var(--bleu); }
.alertes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 24px;
}
.alerte-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  font-family: var(--ff-text);
  font-size: 13px;
  color: var(--gris-900);
  line-height: 1.45;
}
.alerte-row .alerte-icon {
  font-family: var(--ff-display);
  font-weight: 700;
  color: var(--orange);
  text-align: center;
}
.alerte-row.bloquant .alerte-icon { color: var(--rouge); }
.alerte-row.bloquant { font-weight: 600; }
.alerte-row.info .alerte-icon { color: var(--bleu); }
.alerte-row .alerte-sub {
  color: var(--gris-500);
  font-size: 12px;
}
.alertes-inner.has-critical {
  background: #FEF1F1;
  border-left-color: var(--rouge);
}
.alertes-inner.has-critical .alertes-title { color: var(--rouge); }
.alerte-row.critique .alerte-icon { color: var(--rouge); }
.alerte-row.critique { font-weight: 600; }
.alerte-row.mineur .alerte-icon { color: var(--gris-500); }
.alerte-row.mineur { color: var(--gris-700); }

/* ----- Synthèse arbitrant (sous Pourquoi ce prix) ----- */
.synthese-block {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--noir);
  color: var(--blanc);
  border-radius: 6px;
  border-left: 4px solid var(--bleu);
}
.synthese-eyebrow {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 6px;
}
.synthese-text {
  font-family: var(--ff-text);
  font-size: 14px;
  line-height: 1.55;
  color: var(--blanc);
}
.synthese-text b { color: var(--bleu); font-weight: 600; }
.synthese-mix {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px 22px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(159, 200, 255, 0.25);
}
.synthese-mix-line {
  font-family: var(--ff-text);
  font-size: 13px;
  color: var(--gris-300);
  line-height: 1.55;
}
.synthese-mix-line .mix-label {
  display: block;
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bleu);
  margin-bottom: 3px;
}
.synthese-mix-line b { color: var(--blanc); font-weight: 600; }

/* ----- Hero "Pourquoi ce produit" ----- */
.hero-product-why {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--bleu);
  font-family: var(--ff-text);
  font-size: 12px;
  line-height: 1.55;
  color: var(--gris-300);
  border-radius: 0 4px 4px 0;
  max-width: 56ch;
}

/* =========================================================================
   PRINT : snapshot synthèse 1 page A4 portrait (2026-06-08).
   Refonte complète : au lieu d'imprimer l'UI active (tabs cachées
   perdues, hero noir tronqué A4, mise en page écran non calibrée),
   on construit un DOM snapshot dédié #emk-print-snapshot rempli à la
   volée par beforeprint. Le snapshot est masqué par défaut, affiché
   exclusivement en print. Tout le reste du body est masqué.
   Compatible Ctrl+P manuel.
   ========================================================================= */
#emk-print-snapshot {
  display: none;
}

@media print {
  @page { size: A4 portrait; margin: 0; }
  html, body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  body > * { display: none !important; }
  body > #emk-print-snapshot { display: block !important; }

  #emk-print-snapshot {
    display: block;
    width: 210mm;
    min-height: 297mm;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #111113;
    font-size: 9pt;
    line-height: 1.4;
    background: white;
    overflow: hidden;
  }

  /* ===== Hero noir (pleine largeur, sous le bord du papier) ===== */
  .eps-hero {
    background: #0A0A0A;
    color: #FAFAFA;
    padding: 12pt 14pt 14pt;
    position: relative;
    overflow: hidden;
  }
  .eps-hero::before {
    content: '';
    position: absolute;
    top: -80pt; right: -80pt;
    width: 240pt; height: 240pt;
    background: radial-gradient(circle, rgba(159,200,255,0.18) 0%, rgba(159,200,255,0) 60%);
    pointer-events: none;
  }
  .eps-hero-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }
  .eps-brand {
    display: flex;
    align-items: center;
    gap: 7pt;
  }
  .eps-logo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5pt;
    width: 14pt; height: 14pt;
  }
  .eps-logo span { background: #FAFAFA; border-radius: 1pt; }
  .eps-logo span:nth-child(2) { background: #9FC8FF; }
  .eps-brand-name {
    font-family: 'Montserrat', sans-serif;
    font-size: 11pt;
    font-weight: 700;
    color: #FAFAFA;
    letter-spacing: -0.02em;
  }
  .eps-eyebrow-top {
    margin-left: 14pt;
    font-family: 'Montserrat', sans-serif;
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.20em;
    text-transform: uppercase;
    color: #9FC8FF;
    padding-top: 2pt;
  }
  .eps-meta-date {
    margin-left: auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 8pt;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    padding-top: 2pt;
  }
  .eps-hero-main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 14pt;
    position: relative;
    z-index: 1;
  }
  .eps-hero-titlewrap { flex: 1; min-width: 0; }
  .eps-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 30pt;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: #FAFAFA;
    margin: 0 0 5pt 0;
  }
  .eps-hero-sub {
    font-size: 8.5pt;
    color: rgba(255,255,255,0.65);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
  }
  .eps-hero-pop {
    text-align: right;
    border-left: 0.5pt solid rgba(159,200,255,0.22);
    padding-left: 14pt;
    min-width: 110pt;
  }
  .eps-hero-pop-lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 6.5pt;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #9FC8FF;
    margin-bottom: 4pt;
  }
  .eps-hero-pop-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 22pt;
    font-weight: 700;
    color: #FAFAFA;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
  }
  .eps-hero-pop-sub {
    font-size: 7.5pt;
    color: rgba(255,255,255,0.65);
    margin-top: 3pt;
  }

  /* ===== Body interne ===== */
  .eps-body { padding: 14pt 14pt 12pt; }

  /* ===== Diagnostic ===== */
  .eps-diag {
    border-left: 2pt solid #9FC8FF;
    padding: 6pt 0 6pt 12pt;
    margin-bottom: 16pt;
    font-size: 10pt;
    line-height: 1.5;
    color: #27272A;
  }
  .eps-diag b { color: #111113; font-weight: 600; }

  /* ===== Section eyebrow ===== */
  .eps-sec-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 7.5pt;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #71717A;
    margin: 0 0 8pt 0;
    padding-bottom: 4pt;
    border-bottom: 0.5pt solid #D4D4D8;
  }

  /* ===== 3 KPI dominants (avec mini-viz inline) ===== */
  .eps-kpi3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12pt;
    margin-bottom: 16pt;
  }
  .eps-kpi3-card {
    padding: 10pt 12pt 10pt;
    border: 0.5pt solid #D4D4D8;
    border-radius: 4pt;
  }
  .eps-kpi3-lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 6.5pt;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #71717A;
    margin-bottom: 6pt;
  }
  .eps-kpi3-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 26pt;
    font-weight: 700;
    color: #111113;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    /* display: block (et pas inline-flex) : l'::after underline retombe
       sous le chiffre via margin-top, au lieu de devenir un flex-item à
       droite du <span class="unit"> ce qui donnait une fausse "courbe"
       visible sur l'export A4 v2. Le <span class="unit"> reste inline → suit
       le chiffre sur la même ligne. */
    display: block;
  }
  .eps-kpi3-val .unit {
    font-size: 11pt;
    color: #71717A;
    font-weight: 600;
    margin-left: 3pt;
    vertical-align: baseline;
  }
  .eps-kpi3-val::after {
    content: '';
    display: block;
    width: 22pt;
    height: 2pt;
    background: #9FC8FF;
    margin-top: 5pt;
  }
  .eps-kpi3-viz {
    margin-top: 8pt;
    height: 32pt;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .eps-kpi3-viz svg {
    display: block;
    /* Contraint le SVG à la zone .eps-kpi3-viz tout en laissant viewBox +
       preserveAspectRatio (par défaut "xMidYMax meet" sur la jauge, "none"
       sur spark + bars) gérer le ratio. Sans cette contrainte, les SVG
       sans attributs width/height prenaient leur taille intrinsèque. */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: 100%;
  }
  /* Sparkline + bars : étirement horizontal sur toute la largeur de la card
     (preserveAspectRatio="none" sur ces deux helpers). On force width:100%
     uniquement quand le ratio doit s'étendre. La jauge garde son ratio
     centré via width:auto. */
  .eps-kpi3-card .eps-kpi3-viz svg[preserveAspectRatio="none"] {
    width: 100%;
  }
  .eps-kpi3-sub {
    margin-top: 6pt;
    font-size: 8pt;
    color: #71717A;
    line-height: 1.4;
  }
  .eps-kpi3-sub b { color: #27272A; font-weight: 600; }

  /* ===== 5 KPI secondaires ===== */
  .eps-kpi5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7pt;
    margin-bottom: 16pt;
  }
  .eps-kpi5-card {
    padding: 8pt 9pt 9pt;
    border: 0.5pt solid #D4D4D8;
    border-left: 1.5pt solid #9FC8FF;
    border-radius: 3pt;
  }
  .eps-kpi5-lbl {
    font-family: 'Montserrat', sans-serif;
    font-size: 6pt;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #71717A;
    margin-bottom: 4pt;
  }
  .eps-kpi5-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 14pt;
    font-weight: 700;
    color: #111113;
    line-height: 1;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
  }
  .eps-kpi5-val .unit {
    font-size: 7.5pt;
    color: #71717A;
    font-weight: 600;
    margin-left: 2pt;
  }
  .eps-kpi5-sub {
    margin-top: 4pt;
    font-size: 7pt;
    color: #71717A;
    line-height: 1.35;
  }

  /* ===== 2 colonnes (Transports + Environnement) ===== */
  .eps-two-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14pt;
    margin-bottom: 16pt;
  }
  .eps-block-head {
    display: flex;
    align-items: center;
    gap: 6pt;
    margin: 0 0 8pt 0;
    padding-bottom: 4pt;
    border-bottom: 0.5pt solid #D4D4D8;
  }
  .eps-block-ico {
    width: 14pt; height: 14pt;
    border-radius: 3pt;
    background: #F4F4F5;
    color: #3F3F46;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }
  .eps-block-ico svg { width: 10pt; height: 10pt; }
  .eps-block-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    color: #111113;
    letter-spacing: -0.01em;
  }
  .eps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 8.5pt;
  }
  .eps-list li {
    display: flex;
    align-items: baseline;
    gap: 6pt;
    padding: 4pt 0;
    border-bottom: 0.5pt dotted #E5E7EB;
    line-height: 1.4;
  }
  .eps-list li:last-child { border-bottom: 0; }
  .eps-list-lbl { flex: 1; color: #27272A; }
  .eps-list-lbl .meta { color: #71717A; font-size: 8pt; }
  .eps-list-val {
    font-family: 'Montserrat', sans-serif;
    font-size: 9pt;
    font-weight: 700;
    color: #111113;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* ===== Forces / Vigilance ===== */
  .eps-fv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12pt;
    margin-bottom: 14pt;
  }
  .eps-fv-col {
    border: 0.5pt solid #D4D4D8;
    border-radius: 3pt;
    padding: 10pt 12pt;
    background: #FAFAFA;
  }
  .eps-fv-lbl {
    display: flex;
    align-items: center;
    gap: 6pt;
    font-family: 'Montserrat', sans-serif;
    font-size: 7pt;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #71717A;
    margin-bottom: 8pt;
  }
  .eps-fv-dot {
    width: 5pt; height: 5pt;
    border-radius: 999pt;
    background: #71717A;
  }
  .eps-fv-col.forces .eps-fv-dot { background: #3F3F46; }
  .eps-fv-col.vigilance .eps-fv-dot { background: #F59E0B; }
  .eps-fv-ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 8.5pt;
    line-height: 1.5;
  }
  .eps-fv-ul li {
    padding: 2pt 0 2pt 12pt;
    position: relative;
    color: #27272A;
  }
  .eps-fv-ul li b { color: #111113; font-weight: 600; }
  .eps-fv-col.forces .eps-fv-ul li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #3F3F46;
    font-weight: 700;
  }
  .eps-fv-col.vigilance .eps-fv-ul li::before {
    content: '!';
    position: absolute;
    left: 0;
    color: #F59E0B;
    font-weight: 700;
  }

  /* ===== Footer signature M(i)randa ===== */
  .eps-footer {
    border-top: 1pt solid #111113;
    padding-top: 8pt;
    margin-top: 4pt;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14pt;
  }
  .eps-footer-sources {
    flex: 1;
    font-size: 7pt;
    color: #71717A;
    line-height: 1.55;
  }
  .eps-footer-eyebrow {
    font-family: 'Montserrat', sans-serif;
    font-size: 6.5pt;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #3F3F46;
    margin-right: 4pt;
  }
  .eps-footer-sig {
    text-align: right;
    line-height: 1.3;
  }
  .eps-footer-sig-m {
    font-family: 'Montserrat', sans-serif;
    font-size: 13pt;
    font-weight: 700;
    color: #111113;
    letter-spacing: -0.025em;
  }
  .eps-footer-sig-m i { color: #9FC8FF; font-style: normal; }
  .eps-footer-sig-sub {
    font-family: 'Montserrat', sans-serif;
    font-size: 6.5pt;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #71717A;
    margin-top: 2pt;
  }
}

/* ----- Drivers grid : asymétrie 1.5fr/1fr quand 2 cards (pattern pivot),
   sinon repeat auto. Refonte "premium pulse" 2026-06-08. ----- */
.drivers-grid {
  margin: 0 0 24px 0; width: 100%; box-sizing: border-box;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 20px;
  max-width: none;
}
/* Pattern dominant : 2 cards = pivot 1.5× + secondaire 1× */
.drivers-grid.cols-pivot {
  grid-template-columns: 1.5fr 1fr;
}
.driver-card {
  background: var(--blanc);
  border: 1px solid var(--gris-200, #E5E7EB);
  border-radius: 10px;
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.02);
  min-width: 0;
  height: 100%;
}
.driver-card.span-2 { grid-column: span 2; }
/* Card pivot : bordure gauche bleu 3px — signature de la card dominante du tab */
.driver-card.pivot {
  border-left: 3px solid var(--bleu, #9FC8FF);
  padding-left: 26px;
}
.driver-card .card-head {
  border-bottom: 1px solid var(--gris-100);
  padding-bottom: 16px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.driver-card .card-title {
  font-family: var(--ff-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gris-900);
  display: flex;
  align-items: center;
  gap: 8px;
}
.driver-card .card-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--gris-100, #F4F4F5);
  color: var(--gris-700, #3F3F46);
  flex-shrink: 0;
}
.driver-card .card-ico svg { width: 16px; height: 16px; }
.driver-card .card-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.driver-card .card-subtitle {
  margin-top: 0;
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.driver-card .card-aux {
  margin-left: auto;
  font-family: var(--ff-text);
  font-size: 11px;
  color: var(--gris-500);
  font-variant-numeric: tabular-nums;
}
.driver-card .card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.card-empty,
.card-loading {
  font-family: var(--ff-text);
  font-size: 12px;
  color: var(--gris-500);
  padding: 14px;
  background: var(--gris-100);
  border-radius: 4px;
  text-align: center;
}
.card-fallback {
  padding: 12px 14px;
  background: var(--gris-100);
  border-left: 2px solid var(--bleu);
  border-radius: 0 4px 4px 0;
  font-size: 12px;
  color: var(--gris-700);
  line-height: 1.5;
}
.card-fallback p { margin: 6px 0 10px; }
.fallback-eyebrow {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500);
}

/* ----- Metric row : pattern "premium pulse" — dot bleu devant label
   dominant, chiffre 36px tabular-nums, respiration calibrée. ----- */
.metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  padding-left: 14px;
}
/* Signature : dot bleu devant chaque label dominant */
.metric::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 4px;
  height: 4px;
  background: var(--bleu, #9FC8FF);
  border-radius: 999px;
}
.metric-lbl {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500);
}
.metric-val {
  font-family: var(--ff-display);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  color: var(--gris-900);
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.metric-val .unit {
  font-size: 12px;
  color: var(--gris-500);
  font-weight: 600;
  margin-left: 3px;
  letter-spacing: 0;
}
.metric-val.verdict {
  font-size: 16px;
  letter-spacing: 0.01em;
}
.metric-val.verdict-on { color: var(--vert); }
.metric-val.verdict-mid { color: var(--orange); }
.metric-val.verdict-off { color: var(--gris-700); }
.metric-sub {
  font-family: var(--ff-text);
  font-size: 11px;
  color: var(--gris-500);
  margin-top: 2px;
  line-height: 1.4;
}
/* ─────────────────────────────────────────────────────────────────────
   Hero band par tab — refonte "premium pulse" 2026-06-08 :
   fond noir, 3 KPI alignés avec séparateurs verticaux bleu transparent,
   radial accent subtil en haut à droite (signature Miranda),
   primary KPI avec underline bleu 2px sous le chiffre dominant.
   ───────────────────────────────────────────────────────────────────── */
.emk-tab-hero {
  background: #0A0A0A;
  color: #FAFAFA;
  border-radius: 12px;
  padding: 32px 36px 28px;
  margin: 0 0 24px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  animation: emkFadeUp 0.4s ease-out both;
  position: relative;
  overflow: hidden;
}
.emk-tab-hero.hidden { display: none; }
.emk-tab-hero::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(159,200,255,0.10) 0%, rgba(159,200,255,0) 60%);
  pointer-events: none;
}
.emk-hero-eyebrow-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  position: relative;
  z-index: 1;
}
.emk-hero-eyebrow-dot {
  width: 4px; height: 4px;
  background: #9FC8FF;
  border-radius: 999px;
  flex-shrink: 0;
}
.emk-hero-eyebrow {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9FC8FF;
}
.emk-hero-meta {
  margin-left: auto;
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.02em;
}

/* Grille 3 KPI : primary + 2 secondaires, primary 1.4× plus large */
.emk-hero-kpis {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 0;
  position: relative;
  z-index: 1;
}
.emk-hero-kpi {
  padding: 4px 36px 4px 0;
  border-right: 1px solid rgba(159,200,255,0.12);
}
.emk-hero-kpi + .emk-hero-kpi { padding-left: 36px; }
.emk-hero-kpi:last-child { border-right: 0; padding-right: 0; }

.emk-hero-kpi-label {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.emk-hero-kpi-label svg { color: #9FC8FF; opacity: 0.85; width: 12px; height: 12px; flex-shrink: 0; }

.emk-hero-kpi-val {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: clamp(40px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  color: #FAFAFA;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.emk-hero-kpi-val-mid {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: #FAFAFA;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.emk-hero-kpi-val .unit,
.emk-hero-kpi-val-mid .unit {
  font-size: 0.32em;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0;
}
/* Signature : underline bleu sous le chiffre primary */
.emk-hero-kpi.primary .emk-hero-kpi-val::after {
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: #9FC8FF;
  margin-top: 10px;
}
.emk-hero-kpi-sub {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-top: 12px;
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.emk-hero-kpi-sub b { color: #FAFAFA; font-weight: 600; }
.emk-hero-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}

/* Fallback ancien pattern (badge + sub) — conservé pour compatibilité */
.emk-hero-main {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.emk-hero-val {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #FAFAFA;
  font-variant-numeric: tabular-nums;
}
.emk-hero-unit {
  font-size: 0.42em;
  color: #71717A;
  margin-left: 4px;
  font-weight: 600;
}
.emk-hero-sub {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 13px;
  color: #A1A1AA;
  margin-top: 8px;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 1;
}

/* Responsive : sur mobile, KPIs empilés, séparateurs horizontaux */
@media (max-width: 900px) {
  .emk-hero-kpis {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .emk-hero-kpi {
    padding: 14px 0 0 0;
    border-right: 0;
    border-top: 1px solid rgba(159,200,255,0.12);
  }
  .emk-hero-kpi:first-child {
    padding-top: 0;
    border-top: 0;
  }
  .emk-hero-kpi + .emk-hero-kpi { padding-left: 0; }
}
.emk-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: none;
  white-space: nowrap;
  background: rgba(255,255,255,0.08);
  color: #E5E5EA;
  border: 1px solid rgba(255,255,255,0.12);
}
/* Pills hero — neutralisées (DA Miranda : vert/orange/rouge réservés au verdict
   métier dur du bilan, pas au scoring décoratif d'environnement). Un seul
   style sobre, contraste lisible sur fond noir. Si verdict réel nécessaire,
   passer par le verdict global Synthèse, pas par ces pills. */
.emk-hero-badge.good,
.emk-hero-badge.mid,
.emk-hero-badge.low,
.emk-hero-badge.neutral {
  background: rgba(255,255,255,0.08);
  color: #E5E5EA;
  border-color: rgba(255,255,255,0.12);
}

@keyframes emkFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Icône wrapper générique dans les eyebrows / labels — alignement baseline */
.syn-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;
  color: currentColor;
  opacity: 0.75;
  vertical-align: -2px;
}
.syn-ico svg { display: block; }

/* Eyebrow de section interne (entre opener et grille) */
.synthese-section-eyebrow {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gris-500, #71717A);
  margin: 24px 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--gris-100, #F3F4F6);
}

/* Subtitle géographique — sous le titre commune */
.synthese-loc {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 12px;
  font-weight: 500;
  color: var(--gris-500, #71717A);
  letter-spacing: 0.02em;
  margin: -8px 0 12px 0;
  font-variant-numeric: tabular-nums;
}

/* Grille KPI vedettes (rangée 1) — 4 colonnes max, tuiles larges */
.synthese-grid-vedettes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.synthese-grid-vedettes .syn-card {
  min-height: 130px;
}

/* Grille KPI secondaires (rangée 2) — tuiles compactes */
.synthese-grid-secondaires {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.syn-card-mini {
  padding: 16px 18px;
}
.syn-card-mini .syn-val { font-size: 22px; margin-top: 6px; }
.syn-card-mini .syn-val::after { width: 16px; margin-top: 6px; }
.syn-card-mini .syn-val-text { font-size: 15px; }
.syn-card-mini .syn-sub { font-size: 11px; margin-top: 4px; }

/* Synthèse — refonte "premium pulse" 2026-06-08 :
   header diagnostic distinct avec bordure latérale bleu 3px (signature),
   titre 36px Montserrat, lede texte courte, badges neutres déjà appliqués. */
.synthese-card {
  background: var(--blanc, #FFFFFF);
  position: relative;
  overflow: hidden;
}
.synthese-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--bleu, #9FC8FF);
}
.synthese-opener {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--gris-200, #E5E7EB);
}
.synthese-eyebrow {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9FC8FF;
}
.synthese-title {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 36px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--gris-900, #18181B);
  margin: 6px 0 6px 0;
}
.synthese-lede {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 15px;
  line-height: 1.55;
  color: var(--gris-700, #3F3F46);
  margin: 0 0 14px 0;
  letter-spacing: -0.005em;
  max-width: 78ch;
}
.synthese-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.syn-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--gris-100, #F3F4F6);
  color: var(--gris-700, #3F3F46);
  border: 1px solid var(--gris-200, #E5E7EB);
}
/* Badges contextuels Synthèse — neutralisés. La pill descriptive ne porte
   pas de verdict (« Marché stable », « Quartier porteur » sont des
   qualifications, pas des GO/NO GO foncier). Un seul style sobre, qu'on
   peut lire en cluster sans surcharge chromatique. */
.syn-badge.good,
.syn-badge.mid,
.syn-badge.low,
.syn-badge.neutral {
  background: var(--gris-100, #F4F4F5);
  color: var(--gris-700, #3F3F46);
  border-color: var(--gris-300, #D6DAE0);
}

.synthese-fv {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--gris-200, #E5E7EB);
}
/* Colonnes Forces / Vigilance — refonte neutre. Fond blanc, bordure latérale
   sobre, eyebrows en gris 500. Seuls les marqueurs ✓ / ! portent la couleur
   sémantique (gris-700 pour ✓ — c'est une force, pas un verdict GO ; orange
   pour ! — c'est un vrai point de vigilance). */
.synthese-fv-col {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--blanc, #FFFFFF);
  border: 1px solid var(--gris-300, #D6DAE0);
}
.synthese-fv-col.forces,
.synthese-fv-col.vigilance {
  border-left: 3px solid var(--gris-300, #D6DAE0);
  background: var(--blanc, #FFFFFF);
}
.syn-fv-eyebrow {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500, #71717A);
  margin-bottom: 8px;
}
.synthese-fv-col.forces .syn-fv-eyebrow,
.synthese-fv-col.vigilance .syn-fv-eyebrow { color: var(--gris-500, #71717A); }
.syn-fv-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.syn-fv-list li {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 13px;
  line-height: 1.45;
  color: var(--gris-800, #27272A);
  padding-left: 16px;
  position: relative;
}
.synthese-fv-col.forces .syn-fv-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--gris-700, #3F3F46);
  font-weight: 700;
}
.synthese-fv-col.vigilance .syn-fv-list li::before {
  content: '!';
  position: absolute;
  left: 0;
  color: var(--orange, #F59E0B);
  font-weight: 700;
}
.syn-fv-empty { color: var(--gris-500, #71717A); font-style: italic; }
.syn-fv-empty::before { display: none !important; }

/* Footer Sources compact en bas de chaque pane */
.emk-footer {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 11px;
  line-height: 1.55;
  color: var(--gris-500, #71717A);
  padding: 20px 24px 28px;
  margin-top: 24px;
  border-top: 1px solid var(--gris-100, #F3F4F6);
  letter-spacing: -0.005em;
}
.emk-footer-eyebrow {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-700, #3F3F46);
  margin-right: 6px;
}
.emk-footer-sep {
  color: var(--gris-300, #D6DAE0);
  margin: 0 4px;
}

/* Badge zone Pinel — pill colorée selon tension marché */
.emk-zone-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  border: 1px solid;
  font-variant-numeric: tabular-nums;
}
/* Pill zone Pinel — neutralisée. La zone (A bis, A, B1, B2, C) est une
   info réglementaire, pas un verdict d'opération. La typo bold + tabular
   suffit à rendre la zone identifiable. */
.emk-zone-pill.good,
.emk-zone-pill.neutral,
.emk-zone-pill.mid,
.emk-zone-pill.low {
  background: var(--gris-100, #F4F4F5);
  color: var(--gris-900, #18181B);
  border-color: var(--gris-300, #D6DAE0);
}

/* Mini-graphiques SVG (sparkline / bars / donut / gauge) */
.emk-chart-row {
  margin: 10px 0;
  padding: 12px 0;
}
.emk-chart-row-flex {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
.emk-chart-lbl {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gris-500, #71717A);
  margin-bottom: 8px;
}
.emk-chart-sub {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--gris-500, #71717A);
  margin-top: 6px;
  letter-spacing: -0.005em;
}
.emk-chart-row svg.emk-spark { display: block; width: 100%; max-width: 320px; height: 56px; }
.emk-chart-row svg.emk-bars { display: block; width: 100%; max-width: 360px; height: auto; }
.emk-chart-row svg.emk-barsh { display: block; width: 100%; }
.emk-chart-row svg.emk-donut { display: block; flex-shrink: 0; }
.emk-spark-empty {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--gris-500, #71717A);
  font-style: italic;
}
.emk-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emk-legend li {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 12px;
  color: var(--gris-700, #3F3F46);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.emk-legend-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}
.emk-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Tuile jauge dans la grille Synthèse */
.syn-card-gauge {
  text-align: center;
  padding-bottom: 12px;
}
.syn-card-gauge .syn-lbl { text-align: left; }
.syn-card-gauge .syn-sub { text-align: left; margin-top: 8px; }
.syn-gauge-wrap {
  display: flex;
  justify-content: center;
  margin: 8px 0 4px 0;
}
.syn-gauge-wrap svg.emk-gauge { max-width: 200px; height: auto; }

/* Stagger fade-in cards drivers */
.driver-card { animation: emkFadeUp 0.4s ease-out both; }
.drivers-grid .driver-card:nth-child(1) { animation-delay: 0ms; }
.drivers-grid .driver-card:nth-child(2) { animation-delay: 80ms; }
.drivers-grid .driver-card:nth-child(3) { animation-delay: 160ms; }
.drivers-grid .driver-card:nth-child(4) { animation-delay: 240ms; }
.drivers-grid .driver-card:nth-child(5) { animation-delay: 320ms; }

/* ─────────────────────────────────────────────────────────────────────
   Tabs étude de marché — refonte 2026-06-06
   ───────────────────────────────────────────────────────────────────── */
.emk-tabnav {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--gris-300, #D6DAE0);
  margin: 0 0 18px 0;
  background: transparent;
}
.emk-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 12px 20px;
  margin-bottom: -1px;
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--gris-500, #71717A);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
  outline: none;
}
.emk-tab:hover { color: var(--gris-900, #18181B); }
.emk-tab:focus-visible {
  color: var(--gris-900, #18181B);
  box-shadow: inset 0 -2px 0 var(--bleu, #9FC8FF);
}
.emk-tab.active {
  color: var(--gris-900, #18181B);
  border-bottom-color: var(--bleu, #9FC8FF);
}
.emk-tab-pane { display: none; }
.emk-tab-pane.active { display: block; }

/* Grille synthèse — auto-fit, gros chiffres */
.synthese-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.syn-card {
  padding: 22px 22px 24px;
  border-radius: 10px;
  background: var(--blanc, #FFFFFF);
  border: 1px solid var(--gris-200, #E5E7EB);
  border-left-color: var(--gris-200, #E5E7EB);
  min-width: 0;
  position: relative;
}
.syn-lbl {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500, #71717A);
  display: flex;
  align-items: center;
  gap: 6px;
}
.syn-lbl svg { width: 12px; height: 12px; color: var(--gris-500, #71717A); }
.syn-val {
  font-family: var(--ff-display, 'Montserrat', sans-serif);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.05;
  margin-top: 10px;
  letter-spacing: -0.025em;
  color: var(--gris-900, #18181B);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
/* Signature : underline bleu sous le chiffre vedette */
.syn-val::after {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--bleu, #9FC8FF);
  margin-top: 8px;
}
.syn-val-text { font-size: 22px; letter-spacing: -0.005em; }
/* Textes (Hors QPV, A bis) n'héritent pas du underline bleu — l'accent
   reste réservé aux vrais chiffres pour préserver la signature. */
.syn-val.syn-val-text::after { display: none; }
.syn-card-gauge .syn-val::after { display: none; }
.syn-unit { font-size: 0.45em; color: var(--gris-500, #71717A); font-weight: 600; margin-left: 2px; }
.syn-sub {
  font-family: var(--ff-text, 'Inter', sans-serif);
  font-size: 11px;
  color: var(--gris-600, #52525B);
  margin-top: 4px;
  line-height: 1.4;
}
/* Cards Synthèse — neutralisées (DA Miranda : pas de dashboard feux tricolores).
   Toutes les tuiles partagent le même style sobre : fond blanc, bordure latérale
   gris-300, chiffre noir. La hiérarchie passe par la taille du chiffre, pas par
   le fond coloré. Le verdict métier reste porté par le bilan, pas par les KPI. */
.syn-card.good,
.syn-card.mid,
.syn-card.low {
  border-left-color: var(--gris-300, #D6DAE0);
  background: var(--blanc, #FFFFFF);
  border: 1px solid var(--gris-300, #D6DAE0);
  border-left-width: 3px;
}
.syn-card.good .syn-val,
.syn-card.mid .syn-val,
.syn-card.low .syn-val { color: var(--gris-900, #18181B); }

/* Hero score (walkability, densité médicale) — fond bandeau + chiffre 32px */
.metric.metric-hero {
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gris-50, #F6F7F9);
  border-left: 3px solid var(--gris-300, #D6DAE0);
  min-width: 0;
}
.metric.metric-hero .metric-val { font-size: 32px; }
/* Hero score interne (walkability, densité médicale) — neutralisé. Le score
   numérique parle de lui-même, la couleur de fond n'apporte qu'un bruit
   sémantique parasite. */
.metric.metric-hero.good,
.metric.metric-hero.mid,
.metric.metric-hero.low {
  border-left-color: var(--gris-300, #D6DAE0);
  background: var(--gris-100, #F4F4F5);
}
.metric.metric-hero.good .metric-val,
.metric.metric-hero.mid  .metric-val,
.metric.metric-hero.low  .metric-val { color: var(--gris-900, #18181B); }

.subblock-eyebrow {
  font-family: var(--ff-display);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500);
  margin: 6px 0 0;
  padding-top: 8px;
  border-top: 1px dashed var(--gris-100);
}

/* ----- Tables mini ----- */
table.mini {
  width: 100%;
  font-size: 11px;
  border-collapse: collapse;
}
table.mini th,
table.mini td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--gris-100);
  text-align: left;
}
table.mini th {
  font-family: var(--ff-display);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--gris-500);
  background: var(--gris-100);
}
table.mini td.num,
table.mini th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- Bullets ----- */
ul.bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--gris-700);
}
ul.bullets li {
  padding: 4px 0 4px 14px;
  position: relative;
  line-height: 1.45;
}
ul.bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--bleu);
}
ul.bullets li b { font-weight: 600; color: var(--gris-900); }
ul.bullets.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

.kv-line {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--gris-100);
  color: var(--gris-700);
}
.kv-line b { color: var(--gris-900); }

.quartiles {
  font-size: 11px;
  color: var(--gris-500);
  font-style: italic;
}

.zone-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 4px;
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--noir);
  color: var(--blanc);
}
.zone-tag.zone-A_bis { background: var(--noir); color: var(--bleu); }
.zone-tag.zone-A     { background: var(--gris-900); color: var(--bleu); }
.zone-tag.zone-B1    { background: var(--gris-700); color: var(--blanc); }
.zone-tag.zone-B2,
.zone-tag.zone-C     { background: var(--gris-500); color: var(--blanc); }

/* ----- JSON brut replié ----- */
.raw-details {
  margin: 24px 0 0; width: 100%; box-sizing: border-box;
  max-width: none;
  padding: 0 32px;
}
.raw-details summary {
  cursor: pointer;
  font-family: var(--ff-display);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-500);
  padding: 8px 0;
  list-style: none;
}
.raw-details summary::-webkit-details-marker { display: none; }
.raw-details[open] summary { color: var(--gris-700); }
.raw-details .raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.45;
  background: var(--blanc);
  color: var(--gris-700);
  padding: 12px;
  border: 1px solid var(--gris-300);
  border-radius: 4px;
  max-height: 420px;
  overflow: auto;
  white-space: pre-wrap;
}

/* ----- Responsive ----- */
@media (max-width: 1400px) {
  .drivers-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .driver-card.span-2 { grid-column: span 1; }
}
@media (max-width: 1024px) {
  .drivers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .driver-card.span-2 { grid-column: span 2; }
}
@media (max-width: 900px) {
  .results-topbar {
    grid-template-columns: auto 1fr auto;
    padding: 14px 18px;
  }
  .hero-card { margin: 18px 16px 0; padding: 24px 22px; }
  .hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .hero-price { font-size: 52px; }
  .drivers-grid { padding: 0 16px; margin-top: 22px; gap: 14px; }
  .metric-row { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .drivers-grid { grid-template-columns: 1fr; }
  .driver-card.span-2 { grid-column: span 1; }
}