/* ÉlecDevis — styles écran + impression */
:root {
  --bg: #f3f5f8; --surface: #fff; --ink: #1b2430; --muted: #5f6b7a; --line: #dbe0e7;
  --accent: #1f5fbf; --accent-soft: #e4ecfa; --nav: #14202e; --nav-ink: #d8e1ec; --yellow: #f2c230;
  --ok: #2f7d32; --ok-soft: #e3f3e4; --nc: #c0392b; --nc-soft: #fbe5e2; --av: #a35a00; --av-soft: #fff1dc; --na: #6b7280; --na-soft: #eceef1;
  --r: 8px;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 15px; line-height: 1.45; }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0 0 14px; }
h2 { font-size: 1.15rem; margin: 22px 0 10px; }
.card h2 { margin-top: 0; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .r { text-align: right; } .c { text-align: center; }
.empty { color: var(--muted); text-align: center; padding: 18px; font-style: italic; }

/* Mise en page */
#app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
#nav { background: var(--nav); color: var(--nav-ink); padding: 16px 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 4px; }
#nav .brand { font-weight: 700; font-size: 1.25rem; color: #fff; padding: 4px 10px 14px; }
#nav .links { display: flex; flex-direction: column; gap: 2px; }
#nav a { color: var(--nav-ink); text-decoration: none; padding: 9px 12px; border-radius: 6px; }
#nav a:hover { background: #ffffff14; }
#nav a.active { background: var(--yellow); color: #1b2430; font-weight: 600; }
#nav a.logout { margin-top: 14px; opacity: .7; font-size: .9rem; }
#burger { display: none; }
.save-status { margin-top: auto; font-size: .8rem; padding: 8px 10px; color: #9fb3c8; }
.save-status.err { color: #ffb4a8; }
main { padding: 22px 28px 60px; max-width: 1400px; width: 100%; }

@media (max-width: 860px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  #nav { height: auto; position: sticky; z-index: 20; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px 12px; }
  #nav .brand { padding: 4px; flex: 1; }
  #burger { display: block; background: transparent; color: #fff; border: 1px solid #ffffff40; font-size: 1.2rem; }
  #nav .links { display: none; width: 100%; }
  #nav.open .links { display: flex; }
  .save-status { margin: 0; width: 100%; padding: 2px 4px; }
  main { padding: 14px 16px 60px; }
}

/* Éléments */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 14px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.toolbar h1 { margin: 0 8px 0 0; }
.sp { flex: 1; }
button, .btn { font: inherit; font-size: .92rem; cursor: pointer; border-radius: 6px; padding: 7px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; display: inline-block; white-space: nowrap; }
button:hover, .btn:hover { border-color: var(--accent); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
button.danger { color: var(--nc); border-color: #e8b7b0; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
input, select, textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; width: 100%; min-width: 0; }
textarea { resize: vertical; }
input.nb { text-align: right; width: 80px; font-variant-numeric: tabular-nums; }
input.sm, select.sm { width: 64px; }
.search { margin-bottom: 12px; max-width: 480px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filters .search { margin: 0; flex: 1; min-width: 220px; }
.filters select { width: auto; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.form label, .card > label { display: grid; gap: 4px; font-size: .84rem; color: var(--muted); margin-bottom: 0; }
.card > label + label { margin-top: 10px; }
.form .w2 { grid-column: span 2; } .form .w3 { grid-column: 1 / -1; }
.form .chk, label.chk { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: .9rem; }
.chk input { width: 18px; height: 18px; }
.inl { display: flex; gap: 6px; align-items: center; }
.inl input.nb { width: 80px; }
@media (max-width: 700px) { .form { grid-template-columns: 1fr 1fr; } .form .w2 { grid-column: 1 / -1; } }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }
.alert { background: var(--av-soft); color: var(--av); border-radius: 6px; padding: 10px 12px; margin-bottom: 14px; }
.alert.small { font-size: .86rem; padding: 7px 10px; margin-bottom: 8px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; }
.kpi b { display: block; font-size: 1.5rem; }
.kpi span { color: var(--muted); font-size: .88rem; }
.actions-big { display: flex; gap: 10px; flex-wrap: wrap; }
.actions-big button { padding: 12px 18px; font-size: 1rem; }
.steps li { margin-bottom: 6px; }

.tw { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
table.list th, table.lines th, table.pieces th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 6px 8px; border-bottom: 2px solid var(--line); white-space: nowrap; }
table.list td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.list { background: var(--surface); border-radius: var(--r); }
tr.clk { cursor: pointer; } tr.clk:hover td { background: var(--accent-soft); }
tr.grp td { background: var(--bg); font-weight: 700; color: var(--accent); padding-top: 14px; }
td.ref, .ref { font-family: Consolas, monospace; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.badge { display: inline-block; font-size: .78rem; padding: 2px 8px; border-radius: 999px; background: var(--na-soft); color: var(--na); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok); } .badge.nc { background: var(--nc-soft); color: var(--nc); }
.badge.av { background: var(--av-soft); color: var(--av); } .badge.na { background: var(--na-soft); color: var(--na); }
.st-brouillon { background: var(--na-soft); color: var(--na); } .st-envoye { background: var(--accent-soft); color: var(--accent); }
.st-accepte { background: var(--ok-soft); color: var(--ok); } .st-refuse { background: var(--nc-soft); color: var(--nc); } .st-expire { background: var(--av-soft); color: var(--av); }
.tag { font-size: .75rem; padding: 1px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.tag.t-F { background: #efe7fb; color: #6a3fb5; } .tag.t-M { background: var(--av-soft); color: var(--av); } .tag.t-P { background: var(--ok-soft); color: var(--ok); }
.legend { font-size: .85rem; color: var(--muted); }

/* Pré-visite */
.synth { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; position: sticky; top: 0; z-index: 5; }
@media (max-width: 860px) { .synth { position: static; } }
.synth .kp { background: var(--bg); border-radius: 6px; padding: 8px 12px; min-width: 120px; }
.synth .kp b { display: block; font-size: 1.2rem; } .synth .kp span { font-size: .8rem; color: var(--muted); }
.synth .kp.nc b { color: var(--nc); } .synth .kp.av b { color: var(--av); }
.synth .warns, .synth .nclist { width: 100%; font-size: .86rem; }
.synth .warns div { color: var(--av); }
.synth .nclist a { color: var(--nc); }
details.sec { padding: 0; }
details.sec > summary { cursor: pointer; padding: 12px 16px; font-weight: 700; display: flex; gap: 10px; align-items: center; list-style: none; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: '▸'; color: var(--muted); transition: transform .15s; }
details.sec[open] > summary::before { transform: rotate(90deg); }
.secstat { margin-left: auto; font-weight: 400; }
.item { display: grid; grid-template-columns: minmax(0, 1.6fr) auto minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--line); }
.item .lbl { font-size: .93rem; }
.item .info { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.item .ctl select, .item .ctl input { min-width: 200px; }
.item .com { font-size: .86rem; }
.ouv { color: var(--yellow); text-shadow: 0 0 1px #8a6d00; cursor: help; }
.etat { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.etat button { border: 0; border-radius: 0; padding: 8px 13px; font-size: 1rem; background: #fff; color: var(--muted); min-width: 42px; }
.etat button + button { border-left: 1px solid var(--line); }
.etat .e-ok.on { background: var(--ok); color: #fff; } .etat .e-nc.on { background: var(--nc); color: #fff; }
.etat .e-av.on { background: var(--av); color: #fff; } .etat .e-na.on { background: var(--na); color: #fff; }
@media (max-width: 760px) {
  .item { grid-template-columns: 1fr; gap: 6px; }
  .item .ctl select, .item .ctl input { min-width: 0; width: 100%; }
  .etat button { padding: 10px 16px; }
}
table.pieces td { padding: 4px; border-bottom: 1px solid var(--line); }
table.pieces td input:not(.nb) { min-width: 120px; }
table.pieces select { min-width: 150px; }
td.req { text-align: center; font-weight: 700; white-space: nowrap; padding: 0 6px; border-radius: 4px; }
td.req.ok { color: var(--ok); } td.req.ko { color: var(--nc); background: var(--nc-soft); }
.notes-pieces { margin-top: 12px; font-size: .86rem; } .notes-pieces summary { cursor: pointer; color: var(--accent); }
textarea.big { min-height: 110px; }

/* Devis */
table.lines td { padding: 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.lines td textarea { min-width: 280px; font-size: .9rem; }
table.lines td.tot { font-weight: 600; white-space: nowrap; padding-top: 10px; }
tr.ls td { background: var(--accent-soft); }
tr.ls input { font-weight: 700; background: transparent; border-color: transparent; }
tr.ls input:hover, tr.ls input:focus { background: #fff; border-color: var(--line); }
tr.ls td.st { font-weight: 700; color: var(--accent); white-space: nowrap; padding-top: 10px; }
tr.lt textarea { font-style: italic; }
td.mv { white-space: nowrap; }
td.mv button { padding: 4px 7px; font-size: .8rem; }
table.totals td { padding: 5px 4px; border-bottom: 1px solid var(--line); }
table.totals td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.totals tr.ttc td { font-size: 1.25rem; font-weight: 700; border-bottom: 2px solid var(--ink); }
.interne { margin-top: 14px; background: var(--bg); border-radius: 6px; padding: 10px 12px; font-size: .86rem; }
.interne div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }

/* Catalogue / sélection */
.calc { font-size: .92rem; } .calc .inl { display: inline-flex; color: var(--ink); }
.picklist { max-height: 58vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; }
.pick { display: grid; grid-template-columns: 70px minmax(0, 1fr) 60px 100px; gap: 10px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick:hover { background: var(--accent-soft); }
.pick.added { background: var(--ok-soft); }
.pick .d small { display: block; color: var(--muted); font-size: .78rem; }
.pick b { text-align: right; white-space: nowrap; }
@media (max-width: 600px) { .pick { grid-template-columns: minmax(0, 1fr) auto; } .pick .ref, .pick .u { display: none; } }
.calcres { background: var(--bg); padding: 8px 10px; border-radius: 6px; }
.logo-prev { max-height: 60px; margin-top: 6px; }

/* Règles */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.chip { border-radius: 999px; padding: 5px 12px; font-size: .85rem; }
.chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.rule p { margin: 6px 0 0; }
.reqbox { display: flex; gap: 12px; flex-wrap: wrap; }
.reqbox div { background: var(--accent-soft); color: var(--accent); padding: 8px 14px; border-radius: 6px; }
.reqbox b { font-size: 1.3rem; }

/* Fenêtre modale & toast */
.modal { position: fixed; inset: 0; background: #0f172a80; display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; z-index: 50; overflow-y: auto; }
.modal.hidden { display: none; }
.modal-box { background: var(--surface); border-radius: 10px; padding: 20px; width: 100%; max-width: 640px; box-shadow: 0 20px 50px #0004; }
.modal-box.large { max-width: 980px; }
.modal-box h2 { margin-top: 0; }
.mfoot { display: flex; gap: 8px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%) translateY(30px); background: var(--nav); color: #fff; padding: 10px 18px; border-radius: 8px; opacity: 0; transition: .2s; pointer-events: none; z-index: 60; }
#toast.show { opacity: 1; transform: translateX(-50%); }

/* Connexion */
body.login { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.login-box { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; width: 100%; max-width: 380px; display: grid; gap: 12px; }
.login-box label { display: grid; gap: 4px; font-size: .86rem; color: var(--muted); }
.brand-big { font-size: 1.6rem; font-weight: 700; }
.login-box p { margin: 0; }
.err { color: var(--nc); }

/* ================= Impression ================= */
#print { display: none; }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body { background: #fff; font-size: 9.5pt; }
  #app, #modal, #toast { display: none !important; }
  #print { display: block; }
  .p-doc { color: #000; }
  .p-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 10px; }
  .p-ent { display: flex; gap: 12px; align-items: flex-start; }
  .p-logo { max-height: 22mm; max-width: 40mm; }
  .p-nom { font-size: 13pt; font-weight: 700; }
  .p-cli { border: 1px solid #999; border-radius: 4px; padding: 8px 12px; min-width: 70mm; }
  .p-lbl { font-size: 7.5pt; text-transform: uppercase; color: #555; }
  .p-title { font-size: 15pt; font-weight: 700; margin: 8px 0 4px; border-bottom: 2px solid #000; padding-bottom: 3px; }
  .p-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1px 20px; margin-bottom: 8px; }
  .p-lines { width: 100%; border-collapse: collapse; }
  .p-lines th { background: #e8e8e8; border-bottom: 1px solid #000; padding: 4px; font-size: 8pt; text-align: left; }
  .p-lines th.r, .p-lines td.r { text-align: right; } .p-lines th.c, .p-lines td.c { text-align: center; }
  .p-lines td { padding: 3px 4px; border-bottom: 1px solid #ddd; vertical-align: top; }
  .p-lines td.r, .p-lines td.c { white-space: nowrap; }
  .p-lines tr { page-break-inside: avoid; }
  .p-ref { font-size: 7.5pt; color: #555; white-space: nowrap; }
  .p-lines tr.ps td { font-weight: 700; background: #f2f2f2; padding-top: 6px; border-bottom: 1px solid #999; }
  .p-lines tr.pst td { font-style: italic; text-align: right; border-bottom: 1px solid #999; }
  .p-lines tr.pt td { font-style: italic; color: #333; }
  .p-bottom { display: flex; gap: 16px; margin-top: 10px; page-break-inside: avoid; }
  .p-cond { flex: 1; font-size: 8.5pt; } .p-cond p { margin: 0 0 5px; }
  .p-tot { width: 78mm; border-collapse: collapse; align-self: flex-start; }
  .p-tot td { padding: 3px 4px; border-bottom: 1px solid #ccc; } .p-tot td:last-child { text-align: right; white-space: nowrap; }
  .p-tot tr.p-ttc td { font-weight: 700; font-size: 11pt; border-top: 2px solid #000; border-bottom: 2px solid #000; }
  .p-mentions { font-size: 7.8pt; color: #222; margin-top: 8px; page-break-inside: avoid; } .p-mentions p { margin: 0 0 4px; }
  .p-sign { display: flex; gap: 16px; margin-top: 10px; page-break-inside: avoid; }
  .p-sign > div { flex: 1; border: 1px solid #999; border-radius: 4px; padding: 6px 8px; min-height: 32mm; font-size: 8.5pt; }
  .p-foot { margin-top: 10px; border-top: 1px solid #999; padding-top: 4px; font-size: 7.5pt; text-align: center; color: #444; }
  .p-small { font-size: 7.5pt; color: #444; }
  .p-sec { page-break-inside: auto; margin-top: 6px; }
  .p-sec h3 { font-size: 10pt; margin: 6px 0 2px; background: #eee; padding: 2px 6px; }
  .p-cl { width: 100%; border-collapse: collapse; }
  .p-cl td, .p-cl th { border-bottom: 1px solid #ddd; padding: 2px 4px; vertical-align: top; font-size: 8.5pt; text-align: left; }
  .p-cl tr { page-break-inside: avoid; }
  .p-cl .p-v { white-space: nowrap; width: 38mm; } .p-cl .p-c { width: 55mm; }
  .p-pc td { height: 7mm; }
  .p-cb { display: inline-block; width: 6mm; height: 5mm; border: 1px solid #777; text-align: center; line-height: 5mm; margin-right: 1mm; font-size: 8pt; color: #bbb; }
  .p-cb.on { background: #000; color: #fff; border-color: #000; }
  .p-line { display: inline-block; width: 36mm; border-bottom: 1px solid #777; height: 4mm; }
  .p-notes { min-height: 30mm; border: 1px solid #ccc; padding: 4px; }
}