/* ========================================================================
   METOD · Frontend Commune
   Design system v3.2 — METOD tokens
   ======================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Palette — mapped from METOD design tokens */
  --cream: var(--metod-bone);
  --cream-warm: var(--metod-paper);
  --paper: var(--metod-paper);
  --ink: var(--metod-ink);
  --ink-70: var(--metod-ash);
  --ink-55: var(--metod-ash);
  --ink-40: var(--metod-stone);
  --ink-25: var(--metod-fog);
  --ink-10: var(--metod-mist);
  --ink-06: var(--metod-mist);

  --orange: var(--metod-orange);
  --orange-hover: var(--metod-orange-deep);
  --orange-soft: var(--metod-orange-soft);

  /* Pastilles de statut — semantic METOD tokens */
  --status-red: var(--metod-brick);
  --status-orange: var(--metod-caramel);
  --status-yellow: var(--metod-plum);
  --status-green: var(--metod-forest);

  --status-red-bg: var(--metod-brick-soft);
  --status-orange-bg: var(--metod-caramel-soft);
  --status-yellow-bg: var(--metod-plum-soft);
  --status-green-bg: var(--metod-forest-soft);

  /* Typographie — General Sans from metod-tokens
     --font-body, --font-display, --font-mono are defined in metod-tokens.css */
  --font-ui: var(--font-body);
  --font-editorial: var(--font-display);

  /* Géométrie */
  --rail: 72px;
  --nav-height: var(--shell-topbar-height);
  --radius: var(--radius-sm);
  --hairline: var(--border-hairline);
  --hairline-strong: var(--border-soft);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--font-size-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Grain texture overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}
input, select, textarea {
  font-family: inherit;
  color: inherit;
}
table { border-collapse: collapse; width: 100%; }

/* ---------- Focus — METOD orange glow ---------- */
*:focus { outline: none; }
*:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(232, 90, 16, 0.3);
  border-radius: var(--radius-sm);
}

/* ---------- Chiffres : toujours JetBrains Mono ---------- */
.num, .mono, time, .metric-value {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "zero";
  letter-spacing: -0.01em;
}

/* ---------- Layout principal (sidebar + contenu) ---------- */
.app {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar — 4 icônes max ---------- */
.rail {
  background: var(--cream);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  position: sticky;
  top: 0;
  height: 100vh;
}
.rail__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--shell-topbar-height);
  margin-bottom: var(--space-6);
  color: var(--ink);
  border-bottom: var(--hairline);
  flex-shrink: 0;
}
.rail__logo {
  height: 16px;
  width: auto;
  display: block;
  fill: currentColor;
}
.rail__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.rail__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--ink-55);
  border-radius: 2px;
  position: relative;
  transition: color 120ms ease, background 120ms ease;
}
.rail__link:hover { color: var(--ink); background: var(--ink-06); }
.rail__link.is-active { color: var(--ink); }
.rail__link.is-active::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 20px;
  background: var(--metod-orange);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.rail__link svg { width: 20px; height: 20px; stroke: currentColor; }
.rail__label {
  font-size: 10px;
  font-weight: 500;
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.rail__foot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}

/* ---------- Top bar ---------- */
.topbar {
  height: var(--nav-height);
  border-bottom: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar__left {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.topbar__commune {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.topbar__logo {
  height: 14px;
  width: auto;
  display: block;
  fill: var(--ink);
}
.topbar__breadcrumb {
  font-size: 13px;
  color: var(--ink-55);
  display: flex;
  align-items: center;
  gap: 8px;
}
.topbar__breadcrumb .sep { opacity: 0.4; }
.topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search__input {
  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  color: var(--ink);
  width: 260px;
  height: 36px;
  transition: border-color 120ms ease;
}
.search__input:focus-visible { border-color: var(--ink); outline: 0; }
.search__input::placeholder { color: var(--ink-40); }
.search__icon {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--ink-40);
  pointer-events: none;
}
.bell {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  position: relative;
  color: var(--ink-70);
}
.bell:hover { background: var(--ink-06); }
.bell .badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--status-red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}
.agent {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 16px;
  border-left: var(--hairline);
}
.agent__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.1;
}
.agent__role {
  font-size: 11px;
  color: var(--ink-55);
  line-height: 1.1;
  margin-top: 2px;
}
.agent__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
}

/* ---------- Contenu page ---------- */
.page {
  padding: 32px 40px 64px;
  max-width: 100%;
}
.page__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 32px;
  border-bottom: var(--hairline);
  padding-bottom: 24px;
}
.page__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: var(--space-3);
}
.page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h1);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
}
.page__subtitle {
  font-size: 14px;
  color: var(--ink-55);
  margin-top: 10px;
  max-width: 520px;
}
.page__date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-55);
  text-align: right;
  line-height: 1.5;
}

/* ---------- Pastille de statut (code uniforme) ---------- */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}
.pastille::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-40);
  flex-shrink: 0;
}
.pastille--red::before { background: var(--status-red); }
.pastille--orange::before { background: var(--status-orange); }
.pastille--yellow::before { background: var(--status-yellow); }
.pastille--green::before { background: var(--status-green); }

/* ---------- Chip (statut étendu, avec fond) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.chip--red { background: var(--status-red-bg); color: var(--status-red); }
.chip--orange { background: var(--status-orange-bg); color: var(--status-orange); }
.chip--yellow { background: var(--status-yellow-bg); color: var(--status-yellow); }
.chip--green { background: var(--status-green-bg); color: var(--status-green); }
.chip--neutral { background: var(--ink-06); color: var(--ink-70); }
.chip--neutral::before { background: var(--ink-40); }

/* ---------- Bandeaux de synthèse (compteurs) ---------- */
.synthese {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: var(--paper);
  border: var(--hairline);
  margin-bottom: 28px;
}
.synthese__cell {
  padding: 24px 28px;
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: background 120ms ease;
  position: relative;
}
.synthese__cell:last-child { border-right: 0; }
.synthese__cell:hover { background: var(--cream-warm); }
.synthese__cell.is-active {
  background: var(--ink);
  color: var(--cream);
}
.synthese__cell.is-active .synthese__label,
.synthese__cell.is-active .synthese__hint { color: var(--cream); opacity: 0.8; }
.synthese__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-55);
  display: flex;
  align-items: center;
  gap: 8px;
}
.synthese__label .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.synthese__label .dot--red { background: var(--status-red); }
.synthese__label .dot--orange { background: var(--status-orange); }
.synthese__label .dot--yellow { background: var(--status-yellow); }
.synthese__label .dot--green { background: var(--status-green); }
.synthese__value {
  font-family: var(--font-mono);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.synthese__cell.is-active .synthese__value { color: var(--cream); }
.synthese__hint {
  font-size: 12px;
  color: var(--ink-55);
  font-family: var(--font-mono);
}

/* ---------- Tableau dossiers ---------- */
.card {
  background: var(--paper);
  border: var(--hairline);
  width: 100%;
  overflow-x: auto;
}
.card__head {
  padding: 16px 24px;
  border-bottom: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card__title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.card__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-55);
}
.dossiers-table {
  font-size: 13px;
  width: 100%;
  table-layout: fixed;
}
.dossiers-table th {
  text-align: left;
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-55);
  padding: 12px 10px;
  border-bottom: var(--hairline);
  white-space: nowrap;
  background: var(--cream);
  overflow: hidden;
  text-overflow: ellipsis;
}
.dossiers-table th.is-sorted {
  color: var(--ink);
}
.dossiers-table th .arrow {
  margin-left: 4px;
  opacity: 0.7;
}
.dossiers-table td {
  padding: 12px 10px;
  border-bottom: var(--hairline);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dossiers-table tr:last-child td { border-bottom: 0; }
.dossiers-table tr { cursor: pointer; transition: background 100ms ease; }
.dossiers-table tbody tr:hover { background: var(--cream-warm); }
.dossiers-table .num-cell {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-55);
}
.dossiers-table .address {
  font-weight: 600;
  color: var(--ink);
  display: block;
}
.dossiers-table .project {
  font-size: 12px;
  color: var(--ink-55);
  display: block;
  margin-top: 2px;
}
.dossiers-table .demandeur {
  font-size: 13px;
  color: var(--ink-70);
}
.dossiers-table .delay {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dossiers-table .delay--critical { color: var(--status-red); font-weight: 600; }
.dossiers-table .delay--warning { color: var(--status-orange); }
.dossiers-table .next-action {
  font-size: 12px;
  color: var(--ink-70);
}

/* ---------- Pagination ---------- */
.pagination {
  padding: 20px 24px;
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-55);
  font-family: var(--font-mono);
}
.pagination__pages { display: flex; gap: 2px; }
.pagination__page {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-55);
  border-radius: 2px;
}
.pagination__page:hover { background: var(--ink-06); color: var(--ink); }
.pagination__page.is-active {
  background: var(--ink);
  color: var(--cream);
}

/* ---------- Bouton principal (UN SEUL par écran) ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 22px;
  background: var(--orange);
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: var(--radius);
  transition: background 120ms ease, transform 60ms ease;
  min-width: 40px;
}
.btn-primary:hover { background: var(--orange-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary--ink {
  background: var(--ink);
}
.btn-primary--ink:hover { background: var(--metod-ink); }
.btn-primary--green {
  background: var(--status-green);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  border: var(--hairline);
  border-radius: var(--radius);
  transition: background 100ms ease, border-color 100ms ease;
}
.btn-secondary:hover { background: var(--ink-06); border-color: var(--ink-25); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: 12px;
  color: var(--ink-70);
  border-radius: 2px;
}
.btn-ghost:hover { color: var(--ink); background: var(--ink-06); }

/* ---------- Utilitaires ---------- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .gap-24 { gap: 24px; }
.mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.muted { color: var(--ink-55); }
.strong { font-weight: 600; }
.small { font-size: 12px; }
.tiny { font-size: 11px; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--font-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
}
.divider { height: 1px; background: var(--ink-10); border: 0; margin: 24px 0; }
.dot-sep { color: var(--ink-25); margin: 0 8px; }

/* ---------- Dossier — layout 3 colonnes ---------- */
.dossier {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 0;
  min-height: calc(100vh - var(--nav-height));
  background: var(--paper);
  border-top: var(--hairline);
}
.dossier__aside {
  padding: 28px 24px;
  border-right: var(--hairline);
  background: var(--cream);
  overflow-y: auto;
}
.dossier__main {
  padding: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.dossier__actions {
  padding: 28px 24px;
  border-left: var(--hairline);
  background: var(--cream);
  overflow-y: auto;
}

.meta-block { margin-bottom: 24px; }
.meta-block__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 6px;
}
.meta-block__value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.4;
}
.meta-block__mono {
  font-family: var(--font-mono);
  font-size: 13px;
}

/* Mini-carte parcelle */
.mini-map {
  width: 100%;
  height: 140px;
  background: var(--cream-warm);
  border: var(--hairline);
  margin: 12px 0 20px;
  position: relative;
  overflow: hidden;
}

/* Jauge délai */
.gauge {
  margin-top: 6px;
}
.gauge__bar {
  height: 6px;
  background: var(--ink-06);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.gauge__fill {
  height: 100%;
  background: var(--status-orange);
  transition: width 300ms ease;
}
.gauge__fill--red { background: var(--status-red); }
.gauge__fill--orange { background: var(--status-orange); }
.gauge__fill--green { background: var(--status-green); }
.gauge__labels {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-55);
}

/* Timeline */
.timeline {
  position: relative;
  padding-left: 20px;
  margin-top: 8px;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--ink-10);
}
.timeline__item {
  position: relative;
  margin-bottom: 18px;
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink-25);
}
.timeline__item--current::before {
  background: var(--ink);
  border-color: var(--ink);
}
.timeline__item--past::before {
  background: var(--ink-25);
  border-color: var(--ink-25);
}
.timeline__date {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-55);
}
.timeline__title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 2px;
  line-height: 1.35;
}

/* Onglets */
.tabs {
  display: flex;
  border-bottom: var(--hairline);
  padding: 0 32px;
  background: var(--cream);
}
.tabs__item {
  padding: 16px 0;
  margin-right: 32px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-55);
  position: relative;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tabs__item:hover { color: var(--ink); }
.tabs__item.is-active {
  color: var(--ink);
  font-weight: 600;
}
.tabs__item.is-active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--metod-orange);
}
.tabs__item .count {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--ink-06);
  color: var(--ink-70);
  padding: 2px 6px;
  border-radius: 100px;
  min-width: 20px;
  text-align: center;
  font-weight: 600;
}

.tab-panel { padding: 32px; }

/* Analyse PAG */
.verdict-hero {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px 32px;
  background: var(--cream);
  border: var(--hairline);
  margin-bottom: 24px;
}
.verdict-big {
  font-family: var(--font-mono);
  font-size: 56px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.04em;
}
.verdict-big .sep { color: var(--ink-25); }
.verdict-big .total { color: var(--ink-55); font-size: 40px; }
.verdict-caption {
  font-size: 13px;
  color: var(--ink-55);
  margin-top: 6px;
}
.verdict-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--ink);
  letter-spacing: -0.01em;
}

.rule {
  display: grid;
  grid-template-columns: 24px 1fr 120px 120px 100px;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  border-bottom: var(--hairline);
  cursor: pointer;
  transition: background 100ms ease;
}
.rule:hover { background: var(--cream); }
.rule__mark {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rule__mark--red { background: var(--status-red); }
.rule__mark--orange { background: var(--status-orange); }
.rule__mark--green { background: var(--status-green); }
.rule__name {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.rule__desc {
  font-size: 12px;
  color: var(--ink-55);
  margin-top: 2px;
}
.rule__value, .rule__limit {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  text-align: right;
}
.rule__limit { color: var(--ink-55); }
.rule__verdict-text {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: right;
}
.rule__verdict-text--conforme { color: var(--status-green); }
.rule__verdict-text--nonconforme { color: var(--status-red); }
.rule__verdict-text--avérifier { color: var(--status-orange); }

.rule--non-conformant { background: var(--status-red-bg); }
.rule--non-conformant .rule__value { color: var(--status-red); font-weight: 600; }

/* Technicien validation toggle */
.rule__validate {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.rule__validate:hover { background: rgba(34, 197, 94, 0.08); }
.rule__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--status-green);
  cursor: pointer;
}
.rule__validate-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--metod-stone);
  letter-spacing: 0.02em;
  transition: color 0.15s;
}

/* Historique timeline */
.hist-timeline { display: flex; flex-direction: column; gap: 0; }
.hist-entry { display: flex; gap: 12px; min-height: 56px; }
.hist-line { display: flex; flex-direction: column; align-items: center; width: 20px; flex-shrink: 0; }
.hist-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; }
.hist-connector { width: 2px; flex: 1; background: var(--metod-mist); min-height: 20px; }
.hist-content { display: flex; gap: 10px; padding-bottom: 20px; flex: 1; align-items: flex-start; }
.hist-icon { flex-shrink: 0; margin-top: 1px; }
.hist-icon svg { display: block; }
.hist-body { flex: 1; }
.hist-title { font-size: 13px; font-weight: 500; color: var(--ink); line-height: 1.4; }
.hist-date { font-size: 11px; color: var(--metod-ash); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* Actions panel (colonne droite) */
.actions-primary {
  margin-bottom: 16px;
}
.action-card {
  background: var(--paper);
  border: var(--hairline);
  padding: 20px;
  margin-bottom: 20px;
}
.action-card__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 8px;
}
.action-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 14px;
  color: var(--ink);
}
.action-card__hint {
  font-size: 12px;
  color: var(--ink-55);
  margin-top: 12px;
  line-height: 1.4;
}
.btn-primary--full { width: 100%; }

.secondary-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 16px;
}
.secondary-actions__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 8px;
}
.secondary-actions a,
.secondary-actions button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-70);
  border-radius: 2px;
  min-height: 40px;
  text-align: left;
  width: 100%;
}
.secondary-actions a:hover,
.secondary-actions button:hover {
  background: var(--paper);
  color: var(--ink);
}
.secondary-actions svg { width: 16px; height: 16px; stroke: currentColor; }

/* Avis services */
.avis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.avis-card {
  background: var(--paper);
  border: var(--hairline);
  padding: 20px 24px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: center;
}
.avis-card__service {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.avis-card__desc {
  font-size: 12px;
  color: var(--ink-55);
}
.avis-card__timing {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-70);
  text-align: right;
}
.avis-card__timing .days {
  font-size: 22px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.avis-card__timing--over .days { color: var(--status-red); }

/* Carte */
.map-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: calc(100vh - var(--nav-height));
  border-top: var(--hairline);
}
.map-sidebar {
  border-right: var(--hairline);
  background: var(--cream);
  padding: 24px;
  overflow-y: auto;
}
.map-canvas {
  background: #EFEDE3;
  position: relative;
  overflow: hidden;
}
.map-filter {
  margin-bottom: 24px;
}
.map-filter__label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 12px;
}
.map-filter__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-70);
  cursor: pointer;
}
.map-filter__item:hover { color: var(--ink); }
.map-filter__item input[type="checkbox"] { accent-color: var(--ink); }
.map-filter__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-55);
}
.map-pin-card {
  position: absolute;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 12px 14px;
  max-width: 260px;
  font-size: 12px;
  box-shadow: 4px 4px 0 var(--ink-10);
}

/* Direction */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--paper);
  border: var(--hairline);
  margin-bottom: 32px;
}
.kpi {
  padding: 28px;
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kpi:last-child { border-right: 0; }
.kpi__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-55);
}
.kpi__value {
  font-family: var(--font-mono);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin-top: 4px;
}
.kpi__trend {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-55);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi__trend--up { color: var(--status-green); }
.kpi__trend--down { color: var(--status-red); }

.panel {
  background: var(--paper);
  border: var(--hairline);
  padding: 28px 32px;
  margin-bottom: 24px;
}
.panel__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h3);
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-1);
}
.panel__subtitle {
  font-size: 12px;
  color: var(--ink-55);
  margin-bottom: 20px;
}

.chart-delais {
  height: 220px;
  width: 100%;
}

.agents-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.agent-row {
  display: grid;
  grid-template-columns: 150px 1fr 60px;
  gap: 16px;
  align-items: center;
  font-size: 13px;
}
.agent-row__name { color: var(--ink); font-weight: 500; }
.agent-row__bar {
  height: 8px;
  background: var(--ink-06);
  border-radius: 4px;
  overflow: hidden;
}
.agent-row__fill {
  height: 100%;
  background: var(--ink);
}
.agent-row__fill--over { background: var(--status-red); }
.agent-row__count {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
  color: var(--ink);
}

/* Aide */
.aide-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: 40px 48px;
  max-width: 1100px;
}
.aide-toc {
  position: sticky;
  top: calc(var(--nav-height) + 40px);
  align-self: start;
}
.aide-toc__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 16px;
}
.aide-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: step;
}
.aide-toc li {
  counter-increment: step;
  padding: 8px 0;
  font-size: 13px;
  color: var(--ink-70);
  display: flex;
  gap: 10px;
}
.aide-toc li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-40);
  padding-top: 2px;
}
.aide-content {
  max-width: 680px;
}
.aide-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h2);
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-5);
}
.aide-content h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
  margin: 36px 0 10px;
  letter-spacing: -0.005em;
}
.aide-content p {
  font-size: 15px;
  color: var(--ink-70);
  line-height: 1.65;
  margin-bottom: 14px;
}
.aide-content .kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 8px;
  background: var(--paper);
  border: var(--hairline);
  border-bottom: 2px solid var(--ink-10);
  border-radius: 3px;
  color: var(--ink);
}

/* ---------- Tabs panels ---------- */
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ---------- Formulaire (structured view) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border: var(--hairline);
}
.form-section {
  padding: 24px 28px;
  border-right: var(--hairline);
  border-bottom: var(--hairline);
}
.form-section:nth-child(2n) { border-right: 0; }
.form-section__title {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: var(--hairline);
}
.form-field {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 8px 0;
  font-size: 13px;
  align-items: baseline;
}
.form-field__label {
  color: var(--ink-55);
  font-size: 12px;
}
.form-field__value {
  color: var(--ink);
  font-weight: 500;
}
.form-field__value.mono { font-family: var(--font-mono); }

.form-files {
  list-style: none;
  padding: 0;
  margin: 0;
}
.form-files li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: var(--hairline);
}
.form-files li:last-child { border-bottom: 0; }
.form-files li svg {
  width: 14px;
  height: 14px;
  color: var(--ink-55);
  flex-shrink: 0;
}
.form-files li .size {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-55);
}

/* ---------- Avis externes (detail cards) ---------- */
.avis-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.avis-detail__card {
  background: var(--paper);
  border: var(--hairline);
  padding: 22px 26px;
}
.avis-detail__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
.avis-detail__service {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h3);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: var(--space-1);
}
.avis-detail__sub {
  font-size: 12px;
  color: var(--ink-55);
}
.avis-detail__status {
  text-align: right;
}
.avis-detail__meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--hairline);
}
.avis-detail__meta-item {
  font-size: 11px;
  color: var(--ink-55);
}
.avis-detail__meta-item strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}
.avis-detail__body {
  margin-top: 18px;
  padding-top: 18px;
  border-top: var(--hairline);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-70);
}
.avis-detail__body strong { color: var(--ink); font-weight: 600; }
.avis-detail__actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
}

/* ---------- Décision (arrêté draft) ---------- */
.decree {
  background: var(--paper);
  border: var(--hairline);
  padding: var(--space-12) var(--space-16);
  max-width: 780px;
  margin: 0 auto;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.6;
}
.decree__head {
  text-align: center;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 24px;
  margin-bottom: 28px;
}
.decree__commune {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-70);
  margin-bottom: 10px;
}
.decree__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--font-size-h2);
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.decree__ref {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-55);
  margin-top: 10px;
  letter-spacing: 0.04em;
}
.decree__body {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
}
.decree__body p { margin-bottom: 14px; }
.decree__body strong { font-weight: 600; }
.decree__considerant {
  padding-left: 20px;
  border-left: 2px solid var(--ink-10);
  margin: 8px 0 16px;
  font-size: 13px;
  color: var(--ink-70);
}
.decree__article-title {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-right: 6px;
}
.decree__sign {
  margin-top: 40px;
  padding-top: 28px;
  border-top: var(--hairline);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  font-family: var(--font-ui);
  font-size: 12px;
}
.decree__sign-block {
  text-align: left;
}
.decree__sign-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-55);
  margin-bottom: 4px;
}
.decree__sign-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 14px;
}
.decree__sign-meta {
  color: var(--ink-55);
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.decree-actions {
  max-width: 780px;
  margin: 24px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  background: var(--cream);
  border: var(--hairline);
}
.decree-actions .status-note {
  font-size: 12px;
  color: var(--ink-55);
  font-family: var(--font-mono);
}

/* ---------- Plans viewer ---------- */
.plans-viewer {
  display: flex;
  gap: 0;
  border: var(--hairline);
  background: var(--paper);
  height: 100%;
}
.plans-sidebar {
  border-right: var(--hairline);
  background: var(--cream);
  overflow-y: auto;
  padding: 16px;
}
.plans-thumb {
  padding: 8px;
  margin-bottom: 2px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: center;
}
.plans-thumb:hover { background: var(--ink-06); }
.plans-thumb.is-active {
  background: var(--ink);
  color: var(--cream);
}
.plans-thumb__preview {
  width: 40px;
  height: 48px;
  background: var(--paper);
  border: var(--hairline);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.plans-thumb.is-active .plans-thumb__preview { border-color: transparent; }
.plans-thumb__title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}
.plans-thumb__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  opacity: 0.65;
  margin-top: 2px;
}
.plans-stage {
  position: relative;
  background: var(--cream-warm);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding: 12px;
}
.plans-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  flex-shrink: 0;
}
.plans-tools {
  display: flex;
  gap: 2px;
  background: var(--paper);
  border: var(--hairline);
  padding: 4px;
}
.plans-tools button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-55);
  border-radius: 2px;
}
.plans-tools button:hover { color: var(--ink); background: var(--ink-06); }
.plans-tools button.is-active { background: var(--ink); color: var(--cream); }
.plans-zoom {
  background: var(--paper);
  border: var(--hairline);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-70);
}

/* ---------- Divers ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: var(--hairline);
  border-radius: 2px;
  font-size: 11px;
  color: var(--ink-70);
  font-weight: 500;
}

.link-inline {
  color: var(--ink);
  border-bottom: 1px solid var(--ink-25);
  font-weight: 500;
  transition: border-color 120ms ease;
}
.link-inline:hover { border-color: var(--ink); }

.disclaimer {
  font-size: 11px;
  color: var(--ink-55);
  padding: 12px 16px;
  border-top: var(--hairline);
  font-style: italic;
  background: var(--cream);
}

/* ========================================================================
   APP SHELL — Sidebar collapsible (identique au portail citoyen)
   ======================================================================== */

body.app-body { height: 100%; overflow: hidden; margin: 0; }

.app-shell {
  display: flex;
  height: 100vh;
  overflow: hidden;
  background: var(--cream);
}

/* ── Sidebar ────────────────────────────────────────────────── */
.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--cream);
  border-right: var(--hairline);
  display: flex;
  flex-direction: column;
  transition: width 250ms cubic-bezier(.4,0,.2,1);
  position: relative;
  z-index: 20;
  overflow: hidden;
}
.app-sidebar.is-collapsed {
  width: 56px;
  overflow: visible;
}

/* Header — hauteur = topbar pour alignement parfait */
.app-sidebar__header {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  height: var(--shell-topbar-height);
  border-bottom: var(--hairline);
  flex-shrink: 0;
}
.app-sidebar__brand {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  text-decoration: none;
}
.app-sidebar__logo-full {
  height: 16px;
  width: auto;
  display: block;
  fill: var(--ink);
  flex-shrink: 0;
}
.app-sidebar__logo-mono {
  height: 16px;
  width: auto;
  display: none;
  fill: var(--ink);
  flex-shrink: 0;
}
.app-sidebar.is-collapsed .app-sidebar__logo-full { display: none; }
.app-sidebar.is-collapsed .app-sidebar__logo-mono { display: block; }

/* Nav area */
.app-sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Nav items */
.app-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--ink-55);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  position: relative;
  white-space: nowrap;
  text-decoration: none;
}
.app-nav-item:hover { background: var(--ink-06); color: var(--ink); }
.app-nav-item.is-active { background: var(--ink-06); color: var(--ink); font-weight: 500; }
.app-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 14px;
  background: var(--orange);
  border-radius: 0 2px 2px 0;
}
.app-nav-item svg {
  width: 18px; height: 18px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0; display: block;
}
.app-nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* Tooltip quand sidebar fermé */
.app-nav-item__tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--cream);
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease;
  z-index: 50;
}
.app-nav-item__tooltip::before {
  content: ''; position: absolute;
  left: -4px; top: 50%; transform: translateY(-50%) rotate(45deg);
  width: 8px; height: 8px; background: var(--ink);
}
.app-sidebar.is-collapsed .app-nav-item { justify-content: center; padding: 10px 0; }
.app-sidebar.is-collapsed .app-nav-item__label { display: none; }
.app-sidebar.is-collapsed .app-nav-item.is-active::before { display: none; }
.app-sidebar.is-collapsed .app-nav-item.is-active { background: var(--ink); color: var(--cream); }
.app-sidebar.is-collapsed .app-nav-item:hover .app-nav-item__tooltip { opacity: 1; }

/* Bas sidebar — toggle orange */
.app-sidebar__nav-bottom {
  padding: var(--space-3);
  border-top: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-sidebar__toggle-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--cream);
  border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms ease, transform 120ms ease;
  flex-shrink: 0;
}
.app-sidebar__toggle-btn:hover { background: var(--orange-hover); transform: scale(1.05); }
.app-sidebar__toggle-btn svg {
  width: 13px; height: 13px;
  stroke: var(--cream); fill: none;
  stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
  display: block;
  transition: transform 250ms cubic-bezier(.4,0,.2,1);
}
.app-sidebar.is-collapsed .app-sidebar__toggle-btn svg { transform: rotate(180deg); }

/* Footer — profil */
.app-sidebar__footer {
  border-top: var(--hairline);
  padding: var(--space-3);
  position: relative;
  flex-shrink: 0;
}
.app-profile {
  display: flex; align-items: center;
  gap: var(--space-3);
  padding: 8px 10px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 120ms ease;
  width: 100%; background: none; border: none; text-align: left;
}
.app-profile:hover { background: var(--ink-06); }
.app-profile__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ink); color: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  flex-shrink: 0; letter-spacing: 0;
}
.app-profile__info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.app-profile__name {
  font-size: 13px; font-weight: 500;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-profile__role {
  font-family: var(--font-mono);
  font-size: 10px; color: var(--ink-55);
  text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-profile__chevron { color: var(--ink-55); flex-shrink: 0; }
.app-sidebar.is-collapsed .app-profile { justify-content: center; padding: 4px; }
.app-sidebar.is-collapsed .app-profile__info,
.app-sidebar.is-collapsed .app-profile__chevron { display: none; }

/* Popover profil */
.app-profile-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: var(--space-3); right: var(--space-3);
  background: var(--cream);
  border: var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(10,10,10,0.12), 0 2px 8px rgba(10,10,10,0.06);
  padding: var(--space-2);
  z-index: 40;
  display: none;
}
.app-profile-popover.is-open { display: block; }
.app-sidebar.is-collapsed .app-profile-popover {
  position: fixed;
  left: 64px; bottom: 12px;
  right: auto; top: auto;
  min-width: 220px; z-index: 200;
}
.app-profile-popover__header {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  border-bottom: var(--hairline);
  margin-bottom: var(--space-2);
}
.app-profile-popover__name { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.app-profile-popover__email {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-profile-popover__separator { height: 1px; background: var(--ink-10); margin: var(--space-2) 0; }
.app-profile-popover__item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px; color: var(--ink-70);
  cursor: pointer; transition: background 120ms ease;
  background: none; border: none; width: 100%; text-align: left;
}
.app-profile-popover__item:hover { background: var(--ink-06); }
.app-profile-popover__item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.app-profile-popover__item--danger { color: var(--status-red); }
.app-profile-popover__item--danger:hover { background: var(--status-red-bg); }

/* ── Main Column ────────────────────────────────────────────── */
.app-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

/* Zone de contenu scrollable */
.app-main {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  background: var(--cream);
}

/* Topbar right zone (override ancien topbar__right) */
.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}
.topbar-search {
  display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px;
  background: var(--paper);
  border: var(--hairline);
  border-radius: var(--radius);
  width: 260px;
  transition: border-color 120ms ease;
}
.topbar-search:focus-within { border-color: var(--ink-40); }
.topbar-search svg {
  width: 14px; height: 14px;
  stroke: var(--ink-40); fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.topbar-search__input {
  flex: 1; border: none; background: transparent;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--ink); min-width: 0;
}
.topbar-search__input::placeholder { color: var(--ink-40); }
.topbar-search__input:focus { outline: none; }
.topbar-notif {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  border: var(--hairline);
  background: transparent;
  color: var(--ink-55);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: background 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.topbar-notif:hover { background: var(--ink-06); color: var(--ink); }
.topbar-notif svg {
  width: 16px; height: 16px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block;
}
.topbar-notif__badge {
  position: absolute;
  top: 7px; right: 7px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--orange);
  border: 1.5px solid var(--cream);
}

/* Dossier — override min-height for new flex layout */
.app-column .dossier {
  min-height: unset;
  flex: 1;
}