/* ============================================================
   HAWK Facturation — Thème « Encre & laiton », version cocooning
   Papier crème chaud, bleu nuit adouci, laiton doré, serif douce,
   coins ronds, ombres légères, beaucoup d'air.
   ============================================================ */
:root {
  --nuit: #1a2334;
  --nuit-2: #253147;
  --fond: #f7f2e9;
  --carte: #fffdf8;
  --carte-2: #fbf7ee;
  --encre: #2c2f38;
  --encre-2: #6b6d75;
  --encre-3: #9d9da3;
  --bord: #ece5d6;
  --bord-fort: #d9d0bc;
  --laiton: #a8813a;
  --laiton-vif: #c49d52;
  --laiton-doux: #f5ecdb;
  --vert: #2c7050;
  --vert-doux: #e9f2ec;
  --bleu: #3d5a88;
  --bleu-doux: #eaeff6;
  --rouge: #a94a3d;
  --rouge-doux: #f9ece9;
  --orange: #9c6420;
  --orange-doux: #f8efdf;
  --ombre: 0 2px 10px rgba(120, 95, 45, 0.07);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  background: var(--fond);
  color: var(--encre);
  font-size: 14.5px;
  line-height: 1.6;
}
a { color: var(--encre); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--laiton); }

/* ---- Navigation : bleu nuit adouci ---- */
header.nav {
  background: linear-gradient(180deg, var(--nuit) 0%, #1e2940 100%);
  display: flex; align-items: center; gap: 2rem;
  padding: 0 2rem; height: 62px;
}
.logo { font-family: Georgia, "Times New Roman", serif; font-weight: 600; font-size: 1.15rem; letter-spacing: 0.18em; color: var(--laiton-vif); }
.logo-suite { font-family: "Inter", sans-serif; font-weight: 350; font-size: 0.8rem; color: #93a0b5; letter-spacing: 0.06em; margin-left: 0.5rem; }
header.nav nav { display: flex; gap: 0.25rem; flex: 1; }
header.nav nav a {
  color: #b7c1d2; padding: 0.48rem 0.9rem; border-radius: 999px;
  font-weight: 450; font-size: 0.89rem; transition: background 0.15s, color 0.15s;
}
header.nav nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
header.nav nav a.actif { color: #f3d391; background: rgba(196, 157, 82, 0.16); }
header.nav .utilisateur { color: #7d8aa1; font-size: 0.84rem; }
header.nav .utilisateur button {
  background: none; border: 1px solid #3a4a68; color: #b7c1d2;
  padding: 0.34rem 0.8rem; border-radius: 999px; cursor: pointer; margin-left: 0.6rem;
  font: inherit; font-size: 0.82rem; transition: border-color 0.15s, color 0.15s;
}
header.nav .utilisateur button:hover { border-color: var(--laiton-vif); color: #f3d391; }

main { max-width: 1120px; margin: 2.2rem auto 4.5rem; padding: 0 1.6rem; }

/* ---- Messages ---- */
.messages { list-style: none; padding: 0; margin: 0 0 1.3rem; }
.messages li {
  padding: 0.7rem 1.05rem; border-radius: 12px; margin-bottom: 0.5rem; font-size: 0.9rem;
  background: var(--carte); border: 1px solid var(--bord); box-shadow: var(--ombre);
}
.messages li.success { color: var(--vert); background: var(--vert-doux); border-color: #d3e5da; }
.messages li.error { color: var(--rouge); background: var(--rouge-doux); border-color: #ecd5d0; }
.messages li.warning { color: var(--orange); background: var(--orange-doux); border-color: #ecdcbd; }

/* ---- Titres / actions ---- */
.entete-page { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.6rem; flex-wrap: wrap; gap: 0.9rem; }
.entete-page h1 { margin: 0; font-family: Georgia, serif; font-size: 1.6rem; font-weight: 500; letter-spacing: 0.01em; }
.groupe-boutons { display: flex; gap: 0.55rem; }

.btn {
  display: inline-block; border: 1px solid transparent; cursor: pointer; font: inherit;
  font-weight: 520; font-size: 0.88rem; padding: 0.52rem 1.15rem; border-radius: 999px;
  background: var(--nuit); color: #fff; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.btn:hover { background: var(--nuit-2); color: #fff; }
.btn.accent { background: var(--laiton); color: #fff; }
.btn.accent:hover { background: #937031; }
.btn.secondaire { background: var(--carte); color: var(--encre); border-color: var(--bord-fort); }
.btn.secondaire:hover { border-color: var(--laiton); color: var(--laiton); }
.btn.danger { background: var(--carte); color: var(--rouge); border-color: var(--bord-fort); }
.btn.danger:hover { border-color: var(--rouge); }
.btn.petit { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

/* ---- Tuiles de stats ---- */
.cartes-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.carte {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 16px;
  padding: 1.1rem 1.25rem; box-shadow: var(--ombre);
}
.carte .valeur { font-family: Georgia, serif; font-size: 1.85rem; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--nuit); }
.carte .libelle { color: var(--encre-2); font-size: 0.8rem; margin-top: 0.15rem; }
.carte.alerte .valeur { color: var(--rouge); }

/* ---- Sections ---- */
.section {
  background: var(--carte); border: 1px solid var(--bord); border-radius: 16px;
  padding: 1.35rem 1.5rem; margin-bottom: 1.1rem; box-shadow: var(--ombre);
}
.section h2 {
  margin: 0 0 1rem; font-size: 0.76rem; font-weight: 620; color: var(--laiton);
  text-transform: uppercase; letter-spacing: 0.14em;
}

/* ---- Colonnes CA ---- */
.colonnes-ca { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.1rem; align-items: start; }
.pile-ca { display: grid; gap: 1.1rem; }
table.tableau-ca { width: 100%; border-collapse: collapse; }
table.tableau-ca td { padding: 0.4rem 0.2rem; font-size: 0.88rem; border-bottom: 1px solid #f3eee2; vertical-align: middle; }
table.tableau-ca tr:last-child td { border-bottom: none; }
td.periode { color: var(--encre-2); width: 5.4rem; white-space: nowrap; }
.barre-ligne { display: flex; align-items: center; gap: 0.65rem; margin: 0.14rem 0; }
.barre { height: 9px; border-radius: 999px; background: linear-gradient(90deg, var(--laiton-vif), #d4b06a); min-width: 6px; }
.barre-ligne .montant { font-size: 0.84rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Tableaux ---- */
table.liste { width: 100%; border-collapse: collapse; }
main > table.liste { background: var(--carte); border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; box-shadow: var(--ombre); }
table.liste th {
  text-align: left; font-size: 0.71rem; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--encre-3); padding: 0.6rem 0.85rem; border-bottom: 1px solid var(--bord); font-weight: 600;
}
table.liste td { padding: 0.68rem 0.85rem; border-bottom: 1px solid #f3eee2; font-size: 0.9rem; }
table.liste tr:last-child td { border-bottom: none; }
table.liste tr:hover td { background: var(--carte-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Badges : pastilles douces ---- */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.77rem; font-weight: 530;
  padding: 0.16rem 0.65rem; border-radius: 999px;
  background: #f0ede4; color: var(--encre-2);
}
.badge.envoyee { background: var(--bleu-doux); color: var(--bleu); }
.badge.payee { background: var(--vert-doux); color: var(--vert); }
.badge.annulee { background: var(--rouge-doux); color: var(--rouge); }
.badge.retard { background: var(--orange-doux); color: var(--orange); }
.badge.actif { background: var(--vert-doux); color: var(--vert); }
.badge.inactif { background: #f0ede4; color: var(--encre-3); }
.puce-auto {
  font-size: 0.68rem; color: var(--laiton); background: var(--laiton-doux);
  border-radius: 999px; padding: 0.08rem 0.5rem; margin-left: 0.4rem; letter-spacing: 0.05em;
}

/* ---- Formulaires ---- */
form .grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0.95rem 1.5rem; }
form .pleine-largeur { grid-column: 1 / -1; }
label { display: block; font-weight: 530; font-size: 0.84rem; margin-bottom: 0.3rem; }
.form-input, select.form-input, textarea.form-input {
  width: 100%; padding: 0.55rem 0.8rem; border: 1px solid var(--bord-fort); border-radius: 11px;
  font: inherit; font-size: 0.9rem; background: var(--carte); color: var(--encre);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus { outline: none; border-color: var(--laiton); box-shadow: 0 0 0 3px var(--laiton-doux); }
.aide { color: var(--encre-3); font-size: 0.76rem; margin-top: 0.25rem; }
.erreurs { color: var(--rouge); font-size: 0.82rem; margin: 0.2rem 0 0; padding: 0; list-style: none; }
.champ { margin-bottom: 0.35rem; }
.case { display: flex; align-items: center; gap: 0.5rem; }
.case label { margin: 0; }
.actions-form { margin-top: 1.4rem; display: flex; gap: 0.65rem; }

table.lignes { width: 100%; border-collapse: collapse; }
table.lignes th { text-align: left; font-size: 0.71rem; color: var(--encre-3); padding: 0.32rem 0.4rem; text-transform: uppercase; letter-spacing: 0.09em; }
table.lignes td { padding: 0.32rem 0.4rem; vertical-align: top; }
table.lignes .form-input { padding: 0.42rem 0.55rem; }

.barre-recherche { display: flex; gap: 0.55rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.barre-recherche input, .barre-recherche select {
  padding: 0.5rem 0.8rem; border: 1px solid var(--bord-fort); border-radius: 999px;
  font: inherit; font-size: 0.9rem; background: var(--carte);
}
.barre-recherche input:focus, .barre-recherche select:focus { outline: none; border-color: var(--laiton); box-shadow: 0 0 0 3px var(--laiton-doux); }

/* ---- Connexion / installation ---- */
.page-connexion {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--nuit) 0%, #101828 100%);
}
.boite-connexion {
  background: var(--carte); border-radius: 20px; padding: 2.6rem 2.7rem; width: 370px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.boite-connexion h1 { margin: 0 0 0.25rem; font-family: Georgia, serif; font-size: 1.3rem; letter-spacing: 0.15em; font-weight: 550; color: var(--nuit); }
.boite-connexion h1 .logo-suite { font-family: "Inter", sans-serif; font-size: 0.85rem; color: var(--encre-3); }
.boite-connexion .sous-titre { color: var(--encre-3); font-size: 0.85rem; margin-bottom: 1.5rem; }
.boite-connexion .btn { width: 100%; margin-top: 1rem; }

.vide { color: var(--encre-3); font-size: 0.9rem; padding: 0.6rem 0; }
.total-apercu { text-align: right; font-size: 0.95rem; margin-top: 1rem; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.total-apercu strong { font-size: 1.12rem; color: var(--encre); }

@media (max-width: 860px) {
  form .grille, .colonnes-ca { grid-template-columns: 1fr; }
  header.nav { flex-wrap: wrap; height: auto; padding: 0.7rem 1rem; }
}