MALIO-DEV/DEVIS-GENERATOR
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

devis v1

Browse Source
This commit is contained in:
Matthieu
2025-10-30 10:30:27 +01:00
commit 952a43059b
3 changed files with 1752 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1162
app.js Normal file
View File

File diff suppressed because it is too large Load Diff

252
index.html Normal file
View File

@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Générateur de Devis</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header class="app-header">
<div class="brand">
<span class="logo-circle">€</span>
<h1>Générateur de Devis</h1>
</div>
<div class="actions">
<button id="saveQuoteBtn" class="btn" title="Enregistrer ce devis">Enregistrer</button>
<button id="openLibraryBtn" class="btn" title="Voir les devis enregistrés">Devis enregistrés</button>
<button id="importJsonBtn" class="btn" title="Importer un JSON">Importer JSON</button>
<button id="exportJsonBtn" class="btn" title="Exporter en JSON">Exporter JSON</button>
<button id="resetBtn" class="btn btn-secondary" title="Réinitialiser les champs">Réinitialiser</button>
<button id="printBtn" class="btn btn-primary" title="Télécharger en PDF">Télécharger PDF</button>
</div>
<input id="importJsonInput" type="file" accept="application/json" style="display:none" />
</header>
<main class="container">
<section class="panel form-panel">
<h2>Paramètres</h2>
<div class="grid two">
<div>
<label>Devise
<select id="currency">
<option value="EUR">EUR €</option>
<option value="USD">USD $</option>
<option value="GBP">GBP £</option>
<option value="CHF">CHF Fr.</option>
</select>
</label>
</div>
<div>
<label>Taux de TVA (%)
<input type="number" id="vatRate" min="0" step="0.01" value="20" />
</label>
</div>
</div>
<h3>Apparence</h3>
<div class="grid two">
<label>Modèle d'impression
<select id="printTemplate">
<option value="standard">Standard</option>
<option value="pro-minimal">Pro Minimal</option>
<option value="pro-striped">Pro Bandes</option>
<option value="compact">Compact</option>
<option value="pro-borders">Pro Bordures</option>
<option value="sidebar-accent">Bandeau Latéral</option>
<option value="centered-minimal">Minimal Centré</option>
</select>
</label>
</div>
<div class="grid two">
<div>
<h3>Votre entreprise</h3>
<label>Nom de l'entreprise
<input id="myName" type="text" placeholder="Ex: ACME SAS" />
</label>
<label>Rue et numéro
<input id="myStreet" type="text" placeholder="Ex: 10 rue de la Paix" />
</label>
<div class="grid two">
<label>Code postal
<input id="myPostcode" type="text" placeholder="75002" />
</label>
<label>Ville
<input id="myCity" type="text" placeholder="Paris" />
</label>
</div>
<label>Pays
<input id="myCountry" type="text" placeholder="France" />
</label>
<div class="grid two">
<label>Email
<input id="myEmail" type="email" placeholder="contact@exemple.com" />
</label>
<label>Téléphone
<input id="myPhone" type="tel" placeholder="+33 6 12 34 56 78" />
</label>
</div>
<label>Logo (URL ou data URI)
<input id="myLogo" type="text" placeholder="https://..." />
</label>
<label>Numéro SIREN / TVA
<input id="myLegal" type="text" placeholder="SIREN, TVA intracom..." />
</label>
</div>
<div>
<h3>Client</h3>
<label>Nom / Société
<input id="clientName" type="text" placeholder="Nom du client" />
</label>
<label>Rue et numéro
<input id="clientStreet" type="text" placeholder="Ex: 20 avenue Victor Hugo" />
</label>
<div class="grid two">
<label>Code postal
<input id="clientPostcode" type="text" placeholder="33000" />
</label>
<label>Ville
<input id="clientCity" type="text" placeholder="Bordeaux" />
</label>
</div>
<label>Pays
<input id="clientCountry" type="text" placeholder="France" />
</label>
<div class="grid two">
<label>Email
<input id="clientEmail" type="email" />
</label>
<label>Téléphone
<input id="clientPhone" type="tel" />
</label>
</div>
</div>
</div>
<h3>Détails du devis</h3>
<div class="grid three">
<label>Numéro de devis
<input id="quoteNumber" type="text" />
</label>
<label>Date du devis
<input id="quoteDate" type="date" />
</label>
<label>Valable jusqu'au
<input id="quoteValidUntil" type="date" />
</label>
</div>
<h3>Lignes</h3>
<div class="table">
<div class="table-head">
<div></div>
<div>Description</div>
<div>Temps (jours)</div>
<div>PU HT</div>
<div>Total HT</div>
<div><input id="selectAllRows" type="checkbox" title="Tout sélectionner" /></div>
</div>
<div id="items" class="table-body"></div>
</div>
<div class="actions" style="margin-top:8px; gap:8px; flex-wrap: wrap;">
<button id="addItemBtn" class="btn btn-outline">+ Ajouter une ligne</button>
<button id="addGroupBtn" class="btn btn-outline">+ Ajouter un groupe</button>
<button id="duplicateSelectedBtn" class="btn">Dupliquer sélection</button>
<button id="deleteSelectedBtn" class="btn btn-danger">Supprimer sélection</button>
</div>
<div class="grid two mt">
<label>Remise (%)
<input id="discountRate" type="number" min="0" step="0.01" value="0" />
</label>
<label>Conditions de paiement
<input id="paymentTerms" type="text" placeholder="30 jours, virement..." />
</label>
</div>
<label>Notes
<textarea id="notes" rows="3" placeholder="Informations complémentaires"></textarea>
</label>
</section>
<section class="panel preview-panel" id="printArea">
<div class="quote-header">
<div class="company">
<img id="p_myLogo" class="logo" alt="Logo" />
<div>
<div class="company-name" id="p_myName"></div>
<div class="icon-text"><span class="ico">📍</span><span class="company-address" id="p_myAddress"></span></div>
<div class="company-contact stack">
<div class="icon-text"><span class="ico">✉️</span><span id="p_myEmail"></span></div>
<div class="icon-text"><span class="ico">📞</span><span id="p_myPhone"></span></div>
</div>
<div class="icon-text"><span class="ico">🧾</span><span class="company-legal" id="p_myLegal"></span></div>
</div>
</div>
<div class="quote-meta">
<div class="quote-title">DEVIS</div>
<div class="icon-text right"><span class="ico">#</span><span><strong>N°</strong> <span id="p_quoteNumber"></span></span></div>
<div class="icon-text right"><span class="ico">📅</span><span><strong>Date</strong> <span id="p_quoteDate"></span></span></div>
<div class="icon-text right"><span class="ico">⏳</span><span><strong>Valide jusqu'au</strong> <span id="p_quoteValidUntil"></span></span></div>
</div>
</div>
<div class="client-block">
<div class="muted">Destinataire</div>
<div class="client-name" id="p_clientName"></div>
<div class="icon-text"><span class="ico">📍</span><span class="client-address" id="p_clientAddress"></span></div>
<div class="client-contact stack">
<div class="icon-text"><span class="ico">✉️</span><span id="p_clientEmail"></span></div>
<div class="icon-text"><span class="ico">📞</span><span id="p_clientPhone"></span></div>
</div>
</div>
<div class="items original">
<div class="items-head">
<div>Description</div><div>Temps (jours)</div><div>PU HT</div><div>Total HT</div>
</div>
<div id="p_items" class="items-body"></div>
</div>
<!-- Conteneur des pages imprimées, construit dynamiquement -->
<div id="printPages" class="print-pages"></div>
<div class="totals">
<div class="row"><span>Total jours</span><span id="p_totalDays"></span></div>
<div class="row"><span>Sous-total</span><span id="p_subtotal"></span></div>
<div class="row"><span>Remise</span><span id="p_discount"></span></div>
<div class="row"><span>TVA (<span id="p_vatRate"></span>%)</span><span id="p_vat"></span></div>
<div class="row grand"><span>Total TTC</span><span id="p_total"></span></div>
</div>
<div class="notes">
<div class="icon-text"><span class="ico">💳</span><span><strong>Conditions de paiement:</strong> <span id="p_paymentTerms"></span></span></div>
<div class="icon-text"><span class="ico">📝</span><span id="p_notes"></span></div>
</div>
</section>
</main>
<footer class="app-footer">
<span>Fait avec ❤️ — export PDF via impression</span>
</footer>
<!-- Modal Bibliothèque de devis -->
<div id="libraryModal" class="modal" aria-hidden="true">
<div class="modal-backdrop" data-close="1"></div>
<div class="modal-content">
<div class="modal-header">
<h3>Devis enregistrés</h3>
<button class="btn" id="closeLibraryBtn" title="Fermer">✕</button>
</div>
<div class="modal-body">
<div id="libraryEmpty" class="muted" style="display:none">Aucun devis enregistré pour l’instant.</div>
<div id="libraryList" class="library-list"></div>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

338
styles.css Normal file
View File

@@ -0,0 +1,338 @@
:root {
--bg: #0b0f14;
--panel: #121822;
--panel-2: #0f1520;
--text: #e6edf3;
--muted: #9aa7b3;
--primary: #4da3ff;
--accent: #7ee787;
--danger: #ff6b6b;
--border: #223041;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
background: linear-gradient(180deg, var(--bg), #0d1420 50%, var(--bg));
color: var(--text);
}
.app-header, .app-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
background: rgba(18,24,34,0.8);
backdrop-filter: blur(6px);
border-bottom: 1px solid var(--border);
}
.app-footer { border-top: 1px solid var(--border); border-bottom: none; justify-content: center; }
.brand { display: flex; gap: 10px; align-items: center; }
.logo-circle { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #001225; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.app-header h1 { margin: 0; font-size: 18px; }
.container {
max-width: none;
margin: 20px auto;
padding: 0 16px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.panel {
background: linear-gradient(180deg, var(--panel), var(--panel-2));
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
}
h2, h3 { margin: 8px 0 12px; }
label { display: block; font-size: 14px; color: var(--muted); margin-bottom: 10px; }
input, textarea, select {
width: 100%;
background: #0b111a;
color: var(--text);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-top: 6px;
}
input[type="date"] { padding: 8px 10px; }
.grid.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid.three { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.mt { margin-top: 12px; }
.btn { border-radius: 8px; border: 1px solid var(--border); padding: 8px 12px; cursor: pointer; color: var(--text); background: #0f1520; }
.btn:hover { filter: brightness(1.05); }
.btn-primary { background: var(--primary); color: #001225; border-color: #2b6bbf; font-weight: 700; }
.btn-secondary { background: #0f1520; }
.btn-outline { background: transparent; border-style: dashed; }
.btn-danger { background: #201014; border-color: #4a1e27; color: #ffd7d7; }
.actions { display: flex; gap: 8px; }
.table { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.table-head, .table-row {
display: grid; grid-template-columns: 40px 2fr 80px 120px 120px 120px; gap: 8px; align-items: center;
}
.table-row { align-items: start; }
.table-head { background: #0d1420; padding: 10px; color: var(--muted); font-size: 13px; border-bottom: 1px solid var(--border); }
.table-body { display: grid; gap: 8px; padding: 10px; }
.table-row { background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }
.table-row input { margin: 0; }
.table-row textarea.desc { margin: 0; min-height: 64px; resize: vertical; }
/* Drag & drop affordances */
.table-row.dragging { opacity: 0.6; }
.table-row.placeholder { border: 2px dashed var(--border); background: rgba(34, 48, 65, 0.35); min-height: 48px; }
.drag-ghost { box-shadow: 0 8px 24px rgba(0,0,0,0.45); border: 1px solid var(--border); background: #0b111a; opacity: 0.9; padding: 8px; border-radius: 8px; }
/* Actions cell */
.row-actions { display: flex; gap: 6px; align-items: center; justify-content: flex-end; }
.drag-handle {
width: 28px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
border-radius: 6px;
background: #0f1520;
color: var(--muted);
cursor: grab;
}
.drag-handle:active { cursor: grabbing; }
.drag-handle:focus { outline: none; }
.row-actions input[type="checkbox"] { transform: translateY(1px); }
/* Group rows in editor */
.table-row.group .group-title,
.table-row.group .group-desc { grid-column: 2 / span 4; }
.table-row.group .group-title { font-weight: 600; background: #0b111a; border: 1px dashed var(--border); border-radius: 6px; padding: 8px 10px; }
.table-row.group .group-desc { background: #0b111a; border: 1px dashed var(--border); border-radius: 6px; padding: 6px 10px; color: var(--muted); }
.table-row.group .row-actions { grid-column: 6; grid-row: 1 / span 2; align-self: start; }
.items-body .items-row.group-title { display: grid; grid-template-columns: 1fr; background: #0d1420; font-weight: 700; padding: 8px 10px; color: var(--text); border-left: 3px solid var(--accent); text-align: left; }
.items-body .items-row.group-title div { justify-content: flex-start; }
.items-body .items-row.group-description { display: grid; grid-template-columns: 1fr; padding: 8px 10px; color: var(--muted); background: transparent; }
.items-body .items-row.group-description div { justify-content: flex-start; }
.items-body .items-row.group-subtotal { display: grid; grid-template-columns: 1fr auto; padding: 8px 10px; border-top: 1px dashed var(--border); }
.row-total { text-align: right; padding-right: 6px; color: var(--text); }
/* Preview styles */
.quote-header { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 12px; margin-bottom: 12px; }
.company { display: flex; gap: 12px; align-items: flex-start; }
.logo { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; border: 1px solid var(--border); background: #0b111a; }
.company-name { font-weight: 700; font-size: 18px; }
.company-address, .company-contact, .company-legal { color: var(--muted); font-size: 13px; }
.company-contact.stack { display: grid; gap: 4px; }
.quote-title { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }
.quote-meta { text-align: right; display: grid; gap: 4px; justify-items: end; }
.client-block { background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 12px; }
.client-name { font-weight: 600; }
.client-address, .client-contact { color: var(--muted); font-size: 13px; }
.client-contact.stack { display: grid; gap: 4px; }
.items { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.items-head, .items-row { display: grid; grid-template-columns: 2fr 80px 120px 120px; gap: 8px; }
.items-head { background: #0d1420; color: var(--muted); padding: 10px; font-size: 13px; border-bottom: 1px solid var(--border); }
.items-body .items-row { padding: 10px; border-bottom: 1px dashed var(--border); }
.items-body .items-row:last-child { border-bottom: none; }
.items-row div { display: flex; align-items: center; min-width: 0; }
.items-row div:last-child { justify-content: flex-end; }
/* Ensure long description wraps and doesn't overflow horizontally */
.items-row div:first-child {
white-space: pre-wrap; /* preserve newlines, allow wrapping */
overflow-wrap: anywhere; /* break long words/URLs if needed */
word-break: break-word; /* extra safety for legacy engines */
}
/* Prevent grid inputs from forcing overflow in the editor table */
.table-row input { min-width: 0; }
.totals { margin-top: 12px; padding: 10px; border: 1px solid var(--border); border-radius: 8px; background: #0b111a; max-width: 420px; margin-left: auto; }
.totals .row { display: flex; justify-content: space-between; padding: 6px 0; }
.totals .grand { font-size: 18px; font-weight: 800; color: var(--accent); border-top: 1px dashed var(--border); margin-top: 6px; padding-top: 8px; }
.notes { margin-top: 12px; color: var(--muted); }
/* Icon rows */
.icon-text { display: inline-flex; align-items: center; gap: 8px; }
.icon-text.right { justify-content: flex-end; }
.ico { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; filter: grayscale(0.3); opacity: 0.9; }
/* Print pagination scaffolding */
.print-pages { display: none; }
.print-page { margin-top: 12px; }
.page-footer { color: var(--muted); font-size: 12px; text-align: right; margin-top: 8px; }
@media (max-width: 980px) {
.container { grid-template-columns: 1fr; }
}
/* Print styles */
@media print {
@page { margin: 12mm; }
/* Neutral, pro palette for print */
:root {
--bg: #ffffff;
--panel: #ffffff;
--panel-2: #ffffff;
--text: #000000;
--muted: #333333;
--primary: #000000;
--accent: #000000;
--danger: #000000;
--border: #222222;
}
body { background: #fff !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.app-header, .form-panel, .app-footer, #resetBtn, #addItemBtn { display: none !important; }
.container { margin: 0; padding: 0; max-width: none; }
.preview-panel { border: none !important; background: #fff !important; }
.panel, .client-block, .items, .totals { box-shadow: none !important; background: #fff !important; border-color: #222 !important; }
.company-address, .company-contact, .company-legal, .client-address, .client-contact { color: #000 !important; }
.quote-title { color: #000 !important; }
/* Basculer vers une table par page */
.items.original { display: none !important; }
.print-pages { display: block !important; }
.print-page { margin-top: 0 !important; page-break-after: always; break-after: page; }
.print-page:last-child { page-break-after: auto; break-after: auto; }
.items-body .items-row { break-inside: avoid-page; page-break-inside: avoid; }
/* Hide original totals/notes; they are re-inserted into last printed page */
.preview-panel > .totals, .preview-panel > .notes { display: none !important; }
.totals, .notes { break-inside: avoid-page; page-break-inside: avoid; }
/* Table look */
.items { border-color: #222 !important; }
.items-head { background: #f2f2f2 !important; color: #000 !important; border-bottom: 1px solid #222 !important; }
.items-body .items-row { border-bottom: 1px solid #e0e0e0; }
.items-body .items-row:last-child { border-bottom: none; }
.row-total { color: #000 !important; }
/* Group blocks: left accent in black and left-aligned titles */
.items-body .items-row.group-title { background: #fff !important; border-left: 3px solid #000 !important; color: #000 !important; }
.items-body .items-row.group-description { color: #000 !important; }
.items-body .items-row.group-subtotal { border-top: 1px solid #222 !important; font-weight: 600; }
.page-footer { color: #000 !important; }
}
/* ===== Templates d'impression ===== */
/* Pro Minimal: lignes fines, pas de cadres, look très sobre */
body[data-template="pro-minimal"] .preview-panel .items,
body[data-template="pro-minimal"] .print-page .items { border: none; }
body[data-template="pro-minimal"] .preview-panel .items-head,
body[data-template="pro-minimal"] .print-page .items-head { background: transparent; color: var(--text); border-bottom: 2px solid var(--border); }
body[data-template="pro-minimal"] .preview-panel .items-body .items-row,
body[data-template="pro-minimal"] .print-page .items-body .items-row { border-bottom: 1px solid var(--border); background: transparent; }
body[data-template="pro-minimal"] .preview-panel .client-block { background: transparent; border-style: solid; }
body[data-template="pro-minimal"] .preview-panel .totals { background: transparent; }
@media print {
body[data-template="pro-minimal"] .items { border: none !important; }
body[data-template="pro-minimal"] .items-head { background: transparent !important; color: #000 !important; border-bottom: 2px solid #000 !important; }
body[data-template="pro-minimal"] .items-body .items-row { background: transparent !important; border-bottom: 1px solid #e0e0e0 !important; }
body[data-template="pro-minimal"] .client-block, body[data-template="pro-minimal"] .totals { background: transparent !important; }
}
/* Pro Bordures: cadres nets et totaux accentués */
body[data-template="pro-borders"] .preview-panel .client-block,
body[data-template="pro-borders"] .preview-panel .items,
body[data-template="pro-borders"] .preview-panel .totals,
body[data-template="pro-borders"] .print-page .items,
body[data-template="pro-borders"] .print-page .totals { border-width: 2px; border-style: solid; border-color: var(--border); background: #0b111a; }
body[data-template="pro-borders"] .preview-panel .items-head,
body[data-template="pro-borders"] .print-page .items-head { background: #0d1420; border-bottom: 2px solid var(--border); }
body[data-template="pro-borders"] .items-body .items-row { border-bottom: 1px solid var(--border); }
body[data-template="pro-borders"] .items-body .items-row:last-child { border-bottom: none; }
body[data-template="pro-borders"] .items-body .items-row.group-title { border-left: 4px solid var(--accent); background: #0d1420; }
body[data-template="pro-borders"] .items-body .items-row.group-subtotal { background: #0f1520; border-top: 2px solid var(--border); font-weight: 700; }
@media print {
body[data-template="pro-borders"] .client-block,
body[data-template="pro-borders"] .items,
body[data-template="pro-borders"] .totals { border-color: #000 !important; background: #fff !important; }
body[data-template="pro-borders"] .items-head { background: #f2f2f2 !important; border-bottom-color: #000 !important; }
body[data-template="pro-borders"] .items-body .items-row { border-bottom: 1px solid #e0e0e0 !important; }
body[data-template="pro-borders"] .items-body .items-row.group-title { border-left: 4px solid #000 !important; background: #fff !important; }
body[data-template="pro-borders"] .items-body .items-row.group-subtotal { background: #fff !important; border-top: 2px solid #000 !important; }
}
/* Bandeau Latéral: bande verticale d'accent à gauche */
body[data-template="sidebar-accent"] .preview-panel,
body[data-template="sidebar-accent"] .print-page { position: relative; padding-left: 14px; }
body[data-template="sidebar-accent"] .preview-panel::before,
body[data-template="sidebar-accent"] .print-page::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); opacity: 0.9;
}
body[data-template="sidebar-accent"] .items-body .items-row.group-title { border-left: 0; background: transparent; font-weight: 800; }
@media print {
body[data-template="sidebar-accent"] .print-page::before { background: #000 !important; }
}
/* Minimal Centré: entête centré, table légère */
body[data-template="centered-minimal"] .quote-header { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
body[data-template="centered-minimal"] .quote-meta { text-align: center; justify-items: center; }
body[data-template="centered-minimal"] .icon-text.right { justify-content: center; }
body[data-template="centered-minimal"] .ico { display: none; }
body[data-template="centered-minimal"] .preview-panel .items,
body[data-template="centered-minimal"] .print-page .items { border: none; }
body[data-template="centered-minimal"] .preview-panel .items-head,
body[data-template="centered-minimal"] .print-page .items-head { background: transparent; border-bottom: 2px solid var(--border); }
body[data-template="centered-minimal"] .items-body .items-row { background: transparent; border-bottom: 1px dashed var(--border); }
@media print {
body[data-template="centered-minimal"] .items-head { border-bottom-color: #000 !important; }
body[data-template="centered-minimal"] .items-body .items-row { border-bottom: 1px solid #e0e0e0 !important; }
}
/* Pro Bandes: alternance de bandes sur les lignes */
body[data-template="pro-striped"] .preview-panel .items-body .items-row:nth-child(even),
body[data-template="pro-striped"] .print-page .items-body .items-row:nth-child(even) { background: rgba(255,255,255,0.035); }
@media print {
body[data-template="pro-striped"] .items-body .items-row:nth-child(even) { background: #f7f7f7 !important; }
}
/* Compact: paddings et tailles réduites pour tenir plus */
body[data-template="compact"] .preview-panel .items-head,
body[data-template="compact"] .preview-panel .items-body .items-row,
body[data-template="compact"] .print-page .items-head,
body[data-template="compact"] .print-page .items-body .items-row { padding: 6px 8px; }
body[data-template="compact"] .preview-panel,
body[data-template="compact"] .print-page { font-size: 13px; }
@media print {
body[data-template="compact"] .items-head,
body[data-template="compact"] .items-body .items-row { padding: 6px 8px !important; }
}
/* Autocomplete */
.ac-list {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 50;
background: #0b111a;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,0.35);
max-height: 220px;
overflow: auto;
display: none;
}
.ac-item { padding: 8px 10px; cursor: pointer; font-size: 14px; }
.ac-item + .ac-item { border-top: 1px dashed var(--border); }
.ac-item:hover, .ac-item.active { background: #0d1420; }
/* Modal (bibliothèque de devis) */
.modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; z-index: 100; }
.modal[aria-hidden="false"] { display: flex; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(2px); }
.modal-content { position: relative; width: min(760px, 96vw); max-height: 86vh; overflow: auto; background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: 0 16px 48px rgba(0,0,0,0.45); }
.modal-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 12px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.modal-body { padding: 6px; }
.library-list { display: grid; gap: 8px; }
.library-item { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; align-items: center; background: #0b111a; border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.library-item .meta { color: var(--muted); font-size: 12px; }
.library-item .title { font-weight: 600; }
.library-item .btn { padding: 6px 10px; }