/* ============================================================
     Cost Sheet · page-scoped styles. Utilise les tokens définis
     dans assets/styles.css (DESIGN.md). Aucune valeur en dur:
     toutes couleurs/rayons/typo passent par var(--token).
     ============================================================ */
  body { font-family: var(--font-body); }
  h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.3px; color: var(--ink); }

  .content { background: var(--surface-soft); }
  .container { max-width: 920px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; color: var(--ink); font-size: 14px; }
  .card { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); overflow: hidden; }

  /* STATUS BAR */
  .status-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--canvas); border-radius: var(--r-md); border: 1px solid var(--hairline); font-size: 13px; color: var(--muted); }
  .status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted-soft); }
  .status-dot.saved   { background: var(--semantic-up); }
  .status-dot.unsaved { background: var(--accent-yellow); }
  .status-dot.saving  { background: var(--primary); animation: pulse 1s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
  .status-text { flex: 1; }
  .save-btn { display: flex; align-items: center; gap: 5px; background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--r-pill); padding: 6px 16px; height: 32px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
  .save-btn:hover    { background: var(--primary-active); }
  .save-btn:disabled { background: var(--primary-disabled); cursor: default; }
  .save-btn svg { width: 12px; height: 12px; }
  .save-bottom-card { padding: 14px 20px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; }
  .save-btn-bottom { display: flex; align-items: center; gap: 6px; background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--r-pill); padding: 0 22px; height: 44px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
  .save-btn-bottom:hover    { background: var(--primary-active); }
  .save-btn-bottom:disabled { background: var(--primary-disabled); cursor: default; }
  .save-btn-bottom svg { width: 13px; height: 13px; }
  .mode-badge { padding: 4px 10px; border-radius: var(--r-pill); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
  .mode-badge.cost { background: var(--primary-soft); color: var(--primary); }
  .mode-badge.rep  { background: rgba(244,176,0,0.15); color: var(--accent-yellow); }

  /* Bouton flottant 'Retour a la fiche' · positionne au 1/3 superieur de l ecran,
     a gauche dans la zone contenu (apres la sidebar, avec un offset confortable).
     Position fixe · reste visible peu importe le scroll dans le Cost Sheet. */
  .back-to-fiche-fab {
    position: fixed;
    top: 33vh;
    left: calc(var(--sidebar-w) + var(--space-xl));
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 22px;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--r-pill);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    box-shadow: var(--shadow-hover);
    transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  }
  .back-to-fiche-fab:hover {
    transform: translateY(-1px);
    background: var(--primary-active, var(--primary));
  }
  .back-to-fiche-fab:active { transform: translateY(0); }
  .back-to-fiche-fab svg { width: 16px; height: 16px; }
  /* Si la sidebar est cachee (toggle utilisateur ou mobile), on rapproche du bord */
  body[data-sidebar="hidden"] .back-to-fiche-fab { left: var(--space-xl); }
  @media (max-width: 768px) {
    .back-to-fiche-fab { left: var(--space-lg); top: auto; bottom: var(--space-lg); }
  }

  /* Toast de confirmation au save · feedback visible que le save a reussi (ou pas) */
  .cost-toast {
    position: fixed; bottom: 24px; right: 24px;
    background: var(--ink); color: var(--canvas);
    padding: 12px 20px; border-radius: var(--r-md);
    font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 1000;
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    display: flex; align-items: center; gap: 8px;
  }
  .cost-toast.show { opacity: 1; transform: translateY(0); }
  .cost-toast.error { background: var(--semantic-down); }
  .cost-toast svg { width: 16px; height: 16px; }

  /* HEADER */
  .header-card { padding: 20px 24px 18px; }
  .header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
  .header-top h1 { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); letter-spacing: -0.3px; }
  .header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .type-toggle { display: flex; background: var(--surface-strong); border-radius: var(--r-pill); padding: 3px; gap: 2px; }
  .type-btn { display: flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: var(--r-pill); border: none; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; color: var(--muted); background: transparent; white-space: nowrap; }
  .type-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  .type-btn.active     { background: var(--primary); color: var(--on-primary); }
  .type-btn.active-com { background: var(--ink); color: var(--canvas); }
  .header-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .header-input { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 9px 12px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--input-bg); outline: none; width: 100%; transition: border-color 0.15s; }
  .header-input:focus { border-color: var(--primary); }
  .header-input::placeholder { color: var(--muted-soft); font-weight: 400; }

  /* ADMIN */
  .admin-btn { display: flex; align-items: center; gap: 5px; background: var(--surface-strong); border: none; color: var(--ink); border-radius: var(--r-pill); padding: 6px 12px; height: 32px; font-family: inherit; font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.15s; white-space: nowrap; }
  .admin-btn svg { width: 12px; height: 12px; }
  .admin-btn:hover { background: var(--hairline); }

  /* VENTE */
  .vente-card { padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .vente-label { font-size: 15px; font-weight: 600; color: var(--ink); }
  .vente-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-top: 2px; }
  .vente-right { display: flex; align-items: center; gap: 6px; }
  .vente-currency { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--body); }
  .vente-input { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 8px 10px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 500; color: var(--ink); text-align: right; width: 140px; outline: none; background: var(--input-bg); transition: border-color 0.15s; }
  .vente-input:focus { border-color: var(--primary); }

  /* SECTION */
  .section-header { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; cursor: pointer; user-select: none; border-bottom: 1px solid var(--hairline-soft); }
  .section-title { font-size: 13px; font-weight: 600; color: var(--ink); }
  .section-right { display: flex; align-items: center; gap: 10px; }
  .section-badge { background: var(--surface-strong); color: var(--ink); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; padding: 3px 11px; border-radius: var(--r-pill); white-space: nowrap; }
  .section-chevron { color: var(--muted); font-size: 13px; transition: transform 0.2s; font-weight: 600; }
  .collapsed .section-chevron { transform: rotate(-90deg); }
  .section-body { padding: 0 20px 18px; }
  .sub-title { display: flex; align-items: center; gap: 8px; padding: 16px 0 10px; }
  .sub-title-text { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
  .sub-title-line { flex: 1; height: 1px; background: var(--hairline); }

  /* TABLE */
  table { width: 100%; border-collapse: collapse; }
  th { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; padding: 4px 6px 9px; text-align: left; }
  th.r, td.r { text-align: right; }
  td { padding: 6px 6px; }
  tr.trow { border-bottom: 1px solid var(--hairline-soft); }
  tr.trow:last-child { border-bottom: none; }
  tr.subtotal-row td { padding: 11px 6px 5px; font-weight: 600; font-size: 13px; border-top: 1px solid var(--hairline); color: var(--ink); }
  tr.subtotal-row td:last-child { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
  .row-label { font-size: 13px; font-weight: 500; color: var(--ink); }
  .row-label:has(.row-note-input) { display: flex; align-items: baseline; gap: 8px; }
  .gl-code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 500; color: var(--muted); letter-spacing: 0.02em; margin-right: 7px; }
  .row-note-input { display: inline-block; margin-left: 8px; border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 400; padding: 1px 4px; outline: none; width: 200px; max-width: 60%; vertical-align: baseline; }
  .row-label:has(.row-note-input) .row-note-input { margin-left: 0; flex: 1 1 auto; width: auto; min-width: 100px; max-width: none; }
  .row-note-input::placeholder { color: var(--muted-soft); font-style: italic; }
  .row-note-input:focus { color: var(--ink); background: var(--input-bg); border-radius: var(--r-xs); }
  .auto-badge { display: inline-block; font-size: 9px; font-weight: 600; background: var(--surface-strong); color: var(--semantic-up); padding: 1px 6px; border-radius: var(--r-pill); margin-left: 4px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; }
  .total-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink); }
  .dash { color: var(--muted-soft); font-weight: 400; }
  .num-input { border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 4px 7px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 500; text-align: right; background: var(--input-bg); outline: none; transition: border-color 0.15s; color: var(--ink); }
  .num-input:focus { border-color: var(--primary); }
  .num-input.w55 { width: 62px; }
  .num-input.w80 { width: 85px; }
  .num-input.rate-field { background: transparent; border-color: transparent; color: var(--primary); font-weight: 600; cursor: default; font-size: 13px; }
  .num-input.rate-field:focus { border-color: transparent; }
  .hidden-col { display: none; }
  /* Hide number input spinners */
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  input[type=number] { -moz-appearance: textfield; appearance: textfield; }

  /* SECTION 2 */
  .s2-alert { font-size: 12px; font-weight: 400; color: var(--body); background: var(--surface-soft); border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px 14px; margin: 12px 0 10px; line-height: 1.6; }
  .s2-alert strong { font-weight: 600; color: var(--ink); }
  .s2-row { display: grid; grid-template-columns: 1fr 90px 28px; gap: 6px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--hairline-soft); }
  .s2-desc { border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px 10px; font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink); background: var(--input-bg); outline: none; width: 100%; transition: border-color 0.15s; }
  .s2-desc:focus { border-color: var(--primary); }
  .s2-amt { border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; text-align: right; background: var(--input-bg); outline: none; width: 100%; color: var(--ink); transition: border-color 0.15s; }
  .s2-amt:focus { border-color: var(--primary); }
  .s2-del { background: transparent; color: var(--semantic-down); border: 1px solid var(--hairline); border-radius: var(--r-sm); width: 26px; height: 28px; cursor: pointer; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
  .s2-del:hover { background: var(--surface-strong); }
  .btn-add-s2 { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 10px; padding: 9px; border: 1px dashed var(--hairline); border-radius: var(--r-md); background: transparent; color: var(--muted); font-family: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.15s; }
  .btn-add-s2:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); }
  .btn-add-s2 svg { width: 16px; height: 16px; flex-shrink: 0; }

  /* RESULTS */
  .results-card { padding: 18px 20px; }
  .results-title { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--ink); margin-bottom: 16px; letter-spacing: -0.2px; }
  .results-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
  .res-col { padding: 0 16px; border-right: 1px solid var(--hairline-soft); }
  .res-col:first-child { padding-left: 0; }
  .res-col:last-child { border-right: none; padding-right: 0; }
  .res-col-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid currentColor; }
  .col-s2 .res-col-title  { color: var(--muted);   border-color: var(--hairline); }
  .col-s1 .res-col-title  { color: var(--primary); border-color: var(--primary-soft); }
  .col-tot .res-col-title { color: var(--ink);     border-color: var(--hairline); }
  .res-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; gap: 6px; }
  .res-lbl { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  .res-val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--ink); }
  .res-val.big { font-size: 16px; font-weight: 500; }
  .res-val.pct { font-size: 13px; font-weight: 600; }
  .seuil-info { font-size: 10px; font-weight: 400; color: var(--muted); margin-bottom: 7px; }
  .badge-ok  { display: inline-block; background: var(--surface-strong); color: var(--semantic-up);   font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
  .badge-low { display: inline-block; background: var(--surface-strong); color: var(--semantic-down); font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }
  .badge-na  { display: inline-block; background: var(--surface-strong); color: var(--muted);         font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: var(--r-pill); }

  /* VERSION BAR */
  .ver-bar { background: var(--surface-dark); border-radius: var(--r-xl); overflow: hidden; }
  .ver-tabs { padding: 10px 12px 0; display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.2) transparent; }
  .ver-tabs::-webkit-scrollbar { height: 3px; }
  .ver-tabs::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: var(--r-pill); }
  .ver-tab { padding: 6px 12px 5px; border-radius: var(--r-sm) var(--r-sm) 0 0; font-size: 11px; font-weight: 600; cursor: pointer; background: rgba(255,255,255,0.08); color: var(--on-dark-soft); display: flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid rgba(255,255,255,0.1); border-bottom: none; transition: background 0.15s, color 0.15s; flex-shrink: 0; max-width: 160px; }
  .ver-tab-lbl { overflow: hidden; text-overflow: ellipsis; }
  .ver-tab:hover { background: rgba(255,255,255,0.14); color: var(--on-dark); }
  .ver-tab.vactive { background: var(--on-dark); color: var(--surface-dark); border-color: var(--on-dark); font-weight: 600; }
  .ver-tab .vdot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
  .ver-tab-trash { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; margin-left: 2px; font-size: 11px; line-height: 1; color: var(--on-dark-soft); background: transparent; border: none; cursor: pointer; flex-shrink: 0; opacity: 0; transition: opacity 0.15s, background 0.15s, color 0.15s; }
  .ver-tab:hover .ver-tab-trash { opacity: 0.7; }
  .ver-tab-trash:hover { opacity: 1 !important; background: rgba(255,77,77,0.25); color: #ff8888; }
  .ver-tab.vactive .ver-tab-trash { color: var(--surface-dark); opacity: 0.5; }
  .ver-tab.vactive .ver-tab-trash:hover { background: rgba(255,77,77,0.18); color: #c00; opacity: 1; }
  .ver-tab-add { padding: 6px 12px 5px; border-radius: var(--r-sm) var(--r-sm) 0 0; font-size: 18px; line-height: 1.2; cursor: pointer; color: var(--on-dark-soft); transition: background 0.15s, color 0.15s; flex-shrink: 0; border: 1px dashed rgba(255,255,255,0.2); border-bottom: none; background: transparent; }
  .ver-tab-add:hover { background: rgba(255,255,255,0.14); color: var(--on-dark); }
  .ver-body { background: rgba(255,255,255,0.05); padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; }
  .ver-active-lbl { font-size: 12px; font-weight: 400; color: var(--on-dark-soft); }
  .ver-active-lbl strong { color: var(--on-dark); font-weight: 600; }
  .ver-hint { font-size: 11px; color: rgba(255,255,255,0.4); }

  /* MODALS */
  .modal-bg { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; align-items: center; justify-content: center; backdrop-filter: blur(2px); }
  .modal-bg.open { display: flex; }
  .modal { background: var(--canvas); border: 1px solid var(--hairline); border-radius: var(--r-xl); padding: 24px; width: 360px; box-shadow: 0 24px 64px rgba(0,0,0,0.4); }
  .modal h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.2px; }
  .modal .msub { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
  .modal label { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 5px; }
  .modal input[type=text], .modal input[type=password] { width: 100%; border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 9px 12px; font-family: inherit; font-size: 13px; outline: none; margin-bottom: 14px; background: var(--input-bg); color: var(--ink); transition: border-color 0.15s; }
  .modal input:focus { border-color: var(--primary); }
  .modal-types { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 16px; }
  .mtype { border: 1px solid var(--hairline); border-radius: var(--r-md); padding: 10px; cursor: pointer; text-align: center; transition: all 0.15s; }
  .mtype.msel { border-color: var(--primary); background: var(--primary-soft); }
  .mtype-icon { font-size: 18px; margin-bottom: 3px; font-weight: 500; }
  .mtype-name { font-size: 12px; font-weight: 600; color: var(--ink); }
  .mtype-desc { font-size: 10px; color: var(--muted); }
  .modal-btns { display: flex; gap: 8px; }
  .modal-btns .btn-cancel { flex: 1; }
  .modal-btns .btn-confirm { flex: 2; }
  .btn-cancel { background: var(--surface-strong); border: none; border-radius: var(--r-pill); padding: 9px 18px; font-family: inherit; font-size: 13px; cursor: pointer; color: var(--ink); font-weight: 600; height: 44px; transition: background 0.15s; }
  .btn-cancel:hover { background: var(--hairline); }
  .btn-confirm { background: var(--primary); color: var(--on-primary); border: none; border-radius: var(--r-pill); padding: 9px 18px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; height: 44px; transition: background 0.15s; }
  .btn-confirm:hover { background: var(--primary-active); }
  .pw-error { color: var(--semantic-down); font-size: 12px; font-weight: 500; margin-bottom: 10px; display: none; }
  .admin-rates-grid { display: grid; grid-template-columns: 1fr 90px 90px; gap: 6px 10px; align-items: center; }
  .admin-rates-grid .col-h { font-size: 10px; font-weight: 600; color: var(--muted); text-transform: uppercase; text-align: center; padding-bottom: 4px; }
  .admin-rates-grid .col-h.left { text-align: left; }
  .admin-rates-grid .row-lbl { font-size: 13px; font-weight: 500; color: var(--ink); }
  .admin-rates-grid input { border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 6px 8px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 500; text-align: right; outline: none; width: 100%; background: var(--input-bg); color: var(--ink); transition: border-color 0.15s; }
  .admin-rates-grid input:focus { border-color: var(--primary); }

  @media (max-width: 700px) {
    .results-grid { grid-template-columns: 1fr; }
    .res-col { border-right: none; border-bottom: 1px solid var(--hairline-soft); padding: 0 0 12px; margin-bottom: 12px; }
    .header-grid { grid-template-columns: 1fr; }
    .header-top { flex-wrap: wrap; }

    /* Header-right (Residentiel|Commercial + Taux + Imprimer) : tient pas
       sur la largeur d un telephone. On le laisse wrap au lieu de forcer
       un scroll horizontal sur toute la page. */
    .header-right { flex-wrap: wrap; flex-shrink: 1; gap: 6px; row-gap: 8px; width: 100%; justify-content: flex-start; }
    .type-btn { padding: 6px 10px; font-size: 12px; }
    .admin-btn { padding: 6px 10px; font-size: 11px; }

    /* Empeche la page entiere d avoir un scroll horizontal · le scroll
       reste localise dans .section-body (les tableaux). */
    body, .container { overflow-x: hidden; max-width: 100vw; }

    /* Reduit le padding du wrapper .content (defini dans assets/styles.css)
       pour gagner ~16-20px de chaque cote. Les cartes se rapprochent du
       bord de l ecran et le badge total des sections tient sur 1 ligne. */
    .main .content { padding: 8px 8px 24px; }

    /* Empeche le titre de section de pousser le badge sur 2 lignes :
       le titre peut wrap, le badge reste en une seule ligne (white-space
       nowrap declare plus haut). */
    .section-title { min-width: 0; line-height: 1.25; }
    .section-header { gap: 10px; }

    /* Tableaux : scroll horizontal au doigt (swipe gauche/droite) puisque les
       5 colonnes ne tiennent pas sur un ecran de telephone. min-width force
       l overflow plutot que de tout compresser et casser la mise en page. */
    .card { overflow: visible; }
    .section-header { padding: 12px 12px; }
    .section-body { padding: 0 10px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .section-body table { min-width: 540px; }
    .sub-title { padding: 10px 0 6px; }

    /* Section S2 / S1 sous-traitants : les inputs en flex-row peuvent aussi
       deborder, on laisse le wrap se faire ou un peu de scroll si besoin. */
    .s2-row { flex-wrap: wrap; }
  }

  /* ---------- Impression (8,5 × 11 Letter) ---------- */
  @media print {
    @page { size: Letter; margin: 0.35in; }
    html, body {
      background: #fff !important; color: #000 !important;
      margin: 0 !important; padding: 0 !important;
      width: 100% !important; display: block !important;
    }
    /* Tout masquer qui n'est pas le contenu du Cost Sheet */
    .sidebar, .topbar, .top-actions, .save-btn, .admin-btn, .type-toggle,
    #modal-admin-bg, #modal-ver-bg, #lock-banner, .ver-tab-add,
    .status-dot, .status-text, .mode-badge, .section-chevron,
    button {
      display: none !important;
    }
    /* Reset conteneur main (.main a min-height:100vh et margin-left par défaut) */
    .main {
      margin: 0 !important; padding: 0 !important;
      min-height: 0 !important; height: auto !important;
      display: block !important; width: 100% !important;
    }
    .content {
      padding: 0 !important; margin: 0 !important;
      display: block !important; width: 100% !important;
      flex: none !important;
    }
    /* Cards compactes. PAS de page-break-inside:avoid · ça pousse
       les grosses cards entières à la page suivante et laisse du vide. */
    .card {
      box-shadow: none !important; border: 1px solid #ccc !important;
      border-radius: 4px !important; margin: 4px 0 !important;
      display: block !important; overflow: visible !important;
    }
    .header-card     { padding: 6px 10px !important; }
    .vente-card      { padding: 5px 10px !important; }
    .section-header  { padding: 4px 10px !important; border-bottom: 1px solid #ddd !important; }
    .section-body    { padding: 4px 10px 6px !important; }
    .results-card    { padding: 6px 10px !important; }
    .save-bottom-card { display: none !important; }
    .ver-tabs        { padding: 4px 6px 0 !important; }
    /* Inputs : compact, sans bordure. Le rate-field à droite (auto) devient discret. */
    input, select, textarea {
      border: none !important; background: transparent !important;
      padding: 1px 2px !important; color: #000 !important;
      font-size: 10px !important;
    }
    .rate-field { color: #666 !important; }
    /* Typos générales et tableau compact */
    body { font-size: 10px !important; line-height: 1.25 !important; }
    h1 { font-size: 13px !important; margin: 0 !important; }
    h2 { font-size: 12px !important; margin: 2px 0 !important; }
    h3 { font-size: 11px !important; margin: 2px 0 !important; }
    .section-title { font-size: 11px !important; font-weight: 700 !important; }
    .section-badge { font-size: 11px !important; }
    .row-label, .trow td { padding: 1px 4px !important; font-size: 10px !important; }
    .header-grid { gap: 4px !important; }
    .vente-label { font-size: 11px !important; }
    .vente-sub { display: none !important; }
    .vente-input { font-size: 13px !important; }
    .ver-tab { border: 1px solid #999 !important; padding: 2px 8px !important; font-size: 10px !important; }
    /* Résultats en 2 colonnes pour gagner de la hauteur */
    .res-row { padding: 1px 0 !important; font-size: 10px !important; }
    /* Laisser quand même les sections principales respirer un peu au break */
    .section-header { page-break-after: avoid; }
  }