:root {
  --fond: #12151b;
  --fond-2: #1a1f28;
  --fond-3: #222834;
  --trait: #2e3542;
  --texte: #e6e9ef;
  --muet: #8b94a6;
  --accent: #5b9dff;
  --vert: #3fbf7f;
  --orange: #e8a33d;
  --rouge: #e5615e;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 22px;
  background: var(--fond-2);
  border-bottom: 1px solid var(--trait);
}
header h1 { font-size: 18px; margin: 0; font-weight: 600; }
.entete-droite { display: flex; align-items: center; gap: 12px; }
nav { display: flex; gap: 4px; }

.onglet {
  background: none; border: 1px solid transparent; color: var(--muet);
  padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 14px;
}
.onglet:hover { color: var(--texte); background: var(--fond-3); }
.onglet.actif { color: var(--texte); background: var(--fond-3); border-color: var(--trait); }

main { padding: 22px; max-width: 1400px; margin: 0 auto; }
.vue.cachee, .cachee { display: none; }

h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em;
     color: var(--muet); margin: 0 0 12px; font-weight: 600; }

.cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
          gap: 14px; margin-bottom: 22px; }
.carte { background: var(--fond-2); border: 1px solid var(--trait);
         border-radius: 10px; padding: 16px 18px; }
.carte .etiquette { color: var(--muet); font-size: 12px; text-transform: uppercase;
                    letter-spacing: .05em; }
.carte .valeur { font-size: 26px; font-weight: 600; margin-top: 6px;
                 font-variant-numeric: tabular-nums; }
.carte .note { color: var(--muet); font-size: 12px; margin-top: 4px; }

.colonnes { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1000px) { .colonnes { grid-template-columns: 1fr; } }

.bloc { background: var(--fond-2); border: 1px solid var(--trait);
        border-radius: 10px; padding: 16px 18px; }
.bloc + .bloc { margin-top: 18px; }
.bloc h2:not(:first-child) { margin-top: 24px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; color: var(--muet); font-weight: 500; font-size: 12px;
     text-transform: uppercase; letter-spacing: .04em;
     padding: 8px 10px; border-bottom: 1px solid var(--trait); }
td { padding: 9px 10px; border-bottom: 1px solid var(--fond-3); }
tbody tr:hover { background: var(--fond-3); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.vide { color: var(--muet); padding: 18px 10px; }

.barre { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
         margin-bottom: 16px; }
.pousse { flex: 1; }

input, select, textarea {
  background: var(--fond-3); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 7px; padding: 7px 10px;
  font: inherit; font-size: 14px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--muet); }
label.enligne { flex-direction: row; align-items: center; gap: 8px; }

.bouton {
  background: var(--accent); color: #0b0e13; border: 0; border-radius: 7px;
  padding: 8px 14px; font: inherit; font-weight: 600; font-size: 14px;
  cursor: pointer; text-decoration: none; display: inline-block;
}
.bouton:hover { filter: brightness(1.1); }
.bouton.secondaire { background: var(--fond-3); color: var(--texte);
                     border: 1px solid var(--trait); font-weight: 500; }
.bouton.mini { padding: 4px 9px; font-size: 13px; }
.bouton.danger { background: none; color: var(--rouge); border: 1px solid var(--trait); }

.puce { display: inline-block; padding: 2px 9px; border-radius: 20px;
        font-size: 12px; font-weight: 600; }
.puce.payee { background: rgba(63,191,127,.15); color: var(--vert); }
.puce.partielle { background: rgba(232,163,61,.15); color: var(--orange); }
.puce.impayee { background: var(--fond-3); color: var(--muet); }
.puce.en_retard { background: rgba(229,97,94,.15); color: var(--rouge); }
.puce.annulee { background: var(--fond-3); color: var(--muet);
                text-decoration: line-through; }

.jauge { margin-bottom: 16px; }
.jauge .titre { display: flex; justify-content: space-between; font-size: 13px;
                margin-bottom: 6px; }
.jauge .piste { height: 7px; background: var(--fond-3); border-radius: 4px; overflow: hidden; }
.jauge .part { height: 100%; background: var(--accent); border-radius: 4px; }
.jauge .part.alerte { background: var(--orange); }
.jauge .part.danger { background: var(--rouge); }
.jauge .note { font-size: 12px; color: var(--muet); margin-top: 5px; }

.alerte { margin: 14px 22px; padding: 11px 16px; border-radius: 8px;
          background: rgba(229,97,94,.12); border: 1px solid var(--rouge);
          color: var(--rouge); font-size: 14px; }
.alerte.info { background: rgba(91,157,255,.12); border-color: var(--accent); color: var(--accent); }

.muted, .muet { color: var(--muet); font-weight: 400; }

dialog {
  background: var(--fond-2); color: var(--texte); border: 1px solid var(--trait);
  border-radius: 12px; padding: 22px; min-width: 560px; max-width: 94vw;
}
dialog::backdrop { background: rgba(0,0,0,.6); }
#formulaire { display: grid; gap: 12px; }
#formulaire h3 { margin: 0; font-size: 17px; }
.grille-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

.lignes-decl { display: grid; gap: 14px; }
.total-du { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sous-table td, .sous-table th { font-size: 13px; }

/* Editeur de lignes d'une facture : une ligne = une prestation = une activite. */
.bloc-lignes { border: 1px solid var(--trait); border-radius: 9px;
               background: var(--fond); padding: 12px 14px; }
.entete-lignes { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 12px; font-size: 13px; color: var(--muet); margin-bottom: 10px; }
.ligne-facture { display: grid; grid-template-columns: 1fr 1fr 110px 30px;
                 gap: 8px; margin-bottom: 8px; }
.ligne-facture input, .ligne-facture select { min-width: 0; }
.ligne-facture .danger { padding: 4px 0; }
.ligne-facture .danger:disabled { opacity: .3; cursor: default; }
.pied-lignes { display: flex; justify-content: space-between; align-items: center;
               gap: 12px; font-size: 14px; }
.pied-lignes strong { font-variant-numeric: tabular-nums; }
@media (max-width: 620px) {
  .ligne-facture { grid-template-columns: 1fr 1fr; }
  .ligne-facture .danger { grid-column: 2; justify-self: end; }
}

/* Apercu d'import : une carte par facture lue, tout reste modifiable. */
.propositions { display: grid; gap: 14px; margin: 16px 0; }
.proposition { border: 1px solid var(--trait); border-radius: 9px;
               background: var(--fond); padding: 14px 16px; }
.titre-proposition { display: flex; align-items: center; gap: 10px;
                     flex-wrap: wrap; margin-bottom: 12px; }
.titre-proposition .puce { font-weight: 500; }
.lignes-proposition { margin-top: 12px; }
.lignes-proposition .ligne-facture { grid-template-columns: 1fr 1fr 110px 92px;
                                     align-items: center; }
.lignes-proposition .puce { text-align: center; }
.ignores { background: var(--fond-3); border-radius: 8px; padding: 10px 14px;
           font-size: 13px; color: var(--muet); }
.ignores ul { margin: 6px 0 0; padding-left: 18px; }