/*
 * Les jetons du logiciel : couleurs, rayons, ombres.
 *
 * Tout part d'ici. Une valeur écrite en dur ailleurs est une valeur qu'on
 * oubliera de changer le jour où la charte bouge.
 *
 * Le gris de fond n'est plus bleuté : c'est le bleu marine de la marque qui
 * doit porter la couleur, pas la page entière. Les surfaces blanches sont
 * séparées par un filet fin plutôt que posées sur une ombre — l'ombre servait
 * à faire flotter des boîtes les unes dans les autres, ce qui alourdissait
 * chaque écran.
 */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f7f8fa;
  --text: #101828;
  --muted: #6b7280;
  --line: #e7e9ee;
  --line-strong: #d2d6de;
  /* Le bleu de la marque ne bouge pas : il est aussi sur les devis et les
     factures que reçoivent les clients de Micka. */
  --brand: #063461;
  --brand-2: #2f609b;
  --brand-soft: #eef3f9;
  --green: #0f7048;
  --green-soft: #eaf6f0;
  --red: #b42318;
  --red-soft: #fdf0ee;
  --orange: #9a5700;
  --orange-soft: #fdf3e5;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-xs: 8px;
  /* Presque rien : les surfaces se détachent par leur filet, pas par une ombre. */
  --shadow: 0 1px 2px rgba(16, 24, 40, .04);
  /* La seule vraie ombre, réservée à ce qui flotte au-dessus de la page. */
  --shadow-pop: 0 16px 40px rgba(16, 24, 40, .14);
  --ring: 0 0 0 3px rgba(47, 96, 155, .18);
}

* { box-sizing: border-box; }

html {
  min-width: 0;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  /* La police du système d'abord : sur l'iPhone de Micka c'est celle d'iOS, donc
     un rendu net et familier, et aucune police à télécharger. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .btn, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.app-shell {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px 12px;
  background: #0a2035;
  color: #c6d3e2;
}

.brand {
  display: grid;
  gap: 10px;
  padding: 2px 8px 24px;
}

.brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  padding: 7px 10px;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #fff;
}

.brand-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-copy b { display: block; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.brand-copy small { display: block; margin-top: 1px; color: #8296ad; font-size: 12px; }

.sidebar nav { display: grid; gap: 2px; }

.sidebar nav a {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 11px;
  border-radius: var(--radius-xs);
  color: #9fb2c7;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .12s ease, color .12s ease;
}

.sidebar nav a:hover { background: rgba(255,255,255,.06); color: #e8eff7; }
.sidebar nav a.active { background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }

.sidefoot {
  display: grid;
  gap: 7px;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 12.5px;
}

.sidefoot a { color: #8296ad; }

.content {
  width: 100%;
  min-width: 0;
  padding: 24px clamp(16px, 2.4vw, 36px) 56px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}

.topbar h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}

.cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.card,
.kpi {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.card { padding: 18px; margin-bottom: 16px; }
.kpi { padding: 15px 16px; }
.kpi small { display: block; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.kpi strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.card h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.card h3 { color: var(--text); font-size: 14px; font-weight: 600; }

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

.card-head p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.muted { color: var(--muted); }
.right { text-align: right; }
.mb0 { margin-bottom: 0; }
.section-gap { margin-top: 18px; }
.form-top { margin-top: 16px; }
.form-actions { margin-top: 18px; }
.adjustment-summary { display: grid; gap: 5px; margin: 14px 0; }
.settings-section-title { margin: 30px 0 8px; }
.logo-setting { display: flex; align-items: center; gap: 16px; min-width: 0; }
.logo-setting img { width: min(240px, 40vw); max-height: 90px; padding: 8px; border: 1px solid var(--line); border-radius: 9px; background: #fff; object-fit: contain; }

.actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}

.actions form { margin: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  gap: 7px;
  padding: 8px 13px;
  /* Le bouton ordinaire est blanc, cerné d'un filet : il se voit sans crier.
     Le bleu plein reste pour l'action principale, une seule par écran. */
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.15;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s ease, border-color .12s ease;
}

.btn:hover { background: var(--surface-soft); border-color: #bfc5cf; }
.btn.primary { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 600; }
.btn.primary:hover { border-color: #0a4680; background: #0a4680; }
.btn.danger { border-color: #f0cdc8; background: var(--red-soft); color: var(--red); }
.btn.danger:hover { background: #fbe2de; }
.btn.small { min-height: 32px; padding: 6px 10px; font-size: 12.5px; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.flash {
  padding: 11px 14px;
  margin-bottom: 14px;
  border: 1px solid #cfe1f5;
  border-radius: var(--radius-sm);
  background: #f2f8ff;
  color: #15539a;
  font-size: 13.5px;
}

.flash.error { border-color: #f5cbc6; background: var(--red-soft); color: var(--red); }
.flash.success { border-color: #c9eadc; background: var(--green-soft); color: var(--green); }

.badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  padding: 3px 9px;
  /* Une pastille légère, cernée du même ton que son fond : elle se lit sans
     peser autant qu'un bouton, ce qui était le cas en gras sur aplat. */
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--surface-soft);
  color: #4b5563;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.badge.gray { border-color: #e4e7ec; background: #f3f4f6; color: #4b5563; }
.badge.blue { border-color: #d3e2f2; background: var(--brand-soft); color: var(--brand-2); }
.badge.green { border-color: #cfe9de; background: var(--green-soft); color: var(--green); }
.badge.red { border-color: #f4d3ce; background: var(--red-soft); color: var(--red); }
.badge.orange { border-color: #f4dfbe; background: var(--orange-soft); color: var(--orange); }

.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid { display: grid; gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; min-width: 0; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { color: #344054; font-size: 13px; font-weight: 550; }

.field input,
.field select,
.field textarea,
.login-card input,
.purchase-form input,
.purchase-form select,
.purchase-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 9px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  outline: none;
  background: #fff;
  color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.login-card input:focus,
.list-filter-search:focus,
.list-filter-select:focus {
  border-color: var(--brand-2);
  box-shadow: var(--ring);
}

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

.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 10px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; font-size: 13.5px; }
.table th {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.table tbody tr:last-child td { border-bottom: 0; }
/* Survol de ligne : sur un tableau long, l'œil garde sa ligne en se déplaçant. */
.table tbody tr:hover td { background: var(--surface-soft); }
.table tbody tr[hidden] { display: none; }
/*
 * L'attribut hidden doit primer sur tout display posé par la feuille de style.
 * Sans cette règle, un bloc en flex ou en grid marqué hidden restait affiché,
 * le display de l'auteur l'emportant sur celui du navigateur.
 */
[hidden] { display: none !important; }

.empty { display: flex; min-height: 160px; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 30px 15px; color: var(--muted); font-size: 13.5px; text-align: center; }
.empty strong { color: var(--text); font-size: 15px; font-weight: 600; }
.empty .btn { margin-top: 6px; }

/* Colonnes de montants : calées à droite et en chiffres de largeur fixe, pour
   que les unités, dizaines et centaines s'alignent verticalement. Sans
   tabular-nums, un « 1 » est plus étroit qu'un « 8 » et la colonne ondule. */
.table th.num, .table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi strong,
.purchase-total strong,
.global-purchase-amount,
.document-totals strong,
.mobile-doc-bottom b,
.mobile-doc-bottom span,
.project-doc-list b,
.cto-doc-list b,
.cto-profit-grid strong { font-variant-numeric: tabular-nums; }

.line-head,
.line-row {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) 90px 130px 95px 78px;
  gap: 8px;
}

.line-head { padding: 0 4px 7px; color: var(--muted); font-size: 12px; font-weight: 720; }
.line-row { align-items: center; margin-bottom: 8px; }
.line-row input, .line-row select { width: 100%; min-width: 0; padding: 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-xs); }
.line-actions { display: flex; gap: 5px; }

.line-plus,
.line-minus {
  width: 34px;
  height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-xs);
  background: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
}

.line-plus { color: var(--brand-2); }
.line-minus { color: var(--red); }

.footer-editor { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-editor h2 { margin: 0 0 16px; }
.footer-editor h3 { margin: 0 0 8px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(360px, 1.15fr); gap: 24px; align-items: start; }
.adjustment-lines { display: grid; gap: 8px; margin: 10px 0; }
.adjustment-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 78px; gap: 8px; align-items: center; }
.adjustment-row input { width: 100%; min-width: 0; }
.footer-grid textarea { min-height: 250px; }

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

/* Deux pastilles côte à côte au bout de la barre : le verrou, puis le statut. */
.toolbar-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.document-direct-preview { width: min(100%, 960px); margin: 0 auto 20px; }
.document-sheet {
  display: flex;
  flex-direction: column;
  min-height: 1120px;
  padding: clamp(30px, 5vw, 54px);
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: #172033;
  box-shadow: var(--shadow);
}
.document-sheet-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 52px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.document-issuer, .document-identity, .document-client { display: flex; min-width: 0; flex-direction: column; }
.document-logo { width: min(100%, 250px); height: 66px; margin-bottom: 14px; object-fit: contain; object-position: left center; }
.document-issuer strong { margin-bottom: 4px; font-size: 16px; }
.document-issuer span, .document-client span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.document-identity { text-align: right; }
.document-identity h2 { margin: 0 0 14px; color: var(--brand); font-size: clamp(22px, 3vw, 30px); letter-spacing: .035em; }
.document-meta { display: grid; gap: 6px; margin: 0 0 22px; }
.document-meta div { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); gap: 14px; }
.document-meta dt { color: var(--brand-2); font-size: 12px; font-weight: 800; }
.document-meta dd { margin: 0; font-size: 13px; }
.document-client { font-style: normal; }
.document-client strong { margin-bottom: 4px; font-size: 15px; }
.document-subject { margin: 26px 0 14px; font-size: 18px; }
.document-info-line { margin: 18px 0; padding: 12px 14px; border-radius: 8px; background: #eef4fa; color: var(--brand-2); font-size: 13px; font-weight: 800; }
.document-lines-wrap { margin-top: 24px; }
.document-lines { width: 100%; border-collapse: collapse; }
.document-lines th { padding: 10px 9px; border-bottom: 1px solid var(--line); background: #eef4fa; color: var(--brand-2); font-size: 12px; text-align: right; }
.document-lines th:nth-child(2) { text-align: left; }
.document-lines td { padding: 13px 9px; border-bottom: 1px solid #e5eaf0; font-size: 13px; text-align: right; vertical-align: top; }
.document-lines td:first-child { text-align: left; }
.document-lines .document-description { width: 50%; text-align: left; line-height: 1.5; }
.document-recap { margin-top: 30px; padding: 18px; border: 1px solid var(--line); border-radius: 10px; }
.document-recap h3 { margin: 0 0 12px; color: var(--brand); font-size: 15px; }
.document-recap > div { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid #edf2f7; font-size: 13px; }
.document-recap > div:last-child { border-bottom: 0; }
.document-sheet-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr); gap: 42px; margin-top: 34px; }
.document-notes { color: var(--muted); font-size: 12px; line-height: 1.55; }
.document-notes > strong { display: block; margin-bottom: 14px; }
.document-notes > div + div { margin-top: 20px; }
.document-signature { white-space: normal; }
.document-totals { display: grid; align-content: start; }
.document-totals > div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; color: var(--muted); font-size: 13px; }
.document-totals > div strong { color: #172033; white-space: nowrap; }
.document-totals .document-net { margin-top: 5px; padding: 14px 0 0; border-top: 2px solid var(--brand-2); color: var(--brand); font-size: 15px; font-weight: 800; }
.document-totals .document-net strong { color: var(--brand); font-size: 17px; }
.document-kind-credit .document-net strong { color: var(--red); }
.document-legal { margin-top: auto; padding-top: 52px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.5; text-align: center; }
.send-card { width: min(100%, 920px); }

.invoice-choice { position: relative; display: inline-block; }
.invoice-choice summary { list-style: none; cursor: pointer; }
.invoice-choice summary::-webkit-details-marker { display: none; }
.invoice-choice-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  min-width: 220px;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(15,23,42,.16);
}
.invoice-choice-menu form, .invoice-choice-menu .btn { width: 100%; }

.list-filter-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.list-filter-search { flex: 1 1 300px; min-width: 200px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; outline: none; font-size: 13.5px; }
.list-filter-select { height: 38px; padding: 0 30px 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: #fff; outline: none; font-size: 13.5px; }
.lf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lf-chip { min-height: 36px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 550; cursor: pointer; }
.lf-chip.active { border-color: var(--brand); background: var(--brand); color: #fff; }
.lf-count { margin-left: auto; color: var(--muted); font-size: 12.5px; font-weight: 500; }

.invoice-type { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 650; }
.type-credit, .credit-amount { color: var(--red); }
.type-situation { color: #6d42b5; }
.type-final { color: var(--green); }
.credit-amount { font-weight: 800; }

.special-form { width: min(100%, 1150px); }
.progress-table, .credit-lines { display: grid; margin: 20px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; }
.progress-head, .progress-row { display: grid; grid-template-columns: minmax(260px, 1fr) 150px 120px 160px 150px; gap: 10px; align-items: center; padding: 10px 12px; }
.progress-head, .credit-head { background: var(--surface-soft); font-weight: 800; }
.progress-row, .credit-row { border-top: 1px solid var(--line); }
.progress-row input, .credit-row input { width: 100%; }
.progress-head-v2, .progress-row-v2 { grid-template-columns: minmax(240px, 1fr) 150px 120px 165px 180px; }
.progress-input-wrap { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.progress-input-wrap small { display: none; color: var(--muted); font-weight: 700; }
.situation-summary { display: flex; justify-content: flex-end; gap: 20px; margin: 16px 0 20px; font-size: 18px; }
.credit-head, .credit-row { display: grid; grid-template-columns: minmax(300px, 1fr) 180px 220px; gap: 12px; align-items: center; padding: 10px 12px; }
.situation-edit-list { display: grid; gap: 12px; margin: 18px 0; }
.situation-edit-row { display: grid; grid-template-columns: minmax(250px, 1.2fr) minmax(220px, 1fr) 210px 120px; gap: 12px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.situation-edit-row > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.situation-edit-row > div span { color: var(--muted); font-size: 12px; }
.situation-edit-row label { display: flex; min-width: 0; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 700; }

.purchase-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 240px)); gap: 14px; margin: 16px 0; }
.purchase-kpis .card { display: flex; flex-direction: column; gap: 4px; }
.purchase-kpis span { color: var(--muted); font-size: 13px; }
.purchase-kpis strong { color: var(--brand); font-size: 24px; }
.purchase-form { display: grid; width: 100%; min-width: 0; gap: 16px; }
.purchase-form .grid.cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; width: 100%; }
.purchase-form label { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.purchase-form > .btn { width: 100%; }
.file-drop { display: flex; width: 100%; flex-direction: column; gap: 8px; padding: 16px; border: 1.5px dashed var(--line-strong); border-radius: 14px; background: var(--surface-soft); }
.file-drop input { background: #fff; }
.purchase-head, .purchase-global-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.purchase-head form { display: flex; min-width: min(430px, 100%); gap: 8px; }
.purchase-list { display: grid; gap: 10px; margin-top: 16px; }
.purchase-doc { display: grid; grid-template-columns: 82px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.purchase-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 82px; height: 72px; overflow: hidden; border-radius: 10px; background: #f1f5f9; }
.purchase-thumb img { width: 100%; height: 100%; object-fit: cover; }
.purchase-thumb iframe,.global-purchase-thumb iframe{width:100%;height:100%;border:0;background:#fff;pointer-events:none}
.purchase-thumb-link { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.purchase-thumb-badge { position: absolute; right: 5px; bottom: 5px; padding: 2px 6px; border-radius: 999px; background: rgba(15,23,42,.85); color: #fff; font-size: 10px; font-weight: 800; }
.purchase-thumb-pdf { background: var(--surface-soft); }
.pdf-icon { color: #475569; font-weight: 800; }
.purchase-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.purchase-info > span { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.purchase-amount { font-size: 17px; font-weight: 800; white-space: nowrap; }
.purchase-actions { display: flex; min-width: 0; align-items: center; gap: 6px; }
.purchase-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.purchase-pager span[aria-disabled] { opacity: .45; pointer-events: none; }
.purchase-pager > span:not([aria-disabled]) { color: var(--muted); font-size: 13px; }
.purchase-total { display: flex; justify-content: flex-end; gap: 30px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 18px; }
.purchase-summary { display: flex; align-items: center; gap: 20px; margin-top: 16px; }
.purchase-summary-total { display: flex; flex-direction: column; margin-left: auto; text-align: right; }
.ocr { max-height: 180px; margin-top: 8px; padding: 10px; overflow: auto; border-radius: 8px; background: var(--surface-soft); font-size: 12px; }
.purchase-global-head { margin-bottom: 16px; }
.purchase-global-head h2 { margin-bottom: 4px; }
.purchase-global-total { display: flex; flex-direction: column; text-align: right; }
.purchase-global-total span { color: var(--muted); font-size: 12px; }
.purchase-global-total strong { font-size: 22px; }
.purchase-filters { display: grid; grid-template-columns: 180px 180px minmax(260px, 1fr) auto; gap: 14px; align-items: end; margin-bottom: 16px; }
.filter-actions { display: flex; gap: 8px; }
.purchase-global-card { padding: 0; overflow: hidden; }
.purchase-list-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.check-all { display: flex; align-items: center; gap: 9px; font-weight: 700; }
.check-all input, .purchase-check input { width: 18px; height: 18px; accent-color: var(--brand-2); }
.global-purchase-list { display: grid; }
.global-purchase-row { display: grid; grid-template-columns: 38px 74px minmax(0, 1fr) 130px; gap: 12px; align-items: center; min-width: 0; padding: 12px 16px; border-bottom: 1px solid #edf2f7; }
.global-purchase-row:last-child { border-bottom: 0; }
.global-purchase-row:hover { background: #fafcff; }
.global-purchase-row:has(.purchase-checkbox:checked) { background: #eff6ff; }
.global-purchase-thumb { position: relative; display: flex; align-items: center; justify-content: center; width: 74px; height: 64px; overflow: hidden; border-radius: 10px; background: #f1f5f9; color: #334155; font-size: 13px; }
.global-purchase-thumb img { width: 100%; height: 100%; object-fit: cover; }
.global-purchase-thumb span { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: 999px; background: rgba(15,23,42,.88); color: #fff; font-size: 9px; font-weight: 800; }
.global-purchase-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.global-purchase-main span { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.global-purchase-main em { color: var(--orange); font-size: 12px; }
.global-purchase-main a { text-decoration: underline; text-underline-offset: 2px; }
.global-purchase-amount { font-size: 16px; font-weight: 800; text-align: right; white-space: nowrap; }
.purchase-selection-bar { position: sticky; bottom: 12px; z-index: 20; display: flex; align-items: center; justify-content: space-between; max-width: 900px; gap: 16px; margin: 14px auto 0; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 16px; background: #fff; box-shadow: 0 12px 35px rgba(15,23,42,.18); }
.purchase-selection-bar[hidden] { display: none; }
.purchase-selection-bar > div, .send-doc-chip { display: flex; flex-direction: column; gap: 2px; }
.purchase-selection-bar span, .send-doc-chip span { color: var(--muted); font-size: 12px; }
.send-purchase-card { width: min(100%, 900px); }
.send-docs-preview { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; }
.send-doc-chip { padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); }

.mobile-line-field { min-width: 0; }
.mobile-line-field-label { display: none; }

.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: linear-gradient(145deg, #eaf1f8, #f8fafc); }
.login-card { width: min(100%, 410px); padding: 30px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.login-logo { display: block; width: 100%; max-height: 82px; margin: 0 0 20px; object-fit: contain; object-position: left center; }
.login-card .brandmark { display: grid; width: 48px; height: 48px; margin-bottom: 16px; place-items: center; border-radius: 12px; background: var(--brand); color: #fff; font-weight: 800; }
.login-card h1 { margin: 0 0 6px; color: var(--brand); }
.login-card form { display: grid; gap: 13px; margin-top: 24px; }

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
  .purchase-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .purchase-search, .filter-actions { grid-column: 1 / -1; }
  .purchase-form .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .progress-head, .progress-row { grid-template-columns: minmax(220px, 1fr) 120px 110px 145px 150px; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: auto; padding: 10px 12px; }
  .brand { display: none; }
  .sidebar nav { display: flex; gap: 4px; overflow-x: auto; }
  .sidebar nav a { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  .sidefoot { display: none; }
  .content { padding: 20px 18px 42px; }
  .grid2, .form-grid { grid-template-columns: 1fr; }
  .field.full { grid-column: auto; }
  .document-toolbar { align-items: stretch; flex-direction: column; }
  .document-sheet { min-height: min(1120px, calc((100vw - 70px) * 1.414)); padding: 34px; }
  .situation-edit-row { grid-template-columns: 1fr 1fr; }
  .progress-table { overflow-x: auto; }
  .progress-head, .progress-row { min-width: 850px; }
}

@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .app-shell { display: block; }
  .content { padding: 15px 12px 28px; }
  .topbar { margin-bottom: 15px; }
  .topbar h1 { font-size: 21px; }
  .sidebar { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 1000; height: calc(64px + env(safe-area-inset-bottom)); padding: 5px 6px calc(5px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 25px rgba(6,52,97,.16); }
  .sidebar nav { display: grid; height: 54px; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; overflow: visible; }
  .sidebar nav a { justify-content: center; min-width: 0; min-height: 54px; padding: 5px 2px; text-align: center; white-space: normal; font-size: 10px; line-height: 1.08; }
  .card { padding: 14px 12px; margin-bottom: 13px; border-radius: 13px; }
  .card-head { align-items: stretch; flex-direction: column; }
  .logo-setting { align-items: stretch; flex-direction: column; }
  .logo-setting img { width: 100%; max-width: 280px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .kpi { padding: 13px; }
  .kpi strong { font-size: 21px; }
  .kpi small { font-size: 11px; }
  .actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .actions .btn, .actions form, .actions form .btn { width: 100%; }
  .actions .btn { min-height: 46px; }
  .actions .btn:only-child { grid-column: 1 / -1; }
  .field input, .field select, .field textarea, .login-card input, .purchase-form input, .purchase-form select, .purchase-form textarea { min-height: 46px; padding: 11px 12px; border-radius: 10px; font-size: 16px; }
  .field textarea { min-height: 140px; }
  .table-wrap { margin-right: -12px; margin-left: -12px; padding: 0 12px; }
  .table { min-width: 660px; }
  .line-head { display: none; }
  .lines { display: grid; gap: 10px; }
  .line-row, #quote-lines .line-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
  }
  .line-row input[name*="[description]"] { grid-column: 1 / -1; }
  .line-row .line-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .line-plus, .line-minus { width: 46px; height: 46px; border-radius: 10px; font-size: 24px; }
  .adjustment-row { grid-template-columns: minmax(0, 1fr) 110px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); }
  .adjustment-row .line-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .footer-grid textarea { min-height: 210px; }
  .mobile-line-field { display: flex; flex-direction: column; gap: 6px; }
  .mobile-line-field[data-field="description"] { grid-column: 1 / -1; }
  .mobile-line-field-label { display: block; color: #475569; font-size: 13px; font-weight: 700; }
  .invoice-choice { width: 100%; }
  .invoice-choice > summary { width: 100%; }
  .invoice-choice-menu { position: static; min-width: 0; margin-top: 8px; }
  .document-sheet { padding: 24px 18px; border-radius: 12px; }
  .document-sheet-header { grid-template-columns: 1fr; gap: 26px; }
  .document-identity { text-align: left; }
  .document-meta div { grid-template-columns: 120px minmax(0, 1fr); }
  .document-lines thead { display: none; }
  .document-lines, .document-lines tbody { display: block; }
  .document-lines tr { display: grid; gap: 7px; padding: 13px 0; border-bottom: 1px solid var(--line); }
  .document-lines td { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; padding: 0; border: 0; text-align: left; }
  .document-lines td::before { content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .document-lines .document-description { width: auto; }
  .document-sheet-summary { grid-template-columns: 1fr; gap: 26px; }
  .document-legal { padding-top: 34px; }
  .list-filter-bar { align-items: stretch; }
  .list-filter-search { width: 100%; min-width: 0; flex-basis: 100%; }
  .list-filter-select { width: 100%; }
  .lf-chips { width: 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .lf-chip { flex: 0 0 auto; white-space: nowrap; }
  .lf-count { margin-left: 0; }
  .progress-head, .credit-head { display: none; }
  .progress-row, .progress-row-v2, .credit-row { display: grid; min-width: 0; grid-template-columns: 1fr; gap: 10px; padding: 14px; }
  .progress-desc { font-weight: 800; }
  .progress-input-wrap small { display: block; }
  .progress-row > span[data-mobile-label]::before { content: attr(data-mobile-label) " : "; color: var(--muted); font-weight: 700; }
  .situation-summary { justify-content: space-between; font-size: 16px; }
  .situation-edit-row { grid-template-columns: 1fr; }
  .situation-edit-row input { font-size: 16px; }
  .purchase-kpis, .purchase-form .grid.cols-4, .purchase-filters { grid-template-columns: 1fr; }
  .purchase-search, .filter-actions { grid-column: auto; }
  .purchase-head, .purchase-global-head { align-items: stretch; flex-direction: column; }
  .purchase-head form { display: grid; width: 100%; min-width: 0; grid-template-columns: 1fr auto; }
  .purchase-doc { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px; }
  .purchase-thumb { width: 76px; height: 76px; }
  .purchase-info > span { white-space: normal; overflow-wrap: anywhere; }
  .purchase-amount { grid-column: 2; justify-self: start; font-size: 18px; }
  .purchase-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 8px; }
  .purchase-actions .btn, .purchase-actions form, .purchase-actions form button { width: 100%; }
  .purchase-summary { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .purchase-summary-total, .purchase-global-total { width: 100%; margin-left: 0; text-align: left; }
  .filter-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .global-purchase-row { grid-template-columns: 30px 68px minmax(0, 1fr); gap: 9px; padding: 11px; }
  .global-purchase-thumb { width: 68px; height: 68px; }
  .global-purchase-main span { white-space: normal; overflow-wrap: anywhere; }
  .global-purchase-amount { grid-column: 3; text-align: left; font-size: 17px; }
  .purchase-selection-bar { bottom: 8px; align-items: stretch; flex-direction: column; border-radius: 14px; }
  .purchase-selection-bar .btn { width: 100%; }
}

@media (max-width: 430px) {
  .content { padding-right: 9px; padding-left: 9px; }
  .card { padding-right: 10px; padding-left: 10px; }
  .actions, .line-row, #quote-lines .line-row, .adjustment-row { grid-template-columns: 1fr; }
  .line-row input[name*="[description]"], .mobile-line-field[data-field="description"] { grid-column: auto; }
  .purchase-head form, .purchase-actions, .filter-actions { grid-template-columns: 1fr; }
  .purchase-thumb { width: 70px; height: 70px; }
  .purchase-doc { grid-template-columns: 70px minmax(0, 1fr); }
  .document-sheet { padding: 20px 14px; }
  .document-logo { height: 56px; }
  .document-meta div { grid-template-columns: 100px minmax(0, 1fr); gap: 8px; }
  .document-lines td { grid-template-columns: 100px minmax(0, 1fr); }
}

@page { size: A4; margin: 10mm; }

@media print {
  .sidebar, .topbar, .no-print, .flash { display: none; }
  .app-shell, .content { display: block; width: 100%; min-height: 0; padding: 0; background: #fff; }
  body { padding: 0; background: #fff; }
  .document-direct-preview { width: 100%; margin: 0; }
  .document-sheet { min-height: 277mm; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
  .document-legal { break-inside: avoid; }
}

/* V5 — factures d'achat globales */
.purchase-filters-global { display:grid; grid-template-columns:130px 130px minmax(170px,1fr) minmax(190px,1.2fr) minmax(260px,2fr) auto; gap:12px; align-items:end; }
.purchase-table-wrap { width:100%; overflow:auto; }
.purchase-global-table { width:100%; min-width:1120px; border-collapse:collapse; }
.purchase-global-table th { padding:10px 12px; border-bottom:1px solid #dbe4ee; background:#f8fafc; color:#64748b; font-size:11px; font-weight:800; text-align:left; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.purchase-global-table td { padding:11px 12px; border-bottom:1px solid #edf2f7; vertical-align:middle; }
.purchase-global-table tbody tr:hover { background:#fafcff; }
.purchase-global-table tbody tr:has(.purchase-checkbox:checked) { background:#eff6ff; }
.purchase-global-table .num { text-align:right; white-space:nowrap; }
.purchase-select-col { width:38px; text-align:center !important; }
.purchase-note-cell { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.purchase-doc-actions { white-space:nowrap; }
.btn.small { padding:7px 10px; font-size:12px; }
@media (max-width:1100px){ .purchase-filters-global { grid-template-columns:repeat(2,minmax(0,1fr)); } .purchase-filters-global .purchase-search { grid-column:1/-1; } }
@media (max-width:700px){ .purchase-filters-global { grid-template-columns:1fr; } .purchase-filters-global .purchase-search { grid-column:auto; } }

/* V6 — justificatifs d'achat : une ligne, regroupement mensuel, aperçu cliquable */
.purchase-month-group { padding: 10px 16px; border-bottom: 1px solid var(--line); background: #f8fafc; }
.purchase-month-group-inner { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.purchase-month-group-inner strong { font-size:14px; color:var(--brand); }
.purchase-month-group-inner span { color:var(--muted); font-size:12px; }
.global-purchase-row { grid-template-columns: 38px 74px minmax(260px,1fr) auto; }
.global-purchase-side { display:flex; align-items:center; gap:14px; justify-content:flex-end; min-width:0; }
.global-purchase-actions { display:flex; align-items:center; gap:6px; white-space:nowrap; }
.global-purchase-thumb { text-decoration:none; border:1px solid var(--line); }
.global-purchase-thumb:hover { border-color:var(--line-strong); box-shadow:0 4px 16px rgba(15,23,42,.08); }
.global-purchase-main strong, .global-purchase-main span, .global-purchase-main em { min-width:0; }

@media (max-width: 900px) {
  .global-purchase-row { grid-template-columns: 30px 68px minmax(0,1fr); align-items:start; }
  .global-purchase-side { grid-column: 3; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
  .global-purchase-amount { text-align:left; }
}

@media (max-width: 620px) {
  .purchase-list-head { align-items:flex-start; gap:10px; }
  .purchase-month-group { padding:9px 11px; }
  .purchase-month-group-inner { align-items:flex-start; flex-direction:column; gap:2px; }
  .global-purchase-row { grid-template-columns: 26px 64px minmax(0,1fr); gap:8px; padding:10px; }
  .global-purchase-thumb { width:64px; height:64px; }
  .global-purchase-main strong { font-size:14px; }
  .global-purchase-main span, .global-purchase-main em { font-size:12px; white-space:normal; overflow-wrap:anywhere; }
  .global-purchase-side { grid-column: 2 / -1; margin-top:2px; }
  .global-purchase-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .global-purchase-actions .btn { width:100%; }
}

/* V11 — vraie ergonomie mobile-first, sans défilement horizontal */
.row-main-link { display:flex; flex-direction:column; gap:2px; }
.row-main-link small { color:var(--muted); font-size:11px; font-weight:600; }
.client-search { flex:1 1 320px; max-width:520px; }
.client-search input { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.contact-actions { display:flex; align-items:center; gap:8px; }
.icon-action { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--brand); }
.icon-action svg { width:20px; height:20px; }
.icon-action.whatsapp { color:#128c5e; }
.mobile-client-list,.mobile-document-list,.mobile-top-actions { display:none; }
.empty-state { padding:26px 10px; color:var(--muted); text-align:center; }

@media (max-width:700px) {
  body { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .sidebar { display:none !important; }
  .content { padding:12px 10px 24px; }
  .topbar { position:sticky; top:0; z-index:40; min-height:50px; margin:0 -10px 12px; padding:8px 10px; background:rgba(246,247,249,.92); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  .topbar h1 { font-size:19px; }
  /* Quatre chiffres l'un sous l'autre occupaient tout l'écran avant la liste.
     Deux par ligne : la même information, en deux fois moins de hauteur. */
  .cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:14px; }
  .kpi { padding:11px 12px; }
  .kpi small { font-size:11.5px; }
  .kpi strong { margin-top:3px; font-size:18px; }
  .mobile-top-actions { display:flex; margin-left:auto; gap:7px; }
  .mobile-top-actions a { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:#fff; color:var(--brand); }
  .mobile-top-actions svg { width:20px; height:20px; }
  .card { padding:12px 10px; border-radius:var(--radius); }
  .clients-head,.document-list-card>.card-head { gap:10px; }
  .client-search { width:100%; max-width:none; flex-basis:auto; }
  .clients-head .btn,.document-list-card>.card-head .btn { width:100%; min-height:46px; }

  .desktop-client-table,.desktop-document-table { display:none; }
  .mobile-client-list,.mobile-document-list { display:grid; gap:10px; }
  .mobile-client-card,.mobile-document-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.045); }
  .mobile-client-open { position:relative; display:flex; min-height:68px; flex-direction:column; justify-content:center; padding:11px 42px 9px 12px; }
  .mobile-client-name { color:var(--brand); font-size:16px; font-weight:800; line-height:1.18; }
  .mobile-client-city { margin-top:4px; color:var(--muted); font-size:13px; }
  .mobile-chevron { position:absolute; top:50%; right:14px; transform:translateY(-50%); color:#94a3b8; font-size:30px; font-weight:300; }
  .mobile-contact-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid var(--line); background:#f8fafc; }
  .mobile-contact-actions a { display:flex; min-width:0; min-height:48px; align-items:center; justify-content:center; gap:5px; padding:7px 4px; border-right:1px solid var(--line); color:var(--brand); font-size:11px; font-weight:750; }
  .mobile-contact-actions a:last-child { border-right:0; }
  .mobile-contact-actions a.whatsapp { color:#128c5e; }
  .mobile-contact-actions svg { width:18px; height:18px; flex:0 0 auto; }

  .mobile-document-card { display:block; padding:12px; color:inherit; }
  .mobile-doc-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .mobile-doc-top strong { min-width:0; color:var(--brand); font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
  .mobile-doc-top .badge { flex:0 0 auto; }
  .mobile-doc-client { margin-top:6px; color:#334155; font-size:13px; font-weight:650; }
  .mobile-doc-meta { margin-top:3px; color:var(--muted); font-size:11px; }
  .mobile-doc-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:10px; padding-top:9px; border-top:1px solid #eef2f6; }
  .mobile-doc-bottom span { color:var(--muted); font-size:12px; }
  .mobile-doc-bottom b { color:var(--text); font-size:17px; }
  .document-list-card .actions { grid-template-columns:1fr 1fr; }
  .document-list-card .actions .btn.primary { grid-column:1/-1; }

  /* Aucun tableau métier ne doit forcer la page à dépasser la largeur de l'iPhone. */
  .table-wrap { max-width:100%; overflow-x:hidden; }

  /*
   * Le tableau des chantiers se consulte en le faisant glisser : sur un
   * téléphone, les montants sont forcément hors écran. La première colonne
   * reste donc accrochée à gauche — sans elle, on fait défiler des chiffres
   * sans plus savoir à quel chantier ils appartiennent.
   */
  .project-table th:first-child,
  .project-table td:first-child {
    position:sticky; left:0; z-index:1;
    background:var(--surface);
    box-shadow:1px 0 0 var(--line);
  }
  .project-table th:first-child { background:var(--surface); }
  .project-table tbody tr:hover td:first-child { background:var(--surface-soft); }
}

/* ===== V12 - CHANTIERS / MOBILE FIRST ===== */
.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/*
 * Fiche de chantier : même matière que les autres fiches de l'application —
 * mêmes jetons de couleur, même liseré, même rayon. Elle avait ses propres
 * teintes en dur, ce qui la faisait détonner d'un écran à l'autre.
 */
.project-card{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:var(--radius);padding:15px;background:var(--surface);box-shadow:var(--shadow);transition:border-color .12s ease,background .12s ease}
/* La fiche ne décolle plus au survol : elle change de filet. Le saut d'un pixel
   faisait vibrer la grille entière quand la souris la traversait. */
.project-card:hover{border-color:var(--line-strong);background:var(--surface-soft)}
.project-card-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.project-card-top>div{min-width:0}
.project-card-top strong{display:block;color:var(--text);font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.01em}
.project-card-top span:not(.badge){display:block;margin-top:3px;color:var(--muted);font-size:13px}
.project-place{margin:9px 0;color:var(--muted);font-size:12.5px}

/*
 * Trois montants, chacun sous son libellé et centré avec lui. Les valeurs
 * étaient calées à droite et les libellés à gauche : dans trois colonnes
 * étroites, la paire se désolidarisait et on ne savait plus quel chiffre allait
 * avec quel mot.
 *
 * La couleur porte un sens, elle ne décore pas : le reste à encaisser est en
 * rouge tant qu'il y a quelque chose à récupérer, le facturé en vert, le devis
 * au bleu de la marque. Un montant nul reste gris — il n'y a rien à en dire.
 */
.project-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-kpis>div{min-width:0;text-align:center}
.project-kpis dt{color:var(--muted);font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.project-kpis dd{margin:4px 0 0;font-size:14.5px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-devis{color:var(--brand-2)}
.kpi-facture{color:var(--green)}
.kpi-reste{color:var(--red)}
.kpi-vide{color:var(--muted);font-weight:500}
.project-card-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-top:11px;font-size:12.5px;color:var(--muted)}
.project-card-bottom b{color:var(--brand-2);font-weight:600}

/* Bascule fiches / tableau. */
.view-switch{display:flex;gap:6px;margin:0 0 12px}
.project-table .row-main-link small{display:block;color:var(--muted);font-size:11px;font-weight:600}.empty-state{display:flex;min-height:260px;align-items:center;justify-content:center;flex-direction:column;text-align:center;gap:8px}.empty-state strong{font-size:20px}.empty-state span{color:#64748b;margin-bottom:8px}
.project-hero-main{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}.project-hero h2{font-size:27px;margin:5px 0}.project-hero p{margin:0;color:#64748b}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#64748b}.project-hero-actions{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}.project-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:14px 0}.kpi-card{background:#fff;border:1px solid #e5e7eb;border-radius:15px;padding:16px}.kpi-card small{display:block;color:#64748b}.kpi-card strong{display:block;font-size:20px;margin-top:4px}.project-sections{display:grid;grid-template-columns:1fr 1fr;gap:14px}.project-doc-list{display:flex;flex-direction:column}.project-doc-list>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-bottom:1px solid #eef2f7;text-decoration:none;color:inherit}.project-doc-list>a:last-child{border-bottom:0}.project-doc-list>a>div:first-child{min-width:0}.project-doc-list strong{display:block}.project-doc-list small{display:block;color:#64748b;margin-top:3px}.project-doc-list>a>div:last-child{display:flex;align-items:flex-end;flex-direction:column;gap:5px;white-space:nowrap}.mobile-doc-project{display:block!important;margin-top:3px;font-size:12px!important;color:#2563eb!important;font-weight:650}
.badge.blue{background:#dbeafe;color:#1d4ed8}

@media(max-width:900px){.project-grid{grid-template-columns:1fr}.project-sections{grid-template-columns:1fr}.project-summary-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .project-list-card,.project-hero,.project-form{border-radius:0;margin-left:-14px;margin-right:-14px;border-left:0;border-right:0}
  .project-list-card .card-head{align-items:center}.project-list-card .card-head p{display:none}.project-list-card .card-head .btn{white-space:nowrap}
  .project-grid{gap:10px}.project-card{border-radius:14px;padding:14px;box-shadow:none}.project-card:hover{transform:none}.project-card-top strong{font-size:16px}.project-kpis{gap:4px}.project-kpis b{font-size:13px}.project-place{margin:9px 0}
  .project-hero h2{font-size:22px}.project-hero-main{align-items:flex-start}.project-hero-actions{display:grid;grid-template-columns:1fr auto}.project-hero-actions .btn{min-height:46px;display:flex;align-items:center;justify-content:center}
  .project-summary-grid{grid-template-columns:repeat(2,1fr);gap:8px}.kpi-card{padding:13px}.kpi-card strong{font-size:18px}.project-sections{gap:10px}.project-sections>.card{margin-left:-14px;margin-right:-14px;border-radius:0;border-left:0;border-right:0}
  .project-doc-list>a{min-height:62px}.project-doc-list>a>div:last-child b{font-size:14px}
}

/* ===== V14 - CARNET CHANTIER : NOTES + PHOTOS ===== */
.project-journal-card .card-head{align-items:flex-start}
.project-mini-history{display:flex;flex-direction:column}
.project-mini-history>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #eef2f7;color:inherit;text-decoration:none}
.project-mini-history>a:last-child{border-bottom:0}
.project-mini-history>a>div{min-width:0}
.project-mini-history strong{display:block;font-size:13px}
.project-mini-history small{display:block;margin-top:3px;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.project-photo-count{flex:0 0 auto;padding:5px 8px;border-radius:999px;background:#f1f5f9;color:#475569;font-size:12px;font-weight:750}
.project-journal-form{display:grid;gap:12px}
.project-journal-form label:not(.project-photo-picker){display:grid;gap:6px;font-weight:700}
.project-journal-form textarea{width:100%;min-height:110px;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;resize:vertical}
.project-photo-picker{position:relative;display:flex;min-height:96px;align-items:center;justify-content:center;flex-direction:column;gap:4px;padding:14px;border:2px dashed #cbd5e1;border-radius:14px;background:#f8fafc;color:var(--brand);text-align:center;cursor:pointer}
.project-photo-picker span{font-weight:800}
.project-photo-picker small{color:#64748b;font-size:12px}
.project-photo-picker input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.project-camera-capture{display:grid;min-width:0;gap:7px}
.project-camera-capture .project-photo-picker{width:100%;font:inherit}
.camera-capture-inputs{display:none}
.camera-capture-status{display:flex;min-width:0;align-items:flex-start;flex-direction:column;gap:5px;color:var(--muted);font-size:12px}
.camera-capture-status>strong{color:var(--brand)}
.camera-capture-status>span{display:flex;width:100%;min-width:0;flex-wrap:wrap;gap:5px}
.camera-capture-item{display:inline-flex;min-width:0;max-width:100%;align-items:center;gap:5px;padding:4px 7px;border-radius:8px;background:var(--brand-soft);color:var(--brand)}
.camera-capture-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camera-capture-remove{flex:0 0 auto;padding:0;border:0;background:none;color:#b91c1c;font-size:16px;font-weight:900;line-height:1;cursor:pointer}
.project-camera-capture.compact{padding:10px;border:1px dashed var(--line-strong);border-radius:10px;background:#fff}
.project-camera-capture.compact>.btn{width:100%;min-height:44px}
.project-journal-save{min-height:48px}
.project-timeline{position:relative;display:flex;width:100%;min-width:0;max-width:100%;overflow:hidden;flex-direction:column;gap:0}
.project-timeline-item{position:relative;width:100%;min-width:0;max-width:100%;padding:16px 0 18px 24px;border-left:2px solid #dbe5ef}
.project-timeline-item:before{content:"";position:absolute;top:21px;left:-6px;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px #e8f0f8}
.project-timeline-item:first-child{padding-top:4px}
.project-timeline-item:first-child:before{top:9px}
.project-timeline-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#64748b;font-size:12px}
.project-timeline-meta strong{color:#334155;font-size:13px}
.project-timeline-note{width:100%;min-width:0;max-width:100%;margin-top:9px;color:#0f172a;line-height:1.48;overflow-wrap:anywhere;word-break:break-word}
.project-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:11px}
.project-photo-grid a{display:block;aspect-ratio:1/1;overflow:hidden;border-radius:10px;background:#e2e8f0}
.project-photo-grid img{width:100%;height:100%;object-fit:cover;display:block}
.project-timeline-delete{margin-top:10px}
.link-danger{padding:0;border:0;background:none;color:#b91c1c;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.project-timeline-actions{display:flex;width:100%;max-width:100%;align-items:center;gap:8px;margin-top:12px}
.project-timeline-actions .project-timeline-delete{margin:0}
.project-note-edit-toggle,.project-timeline-actions .link-danger{display:inline-flex;min-height:36px;align-items:center;justify-content:center;padding:7px 12px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12px;font-weight:800;line-height:1;cursor:pointer}
.project-note-edit-toggle{color:var(--brand)}
.project-timeline-actions .link-danger{color:#b91c1c}
.project-note-editor[hidden]{display:none}
.project-note-editor{width:100%;min-width:0;max-width:100%;margin-top:10px;padding:14px;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--surface-soft)}
.project-note-edit-form{display:grid;gap:12px}
.project-note-edit-form>label{display:grid;gap:6px;font-weight:700}
.project-note-edit-form textarea{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:#fff;resize:vertical}
.project-note-edit-form input[type=file]{display:block;width:100%;min-width:0;max-width:100%;overflow:hidden}
.project-note-edit-form small{color:var(--muted);font-weight:400}
.project-note-edit-form fieldset{min-width:0;margin:0;padding:10px;border:1px solid var(--line);border-radius:10px}
.project-note-edit-form legend{padding:0 5px;font-size:13px;font-weight:750}
.project-edit-photo-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.project-edit-photo-grid label{position:relative;display:block;overflow:hidden;border-radius:9px;background:#e2e8f0;aspect-ratio:1/1}
.project-edit-photo-grid img{width:100%;height:100%;object-fit:cover}
.project-edit-photo-grid span{position:absolute;right:4px;bottom:4px;left:4px;padding:5px;border-radius:7px;background:rgba(255,255,255,.92);font-size:12px;font-weight:750;text-align:center}
@media(max-width:700px){
  .project-journal-compose{margin-left:-10px;margin-right:-10px;border-left:0;border-right:0;border-radius:0}
  .project-journal-form textarea{min-height:132px;font-size:16px}
  .project-photo-picker{min-height:108px}
  .project-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .project-timeline-item{padding-left:18px}
  .project-timeline-meta{align-items:flex-start;flex-direction:column;gap:2px}
  .project-note-edit-form textarea{font-size:16px}
  .project-edit-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:430px){.project-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.project-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.project-photo-actions{grid-template-columns:1fr}.project-photo-picker{min-height:88px}}

/* V16.2 — aperçu photo/PDF refermable facilement sur iPhone */
body.preview-open{position:fixed;width:100%;overflow:hidden}
.media-preview[hidden]{display:none}
.media-preview{position:fixed;inset:0;z-index:1000;width:100vw;max-width:100%;height:100vh;height:100dvh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:hidden;background:rgba(8,19,33,.82);overscroll-behavior:none}
.media-preview-panel{position:relative;display:flex;width:100%;max-width:100vw;height:100%;margin:0 auto;overflow:hidden;flex-direction:column;background:#111827}
.media-preview-toolbar{display:flex;min-height:64px;align-items:center;justify-content:space-between;gap:12px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left));background:#fff;border-bottom:1px solid #d9e0e8}
.media-preview-toolbar strong{min-width:0;overflow:hidden;color:var(--brand);text-overflow:ellipsis;white-space:nowrap}
.media-preview-close{display:flex;min-width:112px;min-height:48px;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border:0;border-radius:12px;background:var(--brand);color:#fff;font-size:20px;font-weight:850;cursor:pointer;touch-action:manipulation}
.media-preview-close span{font-size:15px}
.media-preview-content{display:flex;width:100%;min-width:0;min-height:0;flex:1;align-items:center;justify-content:center;overflow:hidden;overscroll-behavior:contain}
.media-preview-content [hidden]{display:none}
.media-preview-content img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.media-preview-content iframe{display:block;width:100%;max-width:100vw;height:100%;margin:0 auto;border:0;background:#fff}
.media-preview-swipe-edge{position:absolute;z-index:2;top:64px;bottom:0;left:0;width:34px;touch-action:pan-y}
@media(min-width:701px){.media-preview{padding:24px}.media-preview-panel{max-width:1100px;margin:auto;border-radius:14px;overflow:hidden}.media-preview-close{min-width:104px}}

@media(max-width:700px){
  .purchase-list,.purchase-doc,.purchase-global-card,.global-purchase-list,.global-purchase-row{width:100%;max-width:100%;min-width:0}
  .purchase-doc,.global-purchase-row{margin-right:auto;margin-left:auto;overflow:hidden}
  .purchase-info,.global-purchase-main,.global-purchase-side{max-width:100%;min-width:0}
}

/*
 * Fiches de liste sur téléphone — lisibilité.
 *
 * Les fiches blanches étaient posées dans un cadre blanc, séparées par un trait
 * très clair : deux surfaces de la même couleur, donc rien ne se détachait. Sur
 * téléphone, le cadre de la liste s'efface — les fiches reposent alors sur le
 * gris de la page, avec un liseré plus franc et une ombre courte. C'est le
 * contraste qui délimite, pas l'épaisseur du trait.
 *
 * Volontairement limité au téléphone : sur ordinateur le tableau aligné dans sa
 * carte reste la bonne lecture.
 */
@media (max-width: 700px) {
  /*
   * Le débordement latéral doit être neutralisé ici : plusieurs listes étaient
   * tirées de -14px pour que leur carte blanche aille bord à bord, ce qui avait
   * un sens tant qu'elle gardait son remplissage intérieur. Sans lui, le
   * contenu sortait de l'écran et le compteur se retrouvait rogné à gauche.
   * La carte disparaissant, c'est la marge de la page qui fait la gouttière.
   */
  .list-card { padding: 0; border: 0; background: none; box-shadow: none; margin-right: 0; margin-left: 0; }
  /*
   * Même en-tête que Contacts sur toutes les listes : boutons pleine largeur,
   * alignés à gauche. Le titre de la carte est masqué — la barre du haut porte
   * déjà le nom de l'écran, et le répéter mange une ligne sur un téléphone.
   */
  .list-card > .card-head { padding: 0 2px; align-items: stretch; }
  .list-card > .card-head > h2,
  .list-card > .card-head > div > h2 { display: none; }
  .list-card > .card-head .btn { width: 100%; min-height: 46px; }
  .list-card > .list-filter-bar { margin-bottom: 12px; }
  .list-card > .cto-supplier-tabs { margin-bottom: 12px; }

  /* Un message « aucun résultat » a besoin, lui, de rester posé sur du blanc. */
  .list-card .empty,
  .list-card .empty-state {
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
  }

  .list-card .mobile-client-card,
  .list-card .mobile-document-card,
  .list-card .project-card,
  .list-card .cto-mobile-cards tbody tr {
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .09);
  }

  /* Le nom du contact porte la fiche : il doit primer sur le reste. */
  .list-card .mobile-client-name { font-size: 17px; }
  .list-card .mobile-client-open { min-height: 66px; padding: 12px 42px 10px 14px; }
  .list-card .mobile-contact-actions { background: var(--surface-soft); border-top-color: var(--line-strong); }
  .list-card .mobile-contact-actions a { border-right-color: var(--line-strong); }
}

/* Une action d'installation restante : une phrase, un bouton, rien d'autre. */
.setup-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
}
.setup-notice strong { color: var(--brand); font-size: 14px; }
@media (max-width: 700px) {
  .setup-notice { flex-direction: column; align-items: stretch; }
  .setup-notice .btn { width: 100%; min-height: 46px; }
}

/* Un état fixé à la main se distingue sans crier : le soulignement pointillé
   suffit, et l'infobulle dit pourquoi. */
/*
 * « État fixé à la main » : le libellé est souligné en pointillé, pas la
 * pastille.
 *
 * C'était une bordure basse. Tant que la pastille n'avait aucune bordure, le
 * trait était droit et discret. Depuis que chaque pastille est cernée d'un
 * filet (V17.27), le navigateur devait raccorder un côté plein à un bas
 * pointillé sur un angle de 999 px : il en sortait un arc pointillé sous la
 * pastille et un crochet plein en bas à droite, qu'on prenait pour un défaut
 * d'affichage.
 *
 * Le soulignement du texte ne touche pas la forme : il reste droit quel que
 * soit le rayon, et c'est la convention habituelle pour un mot qui porte une
 * explication au survol.
 */
.badge.badge-manual {
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Case à cocher placée sous un menu, dans un formulaire en grille. */
.check-inline { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.check-inline input { width: 18px; height: 18px; flex: 0 0 auto; }

/* Bloc « À relancer » du tableau de bord. */
.relance-groupe { display: flex; align-items: center; gap: 8px; margin: 18px 0 8px; font-size: 14px; }
.relance-groupe:first-of-type { margin-top: 4px; }
.relance-groupe small { color: var(--muted); font-size: 12px; font-weight: 600; }
.relance-lignes { display: grid; gap: 8px; }
.relance-ligne { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-soft); }
.relance-ligne > div { flex: 1 1 auto; min-width: 0; }
.relance-ligne strong { display: block; color: var(--brand); font-size: 14px; overflow-wrap: anywhere; }
.relance-ligne small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.relance-ligne b { flex: 0 0 auto; white-space: nowrap; }
.relance-ligne .btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .relance-ligne { flex-wrap: wrap; }
  .relance-ligne .btn { width: 100%; }
}

/* En-têtes de tableau cliquables : le tri se demande d'un clic sur le titre. */
.th-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.th-sort:hover { color: var(--brand); }
.th-sort.is-active { color: var(--brand); }
.table th:has(.th-sort) { cursor: pointer; }

/*
 * Le courrier relevé. Une ligne par message, son extrait compris : il n'y a
 * rien à ouvrir pour savoir de quoi il s'agit, ce qui évite un aller-retour sur
 * un téléphone.
 */
.mail-list { display: grid; gap: 0; }
.mail-item { padding: 14px 2px; border-bottom: 1px solid var(--line); }
.mail-item:last-child { border-bottom: 0; }
.mail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mail-head strong { min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.mail-date { flex: 0 0 auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.mail-sujet { margin-top: 2px; font-size: 13.5px; overflow-wrap: anywhere; }
.mail-extrait { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.mail-pastilles { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.mail-pastilles a.badge { text-decoration: none; }
.mail-pastilles a.badge:hover { border-color: var(--line-strong); }

@media (max-width: 700px) {
  .list-card .mail-list { display: grid; gap: 10px; }
  .list-card .mail-item {
    padding: 13px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }
}

/* Pièces jointes : une puce par fichier, nom et poids, ouverte d'un clic. */
.mail-pieces { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.mail-piece {
  display: inline-flex; align-items: center; gap: 7px;
  max-width: 100%; min-height: 32px; padding: 5px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 12.5px; text-decoration: none;
}
.mail-piece:hover { background: var(--surface-soft); border-color: var(--brand-2); color: var(--brand); }
.mail-piece-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
.mail-piece-poids { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Bac à classer : une pièce reçue par e-mail, son fournisseur, son chantier. */
.purchase-inbox-row {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end;
  padding: 13px 0; border-top: 1px solid var(--line); margin: 0;
}
.purchase-inbox-doc { flex: 1 1 240px; min-width: 0; display: grid; gap: 2px; }
.purchase-inbox-doc a { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.purchase-inbox-doc small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.purchase-inbox-row .field { flex: 1 1 180px; min-width: 0; gap: 4px; }
.purchase-inbox-row .field span { color: #344054; font-size: 13px; font-weight: 550; }
.purchase-inbox-actions { display: flex; gap: 8px; flex: 0 0 auto; }

@media (max-width: 700px) {
  .purchase-inbox-row { gap: 10px; }
  .purchase-inbox-actions { width: 100%; }
  .purchase-inbox-actions .btn { flex: 1 1 0; }
}

/*
 * Aperçu d'une pièce jointe. En mode application sur iPhone il n'y a aucune
 * commande de navigation : le fichier est donc toujours présenté dans une page
 * du logiciel, qui porte un bouton Fermer.
 */
.apercu-image { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.apercu-pdf { display: block; width: 100%; height: min(78vh, 900px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-soft); }
.apercu-actions { margin-top: 14px; }

@media (max-width: 700px) {
  .apercu-pdf { height: 62vh; }
  .apercu-actions .btn { flex: 1 1 0; }
  .apercu-card > .card-head .btn { min-height: 44px; }
}