| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Facture Pièces Auto Pro</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Montserrat', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .invoice-container { |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); |
| border-radius: 12px; |
| overflow: hidden; |
| background: white; |
| } |
| |
| .header-gradient { |
| background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%); |
| } |
| |
| .payment-card { |
| background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); |
| border-radius: 10px; |
| position: relative; |
| overflow: hidden; |
| border: 1px solid #e5e7eb; |
| } |
| |
| .item-row:hover { |
| background-color: #f9fafb; |
| } |
| |
| .total-section { |
| border-top: 2px dashed #e5e7eb; |
| border-bottom: 2px dashed #e5e7eb; |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%); |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 6px rgba(37, 99, 235, 0.1); |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 12px rgba(37, 99, 235, 0.15); |
| } |
| |
| .btn-secondary { |
| background: white; |
| border: 1px solid #e5e7eb; |
| transition: all 0.3s ease; |
| } |
| |
| .btn-secondary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
| border-color: #d1d5db; |
| } |
| |
| .edit-icon { |
| transition: all 0.3s ease; |
| } |
| |
| .edit-icon:hover { |
| color: #2563eb; |
| transform: scale(1.1); |
| } |
| |
| .signature-stamp { |
| position: relative; |
| display: inline-block; |
| } |
| |
| .stamp { |
| position: absolute; |
| width: 120px; |
| height: 120px; |
| border: 4px solid #b91c1c; |
| border-radius: 50%; |
| opacity: 0.9; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| color: #b91c1c; |
| font-weight: bold; |
| font-size: 14px; |
| transform: rotate(15deg); |
| right: -20px; |
| top: -20px; |
| background-color: rgba(255, 255, 255, 0.95); |
| pointer-events: none; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); |
| } |
| |
| .stamp:before { |
| content: ""; |
| position: absolute; |
| top: 5px; |
| left: 5px; |
| right: 5px; |
| bottom: 5px; |
| border: 2px dashed #b91c1c; |
| border-radius: 50%; |
| opacity: 0.7; |
| } |
| |
| .mask-card-number { |
| font-family: monospace; |
| letter-spacing: 1px; |
| font-size: 16px; |
| font-weight: 500; |
| } |
| |
| .invoice-paper { |
| background: white; |
| position: relative; |
| } |
| |
| .watermark { |
| position: absolute; |
| opacity: 0.03; |
| font-size: 120px; |
| font-weight: bold; |
| color: #1e40af; |
| transform: rotate(-30deg); |
| top: 40%; |
| left: 20%; |
| z-index: 0; |
| pointer-events: none; |
| } |
| |
| .form-control { |
| border: 1px solid #e5e7eb; |
| border-radius: 8px; |
| padding: 0.5rem 0.75rem; |
| transition: border-color 0.3s; |
| } |
| |
| .form-control:focus { |
| outline: none; |
| border-color: #2563eb; |
| box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); |
| } |
| |
| .toggle-switch { |
| position: relative; |
| display: inline-block; |
| width: 50px; |
| height: 24px; |
| } |
| |
| .toggle-switch input { |
| opacity: 0; |
| width: 0; |
| height: 0; |
| } |
| |
| .toggle-slider { |
| position: absolute; |
| cursor: pointer; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: #e5e7eb; |
| transition: .4s; |
| border-radius: 24px; |
| } |
| |
| .toggle-slider:before { |
| position: absolute; |
| content: ""; |
| height: 16px; |
| width: 16px; |
| left: 4px; |
| bottom: 4px; |
| background-color: white; |
| transition: .4s; |
| border-radius: 50%; |
| } |
| |
| input:checked + .toggle-slider { |
| background-color: #1e40af; |
| } |
| |
| input:checked + .toggle-slider:before { |
| transform: translateX(26px); |
| } |
| |
| |
| .pdf-hide { |
| display: none; |
| } |
| |
| .pdf-content { |
| display: block; |
| } |
| |
| .signature-preview { |
| max-height: 80px; |
| max-width: 200px; |
| border: 1px dashed #d1d5db; |
| margin-top: 10px; |
| } |
| |
| .signature-upload { |
| display: none; |
| } |
| |
| .card-logo { |
| height: 30px; |
| margin-right: 10px; |
| } |
| |
| .billing-mode-tabs { |
| display: flex; |
| border-bottom: 1px solid #e5e7eb; |
| margin-bottom: 1rem; |
| } |
| |
| .billing-mode-tab { |
| padding: 0.5rem 1rem; |
| cursor: pointer; |
| border-bottom: 2px solid transparent; |
| } |
| |
| .billing-mode-tab.active { |
| border-bottom-color: #1e40af; |
| color: #1e40af; |
| font-weight: 500; |
| } |
| |
| .billing-mode-content { |
| display: none; |
| } |
| |
| .billing-mode-content.active { |
| display: block; |
| } |
| |
| @media print { |
| .no-print, .pdf-hide { |
| display: none !important; |
| } |
| |
| body, .invoice-container { |
| background: white; |
| box-shadow: none; |
| } |
| |
| .watermark { |
| display: none; |
| } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 py-10 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-5xl mx-auto"> |
| |
| <div class="flex justify-between items-center mb-8 no-print"> |
| <div> |
| <h1 class="text-3xl font-bold text-gray-800">Facturation AutoPro</h1> |
| <p class="text-gray-600">Générateur de factures professionnelles</p> |
| </div> |
| <div class="flex space-x-4"> |
| <button id="printBtn" class="btn-secondary px-4 py-2 rounded-lg font-medium flex items-center"> |
| <i class="fas fa-print mr-2"></i> Imprimer |
| </button> |
| <button id="pdfBtn" class="btn-primary px-4 py-2 rounded-lg text-white font-medium flex items-center"> |
| <i class="fas fa-file-pdf mr-2"></i> Générer PDF |
| </button> |
| </div> |
| </div> |
| |
| |
| <div class="bg-white p-6 rounded-xl shadow-sm mb-6 no-print"> |
| <h3 class="font-bold text-lg text-gray-800 mb-4">Paramètres de la facture</h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Numéro de facture</label> |
| <input type="text" id="customInvoiceNumber" class="form-control w-full" value="AUTO2023-001"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Date de facture</label> |
| <input type="date" id="customInvoiceDate" class="form-control w-full"> |
| </div> |
| <div class="flex items-center"> |
| <label class="block text-gray-700 text-sm font-medium mr-4">Cachet de signature</label> |
| <label class="toggle-switch"> |
| <input type="checkbox" id="stampToggle" checked> |
| <span class="toggle-slider"></span> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="invoice-container bg-white mb-8" id="invoice"> |
| <div class="invoice-paper"> |
| |
| <div class="watermark pdf-hide">FACTURE</div> |
| |
| |
| <div class="header-gradient px-10 py-8 text-white"> |
| <div class="flex justify-between items-start"> |
| <div> |
| <div class="flex items-center mb-2"> |
| <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNhciI+PHBhdGggZD0iTTE0IDE2SDlhMiAyIDAgMCAxLTItMnYtM2EyIDIgMCAwIDEgMi0yaDl2NGEyIDIgMCAwIDEtMiAyWiIvPjxwYXRoIGQ9Ik0xOSAxNmgxYTIgMiAwIDAgMCAyLTJ2LTNhMiAyIDAgMCAwLTItMmgxWiIvPjxwYXRoIGQ9Ik0zIDloMTJ2N0gzeiIvPjxwYXRoIGQ9Im05IDkgMiAyIi8+PC9zdmc+" |
| alt="Logo" class="h-10 w-10 mr-3 pdf-hide"> |
| <div> |
| <h2 class="text-3xl font-bold">FACTURE</h2> |
| <p class="text-blue-100 text-sm">Pièces automobiles professionnelles</p> |
| </div> |
| </div> |
| <p class="text-blue-100">N° <span id="invoiceNumber">AUTO2023-<span id="invoiceCounter">001</span></span></p> |
| </div> |
| <div class="text-right"> |
| <p class="font-medium">Date: <span id="invoiceDate">10/07/2023</span></p> |
| <p class="text-blue-100">Échéance: <span id="dueDate">17/07/2023</span></p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 px-10 py-8 border-b"> |
| |
| <div> |
| <div class="flex justify-between items-center mb-3 pdf-hide"> |
| <h3 class="font-bold text-gray-700 text-lg">Vendeur</h3> |
| <select id="sellerSelect" class="form-control text-sm"> |
| <option value="1">AutoPro Paris</option> |
| <option value="2">MécaDiscount Lyon</option> |
| <option value="3">Pièces Auto Marseille</option> |
| <option value="4">Personnalisé...</option> |
| </select> |
| </div> |
| <div id="sellerInfo"> |
| <p class="font-bold text-gray-800 text-lg" id="sellerName">AutoPro Paris</p> |
| <p class="text-gray-600" id="sellerAddress">25 Avenue des Champs-Élysées, 75008 Paris</p> |
| <p class="text-gray-600" id="sellerContact">Tél: 01 45 78 92 10 | SIRET: 123 456 789 00015</p> |
| <p class="text-gray-600" id="sellerEmail">contact@autopro-paris.fr</p> |
| <p class="text-gray-600 mt-2" id="sellerDirector">Directeur: M. Jean DUPONT</p> |
| </div> |
| |
| |
| <div id="sellerEditForm" class="hidden mt-4 bg-gray-50 p-4 rounded-lg pdf-hide"> |
| <div class="grid grid-cols-1 gap-3"> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Nom de l'entreprise</label> |
| <input type="text" id="editSellerName" class="form-control w-full" value="AutoPro Paris"> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Adresse</label> |
| <input type="text" id="editSellerAddress" class="form-control w-full" value="25 Avenue des Champs-Élysées, 75008 Paris"> |
| </div> |
| <div class="grid grid-cols-2 gap-3"> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Téléphone</label> |
| <input type="text" id="editSellerPhone" class="form-control w-full" value="01 45 78 92 10"> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">SIRET</label> |
| <input type="text" id="editSellerSiret" class="form-control w-full" value="123 456 789 00015"> |
| </div> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Email</label> |
| <input type="email" id="editSellerEmail" class="form-control w-full" value="contact@autopro-paris.fr"> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Directeur</label> |
| <input type="text" id="editSellerDirector" class="form-control w-full" value="M. Jean DUPONT"> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Texte cachet</label> |
| <input type="text" id="editStampText" class="form-control w-full" value="LE DIRECTEUR"> |
| </div> |
| <div class="flex justify-end space-x-2 mt-2"> |
| <button id="cancelSellerEdit" class="btn-secondary px-3 py-1 rounded-lg text-sm">Annuler</button> |
| <button id="saveSellerEdit" class="btn-primary px-3 py-1 rounded-lg text-white text-sm">Enregistrer</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex justify-between items-center mb-3 pdf-hide"> |
| <h3 class="font-bold text-gray-700 text-lg">Client</h3> |
| <button id="editClientBtn" class="text-gray-500 hover:text-blue-500 edit-icon"> |
| <i class="fas fa-edit"></i> Modifier |
| </button> |
| </div> |
| <div id="clientInfo"> |
| <div class="font-bold text-gray-800 text-lg" id="clientName">M. Pierre MARTIN</div> |
| <div class="text-gray-600" id="clientAddress">12 Rue de la République, 69001 Lyon</div> |
| <div class="text-gray-600" id="clientContact">Tél: 06 12 34 56 78</div> |
| <div class="text-gray-600" id="clientEmail">pierre.martin@example.com</div> |
| </div> |
| |
| |
| <div id="clientEditForm" class="hidden mt-4 bg-gray-50 p-4 rounded-lg pdf-hide"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-3"> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Civilité</label> |
| <select id="editClientTitle" class="form-control w-full"> |
| <option value="M.">M.</option> |
| <option value="Mme">Mme</option> |
| <option value="Mlle">Mlle</option> |
| <option value="Société">Société</option> |
| </select> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Nom</label> |
| <input type="text" id="editClientLastName" class="form-control w-full" value="MARTIN"> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Prénom</label> |
| <input type="text" id="editClientFirstName" class="form-control w-full" value="Pierre"> |
| </div> |
| <div class="mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Téléphone</label> |
| <input type="text" id="editClientPhone" class="form-control w-full" value="06 12 34 56 78"> |
| </div> |
| <div class="col-span-2 mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Adresse</label> |
| <input type="text" id="editClientAddress" class="form-control w-full" value="12 Rue de la République, 69001 Lyon"> |
| </div> |
| <div class="col-span-2 mb-3"> |
| <label class="block text-gray-700 text-sm font-medium mb-1">Email</label> |
| <input type="email" id="editClientEmail" class="form-control w-full" value="pierre.martin@example.com"> |
| </div> |
| </div> |
| <div class="flex justify-end space-x-2 mt-2"> |
| <button id="cancelClientEdit" class="btn-secondary px-3 py-1 rounded-lg text-sm">Annuler</button> |
| <button id="saveClientEdit" class="btn-primary px-3 py-1 rounded-lg text-white text-sm">Enregistrer</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-10 py-6 border-b pdf-hide"> |
| <h3 class="font-bold text-gray-700 text-lg mb-4">Méthode de paiement</h3> |
| <div class="grid grid-cols-1 gap-4"> |
| <div class="payment-card p-5"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between mb-4"> |
| <div class="mb-3 md:mb-0"> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Type de carte</label> |
| <div class="flex items-center"> |
| <img id="cardLogo" src="https://upload.wikimedia.org/wikipedia/commons/5/5e/Visa_Inc._logo.svg" class="card-logo"> |
| <select id="cardType" class="form-control"> |
| <option value="VISA">VISA</option> |
| <option value="Mastercard">Mastercard</option> |
| <option value="CB">Carte Bleue</option> |
| <option value="American Express">American Express</option> |
| </select> |
| </div> |
| </div> |
| <div class="w-full md:w-2/3"> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Numéro de carte</label> |
| <input type="text" id="cardNumber" class="form-control w-full mask-card-number" |
| placeholder="1234 5678 9012 3456" maxlength="19" value="1234 5678 9012 3456"> |
| <p class="text-sm text-gray-500 mt-1">Paiement par Carte Bancaire: <span id="cardDisplay">1234 56XX XXXX 3456</span></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-10 py-6"> |
| <h3 class="font-bold text-gray-700 text-lg mb-6">Détails de la facture</h3> |
| |
| |
| <div class="billing-mode-tabs pdf-hide"> |
| <div class="billing-mode-tab active" data-tab="manual">Mode Manuel</div> |
| <div class="billing-mode-tab" data-tab="auto">Mode Automatique</div> |
| </div> |
| |
| |
| <div id="manualBillingMode" class="billing-mode-content active"> |
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead> |
| <tr class="text-left border-b text-gray-600"> |
| <th class="pb-3 font-medium">Désignation</th> |
| <th class="pb-3 font-medium text-right">Qté</th> |
| <th class="pb-3 font-medium text-right">P.U. HT</th> |
| <th class="pb-3 font-medium text-right">TVA</th> |
| <th class="pb-3 font-medium text-right">Total HT</th> |
| <th class="pb-3 font-medium text-right pdf-hide"></th> |
| </tr> |
| </thead> |
| <tbody id="invoiceItems"> |
| |
| </tbody> |
| </table> |
| </div> |
| |
| |
| <div class="mt-6 pdf-hide"> |
| <button id="addItemBtn" class="btn-secondary px-4 py-2 rounded-lg font-medium flex items-center"> |
| <i class="fas fa-plus mr-2"></i> Ajouter une pièce |
| </button> |
| </div> |
| |
| |
| <div id="addItemForm" class="hidden mt-6 bg-gray-50 p-5 rounded-lg pdf-hide"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Pièce automobile</label> |
| <select id="itemPreset" class="form-control w-full"> |
| <option value="">Sélectionner une pièce</option> |
| <option value="Plaquettes de frein avant">Plaquettes de frein avant</option> |
| <option value="Plaquettes de frein arrière">Plaquettes de frein arrière</option> |
| <option value="Disques de frein">Disques de frein</option> |
| <option value="Kit courroie distribution">Kit courroie distribution</option> |
| <option value="Filtre à air">Filtre à air</option> |
| <option value="Filtre à huile">Filtre à huile</option> |
| <option value="Filtre habitacle">Filtre habitacle</option> |
| <option value="Batterie">Batterie</option> |
| <option value="Ampoule phare">Ampoule phare</option> |
| <option value="Pneu">Pneu</option> |
| <option value="Rétroviseur">Rétroviseur</option> |
| <option value="Essuie-glace">Essuie-glace</option> |
| <option value="custom">Personnalisé...</option> |
| </select> |
| </div> |
| <div id="customItemContainer" class="hidden"> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Désignation personnalisée</label> |
| <input type="text" id="itemCustomDesignation" class="form-control w-full" placeholder="Description de la pièce"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Modèle véhicule</label> |
| <input type="text" id="itemVehicle" class="form-control w-full" placeholder="Ex: Peugeot 308"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Référence</label> |
| <input type="text" id="itemReference" class="form-control w-full" placeholder="Ex: PB308-FA"> |
| </div> |
| </div> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-5 mt-4"> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Quantité</label> |
| <input type="number" id="itemQuantity" class="form-control w-full" value="1" min="1"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Prix unitaire HT</label> |
| <input type="number" id="itemPrice" class="form-control w-full" placeholder="0,00" step="0.01" min="0"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">TVA</label> |
| <select id="itemVat" class="form-control w-full"> |
| <option value="20">20%</option> |
| <option value="10">10%</option> |
| <option value="5.5">5,5%</option> |
| <option value="0">0%</option> |
| </select> |
| </div> |
| <div class="flex items-end"> |
| <button id="cancelAddItem" class="btn-secondary px-3 py-2 rounded-lg mr-2 w-full">Annuler</button> |
| <button id="confirmAddItem" class="btn-primary px-3 py-2 rounded-lg text-white w-full">Ajouter</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="autoBillingMode" class="billing-mode-content pdf-hide"> |
| <div class="bg-gray-50 p-5 rounded-lg"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-5"> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Total TTC</label> |
| <input type="number" id="autoTotalTTC" class="form-control w-full" placeholder="0,00" step="0.01" min="0"> |
| </div> |
| <div> |
| <label class="block text-gray-700 text-sm font-medium mb-2">Nombre de lignes</label> |
| <select id="autoLineCount" class="form-control w-full"> |
| <option value="1">1 ligne</option> |
| <option value="2">2 lignes</option> |
| <option value="3" selected>3 lignes</option> |
| <option value="4">4 lignes</option> |
| <option value="5">5 lignes</option> |
| </select> |
| </div> |
| </div> |
| <div class="mt-4"> |
| <button id="generateAutoItems" class="btn-primary px-4 py-2 rounded-lg text-white font-medium w-full"> |
| Générer les lignes de facturation |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="px-10 py-8 total-section"> |
| <div class="flex justify-end"> |
| <div class="w-full md:w-1/2"> |
| <div class="grid grid-cols-2 gap-3 text-gray-700"> |
| <div class="text-right">Total HT:</div> |
| |
| </html> |
