:root {
  --bg: #f5f1e9;
  --bg-2: #fffaf1;
  --card: rgba(255,255,255,.88);
  --ink: #211a14;
  --muted: #7b6f63;
  --line: rgba(65, 45, 25, .14);
  --brand: #8d5d2f;
  --brand-dark: #4b2d17;
  --gold: #f4c76b;
  --green: #42664a;
  --red: #a9443d;
  --shadow: 0 18px 48px rgba(42, 31, 18, .10);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(244,199,107,.38), transparent 32rem),
    radial-gradient(circle at 100% 20%, rgba(141,93,47,.18), transparent 30rem),
    linear-gradient(135deg, var(--bg), #efe4d5);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(1500px, calc(100% - 32px)); margin: 0 auto; padding: 26px 0 56px; }
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background: rgba(255,255,255,.66);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.brand-block { display: flex; align-items: center; gap: 16px; }
.brand-mark {
  width: 64px; height: 64px; border-radius: 22px;
  display: grid; place-items: center;
  color: #fff; font-weight: 900; letter-spacing: .05em;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand));
  box-shadow: 0 14px 35px rgba(75,45,23,.25);
}
.eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 800; color: var(--brand); }
h1, h2, h3 { margin: 0; line-height: 1.1; }
h1 { font-size: clamp(26px, 4vw, 42px); letter-spacing: -.04em; }
h2 { font-size: clamp(20px, 2vw, 27px); letter-spacing: -.025em; }
.subtle, .help, small { color: var(--muted); }
.subtle { margin: 6px 0 0; }
.help { line-height: 1.55; }
.top-actions, .button-row, .button-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.button-grid { flex-direction: column; align-items: stretch; }

.zoom-toolbar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 22px rgba(42,31,18,.06);
}
.zoom-btn, .zoom-value {
  border: 0;
  border-radius: 999px;
  min-height: 38px;
  font-weight: 900;
  color: var(--brand-dark);
  background: rgba(75,45,23,.08);
}
.zoom-btn { width: 38px; font-size: 22px; line-height: 1; }
.zoom-value {
  min-width: 76px;
  padding: 0 12px;
  font-size: 13px;
}
.zoom-btn:hover, .zoom-value:hover { background: rgba(75,45,23,.14); }
.zoom-btn:active, .zoom-value:active { transform: translateY(1px); }

.tabs {
  position: sticky; top: 0; z-index: 10;
  display: flex; gap: 10px; overflow-x: auto;
  margin: 18px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.74);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(42,31,18,.06);
}
.tab {
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  white-space: nowrap;
}
.tab.active { background: var(--brand-dark); color: #fff; }

.panel { display: none; }
.panel.active { display: block; animation: rise .25s ease-out; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.uneven { grid-template-columns: 1.05fr .95fr; }
.grid.uneven-right { grid-template-columns: .85fr 1.15fr; }
.card {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}
.accent-card {
  background:
    linear-gradient(135deg, rgba(75,45,23,.96), rgba(141,93,47,.92)),
    var(--brand-dark);
  color: #fff;
}
.accent-card .eyebrow, .accent-card .subtle, .accent-card .help, .accent-card .kpi span { color: rgba(255,255,255,.72); }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; }

.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
label { display: flex; flex-direction: column; gap: 7px; font-weight: 800; color: #3c3025; }
.accent-card label { color: rgba(255,255,255,.9); }
input, select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 12px 13px;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  outline: none;
  transition: border .18s, box-shadow .18s, background .18s;
}
textarea { resize: vertical; min-height: 82px; }
input:focus, select:focus, textarea:focus { border-color: rgba(141,93,47,.55); box-shadow: 0 0 0 4px rgba(244,199,107,.22); background: #fff; }
.checkbox-line { flex-direction: row; align-items: center; gap: 9px; }
.checkbox-line input { width: auto; }

.btn {
  border: 1px solid rgba(75,45,23,.18);
  border-radius: 999px;
  padding: 11px 16px;
  background: #fff;
  color: var(--brand-dark);
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(42,31,18,.07);
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--brand-dark); color: #fff; border-color: var(--brand-dark); }
.btn.ghost { background: rgba(255,255,255,.55); box-shadow: none; }
.btn.small { padding: 8px 12px; font-size: 13px; }
.btn.danger { background: #fff5f3; border-color: rgba(169,68,61,.24); color: var(--red); }
.file-label { text-align: center; }
.file-label input { display: none; }

.switch { flex-direction: row; align-items: center; gap: 10px; color: var(--ink); }
.switch input { display: none; }
.switch span { width: 48px; height: 28px; border-radius: 99px; background: rgba(75,45,23,.16); position: relative; }
.switch span:after { content: ""; position: absolute; width: 22px; height: 22px; top: 3px; left: 3px; border-radius: 50%; background: #fff; box-shadow: 0 5px 12px rgba(0,0,0,.16); transition: transform .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span:after { transform: translateX(20px); }

.result-band {
  margin-top: 16px;
  padding: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(244,199,107,.34), rgba(255,255,255,.62));
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.result-band span, .result-pill span { color: var(--muted); font-weight: 800; }
.result-band strong { font-size: 28px; }
.result-pill { padding: 11px 15px; border-radius: 999px; background: rgba(66,102,74,.12); color: var(--green); font-weight: 900; }
.result-pill.muted { background: rgba(75,45,23,.08); color: var(--muted); }

.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.kpi { padding: 16px; border-radius: 20px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.14); }
.kpi span { display: block; font-size: 12px; font-weight: 800; margin-bottom: 7px; }
.kpi strong { font-size: clamp(22px, 2.5vw, 32px); letter-spacing: -.04em; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.62); }
.table-wrap.wide { max-height: 74vh; }
table { width: 100%; border-collapse: collapse; min-width: 860px; }
th, td { padding: 13px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: rgba(255,250,241,.8); }
td input, td textarea, td select { min-width: 90px; padding: 9px 10px; border-radius: 12px; }
td textarea { min-width: 280px; min-height: 54px; }
tr:last-child td { border-bottom: 0; }
.line-desc { display: block; margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.35; max-width: 600px; }
.icon-btn { width: 34px; height: 34px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--red); font-weight: 900; }

.totals-grid, .insight-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.totals-grid div, .insight {
  padding: 15px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.68);
}
.totals-grid span, .insight span { display: block; color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 7px; }
.totals-grid strong, .insight strong { font-size: 23px; letter-spacing: -.03em; }
.insight small { display: block; margin-top: 8px; line-height: 1.35; }
.big-number { font-size: clamp(44px, 8vw, 78px); font-weight: 950; letter-spacing: -.07em; margin: 18px 0 10px; }
.meter { height: 13px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.18); }
.meter span { display: block; height: 100%; width: 0; background: var(--gold); border-radius: inherit; transition: width .3s; }

.top-space { margin-top: 16px; }
.annual-table td strong { white-space: nowrap; }
.annual-table .month-name { font-weight: 950; color: var(--brand-dark); }
.annual-table .muted-note { color: var(--muted); font-size: 13px; line-height: 1.35; max-width: 360px; }
.badge-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.badge { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.68); border: 1px solid var(--line); font-weight: 850; color: var(--brand-dark); }
.badge small { font-weight: 700; }

canvas { width: 100%; max-width: 100%; height: auto; border-radius: 20px; background: rgba(255,255,255,.56); border: 1px solid var(--line); }
.category-list { display: grid; gap: 9px; margin-top: 12px; }
.cat-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.64); border: 1px solid var(--line); font-weight: 800; }
.cat-row small { display: block; margin-top: 3px; font-weight: 600; }
#expense-search { max-width: 340px; }

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99;
  max-width: min(420px, calc(100% - 36px));
  padding: 14px 16px;
  border-radius: 16px;
  color: #fff;
  background: rgba(33,26,20,.92);
  box-shadow: 0 16px 42px rgba(0,0,0,.18);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  font-weight: 800;
}
.toast.show { opacity: 1; transform: translateY(0); }

.address-suggestions {
  position: absolute;
  z-index: 50;
  width: min(720px, calc(100% - 48px));
  max-height: 260px;
  overflow: auto;
  margin-top: 6px;
  border: 1px solid rgba(37, 32, 25, .14);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 50px rgba(35, 29, 20, .16);
  padding: 6px;
}
.address-suggestion {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: pointer;
  color: var(--ink);
}
.address-suggestion:hover { background: rgba(171, 126, 78, .12); }
.address-suggestion strong { display: block; font-size: 14px; }
.address-suggestion span { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }


@media (max-width: 1100px) {
  .grid.two, .grid.uneven, .grid.uneven-right { grid-template-columns: 1fr; }
  .form-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .totals-grid, .insight-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .app-shell { width: min(100% - 18px, 1500px); padding-top: 10px; }
  .topbar { flex-direction: column; align-items: stretch; }
  .brand-block { align-items: flex-start; }
  .brand-mark { width: 52px; height: 52px; border-radius: 18px; }
  .form-grid.two, .form-grid.three, .form-grid.four, .form-grid.five { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .kpi-grid, .totals-grid, .insight-grid { grid-template-columns: 1fr; }
  .card { padding: 16px; border-radius: 20px; }
}

.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--line);
}
.status-chip.draft { background: rgba(244,199,107,.22); color: var(--brand-dark); }
.status-chip.signed { background: rgba(66,102,74,.14); color: var(--green); }
.status-chip.waiting { background: rgba(244,199,107,.24); color: var(--brand-dark); }
.button-row.compact { gap: 6px; }
.button-row.compact .btn { white-space: nowrap; }
.mini-meter {
  width: 120px;
  height: 9px;
  margin-top: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(75,45,23,.10);
}
.mini-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green));
}
.planning-table td { min-width: 130px; }
#quote-status-display { background: rgba(75,45,23,.06); color: var(--muted); }

.planning-controls { align-items: end; }
.planning-controls label input[readonly] { background: rgba(75,45,23,.06); color: var(--muted); }
.planning-buttons { align-self: end; }
.planning-breakdowns { margin-top: 0; margin-bottom: 0; }
.halfday-table { min-width: 1100px; }
.halfday-table td { min-width: 180px; }
.slot-empty {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 14px;
  background: rgba(75,45,23,.07);
  color: var(--muted);
  font-weight: 850;
}
.slot-empty.blocked {
  background: rgba(169,68,61,.10);
  color: var(--red);
}
.slot-list { display: grid; gap: 8px; }
.slot-task {
  padding: 10px 11px;
  border: 1px solid rgba(75,45,23,.14);
  border-radius: 16px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 18px rgba(42,31,18,.05);
}
.slot-task.waiting {
  border-color: rgba(244,199,107,.65);
  background: rgba(247,213,127,.18);
}
.slot-task strong { display: block; color: var(--brand-dark); }
.slot-task span { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; line-height: 1.3; }
.slot-task em { display: block; margin-top: 5px; font-style: normal; font-size: 12px; font-weight: 900; color: var(--muted); }
.slot-task.waiting em { color: var(--brand-dark); }
.slot-task small { display: block; margin-top: 5px; font-weight: 850; color: var(--green); }
.slot-task.waiting small { color: var(--brand-dark); }
#service-ca-week-table td, #service-ca-month-table td { min-width: 120px; }

.total-row {
  background: rgba(247, 213, 127, .18);
}
.total-row td {
  border-top: 2px solid rgba(75,45,23,.22);
}
.total-row strong {
  color: var(--brand-dark);
}
#monthly-signed-table td {
  min-width: 120px;
}
#monthly-signed-table td:nth-child(2) {
  min-width: 220px;
}

.finish-control {
  display: grid;
  gap: 0.45rem;
  min-width: 220px;
}
.finish-control label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--muted);
}
.finish-control input[type="date"] {
  margin-top: 0.25rem;
  width: 100%;
}
.top-space-xs {
  margin-top: 0.5rem;
}

/* V17 — options logistiques planning */
.logistics-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.check-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid rgba(42, 32, 23, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}
.check-card input {
  width: auto;
  margin-top: 0.15rem;
}
.check-card span {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.check-card small {
  color: var(--muted);
  line-height: 1.35;
}
@media (max-width: 780px) {
  .logistics-options { grid-template-columns: 1fr; }
}

/* V18 — séparation rentabilité devis / coût de l'entreprise */
.quote-profit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.profit-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  box-shadow: 0 12px 28px rgba(42,31,18,.06);
}
.profit-card span {
  display: block;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 8px;
}
.profit-card strong {
  display: block;
  font-size: clamp(25px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.04em;
}
.profit-card small {
  display: block;
  margin-top: 9px;
  line-height: 1.35;
}
.profit-card.blue strong { color: #1d5fb8; }
.profit-card.green strong { color: var(--green); }
.profit-card.purple strong { color: #8a38c2; }
.profit-card.orange strong { color: #e36d18; }
.quote-cost-table { min-width: 1180px; }
.quote-cost-table .positive strong { color: var(--green); }
.quote-cost-table .negative strong { color: var(--red); }
.company-insights { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) {
  .company-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .quote-profit-grid, .company-insights { grid-template-columns: 1fr; }
}


/* V19 — tableau de bord global */
.dashboard-hero .dashboard-main-number {
  font-size: clamp(48px, 9vw, 86px);
  line-height: .95;
  font-weight: 950;
  letter-spacing: -.08em;
  margin: 22px 0 14px;
}
.dashboard-meter {
  background: rgba(255,255,255,.18);
  margin-bottom: 18px;
}
.dashboard-kpis .kpi strong {
  font-size: clamp(22px, 2.4vw, 31px);
}
.dashboard-insights {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dashboard-insights .insight strong {
  font-size: clamp(22px, 2.2vw, 30px);
}
.dashboard-charts canvas {
  min-height: 280px;
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  color: var(--muted);
  font-weight: 900;
}
.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.chart-swatch {
  width: 13px;
  height: 13px;
  border-radius: 4px;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(65,45,25,.15);
}
.swatch-0 { background: var(--brand-dark); }
.swatch-1 { background: var(--gold); }
.swatch-2 { background: var(--green); }
.light-band {
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.18);
}
.accent-card .light-band span,
.accent-card .light-band strong {
  color: #fff;
}
.positive { color: var(--green); }
.negative { color: var(--red); }
.dashboard-tables table { min-width: 920px; }
@media (max-width: 900px) {
  .dashboard-insights { grid-template-columns: 1fr; }
}

/* V21 — Responsive mobile avancé */
@media (max-width: 640px) {
  :root {
    --radius: 18px;
  }
  html { scroll-padding-top: 92px; }
  body {
    background:
      radial-gradient(circle at 20% -10%, rgba(244,199,107,.35), transparent 20rem),
      linear-gradient(135deg, var(--bg), #efe4d5);
    font-size: 14px;
  }
  .app-shell {
    width: 100%;
    padding: 8px 8px 44px;
  }
  .topbar {
    padding: 12px;
    border-radius: 20px;
    gap: 12px;
  }
  .brand-block { gap: 10px; }
  .brand-mark {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 15px;
    font-size: 14px;
  }
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  .eyebrow { font-size: 10px; }
  .subtle, .help { font-size: 13px; line-height: 1.45; }
  .top-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }
  .top-actions .btn { width: 100%; }

  .tabs {
    top: 0;
    margin: 10px 0 12px;
    padding: 7px;
    gap: 6px;
    border-radius: 18px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 10px 12px;
    font-size: 13px;
    border-radius: 14px;
  }

  .grid { gap: 12px; margin-bottom: 12px; }
  .card {
    padding: 14px;
    border-radius: 18px;
  }
  .card-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
  }
  .button-row, .button-grid, .planning-buttons {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    width: 100%;
  }
  .button-row .btn, .button-grid .btn, .planning-buttons .btn { width: 100%; }
  .button-row.compact { grid-template-columns: 1fr 1fr; }
  .btn {
    padding: 12px 14px;
    min-height: 44px;
    text-align: center;
  }
  .btn.small { min-height: 40px; padding: 10px 12px; }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px; /* évite le zoom iOS */
    border-radius: 13px;
  }
  label { gap: 6px; }
  .checkbox-line, .switch { flex-direction: row; }
  .switch input, .checkbox-line input { min-height: initial; }

  .result-band {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    padding: 14px;
    border-radius: 16px;
  }
  .result-band strong { font-size: 24px; }
  .result-pill { width: 100%; text-align: center; border-radius: 14px; }
  .big-number { font-size: 42px; }
  .dashboard-hero .dashboard-main-number { font-size: 48px; }

  .kpi-grid, .totals-grid, .insight-grid, .quote-profit-grid, .company-insights, .dashboard-insights {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .kpi, .insight, .totals-grid div, .profit-card {
    padding: 13px;
    border-radius: 16px;
  }
  .kpi strong, .insight strong, .totals-grid strong, .profit-card strong {
    font-size: 24px;
  }

  /* Les tableaux deviennent des cartes mobiles lisibles */
  .table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
    border-radius: 0;
  }
  .table-wrap.wide { max-height: none; }
  table, .halfday-table, .quote-cost-table, .dashboard-tables table {
    min-width: 0 !important;
    width: 100%;
  }
  thead { display: none; }
  tbody, tr, td { display: block; width: 100%; }
  tr {
    margin: 0 0 12px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 20px rgba(42,31,18,.05);
    overflow: hidden;
  }
  td {
    display: grid;
    grid-template-columns: minmax(108px, 38%) 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    min-width: 0 !important;
    word-break: break-word;
  }
  td:last-child { border-bottom: 0; }
  td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 950;
  }
  td:empty::before { content: ""; }
  td input, td textarea, td select {
    min-width: 0 !important;
    width: 100%;
  }
  td textarea {
    min-height: 70px;
  }
  .line-desc { max-width: 100%; font-size: 12px; }
  .icon-btn { width: 44px; height: 44px; justify-self: end; }
  .total-row {
    background: rgba(247,213,127,.24);
  }

  /* Planning demi-journée : cartes compactes */
  .planning-table td, .halfday-table td {
    min-width: 0 !important;
  }
  .slot-list { gap: 7px; }
  .slot-task {
    padding: 9px;
    border-radius: 13px;
  }
  .slot-task span { font-size: 12px; }
  .slot-empty { width: 100%; justify-content: center; border-radius: 12px; }

  canvas {
    min-height: 240px !important;
    height: 240px !important;
  }
  .chart-legend { font-size: 12px; gap: 8px; }
  .badge-list { gap: 7px; }
  .badge { width: 100%; justify-content: space-between; border-radius: 14px; }

  .address-suggestions {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 8px;
    top: auto;
    width: auto;
    max-height: 45vh;
    border-radius: 18px;
    z-index: 100;
  }
  .toast {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: none;
    text-align: center;
  }
}

@media (max-width: 380px) {
  .button-row.compact { grid-template-columns: 1fr; }
  td { grid-template-columns: 1fr; gap: 5px; }
  td::before { margin-bottom: 2px; }
}

/* V22 — responsive fluide : mobile pensé application, desktop conservé */
@media (max-width: 640px) {
  body {
    font-size: 15px;
    background:
      radial-gradient(circle at 20% -8%, rgba(244,199,107,.28), transparent 18rem),
      radial-gradient(circle at 110% 18%, rgba(141,93,47,.12), transparent 20rem),
      linear-gradient(145deg, #f7f1e8, #efe3d3);
  }
  .app-shell {
    width: 100%;
    padding: 10px 10px 42px;
  }

  /* Header moins massif : plus proche d'une vraie app mobile */
  .topbar {
    position: relative;
    padding: 13px;
    border-radius: 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 12px 34px rgba(42,31,18,.09);
  }
  .brand-block {
    display: grid;
    grid-template-columns: 46px 1fr;
    align-items: center;
    gap: 11px;
  }
  .brand-mark {
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 16px;
  }
  h1 { font-size: 23px; letter-spacing: -.035em; }
  h2 { font-size: 20px; }
  .subtle { margin-top: 4px; font-size: 12.5px; line-height: 1.35; }
  .top-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .top-actions .btn {
    flex: 1 0 auto;
    min-width: 132px;
  }

  /* Navigation mobile : chips légers, pas gros bloc */
  .tabs {
    top: 4px;
    margin: 10px -10px 12px;
    padding: 8px 10px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    background: rgba(247,241,232,.84);
    box-shadow: 0 8px 22px rgba(42,31,18,.06);
  }
  .tab {
    padding: 9px 11px;
    font-size: 12.5px;
    border-radius: 999px;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(65,45,25,.08);
  }
  .tab.active {
    background: var(--brand-dark);
    border-color: var(--brand-dark);
  }

  /* Cartes plus aérées, mais pas en gros blocs empilés */
  .grid { gap: 13px; margin-bottom: 13px; }
  .card {
    padding: 15px;
    border-radius: 21px;
    background: rgba(255,255,255,.82);
    box-shadow: 0 12px 32px rgba(42,31,18,.08);
  }
  .card-head { gap: 9px; margin-bottom: 13px; }
  .help { font-size: 13px; line-height: 1.45; }

  /* KPI : grille 2 colonnes quand c'est lisible, au lieu d'un empilement lourd */
  .kpi-grid,
  .totals-grid,
  .insight-grid,
  .quote-profit-grid,
  .company-insights,
  .dashboard-insights {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
  }
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .dashboard-insights { grid-template-columns: 1fr !important; }
  .kpi, .insight, .totals-grid div, .profit-card {
    padding: 12px;
    border-radius: 16px;
    min-height: auto;
  }
  .kpi span, .insight span, .totals-grid span, .profit-card span {
    font-size: 10.5px;
    line-height: 1.25;
    margin-bottom: 5px;
  }
  .kpi strong, .insight strong, .totals-grid strong, .profit-card strong {
    font-size: 21px;
    line-height: 1.05;
  }
  .dashboard-hero .dashboard-main-number {
    font-size: 46px;
    margin: 18px 0 12px;
  }

  /* Formulaires : respiration sans effet pavé */
  .form-grid { gap: 11px; }
  label { font-size: 13px; }
  input, select, textarea {
    min-height: 45px;
    padding: 11px 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.86);
  }
  .button-row, .button-grid, .planning-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .button-row .btn, .button-grid .btn, .planning-buttons .btn {
    width: auto;
    flex: 1 1 145px;
  }
  .button-row.compact { display: flex; }
  .btn {
    min-height: 43px;
    padding: 11px 13px;
    box-shadow: 0 8px 18px rgba(42,31,18,.06);
  }

  /* Correction principale : les tableaux ne deviennent plus de gros blocs systématiquement.
     On garde le comportement desktop en tableau avec scroll doux horizontal. */
  .table-wrap {
    overflow-x: auto !important;
    overflow-y: visible;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.66) !important;
    box-shadow: inset -18px 0 24px -28px rgba(42,31,18,.35);
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap.wide { max-height: none; }
  table,
  .halfday-table,
  .quote-cost-table,
  .dashboard-tables table {
    display: table !important;
    width: 100%;
    min-width: 760px !important;
    border-collapse: collapse;
  }
  .halfday-table { min-width: 980px !important; }
  .quote-cost-table { min-width: 1040px !important; }
  thead { display: table-header-group !important; }
  tbody { display: table-row-group !important; }
  tr {
    display: table-row !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  th, td {
    display: table-cell !important;
    width: auto !important;
    min-width: 105px !important;
    padding: 10px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
    word-break: normal;
  }
  td::before { content: none !important; }
  th {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 10.5px;
    background: rgba(255,250,241,.94);
  }
  td input, td textarea, td select {
    min-width: 96px !important;
    font-size: 15px;
  }
  td textarea { min-width: 220px !important; }
  .icon-btn { width: 38px; height: 38px; }

  /* Les listes planning restent lisibles à l'intérieur des cellules */
  .slot-task {
    padding: 8px;
    border-radius: 13px;
  }
  .slot-task span { font-size: 12px; }
  .slot-empty { white-space: nowrap; }

  /* Graphiques : format mobile lisible sans écraser la page */
  canvas {
    min-height: 220px !important;
    height: 220px !important;
    border-radius: 16px;
  }
  .chart-legend { font-size: 12px; }

  .result-band {
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
  }
  .result-band strong { font-size: 23px; }
  .result-pill { width: auto; min-width: 112px; }
}

@media (max-width: 420px) {
  .app-shell { padding-left: 8px; padding-right: 8px; }
  .tabs { margin-left: -8px; margin-right: -8px; padding-left: 8px; padding-right: 8px; }
  .kpi-grid,
  .totals-grid,
  .quote-profit-grid,
  .company-insights,
  .dashboard-kpis {
    grid-template-columns: 1fr 1fr !important;
  }
  .kpi strong, .totals-grid strong, .profit-card strong { font-size: 19px; }
  .result-band { grid-template-columns: 1fr; }
  .result-pill { width: 100%; }
}

/* V23 — correction contraste mobile : les cartes accent ne doivent jamais devenir blanches */
@media (max-width: 640px) {
  .card.accent-card,
  .accent-card {
    background:
      linear-gradient(135deg, rgba(75,45,23,.98), rgba(141,93,47,.94)) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.18) !important;
  }

  .accent-card h1,
  .accent-card h2,
  .accent-card h3,
  .accent-card strong,
  .accent-card .big-number,
  .accent-card .dashboard-main-number {
    color: #fff !important;
  }

  .accent-card .eyebrow,
  .accent-card .subtle,
  .accent-card .help,
  .accent-card .kpi span,
  .accent-card small {
    color: rgba(255,255,255,.74) !important;
  }

  .accent-card .kpi,
  .accent-card .insight,
  .accent-card .totals-grid div,
  .accent-card .light-band {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.16) !important;
  }

  .accent-card .meter,
  .accent-card .dashboard-meter {
    background: rgba(255,255,255,.22) !important;
  }

  .accent-card .meter span,
  .accent-card .dashboard-meter span {
    background: linear-gradient(90deg, var(--gold), #fff3c1) !important;
  }

  /* Mini amélioration iPhone : le hero prend moins de place et respire mieux */
  .dashboard-hero {
    padding: 18px !important;
  }
  .dashboard-hero .dashboard-main-number {
    font-size: 44px !important;
  }
}

/* V30 — onglet calcul prix au m² */
.m2-price-table th,
.m2-price-table td { vertical-align: top; }
.m2-price-table input { min-width: 92px; }
.m2-price-table td:first-child input { min-width: 190px; }
.m2-price-table .row-actions { min-width: 125px; }
.button-row.compact { justify-content: flex-end; }
@media (max-width: 760px) {
  .m2-price-table input { min-width: 84px; }
  .m2-price-table td:first-child input { min-width: 160px; }
}


/* V32 — lisibilité du tableau prix au m² + saisie au centième */
.m2-price-table {
  border-collapse: separate;
  border-spacing: 0;
}
.m2-price-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #f3e3c9;
  color: #4b2d17;
  border-bottom: 2px solid rgba(75,45,23,.22);
}
.m2-price-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.96) !important; }
.m2-price-table tbody tr:nth-child(even) { background: rgba(246,231,205,.72) !important; }
.m2-price-table tbody tr:hover { background: rgba(244,199,107,.30) !important; }
.m2-price-table tbody td {
  border-bottom: 1px solid rgba(75,45,23,.16);
}
.m2-price-table tbody td:nth-child(13),
.m2-price-table tbody td:nth-child(14),
.m2-price-table tbody td:nth-child(15) {
  background: rgba(66,102,74,.08);
  font-weight: 900;
  color: var(--brand-dark);
}
.m2-price-table input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.m2-price-table td:first-child,
.m2-price-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 10px 0 18px -18px rgba(42,31,18,.55);
}
.m2-price-table th:first-child { z-index: 4; background: #f3e3c9; }
.m2-price-table tbody tr:nth-child(odd) td:first-child { background: rgba(255,255,255,.98) !important; }
.m2-price-table tbody tr:nth-child(even) td:first-child { background: rgba(246,231,205,.92) !important; }
.m2-price-table tbody tr:hover td:first-child { background: #f4dca9 !important; }
#tab-prixm2 .help strong { color: var(--brand-dark); }
#tab-prixm2 .table-wrap.wide {
  box-shadow: inset -28px 0 34px -38px rgba(42,31,18,.5);
}
@media (max-width: 760px) {
  .m2-price-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.98) !important; }
  .m2-price-table tbody tr:nth-child(even) { background: rgba(246,231,205,.82) !important; }
  .m2-price-table th, .m2-price-table td { min-width: 112px !important; }
  .m2-price-table th:first-child, .m2-price-table td:first-child { min-width: 180px !important; }
}

.m2-price-table .manual-sale-input{font-weight:800;border-color:rgba(127,77,43,.45);background:#fffaf2;min-width:92px;}
.m2-price-table .muted-price{color:#6f5a4a;}
.danger{color:#b42318;}

.products-table th,
.products-table td { vertical-align: top; }
.products-table input,
.products-table select { min-width: 92px; }
.products-table td:first-child input { min-width: 210px; }
.products-table .row-actions { min-width: 70px; }
.products-table tbody tr:nth-child(odd) { background: rgba(255,255,255,.96) !important; }
.products-table tbody tr:nth-child(even) { background: rgba(246,231,205,.72) !important; }
.products-table tbody tr:hover { background: rgba(244,199,107,.30) !important; }
.products-table tbody td:nth-child(7),
.products-table tbody td:nth-child(10),
.products-table tbody td:nth-child(11),
.products-table tbody td:nth-child(12) { background: rgba(127,77,43,.06); }
.products-table td:first-child,
.products-table th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 10px 0 18px rgba(70, 45, 28, .08);
}
.products-table th:first-child { z-index: 4; background: #f3e3c9; }
.products-table tbody tr:nth-child(odd) td:first-child { background: rgba(255,255,255,.98) !important; }
.products-table tbody tr:nth-child(even) td:first-child { background: rgba(246,231,205,.92) !important; }
.products-table tbody tr:hover td:first-child { background: #f4dca9 !important; }
@media (max-width: 760px) {
  .products-table th, .products-table td { min-width: 112px !important; }
  .products-table th:first-child, .products-table td:first-child { min-width: 190px !important; }
}


@media (max-width: 720px) {
  .topbar { align-items: flex-start; }
  .top-actions { width: 100%; justify-content: space-between; }
  .zoom-toolbar { order: -1; flex: 1 1 100%; justify-content: center; }
  .zoom-btn { width: 44px; min-height: 42px; }
  .zoom-value { min-height: 42px; min-width: 86px; }
}

/* V39 — Vue chiffres & projections */
.summary-box {
  display: grid;
  gap: 10px;
  line-height: 1.45;
}
.summary-line {
  padding: 12px 14px;
  border: 1px solid rgba(89, 63, 38, .14);
  background: rgba(247, 245, 240, .78);
  border-radius: 14px;
}
.projection-table input {
  min-width: 120px;
}
.projection-table input.text {
  min-width: 240px;
}
.projection-table tbody tr:nth-child(even) {
  background: rgba(124, 87, 49, .055);
}
.projection-table tbody tr:nth-child(odd) {
  background: rgba(255, 255, 255, .72);
}
.projection-table td:first-child,
.projection-table th:first-child {
  position: sticky;
  left: 0;
  background: inherit;
  z-index: 1;
}
.projection-table th:first-child {
  background: var(--brand-dark);
}
@media (max-width: 760px) {
  .projection-table input {
    min-width: 105px;
  }
  .projection-table input.text {
    min-width: 180px;
  }
  .summary-line {
    padding: 10px 11px;
  }
}


/* ══════════════════════════════════════════════════════════
   MOBILE — touch, safe-area, bottom nav
   ══════════════════════════════════════════════════════════ */

button, a, label, input, select, textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
body { overscroll-behavior-y: auto; } /* V45 : la molette souris doit toujours défiler verticalement */
.topbar, .tabs { -webkit-backdrop-filter: blur(14px); }

/* Bottom nav — masquée sur desktop */
.bottom-nav { display: none; }
.bnav-overlay { display: none; }
.bnav-drawer { display: none; }

@media (max-width: 760px) {
  /* Masquer la barre onglets horizontale */
  .tabs { display: none !important; }
  /* Masquer zoom toolbar (pinch natif) */
  .zoom-toolbar { display: none !important; }
  /* Masquer la description du header */
  .topbar .subtle { display: none; }

  /* ── Bottom nav bar ── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 200;
    padding: 0 6px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(255,252,247,.94);
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    border-top: 1px solid rgba(65,45,25,.12);
    box-shadow: 0 -6px 24px rgba(42,31,18,.08);
    gap: 0;
  }
  .bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 2px;
    min-height: 56px;
    border: 0;
    background: transparent;
    color: #9a8878;
    font-size: 10px;
    font-weight: 800;
    border-radius: 0;
    cursor: pointer;
    transition: color .15s;
    line-height: 1.1;
  }
  .bnav-btn svg { width: 22px; height: 22px; transition: transform .18s; }
  .bnav-btn.active { color: var(--brand-dark); }
  .bnav-btn.active svg { transform: translateY(-2px); }

  /* ── Overlay ── */
  .bnav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 210;
    background: rgba(33,26,20,.4);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
  }
  .bnav-overlay.visible { opacity: 1; pointer-events: auto; }

  /* ── Drawer ── */
  .bnav-drawer {
    display: block;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 220;
    background: rgba(253,249,242,.97);
    -webkit-backdrop-filter: blur(28px);
    backdrop-filter: blur(28px);
    border-top: 1px solid rgba(65,45,25,.12);
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -16px 56px rgba(42,31,18,.16);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32,1,.35,1);
    padding: 0 16px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    will-change: transform;
  }
  .bnav-drawer.open { transform: translateY(0); }
  .bnav-drawer-handle {
    width: 42px; height: 5px;
    border-radius: 99px;
    background: rgba(65,45,25,.18);
    margin: 12px auto 18px;
  }
  .bnav-drawer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    padding-bottom: 4px;
  }
  .bnav-drawer-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px 12px;
    border: 1px solid rgba(65,45,25,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.76);
    color: var(--ink);
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    line-height: 1.2;
    transition: background .12s, transform .1s;
  }
  .bnav-drawer-item svg { width: 24px; height: 24px; color: var(--brand-dark); flex-shrink: 0; }
  .bnav-drawer-item:active { transform: scale(.94); background: rgba(141,93,47,.10); }
  .bnav-drawer-item.active { background: rgba(75,45,23,.09); border-color: rgba(75,45,23,.2); color: var(--brand-dark); }

  /* Safe area insets */
  .app-shell {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  .toast {
    bottom: calc(64px + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* Topbar compacte */
  .topbar { padding: 12px 14px; gap: 10px; }
}

@media (max-width: 400px) {
  .bnav-drawer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Hover uniquement sur vrais pointeurs */
@media (hover: none) and (pointer: coarse) {
  .btn:hover { transform: none; }
  .btn:active { transform: scale(.97); opacity: .9; }
}



/* ══════════════════════════════════════════════════════════
   FIX OVERFLOW HORIZONTAL — empêche la page de "glisser"
   ══════════════════════════════════════════════════════════ */

/* Règle fondamentale : rien ne peut déborder de la page */
/* IMPORTANT : overflow-x: hidden sur html ET body bloque la molette dans Safari.
   On le met UNIQUEMENT sur body, jamais sur html. */
html {
  max-width: 100%;
  overflow-y: auto; /* garantit que html scrolle verticalement */
}
body {
  overflow-x: hidden;
  overflow-y: auto; /* V45 : scroll vertical naturel, molette souris OK */
  max-width: 100%;
}

/* Tous les blocs restent dans la page */
.app-shell,
.topbar,
.card,
.panel,
main,
.grid,
.form-grid,
.card-head,
.result-band,
.button-row,
.kpi-grid,
.totals-grid,
.insight-grid,
.badge-list,
.category-list {
  max-width: 100%;
  min-width: 0;
}

/* Les table-wrap : scroll interne uniquement, jamais de débordement */
.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  /* Indice visuel qu'on peut scroller horizontalement */
  box-shadow: inset -18px 0 20px -22px rgba(42,31,18,.3);
}

@media (max-width: 760px) {

  /* Supprimer les min-width trop larges des tables sur mobile */
  table {
    min-width: 520px !important;
  }
  .halfday-table {
    min-width: 700px !important;
  }
  .quote-cost-table {
    min-width: 680px !important;
  }
  .dashboard-tables table {
    min-width: 560px !important;
  }
  .m2-price-table,
  .products-table {
    min-width: 640px !important;
  }
  .projection-table {
    min-width: 580px !important;
  }
  .annual-table {
    min-width: 520px !important;
  }
  .estimator-table {
    min-width: 560px !important;
  }

  /* Colonnes de colonnes : valeur min raisonnable sur mobile */
  th, td {
    min-width: 80px !important;
    white-space: normal;
    word-break: break-word;
  }
  td textarea {
    min-width: 140px !important;
  }
  td input, td select {
    min-width: 80px !important;
    max-width: 100%;
  }

  /* Les colonnes larges spécifiques */
  .m2-price-table th:first-child,
  .m2-price-table td:first-child,
  .products-table th:first-child,
  .products-table td:first-child {
    min-width: 130px !important;
  }

  /* form-grid : toujours 1 colonne sur mobile */
  .form-grid,
  .form-grid.two,
  .form-grid.three,
  .form-grid.four,
  .form-grid.five {
    grid-template-columns: 1fr !important;
  }
  .span-2 { grid-column: auto !important; }

  /* Grids de cartes : max 2 colonnes */
  .kpi-grid,
  .totals-grid,
  .insight-grid,
  .quote-profit-grid,
  .company-insights,
  .dashboard-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dashboard-insights {
    grid-template-columns: 1fr !important;
  }

  /* Grid 2 colonnes principale */
  .grid.two,
  .grid.uneven,
  .grid.uneven-right {
    grid-template-columns: 1fr !important;
  }

  /* Logistics, check-cards */
  .logistics-options {
    grid-template-columns: 1fr !important;
  }

  /* address-suggestions : ne déborde jamais */
  .address-suggestions {
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    width: auto !important;
    max-width: calc(100vw - 16px) !important;
  }

  /* Inputs : taille max 100% */
  input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* badge-list : wrap correct */
  .badge-list {
    flex-wrap: wrap;
  }
  .badge {
    max-width: 100%;
  }

  /* canvas : ne déborde jamais */
  canvas {
    max-width: 100% !important;
  }

  /* Résumé projection */
  .summary-box {
    max-width: 100%;
  }
  .summary-line {
    word-break: break-word;
  }

  /* top-actions : scroll horizontal doux */
  .top-actions {
    flex-wrap: wrap;
  }

  /* planning-controls */
  .planning-controls {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

@media (max-width: 420px) {
  /* Encore plus petit : 1 colonne partout pour les KPI */
  .kpi-grid,
  .totals-grid,
  .quote-profit-grid,
  .company-insights,
  .dashboard-kpis {
    grid-template-columns: 1fr 1fr !important;
  }

  table {
    min-width: 420px !important;
  }
  th, td {
    min-width: 65px !important;
    font-size: 13px;
    padding: 8px 7px !important;
  }
}



/* ══════════════════════════════════════════════════════════
   POLISH V40 — Améliorations visuelles ciblées
   ══════════════════════════════════════════════════════════ */

/* ── Toast variantes ── */
.toast { transition: background .2s, color .2s; }
.toast--success { background: var(--green, #42664a) !important; color: #fff !important; }
.toast--warning { background: #8a6200 !important; color: #fff !important; }
.toast--error   { background: #8b1c1c !important; color: #fff !important; }
.toast--info    { background: var(--brand-dark, #4b2d17) !important; color: #fff !important; }

/* ── Indicateur de sauvegarde dans le header ── */
#save-indicator {
  font-size: 11px;
  color: var(--muted);
  opacity: .65;
  white-space: nowrap;
  transition: opacity .3s;
}

/* ── Marge par ligne de devis ── */
.margin-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
}
.margin-badge.margin-good    { background: rgba(45,110,55,.12); color: #1e6b2e; }
.margin-badge.margin-ok      { background: rgba(180,140,0,.12); color: #7a5e00; }
.margin-badge.margin-warning { background: rgba(180,90,0,.13); color: #8a4400; }
.margin-badge.margin-danger  { background: rgba(180,30,30,.12); color: #8b1c1c; }

/* Teinte légère de la ligne entière */
tr.margin-good    { background: rgba(45,110,55,.03) !important; }
tr.margin-warning { background: rgba(180,90,0,.04) !important; }
tr.margin-danger  { background: rgba(180,30,30,.05) !important; }

/* ── Profit health card ── */
.health-good    { border-left: 4px solid #2d6e37 !important; }
.health-ok      { border-left: 4px solid #c49a00 !important; }
.health-warning { border-left: 4px solid #c06000 !important; }
.health-danger  { border-left: 4px solid #a61c1c !important; }
.health-neutral { border-left: 4px solid transparent !important; }

/* ── Breakdown chips (estimateur escalier) ── */
#est-stair-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 4px;
}
.breakdown-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 10px;
  background: rgba(141,93,47,.08);
  border: 1px solid rgba(141,93,47,.15);
  border-radius: 12px;
  min-width: 72px;
}
.breakdown-chip-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.breakdown-chip-val {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-dark);
}
.breakdown-chip-total { background: rgba(141,93,47,.14); }
.breakdown-chip-coef  { background: rgba(100,160,100,.10); border-color: rgba(50,130,60,.2); }
.breakdown-chip-coef .breakdown-chip-val { color: #2a6e35; }

/* ── Dashboard trend arrows ── */
.trend-up   { color: var(--green, #2a6e35) !important; }
.trend-flat { color: var(--gold, #c49a00) !important; }
.trend-down { color: #a61c1c !important; }

/* ── Planning charge badges ── */
.charge-badge {
  display: inline-block;
  margin-top: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 800;
}
.charge-full { background: rgba(165,28,28,.12); color: #8b1c1c; }
.charge-high { background: rgba(180,100,0,.11); color: #8a4400; }
.charge-mid  { background: rgba(180,150,0,.10); color: #7a5e00; }
.charge-low  { background: rgba(45,110,55,.10); color: #1e6b2e; }

/* ── Focus states améliorés ── */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2.5px rgba(141,93,47,.32), 0 0 0 1px rgba(141,93,47,.6);
  border-color: var(--brand, #8d5d2f) !important;
}

/* ── Boutons : micro-transition au survol/press ── */
.btn {
  transition: transform .12s, box-shadow .12s, background .15s, opacity .12s;
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(42,31,18,.13);
}
.btn:active:not(:disabled) {
  transform: translateY(0) scale(.97);
  box-shadow: none;
}

/* ── Tableaux : hover de ligne plus visible ── */
tbody tr {
  transition: background .1s;
}
tbody tr:hover td {
  background: rgba(141,93,47,.05) !important;
}

/* ── Cards : hover subtil ── */
.card {
  transition: box-shadow .18s, transform .18s;
}
.card:hover {
  box-shadow: 0 4px 22px rgba(42,31,18,.11);
}

/* ── KPI big : transition au changement de valeur ── */
.kpi-value, .big-number {
  transition: color .3s;
}

/* ── Drawer items ── */
@media (max-width: 760px) {
  .bnav-drawer-item {
    transition: background .12s, transform .1s, border-color .12s;
  }
}


/* ── Selects protection/nettoyage chantier ── */
.protection-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}
.protection-label .label-icon { font-size: 16px; }
.protection-label .field-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-top: -2px;
}
.protection-label select {
  margin-top: 4px;
  font-weight: 800;
  color: var(--brand-dark);
  background: rgba(141,93,47,.06);
  border-color: rgba(141,93,47,.2);
}
.protection-label select:has(option[value="half"]:checked),
.protection-label select:has(option[value="full"]:checked) {
  background: rgba(42,110,55,.08);
  border-color: rgba(42,110,55,.3);
  color: #1e6b2e;
}


/* Scroll vertical naturel (molette desktop + Safari). Bloc consolidé — règles effectives identiques aux anciennes couches V42/V43. */
html, body {
  height: auto !important;
  min-height: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
}
body {
  position: static !important;
}
.app-shell, main, .panel {
  overflow-y: visible !important;
}


/* V43 — repère chantier */
.chantier-sequence-band strong { font-size: clamp(20px, 2vw, 28px); }


/* V44 — Chiffrage mobile plus lisible + surface du devis synchronisée */
@media (max-width: 760px) {
  #tab-chiffrage .card {
    overflow: hidden;
  }

  #tab-chiffrage .estimator-type-box {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(75,45,23,.10);
    border-radius: 18px;
    background: rgba(255,255,255,.58);
  }

  #tab-chiffrage .estimator-type-box h3 {
    margin-bottom: 10px;
    font-size: 17px;
  }

  #tab-chiffrage .protection-label {
    padding: 12px;
    border: 1px solid rgba(75,45,23,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.70);
  }

  #tab-chiffrage .field-hint {
    font-weight: 650;
    font-size: 12px;
    line-height: 1.35;
    color: var(--muted);
  }

  /* Le tableau des options devient une vraie liste de cartes sur iPhone.
     Ça évite les mots coupés lettre par lettre comme sur ta capture. */
  #tab-chiffrage .estimator-table,
  #tab-chiffrage .estimator-table thead,
  #tab-chiffrage .estimator-table tbody,
  #tab-chiffrage .estimator-table tr,
  #tab-chiffrage .estimator-table td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #tab-chiffrage .estimator-table {
    min-width: 0 !important;
    border-collapse: separate !important;
  }

  #tab-chiffrage .estimator-table thead {
    display: none !important;
  }

  #tab-chiffrage .estimator-table tr {
    margin: 0 0 12px !important;
    padding: 10px !important;
    border: 1px solid rgba(75,45,23,.14) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.86) !important;
    box-shadow: 0 8px 20px rgba(42,31,18,.05) !important;
  }

  #tab-chiffrage .estimator-table td {
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 8px 4px !important;
    border-bottom: 1px solid rgba(75,45,23,.10) !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    font-size: 14px !important;
  }

  #tab-chiffrage .estimator-table td:last-child {
    border-bottom: 0 !important;
  }

  #tab-chiffrage .estimator-table td::before {
    display: block !important;
    content: "";
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 950;
  }

  #tab-chiffrage .estimator-table td:nth-child(1)::before { content: "Option"; }
  #tab-chiffrage .estimator-table td:nth-child(2)::before { content: "Base"; }
  #tab-chiffrage .estimator-table td:nth-child(3)::before { content: "Quantité"; }
  #tab-chiffrage .estimator-table td:nth-child(4)::before { content: "Prix HT"; }
  #tab-chiffrage .estimator-table td:nth-child(5)::before { content: "Coût"; }
  #tab-chiffrage .estimator-table td:nth-child(6)::before { content: "Temps/u"; }
  #tab-chiffrage .estimator-table td:nth-child(7)::before { content: "Total"; }
  #tab-chiffrage .estimator-table td:nth-child(8)::before { content: "Temps"; }

  #tab-chiffrage .estimator-table .checkbox-line {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: var(--ink) !important;
  }

  #tab-chiffrage .estimator-table .checkbox-line input {
    flex: 0 0 auto !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    min-height: 20px !important;
  }

  #tab-chiffrage .estimator-table td input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 160px;
    justify-self: start;
  }

  #tab-chiffrage .table-wrap.wide:has(.estimator-table) {
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  #tab-chiffrage .chantier-sequence-band {
    grid-template-columns: 1fr !important;
  }

  #tab-chiffrage #est-chantier-halfday-rate {
    width: 100%;
  }
}