* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #f4f1ec;
    color: #2b2b2b;
}

.topbar {
    background: #7a2e1c;
    color: white;
    padding: 14px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.topbar .logo { color: white; font-weight: bold; font-size: 1.3em; text-decoration: none; }
.o-cochon { width: 0.85em; height: 0.85em; vertical-align: -0.12em; display: inline-block; }
.topbar nav a { color: white; margin-left: 20px; text-decoration: none; font-weight: 500; }
.topbar nav a:hover { text-decoration: underline; }
.utilisateur-connecte { margin-left: 20px; color: #f0d9c8; font-style: italic; }

/* Connexion */
.page-login { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; }
.carte-login { background: white; padding: 32px; border-radius: 12px; width: 320px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.carte-login h1 { margin-top: 0; }
.carte-login form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.carte-login input { padding: 10px; border-radius: 6px; border: 1px solid #ccc; }
.carte-login button { padding: 10px; border: none; border-radius: 6px; background: #7a2e1c; color: white; font-weight: bold; cursor: pointer; }

/* Page de validation de livraison (scan QR) */
.carte-livraison { width: 380px; }
.gros-symbole { font-size: 3em; margin-bottom: 6px; }
.statut-servi, .statut-invalide { color: #a12b2b; }
.statut-servi .gros-symbole, .statut-invalide .gros-symbole { color: #a12b2b; }
.date-service { font-size: 0.85em; color: #777; }
.libelle-source { font-weight: bold; color: #7a2e1c; letter-spacing: 1px; margin: 6px 0 12px; }
.btn-confirmer { width: 100%; padding: 14px; margin-top: 14px; background: #2e7a3a; color: white; border: none; border-radius: 8px; font-weight: bold; font-size: 1.05em; cursor: pointer; }

.content { padding: 24px; max-width: 1100px; margin: 0 auto; }

h1 { color: #7a2e1c; }
h2 { color: #7a2e1c; margin-top: 28px; }
h3 { color: #b5541e; margin-bottom: 8px; }

.flash-container { margin-bottom: 16px; }
.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 8px; }
.flash-error { background: #f8d7da; color: #842029; }
.flash-succes { background: #d4edda; color: #155724; }

/* Tables */
.grille-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.carte-table {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 10px;
    background: white;
    border: 2px solid #d8cfc0;
    border-radius: 10px;
    text-decoration: none;
    color: #2b2b2b;
    font-weight: bold;
}
.carte-table.occupee { border-color: #b5541e; background: #fdece0; }
.carte-table .etat { font-size: 0.8em; font-weight: normal; color: #777; margin-top: 4px; }
.carte-table.occupee .etat { color: #b5541e; }

.form-inline { margin-top: 20px; display: flex; gap: 10px; }
.form-inline input { padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
.form-inline button, .form-ajout button, .form-inline-prix button {
    padding: 8px 14px; border: none; border-radius: 6px; background: #7a2e1c; color: white; cursor: pointer;
}

/* Menu */
.tableau-menu { width: 100%; border-collapse: collapse; background: white; margin-top: 12px; }
.tableau-menu th, .tableau-menu td { padding: 10px; border-bottom: 1px solid #eee; text-align: left; }
.form-inline-prix { display: flex; gap: 6px; }
.form-inline-prix input { width: 90px; padding: 6px; border-radius: 6px; border: 1px solid #ccc; }
.btn-danger { background: #a12b2b; color: white; border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; }
.form-ajout { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.form-ajout input { padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
.aide { color: #777; }
.vide { text-align: center; color: #999; padding: 20px; }
.stock-actuel { font-weight: bold; margin-bottom: 4px; }

.carte-danger { background: #fff8f6; border: 1px solid #f0c4bb; border-radius: 10px; padding: 18px; }
.carte-danger p { margin-top: 0; }
.option-case { display: block; margin-bottom: 12px; color: #555; }
.btn-reinitialiser { padding: 10px 16px; }

/* Prise de commande */
.zone-commande { display: flex; gap: 24px; align-items: flex-start; }
.colonne-menu { flex: 2; }
.colonne-ticket { flex: 1; background: white; border-radius: 10px; padding: 16px; position: sticky; top: 20px; }

.liste-produits { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.carte-produit { background: white; border: 1px solid #d8cfc0; border-radius: 8px; padding: 10px; }
.nom-produit { font-weight: bold; }
.unite { font-weight: normal; color: #888; font-size: 0.85em; }
.prix-produit { color: #b5541e; margin: 4px 0; }
.ligne-qte { display: flex; gap: 6px; }
.qte-input { width: 50px; padding: 4px; border-radius: 4px; border: 1px solid #ccc; }
.ligne-qte button { flex: 1; border: none; background: #7a2e1c; color: white; border-radius: 4px; cursor: pointer; }

.tableau-lignes { width: 100%; border-collapse: collapse; }
.tableau-lignes td { padding: 6px 2px; border-bottom: 1px solid #eee; font-size: 0.9em; }
.total-commande { font-size: 1.2em; font-weight: bold; margin: 14px 0; text-align: right; color: #7a2e1c; }
.label-paiement { display: block; font-size: 0.85em; color: #666; margin-bottom: 4px; }
#mode_paiement { width: 100%; padding: 8px; border-radius: 6px; border: 1px solid #ccc; margin-bottom: 10px; }
.btn-valider { width: 100%; padding: 12px; background: #2e7a3a; color: white; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
.btn-valider:disabled { background: #aaa; cursor: not-allowed; }

.titre-caisse { border-bottom: 2px solid #b5541e; padding-bottom: 4px; margin-top: 24px; }
.separateur { border: none; border-top: 2px dashed #d8cfc0; margin: 32px 0; }

/* Caisses */
.zone-caisses { display: flex; gap: 20px; flex-wrap: wrap; }
.carte-caisse { flex: 1; min-width: 320px; background: white; border-radius: 10px; padding: 18px; }
.chiffres-caisse div { margin-bottom: 4px; }
.chiffres-caisse .solde { color: #7a2e1c; font-size: 1.1em; margin-top: 8px; }
.form-sortie { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0; }
.form-sortie input { padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
.form-sortie input[type="text"] { flex: 1; min-width: 160px; }
.form-sortie button { padding: 8px 14px; border: none; border-radius: 6px; background: #a12b2b; color: white; cursor: pointer; }
.montant-entree { color: #2e7a3a; font-weight: bold; }
.montant-sortie { color: #a12b2b; font-weight: bold; }
.restant-negatif { color: #a12b2b; font-weight: bold; }

/* Trésorerie */
.zone-balance { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.carte-balance { flex: 1; min-width: 220px; background: white; border-radius: 10px; padding: 18px; text-align: center; border-top: 5px solid #ccc; }
.carte-balance.entree { border-top-color: #2e7a3a; }
.carte-balance.sortie { border-top-color: #a12b2b; }
.carte-balance.solde { border-top-color: #7a2e1c; }
.carte-balance .libelle { color: #777; font-size: 0.9em; }
.carte-balance .montant { font-size: 1.6em; font-weight: bold; margin: 6px 0; }
.carte-balance .detail { font-size: 0.8em; color: #999; }

.zone-sorties-formulaires { display: flex; gap: 20px; flex-wrap: wrap; margin: 10px 0 24px; }
.bloc-formulaire { flex: 1; min-width: 300px; background: white; border-radius: 10px; padding: 18px; }
.bloc-formulaire h2 { margin-top: 0; }
.form-sortie select { padding: 8px; border-radius: 6px; border: 1px solid #ccc; min-width: 180px; }

.champ-categorie { width: 150px; padding: 6px; border-radius: 6px; border: 1px solid #ccc; }
.form-saisie { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; align-items: center; }
.form-saisie select, .form-saisie input { padding: 8px; border-radius: 6px; border: 1px solid #ccc; }
.form-saisie button { padding: 8px 14px; border: none; border-radius: 6px; background: #2e7a3a; color: white; cursor: pointer; }
.bloc-saisie { background: white; border-radius: 10px; padding: 16px 18px; margin: 14px 0 24px; }
.bloc-saisie h2 { margin-top: 0; }