:root{--blue-dark: #203A72;--blue-bar: #6D7FB3;--ink: #111827;--muted: #6b7280;--bg: #f4f6fb;--card: #ffffff;--border: #e5e7eb}*{box-sizing:border-box}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;color:var(--ink);background:var(--bg)}.page{padding:18px;max-width:1400px;margin:0 auto}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}.brand{display:flex;gap:10px;align-items:center}.dot{width:12px;height:12px;border-radius:999px;background:var(--blue-dark);flex-shrink:0}.brandIcon{width:40px;height:40px;flex-shrink:0}.title{font-weight:800;font-size:18px}.subtitle{font-size:12px;color:var(--muted)}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 1100px){.grid2{grid-template-columns:1fr}}.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}h2{margin:0 0 12px;font-size:18px}h3{margin:16px 0 10px;font-size:14px;color:var(--muted)}@media (max-width: 640px){.page{padding:12px}.card{padding:12px;border-radius:12px}h2{font-size:16px}h3{font-size:13px}.topbar{flex-direction:column;align-items:flex-start}.brand{width:100%}.subtitle{font-size:11px}}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.formGrid label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:6px}.formGrid input{border:1px solid var(--border);border-radius:10px;padding:10px 12px;font-size:14px;outline:none;background:#fff;width:100%}.formGrid input:focus{border-color:#203a7273;box-shadow:0 0 0 3px #203a721f}.span2{grid-column:span 2}@media (max-width: 640px){.formGrid{grid-template-columns:1fr}.span2,.totalBox{grid-column:span 1}}.totalBox{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;padding:12px;border:1px dashed rgba(32,58,114,.35);border-radius:12px;background:#6d7fb31a}.totalBox span{color:var(--muted);font-size:12px}.totalBox strong{font-size:18px}.btn{border:1px solid var(--border);background:#fff;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:700;font-size:14px;transition:all .2s}.btn.primary{background:var(--blue-dark);color:#fff;border-color:transparent}.btn:hover{transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (max-width: 640px){.btn{padding:12px 16px;font-size:15px;min-height:44px}.topbar .btn{width:100%;margin-top:8px}}.hint{margin:12px 0 0;font-size:12px;color:var(--muted)}.preview{border:1px solid var(--border);border-radius:14px;padding:14px;background:#fff}@media (max-width: 640px){.preview{padding:10px}}.previewHeader{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}.previewTitle{font-size:clamp(16px,2.5vw,20px);font-weight:900;color:var(--blue-dark)}.previewNo{width:clamp(100px,20vw,160px);height:clamp(22px,3.5vw,26px);border-radius:6px;background:var(--blue-bar);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;flex-shrink:0;font-size:clamp(10px,1.5vw,14px);padding:0 8px}@media (max-width: 640px){.previewHeader{justify-content:space-between;gap:8px}}.previewMainSection{display:flex;gap:clamp(10px,2vw,14px);align-items:flex-start;margin-bottom:clamp(12px,2vw,16px)}.leftPanel{width:clamp(200px,25vw,240px);display:flex;gap:clamp(8px,1.5vw,10px);flex-shrink:0}.labels{font-size:clamp(10px,1.5vw,12px);line-height:1.9;color:#111;min-width:clamp(70px,12vw,88px)}.smallGrid{display:grid;grid-template-columns:repeat(6,1fr);width:clamp(140px,7vw,170px);height:clamp(140px,7vw,170px);border:1px solid #111;aspect-ratio:1}.cell{border:1px solid #111}.shade{background:var(--blue-bar)}.gridValues{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.gridRowValue{position:absolute;left:calc(33.333% + 4px);right:4px;font-size:clamp(8px,1.3vw,10.5px);font-weight:600;color:#111;display:flex;align-items:center;height:calc(100% / 6)}.gridRowDigits{position:absolute;width:100%;height:calc(100% / 6);display:flex;align-items:center;pointer-events:none}.gridDigit{position:absolute;font-size:clamp(8px,1.3vw,10.5px);font-weight:600;color:#111;display:flex;align-items:center;justify-content:center;transform:translate(-50%);width:calc(100% / 6);text-align:center;line-height:1;height:100%;box-sizing:border-box}.rightPanelMain{flex:1;min-width:0;overflow-wrap:break-word;word-wrap:break-word}.previewPropertySection{margin-bottom:clamp(12px,2vw,16px);padding-bottom:clamp(8px,1.5vw,12px);border-bottom:1px dotted #ccc;word-wrap:break-word;overflow-wrap:break-word}.previewBottomSection{margin-bottom:clamp(12px,2vw,16px)}.previewDatesSignature{margin-top:clamp(12px,2vw,16px);padding-top:clamp(12px,2vw,16px);border-top:1px dotted #ccc}@media (max-width: 900px){.previewMainSection{flex-direction:column;gap:12px}.leftPanel{width:100%;justify-content:center;max-width:300px;margin:0 auto}}@media (max-width: 640px){.leftPanel{max-width:250px}.previewMainSection{gap:10px}.previewDatesSignature{margin-top:12px;padding-top:12px}}@media (max-width: 480px){.preview{padding:8px}.previewHeader,.previewMainSection{margin-bottom:12px}.previewPropertySection{margin-bottom:12px;padding-bottom:8px}.leftPanel{max-width:220px;gap:6px}.labels{font-size:10px;min-width:60px}}.lineRow{display:flex;gap:clamp(6px,1.5vw,10px);align-items:flex-end;margin:clamp(6px,1vw,8px) 0;font-family:Times New Roman,Times,serif}.lbl{font-size:clamp(14px,2vw,16px);white-space:nowrap}.dotted{flex:1;border-bottom:1px dotted #111;min-height:clamp(18px,3vw,20px)}.dotted.inline{display:inline-block;min-width:clamp(80px,20vw,160px);padding:0 clamp(4px,1vw,6px)}@media (max-width: 640px){.lineRow{flex-wrap:wrap;gap:6px}.dotted.inline{min-width:100px;display:inline-block}}.bar{height:clamp(16px,2.5vw,18px);background:var(--blue-bar);border-radius:4px;margin:clamp(4px,1vw,6px) 0}.sommeBar{color:#fff;font-size:clamp(9px,1.4vw,11px);font-weight:600;display:flex;align-items:center;padding:0 clamp(4px,1vw,6px);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.smallText{font-family:Times New Roman,Times,serif;font-size:clamp(10px,1.5vw,12px);margin:clamp(6px,1vw,8px) 0;line-height:1.5}.legal{font-family:Times New Roman,Times,serif;font-size:clamp(9px,1.3vw,10.5px);margin-top:clamp(8px,1.5vw,10px);line-height:1.4}.legal ol{margin:clamp(4px,1vw,6px) 0 0 clamp(14px,2.5vw,18px);padding:0}@media (max-width: 640px){.smallText{font-size:11px}.legal{font-size:9.5px}}.signatureRow{display:flex;align-items:center;gap:clamp(6px,1.5vw,8px);flex-wrap:wrap;width:100%;font-size:clamp(10px,1.4vw,11px)}.signaturePreview{max-width:clamp(150px,25vw,200px);max-height:clamp(50px,8vw,60px);border:1px solid var(--border);border-radius:4px;background:#fff;object-fit:contain}.signaturePlaceholder{color:var(--muted);word-break:break-all;font-size:clamp(10px,1.4vw,12px)}.btnSignature{padding:clamp(4px,1vw,6px) clamp(8px,1.5vw,10px);font-size:clamp(10px,1.4vw,11px);border:1px solid var(--border);background:#fff;border-radius:6px;cursor:pointer;font-weight:600;white-space:nowrap}.btnSignature:hover{background:var(--bg)}@media (max-width: 640px){.signatureRow{flex-direction:column;align-items:flex-start;gap:8px}.signaturePreview{max-width:100%;width:100%}.btnSignature{padding:8px 12px;font-size:12px;min-height:36px;width:100%}}.signatureModal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}.signatureModalContent{background:var(--card);border-radius:16px;padding:24px;max-width:700px;width:100%;box-shadow:0 20px 60px #0000004d;display:flex;flex-direction:column;gap:20px;margin:auto}@media (max-width: 640px){.signatureModal{padding:10px}.signatureModalContent{padding:16px;border-radius:12px}}.signatureModalHeader{display:flex;align-items:center;justify-content:space-between}.signatureModalHeader h3{margin:0;font-size:20px;color:var(--ink)}.btnClose{background:none;border:none;font-size:32px;line-height:1;color:var(--muted);cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px}.btnClose:hover{background:var(--bg);color:var(--ink)}.signaturePadContainer{border:2px solid var(--border);border-radius:12px;padding:16px;background:#fff;display:flex;justify-content:center;align-items:center}.signatureCanvas{border:1px solid var(--border);border-radius:8px;cursor:crosshair;touch-action:none;background:#fff;display:block;width:100%;max-width:600px;height:auto}@media (max-width: 640px){.signatureCanvas{max-width:100%}}.signatureModalActions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.signatureModalActions .btn{min-width:100px;flex:1}@media (max-width: 640px){.signatureModalActions{flex-direction:column}.signatureModalActions .btn{width:100%}}