/* Noto Serif, auto-hébergée (licence OFL), les mêmes fichiers que le site.
   Elle ne sert qu'aux titres des écrans qui reprennent l'allure d'un dossier :
   le corps du CRM reste en sans-serif, plus lisible dans un tableau.
   Les tranches latin-ext ne sont téléchargées que si un glyphe les appelle. */
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(./assets/fonts/notoserif-400-normal-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Noto Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(./assets/fonts/notoserif-400-normal-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Noto Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(./assets/fonts/notoserif-400-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Noto Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(./assets/fonts/notoserif-400-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-soft: #fbfcff;
  --text: #172033;
  --muted: #687386;
  --border: #dfe4ec;
  --border-strong: #c8d0dd;
  --blue: #2864d8;
  --blue-soft: #e9f0ff;
  --green: #2864d8;
  --green-soft: #e9f0ff;
  --amber: #2864d8;
  --amber-soft: #e9f0ff;
  --red: #c83f3f;
  --red-soft: #fff0f0;
  --cyan: #2864d8;
  --cyan-soft: #e9f0ff;
  --shadow: 0 14px 38px rgba(23, 32, 51, 0.08);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  /* Rien ne doit sortir par le bas. La barre fait exactement la hauteur de
     l'écran : sans cette ligne, tout ce qui dépasse est simplement coupé, sans
     barre de défilement et sans moyen d'y accéder. C'est ce qui rendait DocGen,
     les envois et l'émargement invisibles sur un écran d'ordinateur portable. */
  overflow: hidden;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 4px 4px 14px;
  border-bottom: 1px solid var(--border);
}

.brand-logo-mark {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  overflow: hidden;
  border-radius: 8px;
  background: #0b0c10;
}

.brand-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  max-width: none;
  display: block;
  transform: translate(-50%, -50%);
}

.brand-copy {
  min-width: 0;
}

.brand-title {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand-subtitle {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.side-nav {
  display: grid;
  gap: 4px;
  /* C'est la navigation qui se réduit et défile quand la place manque — jamais
     le panneau du bas, qui porte les outils et la déconnexion. On préfère
     faire glisser une liste qu'on peut parcourir plutôt que cacher des boutons
     dont on ignore alors l'existence. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.nav-button {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  border-radius: 8px;
  /* Douze entrées de navigation et cinq outils ne tiennent pas sur un écran de
     portable si chaque ligne prend quarante-cinq pixels. Serrer la navigation
     de huit pixels par ligne, c'est trois entrées de plus visibles sans avoir
     à faire défiler. */
  padding: 8px 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font-weight: 650;
}

.nav-button svg,
.icon-button svg,
.button svg,
.mini-button svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.nav-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.nav-button.active {
  color: var(--blue);
  background: var(--blue-soft);
  border-color: #d7e4ff;
}

.side-panel {
  /* Collé en bas par le flex, et jamais comprimé : c'est le rôle de flex-shrink
     à zéro. « margin-top: auto » suffisait tant que rien ne débordait. */
  flex: 0 0 auto;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  display: grid;
  gap: 10px;
}

.sync-status {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sync-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--muted);
}

.sync-status.remote .sync-dot {
  background: var(--blue);
}

.sync-status.syncing .sync-dot {
  background: #7aa7ff;
}

.sync-status.error .sync-dot {
  background: var(--red);
}

.sync-label {
  display: block;
  font-size: 12px;
  font-weight: 800;
}

.sync-detail {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 5px;
}

.workspace {
  min-width: 0;
  padding: 20px clamp(12px, 2vw, 24px) 34px;
}

.topbar {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.page-title {
  margin: 0;
  font-size: clamp(22px, 2.3vw, 32px);
  line-height: 1.12;
  font-weight: 820;
  letter-spacing: 0;
}

.page-subtitle {
  margin: 5px 0 0;
  color: var(--muted);
  max-width: 720px;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.segmented {
  display: inline-grid;
  grid-auto-flow: column;
  gap: 3px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  padding: 3px;
}

.segmented button {
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  min-height: 34px;
  padding: 0 12px;
  font-weight: 750;
}

.segmented button.active {
  color: var(--blue);
  background: var(--blue-soft);
}

.button,
.mini-button,
.icon-button {
  min-height: 38px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 760;
  text-decoration: none;
}

.button {
  padding: 0 13px;
}

.mini-button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.icon-button {
  width: 38px;
  padding: 0;
}

.button.primary,
.mini-button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.button.success,
.mini-button.success {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.button.danger,
.mini-button.danger {
  border-color: #f0c3c3;
  color: var(--red);
  background: var(--red-soft);
}

.button.warning,
.mini-button.warning {
  border-color: #cfe0ff;
  color: var(--blue);
  background: var(--blue-soft);
}

.button:hover,
.mini-button:hover,
.icon-button:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 22px rgba(23, 32, 51, 0.08);
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.metrics-kpi {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.metric {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  min-width: 0;
}

.metric-value {
  display: block;
  font-size: 28px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
}

.metric-label {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 650;
}

.metric.blue {
  border-color: #cfe0ff;
  background: #f6f9ff;
}

.metric.green {
  border-color: #cfe0ff;
  background: #f6f9ff;
}

.metric.amber {
  border-color: #cfe0ff;
  background: #f6f9ff;
}

.metric.red {
  border-color: #cfe0ff;
  background: #f6f9ff;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel-header {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.panel-title {
  margin: 0;
  font-size: 16px;
  font-weight: 820;
}

.panel-subtitle {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.panel-body {
  padding: 16px;
}

.search-block { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.search-input-wrap { position: relative; }
.search-input-wrap .search-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: #9aa3b5; pointer-events: none;
}
.search-input-wrap .field {
  padding-left: 40px; font-size: 14px; min-height: 44px;
  border-radius: 10px; border: 1.5px solid #dfe4ec;
}
.search-input-wrap .field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,100,216,0.1); }

.filter-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}

.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #dfe4ec; border-radius: 8px;
  background: #f8f9fc; padding: 0 10px; height: 36px;
  font-size: 12px; color: var(--text); transition: border-color .12s;
  position: relative;
}
.filter-chip:hover { border-color: #b8c8f8; }
.filter-chip.active { background: var(--blue-soft); border-color: var(--blue); color: var(--blue); }
.filter-chip svg { width: 13px; height: 13px; color: #9aa3b5; flex-shrink: 0; }
.filter-chip.active svg { color: var(--blue); }
.filter-chip select {
  border: none; background: none; color: inherit;
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 0; outline: none; appearance: none; -webkit-appearance: none;
  min-width: 90px;
}

.toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) repeat(3, minmax(150px, 0.7fr));
  gap: 10px;
  margin-bottom: 12px;
}

.toolbar.wide {
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(145px, 0.55fr));
}

.field,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 11px;
  outline: none;
}

.textarea {
  min-height: 132px;
  padding: 10px 11px;
  resize: vertical;
}

.field:focus,
.select:focus,
.textarea:focus {
  border-color: #8eb0ef;
  box-shadow: 0 0 0 3px rgba(40, 100, 216, 0.12);
}

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

.grid-three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sales-performance-grid {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.global-performance-panel {
  margin-bottom: 14px;
}

.global-performance-card {
  padding: 16px;
  display: grid;
  grid-template-columns: 224px minmax(220px, 0.75fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: center;
}

.global-performance-kpis {
  align-self: stretch;
}

.global-status-share {
  border-top: 0;
  border-left: 1px solid var(--border);
  padding-top: 0;
  padding-left: 16px;
}

.sales-performance-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 14px;
  display: grid;
  gap: 14px;
  min-width: 0;
}

.sales-performance-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sales-performance-head h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 820;
}

.sales-performance-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

.sales-performance-body {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.sales-chart-pair {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.donut-card {
  width: 104px;
  height: 104px;
  border: 1px solid #dbe7ff;
  border-radius: 8px;
  background: #f8fbff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.donut-wrap {
  position: relative;
  width: 86px;
  height: 86px;
  flex: 0 0 auto;
}

.donut-chart {
  width: 86px;
  height: 86px;
  display: block;
}

.donut-track,
.donut-segment {
  fill: none;
  stroke-width: 5.8;
}

.donut-track {
  stroke: #edf2fb;
}

.donut-segment {
  stroke-linecap: round;
}

.donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}

.donut-center strong {
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
}

.donut-center small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.sales-performance-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sales-performance-kpis div {
  border: 1px solid #dbe7ff;
  border-radius: 8px;
  background: var(--surface);
  padding: 10px;
  min-width: 0;
}

.sales-performance-kpis strong,
.sales-performance-kpis span {
  display: block;
}

.sales-performance-kpis strong {
  color: var(--blue);
  font-size: 18px;
  line-height: 1;
  font-weight: 850;
}

.sales-performance-kpis span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  border: 1px solid #dbe7ff;
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: 0 8px;
  font-size: 11px;
  font-weight: 750;
}

.chart-legend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex: 0 0 auto;
}

.chart-legend strong {
  color: var(--text);
  font-weight: 850;
}

.status-share {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  display: block;
}

.status-distribution {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.status-distribution-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.status-distribution-head strong {
  font-size: 12px;
  font-weight: 850;
  color: var(--text);
}

.status-distribution-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.status-stack {
  height: 13px;
  border: 1px solid #dbe7ff;
  border-radius: 999px;
  background: #edf2fb;
  display: flex;
  overflow: hidden;
}

.status-stack span {
  min-width: 4px;
  height: 100%;
}

.status-stack-empty {
  width: 100%;
  background: #edf2fb;
}

.status-share-list {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.status-share-list > strong {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 850;
  color: var(--text);
}

.status-share-list span {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.status-share-list i {
  width: 9px;
  height: 9px;
  border-radius: 999px;
}

.status-share-list em {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: normal;
}

.status-share-list b {
  color: var(--text);
  font-weight: 850;
  white-space: nowrap;
}

.status-share-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.comm-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.comm-right-col {
  display: grid;
  gap: 14px;
}

.comm-perf-body {
  padding: 0 16px 14px;
  display: grid;
  gap: 14px;
}

.comm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.comm-kpi-item {
  background: #f7faff;
  border: 1px solid #dbe7ff;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.comm-kpi-item strong {
  font-size: 22px;
  font-weight: 900;
  color: #2864d8;
  line-height: 1;
}

.comm-kpi-item span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
}

.funnel-step {
  margin-bottom: 10px;
}

.funnel-step:last-child {
  margin-bottom: 0;
}

.funnel-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.funnel-label {
  font-size: 12px;
  font-weight: 750;
  color: var(--text);
}

.funnel-count {
  font-size: 12px;
  font-weight: 850;
  color: var(--text);
  white-space: nowrap;
}

.funnel-count em {
  font-style: normal;
  font-weight: 700;
  color: var(--muted);
  margin-left: 4px;
}

.funnel-bar-track {
  height: 8px;
  background: #edf2fb;
  border-radius: 999px;
  overflow: hidden;
}

.funnel-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
  min-width: 0;
}

@media (max-width: 900px) {
  .comm-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .comm-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.form-row {
  display: grid;
  gap: 6px;
}

.form-stack {
  display: grid;
  gap: 12px;
}

.table-wrap {
  overflow: auto;
  border-top: 1px solid #eef0f5;
}

table {
  width: 100%;
  min-width: 1760px;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  padding: 10px 10px;
  border-bottom: 1px solid #eef0f5;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  color: #9aa3b5;
  background: #f8f9fc;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .055em;
  font-weight: 700;
}

tr { transition: background .1s; }
tr:hover td {
  background: #fafbfe;
}

.person-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.avatar {
  width: 31px;
  height: 31px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  flex: 0 0 auto;
}

.person-main {
  min-width: 0;
}

.person-name {
  display: block;
  font-weight: 780;
  white-space: nowrap;
}

.person-meta {
  display: block;
  max-width: 210px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-link {
  color: var(--blue);
  font-weight: 760;
  text-decoration: none;
}

.table-link:hover {
  text-decoration: underline;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 760;
  color: var(--muted);
  background: #f0f3f8;
  white-space: nowrap;
}

.pill.blue {
  color: var(--blue);
  background: var(--blue-soft);
}

.pill.green {
  color: var(--green);
  background: var(--green-soft);
}

.pill.amber {
  color: var(--amber);
  background: var(--amber-soft);
}

.pill.red {
  color: var(--blue);
  background: var(--blue-soft);
}

.pill.cyan {
  color: var(--cyan);
  background: var(--cyan-soft);
}

.status-select {
  min-width: 190px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: white;
  padding: 0 8px;
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
}

.empty-state {
  padding: 34px 16px;
  text-align: center;
  color: var(--muted);
}

.import-zone {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
}

.drop-zone {
  min-height: 172px;
  border: 1.5px dashed var(--border-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 18px;
}

.drop-zone.dragover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.hidden-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.import-summary {
  display: grid;
  gap: 10px;
}

.import-duplicate-card {
  margin-top: 12px;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  background: var(--blue-soft);
  color: var(--text);
  padding: 13px 14px;
  display: grid;
  gap: 10px;
}

.import-duplicate-card.calm {
  background: var(--surface-soft);
  border-color: var(--border);
}

.import-duplicate-card strong,
.import-duplicate-card span {
  display: block;
}

.import-duplicate-card span {
  margin-top: 2px;
  color: var(--muted);
  font-weight: 650;
}

.duplicate-list {
  display: grid;
  gap: 6px;
}

.duplicate-row {
  border: 1px solid #d9e6ff;
  border-radius: 8px;
  background: var(--surface);
  padding: 8px 10px;
  display: grid;
  gap: 2px;
}

.duplicate-row span {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.duplicate-row small {
  color: var(--muted);
  font-weight: 650;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.summary-line:last-child {
  border-bottom: 0;
}

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.mapping-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-soft);
  display: grid;
  gap: 7px;
}

.mapping-key {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mapping-value {
  display: block;
  margin-top: 5px;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mapping-select {
  min-height: 34px;
  font-size: 12px;
}

.notice {
  display: none;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--surface);
  font-weight: 720;
}

.notice.show {
  display: block;
}

.notice.success {
  border-color: #cfe0ff;
  color: var(--blue);
  background: var(--blue-soft);
}

.notice.error {
  border-color: #efc4c4;
  color: var(--red);
  background: var(--red-soft);
}

.notice.info {
  border-color: #bed2f8;
  color: var(--blue);
  background: var(--blue-soft);
}

.inline-notice {
  margin-bottom: 12px;
  border: 1px solid #cfe0ff;
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--blue);
  background: var(--blue-soft);
  font-weight: 720;
}

.activity-list {
  display: grid;
}

.activity-item {
  display: grid;
  grid-template-columns: 11px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child {
  border-bottom: 0;
}

.activity-dot {
  width: 11px;
  height: 11px;
  margin-top: 5px;
  border-radius: 999px;
  background: #9ab9f8;
}

.activity-dot.status,
.activity-dot.callback {
  background: var(--blue);
}

.activity-dot.note,
.activity-dot.note_delete {
  background: #7aa7ff;
}

.activity-dot.assignment,
.activity-dot.import,
.activity-dot.sales {
  background: #477ee9;
}

.activity-dot.delete {
  background: var(--red);
}

.activity-main {
  min-width: 0;
}

.activity-title {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.activity-title strong {
  font-weight: 820;
}

.activity-title span {
  color: var(--blue);
  font-weight: 760;
}

.activity-main p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.activity-meta {
  display: grid;
  gap: 3px;
  color: var(--muted);
  text-align: right;
  font-size: 12px;
  white-space: nowrap;
}

.activity-meta span {
  color: var(--text);
  font-weight: 760;
}

.section-gap {
  margin-top: 14px;
}

.form-gap {
  margin-bottom: 14px;
}

.kanban-board-wrap {
  background: #f2f3f7;
  border-radius: 12px;
  padding: 16px;
  margin: 0 -4px;
}

.kanban {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  align-items: flex-start;
}

.kanban-column {
  min-height: 280px;
  border: none;
  border-top: 3px solid #94a3b8;
  background: #ffffff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-width: 252px;
  flex: 0 0 252px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(23,32,51,0.07);
}

.kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: none;
}

.kanban-title {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text);
}

.kanban-count-badge {
  font-size: 11px; font-weight: 700;
  background: #eef0f5; color: var(--muted);
  border-radius: 99px; padding: 1px 8px;
  min-width: 22px; text-align: center;
}

.kanban-list {
  padding: 0 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-content: start;
  min-width: 0;
}

.prospect-card {
  border: 1px solid #eaecf2;
  border-radius: 8px;
  background: #ffffff;
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(23,32,51,0.04);
  transition: box-shadow .15s, border-color .15s;
}

.prospect-card[draggable="true"] {
  cursor: grab;
}

.prospect-card.dragging {
  opacity: 0.55;
}

.prospect-card:hover {
  box-shadow: 0 3px 10px rgba(23,32,51,0.09);
  border-color: #d0d5e0;
}

.card-title {
  font-weight: 600;
  font-size: 13px;
  color: #172033;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-meta {
  color: #9aa3b5;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-phone-link {
  color: #1a9b5f; font-size: 12px; font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  text-decoration: none;
}
.card-phone-link:hover { text-decoration: underline; }
.card-phone-link svg { width: 11px; height: 11px; opacity: .8; }

.card-phone-invalid {
  color: #c0392b; font-size: 11px; font-weight: 500;
  display: flex; align-items: center; gap: 4px;
}
.card-phone-invalid svg { width: 11px; height: 11px; }

.card-divider { border: none; border-top: 1px solid #f0f2f7; margin: 0; }

.card-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 0;
}

.prospect-card .mini-button,
.prospect-card .status-select {
  min-width: 0;
  min-height: 30px;
  font-size: 11px;
}

.prospect-card .mini-button {
  padding: 0 9px; flex-shrink: 0;
}

.prospect-card .status-select {
  flex: 1;
  border: 1px solid #e4e7ef;
  border-radius: 6px;
  background: #f8f9fc;
  color: #5a6478;
  padding: 0 7px;
}

.note-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--blue); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 99px;
  min-width: 15px; height: 15px;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.phone-link {
  color: #1a9b5f; text-decoration: none; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}
.phone-link:hover { text-decoration: underline; }
.phone-link svg { width: 11px; height: 11px; opacity: .8; }

.prospect-card .pill {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-list {
  display: grid;
  gap: 12px;
}

.category-row {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 11px;
  background: var(--surface);
}

.category-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.category-title {
  margin: 0;
  font-size: 15px;
}

.value-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.value-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 999px;
  min-height: 30px;
  padding: 0 9px;
  font-weight: 700;
}

.value-chip button {
  border: 0;
  background: transparent;
  color: var(--muted);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
}

.value-chip button:hover {
  background: var(--red-soft);
  color: var(--red);
}

.sales-layout {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 14px;
}

.sales-list {
  display: grid;
  gap: 8px;
}

.sales-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px;
  display: grid;
  gap: 6px;
}

.sales-card.active {
  border-color: #a9c1ef;
  background: #f7faff;
}

.sales-name {
  font-weight: 820;
}

.sales-meta {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.edit-salesperson-form {
  background: #f8f9fc;
  border: 1px solid #eef0f5;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edit-sp-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.edit-sp-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.bulk-assign-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #f0f5ff;
  border: 1px solid #c7d9f8;
  border-radius: 8px;
  margin-top: 10px;
}

.filter-count-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding: 6px 2px;
}

.filter-count-badge {
  font-size: 13px;
  color: var(--text);
  background: #e8f0fe;
  border: 1px solid #c7d9f8;
  border-radius: 20px;
  padding: 3px 12px;
}

.filter-count-hint {
  font-size: 12px;
  color: var(--muted);
}

.bulk-assign-label {
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

.bulk-assign-hint {
  font-size: 12px;
  color: var(--muted);
}

.bulk-assign-count {
  width: 90px !important;
}

.sp-tabs {
  display: flex; gap: 4px; padding: 14px 16px 0; border-bottom: 1px solid var(--border);
}
.sp-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 8px 8px 0 0; border: 1px solid transparent;
  background: transparent; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: .15s; margin-bottom: -1px;
}
.sp-tab:hover { color: var(--text); background: var(--bg); }
.sp-tab.active {
  color: var(--blue); background: var(--surface);
  border-color: var(--border); border-bottom-color: var(--surface);
}
.sp-tab-count {
  background: var(--border); color: var(--muted); font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 99px; min-width: 20px; text-align: center;
}
.sp-tab.active .sp-tab-count { background: var(--blue-soft); color: var(--blue); }
.sp-unassign-hint {
  padding: 10px 16px; background: #fffbeb; border-bottom: 1px solid #fde68a;
  font-size: 12px; color: #92400e; font-weight: 500;
}

.checkbox-cell {
  width: 38px;
}

.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.footer-note {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
}

/* ── Hamburger button (hidden on desktop) ───────────────── */
.hamburger-btn {
  display: none;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  width: 38px;
  height: 38px;
  font-size: 18px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

/* ── Sidebar overlay (hidden on desktop) ────────────────── */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 99;
  display: none;
}

.sidebar-overlay.show {
  display: block;
}

@media (max-width: 1080px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .side-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* La barre passe en bandeau horizontal : plus rien à faire défiler. */
    flex: 0 0 auto;
    overflow: visible;
  }

  .side-panel {
    margin-top: 0;
  }

  /* La barre est devenue un bandeau : les quatre outils s'alignent au lieu de
     s'étaler sur deux rangées larges comme la page. */
  .side-tools {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .metrics,
  .metrics-kpi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .toolbar,
  .toolbar.wide,
  .import-zone,
  .sales-layout,
  .global-performance-card,
  .sales-performance-grid {
    grid-template-columns: 1fr;
  }

  .global-status-share {
    border-left: 0;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 14px;
  }

  .mapping-grid,
  .grid-three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: -264px;
    top: 0;
    z-index: 100;
    transition: left 0.25s;
    height: 100vh;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }

  .sidebar.open {
    left: 0;
  }

  .side-nav {
    grid-template-columns: 1fr;
    /* Le tiroir mobile fait toute la hauteur de l'écran, comme la barre du
       bureau : la navigation y défile de nouveau, sinon la déconnexion et les
       outils passent sous le bord. La règle du bandeau large, juste au-dessus,
       vaut aussi ici — il faut donc la reprendre. */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }

  .side-panel {
    margin-top: auto;
    flex: 0 0 auto;
  }

  .hamburger-btn {
    display: inline-flex;
  }

  .topbar {
    gap: 12px;
  }

  .kanban {
    grid-auto-columns: minmax(200px, 1fr);
  }

  .col-linkedin,
  .col-headcount,
  .col-commercial {
    display: none;
  }
}

@media (max-width: 680px) {
  .workspace {
    padding-inline: 12px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .top-actions {
    width: 100%;
    justify-content: flex-start;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .side-nav,
  .sales-performance-body,
  .sales-performance-kpis,
  .global-performance-card,
  .status-share,
  .grid-two,
  .mapping-grid,
  .grid-three {
    grid-template-columns: 1fr;
  }

  .sales-performance-body {
    justify-items: start;
  }

  .activity-item {
    grid-template-columns: 11px minmax(0, 1fr);
  }

  .activity-meta {
    grid-column: 2;
    text-align: left;
  }

  .segmented {
    width: 100%;
  }

  .segmented button {
    width: 100%;
  }

  .button {
    width: 100%;
  }

  /* Les indicateurs deux par deux : un par ligne, il fallait défiler pour arriver aux prospects. */
  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .metric { padding: 12px 14px; }
  .metric-value { font-size: 24px; }

  /* Les prospects en cartes : nom, téléphone à toucher, statut d'appel, actions.
     Le tableau de dix colonnes ne se lisait qu'en défilant de côté. */
  .table-prospects,
  .table-prospects tbody { display: block; width: 100%; min-width: 0 !important; }
  .table-prospects thead { display: none; }
  .table-prospects tbody > tr:not(.notes-expanded-row) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "coche nom actions"
      "coche tel tel"
      "coche entreprise entreprise"
      "coche statut statut"
      "coche rappel rappel"
      "coche extra extra";
    gap: 6px 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border, #E5E7EB);
  }
  .table-prospects tbody > tr > td { display: block; padding: 0 !important; border: 0 !important; width: auto !important; min-width: 0; }
  .table-prospects td.checkbox-cell { grid-area: coche; padding-top: 4px !important; }
  .table-prospects td.c-nom { grid-area: nom; }
  .table-prospects td.c-actions { grid-area: actions; }
  .table-prospects td.c-tel { grid-area: tel; }
  .table-prospects td.c-entreprise { grid-area: entreprise; color: #4B5563; font-size: 13px; }
  .table-prospects td.c-statut { grid-area: statut; }
  .table-prospects td.col-callback { grid-area: rappel; }
  .table-prospects td.c-cat { grid-column: 2 / -1; }
  .table-prospects td.c-statut select,
  .table-prospects td.c-cat select { width: 100%; }
  .table-prospects td.c-sexe,
  .table-prospects td.c-mail,
  .table-prospects td.c-type,
  .table-prospects td.col-linkedin,
  .table-prospects td.col-headcount,
  .table-prospects td.col-commercial { display: none; }
  .table-prospects .phone-link { font-size: 15px; }
  .table-prospects .row-actions { gap: 6px; }
  .table-prospects .icon-button { width: 36px; height: 36px; }
  .table-prospects tr.notes-expanded-row,
  .table-prospects tr.notes-expanded-row > td { display: block; width: 100%; }
}

/* ── Login screen ─────────────────────────────────────── */
.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: #1A1A2E;
  position: relative;
  overflow: hidden;
}
.login-wrap::before {
  content: "";
  position: absolute;
  bottom: -130px; right: -130px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: #F5A623;
  pointer-events: none;
}
.login-wrap::after {
  content: "";
  position: absolute;
  bottom: -50px; right: -50px;
  width: 260px; height: 260px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.35);
  background: none;
  pointer-events: none;
}
.login-decor-tl {
  position: absolute;
  top: -100px; left: -100px;
  width: 280px; height: 280px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  background: none;
  pointer-events: none;
}

.login-card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 22px;
  padding: 48px 44px;
  width: 100%;
  max-width: 440px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(14px);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 0;
  border-bottom: none;
  text-align: center;
}

.login-logo-mark {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 60px;
}

.login-logo {
  width: 60px;
  height: 60px;
  display: block;
  object-fit: contain;
}

.login-brand-title {
  display: block;
  font-size: 21px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .09em;
}

.login-brand-sub {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-top: 3px;
}

.login-badge {
  display: inline-block;
  background: #F5A623;
  color: #1A1A2E;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: 6px;
  margin-bottom: 26px;
}

.login-heading {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  text-align: center;
  margin: 0 0 5px;
}

.login-desc {
  font-size: 13px;
  color: rgba(255,255,255,.45);
  text-align: center;
  margin: 0 0 22px;
}

.login-error {
  display: none;
  background: rgba(217,72,79,.15);
  border: 1px solid rgba(217,72,79,.4);
  border-radius: 9px;
  padding: 10px 14px;
  font-size: 13px;
  color: #ff9da1;
  margin-bottom: 14px;
  text-align: center;
}

.login-tabs {
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 22px;
}

.login-tab {
  flex: 1;
  padding: 9px 12px;
  border-radius: 7px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  transition: background .15s, color .15s;
}

.login-tab.active {
  background: rgba(245,166,35,.2);
  color: #F5A623;
  box-shadow: none;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.login-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.login-field {
  border: 1.5px solid rgba(255,255,255,.13);
  border-radius: 11px;
  padding: 13px 16px;
  font-size: 15px;
  background: rgba(255,255,255,.07);
  color: #fff;
  transition: border-color .2s;
}

.login-field::placeholder {
  color: rgba(255,255,255,.22);
}

.login-field:focus {
  outline: none;
  border-color: rgba(245,166,35,.65);
}

.login-btn {
  background: #F5A623;
  color: #1A1A2E;
  border: none;
  border-radius: 11px;
  padding: 15px;
  font-weight: 800;
  font-size: 15px;
  margin-top: 8px;
  transition: background .15s, transform .12s;
}

.login-btn:hover:not(:disabled) {
  background: #ffb73a;
  opacity: 1;
}

.login-btn:active {
  transform: scale(.98);
}

/* Les outils, en deux colonnes (le cinquième, seul sur sa rangée, la remplit).
   Empilés sur une seule colonne, ils prenaient la moitié de la barre : les
   libellés longs passaient à la ligne, et la navigation devait défiler pour
   laisser de la place. En tuiles, tout tient sur un écran de portable — et
   l'infobulle porte la phrase entière, que le libellé court ne dit plus. */
.side-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.side-tools > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* L'icône au-dessus du libellé : sur deux colonnes, une icône posée à gauche
   mange vingt pixels de largeur, et « Émargement » finissait en « Éma… ». */
.btn-docgen {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 1px solid #1A1A2E; border-radius: 8px;
  background: #1A1A2E; color: #fff;
  padding: 9px 6px; font-size: 11px; font-weight: 600; line-height: 1.2;
  width: 100%; text-decoration: none; text-align: center;
  transition: background .15s, border-color .15s;
  min-width: 0;
}

.btn-docgen svg { width: 15px; height: 15px; flex: 0 0 auto; }

.btn-docgen span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-docgen:hover { background: #2d2d4e; border-color: #2d2d4e; }

.btn-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: none;
  color: var(--muted);
  padding: 8px 12px;
  font-size: 13px;
  width: 100%;
  transition: border-color .12s, color .12s;
}

.btn-logout svg {
  width: 15px;
  height: 15px;
}

.btn-logout:hover {
  border-color: var(--red);
  color: var(--red);
}

/* ── Calendar ─────────────────────────────────────────── */
.cal-container {
  max-width: 760px;
}

.cal-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}

.cal-month-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-transform: capitalize;
  flex: 1;
  text-align: center;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 20px;
}

.cal-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 6px 0;
}

.cal-cell {
  min-height: 68px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color .12s, background .12s;
  position: relative;
}

.cal-cell--empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}

.cal-cell:not(.cal-cell--empty):hover {
  border-color: var(--blue);
  background: var(--blue-soft);
}

.cal-cell--today {
  border-color: var(--blue) !important;
  background: var(--blue-soft);
}

.cal-cell--today .cal-day-num {
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-cell--selected {
  border-color: var(--text) !important;
  background: #f0f0f0;
}

.cal-day-num {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

.cal-badge {
  font-size: 11px;
  font-weight: 700;
  border-radius: 10px;
  padding: 2px 7px;
  line-height: 1.4;
}

.cal-badge--low {
  background: #dbeafe;
  color: #1d4ed8;
}

.cal-badge--mid {
  background: #fef9c3;
  color: #854d0e;
}

.cal-badge--high {
  background: #fee2e2;
  color: #b91c1c;
}

.cal-detail {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.cal-detail-header {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  text-transform: capitalize;
}

.cal-detail-empty {
  padding: 20px 18px;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.cal-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}

.cal-detail-row:last-child {
  border-bottom: none;
}

.cal-detail-row:hover {
  background: var(--bg);
}

.cal-detail-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cal-detail-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-detail-sp {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  white-space: nowrap;
}

.cal-detail-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cal-detail-phone {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.cal-detail-status {
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  white-space: nowrap;
}

.cal-notes-block {
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
}

.cal-notes-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.cal-notes-header svg { width: 14px; height: 14px; }

.cal-note-empty { padding: 14px 18px; color: var(--muted); font-size: 13px; margin: 0; }

.cal-note-item { padding: 12px 18px; border-bottom: 1px solid var(--border); }

.cal-note-text { font-size: 13px; color: var(--text); line-height: 1.5; white-space: pre-wrap; }

.cal-note-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
}

.cal-note-del {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  transition: color .12s;
}

.cal-note-del:hover { color: var(--red); }

.cal-notes-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
}

.cal-notes-form .field { flex: 1; resize: vertical; min-height: 60px; }

/* ── LinkedIn hover preview ──────────────────────────── */
.li-tooltip {
  position: fixed; z-index: 9999; pointer-events: none;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.14);
  border: 1px solid #dce6f0; min-width: 240px; max-width: 300px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease;
}
.li-tooltip.li-visible { opacity: 1; transform: translateY(0); }
.li-tooltip-head {
  background: #0a66c2; padding: 13px 15px 11px;
  display: flex; align-items: flex-start; gap: 10px;
}
.li-tooltip-head svg { flex-shrink: 0; margin-top: 1px; }
.li-tooltip-name { font-size: 13.5px; font-weight: 700; color: #fff; line-height: 1.3; }
.li-tooltip-co { font-size: 11.5px; color: rgba(255,255,255,.82); margin-top: 2px; }
.li-tooltip-body { padding: 10px 15px 12px; }
.li-tooltip-type {
  display: inline-block; font-size: 11px; font-weight: 700;
  color: #0a66c2; background: #e8f3ff; padding: 2px 8px;
  border-radius: 99px; margin-bottom: 7px;
}
.li-tooltip-url { font-size: 11px; color: #9aa3b5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.li-tooltip-hint { font-size: 11px; color: #b0b8c8; margin-top: 5px; }

/* ── Rendez-vous : carte compacte cliquable + panneau latéral (drawer) ── */
.rdv-card { cursor: pointer; transition: box-shadow .15s, transform .05s; }
.rdv-card:hover { box-shadow: 0 3px 12px rgba(23,32,51,.12); }
.rdv-card:active { transform: scale(.995); }
.rdv-card.is-active { box-shadow: 0 0 0 2px var(--blue); }
.rdv-card-row { display: flex; align-items: center; gap: 8px; }
.rdv-card-info { flex: 1; min-width: 0; }
.rdv-card-date { display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 5px; padding: 2px 7px; }

.rdv-drawer-backdrop { position: fixed; inset: 0; background: rgba(23,32,51,.32); z-index: 90; animation: rdvFade .15s ease; }
@keyframes rdvFade { from { opacity: 0; } to { opacity: 1; } }
.rdv-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: min(440px, 93vw); background: var(--surface); box-shadow: -8px 0 34px rgba(23,32,51,.20); z-index: 91; display: flex; flex-direction: column; animation: rdvSlide .22s cubic-bezier(.2,.8,.2,1); }
@keyframes rdvSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
.rdv-drawer-top { padding: 18px 20px 14px; border-bottom: 1px solid var(--border); }
.rdv-drawer-head { display: flex; align-items: center; gap: 12px; }
.rdv-d-avatar { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; background: var(--blue-soft); color: var(--blue); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.rdv-d-name { font-size: 17px; font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdv-d-company { font-size: 13px; color: var(--muted); }
.rdv-d-close { margin-left: auto; border: none; background: none; color: var(--muted); font-size: 17px; cursor: pointer; padding: 4px 9px; border-radius: 6px; line-height: 1; }
.rdv-d-close:hover { background: var(--bg); color: var(--text); }
.rdv-drawer-body { padding: 16px 20px 36px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.rdv-d-actions { display: flex; gap: 8px; }
.rdv-d-actions .rdv-d-call { flex: 1; justify-content: center; }
.rdv-d-section { display: flex; flex-direction: column; gap: 7px; }
.rdv-d-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rdv-d-field { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rdv-d-field:last-child { border-bottom: none; }
.rdv-d-label { color: var(--muted); }
.rdv-d-value { color: var(--text); font-weight: 600; text-align: right; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rdv-d-link { color: var(--blue); text-decoration: none; }
.rdv-d-link:hover { text-decoration: underline; }
.rdv-prio-seg { display: flex; gap: 6px; }
.rdv-prio-btn { flex: 1; padding: 8px 4px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; }
.rdv-prio-btn:hover { border-color: var(--border-strong); color: var(--text); }
.rdv-prio-btn.is-active { color: #fff; border-color: transparent; background: var(--seg, var(--blue)); }
.rdv-d-date { border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px; font-size: 13px; background: var(--surface); color: var(--text); }
.rdv-d-cr { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13px; font-family: inherit; line-height: 1.5; background: var(--surface); color: var(--text); resize: vertical; min-height: 130px; }
.rdv-d-cr:focus, .rdv-d-date:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }
.rdv-d-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rdv-d-timeline li { display: flex; gap: 10px; font-size: 12px; align-items: baseline; }
.rdv-d-time { color: var(--muted); flex-shrink: 0; min-width: 62px; font-variant-numeric: tabular-nums; }
.rdv-d-act { color: var(--text); }

/* ── Assistant script d'appel (widget flottant) ────────────────────────────── */
.assistant-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.assistant-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(40, 100, 216, 0.35);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  order: 2;
}

.assistant-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(40, 100, 216, 0.42); }
.assistant-fab svg { width: 24px; height: 24px; }

/* L'attribut [hidden] doit gagner sur le display:flex ci-dessous. */
.assistant-panel[hidden] { display: none; }

/* Masqué tant que l'utilisateur n'est pas connecté (voir assistant.js). */
.assistant-root[data-hidden="true"] { display: none; }

.assistant-panel {
  order: 1;
  width: 370px;
  max-width: calc(100vw - 40px);
  height: 520px;
  max-height: calc(100vh - 120px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.assistant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--blue);
  color: #fff;
}

.assistant-head strong { display: block; font-size: 14px; }
.assistant-head span { display: block; font-size: 11px; opacity: 0.85; margin-top: 2px; }

.assistant-close {
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.assistant-close:hover { background: rgba(255, 255, 255, 0.28); }
.assistant-close svg { width: 15px; height: 15px; }

.assistant-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-soft);
}

.assistant-empty { color: var(--muted); font-size: 13px; }
.assistant-empty p { margin: 0 0 12px 0; }

.assistant-msg {
  font-size: 13px;
  line-height: 1.5;
  border-radius: 12px;
  padding: 10px 12px;
  max-width: 90%;
}

.assistant-msg.user {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.assistant-msg.bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
  max-width: 100%;
  width: 100%;
}

.assistant-msg.bot p { margin: 0 0 8px 0; }
.assistant-msg.bot p:last-child { margin-bottom: 0; }

.assistant-card-title {
  display: block;
  color: var(--blue);
  font-size: 13px;
  margin-bottom: 6px;
}

.assistant-card-body { white-space: normal; }

.assistant-hint {
  font-size: 11px;
  color: var(--muted);
  margin: 10px 0 6px 0 !important;
}

.assistant-suggests { display: flex; flex-wrap: wrap; gap: 6px; }

.assistant-chip {
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.assistant-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }

.assistant-form {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.assistant-form input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface-soft);
}
.assistant-form input:focus { outline: none; border-color: var(--blue); background: var(--surface); }

.assistant-form button {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.assistant-form button:hover { filter: brightness(1.08); }
.assistant-form button svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
  .assistant-root { right: 12px; bottom: 12px; }
  .assistant-panel { width: calc(100vw - 24px); height: min(70vh, 480px); }
}

/* =====================================================================
   CHARTE OPTIGEN — les boutons du site, la mise en page des documents
   ---------------------------------------------------------------------
   Deux emprunts, et rien de plus.

   Les boutons viennent d'optigen-conseil.com : des touches de clavier.
   Au repos ils portent une ombre pleine de 5 px ; au survol ils
   s'enfoncent de 3 px et l'ombre tombe à 2 ; au clic ils touchent le
   fond. C'est la même courbe et les mêmes couleurs que sur le site, pour
   que l'outil et la vitrine se ressemblent enfin.

   La mise en page des écrans Qualiopi et Veille vient des documents que
   DocGen produit — convention, programme, attestation : bandeau marine,
   titre en serif italique, filet d'accent, cartouches bleu pâle. Quand
   on prépare un audit, on regarde un dossier ; autant qu'il en ait l'air.
   ===================================================================== */
:root {
  --k-blue: #2f4f9e;
  --k-blue-hi: #3658ab;
  --k-blue-bd: #4262b4;
  --k-blue-sh: #132a61;
  --k-white-bd: #dfe7f4;
  --k-white-sh: #aec3e6;
  --k-red-sh: #8d2a2a;
  --doc-navy: #0a1530;
  --doc-titre: #142047;
  --doc-accent: #2f4f9e;
  --doc-carte: #f1f5fa;
  --doc-filet: #dfe7f4;
  --doc-puce: #9db6e0;
}

/* ── Les boutons, partout dans l'outil ──────────────────────────────── */
.button,
.mini-button,
.icon-button {
  --k-sh: var(--k-white-sh);
  border: 1px solid var(--k-white-bd);
  border-radius: 12px;
  box-shadow: 0 5px 0 var(--k-sh);
  transition:
    transform .14s cubic-bezier(.3, .7, .4, 1),
    box-shadow .14s cubic-bezier(.3, .7, .4, 1),
    background-color .2s, border-color .2s, color .2s;
}

.button:hover,
.mini-button:hover,
.icon-button:hover {
  transform: translateY(3px);
  box-shadow: 0 2px 0 var(--k-sh);
  background-color: #f4f7fc;
  border-color: var(--k-white-bd);
}

.button:active,
.mini-button:active,
.icon-button:active {
  transform: translateY(5px);
  box-shadow: 0 0 0 var(--k-sh);
}

.button:disabled,
.mini-button:disabled,
.icon-button:disabled {
  transform: none;
  box-shadow: 0 5px 0 var(--k-sh);
  opacity: .55;
}

.button.primary,
.mini-button.primary,
.button.success,
.mini-button.success {
  --k-sh: var(--k-blue-sh);
  border-color: var(--k-blue-bd);
  background: var(--k-blue);
}

.button.primary:hover,
.mini-button.primary:hover,
.button.success:hover,
.mini-button.success:hover {
  background-color: var(--k-blue-hi);
  border-color: var(--k-blue-bd);
}

.button.warning,
.mini-button.warning {
  --k-sh: var(--k-white-sh);
}

.button.danger,
.mini-button.danger {
  --k-sh: #e2b3b3;
}

.button.danger:hover,
.mini-button.danger:hover {
  background-color: #ffe4e4;
  border-color: #f0c3c3;
}

.button:focus-visible,
.mini-button:focus-visible,
.icon-button:focus-visible {
  outline: 3px solid var(--doc-puce);
  outline-offset: 3px;
}

/* Une touche qui s'enfonce demande de la place sous elle : sans cette
   marge, la rangée du dessous remonte dans l'ombre. */
.card-actions,
.form-row {
  row-gap: 12px;
}

/* Le mouvement se supprime, la couleur reste : sans lui, le survol ne
   dirait plus rien à qui a désactivé les animations. */
@media (prefers-reduced-motion: reduce) {
  .button,
  .mini-button,
  .icon-button {
    transition: background-color .2s, border-color .2s, color .2s;
  }
  .button:hover, .mini-button:hover, .icon-button:hover,
  .button:active, .mini-button:active, .icon-button:active {
    transform: none;
    box-shadow: 0 5px 0 var(--k-sh);
  }
}

/* ── L'allure d'un dossier, pour Qualiopi et la Veille ──────────────── */
.vue-dossier .page-title {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--doc-titre);
}

.doc-entete {
  position: relative;
  background: var(--doc-navy);
  color: #fff;
  border-radius: 14px;
  padding: 20px 24px 22px;
  margin-bottom: 18px;
  overflow: hidden;
}

/* Le filet d'accent qui court en haut de chaque document. */
.doc-entete::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--doc-accent), var(--doc-puce));
}

.doc-entete .doc-surtitre {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--doc-puce);
  margin: 0 0 6px;
}

.doc-entete .doc-titre {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 400;
  font-size: 25px;
  line-height: 1.15;
  margin: 0 0 8px;
}

.doc-entete .doc-titre em {
  font-style: italic;
  color: var(--doc-puce);
}

.doc-entete .doc-chapeau {
  margin: 0;
  max-width: 78ch;
  font-size: 13px;
  line-height: 1.55;
  color: #c3d5eb;
}

.doc-entete .doc-chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.doc-entete .doc-chiffre b {
  display: block;
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
}

.doc-entete .doc-chiffre span {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9db6e0;
}

/* Les cartouches : le bleu pâle des encadrés de la convention. */
.vue-dossier .panel {
  border-color: var(--doc-filet);
  border-radius: 14px;
}

.doc-cartouche {
  background: var(--doc-carte);
  border: 1px solid var(--doc-filet);
  border-left: 3px solid var(--doc-accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.doc-cartouche > strong {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--doc-titre);
}

.doc-article {
  font-family: "Noto Serif", Georgia, serif;
  font-weight: 400;
  font-size: 15px;
  color: var(--doc-titre);
}

.vue-dossier .table-wrap table thead th {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5a6478;
}


/* ── Onglet Audits ─────────────────────────────────────────────────────────
   Un dossier à trois niveaux : le répertoire des cabinets, la page d'un
   cabinet, la page d'un pôle. Écran de séance avant tout : on y lit des
   questions en parlant, on coche vite, et on voit d'un coup d'œil ce qui
   reste à poser. D'où des lignes hautes, un texte large, et rien de
   décoratif. Palette du CRM, en bleu marine. */

/* Formulaires et compteurs, communs aux trois niveaux */
.audit-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.audit-form input, .audit-form select { height: 34px; font-size: 13.5px; padding: 0 10px; }
.audit-form .button { height: 34px; padding: 0 16px; font-size: 13.5px; }

.audit-stats { display: flex; flex-wrap: wrap; gap: 26px; margin: 2px 0 16px; }
.audit-stat b { display: block; font-size: 19px; line-height: 1.1; color: #0a1530; font-weight: 700; }
.audit-stat span { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: #64748b; margin-top: 3px; }

.audit-section { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #1c3c84; font-weight: 700; margin: 0 0 8px; }

/* L'anneau de progression : même forme pour un cabinet et pour un pôle. */
.audit-anneau { position: relative; flex: 0 0 78px; width: 78px; height: 78px; border-radius: 50%;
  background: conic-gradient(var(--teinte, #2f4f9e) var(--part, 0%), #e8edf6 0); display: grid; place-items: center; }
.audit-anneau::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #fff; }
.audit-anneau-centre { position: relative; z-index: 1; text-align: center; line-height: 1.1; }
.audit-anneau-centre b { display: block; font-size: 17px; color: #0a1530; font-weight: 700; }
.audit-anneau-centre span { display: block; font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: #8a93a5; margin-top: 2px; }

.audit-barre-fine { display: block; height: 5px; border-radius: 3px; background: #e8edf6; overflow: hidden; min-width: 60px; }
.audit-barre-fine i { display: block; height: 100%; transition: width .2s; }

/* ── Niveau 1 : le répertoire ─────────────────────────────────────────── */
.audit-barre-outils { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.audit-chercher { flex: 1; min-width: 240px; height: 38px; padding: 0 14px; font-size: 14px; font-family: inherit;
  border: 1px solid #dfe7f4; border-radius: 9px; background: #fff; color: #1a203d; }
.audit-chercher:focus { outline: 2px solid #c3d5eb; outline-offset: 0; border-color: #c3d5eb; }
.audit-chercher.mince { flex: 0 1 240px; height: 30px; font-size: 13px; padding: 0 11px; border-radius: 999px; margin-left: auto; }
.audit-compte-resultats { font-size: 12.5px; color: #64748b; white-space: nowrap; }

.audit-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.audit-carte { background: #fff; border: 1px solid #e8edf6; border-radius: 12px; padding: 16px 18px 12px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.audit-carte:hover { border-color: #c3d5eb; box-shadow: 0 4px 14px rgba(16, 48, 110, .08); transform: translateY(-1px); }
.audit-carte:focus-visible { outline: 2px solid #2f4f9e; outline-offset: 2px; }

.audit-carte-tete { display: flex; align-items: center; gap: 12px; }
.audit-avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: #16306e; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.audit-avatar.grand { width: 56px; height: 56px; border-radius: 14px; font-size: 19px; }
.audit-carte-id { flex: 1; min-width: 0; }
.audit-carte-id h3 { margin: 0; font-size: 16px; font-weight: 700; color: #0a1530; }
.audit-carte-id p { margin: 2px 0 0; font-size: 12px; color: #64748b; }

.audit-carte-corps { display: flex; align-items: center; gap: 18px; margin: 14px 0 10px; }
.audit-carte-chiffres { flex: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; }
.audit-carte-chiffres b { display: block; font-size: 15px; font-weight: 700; color: #16306e; line-height: 1.2; }
.audit-carte-chiffres b.alerte { color: #9c3434; }
.audit-carte-chiffres span { display: block; font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: #8a93a5; }

.audit-carte-poles { list-style: none; margin: 0; padding: 10px 0 0; border-top: 1px solid #f1f4f9; }
.audit-carte-poles li { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12.5px; color: #1a203d; }
.audit-pastille { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: #d8b26a; }
.audit-pastille.faite { background: #1e7a55; }
.audit-carte-pole-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-carte-poles .audit-barre-fine { flex: 0 0 62px; min-width: 62px; }
.audit-carte-pole-part { flex: 0 0 auto; font-size: 11px; color: #8a93a5; font-variant-numeric: tabular-nums; }
.audit-carte-reste { color: #8a93a5; font-style: italic; }

.audit-carte-pied { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid #f1f4f9; font-size: 11.5px; color: #8a93a5; }
.audit-carte-ouvrir { margin-left: auto; color: #2f4f9e; font-weight: 600; }

/* ── Niveaux 2 et 3 : la page ─────────────────────────────────────────── */
.audit-page { display: block; }
.audit-fil { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 12.5px; color: #8a93a5; }
.audit-fil button { border: 0; background: none; padding: 0; font: inherit; color: #2f4f9e; cursor: pointer; }
.audit-fil button:hover { text-decoration: underline; }
.audit-fil b { color: #0a1530; font-weight: 600; }

.audit-hero { background: #fff; border: 1px solid #e8edf6; border-radius: 14px; padding: 18px 20px; margin: 0 0 16px; }
.audit-hero-haut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.audit-hero-id { flex: 1; min-width: 220px; }
.audit-hero-id h2 { margin: 0; font-size: 22px; font-weight: 700; color: #0a1530; letter-spacing: -.01em; }
/* Pas de séparateur « · » entre les mentions : il se retrouverait en tête de
   ligne dès que la liste passe à la ligne. L'écart suffit à les séparer. */
.audit-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 5px 0 0; font-size: 12.5px; color: #64748b; }

.audit-hero-bas { display: flex; align-items: center; gap: 20px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #f1f4f9; flex-wrap: wrap; }
.audit-hero-chiffres { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 18px; }
.audit-hero-chiffres b { display: block; font-size: 17px; font-weight: 700; color: #16306e; line-height: 1.15; }
.audit-hero-chiffres b.alerte { color: #9c3434; }
.audit-hero-chiffres span { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #8a93a5; margin-top: 2px; }

.audit-edition { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: #f1f5fa; }

.audit-colonnes { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 18px; align-items: start; }
.audit-rail { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 3px; }
.audit-rail-item { display: block; width: 100%; text-align: left; border: 0; border-radius: 9px; background: none;
  padding: 9px 12px; cursor: pointer; font-family: inherit; color: #1a203d; transition: background .12s; }
.audit-rail-item:hover { background: #f1f5fa; }
.audit-rail-item.actif { background: #16306e; }
.audit-rail-libelle { display: flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.audit-rail-libelle em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: #e8edf6; color: #16306e; }
.audit-rail-aide { display: block; font-size: 11px; color: #8a93a5; margin-top: 1px; }
.audit-rail-item.actif .audit-rail-libelle { color: #fff; }
.audit-rail-item.actif .audit-rail-libelle em { background: rgba(255, 255, 255, .18); color: #fff; }
.audit-rail-item.actif .audit-rail-aide { color: rgba(255, 255, 255, .62); }
.audit-rail-pied { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid #e8edf6; }

.audit-contenu { background: #fff; border: 1px solid #e8edf6; border-radius: 14px; padding: 18px 22px 22px; min-height: 320px; }

/* Les encarts du rail, sur la page d'un pôle */
.audit-rail.large { gap: 10px; }
.audit-encart { background: #fff; border: 1px solid #e8edf6; border-radius: 12px; padding: 12px 14px; }
.audit-encart-titre { margin: 0 0 8px; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #1c3c84; font-weight: 700; }
.audit-encart textarea { width: 100%; font-family: inherit; font-size: 13px; line-height: 1.5; padding: 8px 10px;
  border: 1px solid #dfe7f4; border-radius: 8px; resize: vertical; color: #1a203d; }
.audit-encart textarea:focus { outline: 2px solid #c3d5eb; outline-offset: 0; }
.audit-encart .mini-button { margin-top: 7px; margin-right: 6px; }
.audit-encart-liste { list-style: none; margin: 0; padding: 0; }
.audit-encart-liste li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; border-bottom: 1px solid #f6f8fc; }
.audit-encart-liste li:last-child { border-bottom: 0; }
.audit-encart-liste span { color: #8a93a5; }
.audit-encart-liste b { color: #1a203d; font-weight: 600; text-align: right; }
.audit-encart-vide { margin: 0; font-size: 12.5px; line-height: 1.55; color: #64748b; }
.audit-encart-champ { display: block; margin: 0 0 8px; }
.audit-encart-champ span { display: block; font-size: 11px; color: #8a93a5; margin-bottom: 3px; }
.audit-encart-champ input, .audit-encart-champ select { width: 100%; height: 32px; font-size: 13px; padding: 0 9px;
  border: 1px solid #dfe7f4; border-radius: 8px; font-family: inherit; color: #1a203d; background: #fff; }
.audit-encart.rappel { background: #f1f5fa; border-color: #dfe7f4; }
.audit-encart.rappel p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #16306e; }
.audit-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; }
.mini-button.danger { color: #9c3434; border-color: #f0d6d6; }
.mini-button.danger:hover { background: #fbeaea; }

/* Les jalons d'un audit */
.audit-jalons { list-style: none; margin: 14px 0 6px; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.audit-jalons li { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px; border-radius: 10px;
  background: #f8fafd; border: 1px solid #eef2f9; }
.audit-jalons li.fait { background: #e6f5ee; border-color: #cfe9dd; }
.audit-jalon-num { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: #e8edf6; color: #16306e; }
.audit-jalons li.fait .audit-jalon-num { background: #1e7a55; color: #fff; }
.audit-jalon-texte b { display: block; font-size: 13px; font-weight: 600; color: #1a203d; line-height: 1.3; }
.audit-jalon-texte em { display: block; font-style: normal; font-size: 11.5px; color: #64748b; margin-top: 2px; }

/* Les cartes de pôle, dans la rubrique « Groupes et séances » */
.audit-poles-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.audit-pole-carte { border: 1px solid #e8edf6; border-radius: 12px; padding: 14px 16px 10px; background: #fff;
  cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.audit-pole-carte:hover { border-color: #c3d5eb; box-shadow: 0 3px 12px rgba(16, 48, 110, .07); }
.audit-pole-carte:focus-visible { outline: 2px solid #2f4f9e; outline-offset: 2px; }
.audit-pole-carte-tete { display: flex; align-items: center; gap: 14px; }
.audit-pole-carte-tete h4 { margin: 0; font-size: 15px; font-weight: 700; color: #0a1530; }
.audit-pole-carte-tete p { margin: 2px 0 0; font-size: 12px; color: #64748b; }
.audit-pole-carte-seance { color: #8a5d12 !important; }
.audit-pole-carte-seance.faite { color: #1e7a55 !important; }
.audit-pole-carte-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: #5a6478;
  padding: 8px 10px; background: #f8fafd; border-radius: 8px; }
.audit-pole-carte-pied { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px;
  padding-top: 9px; border-top: 1px solid #f1f4f9; font-size: 11.5px; color: #8a93a5; }
.audit-pole-carte-pied .mini-button { margin-left: auto; }

/* Le conducteur d'entretien */
.audit-conducteur-tete { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid #f1f4f9; }
.audit-avancement { display: flex; align-items: center; gap: 12px; }
.audit-barre { flex: 0 0 180px; height: 6px; border-radius: 3px; background: #e8edf6; overflow: hidden; }
.audit-barre i { display: block; height: 100%; background: #2f4f9e; transition: width .2s; }
.audit-avancement span { font-size: 12.5px; color: #5a6478; }

.audit-filtres { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.audit-filtre { border: 1px solid #dfe7f4; background: #fff; color: #16306e; border-radius: 999px;
  padding: 4px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.audit-filtre:hover { background: #f1f5fa; }
.audit-filtre.actif { background: #16306e; border-color: #16306e; color: #fff; }

.audit-theme { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 18px 0 2px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: #1c3c84; font-weight: 700; }
.audit-theme-compte { letter-spacing: 0; text-transform: none; font-size: 11.5px; font-weight: 600; color: #8a93a5; }

.audit-q { padding: 9px 0; border-bottom: 1px solid #f1f4f9; }
.audit-q-tete { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.audit-q-tete input[type="checkbox"] { margin: 1px 0 0; width: 17px; height: 17px; accent-color: #1c3c84; flex: 0 0 auto; cursor: pointer; }
.audit-q-texte { flex: 1; font-size: 14.5px; line-height: 1.45; color: #1a203d; }
.audit-q.posee .audit-q-texte { color: #8a93a5; }
.audit-mesure { display: inline-block; margin-left: 7px; font-size: 11px; font-weight: 600;
  color: #2f4f9e; background: #eaf0fa; padding: 1px 7px; border-radius: 4px; white-space: nowrap; }
.audit-origine { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 600;
  color: #8a5d12; background: #fdf3e2; padding: 1px 6px; border-radius: 4px; }
.audit-relance { font-size: 13px; color: #64748b; margin: 3px 0 0 27px; }
.audit-relance b { color: #2f4f9e; font-weight: 600; }

.audit-reponse { margin: 6px 0 2px 27px; }
.audit-reponse textarea { width: 100%; font-size: 13.5px; line-height: 1.5; padding: 8px 10px;
  font-family: inherit; border: 1px solid #c3d5eb; border-radius: 8px; resize: vertical; color: #1a203d; }
.audit-reponse textarea:focus { outline: 2px solid #c3d5eb; outline-offset: 0; }
.audit-reponse-lue { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 2px 27px;
  padding: 7px 11px; background: #f1f5fa; border-radius: 8px; font-size: 13.5px; line-height: 1.5; color: #1a203d; cursor: text; }
.audit-reponse-lue:hover { background: #e9f0f9; }
.audit-reponse-lue span:first-child { flex: 1; }
.audit-ancre { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; color: #16306e;
  background: #e8edf6; padding: 1px 6px; border-radius: 4px; }
.audit-noter { margin: 4px 0 0 27px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: #8a93a5; border-bottom: 1px dotted #c3d5eb; }
.audit-noter:hover { color: #2f4f9e; border-bottom-color: #2f4f9e; }

/* Les cas d'usage */
.audit-chevron { flex: 0 0 12px; color: #2f4f9e; font-size: 11px; transition: transform .15s; }
.audit-jauge { flex: 0 0 96px; height: 5px; border-radius: 3px; background: #e8edf6; overflow: hidden; }
.audit-jauge i { display: block; height: 100%; }
.audit-cas-carte { border: 1px solid #e8edf6; border-radius: 10px; margin-bottom: 8px; background: #fff; }
.audit-cas-carte.ouvert { border-color: #c3d5eb; box-shadow: 0 1px 3px rgba(16, 48, 110, .06); }
.audit-cas-carte.ouvert .audit-chevron { transform: rotate(90deg); }
.audit-cas-tete { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; flex-wrap: wrap; }
.audit-cas-tete:hover { background: #f8fafd; }
.audit-cas-id { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: #2f4f9e; }
.audit-cas-titre { flex: 1; min-width: 200px; font-size: 14px; font-weight: 600; color: #1a203d; }
.audit-cas-sous { display: block; font-size: 11.5px; font-weight: 400; color: #8a93a5; margin-top: 1px; }
.audit-cas-mesures { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: #5a6478; }
.audit-cas-corps { padding: 2px 14px 16px 34px; border-top: 1px solid #f1f4f9; }
.audit-cas-chiffres { display: flex; flex-wrap: wrap; gap: 26px; margin: 12px 0 4px; }
.audit-cas-chiffres b { display: block; font-size: 14.5px; color: #16306e; font-weight: 700; }
.audit-cas-chiffres span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: #8a93a5; margin-top: 2px; }

.audit-mesures-table { width: 100%; max-width: 820px; border-collapse: collapse; margin: 2px 0 6px; }
.audit-mesures-table th, .audit-mesures-table td { text-align: left; font-weight: 400; font-size: 13px;
  padding: 6px 10px; border-bottom: 1px solid #f1f4f9; vertical-align: top; color: #1a203d; }
.audit-mesures-table th { width: 200px; color: #16306e; font-weight: 600; }
.audit-mesures-table tr.vide { background: #f8fafd; }
.audit-mesures-table tr.vide td { color: #8a93a5; }
.audit-mesures-table td.ancre { width: 70px; text-align: right; }

/* Textes communs */
.audit-vide { margin: 6px 0 12px; color: #64748b; font-size: 13.5px; line-height: 1.55; max-width: 720px; }
.audit-sous-titre { margin: 18px 0 4px; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #1c3c84; font-weight: 700; }
.audit-para { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: #1a203d; max-width: 780px; }
.audit-para.gris { color: #5a6478; }
.audit-ancrage { margin: 8px 0 0; font-size: 11px; color: #8a93a5; }
.audit-ok { color: #1e7a55; }
.audit-attente { color: #8a5d12; }

.audit-verif { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: #1a203d; }
.audit-verif b { color: #b47c1e; }
.audit-verif.bloquante b { color: #9c3434; }
.audit-manque { display: flex; align-items: baseline; gap: 9px; margin: 0 0 5px; font-size: 13px; flex-wrap: wrap; }
.audit-manque em { color: #b47c1e; font-style: normal; font-size: 12.5px; }

.audit-constat { padding: 12px 0; border-bottom: 1px solid #f1f4f9; }
.audit-constat-tete { display: flex; align-items: baseline; gap: 9px; margin: 0 0 5px; flex-wrap: wrap; font-size: 14px; }
.audit-verbatim { margin: 8px 0 4px; padding: 8px 14px; border-left: 3px solid #2f4f9e; background: #f1f5fa;
  font-size: 13.5px; line-height: 1.55; color: #16306e; }
.audit-verbatim cite { display: block; margin-top: 5px; font-style: normal; font-size: 11.5px; color: #8a93a5; }

/* Les tables de l'écran d'audit sortent de la règle générale : celle-ci est
   taillée pour la liste des prospects, avec ses 1760 px et ses colonnes fixes
   dans un conteneur qui défile. Ici, la table doit tenir dans la colonne. */
.audit-table, .audit-mesures-table { min-width: 0; table-layout: auto; }
.audit-table th, .audit-table td,
.audit-mesures-table th, .audit-mesures-table td {
  white-space: normal; overflow: visible; text-overflow: clip; vertical-align: top; }
.audit-table th { background: none; }
.audit-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.audit-table th { text-align: left; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase;
  color: #5a6478; font-weight: 700; padding: 8px 10px; border-bottom: 1px solid #dfe7f4; }
.audit-table td { padding: 10px; border-bottom: 1px solid #f1f4f9; vertical-align: top; line-height: 1.5; color: #1a203d; }
.audit-table tr:hover td { background: #f8fafd; }
.audit-table.cliquable tbody tr { cursor: pointer; }
.audit-td-barre { white-space: nowrap; }
.audit-td-barre .audit-barre-fine { display: inline-block; width: 90px; vertical-align: middle; margin-right: 8px; }
.audit-td-barre span { font-size: 12px; color: #5a6478; font-variant-numeric: tabular-nums; }

.audit-verdict { padding: 11px 14px; border-radius: 9px; font-size: 13.5px; line-height: 1.55; margin: 0 0 6px; }
.audit-verdict.pret { background: #e6f5ee; color: #14543a; }
.audit-verdict.attente { background: #f1f5fa; color: #16306e; }
.audit-verdict strong { display: block; margin-bottom: 2px; }

/* La rubrique Restitution */
.audit-livrables { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 8px 0 4px; }
.audit-livrables div { padding: 11px 13px; border: 1px solid #e8edf6; border-radius: 10px; background: #f8fafd; }
.audit-livrables b { display: block; font-size: 13px; color: #16306e; margin-bottom: 3px; }
.audit-livrables span { font-size: 12.5px; line-height: 1.5; color: #5a6478; }
.audit-commande { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 0; }
.audit-commande code { flex: 1; min-width: 240px; padding: 9px 12px; border-radius: 8px; background: #0a1530;
  color: #e8edf6; font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* Ce que la séance d'un pôle a donné */
.audit-recolte { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e8edf6; }
.audit-logiciels-liste { list-style: none; margin: 6px 0 0; padding: 0; }
.audit-logiciels-liste li { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f1f4f9; font-size: 13px; }
.audit-logiciels-liste b { color: #1a203d; font-weight: 600; }
.audit-logiciels-liste span { flex: 1; color: #5a6478; }
.audit-logiciels-liste em { font-style: normal; font-size: 12px; }

@media (max-width: 980px) {
  .audit-colonnes { grid-template-columns: minmax(0, 1fr); }
  .audit-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .audit-rail-item { width: auto; }
  .audit-rail-aide { display: none; }
  .audit-rail.large { flex-direction: column; }
  .audit-rail.large .audit-encart { width: 100%; }
  .audit-contenu { padding: 16px 14px 18px; }
}


/* ── Le répertoire : trois entrées ─────────────────────────────────────── */
.audit-onglets { display: flex; gap: 2px; margin: 4px 0 18px; border-bottom: 1px solid #dfe7f4; flex-wrap: wrap; }
.audit-onglet { border: 0; background: none; padding: 9px 15px 10px; cursor: pointer; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: #64748b; border-bottom: 2px solid transparent; transition: color .12s, border-color .12s; }
.audit-onglet:hover { color: #16306e; }
.audit-onglet.actif { color: #16306e; border-bottom-color: #16306e; }
.audit-onglet-compte { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: #e8edf6; color: #16306e; font-size: 11px; font-weight: 700; }
.audit-onglet.actif .audit-onglet-compte { background: #16306e; color: #fff; }

/* La prochaine action, en tête de la fiche d'un cabinet */
.audit-suite { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 0;
  padding: 11px 14px; border-radius: 10px; background: #f1f5fa; border-left: 3px solid #2f4f9e; }
.audit-suite.pret { background: #e6f5ee; border-left-color: #1e7a55; }
.audit-suite-etiquette { flex: 0 0 auto; font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #2f4f9e; }
.audit-suite.pret .audit-suite-etiquette { color: #1e7a55; }
.audit-suite-texte { flex: 1; min-width: 220px; font-size: 13.5px; line-height: 1.5; color: #16306e; }
.audit-suite.pret .audit-suite-texte { color: #14543a; }
.audit-suite .mini-button { flex: 0 0 auto; }

/* ── La bibliothèque transversale ──────────────────────────────────────── */
.audit-podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin: 10px 0 4px; }
.audit-podium-carte { position: relative; padding: 14px 14px 12px 44px; border-radius: 12px;
  background: #0a1530; color: #e8edf6; }
.audit-podium-rang { position: absolute; left: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 700; color: #fff; }
.audit-podium-carte b { display: block; font-size: 14px; font-weight: 600; color: #fff; line-height: 1.35; }
.audit-podium-compte { display: block; margin-top: 5px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: #8fa7d8; font-weight: 700; }
.audit-podium-cabinets { display: block; margin-top: 3px; font-size: 12px; color: #a9b6cf; }

.audit-famille { border: 1px solid #e8edf6; border-radius: 10px; margin-bottom: 8px; background: #fff;
  transition: border-color .15s, box-shadow .15s; }
.audit-famille:hover { border-color: #c3d5eb; }
.audit-famille.ouvert { border-color: #c3d5eb; box-shadow: 0 1px 3px rgba(16, 48, 110, .06); }
.audit-famille.ouvert .audit-chevron { transform: rotate(90deg); }
.audit-famille-tete { display: flex; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; flex-wrap: wrap; }
.audit-famille-tete:hover { background: #f8fafd; }
.audit-famille-compte { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; display: grid;
  place-items: center; background: #16306e; color: #fff; font-size: 12px; font-weight: 700; }
.audit-famille-titre { flex: 1; min-width: 220px; font-size: 14px; font-weight: 600; color: #1a203d; }
.audit-famille-corps { padding: 4px 14px 14px; border-top: 1px solid #f1f4f9; }
.audit-usage { display: block; padding: 2px 0; color: #5a6478; }
.audit-usage + .audit-usage { border-top: 1px dotted #eef2f9; }

/* ── Confort de lecture pendant la séance ──────────────────────────────── */
/* Trois heures sur cet écran : la ligne de question doit être large à
   atteindre, réagir au survol, et la barre d'avancement rester sous les yeux
   quand on descend dans la liste. */
.audit-conducteur-tete { position: sticky; top: 0; z-index: 3; background: #fff; padding-top: 10px; margin-top: -10px; }
.audit-q { padding: 10px 10px; margin: 0 -10px; border-radius: 9px; border-bottom: 1px solid #f1f4f9;
  transition: background .12s; }
.audit-q:hover { background: #f8fafd; }
.audit-q.repondue { background: #fbfcfe; }
.audit-q-tete input[type="checkbox"] { width: 18px; height: 18px; transition: transform .12s; }
.audit-q-tete:hover input[type="checkbox"] { transform: scale(1.08); }
.audit-q.posee { border-left: 2px solid #cfe3d8; }

@media (prefers-reduced-motion: reduce) {
  .audit-carte, .audit-pole-carte, .audit-famille, .audit-q,
  .audit-q-tete input[type="checkbox"], .audit-barre i, .audit-barre-fine i { transition: none; }
  .audit-carte:hover, .audit-pole-carte:hover { transform: none; }
}

/* ── Face ID (clés d'accès) ──────────────────────────────────────────────── */
.login-faceid {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 15px; border-radius: 11px; border: 0; cursor: pointer;
  background: #fff; color: #1A1A2E; font: inherit; font-size: 15px; font-weight: 800;
}
.login-faceid svg { width: 22px; height: 22px; }
.login-faceid:disabled { opacity: .6; cursor: default; }
.login-ou { display: flex; align-items: center; gap: 10px; margin: 16px 0 6px; color: #9AA3BC; font-size: 12px; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.18); }
.carte-faceid {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 400;
  width: min(420px, calc(100vw - 24px)); background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
  box-shadow: 0 16px 40px rgba(16,24,40,.22); padding: 16px; display: flex; flex-direction: column; gap: 6px;
}
.carte-faceid b { font-size: 15px; }
.carte-faceid span { color: #4B5563; font-size: 13px; }
.carte-faceid-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.carte-faceid-actions button { border: 1px solid #E5E7EB; background: #fff; border-radius: 9px; padding: 9px 13px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.carte-faceid-actions .carte-faceid-oui { background: #1A1A2E; color: #fff; border-color: #1A1A2E; }
.carte-faceid-actions .carte-faceid-lien { border: 0; background: none; color: #6B7280; font-weight: 500; text-decoration: underline; }
.fond-faceid { position: fixed; inset: 0; z-index: 500; background: rgba(10,21,48,.45); display: grid; place-items: center; padding: 16px; }
.boite-faceid { width: min(460px, 100%); background: #fff; border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px rgba(16,24,40,.3); }
.boite-faceid h3 { font-size: 18px; margin: 0 0 6px; }
.boite-faceid p { color: #4B5563; font-size: 13.5px; margin: 0 0 12px; }
.ligne-faceid { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #F0F1F5; }
.ligne-faceid small { display: block; color: #6B7280; font-size: 12px; margin-top: 2px; }
.ligne-faceid button { border: 1px solid #FECACA; color: #B42318; background: #fff; border-radius: 8px; padding: 6px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }