/* ==========================================================================
   CARILLON PAGES — refonte des pages transversales (session Design)
   Chargée APRÈS carillon-ui.css. Zone : Messages, Planning, Devis & factures,
   Fiche client. Ne redéfinit AUCUN token : consomme ceux de carillon-ui.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MESSAGES CLIENTS (maquette 08) — boîte / conversations / détail
   -------------------------------------------------------------------------- */
.messages-shell {
  display: grid;
  grid-template-columns: minmax(300px, 0.72fr) minmax(0, 1.28fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.messages-simple-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.messages-simple-steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 10px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.messages-simple-steps li > span {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--carillon-bleu);
  color: #fff;
  font-weight: 800;
}

.messages-simple-steps strong { font-size: 0.9rem; }
.messages-simple-steps small { color: var(--muted); }

.msg-inbox { padding: 16px 12px; }

.msg-inbox-title {
  margin: 4px 6px 8px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.msg-inbox-title + .msg-inbox-title,
.msg-filter-list + .msg-inbox-title { margin-top: 18px; }

.msg-filter-list { display: grid; gap: 2px; }

.msg-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 550;
  text-align: left;
  cursor: pointer;
}

.msg-filter svg { width: 17px; height: 17px; stroke: var(--muted); fill: none; stroke-width: 2; flex: none; }
.msg-filter span { flex: 1; min-width: 0; }
.msg-filter b {
  min-width: 24px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.msg-filter:hover { background: var(--surface-douce); }
.msg-filter.active { background: var(--gris-bleute); color: var(--carillon-bleu-fonce); }
.msg-filter.active svg { stroke: var(--carillon-bleu); }
.msg-filter.active b { background: var(--carillon-bleu); color: #ffffff; }

/* Liste des conversations */
.msg-list { padding: 12px; }

.msg-list-heading {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
}

.msg-list-heading h2 { margin: 0; }
.msg-list-heading .eyebrow { margin-bottom: 2px; }

.msg-status-compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding-bottom: 2px;
}

.msg-status-compact .msg-filter {
  justify-content: center;
  width: 100%;
  min-height: 36px;
  padding: 6px 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.76rem;
  white-space: nowrap;
}
.msg-status-compact .msg-filter svg { display: none; }
.msg-status-compact .msg-filter span { flex: none; }
.msg-status-compact .msg-filter b { min-width: 20px; padding-inline: 5px; }

.msg-channel-details {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 0.82rem;
}

.msg-channel-details summary,
.messages-secondary > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-weight: 700;
}

.msg-channel-details[open] .msg-filter-list {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
}

.msg-channel-details .msg-filter { width: auto; min-height: 34px; }

.messages-secondary {
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.messages-secondary > summary {
  padding: 14px 16px;
  color: var(--ink);
}

.messages-secondary > .panel {
  margin: 0;
  border-width: 1px 0 0;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: none;
}

.msg-search {
  position: relative;
  margin-bottom: 10px;
}
.msg-search svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  pointer-events: none;
}
.msg-search input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.93rem;
}

.msg-conversations { display: grid; gap: 4px; max-height: 560px; overflow-y: auto; }

.msg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.msg-row:hover { background: var(--surface-douce); }
.msg-row.selected {
  background: #eef3fb;
  border-color: var(--carillon-bleu);
}

.msg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gris-bleute);
  color: var(--carillon-bleu-fonce);
  font-size: 0.86rem;
  font-weight: 700;
  flex: none;
}
.msg-avatar.big { width: 48px; height: 48px; font-size: 1rem; }

.msg-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.msg-row-main strong { font-size: 0.95rem; color: var(--ink); }
.msg-row-main span {
  font-size: 0.84rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-row-meta { display: grid; gap: 4px; justify-items: end; flex: none; }
.msg-row-meta time { font-size: 0.78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Détail de conversation */
.msg-detail { padding: 16px 18px; display: grid; gap: 12px; align-content: start; }
.msg-detail-empty { padding: 40px 16px; }
.msg-mobile-back { display: none; }

.msg-detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.msg-detail-head > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.msg-detail-head strong { font-family: var(--font-titres); font-size: 1.25rem; }
.msg-detail-head > div > span { font-size: 0.86rem; color: var(--muted); }

.case-journey {
  margin: 14px 0;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f8fafc;
  overflow-x: auto;
}
.case-journey ol {
  display: grid;
  grid-template-columns: repeat(5, minmax(106px, 1fr));
  min-width: 560px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.case-journey li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 0 5px;
  color: #596b7d;
  text-align: center;
  font-size: .72rem;
  font-weight: 750;
}
.case-journey li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 16px;
  left: calc(50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: #cfd9e5;
}
.case-journey-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #cfd9e5;
  border-radius: 50%;
  background: #fff;
}
.case-journey-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; }
.case-journey li.is-done { color: #0b6537; }
.case-journey li.is-done .case-journey-icon {
  border-color: #0d7a3e;
  background: #e8f6ee;
  color: #0d7a3e;
}
.case-journey li.is-done:not(:last-child)::after { background: #72b991; }
.case-journey li.is-current { color: #123f91; }
.case-journey li.is-current .case-journey-icon {
  border-color: #1546a0;
  background: #e8f0ff;
  color: #1546a0;
  box-shadow: 0 0 0 4px rgba(21, 70, 160, .12);
}
.msg-avatar.has-photo { overflow: hidden; background: var(--surface); }
.msg-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.msg-customer-card {
  display: grid;
  grid-template-columns: auto minmax(150px, 0.65fr) minmax(280px, 1.35fr);
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-douce);
}

details.msg-customer-card > summary {
  grid-column: 1 / -1;
  cursor: pointer;
  color: var(--carillon-bleu-fonce);
  font-weight: 750;
}

details.msg-customer-card:not([open]) > :not(summary) { display: none; }

.msg-more-actions,
.msg-analysis-details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.msg-more-actions summary,
.msg-analysis-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

details.msg-customer-card > summary,
.msg-more-actions > summary,
.msg-analysis-details > summary,
.messages-secondary > summary,
.payload-details > summary {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.msg-more-actions .msg-conv-actions,
.msg-analysis-details[open] > :not(summary) {
  margin-top: 9px;
}
.msg-customer-identity { display: grid; gap: 2px; min-width: 0; }
.msg-customer-identity > span,
.msg-customer-fields dt { color: var(--muted); font-size: 0.72rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
.msg-customer-identity strong { color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.msg-customer-identity small { color: var(--muted); }
.msg-customer-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; margin: 0; }
.msg-customer-fields > div { display: grid; gap: 2px; min-width: 0; }
.msg-customer-fields .msg-customer-address { grid-column: 1 / -1; }
.msg-customer-fields dd { margin: 0; color: var(--ink); font-weight: 650; overflow-wrap: anywhere; }
.msg-customer-fields a { color: var(--carillon-bleu); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.msg-missing-contact { color: #a12833; font-weight: 700; }

.msg-zone-title {
  margin: 2px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.msg-bubble-row { display: flex; align-items: flex-end; gap: 10px; }
.msg-bubble {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  white-space: pre-wrap;
}
.msg-bubble-row time { font-size: 0.78rem; color: var(--muted); flex: none; }

/* Zone « Compris par Carillon » : information = bleu */
.msg-zone {
  border-radius: var(--radius);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}
.msg-zone-understood {
  border: 1.5px solid var(--carillon-bleu);
  background: #f4f8ff;
}
.msg-zone-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carillon-bleu);
}
.msg-zone-label svg { width: 16px; height: 16px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }

.msg-understood-row { display: flex; align-items: center; gap: 7px; font-size: 0.94rem; }
.msg-understood-row > span:first-child { color: var(--muted); }

.msg-confidence-track {
  height: 5px;
  border-radius: 999px;
  background: var(--gris-bleute);
  overflow: hidden;
}
.msg-confidence-track span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--carillon-vert);
}
.msg-proposed-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 3px; }
.msg-proposed-slots article { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid #cbdcf5; border-radius: 11px; background: #fff; }
.msg-proposed-slots article > span { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--carillon-bleu); color: #fff; font-weight: 800; }
.msg-proposed-slots article > div { display: grid; gap: 2px; min-width: 0; }
.msg-proposed-slots strong { color: var(--ink); font-size: 0.86rem; line-height: 1.3; }
.msg-proposed-slots small { color: var(--muted); font-size: 0.76rem; }
body .reply-result.msg-result-pending { background: #eef5ff; border-color: #c6daf7; color: #174f97; }
body .reply-result.msg-result-warning { background: #fff4e8; border-color: #efc58f; color: #8a4b08; }
body .reply-result.msg-result-pending > svg,
body .reply-result.msg-result-warning > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }

/* Zone « Proposition de réponse » : un brouillon ne ressemble jamais à un envoyé */
.msg-zone-proposal { border: 1px solid var(--line); background: var(--surface); }
.msg-proposal-body {
  padding: 12px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-douce);
  white-space: pre-wrap;
}
.msg-zone-proposal small { color: var(--muted); }

/* Bandeau d'approbation : engagement = vermillon, jamais décoratif */
.msg-approval {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid #c6daf7;
  border-radius: var(--radius);
  background: #eef5ff;
}
.msg-approval svg { width: 20px; height: 20px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; flex: none; }
.msg-approval strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--carillon-bleu-fonce);
}
body .msg-approval,
body .msg-approval strong { color: var(--carillon-bleu-fonce); }
.msg-approval span { font-size: 0.88rem; color: var(--ink); }

.msg-detail-actions { display: flex; justify-content: flex-end; gap: 10px; }
body .msg-detail-actions .btn.primary,
body .msg-detail-actions .btn { min-height: 48px; }
.msg-send-btn { min-width: 240px; justify-content: center; }

.msg-sent-note {
  padding: 10px 14px;
  border: 1px solid #cfe3cb;
  border-radius: var(--radius-sm);
  background: #e9f5ef;
  color: var(--carillon-vert);
  font-weight: 650;
  font-size: 0.9rem;
}

.msg-empty-state {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  min-height: 210px;
  padding: 24px;
  border: 1px dashed #b8c7da;
  border-radius: 14px;
  background: #fbfcfe;
  color: #46566d;
  text-align: center;
}
.msg-empty-state > span {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #edf3ff;
  color: #1546a0;
}
.msg-empty-state svg { width: 23px; height: 23px; fill: none; stroke: currentColor; }
.msg-empty-state strong { color: #17212b; font-size: 1rem; }
.msg-empty-state p { max-width: 390px; margin: 0; line-height: 1.5; }
.msg-empty-state .btn { min-height: 44px; margin-top: 4px; }

/* Responsive : les trois colonnes s'empilent proprement */
@media (max-width: 1240px) {
  .messages-shell { grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 860px) {
  .messages-shell { grid-template-columns: 1fr; }
  .case-journey { padding: 11px 7px; overflow: visible; }
  .case-journey ol { grid-template-columns: repeat(5, minmax(0, 1fr)); min-width: 0; }
  .case-journey li { padding-inline: 2px; font-size: .62rem; line-height: 1.25; }
  .case-journey-icon { width: 32px; height: 32px; }
  .case-journey li:not(:last-child)::after {
    top: 15px;
    left: calc(50% + 19px);
    width: calc(100% - 38px);
  }
  .msg-conversations { max-height: 320px; }
  .messages-simple-steps { grid-template-columns: 1fr; }
  .messages-simple-steps li { padding-block: 8px; }
  .messages-shell.mobile-detail-open .msg-list { display: none; }
  .messages-shell:not(.mobile-detail-open) .msg-detail { display: none; }
  .msg-mobile-back { display: inline-flex; justify-self: start; }
  .msg-customer-card {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .msg-customer-fields { grid-column: 1 / -1; }
  .msg-detail-actions { display: grid; }
  .msg-send-btn { min-width: 0; width: 100%; }
}


/* --------------------------------------------------------------------------
   PLANNING (maquette 09) — grille + colonne « À planifier » + bandeau conflits
   -------------------------------------------------------------------------- */
.planning-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 14px;
  align-items: start;
}
.planning-shell .planning-manual-details { grid-column: 1 / -1; order: 3; }
.planning-shell .planning-calendar-main { order: 1; }
.planning-shell .planning-toplace { order: 2; }

.planning-filter {
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
}

.view-segment button.active {
  background: var(--carillon-bleu);
  color: #ffffff;
}

/* Colonne « À planifier » */
.planning-toplace { padding: 16px 14px; display: grid; gap: 10px; align-content: start; }
.toplace-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-titres);
  font-size: 1.1rem;
  color: var(--ink);
}
.toplace-head svg { width: 18px; height: 18px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }
.toplace-sub { margin-top: -8px; color: var(--muted); }

.toplace-card {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: grab;
}
.toplace-card.conflict { border-color: var(--carillon-rouge); background: #fdecee; }
.toplace-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.toplace-head-row strong { font-size: 0.98rem; }
.toplace-duration {
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.toplace-line { font-size: 0.85rem; color: var(--muted); }
.toplace-line.strong { color: var(--ink); font-weight: 600; }
.toplace-actions { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.toplace-actions .btn { flex: 1; justify-content: center; min-height: 44px; white-space: nowrap; }

/* Bandeau conflits : vert = confirmé seulement, vermillon = à résoudre */
.planning-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.planning-banner svg { width: 26px; height: 26px; flex: none; fill: none; stroke-width: 2; }
.planning-banner div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.planning-banner strong { font-size: 0.98rem; }
.planning-banner span { font-size: 0.86rem; color: var(--muted); }
.planning-banner.ok svg { stroke: var(--carillon-vert); }
.planning-banner.ok strong { color: var(--carillon-vert); }
.planning-banner.conflict { border-color: var(--carillon-rouge); background: #fdecee; }
.planning-banner.conflict svg { stroke: var(--carillon-rouge); }
.planning-banner.conflict strong { color: var(--carillon-rouge); }

@media (max-width: 1100px) {
  .planning-shell { grid-template-columns: 1fr; }
  .planning-shell .planning-toplace { order: 0; }
}


/* --------------------------------------------------------------------------
   DEVIS & FACTURES (maquette 10) — KPI, liste à onglets, prévisualisation
   -------------------------------------------------------------------------- */
.billing-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.billing-followups {
  display: grid;
  gap: 10px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}
.billing-followups:empty { display: none; }
.billing-followups-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.billing-followups-head h2 { margin: 2px 0 0; font-size: 1.05rem; }
.billing-followups-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.billing-followup {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-douce);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.billing-followup:hover { border-color: var(--carillon-bleu); }
.billing-followup > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--carillon-bleu); stroke-width: 2; }
.billing-followup > span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.billing-followup strong, .billing-followup small { overflow-wrap: anywhere; }
.billing-followup small { color: var(--muted); }
.billing-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.billing-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gris-bleute);
  flex: none;
}
.billing-kpi-icon svg { width: 20px; height: 20px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }
.billing-kpi div { display: grid; gap: 1px; min-width: 0; }
.billing-kpi span { font-size: 0.86rem; color: var(--muted); }
.billing-kpi strong { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.billing-kpi.value-blue strong { color: var(--carillon-bleu); }
.billing-kpi.value-red strong { color: var(--carillon-rouge); }
.billing-kpi.value-red .billing-kpi-icon { background: #fdecee; }
.billing-kpi.value-red .billing-kpi-icon svg { stroke: var(--carillon-rouge); }
.billing-kpi.value-green strong { color: var(--carillon-vert); }
.billing-kpi.value-green .billing-kpi-icon { background: #e9f5ef; }
.billing-kpi.value-green .billing-kpi-icon svg { stroke: var(--carillon-vert); }

.billing-shell {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.billing-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.billing-tab {
  width: 100%;
  min-width: 0;
  padding: 11px 4px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 650;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}
.billing-tab:hover { color: var(--ink); }
.billing-tab.active { color: var(--carillon-bleu); border-bottom-color: var(--carillon-bleu); }

.billing-doc-list { display: grid; }
.billing-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 10px;
  border: none;
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--gris-bleute);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.billing-row:hover { background: var(--surface-douce); }
.billing-row.selected { background: #eef3fb; border-left-color: var(--carillon-bleu); }
.billing-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--gris-bleute);
  flex: none;
}
.billing-row-icon svg { width: 18px; height: 18px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }
.billing-row-icon.ok { background: #e9f5ef; }
.billing-row-icon.ok svg { stroke: var(--carillon-vert); }
.billing-row-main { flex: 1; min-width: 0; display: grid; gap: 1px; }
.billing-row-main strong { font-size: 0.95rem; }
.billing-row-main span { font-size: 0.84rem; color: var(--muted); }
.billing-row-meta { display: grid; gap: 4px; justify-items: end; flex: none; }
.billing-row-meta .montant { font-weight: 700; font-variant-numeric: tabular-nums; }

/* Prévisualisation : le document ressemble à un document */
/* NC-003 : la region preview est un item de grille (minmax(0,6fr)). Sans
   min-width:0, ses enfants gardent min-width:auto (min-content) et la table
   force la piste a ~1126px -> tout deborde et se fait couper. On contraint la
   region ET chaque enfant a min-width:0/max-width:100%. */
.billing-preview { padding: 18px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.billing-preview > * { min-width: 0; max-width: 100%; }
.billing-doc-sheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 20px 22px;
  display: grid;
  gap: 16px;
  min-width: 0;
}
.billing-doc-sheet > * { min-width: 0; }
.billing-doc-head { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.billing-doc-logo { max-height: 56px; max-width: 160px; object-fit: contain; justify-self: start; margin-bottom: 6px; }
.billing-doc-head > div { display: grid; gap: 2px; font-size: 0.85rem; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.billing-doc-brand { font-family: var(--font-titres); font-size: 1.2rem; color: var(--ink); }
.billing-doc-ref { text-align: right; }
.billing-doc-ref strong { color: var(--ink); font-size: 1.02rem; }
.billing-doc-parties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.billing-doc-parties > div { display: grid; gap: 2px; font-size: 0.9rem; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.billing-doc-parties strong { color: var(--ink); }

/* table-layout fixed : la table remplit son conteneur au lieu d'imposer sa
   largeur de contenu (source du debordement NC-003). */
.billing-lines { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.92rem; }
.billing-lines td, .billing-lines th { overflow-wrap: anywhere; }
.billing-lines th:first-child, .billing-lines td:first-child { width: 46%; }
.billing-lines th {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.billing-lines td { padding: 9px 10px; border-bottom: 1px solid var(--gris-bleute); }
.billing-line-discount { display: block; margin-top: 3px; color: var(--carillon-bleu); font-size: 0.75rem; font-weight: 700; }
.billing-lines th.montant, .billing-lines td.montant { text-align: right; }

.billing-totals { display: grid; gap: 4px; justify-items: end; }
.billing-totals div { display: flex; gap: 24px; font-size: 0.92rem; color: var(--muted); }
.billing-totals strong { min-width: 110px; text-align: right; color: var(--ink); }
.billing-totals .grand { font-size: 1.06rem; font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); padding-top: 6px; }
.billing-payment-summary { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.billing-payment-summary span { padding: 8px 10px; border-radius: 10px; background: var(--surface-douce); color: var(--muted); }
.billing-payment-summary strong { color: var(--ink); }
.billing-payment-history { border-top: 1px solid var(--line); padding-top: 10px; }
.billing-payment-history summary { cursor: pointer; font-weight: 650; }
.billing-payment-history div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.payment-modal-card { width: min(620px, calc(100vw - 28px)); }

.billing-ai-summary { display: grid; gap: 8px; }
.billing-ai-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.billing-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9rem;
  font-weight: 600;
}
.billing-ai-chip svg { width: 17px; height: 17px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }

.billing-approval { flex-wrap: wrap; }
.billing-review-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1.5px solid var(--carillon-rouge);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--carillon-rouge);
  font-weight: 650;
  font-size: 0.88rem;
  cursor: pointer;
  flex: none;
}
.billing-review-check input { width: 17px; height: 17px; accent-color: var(--carillon-rouge); }

.billing-actions { justify-content: flex-end; flex-wrap: wrap; }
.billing-footnote { color: var(--muted); text-align: right; }
.billing-send-blocked { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #e6a7ad; border-radius: var(--radius-sm); background: #fff1f2; color: #8f1d2c; }
.billing-send-blocked span, .billing-send-blocked small { overflow-wrap: anywhere; }

@media (max-width: 1100px) {
  .billing-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-followups-list { grid-template-columns: 1fr; }
  .billing-shell { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   FICHE CLIENT (maquette 13) — identité, historique filtrable, prochain RDV
   -------------------------------------------------------------------------- */
.fiche-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fiche-name { font-family: var(--font-titres); font-size: 1.6rem; color: var(--ink); }
.fiche-chips { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 3px; }
.fiche-contact { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88rem; color: var(--muted); }
.fiche-contact svg { width: 15px; height: 15px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }

.fiche-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.fiche-col { display: grid; gap: 8px; align-content: start; }
.fiche-line { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.fiche-line svg { width: 16px; height: 16px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; flex: none; }
.fiche-note {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--carillon-rouge);
  border-radius: var(--radius-sm);
  background: #fdecee;
  font-size: 0.9rem;
}
.fiche-doc {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
}
.fiche-doc:hover { border-color: var(--carillon-bleu); }
.fiche-doc.quiet { cursor: default; color: var(--muted); background: var(--surface-douce); }
.fiche-doc.quiet svg { stroke: var(--muted); }
.fiche-doc small { color: var(--muted); }
.fiche-doc svg { width: 16px; height: 16px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; flex: none; }
.fiche-doc span { flex: 1; min-width: 0; }

.fiche-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.fiche-filter {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.fiche-filter.active { background: var(--carillon-nuit); border-color: var(--carillon-nuit); color: #ffffff; }

.fiche-timeline { display: grid; }
.fiche-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--gris-bleute);
}
.fiche-event-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gris-bleute);
  flex: none;
}
.fiche-event-icon svg { width: 17px; height: 17px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }
.fiche-event > div { flex: 1; min-width: 0; display: grid; gap: 1px; }
.fiche-event small { color: var(--muted); font-size: 0.78rem; }
.fiche-event strong { font-size: 0.94rem; color: var(--carillon-bleu-fonce); }
.fiche-event > div > span { font-size: 0.86rem; color: var(--muted); }
.fiche-event-value { display: grid; gap: 3px; justify-items: end; flex: none; }
.fiche-event-value .montant { font-variant-numeric: tabular-nums; }

.fiche-next {
  display: grid;
  gap: 5px;
  padding: 16px;
  border: 1.5px solid var(--carillon-bleu);
  border-radius: var(--radius);
  background: #f4f8ff;
}
.fiche-next.quiet { border-color: var(--line); background: var(--surface-douce); color: var(--muted); }
.fiche-next-when { font-family: var(--font-titres); font-size: 1.35rem; color: var(--carillon-bleu-fonce); }
.fiche-next-meta { display: flex; align-items: center; gap: 12px; margin: 4px 0 6px; }
.fiche-next-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--muted); }
.fiche-next-meta svg { width: 15px; height: 15px; stroke: var(--muted); fill: none; stroke-width: 2; }
.fiche-next .btn { min-height: 48px; justify-content: center; }

.fiche-summary { grid-template-columns: 1fr 1fr; }

/* --- Édition de la fiche client (popup, mandat patron 22/07) -------------- */
.fiche-avatar-photo { object-fit: cover; border-radius: 50%; }
.fiche-edit-photo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.fiche-edit-photo-preview {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.3rem; flex: 0 0 auto; border: 1px solid var(--line);
}
.fiche-edit-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fiche-photo-pick { cursor: pointer; }
.fiche-edit .form-grid .field.fiche-edit-notes { grid-column: 1 / -1; }
.fiche-edit textarea { resize: vertical; min-height: 72px; }
.fiche-edit-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.fiche-edit-actions .btn { min-height: 44px; }

@media (max-width: 1000px) {
  .fiche-grid { grid-template-columns: 1fr; }
  .fiche-edit .form-grid { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   COMPLÉMENT LEAD — avatars pastel à initiales + pictos trait fin partout
   -------------------------------------------------------------------------- */
.msg-avatar.tone-1 { background: #dbe7fb; color: #1546a0; }
.msg-avatar.tone-2 { background: #e8eef7; color: #38445c; }
.msg-avatar.tone-3 { background: #ece4f7; color: #5b3e8f; }
.msg-avatar.tone-4 { background: #e2f1e8; color: #14663a; }
.msg-avatar.tone-5 { background: #f7ecd9; color: #7a5218; }
.msg-avatar.tone-6 { background: #fbe3e6; color: #a12833; }

.inline-check {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.5;
  vertical-align: -2px;
}

.planning-stat .stat-icon svg { width: 20px; height: 20px; stroke: var(--carillon-bleu); fill: none; stroke-width: 2; }
.planning-chip .chip-icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; vertical-align: -2px; }

/* --------------------------------------------------------------------------
   RELIQUATS PALETTE (signalés par la session Mobile)
   -------------------------------------------------------------------------- */
/* Le rabattement --trade-accent/--trade-soft par secteur a été REMONTÉ dans
   carillon-ui.css (zone lead, bloc sector-*) — shim retiré. */

/* Eyebrows des pages transversales : label neutre gris bleuté, jamais
   la pilule ambre héritée d'app.css. L'état reste porté par les badges. */
body [data-panel="requests"] .eyebrow,
body [data-panel="planning"] .eyebrow,
body [data-panel="billing"] .eyebrow,
body.ui-revolution [data-panel="requests"] .panel-head .eyebrow,
body.ui-revolution [data-panel="planning"] .panel-head .eyebrow,
body.ui-revolution [data-panel="billing"] .panel-head .eyebrow {
  background: var(--gris-bleute);
  border: 1px solid var(--line);
  color: #47536b;
}

/* KPI Devis & factures : plus de liserés décoratifs nth-child hérités
   d'ui-revolution (le 4e sortait vermillon sous « Payé ce mois »).
   La couleur ne porte que la VALEUR (bleu action / rouge dû / vert encaissé). */
body.ui-revolution .billing-kpis article,
body.ui-revolution .billing-kpis article:nth-child(4n + 2),
body.ui-revolution .billing-kpis article:nth-child(4n + 3),
body.ui-revolution .billing-kpis article:nth-child(4n + 4) {
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius);
}


/* Édition de la proposition (maquette 08, endpoint outbox/update) */
.msg-proposal-edit {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--carillon-bleu);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit;
  resize: vertical;
}
.msg-proposal-edit-actions { display: flex; justify-content: flex-end; gap: 8px; }
.msg-proposal-edit-actions .btn { min-height: 40px; }


/* Passe pixel maquette 08 : bouton « Voir le client » dans l'en-tête du détail */
.msg-view-client { flex: none; min-height: 44px; }
.msg-view-client svg { width: 16px; height: 16px; }

/* ==========================================================================
   CORRECTIFS NON-CONFORMITES AUDIT PATRON (2026-07-15)
   ========================================================================== */

/* NC-014 : cibles tactiles. Actions PRINCIPALES >= 48px ; onglets/filtres
   (controles de navigation denses) >= 44px (minimum tactile universel). */
body .page-hero-actions .btn,
body #newQuoteBtn, body #newAppointmentBtn, body #analyzeBtn,
body .msg-send-btn, body .billing-send-btn,
body .msg-detail-actions .btn, body .billing-actions .btn,
body .toplace-actions .btn,
body .modal-card .btn.primary,
body #saveQuoteBtn, body #saveAppointmentModalBtn,
body #createAppointmentBtn {
  min-height: 48px;
}
body .billing-tab, body .msg-filter, body .fiche-filter,
body .view-segment button, body .planning-filter {
  min-height: 44px;
}

/* NC-013 : la vraie cause du 4.17 = TEXTE BLANC sur vermillon plein #e63946
   (ratio 4.2 < 4.5 AA). Les badges .danger de l'app sont deja rouge-sur-clair
   (AA OK, verifie). Ce sont les SURFACES ROUGES PLEINES a texte blanc qui
   echouent : bouton destructif, pastille de notification, badge plein « urgent ».
   On les passe sur un rouge plus sombre #c1121f (blanc dessus ~5.9). */
body .btn.danger, body button.danger,
body .notification-count,
body .badge.solid-danger, body .status-badge.solid-danger,
body .planning-chip .badge.danger {
  background: #c1121f;
  border-color: #c1121f;
  color: #ffffff;
}

/* NC-028 : une conversation longue ne doit plus repousser « Compris par
   Carillon » et la proposition sous la ligne de flottaison. La bulle du
   message recu scrolle dans une hauteur bornee ; le bloc decision reste vu. */
.msg-bubble { max-height: 220px; overflow-y: auto; }
.msg-detail { max-height: none; }

/* NC-003 (meme classe, cote Messages) : en colonne etroite le detail et son
   en-tete debordent. On contraint chaque enfant et on autorise le repli. */
.msg-detail { min-width: 0; }
.msg-detail > * { min-width: 0; max-width: 100%; }
.msg-detail-head { flex-wrap: wrap; }
.msg-understood-row { flex-wrap: wrap; }
.msg-bubble-row { flex-wrap: wrap; }
.msg-detail-actions { flex-wrap: wrap; }

/* NC-003 (Devis, colonne étroite) : la liste ne déborde plus et la grille garde
   les quatre onglets visibles sur une ligne en bureau ; le téléphone applique
   sa grille 2 × 2 dans carillon-mobile.css. */
.billing-list-panel { min-width: 0; }
.billing-row { min-width: 0; }
.billing-shell { min-width: 0; }
.messages-shell { min-width: 0; }

.billing-empty::before {
  content: none;
  display: none;
}
.billing-empty {
  min-height: 104px;
  align-content: center;
}

/* NC-003 (Planning, tres petit ecran) : la barre d'outils du calendrier se
   replie au lieu de deborder a 360px. */
.planning-calendar-panel, .planning-calendar-main { min-width: 0; }
.calendar-toolbar { flex-wrap: wrap; }
.calendar-toolbar .calendar-nav, .calendar-toolbar .calendar-actions { flex-wrap: wrap; min-width: 0; }
.calendar-toolbar .planning-filter { flex: 1 1 auto; min-width: 0; }

/* NC-014 (complement) : plancher tactile 44px (WCAG AAA) sur les controles
   secondaires et les selects de mes ecrans ; les actions PRINCIPALES restent
   a 48px (regle plus haut). */
body [data-panel="requests"] .btn,
body [data-panel="planning"] .btn,
body [data-panel="billing"] .btn,
body [data-panel="requests"] select,
body [data-panel="planning"] select,
body [data-panel="billing"] select,
body .planning-icon-btn,
body #planningTodayBtn, body #runPlanningCheckBtn,
body #channelSelect, body #sampleSelect {
  min-height: 44px;
}
/* Petits boutons secondaires/ghost de mes ecrans : plancher tactile 44px
   (les .btn.small/ghost heritent sinon un ~36px trop petit au doigt). */
body [data-panel="requests"] .btn.small, body [data-panel="requests"] .btn.ghost,
body [data-panel="planning"] .btn.small, body [data-panel="planning"] .btn.ghost,
body [data-panel="billing"] .btn.small, body [data-panel="billing"] .btn.ghost,
body #messageDetail .btn, body #customerCaseModal .btn,
body .reply-result .btn, body .msg-proposal-edit-actions .btn {
  min-height: 44px;
}

/* Passe pixel maquette 13 : contacts de l'en-tête de fiche en vrais liens tel:/mailto: */
.fiche-head { flex-wrap: wrap; }
.fiche-contact-actions { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.fiche-contact-actions .btn {
  min-height: 44px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.fiche-contact-actions .btn svg { width: 16px; height: 16px; }


/* NC-010 : le titre principal de page passe en H1 (semantique) sans changer
   le rendu — il herite du style de bandeau, pas de la taille H1 par defaut. */
.page-dashboard-strip h1.page-title {
  font-size: 1.35rem;
  font-family: var(--font-titres);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

@media (max-width: 760px) {
  .msg-customer-card { grid-template-columns: auto minmax(0, 1fr); }
  .msg-customer-fields { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .msg-customer-fields .msg-customer-address { grid-column: auto; }
  .msg-proposed-slots { grid-template-columns: 1fr; }
  .msg-send-btn { width: 100%; min-width: 0; }
}

.msg-assisted-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--bleu) 30%, white);
  border-radius: 12px;
  background: color-mix(in srgb, var(--bleu) 7%, white);
}
.msg-assisted-note > div { display: grid; gap: 3px; min-width: 0; }
.msg-assisted-note strong { color: var(--ink); }
.msg-assisted-note small { color: var(--muted); line-height: 1.35; }