/* Famille « documents » : générateur de facture / devis / reçu / bon de commande, signature, code-barres, salaire. */
/* Générateur : formulaire en blocs repliables à gauche, page A4 en direct à droite (collante). */
.tool-hero:has(.docgen) { overflow: clip; } /* « hidden » empêcherait l'aperçu de rester collé */
.tool-box.docgen { display: block; max-width: 1160px; }
.docgen > * + * { margin-top: 14px; }
.doc-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; min-width: 0; }
.doc-adr { min-height: 84px; }
.doc-memo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.doc-off { display: none !important; }

.doc-bloc { border-radius: 16px; background: var(--soft); }
.doc-bloc summary { display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; list-style: none; border-radius: 16px; }
.doc-bloc summary::-webkit-details-marker { display: none; }
.doc-bloc summary b { flex: none; font: 600 17px/1.2 var(--head); letter-spacing: -.01em; color: var(--ink); }
.doc-bloc summary svg { width: 18px; height: 18px; color: var(--muted); transition: transform .3s var(--ease); }
.doc-bloc[open] summary svg { transform: rotate(180deg); }
.doc-res { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-bloc[open] .doc-res { visibility: hidden; }
.doc-corps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 16px 16px; }
.doc-plus { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 0; font-size: 14px; font-weight: 600; color: var(--red-deep); }
.doc-plus svg { width: 16px; height: 16px; }
.doc-plus:hover { text-decoration: underline; }

.doc-lignes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.doc-ligne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.doc-l1 { display: flex; align-items: center; gap: 6px; }
.doc-l1 .inp { min-width: 0; }
.doc-l2 { display: grid; grid-template-columns: 78px minmax(0, 1fr) 96px minmax(0, 1fr); gap: 8px; align-items: end; }
.doc-l2 .lab { gap: 4px; font-size: 13px; min-width: 0; }
.doc-l2 .inp { padding-left: 12px; }
.doc-l2 select.inp { padding-right: 4px; }
.doc-lt { padding-bottom: 12px; font: 600 16px/1.2 var(--head); color: var(--ink); text-align: right; white-space: nowrap; }
.docgen.sans-tva .doc-l2 { grid-template-columns: 78px minmax(0, 1fr) minmax(0, 1fr); }
.docgen.sans-tva .doc-tva, .docgen.sans-tva .doc-ht { display: none; }
.doc-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.doc-total b { font: 700 24px/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }

.doc-cote { min-width: 0; scroll-margin-top: 96px; }
.doc-colle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.doc-apercu { padding: 12px; border-radius: 16px; background: var(--soft); }
.doc-ap-t { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.doc-ap-t b { font-weight: 600; color: var(--ink); }
.doc-feuilles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 120px; }
.doc-feuilles canvas { display: block; width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(12, 12, 24, .4); }
.doc-barre { position: sticky; bottom: 10px; z-index: 4; display: grid; gap: 8px; padding: 10px; border-radius: 18px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--line), 0 18px 36px -16px rgba(12, 12, 24, .45); }
.doc-barre-b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }

@media (min-width: 960px) {
  .tool-box.docgen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .docgen > * + * { margin-top: 0; }
  .doc-colle { position: sticky; top: 96px; }
  .doc-apercu { max-height: calc(100vh - 176px); overflow-y: auto; overscroll-behavior: contain; }
  .doc-barre { display: none; }
}
@media (max-width: 959px) {
  .doc-colle > .tool-go-btn, .doc-colle > .tool-msg { display: none; }
}

.sig-apercu { min-height: 132px; padding: 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow-x: auto; }
/* Code-barres : le dessin prend toute la largeur de l'outil. */
.cb-cadre { display: grid; place-items: center; width: 100%; min-height: 200px; padding: 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cb-cadre svg { display: block; width: 100%; height: auto; max-height: 360px; stroke: none; }
.cb-vide { font-size: 15px; color: var(--muted); }
.cb-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.calc-note[data-genre="erreur"] { color: var(--red-deep); font-weight: 500; }

.sal-tab { width: 100%; border-collapse: collapse; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; font-size: 15px; }
.sal-tab th, .sal-tab td { padding: 11px 14px; text-align: right; white-space: nowrap; }
.sal-tab th:first-child { text-align: left; }
.sal-tab thead th { font-size: 13px; font-weight: 500; color: var(--muted); }
.sal-tab tbody th { font-weight: 500; color: var(--text); }
.sal-tab tbody td { font-weight: 600; color: var(--ink); }
.sal-tab tbody tr { border-top: 1px solid var(--line); }

@media (max-width: 600px) {
  .doc-l2, .docgen.sans-tva .doc-l2 { grid-template-columns: 1fr 1fr; }
  .doc-lt { padding-bottom: 0; align-self: center; }
  .docgen.sans-tva .doc-lt { grid-column: 1 / -1; }
  .cb-cadre { min-height: 150px; padding: 12px; }
  .cb-bas .acts, .cb-bas .btn { width: 100%; }
  .sal-tab th, .sal-tab td { padding: 10px; }
}