/* ==========================================================================
   portail.css — Système de design du Portail Pro
   Port du prototype "Claude Design" (Portail Pro.html + core/shell jsx).
   Tokens à variables CSS + classes composants .pp-*. Pas de Tailwind.
   ========================================================================== */

:root {
  /* Brand */
  --navy: #0F2D52;
  /* Navy lisible sur fond coloré/pâle — pendant de --yellow-ink, éclairci en
     thème sombre où --navy vire à l'illisible (cf. la règle dark de .dd-tile
     dans la maquette). Utilisé par la table des stades (pro/dossier.py). */
  --navy-ink: #0F2D52;
  --yellow: #F4B400;
  --yellow-ink: #b8860b;
  --emerald: #117a57;
  /* White-label accent (surchargé par JS / localStorage) */
  --accent: #E8820C;
  --accent-ink: #ffffff;
  --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);

  /* Light theme surfaces */
  --ink: #0F2D52;
  --text: #27364b;
  --text-muted: #667085;
  --border: #e7ebf1;
  --border-strong: #d6dbe4;
  --bg: #f4f6f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  /* Troisième niveau de surface — tuiles et vignettes posées SUR --surface-2.
     Le cockpit le déclarait en dur dans .ckpit, ce qui l'excluait du thème
     sombre : 31 éléments, dont le sommaire entier, restaient clairs sur fond
     sombre (contraste 1,02). Promu ici pour que les trois surfaces pro
     partagent la même échelle. */
  --surface-3: #eef2f6;
  --sidebar-bg: #ffffff;
  --danger: #c23b3b;

  --shadow-sm: 0 1px 2px rgba(15,45,82,.06);
  --shadow-md: 0 4px 22px -6px rgba(15,45,82,.13), 0 2px 5px rgba(15,45,82,.05);
  --shadow-lg: 0 24px 60px -16px rgba(15,45,82,.24), 0 6px 14px rgba(15,45,82,.07);
}

[data-theme="dark"] {
  --ink: #f1f5fb;
  --text: #c8d2e0;
  --text-muted: #8898ad;
  --border: #1d3050;
  --border-strong: #294063;
  --bg: #081627;
  --surface: #0e2138;
  --surface-2: #0b1c30;
  --surface-3: #13263e;
  --sidebar-bg: #0a1a2e;
  --yellow-ink: #e0b53d;
  --navy-ink: #9db9de;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 22px -6px rgba(0,0,0,.5), 0 2px 5px rgba(0,0,0,.3);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.3);
}

/* ---- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: 'cv11','ss01';
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pp h1, .pp h2, .pp h3, .pp h4 { margin: 0; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-feature-settings: 'tnum'; }
::selection { background: var(--yellow); color: var(--navy); }
input::placeholder { color: var(--text-muted); opacity: .8; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 3px solid var(--bg); }
[x-cloak] { display: none !important; }

a { color: inherit; }

/* ==========================================================================
   App shell
   ========================================================================== */
.pp-app { display: flex; min-height: 100vh; background: var(--bg); }
.pp-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pp-main {
  padding: 32px 40px 64px;
  flex: 1;
  max-width: 1320px;
  width: 100%;
  margin: 0 auto;
}
[data-density="compact"] .pp-main { padding-top: 22px; }

/* ---- Sidebar ------------------------------------------------------------- */
.pp-sidebar {
  width: 256px; flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.pp-sidebar-brand {
  padding: 22px 20px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 11px;
}
.pp-sidebar-brand .pp-brand-name {
  font-size: 14.5px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-sidebar-brand .pp-brand-sub { font-size: 11px; color: var(--text-muted); }
.pp-sidebar-cta { padding: 18px 16px 6px; }
.pp-nav { padding: 14px 12px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pp-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; border: none;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 500;
  text-align: left; text-decoration: none;
  background: transparent; color: var(--text);
  transition: background .15s;
}
.pp-nav-item:hover { background: var(--surface-2); }
.pp-nav-item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 650; }
.pp-nav-item.is-active:hover { background: var(--accent-soft); }

/* ---- Sidebar lenses (navigation par stade de dossier) --------------------- */
.pp-sidebar-lenses { padding: 10px 12px 0; display: flex; flex-direction: column; gap: 2px; }
.dd-nav-group { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--text-muted); padding: 14px 12px 6px; }
.dd-lens {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; border: none; background: none; width: 100%;
  font-family: inherit; text-align: left; text-decoration: none;
}
.dd-lens:hover { background: var(--surface-2); }
.dd-lens.on { background: var(--accent-soft); color: var(--accent); }
.dd-lens .ic { width: 18px; height: 18px; flex-shrink: 0; display: grid; place-items: center; }
.dd-lens .ic svg { width: 17px; height: 17px; }
.dd-lens .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-lens .ct { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); padding: 1px 8px; border-radius: 999px; }
.dd-lens.on .ct { background: color-mix(in oklch, var(--accent) 20%, transparent); color: var(--accent); }
.dd-lens .dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }

/* "Tous les dossiers" est à la fois la lentille "pas de stade filtré" et le
   bouton de pliage de la liste des stades : un SEUL élément (#pp-lenses-fold),
   pas deux frères — cliquer sur le libellé plie/déplie, il ne navigue plus. */
.dd-lens-parent { display: flex; align-items: stretch; gap: 2px; }
.dd-lens-parent .dd-lens { flex: 1; min-width: 0; }
.dd-lens-chevron { flex-shrink: 0; width: 14px; height: 14px; display: grid; place-items: center; color: var(--text-muted); }
.dd-lens-chevron svg { width: 14px; height: 14px; transition: transform .15s; }
.dd-lens[aria-expanded="false"] .dd-lens-chevron svg { transform: rotate(-90deg); }
.dd-lens-list { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.pp-sidebar-lenses.is-collapsed .dd-lens-list { display: none; }

.pp-quota { padding: 0 16px 14px; }
.pp-quota-box { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px 15px; }
.pp-quota-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.pp-quota-head span:first-child { font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.pp-quota-head .mono { font-size: 12px; color: var(--ink); font-weight: 600; }
.pp-quota-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 8px; }
.pp-quota-sub strong { color: var(--ink); }

.pp-sidebar-user {
  padding: 12px 14px; border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.pp-sidebar-user .pp-user-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sidebar-user .pp-user-sub { font-size: 11px; color: var(--text-muted); }
.pp-icon-btn-bare { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 4px; display: flex; }

/* ---- Topbar -------------------------------------------------------------- */
.pp-topbar {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklch, var(--bg) 82%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0 40px; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
}
.pp-topbar-crumb { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.pp-topbar-crumb a { text-decoration: none; color: var(--text-muted); }
.pp-topbar-crumb a:hover { color: var(--accent); }
.pp-topbar h1 { font-size: 21px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.pp-topbar-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.pp-topbar-actions { display: flex; align-items: center; gap: 10px; }

.pp-bell {
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  color: var(--text-muted); display: flex; align-items: center; justify-content: center;
}
.pp-bell-dot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); border: 1.5px solid var(--surface); }
.pp-tweaks-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 15px;
  border-radius: 10px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.pp-tweaks-btn:hover { border-color: var(--border-strong); }

/* ==========================================================================
   Primitives
   ========================================================================== */
.pp-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pp-card.pp-pad-0 { padding: 0; }
.pp-card.pp-hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

.pp-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--text-muted); }

/* Buttons */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 600; border-radius: 10px; cursor: pointer; font-family: inherit;
  border: 1px solid transparent; white-space: nowrap; text-decoration: none;
  transition: transform .12s ease, box-shadow .2s ease, background .15s, border-color .15s;
  line-height: 1; padding: 11px 18px; font-size: 14px;
}
.pp-btn:hover { transform: translateY(-1px); }
.pp-btn-sm { padding: 8px 13px; font-size: 13px; }
.pp-btn-lg { padding: 14px 22px; font-size: 15px; }
.pp-btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 18px -8px color-mix(in oklch, var(--accent) 70%, transparent); }
.pp-btn-soft { background: var(--accent-soft); color: var(--accent); }
.pp-btn-secondary { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); }
.pp-btn-ghost { background: transparent; color: var(--text-muted); }
.pp-btn-dark { background: var(--navy); color: #fff; }
.pp-btn-emerald { background: var(--emerald); color: #fff; }
.pp-btn-danger { background: transparent; color: var(--danger); }
.pp-btn-block { width: 100%; }
.pp-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

/* Badges */
.pp-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  background: var(--surface-2); color: var(--text-muted);
}
.pp-badge .pp-dot { width: 5px; height: 5px; border-radius: 999px; background: currentColor; }
.pp-badge-success { background: color-mix(in oklch, var(--emerald) 13%, transparent); color: var(--emerald); }
.pp-badge-running { background: var(--accent-soft); color: var(--accent); }
.pp-badge-draft { background: color-mix(in oklch, var(--text-muted) 14%, transparent); color: var(--text-muted); }
.pp-badge-error { background: color-mix(in oklch, var(--danger) 12%, transparent); color: var(--danger); }
.pp-badge-accent { background: var(--accent-soft); color: var(--accent); }

/* Progress */
.pp-progress { height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.pp-progress > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width .5s ease; }
.pp-progress.pp-h8 { height: 8px; }
.pp-progress.is-high > span { background: var(--danger); }

/* Avatar */
.pp-avatar {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 700; flex-shrink: 0;
  width: 34px; height: 34px; font-size: 12px;
  background: color-mix(in oklch, var(--navy) 14%, var(--surface)); color: var(--navy);
}
.pp-avatar-accent { background: color-mix(in oklch, var(--accent) 14%, var(--surface)); color: var(--accent); }

/* Fields / inputs */
.pp-field { display: block; }
.pp-field > span.pp-label {
  display: block; font-size: 11px; font-weight: 600; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px;
}
.pp-field > span.pp-hint { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.pp-input {
  width: 100%; padding: 10px 13px; border: 1px solid var(--border-strong); border-radius: 10px;
  font-size: 14px; color: var(--ink); background: var(--surface); font-family: inherit;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.pp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-input.pp-mono { font-family: 'JetBrains Mono', monospace; }
select.pp-input { appearance: auto; }

/* Segmented control */
.pp-seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }
.pp-seg button {
  display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 8px 14px;
  border-radius: 7px; font-size: 13px; font-weight: 600; font-family: inherit; border: none;
  cursor: pointer; background: transparent; color: var(--text-muted); transition: all .15s;
}
.pp-seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.pp-seg.pp-seg-sm button { padding: 6px 11px; font-size: 12px; }

/* Toggle */
.pp-toggle {
  width: 42px; height: 24px; border-radius: 999px; border: none; cursor: pointer; padding: 3px;
  background: var(--border-strong); transition: background .2s; display: flex; justify-content: flex-start;
}
.pp-toggle.is-on { background: var(--accent); justify-content: flex-end; }
.pp-toggle > span { width: 18px; height: 18px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: all .2s; display: block; }

/* ==========================================================================
   Bandeau de posture du mode conseiller — maquette .dd-conseil-band
   Présence pilotée uniquement côté serveur ({% if client.mode_conseil %} dans
   dashboard.html) : pas de gating CSS par attribut, jamais posable en JS.
   ========================================================================== */
.dd-conseil-band {
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in oklch, var(--navy) 8%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--navy) 22%, transparent);
  border-radius: 14px; padding: 13px 18px;
}
.dd-conseil-band .ic {
  width: 34px; height: 34px; border-radius: 9px;
  background: color-mix(in oklch, var(--navy) 15%, transparent); color: var(--navy);
  display: grid; place-items: center; flex-shrink: 0;
}
[data-theme="dark"] .dd-conseil-band .ic { color: #9db9de; }
.dd-conseil-band svg { width: 19px; height: 19px; }
.dd-conseil-band .tx { font-size: 13px; line-height: 1.45; color: var(--text); }
.dd-conseil-band .tx b { color: var(--ink); }

/* ==========================================================================
   Bandeau de reprise (dernier dossier travaillé) — maquette .dd-resume
   ========================================================================== */
.dd-resume {
  display: flex; align-items: center; gap: 18px; text-decoration: none;
  background: linear-gradient(120deg, color-mix(in oklch, var(--accent) 9%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
  border-radius: 16px; padding: 18px 22px;
}
.dd-resume .rz-l { flex: 1; min-width: 0; }
.dd-resume .rz-eb { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.dd-resume h3 { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 4px; letter-spacing: -0.01em; }
.dd-resume p { font-size: 13px; color: var(--text-muted); margin: 0; }
.dd-resume p b { color: var(--text); font-weight: 600; }
.dd-resume .pp-btn { flex-shrink: 0; }

/* ==========================================================================
   Synthèse d'activité — maquette .dd-synth / .dd-syn
   ========================================================================== */
.dd-synth { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dd-syn { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.dd-syn .l { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); display: flex; align-items: center; gap: 7px; margin-bottom: 11px; }
.dd-syn .l .i { width: 24px; height: 24px; border-radius: 7px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
.dd-syn .l .i svg { width: 14px; height: 14px; }
.dd-syn .l .i.is-emerald { background: color-mix(in oklch, var(--emerald) 13%, transparent); color: var(--emerald); }
.dd-syn .l .i.is-navy { background: color-mix(in oklch, var(--navy) 13%, transparent); color: var(--navy); }
.dd-syn .l .i.is-danger { background: color-mix(in oklch, var(--danger) 13%, transparent); color: var(--danger); }
.dd-syn .v { font-size: 25px; font-weight: 500; color: var(--ink); letter-spacing: -0.02em; line-height: 1; display: flex; align-items: baseline; gap: 5px; }
.dd-syn .v small { font-size: 12px; color: var(--text-muted); font-weight: 500; font-family: inherit; }
.dd-syn .s { font-size: 11.5px; color: var(--text-muted); margin-top: 6px; }

/* ==========================================================================
   Tables
   ========================================================================== */
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.pp-table thead th {
  text-align: left; padding: 13px 18px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
  white-space: nowrap; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.pp-table th.pp-right, .pp-table td.pp-right { text-align: right; }
.pp-table th.pp-center, .pp-table td.pp-center { text-align: center; }
.pp-table tbody tr { border-bottom: 1px solid var(--border); transition: background .12s; }
.pp-table tbody tr.pp-clickable { cursor: pointer; }
.pp-table tbody tr:hover { background: var(--surface-2); }
.pp-table td { padding: 14px 18px; font-size: 13px; color: var(--text); }
[data-density="compact"] .pp-table td { padding: 9px 18px; }
.pp-table .pp-cell-strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pp-table .pp-cell-meta { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.pp-table .pp-dash { color: var(--border-strong); }

/* Grid helpers */
.pp-grid { display: grid; gap: 16px; }
.pp-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pp-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pp-grid-4 { grid-template-columns: repeat(4, 1fr); }
.pp-stack { display: flex; flex-direction: column; gap: 24px; }
.pp-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
[data-density="compact"] .pp-cards-grid { gap: 12px; }

/* ==========================================================================
   Dashboard — toggle Table/Cartes
   (attribut data-sim-view porté sur <html>)
   Les règles Atelier/Cockpit ont disparu avec les blocs qu'elles masquaient
   (hero .pp-atelier / .pp-hero et cockpit KPI .pp-cockpit), remplacés par le
   bandeau de reprise et la synthèse d'activité.
   ========================================================================== */
[data-sim-view="table"] .pp-sim-cards { display: none; }
[data-sim-view="cards"] .pp-sim-table { display: none; }

/* Filters bar */
.pp-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.pp-search { position: relative; flex: 1 1 260px; min-width: 220px; }
.pp-search .pp-search-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-muted); display: flex; }
.pp-search .pp-input { padding-left: 40px; }
.pp-statusbar { display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; }
.pp-statusbar button, .pp-statusbar a {
  padding: 7px 13px; border-radius: 7px; border: none; cursor: pointer; font-family: inherit;
  font-size: 13px; font-weight: 600; background: transparent; color: var(--text-muted);
  transition: all .15s; text-decoration: none; display: inline-flex; align-items: center;
}
.pp-statusbar button.is-on, .pp-statusbar a.is-on { background: var(--accent-soft); color: var(--accent); }

/* Section header */
.pp-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.pp-section-head h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; }
.pp-section-head .pp-section-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }

/* Empty state */
.pp-empty { text-align: center; padding: 54px 24px; }
.pp-empty-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); color: var(--text-muted); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; }
.pp-empty-title { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 5px; }
.pp-empty-sub { font-size: 13px; color: var(--text-muted); }

/* Sim card (vue cartes) */
.pp-sim-card { cursor: pointer; display: flex; flex-direction: column; gap: 14px; padding: 20px; }
[data-density="compact"] .pp-sim-card { padding: 16px; }
.pp-sim-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pp-sim-card-id { display: flex; gap: 11px; min-width: 0; }
.pp-sim-card-name { font-size: 14px; font-weight: 650; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sim-card-addr { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-sim-card-metrics { display: flex; gap: 18px; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.pp-sim-card-metrics .pp-num { font-size: 17px; font-weight: 500; }
.pp-sim-card-metrics .pp-cap { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.pp-sim-card-state { padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); }
.pp-sim-card-foot { display: flex; align-items: center; justify-content: space-between; }

/* Pagination */
.pp-pagination { padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--text-muted); }
.pp-pagination .pp-page-btns { display: flex; align-items: center; gap: 8px; }
.pp-pagination a, .pp-pagination span.pp-pg { padding: 5px 11px; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--ink); text-decoration: none; font-weight: 600; }
.pp-pagination span.pp-pg-off { padding: 5px 11px; border: 1px solid var(--border); border-radius: 7px; color: var(--border-strong); }

/* ==========================================================================
   Détail simulation — config grid
   ========================================================================== */
.pp-config-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.pp-config-grid > div { background: var(--surface); padding: 14px 24px; }
.pp-config-grid .pp-k { font-size: 12px; color: var(--text-muted); margin-bottom: 3px; }
.pp-config-grid .pp-v { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pp-card-head { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.pp-card-head h3 { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 0; }

/* ==========================================================================
   Matériel
   ========================================================================== */
.pp-type-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pp-type-pill {
  display: flex; align-items: center; gap: 10px; padding: 11px 17px; border-radius: 12px;
  cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: all .15s;
}
.pp-type-pill.is-on { border-color: transparent; background: var(--accent); color: var(--accent-ink); box-shadow: 0 6px 16px -8px color-mix(in oklch, var(--accent) 70%, transparent); }
.pp-type-pill .pp-count { font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.pp-type-pill.is-on .pp-count { background: rgba(255,255,255,.22); color: var(--accent-ink); }
.pp-mat-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-bottom: 1px solid var(--border); }
.pp-mat-row:last-child { border-bottom: none; }
.pp-mat-ico { width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--accent-soft); color: var(--accent); }

/* ==========================================================================
   Tweaks panel
   ========================================================================== */
.pp-tweaks-overlay { position: fixed; inset: 0; background: rgba(8,16,30,.28); z-index: 90; }
.pp-tweaks {
  position: fixed; top: 0; right: 0; height: 100vh; width: 340px;
  background: var(--surface); border-left: 1px solid var(--border); z-index: 100;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
}
.pp-tweaks-head { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.pp-tweaks-head .pp-t-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.pp-tweaks-head .pp-t-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.pp-tweaks-body { padding: 22px; overflow-y: auto; flex: 1; }
.pp-tweaks-foot { padding: 16px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; }
.pp-tweak-row { margin-bottom: 18px; }
.pp-tweak-row > .pp-t-label { font-size: 11.5px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 9px; }
.pp-tweak-note { font-size: 11.5px; color: var(--text-muted); margin-top: 9px; }
.pp-accent-swatches { display: flex; gap: 9px; flex-wrap: wrap; }
.pp-accent-swatch { width: 34px; height: 34px; border-radius: 9px; border: 2px solid transparent; cursor: pointer; transition: all .15s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pp-accent-swatch.is-on { border-color: var(--ink); }
.pp-tweaks .pp-seg { width: 100%; }
.pp-tweaks .pp-seg button { flex: 1; justify-content: center; }

/* Alerts */
.pp-alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; font-size: 13px; }
.pp-alert-warn { background: color-mix(in oklch, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent); color: var(--ink); }
.pp-alert-danger { background: color-mix(in oklch, var(--danger) 10%, var(--surface)); border: 1px solid color-mix(in oklch, var(--danger) 30%, transparent); color: var(--ink); }
.pp-alert-success { background: color-mix(in oklch, var(--emerald) 11%, var(--surface)); border: 1px solid color-mix(in oklch, var(--emerald) 28%, transparent); color: var(--ink); }
.pp-alert a { color: var(--accent); font-weight: 600; }

/* Responsive */
@media (max-width: 1080px) {
  .pp-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1000px) {
  .dd-synth { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .dd-resume { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 880px) {
  .pp-sidebar { display: none; }
  .pp-main, .pp-topbar { padding-left: 20px; padding-right: 20px; }
  .pp-grid-3, .pp-grid-2 { grid-template-columns: 1fr; }
  .pp-config-grid { grid-template-columns: 1fr; }
}


/* Repli du menu latéral pro (persistant via localStorage pp_nav_collapsed) */
.pp-nav-toggle{margin-left:auto;width:28px;height:28px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-muted);display:grid;place-items:center;cursor:pointer;flex-shrink:0}
.pp-nav-toggle:hover{color:var(--ink);border-color:var(--border-strong)}
.pp-nav-reopen{width:34px;height:34px;border-radius:9px;border:1px solid var(--border);background:var(--surface);color:var(--text-muted);place-items:center;cursor:pointer;margin-right:12px;display:none}
.pp-nav-reopen:hover{color:var(--ink);border-color:var(--border-strong)}
html.pp-nav-collapsed .pp-sidebar{display:none}
html.pp-nav-collapsed .pp-nav-reopen{display:grid}

/* ===== Cartes de dossier (dashboard pro) ================================= */
/* La tuile porte le TYPE DE BÂTIMENT (glyphe) ; sa couleur exprime une
   quantité en mode pro (rampe d'accent) et un jugement en mode conseil
   (palette évaluative). Le rouge est réservé aux champs bloquants.
   Liste plate (pas de groupement par stade) : `.pp-stade-head` retiré, mort
   depuis que le stade est un filtre de sidebar, plus un axe de la grille. */

.pp-dossier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}

.pp-dossier{background:var(--surface);border:1px solid var(--border);border-radius:15px;
  padding:17px 18px;display:flex;flex-direction:column;gap:14px;
  transition:box-shadow .15s,border-color .15s}
/* Seules les cartes réellement navigables (status success → onclick) portent le
   curseur cliquable : un dossier en calcul ou en échec ne mène nulle part. */
.pp-dossier.is-clickable{cursor:pointer}
.pp-dossier:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.pp-dossier-top{display:flex;align-items:flex-start;gap:12px}

/* Tuile : glyphe = type de bâtiment, couleur = STADE du dossier.
   `--tuile` est posée en style inline par _dossier_card.html depuis la 4ᵉ
   colonne de `stades_pour` (pro/dossier.py) : une seule table de couleurs pour
   l'en-tête de groupe et la tuile. Traitement `.dd-tile` de la maquette —
   fond très pâle, contour et glyphe de la couleur du stade. Le repli
   `var(--text-muted)` couvre un stade absent de la table. */
/* Pas de contour volontaire, conforme à la maquette (.dd-tile) : fond pâle + glyphe coloré */
.pp-dossier-tuile{--tuile:var(--text-muted);
  width:46px;height:46px;border-radius:12px;flex-shrink:0;
  display:grid;place-items:center;
  background:color-mix(in oklch,var(--tuile) 13%,transparent);
  color:var(--tuile)}
.pp-dossier-tuile svg{width:23px;height:23px}

.pp-dossier-id{flex:1;min-width:0}
.pp-dossier-id .nm{font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-dossier-id .ad{font-size:12.5px;color:var(--text-muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.pp-dossier-ref{font-family:ui-monospace,monospace;font-size:11px;font-weight:600;
  color:var(--accent);background:var(--accent-soft);padding:3px 8px;border-radius:6px;
  align-self:flex-start;white-space:nowrap}

/* Ligne de métriques : les chiffres du projet (kWc/€/%), jamais une mesure de
   confiance. Grille à 3 cellules, séparateurs fins (fond = trait), valeurs en
   chiffres tabulaires — cf. maquette design (.dd-metrics). */
.pp-dossier-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--border);border-radius:10px;overflow:hidden}
.pp-dossier-metrics > div{background:var(--surface-2);padding:8px 10px}
.pp-dossier-metrics .lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--text-muted)}
.pp-dossier-metrics .val{font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:14.5px;font-weight:600;color:var(--ink);margin-top:3px;
  font-feature-settings:'tnum'}
.pp-dossier-metrics .val .u{font-size:9.5px;font-weight:500;color:var(--text-muted)}
/* Ordre important : .est doit gagner sur .eco (valeur estimée = toujours atténuée,
   même sur la cellule euro) */
.pp-dossier-metrics .val.eco{color:var(--emerald)}
.pp-dossier-metrics .val.est{color:var(--text-muted)}

/* Ligne de commentaire (`.dd-missing` de la maquette) : toujours rendue.
   Neutre par défaut, rouge sur champ bloquant, verte sur dossier complet.
   Le `<b>` nomme les champs concernés et prend la couleur de la variante. */
.pp-dossier-manque{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--text-muted);
  background:var(--surface-2);border-radius:9px;padding:9px 12px}
.pp-dossier-manque b{color:var(--text);font-weight:650}
.pp-dossier-manque.is-cle{background:color-mix(in oklch,var(--danger) 9%,var(--surface));color:var(--danger)}
.pp-dossier-manque.is-cle b{color:var(--danger)}
.pp-dossier-manque.is-complet{color:var(--emerald)}
.pp-dossier-manque.is-complet b{color:var(--emerald)}
.pp-dossier-manque.is-perime{background:color-mix(in oklch,var(--yellow-ink) 12%,var(--surface));color:var(--yellow-ink)}
.pp-dossier-manque svg{width:15px;height:15px;flex-shrink:0}

.pp-dossier-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto}
/* Date + horloge (`.dd-when` de la maquette) */
.pp-dossier-when{font-size:11.5px;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.pp-dossier-when svg{width:13px;height:13px;flex-shrink:0}
/* Bouton « Ouvrir » (`.dd-cta` de la maquette) : accent doux, pas de contour */
.pp-dossier-cta{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  font-weight:650;color:var(--accent);background:var(--accent-soft);border:none;
  border-radius:8px;padding:7px 12px;cursor:pointer;font-family:inherit;
  text-decoration:none;white-space:nowrap}
.pp-dossier-cta:hover{background:color-mix(in oklch,var(--accent) 20%,transparent)}
.pp-dossier-cta svg{width:14px;height:14px;flex-shrink:0}

@media(max-width:640px){.pp-dossier-grid{grid-template-columns:1fr}}


/* ---- Mon compte : personnalisation du vocabulaire des stades -------------
   Une ligne par stade : pastille de la couleur effective, champs de saisie,
   rappel du defaut, remise a zero. La pastille lit la meme valeur que la
   lentille de sidebar et la tuile de carte (pro/dossier.py stades_pour), donc
   ce que le pro voit ici est exactement ce qu'il verra sur son tableau de bord.
   ------------------------------------------------------------------------ */
.pp-stade-row{display:grid;grid-template-columns:10px 1fr auto;gap:6px 12px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
.pp-stade-row:last-of-type{border-bottom:0}
.pp-stade-dot{width:10px;height:10px;border-radius:50%;grid-row:1 / span 2;
  align-self:start;margin-top:26px}
.pp-stade-fields{display:grid;grid-template-columns:1fr 190px 84px;gap:10px}
.pp-stade-picker .pp-input{padding:2px 4px;height:36px;cursor:pointer}
.pp-stade-defaut{grid-column:2;font-size:11.5px;color:var(--text-muted)}
.pp-stade-defaut b{color:var(--ink);font-weight:600}
.pp-stade-reset{grid-column:3;grid-row:1;align-self:center}
@media(max-width:720px){
  .pp-stade-fields{grid-template-columns:1fr}
  .pp-stade-dot{margin-top:8px}
}

/* ---- Mon compte : niveau d'affichage économique par défaut (conseil) -----
   Trois options radio en cartes. La sélection se marque par --ink, jamais
   --accent : --accent est la couleur white-label du client, pas un état
   sémantique (même convention que .pp-accent-swatch.is-on ci-dessus). ------ */
.pp-niveau-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.pp-niveau-opt{border:1px solid var(--border-strong);border-radius:12px;padding:15px;
  cursor:pointer;position:relative;background:var(--surface);display:block}
.pp-niveau-opt input{position:absolute;top:14px;right:14px;margin:0}
.pp-niveau-opt:hover{border-color:var(--border-strong);background:var(--surface-2)}
.pp-niveau-opt.is-on{border-color:var(--ink);border-width:2px;padding:14px}
.pp-niveau-opt .ct{display:block;font-size:13.5px;font-weight:700;color:var(--ink);
  padding-right:22px}
.pp-niveau-opt .cd{display:block;font-size:11.5px;color:var(--text-muted);
  margin-top:5px;line-height:1.45}
@media(max-width:720px){
  .pp-niveau-opts{grid-template-columns:1fr}
}