:root { --ac: #E42454; --or: #F0602F; }

/* ---- Layout générateur ---- */
.doc-layout { display: grid; grid-template-columns: 410px 1fr; gap: 1.4rem; max-width: 1280px; margin: 0 auto; padding: 1.4rem; align-items: start; }

#form { display: flex; flex-direction: column; gap: .65rem; }
#form > label { display: flex; flex-direction: column; gap: .25rem; font-size: .76rem; color: var(--ink2); }
#form input, #form select { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; color: var(--ink); padding: .42rem .5rem; font-size: .84rem; }
#form input:focus, #form select:focus { outline: none; border-color: var(--ac); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.seg { display: flex; gap: .3rem; }
.seg button { flex: 1; background: var(--bg3); border: 1px solid var(--line); color: var(--ink2); padding: .45rem; border-radius: 6px; cursor: pointer; font-size: .82rem; }
.seg button.active { background: var(--ac); color: #fff; border-color: var(--ac); }
.mode { display: flex; gap: .3rem; }
.mode button { flex: 1; background: var(--bg3); border: 1px solid var(--line); color: var(--ink2); padding: .42rem; border-radius: 6px; cursor: pointer; font-size: .8rem; font-weight: 600; }
.mode button.active { background: var(--or); color: #fff; border-color: var(--or); }
.truck-tool { background: var(--bg3); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .35rem; }
.truck-tool .tt-title { font-size: .78rem; color: var(--ink); }
.truck-tool .tt-row { display: flex; gap: .4rem; align-items: flex-end; }
.truck-tool .tt-row label { flex: 1; display: flex; flex-direction: column; gap: .15rem; font-size: .68rem; color: var(--ink2); }
.truck-tool .tt-row input { padding: .35rem; }
.truck-tool .tt-hint { font-size: .66rem; color: var(--ink2); }
.ln.variable { border-left-color: var(--or); }
#truck-add { background: var(--or); color: #fff; border: 0; border-radius: 5px; padding: .4rem .55rem; cursor: pointer; font-size: .73rem; white-space: nowrap; }
.remise-row { display: flex; gap: .3rem; }
.remise-row input { flex: 1; min-width: 0; }
.remise-row .ghost { padding: .3rem .5rem; }

/* surbrillance du bloc en cours de remplissage */
.fsec { transition: border-color .15s ease, opacity .15s ease; }
.fsec:focus-within { border-color: var(--ac); box-shadow: 0 0 0 1px var(--ac); }
#sections:focus-within .fsec:not(:focus-within) { opacity: .45; }
.topnav { display: flex; gap: .5rem; }
.reset-btn { background: transparent; border: 1px solid var(--line); color: var(--ink2); padding: .45rem; border-radius: 6px; cursor: pointer; font-size: .76rem; width: 100%; }
.reset-btn:hover { color: var(--ac); border-color: var(--ac); }
.acompte-row { flex-direction: row !important; align-items: center; gap: .5rem !important; color: var(--ink2); font-size: .8rem; }
.ac-quick { display: flex; align-items: center; gap: .3rem; }
.ac-quick input { width: 56px; }
.ac-quick .ghost { padding: .28rem .45rem; }
.dp-acompte { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd; }
.dp-acompte .l { display: flex; justify-content: space-between; padding: 4px 0; color: #6b6b73; font-size: 12px; }
.dp-acompte .l .v { color: var(--ac); font-weight: 700; }
.dp-acompte .l span:last-child { color: #1b1b1f; }
.check { flex-direction: row !important; align-items: center; gap: .5rem !important; font-size: .78rem; color: var(--ink2); }
.check input { accent-color: var(--ac); }

.client-row { display: flex; gap: .4rem; }
.client-row select { flex: 1; }
.client-row .ghost { width: 38px; }
.client-edit { display: flex; flex-direction: column; gap: .4rem; background: var(--bg3); border: 1px solid var(--line); border-radius: 7px; padding: .5rem; }
.newcli { font-size: .76rem; color: var(--ink2); }
.newcli summary { cursor: pointer; }
.newcli input { margin-top: .4rem; width: 100%; }

/* ---- sections ---- */
.fsec { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: .5rem; display: flex; flex-direction: column; gap: .4rem; }
.fsec.drag-over { border-color: var(--ac); }
.fsec-head { display: flex; gap: .35rem; align-items: center; }
.fsec-head .shandle { cursor: grab; color: #5a626c; padding: 0 .15rem; }
.fsec-head .sname { flex: 2; min-width: 0; } .fsec-head .sdates { flex: 1.2; min-width: 0; }
.fsec-head .del { flex: none; background: none; border: 1px solid var(--line); border-radius: 5px; color: var(--ink2); cursor: pointer; font-size: .85rem; padding: .3rem .4rem; }
.fsec-head .del:hover { color: var(--ac); border-color: var(--ac); }
.sdesc { font-size: .74rem; }
.lines { display: flex; flex-direction: column; gap: .3rem; }

.ln { background: var(--bg); border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: 6px; padding: .25rem .3rem; }
.ln.filled { border-left-color: #4a5560; }
.ln.variable { border-left-color: var(--ac); }
.ln.drag-over { border-color: var(--ac); }
.ln .r1 { display: grid; grid-template-columns: 13px 1fr 40px 50px 15px 16px 13px; gap: .25rem; align-items: center; }
.ln .r1 input[type=text], .ln .r1 input:not([type]) { padding: .28rem .35rem; font-size: .78rem; }
.ln .r1 input[type=number] { padding: .28rem .2rem; font-size: .76rem; text-align: right; }
.ln .r1 input { min-width: 0; }
.ln .handle { cursor: grab; color: #555c66; font-size: .8rem; text-align: center; user-select: none; }
.ln .dtoggle, .ln .x { background: none; border: 0; color: #6a727c; cursor: pointer; font-size: .82rem; padding: 0; }
.ln .dtoggle.on { color: var(--ac); }
.ln .x:hover { color: var(--ac); }
.ln .off { accent-color: var(--ac); }
.ln .l-desc { width: 100%; margin-top: .28rem; padding: .26rem .35rem; font-size: .72rem; color: var(--ink2); }
.ln.lnote { display: flex; align-items: center; gap: .3rem; padding: .3rem; }
.ln.lnote .l-note { flex: 1; font-style: italic; font-size: .76rem; }

.fsec-actions { display: flex; gap: .3rem; }
button.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink2); padding: .3rem .5rem; border-radius: 6px; cursor: pointer; font-size: .73rem; }
button.ghost:hover { color: var(--ink); border-color: var(--ink2); }
.tva-row { flex-direction: row !important; align-items: center; gap: .5rem !important; color: var(--ink2); font-size: .8rem; }
.actions { display: flex; gap: .5rem; margin-top: .4rem; }
.actions #save { flex: 1; background: var(--ac); border: 0; color: #fff; padding: .55rem; border-radius: 6px; cursor: pointer; font-weight: 600; }
.save-msg { font-size: .78rem; color: var(--ok); min-height: 1rem; }

/* ---- Le document (aperçu + impression) ---- */
.doc-preview { background: #fff; color: #1b1b1f; padding: 50px 54px; position: relative;
  font-family: "Helvetica Neue", Arial, sans-serif; font-size: 12px; line-height: 1.5;
  box-shadow: 0 6px 40px rgba(0,0,0,.4); min-height: 1000px; }
.doc-preview:before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--ac); }
.dp-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dp-brand { display: flex; gap: 13px; align-items: center; }
.dp-brand img { width: 48px; height: 48px; }
.dp-brand .n { font-weight: 800; font-size: 18px; }
.dp-brand .a { font-size: 10.5px; color: #6b6b73; line-height: 1.5; margin-top: 2px; }
.dp-dest { text-align: right; font-size: 11.5px; color: #6b6b73; max-width: 240px; }
.dp-dest .who { font-weight: 700; color: #1b1b1f; font-size: 13.5px; margin-bottom: 3px; }
.dp-dest .adr { white-space: pre-line; }
.dp-title { display: flex; justify-content: space-between; align-items: baseline; margin: 34px 0 4px; }
.dp-title h1 { font-size: 28px; font-weight: 300; }
.dp-title h1 b { color: var(--ac); font-weight: 700; }
.dp-title .meta { font-size: 11.5px; color: #6b6b73; text-align: right; }
.dp-title .meta b { color: #1b1b1f; }
.dp-rule { height: 1px; background: #e6e6ea; margin: 16px 0 24px; }
.dp-sec { margin-bottom: 20px; }
.dp-sec h2 { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ac); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dp-sec h2:before { content: ""; width: 14px; height: 2px; background: var(--ac); }
.dp-dates { font-size: 10.5px; color: #9a9aa2; margin: 0 0 8px 22px; }
.dp-sec table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 11px; }
.dp-sec th { text-align: left; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: #9a9aa2; padding: 0 0 7px; font-weight: 600; }
.dp-sec th.r, .dp-sec td.r { text-align: right; white-space: nowrap; }
.dp-sec th:nth-child(2), .dp-sec td:nth-child(2) { width: 8%; padding-left: 10px; }
.dp-sec th:nth-child(3), .dp-sec td:nth-child(3) { width: 16%; padding-left: 14px; }
.dp-sec th:nth-child(4), .dp-sec td:nth-child(4) { width: 17%; padding-left: 14px; }
.dp-sec td { padding: 8px 0; border-top: 1px solid #f0f0f3; vertical-align: top; }
.dp-desc { color: #8a8a92; font-size: 10.5px; margin-top: 3px; line-height: 1.45; }
.dp-orange td { color: var(--or); font-weight: 700; }
.dp-orange .dp-desc { color: var(--or); font-weight: 600; }
.dp-desc.sm { font-size: 9.5px; font-style: italic; }
.dp-sdesc { font-size: 10.5px; color: #6b6b73; margin: 2px 0 10px 22px; line-height: 1.45; }
.dp-sec .offert { color: var(--ac); font-weight: 600; }
.dp-sec .strike { color: #b5b5bc; text-decoration: line-through; font-weight: 400; }
.dp-note td { color: #8a8a92; font-style: italic; font-size: 10.5px; padding: 8px 0; border-top: 1px dashed #eee; }
.dp-subtot { text-align: right; font-size: 11px; color: #6b6b73; padding: 8px 0 0; }
.dp-subtot b { color: #1b1b1f; }
.dp-tot { width: 300px; margin-left: auto; margin-top: 22px; font-size: 12.5px; }
.dp-tot .l { display: flex; justify-content: space-between; padding: 5px 0; color: #6b6b73; }
.dp-tot .l span:last-child { color: #1b1b1f; }
.dp-tot .ttc { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--ac); font-weight: 700; font-size: 16px; }
.dp-tot .ttc .v { color: var(--ac); }
.dp-estim { text-align: right; color: var(--ac); font-size: 11px; font-style: italic; margin-top: 18px; }
.dp-foot { margin-top: 48px; border-top: 1px solid #e6e6ea; padding-top: 12px; font-size: 8.5px; color: #9a9aa2; text-align: center; line-height: 1.8; }

@media print {
  body { background: #fff; }
  .no-print, .topbar { display: none !important; }
  .doc-layout { display: block; padding: 0; max-width: none; }
  .doc-preview { box-shadow: none; padding: 12mm 16mm; min-height: auto; }
  .dp-sec, .dp-tot { break-inside: avoid; page-break-inside: avoid; }
  tr { break-inside: avoid; }
  @page { margin: 0; size: A4; }
}