:root{
  --orange:#E67E22; --orange-dark:#B5610E; --orange-pale:#FFF1E3;
  --ink:#241C14; --ink-soft:#6b5f52; --bg:#FBF8F4; --surface:#FFFFFF; --border:#EEE3D6;
  --green:#1E7A34; --green-bg:#EAF7EC; --red:#B5121B; --red-bg:#FCEAEA;
  --radius:14px; --shadow:0 6px 20px rgba(36,28,20,.06);
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
.hidden{ display:none !important; }
button{ font-family:inherit; cursor:pointer; }
input{ font-family:inherit; }

/* ================= PAGE CONNEXION ================= */
.page-connexion{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(150deg, var(--orange-dark), #6e330a);
}
.carte-connexion{
  background:var(--surface); border-radius:20px; padding:32px 26px; width:100%; max-width:400px;
  box-shadow:0 30px 70px rgba(0,0,0,.25);
}
.marque{ text-align:center; margin-bottom:24px; }
.marque-icone{ font-size:38px; display:block; margin-bottom:6px; }
.marque h1{ font-size:22px; font-weight:800; }
.marque-sous{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; }

.onglets-auth{ display:flex; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:20px; }
.onglet-auth{ flex:1; background:none; border:none; padding:10px; border-radius:8px; font-size:13px; font-weight:700; color:var(--ink-soft); }
.onglet-auth.actif{ background:var(--surface); color:var(--orange-dark); box-shadow:0 1px 4px rgba(0,0,0,.1); }

form label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-top:14px; margin-bottom:5px; }
form input{ width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:14.5px; }
form input:focus{ outline:none; border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-pale); }
.msg-aide{ font-size:11px; color:var(--ink-soft); margin-top:4px; }
.msg-erreur{ background:var(--red-bg); color:var(--red); padding:10px 12px; border-radius:8px; font-size:12.5px; margin-top:14px; }
.btn-principal{
  width:100%; margin-top:20px; padding:13px; background:var(--orange); color:#fff; border:none;
  border-radius:10px; font-size:14.5px; font-weight:700; box-shadow:0 8px 20px rgba(230,126,34,.35);
}
.btn-principal:active{ transform:scale(.98); }

/* ================= PAGE DASHBOARD ================= */
.entete-app{
  background:var(--surface); border-bottom:1px solid var(--border); padding:14px 18px;
  display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:10;
}
.entete-marque{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:6px; }
.btn-lien{ background:none; border:none; color:var(--orange-dark); font-size:13px; font-weight:600; }

.contenu-dashboard{ max-width:600px; margin:0 auto; padding:24px 18px 60px; }
.contenu-dashboard h1{ font-size:20px; }
.sous-titre{ font-size:13px; color:var(--ink-soft); margin-top:4px; margin-bottom:24px; }

.zone-chargement{ text-align:center; padding:60px 20px; color:var(--ink-soft); font-size:13px; }
.spinner{
  width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--orange); border-radius:50%;
  margin:0 auto 14px; animation:tourner .7s linear infinite;
}
@keyframes tourner{ to{ transform:rotate(360deg); } }

.zone-vide{ text-align:center; padding:50px 20px; color:var(--ink-soft); }
.zone-vide-icone{ font-size:40px; margin-bottom:10px; }
.zone-vide h3{ font-size:15px; color:var(--ink); margin-bottom:6px; }
.zone-vide p{ font-size:12.5px; max-width:320px; margin:0 auto; }

.zone-entreprises{ display:flex; flex-direction:column; gap:14px; }
.carte-entreprise{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); }
.carte-entreprise-entete{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.carte-entreprise-icone{ font-size:22px; }
.carte-entreprise-entete h3{ font-size:15px; }
.carte-entreprise-vide{ font-size:12.5px; color:var(--ink-soft); }

.liste-commandes{ display:flex; flex-direction:column; gap:2px; }
.ligne-commande{
  display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-top:1px solid var(--border);
}
.ligne-commande:first-child{ border-top:none; }
.ligne-commande-numero{ font-size:13px; font-weight:700; }
.ligne-commande-date{ font-size:11px; color:var(--ink-soft); }
.ligne-commande-droite{ text-align:right; }
.ligne-commande-montant{ font-size:13.5px; font-weight:700; }
.badge-statut{ font-size:10px; font-weight:700; color:var(--orange-dark); background:var(--orange-pale); padding:2px 8px; border-radius:999px; display:inline-block; margin-top:2px; }