/* ==========================================================================
   Centurion Partners — Espace client
   Style monochrome : fond gris clair, contenu blanc, typographie franche.
   ========================================================================== */

:root {
  --bg: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #f7f7f7;
  --surface-3: #efefef;
  --hover: rgba(0, 0, 0, 0.045);
  --active: #e5e5e5;
  --border: #e4e4e4;
  --border-strong: #d4d4d4;

  --text: #202020;
  --text-2: #3f3f46;
  --muted: #71717a;
  --faint: #a1a1aa;

  --primary: #27272a;
  --primary-hover: #3f3f46;
  --ring: rgba(17, 17, 17, 0.08);
  --focus: #3b82f6;
  --focus-halo: rgba(37, 99, 235, 0.15);

  /* Rouges alignés sur JOIN : texte, fond léger, fond au survol. */
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-hover: #fee2e2;
  --success: #16a34a;
  --warning: #e8a33d;

  --r-lg: 16px;
  --r: 12px;
  --r-sm: 8px;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);

  /* Teintes neutres (fonds de survol, cartes grises, en-têtes de tableau), texte sur fond foncé, encre des
     pastilles, infobulles, logo : redéfinies pour le thème sombre. */
  --tint-1: #fafafa;
  --tint-2: #f7f7f8;
  --tint-3: #f4f4f5;
  --tint-4: #f0f0f1;
  --tint-5: #e4e4e7;
  --line: #f0f0f0;
  --border-hover: #bdbdbd;
  --on-strong: #ffffff;
  --mix-ink: #000000;
  --tooltip-bg: #18181b;
  --tooltip-fg: #fafafa;
  --tooltip-meta: #a1a1aa;
  --logo: #111111;
  --logo-fg: #ffffff;
  color-scheme: light;

  --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Thème sombre : choisi dans le menu du profil (en bas à gauche), gardé dans le navigateur. */
:root[data-theme='dark'] {
  --bg: #0e0e10;
  --surface: #17171a;
  --surface-2: #1d1d21;
  --surface-3: #25252a;
  --hover: rgba(255, 255, 255, 0.06);
  --active: #2c2c31;
  --border: #2c2c31;
  --border-strong: #3f3f46;
  --border-hover: #52525b;

  --text: #f4f4f5;
  --text-2: #d4d4d8;
  --muted: #a1a1aa;
  --faint: #71717a;

  --primary: #f4f4f5;
  --primary-hover: #e4e4e7;
  --ring: rgba(255, 255, 255, 0.1);
  --focus-halo: rgba(96, 165, 250, 0.25);

  --danger: #f87171;
  --danger-soft: rgba(248, 113, 113, 0.12);
  --danger-hover: rgba(248, 113, 113, 0.2);
  --success: #4ade80;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);

  --tint-1: #1b1b1f;
  --tint-2: #1f1f23;
  --tint-3: #26262b;
  --tint-4: #2b2b31;
  --tint-5: #34343b;
  --line: #25252a;
  --on-strong: #18181b;
  --mix-ink: #ffffff;
  --tooltip-bg: #3f3f46;
  --tooltip-fg: #fafafa;
  --tooltip-meta: #d4d4d8;
  --logo: #f4f4f5;
  --logo-fg: #18181b;
  /* Couleurs des pastilles, badges et étiquettes : vives sur fond profond (plus de tons pastel). */
  --vivid-blue: #3b9eff;
  --deep-blue: #0b2a4a;
  --vivid-green: #3fdc6e;
  --deep-green: #0f2e1a;
  --vivid-purple: #a77bff;
  --deep-purple: #2a1a4a;
  --vivid-red: #ff5c5c;
  --deep-red: #4a1518;
  --vivid-pink: #ff5c9a;
  --deep-pink: #4a1530;
  --vivid-amber: #ffb020;
  --deep-amber: #45300a;
  color-scheme: dark;
}
/* En-tête de l'onboarding et écran « Préparation de votre espace… » : sombres translucides (blancs en clair). */
:root[data-theme='dark'] .ob-top { background: rgba(23, 23, 26, 0.92); }
:root[data-theme='dark'] .finish-overlay { background: rgba(23, 23, 26, 0.92); }
/* Pastilles de statut (et évolutions de l'Accueil) : couleur vive sur fond profond de la même teinte. */
:root[data-theme='dark'] .status-pill.is-open { background: var(--deep-blue); color: var(--vivid-blue); }
:root[data-theme='dark'] .status-pill.is-paid { background: var(--deep-green); color: var(--vivid-green); }
:root[data-theme='dark'] .status-pill.is-late { background: var(--deep-pink); color: var(--vivid-pink); }
:root[data-theme='dark'] .status-pill.is-processing { background: var(--deep-amber); color: var(--vivid-amber); }
:root[data-theme='dark'] .status-pill.is-paused { background: var(--deep-blue); color: var(--vivid-blue); }
:root[data-theme='dark'] .status-pill.is-refused { background: var(--deep-red); color: var(--vivid-red); }
:root[data-theme='dark'] .files-badge:hover, :root[data-theme='dark'] .files-badge[aria-expanded='true'] { background: var(--deep-green); color: var(--vivid-green); }
:root[data-theme='dark'] .sale-amount { color: var(--vivid-blue); }
:root[data-theme='dark'] .commission-amount, :root[data-theme='dark'] .cell-plain.commission-amount { color: var(--vivid-green); }
/* Étapes de la Pipeline et ce qui prend leur couleur (--c) : fond profond (28 % de la couleur sur presque noir), texte
   vif (la couleur éclaircie de 28 %) — étiquettes, icônes du parcours et de « À traiter », cartes et heures de l'Agenda,
   rendez-vous de l'agenda de « Placer un rendez-vous ». */
:root[data-theme='dark'] .stage-pill { background: color-mix(in srgb, var(--c) 28%, #0b0b0d); color: color-mix(in srgb, var(--c) 72%, #fff); }
:root[data-theme='dark'] .journey-icon,
:root[data-theme='dark'] .todo-icon { background: color-mix(in srgb, var(--c) 28%, #0b0b0d); color: color-mix(in srgb, var(--c) 72%, #fff); }
:root[data-theme='dark'] .rdv-card { background: color-mix(in srgb, var(--c) 24%, #0b0b0d); }
:root[data-theme='dark'] .rdv-card:hover { background: color-mix(in srgb, var(--c) 34%, #0b0b0d); }
:root[data-theme='dark'] .rdv-time { color: color-mix(in srgb, var(--c) 72%, #fff); }
:root[data-theme='dark'] .pl-event { background: color-mix(in srgb, var(--c) 28%, #0b0b0d); }
/* Restes de tons pastel codés en dur pour le thème clair : trombone des Prospects, dépôt de fichier, icône PDF. */
:root[data-theme='dark'] .prospects-table [data-files] { color: var(--vivid-green); }
:root[data-theme='dark'] .prospects-table [data-files]:hover,
:root[data-theme='dark'] .prospects-table [data-files][aria-expanded='true'] { background: var(--deep-green); color: var(--vivid-green); }
:root[data-theme='dark'] .dropzone.is-over { background: var(--deep-blue); }
:root[data-theme='dark'] .file-icon { background: var(--deep-red); color: var(--vivid-red); }


*,
*::before,
*::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  font-feature-settings: 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app, .view { min-height: 100vh; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.i, .logo { flex-shrink: 0; display: block; }
.text-muted { color: var(--muted); }
.text-faint { color: var(--faint); }
.mt { margin-top: 20px; }
.mt-lg { margin-top: 32px; }
.only-mobile { display: none !important; }

kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
  font: 500 11px/1 var(--font); color: var(--muted);
}
.kbd-group { display: inline-flex; gap: 3px; margin-left: auto; }

/* ——— Boutons ——— */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border: 1px solid transparent; border-radius: var(--r-sm);
  font-weight: 500; font-size: 15px; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}
.btn-primary { background: var(--primary); color: var(--on-strong); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-primary:disabled { background: var(--tint-5); color: var(--faint); cursor: not-allowed; }
.btn-secondary { background: var(--surface); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger-soft { background: var(--danger-soft); color: var(--danger); }
.btn-danger-soft:hover { background: var(--danger-hover); }
.btn-lg { height: 46px; padding: 0 20px; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 14px; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border: 0; border-radius: var(--r-sm);
  background: transparent; color: var(--muted);
  transition: background 0.15s, color 0.15s;
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn-danger { color: var(--danger); }
.icon-btn-danger:hover { background: var(--danger-hover); color: var(--danger); }

.round-btn {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: var(--surface-3); color: var(--text-2);
}
.round-btn:hover { background: var(--active); }

.link {
  border: 0; background: none; padding: 0;
  font-weight: 600; font-size: 14.5px; color: var(--text);
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.link:hover { text-decoration-color: var(--text); }

/* ——— Badges, avatars, pastilles ——— */
.badge {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  height: 28px; padding: 0 12px; border-radius: 999px;
  background: var(--tint-5); color: var(--text-2);
  font-size: 14px; font-weight: 400; white-space: nowrap;
}
.badge-dark { background: var(--text); color: var(--on-strong); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.dot-success { background: var(--success); }
.dot-warning { background: #d97706; }
.dot-danger { background: var(--danger); }
.dot-warning { background: var(--warning); }
.dot-info { background: #0ea5e9; }

.avatar {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; background: var(--tint-5); color: var(--text-2);
  font-weight: 600; object-fit: cover;
}
/* Compte sans photo : fond très clair dans la teinte du compte, initiale dans la même teinte, plus foncée. */
.avatar.is-tinted { background: hsl(var(--h) 75% 93%); color: hsl(var(--h) 45% 34%); }
:root[data-theme='dark'] .avatar.is-tinted { background: hsl(var(--h) 55% 17%); color: hsl(var(--h) 85% 64%); }

.icon-circle {
  display: grid; place-items: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface-3); color: var(--text);
}
.icon-circle-lg { width: 44px; height: 44px; }
.icon-circle-xl { width: 56px; height: 56px; }

/* ——— Formulaires ——— */
.stack { display: grid; gap: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.span-2 { grid-column: span 2; }
.field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.label { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--text); }
.req { color: #e5484d; margin-left: -2px; }
.opt { font-size: 13px; font-weight: 400; color: var(--faint); }
.hint { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--muted); }
.field-error { font-size: 13.5px; color: var(--danger); }
.field-error:empty { display: none; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap > .i:first-child { position: absolute; left: 14px; color: var(--faint); pointer-events: none; }
.input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: 15px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder { color: var(--faint); }
.input:hover { border-color: var(--border-hover); }
.input:focus { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); }
.input[readonly] { background: var(--tint-2); border-color: var(--border); color: var(--faint); cursor: default; }
.input[readonly]:focus { box-shadow: none; }
.input.has-icon { padding-left: 42px; }
.input.has-action { padding-right: 46px; }
.input-sm { height: 36px; font-size: 14px; padding: 0 32px 0 12px; }
.input-action {
  position: absolute; right: 8px; width: 27px; height: 27px; padding: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; border-radius: 4px; color: var(--text);
}
.input-action:hover { background: var(--hover); }
.select-wrap select { appearance: none; padding-right: 40px; cursor: pointer; }
.select-caret { position: absolute; right: 14px; color: var(--text-2); pointer-events: none; }
.select-sm { width: 170px; }
.select-sm .select-caret { right: 10px; }
.has-error .input, .has-error .phone-input { border-color: var(--danger); }

.phone-input {
  display: flex; align-items: center; gap: 4px; height: 46px; padding: 4px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-input:hover { border-color: var(--border-hover); }
.phone-input:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); }
.phone-cc {
  position: relative; display: flex; align-items: center; gap: 8px; height: 100%;
  padding: 0 10px 0 12px; border-radius: 6px; background: var(--surface-3); font-size: 15px;
}
.phone-cc select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.phone-number { flex: 1; min-width: 0; height: 100%; padding: 0 10px; border: 0; outline: 0; background: none; font-size: 15px; }
.phone-number::placeholder { color: var(--faint); }

.form-section { margin-top: 36px; }
.section-title { font-size: 17px; font-weight: 600; margin-bottom: 16px; letter-spacing: -0.01em; }
.section-desc { font-size: 14.5px; color: var(--muted); margin: -8px 0 18px; }

.segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--surface-3); border-radius: 10px; }
.seg {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 16px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 500;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.seg:hover { color: var(--text); }
.seg.is-active { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.segmented-block { display: flex; }
.segmented-block .seg { flex: 1; height: 40px; }

.pw-rules { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.pw-rules li { display: flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); transition: color 0.2s; }
.pw-rules li .i { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--surface-3); color: var(--faint); transition: all 0.2s; }
.pw-rules li.is-ok { color: var(--text); }
.pw-rules li.is-ok .i { background: var(--text); color: var(--on-strong); }

.form-alert { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--danger-soft); color: #b42318; font-size: 14px; }
.form-alert[hidden] { display: none; }

.note { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); font-size: 14.5px; }

.form-footer { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 28px; }
.form-footer.is-sticky {
  position: sticky; bottom: 0; z-index: 5; margin-top: 16px; padding: 32px 0 24px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--surface) 0%, transparent), var(--surface) 32%);
}

.spinner { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--text); animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.save-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); white-space: nowrap; }
.save-indicator .i { color: var(--success); }
.dot-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--text); animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.25; } }

/* ——— Avatar & logo ——— */
.avatar-upload { display: flex; align-items: center; gap: 20px; }
.avatar-upload-body { display: grid; gap: 10px; }
.avatar-actions { display: flex; align-items: center; gap: 10px; }
.avatar-actions .btn { cursor: pointer; }
.logo-preview {
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  width: 72px; height: 72px; border-radius: var(--r); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--faint);
}
.logo-preview img { width: 100%; height: 100%; object-fit: contain; padding: 8px; background: #fff; }

/* ——— Recherche entreprise ——— */
.company-search { display: grid; gap: 10px; padding: 20px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--border); }
.company-search .label .i { color: var(--text); }
.combo { position: relative; }
.combo-status { position: absolute; right: 14px; }
.combo-list {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 340px; overflow: auto; padding: 6px;
  background: var(--surface); border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.combo-list[hidden] { display: none; }
.combo-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; }
.combo-item:hover, .combo-item.is-active { background: var(--surface-2); }
.combo-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface-3); flex-shrink: 0; }
.combo-main { display: grid; flex: 1; min-width: 0; }
.combo-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-meta { font-size: 13.5px; color: var(--muted); }
.combo-go { color: var(--faint); }
.combo-empty { padding: 16px; font-size: 14px; color: var(--muted); text-align: center; }

/* ——— Cartes & listes ——— */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
.card-pad { padding: 20px 24px; }
.card-pad-lg { padding: 28px; }
.card + .card { margin-top: 16px; }
.card-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 20px; }
.card .section-desc { margin-top: -12px; }

.list-card { overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; width: 100%; }
.list-row + .list-row { border-top: 1px solid var(--border); }
.list-row.flush { padding: 0; }
.list-link { border: 0; background: none; text-align: left; transition: background 0.15s; }
.list-link:hover { background: var(--tint-1); }
.row-text { display: grid; flex: 1; min-width: 0; }
.row-title { font-weight: 500; font-size: 15.5px; }
.row-sub { font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.row-meta { font-size: 14px; color: var(--muted); white-space: nowrap; }
.row-go { color: var(--faint); transition: transform 0.15s, color 0.15s; }
.list-link:hover .row-go { color: var(--text); transform: translateX(2px); }
.check {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px;
  border-radius: 50%; border: 1.5px solid var(--border-strong); color: var(--on-strong);
}
.list-link.is-done .check { background: var(--text); border-color: var(--text); }
.list-link.is-done .row-title { color: var(--muted); }

.progress { height: 4px; background: var(--surface-3); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--text); transition: width 0.5s var(--ease); }

.access { display: grid; gap: 10px; }
.access li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.access li .i { width: 20px; height: 20px; padding: 3px; border-radius: 50%; flex-shrink: 0; }
.access .yes .i { background: var(--text); color: var(--on-strong); }
.access .no { color: var(--faint); }
.access .no .i { background: var(--surface-3); color: var(--faint); }


.seat-form-actions { display: flex; justify-content: flex-end; margin-top: 20px; }
.seat-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.seat-role { padding: 16px 16px 16px 20px; border: 1px solid var(--border); border-radius: var(--r); }
.seat-role-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.seat-role-name { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.seat-role-count { font-size: 14px; font-weight: 400; color: var(--muted); }
.btn-add {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px;
  border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text);
  transition: background 0.15s;
}
.btn-add:hover { background: var(--surface-2); }
.seat-role-list { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--border); }
.seat-role-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.seat-role-row .row-title { font-size: 14.5px; }
.seat-role-row .row-sub { font-size: 13px; white-space: nowrap; }

.recap { display: grid; gap: 16px; margin-top: 32px; }
.recap .card + .card { margin-top: 0; }
.recap-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.recap-head h3 { font-size: 17px; font-weight: 600; }
.recap dl { margin: 0; display: grid; gap: 10px; }
.dl-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; font-size: 15px; }
.dl-row dt { color: var(--muted); }
.dl-row dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mini-list { display: grid; gap: 10px; margin-top: 16px; }
.mini-row { display: flex; align-items: center; gap: 12px; }
.mini-row .badge { margin-left: auto; }

/* ——— Toasts ——— */
.toasts { position: fixed; z-index: 100; bottom: 24px; left: 50%; transform: translateX(-50%); display: grid; gap: 8px; justify-items: center; pointer-events: none; }
body:has(.ob-footer) .toasts { bottom: 96px; }
.toast {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--text); color: var(--on-strong); border-radius: 12px; box-shadow: var(--shadow-lg);
  font-size: 14px; font-weight: 500; animation: toast-in 0.25s var(--ease);
}
.toast-success .i { color: #6ee7a0; }
.toast-error .i { color: #ff8a80; }
.toast-info .i { color: color-mix(in srgb, var(--on-strong) 75%, transparent); }
.toast.is-leaving { animation: toast-out 0.2s ease forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* ——— Modales & menus ——— */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, 0.32); animation: fade-in 0.15s ease;
}
.modal-backdrop.is-leaving { animation: fade-out 0.15s ease forwards; }
.modal {
  display: flex; flex-direction: column; width: 100%; max-height: calc(100vh - 32px); overflow: hidden;
  background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  animation: pop-in 0.2s var(--ease);
}
/* Seul le contenu défile : le titre et les boutons du bas restent toujours visibles. */
.modal > .modal-head, .modal > .modal-foot { flex-shrink: 0; }
.modal > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Fenêtre d'upsell : hauteur réduite, boutons fixés en bas sous un trait fin. */
.modal:has(.extra-sale-form) { max-height: min(640px, calc(100vh - 32px)); }
.modal:has(.extra-sale-form) .modal-foot { padding-top: 16px; border-top: 1px solid var(--border); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 24px 0; }
.modal-title { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.modal-sub { font-size: 14.5px; color: var(--muted); margin-top: 6px; }
.modal-body { padding: 24px; display: grid; gap: 16px; }
/* Description en tête de fenêtre : rapprochée du titre (comme un sous-titre), un peu d'air avant le contenu. */
.modal-body > .text-muted:first-child { margin: -20px 0 4px; font-size: 14.5px; line-height: 1.5; }
.modal-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 0 24px 24px; }
/* Fenêtre remplacée par sa version à jour : pas d'animation. */
.modal-backdrop.is-instant, .modal-backdrop.is-instant .modal { animation: none; }
/* Fenêtre remplacée par une autre ouverte depuis elle : masquée, elle revient quand on quitte la nouvelle. */
.modal-backdrop.is-hidden { display: none; }
/* Passage d'une fenêtre à l'autre : la nouvelle arrive par la droite (on avance), la précédente revient par
   la gauche quand on la quitte (on recule). Fond immobile ; rien pour qui préfère réduire les animations. */
.modal-backdrop.is-forward .modal { animation: modal-forward 0.22s var(--ease); }
.modal-backdrop.is-back .modal { animation: modal-back 0.22s var(--ease); }
@keyframes modal-forward { from { opacity: 0; transform: translateX(32px); } }
@keyframes modal-back { from { opacity: 0; transform: translateX(-32px); } }
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop.is-forward .modal, .modal-backdrop.is-back .modal { animation: none; }
}
/* Fiche d'un lead en grande fenêtre (Pipeline), à la manière d'iClosed : barre du haut avec le nom et
   des actions, onglets à gauche (le trait sous l'onglet actif glisse), informations du client à droite. */
.modal:has(.lead-view) { height: min(820px, calc(100vh - 32px)); }
.modal:has(.lead-view) .modal-head { align-items: center; padding: 12px 16px 12px 24px; border-bottom: 1px solid var(--border); }
.modal:has(.lead-view) .modal-title { font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; }
.modal:has(.lead-view) .modal-body { display: block; padding: 0; overflow: hidden; }
.modal-head-actions { display: flex; align-items: center; gap: 8px; }
.head-action {
  display: grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text-2); cursor: pointer;
}
.head-action:hover { background: var(--tint-3); color: var(--text); }
.head-sep { width: 1px; height: 24px; margin: 0 4px; background: var(--border); }
.lead-view { display: grid; grid-template-columns: minmax(0, 1fr) 400px; height: 100%; min-height: 0; }
.lead-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }
.lead-tabs { position: relative; display: flex; flex-shrink: 0; gap: 24px; padding: 0 24px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.lead-tab {
  display: inline-flex; align-items: center; gap: 7px; height: 48px; padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; cursor: pointer; transition: color 0.15s;
}
.lead-tab:hover, .lead-tab.is-active { color: var(--text); }
.lead-tab:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; border-radius: 6px; }
.lead-tab-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 18px; padding: 0 5px; border-radius: 5px;
  background: var(--tint-3); font-size: 11.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.lead-tabs-ink {
  position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--text);
  transition: transform 0.28s var(--ease), width 0.28s var(--ease);
}
.lead-tabs-ink.no-anim { transition: none; }
.lead-panel { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 32px; }
.lead-panel-body > .drawer-section:first-child, .lead-aside > .drawer-section:first-child { margin-top: 4px; }
.lead-panel-body .drawer-section { margin-top: 32px; }
.lead-empty { margin-top: 48px; }
.lead-aside { min-height: 0; overflow-y: auto; padding: 20px 24px 32px; background: var(--tint-1); }
.lead-aside .drawer-section { font-size: 16px; }
/* Informations : libellé (icône + texte) à gauche, valeur à droite. */
.detail-rows { display: grid; gap: 6px; }
/* Libellé et valeur alignés en haut : une valeur sur plusieurs lignes (adresse) commence à la hauteur du libellé ; sur
   une ligne, rien ne change (bande de 32 px). Statut (bouton) et commercial (photo) restent centrés. */
.detail-row { display: grid; grid-template-columns: 124px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 32px; font-size: 14px; }
.detail-row dt { display: flex; align-items: center; gap: 8px; min-height: 32px; color: var(--muted); }
.detail-row dt .i { flex-shrink: 0; }
.detail-row dd { display: flex; align-items: flex-start; gap: 4px; min-width: 0; min-height: 32px; margin: 0; padding-top: 6px; font-weight: 500; color: var(--text); }
.detail-row dd .copy-btn { margin-top: -2px; }
.detail-row dd:has(.stage-select, .cell-owner) { align-items: center; padding-top: 0; }
.detail-value { min-width: 0; overflow-wrap: break-word; }
.detail-hint { font-weight: 400; color: var(--muted); }
.detail-cap { display: inline-block; }
.detail-cap::first-letter { text-transform: uppercase; }
/* Commentaire laissé par le setter en prenant le rendez-vous. */
.setter-note { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--tint-3); font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.setter-note-label { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.journey-body .status-pill, .journey-body .stage-pill { margin-left: 2px; }
.stage-select {
  display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% + 9px); height: 30px; margin-left: -9px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-weight: 500; color: var(--text); cursor: pointer;
}
/* Statut sur une ligne : un nom long (« Démarches administratives ») est coupé par « … », en entier au survol. */
.stage-select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-select > .i { flex-shrink: 0; }
.stage-select:hover, .stage-select[aria-expanded='true'] { border-color: var(--border); background: var(--surface); }
.stage-select .i { color: var(--muted); }
.stage-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; }
.pop-icon { display: inline-grid; place-items: center; width: 20px; }
/* Parcours : cartes reliées par un trait, de la plus récente à la plus ancienne. */
.journey { display: grid; gap: 20px; }
.journey-item { position: relative; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.journey-item + .journey-item::before { content: ''; position: absolute; left: 28px; top: -21px; width: 1px; height: 20px; background: var(--border-strong); }
.journey-head { display: flex; align-items: center; gap: 10px; min-height: 28px; }
.journey-icon {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 7px;
  background: color-mix(in srgb, var(--c) 13%, var(--surface)); color: var(--c);
}
.journey-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--text); }
.journey-title strong { font-weight: 600; }
.journey-by { font-weight: 400; color: var(--muted); }
.journey-date { flex-shrink: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; color: var(--muted); }
.journey-body { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 14px; color: var(--text-2); }
.journey-body .invoice-item { flex: 1; }
/* Rendez-vous : horaire et lieu, projet, puis commentaire du setter, les uns sous les autres. */
.journey-body.is-stack { flex-direction: column; align-items: stretch; gap: 10px; }
.journey-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.journey-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; padding-left: 13px; font-size: 13.5px; color: var(--muted); }
.journey-facts strong { font-weight: 500; color: var(--text); }
.journey-body .setter-note { margin-top: 0; }
.journey-bar { width: 3px; height: 18px; flex-shrink: 0; border-radius: 2px; background: #facc15; }
.journey-note {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  padding: 0; border: 0; background: none; font: inherit; text-align: left; color: var(--text-2); cursor: pointer;
}
.journey-note:hover, .journey-link:hover { color: var(--text); }
.journey-link {
  padding: 0; border: 0; background: none; font: inherit; color: var(--text-2); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px;
}
/* Parcours : vente (montant cliquable, date de signature ; montant barré et « Annulé » si annulée). */
.journey-link.is-void { color: var(--faint); text-decoration: line-through; }
.journey-sub { margin-left: 8px; font-size: 13px; color: var(--muted); }
.journey-body > .journey-sub:first-child { margin-left: 0; }
.rdv-sync { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: #15803d; }
:root[data-theme='dark'] .rdv-sync { color: var(--vivid-green); }
/* Aperçu d'un e-mail envoyé (rendez-vous placé) : en-tête De / À / Objet / Envoyé, puis le texte tel qu'envoyé. */
.mail-head { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; padding-bottom: 14px; border-bottom: 1px solid var(--border); font-size: 14px; }
.mail-head dt { color: var(--muted); }
.mail-head dd { margin: 0; overflow-wrap: anywhere; color: var(--text); }
.mail-text { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--text-2); }
/* Lien d'accès : pas de ligature (« 2x5 » ne devient pas « 2×5 »), coupé où il faut. */
.mail-text a { font-feature-settings: 'calt' 0, 'liga' 0; overflow-wrap: anywhere; }
.mail-proto { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--tint-3); font-size: 13px; color: var(--muted); }
.mail-proto .i { flex-shrink: 0; margin-top: 2px; }
.journey-body .status-pill.is-void { margin-left: 8px; height: 20px; padding: 0 6px; font-size: 12px; }
/* Notes en fil de discussion : fil qui défile, zone d'écriture fixée en bas de l'onglet. */
.lead-main.is-chat .lead-panel { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lead-main.is-chat .lead-panel-body[data-lead-panel='notes']:not([hidden]) { display: flex; flex: 1; min-height: 0; }
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.chat-thread { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px; background: var(--tint-1); }
.chat-day { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; color: var(--muted); }
.chat-day::before, .chat-day::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.chat-day span { padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); }
.chat-note { display: flex; align-items: flex-start; gap: 10px; }
.chat-bubble {
  display: grid; gap: 6px; flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s;
}
.chat-bubble:hover { border-color: var(--border-strong); }
.chat-text { font-size: 14px; line-height: 1.5; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-meta { justify-self: end; font-size: 12px; color: var(--muted); }
.chat-empty { margin: auto; max-width: 340px; font-size: 14px; line-height: 1.5; text-align: center; color: var(--muted); }
.chat-composer { flex-shrink: 0; padding: 16px 24px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-box { padding: 12px 14px 10px; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; }
.chat-box:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.06); }
.chat-box textarea {
  display: block; width: 100%; min-height: 44px; max-height: 160px; padding: 0; border: 0; outline: 0; resize: none;
  background: none; font: inherit; font-size: 14px; line-height: 1.5; color: var(--text);
}
.chat-box textarea::placeholder { color: var(--faint); }
.chat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }
.chat-hint { margin-right: auto; font-size: 12px; color: var(--faint); }
.chat-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.chat-send {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--text); border-radius: 8px;
  background: var(--text); color: var(--on-strong); font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.chat-send:disabled { border-color: var(--border); background: var(--surface); color: var(--faint); cursor: not-allowed; }
/* Paramètres, Disponibilités : un jour par ligne — interrupteur, jour, un ou deux créneaux de … à … (« + » pour le
   deuxième, corbeille pour le retirer ; « Indisponible » quand le jour est coupé). Le deuxième créneau passe à la ligne
   s'il manque de place. */
.avail-list { display: grid; }
.avail-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 0; }
.avail-row + .avail-row { border-top: 1px solid var(--line); }
.avail-day { flex-shrink: 0; width: 96px; font-size: 14.5px; font-weight: 500; color: var(--text); }
.avail-hours { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.avail-slot, .avail-second { display: flex; align-items: center; gap: 8px; }
.avail-hours .input { width: 104px; height: 38px; }
.avail-sep { font-size: 14px; color: var(--muted); }
.avail-slot-btn { width: 32px; height: 32px; color: var(--muted); }
.avail-slot-btn:hover { color: var(--text); }
/* Téléphone : les horaires passent sous le jour, sur toute la largeur ; le deuxième créneau s'aligne sous le premier,
   « + » ou la corbeille au bout de la ligne. */
@media (max-width: 640px) {
  .avail-row { flex-wrap: wrap; row-gap: 10px; }
  .avail-hours { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) 32px; gap: 8px; }
  .avail-slot, .avail-second { display: contents; }
  .avail-slot > .time-picker:first-child { grid-column: 1; }
  .avail-hours .input { width: 100%; }
}
.avail-off { display: none; font-size: 14px; color: var(--muted); }
.avail-row.is-off .avail-hours { display: none; }
.avail-row.is-off .avail-off { display: inline; }
.avail-row.is-off .avail-day { color: var(--muted); }
/* Placer un rendez-vous : grande fenêtre en deux parties — à gauche le formulaire (il défile seul), à droite la
   semaine du commercial comme un Google Agenda : heures à gauche, disponibilités en blanc, le reste en gris, ses
   rendez-vous (couleur de l'étape), ses créneaux Google Agenda (gris rayé), le rendez-vous choisi (noir, rouge en
   conflit) ; au survol, l'aperçu des 2 heures en pointillés ; passé estompé. Légende et verdict en bas. */
.modal:has(.rdv-planner) { height: min(860px, calc(100vh - 32px)); }
.modal:has(.rdv-planner) .modal-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.modal:has(.rdv-planner) .modal-body { display: block; padding: 0; overflow: hidden; }
.modal:has(.rdv-planner) .modal-foot { padding-top: 16px; border-top: 1px solid var(--border); }
.rdv-planner { --pl-off: var(--tint-3); display: grid; grid-template-columns: 460px minmax(0, 1fr); height: 100%; min-height: 0; }
/* Sombre : les heures sans disponibilité plus foncées que les autres (et non plus claires). */
:root[data-theme='dark'] .rdv-planner { --pl-off: color-mix(in srgb, #000 40%, var(--surface)); }
.rdv-planner .when-row { grid-template-columns: minmax(0, 1fr) 124px; }
.planner-side { display: grid; align-content: start; gap: 16px; min-height: 0; overflow-y: auto; padding: 20px 24px 24px; border-right: 1px solid var(--border); }
.planner-side > .text-muted { font-size: 14px; line-height: 1.5; }
.when-row.is-flash .input { animation: when-flash 0.9s var(--ease); }
@keyframes when-flash { 0%, 40% { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); } }
.planner { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.planner-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.planner-nav { display: flex; align-items: center; gap: 4px; }
.planner-title { margin-left: 8px; font-size: 15px; font-weight: 600; color: var(--text); }
.planner-who { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: 13.5px; color: var(--text); }
.pl-sync { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); }
.pl-sync.is-on { color: #15803d; }
:root[data-theme='dark'] .pl-sync.is-on { color: var(--vivid-green); }
.planner-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.pl-empty { padding: 40px 24px; text-align: center; font-size: 14px; color: var(--muted); }
.pl-days, .pl-body { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.pl-days { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom: 1px solid var(--border); }
.pl-day { display: grid; justify-items: center; gap: 1px; padding: 8px 4px; font-size: 12px; color: var(--muted); }
.pl-date { font-size: 17px; line-height: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Aujourd'hui : fond gris sur l'en-tête et la colonne (sans estomper les heures passées), ligne rouge à l'heure qu'il est. */
.pl-day.is-today { background: var(--tint-3); color: var(--text); }
.pl-col.is-today::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(0, 0, 0, 0.035); }
:root[data-theme='dark'] .pl-col.is-today::before { background: rgba(255, 255, 255, 0.04); }
.pl-col.is-today .pl-past { background: none; }
.pl-now { position: absolute; left: 0; right: 0; z-index: 5; height: 2px; margin-top: -1px; background: #ea4335; pointer-events: none; }
.pl-now::before { content: ''; position: absolute; left: -5px; top: -4px; width: 10px; height: 10px; border-radius: 9999px; background: #ea4335; }
.pl-day.is-off .pl-date { color: var(--faint); }
.pl-body { padding: 10px 0 16px; }
/* Les heures et le coin restent à gauche quand l'agenda défile de côté (écran étroit). */
.pl-gutter { position: sticky; left: 0; z-index: 5; background: var(--surface); }
.pl-corner { position: sticky; left: 0; background: var(--surface); }
.pl-hour { position: absolute; right: 10px; transform: translateY(-50%); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pl-col { position: relative; height: var(--pl-h); border-left: 1px solid var(--border); background: var(--pl-off); cursor: pointer; }
.pl-col::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--pl-hour));
}
.pl-avail { position: absolute; left: 0; right: 0; background: var(--surface); }
.pl-past { position: absolute; top: 0; left: 0; right: 0; z-index: 3; background: color-mix(in srgb, var(--surface) 55%, transparent); cursor: not-allowed; }
.pl-event, .pl-selection, .pl-ghost { position: absolute; overflow: hidden; padding: 3px 5px; border-radius: 6px; font-size: 11.5px; line-height: 1.3; }
.pl-event {
  z-index: 2; margin-left: 1px; border-left: 3px solid var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface));
  box-shadow: 0 0 0 1px var(--surface);
}
.pl-event.is-google {
  --c: #64748b;
  background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)) 0 6px, color-mix(in srgb, var(--c) 9%, var(--surface)) 6px 12px);
}
/* Nom sur deux lignes au plus (colonnes étroites), puis l'heure. */
.pl-ev-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-weight: 600; color: var(--text); }
.pl-ev-time { display: block; overflow: hidden; white-space: nowrap; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pl-selection { z-index: 4; margin-left: 1px; height: var(--pl-rdv); background: var(--text); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35); pointer-events: none; }
.pl-selection .pl-ev-title, .pl-selection .pl-ev-time { color: var(--on-strong); }
.pl-selection .pl-ev-time { white-space: normal; }
.pl-selection.is-conflict { background: var(--danger); }
.pl-selection.is-conflict .pl-ev-title, .pl-selection.is-conflict .pl-ev-time { color: #fff; }
.pl-ghost {
  z-index: 5; left: 3px; right: 3px; height: var(--pl-rdv); border: 1.5px dashed var(--text-2);
  background: color-mix(in srgb, var(--surface) 75%, transparent); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none;
}
.planner-foot { display: grid; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 13.5px; }
.pl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); }
.pl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pl-key { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); }
.pl-key.is-avail { background: var(--surface); }
.pl-key.is-off { background: var(--pl-off); }
.pl-key.is-rdv { border: 0; border-left: 3px solid #3b82f6; background: color-mix(in srgb, #3b82f6 16%, var(--surface)); }
.pl-key.is-google { border: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, #64748b 40%, var(--surface)) 0 3px, color-mix(in srgb, #64748b 16%, var(--surface)) 3px 6px); }
.pl-status { color: var(--muted); }
/* Écran étroit : le formulaire puis l'agenda, l'un sous l'autre ; l'agenda défile aussi de côté. */
@media (max-width: 900px) {
  .modal:has(.rdv-planner) .modal-body { overflow-y: auto; }
  .rdv-planner { grid-template-columns: 1fr; height: auto; }
  .planner-side { overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  .planner { height: 600px; }
  .pl-days, .pl-body { min-width: 620px; }
}
.avail-alert { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 8px; line-height: 1.45; }
.avail-alert .i { flex-shrink: 0; margin-top: 2px; }
.avail-alert.is-conflict { background: #fee2e2; color: #b91c1c; }
.avail-alert.is-ok { background: #dcfce7; color: #15803d; }
:root[data-theme='dark'] .avail-alert.is-conflict { background: var(--deep-red); color: var(--vivid-red); }
:root[data-theme='dark'] .avail-alert.is-ok { background: var(--deep-green); color: var(--vivid-green); }
/* Tickets : l'échange dans la fenêtre du ticket (fil de messages, réponse) ; ses messages à droite, sur fond gris. */
.ticket-chat { height: min(56vh, 520px); margin: -24px; }
.chat-bubble.is-static { cursor: default; }
.chat-bubble.is-static:hover { border-color: var(--border); }
.chat-note.is-mine { flex-direction: row-reverse; }
.chat-note.is-mine .chat-bubble { background: var(--tint-3); border-color: transparent; }
.ticket-company { font-size: 13px; color: var(--muted); }
.ticket-actions { display: flex; gap: 8px; justify-content: flex-end; width: 100%; }
.ticket-actions .btn .i { margin-right: 4px; }
/* Tableau des tickets : sujet et dernier message coupés par « … » ; point rouge devant un ticket pas encore lu. */
.tickets-table td.col-ticket-subject { width: 100%; min-width: 240px; max-width: 0; }
.ticket-subject { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ticket-subject-text { min-width: 0; }
.ticket-subject-text > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-unread { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #f87171; }
.tickets-table tr.is-unread .ticket-subject .cell-title { font-weight: 600; }
/* Documents du client. */
.doc-list { display: grid; gap: 8px; }
.doc-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-align: left; cursor: pointer;
}
.doc-row:hover { background: var(--tint-2); }
.doc-row .file-text { display: grid; min-width: 0; }
.doc-row .file-name { font-size: 14px; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row .file-meta { font-size: 12.5px; color: var(--muted); }
/* Corbeille d'un document (onglet Documents de la fiche) : à droite, au survol de la ligne ou au clavier ;
   toujours visible sur écran tactile. */
.doc-item { position: relative; }
.doc-item:has(.doc-delete) .doc-row { padding-right: 56px; }
.doc-item:hover .doc-row { background: var(--tint-2); }
.doc-delete {
  position: absolute; top: 50%; right: 12px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transform: translateY(-50%);
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.doc-delete:hover { background: var(--danger-soft); color: var(--danger); }
.doc-delete:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
@media (hover: hover) {
  .doc-delete { opacity: 0; }
  .doc-item:hover .doc-delete, .doc-delete:focus-visible { opacity: 1; }
}
@media (max-width: 860px) {
  .modal:has(.lead-view) { height: calc(100vh - 32px); }
  .modal:has(.lead-view) .modal-body { overflow-y: auto; }
  .lead-view { display: block; height: auto; }
  .lead-main { border-right: 0; }
  .lead-panel, .lead-aside { overflow: visible; }
  .lead-main.is-chat .lead-panel { display: block; overflow: visible; }
  .chat-thread { max-height: 50vh; }
  .lead-aside { border-top: 1px solid var(--border); }
  .detail-row { grid-template-columns: 120px minmax(0, 1fr); }
}
.mail-edit { height: auto; min-height: 340px; padding: 16px; font: 14px/1.6 var(--font); resize: vertical; }
.mail-preview {
  margin: 0; padding: 16px; max-height: 340px; overflow: auto;
  background: var(--surface-2); border-radius: var(--r-sm);
  font: 14px/1.6 var(--font); white-space: pre-wrap; color: var(--text-2);
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* Petites fenêtres (menus, calendriers, notifications…) : un trait fin autour pour se détacher de la page ; en sombre,
   un fond un cran plus clair que la page, un trait plus marqué et une ombre plus profonde. */
.popover {
  position: fixed; z-index: 70; padding: 4px;
  border: 1px solid var(--border); background: var(--surface); border-radius: 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05), 0 2px 2px rgba(0, 0, 0, 0.05), 0 5px 5px rgba(0, 0, 0, 0.05), 0 10px 10px rgba(0, 0, 0, 0.05), 0 0 8px rgba(0, 0, 0, 0.05);
  animation: pop-in 0.15s var(--ease);
}
:root[data-theme='dark'] .popover { border-color: var(--border-strong); background: var(--surface-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.45); }
.pop-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 36px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: none; color: var(--text);
  font-size: 14px; font-weight: 500; line-height: 20px; text-align: left; white-space: nowrap;
}
.pop-item:hover, .pop-item:focus-visible { background: var(--tint-3); outline: none; }
.pop-danger { color: var(--danger); }
.pop-danger:hover, .pop-danger:focus-visible { background: var(--danger-hover); }
.pop-sep { height: 0; margin: 4px 1px; border: 0; border-top: 1px solid var(--border); }
.pop-heading { padding: 8px 12px 4px; font-size: 12px; font-weight: 500; color: var(--muted); }
.pop-label { flex: 1; }
.pop-check { color: var(--text); }

/* ==========================================================================
   Connexion
   ========================================================================== */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; }

.auth { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--surface); }
.auth-left { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 32px 16px 24px; }
.auth-main { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; }
.auth-logo { display: flex; align-items: center; justify-content: center; height: 40px; color: var(--text); }
.auth-title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -0.15px; color: var(--text); }
.auth-card { width: 100%; max-width: 440px; padding: 48px; }
@media (max-width: 519px) {
  .auth-card { padding: 32px; }
}
.auth-form { display: grid; gap: 24px; }
.auth .field { gap: 8px; }
/* Texte rogné en haut comme chez JOIN : ligne de 20 px, décalée de 4 px vers le haut. */
.auth .label { font-size: 14px; line-height: 20px; margin-top: -4px; color: var(--text-2); }
/* Contour des champs et texte secondaire : noirs translucides en clair, gris du thème en sombre. */
.auth { --auth-line: rgba(0, 0, 0, 0.19); --auth-line-hover: rgba(0, 0, 0, 0.3); --auth-soft: rgba(0, 0, 0, 0.61); }
:root[data-theme='dark'] .auth { --auth-line: var(--border-strong); --auth-line-hover: var(--border-hover); --auth-soft: var(--muted); }
.auth .input {
  height: 40px; padding: 0 12px; border: 0; border-radius: 8px; font-size: 16px; color: var(--text);
  box-shadow: inset 0 0 0 1px var(--auth-line);
}
.auth .input.has-action { padding-right: 42px; }
.auth .input-action { right: 6px; }
.auth .input:hover { box-shadow: inset 0 0 0 1px var(--auth-line-hover); }
.auth .input:focus { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); }
.auth .has-error .input { box-shadow: inset 0 0 0 1px #e5484d; }
.auth .has-error .input:focus { box-shadow: inset 0 0 0 1px var(--focus), 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); }
/* Information en tête du formulaire de connexion (arrivée par le lien de l'e-mail d'accès). */
.auth-notice { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 8px; background: #e8f1fe; color: #1d4ed8; font-size: 14px; line-height: 20px; }
.auth-notice .i { flex-shrink: 0; margin-top: 2px; }
:root[data-theme='dark'] .auth-notice { background: var(--deep-blue); color: var(--vivid-blue); }
.auth-callout {
  display: grid; grid-template-columns: 15px 1fr; column-gap: 12px; align-items: start;
  padding: 16px; border-radius: 8px; background: rgba(243, 0, 13, 0.078);
  color: #ce2c31; font-size: 14px; line-height: 20px;
}
.auth-callout-icon { display: flex; align-items: center; height: 20px; }
:root[data-theme='dark'] .auth-callout { background: var(--deep-red); color: var(--vivid-red); }
.btn-pill { height: 40px; padding: 0 16px; border-radius: 9999px; background: var(--primary); color: var(--on-strong); font-size: 14px; font-weight: 500; }
.btn-pill:hover { background: var(--primary-hover); }
/* Variante claire (écran « Accès suspendu » : aller sur une autre entreprise). */
.btn-pill-soft { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-pill-soft:hover { background: var(--hover); }
.auth-link {
  padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 500; color: var(--text);
  text-decoration: underline; text-underline-offset: 2px;
}
.auth-link:hover { text-decoration-thickness: 2px; }
.auth-label-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.auth-sublink {
  margin-top: -4px; padding: 0; border: 0; background: none;
  font-size: 14px; line-height: 20px; color: var(--auth-soft); text-decoration: none;
}
.auth-sublink:hover { text-decoration: underline; text-decoration-color: currentColor; text-underline-offset: 2px; }
.auth .auth-email-ro,
.auth .auth-email-ro:hover,
.auth .auth-email-ro:focus { background: transparent; box-shadow: none; color: var(--auth-soft); cursor: default; }
.auth-foot { display: grid; gap: 12px; margin-top: auto; padding-top: 32px; text-align: center; font-size: 14px; font-weight: 500; color: var(--muted); }
/* Mentions légales, confidentialité, conditions d'utilisation : discrets, en bas de la connexion. */
.auth-legal { font-size: 12.5px; font-weight: 400; }
.auth-legal .auth-link { color: var(--muted); font-weight: 400; }
/* Démarrage : chargement (base réelle) et message si l'application n'a pas pu démarrer. */
.boot-loading, .boot-failure { display: grid; place-content: center; justify-items: center; gap: 12px; min-height: 100vh; padding: 24px; text-align: center; color: var(--muted); font-size: 14px; }
.boot-failure { max-width: 460px; margin: 0 auto; }
.boot-failure-title { font-size: 18px; font-weight: 600; color: var(--text); }
/* Développement : choix des données (prototype ou base réelle), et repère « Base réelle » en bas à gauche. */
.auth-mode { display: flex; align-items: center; justify-content: center; gap: 4px; }
.auth-mode-btn { padding: 2px 10px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: inherit; cursor: pointer; }
.auth-mode-btn:hover { color: var(--text); }
.auth-mode-btn.is-active { background: var(--tint-3); color: var(--text); }
.dev-badge { position: fixed; bottom: 12px; left: 12px; z-index: 40; padding: 4px 10px; border-radius: 999px; background: #0b2a4a; color: #3b9eff; font-size: 12px; font-weight: 500; pointer-events: auto; }

/* Panneau visuel de droite (≥ 1024 px) : fond peint + aperçu du SaaS qui déborde. */
.auth-side { display: none; position: relative; }
.visual { position: absolute; inset: 32px 32px 32px 0; overflow: hidden; border-radius: 12px; }
.visual-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(55% 35% at 22% 12%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(45% 30% at 78% 26%, rgba(240, 236, 224, 0.65), transparent 70%),
    radial-gradient(40% 25% at 50% 45%, rgba(214, 219, 214, 0.5), transparent 70%),
    radial-gradient(65% 45% at 18% 88%, rgba(98, 90, 72, 0.55), transparent 70%),
    radial-gradient(60% 45% at 92% 92%, rgba(62, 60, 54, 0.5), transparent 70%),
    linear-gradient(180deg, #b7c6cc 0%, #cdd3cd 36%, #b0aa95 66%, #7a7462 100%);
}
.visual-bg::after {
  content: ''; position: absolute; inset: 0; opacity: 0.28; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.app-mock {
  position: absolute; top: 12%; left: 13%; right: 0; bottom: 0;
  display: grid; grid-template-columns: 48px minmax(560px, 1fr); overflow: hidden;
  background: var(--bg); border-radius: 12px 0 0 0;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
  font-size: 11px; color: var(--text); line-height: 1.4;
}
/* Menu de gauche replié (comme l'application) : logo, recherche, icônes des pages par section, photo en bas. */
.am-side { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 0; background: var(--bg); }
.am-head { padding-bottom: 10px; }
.am-sec { width: 18px; height: 1px; margin: 6px 0; background: var(--border); }
.am-nav { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; color: var(--muted); }
.am-nav.is-active { background: var(--active); color: var(--text); }
.am-user { margin-top: auto; }
/* Page Agenda (vue Semaine) : titre (sans les filtres de la page), puis les 7 jours — aujourd'hui en surbrillance — et
   leurs rendez-vous aux couleurs des étapes (comme .rdv-card). */
.am-main { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 0; padding: 12px 14px 0; border-radius: 10px 0 0 0; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.am-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.am-week { display: flex; flex-direction: column; flex: 1; min-height: 0; border: 1px solid var(--border); border-bottom: 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.am-days, .am-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.am-days { border-bottom: 1px solid var(--border); }
.am-day { display: grid; justify-items: center; gap: 1px; padding: 7px 4px; color: var(--muted); font-size: 10px; }
.am-day b { font-size: 13px; font-weight: 600; color: var(--text); }
.am-day.is-today { background: var(--tint-3); color: var(--text); }
.am-day + .am-day, .am-col + .am-col { border-left: 1px solid var(--border); }
.am-cols { flex: 1; }
.am-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 6px 5px; }
.am-col.is-today { background: var(--tint-1); }
.am-rdv { display: grid; gap: 1px; padding: 5px 6px; border-left: 2px solid var(--c); border-radius: 5px; background: color-mix(in srgb, var(--c) 10%, var(--surface)); }
:root[data-theme='dark'] .am-rdv { background: color-mix(in srgb, var(--c) 24%, #0b0b0d); }
.am-rdv-time { font-size: 9.5px; font-weight: 500; color: color-mix(in srgb, var(--c) 78%, var(--mix-ink)); }
:root[data-theme='dark'] .am-rdv-time { color: color-mix(in srgb, var(--c) 72%, #fff); }
/* Nom du client sur deux lignes au plus (colonnes étroites), comme les cartes de l'Agenda. */
.am-rdv-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 10.5px; font-weight: 600; line-height: 1.3; }
.am-rdv-meta { overflow: hidden; color: var(--muted); font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 1024px) {
  .auth { grid-template-columns: 1fr 1fr; }
  .auth-side { display: block; }
  .auth-main { margin: auto 0; }
}

/* ==========================================================================
   Onboarding plein écran
   ========================================================================== */
.ob { display: flex; flex-direction: column; min-height: 100vh; background: var(--surface); }
.ob-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 72px; padding: 0 24px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px);
}
.ob-top-right { display: flex; align-items: center; gap: 10px; }
.ob-sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.ob-main { flex: 1; padding: clamp(24px, 7vh, 80px) 24px 64px; }
.ob-content { max-width: 580px; margin: 0 auto; }
.ob-step { animation: step-in 0.35s var(--ease); }
/* Onboarding, étape « Votre agenda » : carte Google Agenda sur une ligne (logo, nom, adresse une fois connecté ; à droite
   le bouton « Connecter », ou « Connecté » et « Déconnecter »), puis les disponibilités comme dans Paramètres. */
.ob-gcal-head { display: flex; align-items: center; gap: 14px; }
.ob-gcal-head .row-text { flex: 1; min-width: 0; }
.ob-gcal-actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; }
.recap-avail { margin-top: 10px; }
/* Téléphone : le bouton passe sous le texte. */
@media (max-width: 640px) {
  .ob-gcal-head { flex-wrap: wrap; }
  .ob-gcal-actions { width: 100%; padding-left: 58px; }
}
@keyframes step-in { from { opacity: 0; transform: translateY(10px); } }

.ob-progress { display: flex; gap: 6px; margin-bottom: 20px; }
.ob-seg { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 999px; background: var(--tint-5); transition: background 0.3s; }
.ob-seg.is-on { background: var(--text); }
.ob-seg:not(:disabled):hover { opacity: 0.7; }
.ob-seg:disabled { cursor: default; }
.ob-kicker { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.ob-title { font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.025em; }
.ob-desc { font-size: 16px; line-height: 1.55; color: var(--muted); margin-top: 10px; }
.ob-desc strong { color: var(--text); font-weight: 600; }
/* Premier bloc sous la description d'une étape : 24 px (au lieu de 32–36 px). */
.ob-step .ob-desc + * { margin-top: 24px; }

.ob-footer { position: sticky; bottom: 0; z-index: 20; background: var(--surface); border-top: 1px solid var(--border); }
.ob-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 628px; margin: 0 auto; padding: 14px 24px; }
.ob-footer-right { display: flex; align-items: center; gap: 8px; }

.finish-overlay {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px); animation: fade-in 0.2s ease;
}
.finish-overlay.is-leaving { animation: fade-out 0.25s ease forwards; }
.finish-card { text-align: center; animation: pop-in 0.3s var(--ease); }
.finish-card h3 { font-size: 18px; font-weight: 600; margin-top: 20px; }
.finish-mark { position: relative; display: inline-grid; place-items: center; width: 84px; height: 84px; }
.finish-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--text); animation: spin 0.9s linear infinite; }

/* ==========================================================================
   Tableau de bord
   ========================================================================== */
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); height: 100vh; background: var(--bg); transition: grid-template-columns 0.2s var(--ease); }

.sidebar { display: flex; flex-direction: column; padding: 16px; min-height: 0; overflow-y: auto; }
.sb-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 24px; }
.sb-logo { display: inline-flex; transition: opacity 0.15s; }
/* Logo de l'entreprise à la place de celui de Centurion : même carré arrondi, fond blanc, logo entier. */
.company-mark { display: block; flex-shrink: 0; border-radius: 28%; background: #fff; object-fit: contain; box-shadow: 0 0 0 1px var(--border); }
/* Bouton de réduction : même taille et même arrondi que le logo. */
.sb-toggle { width: 44px; height: 44px; border-radius: 12px; color: var(--text-2); transition: opacity 0.15s, background 0.15s; }
.sb-toggle:hover { background: var(--active); }

/* Menu réduit (grands écrans) : colonne d'icônes seules, mesures reprises de JOIN
   (72 px de large, éléments de 44 × 44 px, icônes de 20 px, 8 px d'écart). */
@media (min-width: 861px) {
  .app.is-collapsed { grid-template-columns: 72px minmax(0, 1fr); }
  .app.is-collapsed.has-drawer { grid-template-columns: 72px minmax(0, 1fr) 400px; }
  .app.is-collapsed .sidebar { padding: 14px; overflow-x: hidden; }
  /* Le bouton se cache derrière le logo et apparaît à son survol. */
  .app.is-collapsed .sb-head { width: 44px; height: 44px; margin-bottom: 32px; }
  .app.is-collapsed .sb-toggle { position: absolute; inset: 0; z-index: 1; width: 44px; height: 44px; border-radius: 12px; background: var(--active); opacity: 0; }
  .app.is-collapsed .sb-head:hover .sb-toggle,
  .app.is-collapsed .sb-toggle:focus-visible { opacity: 1; }
  .app.is-collapsed .sb-head:hover .sb-logo,
  .app.is-collapsed .sb-head:has(.sb-toggle:focus-visible) .sb-logo { opacity: 0; }
  .app.is-collapsed .nav-label,
  .app.is-collapsed .kbd-group,
  .app.is-collapsed .nav-badge,
  .app.is-collapsed .sb-user-name,
  .app.is-collapsed .sb-user > .i,
  .app.is-collapsed .sb-company,
  .app.is-collapsed .sb-section:first-child .sb-label { display: none; }
  .app.is-collapsed .sb-search { margin-bottom: 8px; }
  .app.is-collapsed .sb-label { height: 1px; margin: 8px 8px 16px; overflow: hidden; font-size: 0; background: var(--border); }
  .app.is-collapsed .sb-section + .sb-section { margin-top: 8px; }
  .app.is-collapsed .nav-item { justify-content: center; width: 44px; height: 44px; padding: 0; }
  .app.is-collapsed .nav-item + .nav-item { margin-top: 8px; }
  .app.is-collapsed .nav-item .i { width: 20px; height: 20px; }
  /* Point rouge de Factures : sur l'icône. */
  .app.is-collapsed .nav-item:has(.nav-dot) { position: relative; }
  .app.is-collapsed .nav-dot { position: absolute; top: 8px; right: 8px; margin: 0; box-shadow: 0 0 0 2px var(--bg); }
  .app.is-collapsed .sb-user { justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 9999px; }
  .app.is-collapsed .sb-user .avatar { width: 44px !important; height: 44px !important; font-size: 15px !important; }
}

/* Info-bulle (menu réduit), comme chez JOIN. */
.tooltip {
  position: fixed; z-index: 90; padding: 4px 8px; border-radius: 4px;
  background: var(--tooltip-bg); color: var(--tooltip-fg); font-size: 12px; line-height: 16px; font-weight: 600;
  white-space: nowrap; pointer-events: none; animation: fade-in 0.12s ease;
}
.tooltip.is-multiline { width: max-content; max-width: 260px; padding: 6px 8px; white-space: normal; }
.tooltip.is-rich { max-width: 290px; padding: 8px 10px; }
.tooltip p { margin: 0; }
.tooltip p + p { margin-top: 8px; }
.tooltip .tooltip-meta { color: var(--tooltip-meta); }
.sb-search { margin-bottom: 20px; color: var(--muted); }
/* Sélecteur d'entreprise (plusieurs entreprises pour la même adresse e-mail) : le nom de l'entreprise à côté du
   logo, sans cadre, avec une petite flèche vers le bas, coupé par « … » s'il manque de place ; menu réduit : logo seul. */
.sb-company {
  display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; height: 36px; margin-left: 2px; padding: 0 8px;
  border: 0; border-radius: var(--r-sm); background: none; text-align: left;
}
.sb-company:hover, .sb-company[aria-expanded='true'] { background: var(--hover); }
.sb-company-name { overflow: hidden; font-size: 15px; font-weight: 600; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.sb-company > .i { flex-shrink: 0; color: var(--muted); transition: transform 0.15s; }
.sb-company[aria-expanded='true'] > .i { transform: rotate(180deg); }
.sb-section + .sb-section { margin-top: 24px; }
.sb-label { font-size: 13.5px; color: var(--muted); margin: 0 0 8px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 38px; padding: 0 10px;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--text);
  font-size: 15px; font-weight: 500; text-align: left; white-space: nowrap;
  transition: background 0.15s;
}
.nav-item + .nav-item { margin-top: 4px; }
.nav-item .i { color: var(--text-2); }
.nav-item:hover { background: var(--hover); }
.nav-item.is-active { background: var(--active); }
.nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-badge { font-size: 12px; color: var(--muted); }

.sb-user {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-top: auto; padding: 8px;
  border: 0; border-radius: var(--r-sm); background: none; text-align: left;
}
.sb-user:hover { background: var(--hover); }
.sb-user > .i { color: var(--muted); }
.sb-user-name { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user[aria-expanded='true'] { background: var(--hover); }
.scrim { display: none; }

.main {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  margin: 8px 8px 8px 0; background: var(--surface); border-radius: var(--r);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}
.main-top { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 20px; flex-shrink: 0; container: topbar / inline-size; }
.view-select {
  position: relative; display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
  height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 14px; color: var(--muted); cursor: pointer;
}
.view-select:hover { border-color: var(--border-strong); }
.view-select select { appearance: none; min-width: 0; border: 0; outline: 0; background: none; font-weight: 600; color: var(--text); cursor: pointer; padding: 0; text-overflow: ellipsis; }
.view-select > .i { flex-shrink: 0; }
.main-scroll { flex: 1; overflow-y: auto; }
/* Titre compact de page, en haut à gauche dans la barre du haut (ex. Factures), aligné sur le contenu. */
.top-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--text); }
/* Titre compact : 20 px au-dessus du titre, et 20 px entre le titre et le contenu (marge haute du contenu). */
.main-top:has(.top-title) { height: auto; padding-top: 20px; }
/* Accueil : pas de titre, la barre du haut est repliée (le contenu commence à 20 px du haut, comme la Pipeline). */
.main-top.is-bare { height: 0; }
/* Page compacte (ex. Factures) : même espacement (20 px) en haut, à gauche, à droite et en bas, comme le Pipeline. */
.content.is-compact { max-width: none; margin-left: 0; padding: 20px; }
/* Message de page vide (ex. aucune facture) : centré dans toute la zone blanche de la page. */
.page-center { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.page-center > * { pointer-events: auto; }
/* Filtres sous le titre d'une page (ex. statut des factures). */
.page-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.page-filters .view-select { margin-left: 0; }
/* Action à droite de la ligne des filtres (ex. Télécharger), à la hauteur des filtres. */
.page-filters-end { height: 38px; margin-left: auto; }
/* Boutons carrés de la barre de filtres (télécharger, « + ») : même hauteur que les filtres. */
.page-filters .btn-square { height: 38px; }
.btn-square { width: 38px; padding: 0; }
.btn:disabled, .btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.btn-secondary.is-disabled:hover { background: var(--surface); }
.content { max-width: 904px; margin: 0 auto; padding: clamp(8px, 8vh, 96px) 32px 120px; }

/* Bandeaux tout en haut de l'écran, sur toute la largeur (abonnement impayé). */
.app-banners { grid-column: 1 / -1; display: grid; }
/* Vue Centurion : pastilles d'entreprise, actions de paiement, compteurs. */
/* Point rouge clair à droite de « Factures », un peu en retrait du bord : facture en retard (espace partenaire),
   paiements à valider (vue Centurion). */
.nav-dot { flex-shrink: 0; width: 8px; height: 8px; margin: 0 8px 0 auto; border-radius: 50%; background: #f87171; }
.ws-badge {
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden; width: 32px; height: 32px; border-radius: 8px;
  background: var(--text); color: var(--on-strong); font-size: 14px; font-weight: 600;
}
.ws-badge img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.cell-company { display: inline-flex; align-items: center; gap: 10px; }
.cell-company > span:last-child { display: flex; flex-direction: column; min-width: 0; }
/* Colonne « Entreprise » des pages partenaires dans la vue Centurion : petite pastille et nom (coupé s'il est long). */
.cell-company.is-small { gap: 8px; max-width: 180px; }
.cell-company.is-small .ws-badge { width: 24px; height: 24px; border-radius: 6px; font-size: 12px; }
.cell-company.is-small > .cell-title { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-company { white-space: nowrap; }
.cell-stack { display: flex; flex-direction: column; min-width: 0; }
/* Vue Centurion, pages par entreprise (Applications, Équipe) : petit bouton à gauche, du même style que le stylo et la
   corbeille de Saisie des ventes (.dots-btn : rond, sans cadre, fond gris au survol et une fois déplié), sa flèche
   tournée vers le bas une fois déplié ; en dessous, une ligne par personne, alignée sur les colonnes (fond blanc) :
   photo (24 px) sous le logo de l'entreprise, nom sous son nom. */
.ws-table .cell-sub { display: block; margin-top: 4px; }
.ws-table .cell-company.is-small { max-width: 260px; }
/* Bouton tout contre le bord gauche du tableau (au lieu des 20 px de la première colonne). */
.ws-table .cell-toggle,
.content.is-compact .data-table.ws-table .cell-toggle { width: 1%; padding-left: 4px; padding-right: 8px; }
.ws-table td.cell-actions .btn .i { margin-right: 4px; }
.ws-toggle .i { transition: transform 0.15s var(--ease); }
.ws-toggle[aria-expanded='true'] .i { transform: rotate(90deg); }
.ws-group:not(.is-open) .ws-sub { display: none; }
.ws-table tbody + tbody tr:first-child td { border-top: 1px solid var(--line); }
.data-table .ws-sub td { padding-top: 12px; padding-bottom: 12px; }
.ws-person { display: flex; align-items: center; gap: 8px; }
.ws-person .row-text { min-width: 0; }
.list-hint { margin-top: 10px; }
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.company-grid .card + .card { margin-top: 0; }
/* Vue Centurion, Entreprises : une carte par entreprise, avec l'interrupteur de son abonnement. */
.company-card { display: flex; flex-direction: column; gap: 20px; padding: 20px; }
.company-card-head { display: flex; align-items: flex-start; gap: 12px; }
.company-card-head .ws-badge { width: 44px; height: 44px; border-radius: 10px; font-size: 18px; }
.company-card-head .status-pill { flex-shrink: 0; }
/* Crayon « Modifier la fiche » : à droite de l'état de l'abonnement, aligné sur le nom. */
.company-edit { width: 32px; height: 32px; margin: -4px -6px 0 -4px; color: var(--muted); }
.company-edit:hover { color: var(--text); }
.company-card-id { flex: 1; min-width: 0; }
.company-card-name { overflow: hidden; font-size: 15.5px; font-weight: 600; line-height: 22px; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.company-card-sub { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.company-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.company-stat { min-width: 0; }
.company-stat dt { overflow: hidden; font-size: 12.5px; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.company-stat dd { margin: 2px 0 0; font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* En bas : l'état de l'abonnement et son interrupteur. Coupé : chiffres et pastille estompés. */
.company-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.company-sub-state { font-size: 14px; font-weight: 500; color: var(--text); }
/* Pause du compte : sa ligne au-dessus de celle de l'abonnement (« Compte en pause depuis le … » en bleu). */
.company-pause + .company-card-foot { margin-top: -6px; padding-top: 14px; }
.company-pause .btn { flex-shrink: 0; }
.company-pause.is-paused .company-sub-state { color: #1d4ed8; }
/* Ajouter une entreprise : adresse déjà inscrite ailleurs (deuxième espace pour la même personne). */
.hint.is-info { color: #1d4ed8; }
:root[data-theme='dark'] .hint.is-info { color: var(--vivid-blue); }
:root[data-theme='dark'] .company-pause.is-paused .company-sub-state { color: var(--vivid-blue); }
.company-card.is-suspended .company-sub-state { color: var(--muted); }
.company-card.is-suspended .company-stats,
.company-card.is-suspended .ws-badge { opacity: 0.5; }
/* Interrupteur (role="switch") : piste grise, verte une fois activé ; la pastille blanche glisse. */
.switch {
  position: relative; flex-shrink: 0; width: 40px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: var(--border-strong); cursor: pointer; transition: background 0.15s;
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.15s var(--ease);
}
.switch[aria-checked='true'] { background: #16a34a; }
.switch[aria-checked='true']::after { transform: translateX(16px); }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.invoice-actions { display: inline-flex; align-items: center; white-space: nowrap; }
.invoice-actions .btn + .btn { margin-left: 8px; }
/* Vue Centurion : Refuser et Valider après le bouton de téléchargement. */
.invoice-actions .dots-btn + .btn { margin-left: 8px; }
/* Client, ou intitulé d'une facture libre : la colonne prend la place laissée par les autres, 240 px au moins (sur
   une fenêtre étroite, le tableau défile horizontalement) ; un texte plus long y est coupé par « … » (complet au
   survol). */
.invoice-table td.col-client { width: 100%; min-width: 240px; max-width: 0; }
.invoice-client { overflow: hidden; }
.invoice-client .cell-title, .invoice-client .cell-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Facture qui n'est pas à régler : la place du bouton « Payer », vide, pour garder les boutons alignés. */
.row-action-slot { flex-shrink: 0; width: 36px; }
/* Vue Centurion, « Nouvelle facture » : lignes (désignation, quantité, prix unitaire HT, total, corbeille). */
.inv-lines { display: grid; gap: 8px; }
.inv-lines [data-lines] { display: grid; gap: 8px; }
.inv-line { display: grid; grid-template-columns: minmax(0, 1fr) 64px 128px 96px 36px; align-items: center; gap: 8px; }
.inv-line-head { font-size: 12.5px; color: var(--muted); }
.inv-line-head .num, .inv-line-total { text-align: right; font-variant-numeric: tabular-nums; }
.inv-line-total { font-size: 14px; color: var(--text-2); white-space: nowrap; }
.inv-line .dots-btn[hidden] { display: grid; visibility: hidden; }
.inv-add-line { justify-self: start; margin-top: 4px; }
.inv-add-line .i { margin-right: 4px; }
/* Détail d'une facture libre : ses lignes et ses notes. */
.inv-lines-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.inv-lines-table th { padding: 0 0 8px; text-align: left; font-weight: 500; font-size: 12.5px; color: var(--muted); }
.inv-lines-table td { padding: 8px 0; border-top: 1px solid var(--line); color: var(--text); }
.inv-lines-table .num { text-align: right; padding-left: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-notes { font-size: 14px; color: var(--text-2); white-space: pre-line; }
@media (max-width: 640px) {
  .inv-line { grid-template-columns: minmax(0, 1fr) 56px 96px 36px; }
  .inv-line-total, .inv-line-head span:nth-child(4) { display: none; }
}
.invoice-actions .btn-primary .i { margin: 0 4px 0 0; }
.top-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top-actions .btn .i { margin-right: 4px; }
/* Mobile : bouton d'action réduit à son icône ; filtres de l'Accueil (et du Tableau de bord Centurion) à la ligne,
   alignés à gauche, plutôt que de déborder de l'écran. */
@media (max-width: 640px) {
  .top-actions .btn-text { display: none; }
  .top-actions .btn .i { margin-right: 0; }
  .content.is-home .pipeline-filters { justify-content: flex-start; }
  .content.is-home .pipeline-filters-group { flex-wrap: wrap; }
  .content.is-home .pipeline-filters-group:empty { display: none; }
}
.seg-count { margin-left: 6px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Abonnement en retard : bandeau rouge tout en haut de l'écran, au-dessus du menu et du contenu, sur toute la
   largeur (première rangée de la grille de l'application) ; lien vers Abonnement. */
.app.has-banner { grid-template-rows: auto minmax(0, 1fr); }
.billing-banner {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px;
  background: #dc2626; color: #fff; font-size: 14px; line-height: 1.45; text-align: center;
}
.billing-banner > .i { flex-shrink: 0; }
.billing-banner strong { font-weight: 600; }
.billing-banner-link { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; margin-left: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
a.billing-banner:hover { background: #b91c1c; }
/* Compte mis en pause par Centurion : même bandeau, en bleu (simple information). */
.pause-banner { background: #2563eb; }
/* Payer une facture : montant TTC en grand, coordonnées bancaires (copiables), référence du virement mise en avant. */
.pay-amount { display: grid; gap: 2px; padding: 16px 18px; border-radius: var(--r); background: var(--tint-2); }
.pay-amount-label { font-size: 13px; color: var(--muted); }
.pay-amount-value { font-size: 26px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.pay-amount-sub { font-size: 13px; color: var(--muted); }
.pay-amount-sub.is-late { color: var(--danger); }
.pay-details .copy-btn { opacity: 1; }
.pay-details .detail-value { font-variant-numeric: tabular-nums; }
.pay-reference { display: grid; gap: 6px; margin-top: 20px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r); }
.pay-reference-label { font-size: 13px; color: var(--muted); }
.pay-reference-value { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; letter-spacing: 0.01em; color: var(--text); }
.pay-reference-value .copy-btn { opacity: 1; }
.pay-reference-hint { font-size: 12.5px; color: var(--muted); }
.preview-banner {
  display: flex; align-items: center; gap: 10px; margin-bottom: 32px; padding: 10px 10px 10px 16px;
  border-radius: 10px; background: var(--surface-2); font-size: 14.5px;
}
.preview-banner .btn { margin-left: auto; }

/* Sélecteur « Vue » (mode développement uniquement), seul en bas à droite (plus de bouton d'aide flottant). */
.dev-view { position: fixed; z-index: 40; right: 24px; bottom: 24px; margin: 0; background: var(--surface); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25); }
body:has(.form-footer.is-sticky) .dev-view { bottom: 104px; }
.app.has-drawer .dev-view { right: 424px; }
/* Barre de pagination en bas de page : le sélecteur remonte au-dessus. */
.app:has(.table-footer) .dev-view { bottom: 76px; }


.section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 48px 0 16px; }
.section-head h2 { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 600; color: var(--text-2); letter-spacing: -0.01em; }
.section-count { font-size: 15px; font-weight: 400; color: var(--muted); }
.see-all { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--text-2); }
.see-all:hover { color: var(--text); }
.section-meta { font-size: 15px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tile {
  display: flex; flex-direction: column; align-items: stretch; padding: 24px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  text-align: left; transition: border-color 0.15s, box-shadow 0.15s;
}
.tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.tile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tile-title { font-size: 17px; font-weight: 500; }
.tile-sub { font-size: 15px; color: var(--muted); margin-top: 4px; }
.tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; font-size: 15px; color: var(--muted); }
.tile-foot .i { color: var(--text-2); }
.tile-add { border-style: dashed; border-color: var(--border-strong); background: none; }
.tile-add .icon-circle { margin-bottom: 20px; }
.tile-add:hover { background: var(--surface-2); box-shadow: none; }

.company-logo {
  display: grid; place-items: center; flex-shrink: 0; overflow: hidden;
  width: 44px; height: 44px; border-radius: 10px; background: var(--text); color: var(--on-strong); font-weight: 600;
}
.company-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 10px; }

.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 32px; }
.page-title { font-size: 30px; font-weight: 700; letter-spacing: -0.025em; }
.page-desc { font-size: 15.5px; color: var(--muted); margin-top: 6px; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.page-head + .section-head { margin-top: 0; }

.empty { display: grid; justify-items: center; gap: 14px; padding: 64px 24px; text-align: center; }
.empty .badge { margin-top: 4px; }
.empty-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
.empty-desc { color: var(--muted); max-width: 440px; }
.empty .access { justify-items: start; margin-top: 4px; }

.doc-row { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.doc-row + .doc-row { border-top: 1px solid var(--border); }
.doc-row.is-done .icon-circle { background: var(--text); color: var(--on-strong); }
.doc-body { flex: 1; min-width: 0; }
.doc-body .row-sub { white-space: nowrap; }
.doc-row .btn { cursor: pointer; }

/* Liste des membres, façon bloc « Documents » de JOIN : lignes sans carte. */
.list-title { display: flex; align-items: baseline; gap: 8px; margin-bottom: 0; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); }
.list-count { font-size: 14px; font-weight: 500; color: var(--muted); }
.member-list { display: grid; }
.member-item { display: flex; align-items: center; gap: 16px; min-height: 44px; padding: 17px 0; }
.member-item + .member-item { border-top: 1px solid var(--line); }
/* Photo de chaque membre : sa couleur (comme dans le menu et Applications) ; gris seulement sans couleur attribuée. */
.member-item .avatar { border-radius: 50%; font-size: 14px; }
.member-item .avatar:not(.is-tinted) { background: var(--tint-3); color: var(--text-2); }
.member-info { display: grid; flex: 1; min-width: 0; }
/* Mêmes tailles que la carte « Votre conseiller » de l'accueil (.row-title / .row-sub). */
.member-name { font-size: 15.5px; font-weight: 500; color: var(--text); }
.member-sub { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Tableau de données (ex. factures) : même style que les listes (lignes aérées, séparateurs discrets).
   Sur petit écran, il défile horizontalement. */
/* Tableaux : tailles de texte et espacements fixes ; quand la place manque, le tableau défile
   horizontalement au lieu de se resserrer (24 px minimum entre deux colonnes). */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.data-table th {
  padding: 12px 24px 12px 0; border-bottom: 1px solid var(--line); text-align: left;
  font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap;
}
.data-table td { padding: 17px 24px 17px 0; vertical-align: middle; font-size: 14px; color: var(--text-2); white-space: nowrap; }
.data-table tbody tr + tr td { border-top: 1px solid var(--line); }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Colonne après un montant (aligné à droite) : un peu d'air pour ne pas coller au montant. */
.data-table .num + th, .data-table .num + td { padding-left: 12px; }
/* Barre fixe en bas d'un tableau : nombre de résultats, lignes par page et pages. */
.table-footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; flex-shrink: 0;
  padding: 10px 20px; border-top: 1px solid var(--border); font-size: 14px; color: var(--muted);
}
.table-count strong { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.pager { display: flex; align-items: center; gap: 6px; }
.pager-size { display: flex; align-items: center; gap: 8px; margin-right: 8px; white-space: nowrap; }
.pager-select { height: 32px; margin-left: 0; padding: 0 8px 0 10px; gap: 6px; }
.pager-btn {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  font-size: 14px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.pager-btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); }
.pager-btn.is-current { border-color: var(--text); color: var(--text); font-weight: 600; }
.pager-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.pager-btn:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.pager-gap { min-width: 20px; text-align: center; color: var(--muted); }
.data-table .cell-actions { width: 36px; }
.data-table .cell-check { width: 16px; padding-right: 14px; }
.data-table tr.is-selected td { background: var(--tint-1); }
/* Ligne cliquable (ouvre la fiche à droite). */
.data-table tr.is-clickable { cursor: pointer; }
.data-table tr.is-clickable:hover td { background: var(--tint-1); }
.data-table tr.is-clickable:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
/* Page compacte (ex. Factures) : le tableau va d'un bord à l'autre de la page, comme la barre fixe du bas ;
   la première et la dernière colonne gardent 20 px de marge intérieure pour rester alignées sur les filtres. */
/* Le tableau occupe toute la hauteur restante et défile lui-même : sa barre de défilement horizontale
   se place tout en bas, juste au-dessus de la barre de pagination, et l'en-tête reste visible. */
.content.is-compact:has(.table-wrap) { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }
.content.is-compact:has(.table-wrap) > #page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.content.is-compact .table-wrap { flex: 1; min-height: 0; overflow: auto; margin: 0 -20px; }
.content.is-compact .data-table thead th { position: sticky; top: 0; z-index: 2; }
.content.is-compact .data-table th { border-top: 1px solid var(--border); border-bottom-color: var(--border); background: var(--tint-1); }
.content.is-compact .data-table th:first-child, .content.is-compact .data-table td:first-child { padding-left: 20px; }
.content.is-compact .data-table th:last-child, .content.is-compact .data-table td:last-child { padding-right: 20px; }
/* Case à cocher (sélection de lignes). */
.cb {
  appearance: none; display: inline-grid; place-content: center; width: 16px; height: 16px; margin: 0; vertical-align: middle;
  border: 1.5px solid var(--border-strong); border-radius: 4px; background: var(--surface); cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cb::after {
  content: ''; width: 8px; height: 4px; margin-top: -2px; border: 2px solid var(--on-strong); border-top: 0; border-right: 0;
  transform: rotate(-45deg); opacity: 0;
}
.cb:hover { border-color: var(--faint); }
.cb:checked, .cb:indeterminate { border-color: var(--text); background: var(--text); }
.cb:checked::after { opacity: 1; }
.cb:indeterminate::after { width: 8px; height: 0; margin-top: 0; border-left: 0; transform: none; opacity: 1; }
.cb:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.data-table td.cell-actions { padding-top: 0; padding-bottom: 0; }
/* Saisie des ventes (tableau et détail d'une vente) : montant de la vente en bleu et montant de la commission
   en vert, un peu plus gras. */
.sale-amount { font-weight: 600; color: #2563eb; font-variant-numeric: tabular-nums; }
.commission-amount, .cell-plain.commission-amount { font-weight: 600; color: #16a34a; font-variant-numeric: tabular-nums; }
/* Client : 260 px (nom et e-mail), sans grand vide avant « Type » sur un grand écran ; le produit prend la place
   restante. L'un et l'autre se coupent par « … » (texte complet au survol). Largeur minimale : les colonnes fixes, le
   client et ~180 px pour le produit ; en dessous, le tableau défile. */
.sales-table { min-width: 1030px; }
.sales-table.has-commission { min-width: 1140px; }
/* Vue Centurion, plusieurs entreprises : colonne Entreprise en plus. */
.sales-table.has-company { min-width: 1250px; }
.sales-table.has-commission.has-company { min-width: 1360px; }
.sales-table th, .sales-table td { padding-right: 16px; }
.sales-table .col-client { width: 260px; min-width: 260px; max-width: 260px; }
.sales-table .col-product { width: 100%; }
.sales-table td.col-product { max-width: 0; }
.sales-table .col-client .cell-clip { max-width: 244px; }
.sales-table .col-product .cell-clip { max-width: none; }
/* Saisie des ventes : le stylo (modifier la vente) reste visible au bout de la ligne, même quand le tableau
   défile horizontalement sur un écran étroit. */
.sales-table .cell-actions { position: sticky; right: 0; z-index: 1; background: var(--surface); }
.content.is-compact .sales-table thead th.cell-actions { z-index: 3; background: var(--tint-1); }
.sales-table tr.is-clickable:hover td.cell-actions { background: var(--tint-1); }
/* Stylo et corbeille côte à côte au bout de la ligne ; la corbeille rougit au survol. */
.sales-table .cell-actions { width: auto; }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.row-delete:hover { background: var(--danger-soft); color: var(--danger); }
.cell-main { display: flex; align-items: center; gap: 16px; }
.cell-title { display: block; font-size: 15px; font-weight: 500; color: var(--text); }
.cell-sub { display: block; font-size: 13.5px; color: var(--muted); }
/* Texte trop long coupé par « … » (tableau Upsell), en entier au survol. */
.cell-clip { max-width: 200px; }
.cell-clip.is-client { max-width: 240px; }
.cell-clip > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-amount { display: inline-grid; justify-items: end; border-radius: 4px; cursor: default; }
.cell-amount:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* Pastilles de statut (inspirées de Stripe). */
.status-pill {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 5px;
  font-size: 13.5px; line-height: 18px; font-weight: 500; white-space: nowrap;
}
.status-pill .i { stroke-width: 2.5; }
.status-pill.is-open { background: #cff5f6; color: #0055bc; }
.status-pill.is-paid { background: #d7f7c2; color: #006908; }
.status-pill.is-late { background: #ffe7f2; color: #b3093c; }
/* Paiement indiqué par le client, en vérification chez Centurion Partners. */
.status-pill.is-processing { background: #fdf0d2; color: #8a5300; }
/* Vue Centurion : un paiement indiqué (« En cours », à vérifier) en violet, pour le distinguer des factures à valider. */
.app.is-centurion .status-pill.is-processing { background: #ede9fe; color: #6d28d9; }
:root[data-theme='dark'] .app.is-centurion .status-pill.is-processing { background: rgba(139, 92, 246, 0.2); color: #c4b5fd; }
.status-pill.is-paused { background: #e3edff; color: #1d4ed8; }
/* Paiement refusé par Centurion Partners (virement non reçu) : rouge. */
.status-pill.is-refused { background: #fee2e2; color: #b91c1c; }
/* Facture à valider (Centurion) / en cours de validation (entreprise) : en attente de validation avant son émission
   dans Pennylane — jaune orangé. */
.status-pill.is-draft { background: #fdf0d2; color: #8a5300; }
:root[data-theme='dark'] .status-pill.is-draft { background: var(--deep-amber); color: var(--vivid-amber); }
.cell-sub.is-error { color: #b91c1c; }
:root[data-theme='dark'] .cell-sub.is-error { color: var(--vivid-red); }
/* Détail d'une facture dont l'émission a échoué : la raison, en rouge. */
.invoice-error { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; background: #fee2e2; color: #b91c1c; font-size: 13.5px; line-height: 1.45; }
.invoice-error .i { flex-shrink: 0; margin-top: 1px; }
:root[data-theme='dark'] .invoice-error { background: var(--deep-red); color: var(--vivid-red); }
/* Outils Pennylane (page Factures, vue Centurion) : société reliée, relever les paiements, émettre. */
/* Facture à valider : montant de la vente avec son crayon (correction d'après le devis). */
.amend-amount { display: inline-flex; align-items: center; gap: 2px; }
.amend-amount .dots-btn { width: 28px; height: 28px; margin: -6px -6px -6px 0; }
.amend-form { display: grid; gap: 14px; }
/* Facture à valider : rappel du montant à retrouver sur le devis signé, au-dessus du document. */
.invoice-check { margin: 0 0 10px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.pl-tools { display: inline-flex; align-items: center; gap: 8px; }
.pl-status { max-width: 240px; overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.pl-status.is-top { margin-left: auto; }
.pl-status.is-off { color: #b45309; }
:root[data-theme='dark'] .pl-status.is-off { color: var(--vivid-amber); }
.btn.is-busy { opacity: 0.6; cursor: progress; }
/* Pastille d'étape du Pipeline (couleur de l'étape sur fond pastel). */
.stage-pill {
  display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 5px;
  background: color-mix(in srgb, var(--c) 12%, var(--surface)); color: color-mix(in srgb, var(--c) 78%, var(--mix-ink));
  font-size: 13.5px; line-height: 18px; font-weight: 500; white-space: nowrap;
}
/* En-têtes triables : libellé + flèche (sens du tri) ; flèche discrète tant que la colonne n'est pas triée. */
.th-sort {
  display: inline-flex; align-items: center; gap: 4px; margin: -4px -6px; padding: 4px 6px; border: 0; border-radius: 6px;
  background: none; font: inherit; color: inherit; white-space: nowrap; cursor: pointer;
}
.th-sort .i { color: var(--faint); }
.th-sort:hover { background: var(--tint-4); color: var(--text); }
.th-sort.is-active { color: var(--text); }
.th-sort.is-active .i { color: var(--text); }
.th-sort:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.num .th-sort { flex-direction: row; }
/* Tableau des prospects. */
.cell-stage { display: grid; justify-items: start; gap: 3px; }
.cell-plain { font-weight: 400; font-size: 14px; color: var(--text-2); }
/* Factures de commission. */
.invoice-icon { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--tint-3); color: var(--text-2); }
.dots-btn {
  display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px;
  border: 0; border-radius: 9999px; background: transparent; color: var(--text-2); transition: background 0.15s;
}
.dots-btn:hover, .dots-btn[aria-expanded='true'] { background: var(--tint-3); }

/* ——— Applications ——— */
.app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.app-grid .card + .card { margin-top: 0; }
.app-card { display: flex; flex-direction: column; padding: 24px; }
.app-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.app-logo { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.app-logo-sm { width: 36px; height: 36px; border-radius: 9px; }
.app-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 22px; }
.app-logo-lg { width: 56px; height: 56px; border-radius: 14px; }
.app-card-link { cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
/* Paramètres, « Applications et Intégrations » : une ligne par application (logo, nom et description, état, bouton),
   puis les agendas de l'équipe (administrateur, administratif). */
.integration-list { display: grid; gap: 10px; }
.integration-row { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.integration-row .row-text { flex: 1; min-width: 0; }
.integration-row .row-sub { white-space: normal; }
.integration-row .btn { flex: none; }
.settings-subtitle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 10px; font-size: 15px; font-weight: 600; color: var(--text); }
.settings-subtitle > span { font-size: 13px; font-weight: 500; color: var(--muted); }
.integration-team { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.integration-team .list-row { padding: 12px 16px; }
@media (max-width: 640px) {
  .integration-row { flex-wrap: wrap; }
  .integration-row .row-text { flex-basis: calc(100% - 60px); }
  .integration-row .status-pill { margin-left: 58px; }
  .integration-row .btn { margin-left: auto; }
}
.app-card-link:hover, .app-card-link[aria-expanded='true'] { border-color: var(--border-strong); box-shadow: var(--shadow); }
.gcal-link { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 4px; }
.gcal-dots { display: flex; gap: 5px; }
.gcal-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--border-strong); }

/* ——— Panneau latéral (drawer), mesures reprises de JOIN ——— */
.app.has-drawer { grid-template-columns: 240px minmax(0, 1fr) 400px; }
.drawer {
  position: relative; min-height: 0; margin: 8px 8px 8px 0; padding: 64px 32px; overflow-y: auto;
  background: var(--surface); border-radius: var(--r); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);
  animation: drawer-in 0.2s var(--ease);
}
@keyframes drawer-in { from { opacity: 0; transform: translateX(12px); } }
.drawer-close { position: absolute; top: 34px; right: 32px; }
.drawer-title { margin-top: 20px; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -0.48px; color: var(--text); }
.drawer-sub { display: flex; align-items: center; gap: 7px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text-2); }
.drawer-actions { display: flex; gap: 8px; margin-top: 24px; }
.btn-soft { height: 36px; padding: 8px 16px; border-radius: 8px; background: var(--tint-4); color: var(--text-2); font-size: 14px; }
.btn-soft:hover { background: var(--tint-5); }
.drawer-section { margin: 40px 0 16px; font-size: 18px; line-height: 24px; font-weight: 600; color: var(--text); }
.drawer-list { display: grid; gap: 10px; }
.drawer-list li { display: flex; align-items: flex-start; gap: 12px; min-width: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--text); }
.drawer-list li .i { color: var(--text-2); }
.drawer-list li span { min-width: 0; overflow-wrap: anywhere; }
.drawer-footer { margin-top: 40px; }

/* ——— Pipeline (tableau façon CRM) ——— */
/* Pipeline : toute la largeur de la page (pas de largeur maximale), 20 px de marge intérieure. */
.content.is-wide { max-width: none; }
/* Accueil : titre « Accueil » dans la barre du haut et mêmes marges que la Pipeline (20 px), indicateurs en premier. */
.content.is-home { padding: 20px 20px 120px; }
.content.is-home #page > .section-head:first-child { margin-top: 0; }
/* Accueil administrateur et commercial : rien sous les cartes, qui descendent jusqu'en bas de la page (au-delà
   de leur hauteur minimale, la page défile). */
.content.is-home:has(.home-panels) { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 20px; }
.content.is-home:has(.home-panels) > #page { display: flex; flex-direction: column; flex: 1; }
/* Le tableau occupe toute la hauteur restante : sa barre de défilement horizontale reste en bas de la page. */
/* Pipeline : même espacement (20 px) en haut, à gauche, à droite et en bas. */
.content.is-wide:has(.board) { display: flex; flex-direction: column; height: 100%; padding: 20px; }
.content.is-wide:has(.board) > #page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.content.is-wide .board { flex: 1; min-height: 0; overflow: auto; }
/* Filtres du Pipeline, au-dessus des indicateurs : type de projet à gauche ; commercial et date à droite. */
.pipeline-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pipeline-filters-group { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pipeline-filters .view-select { margin-left: 0; min-width: 0; }
.pipeline-filter select { max-width: 200px; text-overflow: ellipsis; }
@container pipeline (max-width: 700px) {
  .pipeline-filter > .i:first-child { display: none; }
}
/* Mobile : deux filtres par ligne (le filtre commercial, plus long, sur toute la largeur). */
@container pipeline (max-width: 520px) {
  .pipeline-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pipeline-filters-group { display: contents; }
  .pipeline-filter select { flex: 1; max-width: none; }
  .pipeline-filter:has([data-filter="owner"]) { grid-column: span 2; order: 1; }
}
.metric-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 24px; }
.metric-card { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); }
.metric-title { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.metric-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.metric-info { display: inline-flex; border-radius: 50%; color: var(--faint); cursor: default; }
.metric-info:hover, .metric-info:focus-visible { color: var(--muted); }
.metric-info:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.metric-value { margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Accueil (commercial et administrateur) : 4 indicateurs en haut (2 par ligne sur écran étroit), valeurs plus
   grandes ; titre à gauche, coupé par « … » quand la carte rétrécit, évolution en haut à droite. */
.kpi-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 14.5px; font-weight: 500; color: var(--text); white-space: nowrap; }
.kpi-head .metric-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kpi-head .kpi-delta { flex-shrink: 0; }
.kpi-card .metric-value { margin-top: 8px; font-size: 24px; letter-spacing: -0.01em; }
.kpi-sub { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
/* Évolution : pastille de statut (.status-pill : verte en hausse, rouge en baisse, grise sinon), gap resserré. */
.kpi-delta { gap: 3px; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .kpi-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Chiffre trop long pour 4 cartes sur une ligne (fitKpiCards) : 2 par ligne, voire 1. */
.kpi-cards.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-cards.is-one { grid-template-columns: minmax(0, 1fr); }
/* Accueil, sous les indicateurs (l'un sous l'autre sur écran étroit). Commercial : graphique et rendez-vous du jour
   côte à côte. Administrateur : le graphique seul, sur toute la largeur et la hauteur restante. */
.kpi-cards:has(+ .home-panels), .kpi-cards:has(+ .kpi-cards) { margin-bottom: 12px; }
/* Vue Centurion : commissions payées, à régler, en retard, à venir (pastille de la couleur du graphique). */
.commission-card .kpi-head { justify-content: flex-start; }
.commission-card .chart-swatch { flex-shrink: 0; }
.commission-card.is-late.has-amount .metric-value { color: var(--danger); }
.chart-swatch.is-late { background: var(--danger); }
.home-panels { display: grid; flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.home-panels .card + .card { margin-top: 0; }
.home-panels.is-owner { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(440px, 1fr); }
@media (max-width: 1080px) {
  .home-panels, .home-panels.is-owner { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .home-panels .chart { min-height: 280px; }
  .home-panels .home-list { flex: none; max-height: 336px; contain: none; }
}
.home-panel { display: flex; flex-direction: column; min-width: 0; padding: 16px 18px 18px; }
.home-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.home-panel-titles { min-width: 0; }
.home-panel-title { font-size: 14.5px; font-weight: 500; color: var(--text); }
.home-panel-sub { margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.home-panel .see-all { flex-shrink: 0; font-size: 13.5px; font-weight: 500; color: var(--muted); }
.home-panel .see-all:hover { color: var(--text); }
/* Rendez-vous du jour : une ligne par rendez-vous, sur toute la hauteur de la carte (défile au-delà) ; la liste
   ne fixe pas la hauteur de la carte (contain), c'est le graphique d'à côté qui la donne. */
.home-list {
  display: grid; flex: 1 1 0; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; min-height: 0;
  margin: 0 -8px; overflow-y: auto; list-style: none; contain: size;
}
.home-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 8px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; transition: background 0.15s; }
.home-row:hover { background: var(--hover); }
.home-row:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
.home-row .list-time { flex-shrink: 0; min-width: 116px; font-size: 13.5px; }
.home-row-text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.home-row-title, .home-row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-row-title { font-size: 14.5px; font-weight: 500; color: var(--text); }
.home-row-sub { font-size: 13px; color: var(--muted); }
.home-row .cell-owner { flex-shrink: 0; font-size: 13.5px; color: var(--text-2); }
.home-row .stage-pill, .home-row .status-pill { flex-shrink: 0; }
.home-row.is-moved .list-time { --c: var(--border-strong); color: var(--faint); font-weight: 400; text-decoration: line-through; }
.home-row.is-moved .home-row-title { color: var(--muted); }
.home-row.is-moved .home-row-sub { color: var(--faint); }
.home-row.is-moved .cell-owner, .home-row.is-moved .stage-pill { opacity: 0.6; }
/* « À traiter » : pastille du motif (couleur de l'étape ; facture en retard en rouge, à régler en ambre), nombre
   d'éléments à côté du titre, commercial du lead (photo) ou montant de la facture à droite. */
.home-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: 8px; padding: 0 6px; border-radius: 999px;
  background: var(--tint-4); font-size: 12px; font-weight: 500; color: var(--text-2); vertical-align: 1px; font-variant-numeric: tabular-nums;
}
.todo-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
}
.home-row-amount { flex-shrink: 0; font-size: 13.5px; font-weight: 500; color: var(--text-2); font-variant-numeric: tabular-nums; }
.home-row-owner { display: inline-flex; flex-shrink: 0; }
/* Abonnement : carte de l'offre, simple — nom et statut, échéance, prix à droite ; sous un trait, ce qui est inclus
   (coche verte et libellé, sur plusieurs colonnes) — puis l'historique des paiements dans le tableau des pages de
   liste (bord à bord, en-tête gris fixe). */
.sub-card { margin-bottom: 24px; padding: 20px 24px; }
.sub-card + .sub-card { margin-top: -8px; }
.sub-card.is-suspended .sub-features, .sub-card.is-suspended .sub-price { opacity: 0.55; }
.sub-top { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; }
.sub-top-text { flex: 1; min-width: 0; }
@media (max-width: 640px) {
  .sub-top { flex-direction: column; align-items: flex-start; }
}
.sub-name { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; color: var(--text); }
.sub-meta { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.sub-price { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sub-price span { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.sub-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); list-style: none; }
.sub-features li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.sub-features .i { flex-shrink: 0; color: var(--success); stroke-width: 2.5; }
.sub-history-head { justify-content: space-between; margin-bottom: 12px; }
.sub-history-title { font-size: 15px; font-weight: 600; color: var(--text); }
/* Page Leaderboard : même tableau que Prospects (page « is-compact » : en-tête gris fixe, bord à bord, pagination),
   avec le même fond au survol des lignes (sans curseur de lien : les lignes ne s'ouvrent pas). */
.leaderboard-table tbody tr:hover td { background: var(--tint-1); }
/* Chiffre d'affaires du classement en vert (en bleu ailleurs). */
.leaderboard-table .sale-amount { color: #16a34a; }
:root[data-theme='dark'] .leaderboard-table .sale-amount { color: var(--vivid-green); }
/* Rang : médaille et rang en couleur pour les trois premiers (or, argent, bronze) ; les suivants, en gris, restent
   alignés sur eux (emplacement de médaille vide). */
.rank { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.rank-medal { display: inline-block; flex-shrink: 0; width: 14px; height: 18px; }
.rank-ribbon-l { fill: #2563eb; }
.rank-ribbon-r { fill: #dc2626; }
.rank-disc { fill: var(--medal); }
.rank-ring { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.2; }
.rank.is-1 { --medal: #f5b301; color: #ca8a04; font-weight: 600; }
.rank.is-2 { --medal: #b4b4bc; color: #71717a; font-weight: 600; }
.rank.is-3 { --medal: #d9773a; color: #c2410c; font-weight: 600; }
:root[data-theme='dark'] .rank.is-1 { color: #facc15; }
:root[data-theme='dark'] .rank.is-2 { color: #a1a1aa; }
:root[data-theme='dark'] .rank.is-3 { color: #fb923c; }
.home-panel-empty { display: grid; flex: 1; align-content: center; justify-items: center; gap: 4px; padding: 32px 16px; text-align: center; }
.home-panel-empty .icon-circle { margin-bottom: 8px; }
.home-empty-title { font-size: 14.5px; font-weight: 500; color: var(--text); }
.home-empty-sub { font-size: 13px; color: var(--muted); }
/* Graphique : échelles et étiquettes en gris clair, grille en pointillés ; bâtons aux couleurs des montants (bleu)
   et des commissions (vert) de Saisie des ventes ; commissions à régler en ambre ; rendez-vous en courbe violette. */
.chart { position: relative; flex: 1; min-height: 160px; }
.chart svg { position: absolute; top: 0; left: 0; display: block; overflow: visible; }
.chart-grid { stroke: var(--border); stroke-dasharray: 3 4; }
.chart-base { stroke: var(--border-strong); }
.chart-axis { fill: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart-hover { fill: var(--hover); }
/* Arrivée sur l'Accueil : chaque bâton se lève depuis l'axe (l'un après l'autre), puis la courbe se trace. */
@keyframes chart-rise { from { transform: scaleY(0); } }
@keyframes chart-draw { from { stroke-dashoffset: 1; } }
.chart-col { transform-box: fill-box; transform-origin: 50% 100%; }
.chart svg.is-animated .chart-col { animation: chart-rise 0.7s var(--ease) var(--delay) both; }
.chart svg.is-animated .chart-line { stroke-dasharray: 1; animation: chart-draw 0.9s var(--ease) 0.2s both; }
@media (prefers-reduced-motion: reduce) {
  .chart svg.is-animated .chart-col, .chart svg.is-animated .chart-line { animation: none; }
}
.chart-line { fill: none; stroke: #8b5cf6; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.chart-dot { fill: var(--surface); stroke: #8b5cf6; stroke-width: 2.25; }
.chart-bar.is-revenue, .chart-swatch.is-revenue { fill: #2563eb; background: #2563eb; }
.chart-bar.is-paid, .chart-swatch.is-paid { fill: #16a34a; background: #16a34a; }
.chart-bar.is-due, .chart-swatch.is-due { fill: #f5b83d; background: #f5b83d; }
.chart-bar.is-upcoming, .chart-swatch.is-upcoming { fill: #bbe5c8; background: #bbe5c8; }
.chart-swatch { display: inline-block; flex-shrink: 0; width: 10px; height: 10px; border-radius: 3px; }
.chart-swatch.is-rdv { width: 14px; height: 3px; border-radius: 2px; background: #8b5cf6; }
.chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 14px; font-size: 13px; color: var(--text-2); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.chart-tip {
  position: absolute; z-index: 5; min-width: 220px; padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--tooltip-bg); color: var(--tooltip-fg); box-shadow: var(--shadow); font-size: 12.5px; pointer-events: none;
}
.chart-tip-title { margin-bottom: 6px; font-weight: 600; }
.chart-tip-row { display: flex; align-items: center; gap: 8px; color: var(--tooltip-meta); }
.chart-tip-row + .chart-tip-row { margin-top: 4px; }
.chart-tip-row b { margin-left: auto; padding-left: 16px; font-weight: 500; color: var(--tooltip-fg); font-variant-numeric: tabular-nums; }
.chart-tip-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.12); color: var(--tooltip-meta); }
:root[data-theme='dark'] .chart-line, :root[data-theme='dark'] .chart-dot { stroke: var(--vivid-purple); }
:root[data-theme='dark'] .chart-swatch.is-rdv { background: var(--vivid-purple); }
:root[data-theme='dark'] .chart-bar.is-revenue, :root[data-theme='dark'] .chart-swatch.is-revenue { fill: var(--vivid-blue); background: var(--vivid-blue); }
:root[data-theme='dark'] .chart-bar.is-paid, :root[data-theme='dark'] .chart-swatch.is-paid { fill: var(--vivid-green); background: var(--vivid-green); }
:root[data-theme='dark'] .chart-bar.is-due, :root[data-theme='dark'] .chart-swatch.is-due { fill: var(--vivid-amber); background: var(--vivid-amber); }
:root[data-theme='dark'] .chart-bar.is-upcoming, :root[data-theme='dark'] .chart-swatch.is-upcoming { fill: #1f5135; background: #1f5135; }
/* Les indicateurs s'adaptent à la largeur réelle de la page (menu latéral ouvert ou non) :
   toujours sur une ligne, sans que les titres passent à la ligne. */
.pipeline-page { container: pipeline / inline-size; }
@container pipeline (max-width: 640px) {
  .metric-cards { gap: 8px; }
  .metric-card { padding: 12px 14px; }
  .metric-title { font-size: 14px; }
  .metric-value { font-size: 16px; }
}
/* Très étroit (mobile) : les trois cartes restent sur une ligne et défilent horizontalement. */
@container pipeline (max-width: 520px) {
  .metric-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); overflow-x: auto; scrollbar-width: none; }
  .metric-cards::-webkit-scrollbar { display: none; }
}
/* Colonnes sur toute la hauteur du tableau (zone de dépôt) ; le fond gris n'entoure que les cartes. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: 280px; grid-template-rows: auto; align-content: stretch; gap: 16px; overflow-x: auto; padding-bottom: 12px; }
.board-col { display: flex; flex-direction: column; min-width: 0; }
/* En-tête collant : l'étape et son total restent visibles quand on fait défiler les cartes. */
.board-col-head {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--tint-2);
}
.stage-chip, .count-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 13.5px; font-weight: 500; color: var(--text); white-space: nowrap;
}
.count-chip { min-width: 26px; justify-content: center; font-variant-numeric: tabular-nums; }
.stage-icon { display: inline-flex; }
.board-list { position: relative; display: grid; gap: 8px; padding: 0 8px 8px; border-radius: 0 0 var(--r-lg) var(--r-lg); background: var(--tint-2); }
/* Colonne vide : seul l'en-tête reste visible. */
.board-list:empty { display: none; }
.board-col:has(.board-list:empty) .board-col-head, .board-col.is-detached .board-col-head { border-radius: var(--r-lg); }
.icon-btn-sm { width: 28px; height: 28px; }
.stage-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: var(--c); }
.deal {
  display: grid; gap: 10px; padding: 14px 16px; cursor: grab; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.deal:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.deal:active { cursor: grabbing; }
.deal.is-dragging { display: none; }
.deal-placeholder { border: 1.5px dashed var(--border-strong); border-radius: var(--r); background: var(--hover); animation: placeholder-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes placeholder-in { from { height: 0; opacity: 0; } }
.deal-title { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-field { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: 14px; color: var(--text); }
.deal-field > .i { color: var(--muted); }
.deal-field span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deal-field .stage-dot { margin-right: -2px; }
/* En-tête de carte : nom du lead et menu « ⋮ » (modifier le contact, ajouter une note). */
.deal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.deal-head .deal-title { min-width: 0; }
.deal-menu {
  display: grid; place-items: center; flex-shrink: 0; width: 26px; height: 26px; margin: -3px -8px -3px 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; transition: background 0.12s, color 0.12s;
}
.deal-menu:hover, .deal-menu[aria-expanded='true'] { background: var(--tint-3); color: var(--text); }
.deal-menu:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
/* « ⋮ » visible seulement au survol de la carte (ou au clavier, ou menu ouvert). Écrans tactiles : toujours visible. */
@media (hover: hover) {
  .deal-menu { opacity: 0; transition: opacity 0.12s, background 0.12s, color 0.12s; }
  .deal:hover .deal-menu, .deal:focus-within .deal-menu, .deal-menu[aria-expanded='true'] { opacity: 1; }
}
/* Nombre de notes à côté du nom (icône pense-bête + chiffre) : un clic ouvre les notes. */
.notes-badge {
  display: inline-flex; align-items: center; gap: 3px; margin: -2px 0 -2px 4px; padding: 2px 5px; vertical-align: -1px;
  border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: 13px; line-height: 16px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums;
  transition: background 0.12s, color 0.12s;
}
.notes-badge:hover, .notes-badge[aria-expanded='true'] { background: var(--tint-3); color: var(--text); }
.notes-badge:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
/* Tableau Prospects : sur grand écran, la place restante se partage à parts égales après le client et après le code
   postal — e-mail, téléphone et CP restent groupés, centrés entre le client et la valeur. Au-delà de la longueur d'une
   adresse comme « juliemm.martin17289@orange.fr », l'e-mail est coupé par « … » (adresse complète au survol). */
.prospects-table .col-client, .prospects-table .col-cp { width: 50%; }
.cell-ellipsis { display: block; max-width: 212px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tableau Prospects : notes en gris (comme partout), documents (trombone) en vert. */
.prospects-table [data-files] { color: #16a34a; }
.prospects-table [data-files]:hover, .prospects-table [data-files][aria-expanded='true'] { background: #e8f7ec; color: #15803d; }
/* Fenêtre des notes (ancrée sous l'indicateur). */
.popover-panel { padding: 0; }
.notes-pop-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.notes-pop-count { font-size: 13px; font-weight: 500; color: var(--muted); }
.notes-pop-list { display: grid; gap: 2px; max-height: 300px; overflow-y: auto; padding: 0 6px; }
/* Liste sans pied (ex. documents d'une vente, sans « Ajouter ») : un peu d'air sous le dernier élément. */
.notes-pop-list:last-child { padding-bottom: 6px; }
.notes-pop-item {
  display: grid; gap: 4px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: none;
  text-align: left; cursor: pointer;
}
.notes-pop-item:hover { background: var(--tint-3); }
.notes-pop-item .note-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden;
  font-size: 14px; line-height: 20px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
.notes-pop-item .note-meta { margin-top: 0; font-size: 12px; }
.notes-pop-foot { margin-top: 6px; padding: 4px; border-top: 1px solid var(--border); }
.files-pop-item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 8px;
  background: none; text-align: left; cursor: pointer;
}
.files-pop-item:hover { background: var(--tint-3); }
.files-pop-item:hover .file-name { text-decoration: underline; }
/* Nom de document cliquable (ouvre l'aperçu). */
.file-open { padding: 0; border: 0; background: none; text-align: left; cursor: pointer; }
.file-open:hover .file-name { text-decoration: underline; }
/* Aperçu d'un document (PDF dans le lecteur du navigateur, images). */
.file-preview { display: block; width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--tint-2); }
.file-preview-image { display: grid; place-items: center; overflow: auto; }
.file-preview-image img { max-width: 100%; max-height: 100%; object-fit: contain; }
.files-pop-item .file-meta { font-size: 12px; }
/* Montant + trombone : un emplacement de largeur fixe garde les montants alignés, avec ou sans document. */
.cell-amount-files { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; }
.files-slot { display: inline-flex; justify-content: flex-start; width: 40px; }
/* Montant suivi du trombone, aligné à gauche (Prospects, Saisie des ventes) : le trombone suit le montant,
   sans espace réservé quand il n'y a pas de devis ; l'en-tête est aligné sur les montants. */
.cell-amount-files.is-left { justify-content: flex-start; }
.cell-amount-files.is-left .files-slot { width: auto; }
.cell-amount-files.is-left .cell-amount { align-items: flex-start; }
.cell-amount { display: inline-flex; flex-direction: column; align-items: flex-end; }
.files-slot .notes-badge { margin: 0; }
.notes-badge .i { flex-shrink: 0; }
/* Nom + e-mail, avec l'indicateur de notes à droite du bloc (centré verticalement). */
.cell-person { display: flex; align-items: center; gap: 8px; }
.cell-person .notes-badge { margin: 0; }
/* Cercle d'initiales devant le commercial (tableau Prospects). */
.cell-owner { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.cell-value { font-weight: 500; color: var(--text); }
.cell-value.is-estimated { font-weight: 400; color: var(--muted); }
/* Panneau d'un lead : titre de section avec une action à droite, et notes. */
.drawer-section-action { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-action {
  padding: 4px 8px; margin-right: -8px; border: 0; border-radius: 6px; background: none;
  font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer;
}
.section-action:hover { background: var(--tint-3); color: var(--text); }
.note-list { display: grid; gap: 10px; }
.lead-note {
  display: grid; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--r-sm); background: var(--tint-2);
  text-align: left; cursor: pointer; transition: background 0.12s;
}
.lead-note:hover { background: var(--tint-4); }
.lead-note:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* Deux lignes au plus, puis « … » ; la note complète s'ouvre au clic. */
.lead-note .note-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: 14px; line-height: 20px; color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere;
}
.note-meta { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
/* Raccourci « supprimer » à droite d'une carte de note (pas sur les notes de reprogrammation) : il apparaît
   au survol de la carte ou au clavier ; sur écran tactile (sans survol), il reste visible. */
.note-item { position: relative; }
.note-item:has(.note-delete) .lead-note { padding-right: 52px; }
.note-item:hover .lead-note { background: var(--tint-4); }
.note-delete {
  position: absolute; top: 50%; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; transform: translateY(-50%);
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.note-delete:hover { background: var(--danger-soft); color: var(--danger); }
.note-delete:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
@media (hover: hover) {
  .note-delete { opacity: 0; }
  .note-item:hover .note-delete, .note-delete:focus-visible { opacity: 1; }
}
/* Action à gauche du pied de fenêtre (ex. Supprimer), les autres restent à droite. */
.modal-foot-start { margin-right: auto; }
.note-empty { font-size: 14px; color: var(--muted); }
/* Copie au survol d'une information (cartes et panneau). */
.copy-btn {
  display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; margin-left: -4px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--muted); opacity: 0; transition: opacity 0.12s, background 0.12s;
}
.is-copyable:hover .copy-btn, .copy-btn:focus-visible, .copy-btn.is-copied { opacity: 1; }
.copy-btn:hover { background: var(--tint-3); color: var(--text); }
.copy-btn.is-copied { color: var(--success); }
.drawer-list li.is-copyable { align-items: center; }
.deal-price.is-missing { color: var(--faint); }
.quote-form { display: grid; gap: 12px; }
.quote-form .field-error:empty { display: none; }
/* Documents importés puis zone « Ajouter un autre document » : un peu d'espace entre chaque élément. */
.quote-file { display: grid; gap: 8px; }
/* Devis signé manquant : la zone de dépôt passe en rouge, comme un champ en erreur. */
.field.has-error .dropzone { border-color: var(--danger, #dc2626); }
.dropzone {
  display: grid; justify-items: center; gap: 4px; padding: 18px 14px; cursor: pointer; text-align: center;
  border: 1.5px dashed var(--border-strong); border-radius: var(--r); background: var(--surface-2);
  transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover { border-color: var(--faint); }
.dropzone.is-over { border-color: var(--focus); background: #f0f6ff; }
.dropzone-icon { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 4px; border-radius: 50%; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow-sm); }
.dropzone-title { font-size: 14px; font-weight: 500; color: var(--text); }
.dropzone-sub { font-size: 12.5px; color: var(--muted); }
.dropzone-sub u { color: var(--text); text-underline-offset: 2px; }
.dropzone-compact { display: flex; align-items: center; justify-items: start; gap: 12px; padding: 10px 12px; text-align: left; }
.dropzone-compact .dropzone-icon { width: 32px; height: 32px; margin-bottom: 0; flex-shrink: 0; }
.dropzone-text { display: grid; gap: 1px; }
[data-quote-file] { display: grid; gap: 8px; }
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px 10px 12px; border: 1px solid var(--border); border-radius: var(--r); }
.file-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: #fef2f2; color: var(--danger); }
.file-text { display: grid; flex: 1; min-width: 0; }
.file-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-meta { font-size: 12.5px; color: var(--muted); }
/* Fenêtre de confirmation de la commission (passage en Acompte) et rappel de la facture dans le panneau. */
.commission-form { display: grid; gap: 12px; margin-top: 16px; }
.commission-box { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--tint-2); }
.commission-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-2); }
.commission-row span + span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.commission-row.is-total { padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; font-weight: 600; color: var(--text); }
.commission-row.is-total:first-child { padding-top: 0; border-top: 0; }
.commission-row.is-strong { font-size: 15px; font-weight: 600; color: var(--text); }
.drawer-status { margin-top: 12px; }
.text-strong { font-weight: 600; color: var(--text); }
.invoice-notes { display: grid; gap: 8px; }
.page-filters-end .i { margin-right: 2px; }
/* Choix d'un client avec recherche (fenêtre d'upsell) : champ qui ouvre une liste filtrable. */
.pick-trigger { position: relative; display: flex; align-items: center; padding-right: 40px; text-align: left; cursor: pointer; }
.pick-value { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; white-space: nowrap; }
.pick-value .pick-meta { overflow: hidden; text-overflow: ellipsis; }
.pick-name { font-size: 15px; font-weight: 500; color: var(--text); white-space: nowrap; }
.pick-meta { font-size: 13px; color: var(--muted); }
.pick-placeholder { color: var(--faint); }
.pick-search { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--muted); }
.pick-input { flex: 1; min-width: 0; height: 24px; border: 0; outline: none; background: none; font: inherit; font-size: 14.5px; color: var(--text); }
.pick-input::placeholder { color: var(--faint); }
.pick-list { display: grid; gap: 2px; max-height: 264px; overflow-y: auto; padding: 6px; }
.pick-option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 8px 10px;
  border: 0; border-radius: 8px; background: none; text-align: left; cursor: pointer;
}
.pick-option.is-active { background: var(--tint-3); }
.pick-text { display: grid; gap: 1px; min-width: 0; }
.pick-option .pick-name { font-size: 14px; }
.pick-option .pick-meta { font-size: 12.5px; }
.pick-check { flex-shrink: 0; color: var(--text); }
.pick-empty { padding: 14px 10px; font-size: 13.5px; color: var(--muted); text-align: center; }
.pick-count { padding: 8px 14px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
/* Ventes additionnelles dans la fiche client. */
.extra-sales-period { margin: -6px 0 12px; font-size: 13.5px; color: var(--muted); }
.sales-period { margin-top: 12px; font-size: 13px; color: var(--muted); }
.extra-sale { padding: 10px 12px; border-radius: var(--r-sm); background: var(--tint-2); }
.extra-sale.is-clickable { cursor: pointer; transition: background-color 0.12s; }
.extra-sale.is-clickable:hover { background: var(--tint-4); }
.extra-sale.is-clickable:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.extra-sale-title { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 500; color: var(--text); }
.extra-sale-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.extra-sale-meta { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.extra-sale-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.extra-sale-file {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 8px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface); font-size: 12.5px; color: var(--text-2); cursor: pointer;
}
.extra-sale-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-sale-file:hover { border-color: var(--border-strong); color: var(--text); }
.extra-sale-add { border-style: dashed; color: var(--muted); }
/* Progression de la commission (détail de la première vente) : 1/2, barre en segments. */
.commission-progress { display: grid; gap: 14px; padding: 14px; border-radius: var(--r-sm); background: var(--tint-2); }
.cp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.cp-total { font-size: 18px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-sub { margin-top: 2px; font-size: 13px; color: var(--muted); }
.cp-count {
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums;
}
.cp-steps { display: flex; gap: 8px; }
.cp-step { display: grid; align-content: start; gap: 4px; min-width: 0; }
.cp-bar { height: 6px; margin-bottom: 4px; border-radius: 999px; background: var(--tint-5); }
.cp-step.is-done .cp-bar { background: var(--text); }
.cp-line { display: grid; gap: 1px; font-size: 13px; }
.cp-label { font-weight: 500; color: var(--text); }
.cp-amount { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-2); }
.cp-status { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
.cp-step.is-done .cp-status .i { color: #16a34a; }
/* Trombone de la page Upsell (vert, comme dans Prospects). */
.files-badge { color: #16a34a; }
.files-badge:hover, .files-badge[aria-expanded='true'] { background: #e8f7ec; color: #15803d; }
.invoice-note {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-radius: var(--r-sm); background: var(--tint-2); font-size: 14px; font-weight: 500; color: var(--text);
}
.invoice-note .i { flex-shrink: 0; color: var(--text-2); }
a.invoice-note:hover, button.invoice-note:hover { background: var(--tint-4); }
button.invoice-note { width: 100%; border: 0; text-align: left; cursor: pointer; }
.invoice-note-amount { flex-shrink: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Factures de la fiche client : type et origine (vente, upsell, nouveau client) à gauche, montant et statut à droite. */
.invoice-item { align-items: center; gap: 12px; }
.invoice-item-text { display: grid; flex: 1; min-width: 0; }
.invoice-item-title { font-size: 14px; font-weight: 500; color: var(--text); }
.invoice-item-meta { font-size: 12.5px; font-weight: 400; color: var(--muted); }
.invoice-item-side { display: grid; justify-items: end; gap: 4px; flex-shrink: 0; }
.section-meta { font-size: 13px; font-weight: 400; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Carte d'une vente (onglet Ventes de la fiche) : ligne type / montant, puis ses pièces jointes. */
.sale-card { flex-direction: column; align-items: stretch; gap: 0; cursor: pointer; }
.sale-card:hover { background: var(--tint-4); }
.sale-card:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
.sale-card-row { display: flex; align-items: center; gap: 12px; }
/* Montant de la vente (bleu) et commission (vert) : mêmes couleurs que dans Saisie des ventes. */
.sale-card-commission { font-size: 12.5px; font-weight: 400; color: var(--muted); white-space: nowrap; }
/* Vente qui n'est plus en cours (client repassé avant « Signé ») : grisée, montant et commission barrés,
   pastille « Annulé » ; elle reste visible dans l'historique. */
.status-pill.is-void { background: var(--tint-3); color: var(--muted); }
.sale-card.is-inactive .invoice-item-title { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.sale-card.is-inactive .invoice-item-title .status-pill { height: 20px; padding: 0 6px; font-size: 12px; }
.sale-card.is-inactive .sale-amount, .sale-card.is-inactive .commission-amount,
.sales-table tr.is-inactive .sale-amount, .sales-table tr.is-inactive .commission-amount {
  color: var(--faint); text-decoration: line-through;
}
.sales-table tr.is-inactive .cell-title, .sales-table tr.is-inactive .cell-plain { color: var(--muted); }
/* Ancienne vente annulée (remplacée par une nouvelle saisie) : carte sans détail au clic. */
.sale-card.is-static { cursor: default; }
.sale-card.is-static:hover { background: var(--tint-2); }
/* Panneau d'un lead : choix de l'étape. */
.drawer-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
.drawer-link:hover { text-decoration-color: currentColor; }
/* Lien vers une autre fiche, dans un panneau (ex. « Fiche client : … »). */
.drawer-link-btn {
  padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px;
}
.drawer-link-btn:hover { text-decoration-color: currentColor; }
.stage-picker { display: grid; gap: 4px; }
.stage-option {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 10px; background: none; font-size: 14px; font-weight: 500; color: var(--text); text-align: left;
}
.stage-option:hover { background: var(--tint-3); }
.stage-option.is-current { border-color: var(--border); background: var(--tint-2); }
.stage-check { margin-left: auto; color: var(--text); }
textarea.input { height: auto; min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.drawer .form-grid { grid-template-columns: 1fr; }
.drawer .span-2 { grid-column: auto; }
.drawer-title-flush { margin-top: 0; padding-right: 44px; }
.drawer-form { margin-top: 24px; }
.drawer-footer-stack { display: grid; gap: 8px; margin-top: 24px; }

/* ——— Palette ⌘K ——— */
.palette-backdrop {
  position: fixed; inset: 0; z-index: 80; display: flex; justify-content: center; align-items: flex-start;
  padding: 12vh 16px 16px; background: rgba(0, 0, 0, 0.28); animation: fade-in 0.15s ease;
}
.palette { width: 100%; max-width: 580px; overflow: hidden; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); animation: pop-in 0.18s var(--ease); }
.palette-search { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 0 6px 0 14px; height: 48px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); }
.palette-search > .i { color: var(--muted); }
.palette-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); }
.palette-search input { flex: 1; border: 0; outline: none; background: none; font-size: 15.5px; }
.palette-tabs { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; }
.ptab {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
  font-size: 14px; font-weight: 500; white-space: nowrap;
}
.ptab:hover { background: var(--surface-2); }
.ptab.is-active { background: var(--text); border-color: var(--text); color: var(--on-strong); }
.ptab-count { font-size: 11px; color: var(--muted); padding: 1px 6px; border-radius: 5px; background: var(--surface-3); }
.ptab.is-active .ptab-count { background: color-mix(in srgb, var(--on-strong) 20%, transparent); color: var(--on-strong); }
.palette-list { max-height: 360px; overflow: auto; padding: 0 12px 12px; }
.palette-section { padding: 12px 8px 6px; font-size: 14px; font-weight: 600; }
.palette-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; border: 0; border-radius: var(--r-sm); background: none; text-align: left; font-size: 14.5px; }
.palette-item.is-active { background: var(--surface-3); }
.pi-icon { display: grid; place-items: center; width: 24px; height: 24px; color: var(--muted); }
.pi-label { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; }
.pi-sub { font-size: 13px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; }
.pi-meta { font-size: 13px; color: var(--faint); }
.palette-empty { padding: 32px; text-align: center; color: var(--muted); font-size: 14px; }
.palette-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.palette-foot span { display: flex; align-items: center; gap: 4px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .only-mobile { display: inline-flex !important; }
  .app { grid-template-columns: 1fr; height: 100dvh; }
  .sidebar {
    position: fixed; z-index: 50; top: 0; bottom: 0; left: 0; width: 280px;
    background: var(--bg); box-shadow: var(--shadow-lg);
    transform: translateX(-105%); transition: transform 0.25s var(--ease);
  }
  .menu-open .sidebar { transform: none; }
  .app.has-drawer { grid-template-columns: 1fr; }
  .drawer { position: fixed; inset: 0; z-index: 55; margin: 0; border-radius: 0; padding: 64px 20px; }
  .drawer-close { right: 16px; top: 16px; }
  .sb-toggle { display: none; }
  .menu-open .scrim { display: block; position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.3); }
  .main { margin: 0; border-radius: 0; box-shadow: none; }
  .main-top { padding: 0 12px; height: 60px; border-bottom: 1px solid var(--border); }
  .content { padding: 28px 16px 120px; }
  .dev-view { right: 16px; bottom: 16px; }
  .main-top:has(.top-title) { height: 60px; padding-top: 0; }
  .main-top.is-bare { height: 60px; }
  .app:has(.table-footer) .dev-view { bottom: 72px; }
  .table-footer { padding: 10px 16px; }
  .app.has-drawer .dev-view { display: none; }

  .ob-top { height: 64px; padding: 0 16px; }
  .ob-main { padding: 24px 16px 48px; }
  .ob-footer-inner { padding: 12px 16px; }
}

@media (max-width: 640px) {
  .hide-sm { display: none; }

  .form-grid, .seat-roles { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .tiles { grid-template-columns: 1fr; }
  .ob-title, .page-title { font-size: 26px; }
  .page-head { flex-direction: column; align-items: flex-start; }
  .dl-row { grid-template-columns: 1fr; gap: 0; }
  .card-pad-lg { padding: 20px; }
  .avatar-upload { align-items: flex-start; }
  .doc-row { flex-wrap: wrap; }
  .doc-row .badge { display: none; }
  .ob-footer .btn-lg { height: 42px; padding: 0 16px; }
  .ob-top .brand-name { display: none; }
}

/* ——— Agenda : la semaine, avec les rendez-vous rangés par jour. ——— */
.content.is-wide:has(.agenda-layout) { display: flex; flex-direction: column; height: 100%; padding: 20px; }
.content.is-wide:has(.agenda-layout) > #page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.agenda-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.agenda-nav { display: flex; align-items: center; gap: 6px; }
.agenda-arrow {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-2); cursor: pointer;
}
.agenda-arrow:hover { border-color: var(--border-strong); color: var(--text); }
.agenda-range { margin-left: 10px; font-size: 14.5px; color: var(--muted); }
.agenda-bar .view-select { margin-left: 0; }
.agenda-layout { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.agenda-week { display: flex; flex: 1; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.agenda-days, .agenda-cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.agenda-days { border-bottom: 1px solid var(--border); }
/* En-tête des jours de hauteur fixe, quelle que soit la semaine. */
.agenda-day { display: grid; justify-items: center; align-content: center; gap: 2px; height: 60px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.agenda-day + .agenda-day, .agenda-col + .agenda-col { border-left: 1px solid var(--border); }
.agenda-date { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.agenda-day.is-today { background: var(--tint-3); color: var(--text); }
.agenda-cols { flex: 1; min-height: 0; overflow-y: auto; }
.agenda-col { display: flex; flex-direction: column; gap: 6px; padding: 8px 6px; min-width: 0; }
.agenda-col.is-today { background: var(--tint-1); }
/* Carte d'un rendez-vous : trait et fond aux couleurs de l'étape du lead. */
.rdv-card {
  display: grid; gap: 1px; width: 100%; padding: 6px 8px; border: 0; border-left: 3px solid var(--c); border-radius: 6px;
  background: color-mix(in srgb, var(--c) 10%, var(--surface)); font: inherit; text-align: left; cursor: pointer; transition: background 0.12s;
}
.rdv-card:hover { background: color-mix(in srgb, var(--c) 18%, var(--surface)); }
.rdv-card:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
.rdv-card.is-past { opacity: 0.6; }
/* Première carte d'un rendez-vous reprogrammé, laissée en grisé à son horaire d'origine (heure barrée). */
.rdv-card.is-moved { --c: var(--border-strong); background: var(--tint-3); }
.rdv-card.is-moved:hover { background: var(--tint-5); }
.rdv-card.is-moved .rdv-time { color: var(--faint); text-decoration: line-through; }
.rdv-card.is-moved .rdv-name { font-weight: 500; color: var(--muted); }
.rdv-card.is-moved .rdv-meta { color: var(--faint); }
.rdv-time { font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--c) 78%, var(--mix-ink)); font-variant-numeric: tabular-nums; }
.rdv-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nom du lead sur deux lignes au plus (colonnes étroites). */
.rdv-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: 13px; line-height: 1.3; font-weight: 600; color: var(--text); }
.rdv-meta { font-size: 12px; color: var(--muted); }
/* Choix de l'affichage : Semaine ou Liste. */
.agenda-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.agenda-tools .btn-square { height: 38px; }
.agenda-mode { flex-wrap: nowrap; gap: 2px; padding: 3px; background: var(--tint-3); }
.agenda-mode .seg { height: 30px; padding: 0 12px; gap: 6px; font-size: 14px; cursor: pointer; }
.agenda-mode .seg:focus-visible { outline: 2px solid #3b82f6; outline-offset: 1px; }
/* Vue Liste : tableau des rendez-vous de la semaine, groupés par jour ; il défile, l'en-tête reste visible. */
.agenda-list { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.agenda-table thead th { position: sticky; top: 0; z-index: 2; background: var(--tint-1); border-bottom-color: var(--border); }
.agenda-table th:first-child, .agenda-table td:first-child { padding-left: 20px; }
.agenda-table th:last-child, .agenda-table td:last-child { padding-right: 20px; }
.agenda-table td { padding-top: 14px; padding-bottom: 14px; }
/* Le lieu prend la place restante et se coupe par « … » ; en dessous de 720 px, le tableau défile. */
.agenda-table { min-width: 720px; }
.agenda-table .col-place { width: 100%; }
.agenda-table td.col-place { max-width: 0; }
.agenda-table .col-place .cell-ellipsis { max-width: none; }
.agenda-table .cell-title { font-size: 14.5px; }
.agenda-table tbody tr.agenda-group td { padding-top: 10px; padding-bottom: 10px; border-top: 1px solid var(--border); background: var(--tint-1); }
.agenda-table tbody tr.agenda-group:first-child td { border-top: 0; }
.agenda-group-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.agenda-group-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface); font-size: 12px; font-weight: 500; color: var(--text-2);
}
.agenda-group-count { margin-left: auto; font-weight: 400; color: var(--muted); }
.list-time { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.list-time::before { content: ''; width: 3px; height: 20px; border-radius: 2px; background: var(--c); }
/* Ancien créneau d'un rendez-vous reprogrammé : ligne en grisé, horaire barré. */
.agenda-table tr.is-moved td, .agenda-table tr.is-moved .cell-title { color: var(--faint); }
.agenda-table tr.is-moved .cell-title { font-weight: 500; }
.agenda-table tr.is-moved .list-time { --c: var(--border-strong); color: var(--faint); font-weight: 400; text-decoration: line-through; }
.agenda-table tr.is-moved .cell-owner, .agenda-table tr.is-moved .stage-pill { opacity: 0.6; }
/* Écran étroit : la semaine défile horizontalement. */
@media (max-width: 1000px) {
  .agenda-week { overflow-x: auto; }
  .agenda-days, .agenda-cols { min-width: 700px; }
}
/* Fenêtre d'un rendez-vous (vue Commercial). */
.lead-sub { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.rdv-view .drawer-section { margin: 24px 0 12px; font-size: 16px; }
.rdv-view .drawer-section:first-child { margin-top: 0; }
.rdv-view .setter-note { margin-top: 12px; }
.modal:has(.rdv-view) .modal-foot .btn .i { margin-right: 4px; }
/* Parcours : reprogrammation (ancien horaire barré, trait orange). */
.journey-old { color: var(--muted); text-decoration: line-through; }
.journey-bar.is-amber { background: #d97706; }
/* Fenêtre « Placer un rendez-vous » : intertitres des parties. */
/* (Seulement les intertitres <p> des fenêtres : les <section class="form-section"> de l'onboarding et des Paramètres
   gardent leur espacement de 36 px.) */
p.form-section { margin-top: 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; color: var(--text); }
/* Offres choisies à l'ajout d'une entreprise (vue Centurion) : une ligne par offre, case à gauche, prix à droite. */
.offer-choices { display: grid; gap: 8px; }
.offer-choice { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.offer-choice:hover { border-color: var(--faint); }
.offer-choice:has(.cb:checked) { border-color: var(--text); }
.offer-choice-name { font-size: 14px; font-weight: 600; color: var(--text); }
.offer-choice-meta { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.field.has-error .offer-choice { border-color: var(--danger, #dc2626); }
@media (max-width: 480px) {
  .offer-choice { flex-wrap: wrap; }
  .offer-choice-meta { margin-left: 26px; flex-basis: 100%; }
}
.appointment-form p.form-section:first-child { margin-top: 0; }

/* Choix d'une date dans un calendrier (ex. reprogrammer un rendez-vous). */
.date-trigger { position: relative; display: flex; align-items: center; gap: 10px; padding-right: 40px; text-align: left; cursor: pointer; }
.date-trigger > .i:first-child { flex-shrink: 0; color: var(--muted); }
.date-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.cal { padding: 12px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-title { font-size: 14.5px; font-weight: 600; color: var(--text); }
.cal-nav { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text-2); cursor: pointer; }
.cal-nav:hover { background: var(--tint-3); color: var(--text); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { display: grid; place-items: center; height: 28px; font-size: 12px; font-weight: 500; color: var(--muted); }
.cal-day {
  display: grid; place-items: center; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-day:hover:not(:disabled) { background: var(--tint-3); }
.cal-day.is-today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-day.is-selected, .cal-day.is-selected:hover { background: var(--text); color: var(--on-strong); box-shadow: none; }
.cal-day:disabled { color: var(--faint); cursor: default; }
/* Choix d'une heure (rendez-vous, disponibilités) : bouton qui affiche l'heure, comme le champ Date, et ouvre la liste
   des heures de 15 en 15 minutes ; l'heure choisie sur fond gris. */
.time-picker { position: relative; display: block; }
.time-trigger { position: relative; display: flex; align-items: center; gap: 10px; padding-right: 40px; text-align: left; cursor: pointer; }
.time-trigger > .i:first-child { flex-shrink: 0; color: var(--muted); }
.time-trigger[aria-expanded="true"] { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus), 0 0 0 3px var(--focus-halo); }
.time-trigger:disabled { cursor: default; opacity: 0.5; }
.time-value { flex: 1; min-width: 0; white-space: nowrap; color: var(--text); font-variant-numeric: tabular-nums; }
.time-value.is-empty { color: var(--faint); }
.popover.time-pop { padding: 4px; }
/* « Reprogrammer le rendez-vous » : un seul libellé « Nouvelle date et heure », l'heure à droite de la date (la date
   garde la place de « Mercredi 30 septembre 2026 ») ; dessous, la durée du rendez-vous et les erreurs. L'un sous l'autre
   sur téléphone. */
.when-row { display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 16px; }
@media (max-width: 640px) {
  .when-row { grid-template-columns: 1fr; gap: 8px; }
}
.time-list { display: flex; flex-direction: column; gap: 1px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.time-option {
  flex-shrink: 0; width: 100%; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: 14px; color: var(--text); text-align: left; font-variant-numeric: tabular-nums; cursor: pointer;
}
.time-option:focus { outline: none; }
.time-option:hover, .time-option:focus-visible { background: var(--tint-3); }
.time-option.is-selected { background: var(--tint-3); font-weight: 600; }
/* Filtre de dates de l'Accueil : bouton « juin 30, 2026 - sept 30, 2026 » (texte normal) et calendrier de plage
   sur deux mois côte à côte, flèches aux extrémités. Début et fin en carré foncé ; entre les deux, une bande grise
   continue sur chaque semaine, arrondie en bout de ligne. Jours des mois voisins en gris. */
.date-range-btn { background: var(--surface); font: inherit; }
/* Cloche « À traiter » (Accueil administrateur) : carrée, à la hauteur du filtre de dates ; point rouge s'il y a des
   actions. La liste s'ouvre dans une petite fenêtre (en-tête, lignes qui défilent au-delà de 420 px). */
.notif-btn { justify-content: center; width: 38px; padding: 0; background: var(--surface); color: var(--text-2); }
.notif-btn:hover, .notif-btn[aria-expanded='true'] { color: var(--text); }
.notif-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border: 2px solid var(--surface); border-radius: 50%; background: var(--danger); box-sizing: content-box; }
/* Notification non vue : la cloche sonne une fois à l'affichage de l'Accueil (oscillation depuis son attache, qui
   s'amortit) ; rien pour qui préfère réduire les animations. */
.notif-btn.is-ringing > .i { transform-origin: 50% 3px; animation: bell-ring 1.1s ease-in-out 0.35s 1; }
@keyframes bell-ring {
  0%, 100% { transform: rotate(0); }
  10% { transform: rotate(16deg); }
  20% { transform: rotate(-14deg); }
  30% { transform: rotate(11deg); }
  40% { transform: rotate(-9deg); }
  50% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  70% { transform: rotate(2deg); }
  80% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  .notif-btn.is-ringing > .i { animation: none; }
}
.todo-pop-head { padding: 14px 16px 10px; }
.todo-pop-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 420px; padding: 0 8px 8px; overflow-y: auto; list-style: none; }
.todo-pop .home-panel-empty { padding: 20px 16px 28px; }
/* Notifications : chacune sur un fond — bleu tant qu'elle est nouvelle, gris ensuite ; « Placé par … · il y a 2 h » en
   petit dessous. La fenêtre suit le nombre de notifications : de 1 à 5 (la 5e ne touche pas le bord), puis, dès la 6e,
   un peu plus haute pour laisser voir le début de la suivante (34 px) et la liste défile ; titre et onglets restent en
   haut. Vide : juste le message. */
.notif-pop .todo-pop-list { display: flex; flex-direction: column; gap: 6px; max-height: min(calc(5 * 78px + 5 * 6px + 34px), calc(100vh - 160px)); }
/* Colonne (et non grille) : une ligne qui se replie emporte son écart (marge négative) et la fenêtre se resserre sans à-coup. */
.notif-pop .notif-li { flex-shrink: 0; }
.notif-item { height: 78px; padding: 10px 12px; background: var(--tint-3); }
.notif-item:hover { background: var(--tint-4); }
.notif-item.is-unread { background: color-mix(in srgb, #2563eb 16%, var(--surface)); }
.notif-item.is-unread:hover { background: color-mix(in srgb, #2563eb 22%, var(--surface)); }
:root[data-theme='dark'] .notif-item.is-unread { background: color-mix(in srgb, #2563eb 30%, var(--surface-2)); }
:root[data-theme='dark'] .notif-item.is-unread:hover { background: color-mix(in srgb, #2563eb 38%, var(--surface-2)); }
.notif-meta { display: block; margin-top: 2px; font-size: 12px; color: var(--faint); }
/* En-tête : titre à gauche, onglets « Tout » / « Archives » à droite. Actions au survol (ou au clavier) d'une
   notification, à droite : le texte s'arrête avant (« … »). */
.notif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.notif-tabs { flex-shrink: 0; padding: 3px; gap: 2px; }
.notif-tabs .seg { height: 28px; padding: 0 10px; font-size: 13px; }
.notif-li { position: relative; }
.notif-actions {
  position: absolute; top: 50%; right: 6px; display: none; gap: 2px; padding: 2px; transform: translateY(-50%);
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
}
:root[data-theme='dark'] .notif-actions { background: var(--surface-3); border-color: var(--border-strong); }
.notif-li:hover .notif-actions, .notif-li:focus-within .notif-actions { display: flex; }
.notif-li:is(:hover, :focus-within):not(.is-leaving, .is-join) .home-row-text { padding-right: 70px; }
/* Nouvel espace : « Rejoindre » (ou « Rejoint ») à droite. */
.notif-item .notif-join, .notif-item .status-pill { flex-shrink: 0; }
.notif-li:is(:hover, :focus-within):not(.is-join) .notif-item .status-pill { visibility: hidden; }
.notif-act { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-2); cursor: pointer; }
.notif-act:hover { background: var(--hover); color: var(--text); }
.notif-act.is-danger:hover { background: var(--danger-soft); color: var(--danger); }
.notif-act:focus-visible { outline: 2px solid #3b82f6; outline-offset: -2px; }
/* Archiver ou supprimer, comme un balayage sur iPhone : la notification glisse vers la gauche (0,4 s) et découvre, de la
   droite vers la gauche, le fond placé dessous — violet pour archiver (ou remettre dans « Tout »), rouge pour supprimer —
   avec son icône blanche à droite ; puis la ligne se replie (hauteur, écart et opacité à zéro) et les suivantes remontent. */
.notif-li.is-leaving { overflow: hidden; border-radius: var(--r-sm); }
.notif-li.is-leaving .notif-item { position: relative; z-index: 1; pointer-events: none; animation: notif-slide 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.notif-li.is-leaving .notif-actions { display: none; }
@keyframes notif-slide { to { transform: translateX(-100%); } }
.notif-swipe {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 24px;
  border-radius: var(--r-sm); color: #fff; pointer-events: none;
}
.notif-swipe.is-delete { background: #e5484d; }
.notif-swipe.is-archive { background: #6e56cf; }
.notif-li.is-collapsing { height: 0 !important; margin-bottom: -6px; opacity: 0; transition: height 0.24s var(--ease), margin 0.24s var(--ease), opacity 0.2s ease; }
.date-range-label { font-weight: 400; color: var(--text); white-space: nowrap; }
.cal-range { position: relative; padding: 16px 16px 14px; }
.cal-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 28px; }
.cal-range .cal-title { display: flex; align-items: center; justify-content: center; height: 30px; margin: 0 0 6px; }
.cal-range .cal-nav { position: absolute; top: 16px; }
.cal-range .cal-nav-prev { left: 16px; }
.cal-range .cal-nav-next { right: 16px; }
.cal-range .cal-grid { gap: 4px 0; }
.cal-rday {
  display: block; height: 36px; padding: 1px 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; color: var(--text); font-variant-numeric: tabular-nums; cursor: pointer;
}
.cal-num { display: grid; place-items: center; width: 34px; height: 34px; margin: 0 auto; border-radius: 8px; transition: background 0.12s; }
.cal-rday:hover:not(:disabled) .cal-num { background: var(--tint-4); }
.cal-rday:focus-visible { outline: none; }
.cal-rday:focus-visible .cal-num { outline: 2px solid #3b82f6; outline-offset: 1px; }
.cal-rday.is-outside { color: var(--faint); }
.cal-rday:disabled { color: var(--faint); opacity: 0.6; cursor: default; }
.cal-rday.is-today .cal-num { font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-rday.is-in-range { background: var(--tint-3); }
.cal-rday.has-band-after:not(.is-row-end) { background: linear-gradient(to right, transparent 50%, var(--tint-3) 50%); }
.cal-rday.has-band-before:not(.is-row-start) { background: linear-gradient(to left, transparent 50%, var(--tint-3) 50%); }
.cal-rday.is-in-range.is-row-start { border-radius: 8px 0 0 8px; }
.cal-rday.is-in-range.is-row-end { border-radius: 0 8px 8px 0; }
.cal-rday.is-start .cal-num, .cal-rday.is-end .cal-num, .cal-rday.is-start:hover .cal-num, .cal-rday.is-end:hover .cal-num { background: var(--text); color: var(--on-strong); box-shadow: none; }