@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600&family=Source+Sans+3:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap');

:root{
  --encre:#1f2b22;
  --encre-soft:#3a4a3c;
  --papier:#f7f5ee;
  --papier-ligne:#e3ddc9;
  --sauge:#5c7a5e;
  --sauge-deep:#3f5c41;
  --sauge-pale:#e3ebe1;
  --ambre:#a8763a;
  --ambre-pale:#f1e3cd;
  --rouge:#9a4438;
  --rouge-pale:#f3ddd8;
  --vert-ok:#3f6e4a;
  --vert-ok-pale:#dfeadf;
  --bordure:#d8d2bd;
  --ombre: 0 1px 2px rgba(31,43,34,0.06), 0 4px 14px rgba(31,43,34,0.05);
  --rayon:7px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Source Sans 3', sans-serif;
  color:var(--encre);
  background:var(--papier);
  font-size:15px;
  line-height:1.5;
}
h1,h2,h3{font-family:'Fraunces', serif;font-weight:600;margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:14px;}
.mono{font-family:'Roboto Mono', monospace;}

/* ===================== ÉCRAN DE CONNEXION ===================== */
.ecran-auth{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    repeating-linear-gradient(transparent, transparent 27px, var(--papier-ligne) 28px),
    var(--papier);
  padding:24px;
}
.carte-auth{
  background:#fffdf8;
  border:1px solid var(--bordure);
  border-radius:var(--rayon);
  box-shadow:var(--ombre);
  width:100%;
  max-width:380px;
  padding:38px 34px;
}
.logo-auth{text-align:center;margin-bottom:28px;}
.logo-marque{
  width:48px;height:48px;
  background:var(--sauge-deep);
  color:#fff;
  border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Roboto Mono', monospace;
  font-weight:600;
  font-size:13px;
  margin:0 auto 14px;
}
.logo-auth h1{font-size:24px;}
.sous-titre{color:var(--encre-soft);font-size:13px;margin:6px 0 0;}

.form-auth{display:flex;flex-direction:column;gap:16px;}
.form-auth label{
  font-size:12.5px;
  font-weight:600;
  color:var(--encre-soft);
  display:flex;flex-direction:column;gap:6px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
.form-auth label .indice{text-transform:none;font-weight:400;color:#9a9478;letter-spacing:0;}
.form-auth input{
  border:1.3px solid var(--bordure);
  border-radius:6px;
  padding:10px 12px;
  font-size:15px;
  color:var(--encre);
  background:#fff;
}
.form-auth input:focus{outline:2px solid var(--sauge);outline-offset:1px;}
.erreur-auth{color:var(--rouge);font-size:13px;margin:0;min-height:0;}
.erreur-auth:empty{display:none;}
.btn-principal{
  background:var(--sauge-deep);
  color:#fff;
  border:none;
  border-radius:6px;
  padding:11px 16px;
  font-size:14.5px;
  font-weight:600;
}
.btn-principal:hover{background:#33492f;}
.lien-bascule{font-size:13px;text-align:center;color:var(--encre-soft);margin:4px 0 0;}
.lien-bascule a{color:var(--sauge-deep);font-weight:600;text-decoration:none;}

/* ===================== STRUCTURE APP ===================== */
.app{display:flex;min-height:100vh;}

.barre-laterale{
  width:226px;
  background:var(--encre);
  color:#e9e6da;
  display:flex;
  flex-direction:column;
  padding:22px 14px;
  flex-shrink:0;
}
.marque{display:flex;align-items:center;gap:10px;padding:0 8px 22px;font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:#fff;border-bottom:1px solid #3a4a3c;margin-bottom:14px;}
.marque-icone{width:30px;height:30px;background:var(--sauge);border-radius:7px;display:flex;align-items:center;justify-content:center;font-family:'Roboto Mono',monospace;font-size:10px;font-weight:600;color:#fff;}

.nav-principale{display:flex;flex-direction:column;gap:2px;flex:1;}
.nav-item{
  background:none;border:none;
  text-align:left;
  color:#b9c2b3;
  padding:9px 10px;
  border-radius:6px;
  font-size:14px;
  display:flex;align-items:center;gap:10px;
}
.nav-puce{width:5px;height:5px;border-radius:50%;background:#5c6a57;flex-shrink:0;}
.nav-item:hover{background:#2a352a;color:#fff;}
.nav-item.actif{background:var(--sauge-deep);color:#fff;}
.nav-item.actif .nav-puce{background:#cfe0cc;}

.bas-barre{border-top:1px solid #3a4a3c;padding-top:14px;}
.utilisateur-courant{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--sauge);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;flex-shrink:0;}
.u-nom{font-size:13px;font-weight:600;color:#fff;}
.u-role{font-size:11px;color:#9aa494;text-transform:capitalize;}
.btn-deconnexion{width:100%;background:none;border:1px solid #3a4a3c;color:#b9c2b3;padding:7px;border-radius:6px;font-size:12.5px;}
.btn-deconnexion:hover{background:#2a352a;color:#fff;}

.contenu{flex:1;padding:32px 40px;max-width:1180px;}

/* ===================== NOTIFICATIONS ===================== */
.notif{
  padding:11px 16px;
  border-radius:7px;
  margin-bottom:18px;
  font-size:13.5px;
  font-weight:500;
}
.notif.succes{background:var(--vert-ok-pale);color:var(--vert-ok);}
.notif.erreur{background:var(--rouge-pale);color:var(--rouge);}

/* ===================== EN-TÊTES DE VUE ===================== */
.entete-vue{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:24px;}
.entete-vue h2{font-size:26px;}
.entete-vue .sous{color:var(--encre-soft);font-size:13.5px;margin-top:4px;}

/* ===================== STATISTIQUES ===================== */
.grille-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:28px;}
.carte-stat{
  background:#fffdf8;
  border:1px solid var(--bordure);
  border-radius:var(--rayon);
  padding:16px 18px;
}
.carte-stat .valeur{font-family:'Fraunces',serif;font-size:25px;font-weight:600;color:var(--sauge-deep);}
.carte-stat .label{font-size:11.5px;text-transform:uppercase;letter-spacing:0.04em;color:var(--encre-soft);margin-top:4px;}

/* ===================== TABLEAUX ===================== */
.panneau{background:#fffdf8;border:1px solid var(--bordure);border-radius:var(--rayon);overflow:hidden;margin-bottom:24px;}
.panneau-entete{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--bordure);}
.panneau-entete h3{font-size:15px;font-family:'Source Sans 3',sans-serif;font-weight:700;}

table.tableau{width:100%;border-collapse:collapse;}
table.tableau th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--encre-soft);
  padding:10px 18px;
  border-bottom:1px solid var(--bordure);
  background:#f1eee3;
}
table.tableau td{
  padding:11px 18px;
  border-bottom:1px solid #ece6d4;
  font-size:14px;
}
table.tableau tbody tr:hover{background:#faf8f0;}
table.tableau tbody tr:last-child td{border-bottom:none;}
.cellule-vide{padding:36px 18px;text-align:center;color:#9a9478;font-size:13.5px;}

/* ===================== PASTILLES STATUT ===================== */
.pastille{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:0.03em;}
.pastille.brouillon{background:#e9e6da;color:#6b6450;}
.pastille.envoyee{background:var(--ambre-pale);color:var(--ambre);}
.pastille.payee{background:var(--vert-ok-pale);color:var(--vert-ok);}
.pastille.retard{background:var(--rouge-pale);color:var(--rouge);}
.pastille.annulee{background:#e9e6da;color:#9a9478;text-decoration:line-through;}
.pastille.a-payer{background:var(--ambre-pale);color:var(--ambre);}

/* ===================== BOUTONS ===================== */
.btn{
  border:1.3px solid var(--bordure);
  background:#fff;
  color:var(--encre);
  padding:8px 14px;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
  display:inline-flex;align-items:center;gap:6px;
}
.btn:hover{background:#f1eee3;}
.btn.primaire{background:var(--sauge-deep);color:#fff;border-color:var(--sauge-deep);}
.btn.primaire:hover{background:#33492f;}
.btn.danger{color:var(--rouge);border-color:var(--rouge-pale);}
.btn.danger:hover{background:var(--rouge-pale);}
.btn.petit{padding:5px 10px;font-size:12px;}
.btn:disabled{opacity:0.5;cursor:not-allowed;}

/* ===================== FORMULAIRES ===================== */
.champ{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.champ label{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;color:var(--encre-soft);}
.champ input, .champ select, .champ textarea{
  border:1.3px solid var(--bordure);
  border-radius:6px;
  padding:9px 11px;
  font-size:14px;
  background:#fff;
  color:var(--encre);
  width:100%;
}
.champ input:focus, .champ select:focus, .champ textarea:focus{outline:2px solid var(--sauge);outline-offset:1px;}
.ligne-champs{display:flex;gap:14px;}
.ligne-champs .champ{flex:1;}
.champ-fichier{
  border:1.3px dashed var(--bordure);
  border-radius:6px;
  padding:16px;
  text-align:center;
  font-size:13px;
  color:var(--encre-soft);
  background:#faf8f0;
}
.champ-fichier input{margin-top:8px;}

/* ===================== MODALE ===================== */
.modale-fond{
  position:fixed;inset:0;
  background:rgba(31,43,34,0.45);
  display:flex;align-items:center;justify-content:center;
  z-index:100;
  padding:24px;
}
.modale-boite{
  background:#fffdf8;
  border-radius:10px;
  width:100%;
  max-width:560px;
  max-height:88vh;
  overflow-y:auto;
  padding:28px 30px;
  box-shadow:0 12px 40px rgba(0,0,0,0.2);
}
.modale-titre{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.modale-titre h3{font-size:19px;}
.modale-fermer{background:none;border:none;font-size:20px;color:var(--encre-soft);line-height:1;}
.modale-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:16px;border-top:1px solid var(--bordure);}

/* ===================== LIGNES DE FACTURE ===================== */
.tableau-lignes{width:100%;border-collapse:collapse;margin-bottom:10px;}
.tableau-lignes th{font-size:10.5px;text-transform:uppercase;color:var(--encre-soft);text-align:left;padding:6px 8px;border-bottom:1px solid var(--bordure);}
.tableau-lignes td{padding:6px 8px;}
.tableau-lignes select, .tableau-lignes input{padding:6px 8px;font-size:13px;}
.btn-suppr-ligne{background:none;border:none;color:var(--rouge);font-size:16px;padding:2px 6px;}
.totaux-facture{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin-top:14px;font-size:14px;}
.totaux-facture .total-final{font-size:18px;font-weight:700;font-family:'Fraunces',serif;color:var(--sauge-deep);}

/* ===================== UTILITAIRES ===================== */
.lien-fichier{color:var(--sauge-deep);font-weight:600;text-decoration:none;font-size:13px;}
.lien-fichier:hover{text-decoration:underline;}
.barre-actions-vue{display:flex;gap:10px;margin-bottom:18px;}
.champ-recherche{flex:1;max-width:320px;}

@media (max-width:900px){
  .app{flex-direction:column;}
  .barre-laterale{width:100%;flex-direction:row;overflow-x:auto;align-items:center;}
  .nav-principale{flex-direction:row;}
  .bas-barre{display:none;}
  .contenu{padding:20px;}
  .grille-stats{grid-template-columns:repeat(2,1fr);}
  .ligne-champs{flex-direction:column;}
}