:root {
  --bg: #f3f7fb;
  --panel: rgba(255, 255, 255, 0.88);
  --panel-solid: #ffffff;
  --ink: #0f172a;
  --muted: #5a6b7d;
  --border: rgba(18, 58, 99, 0.12);
  --brand: #123a63;
  --brand-2: #1d4e89;
  --accent: #d97706;
  --success: #2f855a;
  --warning: #b7791f;
  --danger: #b91c1c;
  --soft: #eaf2ff;
  --shadow: 0 18px 50px rgba(15, 23, 42, 0.12);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Aptos", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(29, 78, 137, 0.16), transparent 30%),
    radial-gradient(circle at 85% 10%, rgba(217, 119, 6, 0.12), transparent 22%),
    linear-gradient(180deg, #f8fbff 0%, #edf3fb 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(18, 58, 99, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 58, 99, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.02));
}

#app {
  position: relative;
  z-index: 1;
  width: min(1800px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 18px 0 36px;
}

.shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 18px;
}

.hero {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-xl);
  background:
    linear-gradient(135deg, rgba(18, 58, 99, 0.98), rgba(29, 78, 137, 0.92)),
    var(--brand);
  color: #fff;
  box-shadow: var(--shadow);
  padding: 22px 22px 18px;
}

.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 68%);
  pointer-events: none;
}

.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 14.2px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.03;
  letter-spacing: -0.03em;
}

.hero p {
  max-width: 840px;
  margin: 0;
  color: rgba(255, 255, 255, 0.84);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* Logo de la société dans le hero */
.hero-brand {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-logo {
  max-height: 120px;
  max-width: 220px;
  height: auto;
  width: auto;
  flex-shrink: 0;
  background: transparent;
}
@media (max-width: 720px) {
  .hero-brand { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-logo { max-height: 80px; max-width: 160px; }
}

.button {
  appearance: none;
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 20px;
  font: inherit;
  font-weight: 700;
  font-size: 15.7px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.button:hover { transform: translateY(-1px); filter: brightness(1.08); }
.button:active { transform: translateY(0); }
.button.primary {
  background: linear-gradient(135deg, #ffb347, #f59e0b);
  color: #0f172a;
  box-shadow: 0 12px 24px rgba(245, 158, 11, 0.24);
}
.button.ghost {
  background: rgba(255, 255, 255, 0.08);
}
.button.danger {
  background: rgba(185, 28, 28, 0.12);
  border-color: rgba(185, 28, 28, 0.2);
  color: #fff;
}

/* Boutons sur fond clair (interieur des sections) : texte fonce et bordure visible */
.section .button {
  color: var(--ink, #0f172a);
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.18);
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}
.section .button:hover { background: #f1f5f9; }
.section .button.primary {
  background: linear-gradient(135deg, #ffb347, #f59e0b);
  color: #0f172a;
  border: 0;
}
.section .button.ghost {
  background: transparent;
  border: 1px solid rgba(15, 23, 42, 0.15);
}
.section .button.danger {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.35);
  color: #b91c1c;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 10px 16px;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15.7px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 700;
  font-size: 14.2px;
  letter-spacing: 0.02em;
}
.pill.ok { background: rgba(47, 133, 90, 0.18); color: #c6f6d5; }
.pill.warn { background: rgba(183, 121, 31, 0.18); color: #fde68a; }
.pill.bad { background: rgba(185, 28, 28, 0.18); color: #fecaca; }
.pill.neutral { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* Contraste des commandes et indicateurs dans les blocs sur fond clair. */
.section-body .button,
.report-card .button,
.etape-corps .button {
  background: #ffffff;
  color: #123a63;
  border: 1px solid #64748b;
}
.section-body .button.primary,
.report-card .button.primary,
.etape-corps .button.primary {
  background: #fbbf24;
  color: #0f172a;
  border: 1px solid #b45309;
}
.section-body .button.danger,
.report-card .button.danger,
.etape-corps .button.danger {
  background: #fff1f2;
  color: #991b1b;
  border: 1px solid #b91c1c;
}
.section-body .pill.neutral, .report-card .pill.neutral { background: #e2e8f0; color: #1e293b; }
.section-body .pill.ok, .report-card .pill.ok { background: #dcfce7; color: #14532d; }
.section-body .pill.warn, .report-card .pill.warn { background: #fef3c7; color: #78350f; }
.section-body .pill.bad, .report-card .pill.bad { background: #fee2e2; color: #991b1b; }
.button:focus-visible, summary.button:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
}
.import-drop .button { margin: 10px 0; }
#import-history-panel > summary { display: list-item; width: fit-content; margin: 12px 0; cursor: pointer; }

.kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.kpi {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px;
  backdrop-filter: blur(14px);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kpi:hover { transform: translateY(-2px); box-shadow: 0 24px 60px rgba(15,23,42,0.15); }

.kpi .label {
  color: var(--muted);
  font-size: 15.3px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.kpi .value {
  margin-top: 10px;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--brand);
}

.kpi .sub {
  margin-top: 8px;
  font-size: 15.3px;
  color: var(--muted);
  line-height: 1.35;
}

.layout {
  display: flex;
  min-width: 0;
  width: 100%;
  align-items: flex-start;
  gap: 22px;
}

.layout .content {
  flex: 1;
  min-width: 0;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  scrollbar-width: thin;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px rgba(18, 58, 99, 0.08);
  backdrop-filter: blur(12px);
}

.nav button {
  appearance: none;
  border: 1px solid rgba(18, 58, 99, 0.14);
  background: #ffffff;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  font-size: 16.2px;
  border-radius: 12px;
  padding: 14px 16px;
  text-align: left;
  white-space: normal;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.16s ease, transform 0.1s ease, box-shadow 0.16s ease, color 0.16s ease;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav button:hover {
  transform: translateY(-1px);
  background: #eef4fb;
  border-color: rgba(18, 58, 99, 0.24);
  box-shadow: 0 4px 12px rgba(18, 58, 99, 0.12);
}

.nav button.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-color: var(--brand);
  box-shadow: 0 12px 28px rgba(18, 58, 99, 0.28);
  transform: translateX(3px);
}

@media (max-width: 900px) {
  .layout { display: block; }
  .nav {
    flex-direction: row;
    width: auto;
    position: static;
    max-height: none;
    overflow-x: auto;
    margin-bottom: 10px;
    padding: 10px;
  }
  .nav button { white-space: nowrap; border-radius: 999px; min-height: auto; padding: 10px 16px; }
  .nav button.active { transform: none; }
}

.section {
  display: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  overflow: hidden;
}

.section.active { display: block; }

.section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 26px 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}

.alert-beacon { position: fixed; z-index: 50; top: 18px; right: 20px; width: 48px; height: 48px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.24); }
.alert-beacon-wrap { position: fixed; z-index: 50; top: 18px; right: 20px; }
.alert-beacon-wrap .alert-beacon { position: relative; top: auto; right: auto; }
.alert-beacon-popover { position: absolute; top: 58px; right: 0; width: min(360px, calc(100vw - 32px)); padding: 16px; border-radius: 14px; background: #fff; border: 1px solid rgba(18,58,99,.18); box-shadow: 0 14px 34px rgba(18,58,99,.22); color: #123a63; }
.alert-beacon-popover h3 { margin: 0 0 10px; font-size: 17.3px; }
.alert-beacon-popover ol { margin: 0 0 12px; padding-left: 24px; }
.alert-beacon-popover li { margin: 8px 0; line-height: 1.35; }
.alert-beacon-popover li span { color: #64748b; font-size: 15.3px; }
.alert-empty { list-style: none; margin-left: -24px !important; }
.alert-beacon.active { background: linear-gradient(145deg, #ef4444, #991b1b); animation: alert-beacon-pulse 1s ease-in-out infinite; }
.alert-beacon.pending { background: linear-gradient(145deg, #facc15, #ca8a04); color: #422006; }
.alert-beacon.quiet { background: linear-gradient(145deg, #16a34a, #166534); opacity: .88; }
.alert-beacon-light { position: absolute; inset: 7px; border-radius: 50%; border: 2px solid rgba(255,255,255,.65); }
.alert-beacon-count { position: relative; z-index: 1; font-size: 15.7px; font-weight: 900; }
@keyframes alert-beacon-pulse { 0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(239,68,68,.28); } 50% { transform: scale(1.13); box-shadow: 0 0 0 10px rgba(239,68,68,.12), 0 8px 28px rgba(239,68,68,.5); } }
.ai-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ai-speak-message { margin-top: 9px; font-size: 14.2px; }

/* Ancienne entete centree de l'onglet Banque et carte. Cette page a
   maintenant sa propre banniere (.integration-banniere) et n'a plus
   d'entete de premier niveau : sans le « > », la regle ne s'appliquait
   plus qu'aux petites entetes imbriquees dans les cartes, qu'elle
   centrait par erreur. */
#section-integration > .section-head {
  background: linear-gradient(135deg, rgba(15, 118, 110, .13), rgba(255, 255, 255, .78));
  text-align: center;
  align-items: center;
}

#section-integration > .section-head > div:first-child { margin-inline: auto; }
#section-integration > .section-head p { margin-inline: auto; }
#section-integration .section-body > .field-groups,
#section-integration .section-body > .field-card,
#section-integration .section-body > .report-card { box-shadow: 0 8px 24px rgba(18, 58, 99, .06); }
#section-integration .section-body > .field-groups { padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(29, 78, 137, .08), rgba(255, 255, 255, .7)); }
#section-integration .section-body > .field-groups .field-card { background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(224,242,254,.78)); }
#section-integration .section-body > .field-card { background: linear-gradient(135deg, rgba(240,253,250,.96), rgba(255,255,255,.95)); border-color: rgba(15,118,110,.18); }
#section-integration .section-body > .field-card > .section-head { background: linear-gradient(135deg, rgba(15,118,110,.12), rgba(255,255,255,.7)); border-radius: 12px; }
#section-integration .section-body > .field-card > .section-head h3 { text-align: center; }
#section-integration .monthly-overview { background: linear-gradient(135deg, rgba(224,242,254,.9), rgba(240,253,250,.9)); border-color: rgba(29,78,137,.18); }
#section-integration .monthly-overview .section-head { padding: 0 0 12px; margin-bottom: 12px; background: transparent; border-bottom: 1px solid rgba(18,58,99,.12); }
#section-integration .monthly-overview .section-head label { min-width: 190px; text-align: left; }
#section-integration .monthly-overview table th { white-space: normal; }
#section-integration .cash-reconciliation { background: linear-gradient(135deg, rgba(239,246,255,.96), rgba(255,255,255,.96)); border-color: rgba(29,78,137,.18); }
#section-integration .cash-reconciliation .section-head { padding: 0 0 10px; background: transparent; }
.cash-reconciliation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cash-reconciliation-grid div { padding: 11px; border-radius: 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(18,58,99,.08); }
.cash-reconciliation-grid span, .cash-reconciliation-grid strong { display: block; }
.cash-reconciliation-grid span { color: var(--muted); font-size: 14.2px; }
.cash-reconciliation-grid strong { margin-top: 5px; color: var(--brand); font-size: 19.4px; }
@media (max-width: 850px) { .cash-reconciliation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#section-integration .integration-audit { background: linear-gradient(135deg, rgba(254,249,195,.8), rgba(255,255,255,.95)); border-color: rgba(180,83,9,.2); }
#section-integration .integration-audit .section-head { background: transparent; }
.audit-line { display: flex; gap: 9px; align-items: flex-start; margin: 8px 0; line-height: 1.45; }
.audit-line span { display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; font-weight: 800; flex: 0 0 auto; }
.audit-line.warn span { background: #fef3c7; color: #92400e; }
.audit-line.ok span { background: #dcfce7; color: #166534; }

.section-head h2 {
  margin: 0;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.section-head p {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 16.2px;
  max-width: 720px;
}

.hero-more-actions { display: inline-block; text-align: left; }
.hero-more-actions summary { cursor: pointer; list-style: none; }
.hero-more-actions summary::-webkit-details-marker { display: none; }
.hero-more-actions summary::before { content: "☰ "; }
.hero-more-actions-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.16); }
#section-integration .field-card > h3,
#section-integration .report-card > h3 { text-align: center; }
#section-integration .row-actions { align-items: center; }

.section-kicker {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(29, 78, 137, 0.10);
  color: var(--brand);
  font-size: 13.6px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.section-body {
  padding: 12px 26px 26px;
}

.field-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.field-card {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 18px;
  padding: 14px;
}

.field-card h3 {
  margin: 0 0 10px;
  font-size: 16.8px;
  color: var(--brand);
}

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

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 14.2px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #fff;
  color: var(--ink);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.field textarea {
  min-height: 84px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgba(29, 78, 137, 0.5);
  box-shadow: 0 0 0 4px rgba(29, 78, 137, 0.08);
}

.field .hint {
  font-size: 14.2px;
  color: var(--muted);
  line-height: 1.4;
}

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #fff;
}

.switch-row strong {
  display: block;
  font-size: 15.3px;
}

.switch-row span {
  color: var(--muted);
  font-size: 14.2px;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.table-toolbar .left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.table-toolbar .title {
  font-size: 19.4px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.table-toolbar .subtitle {
  color: var(--muted);
  font-size: 15.3px;
  line-height: 1.4;
}

.table-wrap {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 18px;
  background: #fff;
  /* Indicateur visuel : ombre à droite quand ça déborde */
  background-image:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
    radial-gradient(farthest-side at 0 50%, rgba(18,58,99,0.15), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(18,58,99,0.15), transparent);
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}

table.fin {
  width: 100%;
  border-collapse: collapse;
  min-width: 1180px;
}

table.fin thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, #1d4e89, #123a63);
  color: #fff;
  padding: 10px 8px;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}

table.fin tbody td {
  border-bottom: 1px solid rgba(18, 58, 99, 0.08);
  padding: 6px 7px;
  vertical-align: top;
  font-size: 15.3px;
}

table.fin tbody tr:nth-child(even) { background: rgba(234, 242, 255, 0.42); }

table.fin tbody tr:hover { background: rgba(29, 78, 137, 0.06); }

table.fin input,
table.fin select {
  width: 100%;
  min-width: 72px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  border-radius: 8px;
  padding: 6px 7px;
  background: #fff;
  font: inherit;
  font-size: 15.3px;
}

table.fin input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  accent-color: var(--brand-2);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.invoice-save-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(135deg, #f7fbff, #eef6ff);
}
.invoice-save-bottom > div:first-child { display: grid; gap: 3px; }
@media (max-width: 720px) {
  .invoice-save-bottom { align-items: stretch; flex-direction: column; }
  .invoice-save-bottom .row-actions { flex-wrap: wrap; }
}

.mini {
  font-size: 14.2px;
  color: var(--muted);
}

.computed {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 14.2px;
  font-weight: 800;
  white-space: nowrap;
}

.status-ok { background: rgba(47, 133, 90, 0.14); color: var(--success); }
.status-warn { background: rgba(183, 121, 31, 0.14); color: var(--warning); }
.status-bad { background: rgba(185, 28, 28, 0.14); color: var(--danger); }
.status-neutral { background: rgba(18, 58, 99, 0.08); color: var(--brand); }

.report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.report-card {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(18, 58, 99, 0.08);
  border-radius: 18px;
  padding: 16px;
}

.report-card h3 {
  margin: 0 0 12px;
  font-size: 19.4px;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table td {
  padding: 8px 0;
  border-bottom: 1px solid rgba(18, 58, 99, 0.08);
  font-variant-numeric: tabular-nums;
}

.report-table td:last-child {
  text-align: right;
  font-weight: 800;
}

.report-table tr.total td {
  border-top: 2px solid rgba(18, 58, 99, 0.16);
  border-bottom: 0;
  padding-top: 10px;
}

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

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(18, 58, 99, 0.08);
  background: #fff;
}

.check-item .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  background: var(--danger);
  flex: 0 0 auto;
}

.check-item.ok .dot { background: var(--success); }
.check-item.warn .dot { background: var(--warning); }
.check-item .text strong { display: block; }
.check-item .text span { color: var(--muted); font-size: 14.2px; }

.footer-note {
  color: var(--muted);
  font-size: 14.2px;
  padding: 6px 4px 0;
}

.section.themed {
  border-top: 10px solid var(--section-accent, var(--brand));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.92)),
    var(--panel);
}

.section.themed .section-head {
  background: linear-gradient(135deg, var(--section-accent-tint), rgba(255, 255, 255, 0.82));
  border-bottom: 1px solid var(--section-accent-border);
}

.section.themed .section-head h2 {
  color: var(--section-accent-dark);
}

.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: var(--section-accent-tint);
  color: var(--section-accent-dark);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.guide-grid,
.appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.guide-card {
  border: 1px solid var(--section-accent-border);
  border-radius: 18px;
  background: linear-gradient(180deg, var(--section-accent-tint), rgba(255, 255, 255, 0.86));
  padding: 14px;
}

.guide-step {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--section-accent-dark);
  color: #fff;
  font-weight: 900;
  margin-bottom: 10px;
}

.guide-card strong {
  display: block;
  font-size: 15.7px;
  margin-bottom: 6px;
}

.guide-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
  font-size: 15.3px;
}

.accounting-logic {
  margin: 16px 0;
  border: 1px solid var(--section-accent-border);
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, var(--section-accent-tint), rgba(255,255,255,.92)), #fff;
}

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

.logic-head h3 {
  margin: 0 0 6px;
  color: var(--section-accent-dark);
}

.logic-head p,
.logic-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.logic-flow {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.logic-flow.algorithm-flow {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.logic-step {
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.1);
  box-shadow: 0 8px 20px rgba(15,23,42,.06);
}

.logic-step span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: #fff;
  background: var(--section-accent-dark);
  font-weight: 900;
  font-size: 14.2px;
}

.logic-step strong {
  font-size: 15.3px;
  line-height: 1.25;
}

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

.logic-card {
  border: 1px solid rgba(15,23,42,.1);
  border-radius: 18px;
  background: rgba(255,255,255,.86);
  padding: 14px;
}

.logic-card.wide {
  grid-column: 1 / -1;
}

.logic-card h4 {
  margin: 0 0 10px;
  color: var(--section-accent-dark);
}

.logic-list {
  display: grid;
  gap: 8px;
}

.logic-list.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.logic-list div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.08);
}

.logic-list strong {
  font-size: 15.3px;
}

.logic-list span,
.logic-rules,
.cycle-chips span {
  color: var(--muted);
  font-size: 15.3px;
  line-height: 1.45;
}

.cycle-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cycle-chips span {
  padding: 8px 10px;
  border-radius: 999px;
  background: var(--section-accent-tint);
  border: 1px solid var(--section-accent-border);
  font-weight: 800;
  color: var(--section-accent-dark);
}

.logic-rules {
  margin: 0;
  padding-left: 18px;
}

.logic-rules li + li {
  margin-top: 6px;
}

.formula {
  display: inline-flex;
  margin-bottom: 8px !important;
  padding: 8px 10px;
  border-radius: 12px;
  background: #ecfdf5;
  color: #065f46 !important;
  font-weight: 900;
}

.purchase-cycle-card {
  background:
    linear-gradient(135deg, rgba(14, 165, 233, .10), rgba(255,255,255,.92)),
    rgba(255,255,255,.9);
}

.cycle-summary {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 12px !important;
  padding: 9px 12px;
  border-radius: 14px;
  background: #eff6ff;
  color: #1d4e89 !important;
  font-weight: 900;
}

.purchase-cycle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.purchase-cycle-step {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(29, 78, 137, .14);
}

.purchase-cycle-step span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #1d4e89;
  color: #fff;
  font-size: 14.2px;
  font-weight: 900;
}

.purchase-cycle-step strong {
  color: #123a63;
  font-size: 15.3px;
}

.purchase-cycle-step p {
  margin: 0;
  color: var(--muted);
  font-size: 14.2px;
  line-height: 1.45;
}

.appearance-notes {
  display: grid;
  gap: 10px;
  color: var(--muted);
  line-height: 1.5;
}

.appearance-notes p {
  margin: 0;
}

.section.themed .field-card,
.section.themed .report-card {
  border-color: var(--section-accent-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.98));
}

.field input[type="color"] {
  min-height: 48px;
  padding: 4px;
}

.field input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.field input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 8px;
}

@media (max-width: 1180px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-groups, .report-grid { grid-template-columns: 1fr; }
  .logic-flow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .purchase-cycle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #app { width: min(100vw - 16px, 1480px); padding-top: 10px; }
  .hero { padding: 18px 16px 16px; }
  .hero-meta { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr; }
  .logic-flow,
  .logic-grid,
  .logic-list.two-col,
  .purchase-cycle-grid { grid-template-columns: 1fr; }
  .logic-head { flex-direction: column; }
  .section-head, .section-body { padding-left: 14px; padding-right: 14px; }
  table.fin { min-width: 1040px; }
}

@media print {
  body { background: #fff; }
  body::before, .nav, .hero-actions, .no-print { display: none !important; }
  #app { width: 100%; padding: 0; }
  .section { display: none !important; }
  .section.active.report-print { display: block !important; box-shadow: none; border: 0; }
  .hero, .kpi { box-shadow: none; }
}

.invoice-generator {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(240,253,250,.94));
  border: 1px dashed var(--section-accent-border, #9bd3c7);
  border-radius: 18px;
  box-shadow: 0 16px 35px rgba(15, 23, 42, .08);
  margin-bottom: 16px;
  padding: 16px;
}

.section-head.compact {
  margin-bottom: 12px;
  padding-bottom: 10px;
}

.section-head.compact h3 {
  margin: 0;
  color: var(--section-accent-dark, #0f172a);
}

.bloc4-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.bloc4-actions {
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.bloc4-actions .footer-note {
  flex: 1 1 320px;
  margin: 0;
}
/* Module Factures & revenus */
.invoice-section {
  display: grid;
  gap: 16px;
}

.invoice-summary-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.invoice-mini {
  border: 1px solid var(--section-accent-border, rgba(15, 118, 110, .22));
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.96), var(--section-accent-tint, rgba(20,184,166,.12)));
}

.invoice-mini span {
  display: block;
  color: var(--muted);
  font-size: 14.2px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.invoice-mini strong {
  display: block;
  margin-top: 6px;
  color: var(--section-accent-dark, var(--brand));
  font-size: 21.6px;
  font-variant-numeric: tabular-nums;
}

/* typo-agrandie */
/* ===== Carte éditable "No facture" - très visible ===== */
.invoice-mini-edit {
  border: 2px dashed #f59e0b;
  background: linear-gradient(135deg, #fef9c3, #fef3c7);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15);
  position: relative;
}
.invoice-mini-edit span {
  color: #b45309;
}
.invoice-mini-edit::before {
  content: "MODIFIABLE";
  position: absolute;
  top: -10px;
  right: 10px;
  background: #f59e0b;
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 1.5px;
}
input.invoice-mini-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 2px solid #d97706;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #0f172a;
  font-size: 19.4px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input.invoice-mini-input:hover {
  border-color: #b45309;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2);
}
input.invoice-mini-input:focus {
  border-color: #7c2d12;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.35);
  background: #fffbeb;
}

.invoice-workspace,
.invoice-panel {
  display: grid;
  gap: 14px;
}

.invoice-workspace {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.invoice-panel {
  border: 1px solid var(--section-accent-border, rgba(15, 118, 110, .22));
  border-radius: 22px;
  padding: 16px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 18px 38px rgba(15, 23, 42, .07);
}

.invoice-panel h3 {
  margin: 0;
  color: var(--section-accent-dark, var(--brand));
}

.invoice-grid,
.manual-line-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.field-action {
  justify-content: end;
}

.field-action .button {
  min-height: 44px;
}

.invoice-total-box {
  display: grid;
  gap: 8px;
  border-radius: 18px;
  padding: 14px;
  background: linear-gradient(135deg, rgba(15, 118, 110, .09), rgba(255,255,255,.95));
  border: 1px solid var(--section-accent-border, rgba(15, 118, 110, .22));
}

.invoice-total-box div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
}

.invoice-total-box strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.invoice-total-box .grand {
  border-top: 2px solid var(--section-accent-border, rgba(15, 118, 110, .24));
  padding-top: 10px;
  color: var(--ink);
}

.invoice-total-box .grand strong {
  color: var(--section-accent-dark, var(--brand));
  font-size: 21.6px;
}

.invoice-lines input,
.invoice-lines select,
.invoice-list button,
.client-list button {
  min-width: 120px;
}

.invoice-lines td:first-child input {
  min-width: 260px;
}

.line-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.empty-state,
.muted-cell {
  border: 1px dashed var(--section-accent-border, rgba(15, 118, 110, .24));
  border-radius: 16px;
  padding: 18px;
  color: var(--muted);
  background: rgba(255,255,255,.7);
}

.muted-cell {
  text-align: center;
}

@media (max-width: 980px) {
  .invoice-summary-grid,
  .invoice-workspace {
    grid-template-columns: 1fr;
  }
}
/* Dossier client */
.dossier-panel {
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(236,253,245,.9));
}

.dossier-grid,
.dossier-subgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dossier-subgrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dossier-panel h4 {
  margin: 0 0 8px;
  color: var(--section-accent-dark, var(--brand));
}

.dossier-file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.dossier-file-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--section-accent-border, rgba(15, 118, 110, .22));
  border-radius: 16px;
  padding: 10px;
  background: rgba(255,255,255,.85);
}

.dossier-file-card img,
.file-icon {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  background: rgba(15, 118, 110, .09);
}

.file-icon {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-weight: 900;
}

.dossier-file-card strong,
.dossier-list strong {
  color: var(--ink);
}

.dossier-file-card span,
.dossier-list span {
  color: var(--muted);
  font-size: 14.2px;
}

.dossier-list {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.dossier-list article {
  display: grid;
  gap: 6px;
  border: 1px solid var(--section-accent-border, rgba(15, 118, 110, .22));
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.82);
}

.dossier-doc-table {
  min-width: 760px;
}

@media (max-width: 980px) {
  .dossier-grid,
  .dossier-subgrid {
    grid-template-columns: 1fr;
  }
}

.upload-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 10px 0 12px;
}

.file-type-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 8px;
  background: var(--section-accent-soft, rgba(15, 118, 110, .1));
  color: var(--section-accent-dark, var(--brand));
  font-size: 13px;
  font-weight: 900;
}

.quick-client-form {
  margin-bottom: 14px;
  padding: 12px;
  border: 1px dashed var(--section-accent, #0f766e);
  border-radius: 10px;
  background: var(--section-accent-soft, rgba(15, 118, 110, .06));
}

.quick-client-form h4 {
  margin: 0 0 10px;
}

/* Planche de montage (glisser les images avec guides d'alignement) */
.montage-board {
  position: relative;
  height: 540px;
  margin-top: 10px;
  border: 1px dashed var(--section-accent, #0f766e);
  border-radius: 14px;
  background:
    linear-gradient(rgba(15, 118, 110, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 118, 110, .05) 1px, transparent 1px),
    #fff;
  background-size: 20px 20px, 20px 20px, auto;
  overflow: hidden;
}

.board-item {
  position: absolute;
  width: 150px;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.board-item img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
  pointer-events: none;
}

.board-item.dragging {
  cursor: grabbing;
  z-index: 10;
}

.board-item.selected {
  z-index: 9;
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
}

.board-item.locked {
  cursor: default;
}

.rs-handle {
  position: absolute;
  width: 11px;
  height: 11px;
  background: #fff;
  border: 2px solid #38bdf8;
  border-radius: 3px;
  display: none;
  z-index: 12;
}

.board-item.selected:not(.locked) .rs-handle { display: block; }
.rs-handle.tl { left: -6px; top: -6px; cursor: nwse-resize; }
.rs-handle.tr { right: -6px; top: -6px; cursor: nesw-resize; }
.rs-handle.bl { left: -6px; bottom: -6px; cursor: nesw-resize; }
.rs-handle.br { right: -6px; bottom: -6px; cursor: nwse-resize; }

#boardMenu {
  position: fixed;
  z-index: 999;
  display: grid;
  min-width: 190px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .15);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
}

#boardMenu button {
  appearance: none;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 9px 12px;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
  color: var(--ink);
}

#boardMenu button:hover { background: #f1f5f9; }
#boardMenu button.danger { color: #b91c1c; }
#boardMenu button.danger:hover { background: #fdecea; }

.montage-guide {
  position: absolute;
  display: none;
  background: #e11d8f;
  z-index: 20;
  pointer-events: none;
}

.montage-guide.guide-v { width: 1px; top: 0; bottom: 0; }
.montage-guide.guide-h { height: 1px; left: 0; right: 0; }

.board-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15.3px;
  pointer-events: none;
}

/* ================= CAISSE (point de vente) ================= */
.pos-display{display:flex;justify-content:space-between;align-items:center;gap:16px;background:linear-gradient(180deg,#1b1b1b,#0c0c0c);border:1px solid #000;border-radius:16px;padding:14px 22px;margin:6px 0 16px;box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
.pos-display-info{color:#9aa4b0;font-size:14.8px;line-height:1.6}
.pos-badge{display:inline-block;background:#b91c1c;color:#fff;font-weight:800;font-size:13px;padding:2px 8px;border-radius:6px;letter-spacing:.5px}
.pos-display-total{color:#f5a623;font-family:Consolas,'Courier New',monospace;font-size:48px;font-weight:800;text-shadow:0 0 16px rgba(245,166,35,.45);white-space:nowrap}
.pos-display-item{color:#f5a623;font-size:16.8px;font-weight:800;text-transform:uppercase;max-width:190px;text-align:right;overflow:hidden;text-overflow:ellipsis}
.pos-grid{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.pos-col{flex:1;min-width:260px}
.pos-pad-col{flex:0 0 250px;max-width:270px}
.pos-col-title{font-weight:800;color:var(--brand);margin:0 0 8px;font-size:16.8px}
.pos-col-subtitle{font-weight:700;color:var(--muted);font-size:14.8px;margin:2px 0 6px}
.pos-hint-inline{font-weight:500;color:var(--muted);font-size:14.2px;font-style:italic}
.pos-products{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.pos-prod{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:70px;padding:8px 6px;border:0;border-radius:14px;cursor:pointer;background:linear-gradient(160deg,#2f9e5e,#217346);color:#fff;box-shadow:0 4px 12px rgba(33,115,70,.28);transition:transform .06s,box-shadow .15s}
.pos-prod:nth-child(4n+2){background:linear-gradient(160deg,#3498db,#2471a3);box-shadow:0 4px 12px rgba(36,113,163,.28)}
.pos-prod:nth-child(4n+3){background:linear-gradient(160deg,#e67e22,#ca6510);box-shadow:0 4px 12px rgba(202,101,16,.28)}
.pos-prod:nth-child(4n){background:linear-gradient(160deg,#8e44ad,#6c3483);box-shadow:0 4px 12px rgba(108,52,131,.28)}
.pos-prod:hover{transform:translateY(-1px)}
.pos-prod:active{transform:translateY(1px)}
.pos-prod-name{font-weight:800;font-size:14.8px;text-align:center;line-height:1.15}
.pos-prod-price{font-weight:700;font-size:14.2px;opacity:.95}
.pos-prod-stock{font-size:12.5px;font-weight:700}
.pos-hint{color:var(--muted);font-size:14.8px;line-height:1.5}
.pos-quick{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:var(--soft);padding:10px;border-radius:12px}
.pos-quick input,.pos-quick select{padding:7px 9px;border:1px solid var(--border);border-radius:8px}
.pos-quick .pos-qprix{width:90px;text-align:right}
.pos-quick .pos-col-subtitle{flex-basis:100%;margin:0}
table.pos-cart,table.pos-totals,table.pos-hist{width:100%;border-collapse:separate;border-spacing:0;background:var(--panel-solid);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin:0 0 12px}
table.pos-cart th,table.pos-hist th{background:#eef4fb;color:var(--brand);font-size:14.2px;text-align:left;padding:8px 10px}
table.pos-cart td,table.pos-totals td,table.pos-hist td{padding:8px 10px;border-top:1px solid var(--border);font-size:15.3px}
table.pos-cart .n,table.pos-totals .n,table.pos-hist .n{text-align:right;font-variant-numeric:tabular-nums}
table.pos-cart tbody tr{cursor:pointer}
table.pos-cart tbody tr.sel td{background:#dcebff}
table.pos-cart tbody tr:hover td{background:#eef4fb}
.pos-empty{text-align:center;color:var(--muted);font-style:italic}
.pos-x{padding:2px 9px !important;font-size:14.2px !important}
table.pos-totals{border:0;box-shadow:none;background:transparent}
table.pos-totals td{border-top:0;padding:3px 10px;color:var(--muted)}
.pos-ttc{background:linear-gradient(180deg,#fdf0c0,#f7e08c);border:2px solid #d4ac0d;border-radius:12px;font-size:26px;font-weight:800;text-align:right;padding:10px 16px;color:#5a4708;margin:2px 0 10px}
.pos-pay{display:flex;gap:8px;margin-bottom:8px}
.pos-pay select{flex:1;padding:9px;border:1px solid var(--border);border-radius:9px;font-size:15.7px}
.pos-finvente{width:100%;font-size:20.5px;padding:15px;font-weight:800}
.pos-kbaff{background:linear-gradient(180deg,#0e3a63,#0b2e4f);color:#7CFC00;font-family:Consolas,monospace;font-size:24px;text-align:right;padding:10px 12px;border-radius:10px;margin-bottom:8px;min-height:46px;box-shadow:inset 0 2px 8px rgba(0,0,0,.45)}
.pos-modes{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.pos-modes button{background:#1a5276;color:#fff;border:0;border-radius:9px;padding:9px 10px;font-size:14.8px;font-weight:700;text-align:left;cursor:pointer}
.pos-modes button.on{background:linear-gradient(160deg,#e67e22,#ca6510)}
.pos-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.pos-pad button{height:54px;font-size:21.6px;font-weight:700;border:0;border-radius:11px;background:linear-gradient(160deg,#2e86c1,#2471a3);color:#fff;cursor:pointer}
.pos-pad button:active{transform:translateY(1px)}
.pos-pad button.ok{grid-row:span 2;height:auto;background:linear-gradient(160deg,#27ae60,#1e8449)}
.pos-pad button.del{background:linear-gradient(160deg,#c0392b,#922b21);font-size:15.7px}
.pos-h3{margin:20px 0 8px;color:var(--brand)}
@media (max-width:900px){.pos-pad-col{flex-basis:100%;max-width:none}}

/* ================= SECTION PAR MOIS (façon Excel) ================= */
#section-mois .mois-h{margin:22px 0 8px;padding:8px 14px;border-radius:10px;font-size:16.8px;color:#123a63;background:#eef4fb;border-left:5px solid #94a3b8}
#section-mois .mois-h.vert{background:#e4f5e9;border-left-color:#2f9e5e;color:#14532d}
#section-mois .mois-h.rose{background:#fce7f1;border-left-color:#d86ea8;color:#831843}
#section-mois .mois-scroll{overflow-x:auto;max-width:100%}
.mois-table{border-collapse:separate;border-spacing:0;background:var(--panel-solid);border:1px solid var(--border);border-radius:12px;overflow:hidden;font-size:15.3px;min-width:100%}
.mois-table th,.mois-table td{padding:7px 11px;border-bottom:1px solid var(--border);border-right:1px solid #eef1f5;white-space:nowrap;text-align:left}
.mois-table th:last-child,.mois-table td:last-child{border-right:0}
.mois-table tbody tr:last-child td{border-bottom:0}
.mois-table .n{text-align:right;font-variant-numeric:tabular-nums}
.mois-table tr.vert th{background:#bfe6cb;color:#14532d}
.mois-table tr.rose th{background:#f6c9e0;color:#831843}
.mois-table tr.gris th{background:#e5e8ec;color:#1f2a37}
.mois-table tr.tot td{background:#eef2f6;font-weight:800;border-top:2px solid #c3cad3}
.mois-table tr.hl td{background:#fff7e0}
.mois-table tr.sub td{background:#f6f8fa;font-weight:700;color:var(--muted);font-size:14.2px}
.mois-table td.lbl{font-weight:700}
.mois-table td.ref{color:#2563eb;font-style:italic;font-size:13.6px}
.mois-empty{text-align:center;color:var(--muted);font-style:italic}
.mois-benefice{margin:12px 0 4px;font-size:17.3px}
.mois-benefice b{color:#14532d}
.mois-hint{color:var(--muted);font-size:14.8px;font-style:italic;margin:4px 0}
.mois-flex{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start}
.mois-charts{display:flex;gap:16px;flex-wrap:wrap;flex:1;min-width:280px}
.mois-chart{flex:1;min-width:220px}
.mois-chart-title{font-weight:700;font-size:14.8px;color:var(--muted);margin-bottom:6px}
.mois-chart-box{display:flex;align-items:flex-end;gap:5px;height:150px;background:var(--panel-solid);border:1px solid var(--border);border-radius:10px;padding:12px 10px 24px;position:relative}
.mois-bar{flex:1;position:relative;min-width:12px;height:100%;display:flex;align-items:flex-end}
.mois-bar-fill{width:100%;border-radius:4px 4px 0 0;min-height:1px}
.mois-bar span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:12.5px;color:var(--muted)}
.mois-tax td.lbl,.mois-tax .n{font-size:14.2px}
#section-mois .row-actions select{padding:8px 10px;border:1px solid var(--border);border-radius:9px;font-size:15.7px;font-weight:600}

/* ===== Dépenses récurrentes / Auto / Camemberts ===== */
.mois-table tr.orange th{background:#ffe294;color:#7a5c07}
.rec-table input[type=text],.rec-table input:not([type]){width:130px;padding:5px 7px;border:1px solid var(--border);border-radius:7px}
.rec-table select{padding:5px 7px;border:1px solid var(--border);border-radius:7px}
.rec-amt{width:78px !important;text-align:right}
.rec-day{width:44px !important;text-align:center}
.rec-mth{text-align:center !important}
.rec-mth input[type=checkbox]{width:16px;height:16px;cursor:pointer}
.auto-summary{flex:0 0 320px;max-width:340px;background:var(--soft);border:1px solid var(--border);border-radius:14px;padding:18px;text-align:center}
.auto-big{font-size:44px;font-weight:800;color:#b45309;line-height:1}
.auto-lbl{color:var(--muted);font-size:15.3px;margin-bottom:6px}
.auto-summary table td{text-align:left}
.cat-h{margin:0 0 8px;padding:7px 12px;border-radius:9px;font-weight:800;font-size:15.7px}
.cat-h.vert{background:#e4f5e9;color:#14532d;border-left:5px solid #2f9e5e}
.cat-h.rose{background:#fce7f1;color:#831843;border-left:5px solid #d86ea8}
.pie-wrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:12px 0 4px}
.pie{width:150px;height:150px;border-radius:50%;box-shadow:0 3px 10px rgba(16,24,40,.15);flex:0 0 auto}
.pie-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:4px}
.pie-leg{font-size:14.8px;display:flex;align-items:center;gap:7px}
.pie-dot{width:12px;height:12px;border-radius:3px;flex:0 0 auto}

.invoice-sort-button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  white-space: nowrap;
}
.invoice-sort-button:hover,
.invoice-sort-button:focus-visible {
  color: var(--section-accent, #1d4e89);
  text-decoration: underline;
  outline: none;
}
.invoice-sort-button span { font-size: 13px; opacity: .8; }


/* ==========================================================================
   Apercu modifiable : mode « Modifier l'affichage »
   ========================================================================== */
body.content-edit-on [data-content-key] {
  cursor: text;
  outline: 1px dashed rgba(124, 58, 237, .45);
  outline-offset: 2px;
  border-radius: 3px;
  transition: background-color .12s ease, outline-color .12s ease;
}
body.content-edit-on img[data-content-key] { cursor: copy; }
body.content-edit-on [data-content-key]:hover {
  background: rgba(124, 58, 237, .10);
  outline: 2px solid #7c3aed;
}
body.content-edit-on [data-content-key].content-editing {
  background: #fff;
  outline: 2px solid #7c3aed;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .18);
  cursor: text;
}
body.content-edit-on button[data-content-key],
body.content-edit-on a[data-content-key] { pointer-events: auto; }

.content-edit-toolbar {
  position: absolute;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  max-width: min(560px, 92vw);
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #d8dee9;
  border-left: 4px solid #7c3aed;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .22);
}
.content-edit-toolbar .button { padding: 6px 12px; font-size: 15.3px; }
.content-edit-hint { font-size: 14.2px; color: #475569; flex: 1 1 180px; }
.content-edit-url {
  flex: 1 1 180px;
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 15.3px;
}
#btn-content-edit.primary { box-shadow: 0 0 0 3px rgba(124, 58, 237, .25); }

@media print {
  .content-edit-toolbar { display: none !important; }
  body.content-edit-on [data-content-key] { outline: none !important; background: none !important; }
}

/* ---- Commandes ---- */
.order-card { border: 1px solid rgba(18,58,99,.14); border-radius: 14px; background: rgba(255,255,255,.72); margin: 12px 0; padding: 0; }
.order-card > summary { cursor: pointer; padding: 12px 16px; font-size: 15.7px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.order-card > summary::-webkit-details-marker { color: #123A63; }
.order-card .order-body { padding: 0 16px 16px; border-top: 1px solid rgba(18,58,99,.08); }
.order-card h4 { margin: 18px 0 8px; font-size: 15.3px; text-transform: uppercase; letter-spacing: .04em; color: #123A63; }
.order-card .grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.order-card .grid-fields label, .order-card label.full { display: flex; flex-direction: column; gap: 4px; font-size: 14.2px; color: #40526b; }
.order-card label.full { margin-top: 12px; }
.order-totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.order-totals div { padding: 11px; border-radius: 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(18,58,99,.08); }
.order-totals span, .order-totals strong { display: block; }
.order-totals span { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.order-totals strong { font-size: 17.3px; color: #123A63; }
.order-totals.summary { margin-bottom: 14px; }
.order-attach { gap: 14px; flex-wrap: wrap; margin-top: 10px; }
.order-attach label { display: flex; flex-direction: column; gap: 4px; font-size: 14.2px; color: #40526b; }
.button.small { padding: 4px 10px; font-size: 14.2px; }
@media (max-width: 720px) {
  .order-card .grid-fields, .order-totals { grid-template-columns: 1fr; }
}

/* ---- Paiements et lettrage ---- */
.payment-card { border: 1px solid rgba(18,58,99,.14); border-radius: 14px; background: rgba(255,255,255,.72); margin: 12px 0; }
.payment-card > summary { cursor: pointer; padding: 12px 16px; font-size: 15.7px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.payment-card .payment-body { padding: 0 16px 16px; border-top: 1px solid rgba(18,58,99,.08); }
.payment-card h4 { margin: 18px 0 8px; font-size: 15.3px; text-transform: uppercase; letter-spacing: .04em; color: #123A63; }
.payment-card .grid-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.payment-card .grid-fields label, .payment-card label.full { display: flex; flex-direction: column; gap: 4px; font-size: 14.2px; color: #40526b; }
.payment-card .grid-fields label.wide { grid-column: 1 / -1; }
.payment-card label.full { margin-top: 12px; }
.pill.bad { background: #b91c1c; color: #fff; }
@media (max-width: 720px) {
  .payment-card .grid-fields { grid-template-columns: 1fr; }
}

/* =====================================================================
   BANQUE ET CARTE — page réorganisée en étapes numérotées.
   Chaque étape a sa famille de couleur pour qu'on la reconnaisse
   d'un coup d'œil sans lire le titre.
   ===================================================================== */

.integration-banniere {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
  padding: 26px 28px; margin-bottom: 22px; border-radius: 20px;
  background: linear-gradient(135deg, #0b2545 0%, #12457e 45%, #1c7ed6 100%);
  color: #fff; box-shadow: 0 14px 34px rgba(11, 37, 69, .28);
}
.integration-banniere-texte { min-width: 260px; flex: 1 1 340px; }
.integration-banniere .section-kicker { color: rgba(255,255,255,.72); letter-spacing: .12em; text-transform: uppercase; font-size: 13px; font-weight: 700; }
.integration-banniere h2 { margin: 6px 0 8px; font-size: clamp(26px, 4vw, 40px); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.integration-banniere p { margin: 0; color: rgba(255,255,255,.82); max-width: 54ch; font-size: 15.7px; }
.integration-banniere-chiffres { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.integration-banniere-chiffres > div {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 14px; padding: 12px 16px; min-width: 128px; backdrop-filter: blur(3px);
}
.integration-banniere-chiffres span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.7); margin-bottom: 4px; }
.integration-banniere-chiffres strong { display: block; font-size: 21.6px; color: #fff; }
.integration-filtre label { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255,255,255,.7); margin-bottom: 5px; }
.integration-filtre select { width: 100%; border-radius: 9px; border: 1px solid rgba(255,255,255,.34); background: rgba(255,255,255,.95); color: #0b2545; padding: 7px 9px; font-size: 15.3px; }

.integration-etapes { display: flex; flex-direction: column; gap: 20px; }

.etape { border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid rgba(15,35,64,.1); box-shadow: 0 6px 20px rgba(15,35,64,.07); }
.etape-tete {
  display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: #fff;
  background: linear-gradient(120deg, var(--etape-a), var(--etape-b));
}
.etape-num {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font-size: 23.8px; font-weight: 800;
  background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.45); color: #fff;
}
.etape-titres { flex: 1 1 auto; min-width: 0; }
.etape-titres h3 { margin: 0; font-size: clamp(19px, 2.4vw, 27px); line-height: 1.15; letter-spacing: -.015em; color: #fff; }
.etape-titres p { margin: 4px 0 0; font-size: 15.3px; color: rgba(255,255,255,.85); max-width: 74ch; }
.etape-badge { flex: 0 0 auto; background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.35); color: #fff; border-radius: 999px; padding: 6px 14px; font-size: 14.2px; font-weight: 700; white-space: nowrap; }
.etape-corps { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
.etape-corps > *:first-child { margin-top: 0; }

.etape[data-ton="import"]     { --etape-a: #1d4e89; --etape-b: #38bdf8; }
.etape[data-ton="banque"]     { --etape-a: #0f766e; --etape-b: #34d399; }
.etape[data-ton="carte"]      { --etape-a: #5b21b6; --etape-b: #a78bfa; }
.etape[data-ton="rapprocher"] { --etape-a: #b45309; --etape-b: #fbbf24; }
.etape[data-ton="mois"]       { --etape-a: #166534; --etape-b: #86efac; }
.etape[data-ton="reglages"]   { --etape-a: #334155; --etape-b: #94a3b8; }

.etape-bloc { border: 1px solid rgba(15,35,64,.1); border-radius: 14px; padding: 16px 18px; background: rgba(248,250,252,.8); }
.etape-bloc h4 { margin: 0 0 12px; font-size: 15.3px; text-transform: uppercase; letter-spacing: .05em; color: #1d4e89; }

.etape-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.etape-chiffres .chiffre { border-radius: 14px; padding: 15px 17px; border: 1px solid transparent; }
.etape-chiffres .chiffre span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 5px; opacity: .8; }
.etape-chiffres .chiffre strong { display: block; font-size: 24.8px; letter-spacing: -.02em; }
.chiffre.achats   { background: linear-gradient(135deg, #fff1f2, #ffe4e6); border-color: #fecdd3; color: #9f1239; }
.chiffre.paiements{ background: linear-gradient(135deg, #ecfdf5, #d1fae5); border-color: #a7f3d0; color: #065f46; }
.chiffre.solde    { background: linear-gradient(135deg, #eef2ff, #e0e7ff); border-color: #c7d2fe; color: #3730a3; }

/* Les réglages sont repliés : on les ouvre une fois, puis on les oublie. */
details.etape > summary { cursor: pointer; list-style: none; }
details.etape > summary::-webkit-details-marker { display: none; }
details.etape > summary::after { content: "▾"; font-size: 19.4px; color: rgba(255,255,255,.85); margin-left: auto; flex: 0 0 auto; }
details.etape[open] > summary::after { content: "▴"; }

@media (max-width: 720px) {
  .integration-banniere { padding: 20px; }
  .integration-banniere-chiffres { width: 100%; }
  .integration-banniere-chiffres > div { flex: 1 1 128px; }
  .etape-tete { padding: 15px 16px; gap: 12px; }
  .etape-num { width: 38px; height: 38px; font-size: 19.4px; }
  .etape-corps { padding: 16px; }
  .etape-badge { display: none; }
}

/* --- Fil des étapes : où j'en suis, et ce qu'il reste à faire --------- */
.fil-etapes {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px;
  margin: 0 0 22px; padding: 12px 14px; border-radius: 16px;
  background: #fff; border: 1px solid rgba(15,35,64,.1); box-shadow: 0 4px 14px rgba(15,35,64,.06);
}
.fil-trait { flex: 1 1 14px; min-width: 14px; align-self: center; height: 2px; background: repeating-linear-gradient(to right, #cbd5e1 0 6px, transparent 6px 11px); }
.fil-etape {
  display: flex; align-items: center; gap: 10px; flex: 0 1 auto;
  padding: 9px 14px 9px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid transparent; background: transparent; text-align: left;
  font: inherit; color: #16243a; transition: background .15s, border-color .15s;
}
.fil-etape:hover { background: #f1f5f9; border-color: rgba(15,35,64,.12); }
.fil-num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 15.7px; color: #fff;
}
.fil-etape.fait .fil-num { background: linear-gradient(135deg, #15803d, #4ade80); }
.fil-etape.afaire .fil-num { background: linear-gradient(135deg, #b45309, #fbbf24); }
.fil-texte { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.fil-texte strong { font-size: 15.3px; }
.fil-texte em { font-style: normal; font-size: 13px; color: #64748b; white-space: nowrap; }
.fil-etape.afaire .fil-texte em { color: #b45309; font-weight: 600; }

/* --- Encadré « Ce que tu fais ici » ---------------------------------- */
.etape-aide {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: 13px;
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  border: 1px solid #fde68a;
}
.etape-aide-icone { font-size: 19.4px; line-height: 1.3; flex: 0 0 auto; }
.etape-aide strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: #92400e; margin-bottom: 4px; }
.etape-aide p { margin: 0; font-size: 15.9px; line-height: 1.55; color: #451a03; max-width: 82ch; }
.etape-aide p strong { display: inline; font-size: inherit; text-transform: none; letter-spacing: 0; color: #7c2d12; margin: 0; }

/* --- Badge d'état de l'étape ----------------------------------------- */
.etape-badge.fait { background: rgba(255,255,255,.26); border-color: rgba(255,255,255,.5); }
.etape-badge.afaire { background: #fff; color: #b45309; border-color: #fff; }

/* Une étape terminée s'efface un peu : l'œil va sur ce qui reste à faire. */
.etape[data-fait="oui"] > .etape-tete { filter: saturate(.88); }

/* --- Bloc vide explicite, au lieu d'un tableau absent ---------------- */
.etape-vide {
  padding: 22px; border-radius: 13px; text-align: center;
  background: #f8fafc; border: 1px dashed #cbd5e1; color: #475569;
}
.etape-vide strong { display: block; font-size: 16.8px; color: #16243a; margin-bottom: 5px; }
.etape-vide p { margin: 0; font-size: 15.3px; }

/* Légende sous chaque tuile de chiffre de la carte */
.etape-chiffres .chiffre em { display: block; font-style: normal; font-size: 13px; margin-top: 5px; opacity: .78; line-height: 1.35; }

@media (max-width: 720px) {
  .fil-trait { display: none; }
  .fil-etapes { gap: 6px; }
  .fil-etape { flex: 1 1 46%; }
  .etape-aide { padding: 12px; }
}

/* =====================================================================
   HABILLAGE COMMUN À TOUTES LES SECTIONS
   ---------------------------------------------------------------------
   Le dégradé de chaque page est construit à partir de SA propre couleur
   (--section-accent), celle que l'utilisateur choisit dans Paramètres.
   Rien n'est codé en dur : changer la couleur d'un onglet change sa
   bannière du même coup.

   Le sélecteur utilise « > » exprès : seules les entêtes de premier
   niveau deviennent des bannières. Les .section-head imbriquées dans les
   cartes internes gardent leur petite taille.
   ===================================================================== */

.section.themed > .section-head.section-banniere {
  background: linear-gradient(130deg,
    var(--section-accent-dark, #123a63) 0%,
    var(--section-accent, #1d4e89) 62%,
    color-mix(in srgb, var(--section-accent, #1d4e89) 62%, white) 100%);
  border-bottom: none;
  margin-bottom: 0;
  padding: 26px 28px;
  align-items: center;
  color: #fff;
}

.section.themed > .section-head.section-banniere h2 {
  color: #fff;
  font-size: clamp(25px, 3.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 6px 0 8px;
}
.section.themed > .section-head.section-banniere p { color: rgba(255,255,255,.86); max-width: 76ch; }
.section.themed > .section-head.section-banniere .section-kicker {
  background: rgba(255,255,255,.17);
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.92);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
}
/* Les pastilles d'état restent lisibles sur le dégradé. */
.section.themed > .section-head.section-banniere .pill {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.36);
  color: #fff;
}
.section.themed > .section-head.section-banniere .pill.ok { background: rgba(255,255,255,.94); color: #14532d; border-color: transparent; }
.section.themed > .section-head.section-banniere .pill.warn { background: #fde68a; color: #78350f; border-color: transparent; }
.section.themed > .section-head.section-banniere .pill.bad { background: #fecaca; color: #7f1d1d; border-color: transparent; }
/* Les boutons d'action de l'entête passent en blanc plein. */
.section.themed > .section-head.section-banniere .button {
  background: rgba(255,255,255,.96);
  border-color: transparent;
  color: var(--section-accent-dark, #123a63);
  font-weight: 700;
}
.section.themed > .section-head.section-banniere .button:hover { background: #fff; }
.section.themed > .section-head.section-banniere .button.primary {
  background: rgba(0,0,0,.24);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
}
.section.themed > .section-head.section-banniere .button.danger { background: #fee2e2; color: #7f1d1d; }

/* --- Encadré « Ce que tu fais ici », commun à toutes les pages ------- */
.section-aide {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 15px 28px 16px;
  background: linear-gradient(135deg, #fffbeb, #fef9c3);
  border-bottom: 1px solid #fde68a;
}
.section-aide-icone { font-size: 19.4px; line-height: 1.3; flex: 0 0 auto; }
.section-aide strong { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: #92400e; margin-bottom: 3px; }
.section-aide p { margin: 0; font-size: 15.9px; line-height: 1.55; color: #451a03; max-width: 86ch; }
.section-aide p strong { display: inline; font-size: inherit; text-transform: none; letter-spacing: 0; color: #7c2d12; margin: 0; }

/* Le corps reprend un peu d'air sous la bannière et l'encadré. */
.section.themed > .section-aide + .section-body,
.section.themed > .section-banniere + .section-body { padding-top: 20px; }

/* Repli pour les navigateurs sans color-mix() : dégradé à deux teintes. */
@supports not (background: color-mix(in srgb, red 50%, white)) {
  .section.themed > .section-head.section-banniere {
    background: linear-gradient(130deg, var(--section-accent-dark, #123a63), var(--section-accent, #1d4e89));
  }
}

@media (max-width: 720px) {
  .section.themed > .section-head.section-banniere { padding: 20px 16px; }
  .section-aide { padding: 13px 16px 14px; }
}

@media print {
  .section.themed > .section-head.section-banniere { background: none !important; color: #123a63 !important; border-bottom: 1px solid #cbd5e1; }
  .section.themed > .section-head.section-banniere h2 { color: #123a63 !important; }
  .section.themed > .section-head.section-banniere p { color: #475569 !important; }
  .section-aide { display: none !important; }
}

/* --- « Pourquoi ce chiffre ? » sous le flux de trésorerie ------------- */
.cash-diagnostic { margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.cash-diagnostic h4 { margin: 0 0 6px; font-size: 15.3px; text-transform: uppercase; letter-spacing: .06em; color: #123a63; }
.cash-diagnostic-intro { margin: 0 0 12px; font-size: 15.3px; color: #475569; line-height: 1.5; }
.cash-diagnostic-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cash-diagnostic-list li { padding: 11px 13px; border-radius: 11px; border-left: 4px solid; }
.cash-diagnostic-list li strong { display: block; font-size: 15.9px; margin-bottom: 3px; }
.cash-diagnostic-list li span { display: block; font-size: 15.3px; line-height: 1.5; }
.cash-diagnostic-list li.warn { background: #fffbeb; border-color: #f59e0b; color: #78350f; }
.cash-diagnostic-list li.info { background: #eff6ff; border-color: #3b82f6; color: #1e3a8a; }
.cash-diagnostic-list li.ok   { background: #f0fdf4; border-color: #22c55e; color: #14532d; }
.cash-diagnostic-compare { margin: 0; font-size: 15.3px; line-height: 1.5; color: #334155; padding-top: 11px; border-top: 1px dashed #cbd5e1; }

/* --- Contrôles de type des lignes de carte --------------------------- */
.carte-types { padding: 16px 18px; border-radius: 14px; background: #fffbeb; border: 1px solid #fde68a; }
.carte-types.ok { background: #f0fdf4; border-color: #bbf7d0; }
.carte-types h4 { margin: 0 0 8px; font-size: 15.7px; color: #92400e; }
.carte-types.ok h4 { color: #14532d; }
.carte-types p { margin: 0 0 10px; font-size: 15.3px; line-height: 1.55; color: #451a03; }
.carte-types.ok p { color: #14532d; }
.carte-types-intro { max-width: 88ch; }
.carte-types-bloc { padding: 13px 15px; border-radius: 11px; background: rgba(255,255,255,.75); border: 1px solid #fcd34d; margin-bottom: 11px; }
.carte-types-bloc > strong { display: block; font-size: 15.9px; color: #78350f; margin-bottom: 5px; }
.carte-types-liste { list-style: none; margin: 0 0 11px; padding: 0; font-size: 14.8px; }
.carte-types-liste li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px dashed #fde68a; color: #451a03; }
.carte-types-liste li span:nth-child(2) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carte-types-liste li .n { font-variant-numeric: tabular-nums; font-weight: 700; }
.carte-types-liste li.reste { color: #92400e; font-style: italic; border-bottom: none; }
.carte-types-note { font-size: 14.2px !important; color: #78350f !important; margin: 8px 0 0 !important; }
.field-card .hint { display: block; font-size: 13px; color: #64748b; margin-top: 4px; line-height: 1.4; }

/* --- Colonne « Nature » des lignes de carte -------------------------- */
.nature { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: help; }
.nature-commande  { background: #ede9fe; color: #5b21b6; border: 1px solid #ddd6fe; }
.nature-generale  { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.nature-transfert { background: #e0f2fe; color: #075985; border: 1px solid #bae6fd; }
.nature-retour    { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }

.nature-legende { margin-top: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.8); border: 1px solid #e2e8f0; }
.nature-legende h5 { margin: 0 0 10px; font-size: 14.2px; text-transform: uppercase; letter-spacing: .06em; color: #123a63; }
.nature-legende ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.nature-legende li { display: flex; gap: 11px; align-items: flex-start; }
.nature-legende li > .nature { flex: 0 0 auto; margin-top: 1px; }
.nature-legende li > div { font-size: 14.8px; line-height: 1.5; color: #334155; }
.nature-avertissement { margin: 0; padding: 10px 12px; border-radius: 9px; background: #fff7ed; border-left: 4px solid #f97316; font-size: 14.8px; line-height: 1.5; color: #7c2d12; }

/* --- Astuce « Relier les achats à une facture » ---------------------- */
.astuce-liaison { margin-bottom: 18px; padding: 18px 20px; border-radius: 16px; background: linear-gradient(135deg, #f5f3ff, #ede9fe); border: 1px solid #ddd6fe; }
.astuce-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 14px; }
.astuce-tete h4 { margin: 0 0 4px; font-size: 18.4px; color: #4c1d95; }
.astuce-tete p { margin: 0; font-size: 15.3px; line-height: 1.5; color: #5b21b6; max-width: 76ch; }
.astuce-liste { margin-bottom: 14px; }
.astuce-groupe { margin-bottom: 10px; }
.astuce-groupe h5 { margin: 0 0 7px; font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: #6d28d9; }
.astuce-groupe > summary { cursor: pointer; font-size: 14.8px; color: #6d28d9; padding: 7px 0; font-weight: 600; }
.astuce-ligne { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.8); border: 1px solid transparent; margin-bottom: 5px; cursor: pointer; font-size: 15.3px; }
.astuce-ligne:hover { border-color: #c4b5fd; }
.astuce-ligne.choisi { background: #fff; border-color: #8b5cf6; box-shadow: 0 2px 8px rgba(109,40,217,.12); }
.astuce-ligne input { flex: 0 0 auto; width: 17px; height: 17px; cursor: pointer; }
.astuce-type { flex: 0 0 62px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: #6d28d9; font-weight: 700; }
.astuce-date { flex: 0 0 92px; color: #64748b; font-variant-numeric: tabular-nums; }
.astuce-libelle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1e293b; }
.astuce-montant { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; color: #4c1d95; }
.astuce-vide { font-size: 15.3px; color: #5b21b6; padding: 14px; background: rgba(255,255,255,.7); border-radius: 10px; }
.astuce-resultat { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 13px; }
.astuce-resultat div { padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,.88); border: 1px solid #ddd6fe; }
.astuce-resultat span { display: block; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; color: #6d28d9; margin-bottom: 4px; }
.astuce-resultat strong { display: block; font-size: 20.5px; color: #4c1d95; }
.astuce-resultat div.bon { background: #f0fdf4; border-color: #bbf7d0; }
.astuce-resultat div.bon span { color: #15803d; }
.astuce-resultat div.bon strong { color: #14532d; }
.astuce-resultat div.mauvais { background: #fef2f2; border-color: #fecaca; }
.astuce-resultat div.mauvais span, .astuce-resultat div.mauvais strong { color: #991b1b; }
@media (max-width: 720px) {
  .astuce-ligne { flex-wrap: wrap; }
  .astuce-libelle { flex: 1 1 100%; white-space: normal; }
}

/* --- Dossier client : entête d'identité ------------------------------ */
.dossier-entete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; margin-bottom: 16px; border-radius: 15px; background: linear-gradient(130deg, #123a63, #1d4e89 70%, #2f6fb5); color: #fff; }
.dossier-entete.vide { background: linear-gradient(130deg, #475569, #94a3b8); }
.dossier-identite { min-width: 220px; flex: 1 1 320px; }
.dossier-etiquette { display: inline-block; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; margin-bottom: 7px; }
.dossier-entete h3 { margin: 0 0 4px; font-size: clamp(19px, 2.6vw, 27px); color: #fff; line-height: 1.15; }
.dossier-entete p { margin: 0; font-size: 15.3px; color: rgba(255,255,255,.82); }
.dossier-choix { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.dossier-choix label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.75); }
.dossier-choix select { border-radius: 9px; border: 1px solid rgba(255,255,255,.34); padding: 7px 9px; font-size: 15.3px; min-width: 200px; }

/* --- Mesures et spécifications de production ------------------------- */
.dossier-section-specs { margin-top: 18px; }
.dossier-section-specs > h4 { margin: 0 0 10px; font-size: 15.3px; text-transform: uppercase; letter-spacing: .06em; color: #123a63; }
.specs-intro { margin: 0 0 12px; font-size: 15.3px; line-height: 1.55; color: #475569; max-width: 84ch; }
.spec-carte { border: 1px solid #e2e8f0; border-radius: 13px; background: #fff; margin-bottom: 11px; overflow: hidden; }
.spec-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 15px; background: linear-gradient(120deg, #eef2ff, #f8fafc); border-bottom: 1px solid #e2e8f0; }
.spec-badge { font-weight: 700; font-size: 15.9px; color: #3730a3; }
.spec-dim { font-variant-numeric: tabular-nums; font-weight: 700; color: #0f766e; background: #ecfdf5; border: 1px solid #a7f3d0; padding: 3px 10px; border-radius: 999px; font-size: 14.8px; }
.spec-tech { font-size: 14.2px; color: #64748b; }
.spec-actions { margin-left: auto; display: flex; gap: 6px; }
.spec-champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 11px; padding: 14px 15px; }
.spec-champs label { display: flex; flex-direction: column; gap: 4px; font-size: 13.6px; color: #475569; font-weight: 600; }
.spec-champs label.large { grid-column: 1 / -1; }
.spec-champs input, .spec-champs select { font-weight: 400; }
.spec-aide { font-size: 12.5px; color: #94a3b8; font-weight: 400; line-height: 1.35; }
.specs-vide { padding: 20px; border-radius: 12px; text-align: center; background: #f8fafc; border: 1px dashed #cbd5e1; color: #475569; margin-bottom: 11px; }
.specs-vide strong { display: block; font-size: 15.7px; color: #16243a; margin-bottom: 4px; }
.specs-vide p { margin: 0; font-size: 14.8px; }
@media (max-width: 720px) {
  .spec-champs { grid-template-columns: 1fr 1fr; }
  .dossier-choix select { min-width: 0; width: 100%; }
}

/* --- Reprendre les mesures du client sur une facture ----------------- */
.specfac-panel { background: linear-gradient(135deg, #f0fdfa, #ecfeff); border: 1px solid #a5f3fc; }
.specfac-liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.specfac-ligne { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-radius: 11px; background: rgba(255,255,255,.9); border: 1px solid #cffafe; }
.specfac-infos { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.specfac-emplacement { font-weight: 700; font-size: 15.9px; color: #0f766e; }
.specfac-dim { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14.8px; color: #155e75; background: #cffafe; border-radius: 999px; padding: 2px 10px; }
.specfac-tech { font-size: 14.2px; color: #475569; }
.specfac-note { flex: 1 1 100%; font-size: 13.6px; color: #64748b; line-height: 1.4; }
.specfac-ligne .button { flex: 0 0 auto; }
@media (max-width: 720px) {
  .specfac-ligne { flex-wrap: wrap; }
  .specfac-ligne .button { width: 100%; }
}

/* --- Dossier client : bannière de sélection + blocs colorés ---------- */
.client-banniere { padding: 20px 22px; margin-bottom: 20px; border-radius: 18px; background: linear-gradient(130deg, #0f2544, #1d4e89 62%, #4f92d4); color: #fff; box-shadow: 0 12px 30px rgba(15,37,68,.24); }
.client-banniere.vide { background: linear-gradient(130deg, #475569, #94a3b8); }
.client-banniere-haut { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.client-choix-bloc { flex: 1 1 340px; min-width: 240px; }
.client-choix-bloc label { display: block; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.72); font-weight: 700; margin-bottom: 6px; }
.client-choix-bloc select {
  width: 100%; padding: 12px 14px; font-size: 18.4px; font-weight: 600;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.4);
  background: rgba(255,255,255,.96); color: #0f2544; cursor: pointer;
}
.client-choix-bloc select:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
.client-identite { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.client-identite h2 { margin: 0 0 4px; font-size: clamp(22px, 3.2vw, 34px); color: #fff; line-height: 1.1; letter-spacing: -.02em; }
.client-identite p { margin: 0; font-size: 15.3px; color: rgba(255,255,255,.82); }
.client-compteurs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.client-compteurs span { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.24); border-radius: 999px; padding: 5px 13px; font-size: 14.2px; color: rgba(255,255,255,.88); }
.client-compteurs strong { color: #fff; font-size: 15.9px; }

.etape[data-ton="client-coord"]   { --etape-a: #1d4e89; --etape-b: #60a5fa; }
.etape[data-ton="client-mesures"] { --etape-a: #0f766e; --etape-b: #5eead4; }
.etape[data-ton="client-images"]  { --etape-a: #6d28d9; --etape-b: #c4b5fd; }
.etape[data-ton="client-modeles"] { --etape-a: #be185d; --etape-b: #f9a8d4; }
.etape[data-ton="client-planche"] { --etape-a: #c2410c; --etape-b: #fdba74; }
.etape[data-ton="client-docs"]    { --etape-a: #166534; --etape-b: #86efac; }
.etape[data-ton="client-notes"]   { --etape-a: #334155; --etape-b: #94a3b8; }

.carnet-complet { margin-top: 20px; border: 1px solid rgba(15,35,64,.12); border-radius: 14px; background: #fff; overflow: hidden; }
.carnet-complet > summary { cursor: pointer; padding: 13px 18px; font-size: 15.9px; font-weight: 600; color: #123a63; background: #f1f5f9; }
.carnet-complet[open] > summary { border-bottom: 1px solid rgba(15,35,64,.1); }
.carnet-complet .table-wrap { padding: 14px 16px; }

@media (max-width: 720px) {
  .client-banniere { padding: 16px; }
  .client-choix-bloc { flex: 1 1 100%; }
  .client-banniere-haut .row-actions { width: 100%; }
}

/* --- Entête Factures : boutons groupés par intention ----------------- */
.entete-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.groupe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 9px 13px 10px; border-radius: 13px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); }
.groupe-titre { flex: 1 1 100%; font-size: 12.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: rgba(255,255,255,.72); margin-bottom: 2px; }
.groupe-note { font-size: 13.6px; color: rgba(255,255,255,.72); max-width: 22ch; line-height: 1.35; }
.status-pill.status-devis { background: #ede9fe; color: #5b21b6; }
.pill-origine { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 12.5px; font-weight: 600; }
@media (max-width: 720px) {
  .entete-actions { flex-direction: column; }
  .groupe-actions { width: 100%; }
}


/* ==========================================================================
   Degrades communs a tous les onglets
   --------------------------------------------------------------------------
   Les blocs des pages Banque et Dossier client avaient un degrade par bloc,
   les autres onglets restaient blancs. Les memes regles s'appliquent
   maintenant partout, en reprenant la couleur choisie pour chaque section
   (--section-accent-*), pour que chaque page garde son identite.
   ========================================================================== */

.section.themed .field-card,
.section.themed .report-card {
  background:
    linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .10)) 0%, rgba(255, 255, 255, .94) 58%),
    #fff;
  border: 1px solid var(--section-accent-border, rgba(18, 58, 99, .12));
  box-shadow: 0 4px 14px rgba(15, 35, 64, .05);
}

.section.themed .field-card h3,
.section.themed .report-card h3 {
  color: var(--section-accent-dark, var(--brand));
}

/* Les blocs imbriques (un field-card dans un report-card) doivent rester
   plus clairs que leur parent, sinon la page devient un aplat de couleur. */
.section.themed .report-card .field-card,
.section.themed .field-card .field-card,
.section.themed .etape-bloc .field-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, .96), var(--section-accent-tint, rgba(29, 78, 137, .08)) 160%), #fff;
  box-shadow: none;
}

/* Groupes d'options : le conteneur recoit un fond doux, comme a l'etape 1 de
   la page Banque. */
.section.themed .section-body > .field-groups,
.section.themed .field-groups.optionnel {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .08)), rgba(255, 255, 255, .72));
  border: 1px solid var(--section-accent-border, rgba(18, 58, 99, .10));
}

/* Blocs d'etape et encarts d'explication, partout ou ils apparaissent. */
.section.themed .etape-bloc {
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .10)), rgba(255, 255, 255, .92));
  border: 1px solid var(--section-accent-border, rgba(15, 35, 64, .10));
}
.section.themed .etape-bloc h4 { color: var(--section-accent-dark, #1d4e89); }

.section.themed .appearance-notes,
.section.themed .empty-state,
.section.themed .etape-vide {
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .10)), rgba(255, 255, 255, .88));
  border: 1px dashed var(--section-accent-border, rgba(18, 58, 99, .18));
  border-radius: 14px;
}

/* Un lisere de couleur en tete de bloc : c'est ce qui donne le rythme visuel
   des pages a etapes, repris ici sur les cartes ordinaires. */
.section.themed .report-card > .section-head,
.section.themed .field-card > .section-head {
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .14)), rgba(255, 255, 255, .6));
  border-radius: 12px;
  padding: 12px 14px;
  margin: -4px -4px 12px;
}

/* En-tetes de tableaux : la meme couleur que la section, au lieu du bleu fixe. */
.section.themed table.fin thead th {
  background: linear-gradient(135deg, var(--section-accent-dark, #1d4e89), var(--section-accent, #2f6fb5));
  color: #fff;
}

/* Un bloc replie (details) suit la meme logique que les autres blocs. */
.section.themed details.field-card,
.section.themed details.report-card { padding: 12px 14px; }
.section.themed details > summary { cursor: pointer; font-weight: 800; color: var(--section-accent-dark, var(--brand)); }

/* Les pages Banque et Dossier client gardent leurs degrades par etape : leurs
   en-tetes colorees ne doivent pas etre repeintes par les regles ci-dessus. */
.section.themed .etape > .etape-tete,
.section.themed details.etape > .etape-tete {
  background: linear-gradient(120deg, var(--etape-a, var(--section-accent-dark, #1d4e89)), var(--etape-b, var(--section-accent, #60a5fa)));
}

/* Fournisseurs vêtements & images ------------------------------------ */
.supplier-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.supplier-kpis > div {
  display: grid;
  gap: 5px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--section-accent-border, #ddd6fe);
  background: linear-gradient(135deg, var(--section-accent-tint, #f5f3ff), #fff);
}
.supplier-kpis span { color: #64748b; font-size: 14px; }
.supplier-kpis strong { color: var(--section-accent-dark, #5b21b6); font-size: 22px; font-variant-numeric: tabular-nums; }
.supplier-import { margin-bottom: 18px; }
.supplier-import > summary { cursor: pointer; font-weight: 800; color: var(--section-accent-dark, #5b21b6); }
.supplier-import textarea { width: 100%; margin: 12px 0; font: 13px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; }
.supplier-manual { margin-bottom: 18px; }
.supplier-manual > summary { cursor: pointer; font-weight: 800; color: var(--section-accent-dark, #5b21b6); }
.supplier-manual-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; margin: 14px 0; }
.supplier-manual-grid label { display: grid; gap: 5px; color: #475569; font-size: 14px; font-weight: 700; }
.supplier-manual-grid .wide { grid-column: 1 / -1; }
.supplier-manual-lines input { min-width: 105px; width: 100%; }
.supplier-manual-lines th:nth-child(2), .supplier-manual-lines td:nth-child(2) { min-width: 240px; }
.supplier-manual .row-actions { margin: 12px 0; }
.supplier-needs { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--section-accent-border, #ddd6fe); }
.supplier-invoice-list { display: grid; gap: 12px; }
.supplier-invoice-card > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; cursor: pointer; }
.supplier-invoice-card > summary span:first-child { display: grid; gap: 3px; }
.supplier-invoice-card > summary small { color: #64748b; }
.supplier-review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 14px 0; }
.supplier-review-grid label, .supplier-review-grid > div { display: grid; gap: 5px; }
.supplier-review-grid span, .supplier-review-grid label { color: #475569; font-size: 14px; font-weight: 700; }
.supplier-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; padding: 10px 0; font-variant-numeric: tabular-nums; }
.supplier-totals strong { color: var(--section-accent-dark, #5b21b6); }
.supplier-stock input { min-width: 90px; }
@media (max-width: 760px) {
  .supplier-invoice-card > summary { align-items: flex-start; flex-direction: column; }
}

/* ==========================================================================
   Onglet Auto : la phrase debordait du rectangle
   --------------------------------------------------------------------------
   .mois-table imposait white-space: nowrap a toutes ses cellules pour garder
   les tableaux mensuels lisibles. Dans l'encadre du resume (320 px de large),
   la ligne « Depenses de vehicule (essence, entretien, assurance) » et le
   libelle du bouton sortaient donc de la boite. Les libelles peuvent
   maintenant passer a la ligne ; les montants restent sur une seule ligne.
   ========================================================================== */
.auto-summary { flex: 1 1 320px; max-width: 420px; min-width: 280px; }
.auto-summary .mois-table td,
.auto-summary .mois-table th { white-space: normal; overflow-wrap: anywhere; }
.auto-summary .mois-table td.n,
.auto-summary .mois-table th.n { white-space: nowrap; }
.auto-summary .button {
  white-space: normal;
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.auto-summary .mois-hint { text-align: left; }


/* ==========================================================================
   Pages en tableau : le tableau devient un bloc, comme ailleurs
   --------------------------------------------------------------------------
   Depenses, Paie, Actifs, Dettes, Capital, Inventaire et Factures n'affichent
   qu'un tableau nu dans leur corps de page : ils n'avaient donc aucun des
   degrades des autres onglets. Seuls les conteneurs de PREMIER niveau sont
   habilles, pour ne pas repeindre les tableaux deja imbriques dans une carte
   ou dans un bloc d'etape.
   ========================================================================== */
.section.themed > .section-body > .table-wrap,
.section.themed > .section-body > .mois-scroll,
.section.themed > .section-body > .mois-flex {
  padding: 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .10)), rgba(255, 255, 255, .78));
  border: 1px solid var(--section-accent-border, rgba(18, 58, 99, .12));
  box-shadow: 0 4px 14px rgba(15, 35, 64, .05);
}

.section.themed > .section-body > .footer-note {
  margin-top: 12px;
  padding: 11px 15px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .10)), rgba(255, 255, 255, .86));
  border-left: 4px solid var(--section-accent, #1d4e89);
}

/* Titres de la page « Par mois » : ceux qui n'ont pas deja leur couleur
   (vert pour les revenus, rose pour les depenses) suivent la section. */
.section.themed .mois-h:not(.vert):not(.rose) {
  padding: 9px 14px;
  border-radius: 11px;
  background: linear-gradient(120deg, var(--section-accent-dark, #1d4e89), var(--section-accent, #2f6fb5));
  color: #fff;
}

/* Encadre du resume automobile : meme famille visuelle que les autres blocs. */
.auto-summary {
  background: linear-gradient(160deg, var(--section-accent-tint, rgba(180, 83, 9, .12)), rgba(255, 255, 255, .95));
  border: 1px solid var(--section-accent-border, rgba(180, 83, 9, .22));
  box-shadow: 0 6px 18px rgba(15, 35, 64, .06);
}

/* Carnet complet des clients : bloc replie, meme traitement. */
.section.themed details.carnet-complet {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--section-accent-tint, rgba(29, 78, 137, .10)), rgba(255, 255, 255, .85));
  border: 1px solid var(--section-accent-border, rgba(18, 58, 99, .12));
}


/* ==========================================================================
   Panneaux de la page Factures
   --------------------------------------------------------------------------
   Les blocs de l'editeur de facture restaient blancs alors que toutes les
   autres pages suivent la couleur de leur section. Meme derivation que le
   reste : la teinte vient de --section-accent, donc du choix fait dans
   Parametres > Couleurs des sections.
   ========================================================================== */
.section.themed .invoice-panel {
  background:
    linear-gradient(135deg, var(--section-accent-tint, rgba(15, 118, 110, .10)) 0%, rgba(255, 255, 255, .95) 60%),
    #fff;
  border: 1px solid var(--section-accent-border, rgba(18, 58, 99, .12));
  box-shadow: 0 4px 14px rgba(15, 35, 64, .05);
}
.section.themed .invoice-panel > h3 { color: var(--section-accent-dark, var(--brand)); }


/* ==========================================================================
   Impression : on aplatit les degrades
   --------------------------------------------------------------------------
   Les fonds colores mangent l'encre et grisent le texte sur papier. Le rapport
   imprime garde donc des blocs blancs avec un simple filet de couleur.
   ========================================================================== */
@media print {
  .section.themed .field-card,
  .section.themed .report-card,
  .section.themed .invoice-panel,
  .section.themed .etape-bloc,
  .section.themed .appearance-notes,
  .section.themed .empty-state,
  .section.themed .etape-vide,
  .section.themed > .section-body > .table-wrap,
  .section.themed > .section-body > .mois-scroll,
  .section.themed > .section-body > .mois-flex,
  .section.themed > .section-body > .footer-note,
  .section.themed details.carnet-complet,
  .auto-summary {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #d7dde5 !important;
  }
  .section.themed .report-card > .section-head,
  .section.themed .field-card > .section-head,
  .section.themed .mois-h:not(.vert):not(.rose) {
    background: none !important;
    color: #123a63 !important;
    border-bottom: 1px solid #cbd5e1;
  }
  .section.themed table.fin thead th {
    background: #eef2f6 !important;
    color: #0f172a !important;
  }
}


/* ==========================================================================
   Lisibilite : base typographique
   --------------------------------------------------------------------------
   Toutes les tailles de la feuille ont ete remontees. Ici on fixe la base
   (texte courant, champs de saisie, boutons) et on donne de l'air aux lignes :
   c'est l'interligne, autant que la taille, qui fatigue les yeux.
   --echelle-texte est pilote par le reglage « Taille du texte » des Parametres.
   ========================================================================== */
:root { --echelle-texte: 1; }

body {
  font-size: 16px;
  line-height: 1.55;
}

#app { zoom: var(--echelle-texte, 1); }

input, select, textarea, button, .button {
  font-family: inherit;
  font-size: 15.5px;
}
input, select, textarea { line-height: 1.4; }

table.fin tbody td input,
table.fin tbody td select,
.mois-table input,
.rec-amt { font-size: 15px; }

/* Les cellules de tableau etaient a l'etroit : la hauteur de ligne compte
   autant que la taille des caracteres pour suivre une ligne des yeux. */
table.fin tbody td { padding: 9px 8px; line-height: 1.45; }
table.fin thead th { padding: 12px 8px; }
.mois-table th, .mois-table td { padding: 9px 12px; }

p, li, label, .hint, .footer-note, .appearance-notes p { line-height: 1.55; }

/* Le gris clair sur fond clair demande un effort meme quand le texte est
   assez gros : on fonce les textes secondaires. */
:root { --muted: #4b5a6b; }
.hint, .footer-note, .mois-hint, .appearance-notes p { color: #44546a; }


/* ==========================================================================
   Mode deplacement des blocs
   ========================================================================== */
body.bloc-move-on .bloc-deplacable {
  position: relative;
  outline: 2px dashed rgba(37, 99, 235, .45);
  outline-offset: 4px;
  border-radius: 16px;
  transition: outline-color .12s ease, box-shadow .12s ease;
}
body.bloc-move-on .bloc-deplacable:hover { outline-color: #2563eb; }
body.bloc-move-on .bloc-deplacable.bloc-en-vol { opacity: .55; outline-style: solid; box-shadow: 0 12px 28px rgba(15, 35, 64, .22); }
body.bloc-move-on .bloc-conteneur { padding-top: 6px; }

.bloc-poignee {
  position: absolute;
  top: -14px;
  right: 14px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 5px;
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(15, 35, 64, .16);
}
.bloc-glisser {
  cursor: grab;
  user-select: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}
.bloc-glisser:active { cursor: grabbing; }
.bloc-fleche {
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #1e3a8a;
  border-radius: 8px;
  width: 30px;
  height: 28px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  font-weight: 800;
}
.bloc-fleche:hover { background: #c7d2fe; }
#btn-bloc-move.primary { box-shadow: 0 0 0 3px rgba(37, 99, 235, .25); }

.bank-source-cell {
  display: grid;
  gap: 6px;
  min-width: 220px;
}
.bank-source-cell select,
.bank-source-cell input {
  width: 100%;
  min-width: 0;
}

@media print { .bloc-poignee { display: none !important; } body.bloc-move-on .bloc-deplacable { outline: none !important; } }

/* Couleurs de lecture seulement : aucune modification des données comptables. */
#section-integration .flux-entree { --flux-bg:#e0f5e7; --flux-ink:#15532d; --flux-bar:#228348; }
#section-integration .flux-sortie { --flux-bg:#fde6e6; --flux-ink:#812c2c; --flux-bar:#c13e45; }
#section-integration .flux-carte { --flux-bg:#dfeeff; --flux-ink:#194c83; --flux-bar:#2873bc; }
#section-integration .flux-transfert { --flux-bg:#eee5fb; --flux-ink:#61398a; --flux-bar:#8653ba; }
#section-integration .flux-frais { --flux-bg:#fff0d8; --flux-ink:#714805; --flux-bar:#b97814; }
#section-integration .flux-neutre { --flux-bg:#f0f2f5; --flux-ink:#4b5563; --flux-bar:#8b95a5; }
#section-integration tr[class^="flux-"] > td { background:var(--flux-bg) !important; color:var(--flux-ink); }
#section-integration tr[class^="flux-"] > td:first-child { border-left:5px solid var(--flux-bar); }
#section-integration tr[class^="flux-"] input:not([type="checkbox"]),
#section-integration tr[class^="flux-"] select { background:#ffffffeb; color:#172536; border-color:var(--flux-bar); }
#section-integration .mouvement-legende { margin:14px 0; padding:16px 20px; border:1px solid #bacbd5; border-radius:12px; background:#fff; color:#243746; }
#section-integration .mouvement-reperes { display:flex; flex-wrap:wrap; gap:9px; margin-top:10px; }
#section-integration .mouvement-reperes span { background:var(--flux-bg); color:var(--flux-ink); border-left:5px solid var(--flux-bar); border-radius:7px; padding:9px 13px; font-weight:700; }
#section-integration .mouvement-legende p { margin:12px 0 0; font-size:13px; line-height:1.5; }
#section-integration .integration-etapes { display:grid; gap:18px; }
#section-integration .integration-etapes > #etape-banque,
#section-integration .integration-etapes > #etape-carte { margin:0; min-width:0; }
#section-integration .integration-etapes > .etape .etape-tete { flex-wrap:wrap; gap:12px; padding:16px 18px; }
#section-integration .integration-etapes > .etape .etape-titres { flex:1; }
#section-integration .integration-etapes > .etape .etape-corps { padding:12px; }
#section-integration .integration-reglages-carte,
#section-integration .integration-outils-secondaires { border:1px solid #c8d5df; border-radius:10px; padding:12px 16px; background:#f7fafc; }
#section-integration .integration-reglages-carte { margin-bottom:12px; }
#section-integration .integration-reglages-carte > summary,
#section-integration .integration-outils-secondaires > summary { cursor:pointer; font-weight:700; color:#24485d; }
#section-integration .integration-outils-secondaires[open] > .etape { margin-top:16px; }
#section-integration .integration-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:12px; padding:12px 0 0; color:#294759; }
#section-integration .integration-pagination > span { margin-right:auto; font-weight:600; }
#section-integration .integration-pagination select { width:auto; min-width:60px; padding:6px; }
#section-integration .integration-pagination button:disabled { opacity:.5; cursor:default; }
#section-integration .nature-recurrent { background:#cff4f7; color:#075563; border:1px solid #2b8e9b; }
#section-integration .nature-publicite { background:#ffe0ee; color:#8a2058; border:1px solid #c2548d; }
#section-integration .nature-general { background:#fff0d3; color:#704600; border:1px solid #b68a30; }
#section-integration .nature-frais { background:#f2e8d7; color:#6d4720; border:1px solid #ad8251; }
#section-integration .nature-choix { display:grid; gap:5px; min-width:145px; }
#section-integration .nature-choix select { font-size:12px; }
#section-integration .nature-legende-compacte { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; border-top:1px solid #d7e0e8; padding-top:12px; }
#section-integration .recurrents-reels { border:1px solid #65a7b2; border-radius:9px; padding:10px 12px; margin-bottom:12px; background:#f0fbfc; }
#section-integration .recurrents-reels summary { font-weight:700; color:#075563; cursor:pointer; }
#section-integration .recurrents-reels-liste { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:8px; }
#section-integration .recurrents-reels-liste article { display:grid; gap:5px; background:white; border:1px solid #bddbe0; border-radius:8px; padding:10px; }
/* Compact supplier bills: edit one record in its own panel. */
#section-depenses .compact-expense-wrap { width:100%; overflow:visible; }
#section-depenses table.compact-expense-table { min-width:0 !important; width:100% !important; table-layout:fixed; }
#section-depenses .compact-expense-table th,
#section-depenses .compact-expense-table td { min-width:0 !important; white-space:normal !important; overflow-wrap:anywhere; padding:9px 6px; font-size:12px; }
#section-depenses .compact-expense-table th:nth-child(2) { width:23%; }
#section-depenses .compact-expense-table th:nth-child(3) { width:18%; }
#section-depenses .compact-expense-table button { min-width:0; width:auto; padding:6px 8px; font-size:12px; }
#expense-editor { box-sizing:border-box; width:min(800px,94vw); max-height:88vh; overflow-y:auto; border:1px solid #9db4c3; border-radius:14px; padding:20px; color:#193247; background:#f8fbfe; }
#expense-editor::backdrop { background:#10243970; }
#expense-editor .expense-editor-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0; }
#expense-editor .expense-editor-field { display:flex; flex-direction:column; gap:5px; min-width:0; padding:10px; border:1px solid #d2e2eb; border-radius:8px; background:white; }
#expense-editor input:not([type=checkbox]), #expense-editor select { width:100%; min-width:0; box-sizing:border-box; }
@media(max-width:600px) { #expense-editor .expense-editor-grid { grid-template-columns:1fr; } #section-depenses .compact-expense-table th,#section-depenses .compact-expense-table td {font-size:10px;padding:5px 3px;} }

/* La grille ne doit jamais imposer la largeur minimale des tableaux à la page. */
.content, .section, .section-body, .mois-scroll { min-width:0; max-width:100%; }
#section-recurrentes .mois-scroll { overflow-x:visible; }
#section-recurrentes .recurring-actual-months table { width:100%; min-width:0; table-layout:fixed; }
#section-recurrentes .recurring-actual-months th,
#section-recurrentes .recurring-actual-months td { padding:8px 4px; font-size:12px; white-space:normal; overflow-wrap:anywhere; }
#section-recurrentes .recurring-actual-months th:first-child { width:15%; }
#section-recurrentes .rec-table { display:table; width:100%; min-width:0; table-layout:fixed; background:var(--panel-solid); }
#section-recurrentes .rec-table th,
#section-recurrentes .rec-table td { min-width:0; padding:8px 3px; white-space:normal; font-size:12px; }
#section-recurrentes .rec-table tr:not(.tot) > :is(th,td):nth-child(1),
#section-recurrentes .rec-table tr:not(.tot) > :is(th,td):nth-child(n+4):nth-child(-n+9),
#section-recurrentes .rec-table tr:not(.tot) > :is(th,td):nth-child(22) { display:none; }
#section-recurrentes .rec-table th:nth-child(2) { width:22%; }
#section-recurrentes .rec-table th:nth-child(3) { width:9%; }
#section-recurrentes .rec-table th:last-child { width:9%; }
#section-recurrentes .rec-table td.rec-mth { text-align:center; }
#section-recurrentes .rec-table input:not([type=checkbox]),
#section-recurrentes .rec-table select { width:100%; min-width:0; max-width:100%; }
#section-recurrentes .rec-table tr.tot { display:none; }
#section-recurrentes .rec-table .button { padding:6px; font-size:12px; min-width:0; width:100%; }
#recurring-model-editor { width:min(760px,94vw); max-height:88vh; overflow:auto; border:1px solid var(--border); border-radius:16px; padding:20px; }
#recurring-model-editor::backdrop { background:#10243970; }
.recurring-editor-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:16px 0; }
.recurring-editor-fields label { min-width:0; display:flex; flex-direction:column; gap:5px; font-size:13px; }
.recurring-editor-fields input:not([type=checkbox]), .recurring-editor-fields select { width:100%; min-width:0; }
.recurring-editor-months { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 4px; min-width:0; margin:12px 0 20px; padding:12px 8px; border:1px solid var(--border); border-radius:10px; }
.recurring-editor-months legend { font-weight:600; padding:0 6px; }
.recurring-editor-months label { display:flex; flex:1 0 42px; flex-direction:column; align-items:center; gap:7px; min-width:0; font-size:11px; }
.recurring-editor-months input[type=checkbox] { width:18px; height:18px; margin:0; }
#section-paiements .grouped-ledger { display:block; min-width:0; max-width:100%; }
#section-paiements > details { margin:14px; padding:12px; border:1px solid var(--border); border-radius:12px; background:var(--panel-solid); }
#section-paiements > details > summary { cursor:pointer; padding:8px; font-weight:600; color:var(--brand); }
#section-paiements .grouped-ledger .section-head h2 { font-size:22px; }
@media(max-width:1100px) {
  #section-recurrentes .recurring-actual-months table,
  #section-recurrentes .recurring-actual-months tbody { display:block; }
  #section-recurrentes .recurring-actual-months thead { display:none; }
  #section-recurrentes .recurring-actual-months tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-bottom:12px; border:1px solid var(--border); border-radius:10px; }
  #section-recurrentes .recurring-actual-months td { display:block; text-align:left; }
  #section-recurrentes .recurring-actual-months td::before { content:attr(data-label); display:block; font-weight:600; }
  #section-recurrentes .recurring-actual-months td:first-child { grid-column:1/-1; font-weight:700; }
}