/* ─── Tablette (768–1199px) ──────────────────────────────────── */
@media (max-width: 1199px) {
  :root {
    --col-left-w:  260px;
    --col-right-w: 280px;
  }

  .app-main {
    grid-template-columns: var(--col-left-w) 1fr var(--col-right-w);
    gap: var(--sp-3);
    padding: calc(var(--header-h) + var(--sp-3)) var(--sp-3) calc(var(--footer-h) + var(--sp-3));
  }

  .header-project { display: none; }

  .footer-totals { gap: var(--sp-5); }
}

/* ─── Petite tablette (max 900px) ───────────────────────────── */
@media (max-width: 900px) {
  .app-main {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .col-left  { grid-column: 1; grid-row: 1; }
  .col-center { grid-column: 2; grid-row: 1; }
  .col-right { grid-column: 1 / -1; grid-row: 2; }
}

/* ─── Mobile (< 768px) ───────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --header-h: 50px;
    --footer-h: 80px;
  }

  .app-main {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
    overflow: visible;
    padding: calc(var(--header-h) + var(--sp-3)) var(--sp-2) calc(var(--footer-h) + var(--sp-3));
  }

  body { overflow-y: auto; height: auto; }

  .col { overflow: visible; }
  .col-left, .col-center, .col-right { grid-column: 1; }

  .brand-name { display: none; }

  .footer-totals { gap: var(--sp-3); flex-wrap: nowrap; overflow-x: auto; }
  .footer-sep    { display: none; }

  .option-item {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
  }
  .option-item .option-label { grid-column: 1; }
  .option-item .option-price { grid-column: 2; }
  .option-item .option-qty   { grid-column: 1; justify-self: start; }
  .option-item .option-total { grid-column: 2; }
}