body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f4f4f9;
    margin: 0;
    padding: 20px;
}


h1 {
    color: #333;
    text-align: center;
}

input {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
      background-color: white;
      color: black;
      border: 3;
       border-radius: 5px;
}

input:hover {
       background-color: white;
}

       
 #result {
            margin-top: 20px;
 }

.button-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 20px;
    max-width: 600px;
    margin: 20px auto;  
}



button {
    padding: 30px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;  
    
}


/* Couleurs pastels pour chaque bouton */
.btn1 {
    background-color: #FFB3BA; /* Rose pastel */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */
}

.btn2 {
    background-color: #FFDFBA; /* Orange pastel */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */
}

.btn3 {
    background-color: #FFFFBA; /* Jaune pastel */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */
}

.btn4 {
    background-color: #BAFFC9; /* Vert pastel */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */
}

.btn5 {
    background-color: #BAE1FF; /* Bleu pastel */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */
}

.btn6 {
    background-color: #D9BAFF; /* Violet pastel */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */    
}

/* Effet de survol */
button:hover {
    opacity: 0.8;
}

/* Bouton Retour */
.back-button-container {
    max-width: 600px;
    margin: 20px auto;
    display: flex;
    justify-content: center;
}

.back-button {
    background-color: #cccccc;
    padding: 10px 40px;
    font-size: 18px;
}

/* Style du bouton */
.scan-button {
    background-color: #4CAF50; /* Couleur de fond */
    color: white; /* Couleur du texte */
    padding: 30px 40px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour effet 2D */
    transition: background-color 0.3s ease;
}

/* Style de l'icône */
.scan-icon {
    margin-right: 10px; /* Espace entre l'icône et le texte */
    font-size: 20px; /* Taille de l'icône */
}

/* Style de l'image */
.scan-image {
    width: 50px; /* Largeur de l'image */
    height: 50px; /* Hauteur de l'image */
    margin-right: 10px; /* Espace entre l'image et le texte */
}

/* Effet hover */
.scan-button:hover:not(:disabled) {
    background-color: #45a049;
    opacity: 1; /* override du button:hover global */
}

.scan-button:disabled {
    background-color: #aaaaaa;
    cursor: not-allowed;
    opacity: 0.6;
}


/* =============================================================================
   Utilitaires communs (inline styles migrés)
   ============================================================================= */

.mb-16 { margin-bottom: 16px; }

.save-indicator { font-size: 0.85em; font-weight: bold; min-width: 90px; }

.hint-text { color: #7f8c8d; font-size: 0.85em; }

.text-muted-sm { color: #7f8c8d; margin-left: 8px; }

.btn-teal { background: #16a085; color: white; }
.btn-teal:hover { background: #138d75; }

.label-bold { font-weight: bold; display: block; margin-bottom: 8px; }
.text-danger { color: #e74c3c; }
.text-muted-italic { color: #7f8c8d; font-style: italic; }

.input-num-sm {
    width: 90px;
    padding: 8px 10px;
    font-size: 1em;
    border: 2px solid #ccc;
    border-radius: 7px;
    text-align: center;
}

.input-num-xs {
    width: 80px;
    padding: 8px 10px;
    font-size: 1em;
    border: 2px solid #ccc;
    border-radius: 7px;
    text-align: center;
}

.flex-row-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flex-row-wrap-mb { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }

.scan-card-padded { padding: 16px; }

/* page-wrap variantes */
.page-wrap-xl { max-width: 1100px; margin: 0 auto; }
.page-wrap-xl-left { max-width: 1100px; margin: 0 auto; text-align: left; }

/* PDF list scrollable (gestion_zrapport) */
.pdf-list-scroll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
    max-height: 160px;
    overflow-y: auto;
}

.pdf-list-item {
    padding: 6px 10px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
    font-size: 0.88em;
    color: #2c3e50;
}

/* Vue CSV (tableau de données) */
.csv-view-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
}

.csv-view-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.table-scroll-wrap {
    overflow-x: auto;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 16px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82em;
}

/* En-têtes de tableau colorés */
.th-green {
    background: #27ae60;
    color: white;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #1e8449;
}

.th-blue {
    background: #2980b9;
    color: white;
    padding: 8px 10px;
    text-align: center;
    white-space: nowrap;
    border: 1px solid #2471a3;
}

.td-cell {
    padding: 6px 10px;
    border: 1px solid #e0e0e0;
    white-space: nowrap;
}

/* =============================================================================
   gestion_zrapport.php
   ============================================================================= */

.page-wrap { max-width: 900px; margin: 0 auto; }

.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px 24px;
    margin-bottom: 16px;
}

.card h3 {
    margin: 0 0 14px 0;
    font-size: 1em;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

.msg-box {
    padding: 12px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 0.95em;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.msg-box.success { background: #eafaf1; border-left: 5px solid #27ae60; color: #1e8449; }
.msg-box.error   { background: #fdf2f2; border-left: 5px solid #e74c3c; color: #922b21; }
.msg-box.warning { background: #fef9e7; border-left: 5px solid #f39c12; color: #7d6608; }

/* Onglets */
.tabs { display: flex; gap: 0; margin-bottom: 0; }
.tab-panel { border-radius: 0 10px 10px 10px; }
.tab-btn {
    padding: 11px 28px;
    border: none;
    cursor: pointer;
    font-size: 0.95em;
    font-weight: bold;
    background: #e8ecf0;
    color: #555;
    border-radius: 10px 10px 0 0;
    border: 1px solid #ddd;
    border-bottom: none;
    margin-right: 4px;
    transition: background 0.2s;
}
.tab-btn.active { background: white; color: #2c3e50; border-bottom: 1px solid white; }
.tab-btn:hover:not(.active) { background: #d5dce3; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Formulaire */
.form-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.form-row label { font-weight: bold; min-width: 230px; }

.z-input {
    width: 110px;
    padding: 9px 12px;
    font-size: 1em;
    border: 2px solid #ccc;
    border-radius: 7px;
    text-align: center;
}
.z-input:focus { border-color: #2980b9; outline: none; }

/* Table saisie banque */
.banque-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.banque-table th {
    background: #f0f4f8;
    padding: 8px 10px;
    text-align: center;
    font-size: 0.9em;
    border: 1px solid #ddd;
}
.banque-table td { padding: 6px 8px; border: 1px solid #eee; }
.banque-table input[type="text"],
.banque-table input[type="date"] {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 0.9em;
    box-sizing: border-box;
}
.banque-table input:focus { border-color: #2980b9; outline: none; }

.del-row-btn {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 0.85em;
}
.del-row-btn:hover { background: #c0392b; }

.add-row-btn {
    background: #2980b9;
    color: white;
    border: none;
    border-radius: 7px;
    padding: 9px 18px;
    cursor: pointer;
    font-size: 0.9em;
    margin-bottom: 14px;
}
.add-row-btn:hover { background: #2471a3; }

.csv-btn {
    display: inline-block;
    background: #27ae60;
    color: white;
    padding: 9px 18px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 0.9em;
}
.csv-btn:hover { background: #229954; }

.info-note {
    background: #eaf4fd;
    border-left: 4px solid #2980b9;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.88em;
    color: #2c3e50;
    margin-bottom: 14px;
}

/* =============================================================================
   affiche_base.php
   ============================================================================= */

.config-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 24px;
    max-width: 700px;
    margin: 0 auto 20px auto;
}
.config-card h2 {
    margin: 0 0 20px 0;
    font-size: 1.25em;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.field-group { margin-bottom: 14px; }
.field-group label {
    display: block;
    font-size: 0.85em;
    color: #7f8c8d;
    margin-bottom: 4px;
    font-weight: bold;
}
.field-group input {
    width: 100%;
    padding: 9px 12px;
    font-size: 0.95em;
    border: 2px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.field-group input:focus { border-color: #2980b9; outline: none; }
.section-title {
    font-size: 0.8em;
    color: #2980b9;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 20px 0 10px 0;
    font-weight: bold;
}
.alert {
    padding: 12px 16px;
    border-radius: 6px;
    margin-bottom: 16px;
    font-size: 0.95em;
}
.alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error   { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.alert-warning { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }
.btn-save {
    background: #27ae60;
    color: white;
    padding: 12px 28px;
    border: none;
    border-radius: 7px;
    font-size: 1em;
    cursor: pointer;
    margin-top: 10px;
}
.btn-save:hover { background: #229954; }
.nav-row {
    max-width: 700px;
    margin: 0 auto 16px auto;
}
.num-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 24px;
    max-width: 900px;
    margin: 0 auto 20px auto;
    overflow-x: auto;
}
.num-card h2 {
    margin: 0 0 16px 0;
    font-size: 1.25em;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}
.num-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88em;
}
.num-table th {
    background: #2980b9;
    color: white;
    padding: 6px 4px;
    text-align: center;
    font-weight: bold;
}
.num-table th.year-col { text-align: left; padding-left: 10px; color: white; }
.num-table td { padding: 4px 3px; text-align: center; }
.num-table input[type=number] {
    width: 44px;
    padding: 5px 3px !important;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    box-sizing: border-box;
}
.num-table input[type=number]:focus { border-color: #2980b9; outline: none; }
.num-empty { color: #aaa; font-style: italic; font-size: 0.9em; padding: 12px 0; }
.btn-save-num {
    background: #2980b9;
    color: white;
    padding: 10px 24px;
    border: none;
    border-radius: 7px;
    font-size: 0.95em;
    cursor: pointer;
    margin-top: 14px;
}
.btn-save-num:hover { background: #2471a3; }
.num-year-cell { font-weight: bold; color: #2980b9; padding-left: 10px; }

/* =============================================================================
   gestion_ticket.php
   ============================================================================= */

/* page-wrap étendu pour les tickets (max-width plus large) */
.page-wrap-xl { max-width: 1100px; margin: 0 auto; }

.pdf-list { display: flex; flex-direction: column; gap: 8px; max-height: 440px; overflow-y: auto; }
.pdf-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #f8f9fa;
    border-radius: 6px;
    border-left: 4px solid #e74c3c;
    font-size: 0.9em;
    color: #2c3e50;
}
.pdf-empty { color: #7f8c8d; font-style: italic; padding: 12px 0; }

/* z-input pour tickets (légèrement différent) */
.z-input-sm {
    width: 90px;
    padding: 9px 12px;
    font-size: 1em;
    border: 2px solid #ccc;
    border-radius: 7px;
    text-align: center;
}
.z-input-sm:focus { border-color: #2980b9; outline: none; }

/* Tableau résultats tickets */
.result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8em;
    margin-top: 10px;
}
.result-table th {
    background: #f0f4f8;
    padding: 6px 8px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #ddd;
    white-space: nowrap;
}
.result-table td {
    padding: 5px 8px;
    text-align: right;
    border: 1px solid #eee;
}
.result-table td.left { text-align: left; }
.result-table tr:nth-child(even) { background: #f9f9f9; }

.csv-btn-ticket {
    display: inline-block;
    margin-top: 12px;
    background: #27ae60;
    color: white;
    padding: 10px 22px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 0.95em;
}
.csv-btn-ticket:hover { background: #229954; }

/* Vue CSV tickets */
.csv-view-wrap-xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* =============================================================================
   scanner_facture_mail.php
   ============================================================================= */

.scan-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 20px 24px;
    margin-bottom: 16px;
}
.scan-card h3 {
    margin: 0 0 16px 0;
    font-size: 1em;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* Stepper */
.stepper { display: flex; align-items: center; margin: 20px 0 24px 0; }
.step { display: flex; align-items: center; gap: 8px; font-size: 0.95em; color: #aaa; }
.step.active { color: #2980b9; font-weight: bold; }
.step.done   { color: #27ae60; }
a.step.done  { cursor: pointer; text-decoration: none; }
a.step.done:hover .step-circle { background: #1e8449; }
.step-circle {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: #ddd;
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 0.9em; flex-shrink: 0;
}
.step.active .step-circle { background: #2980b9; }
.step.done   .step-circle { background: #27ae60; }
.step-line { flex: 1; height: 3px; background: #ddd; margin: 0 10px; }
.step-line.done { background: #27ae60; }

/* Liste des fichiers */
.file-list { display: flex; flex-direction: column; gap: 10px; }
.file-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #bdc3c7;
    gap: 12px;
}
.file-item.pdf { border-color: #e74c3c; }
.file-item.doc { border-color: #2980b9; }
.file-icon { font-size: 1.5em; flex-shrink: 0; }
.file-name { flex: 1; font-weight: bold; color: #2c3e50; word-break: break-all; }
.file-size { font-size: 0.8em; color: #7f8c8d; white-space: nowrap; }
.file-empty { text-align: center; padding: 30px; color: #7f8c8d; font-style: italic; }
.file-dir { font-size: 0.8em; color: #7f8c8d; margin-top: 6px; word-break: break-all; }

/* Grille mois */
.mois-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mois-grid button {
    padding: 12px 6px; font-size: 0.88em;
    background: #f0f4f8; border: 2px solid transparent;
    border-radius: 7px; cursor: pointer; transition: all 0.2s; box-shadow: none;
}
.mois-grid button:hover  { background: #BAE1FF; border-color: #2980b9; opacity: 1; }
.mois-grid button.active { background: #BAE1FF; border-color: #2980b9; font-weight: bold; }

/* Champ texte */
.input-nom {
    width: 100%; padding: 10px 14px; font-size: 1em;
    border: 2px solid #ccc; border-radius: 7px;
    box-sizing: border-box; transition: border-color 0.2s;
}
.input-nom:focus { border-color: #2980b9; outline: none; }

/* Aperçu fichier */
.file-preview {
    background: #f0f4f8; border-radius: 7px;
    padding: 12px 16px; margin: 14px 0;
    font-size: 1em; color: #2c3e50;
    display: flex; align-items: center; gap: 10px;
}
.file-preview span { font-weight: bold; color: #2980b9; }

/* Viewer PDF */
.pdf-viewer-wrap { background: #f0f4f8; border-radius: 8px; overflow: hidden; margin-bottom: 16px; }

/* Disposition step 2 */
.step2-layout { display: flex; flex-direction: column; gap: 16px; }
.step2-form { display: flex; gap: 20px; flex-wrap: wrap; }
.step2-form .scan-card { flex: 1; min-width: 260px; }
.nav-btns { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }

/* =============================================================================
   scanapi.php
   ============================================================================= */

.scan-card-sm {
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    padding: 20px 28px;
    max-width: 620px;
    margin: 16px auto;
    text-align: left;
}
.scan-card-sm h3 {
    margin: 0 0 14px 0;
    font-size: 1em;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}
.info-file { font-size: 1.25em; font-weight: bold; color: #2c3e50; margin-bottom: 6px; }
.info-path { font-size: 0.85em; color: #7f8c8d; word-break: break-all; }
.param-row {
    display: flex; align-items: center;
    gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.param-row label { min-width: 110px; font-weight: bold; color: #444; }
.param-row select { flex: 1; padding: 7px 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 0.95em; }
#scannerStatus { font-size: 0.85em; }
#actions {
    max-width: 620px; margin: 20px auto;
    display: flex; gap: 12px; flex-wrap: nowrap; align-items: stretch;
}
#actions button {
    padding: 12px 22px;
    font-size: 1em;
    margin-top: 0;
    flex: 1;
    white-space: nowrap;
}
#statusBox {
    max-width: 620px; margin: 0 auto 16px auto;
    padding: 14px 20px; border-radius: 8px;
    background: #f0f4f8; border-left: 5px solid #bdc3c7;
    display: flex; align-items: center; gap: 14px;
}
#statusBox.success { background: #eafaf1; border-color: #27ae60; }
#statusBox.error   { background: #fdf2f2; border-color: #e74c3c; }
#statusBox.running { background: #fef9e7; border-color: #f39c12; }
#scanResult { margin: 0; font-size: 1em; color: #2c3e50; }
#pageCounter { font-weight: bold; font-size: 1.25em; color: #2980b9; margin: 0; white-space: nowrap; }
.progress-wrap { max-width: 620px; margin: 0 auto 16px auto; }
.progress-wrap label { display: block; font-size: 0.85em; color: #666; margin-bottom: 4px; }
progress {
    width: 100%; height: 12px;
    border-radius: 6px; overflow: hidden; appearance: none;
}
progress::-webkit-progress-bar   { background: #e0e0e0; border-radius: 6px; }
progress::-webkit-progress-value { background: #3498db; border-radius: 6px; transition: width 0.4s; }
progress::-moz-progress-bar      { background: #3498db; border-radius: 6px; }
.pdf-zone { max-width: 620px; margin: 0 auto; }
.pdf-zone-btns { display: flex; gap: 10px; margin-bottom: 10px; }
#pdfViewer iframe { border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.scanapi-menu-form { max-width: 620px; margin: 0 auto 16px auto; text-align: left; }

/* =============================================================================
   scanner_facture.php
   ============================================================================= */

.page-wrap-sm { max-width: 640px; margin: 0 auto; text-align: left; }

/* Stepper scanner_facture : même que scanner_facture_mail (réutilise .stepper) */

/* mois-grid scanner_facture (boutons légèrement différents) */
.mois-grid-sf button {
    padding: 14px 6px; font-size: 0.9em;
    background: #f0f4f8; border: 2px solid transparent;
    border-radius: 7px; cursor: pointer; transition: all 0.2s; box-shadow: none;
}
.mois-grid-sf button:hover { background: #BAE1FF; border-color: #2980b9; opacity: 1; }
.mois-grid-sf button.current-month { background: #BAE1FF; border-color: #2980b9; font-weight: bold; }

/* Aperçu fichier scanner_facture (réutilise .file-preview) */

/* Année row */
.annee-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.annee-row input[type=number] {
    width: 90px; padding: 8px 10px; font-size: 1em;
    border: 2px solid #ccc; border-radius: 7px; text-align: center;
}

/* nav-btns scanner_facture (réutilise .nav-btns) */

/* =============================================================================
   delete_database.php et creer_base.php
   ============================================================================= */

.page-wrap-600 { max-width: 600px; margin: 0 auto; }

.danger-box {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    color: #856404;
}

.option-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid #eee;
}
.option-row:last-child { border-bottom: none; }
.option-row label { display: flex; align-items: center; gap: 6px; min-width: 220px; cursor: pointer; font-weight: 500; }
.option-row input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
.option-row .hint-text { font-size: 0.85em; color: #666; word-break: break-all; }

/* Navigation step affiche_base */
.config-step-nav {
    display: flex; align-items: center; gap: 0;
    max-width: 900px; margin: 16px auto 10px auto;
    background: white; border-radius: 10px;
    padding: 10px 20px; box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.config-step-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 20px; border-radius: 8px;
    text-decoration: none; color: #555; font-size: 0.97em;
    transition: background .15s;
}
.config-step-link:hover { background: #f0f4f8; }
.config-step-link.active { background: #eaf3fb; color: #2c6779; font-weight: bold; }
.config-step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: #cdd9e0; color: #555; font-weight: bold; font-size: 0.9em;
}
.config-step-link.active .config-step-num { background: #2c6779; color: white; }
.config-step-sep { flex: 1; height: 2px; background: #e0e8ed; margin: 0 8px; }

/* Liste fournisseurs */
.fournisseur-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.fournisseur-row input[type=text] {
    flex: 1; padding: 9px 12px; border: 1px solid #cdd; border-radius: 6px;
    font-size: 0.97em; transition: border-color .2s;
}
.fournisseur-row input[type=text]:focus { border-color: #2980b9; outline: none; }
.btn-remove-f {
    padding: 7px 12px; background: #e74c3c; color: white;
    border: none; border-radius: 6px; cursor: pointer; font-size: 1.1em; line-height: 1;
}
.btn-remove-f:hover { background: #c0392b; }
.btn-add-f {
    margin-top: 6px; padding: 8px 18px;
    background: #2c6779; color: white; border: none; border-radius: 6px;
    cursor: pointer; font-size: 0.95em;
}
.btn-add-f:hover { background: #245a6a; }

/* ── Tableaux Analyse facture – style Excel ───────────────────────────────── */
.analyse-wrap {
    display: flex; flex-direction: column; gap: 20px; margin-top: 8px;
}
.analyse-bloc { width: 100%; }
.analyse-bloc-title {
    font-size: 0.78em; font-weight: bold; letter-spacing: .06em;
    text-transform: uppercase; color: #4a6a75; margin-bottom: 4px;
    padding-left: 2px;
}
.xls-table {
    width: 100%; border-collapse: collapse;
    font-size: 0.93em; border: 1px solid #b0bec5;
    box-shadow: 1px 2px 6px rgba(0,0,0,.08);
}
/* En-tête */
.xls-table thead tr th {
    background: #1a6b3a; color: #fff;
    padding: 7px 14px; text-align: left;
    font-weight: 600; font-size: 0.88em; letter-spacing: .03em;
    border-right: 1px solid #25894e;
    white-space: nowrap;
}
.xls-table thead tr th:last-child { border-right: none; }
.xls-table thead tr th.col-num { text-align: right; }

/* Corps */
.xls-table tbody tr td {
    padding: 6px 14px;
    border-right: 1px solid #dde3e7;
    border-bottom: 1px solid #dde3e7;
    color: #222;
    white-space: nowrap;
}
.xls-table tbody tr td:last-child { border-right: none; }
.xls-table tbody tr:last-child td { border-bottom: none; }

/* Alternance */
.xls-table tbody tr:nth-child(even) td { background: #f2f7f2; }
.xls-table tbody tr:nth-child(odd)  td { background: #ffffff; }
.xls-table tbody tr:hover td { background: #e8f4ea !important; }

/* Colonne montant */
.xls-table td.col-num {
    text-align: right;
    font-family: 'Courier New', monospace;
    font-size: 0.97em;
    letter-spacing: .01em;
}

/* Ligne Total HT */
.xls-table .row-ht td {
    background: #eaf4fb !important;
    font-weight: 600;
    border-top: 2px solid #7fc4e8;
}
/* Ligne TVA globale */
.xls-table .row-tva-total td {
    color: #5a4500;
    background: #fffaed !important;
}
/* Ligne TTC */
.xls-table .row-ttc td {
    background: #e6f4ea !important;
    font-weight: 700;
    font-size: 1.05em;
    border-top: 2px solid #3aab5e;
    color: #1a5c2e;
}
/* Lignes taux TVA */
.xls-table .row-tva td { color: #5a4500; }

.btn-danger {
    background: #e74c3c;
    color: white;
    padding: 12px 24px;
}
.btn-danger:hover { background: #c0392b; }

.btn-primary {
    background: #2980b9;
    color: white;
    padding: 8px 18px;
}
.btn-primary:hover { background: #2471a3; }

/* =============================================================================
   Tickets Resto — Logos et remise
   ============================================================================= */

.logo-img { height:40px; width:120px; object-fit:contain;
            background:#f0f0f0; border-radius:6px; padding:4px 8px; }

.remise-wrap {
    border: 2px solid #2980b9; border-radius:10px;
    padding:20px 24px; margin-bottom:16px; background:white;
}
.remise-title {
    color:#2980b9; font-size:1.1em; font-weight:bold;
    text-transform:uppercase; letter-spacing:0.05em;
    border-bottom:2px solid #2980b9; padding-bottom:8px; margin-bottom:16px;
}
.remise-row {
    display:flex; align-items:center; gap:20px;
    padding:14px 0; border-bottom:1px solid #eee; flex-wrap:wrap;
}
.remise-row:last-child { border-bottom:none; }
.remise-logo { width:140px; flex-shrink:0; }
.remise-data { flex:1; }
.remise-data p { margin:3px 0; font-size:0.92em; color:#2c3e50; }
.remise-data .remise-montant { font-size:1.1em; font-weight:bold; color:#27ae60; }
.remise-pas { color:#7f8c8d; font-style:italic; font-size:0.9em; }
.remise-grand-total {
    margin-top:12px; padding:12px 16px;
    background:#eaf4fd; border-radius:8px;
    display:flex; justify-content:space-between; align-items:center;
}

/* =============================================================================
   Header / Footer commun (identité Crêperie du Marché)
   ============================================================================= */
.site-header {
    background: #2c6779;
    padding: 20px 40px 16px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0,0,0,0.25);
    margin-bottom: 0;
    position: relative;
}
.site-header .home-link {
    position: absolute;
    left: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-decoration: none;
    font-size: 1.8em;
    opacity: 0.75;
    line-height: 1;
}
.site-header .home-link:hover { opacity: 1; }
.site-header img {
    max-height: 55px;
    width: auto;
    filter: brightness(0) invert(1);
}
.site-header .subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 0.78em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 6px;
}
.site-header .logout-link {
    position: absolute;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.78em;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255,255,255,0.35);
    padding: 5px 12px;
    border-radius: 4px;
    transition: all 0.2s;
}
.site-header .logout-link:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}
.site-footer {
    background: #2c6779;
    color: rgba(255,255,255,0.5);
    text-align: center;
    font-size: 0.75em;
    padding: 12px;
    letter-spacing: 0.05em;
    margin-top: auto;
}

/* =============================================================================
   Pages de sous-menu — grille de boutons (menu, gestion_factures, gestion_bd)
   ============================================================================= */

.menu-page body,
body.menu-page {
    font-family: Georgia, 'Times New Roman', serif;
    background: #f4f1ec !important;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0 !important;
}

.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.main h1 {
    color: #2c6779;
    font-size: 1.4em;
    font-weight: normal;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 36px;
    border-bottom: 2px solid #ea7625;
    padding-bottom: 10px;
}

.menu-grid {
    display: grid;
    gap: 18px;
    width: 100%;
}
.menu-grid-2 { grid-template-columns: repeat(2,1fr); max-width: 560px; }
.menu-grid-3 { grid-template-columns: repeat(3,1fr); max-width: 720px; }
.menu-grid-5 { grid-template-columns: repeat(3,1fr); max-width: 720px; }
.menu-grid-6 { grid-template-columns: repeat(3,1fr); max-width: 720px; }

.menu-btn {
    background: white;
    border: none;
    border-radius: 10px;
    padding: 28px 16px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 0.95em;
    color: #2c3e50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    border-top: 4px solid transparent;
}
.menu-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    opacity: 1;
}
.menu-btn .icon  { font-size: 2em; }
.menu-btn .label { font-weight: bold; text-align: center; line-height: 1.3; }
.menu-btn .desc  { font-size: 0.78em; color: #7f8c8d; text-align: center; }

.menu-c1 { border-top-color: #FFB3BA; }
.menu-c2 { border-top-color: #FFDFBA; }
.menu-c3 { border-top-color: #BAFFC9; }
.menu-c4 { border-top-color: #BAE1FF; }
.menu-c5 { border-top-color: #D9BAFF; }
.menu-c6 { border-top-color: #B5EAD7; }

.nav-back { margin: 0; padding: 14px 20px 10px 20px; text-align: left; }
.nav-back a { color: #2c6779; font-size: 1.25em; font-weight: bold; text-decoration: none; }
.nav-back a:hover { text-decoration: underline; }