/* =====================================================================
   Commandes Groupées — feuille de style
   Thème chocolat, responsive, pensée pour un personnel non technique :
   gros boutons, badges de couleur, lisibilité maximale.
   ===================================================================== */

:root {
    --cacao:      #4e342e;   /* brun foncé */
    --cacao-2:    #3e2723;
    --caramel:    #ff8f00;   /* accent ambre */
    --creme:      #faf3ea;   /* fond crème */
    --blanc:      #ffffff;
    --gris:       #6b6b6b;
    --gris-clair: #ece5dc;
    --rouge:      #c62828;
    --vert:       #2e7d32;
    --bleu:       #1565c0;
    --violet:     #6a1b9a;
    --noir:       #212121;
    --ombre:      0 2px 8px rgba(78, 52, 46, .12);
    --rayon:      10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--creme);
    color: var(--cacao-2);
    line-height: 1.55;
}

/* ---------- Barre supérieure ---------- */
.topbar { background: linear-gradient(135deg, var(--cacao), var(--cacao-2)); color: #fff; }
.topbar-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap; min-height: 58px;
}
.brand { font-weight: 800; font-size: 1.12rem; color: #fff; text-decoration: none; white-space: nowrap; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav a {
    color: #e8d9c8; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: .92rem;
}
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a.actif { background: var(--caramel); color: #fff; }
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-chip { font-size: .85rem; color: #e8d9c8; }
.user-chip em { font-style: normal; opacity: .75; }

/* ---------- Contenu ---------- */
.contenu { max-width: 1200px; margin: 0 auto; padding: 20px 16px 60px; }
.page-titre { font-size: 1.5rem; margin: 8px 0 18px; }
.sous-titre { color: var(--gris); margin: 6px 0 18px; }

/* ---------- Boutons ---------- */
.btn {
    display: inline-block; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--cacao);
    background: var(--blanc); color: var(--cacao); font-weight: 600; text-decoration: none;
    cursor: pointer; font-size: .95rem; line-height: 1.3; transition: .15s;
}
.btn:hover { background: var(--gris-clair); }
.btn-primary { background: var(--caramel); border-color: var(--caramel); color: #fff; }
.btn-primary:hover { background: #e67e00; }
.btn-danger { background: var(--rouge); border-color: var(--rouge); color: #fff; }
.btn-danger:hover { background: #a51d1d; }
.btn-gros { padding: 14px 26px; font-size: 1.08rem; border-radius: 12px; }
.btn-small { padding: 4px 10px; font-size: .82rem; border-radius: 6px; }
.btn-block { width: 100%; }
button.btn { font-family: inherit; }

/* ---------- Barres d'action / filtres ---------- */
.barre-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.barre-filtres {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    background: var(--blanc); border: 1px solid var(--gris-clair); border-radius: var(--rayon);
    padding: 12px; margin-bottom: 16px;
}
.barre-filtres input[type="search"], .barre-filtres select, .barre-filtres input[type="date"] {
    padding: 8px 10px; border: 1px solid #cbb9a6; border-radius: 8px; font-size: .95rem; background: #fff;
}
.filtre-libelle { font-weight: 600; font-size: .9rem; }
.inline { display: inline-flex; align-items: center; gap: 4px; font-size: .9rem; }

/* ---------- Tableaux ---------- */
.table {
    width: 100%; border-collapse: collapse; background: var(--blanc);
    border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); font-size: .93rem;
}
.table th, .table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--gris-clair); vertical-align: top; }
.table th { background: var(--cacao); color: #fff; font-weight: 600; font-size: .85rem; white-space: nowrap; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: #fdf6ee; }
.num { text-align: right !important; white-space: nowrap; }
.actions { white-space: nowrap; text-align: right; }
.actions form { display: inline-block; }
.ligne-inactive { opacity: .55; }
.table-totaux { box-shadow: none; border: 1px solid var(--gris-clair); }
.table-totaux th { display: none; }
.ligne-total td { background: var(--cacao); color: #fff; font-size: 1.05rem; }
.vide { color: var(--gris); font-style: italic; padding: 12px 0; }
.total-courant { font-size: 1.05rem; margin-top: 12px; }

/* ---------- Badges ---------- */
.badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .78rem;
    font-weight: 700; color: #fff; white-space: nowrap;
}
.badge-gris       { background: #757575; }
.badge-bleu       { background: var(--bleu); }
.badge-ambre      { background: #ef6c00; }
.badge-vert       { background: var(--vert); }
.badge-vert-fonce { background: #1b5e20; }
.badge-violet     { background: var(--violet); }
.badge-noir       { background: var(--noir); }
.badge-rouge      { background: var(--rouge); }
.badge-gros       { padding: 6px 16px; font-size: .92rem; }

/* ---------- Panneaux / cartes ---------- */
.panneau {
    background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 16px 18px; margin-bottom: 18px;
}
.panneau h2 { margin: 0 0 12px; font-size: 1.08rem; }
.panneau-statut { border-left: 5px solid var(--caramel); }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .grille-2 { grid-template-columns: 1fr; } }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
.carte {
    background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre);
    padding: 16px; display: flex; flex-direction: column; gap: 4px;
}
.carte-valeur { font-size: 1.5rem; font-weight: 800; color: var(--cacao); }
.carte-libelle { font-size: .82rem; color: var(--gris); }

.sous-section { font-size: 1rem; margin: 18px 0 8px; color: var(--cacao); }
.sous-section em { font-weight: 400; color: var(--gris); font-size: .88rem; }
.mt { margin-top: 22px; }

/* ---------- Formulaires ---------- */
.form { background: var(--blanc); border-radius: var(--rayon); box-shadow: var(--ombre); padding: 18px; }
.form-large { max-width: 860px; }
.form-inline { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.inline-form { display: inline-block; margin: 0; }
.champ { margin-bottom: 14px; }
.champ label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 4px; }
.champ input[type="text"], .champ input[type="email"], .champ input[type="password"],
.champ input[type="number"], .champ input[type="date"], .champ input[type="search"],
.champ input[type="tel"], .champ select, .champ textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #cbb9a6; border-radius: 8px;
    font-size: 1rem; background: #fff; font-family: inherit;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--caramel); border-color: var(--caramel); }
.champ textarea { resize: vertical; }
.aide { display: block; color: var(--gris); font-size: .82rem; margin-top: 4px; }
.form-inline .champ { margin-bottom: 0; }
.form-inline input[type="text"] { min-width: 220px; }
.actions-form { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.select-mini { padding: 4px; border-radius: 6px; border: 1px solid #cbb9a6; font-size: .82rem; }

/* ---------- Messages flash ---------- */
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; }
.flash-success { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.flash-error   { background: #ffebee; color: #b71c1c; border: 1px solid #ef9a9a; }
.flash-warning { background: #fff8e1; color: #e65100; border: 1px solid #ffcc80; }

/* ---------- Wizard multi-étapes ---------- */
.wizard-progress { display: flex; gap: 6px; margin: 4px 0 20px; flex-wrap: wrap; }
.wizard-etape {
    display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
    background: var(--gris-clair); color: var(--gris); font-size: .82rem; font-weight: 600;
}
.wizard-rond {
    width: 24px; height: 24px; border-radius: 50%; background: #fff; color: var(--gris);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
}
.wizard-etape.actif { background: var(--caramel); color: #fff; }
.wizard-etape.actif .wizard-rond { background: #fff; color: var(--caramel); }
.wizard-etape.fait { background: #c8e6c9; color: #1b5e20; }
.wizard-etape.fait .wizard-rond { background: var(--vert); color: #fff; }

/* Choix du type (étape 1) : grosses cartes cliquables */
.choix-type { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.carte-choix {
    display: flex; flex-direction: column; gap: 6px; border: 2px solid var(--gris-clair);
    border-radius: 14px; padding: 18px; cursor: pointer; background: var(--blanc); transition: .15s;
}
.carte-choix:hover { border-color: var(--caramel); }
.carte-choix:has(input:checked) { border-color: var(--caramel); background: #fff8ec; box-shadow: var(--ombre); }
.carte-choix input { position: absolute; opacity: 0; }
.carte-choix-titre { font-weight: 800; font-size: 1.05rem; color: var(--cacao); }
.carte-choix-desc { font-size: .88rem; color: var(--gris); }

/* ---------- Préparation ---------- */
.produit-prep { border: 1px solid var(--gris-clair); border-radius: 10px; padding: 10px 14px; margin-bottom: 10px; }
.produit-prep-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.produit-prep-nom { font-weight: 700; }
.produit-prep-nom small { color: var(--gris); font-weight: 400; }
.produit-prep-total { background: var(--cacao); color: #fff; border-radius: 999px; padding: 4px 14px; font-weight: 700; font-size: .92rem; }
.produit-prep-detail { margin: 8px 0 0; padding-left: 18px; color: var(--gris); font-size: .88rem; }
.produit-prep-detail a { color: var(--bleu); }

/* ---------- Page de connexion ---------- */
.page-login {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--cacao), var(--cacao-2));
}
.login-card {
    background: var(--blanc); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,.35);
    padding: 34px; width: min(420px, 92vw);
}
.login-logo { font-size: 3rem; text-align: center; }
.login-card h1 { text-align: center; font-size: 1.35rem; margin: 6px 0 2px; color: var(--cacao); }
.login-sous-titre { text-align: center; color: var(--gris); margin: 0 0 20px; font-size: .92rem; }

/* ---------- Pied de page ---------- */
.footer { text-align: center; color: var(--gris); font-size: .8rem; padding: 14px; }

.texte-rouge { color: var(--rouge); font-weight: 700; }
.texte-vert { color: var(--vert); font-weight: 700; }

/* ---------- Portail d'auto-commande ---------- */
.sous-titre-portail { color: #e8d9c8; font-size: .9rem; }
.portail-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 900px) { .portail-cartes { grid-template-columns: 1fr; } }
.portail-carte h2 { border-bottom: 2px solid var(--gris-clair); padding-bottom: 8px; }
.code-gros {
    background: var(--cacao); color: #fff; padding: 3px 12px; border-radius: 6px;
    font-size: 1.1rem; letter-spacing: 1.5px; font-weight: 700;
}
.form-qte { display: inline-flex; gap: 4px; align-items: center; }
.input-qte { width: 64px; padding: 4px 6px; border: 1px solid #cbb9a6; border-radius: 6px; font-size: .9rem; }

/* Petits écrans */
@media (max-width: 720px) {
    .topbar-inner { flex-direction: column; padding: 10px; gap: 8px; }
    .nav { justify-content: center; }
    .barre-filtres, .form-inline { flex-direction: column; align-items: stretch; }
    .form-inline .champ { margin-bottom: 8px; }
    .form-inline input[type="text"] { min-width: 0; }
    .table { font-size: .84rem; }
}