/*
 * public/app.css - feuille de style de l'application. Palette et mesures de
 * Kynthos Flow (barre #12233A, marque #2F6F9E, IBM Plex), classes `ec-*`.
 */
:root {
  --brand: #2F6F9E; --brand-hover: #255a80; --brand-soft: rgba(47,111,158,.12);
  --sidebar: #12233A; --sidebar-line: rgba(255,255,255,.08);
  --gray-25: #FAFBFC; --gray-50: #F4F6F8; --gray-100: #E9EDF1; --gray-200: #D7DCE1;
  --gray-400: #9AA6B1; --gray-500: #6B7783; --gray-600: #54606B; --gray-700: #33404B; --gray-900: #12233A;
  --text-strong: var(--gray-900); --text-body: var(--gray-700); --text-subtle: var(--gray-500);
  --surface-page: var(--gray-50); --surface-card: #fff;
  --border-default: var(--gray-200); --border-subtle: var(--gray-100);
  --ok: #2f8f5b; --danger: #c0392b; --dev: #b42318;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --radius-sm: 5px; --radius-md: 7px; --radius-lg: 10px; --radius-pill: 9999px;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --sidebar-w: 220px; --sidebar-w-collapsed: 64px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { height: 100% }
body { font-family: var(--font-sans); font-size: 14px; color: var(--text-body); background: var(--surface-page); line-height: 1.5; min-height: 100%; -webkit-font-smoothing: antialiased }
button, input, select, textarea { font: inherit; color: inherit }
.mono { font-family: var(--font-mono) }
[hidden] { display: none !important }
.ec-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px }

/* ── Coquille ─────────────────────────────────────────────────────────── */
.ec-app { display: flex; min-height: 100vh }
.ec-sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; height: 100vh; z-index: 100; overflow-y: auto }
.ec-devbar { background: var(--dev); color: #fff; font: 700 10px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 6px 4px }
.ec-brand { display: flex; align-items: center; padding: 18px 16px 16px; text-decoration: none; border-bottom: 1px solid var(--sidebar-line) }
.ec-brand b { font: 600 14px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: #fff }
.ec-nav { flex: 1; padding: 8px }
.ec-nav-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 12px; border-radius: var(--radius-sm); font: 500 13px/1 var(--font-sans); color: rgba(255,255,255,.6); text-decoration: none; margin-bottom: 1px; white-space: nowrap }
.ec-nav-link:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.9) }
.ec-nav-link.active { background: rgba(47,111,158,.28); color: #fff; font-weight: 600 }
.ec-nav-ico { flex-shrink: 0; opacity: .7 }
.ec-nav-link.active .ec-nav-ico { opacity: 1 }
.ec-nav-section { margin: 14px 0 4px; padding: 0 12px; font: 600 10px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.3) }
.ec-collapse-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 12px; border: none; background: none; border-radius: var(--radius-sm); color: rgba(255,255,255,.35); font: 500 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap }
.ec-collapse-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.7) }
.ec-collapse-btn svg { flex-shrink: 0; transition: transform .16s ease }
.ec-footer { border-top: 1px solid var(--sidebar-line); padding: 8px; position: relative }
.ec-user-btn { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: none; border-radius: var(--radius-sm); padding: 7px 8px; cursor: pointer; text-align: left }
.ec-user-btn:hover { background: rgba(255,255,255,.06) }
.ec-avatar { width: 28px; height: 28px; border-radius: 50%; background: rgba(47,111,158,.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 600 11px/1 var(--font-sans); color: rgba(255,255,255,.85) }
.ec-user-txt { min-width: 0; flex: 1; display: flex; flex-direction: column }
.ec-user-name { font: 500 12px/1.2 var(--font-sans); color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ec-user-role { font-size: 10px; color: rgba(255,255,255,.35); margin-top: 1px }
.ec-user-menu { position: absolute; left: 8px; right: 8px; bottom: 52px; background: #1c3049; border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-md); overflow: hidden; z-index: 500 }
.ec-user-menu button { display: block; width: 100%; background: none; border: none; padding: 9px 12px; color: rgba(255,255,255,.75); font: 500 12px var(--font-sans); cursor: pointer; text-align: left }
.ec-user-menu button:hover { background: rgba(255,255,255,.06) }
.ec-user-menu button.danger { color: rgba(255,130,120,.95) }
.ec-content { flex: 1; margin-left: var(--sidebar-w); min-width: 0 }
.ec-main { padding: 24px }

/* Barre repliée : icônes seules. */
.ec-sidebar, .ec-content { transition: width .16s ease, margin-left .16s ease }
html.sb-collapsed .ec-sidebar { width: var(--sidebar-w-collapsed) }
html.sb-collapsed .ec-content { margin-left: var(--sidebar-w-collapsed) }
html.sb-collapsed .ec-nav-lbl, html.sb-collapsed .ec-user-txt, html.sb-collapsed .ec-brand b { display: none }
html.sb-collapsed .ec-nav-link, html.sb-collapsed .ec-collapse-btn { justify-content: center; padding: 0; gap: 0 }
html.sb-collapsed .ec-collapse-btn svg { transform: rotate(180deg) }
html.sb-collapsed .ec-brand { justify-content: center; padding: 18px 8px 16px }
html.sb-collapsed .ec-brand::after { content: 'EC'; font: 600 15px/1 var(--font-sans); color: #fff }
html.sb-collapsed .ec-nav-section { font-size: 0; padding: 8px 0 4px; text-align: center }
html.sb-collapsed .ec-nav-section::after { content: '•'; font-size: 11px; color: rgba(255,255,255,.22) }
html.sb-collapsed .ec-user-btn { justify-content: center; padding: 7px 0 }
html.sb-collapsed .ec-user-menu { width: 220px; right: auto }
html.sb-collapsed .ec-devbar { font-size: 9px; letter-spacing: .04em }

/* Petit écran : la barre se replie d'elle-même. */
@media (max-width: 760px) {
  .ec-sidebar { width: var(--sidebar-w-collapsed) }
  .ec-content { margin-left: var(--sidebar-w-collapsed) }
  .ec-nav-lbl, .ec-user-txt, .ec-brand b, .ec-collapse-btn { display: none }
  .ec-nav-link { justify-content: center; padding: 0 }
  .ec-brand { justify-content: center; padding: 18px 8px 16px }
  .ec-brand::after { content: 'EC'; font: 600 15px/1 var(--font-sans); color: #fff }
  .ec-nav-section { font-size: 0; padding: 8px 0 4px }
  .ec-user-menu { width: 220px; right: auto }
  .ec-main { padding: 16px }
}

/* ── Composants ───────────────────────────────────────────────────────── */
.ec-pagehead { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap }
.ec-h1 { font: 600 20px/1.2 var(--font-sans); color: var(--text-strong) }
.ec-card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden }
.ec-note { margin-top: 12px; font-size: 12px; color: var(--text-subtle); max-width: 72ch; text-wrap: pretty }
.ec-avenir { padding: 20px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 640px }
.ec-avenir p { color: var(--text-body); text-wrap: pretty }

.ec-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); font: 500 13px/1 var(--font-sans); cursor: pointer; border: 1px solid transparent; text-decoration: none; white-space: nowrap }
.ec-btn-primary { background: var(--brand); color: #fff }
.ec-btn-primary:hover { background: var(--brand-hover) }
.ec-btn-secondary { background: #fff; border-color: var(--border-default); color: var(--text-body) }
.ec-btn-secondary:hover { background: var(--gray-25); border-color: var(--gray-400) }
.ec-btn-sm { height: 28px; padding: 0 10px; font-size: 12px }
.ec-btn-block { width: 100% }
.ec-btn-danger { background: var(--danger); color: #fff }
.ec-btn-danger:hover { background: #a02f23 }
.ec-btn:disabled { opacity: .6; cursor: not-allowed }

.ec-field { display: flex; flex-direction: column; gap: 5px; min-width: 0 }
.ec-label { font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--gray-600) }
.ec-input { display: block; width: 100%; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 0 10px; font-size: 14px; color: var(--text-strong); background: #fff; outline: none; transition: border-color .12s, box-shadow .12s }
.ec-input:hover:not(:disabled) { border-color: var(--gray-400) }
.ec-input:disabled { background: var(--gray-50); color: var(--gray-400); cursor: not-allowed }
.ec-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
.ec-hint { font-size: 11px; color: var(--text-subtle) }
.ec-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer }
.ec-check input { width: 16px; height: 16px; accent-color: var(--brand) }
.ec-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.ec-span-2 { grid-column: span 2 }
@media (max-width: 520px) { .ec-grid-2 { grid-template-columns: 1fr } .ec-span-2 { grid-column: auto } }

.ec-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--radius-pill); font: 500 11px/1.5 var(--font-sans); white-space: nowrap; background: var(--gray-100); color: var(--gray-600) }
.ec-badge-ok { background: #dcfce7; color: #166534 }

.ec-alert { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; border: 1px solid }
.ec-alert-error { background: #fde9e9; color: var(--danger); border-color: #f5b5b5 }
.ec-alert-info { background: #e8f1f8; color: var(--brand-hover); border-color: #bcd4e6 }

.ec-table-wrap { overflow-x: auto }
.ec-table { width: 100%; border-collapse: collapse; font-size: 13px }
.ec-table thead th { padding: 10px 14px; font: 600 11px/1 var(--font-sans); text-transform: uppercase; letter-spacing: .06em; color: var(--text-subtle); background: var(--gray-25); border-bottom: 1px solid var(--border-default); white-space: nowrap; text-align: left }
.ec-table tbody tr { border-bottom: 1px solid var(--border-subtle) }
.ec-table tbody tr:last-child { border-bottom: none }
.ec-table tbody tr:hover td { background: var(--gray-25) }
.ec-table td { padding: 9px 14px; vertical-align: middle }
.ec-table td.strong { color: var(--text-strong); font-weight: 600 }
.ec-table td.mono { font-size: 12px }
.ec-table tr.ec-row-off td { color: var(--text-subtle) }
.ec-row-actions { display: flex; gap: 6px; justify-content: flex-end }
.ec-vide { text-align: center; color: var(--text-subtle); padding: 24px }

/* Modales : titre et pied fixes, corps qui défile. */
.ec-modal-ov { position: fixed; inset: 0; background: rgba(18,35,58,.45); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px }
.ec-modal { background: #fff; border-radius: var(--radius-lg); box-shadow: 0 8px 32px rgba(0,0,0,.25); width: 460px; max-width: 100%; max-height: calc(100vh - 32px); display: flex; flex-direction: column }
.ec-modal-lg { width: 680px }
.ec-modal h3 { padding: 16px 20px; border-bottom: 1px solid var(--border-subtle); font: 600 14px/1.2 var(--font-sans); color: var(--text-strong) }
.ec-modal-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px }
.ec-modal-body.ec-grid-2 { display: grid }
.ec-modal-foot { padding: 12px 20px; border-top: 1px solid var(--border-subtle); display: flex; justify-content: flex-end; gap: 8px }

/* Toasts : toute action se termine par un message, réussie ou non. */
.ec-toasts { position: fixed; bottom: 20px; right: 20px; z-index: 4000; display: flex; flex-direction: column; gap: 8px; align-items: flex-end }
.ec-toast { min-width: 240px; max-width: 380px; padding: 11px 14px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border-default); border-left: 3px solid var(--brand); box-shadow: 0 4px 18px rgba(0,0,0,.16); font: 500 13px/1.4 var(--font-sans); color: var(--text-strong); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .18s, transform .18s }
.ec-toast.show { opacity: 1; transform: none }
.ec-toast-success { border-left-color: var(--ok) }
.ec-toast-error { border-left-color: var(--danger) }

/* ── Connexion ────────────────────────────────────────────────────────── */
.ec-login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px }
.ec-login-devbar { position: fixed; top: 0; left: 0; right: 0; background: var(--dev); color: #fff; font: 700 11px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; padding: 8px 4px }
.ec-login { background: #fff; border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); width: 100%; max-width: 360px; padding: 32px; display: flex; flex-direction: column }
.ec-login form { display: flex; flex-direction: column; gap: 14px }
.ec-login form .ec-btn { margin-top: 6px; height: 38px; font-weight: 600 }
.ec-login-logo { align-self: center; background: var(--sidebar); border-radius: 8px; padding: 10px 16px; margin-bottom: 24px }
.ec-login-logo b { font: 600 13px/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: #fff }
.ec-login h1 { font: 600 20px/1.2 var(--font-sans); color: var(--text-strong); text-align: center; margin-bottom: 6px }
.ec-login-sub { font-size: 13px; color: var(--text-subtle); text-align: center; margin-bottom: 22px }

/* ── Nouveau devis ────────────────────────────────────────────────────── */
.dv-page { min-height: calc(100vh - 48px); display: flex; flex-direction: column; gap: 16px }
.dv-page .ec-pagehead { margin-bottom: 0 }
.dv-head { align-items: flex-end }
.dv-head-g { display: flex; flex-direction: column; gap: 10px }
.dv-siteinfo { font-size: 13px; color: var(--text-subtle); text-align: right; line-height: 1.5 }
.dv-siteinfo b { color: var(--text-strong); font-weight: 600 }
.dv-siteinfo .dv-num { color: var(--text-strong) }
.dv-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums }
input.dv-num, select.dv-num { font-size: 13px }
input.dv-num { text-align: right }
.dv-fort { font-weight: 600; color: var(--text-strong) }
.dv-doux { color: var(--text-subtle) }

.dv-seg { display: inline-flex; flex-wrap: wrap; align-self: flex-start; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: #fff }
.dv-seg button { border: 0; border-right: 1px solid var(--border-subtle); background: transparent; padding: 0 16px; height: 36px; font: 500 13px var(--font-sans); color: var(--text-body); cursor: pointer }
.dv-seg button:last-child { border-right: 0 }
.dv-seg button:hover { background: var(--gray-25) }
.dv-seg button[aria-pressed="true"] { background: var(--sidebar); color: #fff }
.dv-seg button:focus-visible { outline-offset: -2px }

.dv-params { padding: 16px; display: grid; grid-template-columns: minmax(180px, 2fr) minmax(180px, 2fr) minmax(150px, 1.2fr) minmax(110px, 1fr) minmax(110px, 1fr) auto; gap: 14px; align-items: end; overflow: visible }
.dv-pro, .dv-plie { align-self: end; height: 36px; white-space: nowrap }

.dv-cols { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start }
.dv-gauche { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px }
.dv-mail { flex: 1 1 380px; min-width: 0 }

.dv-saisie { padding: 16px; overflow: visible }
.dv-ligne1 { display: grid; grid-template-columns: 1.3fr 1.7fr 1fr 1fr 1fr; gap: 10px; align-items: end }
.dv-ligne2 { display: grid; grid-template-columns: 100px 100px auto 120px 140px 140px; gap: 10px 14px; align-items: end; margin-top: 10px }
.dv-plis-note { margin-top: 8px }
.dv-ligne3 { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px }
.dv-aide { font-size: 12px; color: var(--text-subtle) }
.dv-apercu { margin-left: auto; font-size: 12px; color: var(--text-strong) }
kbd { font: 500 11px var(--font-mono); border: 1px solid var(--border-default); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; background: #fff; color: var(--gray-700) }
.dv-erreur { margin-top: 10px; font-size: 13px; color: var(--danger) }

.dv-table .r { text-align: right }
.dv-table th.r { text-align: right }
.dv-c-n { width: 28px; color: var(--text-subtle) }
.dv-table tr.dv-row { cursor: pointer }
.dv-table tr.sel td { background: #EAF2F8 }
.dv-table td.dv-num, .dv-table td.r { white-space: nowrap }
.dv-lien { border: 0; background: none; padding: 0; font: 600 13px var(--font-sans); color: var(--text-strong); cursor: pointer; text-align: left }
.dv-lien:hover { color: var(--brand) }
.dv-dims { font-size: 12px; color: var(--text-subtle) }
.dv-err { font-size: 12px; color: var(--danger) }
.dv-qin { width: 76px; height: 30px; padding: 0 8px }
.dv-actions { white-space: nowrap; text-align: right }
.dv-ib { width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); cursor: pointer; display: inline-flex; align-items: center; justify-content: center }
.dv-ib:hover { border-color: var(--border-default); background: #fff; color: var(--text-strong) }

.dv-detail { padding: 16px 18px }
.dv-detail-tete, .dv-mail-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px }
.dv-detail-tete { margin-bottom: 10px }
.dv-h2 { font: 600 14px/1.2 var(--font-sans); color: var(--text-strong) }
.dv-detail-grille { font-size: 12px; color: var(--text-subtle) }
.dv-dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 0; font-size: 13px }
.dv-dl dt { color: var(--gray-700) }
.dv-dl dd { text-align: right; padding-left: 24px }
.dv-dl .eq { border-top: 1px solid var(--border-default); padding-top: 4px; font-weight: 600 }

.dv-mail-tete { align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border-default) }
.dv-mail-titre { display: flex; align-items: baseline; gap: 10px }
.dv-mail-corps { padding: 18px 18px 6px; font-size: 14px }
.dv-mail-corps p { margin: 0 0 12px; line-height: 1.5 }
.dv-mail-corps ul { margin: 0 0 12px; padding-left: 20px; line-height: 1.5 }

/* Bandeau collant : poids, prix au kilo et totaux restent sous les yeux du SAV. */
.dv-tot { position: sticky; bottom: 0; z-index: 50; margin: auto -24px -24px; padding: 12px 24px; background: var(--surface-card); color: var(--text-strong); border-top: 1px solid var(--border-default); box-shadow: 0 -4px 14px rgba(18,35,58,.08); display: flex; flex-wrap: wrap; gap: 8px 36px; align-items: baseline }
.dv-tot-k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle) }
.dv-tot-v { font: 500 18px var(--font-mono); font-variant-numeric: tabular-nums }
.dv-tot-fort { font-weight: 600; color: var(--brand) }

/* Devis enregistré : titre, boutons, encart « prix figés / recalcul ». */
.dv-titre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px }
.dv-meta { font-size: 12px; color: var(--text-subtle) }
.dv-head-d { display: flex; flex-direction: column; align-items: flex-end; gap: 10px }
.dv-boutons { display: flex; gap: 8px }
.dv-encart { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: 13px; line-height: 1.45; color: var(--text-body); background: var(--gray-25) }
.dv-encart[hidden] { display: none }
.dv-encart b { color: var(--text-strong); font-weight: 600 }
.dv-encart-warn { background: #FEF7E6; border-color: #EBCB8B }

/* Historique. */
.hs-filtres { padding: 16px; display: grid; grid-template-columns: minmax(220px, 3fr) minmax(150px, 1.2fr) minmax(130px, 1fr) minmax(130px, 1fr) auto; gap: 14px; align-items: end; overflow: visible; margin-bottom: 16px }
.hs-filtres-btn { display: flex; gap: 8px }
.hs-table tr.dv-row:hover td { background: #EAF2F8 }
.dv-nowrap { white-space: nowrap }
.dv-lien-num { color: var(--text-strong); text-decoration: none }
.dv-lien-num:hover { color: var(--brand); text-decoration: underline }
.hs-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-top: 12px }
.hs-pages { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-subtle) }

@media (max-width: 1100px) {
  .dv-params { grid-template-columns: repeat(3, 1fr) }
  .hs-filtres { grid-template-columns: repeat(2, 1fr) }
  .dv-ligne1 { grid-template-columns: repeat(3, 1fr) }
  .dv-ligne2 { grid-template-columns: repeat(3, 1fr) }
}
@media (max-width: 760px) {
  .dv-params { grid-template-columns: repeat(2, 1fr) }
  .dv-ligne1, .dv-ligne2 { grid-template-columns: repeat(2, 1fr) }
  .dv-tot { margin: auto -16px -16px; padding: 10px 16px }
  .dv-siteinfo { text-align: left }
  .dv-head-d { align-items: flex-start }
  .hs-filtres { grid-template-columns: 1fr }
}

/* ── Administration : grilles, sites, produits, mails ─────────────────── */
.gr-actions-tete { display: flex; gap: 8px; flex-wrap: wrap }
.gr-choix { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px }
.gr-ligne { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.gr-ligne .ec-label { min-width: 58px }
.gr-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-default); border-radius: var(--radius-md); overflow: hidden; background: #fff }
.gr-seg a, .gr-seg button { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-right: 1px solid var(--border-subtle); background: transparent; font: 500 13px var(--font-sans); color: var(--text-body); text-decoration: none; cursor: pointer }
.gr-seg a:last-child, .gr-seg button:last-child { border-right: 0 }
.gr-seg a:hover, .gr-seg button:hover { background: var(--gray-25) }
.gr-seg a[aria-current], .gr-seg button[aria-pressed="true"] { background: var(--sidebar); color: #fff }
.gr-seg a:focus-visible, .gr-seg button:focus-visible { outline-offset: -2px }
.ml-modifiee::after { content: ' \2022'; color: #f0b429 }
.gr-portee { font-size: 12px; color: var(--text-subtle); max-width: 110ch; text-wrap: pretty }
.gr-portee b { color: var(--text-strong); font-weight: 600 }
.gr-carte { margin-bottom: 16px }
.gr-barre { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border-default) }
.gr-pied { border-bottom: 0; border-top: 1px solid var(--border-default) }
.gr-barre-g { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.gr-barre-d { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.gr-etat { font-weight: 600; color: var(--text-strong); font-size: 13px }
.gr-etat-warn { color: #9a5b00 }
.gr-aide { font-size: 12px; color: var(--text-subtle) }
.gr-filtre { width: auto; height: 32px; font-size: 13px }

.gr-scroll { overflow: auto; max-height: calc(100vh - 150px) }
.gr-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 13px }
.gr-table th, .gr-table td { border-bottom: 1px solid var(--border-subtle); border-right: 1px solid var(--border-subtle) }
.gr-table thead th { position: sticky; background: var(--gray-25); z-index: 3; font: 600 11px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); height: 30px; padding: 0 8px; white-space: nowrap }
.gr-table thead tr:first-child th { top: 0; border-bottom: 0 }
.gr-table thead tr:nth-child(2) th { top: 30px; border-bottom: 1px solid var(--border-default) }
.gr-corner { left: 0; z-index: 5 !important; min-width: 200px; text-align: left; border-right: 1px solid var(--border-default) !important }
.gr-axe { text-align: left }
.gr-fleche { font-size: 13px; letter-spacing: 0 }
.gr-colh { text-align: right; text-transform: none !important; letter-spacing: 0 !important; font: 600 12px var(--font-mono) !important; color: var(--text-strong) !important }
.gr-rowh { position: sticky; left: 0; z-index: 2; background: #fff; text-align: left; font-weight: 500; color: var(--text-strong); padding: 0 8px; min-width: 200px; white-space: nowrap; border-right: 1px solid var(--border-default) !important }
.gr-rowh .gr-x { float: right; margin-left: 10px; margin-top: 7px }
.gr-cle { font: 11px var(--font-mono); color: var(--text-subtle); margin-left: 6px }
.gr-colh .gr-x { margin-left: 4px }
.gr-x { width: 18px; height: 18px; border: 0; border-radius: 50%; background: transparent; color: var(--text-subtle); font-size: 15px; line-height: 1; cursor: pointer; opacity: 0; padding: 0 }
.gr-table th:hover .gr-x, .gr-x:focus-visible { opacity: 1 }
.gr-x:hover { background: #fde9e9; color: var(--danger) }
.gr-table td { padding: 0; background: #fff }
.gr-table tbody tr:hover td, .gr-table tbody tr:hover th { background: var(--gray-25) }
.gr-cell { display: block; width: 100%; min-width: 88px; height: 30px; border: 0; border-radius: 0; background: transparent; padding: 0 8px; text-align: right; font: 13px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-strong) }
.gr-cell:focus { outline: 2px solid var(--brand); outline-offset: -2px; background: #fff }
.gr-cell::placeholder { color: var(--gray-400) }
.gr-cell.gr-modif { background: #FEF3C7; font-weight: 600 }
.gr-cell.gr-invalide { background: #fde9e9; color: var(--danger) }

.gr-journal th.r, .gr-journal td.r { text-align: right }
.gr-comm { font-size: 11px; color: var(--text-subtle) }
.gr-import-resultat { display: flex; flex-direction: column; gap: 10px }
.gr-totaux { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px }
.gr-totaux b { font: 600 16px var(--font-mono) }
.gr-alerte b { color: var(--danger) }
.gr-diff { border: 1px solid var(--border-default); border-radius: var(--radius-md); background: #fff }
.gr-diff summary { cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: 13px }
.gr-diff-retirees summary { color: var(--danger) }
.gr-diff-scroll { max-height: 220px; overflow: auto; border-top: 1px solid var(--border-subtle) }
.gr-diff .ec-hint { padding: 6px 12px }

.ml-titre2 { margin-top: 28px }
.ml-cols { align-items: flex-start }
.ml-form-carte { flex: 1 1 480px; min-width: 0 }
.ml-apercu { flex: 1 1 420px; min-width: 0; position: sticky; top: 16px }
.ml-form { padding: 6px 16px 10px; display: flex; flex-direction: column; gap: 10px }
.ml-groupe { font: 600 11px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-subtle) }
.ml-groupe:first-child { margin-top: 4px; border-top: 0; padding-top: 0 }
textarea.ml-texte { height: auto; padding: 8px 10px; line-height: 1.4; resize: vertical }
.ml-note { padding: 0 16px 14px; margin-top: 0 }
@media (max-width: 1100px) { .ml-apercu { position: static } .gr-scroll { max-height: 70vh } }
.ec-table th.r, .ec-table td.r { text-align: right; white-space: nowrap }
.gr-axe-t { position: sticky; left: 214px }

/* ── BAT (lot E5) : éditeur, aperçu A4, BAT par commande ── */
.bt-page { display: flex; flex-direction: column; gap: 16px }
.bt-page .ec-pagehead { margin-bottom: 0 }
.bt-head { align-items: flex-end }
.bt-head-g { display: flex; flex-direction: column; gap: 10px }
.bt-head-d { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end }
.bt-client { width: 240px }
.bt-cmd { width: 190px }
.bt-cmd-in { display: flex; align-items: stretch; border: 1px solid var(--border-default); border-radius: var(--radius-sm); overflow: hidden; background: #fff; height: 36px }
.bt-cmd-in:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft) }
.bt-prefixe { display: flex; align-items: center; padding: 0 9px; background: var(--gray-50); border-right: 1px solid var(--border-default); font-size: 13px; color: var(--text-body); min-width: 30px; justify-content: center }
.bt-cmd-in input { border: 0; outline: 0; padding: 0 10px; width: 100%; min-width: 0; font-size: 14px; background: transparent; text-transform: uppercase }
.bt-cmd-in input:disabled { color: var(--gray-400) }
.bt-cols { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start }
.bt-gauche { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 16px }
.bt-droite { position: sticky; top: 16px; flex: 1.4 1 480px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px }
.bt-bloc { padding: 14px; display: flex; flex-direction: column; gap: 12px; overflow: visible }
.bt-bloc-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px }
.bt-h3 { font: 600 12px/1.2 var(--font-sans); color: var(--gray-700) }
.bt-section { display: flex; flex-direction: column; gap: 8px }
.bt-pieces { display: flex; flex-direction: column; gap: 8px }
.bt-pieceligne { display: flex; gap: 4px; align-items: center }
.bt-piece { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex: 1; min-width: 0; text-align: left; border: 1px solid var(--border-default); background: #fff; border-radius: var(--radius-md); padding: 9px 12px; cursor: pointer }
.bt-piece:hover { border-color: var(--gray-400) }
.bt-piece[aria-pressed="true"] { border-color: var(--brand); background: #EAF2F8 }
.bt-piece-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.bt-piece-t { font-weight: 600; color: var(--text-strong) }
.bt-piece-s { font-size: 12px; color: var(--text-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.bt-piece-q { font-size: 12px; color: var(--text-subtle); white-space: nowrap }
.bt-ib { width: 30px; height: 32px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-subtle); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px }
.bt-ib:hover:not(:disabled) { border-color: var(--border-default); background: #fff; color: var(--text-strong) }
.bt-ib:disabled { opacity: .35; cursor: not-allowed }
.bt-actions { display: flex; gap: 8px; flex-wrap: wrap }
.bt-grille3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px }
.bt-grille2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.bt-r { text-align: right }
.bt-pli { display: grid; grid-template-columns: 110px 1fr 1.3fr; gap: 8px; align-items: center; margin-bottom: 6px }
.bt-dec { display: grid; gap: 8px; align-items: center; margin-bottom: 8px }
.bt-dec-nom { font-size: 13px; color: var(--gray-700) }
.bt-dec .ec-input { padding: 0 8px }
.bt-dec-champ { display: flex; flex-direction: column; gap: 3px; min-width: 0 }
.bt-dec-champ span { font-size: 10px; color: var(--text-subtle) }
.bt-note { margin: 0 }
.bt-apercu-tete { display: flex; justify-content: space-between; width: 100%; max-width: 640px; font-size: 12px; color: var(--text-subtle); gap: 12px }
.bt-a4-cadre { width: 100%; max-width: 640px; position: relative; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 8px 24px rgba(18,35,58,.10); background: #fff; overflow: hidden }
.bt-a4 { position: absolute; top: 0; left: 0; transform-origin: top left }
.bt-commande { margin-bottom: 14px }
.bt-commande-tete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border-default) }
.bt-ref { font-size: 15px; font-weight: 600; color: var(--text-strong); margin-right: 8px }
.bt-filtres { grid-template-columns: minmax(220px, 3fr) minmax(150px, 1.2fr) auto }
.ec-badge-off { background: #fde9e9; color: var(--danger) }
.st-pied { display: flex; flex-wrap: wrap; gap: 4px; max-width: 120px }
.st-table th, .st-table td { padding-left: 9px; padding-right: 9px }
.st-adresse { height: auto; padding: 8px 10px; resize: vertical; font-family: var(--font-mono); font-size: 13px }
@media (max-width: 760px) { .bt-grille3 { grid-template-columns: 1fr 1fr } .bt-filtres { grid-template-columns: 1fr } }

/* Journal des actions. */
.jn-filtres { padding: 16px; display: grid; grid-template-columns: minmax(220px, 3fr) repeat(5, minmax(120px, 1fr)) auto; gap: 14px; align-items: end; overflow: visible; margin-bottom: 16px }
.jn-resume { font-size: 12px; color: var(--text-subtle) }
.jn-sous { font: 400 11px/1.3 var(--font-sans); color: var(--text-subtle) }
.jn-doux { color: var(--gray-400) }
.jn-nowrap { white-space: nowrap }
.jn-c { text-align: center }
.jn-r { text-align: right; color: var(--text-subtle) }
.jn-chemin { font: 400 11px/1.3 var(--font-mono); color: var(--text-subtle); word-break: break-all }
.jn-msg { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-subtle) }
.jn-alerte { color: var(--danger) }
@media (max-width: 1100px) {
  .jn-filtres { grid-template-columns: repeat(3, 1fr) }
  .jn-q { grid-column: 1 / -1 }
}