:root {
  --bg: #f5f7fb;
  --surface: #ffffff;
  --surface-soft: #eef2f7;
  --text: #132033;
  --muted: #65748b;
  --border: #d9e1ec;
  --primary: #153b63;
  --primary-dark: #0e2b49;
  --accent: #c69b5b;
  --accent-soft: #f6ead9;
  --success: #0f7b55;
  --danger: #b42318;
  --shadow: 0 18px 50px rgba(19, 32, 51, 0.12);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }

.container {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.site-header,
.public-header {
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(14px);
}

.header-inner, .footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(145deg, var(--primary), var(--primary-dark));
  color: white;
  font-size: 14px;
  box-shadow: 0 10px 20px rgba(21,59,99,0.22);
}

.public-label {
  background: var(--accent-soft);
  color: #8b5a18;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--muted);
  font-size: 15px;
}

.nav-button {
  color: white;
  background: var(--primary);
  padding: 10px 16px;
  border-radius: 999px;
}

.hero {
  padding: 86px 0 70px;
  background:
    radial-gradient(circle at top left, rgba(198,155,91,0.18), transparent 34%),
    linear-gradient(180deg, #ffffff, var(--bg));
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 54px;
  align-items: center;
}

.eyebrow {
  color: var(--accent);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  margin: 0 0 10px;
}

h1, h2, h3, p { margin-top: 0; }

.hero h1 {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin-bottom: 24px;
}

.hero-text {
  font-size: 19px;
  color: var(--muted);
  max-width: 650px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 46px;
  padding: 12px 18px;
  border-radius: 12px;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.16s ease, background 0.16s ease;
}

.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

.button-primary {
  background: var(--primary);
  color: white;
  box-shadow: 0 12px 25px rgba(21,59,99,0.18);
}

.button-primary:hover { background: var(--primary-dark); }

.button-secondary {
  background: white;
  color: var(--primary);
  border-color: var(--border);
}

.button-danger {
  background: #fff1f0;
  border-color: #ffd1ce;
  color: var(--danger);
}

.button-full { width: 100%; }

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.trust-row span {
  background: white;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.mock-window {
  background: white;
  border-radius: 26px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
  overflow: hidden;
}

.mock-window-top {
  height: 48px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 18px;
}

.mock-window-top span {
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: #cbd5e1;
}

.mock-content { padding: 30px; }
.mock-label { color: var(--muted); margin-bottom: 5px; }
.mock-content h2 { font-size: 28px; margin-bottom: 22px; }

.stats-grid, .dashboard-grid, .feature-grid {
  display: grid;
  gap: 16px;
}

.stats-grid {
  grid-template-columns: repeat(2, 1fr);
  margin-bottom: 22px;
}

.stats-grid div, .stat-card, .feature-card, .empty-panel, .form-panel, .pricing-card, .auth-card, .panel, .property-card, .public-property-card, .public-form-card, .success-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stats-grid div { padding: 16px; }
.stats-grid strong { display: block; color: var(--primary); font-size: 28px; }
.stats-grid span, .stat-card span, .muted { color: var(--muted); }

.lead-preview, .report-preview {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-top: 14px;
}

.lead-preview {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.lead-preview span {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.badge {
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 13px;
}

.badge-hot { background: var(--accent-soft); color: #8b5a18; }
.report-preview { background: #f8fafc; }
.report-preview p { color: var(--muted); margin-bottom: 0; }

.section { padding: 74px 0; }
.section-heading { max-width: 680px; margin-bottom: 28px; }

.section-heading h2, .pricing-card h2 {
  font-size: clamp(30px, 4vw, 46px);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.feature-grid { grid-template-columns: repeat(4, 1fr); }
.feature-card { padding: 24px; }
.feature-card h3 { margin-bottom: 10px; }
.feature-card p { color: var(--muted); margin-bottom: 0; }

.pricing-section { padding-top: 20px; }

.pricing-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  padding: 32px;
  box-shadow: var(--shadow);
}

.price-box {
  min-width: 260px;
  background: var(--surface-soft);
  border-radius: 18px;
  padding: 24px;
  text-align: center;
}

.price {
  display: block;
  color: var(--primary);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.05em;
}

.price-note {
  display: block;
  color: var(--muted);
  margin-bottom: 18px;
}

.site-footer {
  border-top: 1px solid var(--border);
  background: white;
  color: var(--muted);
}

.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top, rgba(21,59,99,0.16), transparent 34%),
    var(--bg);
}

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.auth-card {
  width: min(460px, 100%);
  padding: 34px;
  box-shadow: var(--shadow);
}

.auth-card-wide { width: min(760px, 100%); }
.auth-brand { margin-bottom: 28px; }

.auth-card h1 {
  font-size: 34px;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
}

.form {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

.form-grid { grid-template-columns: repeat(2, 1fr); }
.form-full { grid-column: 1 / -1; }

/* Séparateur visuel avant la section « Ce qu'il recherche » du formulaire
   d'ajout d'un prospect sans visite — voir sql/prospects-sans-visite.sql. */
.standalone-prospect-criteria-heading {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}

.standalone-prospect-criteria-heading h3 {
  margin-bottom: 2px;
}

label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-weight: 700;
  font-size: 14px;
}

.checkbox-label {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px;
  font-weight: 600;
}

.checkbox-label input {
  width: auto;
  margin-top: 4px;
}

.consent-box {
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

input, select, textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 13px;
  font: inherit;
  color: var(--text);
  background: white;
}

input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(21,59,99,0.12);
  border-color: var(--primary);
}

.auth-divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.center { text-align: center; }

.small-note {
  color: var(--muted);
  font-size: 13px;
  margin-top: 14px;
}

.app-page {
  display: grid;
  grid-template-columns: 270px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: #0f2338;
  color: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.sidebar .brand-mark { background: white; color: var(--primary); }

.sidebar-nav {
  display: grid;
  gap: 8px;
}

.sidebar-nav a {
  color: rgba(255,255,255,0.76);
  padding: 12px 14px;
  border-radius: 12px;
}

.sidebar-nav a.active, .sidebar-nav a:hover {
  background: rgba(255,255,255,0.1);
  color: white;
}

.sidebar-logout {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: white;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-weight: 700;
}

.sidebar-logout:hover { background: rgba(255,255,255,0.14); }

.app-main {
  padding: 34px;
  min-width: 0;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

.app-header h1 {
  font-size: 38px;
  letter-spacing: -0.04em;
  margin-bottom: 0;
}

.dashboard-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 24px;
}

.stat-card { padding: 20px; }

.stat-card strong {
  display: block;
  color: var(--primary);
  font-size: 36px;
  margin-top: 8px;
}

.empty-panel, .form-panel, .panel { padding: 30px; }
.panel-spaced { margin-top: 24px; }
.inline-empty { grid-column: 1 / -1; }

.empty-panel h2, .panel h2 {
  font-size: 26px;
  margin-bottom: 8px;
}

.empty-panel p { color: var(--muted); }

.panel-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.property-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}

.property-card { overflow: hidden; }
.property-card-body { padding: 20px; }
.property-card h3 { margin-bottom: 8px; }

/* Statut de mise en marché (Active / Vendue / Retirée du marché) — voir
   sql/statut-propriete-vendue.sql. Le badge reste caché pour "active"
   (formatPropertyStatus côté JS ne le génère pas), il n'apparaît donc
   que pour signaler une exception à l'état normal d'une fiche. */
.property-status-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 8px;
}

.property-status-badge-vendu { background: var(--danger); }
.property-status-badge-retire { background: var(--muted); }

.property-image {
  width: 100%;
  height: 175px;
  object-fit: cover;
  display: block;
  background: var(--surface-soft);
}

.detail-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 28px;
}

.detail-image, .image-placeholder {
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface-soft);
}

.detail-image {
  height: 360px;
  object-fit: cover;
  display: block;
}

.image-placeholder {
  height: 360px;
  display: grid;
  place-items: center;
  color: var(--muted);
}

.info-list {
  display: grid;
  gap: 12px;
  margin: 22px 0;
}

.info-list div {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.info-list span { color: var(--muted); }

/* Historique des suivis (fiche prospect) — courriels envoyés + actions de
   suivi (statut, note, planification) combinés en une seule chronologie. */
.email-history {
  display: grid;
  gap: 10px;
  margin: 14px 0 22px;
}

.email-history-item {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
}

.email-history-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.email-history-content {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.email-history-content strong { font-size: 14px; }
.email-history-content span { font-size: 13px; }

.email-type-badge {
  border-radius: 8px;
  padding: 6px 10px;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  background: var(--surface-soft);
  color: var(--muted);
}

/* ⚠ .email-history-item et .email-type-badge sont REDÉFINIS dans
   upgrade-v27.css, chargé après cette feuille sur les pages qui affichent
   une chronologie (journal d'activité, fiche prospect). Toute règle écrite
   ici pour ces deux sélecteurs est donc silencieusement écrasée. La mise en
   page mobile de la pastille vit dans upgrade-v27.css, section Responsive. */

.email-type-followup, .event-type-statut { background: var(--accent-soft); color: #8b5a18; }
.email-type-invitation { background: #e3f0ff; color: #1d4ed8; }
.email-type-seller_report { background: #e6f6ee; color: var(--success); }
.event-type-note { background: #eef2f7; color: var(--text); }
.event-type-planification { background: #fdeee9; color: var(--danger); }

.compact-info-list {
  margin: 18px 0;
}

.compact-info-list div {
  padding: 12px;
}

.qr-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  align-items: center;
}

.qr-card {
  width: 260px;
  height: 260px;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
}

#public-url-input {
  margin-bottom: 14px;
}

.public-visit-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at top right, rgba(198,155,91,0.18), transparent 34%),
    var(--bg);
}

.public-main {
  padding: 42px 0 70px;
}

.public-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 28px;
  align-items: start;
}

.public-property-card,
.public-form-card {
  overflow: hidden;
  box-shadow: var(--shadow);
}

.public-property-card {
  position: sticky;
  top: 98px;
}

.public-property-body,
.public-form-card {
  padding: 28px;
}

.public-property-image {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
  background: var(--surface-soft);
}

.public-form-card h1 {
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin-bottom: 12px;
}

.broker-box {
  margin-top: 18px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}

.broker-box p {
  margin-bottom: 4px;
}

.success-panel {
  padding: 24px;
  background: #f0fdf4;
  border-color: #bbf7d0;
  margin-top: 22px;
}

.success-panel h2 {
  color: var(--success);
}

@media print {
  .sidebar,
  .app-header .header-actions,
  .panel-header button,
  .button-row {
    display: none !important;
  }

  .app-page { display: block; }
  .app-main { padding: 0; }
  .panel { border: none; box-shadow: none; }
}

@media (max-width: 1100px) {
  .property-grid { grid-template-columns: repeat(2, 1fr); }
  .public-layout { grid-template-columns: 1fr; }
  .public-property-card { position: static; }
}

@media (max-width: 920px) {
  .hero-grid,
  .feature-grid,
  .pricing-card,
  .dashboard-grid,
  .app-page,
  .detail-grid,
  .qr-layout {
    grid-template-columns: 1fr;
  }

  .pricing-card { display: grid; }
  .sidebar { position: static; }

  .app-header, .panel-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .main-nav { display: none; }
}

@media (max-width: 640px) {
  .form-grid, .stats-grid, .property-grid {
    grid-template-columns: 1fr;
  }

  .hero { padding-top: 56px; }
  .hero h1 { font-size: 40px; }
  .auth-card { padding: 24px; }
  .app-main { padding: 22px; }
  .public-form-card, .public-property-body { padding: 22px; }
  .info-list div { flex-direction: column; }
  .qr-card { width: 100%; }
}


/* Étape 11B — Visiteurs / leads */

.lead-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}

.lead-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.lead-card-top {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.lead-card h3 {
  margin-bottom: 6px;
}

.lead-score {
  min-width: 82px;
  min-height: 82px;
  border-radius: 18px;
  background: var(--accent-soft);
  color: #8b5a18;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 8px;
}

.lead-score strong {
  display: block;
  font-size: 30px;
  line-height: 1;
}

.lead-score span {
  color: #8b5a18;
  font-size: 12px;
  font-weight: 800;
}

.lead-score-large {
  width: 150px;
  height: 150px;
  margin-bottom: 18px;
}

.lead-score-large strong {
  font-size: 66px;
}

/* Même choix que sur mobile : seul le chiffre reste visible dans le gros
   carré, le "/100" est retiré plutôt que repositionné. Comme .lead-score
   utilise display:grid; place-items:center, ne garder que <strong> dans
   le flux suffit à le centrer parfaitement dans le carré. */
.lead-score-large span {
  display: none;
}

.lead-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0;
}

.lead-meta span {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 700;
}

.lead-action {
  margin: 14px 0;
}

.lead-summary-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  padding: 24px;
}

.recommendation-box {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 16px;
  color: var(--text);
}

@media (max-width: 920px) {
  .lead-grid {
    grid-template-columns: 1fr;
  }
}


/* Étape 12 — Relances automatiques */

.followup-box {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
  margin-bottom: 22px;
}

.followup-box textarea {
  min-height: 260px;
  resize: vertical;
  background: white;
  line-height: 1.55;
}

.followup-actions {
  margin-top: 12px;
}


/* Étape 13 — Rapport vendeur */

.seller-report-stats {
  margin-bottom: 24px;
}

.seller-report {
  display: grid;
  gap: 26px;
}

.report-section {
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}

.report-section:last-child {
  border-bottom: 0;
}

.report-section h2 {
  margin-bottom: 12px;
}

.report-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.report-metric-grid div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px;
}

.report-metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.report-metric-grid strong {
  display: block;
  color: var(--primary);
  font-size: 28px;
  margin-top: 6px;
}

.report-action-list {
  margin: 0;
  padding-left: 22px;
}

.report-action-list li {
  margin-bottom: 8px;
}

.report-lead-list {
  display: grid;
  gap: 10px;
}

.report-lead-row {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.report-lead-row span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.report-textarea {
  width: 100%;
  min-height: 430px;
  resize: vertical;
  line-height: 1.55;
  background: white;
}

@media (max-width: 920px) {
  .report-metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-lead-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media print {
  .sidebar,
  .app-header .header-actions,
  #seller-report-textarea,
  #seller-report-copy-message {
    display: none !important;
  }

  .app-page {
    display: block;
  }

  .app-main {
    padding: 0;
  }

  .panel,
  .stat-card {
    box-shadow: none;
  }
}


/* Étape 14 — Stabilisation bêta */

.app-error-box {
  border: 1px solid rgba(180, 35, 24, 0.25);
  background: #fff4f2;
  color: var(--danger);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 20px;
}

.app-error-box p {
  color: var(--text);
  margin: 8px 0 14px;
}

/* Cartes de statistiques compactes — Paramètres (4 bulles), Prospects
   (4 bulles) et Relances automatiques (2 bulles). Même traitement partout
   pour rester cohérent visuellement d'une page à l'autre. */
.settings-status-grid,
#visitors-stats-section,
#relances-stats-section {
  margin-bottom: 24px;
  gap: 10px;
}

.settings-status-grid .stat-card,
#visitors-stats-section .stat-card,
#relances-stats-section .stat-card {
  padding: 10px 14px;
  min-height: auto;
}

.settings-status-grid .stat-card span,
#visitors-stats-section .stat-card span,
#relances-stats-section .stat-card span {
  font-size: 11px;
  line-height: 1.1;
}

.settings-status-grid .stat-card strong,
#visitors-stats-section .stat-card strong,
#relances-stats-section .stat-card strong {
  font-size: 20px;
  margin-top: 2px;
  line-height: 1;
}

.beta-note {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 16px;
  color: var(--text);
}

.field-note,
.small-note {
  color: var(--muted);
  font-size: 13px;
}

.checklist {
  display: grid;
  gap: 12px;
}

.checklist label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 13px 14px;
  font-weight: 700;
}

.checklist input {
  margin-top: 4px;
  width: 18px;
  height: 18px;
}

.hidden-textarea {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

.rule-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.rule-grid > div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 18px;
}

.form-field input[readonly] {
  background: #eef2f7;
  color: var(--muted);
}

@media (max-width: 920px) {
  .rule-grid {
    grid-template-columns: 1fr;
  }

  .app-header {
    align-items: flex-start;
  }
}

@media (max-width: 760px) {
  .app-page {
    display: block;
  }

  .sidebar {
    position: static;
    width: 100%;
    min-height: auto;
  }

  .sidebar-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .app-main {
    padding: 22px 16px;
  }

  .dashboard-grid,
  .property-grid,
  .lead-grid {
    grid-template-columns: 1fr;
  }

  .header-actions,
  .button-row,
  .form-actions {
    width: 100%;
  }

  .header-actions .button,
  .button-row .button,
  .form-actions .button {
    width: 100%;
  }
}


/* Étape 15 — Démonstration / bêta testeur */

.landing-page {
  background: radial-gradient(circle at top left, rgba(54, 92, 72, 0.16), transparent 34%),
              linear-gradient(135deg, #f7f3ea 0%, #ffffff 52%, #eef4f1 100%);
  color: var(--text);
  min-height: 100vh;
}

.landing-nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.landing-nav nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.landing-nav nav a:not(.button) {
  color: var(--primary);
  font-weight: 800;
}

.landing-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 24px 48px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 44px;
  align-items: center;
}

.landing-hero h1 {
  font-size: clamp(42px, 5vw, 70px);
  line-height: 0.96;
  letter-spacing: -0.05em;
  margin: 12px 0 22px;
}

.landing-subtitle {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
  max-width: 680px;
}

.landing-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 30px;
}

.landing-demo-card {
  border: 1px solid var(--border);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow);
  padding: 28px;
}

.demo-window-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
}

.demo-window-bar span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--border);
}

.landing-flow {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.landing-flow span {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 14px 16px;
  font-weight: 900;
}

.landing-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 52px 24px;
}

.landing-section-header {
  max-width: 720px;
  margin-bottom: 26px;
}

.landing-section-header h2,
.landing-cta h2 {
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.landing-feature-grid,
.demo-data-grid,
.feedback-question-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.landing-feature-grid article,
.demo-data-grid article,
.feedback-question-grid article {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  padding: 22px;
}

.landing-feature-grid article h3,
.demo-data-grid article h3 {
  margin-bottom: 8px;
}

.landing-feature-grid article p,
.demo-data-grid article p,
.feedback-question-grid article p {
  color: var(--muted);
  line-height: 1.55;
}

.landing-cta {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 30px;
  background: white;
  margin-bottom: 52px;
}

.landing-cta p {
  color: var(--muted);
  margin: 14px auto 24px;
  max-width: 680px;
}

.landing-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px 38px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  color: var(--muted);
  font-size: 13px;
}

.timeline-list {
  display: grid;
  gap: 14px;
}

.timeline-list > div {
  display: grid;
  grid-template-columns: 46px 1fr;
  column-gap: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
}

.timeline-list span {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--primary);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 900;
  grid-row: span 2;
}

.timeline-list p {
  color: var(--muted);
  margin-top: 4px;
}

@media (max-width: 980px) {
  .landing-hero,
  .landing-feature-grid,
  .demo-data-grid,
  .feedback-question-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    padding-top: 34px;
  }
}

@media (max-width: 680px) {
  .landing-nav,
  .landing-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-nav nav,
  .landing-actions {
    width: 100%;
  }

  .landing-nav nav .button,
  .landing-actions .button {
    width: 100%;
  }

  .timeline-list > div {
    grid-template-columns: 1fr;
  }

  .timeline-list span {
    margin-bottom: 10px;
  }
}


/* Étape 16 — Gestion de toutes les visites */

.visit-scope-note {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
  color: var(--muted);
}

.sidebar-nav a[href="./welcome.html"] {
  border-style: dashed;
}


/* Étape 16B — Correctif menu / cartes visites */

.sidebar-nav a.active {
  font-weight: 900;
}



/* Étape 17 — Formulaire adapté au type de visite */

.visit-context-panel {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 14px 16px;
  margin: 16px 0;
}

.visit-context-panel strong {
  display: block;
  color: var(--primary);
  margin-bottom: 4px;
}

.visit-context-panel p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.public-form-card [hidden],
.form [hidden] {
  display: none !important;
}

.public-form-card h1 {
  transition: opacity 0.15s ease;
}


/* Étape 18 — Pipeline de suivi des leads */

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(210px, 1fr));
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.pipeline-column {
  min-width: 210px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #f8fafc;
  padding: 14px;
}

.pipeline-column-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.pipeline-column-header h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

.pipeline-column-header strong {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--primary);
}

.pipeline-column-body {
  display: grid;
  gap: 12px;
}

.pipeline-empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px;
  background: white;
}

.pipeline-lead-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(20, 40, 30, 0.04);
}

.pipeline-lead-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.pipeline-lead-top strong {
  display: block;
  color: var(--text);
}

.pipeline-lead-top span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.pipeline-lead-top a {
  color: var(--primary);
  font-weight: 900;
  font-size: 13px;
}

.pipeline-actions,
.visitor-status-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.pipeline-action-button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary);
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.pipeline-action-button:hover {
  border-color: var(--primary);
  background: #f8fafc;
}

.pipeline-action-button.is-active,
.pipeline-action-button:disabled {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  cursor: default;
}

.pipeline-detail-actions {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
  margin-top: 18px;
}

.pipeline-detail-actions h3 {
  margin-bottom: 10px;
}

.followup-note-form {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
  margin-bottom: 22px;
}

.lead-grid-compact {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1180px) {
  .lead-grid-compact {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .lead-grid-compact {
    grid-template-columns: 1fr;
  }

  .pipeline-board {
    grid-template-columns: repeat(7, 240px);
  }
}


/* Étape 19 — Tâches et rappels de suivi */

.followup-tasks-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.task-column {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #f8fafc;
  padding: 16px;
}

.task-column-danger {
  background: #fff7f5;
}

.task-column-warning {
  background: #fffbea;
}

.task-column-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}

.task-column-header h3 {
  margin: 0;
}

.task-column-header strong {
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: white;
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--primary);
}

.task-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  padding: 14px;
  margin-bottom: 12px;
}

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

.task-card span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.task-card p {
  margin: 8px 0;
}

.task-empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 14px;
  background: white;
}

.task-pill {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fffbea;
  color: #8b5a18;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
  display: inline-block;
  margin: 8px 0 0;
}

.compact-form-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 980px) {
  .followup-tasks-board,
  .compact-form-grid {
    grid-template-columns: 1fr;
  }
}


/* Étape 20 — Tableau de bord intelligent */

.smart-dashboard-header {
  align-items: flex-start;
}

.smart-stats-grid .stat-card-alert strong {
  color: #b42318;
}

.smart-priority-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  margin-bottom: 22px;
}

.priority-panel {
  min-height: 100%;
}

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

.priority-item {
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.priority-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(20, 40, 30, 0.08);
  border-color: var(--primary);
}

.priority-item strong,
.priority-item span {
  display: block;
}

.priority-item span {
  color: var(--muted);
  margin-top: 5px;
}

.priority-danger {
  background: #fff7f5;
}

.priority-warning {
  background: #fffbea;
}

.priority-success {
  background: #f3fbf6;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.quick-action-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
  color: var(--text);
  text-decoration: none;
}

.quick-action-card:hover {
  border-color: var(--primary);
  background: #ffffff;
}

.quick-action-card strong,
.quick-action-card span {
  display: block;
}

.quick-action-card span {
  margin-top: 5px;
  color: var(--muted);
}

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

.dashboard-task-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #ffffff;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.dashboard-task-card h3 {
  margin: 3px 0 8px;
}

.priority-level-haute,
.priority-level-urgente {
  border-color: #f7c7bc;
  background: #fff7f5;
}

.overdue-panel {
  border-color: #f7c7bc;
}

.dashboard-two-columns {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.performance-summary {
  display: grid;
  gap: 16px;
}

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

.performance-grid div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px;
}

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

.performance-grid span {
  color: var(--muted);
  font-size: 13px;
}

.performance-grid strong {
  margin-top: 4px;
  color: var(--primary);
  font-size: 22px;
}

.dashboard-recommendation {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fffbea;
  padding: 16px;
}

.dashboard-recommendation p {
  margin: 6px 0 0;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .smart-priority-grid,
  .dashboard-two-columns {
    grid-template-columns: 1fr;
  }

  .dashboard-task-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .dashboard-task-grid,
  .performance-grid {
    grid-template-columns: 1fr;
  }
}


/* Étape 21 — Fiche propriété intelligente */

.property-smart-header {
  align-items: flex-start;
}

.property-kpi-grid {
  margin-bottom: 22px;
}

.property-insight-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 20px;
}

.property-hero-grid .detail-content h2 {
  margin-bottom: 6px;
}

.property-status-control {
  margin: 14px 0 4px;
}

.property-status-label {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.property-alert-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fffbea;
  padding: 16px;
  margin: 16px 0;
}

/* Bannière « Prospects en attente correspondants » sur la fiche propriété —
   voir sql/prospects-sans-visite.sql. Même teinte que .property-alert-card
   pour rester cohérent avec le langage visuel existant des suggestions,
   appliqué ici à un panneau complet plutôt qu'à une simple carte. */
.property-alert-panel {
  background: #fffbea;
  border-color: #f3e3ad;
}

.property-alert-card strong,
.property-alert-card p {
  display: block;
}

.property-alert-card p {
  margin: 6px 0 0;
  color: var(--muted);
}

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

.property-summary-list div {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
}

.property-summary-list span,
.property-summary-list strong {
  display: block;
}

.property-summary-list span {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 5px;
}

.property-summary-list strong {
  color: var(--primary);
  font-size: 18px;
}

.property-summary-list p {
  margin: 6px 0 0;
  color: var(--muted);
}

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

.property-report-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
}

.property-report-card h3 {
  margin: 4px 0 6px;
}

@media (max-width: 1100px) {
  .property-insight-grid {
    grid-template-columns: 1fr;
  }
}


/* Étape 21A — MLS / Centris assisté */

.centris-assist-panel {
  margin-bottom: 20px;
}

.assist-panel {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fffbea;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

.assist-panel h2 {
  margin: 4px 0 6px;
}

.assist-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.assist-steps span {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary);
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
}

.form-section-title {
  border-top: 1px solid var(--border);
  padding-top: 18px;
  margin-top: 8px;
}

.form-section-title h2 {
  margin-bottom: 4px;
}

@media (max-width: 760px) {
  .assist-panel {
    align-items: flex-start;
    flex-direction: column;
  }

  .assist-steps {
    justify-content: flex-start;
  }
}


/* Étape 22 — Recherche et filtres avancés */

.filter-panel {
  margin-bottom: 22px;
  background: #f8fafc;
}

.filters-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
}

.filters-grid .form-full {
  grid-column: span 2;
}

.filters-grid label {
  margin: 0;
}

.filters-grid input,
.filters-grid select {
  min-height: 44px;
}

@media (max-width: 1180px) {
  .filters-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .filters-grid .form-full {
    grid-column: span 2;
  }
}

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

  .filters-grid .form-full {
    grid-column: span 1;
  }
}


/* Correctif 22C — bouton recherche filtres */

.filter-submit-button {
  min-height: 44px;
  align-self: end;
}


/* Étape 23 — Profil courtier professionnel */

.broker-preview-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #f8fafc;
  padding: 18px;
  display: grid;
  gap: 16px;
}

.broker-preview-main {
  display: flex;
  gap: 14px;
  align-items: center;
}

.broker-avatar {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: var(--primary);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 20px;
  flex: 0 0 auto;
}

.broker-preview-main h3 {
  margin: 4px 0 2px;
}

.broker-preview-contact,
.broker-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.broker-preview-contact a,
.broker-preview-contact span,
.broker-contact-links a {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #ffffff;
  color: var(--primary);
  padding: 8px 12px;
  font-weight: 900;
  font-size: 13px;
  text-decoration: none;
}

.broker-preview-signature {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.broker-preview-signature pre {
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--muted);
  margin: 8px 0 0;
}

.broker-box-enhanced .broker-contact-links {
  margin-top: 12px;
}

.broker-report-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
  display: grid;
  gap: 4px;
}

.broker-report-card strong {
  color: var(--primary);
}

.broker-report-card span {
  color: var(--muted);
}


/* Étape 24 — Tableau de bord proactif */

.dashboard-version-note {
  margin-top: 6px;
}

.smart-stats-grid {
  grid-template-columns: repeat(5, 1fr);
}

.command-center-panel {
  margin-bottom: 22px;
  border-color: rgba(44, 94, 75, 0.22);
}

.command-center {
  display: grid;
  gap: 16px;
}

.command-primary {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.command-primary h3 {
  margin: 4px 0 6px;
}

.command-primary p {
  margin: 0;
  color: var(--muted);
}

.command-danger {
  background: #fff7f5;
  border-color: #f7c7bc;
}

.command-warning {
  background: #fffbea;
}

.command-success {
  background: #f3fbf6;
}

.command-signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.command-signal {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  padding: 14px;
  text-decoration: none;
  color: var(--text);
}

.command-signal:hover {
  border-color: var(--primary);
}

.command-signal strong,
.command-signal span {
  display: block;
}

.command-signal strong {
  color: var(--primary);
  font-size: 24px;
}

.command-signal span {
  color: var(--muted);
  margin-top: 4px;
}

.portfolio-health-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.portfolio-health-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #f8fafc;
  padding: 16px;
}

.portfolio-health-item span,
.portfolio-health-item strong,
.portfolio-health-item p {
  display: block;
}

.portfolio-health-item span {
  color: var(--muted);
  font-size: 13px;
}

.portfolio-health-item strong {
  color: var(--primary);
  font-size: 26px;
  margin: 4px 0;
}

.portfolio-health-item p {
  color: var(--muted);
  margin: 0;
}

.health-warning {
  background: #fffbea;
}

.health-success {
  background: #f3fbf6;
}

.dashboard-mini-list,
.dashboard-prep-grid {
  display: grid;
  gap: 12px;
}

.dashboard-mini-card,
.visit-prep-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
}

.dashboard-mini-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.dashboard-mini-card h3,
.visit-prep-card h3 {
  margin: 4px 0 6px;
}

.visit-prep-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}

.visit-prep-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

@media (max-width: 1180px) {
  .smart-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .portfolio-health-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .smart-stats-grid,
  .command-signals {
    grid-template-columns: 1fr;
  }

  .command-primary,
  .dashboard-mini-card,
  .visit-prep-card {
    display: grid;
    grid-template-columns: 1fr;
  }

  .visit-prep-actions {
    justify-content: flex-start;
  }
}


/* Étape 24A — Filtres repliés */

.filter-panel {
  padding: 16px;
}

.filter-compact-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.filter-panel-collapsed .filters-grid {
  display: none;
}

.filter-panel:not(.filter-panel-collapsed) .filters-grid {
  margin-top: 16px;
}

.filter-panel .button[aria-expanded="true"]::after {
  content: " ▲";
  font-size: 11px;
}

.filter-panel .button[aria-expanded="false"]::after {
  content: " ▼";
  font-size: 11px;
}

@media (max-width: 720px) {
  .filter-compact-header {
    align-items: stretch;
    flex-direction: column;
  }

  .filter-compact-header .button {
    width: 100%;
  }
}


/* Étape 24B — Masquage réel des filtres */

form.filters-grid[hidden],
.filter-panel-collapsed > form.filters-grid,
.filter-panel-collapsed .filters-grid {
  display: none !important;
}

.filter-panel:not(.filter-panel-collapsed) > form.filters-grid:not([hidden]) {
  display: grid !important;
}


/* Étape 24C — Icône loupe recherche */

.search-toggle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.search-toggle-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 2.5a6.25 6.25 0 0 1 4.94 10.08l3.36 3.36a.78.78 0 1 1-1.1 1.1l-3.36-3.35A6.25 6.25 0 1 1 8.75 2.5Zm0 1.56a4.69 4.69 0 1 0 0 9.38 4.69 4.69 0 0 0 0-9.38Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.75 2.5a6.25 6.25 0 0 1 4.94 10.08l3.36 3.36a.78.78 0 1 1-1.1 1.1l-3.36-3.35A6.25 6.25 0 1 1 8.75 2.5Zm0 1.56a4.69 4.69 0 1 0 0 9.38 4.69 4.69 0 0 0 0-9.38Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}


/* Étape 25 — Navigation mobile + cartes compactes du tableau de bord */

.mobile-app-bar,
.mobile-menu-backdrop {
  display: none;
}

.mobile-menu-button {
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--primary);
  color: #ffffff;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 10px;
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 35, 56, 0.16);
}

.mobile-menu-button span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  margin: 2px 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.mobile-menu-open .mobile-menu-button span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.mobile-menu-open .mobile-menu-button span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-open .mobile-menu-button span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.compact-dashboard-stats {
  gap: 12px;
  margin-bottom: 18px;
}

.compact-dashboard-stats .stat-card {
  padding: 14px 16px;
  min-height: auto;
}

.compact-dashboard-stats .stat-card span {
  font-size: 12px;
  line-height: 1.15;
}

.compact-dashboard-stats .stat-card strong {
  font-size: 28px;
  margin-top: 4px;
  line-height: 1;
}

.stat-card-clickable {
  display: block;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.stat-card-clickable:hover,
.stat-card-clickable:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(20, 40, 30, 0.09);
  border-color: var(--primary);
  outline: none;
}

.stat-card-clickable::after {
  content: "Voir →";
  display: inline-block;
  margin-top: 8px;
  color: var(--primary);
  font-weight: 900;
  font-size: 12px;
}

@media (max-width: 920px) {
  body.app-page {
    display: block;
    padding-top: 72px;
  }

  .mobile-app-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    min-height: 72px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

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

  .mobile-brand span:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body.app-page .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 330px);
    z-index: 1300;
    transform: translateX(110%);
    transition: transform 0.22s ease;
    box-shadow: -18px 0 40px rgba(15, 35, 56, 0.22);
    overflow-y: auto;
    padding-top: 28px;
  }

  body.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(15, 35, 56, 0.46);
    backdrop-filter: blur(2px);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.app-page .app-main {
    padding: 22px 16px 32px;
  }

  .app-header {
    gap: 16px;
  }

  .app-header h1 {
    font-size: 30px;
  }

  .compact-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .compact-dashboard-stats .stat-card {
    padding: 12px;
  }

  .compact-dashboard-stats .stat-card strong {
    font-size: 24px;
  }
}

@media (max-width: 460px) {
  .compact-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .compact-dashboard-stats .stat-card span {
    font-size: 11px;
  }

  .compact-dashboard-stats .stat-card strong {
    font-size: 22px;
  }

  .stat-card-clickable::after {
    font-size: 11px;
  }
}


/* Étape 25A — Menu hamburger visible sur portable */

@media (max-width: 1280px) {
  body.app-page {
    display: block;
    padding-top: 72px;
  }

  .mobile-app-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    min-height: 72px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--border);
    backdrop-filter: blur(14px);
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }

  .mobile-menu-button {
    display: inline-grid !important;
    position: relative;
    z-index: 1400;
  }

  body.app-page .sidebar {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(86vw, 340px);
    z-index: 1300;
    transform: translateX(110%);
    transition: transform 0.22s ease;
    box-shadow: -18px 0 40px rgba(15, 35, 56, 0.22);
    overflow-y: auto;
    padding-top: 28px;
  }

  body.mobile-menu-open .sidebar {
    transform: translateX(0);
  }

  body.mobile-menu-open .mobile-menu-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    z-index: 1250;
    background: rgba(15, 35, 56, 0.46);
    backdrop-filter: blur(2px);
  }

  body.mobile-menu-open {
    overflow: hidden;
  }

  body.app-page .app-main {
    padding: 22px 20px 34px;
  }
}

/* Sur très grands écrans, on conserve le menu latéral classique. */
@media (min-width: 1281px) {
  .mobile-app-bar,
  .mobile-menu-backdrop {
    display: none !important;
  }
}


/* Étape 25F — Courriel déplacé dans le menu */

.sidebar-user-card {
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: white;
  border-radius: 16px;
  padding: 12px 14px;
  display: grid;
  gap: 4px;
  overflow: hidden;
}

.sidebar-user-card span {
  color: rgba(255,255,255,0.66);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-user-card strong {
  color: white;
  font-size: 13px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

#current-user-email[hidden] {
  display: none !important;
}


/* ================================
   Fix #4 — Breakdown score visiteur
   ================================ */

.score-breakdown {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: white;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.score-breakdown-header {
  display: flex;
  align-items: center;
  gap: 22px;
}

.score-breakdown-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.score-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}

.score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s ease;
}

.score-factors-header {
  display: grid;
  grid-template-columns: 1fr 1fr 52px;
  gap: 8px 16px;
  padding: 7px 10px;
  background: var(--surface-soft);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.score-factors {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.score-factor {
  display: grid;
  grid-template-columns: 1fr 1fr 52px;
  gap: 8px 16px;
  align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.score-factor:last-child {
  border-bottom: none;
}

.score-factor-zero {
  opacity: 0.48;
}

.score-factor-label {
  font-weight: 700;
  color: var(--text);
}

.score-factor-answer {
  color: var(--muted);
}

.score-factor-points {
  font-weight: 900;
  font-size: 14px;
  text-align: right;
}

.score-pts-positive { color: #234b3a; }
.score-pts-negative { color: #c0392b; }
.score-pts-neutral  { color: var(--muted); }

.score-breakdown-note {
  margin: 0;
}

@media (max-width: 680px) {
  .score-breakdown-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .score-factors-header {
    grid-template-columns: 1fr auto;
  }

  .score-factors-header span:nth-child(2) {
    display: none;
  }

  .score-factor {
    grid-template-columns: 1fr auto;
    row-gap: 2px;
  }

  .score-factor-answer {
    display: none;
  }

  .score-factor-points {
    grid-row: 1;
    grid-column: 2;
  }
}


/* =========================================================
   Fix mobile — Overflow horizontal + Pipeline cartes
   ========================================================= */

/* Contient l'overflow du pipeline-board (7 col. × 240px = 1680px)
   sans toucher à body pour préserver position: fixed du header/sidebar */
.app-main {
  overflow-x: hidden;
}

/* Pipeline — vue mobile : liste de sections par statut */
@media (max-width: 760px) {

  /* Kanban → pile verticale */
  .pipeline-board {
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-x: visible;
    padding-bottom: 0;
  }

  /* Colonnes sans lead masquées */
  .pipeline-column--empty {
    display: none;
  }

  /* Colonne = section avec en-tête discret */
  .pipeline-column {
    min-width: 0;
    background: transparent;
    border: none;
    padding: 0;
    border-radius: 0;
  }

  .pipeline-column-header {
    padding: 0 4px 10px;
    border-bottom: 2px solid var(--border);
    margin-bottom: 10px;
  }

  .pipeline-column-header h3 {
    font-size: 15px;
    margin: 0;
  }

  .pipeline-column-header .eyebrow {
    font-size: 10px;
    margin: 0 0 2px;
  }

  .pipeline-column-body {
    gap: 8px;
  }

  /* Carte compacte et tappable */
  .pipeline-lead-card {
    padding: 12px 14px;
  }

  .pipeline-lead-top {
    align-items: center;
    margin-bottom: 4px;
    gap: 12px;
  }

  /* Lien "Détail" → bouton rectangulaire bien visible */
  .pipeline-lead-top > a {
    flex-shrink: 0;
    background: var(--primary);
    color: #fff;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 900;
    white-space: nowrap;
  }

  /* Boutons de pipeline masqués — on gère le statut via la fiche détail */
  .pipeline-actions {
    display: none;
  }

  /* Masquer la 2e ligne muted (date) — garder seulement type + adresse */
  .pipeline-lead-card > p.muted + p.muted {
    display: none;
  }

  /* task-pill reste visible — info utile sur mobile */
  .task-pill {
    font-size: 11px;
    padding: 5px 8px;
  }
}


/* =========================================================
   Fix mobile — Lead cards débordement horizontal
   ========================================================= */

/* min-width: 0 permet au grid de compresser les cartes
   sous leur contenu intrinsèque (fix classique CSS Grid) */
.lead-grid > .lead-card,
.lead-grid-compact > .lead-card {
  min-width: 0;
  overflow: hidden;
}

/* Les pills de meta (adresse, type de visite...) tronquées
   si trop longues pour la carte */
.lead-meta span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Sur mobile : padding réduit + contenu garanti dans la carte */
@media (max-width: 760px) {
  .lead-card {
    padding: 14px;
    box-sizing: border-box;
    width: 100%;
  }

  .lead-card-top {
    gap: 12px;
  }

  /* Score plus compact sur mobile */
  .lead-score {
    min-width: 64px;
    min-height: 64px;
    border-radius: 14px;
    flex-shrink: 0;
  }

  .lead-score strong {
    font-size: 22px;
  }

  /* Correctif — le gros carré de pointage de la fiche prospect
     (.lead-score-large) partage la classe .lead-score avec les petits
     badges des cartes de liste. Même spécificité CSS que la règle
     ci-dessus, donc sur mobile le chiffre du gros carré héritait de la
     taille compacte (22px) au lieu de rester grand — d'où un chiffre
     minuscule dans une case de 130px. Sélecteur combiné plus spécifique
     pour que le gros carré garde sa propre taille, bien centrée. */
  .lead-score.lead-score-large {
    position: relative;
    width: 130px;
    height: 130px;
    min-width: 130px;
    min-height: 130px;
    display: grid;
    place-items: center;
  }

  /* Seul le chiffre reste visible dans le carré sur mobile — le "/100"
     est retiré (display: none) plutôt que simplement repositionné, ce qui
     laisse toute la place au chiffre pour être encore plus grand tout en
     restant parfaitement centré (seul <strong> participe à la grille
     centrée du carré). */
  .lead-score.lead-score-large strong {
    font-size: 56px;
    line-height: 1;
    text-align: center;
  }

  .lead-score.lead-score-large span {
    display: none;
  }

  /* Nom du visiteur ne déborde pas */
  .lead-card h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Contact (email/tel) tronqué si trop long */
  .lead-card-top > div > p.muted {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    font-size: 12px;
  }
}


/* =========================================================
   Fix #8 — Rapport vendeur multi-visites
   ========================================================= */

/* En-tête du rapport à l'écran : photo à gauche, identité de la propriété à
   droite. La photo occupait auparavant toute la largeur sur 175px de haut et
   dominait la page — or ici elle sert à confirmer de quelle propriété il
   s'agit, pas à vendre quoi que ce soit. */
.seller-report-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 22px;
}

.seller-report-header .property-image {
  flex: 0 0 auto;
  width: 220px;
  height: 150px;
  border-radius: 14px;
}

.seller-report-address {
  margin-top: 0;
  flex: 1 1 260px;
  min-width: 0;
}

.seller-report-address h2 { margin: 4px 0; }

@media (max-width: 640px) {
  .seller-report-header .property-image {
    width: 100%;
    height: 170px;
  }
}

.report-visits-summary {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface-soft);
  padding: 18px;
  margin-bottom: 22px;
}

.report-visits-summary h3 {
  margin: 0 0 12px;
}

.report-visits-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.report-visit-row {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.report-visit-row:last-child {
  border-bottom: none;
}

.report-visit-row span {
  color: var(--muted);
}

.report-visit-row span:first-child {
  font-weight: 700;
  color: var(--text);
  min-width: 160px;
}

.report-visit-row a {
  margin-left: auto;
  font-weight: 800;
  color: var(--primary);
  font-size: 13px;
}

.report-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.report-stats-grid div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  padding: 14px 16px;
}

.report-stats-grid span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.report-stats-grid strong {
  display: block;
  font-size: 24px;
  color: var(--primary);
  font-weight: 900;
  letter-spacing: -0.03em;
}

@media (max-width: 760px) {
  .report-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .report-visit-row span:first-child {
    min-width: 0;
  }
}


/* =========================================================
   Fix #9 — Vue Contacts (toggle + cartes)
   ========================================================= */

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-soft);
}

.view-toggle-btn {
  padding: 7px 16px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.2s;
}

.view-toggle-btn.active {
  background: var(--primary);
  color: white;
  border-radius: 6px;
}

.contact-card {
  position: relative;
}

.contact-multi {
  border-left: 4px solid var(--accent);
}

/* Bouton « Voir le détail » des contacts à visite unique : aligné à droite,
   dans le prolongement des pastilles « Détail » des lignes de visite juste
   au-dessus. Laissé à gauche par défaut, il flottait seul au milieu du vide,
   sans rapport visuel avec le reste de la carte. */
.contact-card > .button-row {
  justify-content: flex-end;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.contact-visits {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
  padding: 10px;
  background: var(--surface-soft);
  border-radius: 12px;
}

/* Ces cartes vivent dans une grille compacte : environ 300 px de large. Trois
   éléments de largeur fixe — date, score, pastille — n'y tiennent pas sur une
   même ligne avec l'adresse. Les tentatives précédentes le montraient chacune
   à leur façon : adresse écrasée à zéro, pastille sortant du cadre.

   L'adresse occupe donc TOUJOURS sa propre ligne, et la date, le score et la
   pastille se partagent la suivante. Le débordement devient impossible quelle
   que soit la largeur, et la lecture reste la même sur écran et sur mobile. */
.contact-visit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.contact-visit-row > :first-child {
  flex: 1 1 100%;
  min-width: 0;
  overflow-wrap: break-word;
  font-weight: 700;
}

.contact-visit-row > :not(:first-child) {
  flex: 0 0 auto;
}

/* Filet de sécurité : si la carte est plus étroite que prévu, c'est la date
   qui cède du terrain — jamais le bouton, qui passerait à la ligne. */
.contact-visit-row .muted {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.contact-visit-row:last-child {
  border-bottom: none;
}

/* Le lien « Détail » d'une ligne de visite était du texte nu au bout d'une
   ligne à quatre colonnes : personne ne le voyait, et on cherchait un bouton
   « Voir le détail » qui n'existait pas. Il prend l'apparence d'un bouton
   compact, sans changer la densité de la liste. */
.contact-visit-row a {
  font-weight: 800;
  font-size: 12px;
  color: var(--primary);
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto; /* plaquée au bord droit de la ligne */
  text-align: center;
}

.contact-visit-row a:hover,
.contact-visit-row a:focus-visible {
  border-color: var(--primary);
  background: var(--surface-soft);
}

@media (max-width: 760px) {
  /* La date reste visible : l'adresse ayant sa propre ligne, la place n'est
     plus disputée même sur un écran de 320 px. */

  .view-toggle-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
}


/* =========================================================
   Fix #12 — Relances IA
   ========================================================= */

.ai-tone-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.ai-tone-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: white;
  flex: 1;
  max-width: 200px;
}

.button-accent {
  background: linear-gradient(135deg, #6c47d9, #9b6dff);
  color: white;
  border: none;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}

.button-accent:hover {
  opacity: 0.88;
}

.button-accent:disabled {
  opacity: 0.5;
  cursor: wait;
}

@media (max-width: 760px) {
  .ai-tone-row {
    flex-direction: column;
    align-items: stretch;
  }

  .ai-tone-select {
    max-width: none;
  }
}


/* =========================================================
   Fix #13 — Graphiques de performance
   ========================================================= */

/* Trois graphiques sur une seule rangée sur grand écran : le tableau de
   bord tient alors sans défilement, et les trois statistiques se lisent
   d'un coup d'œil plutôt qu'en deux temps. En dessous de 1240px, la
   largeur utile (moins la barre latérale) descend sous ~1000px et trois
   colonnes deviennent illisibles — on retombe alors sur la disposition
   précédente, 2 colonnes avec le 3e graphique sur toute la largeur. */
.dashboard-charts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.chart-container {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: white;
  /* Sans ceci, un élément de grille CSS refuse de rétrécir sous la
     largeur intrinsèque de son contenu — ici le canevas Chart.js, dont
     la taille par défaut (300px) sert de référence avant que le JS ne
     le redimensionne. Sur un écran de téléphone plus étroit que ça, la
     grille débordait donc légèrement à droite ; comme .app-main coupe
     le débordement horizontal (overflow-x: hidden, voir plus bas dans
     ce fichier), le graphique se retrouvait tronqué/désaligné plutôt
     que centré dans sa colonne. */
  min-width: 0;
}

.chart-container h3 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.chart-wrapper {
  position: relative;
  height: 260px;
  width: 100%;
  min-width: 0;
}

.chart-wrapper canvas {
  max-width: 100%;
}

/* Boucle de feedback IA — 3e graphique. Sur grand écran il occupe sa
   propre colonne comme les deux autres ; la pleine largeur ne reprend
   ses droits qu'en dessous de 1240px (voir la requête média plus bas). */
.chart-container-wide {
  grid-column: auto;
}

.chart-wrapper .small-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  margin: 0;
}

/* Le sélecteur ci-dessus (2 classes) est plus spécifique que la règle
   navigateur [hidden]{display:none} (1 attribut) et gagnait donc
   toujours, même une fois l'attribut "hidden" posé par le JS — le
   message vide restait affiché par-dessus le graphique déjà rempli de
   données réelles. Un sélecteur composé, encore plus spécifique,
   rétablit display:none quand l'attribut est bel et bien présent. */
.chart-wrapper .small-note[hidden] {
  display: none;
}

@media (max-width: 1240px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr 1.5fr;
    gap: 24px;
  }

  .chart-container-wide {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .dashboard-charts-grid {
    grid-template-columns: 1fr;
  }

  .chart-wrapper {
    height: 220px;
  }
}

/* =========================================================
   Invitation par courriel
   ========================================================= */

.invitation-preview {
  min-height: 60px;
}

.invitation-email-preview {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  background: white;
}

.invitation-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}

.invitation-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.invitation-footer p {
  margin: 4px 0;
}


/* =========================================================
   Loading spinner (invitation + IA)
   ========================================================= */

.invitation-loading,
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px 20px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}

.loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}


/* =========================================================
   Charts modernes — override
   ========================================================= */

.chart-container {
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}

.chart-container:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}


/* =========================================================
   Fix #15 — Statut Converti
   ========================================================= */

.pipeline-column:has([data-status="converti"]) .pipeline-column-header,
.visitor-status-buttons [data-status="converti"].active {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.12), rgba(21, 128, 61, 0.08));
}

.visitor-status-buttons [data-status="converti"] {
  color: #15803d;
  font-weight: 900;
}


/* =========================================================
   Point 5 — Export PDF / impression des rapports vendeur
   ========================================================= */

/* Masqué à l'écran, affiché seulement à l'impression / export PDF */
.print-only { display: none; }

/* En-tête de marque du document exporté — bandeau de couleur avec repère
   visuel CourtierPilot, plutôt qu'une simple ligne de texte grise. */
.report-print-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--primary);
  color: #fff;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 22px;
}

.pr-brand-mark {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--accent);
  color: var(--primary-dark);
  font-weight: 900;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-brand-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pr-brand-text strong { font-size: 14px; }
.pr-brand-text span { font-size: 11px; color: var(--accent-soft); }

.pr-brand-date {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--accent-soft);
  white-space: nowrap;
}

/* Éléments à ne jamais montrer dans un rapport imprimé/exporté : boutons
   d'action, brouillon texte à valider, navigation de l'app. */
.no-print { }

@media print {
  /* Supprime l'URL, la date et le titre que le navigateur ajoute lui-même en
     haut et en bas de chaque page imprimée. Ces lignes ne viennent pas de
     notre HTML : le navigateur les place dans la marge de page, et la seule
     façon de les faire disparaître par CSS est de supprimer cette marge.
     La marge du papier est alors rétablie en padding sur le contenu — sinon
     le texte irait toucher le bord de la feuille.

     Limite à connaître : ça fonctionne dans Chrome et Edge. Firefox et
     Safari peuvent quand même les afficher; il faut alors décocher
     « En-têtes et pieds de page » dans la fenêtre d'impression. */
  @page {
    size: auto;
    margin: 0;
  }

  .no-print,
  .sidebar,
  .mobile-app-bar,
  .mobile-menu-backdrop { display: none !important; }

  .print-only { display: block; }

  .app-page { display: block; }
  .app-main { padding: 14mm 12mm; overflow: visible; }
  body { background: #fff; }

  .app-header h1 { font-size: 26px; }
  .panel { box-shadow: none; border: none; padding: 0; }
}

/* Même comportement que @media print, mais déclenché en JS le temps de
   capturer la page pour générer un PDF téléchargeable (html2pdf.js ne lit
   pas les règles @media print — voir setupSellerReportPdfButton dans app.js). */
body.pdf-export-mode .no-print,
body.pdf-export-mode .sidebar,
body.pdf-export-mode .mobile-app-bar,
body.pdf-export-mode .mobile-menu-backdrop { display: none !important; }

body.pdf-export-mode .print-only { display: block; }

body.pdf-export-mode .app-page { display: block; }
body.pdf-export-mode .app-main { padding: 24px; overflow: visible; }
body.pdf-export-mode .app-header h1 { font-size: 26px; }
body.pdf-export-mode .panel { box-shadow: none; border: none; padding: 0; }

/* ── Document d'export PDF / impression (#printable-report) ──────────────
   Volontairement simple : pas de grille CSS, pas de cartes à ombre. C'est
   ce genre de mise en page complexe, capturée par html2pdf.js, qui causait
   des blocs vides et des coupures sales. Ici : titres, tuiles à bordure
   plate et listes — mise en page en flexbox seulement (jamais en grid). */
.pr-doc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  max-width: 720px;
}

.pr-section {
  margin-bottom: 22px;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* En-tête du document — aligné sur le portail vendeur : le nom de la
   propriété domine, la ville et le contexte de visite suivent en retrait.
   Avant, le PDF s'ouvrait sur « Résumé » sans jamais nommer la propriété. */
.pr-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--surface-soft);
  break-inside: avoid;
  page-break-inside: avoid;
}

.pr-hero-img {
  flex: 0 0 auto;
  width: 150px;
  height: 104px;
  object-fit: cover;
  border-radius: 8px;
  background: var(--surface-soft);
}

.pr-hero-text { flex: 1 1 auto; min-width: 0; }

/* Deux critères par ligne dans le document imprimé aussi — mais en flexbox,
   pas en grille CSS : html2pdf.js capture la page avec html2canvas, qui rend
   mal les grilles et produisait des blocs vides ou décalés. Le reste du
   document suit déjà cette règle (voir la note en tête de .pr-doc). */
.pr-doc .impressions-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pr-doc .impression-row {
  flex: 1 1 calc(50% - 10px);
  min-width: 180px;
}

.pr-hero h1 {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 900;
  color: var(--primary);
  margin: 0 0 6px;
}

.pr-hero-city {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}

.pr-hero-sub {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pr-section h2 {
  font-size: 15px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--surface-soft);
  break-after: avoid;
  page-break-after: avoid;
}

/* Tableau simple (ex. « Visites incluses ») */
.pr-stats-table { width: 100%; border-collapse: collapse; }
.pr-stats-table tr { break-inside: avoid; page-break-inside: avoid; }
.pr-stats-table td {
  padding: 7px 4px;
  border-bottom: 1px solid var(--surface-soft);
}
.pr-stats-table td:first-child { color: var(--muted); }
.pr-stats-table td:last-child { text-align: right; font-weight: 700; color: var(--primary); }

/* Statistiques clés — tuiles en flexbox (jamais de CSS grid, voir note plus haut) */
.pr-stat-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.pr-stat-tile {
  flex: 1 1 30%;
  min-width: 130px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center;
  break-inside: avoid;
  page-break-inside: avoid;
}
.pr-stat-tile span {
  display: block;
  order: 2;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

/* Le chiffre d'abord, l'étiquette en dessous — comme les tuiles du portail
   vendeur. L'ordre du HTML reste étiquette puis valeur pour les lecteurs
   d'écran; c'est la présentation qui s'inverse. */
.pr-stat-tile {
  display: flex;
  flex-direction: column;
}
.pr-stat-tile strong { order: 1; }
.pr-stat-tile strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--primary);
}

.pr-actions-list { margin: 0; padding-left: 18px; }
.pr-actions-list li { margin-bottom: 6px; break-inside: avoid; page-break-inside: avoid; }

.pr-lead-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--surface-soft);
  break-inside: avoid;
  page-break-inside: avoid;
}
.pr-lead-row strong { display: block; color: var(--primary); }
.pr-lead-row span { color: var(--muted); font-size: 12px; }

/* Étiquettes de catégorie — identité des visiteurs volontairement anonymisée
   (« Prospect 1, 2, 3... ») dans le document exporté : les coordonnées réelles
   restent dans l'app, réservées au courtier, et ne sont pas transmises au
   vendeur (voir Loi 25 — usage secondaire de renseignements personnels). */
.pr-lead-row .pr-lead-badge {
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
  color: #fff;
}
.pr-badge-hot  { background: var(--success); }
.pr-badge-warm { background: var(--accent); color: var(--primary-dark); }
.pr-badge-cold { background: var(--primary); }
.pr-badge-low  { background: var(--muted); }

.pr-broker-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-soft);
  border-left: 3px solid var(--primary);
  border-radius: 4px;
  padding: 10px 12px;
}
.pr-broker-card strong { color: var(--primary); font-size: 14px; }
.pr-broker-card span { color: var(--muted); font-size: 12px; }

.pr-note { font-size: 11px; color: var(--muted); margin-top: 26px; }

/* Suppression de compte — bandeau d'avertissement quand une suppression est
   programmée. Volontairement sobre : c'est une information, pas une alarme,
   puisque le courtier l'a demandée lui-même et peut encore l'annuler. */
.deletion-warning {
  background: #fef3f2;
  border-left: 3px solid #c0392b;
  padding: 12px 16px;
  border-radius: 8px;
  color: #7a2018;
}

/* ── Barre d'enregistrement des paramètres ─────────────────────────────────
   Le formulaire Paramètres compte quatre sections (profil, signature,
   calendrier, notifications) pour un seul bouton d'enregistrement, tout en
   bas. Quelqu'un qui modifie sa signature ne le voit pas : il quitte la page
   en croyant que ses champs se sauvegardent seuls, et les perd.
   La barre reste donc collée au bas de la fenêtre, visible depuis n'importe
   quelle section, et signale les modifications non enregistrées. */
.settings-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-top: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 -6px 24px rgba(19, 32, 51, 0.10);
}

.settings-save-bar .form-message {
  margin: 0;
  font-weight: 700;
}

/* L'indication d'enregistrement automatique passe en premier et prend la
   place disponible : c'est elle qui répond à la question « dois-je faire
   quelque chose? », avant même que la personne cherche un bouton. */
.settings-save-hint {
  margin: 0;
  margin-right: auto;
  color: var(--muted);
  font-size: 0.92rem;
}

/* État « modifications non enregistrées » : liseré ambre, assez visible pour
   être remarqué en périphérie, assez discret pour ne pas crier à l'erreur. */
.settings-save-bar.is-dirty {
  border-color: var(--accent);
  box-shadow: 0 -6px 24px rgba(198, 155, 91, 0.28);
}

.settings-save-bar.is-dirty .form-message { color: var(--accent); }

@media (max-width: 640px) {
  .settings-save-bar { padding: 12px; gap: 8px; }
}

/* =========================================================
   Les plus / les moins — formulaire de visite
   ========================================================= */

.visit-feedback {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  margin: 0;
  /* Un fieldset a une largeur minimale intrinsèque égale à celle de son
     contenu le plus large, et ignore min-width: 0 dans plusieurs
     navigateurs. min-inline-size: 0 est la forme qu'ils respectent — sans
     elle, le critère le plus long élargirait le formulaire entier. */
  min-inline-size: 0;
}

.visit-feedback legend {
  font-weight: 800;
  font-size: 14px;
  padding: 0 6px;
}

.visit-feedback .small-note { margin: 0 0 10px; }

.feedback-criteria {
  display: grid;
}

.feedback-criterion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.feedback-criterion:first-child { border-top: 0; }

.feedback-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: break-word;
}

.feedback-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
}

/* 44px de côté : la cible tactile minimale recommandée. Ce formulaire se
   remplit debout dans une entrée, au pouce, parfois avec des gants. */
.feedback-vote {
  width: 44px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, filter 0.15s, opacity 0.15s;
}

/* Les émojis non choisis sont désaturés : celui qu'on sélectionne reprend
   sa couleur, ce qui rend l'état lisible d'un coup d'œil sans ajouter de
   texte à côté de chaque ligne. */
.feedback-vote[aria-pressed="false"] {
  filter: grayscale(1);
  opacity: 0.5;
}

.feedback-vote:hover { border-color: var(--primary); }

.feedback-vote-plus[aria-pressed="true"] {
  background: #e6f6ee;
  border-color: var(--success);
}

.feedback-vote-moins[aria-pressed="true"] {
  background: #fdeee9;
  border-color: var(--danger);
}

/* =========================================================
   Ce que les visiteurs retiennent — rapport vendeur
   ========================================================= */

.impressions-section h2 {
  font-size: 16px;
  margin: 0 0 6px;
}

.impressions-intro { margin: 0 0 16px; font-size: 13px; }

/* Deux critères par ligne : une liste d'un seul élément par rangée
   étirait la section sur toute la hauteur d'une page pour six critères,
   alors que chaque bloc n'occupe que la moitié de la largeur utile. */
.impressions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.impression-row {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: white;
  min-width: 0;
}

@media (max-width: 760px) {
  .impressions-grid { grid-template-columns: 1fr; }
}

.impression-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
}

.impression-head strong { font-size: 14px; }
.impression-head .muted { font-size: 12px; }

/* La barre porte l'information : la proportion de vert et de rouge dit en un
   coup d'œil si un élément fait l'unanimité ou s'il divise. */
.impression-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft);
}

.impression-bar-plus  { background: rgba(21, 128, 61, 0.75); }
.impression-bar-moins { background: rgba(192, 57, 43, 0.65); }

.impression-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
}

.impression-plus  { color: var(--success); }
.impression-moins { color: #b91c1c; }

/* Sans print-color-adjust, les navigateurs suppriment les aplats de couleur
   à l'impression : les deux barres disparaîtraient et il ne resterait qu'une
   ligne grise vide. Même règle pour l'export PDF, qui capture la page avec
   les styles écran mais sans les règles @media print. */
@media print {
  .impression-bar,
  .impression-bar-plus,
  .impression-bar-moins {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .impression-row { break-inside: avoid; }
}

body.pdf-export-mode .impression-bar,
body.pdf-export-mode .impression-bar-plus,
body.pdf-export-mode .impression-bar-moins {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}


/* =========================================================
   Repères de mise en marché, mot du courtier et achalandage
   (rapport vendeur + bilan de mise en marché)

   Aucun de ces sélecteurs n'est redéfini dans upgrade-v27.css, qui
   se charge après cette feuille. Vérifié — c'est exactement ce qui
   avait rendu six correctifs invisibles sur les pastilles du journal.
   ========================================================= */

.report-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 18px;
}

.report-reperes b {
  color: var(--primary);
  font-weight: 900;
}

/* Le mot du courtier. Deux phrases écrites par un humain, mises en
   évidence avant le moindre chiffre : sans elles, le vendeur interprète
   seul un tableau de bord, souvent mal et souvent un dimanche soir. */
.report-broker-note {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 0 24px;
}

.report-broker-note .lbl {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 6px;
}

.report-broker-note p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.report-visit-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--primary);
  background: var(--surface-soft);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.report-visit-count.is-upcoming {
  background: #fff4e0;
  color: #8a5a00;
}

/* Achalandage par visite — la forme de la suite parle plus vite que
   n'importe quelle phrase du courtier. Colonnes plafonnées en largeur
   pour que trois visites ne se retrouvent pas éparpillées sur un écran
   large. */
.report-attend {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 14px;
  padding: 8px 0 0;
}

.report-attend-col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 110px;
  text-align: center;
}

.report-attend-bar {
  background: var(--primary);
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid var(--border);
  min-height: 4px;
  width: 100%;
  max-width: 70px;
  margin: 0 auto;
}

.report-attend-n {
  font-size: 15px;
  font-weight: 900;
  color: var(--primary);
  margin-top: 8px;
}

.report-attend-d {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Version imprimée / PDF ───────────────────────────────────────────
   html2canvas rend mal la grille CSS : tout ce qui suit reste en flexbox,
   comme le reste de .pr-doc. */

.pr-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  margin: 0 0 12px;
}

.pr-broker-note {
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 0 16px;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.pr-broker-note-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  margin-bottom: 4px;
}

.pr-broker-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.pr-attend {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 10px;
  padding: 4px 0 0;
  break-inside: avoid;
  page-break-inside: avoid;
}

.pr-attend-col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 80px;
  text-align: center;
}

.pr-attend-bar {
  background: var(--primary);
  border-radius: 4px 4px 0 0;
  border-bottom: 2px solid var(--border);
  min-height: 3px;
  width: 100%;
  max-width: 48px;
  margin: 0 auto;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.pr-attend-n {
  font-size: 12px;
  font-weight: 900;
  color: var(--primary);
  margin-top: 6px;
}

.pr-attend-d {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 1px;
}


/* =========================================================
   Refonte des Contacts — sortie du pipeline et réactivation

   Aucun de ces sélecteurs n'existe dans upgrade-v27.css, qui se
   charge après cette feuille. Vérifié avant écriture.
   ========================================================= */

/* La ligne qui empêche les sortis de disparaître sans laisser d'adresse.
   Elle est hors du tableau : .pipeline-board défile horizontalement, une
   ligne posée dedans partirait hors écran sur mobile. */
.pipeline-hors-note {
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.pipeline-hors-note a {
  color: var(--primary);
  font-weight: 800;
  text-decoration: underline;
}

.pipeline-action-exit {
  margin-left: auto;
  border-style: dashed !important;
  color: var(--muted) !important;
}

/* Le choix entre les deux sorties. Deux blocs hauts, avec la conséquence
   écrite dessous : c'est le seul endroit où la distinction se joue, et
   elle n'a jamais été expliquée nulle part. */
.exit-choice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 18px 0;
}

.exit-choice {
  display: block;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.exit-choice:hover,
.exit-choice:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 2px 12px rgba(21, 59, 99, 0.12);
}

.exit-choice strong {
  display: block;
  font-size: 16px;
  font-weight: 900;
  color: var(--primary);
  margin-bottom: 5px;
}

.exit-choice span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* Les deux sorties ne doivent plus jamais se ressembler. */
.sortie-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
}

.sortie-badge-nq {
  background: #fdecea;
  color: #a33227;
}

.sortie-badge-arch {
  background: var(--surface-soft);
  color: var(--muted);
}

.sortie-badge-mini {
  font-size: 10px;
  padding: 2px 8px;
  letter-spacing: 0.02em;
}

.visitor-status-sorti {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.segment-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 900;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 1px 7px;
}

/* La carte entière est cliquable : viser un lien de 60 px au pouce, sur une
   carte qui en fait 300 de large, n'avait aucune raison d'être. */
.contact-card[data-contact-href] {
  cursor: pointer;
}

.contact-card[data-contact-href]:hover {
  border-color: var(--primary);
}

.contact-card[data-contact-href]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.contact-hors-pipeline {
  background: var(--surface-soft);
}

.contact-hors-pipeline .lead-score strong {
  color: var(--muted);
}

.contact-raison {
  margin: 10px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  font-style: italic;
}

@media (max-width: 980px) {
  .pipeline-board {
    grid-template-columns: repeat(5, minmax(220px, 1fr));
  }
}


/* L'état de la séquence de relances, sur la fiche du prospect.
   Elle s'arrêtait sans que rien ne le dise : elle disparaissait de la file
   et c'était tout. */
.sequence-etat {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

.sequence-etat b { color: var(--primary); }

.sequence-etat-ok {
  font-weight: 600;
}

.sequence-etat-arret {
  background: #fff8ec;
  border: 1px solid #f0dcb8;
  border-radius: 12px;
  padding: 14px 16px;
}

.sequence-etat-arret p {
  margin: 0 0 10px;
  font-weight: 600;
  color: #7a5310;
}


/* =========================================================
   Afficher / masquer le mot de passe

   Le bouton se pose dans le champ plutôt qu'à côté : à côté,
   il décalerait l'alignement des autres champs du formulaire.
   Aucun de ces sélecteurs n'existe dans upgrade-v27.css.
   ========================================================= */

.password-field {
  position: relative;
  display: block;
  width: 100%;
}

/* La place du bouton est réservée dans le champ, sinon un mot de passe
   long passerait dessous. */
.password-field input {
  padding-right: 48px;
}

.password-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
}

.password-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.password-toggle:hover {
  color: var(--primary);
  background: var(--surface-soft);
}

.password-toggle:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
  color: var(--primary);
}

/* Mot de passe visible : l'icône passe au bleu pour que l'état saute aux
   yeux — c'est justement le moment où on ne veut pas l'oublier. */
.password-toggle[aria-pressed="true"] {
  color: var(--primary);
}


/* =========================================================
   Page Candidatures — programme pilote
   Aucun de ces sélecteurs n'existe dans upgrade-v27.css.
   ========================================================= */

.candidature-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 14px;
}

.candidature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.candidature-head h3 {
  margin: 0 0 2px;
  font-size: 19px;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.candidature-head .muted {
  margin: 0;
  font-size: 13px;
}

.candidature-statut {
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 5px 13px;
  white-space: nowrap;
}

.cand-nouveau { background: #eaf0f8; color: var(--primary); }
.cand-accepte { background: rgba(21, 128, 61, 0.12); color: #15803d; }
.cand-refuse  { background: var(--surface-soft); color: var(--muted); }
.cand-pause   { background: #fff4e0; color: #8a5a00; }

/* Ce que le courtier a écrit lui-même : c'est la seule chose sur cette
   page qui aide vraiment à décider. Le reste est du formulaire. */
.candidature-situation {
  background: var(--surface-soft);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}

.candidature-situation .lbl {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.candidature-situation p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.candidature-infos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px 20px;
  margin-bottom: 18px;
}

.candidature-infos span {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 2px;
}

.candidature-infos strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.candidature-actions {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.candidature-message:not([hidden]) {
  margin-top: 10px;
}

@media (max-width: 620px) {
  .candidature-card { padding: 18px 16px; }
  .candidature-actions .button { width: 100%; }
}


/* =========================================================
   Page « Commencer ici » — parcours qui se coche tout seul
   Aucun de ces sélecteurs n'existe dans upgrade-v27.css.
   ========================================================= */

.onboarding-progress-panel {
  padding: 22px 26px;
}

.onboarding-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.onboarding-progress-head strong {
  font-size: 18px;
  font-weight: 900;
  color: var(--primary);
}

.onboarding-progress-head span {
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}

.onboarding-progress-bar {
  height: 10px;
  border-radius: 999px;
  background: var(--surface-soft);
  overflow: hidden;
}

.onboarding-progress-bar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light, #1c4d7a));
  transition: width 0.4s ease;
}

.onboarding-progress-panel .muted {
  margin: 12px 0 0;
  font-size: 13px;
}

.onboarding-etapes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onboarding-etape {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px 20px;
}

/* Une étape faite s'efface un peu : ce qui reste à faire doit ressortir. */
.onboarding-etape.est-faite {
  background: var(--surface-soft);
  border-color: transparent;
}

.onboarding-coche {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 900;
  color: white;
  margin-top: 2px;
}

.onboarding-etape.est-faite .onboarding-coche {
  background: #15803d;
  border-color: #15803d;
}

.onboarding-corps {
  min-width: 0;
  flex: 1 1 auto;
}

.onboarding-corps h3 {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 900;
  color: var(--primary);
}

.onboarding-etape.est-faite .onboarding-corps h3 {
  color: var(--muted);
}

.onboarding-corps p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}

.onboarding-etape.est-faite .onboarding-corps p {
  color: var(--muted);
}

.onboarding-faite-note {
  font-size: 12px;
  font-weight: 800;
  color: #15803d;
}

.rule-grid a {
  display: inline-block;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 800;
  color: var(--primary);
}

@media (max-width: 620px) {
  .onboarding-etape { padding: 16px; gap: 12px; }
  .onboarding-corps .button { width: 100%; }
}

/* L'entrée descendue au bas du menu : même famille que les autres, mais
   détachée du bloc de travail quotidien par un filet. */
.sidebar-nav a.nav-aide-memoire {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}


/* =========================================================
   L'attribut hidden doit toujours masquer

   Pourquoi cette règle existe : la règle du navigateur est
   [hidden]{display:none}, d'une spécificité de 1 attribut. La
   moindre classe qui définit display la bat — .button fait
   display:inline-flex, .stat-card et .panel-header font flex,
   .stats-grid fait grid. Un élément portant hidden restait donc
   visible, et le bogue est invisible en lecture de code : le JS
   pose bien l'attribut, l'élément s'affiche quand même.

   Le cas s'est déjà présenté deux fois — la note du graphique du
   tableau de bord et les filtres — chaque fois rapiécé par un
   sélecteur plus spécifique au cas par cas. Cette règle-ci couvre
   tous les cas passés et à venir. Les deux rustines précédentes
   deviennent redondantes ; elles restent sans effet nuisible.

   Vérifié avant écriture : aucune règle de cette feuille ni de
   upgrade-v27.css n'affiche volontairement un élément portant
   l'attribut hidden.
   ========================================================= */

[hidden] {
  display: none !important;
}


/* =========================================================
   « Un commentaire? » — retour des courtiers pilotes
   Aucun de ces sélecteurs n'existe dans upgrade-v27.css.
   ========================================================= */

/* L'entrée se distingue du travail quotidien sans s'en éloigner :
   visible de partout, jamais en concurrence avec le reste. */
.sidebar-nav a.nav-commentaire {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
}

.sidebar-nav a.nav-commentaire:hover {
  color: white;
}

.commentaire-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 18px 0;
}

.commentaire-categorie {
  display: block;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 15px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.commentaire-categorie strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--primary);
}

.commentaire-categorie span {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: 2px;
}

.commentaire-categorie:hover {
  border-color: var(--primary);
}

.commentaire-categorie.est-choisie {
  border-color: var(--primary);
  background: var(--surface-soft);
  box-shadow: inset 3px 0 0 var(--primary);
}

/* L'étiquette est utile au lecteur d'écran, inutile à l'œil : le
   champ est seul sous trois boutons qui disent déjà de quoi il s'agit. */
.sr-only-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Les trois catégories de commentaire : la couleur dit l'état d'esprit
   avant même la lecture — un problème ne se lit pas comme une idée. */
.comm-probleme { background: #fdecea; color: #a33227; }
.comm-idee     { background: rgba(21, 128, 61, 0.12); color: #15803d; }
.comm-autre    { background: #eaf0f8; color: var(--primary); }

.commentaire-contexte {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}


/* Dictée et structuration dans la fenêtre de commentaire. */
.commentaire-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Installation de l'application, dans le parcours de démarrage.
   Quatre états possibles, un seul s'affiche à la fois. */
.installation-bloc {
  background: var(--surface-soft);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.installation-bloc p {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.55;
}

.installation-bloc p:last-child { margin-bottom: 0; }

.installation-gestes ol {
  margin: 8px 0 10px;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.7;
}

.installation-note {
  margin: 0 0 10px;
  font-size: 13.5px;
  font-weight: 700;
}

.installation-note.installation-ok { color: #15803d; }

#installation-statut:empty { display: none; }