:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --panel-alt: #fafbfc;
  --border: #e6e8ec;
  --text: #14161a;
  --muted: #6b7280;
  --muted-2: #9aa0aa;
  --accent: #14161a;
  --positive: #0f9d58;
  --positive-bg: #eaf7ef;
  --negative: #e02424;
  --negative-bg: #fdeceb;
  --neutral-bg: #f0f1f3;
  --radius-lg: 12px;
  --radius-md: 9px;
  --radius-sm: 7px;
  --shadow: 0 1px 2px rgba(20, 22, 26, 0.04), 0 8px 24px -12px rgba(20, 22, 26, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.topbar .generated {
  color: var(--muted-2);
  font-size: 13px;
}

.property-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 30px 7px 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23767a82' stroke-width='1.5' fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.property-select:hover {
  border-color: var(--muted-2);
}

/* ---------- panel base ---------- */

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

section {
  margin-bottom: 28px;
}

section > h2 {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 12px 2px;
  color: var(--text);
}

.section-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin: -8px 0 14px 2px;
}

/* ---------- period switcher ---------- */

.period-tabs {
  display: inline-flex;
  background: var(--neutral-bg);
  border-radius: var(--radius-md);
  padding: 4px;
  gap: 2px;
}

.period-tabs button {
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: calc(var(--radius-md) - 4px);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.period-tabs button.active {
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(20, 22, 26, 0.12);
}

.period-tabs button:hover:not(.active) {
  color: var(--text);
}

.hero-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 18px;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}

.month-nav .month-label {
  font-size: 16px;
  font-weight: 700;
  min-width: 160px;
  text-align: center;
  text-transform: capitalize;
}

.nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.nav-btn:hover:not(:disabled) {
  background: var(--neutral-bg);
}

.nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.range-caption {
  color: var(--muted-2);
  font-size: 12.5px;
}

/* ---------- KPI cards ---------- */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}

.kpi-card .kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 8px;
}

.kpi-card .kpi-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
}

.kpi-card .kpi-value.zero {
  color: var(--muted-2);
}

.kpi-delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
}

.kpi-delta.positive {
  color: var(--positive);
  background: var(--positive-bg);
}

.kpi-delta.negative {
  color: var(--negative);
  background: var(--negative-bg);
}

.kpi-delta.neutral {
  color: var(--muted);
  background: var(--neutral-bg);
}

.kpi-nodata {
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted-2);
}

/* year comparison */

.year-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 640px) {
  .year-compare {
    grid-template-columns: 1fr;
  }
}

.year-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
}

.year-card.is-current {
  border-color: var(--text);
}

.year-card h3 {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
}

.year-card .mini-kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.year-card .mini-kpi .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.year-card .mini-kpi .kpi-value {
  font-size: 21px;
  font-weight: 700;
}

.alltime-caption {
  color: var(--muted);
  font-size: 13px;
  margin: -6px 0 16px 2px;
}

/* ---------- trend chart (rounded line) ---------- */

.trend-panel {
  padding: 20px 20px 12px;
}

.trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.trend-head .trend-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.trend-head .trend-current {
  font-size: 13px;
  color: var(--muted);
}

.trend-chart-wrap {
  position: relative;
}

.trend-svg {
  width: 100%;
  height: 120px;
  display: block;
  cursor: crosshair;
  color: var(--text); /* currentColor du dégradé suit le thème (clair/sombre) */
}

.trend-svg .trend-grid {
  stroke: var(--border);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.trend-svg .trend-dot.is-last {
  fill: var(--accent-2, var(--text));
  stroke: var(--panel);
  stroke-width: 2;
}

/* Sélecteur de métrique */
.trend-head { align-items: flex-start; }
.trend-metrics {
  display: inline-flex;
  gap: 2px;
  background: var(--panel-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  flex: 0 0 auto;
}
.trend-metrics button {
  border: none;
  background: transparent;
  color: var(--text);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.trend-metrics button.active {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

/* Repères d'axe Y (DOM, superposés au graphe) */
.trend-yaxis {
  position: absolute;
  top: 0;
  left: 0;
  height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 0;
  pointer-events: none;
  z-index: 1;
}
.trend-yaxis span {
  font-size: 9.5px;
  color: var(--muted-2);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
  padding: 0 3px;
  border-radius: 3px;
  line-height: 1.1;
}

.trend-svg .trend-line {
  fill: none;
  stroke: var(--text);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.trend-svg .trend-area {
  fill: url(#trendFill);
  opacity: 0.5;
}

.trend-svg .trend-dot {
  fill: var(--panel);
  stroke: var(--text);
  stroke-width: 2.5;
}

.trend-svg .trend-guide {
  stroke: var(--muted-2);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  pointer-events: none;
}

.trend-svg .trend-hover-dot {
  fill: var(--text);
  stroke: var(--panel);
  stroke-width: 2.5;
  opacity: 0;
  pointer-events: none;
}

.trend-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 160px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity 0.1s ease;
  z-index: 10;
}

.trend-tooltip.visible {
  opacity: 1;
}

.trend-tooltip .tt-month {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 8px;
  color: var(--text);
}

.trend-tooltip .tt-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  font-size: 12px;
  padding: 2px 0;
}

.trend-tooltip .tt-row .k {
  color: var(--muted);
}

.trend-tooltip .tt-row .v {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.trend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted-2);
  padding: 0 2px;
  text-transform: capitalize;
}

/* ---------- property cards ---------- */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.property-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}

.property-card h3 {
  margin: 0 0 2px;
  font-size: 14.5px;
  font-weight: 700;
}

.property-card .city {
  color: var(--muted-2);
  font-size: 12px;
  margin-bottom: 12px;
}

.property-card .row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.property-card .row:first-of-type {
  border-top: none;
}

.property-card .row .k {
  color: var(--muted);
}

.property-card .row .v {
  font-weight: 600;
  text-align: right;
}

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  margin-left: 6px;
}

.badge.warn {
  color: var(--negative);
  background: var(--negative-bg);
}

/* ---------- channels & bars ---------- */

.bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bar-row {
  display: grid;
  grid-template-columns: 130px 1fr 100px;
  align-items: center;
  gap: 12px;
  font-size: 13px;
}

.bar-label {
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.bar-fill {
  height: 100%;
  background: var(--text);
  border-radius: 999px;
}

.bar-value {
  text-align: right;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- table ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}

th, td {
  text-align: left;
  padding: 10px 14px;
}

thead th {
  color: var(--muted);
  font-weight: 600;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--panel-alt);
  border-bottom: 1px solid var(--border);
}

tbody tr {
  border-bottom: 1px solid var(--border);
}

tbody tr:last-child {
  border-bottom: none;
}

tbody tr:hover {
  background: var(--panel-alt);
}

.muted {
  color: var(--muted-2);
}

.muted.small {
  font-size: 12px;
}

.empty-state {
  color: var(--muted-2);
  font-size: 13px;
  padding: 20px;
  text-align: center;
}

@media (max-width: 560px) {
  .wrap {
    padding: 18px 14px 48px;
  }
  .bar-row {
    grid-template-columns: 90px 1fr 70px;
  }
}

/* ---------- messages ---------- */

.thread-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 12px;
}

.thread-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.thread-who {
  font-weight: 700;
  font-size: 14px;
}

.thread-sub {
  color: var(--muted);
  font-size: 12.5px;
}

.thread-messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.msg-bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--neutral-bg);
  align-self: flex-start;
}

.msg-bubble.host {
  align-self: flex-end;
  background: var(--text);
  color: var(--bg);
}

.msg-bubble.host .msg-meta {
  color: rgba(255, 255, 255, 0.65);
}

.msg-text {
  font-size: 13.5px;
  white-space: pre-line;
}

.msg-meta {
  font-size: 11px;
  color: var(--muted-2);
  margin-top: 4px;
}

/* ---------- admin actions ---------- */

.row-actions {
  white-space: nowrap;
  text-align: right;
}

.btn-link {
  background: none;
  border: none;
  padding: 4px 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link:hover {
  color: var(--muted);
}

.btn-link.btn-danger {
  color: var(--negative);
}

.actions-status {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 14px;
}

.actions-status.success {
  background: var(--positive-bg);
  color: var(--positive);
}

.actions-status.error {
  background: var(--negative-bg);
  color: var(--negative);
}

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

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

.action-form {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.action-form h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

.action-form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.action-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.action-form input,
.action-form select,
.modal input,
.modal select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--panel-alt);
}

.action-form button,
.modal-actions button,
.modal-actions a,
#compose-send-btn,
.logement-form button {
  margin-top: 4px;
  padding: 9px 14px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.action-form button:hover,
.modal-actions button:hover,
.modal-actions a:hover,
#compose-send-btn:hover:not(:disabled),
.logement-form button:hover:not(:disabled) {
  opacity: 0.88;
}

.logement-form button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#compose-send-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--neutral-bg) !important;
  color: var(--text) !important;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 16px;
}

.modal {
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal h3 {
  margin: 0;
  font-size: 15px;
}

.modal label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}

.modal .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 4px;
}

/* ---------- top nav ---------- */





/* ---------- messages page ---------- */

.wrap-wide {
  max-width: 1320px;
}

.messages-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}

.roster-panel {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 140px);
  min-height: 480px;
}

.roster-search {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  font-size: 13px;
  background: var(--panel-alt);
}

.roster-search:focus {
  outline: none;
  border-color: var(--muted-2);
}

.roster-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.roster-filter {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.roster-filter:hover {
  color: var(--text);
  background: var(--neutral-bg);
}

.roster-filter.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.roster-count {
  font-size: 11.5px;
  color: var(--muted-2);
}

.roster-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.roster-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
}

.roster-item:hover {
  background: var(--panel-alt);
}

.roster-item.active {
  background: var(--neutral-bg);
  border-color: var(--border);
}

.roster-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--muted-2);
}

.roster-item.contacted .roster-dot {
  background: var(--positive);
}

.roster-item-body {
  min-width: 0;
  flex: 1;
}

.roster-item-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-item-sub {
  font-size: 11.5px;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.roster-item-status {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: 999px;
  flex: none;
}

.roster-item-status.current {
  background: var(--positive-bg);
  color: var(--positive);
}

.roster-item-status.upcoming {
  background: var(--neutral-bg);
  color: var(--muted);
}

.roster-item-status.past {
  background: var(--panel-alt);
  color: var(--muted-2);
}

.thread-panel {
  padding: 0;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

.thread-empty {
  color: var(--muted-2);
  font-size: 13px;
  padding: 60px 20px;
  text-align: center;
}

.thread-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}

.thread-panel-who {
  font-weight: 700;
  font-size: 15px;
}

.thread-panel-sub {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 2px;
}

.thread-panel-messages {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 420px;
  flex: 1;
}

.compose-box {
  border-top: 1px solid var(--border);
  padding: 14px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.compose-warning {
  font-size: 11.5px;
  color: var(--muted);
  background: var(--neutral-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  line-height: 1.4;
}

.compose-status {
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}

.compose-status.success {
  background: var(--positive-bg);
  color: var(--positive);
}

.compose-status.error {
  background: var(--negative-bg);
  color: var(--negative);
}

.compose-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
}

.compose-text:focus {
  outline: none;
  border-color: var(--muted-2);
}

.compose-actions {
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 800px) {
  .messages-layout {
    grid-template-columns: 1fr;
  }
  .roster-panel {
    max-height: 360px;
    min-height: 0;
  }
}

/* ---------- logements page ---------- */

.logements-intro {
  font-size: 13px;
  color: var(--muted);
  max-width: 760px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.logements-loading {
  font-size: 13px;
  color: var(--muted);
  padding: 20px;
}

.logements-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.logement-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
}

.logement-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.logement-name {
  font-size: 15px;
  margin: 0 0 2px;
}

.logement-sub {
  font-size: 12px;
  color: var(--muted-2);
}

.logement-toggle {
  border: 1px solid var(--border);
  background: var(--panel-alt);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  flex: none;
}

.logement-toggle:hover {
  background: var(--neutral-bg);
}

.logement-summary {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 8px;
}

.logement-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.logement-form[hidden] {
  display: none;
}

.logement-form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

.logement-form legend {
  grid-column: 1 / -1;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted-2);
  margin-bottom: 2px;
  padding: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.form-field-wide {
  grid-column: 1 / -1;
}

.form-field input,
.form-field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--panel-alt);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--muted-2);
}

.form-field textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.save-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.save-status.success {
  color: var(--positive);
}

.save-status.error {
  color: var(--negative);
}

@media (max-width: 800px) {
  .logement-form fieldset {
    grid-template-columns: 1fr;
  }
}

.form-error {
  color: var(--negative);
  font-size: 12.5px;
  font-weight: 600;
}

/* ---------- calendrier page ---------- */

.cal-panel {
  padding: 0;
  overflow: hidden;
}

.cal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

#cal-grid {
  display: inline-block;
  min-width: 100%;
}

.cal-head-row {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.cal-row-label {
  flex: none;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  border-right: 1px solid var(--border);
  position: sticky;
  left: 0;
  background: var(--panel);
  z-index: 1;
}

.cal-corner {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-2);
  justify-content: center;
}

.cal-day-heads {
  display: flex;
}

.cal-day-head {
  flex: 1 0 0;
  min-width: 38px;
  padding: 8px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: var(--panel-alt);
}

.cal-day-head + .cal-day-head {
  border-left: 1px solid var(--border);
}

.cal-day-num {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}

.cal-day-dow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted-2);
}

.cal-day-head.cal-weekend {
  background: color-mix(in srgb, var(--text) 4%, var(--panel-alt));
}

.cal-day-head.cal-today-col {
  background: var(--neutral-bg);
}

.cal-day-head.cal-today-col .cal-day-num {
  color: var(--text);
}

.cal-row {
  display: flex;
  border-bottom: 1px solid var(--border);
}

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

.cal-row-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.cal-row-city {
  font-size: 11px;
  color: var(--muted-2);
}

.cal-row-track {
  position: relative;
}

/* Tiret vertical pointillé à chaque frontière de jour, pleine hauteur de la ligne. */
.cal-day-sep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--border);
  pointer-events: none;
}

/* Léger bandeau sur les colonnes week-end (corps de la grille). */
.cal-weekend-band {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--text) 4%, transparent);
  pointer-events: none;
}

.cal-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text);
  opacity: 0.5;
  pointer-events: none;
}

.cal-bar {
  position: absolute;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  padding: 0 10px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-shadow: var(--shadow);
}

.cal-bar:hover {
  opacity: 0.88;
}

.cal-bar-label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-bar.cal-bar-block {
  background: var(--neutral-bg);
  color: var(--muted);
  box-shadow: none;
  border: 1px dashed var(--muted-2);
}

.cal-legend {
  display: flex;
  gap: 18px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

.cal-legend-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.cal-legend-today {
  background: var(--text);
  opacity: 0.5;
}

.cal-legend-block {
  background: var(--neutral-bg);
  border: 1px dashed var(--muted-2);
}

.cal-modal {
  max-width: 420px;
}

.cal-modal-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.cal-modal-row:first-of-type {
  border-top: none;
}

.cal-modal-row .k {
  color: var(--muted);
}

.cal-modal-row .v {
  font-weight: 600;
  text-align: right;
}

@media (max-width: 800px) {
  .cal-row-label {
    min-width: 120px;
  }
  .cal-row-name {
    max-width: 100px;
  }
}

/* --- Messages automatiques (page Messages) --- */
.am-panel { background:var(--panel); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; margin:0 0 24px; }
.am-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:14px; }
.am-head h2 { margin:0; font-size:18px; }
.am-actions { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.am-toggle { font-size:13px; color:var(--muted); cursor:pointer; user-select:none; }
.am-btn { background:var(--accent-2); color:#fff; border:0; border-radius:var(--radius-md); padding:8px 14px; font-size:13px; cursor:pointer; }
.am-btn:disabled { opacity:.5; cursor:default; }
.am-banner { border-radius:var(--radius-md); padding:10px 14px; font-size:13px; margin-bottom:12px; }
.am-off { background:var(--neutral-bg); color:var(--muted); }
.am-sim { background:var(--badge-bg); color:var(--badge-text); }
.am-live { background:var(--positive-bg); color:var(--positive); }
.am-msg { min-height:18px; font-size:13px; margin-bottom:8px; }
.am-note-ok { color:var(--positive); }
.am-note-err { color:var(--negative); }
.am-table { width:100%; border-collapse:collapse; font-size:13px; }
.am-table th { text-align:left; padding:8px; border-bottom:1px solid var(--border); color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; }
.am-table td { padding:10px 8px; border-bottom:1px solid var(--border); vertical-align:top; }
.am-sub { color:var(--muted-2); font-size:11px; }
.am-done { color:var(--positive); }
.am-due { color:var(--negative); }
.am-up { color:var(--muted); }
.am-na { color:var(--muted-2); }
.am-send { margin-top:4px; background:var(--accent); color:var(--panel); border:0; border-radius:var(--radius-sm); padding:4px 10px; font-size:11px; cursor:pointer; }
.am-note { font-size:13px; color:var(--muted); margin-top:10px; }
.am-manual { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); }
.am-manual h3 { font-size:13px; margin:0 0 6px; }
.am-manual ul { margin:6px 0 0; padding-left:18px; font-size:12px; color:var(--muted); }
.am-manual li { margin-bottom:3px; }
.am-view { margin-top:4px; background:var(--neutral-bg); color:var(--text); border:1px solid var(--border); border-radius:var(--radius-sm); padding:3px 8px; font-size:10px; cursor:pointer; }
.am-view:hover { background:var(--border); }
.am-modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); align-items:center; justify-content:center; z-index:9999; padding:24px; }
.am-modal-box { background:var(--panel); border-radius:var(--radius-lg); max-width:680px; width:100%; max-height:80vh; display:flex; flex-direction:column; overflow:hidden; }
.am-modal-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border); }
.am-modal-box pre { margin:0; padding:20px; overflow:auto; white-space:pre-wrap; word-break:break-word; font-family:inherit; font-size:13px; line-height:1.55; color:var(--text); }

/* === MSG_COMPACT_V1 (debut) === */
.msg-compact { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); overflow: hidden; }
.msg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--panel-alt); }
.msg-count { font-size: 13px; color: var(--muted); }
.msg-all { font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; }
.msg-all:hover { text-decoration: underline; }
.msg-row { display: grid; grid-template-columns: 8px minmax(90px, 150px) minmax(0, 130px) minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.msg-row:hover { background: var(--panel-alt); }
.msg-dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.msg-row.unanswered .msg-dot { background: var(--negative); }
.msg-row.unanswered .msg-who { color: var(--negative); }
.msg-who { font-weight: 600; font-size: 14px; }
.msg-place { font-size: 12px; color: var(--muted-2); }
.msg-who, .msg-place, .msg-preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-preview { font-size: 13px; color: var(--muted); }
.msg-when { font-size: 12px; color: var(--muted-2); white-space: nowrap; }
.msg-go { color: var(--muted-2); font-size: 16px; text-align: right; }
.msg-more { display: block; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); text-decoration: none; background: var(--panel-alt); }
.msg-more:hover { color: var(--text); }
@media (max-width: 760px) {
  .msg-row { grid-template-columns: 8px minmax(0, 1fr) auto; grid-template-areas: "dot who when" ". preview preview"; row-gap: 2px; }
  .msg-dot { grid-area: dot; }
  .msg-who { grid-area: who; }
  .msg-when { grid-area: when; }
  .msg-preview { grid-area: preview; }
  .msg-place, .msg-go { display: none; }
}
/* === MSG_COMPACT_V1 (fin) === */

/* ================================================================== */
/* === THEME_V1 : habillage Apple / Trade Republic, clair + sombre == */
/* Ce bloc est ajoute a la fin de style.css : a specificite egale il  */
/* gagne, et il redefinit les variables sur lesquelles tout le reste  */
/* du fichier est construit.                                          */
/* ================================================================== */

:root {
  --bg: #f4f5f8;
  --panel: #ffffff;
  --panel-alt: #f5f7fa;
  --border: #e6e8ee;
  --text: #12141a;
  --muted: #5c616e;
  --muted-2: #9096a2;
  --accent: #2f6bff;          /* bleu vif : data + actions (remplace le noir) */
  --accent-2: #2f6bff;
  --accent-weak: rgba(47, 107, 255, 0.10);
  --positive: #12a150;        /* vert : revenus / positif */
  --positive-bg: #e7f6ee;
  --negative: #e5484d;        /* rouge : dépenses / alertes */
  --negative-bg: #fdecec;
  --neutral-bg: #eef0f4;
  --badge-bg: rgba(47, 107, 255, 0.10);
  --badge-text: #2f6bff;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(16, 22, 40, 0.04), 0 12px 32px -18px rgba(16, 22, 40, 0.18);
  --topbar-bg: rgba(244, 245, 248, 0.72);
}

[data-theme="dark"] {
  --bg: #0a0b10;
  --panel: #14161d;
  --panel-alt: #1b1e27;
  --border: #272a34;
  --text: #f3f5f9;
  --muted: #9aa0ad;
  --muted-2: #666c7a;
  --accent: #4f8cff;          /* bleu vif sur sombre (remplace le violet de la réf.) */
  --accent-2: #4f8cff;
  --accent-weak: rgba(79, 140, 255, 0.16);
  --positive: #3ddc84;        /* vert vif : revenus */
  --positive-bg: rgba(61, 220, 132, 0.14);
  --negative: #ff5c5c;        /* rouge : alertes */
  --negative-bg: rgba(255, 92, 92, 0.15);
  --neutral-bg: #21242e;
  --badge-bg: rgba(79, 140, 255, 0.18);
  --badge-text: #a9c5ff;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 14px 40px -20px rgba(0, 0, 0, 0.9);
  --topbar-bg: rgba(10, 11, 16, 0.72);
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.25s ease, color 0.25s ease;
}

h1, h2, h3 { letter-spacing: -0.02em; color: var(--text); }

/* ---- barre de navigation : rectangle flottant translucide ---- */
.topbar {
  position: sticky;
  top: 10px;
  z-index: 50;
  background: var(--topbar-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px 20px;
  box-shadow: var(--shadow);
  transition: background 0.25s ease;
}

/* ---- cartes et panneaux ---- */
.kpi-card, .year-card, .property-card, .thread-card, .panel,
.cal-panel, .compta-stat, .msg-compact, .dp-carte, .dp-depot,
section#trend, .cp-graph {
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: background 0.25s ease, border-color 0.25s ease;
}
.kpi-card:hover, .property-card:hover { transform: translateY(-1px); }
.kpi-card, .property-card { transition: transform 0.18s ease, background 0.25s ease; }

/* ---- chiffres : gras, tabulaires, style Trade Republic ---- */
.kpi-card b, .kpi-card strong, .compta-stat-value,
[class*="kpi"] [class*="value"] {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  font-weight: 700;
}

/* ---- boutons ---- */
button, .btn-secondary, .nav-btn {
  font-family: inherit;
  transition: transform 0.12s ease, background 0.15s ease, opacity 0.15s ease;
}
button:active { transform: scale(0.97); }
.compta-btn, .dp-btn { border-radius: var(--radius-md); }
.compta-btn-primary, .dp-btn { background: var(--accent); color: var(--on-accent); }
.compta-btn-secondary { background: var(--neutral-bg); color: var(--text); }

/* ---- champs de saisie ---- */
input, select, textarea {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.25s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}

/* ---- tableaux ---- */
table { color: var(--text); }
table th { color: var(--muted); font-weight: 600; }
table.compta-table, table.bookings-table {
  background: var(--panel);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
}
table.compta-table th, table.compta-table td { border-color: var(--border); }
table.compta-table th { background: var(--panel-alt); }

/* ---- badges ---- */
.compta-cat-badge, .badge {
  background: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 999px;
}

/* ================================================================== */
/* Surcharges des styles injectes par les scripts (couleurs en dur)   */
/* ================================================================== */

/* Comptabilite : pastilles de periode, graphique, infobulle */
#compta-page .cp-chip {
  background: var(--panel); border-color: var(--border); color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease;
}
#compta-page .cp-chip:hover { border-color: var(--muted-2); color: var(--text); }
#compta-page .cp-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
#compta-page .cp-graph { background: var(--panel); border-color: var(--border); }
#compta-page .cp-graph-titre { color: var(--text); }
#compta-page .cp-graph-sous, #compta-page .cp-count { color: var(--muted); }
#compta-page .cp-lien { color: var(--muted); }
#compta-page .cp-leg { color: var(--muted); }
#compta-page .cp-tab-chiffres th { background: var(--panel-alt); color: var(--muted); }
#compta-page .cp-tab-chiffres th, #compta-page .cp-tab-chiffres td { border-color: var(--border); }
#compta-page .cp-tip { background: var(--text); color: var(--bg); }
#compta-page .cp-just { background: var(--badge-bg); color: var(--badge-text); border-radius: 999px; }
#compta-page .cp-just.manque { background: var(--negative-bg); color: var(--negative); }
#compta-page .cp-alerte { background: var(--negative-bg); color: var(--negative); border-color: transparent; }
#compta-page .cp-vide { color: var(--muted); }

/* Le graphique SVG : axes et ligne des entrees suivent le theme */
[data-theme="dark"] .cp-svg line[stroke="#eceef1"] { stroke: var(--border); }
[data-theme="dark"] .cp-svg polyline[stroke="#14161a"] { stroke: #f5f5f7; }
[data-theme="dark"] .cp-svg polyline[stroke="#ffffff"] { stroke: var(--panel); }
[data-theme="dark"] .cp-svg circle[fill="#14161a"] { fill: #f5f5f7; stroke: var(--panel); }
[data-theme="dark"] .cp-svg text { fill: var(--muted-2); }
[data-theme="dark"] #compta-page .cp-pastille-ligne { border-top-color: #f5f5f7; }

/* Depot de factures (page menage + compta) */
body .dp-carte { background: var(--panel); border-color: var(--border); }
body .dp-titre { color: var(--text); }
body .dp-sous, body .dp-vide { color: var(--muted); }
body .dp-champ label { color: var(--muted); }
body .dp-champ select, body .dp-champ input {
  background: var(--panel); color: var(--text); border-color: var(--border);
}
body .dp-btn { background: var(--accent); color: var(--on-accent); }
body .dp-btn-fin { background: var(--neutral-bg); color: var(--text); border-radius: var(--radius-md); }
body .dp-hist { border-color: var(--border); }
body .dp-hist-l { border-color: var(--border); }
body .dp-depot { background: var(--panel-alt); border-color: var(--border); }
body .dp-piste { background: var(--panel); border-color: var(--border); color: var(--text); }
body .dp-piste:hover { border-color: var(--accent-2); background: var(--badge-bg); }
body .dp-etat-ok { background: var(--positive-bg); color: var(--positive); }
body .dp-etat-att { background: var(--neutral-bg); color: var(--muted); }
body .dp-ok { background: var(--positive-bg); color: var(--positive); border-color: transparent; }
body .dp-ko { background: var(--negative-bg); color: var(--negative); border-color: transparent; }
body .dp-attente { background: var(--neutral-bg); color: var(--muted); border-color: transparent; }

/* Apercu des messages sur l'accueil : deja ecrit avec les variables, */
/* seule la fleche et le hover meritent un raffinement.               */
#messages-section .msg-row { transition: background 0.15s ease; }
#messages-section .msg-more { transition: color 0.15s ease; }

/* ---- fenetres modales ---- */
.modal, .compta-modal { background: var(--panel); color: var(--text); border-radius: var(--radius-lg); }
.modal-overlay, .compta-modal-overlay { background: rgba(0, 0, 0, 0.45); }
[data-theme="dark"] .modal-overlay, [data-theme="dark"] .compta-modal-overlay {
  background: rgba(0, 0, 0, 0.65);
}

/* ---- bouton de bascule clair / sombre ---- */
#mlg-theme-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 200;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, background 0.25s ease;
}
#mlg-theme-btn:hover { transform: scale(1.06); }
/* Remonte le bouton flottant au-dessus de la barre d'onglets (Ménage, mobile) ;
   en desktop le menu passe à gauche, donc pas de décalage. */
@media (max-width: 759px) { body:has(#menage-tabbar) #mlg-theme-btn { bottom: 92px; } }

/* ---- divers mode sombre : filets de securite ---- */
[data-theme="dark"] .empty-state { color: var(--muted); }
[data-theme="dark"] ::selection { background: rgba(64, 156, 255, 0.35); }
[data-theme="dark"] .generated { color: var(--muted-2); }

/* priorite sur les feuilles internes des pages */

/* titres : le sombre gagne toujours sur les couleurs codees en dur */
[data-theme="dark"] .wrap h1, [data-theme="dark"] .wrap h2, [data-theme="dark"] .wrap h3,
[data-theme="dark"] .wrap-wide h1, [data-theme="dark"] .wrap-wide h2 { color: var(--text); }

/* calendrier : en sombre, les barres deviennent claires, le texte fonce */
[data-theme="dark"] .cal-bar { color: var(--on-accent); }
[data-theme="dark"] .cal-bar.cal-bar-block { color: var(--muted); }

/* ---- THEME_V1b : entete du dashboard alignee sur une ligne ---- */
.topbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; margin: 0; }
.topbar-left h1 { margin: 0; flex: 0 0 auto; }
.topbar .property-select { width: auto; min-width: 190px; max-width: 260px; margin-left: auto; flex: 0 1 auto; }
.topbar .generated { margin: 0; white-space: nowrap; font-size: 12.5px; color: var(--muted); }

/* ---- CARDS_KPI_CSS_V1 : fiches logement avec indicateurs + selection ---- */
#cards-section .cards-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#cards-section .cards-head h2 { margin: 0; }
#cards-section .cards-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ppc { cursor: pointer; user-select: none; transition: border-color .15s ease, box-shadow .15s ease; }
.ppc:hover { border-color: var(--accent-2, #0071e3); }
.ppc.ppc-selected { border-color: var(--accent-2, #0071e3); box-shadow: 0 0 0 1.5px var(--accent-2, #0071e3) inset; }
.ppc .ppc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ppc .ppc-head h3 { margin: 0; }
.ppc .ppc-check {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--border); color: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; flex: 0 0 auto;
}
.ppc.ppc-selected .ppc-check { background: var(--accent-2, #0071e3); border-color: var(--accent-2, #0071e3); color: #fff; }
.ppc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); gap: 8px; margin-top: 12px; }
.ppc .ppc-foot { margin-top: 10px; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 8px; }
.ppc-total { padding: 16px 20px; margin: 0 0 14px; }
.ppc-total .ppc-total-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.ppc-total .ppc-total-title { font-weight: 700; }
.ppc-total .ppc-total-period { color: var(--muted); font-size: 13px; }
.ppc-total .ppc-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }

/* ================= NAV_V2 : bandeau segmente facon Trade Republic ================= */
.topbar { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 20px; }
.topbar-left { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; margin: 0; }
.topbar-left h1 { margin: 0; flex: 0 0 auto; font-size: 20px; letter-spacing: -0.02em; }
.topbar .property-select { margin-left: auto; width: auto; min-width: 190px; max-width: 260px; flex: 0 1 auto; }
.topbar .generated { flex: 0 0 100%; text-align: right; margin: 0; font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) {
  .topbar { padding: 12px 14px; }
  .topbar-left { gap: 10px; }
  .topbar .property-select { margin-left: 0; flex: 1 1 100%; max-width: none; }
  .topbar .generated { text-align: left; }
}

/* ================= MENAGE_MOBILE_V1 : page menage optimisee telephone ================= */
@media (max-width: 640px) {
  header.menage-header { position: static; margin: 10px 10px 0; padding: 13px 16px; border-radius: 16px; }
  header.menage-header h1 { font-size: 17px; }
  #menage-admin { margin: 10px 10px 0; }
  #menage-toolbar { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 12px 0; }
  #menage-filterbar, #menage-viewbar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  #menage-filterbar::-webkit-scrollbar, #menage-viewbar::-webkit-scrollbar { display: none; }
  .menage-filter-btn, .menage-view-btn { flex: 0 0 auto; padding: 10px 16px; font-size: 14px; }
  #menage-legende { padding: 10px 12px 0; gap: 10px 14px; }
  #menage-content { padding: 12px; }
  .menage-card { padding: 14px 16px; border-radius: 16px; }
  .menage-card-property { font-size: 16px; }
  .menage-note-input { font-size: 16px; }
  .menage-card-actions { gap: 8px; }
  .menage-btn { flex: 1 1 auto; min-height: 46px; padding: 12px 14px; font-size: 15px; border-radius: 12px; }
  .menage-arrivee { padding: 12px 14px; font-size: 14px; border-radius: 16px; }
  /* Calendrier en agenda vertical : une journee par ligne, jours vides masques */
  .menage-cal-week { grid-template-columns: 1fr; gap: 8px; }
  .menage-cal-day { min-height: auto; display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; }
  .menage-cal-day:not(.is-today):not(:has(.menage-cal-pill)):not(:has(.menage-cal-arrivee)) { display: none; }
  .menage-cal-date { min-width: 60px; margin: 0; font-size: 13px; }
  .menage-cal-events { flex: 1; }
  .menage-cal-pill, .menage-cal-arrivee { font-size: 13px; padding: 8px 10px; }
  .menage-cal-pill-actions button { padding: 8px 12px; font-size: 15px; min-width: 40px; }
}

/* ================= SIDEBAR_V1 : menu lateral groupe par activite ================= */
:root { --sidebar-w: 250px; }
.mlg-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; z-index: 100; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mlg-sidebar .sb-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 16px; font-weight: 700; font-size: 18px; letter-spacing: -0.02em; color: var(--text); }
.mlg-sidebar .sb-logo { width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; }
.mlg-sidebar .sb-section { margin-top: 16px; padding: 0 10px 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.mlg-sidebar .sb-link { display: flex; align-items: center; gap: 11px; padding: 9px 10px; margin-bottom: 2px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: background .15s ease, color .15s ease; }
.mlg-sidebar .sb-ico { display: inline-flex; flex: 0 0 auto; }
.mlg-sidebar .sb-ico svg { width: 19px; height: 19px; opacity: .78; }
.mlg-sidebar .sb-link:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.mlg-sidebar .sb-link.active { background: var(--accent); color: var(--on-accent); }
.mlg-sidebar .sb-link.active .sb-ico svg { opacity: 1; }
.mlg-sidebar .sb-spacer { flex: 1 1 auto; min-height: 20px; }
/* Interrupteur clair / sombre en pied de menu */
.mlg-sidebar .sb-theme { display: flex; align-items: center; gap: 10px; margin-top: 6px; padding: 9px 10px; width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt); color: var(--text); cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; }
.mlg-sidebar .sb-theme:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
.mlg-sidebar .sb-theme-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--border); flex: 0 0 auto; transition: background .2s ease; }
.mlg-sidebar .sb-theme-knob { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.4); transition: transform .2s ease; }
.mlg-sidebar .sb-theme[data-theme-state="dark"] .sb-theme-track { background: var(--accent); }
.mlg-sidebar .sb-theme[data-theme-state="dark"] .sb-theme-knob { transform: translateX(16px); }
.mlg-sidebar .sb-theme-txt::before { content: "Thème · "; color: var(--muted); font-weight: 500; }
/* Sur les pages avec menu, le switch de la sidebar remplace le bouton flottant */
body.has-sidebar #mlg-theme-btn { display: none; }
body.has-sidebar { padding-left: var(--sidebar-w); }
body.has-sidebar .topbar h1 { font-size: 20px; letter-spacing: -0.02em; }
.sb-hamburger { display: none; }
.sb-overlay { display: none; }
@media (max-width: 900px) {
  body.has-sidebar { padding-left: 0; }
  .mlg-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: 0 0 40px rgba(0,0,0,.28); width: 268px; }
  body.sb-open .mlg-sidebar { transform: none; }
  .sb-hamburger { display: inline-flex; align-items: center; justify-content: center; position: fixed; top: 14px; left: 14px; z-index: 120; width: 42px; height: 42px; border-radius: 12px; background: var(--panel); border: 1px solid var(--border); color: var(--text); box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.1)); cursor: pointer; }
  .sb-hamburger svg { width: 22px; height: 22px; }
  body.sb-open .sb-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.42); z-index: 99; }
  body.has-sidebar .topbar { padding-left: 58px; }
}

/* Bouton retour vers le tableau de bord admin (page menage, admins seulement) */
.menage-backlink { display: inline-flex; align-items: center; gap: 6px; margin: 12px 16px 0; padding: 8px 14px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow, none); }
.menage-backlink svg { width: 16px; height: 16px; }
.menage-backlink:hover { background: color-mix(in srgb, var(--text) 6%, transparent); }
@media (max-width: 640px) { .menage-backlink { margin: 10px 10px 0; } }
/* ===== CAL_SCROLL_V1 : barre de défilement horizontale visible sur le calendrier =====
   À AJOUTER À LA FIN de public/style.css (Hostinger : /root/mlg-dashboard/public/style.css)

   Problème résolu : le calendrier fait 31 jours × 38px (+ colonne des noms) = plus large
   que la fenêtre, mais l'ancienne règle « overflow: auto hidden » cachait la barre de
   défilement (invisible sur Mac/trackpad tant qu'on ne scrolle pas). Résultat : on ne
   voyait pas les derniers jours du mois.

   La correction force une VRAIE barre de défilement, toujours visible et bien large,
   aux couleurs de l'appli, qu'on peut attraper et glisser pour voir tous les jours (1→31).
   Les barres de réservation sont positionnées en %, donc elles restent parfaitement alignées.
   Fonctionne en thème clair et sombre (variables CSS) et sur téléphone.
   Vérifié en direct sur le vrai calendrier : les 31 jours sont bien atteignables. */

.cal-scroll{
  overflow-x: scroll !important;
  overflow-y: hidden !important;
}
.cal-scroll::-webkit-scrollbar{
  height: 14px;
  -webkit-appearance: none;
  appearance: none;
}
.cal-scroll::-webkit-scrollbar-track{
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 999px;
}
.cal-scroll::-webkit-scrollbar-thumb{
  background: var(--accent);
  border-radius: 999px;
  border: 3px solid var(--panel);
  min-width: 48px;
}
.cal-scroll::-webkit-scrollbar-thumb:hover{
  background: var(--accent-2, var(--accent));
}

/* ============ Harmonisation UI (2026-09-17) ============ */

/* Boutons d'action pleins : meme apparence partout, lisibles en clair ET en sombre. */
.cf-btn:not(.cf-btn-ghost):not(.cf-btn-danger),
.rg-save, .kb-save, #wa-send-btn, .wa-compose button,
.dp-btn, .am-btn, .compta-btn-primary {
  padding: 10px 18px !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  background: var(--accent) !important;
  color: var(--on-accent) !important;
  font-family: inherit;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: opacity 0.15s ease;
}
.cf-btn:not(.cf-btn-ghost):not(.cf-btn-danger):hover:not(:disabled),
.rg-save:hover:not(:disabled), .kb-save:hover:not(:disabled),
#wa-send-btn:hover:not(:disabled), .wa-compose button:hover:not(:disabled),
.dp-btn:hover:not(:disabled), .am-btn:hover:not(:disabled),
.compta-btn-primary:hover:not(:disabled) { opacity: 0.88; }

/* Boutons secondaires / discrets : contour neutre coherent. */
.cf-btn-ghost, .compta-btn-secondary, .cf-mini, .dp-btn-fin {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 600; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cf-btn-ghost:hover, .compta-btn-secondary:hover, .cf-mini:hover, .dp-btn-fin:hover { background: var(--neutral-bg) !important; }
.cf-btn-danger { border-radius: var(--radius-sm) !important; }

/* Champs texte harmonises (reglages / coffre / base de connaissances). */
.rg-field input, .cf-field input, .cf-entry input, .cf-entry textarea,
.kb-item textarea, .wa-compose textarea {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  background: var(--panel-alt) !important;
  color: var(--text) !important;
  font-family: inherit;
}

/* Focus visible coherent. */
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
input:focus, textarea:focus, select:focus { border-color: var(--muted-2); }

/* Polish typographique (réf. interface-design) :
   - chiffres à chasse fixe partout où des valeurs changent (tables, KPI, montants,
     compteurs) -> pas de "saut" de largeur quand les chiffres varient ;
   - titres équilibrés (pas de mot orphelin), corps de texte "pretty". */
table, .kpi-value, .kpi-delta, .cp-num, .cp-val, .am-table td,
.benefice-total, .benefice-table td, .rg-esc-meta, .metric-value, .stat-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
h1, h2, h3 { text-wrap: balance; }
p, .sub, .rg-hint, .mi-hint, .mm-intro { text-wrap: pretty; }

/* Accessibilite : respecter la preference "mouvement reduit" du systeme.
   Coupe animations/transitions/defilement anime pour les personnes sensibles
   au mouvement (priorite UX). Aucun effet visuel pour les autres. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scroll fluide + barres de defilement fines et discretes. */
html { scroll-behavior: smooth; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-2); background-clip: padding-box; }

/* ---- Passe 2 : cartes coherentes + mobile ---- */
/* Cartes de premier niveau : meme rendu que .panel (coins arrondis + ombre douce). */
.rg-card, .cf-card { border-radius: var(--radius-lg) !important; box-shadow: var(--shadow); }
/* Cartes/items imbriques : rayon moyen coherent entre eux. */
.cf-entry, .kb-item, .equipe-member { border-radius: var(--radius-md) !important; }
/* Anti-debordement horizontal (medias/tableaux). */
img, video, table { max-width: 100%; }
/* Mobile : champs a largeur fixe -> pleine largeur, lignes empilees. */
@media (max-width: 640px) {
  .rg-field input, .cf-field input,
  .menage-admin-field input, .menage-admin-phone input { max-width: 100% !important; }
  .rg-row { flex-direction: column; align-items: stretch; }
}

/* ---- Messages automatiques : accordeon repliable + tokens + interrupteur ---- */
.am-panel { background: var(--panel) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; padding: 0 !important; margin: 0 0 20px; box-shadow: var(--shadow); overflow: hidden; }
.am-summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 15px 20px; font-weight: 700; color: var(--text); }
.am-summary::-webkit-details-marker { display: none; }
.am-summary::before { content: "\25B8"; color: var(--muted); font-size: 12px; }
.am-panel[open] .am-summary::before { content: "\25BE"; }
.am-summary-t { font-size: 16px; }
.am-summary-meta { color: var(--muted); font-weight: 500; font-size: 13px; margin-left: auto; }
.am-body { padding: 0 20px 20px; }
.am-head { margin-bottom: 12px; }
.am-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.am-btn { background: var(--accent) !important; color: var(--on-accent) !important; border: none !important; border-radius: var(--radius-sm) !important; padding: 9px 16px !important; font-weight: 600 !important; font-size: 14px !important; }
.am-table th { color: var(--muted) !important; border-bottom-color: var(--border) !important; }
.am-table td { border-bottom-color: var(--border) !important; }

/* Interrupteur coulissant reutilisable (cohesion avec Reglages). */
.ui-switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; font-size: 14px; color: var(--text); }
.ui-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ui-slider { position: relative; width: 42px; height: 24px; background: var(--neutral-bg); border: 1px solid var(--border); border-radius: 24px; transition: background .2s ease; flex: none; }
.ui-slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .2s ease; }
.ui-switch input:checked + .ui-slider { background: var(--positive); border-color: var(--positive); }
.ui-switch input:checked + .ui-slider::before { transform: translateX(18px); }

/* Cases a cocher / radios aux couleurs du theme (fini le bleu navigateur). */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ============================================================
   Accueil (dashboard) — mise en page façon widget (V2)
   ============================================================ */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 2px 0 18px; }
.dash-hello { font-size: 27px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); }
.dash-hello #greet-name { color: var(--accent); }
.dash-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dash-controls .property-select { margin: 0; }

.hero-band { display: flex; gap: 22px; align-items: stretch; padding: 20px 22px; margin-bottom: 16px; }
.hero-main { flex: 0 0 auto; min-width: 220px; display: flex; flex-direction: column; justify-content: center; }
.hero-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 700; }
.hero-rev-row { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 4px; flex-wrap: wrap; }
.hero-rev { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.hero-delta { font-size: 13px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.hero-delta.positive { background: var(--positive-bg); color: var(--positive); }
.hero-delta.negative { background: var(--negative-bg); color: var(--negative); }
.hero-delta.neutral { background: var(--neutral-bg); color: var(--muted); }
.hero-sub { font-size: 13.5px; color: var(--muted); }
.hero-detail { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; border-left: 1px solid var(--border); padding-left: 22px; }
.hero-detail > div { width: 100%; }
.hero-detail .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.hero-detail .kpi-card { padding: 12px 14px; box-shadow: none; background: var(--panel-alt); }
.hero-detail .kpi-card .kpi-value { font-size: 20px; }
.hero-detail .kpi-card .kpi-label { margin-bottom: 5px; font-size: 11px; }
.hero-detail .kpi-delta { margin-top: 7px; font-size: 11.5px; padding: 2px 8px; }
@media (max-width: 820px) {
  .hero-band { flex-direction: column; }
  .hero-detail { border-left: none; border-top: 1px solid var(--border); padding-left: 0; padding-top: 16px; }
}

.dash-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: minmax(0, 1fr); } }

.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.card-head h2 { margin: 0; font-size: 15px; }
.card-link { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.card-link:hover { text-decoration: underline; }

/* Graphique d'accueil (ApexCharts) : remplit la carte, hauteur adaptée */
.trend-panel { padding: 12px 14px 6px; }
#trend-apex { width: 100%; min-height: 340px; }
@media (max-width: 640px) { #trend-apex { min-height: 280px; } }
.trend-fallback { color: var(--muted); padding: 48px 10px; text-align: center; font-size: 13.5px; }
/* Le rendu ApexCharts hérite du thème via son option theme.mode ; on garde juste
   la police du dashboard et une infobulle lisible. */
.apexcharts-tooltip { font-family: inherit !important; }
.apexcharts-legend-text { font-family: inherit !important; }

/* Barre du haut retirée sur toutes les pages (le menu latéral suffit) */
.topbar { display: none !important; }

/* ===== Fiches logement compactes (sélecteur) ===== */
.fiches-section { margin: 0 0 16px; }
.fiches-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 10px; }
.fiches-hint { font-size: 12.5px; color: var(--muted); }
.fiches-clear { border: 1px solid var(--border); background: var(--panel); color: var(--text); border-radius: var(--radius-sm); padding: 6px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.fiches-clear:hover { background: var(--neutral-bg); }
.fiches-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
@media (max-width: 900px) { .fiches-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .fiches-grid { grid-template-columns: 1fr; } }
.fiche { text-align: left; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 13px 14px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; box-shadow: var(--shadow); }
.fiche:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.fiche.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset, var(--shadow); }
.fiche-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
.fiche-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 2px 0; }
.fiche-line b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ===== Camembert répartition ===== */
.pie-panel { padding: 15px 16px; }
#pie-apex { width: 100%; min-height: 300px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 640px) { #pie-apex { min-height: 280px; } }

/* ===== Grille "deux cartes égales" (arrivées / messages) ===== */
.dash-grid-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .dash-grid-even { grid-template-columns: minmax(0, 1fr); } }
.mini-card { padding: 15px 16px; }
.mini-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.mini-row:first-child { border-top: none; }
.mini-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mini-who { font-weight: 600; font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-pill { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.mini-pill.money { background: var(--positive-bg); color: var(--positive); }
.mini-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: 0 0 auto; }
.mini-dot.on { background: var(--negative); }
.mini-badge { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }
.mini-badge.on { background: var(--negative-bg); color: var(--negative); }
.mini-empty { color: var(--muted); font-size: 13px; padding: 16px 2px; }

/* ===== Page Logements : cartes plus vivantes + chips copiables ===== */
.logement-card-head .lg-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.lg-avatar { width: 40px; height: 40px; border-radius: 11px; background: var(--accent); color: var(--on-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; flex: 0 0 auto; }
.logement-quick { padding: 12px 0 2px; }
.lg-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.lg-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--panel-alt); color: var(--text); border-radius: 999px; padding: 6px 12px; cursor: pointer; font: inherit; font-size: 13px; transition: border-color .15s ease, background .15s ease; }
.lg-chip:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--accent-weak, color-mix(in srgb, var(--accent) 10%, transparent)); }
.lg-chip-k { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; }
.lg-chip-v { font-weight: 600; }
.lg-chip-v.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; }
.lg-chip-copy { color: var(--accent); font-size: 13px; }
.lg-empty { color: var(--muted); font-size: 13px; font-style: italic; padding: 6px 0; }

/* ===== Base de connaissances commune (page Logements) ===== */
.commonkb-section { margin-top: 26px; }
.commonkb-head { margin-bottom: 12px; }
.commonkb-head h2 { margin: 0 0 2px; font-size: 18px; }
.commonkb-sub { font-size: 13px; color: var(--muted); margin: 0; }
.commonkb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .commonkb-grid { grid-template-columns: 1fr; } }
.commonkb-box { padding: 15px 16px; }
.commonkb-box h3 { margin: 0 0 8px; font-size: 14.5px; }
.commonkb-box textarea { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--panel); color: var(--text); font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.commonkb-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.commonkb-actions button { border: none; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-weight: 600; padding: 10px 18px; cursor: pointer; font-size: 14px; }
.commonkb-actions button:disabled { opacity: .6; cursor: default; }
.commonkb-status { font-size: 13px; }
.commonkb-status.success { color: var(--positive); }
.commonkb-status.error { color: var(--negative); }

/* ============================================================
   Aération + interface épurée (demande Louis) :
   - 30px entre les sections de chaque page
   - descriptions sous les titres retirées (on garde les
     avertissements fonctionnels : privacy KB, variables, etc.)
   ============================================================ */
.wrap > section, .wrap-wide > section { margin-bottom: 30px; }
.wrap > section:last-child, .wrap-wide > section:last-child { margin-bottom: 0; }
.rg-card { margin-bottom: 30px; }

p.sub, div.sub,
.section-sub, .rg-intro, .commonkb-sub, .fiches-hint,
.mm-intro, .menage-sub, .kb-intro, .ota-intro { display: none !important; }

/* Pastille de variation (mois/année précédent) sur les fiches logement */
.fiche-delta { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: middle; white-space: nowrap; }
.fiche-delta.positive { background: var(--positive-bg); color: var(--positive); }
.fiche-delta.negative { background: var(--negative-bg); color: var(--negative); }
.fiche-delta.neutral { background: var(--neutral-bg); color: var(--muted); }


/* ============================================================
   Architecture de page : sections aérées + en-têtes cohérents
   (les descriptions sous les titres étant masquées, on redonne
    au titre une respiration régulière, et on sépare nettement
    les sections imbriquées.)
   ============================================================ */
.wrap > section > h2, .wrap-wide > section > h2,
#actions-section > h2 {
  font-size: 18px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 16px;
}
/* Section imbriquée "Créer / bloquer" sous le calendrier : séparateur net + air */
#actions-section { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--border); }

/* ================================================================== */
/* === THEME_V2 : « poste de pilotage » (référence Louis, oct. 2026) == */
/* Fond quasi noir / blanc cassé, cartes très arrondies, Helvetica    */
/* Neue fine, gros chiffres légers, accent = encre (noir en clair,    */
/* blanc en sombre), orange en touche. Ajouté en dernier : il gagne   */
/* sur THEME_V1 et redéfinit les jetons dont tout le reste dépend.    */
/* Texte sur un fond « accent » : toujours var(--on-accent).          */
/* ================================================================== */
:root {
  --bg: #f2f2f0;
  --panel: #ffffff;
  --panel-alt: #f6f6f4;
  --border: rgba(0, 0, 0, 0.07);
  --text: #111113;
  --muted: #6e6e73;
  --muted-2: #a1a1a6;
  --accent: #111113;
  --on-accent: #ffffff;
  --accent-2: #f26b1d;
  --accent-weak: rgba(242, 107, 29, 0.10);
  --positive: #17924a;
  --positive-bg: rgba(23, 146, 74, 0.10);
  --negative: #e0442a;
  --negative-bg: rgba(224, 68, 42, 0.10);
  --neutral-bg: rgba(0, 0, 0, 0.05);
  --badge-bg: rgba(0, 0, 0, 0.05);
  --badge-text: #2a2a2e;
  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.02), 0 24px 48px -30px rgba(0, 0, 0, 0.35);
  --topbar-bg: rgba(242, 242, 240, 0.72);
  --glass: rgba(255, 255, 255, 0.66);
  --glass-border: rgba(255, 255, 255, 0.7);
  --glass-hover: rgba(0, 0, 0, 0.05);
  --sidebar-bg: #ffffff;
  --nav-active: rgba(0, 0, 0, 0.06);
  --font: "Helvetica Neue", Helvetica, Inter, Arial, sans-serif;
}
[data-theme="dark"] {
  --bg: #0b0b0c;
  --panel: #151517;
  --panel-alt: #1c1c1f;
  --border: rgba(255, 255, 255, 0.07);
  --text: #f3f3f4;
  --muted: #8e8e93;
  --muted-2: #5d5d64;
  --accent: #f3f3f4;
  --on-accent: #0b0b0c;
  --accent-2: #ff8a3d;
  --accent-weak: rgba(255, 138, 61, 0.14);
  --positive: #3ddc84;
  --positive-bg: rgba(61, 220, 132, 0.12);
  --negative: #ff6b4a;
  --negative-bg: rgba(255, 107, 74, 0.12);
  --neutral-bg: rgba(255, 255, 255, 0.06);
  --badge-bg: rgba(255, 255, 255, 0.08);
  --badge-text: #e6e6e6;
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.9);
  --topbar-bg: rgba(11, 11, 12, 0.72);
  --glass: rgba(24, 24, 27, 0.58);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-hover: rgba(255, 255, 255, 0.06);
  --sidebar-bg: #0d0d0f;
  --nav-active: rgba(255, 255, 255, 0.09);
}
body { font-family: var(--font); }
h1, h2, h3 { font-weight: 400; letter-spacing: -0.015em; }
.wrap > .topbar h1, .topbar-left h1 { font-weight: 500; }

/* Gros chiffres fins, intitulés discrets en minuscules */
.hero-lbl, .kpi-card .kpi-label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 13px; color: var(--muted); }
.hero-rev { font-weight: 300; font-size: 46px; letter-spacing: -0.03em; }
.kpi-card .kpi-value { font-weight: 300; font-size: 30px; letter-spacing: -0.02em; }
table th { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12px; color: var(--muted); }

/* Cartes et panneaux : arrondis généreux, bordure fine */
.panel { border-radius: var(--radius-lg); border-color: var(--border); }

/* Onglets et filtres en pilules */
.msg-tab, .roster-filter, .menage-filter-btn, .rg-subtab { border-radius: 999px; }

/* Menu latéral : actif discret (verre), logo contrasté */
.mlg-sidebar { background: var(--sidebar-bg); border-color: var(--border); }
.mlg-sidebar .sb-brand { font-weight: 500; }
.mlg-sidebar .sb-logo { background: var(--text); color: var(--bg); border-radius: 10px; }
.mlg-sidebar .sb-link { color: var(--muted); font-weight: 400; border-radius: 12px; }
.mlg-sidebar .sb-link:hover { background: var(--glass-hover); color: var(--text); }
.mlg-sidebar .sb-link.active { background: var(--nav-active); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
.mlg-sidebar .sb-section { color: var(--muted-2); font-weight: 400; letter-spacing: 0.04em; }

/* Mobile : la barre du haut est masquée, on réserve la place du bouton menu (☰)
   pour qu'il ne recouvre plus le titre de la page. */
@media (max-width: 900px) {
  body.has-sidebar .wrap { padding-top: 66px; }
}

/* Menu en 5 blocs repliables : le titre du bloc est un bouton (chevron) */
.mlg-sidebar .sb-fold { display: flex; align-items: center; justify-content: space-between; width: 100%; border: none; background: transparent; cursor: pointer; font: inherit; font-size: 11px; text-align: left; border-radius: 8px; padding-top: 4px; }
.mlg-sidebar .sb-fold:hover { color: var(--text); }
.mlg-sidebar .sb-fold svg { width: 14px; height: 14px; transition: transform .18s ease; opacity: .7; }
.mlg-sidebar .sb-group.folded .sb-fold svg { transform: rotate(-90deg); }
.mlg-sidebar .sb-group.folded .sb-group-items { display: none; }
.mlg-sidebar .sb-fold:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.dash-hello { font-weight: 300; font-size: 34px; }
.dash-hello-sub { display: block; font-size: 13.5px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 2px; }

/* Version démo : bandeau en haut de chaque page */
.mlg-demo-banner { position: sticky; top: 0; z-index: 110; padding: 8px 16px; font-size: 13px; line-height: 1.4; text-align: center;
  background: var(--accent-2); color: #fff; }
.mlg-demo-banner b { font-weight: 700; }
body.is-demo.has-sidebar .mlg-demo-banner { margin-left: 0; }