/* ==========================================================================
   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: 235px 340px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-bottom: 16px;
}

.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-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-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); }

.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-email-card {
  padding: 0;
  white-space: normal;
}
.msg-email-envelope {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-douce);
}
.msg-email-envelope > div {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}
.msg-email-envelope dt {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.msg-email-envelope dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 760;
}
.msg-email-body {
  padding: 14px 16px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  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);
}

/* 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: 1.5px solid var(--carillon-rouge);
  border-radius: var(--radius);
  background: #fdecee;
}
.msg-approval svg { width: 20px; height: 20px; stroke: var(--carillon-rouge); 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-rouge);
}
.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;
}

/* Responsive : les trois colonnes s'empilent proprement */
@media (max-width: 1240px) {
  .messages-shell { grid-template-columns: 205px minmax(0, 1fr); }
  .msg-detail { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .messages-shell { grid-template-columns: 1fr; }
  .msg-conversations { max-height: 320px; }
}


/* --------------------------------------------------------------------------
   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-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: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.billing-tab {
  padding: 11px 16px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 650;
  border-bottom: 2.5px solid transparent;
  cursor: pointer;
}
.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-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-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-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; }

@media (max-width: 1100px) {
  .billing-kpis { grid-template-columns: repeat(2, minmax(0, 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; }

@media (max-width: 1000px) {
  .fiche-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 etroite) : la liste et la barre d'onglets ne debordent
   plus — les onglets se replient sur deux lignes au lieu d'etre coupes. */
.billing-list-panel { min-width: 0; }
.billing-tabs { flex-wrap: wrap; }
.billing-row { min-width: 0; }
.billing-shell { min-width: 0; }
.messages-shell { min-width: 0; }

/* 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;
}