body {
   font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   background-color: #f8f9fa;
   margin: 0;
   padding: 40px 20px; 
   color: #212529; 
   font-size: 14px; 
   line-height: 1.6;
   -webkit-font-smoothing: antialiased; 
   -moz-osx-font-smoothing: grayscale; 
 }

 * {
   box-sizing: border-box;
 }
 
 /* bnt et chargement */ 
 #facture-container {
      max-width: 1000px;
      margin: 0 auto;
    }
    
    button {
	  position: sticky;
	  top: 32px;
      margin: 20px auto;
      padding: 12px 25px;
      font-size: 16px;
      background-color: #3498db;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
    }
    
    button:hover {
      background-color: #2980b9;
      transform: translateY(-2px);
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    
    #loading {
      text-align: center;
      padding: 20px;
      font-family: 'Roboto', sans-serif;
    }

 /* Container */
 .facture-document {
   max-width: 840px; 
   margin: 0 auto;
   padding: 50px; 
   border-radius: 8px; 
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); 
   background-color: #fff; 
   border: 1px solid #e9ecef; 
 }

 /* Top et info  */
 .invoice-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 40px;
   padding-bottom: 25px;
   border-bottom: 1px solid #e9ecef; 
   gap: 40px;
 }

 /* details */
 .company-details {
   flex: 1;
 }

 .company-logo {
   font-size: 26px;
   font-weight: 700; 
   color: #4A90E2;
   margin-bottom: 12px;
   line-height: 1.2;
 }

 .company-name {
   font-weight: 500;
   font-size: 15px;
   margin-bottom: 8px;
 }

 .company-address p {
   margin: 0 0 4px 0;
   font-size: 13px;
   color: #6c757d; 
   line-height: 1.5;
 }

 /* Info */
 .invoice-client-details {
   flex-basis: 40%; 
   display: flex;
   flex-direction: column;
   gap: 25px; 
 }

 .info-box-header {

   color: #6c757d; 
   font-weight: 500;
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-bottom: 10px;
   border-bottom: 1px solid #e9ecef; 
   padding-bottom: 5px;
   text-align: left; 
 }

 .info-box-content {
   padding: 0;
 }

 .info-box-content .info-label {
   font-weight: 400; 
   color: #6c757d; 
   font-size: 13px;
   margin-bottom: 3px;
   display: block;
 }

 .info-box-content .info-value {
   font-weight: 500; 
   font-size: 14px;
   color: #212529; 
   margin-bottom: 12px;
   display: block;
 }

 .info-box-content .info-value:last-child {
   margin-bottom: 0;
 }

 .invoice-main-title {
   font-size: 22px;
   font-weight: 600; 
   color: #343a40; 
   margin-bottom: 35px;
   text-align: left;
 }

 /* Table */
 .items-table {
   border-collapse: collapse;
   width: 100%;
   margin-bottom: 40px;
 }

 .items-table th {

   color: #6c757d; 
   font-weight: 500; 
   text-align: left;
   padding: 12px 15px; 
   font-size: 12px;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   border-bottom: 2px solid #dee2e6; 
 }

 .items-table td {
   padding: 15px; 
   border-bottom: 1px solid #e9ecef; 
   vertical-align: top;
   font-size: 14px;
   color: #343a40; 
 }


 .items-table th, .items-table td {
   border-left: none;
   border-right: none;
 }

 .items-table {
   border: none;
 }

 /* Column  */
 .items-table th:nth-child(2), .items-table td.col-quantity { text-align: center; } /* Quantity */
 .items-table th:nth-child(3), .items-table td.col-price { text-align: right; } /* Unit Price */
 .items-table th:nth-child(4), .items-table td.col-total { text-align: right; } /* Total */


 .items-table td.col-description { width: auto; } /* Let description take available space */
 .items-table td.col-quantity { width: 10%; }
 .items-table td.col-price { width: 18%; }
 .items-table td.col-total { width: 18%; }


 /* 6. total */
 .invoice-bottom {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-top: 40px;
   gap: 50px; 
 }


 .payment-notes {
   flex-basis: 60%;

   font-size: 13px;
   color: #6c757d;
   line-height: 1.7;
 }
 .payment-notes p {
   margin: 0 0 10px 0;
 }
 .payment-notes strong {
   color: #343a40; 
   font-weight: 500;
 }


 .totals-section {
   flex-basis: 35%;
   text-align: right;
 }

 .total-line {
   display: flex;
   justify-content: space-between;
   padding: 8px 0; 

 }

 .total-line .total-label {
   font-weight: 400; 
   color: #6c757d; 
   padding-right: 15px;
   font-size: 14px;
 }

 .total-line .total-value {
   font-weight: 500; 
   color: #212529; 
   font-size: 14px;
 }


 .total-line.grand-total {

   padding-top: 15px;
   margin-top: 10px;
   border-top: 2px solid #dee2e6; 
   font-weight: 600; 
   font-size: 16px; 
 }

 .total-line.grand-total .total-label,
 .total-line.grand-total .total-value {
   color: #212529; 
   font-weight: 600;
 }


 .vat-disclaimer {
   font-size: 12px;
   color: #adb5bd; 
   margin-top: 15px;
   text-align: right;
   line-height: 1.4;
 }

 /* Footer */
 .footer {
   text-align: center;
   margin-top: 50px;
   padding-top: 25px;
   border-top: 1px solid #e9ecef; 
   font-size: 12px;
   color: #adb5bd; 
 }

 .footer p {
   margin: 5px 0;
 }