/* ============================================================
   DÉCLIC FACTURATION — styles propres à l'app.
   La charte commune (variables, boutons, cartes, badges, tableaux) est dans charte.css,
   copie de référence de Charte/styles.css : ne pas la modifier ici.
   ============================================================ */

/* ---------- barre du haut (le widget d'auth.js occupe le coin haut droit : on lui laisse la place) ---------- */
.topbar{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--fond);border-bottom:1px solid var(--liseret);
  padding:10px 240px 10px 20px;
}
.topbar img.logo{height:34px;width:auto;}
.topbar .app-nom{font-family:var(--police-titres);text-transform:uppercase;letter-spacing:.04em;color:var(--canard);font-size:1.05rem;}
.topbar nav{display:flex;gap:4px;flex-wrap:wrap;}
.topbar nav a{color:var(--encre-soft);padding:7px 12px;border-radius:999px;font-weight:500;font-size:.95rem;}
.topbar nav a:hover{background:var(--fond-section);color:var(--encre);text-decoration:none;}
.topbar nav a.actif{background:var(--turquoise-pale);color:var(--canard);}

.page{display:flex;flex-direction:column;max-width:1200px;}
footer{margin-top:auto;padding-top:30px;text-align:center;color:var(--encre-faible);font-size:.8rem;}

.entete-page{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:6px 0 18px;}
.entete-page h1{margin:0;}
.entete-page .sous{color:var(--encre-soft);font-size:.95rem;}
.entete-page .droite{margin-left:auto;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.entete-page .droite select{width:auto;min-width:170px;}

/* ---------- cartes de chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin-bottom:20px;}
.chiffre{background:var(--carte);border:1px solid var(--liseret);border-radius:var(--rayon);box-shadow:var(--ombre);padding:14px 16px;}
.chiffre .val{font-family:var(--police-titres);font-size:1.8rem;color:var(--bleu);line-height:1.1;}
.chiffre .lib{color:var(--encre-soft);font-size:.85rem;margin-top:4px;}
.chiffre.attention .val{color:var(--orange);}
.chiffre.ok .val{color:var(--vert);}
.chiffre.total .val{color:var(--canard);}

/* ---------- messages ---------- */
.retour{font-size:.9rem;margin-bottom:10px;}
.retour.ok{color:var(--vert);}
.retour.err{color:var(--rouge);}
.retour:empty{display:none;}
.note{color:var(--encre-soft);font-size:.88rem;line-height:1.55;}
.alerte{background:#FFF4E5;border:1px solid var(--orange);color:#7A4A05;border-radius:var(--rayon);padding:12px 14px;font-size:.92rem;margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.alerte .texte{flex:1;min-width:240px;}
.alerte button{white-space:nowrap;}

/* ---------- boutons ---------- */
.btn-petit{padding:6px 12px;font-size:.85rem;background:#fff;color:var(--canard);border:1px solid var(--liseret);}
.btn-petit:hover{background:var(--fond-section);}
.btn-petit.danger{background:#fff;color:var(--rouge);border-color:var(--rouge);}
.btn-petit.danger:hover{background:#FBE9E5;}
.btn-petit.ok{color:var(--vert);border-color:var(--vert);}
.btn-petit:disabled{opacity:.45;}
.actions-ligne{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}

/* ---------- liste des brouillons ---------- */
.filtres{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px;}
.filtres .champ{min-width:180px;}
.filtres label{margin:0 0 4px;}
.tableau-defile{overflow-x:auto;}
tr.cliquable{cursor:pointer;}
tr.cliquable:hover td{background:var(--turquoise-pale);}
.badge.pret{background:var(--bleu);}
.badge.facture{background:var(--canard);}
.sous-ligne{display:block;color:var(--encre-faible);font-size:.8rem;}

/* ---------- détail d'un brouillon ---------- */
.retour-liste{display:inline-flex;gap:6px;align-items:center;margin-bottom:10px;font-weight:500;}
.mentions{background:var(--turquoise-pale);border-radius:var(--rayon);padding:12px 14px;margin-bottom:16px;font-size:.92rem;line-height:1.6;color:var(--canard);}
.mentions b{font-weight:600;}
.mentions .rien{color:var(--encre-soft);font-style:italic;}
.bandeau-statut{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px;}
.ligne-brouillon td{vertical-align:top;}
.ligne-brouillon input{padding:6px 8px;}
.ligne-brouillon textarea{padding:6px 8px;font-size:.88rem;min-height:2.6em;resize:vertical;}
.ligne-brouillon .col-lib{min-width:300px;}
.ligne-brouillon .col-num{width:110px;}
.ligne-brouillon .col-remise{width:84px;}
.ligne-brouillon .col-total{width:110px;white-space:nowrap;font-weight:600;color:var(--canard);}
.ligne-brouillon .col-act{width:150px;}
.ligne-brouillon.a-verifier td{background:#FFF9F0;}
.ligne-brouillon .note-ligne{font-size:.82rem;color:var(--encre-soft);margin-top:4px;}
.ligne-brouillon.a-verifier .note-ligne{color:#7A4A05;}
.ligne-brouillon .type{display:block;font-size:.75rem;color:var(--encre-faible);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.badge-ligne{display:inline-block;border-radius:999px;padding:1px 8px;font-size:.74rem;font-weight:500;background:var(--orange);color:#fff;margin-left:6px;}
.badge-ligne.info{background:var(--bleu);}
.lecture td input,.lecture td textarea{background:var(--fond-section);border-color:transparent;}
.totaux{display:flex;justify-content:flex-end;margin:14px 0 6px;}
.totaux table{width:auto;min-width:300px;}
.totaux td{padding:5px 12px;}
.totaux tr.ttc td{font-weight:700;color:var(--canard);border-top:2px solid var(--canard);}
.champs-ligne{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:12px 0;}
.champs-ligne .champ{min-width:220px;flex:1;}
.zone-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px;}
.zone-actions .espace{flex:1;}

/* ---------- fiche d'un client facturé (clients.html) ---------- */
.carte h2{margin:0 0 10px;font-size:1.35rem;}
#vue-detail .carte{margin-bottom:18px;}
.ligne-modele{border:1px solid var(--liseret);border-radius:var(--rayon);padding:12px 14px;margin-bottom:10px;background:var(--carte);}
.ligne-modele.inactive{background:var(--fond-section);opacity:.8;}
.ligne-modele-tete{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;}
.ligne-modele-tete .actions-ligne{flex-shrink:0;}
.panneau{background:var(--fond-section);border-radius:var(--rayon);padding:12px 14px;margin-top:10px;}
.panneau table{background:transparent;}

@media (max-width:700px){
  .topbar{padding:10px 14px 54px;}        /* le widget passe au-dessus : on lui laisse une ligne */
  .entete-page .droite{margin-left:0;}
  .ligne-brouillon .col-lib{min-width:220px;}
}
@media print{
  .topbar,.zone-actions,.retour-liste,footer{display:none !important;}
}