/* La police Inter est chargée via <link> dans le <head> des templates
   (préconnexion + chargement parallèle), et non par @import — un @import ici
   sérialise le téléchargement (CSS → @import → police) et retarde le rendu. */

/* ─── Design tokens ─────────────────────────────────────────────────────── */
:root {
  /* Colors */
  --color-background:              #fbf9f4;
  --color-surface:                 #fbf9f4;
  --color-surface-dim:             #dbdad5;
  --color-surface-bright:          #fbf9f4;
  --color-surface-container-lowest:#ffffff;
  --color-surface-container-low:   #f5f3ee;
  --color-surface-container:       #f0eee9;
  --color-surface-container-high:  #eae8e3;
  --color-surface-container-highest:#e4e2dd;
  --color-on-surface:              #1b1c19;
  --color-on-surface-variant:      #54433e;
  --color-inverse-surface:         #30312e;
  --color-inverse-on-surface:      #f2f1ec;
  --color-outline:                 #87736d;
  --color-outline-variant:         #dac1ba;
  --color-surface-tint:            #954830;

  --color-primary:                 #91452d;
  --color-on-primary:              #ffffff;
  --color-primary-container:       #af5d43;
  --color-on-primary-container:    #fffaf9;
  --color-inverse-primary:         #ffb59e;

  --color-secondary:               #865220;
  --color-on-secondary:            #ffffff;
  --color-secondary-container:     #feb87c;
  --color-on-secondary-container:  #784714;

  --color-tertiary:                #625a4e;
  --color-on-tertiary:             #ffffff;
  --color-tertiary-container:      #7b7366;
  --color-on-tertiary-container:   #fffbfa;

  --color-error:                   #ba1a1a;
  --color-on-error:                #ffffff;
  --color-error-container:         #ffdad6;
  --color-on-error-container:      #93000a;

  --color-surface-variant:         #e4e2dd;

  /* Typography */
  --font-family:        'Inter', system-ui, sans-serif;

  --text-display-lg-size:   48px;
  --text-display-lg-weight: 600;
  --text-display-lg-lh:     56px;
  --text-display-lg-ls:     -0.02em;

  --text-headline-lg-size:   32px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-lh:     40px;
  --text-headline-lg-ls:     -0.01em;

  --text-headline-md-size:   24px;
  --text-headline-md-weight: 500;
  --text-headline-md-lh:     32px;

  --text-body-lg-size:   18px;
  --text-body-lg-weight: 400;
  --text-body-lg-lh:     28px;

  --text-body-md-size:   16px;
  --text-body-md-weight: 400;
  --text-body-md-lh:     24px;

  --text-body-sm-size:   14px;
  --text-body-sm-weight: 400;
  --text-body-sm-lh:     20px;

  --text-label-caps-size:   12px;
  --text-label-caps-weight: 700;
  --text-label-caps-lh:     16px;
  --text-label-caps-ls:     0.05em;

  --text-data-size:   14px;
  --text-data-weight: 500;
  --text-data-lh:     20px;

  /* Spacing */
  --space-unit:          8px;
  --space-container-max: 1440px;
  --space-gutter:        24px;
  --space-margin-mobile: 16px;
  --space-margin-desktop:48px;
  --space-section-gap:   64px;

  /* Border radius */
  --radius-sm:   0.125rem;
  --radius-base: 0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* Elevation */
  --shadow-modal: 0px 12px 32px rgba(115, 107, 94, 0.08);
  --border-card:  1px solid #e8e0d5;

  /* Voiles translucides (barres flottantes, panneaux de carte, pastilles).
     Tokenises pour pouvoir basculer en mode nuit — voir DESIGN.md. */
  --scrim-header: rgba(251, 249, 244, 0.85);
  --scrim-panel:  rgba(251, 249, 244, 0.95);
  --scrim-chip:   rgba(255, 255, 255, 0.92);

  /* Fonds teintes des pastilles et blocs de statut. Les teintes d'accent
     (textes, lisereaux) restent invariantes ; seuls ces fonds basculent. */
  --tint-primary:   #fff8f6;
  --tint-terra:     #f5e6e3;
  --tint-ochre:     #fef3e6;
  --tint-warm:      #ffdbc7;
  --tint-sand:      #e8e0db;
  --tint-green:     #d3e9dd;
  --tint-emerald:   #d1fae5;
  --tint-amber:     #fef3c7;
  --tint-red:       #fee2e2;
  --tint-violet:    #ede9fe;
  --tint-slate:     #f3f4f6;
  --tint-slate-alt: #e5e7eb;
  --tint-mint:      #ecfdf5;
  --tint-cream:     #fffbeb;
  --tint-peach:     #fdf1e6;
  --tint-blush:     #fdf6f3;
}

/* ─── Mode nuit ──────────────────────────────────────────────────────────
   Le schema clair est un Material 3 complet : les valeurs sombres en sont
   les contreparties, l'inverse-primary clair (#ffb59e) devenant le primary
   sombre. Aucune teinte nouvelle n'est introduite hors de cette logique.
   Applique par [data-theme="dark"] pose sur <html> avant le rendu. */
:root[data-theme="dark"] {
  --color-background:              #16140f;
  --color-surface:                 #16140f;
  --color-surface-dim:             #16140f;
  --color-surface-bright:          #3d3831;
  --color-surface-container-lowest:#100e0b;
  --color-surface-container-low:   #1e1b17;
  --color-surface-container:       #22201b;
  --color-surface-container-high:  #2d2a24;
  --color-surface-container-highest:#38342d;
  --color-on-surface:              #eae2d8;
  --color-on-surface-variant:      #d5c3ba;
  --color-inverse-surface:         #eae2d8;
  --color-inverse-on-surface:      #332f29;
  --color-outline:                 #a08d86;
  --color-outline-variant:         #52443f;
  --color-surface-tint:            #ffb59e;

  --color-primary:                 #ffb59e;
  --color-on-primary:              #55190a;
  --color-primary-container:       #75301b;
  --color-on-primary-container:    #ffdbd0;
  --color-inverse-primary:         #91452d;

  --color-secondary:               #feb87c;
  --color-on-secondary:            #4a2800;
  --color-secondary-container:     #683b00;
  --color-on-secondary-container:  #ffdcbe;

  --color-tertiary:                #cdc4b4;
  --color-on-tertiary:             #342f21;
  --color-tertiary-container:      #4b4537;
  --color-on-tertiary-container:   #e9e0cf;

  --color-error:                   #ffb4ab;
  --color-on-error:                #690005;
  --color-error-container:         #93000a;
  --color-on-error-container:      #ffdad6;

  --color-surface-variant:         #4d453f;

  --shadow-modal: 0px 12px 32px rgba(0, 0, 0, 0.55);
  --border-card:  1px solid #3a342d;

  --scrim-header: rgba(22, 20, 15, 0.85);
  --scrim-panel:  rgba(30, 27, 23, 0.95);
  --scrim-chip:   rgba(34, 32, 27, 0.92);

  --tint-primary:   #2e1a14;
  --tint-terra:     #3a201a;
  --tint-ochre:     #3a2a15;
  --tint-warm:      #4a2a17;
  --tint-sand:      #332e28;
  --tint-green:     #16301f;
  --tint-emerald:   #10301f;
  --tint-amber:     #3a2c10;
  --tint-red:       #3d1a17;
  --tint-violet:    #241d3a;
  --tint-slate:     #26241f;
  --tint-slate-alt: #322f29;
  --tint-mint:      #12291d;
  --tint-cream:     #322b16;
  --tint-peach:     #3a2618;
  --tint-blush:     #2e1d17;
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  font-weight: var(--text-body-md-weight);
  line-height: var(--text-body-md-lh);
  background-color: var(--color-background);
  color: var(--color-on-surface);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ─── Layout ────────────────────────────────────────────────────────────── */
.container {
  max-width: var(--space-container-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-margin-desktop);
}

@media (max-width: 768px) {
  .container {
    padding-inline: var(--space-margin-mobile);
  }
}

/* ─── Typography ────────────────────────────────────────────────────────── */
h1 {
  font-size: var(--text-headline-lg-size);
  font-weight: var(--text-headline-lg-weight);
  line-height: var(--text-headline-lg-lh);
  letter-spacing: var(--text-headline-lg-ls);
  color: var(--color-on-surface);
}

h2 {
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-lh);
  color: var(--color-on-surface);
}

p {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-lh);
  color: var(--color-on-surface-variant);
}

.label-caps {
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  line-height: var(--text-label-caps-lh);
  letter-spacing: var(--text-label-caps-ls);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
}

.data-tabular {
  font-size: var(--text-data-size);
  font-weight: var(--text-data-weight);
  line-height: var(--text-data-lh);
  font-variant-numeric: tabular-nums;
}

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  font-weight: 600;
  line-height: 1;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

/* display: inline-flex battrait l'attribut hidden (ex. « Dupliquer »). */
.btn[hidden] {
  display: none;
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-container);
}

.btn--primary:active {
  opacity: 0.9;
}

.btn--secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-outline);
}

.btn--secondary:hover {
  background-color: var(--color-surface-container-low);
}

/* Legacy alias used by the existing template */
.test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.5rem;
  font-family: var(--font-family);
  font-size: var(--text-body-md-size);
  font-weight: 600;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  transition: background-color 0.15s ease;
}

.test-btn.active {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

/* ─── Cards ─────────────────────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.card__title {
  font-size: var(--text-headline-md-size);
  font-weight: var(--text-headline-md-weight);
  line-height: var(--text-headline-md-lh);
  color: var(--color-on-surface);
  margin-bottom: 8px;
}

.card__body {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  color: var(--color-on-surface-variant);
}

/* ─── Risk indicators (pills) ───────────────────────────────────────────── */
.risk-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  letter-spacing: var(--text-label-caps-ls);
  text-transform: uppercase;
}

.risk-pill--critical {
  background-color: var(--color-error-container);
  color: var(--color-on-error-container);
}

.risk-pill--high {
  background-color: var(--tint-warm);
  color: #7a2800;
}

.risk-pill--medium {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.risk-pill--low {
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
}

/* ─── Form inputs ───────────────────────────────────────────────────────── */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-label {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  color: var(--color-on-surface);
}

.form-input {
  font-family: var(--font-family);
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface);
  background-color: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-base);
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.15s ease;
}

.form-input::placeholder {
  color: var(--color-outline);
}

.form-input:focus {
  border-color: var(--color-primary);
}

/* ─── Nav / header (glassmorphism) ──────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--scrim-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-card);
  padding-block: 16px;
}

/* ─── Modal / popover shadow ────────────────────────────────────────────── */
.modal {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  padding: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP LAYOUT — sidebar + main
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar widths ─────────────────────────────────────────────────────── */
:root {
  --sidebar-width:          240px;
  --sidebar-collapsed-width: 64px;
  --sidebar-transition:     0.22s ease;
  --header-height:          60px;
}

/* ─── Layout shell ───────────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ────────────────────────────────────────────────────────────── */
.app-sidebar {
  position: fixed;
  inset-block: 0;
  left: 0;
  width: var(--sidebar-width);
  background-color: var(--color-surface-container-low);
  border-right: var(--border-card);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow: hidden;
  transition: width var(--sidebar-transition);
}

/* Toggle button */
.sidebar__toggle {
  position: absolute;
  top: 20px;
  right: 12px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-container);
  border: var(--border-card);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: background-color 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

.sidebar__toggle:hover {
  background: var(--color-surface-container-high);
  color: var(--color-primary);
}

.sidebar__toggle .toggle-icon {
  transition: transform var(--sidebar-transition);
}

/* Nav */
.sidebar__nav {
  flex: 1;
  padding: 12px 8px;
  overflow-y: auto;
  overflow-x: hidden;
}

.sidebar__nav-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar__nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__nav-link:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.sidebar__nav-link.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* Lien réservé aux utilisateurs connectés (ex. Portfolio analysis). */
.sidebar__nav-link.sidebar__nav-link--disabled,
.app-layout .sidebar__nav-link.sidebar__nav-link--disabled:not(.active):hover {
  background: transparent;
  color: var(--color-on-surface-variant);
  opacity: 0.45;
  cursor: not-allowed;
}

.sidebar__nav-link--disabled > .sidebar__nav-label {
  text-decoration: line-through;
}

.sidebar__nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.sidebar__nav-label {
  transition: opacity var(--sidebar-transition);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer */
.sidebar__footer {
  padding: 12px 8px 16px;
  border-top: var(--border-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.sidebar__footer-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  text-decoration: none;
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.15s ease;
}

.sidebar__footer-link:hover {
  background-color: var(--color-primary-container);
}

.sidebar__footer-link svg {
  flex-shrink: 0;
}

.sidebar__footer-link-label {
  transition: opacity var(--sidebar-transition);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__footer-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-start;
  padding-inline: 2px;
}

.sidebar__footer-icon-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__footer-icon-link:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* ─── Collapsed state ────────────────────────────────────────────────────── */
.app-layout.sidebar-collapsed .app-sidebar {
  width: var(--sidebar-collapsed-width);
}

.app-layout.sidebar-collapsed .sidebar__nav-label,
.app-layout.sidebar-collapsed .sidebar__footer-link-label {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

.app-layout.sidebar-collapsed .sidebar__toggle .toggle-icon {
  transform: rotate(180deg);
}

.app-layout.sidebar-collapsed .sidebar__footer-link {
  justify-content: center;
  padding: 10px;
}

.app-layout.sidebar-collapsed .sidebar__footer-actions {
  justify-content: center;
}

.app-layout.sidebar-collapsed .sidebar__toggle {
  right: 50%;
  transform: translateX(50%);
}

/* ─── Main area ──────────────────────────────────────────────────────────── */
.app-main {
  flex: 1;
  /* Sans ça, l'élément flex s'élargit jusqu'à son contenu le plus large
     (SVG, tableaux) au lieu de laisser ce contenu défiler dans son cadre. */
  min-width: 0;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--sidebar-transition);
}

.app-layout.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed-width);
}

/* ─── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-inline: 24px;
  background-color: var(--scrim-header);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-card);
  flex-shrink: 0;
}

.app-header__search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 480px;
  color: var(--color-outline);
}

.app-header__search-input {
  flex: 1;
  border: none;
  background: var(--color-surface-container-low);
  padding: 8px 12px;
  font-size: var(--text-body-sm-size);
}

.app-header__search-input:focus {
  border: none;
  outline: 2px solid var(--color-primary);
  outline-offset: 0;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.app-header__icon-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.app-header__icon-btn:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.app-header__notif-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-error);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-background);
}

.app-header__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-surface-container-high);
  border: var(--border-card);
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--color-on-surface-variant);
  overflow: hidden;
  transition: border-color 0.15s ease;
}

.app-header__avatar:hover {
  border-color: var(--color-primary);
}

.app-header__avatar-initials {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.02em;
}

/* Avatar — supprime le style button natif quand c'est un lien */
a.app-header__avatar {
  text-decoration: none;
}

/* ─── User menu dropdown ─────────────────────────────────────────────────── */
.app-header__user-menu {
  position: relative;
}

.app-header__user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 24px rgba(115, 107, 94, 0.1);
  padding: 8px;
  min-width: 160px;
  z-index: 100;
}

.app-header__user-dropdown[hidden] {
  display: none;
}

.app-header__user-name {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
  border-bottom: 1px solid var(--color-outline-variant);
  margin-bottom: 4px;
}

.app-header__logout-btn {
  display: block;
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--color-on-surface-variant);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s;
}

.app-header__logout-btn:hover {
  background: var(--color-surface-container);
  color: var(--color-on-surface);
}

/* ─── Page content ───────────────────────────────────────────────────────── */
.app-content {
  flex: 1;
  padding: 32px var(--space-gutter);
  overflow-y: auto;
}

/* ─── Company Combobox ───────────────────────────────────────────────────── */
.company-combobox {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}

.company-combobox__label {
  flex-shrink: 0;
  white-space: nowrap;
}

.company-combobox__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-container-lowest);
  border: 1.5px solid var(--color-primary);
  border-radius: var(--radius-base);
  padding: 6px 10px;
  min-width: 200px;
  box-shadow: 0 0 0 3px rgba(145, 69, 45, 0.08);
  color: var(--color-outline);
  cursor: pointer;
}

.company-combobox__input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-on-surface);
  cursor: pointer;
  min-width: 0;
}

.company-combobox__input::placeholder {
  color: var(--color-outline);
  font-weight: 400;
}

.company-combobox__chevron {
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
  transition: transform var(--sidebar-transition);
}

.company-combobox[aria-expanded="true"] .company-combobox__chevron {
  transform: rotate(180deg);
}

.company-combobox__listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  z-index: 300;
  padding: 4px 0;
}

.company-combobox__option {
  padding: 8px 14px;
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface);
  cursor: pointer;
  outline: none;
}

.company-combobox__option:hover,
.company-combobox__option:focus {
  background: var(--color-surface-container-low);
  color: var(--color-primary);
}

.company-combobox__option[aria-selected="true"] {
  font-weight: 600;
  color: var(--color-primary);
}

/* ─── KPI row ────────────────────────────────────────────────────────────── */
.kpi-row {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.kpi-card {
  flex: 1;
  background: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
}

.kpi-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}

/* ─── Overview bottom (map + country panel) ──────────────────────────────── */
.overview-bottom {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.map-wrapper {
  flex: 2;
  position: relative;
}

.map-card {
  height: 420px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: var(--border-card);
  background: var(--color-surface-container-low);
}

.map-layer-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 3px;
  background: var(--scrim-chip);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-md);
  padding: 4px;
  z-index: 10;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.map-layer-btn {
  padding: 4px 10px;
  border: none;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: 11px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--color-on-surface-variant);
  transition: background 0.15s, color 0.15s;
}

.map-layer-btn:hover {
  background: var(--color-surface-container-low);
}

.map-layer-btn--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.map-layer-btn--active:hover {
  background: var(--color-primary);
}

/* ─── Country panel ──────────────────────────────────────────────────────── */
.country-panel {
  flex: 1;
  max-height: 420px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.country-panel__view {
  display: none;
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.country-panel__view--active {
  display: block;
  animation: panelEnter 0.28s ease forwards;
}

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

.country-panel__empty {
  font-size: var(--text-body-sm-size);
  color: var(--color-outline);
  font-style: italic;
}

.country-item {
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  margin-bottom: 8px;
}

.country-item--clickable {
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.country-item--clickable:hover {
  background: var(--color-surface-container-low);
  border-color: var(--color-primary);
}

.country-item__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.country-item__name {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.country-item__count {
  font-size: var(--text-body-sm-size);
  font-weight: 700;
  color: var(--color-primary);
}

.country-item__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.country-item__tag {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-surface-container-low);
  border: var(--border-card);
  color: var(--color-on-surface-variant);
}

.country-item__tag--primary {
  background: var(--tint-primary);
  border-color: var(--color-inverse-primary);
  color: var(--color-primary);
}

/* ─── Asset list toolbar (filter + sort) ─────────────────────────────────── */
.asset-list__toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  background: var(--color-surface-container-lowest);
}

.asset-list__filter {
  flex: 1;
  min-width: 0;
  padding: 7px 28px 7px 12px;
  font-size: 13px;
  height: auto;
  border-radius: var(--radius-full);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 5l4 4 4-4' stroke='%2387736d' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.asset-list__filter:hover {
  border-color: var(--color-outline);
  background-color: var(--color-surface-container-low);
}

.asset-list__sort-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  font-family: var(--font-family);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease;
}

.asset-list__sort-btn:hover {
  border-color: var(--color-outline);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
}

.asset-list__sort-btn:active {
  transform: translateY(1px);
}

.asset-list__sort-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: 0 2px 8px rgba(145, 69, 45, 0.25);
}

.asset-list__sort-btn[aria-pressed="true"]:hover {
  background: var(--color-primary-container);
  border-color: var(--color-primary-container);
  color: var(--color-on-primary);
}

.asset-list__sort-btn .asset-list__sort-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.asset-list__sort-btn[aria-pressed="true"] .asset-list__sort-icon {
  transform: rotate(180deg);
}

/* ─── Map asset popup ────────────────────────────────────────────────────── */
.maplibregl-popup {
  max-width: 300px !important;
}

.maplibregl-popup-content {
  background: var(--color-surface-container-lowest) !important;
  padding: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18) !important;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  border: 1px solid var(--color-outline-variant);
}

.maplibregl-popup-close-button {
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px;
  line-height: 1;
  padding: 10px 12px;
  top: 0;
  right: 0;
  z-index: 1;
}

.maplibregl-popup-close-button:hover {
  color: #fff;
  background: rgba(0, 0, 0, 0.15);
}

.asset-popup__header {
  background: var(--color-primary);
  color: var(--color-on-primary);
  padding: 12px 36px 12px 14px;
}

.asset-popup__name {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3px;
}

.asset-popup__meta {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.82;
  display: flex;
  align-items: center;
  gap: 6px;
}

.asset-popup__body {
  padding: 12px 14px 14px;
  background: var(--color-surface-container-lowest);
}

.asset-popup__section-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-outline);
  margin-bottom: 7px;
}

.asset-popup__prod-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 12px;
}

.asset-popup__prod-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.asset-popup__prod-name {
  flex: 1;
  color: var(--color-on-surface);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.asset-popup__prod-qty {
  color: var(--color-on-surface-variant);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.asset-popup__divider {
  height: 1px;
  background: var(--color-outline-variant);
  margin: 10px 0;
}

.asset-popup__metrics {
  display: flex;
  gap: 8px;
}

.asset-popup__metric {
  flex: 1;
  background: var(--color-surface-container-low);
  border-radius: 8px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--color-outline-variant);
}

.asset-popup__metric-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}

.asset-popup__metric--risk .asset-popup__metric-value {
  color: #92400e;
}

.asset-popup__metric-label {
  font-size: 10px;
  color: var(--color-outline);
  margin-top: 3px;
  font-weight: 500;
  line-height: 1.3;
}

.asset-popup__no-data {
  font-size: 11px;
  color: var(--color-outline);
  font-style: italic;
  padding: 4px 0;
}

/* Étiquette dans l'en-tête (type d'actif, rôle du point). */
.asset-popup__badge {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

/* Ligne libellé / valeur. */
.asset-popup__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--color-outline-variant);
}

.asset-popup__row:last-child {
  border-bottom: 0;
}

.asset-popup__row-label {
  color: var(--color-on-surface-variant);
}

.asset-popup__row-value {
  color: var(--color-on-surface);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.asset-popup__rows + .asset-popup__section-title {
  margin-top: 10px;
}

/* ─── Policy section ─────────────────────────────────────────────────────── */
.policy-section {
  margin-top: 28px;
  padding-top: 28px;
  border-top: var(--border-card);
}

.policy-section__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.policy-section__title::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 4px;
  height: 22px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.policy-types-row {
  border: var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.policy-accordion-item {
  border-bottom: var(--border-card);
}

.policy-accordion-item:last-child {
  border-bottom: none;
}

.policy-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--color-surface-container-lowest);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease;
}

.policy-accordion-header:hover,
.policy-accordion-item--open .policy-accordion-header {
  background: var(--color-surface-container-low);
}

.policy-accordion-header__right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.policy-accordion-chevron {
  width: 16px;
  height: 16px;
  color: var(--color-on-surface-variant);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.policy-accordion-item--open .policy-accordion-chevron {
  transform: rotate(180deg);
}

.policy-accordion-body {
  padding: 0 20px 16px;
  background: var(--color-surface-container-lowest);
}

.policy-type-card__name {
  font-size: var(--text-body-md-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.policy-type-card__avg {
  flex-shrink: 0;
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-radius: var(--radius-full);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.policy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm-size);
}

.policy-table th {
  text-align: left;
  font-size: var(--text-label-caps-size);
  font-weight: var(--text-label-caps-weight);
  letter-spacing: var(--text-label-caps-ls);
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  padding-bottom: 6px;
  border-bottom: var(--border-card);
}

.policy-table th:last-child {
  text-align: right;
}

.policy-table td {
  padding: 7px 4px 7px 0;
  border-bottom: 1px solid var(--color-surface-container-low);
  color: var(--color-on-surface);
  vertical-align: middle;
}

.policy-table tr:last-child td {
  border-bottom: none;
}

.policy-level {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 500;
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  border: var(--border-card);
}

.policy-score {
  font-weight: 600;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRANSITION RISK PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Bar charts ─────────────────────────────────────────────────────────── */
.tr-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tr-bars-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .tr-bars-row { grid-template-columns: 1fr; }
}

.tr-bars-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-bars-card__title {
  margin-bottom: 4px;
}

.tr-bars-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tr-bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 44px;
  align-items: center;
  gap: 8px;
}

.tr-bar-label {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tr-bar-track {
  height: 8px;
  background-color: var(--color-surface-container-high);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.tr-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s ease;
  min-width: 2px;
}

.tr-bar-pct {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  text-align: right;
}

.tr-empty {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  font-style: italic;
}

/* ─── Sankey ─────────────────────────────────────────────────────────────── */
.tr-sankey-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tr-sankey-card__title {
  margin-bottom: 4px;
}

.tr-sankey-wrap {
  width: 100%;
  overflow-x: auto;
}

.tr-sankey-svg {
  width: 100%;
  height: auto;
  min-width: 600px;
  display: block;
}

/* ─── Tree diagram ───────────────────────────────────────────────────────── */
.tr-tree-card {
  display: flex;
  flex-direction: column;
}

.tr-tree-card__title {
  margin-bottom: 4px;
}

.tr-tree-wrap {
  width: 100%;
  overflow-x: auto;
}

.tr-tree-svg {
  width: 100%;
  height: auto;
  min-width: 600px;
  display: block;
}

/* ─── Tree — filter bar ──────────────────────────────────────────────────── */
.tr-tree-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-outline-variant);
  flex-wrap: wrap;
}

.tr-tree-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

.tr-tree-filter-group .label-caps {
  margin-bottom: 0;
}

.tr-tree-filter-sep {
  width: 1px;
  height: 18px;
  background: var(--color-outline-variant);
  flex-shrink: 0;
}

.tr-tree-commodity-pill {
  background: var(--tint-sand);
  color: var(--color-tertiary);
  border: none;
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.tr-tree-commodity-pill--active {
  background: #865220;
  color: white;
}

.tr-tree-commodity-pill--active[data-commodity=""] {
  background: #4a7a5c;
}

/* ─── Tree — body (svg + panel side by side) ─────────────────────────────── */
.tr-tree-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-height: 0;
}

.tr-tree-body .tr-tree-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

/* ─── Tree — side panel ──────────────────────────────────────────────────── */
.tr-tree-panel {
  width: 180px;
  flex-shrink: 0;
  border-left: 1px solid var(--color-outline-variant);
  padding: 14px 12px;
  font-size: 11px;
  color: var(--color-on-surface);
  position: relative;
}

.tr-tree-panel__close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: var(--color-outline);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.tr-tree-panel__close:hover {
  color: var(--color-tertiary);
}

.tr-tree-panel__title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-on-surface);
  padding-right: 20px;
}

.tr-tree-panel__badge {
  display: inline-block;
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.tr-tree-panel__section {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-outline);
  margin: 10px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--color-outline-variant);
}

.tr-tree-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 11px;
  color: var(--color-tertiary);
  margin-bottom: 3px;
}

.tr-tree-panel__row b {
  color: var(--color-on-surface);
  font-weight: 600;
}

/* ─── Sidebar accordion ──────────────────────────────────────────────────── */
.sidebar__nav-details {
  list-style: none;
}

.sidebar__nav-details > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__nav-details > summary::-webkit-details-marker { display: none; }

.sidebar__nav-details > summary:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.sidebar__nav-details > summary.active,
.sidebar__nav-details[open] > summary {
  color: var(--color-on-surface);
}

.sidebar__nav-chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-on-surface-variant);
}

.sidebar__nav-details[open] > summary .sidebar__nav-chevron {
  transform: rotate(90deg);
}

.sidebar__nav-sub {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0 4px 32px;
}

.sidebar__nav-sublink {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.sidebar__nav-sublink:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.sidebar__nav-sublink.active {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: 500;
}

/* Collapsed sidebar hides sub-nav labels */
.sidebar-collapsed .sidebar__nav-sub {
  display: none;
}

.sidebar-collapsed .sidebar__nav-chevron {
  display: none;
}

/* ── Dependencies page ───────────────────────────────────────────────────── */

.dep-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Main two-column row */
.dep-main-row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.dep-supply-chain {
  flex: 3;
  min-width: 0;
}

.dep-service-exposure {
  flex: 2;
  min-width: 0;
}

@media (max-width: 900px) {
  /* Empilées, les deux cartes doivent reprendre toute la largeur. */
  .dep-main-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* Section headers inside cards */
.dep-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.dep-section-title {
  font-size: var(--text-body-lg-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

/* ── Supply chain tiers ─── */
.dep-tier {
  margin-bottom: 20px;
}

.dep-tier:last-child {
  margin-bottom: 0;
}

.dep-tier__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.dep-tier__bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.dep-tier__label {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.dep-tier__divider {
  border: none;
  border-top: 1px solid var(--color-outline-variant);
  margin-bottom: 12px;
}

.dep-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Individual service card inside a tier */
.dep-service-card {
  background: var(--color-surface-container-low);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: 12px 14px;
}

.dep-service-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.dep-service-card__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
}

.dep-service-card__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface);
  line-height: 1.3;
}

.dep-reliance-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--color-surface-dim);
  margin-bottom: 6px;
  overflow: hidden;
}

.dep-reliance-bar__fill {
  height: 100%;
  border-radius: 2px;
}

.dep-reliance-bar__fill--critical { background: var(--color-primary); }
.dep-reliance-bar__fill--high     { background: var(--color-secondary); }
.dep-reliance-bar__fill--moderate { background: #8a8a70; }
.dep-reliance-bar__fill--low      { background: var(--color-surface-dim); }

.dep-service-card__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dep-service-card__label--critical { color: var(--color-primary); }
.dep-service-card__label--high     { color: var(--color-secondary); }
.dep-service-card__label--moderate { color: #8a8a70; }
.dep-service-card__label--low      { color: var(--color-outline); }

/* ── Service Exposure panel ─── */
.dep-exposure-category {
  margin-bottom: 18px;
}

.dep-exposure-category:last-child {
  margin-bottom: 0;
}

.dep-exposure-cat-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.dep-exposure-cat-name {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.dep-exposure-cat-amount {
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-on-surface-variant);
}

.dep-exposure-service-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.dep-exposure-service-name {
  flex: 0 0 160px;
  font-size: 13px;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-exposure-bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-surface-dim);
  border-radius: 3px;
  overflow: hidden;
}

.dep-exposure-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-primary);
}

.dep-exposure-amount {
  flex: 0 0 60px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-on-surface);
}

.dep-exposure-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--color-surface-container-low);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

/* ── Revenue segments ─── */
.dep-revenue-segments {
  width: 100%;
}

.dep-revenue-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-outline-variant);
}

.dep-revenue-row:last-child {
  border-bottom: none;
}

.dep-revenue-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--color-on-surface-variant);
}

.dep-revenue-meta {
  flex: 1;
  min-width: 0;
}

.dep-revenue-subsector {
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  color: var(--color-on-surface);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dep-revenue-sector {
  font-size: 12px;
  color: var(--color-on-surface-variant);
}

.dep-revenue-bar-wrap {
  flex: 2;
  min-width: 0;
}

.dep-revenue-bar-track {
  height: 8px;
  background: var(--color-surface-dim);
  border-radius: 4px;
  overflow: hidden;
}

.dep-revenue-bar-fill {
  height: 100%;
  border-radius: 4px;
}

.dep-revenue-bar-fill--critical { background: var(--color-primary); }
.dep-revenue-bar-fill--high     { background: var(--color-primary); }
.dep-revenue-bar-fill--moderate { background: var(--color-secondary); }
.dep-revenue-bar-fill--low      { background: var(--color-surface-dim); }

.dep-revenue-amount {
  flex: 0 0 70px;
  text-align: right;
  font-size: var(--text-body-sm-size);
  font-weight: 600;
  color: var(--color-on-surface);
}

.dep-exposure-badge {
  flex: 0 0 90px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dep-exposure-badge--critical { color: var(--color-primary); }
.dep-exposure-badge--high     { color: var(--color-primary); }
.dep-exposure-badge--moderate { color: var(--color-secondary); }
.dep-exposure-badge--low      { color: var(--color-outline); }

.dep-empty {
  color: var(--color-on-surface-variant);
  font-size: var(--text-body-sm-size);
  padding: 20px 0;
  text-align: center;
}

/* KPI card icon/subtitle for primary service */
.kpi-card__subtitle {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  margin-top: 2px;
}

/* ── Revenue segment detail (expandable) ─── */
.dep-toggle-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-surface-variant);
  transition: background-color 0.15s, transform 0.2s;
}

.dep-toggle-btn:hover {
  background: var(--color-surface-container);
}

.dep-toggle-btn--open svg {
  transform: rotate(180deg);
}

.dep-segment-detail {
  padding: 8px 0 12px 36px;
  border-bottom: 1px solid var(--color-outline-variant);
}

.dep-segment-detail[hidden] {
  display: none;
}

.dep-subsector-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-surface-container-high);
}

.dep-subsector-row:last-child {
  border-bottom: none;
}

.dep-subsector-meta {
  flex: 1;
  min-width: 0;
}

.dep-subsector-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface);
  display: block;
  margin-bottom: 4px;
}

.dep-subsector-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.dep-svc-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-container);
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.dep-svc-chip--critical { background: var(--tint-terra); color: var(--color-primary); }
.dep-svc-chip--high     { background: var(--tint-ochre); color: var(--color-secondary); }
.dep-svc-chip--moderate { background: var(--color-surface-container-high); color: #8a8a70; }
.dep-svc-chip--low      { background: var(--color-surface-container); color: var(--color-outline); }

.dep-subsector-revenue {
  flex: 0 0 60px;
  text-align: right;
  font-size: 13px;
  color: var(--color-on-surface-variant);
}

.dep-subsector-atrisk {
  flex: 0 0 110px;
  text-align: right;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* ─── Physical risk page ─────────────────────────────────────────────────── */
.pr-empty {
  font-size: var(--text-body-sm-size);
  color: var(--color-outline);
  font-style: italic;
}

.pr-horizon {
  display: inline-flex;
  gap: 4px;
  margin-top: 10px;
}

.pr-horizon__btn {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  cursor: pointer;
}

.pr-horizon__btn.active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.pr-mid-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.map-card-wrap {
  flex: 2;
  position: relative;
}

.pr-mid-row .map-card {
  width: 100%;
}

.map-legend {
  position: absolute;
  bottom: 28px;
  left: 10px;
  background: var(--scrim-chip);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  z-index: 1;
  pointer-events: none;
}

/* Empilement de plusieurs légendes (ex. commodités + revenu sur Locate). */
.map-legend-stack {
  position: absolute;
  bottom: 28px;
  left: 10px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.map-legend-stack .map-legend {
  position: static;
  bottom: auto;
  left: auto;
}

/* Liste potentiellement longue : limiter la hauteur et défiler. */
.ll-commodity-legend .map-legend__list,
#ov-mode-legend .map-legend__list,
#ov-supply-legend .map-legend__list {
  max-height: 180px;
  overflow-y: auto;
  pointer-events: auto;
}

.map-legend__title {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin: 0 0 6px;
}

.map-legend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.map-legend__list li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--color-on-surface);
}

.map-legend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pr-ranking-card {
  flex: 1;
  max-height: 420px;
  overflow-y: auto;
}

.pr-ranking-card__title {
  margin-bottom: 12px;
  display: block;
}

.pr-rank-row {
  display: grid;
  grid-template-columns: 1fr 80px auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  margin-bottom: 4px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface);
}

.pr-rank-row:hover {
  background: var(--color-surface-container-low);
}

.pr-rank-row--selected {
  background: var(--color-surface-container);
  border-color: var(--color-primary);
}

.pr-rank-row__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pr-rank-row__track {
  height: 6px;
  border-radius: 3px;
  background: var(--color-surface-dim);
  overflow: hidden;
}

.pr-rank-row__fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
}

.pr-rank-row__val {
  font-size: 11px;
  color: var(--color-on-surface-variant);
  white-space: nowrap;
}

.pr-table-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.pr-table-card__hazard {
  font-size: var(--text-body-sm-size);
  font-weight: 700;
  color: var(--color-primary);
}

.pr-table-wrap {
  overflow-x: auto;
}

.pr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm-size);
}

.pr-table th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
  font-weight: 600;
}

.pr-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-surface-container-high);
  color: var(--color-on-surface);
}

.pr-table th:not(:first-child),
.pr-table td:not(:first-child) {
  text-align: right;
}

.pr-table__risk {
  font-weight: 700;
  color: var(--color-primary);
}

.pr-table__vuln {
  position: relative;
  cursor: help;
}

.pr-vuln-tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--color-on-surface);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  white-space: nowrap;
  pointer-events: none;
  text-align: left;
  min-width: 230px;
}

.pr-table__vuln:hover .pr-vuln-tooltip {
  display: block;
}

.pr-vuln-tooltip__title {
  font-weight: 600;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.pr-vuln-tooltip__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 2px 0;
}

.pr-vuln-tooltip__policy {
  color: var(--color-on-surface-variant);
  font-size: 11px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pr-vuln-tooltip__val {
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}

.pr-vuln-tooltip__result {
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--color-outline-variant);
  font-weight: 700;
  font-size: 12px;
}

.pr-vuln-tooltip__note {
  margin-top: 4px;
  font-size: 11px;
  color: var(--color-on-surface-variant);
  font-style: italic;
}

.pr-table__asset {
  position: relative;
  cursor: help;
}

.pr-table__asset--has-inv {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

/* Reprend l'apparence de .pr-vuln-tooltip mais ancré à gauche (cellule nom). */
.pr-inv-tooltip {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  margin-top: 6px;
  padding: 10px 12px;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12);
  min-width: 200px;
  text-align: left;
  white-space: normal;
  font-size: 12px;
  color: var(--color-on-surface);
}

.pr-table__asset:hover .pr-inv-tooltip {
  display: block;
}

/* ── Dette écologique ─────────────────────────────────────────────────────── */

.de-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  height: 100%;
  box-sizing: border-box;
}

.de-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.de-toggle-label {
  color: var(--color-on-surface-variant);
  font-size: 11px;
}

.de-toggle {
  display: flex;
  border: 1.5px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--color-surface-container-low);
}

.de-toggle__btn {
  padding: 4px 14px;
  font-size: 12px;
  font-family: inherit;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-on-surface-variant);
  transition: background 0.15s, color 0.15s;
  line-height: 1.5;
}

.de-toggle__btn--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.de-map-card {
  flex: 1;
  position: relative;
  min-height: 420px;
  padding: 0;
  overflow: hidden;
}

.de-map {
  width: 100%;
  height: 100%;
  min-height: 420px;
}

.de-legend {
  position: absolute;
  bottom: 24px;
  right: 12px;
  background: var(--scrim-panel);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  max-width: 190px;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.de-legend__title {
  font-size: 10px;
  color: var(--color-on-surface-variant);
  margin-bottom: 6px;
}

.de-legend__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.de-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.de-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.de-legend__name {
  flex: 1;
  color: var(--color-on-surface);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.de-legend__pct {
  color: var(--color-on-surface-variant);
  font-variant-numeric: tabular-nums;
}

.de-tooltip {
  position: absolute;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.6;
  pointer-events: none;
  z-index: 20;
  max-width: 210px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Infobulle au format asset-popup : l'en-tête et le corps gèrent l'espacement. */
.de-tooltip--card {
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  line-height: normal;
  min-width: 200px;
  max-width: 260px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
}

.de-tooltip--card .asset-popup__header {
  padding-right: 14px;
}

.de-tooltip__swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ─── Compare page ───────────────────────────────────────────────────────── */

:root {
  --compare-a: var(--color-primary);   /* terracotta */
  --compare-b: #3d6b4f;               /* forest green */
}

.compare-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
}

/* ── Company selector cards ── */
.compare-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.compare-col-card {
  background-color: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  /* Pas d'overflow: hidden, il couperait la liste du sélecteur d'entreprise :
     c'est la barre d'accent qui porte l'arrondi. */
  transition: box-shadow 0.2s;
}

.compare-col-card:focus-within {
  box-shadow: 0 0 0 2px rgba(145, 69, 45, 0.2);
}

.compare-col-card--b:focus-within {
  box-shadow: 0 0 0 2px rgba(61, 107, 79, 0.2);
}

.compare-col-card__accent {
  height: 4px;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
  background: var(--compare-a);
}

.compare-col-card--b .compare-col-card__accent {
  background: var(--compare-b);
}

.compare-col-card__body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compare-col-card__top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.compare-col-card__top .company-combobox {
  flex: 1;
}

/* Badges A / B */
.compare-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  color: #fff;
  margin-top: 2px;
}

.compare-badge--a { background: var(--compare-a); }
.compare-badge--b { background: var(--compare-b); }

/* Company info */
.compare-company-info {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.compare-company-info__empty {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  opacity: 0.55;
  font-style: italic;
}

.compare-company-info__loading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  opacity: 0.65;
}

.compare-loading-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: compare-pulse 1s ease-in-out infinite;
}

@keyframes compare-pulse {
  0%, 100% { opacity: 1; transform: scale(1);   }
  50%       { opacity: 0.4; transform: scale(0.6); }
}

.compare-company-info__error {
  font-size: var(--text-body-sm-size);
  color: var(--color-error);
}

.compare-company-info__name {
  font-size: var(--text-body-lg-size);
  font-weight: 600;
  color: var(--color-on-surface);
  line-height: 1.3;
}

.compare-company-info__name--in {
  animation: compare-fade-up 0.2s ease both;
}

@keyframes compare-fade-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.compare-company-info__stat {
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
}

/* ── Comparison blocks ── */
.compare-blocks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.compare-block {
  background-color: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.compare-block:hover {
  box-shadow: 0 2px 10px rgba(115, 107, 94, 0.1);
}

/* Block header — metric selector */
.compare-block__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background-color: var(--color-surface-container-low);
  border-bottom: 1px solid var(--color-outline-variant);
  position: relative;
}

/* Custom metric trigger (replaces native select) */
.compare-metric-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-full);
  cursor: pointer;
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  transition: border-color 0.15s, color 0.15s, background 0.15s, box-shadow 0.15s;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
}

.compare-metric-trigger:hover,
.compare-metric-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-surface-container-low);
  box-shadow: 0 0 0 3px rgba(145, 69, 45, 0.1);
}

.compare-metric-trigger__icon {
  flex-shrink: 0;
  opacity: 0.55;
}

.compare-metric-trigger__label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.compare-metric-trigger__chevron {
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 0.18s ease;
}

.compare-metric-trigger[aria-expanded="true"] .compare-metric-trigger__chevron {
  transform: rotate(180deg);
}

/* Portal dropdown — rendered in <body> via JS */
.compare-metric-dropdown {
  position: fixed;
  z-index: 9999;
  background: var(--color-surface-container-lowest);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(27, 28, 25, 0.14), 0 2px 6px rgba(27, 28, 25, 0.06);
  min-width: 230px;
  padding: 4px;
}

.compare-metric-dropdown:not([hidden]) {
  animation: compare-dropdown-in 0.16s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes compare-dropdown-in {
  from { opacity: 0; transform: translateY(-5px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Search input inside dropdown */
.compare-metric-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--color-outline-variant);
  color: var(--color-on-surface-variant);
}

.compare-metric-search {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--font-family);
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface);
  outline: none;
  min-width: 0;
}

.compare-metric-search::placeholder {
  color: var(--color-on-surface-variant);
  opacity: 0.55;
}

.compare-metric-options {
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-outline-variant) transparent;
}

.compare-metric-empty {
  padding: 10px 12px;
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  opacity: 0.6;
  font-style: italic;
}

.compare-metric-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-body-sm-size);
  color: var(--color-on-surface-variant);
  transition: background 0.1s, color 0.1s;
  user-select: none;
  outline: none;
}

.compare-metric-option:hover,
.compare-metric-option--focused {
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
}

.compare-metric-option--active {
  color: var(--color-primary);
  font-weight: 600;
}

.compare-metric-option__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.compare-metric-option__label {
  flex: 1;
}

.compare-block__remove {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  color: var(--color-on-surface-variant);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.compare-block:hover .compare-block__remove { opacity: 1; }

.compare-block__remove:hover {
  background: var(--color-error-container);
  color: var(--color-on-error-container);
  opacity: 1;
}

/* Block values */
.compare-block__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.compare-block__val {
  padding: 18px 22px;
  border-left: 3px solid transparent;
}

.compare-block__val--left {
  border-right: 1px solid var(--color-outline-variant);
  border-left-color: var(--compare-a);
}

.compare-block__val--right {
  border-left-color: var(--compare-b);
}

.compare-block__val-number {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  min-height: 32px;
}

/* Proportional comparison bar */
.compare-block__bar {
  display: flex;
  height: 5px;
  overflow: hidden;
}

.compare-block__bar-a {
  background: var(--compare-a);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 2px;
}

.compare-block__bar-b {
  background: var(--compare-b);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  flex: 1;
  min-width: 2px;
}

/* ── Add indicator button ── */
.compare-add-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 16px;
}

.compare-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  font-family: var(--font-family);
  font-size: var(--text-body-sm-size);
  font-weight: 500;
  color: var(--color-on-surface-variant);
  background: transparent;
  border: 1px dashed var(--color-outline);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.compare-add-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-surface-container-low);
}

/* ── Conformité ESRS E4 ──────────────────────────────────────────── */

.comp-page { display: flex; flex-direction: column; gap: 20px; }

.comp-section-title { font-size: 1rem; margin: 0 0 12px; }

/* Verrou de matérialité */
.comp-gate {
  border-radius: 12px; padding: 16px 20px;
  border-left: 5px solid #9ca3af; background: var(--tint-slate);
}
.comp-gate__main { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.comp-gate__status { font-size: 1.15rem; font-weight: 700; }
.comp-gate__version { font-size: .8rem; color: var(--color-on-surface-variant); margin-left: auto; }
.comp-gate__justif { margin: 8px 0 0; font-size: .9rem; color: var(--color-on-surface); }
.comp-gate--material { background: var(--tint-mint); border-left-color: #059669; }
.comp-gate--not_material { background: var(--tint-cream); border-left-color: #d97706; }
.comp-gate--not_assessed { background: var(--tint-slate); border-left-color: #9ca3af; }

/* Frise LEAP */
.comp-leap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.comp-leap__item {
  border: var(--border-card); border-radius: 10px; padding: 12px;
  border-top: 4px solid #9ca3af;
}
.comp-leap__item--done { border-top-color: #059669; }
.comp-leap__item--in_progress { border-top-color: #2563eb; }
.comp-leap__item--todo { border-top-color: #9ca3af; }
.comp-leap__head { display: flex; justify-content: space-between; align-items: center; }
.comp-leap__phase { font-weight: 700; }
.comp-leap__status { font-size: .75rem; text-transform: uppercase; color: var(--color-on-surface-variant); }
.comp-leap__summary { margin: 8px 0 0; font-size: .85rem; color: var(--color-on-surface); }
.comp-leap__notes { margin: 6px 0 0; font-size: .8rem; color: var(--color-on-surface-variant); font-style: italic; }

/* Cartes DR */
.comp-drs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 16px; }
.comp-dr {
  background: var(--color-surface-container-lowest); border: var(--border-card); border-radius: 12px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.comp-dr__head { display: flex; align-items: center; gap: 8px; }
.comp-dr__code { font-weight: 700; font-size: .9rem; }
.comp-dr__cond {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  background: var(--tint-violet); color: #6d28d9; padding: 2px 7px; border-radius: 999px;
}
.comp-dr__title { font-size: 1rem; margin: 4px 0 0; }
.comp-dr__desc { font-size: .85rem; color: var(--color-on-surface-variant); margin: 0; }
.comp-dr__ref { font-size: .75rem; color: #9ca3af; margin: 0; }
.comp-dr__justif { font-size: .85rem; color: var(--color-on-surface); margin: 6px 0 0; }
.comp-dr__suggestion {
  font-size: .78rem; color: #92400e; background: var(--tint-amber);
  padding: 4px 8px; border-radius: 6px; margin: 4px 0 0;
}

/* Badges de statut */
.comp-badge {
  font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  margin-left: auto; white-space: nowrap;
}
.comp-badge--compliant { background: var(--tint-emerald); color: #065f46; }
.comp-badge--partial { background: var(--tint-amber); color: #92400e; }
.comp-badge--non_compliant { background: var(--tint-red); color: #991b1b; }
.comp-badge--not_started { background: var(--tint-slate); color: var(--color-on-surface-variant); }
.comp-badge--not_applicable { background: var(--tint-slate-alt); color: var(--color-on-surface-variant); }

@media (max-width: 720px) {
  .comp-leap { grid-template-columns: 1fr; }
}

/* ─── ESG page ──────────────────────────────────────────────────────────── */
.esg-page { display: flex; flex-direction: column; gap: 24px; }

.esg-theme-tabs {
  display: inline-flex; gap: 4px; padding: 4px;
  background: var(--color-surface-container);
  border: 1px solid var(--color-outline-variant);
  border-radius: 10px; align-self: flex-start;
}
.esg-theme-tab {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 24px; border-radius: 7px;
  font-family: var(--font-family); font-size: 14px; font-weight: 600;
  color: var(--color-on-surface-variant); transition: background .15s, color .15s;
}
.esg-theme-tab--active {
  background: var(--color-surface-container-lowest);
  color: var(--color-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.esg-sub-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.esg-sub-tab {
  --sub-accent: #888;
  display: inline-flex; align-items: center; gap: 7px;
  border: 1.5px solid var(--color-outline-variant);
  background: transparent; cursor: pointer;
  padding: 7px 16px 7px 13px; border-radius: 100px;
  font-family: var(--font-family); font-size: 13px; font-weight: 500;
  color: var(--color-on-surface-variant);
  transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
}
.esg-sub-tab[data-sub="land-use"]         { --sub-accent: #6B7B3A; }
.esg-sub-tab[data-sub="resource-use"]     { --sub-accent: #2B7A9E; }
.esg-sub-tab[data-sub="climate-change"]   { --sub-accent: #C45A28; }
.esg-sub-tab[data-sub="pollution"]        { --sub-accent: #7A5E9A; }
.esg-sub-tab[data-sub="invasive-species"] { --sub-accent: #3D8B5C; }
.esg-sub-tab:hover {
  border-color: var(--sub-accent);
  color: var(--sub-accent);
  background: color-mix(in srgb, var(--sub-accent) 7%, transparent);
}
.esg-sub-tab--active {
  background: var(--sub-accent);
  border-color: var(--sub-accent);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--sub-accent) 35%, transparent);
}
.esg-sub-tab__icon { flex-shrink: 0; opacity: .7; }
.esg-sub-tab--active .esg-sub-tab__icon { opacity: 1; }
.esg-sub-panel { display: none; }
.esg-sub-panel--active { display: block; }

.esg-grid {
  display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: start;
}
.esg-grid__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.esg-grid__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
@media (max-width: 1100px) { .esg-grid { grid-template-columns: 1fr; } }

/* Chart */
.esg-chart__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.esg-chart__title { font-size: 20px; font-weight: 600; color: var(--color-primary); margin: 0 0 4px; }
.esg-chart__sub { font-size: 14px; color: var(--color-on-surface-variant); margin: 0; }
.esg-chart__legend { display: flex; gap: 16px; flex-wrap: wrap; }
.esg-chart__legend-item { display: flex; align-items: center; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--color-on-surface-variant); }
.esg-chart__line { width: 16px; height: 0; border-top: 2px solid var(--color-primary); }
.esg-chart__line--solid { border-top-style: solid; }
.esg-chart__line--dashed { border-top-style: dashed; }
.esg-chart__kpis { display: flex; gap: 32px; margin-bottom: 16px; }
.esg-chart__kpi { display: flex; flex-direction: column; gap: 2px; }
.esg-chart__kpi-value { font-size: 22px; font-weight: 600; color: var(--color-on-surface); }
.esg-chart__kpi-value--good { color: #2d6a4f; }
.esg-chart__kpi-value--bad { color: var(--color-error); }
.esg-chart__kpi-label { color: var(--color-on-surface-variant); }
.esg-chart__canvas { width: 100%; height: 320px; position: relative; }
.esg-chart__svg { width: 100%; height: 100%; display: block; }
.esg-chart__grid { stroke: var(--color-outline-variant); stroke-width: 1; opacity: .5; }
.esg-chart__axis-label { fill: var(--color-on-surface-variant); font-size: 11px; font-family: var(--font-family); }
.esg-chart__path { fill: none; stroke: var(--color-primary); stroke-width: 3; }
.esg-chart__path--proj { stroke-dasharray: 8 6; opacity: .8; }
.esg-chart__dot { fill: var(--color-primary); }
.esg-chart__scope-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--color-outline); border-radius: 6px; background: transparent; color: var(--color-on-surface-variant); font-size: 12px; font-family: var(--font-family); cursor: pointer; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; }
.esg-chart__scope-btn:hover { background: var(--color-surface-variant); }
.esg-chart__scope-btn[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.esg-chart__bar { cursor: default; }
.esg-chart__tooltip[hidden] { display: none; }
.esg-chart__tooltip { position: absolute; pointer-events: none; z-index: 10; background: var(--color-surface-container); border: 1px solid var(--color-outline-variant); border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--color-on-surface); box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 180px; white-space: nowrap; }
.esg-chart__tooltip-year { font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.esg-chart__tooltip-row { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.esg-chart__tooltip-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.esg-chart__tooltip-name { flex: 1; }
.esg-chart__tooltip-val { font-variant-numeric: tabular-nums; }
.esg-chart__tooltip-pct { color: var(--color-on-surface-variant); min-width: 42px; text-align: right; }
.esg-chart__tooltip-sep { border: none; border-top: 1px solid var(--color-outline-variant); margin: 6px 0; }
.esg-chart__tooltip-total { display: flex; gap: 8px; font-weight: 600; }
.esg-chart__legend-dot { width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* Featured policy cards */
.esg-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .esg-featured { grid-template-columns: 1fr; } }
.esg-policy-card { display: flex; flex-direction: column; gap: 10px; }
.esg-policy-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.esg-policy-card__title { font-size: 16px; font-weight: 700; color: var(--color-primary); margin: 0; }
.esg-policy-card__score { font-size: 13px; font-weight: 700; color: var(--color-on-secondary-container); background: var(--color-secondary-container); border-radius: 8px; padding: 2px 8px; }
.esg-policy-card__level { font-size: 13px; font-weight: 600; color: var(--color-on-surface); margin: 0; }
.esg-policy-card__desc { font-size: 14px; color: var(--color-on-surface-variant); margin: 0; line-height: 1.5; }
.esg-policy-card__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.esg-policy-card__tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--color-on-primary-fixed-variant, var(--color-primary)); background: var(--color-surface-container-high); border-radius: 8px; padding: 3px 10px; }

/* Framework list */
.esg-framework__head { padding-bottom: 12px; border-bottom: 1px solid var(--color-outline-variant); margin-bottom: 4px; }
.esg-framework__title { color: var(--color-primary); margin: 0; }
.esg-framework__item { border-bottom: 1px solid var(--color-outline-variant); }
.esg-framework__item:last-child { border-bottom: none; }
.esg-framework__item-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; }
.esg-framework__item--collapsible .esg-framework__item-header { cursor: pointer; }
.esg-framework__item--collapsible .esg-framework__item-header:hover .esg-framework__item-name { color: var(--color-primary); }
.esg-framework__item-text { flex: 1; min-width: 0; }
.esg-framework__item-name { font-size: 15px; font-weight: 700; color: var(--color-on-surface); margin: 0 0 2px; transition: color .15s; }
.esg-framework__item-sub { font-size: 13px; color: var(--color-on-surface-variant); margin: 0; }
.esg-framework__item-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.esg-framework__item-type { font-size: 11px; font-weight: 600; color: var(--color-on-surface-variant); white-space: nowrap; }
.esg-framework__item-score { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 7px; border-radius: 11px; font-size: 12px; font-weight: 700; color: #fff; letter-spacing: .01em; }
.esg-framework__chevron { color: var(--color-on-surface-variant); flex-shrink: 0; transition: transform .22s ease; }
.esg-framework__item-desc { padding: 0 0 14px; }
.esg-framework__item-desc p { margin: 0; font-size: 13px; color: var(--color-on-surface-variant); line-height: 1.55; }

/* Market */
.esg-market__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.esg-market__title { color: var(--color-on-surface-variant); margin: 0; }
.esg-market__demo { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-on-secondary-container); background: var(--color-secondary-container); border-radius: 6px; padding: 2px 6px; }
.esg-market__price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 12px; }
.esg-market__price-label { color: var(--color-on-surface-variant); margin: 0 0 2px; }
.esg-market__price { font-size: 28px; font-weight: 700; color: var(--color-primary); margin: 0; }
.esg-market__change { font-size: 14px; font-weight: 700; }
.esg-market__change--up { color: #2d6a4f; }
.esg-market__change--down { color: var(--color-error); }
.esg-market__ranges { display: flex; gap: 4px; margin-bottom: 12px; }
.esg-market__range { flex: 1; padding: 5px 0; font-size: 12px; font-weight: 700; color: var(--color-on-surface-variant); background: var(--color-surface-variant); border: 1px solid var(--color-outline-variant); border-radius: 6px; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.esg-market__range:hover { background: var(--color-secondary-container); }
.esg-market__range--active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.esg-market__spark { width: 100%; height: 40px; color: var(--color-primary); opacity: .5; margin-bottom: 12px; }
.esg-market__stats { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid var(--color-outline-variant); }
.esg-market__stat { display: flex; justify-content: space-between; font-size: 14px; }
.esg-market__stat-label { color: var(--color-on-surface-variant); }
.esg-market__stat-value { font-weight: 700; color: var(--color-on-surface); }

/* News + decoration + empty */
.esg-news__head { padding-bottom: 12px; border-bottom: 1px solid var(--color-outline-variant); margin-bottom: 12px; }
.esg-news__title { color: var(--color-on-surface-variant); margin: 0; }
.esg-decoration { height: 160px; border-radius: 12px; border: 1px solid var(--color-outline-variant); display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; padding: 20px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); }
.esg-decoration__title { color: #fff; font-weight: 700; font-size: 15px; }
.esg-decoration__sub { color: rgba(255,255,255,.85); }
.esg-empty { font-size: 14px; color: var(--color-on-surface-variant); text-align: center; padding: 24px 0; margin: 0; }
.esg-coming { padding: 40px; }

/* ── LEAP tabs ────────────────────────────────────────────────────────── */
.leap-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.leap-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 92px;
  padding: 10px 16px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 12px;
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.leap-tab:hover {
  background: var(--color-surface-container);
  border-color: var(--color-outline);
}
.leap-tab__letter {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}
.leap-tab__name {
  color: inherit;
}
.leap-tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}
.leap-tab--active:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* ── LEAP Locate page ─────────────────────────────────────────────────── */
.map-card--tall { height: 560px; }
/* Le sélecteur de style passe en haut à gauche pour ne pas être masqué par le
   panneau latéral droit. */
.ll-map-wrap .map-layer-toggle {
  top: 12px;
  right: auto;
  left: 12px;
}
/* Bascule Fournisseurs : juste sous le sélecteur de style, à gauche. */
.ll-map-wrap .map-layer-toggle.ll-supplier-toggle {
  top: 52px;
}
/* Panneau latéral superposé, repliable vers la droite */
.ll-panel {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  right: 12px;
  bottom: 12px;
  width: 320px;
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  background: var(--scrim-panel);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  z-index: 9;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.ll-map-wrap.ll-collapsed .ll-panel {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}
.ll-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}
.ll-panel__title { color: var(--color-on-surface-variant); }
.ll-panel__toggle,
.ll-panel__reopen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  padding: 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}
.ll-panel__toggle:hover,
.ll-panel__reopen:hover { background: var(--color-surface-container); }
.ll-panel__reopen {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  right: 12px;
  width: 36px;
  height: 36px;
  z-index: 9;
  background: var(--scrim-chip);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  display: none;
}
.ll-map-wrap.ll-collapsed .ll-panel__reopen { display: inline-flex; }
.ll-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
}
.ll-empty { color: var(--color-on-surface-variant); font-size: 14px; }
.ll-item {
  padding: 10px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 10px;
  background: var(--color-surface-container-lowest);
}
.ll-item--clickable { cursor: pointer; }
.ll-item--clickable:hover { border-color: var(--color-outline); }
.ll-item__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ll-item__name { font-weight: 600; }
.ll-item__badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
  white-space: nowrap;
}
.ll-item__meta { font-size: 12px; color: var(--color-on-surface-variant); margin-top: 4px; }
.ll-item__prods { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.ll-prod {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
}
.ll-prod__name { color: var(--color-on-surface); }
.ll-prod__qty { color: var(--color-on-surface-variant); white-space: nowrap; }
.ll-item__revenue {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-outline-variant);
  font-size: 13px;
  color: var(--color-on-surface-variant);
}

/* ── LEAP stub ────────────────────────────────────────────────────────── */
.leap-stub {
  text-align: center;
  padding: 56px 24px;
}
.leap-stub__letter {
  font-size: 56px;
  font-weight: 700;
  color: var(--color-outline-variant);
  line-height: 1;
}
.leap-stub__title {
  margin: 12px 0 4px;
  color: var(--color-on-surface);
}
.leap-stub__text { color: var(--color-on-surface-variant); }

/* ── LEAP / Prepare ───────────────────────────────────────────────────────── */
.lp-mid-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.lp-levers { flex: 1; min-width: 280px; max-width: 380px; }
.lp-chart-card { flex: 2; }

.lp-levers__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lp-reset {
  border: 1px solid var(--color-outline);
  background: transparent;
  color: var(--color-on-surface-variant);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: var(--font-family);
  cursor: pointer;
}
.lp-reset:hover { background: var(--color-surface-variant); }

.lp-levers__group { margin-top: 14px; }
.lp-levers__title { color: var(--color-on-surface-variant); margin: 0 0 8px; }
.lp-levers__list { display: flex; flex-direction: column; gap: 12px; }

.lp-lever__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.lp-lever__name {
  font-size: 13px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-lever__delta { font-size: 11px; color: var(--color-on-surface-variant); white-space: nowrap; }
.lp-lever__controls { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.lp-lever__slider { flex: 1; accent-color: var(--color-primary); }
.lp-lever__input {
  width: 78px;
  border: 1px solid var(--color-outline-variant);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: var(--font-family);
  text-align: right;
}
.lp-lever__unit { font-size: 11px; color: var(--color-outline); min-width: 44px; }

.lp-chart-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.lp-group-by { display: inline-flex; align-items: center; gap: 8px; }
.lp-select {
  border: 1px solid var(--color-outline);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-family: var(--font-family);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  cursor: pointer;
}
.lp-dumbbell { width: 100%; display: block; }

.lp-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-radius: 8px;
  padding: 1px 7px;
  margin-left: 6px;
}
.lp-pill--good { background: var(--tint-green); color: #2d6a4f; }
.lp-pill--bad  { background: var(--color-error-container); color: var(--color-on-error-container); }

.lp-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-outline-variant);
}
.lp-total__values { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 600; }
.lp-total__arrow { color: var(--color-outline); }
.lp-total__delta { font-size: 13px; font-weight: 700; }
.lp-total__delta--good { color: #2d6a4f; }
.lp-total__delta--bad  { color: var(--color-error); }

.lp-empty { font-size: var(--text-body-sm-size); color: var(--color-outline); font-style: italic; }

@media (max-width: 900px) {
  .lp-mid-row { flex-direction: column; }
  .lp-levers { max-width: none; width: 100%; }
}

.lp-area-card {
  margin-top: 20px;
}
.lp-area-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.lp-area-card__head .label-caps {
  color: var(--color-on-surface-variant);
}
.lp-area-card__wrap {
  position: relative;
  height: 200px;
}
.lp-area-card__wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

/* ── Stress test climatique ──────────────────────────────────────────── */

.cst-page { display: flex; flex-direction: column; gap: 20px; }

.cst-warnings {
  margin: 0; padding: 10px 14px; border-radius: 8px;
  background: var(--tint-peach); color: #7a4324; font-size: 13px;
  border: 1px solid var(--color-outline-variant);
}

.cst-section-title { margin: 0 0 12px; display: flex; align-items: center; gap: 6px; }

.cst-scenario-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.cst-scenario {
  display: flex; flex-direction: column; gap: 3px; padding: 12px;
  border: 1.5px solid var(--color-outline-variant); border-radius: 10px;
  background: var(--color-surface-container-lowest); cursor: pointer; text-align: left; font: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.cst-scenario:hover { border-color: var(--color-outline); }
.cst-scenario:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cst-scenario.is-active { border-color: var(--color-primary); background: var(--tint-blush); }

.cst-scenario__name { font-weight: 600; font-size: 14px; color: var(--color-on-surface); }
.cst-scenario__family { font-size: 12px; color: var(--color-on-surface-variant); }
.cst-scenario__warming { font-size: 12px; color: var(--color-primary); font-weight: 600; }

.cst-assumptions__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.cst-reset {
  border: var(--border-card); background: var(--color-surface-container-lowest); border-radius: 6px;
  padding: 5px 10px; font-size: 12px; color: var(--color-on-surface-variant); cursor: pointer;
}
.cst-reset:hover { background: var(--color-surface-container-low); }

.cst-fields {
  display: grid; gap: 14px; margin-top: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cst-field { display: flex; flex-direction: column; gap: 5px; }
.cst-field__label { font-size: 12px; color: var(--color-on-surface-variant); font-weight: 500; }
.cst-field--check { flex-direction: row; align-items: flex-start; gap: 8px; }
.cst-hint { display: block; font-size: 11px; color: var(--color-on-surface-variant); }

.cst-segmented { display: inline-flex; gap: 4px; }
.cst-segmented__btn {
  border: var(--border-card); background: var(--color-surface-container-lowest); border-radius: 6px;
  padding: 5px 12px; font-size: 13px; cursor: pointer; color: var(--color-on-surface-variant);
}
.cst-segmented__btn.is-active {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary);
}
.cst-segmented__btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.cst-charts {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}
.cst-chart-card { padding: 16px; }

.cst-bottom {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

.cst-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cst-table th, .cst-table td {
  padding: 7px 8px; text-align: left; border-bottom: 1px solid var(--color-outline-variant);
}
.cst-table thead th { font-size: 11px; text-transform: uppercase; color: var(--color-on-surface-variant); }
.cst-table td.data-tabular { text-align: right; font-variant-numeric: tabular-nums; }
.cst-source { color: var(--color-on-surface-variant); font-size: 11px; }

.cst-tooltip { cursor: help; color: var(--color-on-surface-variant); font-size: 13px; }
.cst-tooltip:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* ── Portfolio analysis ─────────────────────────────────────────── */
.pf-portfolio-picker { display: flex; align-items: center; gap: .5rem; }
.pf-tabs { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-outline-variant); margin-bottom: 1.25rem; }
.pf-tab { background: none; border: none; padding: .6rem 1rem; cursor: pointer; color: var(--color-on-surface-variant); border-bottom: 2px solid transparent; font: inherit; }
.pf-tab--active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.pf-panel { display: none; }
.pf-panel--active { display: block; }
.pf-section-title { margin: 0 0 1rem; }
.pf-settings__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.pf-field { display: flex; flex-direction: column; gap: .35rem; }
.pf-field--check { flex-direction: row; align-items: center; gap: .5rem; }
.pf-composition { margin-top: 1.25rem; }
.pf-add { position: relative; margin-bottom: 1rem; max-width: 420px; }
.pf-company-listbox { position: absolute; z-index: 20; left: 0; right: 0; margin: .25rem 0 0; padding: .25rem; list-style: none; background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.08); max-height: 240px; overflow: auto; }
.pf-company-option { padding: .45rem .6rem; cursor: pointer; border-radius: 4px; }
.pf-company-option:hover { background: var(--color-surface-container); }
.pf-holdings { width: 100%; border-collapse: collapse; }
.pf-holdings th, .pf-holdings td { padding: .5rem; text-align: left; border-bottom: 1px solid var(--color-border, #eee); }
.pf-holdings input { width: 100%; max-width: 140px; }
.pf-gear, .pf-del { background: none; border: none; cursor: pointer; font-size: 1.1rem; }
.pf-gear--filled { color: var(--color-primary); }
.pf-total--ok { color: #2a9d4a; font-weight: 600; }
.pf-total--warn { color: #c98a00; font-weight: 600; }
.pf-empty { color: var(--color-on-surface-variant); padding: 1rem 0; }
.pf-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-top: 1rem; }
.pf-status--ok { color: #2a9d4a; }
.pf-status--err { color: #c0392b; }
.pf-dialog { border: none; border-radius: 10px; padding: 1.5rem; max-width: 420px; width: 90%; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.pf-dialog::backdrop { background: rgba(0,0,0,.35); }
.pf-dialog__title { margin: 0 0 1rem; }
.pf-dialog__bond { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.pf-dialog__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.25rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── Onglet Impact du portefeuille ─────────────────────────────── */
.pf-impact { display: flex; flex-direction: column; gap: 1.25rem; }
.pf-impact__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.pf-impact__head .pf-section-title { margin: 0; }
.pf-metric-toggle { display: inline-flex; border: 1px solid var(--color-outline-variant); border-radius: 999px; overflow: hidden; }
.pf-metric-btn { background: none; border: none; padding: .5rem 1.1rem; cursor: pointer; font: inherit; color: var(--color-on-surface-variant); }
.pf-metric-btn + .pf-metric-btn { border-left: 1px solid var(--color-outline-variant); }
.pf-metric-btn--active { background: var(--color-primary); color: var(--color-on-primary); font-weight: 600; }
.pf-impact__hero { text-align: center; padding: 2rem 1rem; }
.pf-impact__total { margin: .5rem 0 .25rem; font-size: 2.6rem; font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.pf-impact__unit { font-size: 1.1rem; font-weight: 600; color: var(--color-on-surface-variant); }
.pf-impact__caption { margin: 0; font-size: 13px; color: var(--color-on-surface-variant); }
.pf-impact__chart-wrap { position: relative; height: 420px; }

/* ── Portfolio · Risque physique ─────────────────────────────────── */
.pf-phys { display: grid; gap: 1.5rem; }
.pf-phys__caption { margin: 0 0 1rem; font-size: 13px; color: var(--color-on-surface-variant); }
.pf-phys__radar-wrap { position: relative; height: 420px; }
.pf-phys__heatmap-wrap { overflow-x: auto; }
.pf-phys-heatmap { border-collapse: collapse; width: 100%; font-size: 13px; }
.pf-phys-heatmap th {
  text-align: left; padding: .5rem .6rem; font-weight: 600;
  color: var(--color-on-surface-variant); white-space: nowrap;
}
.pf-phys-heatmap thead th { vertical-align: bottom; }
.pf-phys-heatmap td {
  padding: .5rem .6rem; text-align: center; font-variant-numeric: tabular-nums;
}
.pf-phys-row--total th, .pf-phys-row--total td {
  font-weight: 700;
  border-top: 2px solid var(--color-outline);
  border-bottom: 2px solid var(--color-outline);
}

/* ── Portfolio : onglet Risque de transition ─────────────────────── */
.pf-trans .kpi-row { margin-bottom: 1rem; }

.pf-trans-delta {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.pf-trans-delta--worse { color: #b3261e; }
.pf-trans-delta--better { color: #1a7a4c; }


/* ══════════════════════════════════════════════════════════════════════════
   MODE CARTE PLEIN ÉCRAN — .map-page
   ──────────────────────────────────────────────────────────────────────────
   Utilisé par les pages entièrement cartographiques (Vue d'ensemble, Risque
   physique, Dette écologique, LEAP Locate, LEAP Evaluate). La carte occupe
   toute la zone sous le header ; tout le reste flotte au-dessus d'elle.

   Le bloc « sidebar en rail » ci-dessous s'applique à TOUTES les pages : la
   barre de navigation est identique partout. Le reste (scène plein écran,
   overlays) reste réservé aux pages carte, via le préfixe
   `.app-layout.map-page` ou une classe (.map-stage, .map-panel, .map-drawer,
   .map-chip) absente des templates sans carte.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shell : la page ne défile plus, la scène occupe la hauteur restante ── */
/* 100dvh suit la barre d'adresse des navigateurs mobiles, qui masquerait
   sinon le bas de la carte ; 100vh reste en repli pour les anciens moteurs. */
.app-layout.map-page {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app-layout.map-page .app-main {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* La sidebar est un rail fixe sur toutes les pages : la zone principale garde
   toujours la même marge, que le repli mémorisé soit actif ou non. */
.app-layout .app-main,
.app-layout.sidebar-collapsed .app-main {
  margin-left: var(--sidebar-collapsed-width);
}

.app-layout.map-page .app-content {
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Rail d'icônes flottantes ────────────────────────────────────────────
   Pas de barre : les icônes sont des pastilles rondes posées directement sur
   la page — sur la carte pour les pages carte, sur le fond sinon. La sidebar
   est toujours réduite, quel que soit l'état mémorisé dans localStorage (que
   l'on ne touche pas). Le bouton de repli devient inutile : les libellés
   sortent au survol, on le masque plutôt que de le laisser inerte. */
.app-layout .app-sidebar {
  top: var(--header-height);          /* les ronds passent sous le header */
  width: var(--sidebar-collapsed-width);
  overflow: visible;
  background: transparent;
  border-right: none;
  /* Sans ça, une bande invisible de 64px avalerait les glissers de carte
     entre deux pastilles. Seuls les elements interactifs redeviennent
     cliquables, juste en dessous. */
  pointer-events: none;
}

.app-layout .sidebar__nav-link,
.app-layout .sidebar__nav-details > summary,
.app-layout .sidebar__nav-sub,
.app-layout .sidebar__footer-link,
.app-layout .sidebar__footer-icon-link {
  pointer-events: auto;
}

/* Le contenu part du bord : la carte passe sous les pastilles. Les pages
   sans carte reservent la gouttiere dans leur propre padding. */
.app-layout .app-main,
.app-layout.sidebar-collapsed .app-main {
  margin-left: 0;
}

.app-layout:not(.map-page) .app-content {
  padding-left: calc(var(--sidebar-collapsed-width) + var(--space-gutter));
}

/* ── Les pastilles ───────────────────────────────────────────────────────
   Meme forme pour la navigation, le pied et le logo : un rond de 40px qui
   se detache de ce qu'il y a derriere. */
.app-layout .sidebar__nav-link,
.app-layout .sidebar__nav-details > summary,
.app-layout .sidebar__footer-link {
  width: 40px;
  height: 40px;
  margin-inline: auto;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.app-layout .sidebar__nav-link,
.app-layout .sidebar__nav-details > summary {
  background: var(--scrim-chip);
  border: 1px solid var(--color-outline-variant);
}

.app-layout .sidebar__nav-link.active,
.app-layout .sidebar__nav-details > summary.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.app-layout .sidebar__footer-icon-link {
  border-radius: 50%;
  background: var(--scrim-chip);
  border: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.app-layout .sidebar__nav-list {
  gap: 10px;
}

/* Plus de barre, donc plus de separateur en pied. */
.app-layout .sidebar__footer { border-top: none; }

.app-layout .sidebar__toggle {
  display: none;
}

/* Le rail ne peut pas être un conteneur de défilement, sinon il rognerait
   les libellés en flyout. */
.app-layout .sidebar__nav {
  overflow: visible;
  min-height: 0;
}

.app-layout .sidebar__nav-list > li {
  position: relative;
}

.app-layout .sidebar__nav-link,
.app-layout .sidebar__nav-details > summary {
  justify-content: center;
  gap: 0;
  padding: 0;
  overflow: visible;
}

.app-layout .sidebar__nav-chevron {
  display: none;
}

/* Flyout : nom de la page au survol de l'icône. Collé au rail (left: 100%)
   pour qu'il n'y ait pas de zone morte entre l'icône et le libellé. */
.app-layout .sidebar__nav-label {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  z-index: 300;
  padding: 7px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.app-layout .sidebar__nav-link:hover > .sidebar__nav-label,
.app-layout .sidebar__nav-link:focus-visible > .sidebar__nav-label,
.app-layout .sidebar__nav-details > summary:hover > .sidebar__nav-label,
.app-layout .sidebar__nav-details > summary:focus-visible > .sidebar__nav-label {
  opacity: 1;
  visibility: visible;
}

/* Groupe « Analyse des risques » : le sous-menu devient lui aussi un flyout,
   sinon ses pages (dont deux pages carte) ne seraient plus atteignables.
   `display: flex` force l'affichage même quand <details> n'est pas [open]. */
/* Chrome rend le contenu d'un <details> ferme via ::details-content en
   content-visibility: hidden : `display` ne suffit pas a le reafficher.
   Regle isolee, un selecteur inconnu n'invaliderait qu'elle. */
.app-layout .sidebar__nav-details::details-content {
  content-visibility: visible;
  block-size: auto;
}

.app-layout .sidebar__nav-details > .sidebar__nav-sub {
  display: flex;
  pointer-events: auto;
  position: absolute;
  top: 0;
  left: 100%;
  z-index: 300;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.app-layout .sidebar__nav-details:hover > .sidebar__nav-sub,
.app-layout .sidebar__nav-details:focus-within > .sidebar__nav-sub {
  opacity: 1;
  visibility: visible;
}

/* Le libellé du groupe se superpose au flyout du sous-menu : on le masque
   dès que le sous-menu est ouvert, le sous-menu porte déjà le contexte. */
.app-layout .sidebar__nav-details:hover > summary > .sidebar__nav-label,
.app-layout .sidebar__nav-details:focus-within > summary > .sidebar__nav-label {
  opacity: 0;
  visibility: hidden;
}

.app-layout .sidebar__footer {
  overflow: visible;
}

.app-layout .sidebar__footer-link {
  position: relative;
  justify-content: center;
  padding: 0;
  overflow: visible;
}

.app-layout .sidebar__footer-link-label {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  z-index: 300;
  padding: 7px 12px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.app-layout .sidebar__footer-link:hover > .sidebar__footer-link-label,
.app-layout .sidebar__footer-link:focus-visible > .sidebar__footer-link-label {
  opacity: 1;
  visibility: visible;
}

/* Deux pastilles cote a cote ne tiennent pas dans 64px : on les empile. */
.app-layout .sidebar__footer-actions {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── Header sans barre ──────────────────────────────────────────────────
   Meme principe que le rail : plus de barre, seulement des pastilles posees
   sur la page. Le header sort du flux pour que la carte passe dessous. */
.app-layout .app-main {
  position: relative;
}

.app-layout .app-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Au-dessus du rail (z-index 200) : le header forme un contexte
     d'empilement, sans ça la liste du sélecteur d'entreprise passerait sous
     les pastilles de navigation. Le rail démarre sous le header, les deux
     ne se chevauchent que par cette liste. */
  z-index: 250;
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  /* Sans ca, la bande de 60px avalerait les glissers de carte entre les
     pastilles. Seuls les deux groupes redeviennent cliquables. */
  pointer-events: none;
}

.app-layout .app-header > * {
  pointer-events: auto;
}

/* Le contenu occupe toute la hauteur : la carte passe sous les pastilles.
   Les pages sans carte reservent la bande dans leur propre padding. */
.app-layout:not(.map-page) .app-content {
  padding-top: calc(var(--header-height) + 32px);
}

/* Groupe de gauche : selecteur d'entreprise, recherche, ou selecteur de
   portefeuille selon la page. Meme pastille pour les trois. */
.app-layout .app-header__search,
.app-layout .company-combobox,
.app-layout .pf-portfolio-picker {
  padding: 6px 14px;
  border-radius: var(--radius-full);
  background: var(--scrim-chip);
  border: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.app-layout .app-header__icon-btn {
  background: var(--scrim-chip);
  border: 1px solid var(--color-outline-variant);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.app-layout .app-header__avatar {
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ── La scène ────────────────────────────────────────────────────────────
   Conteneur unique par page carte : la carte en fond, les overlays dessus. */
.map-stage {
  --map-panel-width: 320px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* La carte remplit la scène : ni bordure, ni rayon, ni hauteur fixe. */
.map-stage .map-stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: none;
  border-radius: 0;
}

/* ── Emplacements d'overlay ────────────────────────────────────────────── */
/* Cales a droite du rail de pastilles, qui occupe les 64 premiers pixels. */
.map-stage__tl,
.map-stage__bl {
  position: absolute;
  left: calc(var(--sidebar-collapsed-width) + 12px);
  z-index: 12;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Cale sous la rangee de pastilles du header. */
.map-stage__tl { top: calc(var(--header-height) + 12px); }
.map-stage__bl { bottom: 12px; }

/* Quand la page a un tiroir bas, la legende se cale au-dessus de sa poignee. */
.map-stage:has(.map-drawer:not([hidden])) .map-stage__bl {
  bottom: 64px;
}

/* Tiroir deploye (et visible) : il recouvrirait la legende. On l'efface
   plutot que de la laisser coupee en deux ; elle revient a la fermeture.
   Le :not([hidden]) exclut un tiroir masque qui garderait is-open. */
.map-stage:has(.map-drawer.is-open:not([hidden])) .map-stage__bl {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Les blocs déplacés dans un emplacement étaient positionnés en absolu par
   leurs propres règles : on les remet dans le flux du conteneur. */
.map-stage .map-stage__tl > *,
.map-stage .map-stage__bl > * {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}

/* ── Panneau latéral droit ──────────────────────────────────────────────
   Même matière et même comportement que « Sites localisés » (.ll-panel),
   généralisés aux autres pages carte. */
.map-panel {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  right: 12px;
  bottom: 12px;
  z-index: 14;
  width: var(--map-panel-width);
  max-width: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  background: var(--scrim-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.map-stage.is-panel-collapsed .map-panel {
  transform: translateX(calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.map-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

.map-panel__title {
  color: var(--color-on-surface-variant);
}

.map-panel__toggle,
.map-panel__reopen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  padding: 4px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s;
}

.map-panel__toggle:hover,
.map-panel__reopen:hover {
  background: var(--color-surface-container);
}

.map-panel__reopen {
  position: absolute;
  top: calc(var(--header-height) + 12px);
  right: 12px;
  z-index: 14;
  width: 36px;
  height: 36px;
  display: none;
  background: var(--scrim-chip);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.map-stage.is-panel-collapsed .map-panel__reopen {
  display: inline-flex;
}

.map-panel__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}

/* KPI compacts en tête de panneau (Risque physique, Dette écologique). */
.map-panel .kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}

.map-panel .kpi-card {
  padding: 10px 12px;
}

.map-panel .kpi-card__value {
  font-size: 20px;
  margin-bottom: 2px;
}

.map-panel .kpi-card__label {
  font-size: 10px;
  line-height: 1.3;
}

/* Blocs de contenu réinsérés dans le panneau : ils y perdent leur cadre de
   carte, le panneau en fait déjà office. */
.map-panel .card,
.map-panel .pr-ranking-card,
.map-panel .country-panel {
  max-height: none;
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  overflow: visible;
  flex: none;
}

.map-panel .de-toggle-row {
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Tiroir bas ─────────────────────────────────────────────────────────
   Replié par défaut : seule sa poignée est visible au-dessus de la carte. */
.map-drawer {
  position: absolute;
  left: calc(var(--sidebar-collapsed-width) + 12px);
  right: calc(var(--map-panel-width) + 24px);
  bottom: 12px;
  z-index: 13;
  display: flex;
  flex-direction: column;
  max-height: 60%;
  background: var(--scrim-panel);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  transition: right 0.25s ease;
}

/* Panneau replié : le tiroir récupère toute la largeur. */
.map-stage.is-panel-collapsed .map-drawer {
  right: 12px;
}

.map-drawer__handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}

.map-drawer__handle:hover {
  background: var(--color-surface-container);
}

.map-drawer__chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.map-drawer.is-open .map-drawer__chevron {
  transform: rotate(180deg);
}

.map-drawer__body {
  display: none;
  min-height: 0;
  overflow: auto;
  padding: 12px 14px;
  border-top: 1px solid var(--color-outline-variant);
}

.map-drawer.is-open .map-drawer__body {
  display: block;
}

/* Le tiroir peut être masqué par le JS de page (ex. #policy-section quand
   l'entreprise n'a aucune politique) : display:flex battrait [hidden]. */
.map-drawer[hidden] {
  display: none;
}

/* Blocs réinsérés dans le tiroir : le tiroir porte déjà le cadre. */
.map-drawer .card {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-top: 0;
  padding-top: 0;
}

/* ── Pastilles flottantes (sélecteur de fond, onglets LEAP) ─────────────── */
.map-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: var(--radius-md);
  background: var(--scrim-chip);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Onglets LEAP en pastille : version compacte sur une ligne. La barre
   d'onglets partagée reste inchangée sur Assess et Prepare, qui n'ont pas
   de carte et ne portent donc pas .map-stage. */
.map-stage .leap-tabs {
  margin-bottom: 0;
  gap: 4px;
  flex-wrap: nowrap;
}

.map-stage .leap-tab {
  flex-direction: row;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  background: transparent;
  border-color: transparent;
}

.map-stage .leap-tab__letter {
  font-size: 13px;
}

/* L'onglet actif garde sa pastille pleine : la regle .leap-tab--active est
   moins specifique que .map-stage .leap-tab, il faut la rejouer ici. */
.map-stage .leap-tab--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* ── Ajustements des overlays existants dans la scène ───────────────────── */
.map-stage .map-legend {
  pointer-events: auto;
}

.map-stage .ll-commodity-legend .map-legend__list,
.map-stage #ov-mode-legend .map-legend__list,
.map-stage #ov-supply-legend .map-legend__list {
  max-height: 30vh;
}

/* C'est .map-panel__body qui defile : les vues internes ne doivent pas
   creer un second conteneur de defilement. */
.map-panel .country-panel__view {
  overflow: visible;
}

/* Le tableau « Détail par actif » défile horizontalement dans le tiroir. */
.map-drawer .pr-table-wrap {
  overflow-x: auto;
}

/* ── Modes de la Vue d'ensemble ────────────────────────────────────────────
   Grille 2×2 fixe entre l'en-tête du panneau et son contenu défilant. */
.ov-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-outline-variant);
  flex-shrink: 0;
}

.ov-mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  background: var(--color-surface-container-lowest);
  color: var(--color-on-surface-variant);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.ov-mode-btn:hover:not(:disabled) {
  border-color: var(--color-outline);
  background: var(--color-surface-container-low);
  color: var(--color-on-surface);
}

.ov-mode-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* L'état actif l'emporte sur le survol (même spécificité, déclaré après). */
.ov-mode-btn.ov-mode-btn--active,
.ov-mode-btn.ov-mode-btn--active:hover {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.ov-mode-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.ov-mode-btn__lock {
  flex-shrink: 0;
}

/* Listes de sites du panneau : c'est .map-panel__body qui défile. */
.ov-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Région role="status" : reste dans le DOM, ne prend de la place que si elle
   a du texte (chargement ou erreur). */
.ov-status { margin: 0 0 12px; }
.ov-status:empty { margin: 0; }
.ov-status--error { color: var(--color-error); font-style: normal; }

/* Bascule verrouillée (supply chain sans connexion). */
.map-layer-btn:disabled,
.map-layer-btn:disabled:hover {
  background: transparent;
  opacity: 0.55;
  cursor: not-allowed;
}


/* ══════════════════════════════════════════════════════════════════════════
   MODE NUIT — teintes semantiques
   ──────────────────────────────────────────────────────────────────────────
   Les fonds teintes des pastilles de statut basculent via les tokens
   --tint-* ; leurs textes, eux, sont des verts/ambres/rouges sombres choisis
   pour un fond clair. On les eclaircit ici, en gardant la meme teinte.
   Les accents non poses sur un fond teinte (lisereaux .comp-gate, accents
   ESG, couleurs de data-viz) restent identiques dans les deux themes.
   ══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .comp-badge--compliant     { color: #6ee7b7; }
:root[data-theme="dark"] .comp-badge--partial       { color: #fcd34d; }
:root[data-theme="dark"] .comp-badge--non_compliant { color: #fca5a5; }
:root[data-theme="dark"] .comp-dr__cond             { color: #c4b5fd; }
:root[data-theme="dark"] .comp-dr__suggestion       { color: #fcd34d; }
:root[data-theme="dark"] .risk-pill--high           { color: #ffcaa8; }
:root[data-theme="dark"] .lp-pill--good             { color: #86efac; }
:root[data-theme="dark"] .cst-warnings              { color: #f5c9a4; }

:root[data-theme="dark"] .asset-popup__metric--risk .asset-popup__metric-value { color: #fcd34d; }

:root[data-theme="dark"] .esg-chart__kpi-value--good,
:root[data-theme="dark"] .esg-market__change--up,
:root[data-theme="dark"] .lp-total__delta--good,
:root[data-theme="dark"] .pf-trans-delta--better,
:root[data-theme="dark"] .pf-total--ok,
:root[data-theme="dark"] .pf-status--ok             { color: #6ee7b7; }

:root[data-theme="dark"] .pf-status--err,
:root[data-theme="dark"] .pf-trans-delta--worse     { color: #fca5a5; }


/* ── Bascule jour / nuit ─────────────────────────────────────────────────
   Le bouton porte les deux icones ; le theme decide laquelle est peinte,
   ce qui evite un echange d'icone en JS. */
button.sidebar__footer-icon-link {
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.theme-icon--moon { display: none; }
:root[data-theme="dark"] .theme-icon--sun  { display: none; }
:root[data-theme="dark"] .theme-icon--moon { display: block; }


/* ══════════════════════════════════════════════════════════════════════════
   MOBILE — ≤ 768px
   ──────────────────────────────────────────────────────────────────────────
   Le rail de pastilles (64px + gouttière) mange un quart d'un écran de
   téléphone, déborde en hauteur, et ses libellés n'apparaissent qu'au
   survol. Sous 768px il devient un tiroir ouvert par le bouton ☰ du header
   (piloté par main.js, même point de rupture). Sur les pages carte, le
   panneau latéral devient une feuille en bas d'écran pour laisser la carte
   visible au-dessus.
   Ce bloc est volontairement en fin de fichier : il rejoue les sélecteurs
   du rail et des overlays à spécificité égale pour les surcharger.
   ══════════════════════════════════════════════════════════════════════════ */

/* Éléments propres au mobile, absents du rendu desktop. */
.sidebar__mobile-head,
.app-header__menu-btn,
.app-nav-backdrop,
.map-layer-toggle__trigger {
  display: none;
}

/* Sans survol, le bouton de retrait n'apparaîtrait jamais. */
@media (hover: none) {
  .compare-block__remove { opacity: 1; }
}

@media (max-width: 768px) {
  :root {
    --space-gutter: 16px;
    --text-headline-lg-size: 24px;
    --text-headline-lg-lh: 32px;
  }

  /* Filet de sécurité : un élément trop large ne fait plus défiler toute la
     page de côté (clip ne crée pas de conteneur de défilement). */
  .app-layout .app-main {
    overflow-x: clip;
  }

  /* Sous 16px, iOS zoome sur le champ au focus et ne dézoome pas. */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: max(16px, 1em);
  }

  /* ── Header ──────────────────────────────────────────────────────────── */
  .app-layout .app-header {
    justify-content: flex-start;
    gap: 8px;
    padding-inline: 12px;
  }

  .app-layout .app-header__menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-outline-variant);
    border-radius: 50%;
    background: var(--scrim-chip);
    color: var(--color-on-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
  }

  .app-header__menu-btn:focus-visible,
  .sidebar__mobile-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .app-layout .app-header__actions {
    margin-left: auto;
  }

  /* Le sélecteur de la page prend la place restante et peut rétrécir. */
  .app-layout .app-header__search,
  .app-layout .company-combobox,
  .app-layout .pf-portfolio-picker {
    flex: 1;
    min-width: 0;
    max-width: none;
  }

  /* Libellés « Entreprise » / « Portefeuille » : les champs portent déjà
     un aria-label, la place manque. */
  .company-combobox__label,
  .pf-portfolio-picker > .label-caps {
    display: none;
  }

  .app-layout .company-combobox {
    padding: 4px;
  }

  .company-combobox__input-wrap {
    flex: 1;
    min-width: 0;
  }

  /* Sélecteur + deux boutons : trop large, la pastille défile de côté. */
  .app-layout .pf-portfolio-picker {
    padding: 4px 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pf-portfolio-picker select {
    flex: 1 0 120px;
  }

  .pf-portfolio-picker .btn {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  /* ── Tiroir de navigation ────────────────────────────────────────────── */
  .app-layout .app-sidebar,
  .app-layout.sidebar-collapsed .app-sidebar {
    top: 0;
    bottom: 0;
    z-index: 400;
    width: min(300px, 85vw);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface-container-low);
    border-right: var(--border-card);
    box-shadow: var(--shadow-modal);
    pointer-events: auto;
    transform: translateX(-100%);
    visibility: hidden;
    /* visibility attend la fin du glissement avant de masquer. */
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .app-layout.is-nav-open .app-sidebar {
    transform: none;
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s;
  }

  .app-nav-backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 390;
    background: rgba(27, 28, 25, 0.45);
  }

  .app-layout .sidebar__mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-shrink: 0;
    padding: 12px 12px 12px 20px;
    border-bottom: var(--border-card);
  }

  .sidebar__mobile-title {
    font-size: var(--text-body-md-size);
    font-weight: 700;
    color: var(--color-primary);
  }

  .sidebar__mobile-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-on-surface-variant);
    cursor: pointer;
  }

  .sidebar__mobile-close:hover {
    background: var(--color-surface-container);
  }

  .app-layout .sidebar__nav {
    flex: 1 0 auto;
    padding: 12px;
  }

  .app-layout .sidebar__nav-list {
    gap: 2px;
  }

  /* Les pastilles rondes redeviennent des lignes pleine largeur, hautes de
     44px minimum (cible tactile). */
  .app-layout .sidebar__nav-link,
  .app-layout .sidebar__nav-details > summary,
  .app-layout .sidebar__footer-link,
  .app-layout.sidebar-collapsed .sidebar__footer-link {
    width: auto;
    height: auto;
    min-height: 44px;
    margin-inline: 0;
    padding: 10px 12px;
    justify-content: flex-start;
    gap: 12px;
    border-radius: var(--radius-md);
    box-shadow: none;
  }

  .app-layout .sidebar__nav-link,
  .app-layout .sidebar__nav-details > summary {
    background: transparent;
    border: 1px solid transparent;
  }

  .app-layout .sidebar__nav-link:not(.active):hover {
    background: var(--color-surface-container);
  }

  /* Le groupe « Analyse des risques » est un simple intitulé : son
     sous-menu reste déplié (main.js ouvre le <details>). */
  .app-layout .sidebar__nav-details > summary {
    pointer-events: none;
  }

  /* Les libellés en flyout reprennent leur place dans la ligne. */
  .app-layout .sidebar__nav-label,
  .app-layout.sidebar-collapsed .sidebar__nav-label,
  .app-layout .sidebar__footer-link-label,
  .app-layout.sidebar-collapsed .sidebar__footer-link-label {
    position: static;
    z-index: auto;
    width: auto;
    padding: 0;
    border: none;
    background: none;
    box-shadow: none;
    color: inherit;
    font-size: var(--text-body-sm-size);
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .app-layout .sidebar__nav-details:hover > summary > .sidebar__nav-label,
  .app-layout .sidebar__nav-details:focus-within > summary > .sidebar__nav-label {
    opacity: 1;
    visibility: visible;
  }

  .app-layout .sidebar__nav-details > .sidebar__nav-sub {
    position: static;
    min-width: 0;
    padding: 2px 0 6px 44px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }

  .app-layout .sidebar__nav-sublink {
    min-height: 40px;
    padding: 10px 12px;
    font-size: var(--text-body-sm-size);
  }

  .app-layout .sidebar__footer {
    gap: 6px;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: var(--border-card);
  }

  .app-layout .sidebar__footer-actions,
  .app-layout.sidebar-collapsed .sidebar__footer-actions {
    flex-direction: row;
    justify-content: flex-start;
    gap: 8px;
    padding-inline: 0;
  }

  .app-layout .sidebar__footer-icon-link {
    width: 44px;
    height: 44px;
  }

  /* ── Contenu des pages sans carte ────────────────────────────────────── */
  .app-layout:not(.map-page) .app-content {
    padding: calc(var(--header-height) + 16px) 16px 32px;
  }

  .compare-page {
    padding: 0;
  }

  .card {
    padding: 16px;
  }

  .kpi-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .kpi-card {
    min-width: 0;
    padding: 14px 16px;
  }

  /* Nombre impair de KPI : la dernière prend toute la ligne. */
  .kpi-row > .kpi-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .kpi-card__value {
    font-size: 24px;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* En-têtes titre + contrôles : les contrôles passent à la ligne. */
  .esg-chart__head,
  .esg-market__head,
  .lp-chart-card__head,
  .lp-area-card__head,
  .lp-levers__head,
  .dep-section-header,
  .pr-table-card__head,
  .cst-assumptions__head {
    flex-wrap: wrap;
    gap: 8px 12px;
  }

  /* Barres d'onglets : une seule ligne qui défile plutôt que trois lignes. */
  .pf-tabs,
  .esg-theme-tabs {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .pf-tab,
  .esg-theme-tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .esg-theme-tab {
    padding: 8px 16px;
  }

  /* Onglets LEAP (Assess, Prepare) : quatre colonnes égales. */
  .leap-tabs {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .leap-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 4px;
  }

  .leap-tab__letter {
    font-size: 20px;
  }

  .leap-tab__name {
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
  }

  /* Arbre de Mesure d'empreinte : le panneau de détail passe sous l'arbre. */
  .tr-tree-body {
    flex-direction: column;
    align-items: stretch;
  }

  .tr-tree-panel {
    width: auto;
    border-left: none;
    border-top: 1px solid var(--color-outline-variant);
  }

  /* Dépendances */
  .dep-service-grid {
    grid-template-columns: 1fr;
  }

  .dep-exposure-service-name {
    flex-basis: 110px;
  }

  /* Ligne de segment : icône, nom, montant et bouton en haut ; barre et
     niveau d'exposition dessous, alignés sur le nom. */
  .dep-revenue-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .dep-revenue-amount { order: 1; }
  .dep-toggle-btn     { order: 2; }

  .dep-revenue-bar-wrap {
    order: 3;
    flex: 1 1 calc(100% - 136px);
    margin-left: 34px;
  }

  .dep-exposure-badge { order: 4; }

  .dep-segment-detail {
    padding-left: 12px;
  }

  .dep-subsector-row {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .dep-subsector-meta {
    flex-basis: 100%;
  }

  .dep-subsector-revenue {
    flex: none;
    text-align: left;
  }

  .dep-subsector-atrisk {
    flex: none;
    margin-left: auto;
  }

  /* Comparaison : les deux sélecteurs s'empilent, les valeurs A / B
     restent côte à côte (c'est l'objet de la page). */
  .compare-cols {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .compare-block__header {
    padding: 8px 40px 8px 10px;
  }

  .compare-metric-trigger {
    max-width: 100%;
  }

  .compare-metric-trigger__label {
    max-width: none;
  }

  .compare-block__val {
    min-width: 0;
    padding: 12px 14px;
  }

  .compare-block__val-number {
    font-size: 20px;
    overflow-wrap: anywhere;
  }

  /* ESG */
  .esg-chart__kpis {
    flex-wrap: wrap;
    gap: 12px 24px;
  }

  .esg-chart__canvas {
    height: 240px;
  }

  /* LEAP Prepare */
  .lp-levers {
    min-width: 0;
  }

  /* Stress test climatique */
  .cst-scenario-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  .cst-segmented {
    flex-wrap: wrap;
  }

  /* Tableaux larges : ils défilent dans leur cadre. */
  .pf-holdings,
  .cst-table {
    display: block;
    overflow-x: auto;
  }

  /* Portfolio */
  .pf-add {
    max-width: none;
  }

  .pf-actions {
    flex-wrap: wrap;
  }

  .pf-impact__total {
    font-size: 2rem;
  }

  .pf-impact__chart-wrap,
  .pf-phys__radar-wrap {
    height: 300px;
  }

  .policy-accordion-header {
    padding: 12px 14px;
  }

  .policy-accordion-body {
    padding: 0 14px 14px;
  }

  /* Petits boutons à bascule : cibles tactiles agrandies. */
  .map-layer-btn {
    padding: 8px 10px;
  }

  .ov-mode-btn {
    min-height: 40px;
  }

  .pr-horizon__btn,
  .de-toggle__btn {
    padding: 7px 12px;
  }

  /* ── Pages carte ─────────────────────────────────────────────────────── */
  .map-stage {
    --map-sheet-height: 45%;
  }

  /* Plus de rail à gauche : les overlays reviennent au bord. */
  .map-stage__tl,
  .map-stage__bl {
    left: 8px;
    max-width: calc(100% - 16px);
  }

  /* Onglets LEAP en pastille : seule la phase active garde son nom, les
     autres ne montrent que leur lettre (nom conservé pour les lecteurs
     d'écran). */
  .map-stage .leap-tab {
    flex: none;
    padding: 6px 10px;
  }

  .map-stage .leap-tab:not(.leap-tab--active) .leap-tab__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Panneau latéral → feuille en bas d'écran. */
  .map-panel,
  .ll-map-wrap .ll-panel {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    height: var(--map-sheet-height);
  }

  .map-stage.is-panel-collapsed .map-panel,
  .ll-map-wrap.ll-collapsed .ll-panel {
    transform: translateY(calc(100% + 16px));
  }

  /* Le chevron de repli pointe vers le bas, sens du glissement. */
  .map-panel__toggle svg,
  .ll-panel__toggle svg {
    transform: rotate(90deg);
  }

  .map-panel__toggle,
  .ll-panel__toggle {
    width: 36px;
    height: 36px;
  }

  .map-panel__reopen,
  .ll-map-wrap .ll-panel__reopen {
    top: auto;
    bottom: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
  }

  /* Tiroir bas : posé au-dessus de la feuille, pleine largeur. */
  .map-drawer {
    left: 8px;
    right: 8px;
    bottom: calc(var(--map-sheet-height) + 16px);
    max-height: calc(100% - var(--map-sheet-height) - var(--header-height) - 32px);
  }

  /* Feuille repliée : le tiroir descend et laisse la place au bouton de
     réouverture à droite. */
  .map-stage.is-panel-collapsed .map-drawer {
    right: 60px;
    bottom: 8px;
    max-height: calc(100% - var(--header-height) - 24px);
  }

  /* Légendes : au-dessus de la feuille, et du tiroir s'il y en a un. */
  .map-stage__bl {
    bottom: calc(var(--map-sheet-height) + 16px);
  }

  .map-stage:has(.map-drawer:not([hidden])) .map-stage__bl {
    bottom: calc(var(--map-sheet-height) + 68px);
  }

  .map-stage.is-panel-collapsed .map-stage__bl,
  .ll-map-wrap.ll-collapsed .map-stage__bl {
    bottom: 8px;
  }

  .map-stage.is-panel-collapsed:has(.map-drawer:not([hidden])) .map-stage__bl {
    bottom: 60px;
  }

  /* Fond de carte : replié derrière l'icône de calque (main.js), les
     options se déploient à l'horizontale à droite de l'icône. */
  .map-layer-toggle.has-trigger {
    align-items: center;
  }

  .map-layer-toggle.has-trigger .map-layer-toggle__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: calc(var(--radius-md) - 2px);
    background: transparent;
    color: var(--color-on-surface);
    cursor: pointer;
  }

  .map-layer-toggle.has-trigger.is-open .map-layer-toggle__trigger {
    color: var(--color-primary);
  }

  .map-layer-toggle.has-trigger:not(.is-open) .map-layer-btn[data-layer] {
    display: none;
  }

  .map-stage .map-legend {
    padding: 6px 10px;
  }

  .map-stage .ll-commodity-legend .map-legend__list,
  .map-stage #ov-mode-legend .map-legend__list,
  .map-stage #ov-supply-legend .map-legend__list {
    max-height: 18vh;
  }
}