/* Onfacture — identité « interrupteur ON » : bleu confiance + vert validé/payé */
:root {
    --fond: #f4f6fb;
    --carte: #ffffff;
    --encre: #16233a;
    --sourdine: #64708a;
    --bord: #e0e5ef;
    --accent: #2f57ff;          /* bleu principal */
    --accent-fonce: #1c3fd6;
    --vert: #12b46c;            /* vert « on » / validé / payé */
    --vert-fonce: #0e9459;
    --ok: #12b46c;
    --erreur: #d64545;
}
* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    background: var(--fond);
    color: var(--encre);
    line-height: 1.5;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

header.bandeau {
    background: var(--carte);
    border-bottom: 1px solid var(--bord);
    padding: 0.6rem 1rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.marque { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; font-size: 1.2rem; color: var(--encre); letter-spacing: -0.02em; }
.marque img { height: 1.5rem; width: auto; display: block; }
.marque .txt span { color: var(--vert); }
.marque .txt { color: var(--encre); }
nav.principale { display: flex; gap: 1rem; flex-wrap: wrap; }
nav.principale a { color: var(--sourdine); font-weight: 500; }
nav.principale a.actif { color: var(--accent); }
.bandeau .droite { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; color: var(--sourdine); font-size: 0.9rem; }

main { max-width: 960px; margin: 1.5rem auto; padding: 0 1rem; }
.carte {
    background: var(--carte);
    border: 1px solid var(--bord);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}
h1 { font-size: 1.4rem; margin: 0 0 1rem; }
h2 { font-size: 1.1rem; }

.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 10px; padding: 1rem; }
.tuile .chiffre { font-size: 1.8rem; font-weight: 700; }
.tuile .libelle { color: var(--sourdine); font-size: 0.9rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--bord); font-size: 0.95rem; }
th { color: var(--sourdine); font-weight: 600; font-size: 0.85rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

.bouton {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.bouton:hover { background: var(--accent-fonce); text-decoration: none; }
.bouton.secondaire { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.bouton.discret { background: transparent; color: var(--sourdine); border: 1px solid var(--bord); }
.bouton.valider { background: var(--vert); }
.bouton.valider:hover { background: var(--vert-fonce); }

label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--sourdine); margin-bottom: 0.2rem; }
input, select, textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--bord);
    border-radius: 8px;
    font-size: 0.95rem;
    background: #fff;
    color: var(--encre);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.champ { margin-bottom: 0.9rem; }
.grille { display: grid; gap: 0.9rem 1rem; }
.grille.deux { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.alerte { border-radius: 8px; padding: 0.7rem 1rem; margin-bottom: 1rem; }
.alerte.succes { background: #e7f6ee; color: var(--ok); border: 1px solid #bfe6d1; }
.alerte.erreur { background: #fdeceb; color: var(--erreur); border: 1px solid #f3c4bf; }

.badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge.facture { background: #e5edff; color: var(--accent-fonce); }
.badge.devis { background: #fff3d9; color: #8a6100; }
.badge.avoir { background: #fdeceb; color: var(--erreur); }

.page-login { display: flex; min-height: 100vh; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 50% -10%, #e8edff 0%, var(--fond) 55%); }
.page-login .carte { width: 100%; max-width: 380px; box-shadow: 0 12px 40px rgba(22,35,58,0.10); border-color: #e6ebf5; }
.page-login .bouton { background: var(--vert); }
.page-login .bouton:hover { background: var(--vert-fonce); }

.lignes-doc td { vertical-align: top; }
.lignes-doc input { min-width: 0; }
.actions-bas { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; align-items: center; }

.pied { max-width: 960px; margin: 2rem auto 1.5rem; padding: 1rem; color: var(--sourdine); font-size: 0.85rem; text-align: center; border-top: 1px solid var(--bord); }
.pied a { color: var(--sourdine); }
.pied .marque-pied { font-weight: 800; color: var(--encre); }
.pied .marque-pied span { color: var(--vert); }