:root {
  --fond: #f6f7f9;
  --carte: #ffffff;
  --texte: #1d2330;
  --muet: #6b7280;
  --bord: #e3e6eb;
  --accent: #4f46e5;
  --vert: #d9f2e0;   --vert-bord: #34a853;
  --jaune: #fff4c2;  --jaune-bord: #e0b400;
  --orange: #ffe1c7; --orange-bord: #f07c1b;
  --rouge: #fbd5d5;  --rouge-bord: #d93025;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, "Segoe UI", sans-serif; background: var(--fond); color: var(--texte); }
main { padding: 16px 20px 40px; }
h1 { margin: 0 0 4px; font-size: 22px; }
h2 { margin: 0 0 12px; font-size: 18px; }
h3 { margin: 18px 0 8px; font-size: 14px; }
.muet { color: var(--muet); }
.petit { font-size: 11.5px; }
.alerte { color: #b45309; }
.ok { color: #15803d; }
.droite { text-align: right; }

/* barre du haut */
.barre { display: flex; align-items: center; gap: 24px; padding: 10px 20px; background: #1d2330; }
.barre a { color: #cbd2dd; text-decoration: none; }
.barre .logo { color: #fff; font-weight: 700; }
.barre nav { display: flex; gap: 16px; }
.barre nav a.actif { color: #fff; border-bottom: 2px solid #8b85ff; padding-bottom: 2px; }

/* boutons */
.bouton { display: inline-block; border: 0; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: 6px;
  font: inherit; cursor: pointer; text-decoration: none; }
.bouton:disabled { opacity: .6; cursor: wait; }
.bouton.secondaire { background: #fff; color: var(--texte); border: 1px solid var(--bord); }
.lien { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }

.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.actions { display: flex; gap: 8px; }
.legende { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; font-size: 12.5px; }
.pastille { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; vertical-align: -1px; }
.pastille.vert { background: var(--vert-bord); } .pastille.jaune { background: var(--jaune-bord); }
.pastille.orange { background: var(--orange-bord); } .pastille.rouge { background: var(--rouge-bord); }
.aide { margin-top: 10px; }

/* tableau */
.cadre-tableau { overflow-x: auto; background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; }
.tableau { border-collapse: separate; border-spacing: 0; width: 100%; }
.tableau th, .tableau td { border-bottom: 1px solid var(--bord); padding: 6px 8px; vertical-align: top; }
.tableau thead th { position: sticky; top: 0; background: #fafbfc; font-weight: 600; font-size: 12.5px; white-space: nowrap; text-align: left; }
.tableau thead th.en-cours { background: #eef0ff; }
.badge { font-size: 10.5px; font-weight: 500; color: var(--accent); }
.col-nom { position: sticky; left: 0; background: var(--carte); text-align: left; min-width: 150px; z-index: 1; }
thead .col-nom { z-index: 2; background: #fafbfc; }
.ligne-client th, .ligne-client td { background: #f0f2f6; border-top: 2px solid #cfd5df; }
.ligne-client .col-nom { font-weight: 700; background: #f0f2f6; }
.ligne-modele .col-nom { padding-left: 18px; }
.ligne-modele.partie { opacity: .55; }
.nom-modele { background: none; border: 0; padding: 0; font: inherit; color: var(--texte); cursor: pointer; text-align: left; }
.nom-modele:hover { color: var(--accent); text-decoration: underline; }
.case { min-width: 118px; white-space: nowrap; border-left: 4px solid transparent; }
.case.cliquable { cursor: pointer; }
.case.cliquable:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.case .obj { color: var(--muet); }
.case .pct { font-weight: 600; }
.case.en-cours { border-left-style: dashed; }
.case.vert { background: var(--vert); border-left-color: var(--vert-bord); }
.case.jaune { background: var(--jaune); border-left-color: var(--jaune-bord); }
.case.orange { background: var(--orange); border-left-color: var(--orange-bord); }
.case.rouge { background: var(--rouge); border-left-color: var(--rouge-bord); }

/* fenêtre (détail, réglages modèle) */
.fenetre { position: fixed; inset: 0; background: rgba(15, 20, 30, .45); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 10; }
.fenetre[hidden] { display: none; }
.fenetre-boite { position: relative; background: var(--carte); border-radius: 10px; padding: 20px 22px; width: min(760px, 100%);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.fermer { position: absolute; top: 8px; right: 12px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--muet); }
.chiffres { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.chiffres div { background: var(--fond); border-radius: 6px; padding: 8px 10px; }
.chiffres span { display: block; font-size: 11.5px; color: var(--muet); }
.chiffres strong { font-size: 16px; }
.colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .colonnes { grid-template-columns: 1fr; } }
.liste { width: 100%; border-collapse: collapse; }
.liste td, .liste th { padding: 4px 6px; border-bottom: 1px solid var(--bord); text-align: left; font-weight: normal; }
.liste th { color: var(--muet); font-size: 12px; }

form label { display: inline-flex; align-items: center; gap: 6px; margin: 4px 14px 4px 0; }
input[type=text], input[inputmode], input[type=date], input[type=number] { font: inherit; padding: 6px 8px; border: 1px solid var(--bord); border-radius: 6px; }
input[inputmode] { width: 110px; } input[type=number] { width: 80px; }
.carte { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 16px 20px; max-width: 620px; }
.reglages label { display: flex; margin: 6px 0; }

/* facturation */
.case-client .badge-facture { font-size: 11px; margin-top: 2px; }
.badge-facture.payee { color: #15803d; }
.badge-facture.non_payee { color: #b45309; }
.etiquette { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; background: #eef0ff; color: var(--accent); font-weight: 500; }
.etiquette.orange { background: var(--orange); color: #9a4a0b; }
.bouton-analyse { font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--bord); background: #fff; cursor: pointer; }
.bouton-analyse.important { border-color: var(--orange-bord); background: var(--orange); }
.bouton-analyse:disabled { opacity: .5; cursor: wait; }
label.bloc { display: block; margin: 10px 0 0; }
label.bloc textarea, label.bloc input[type=text], #message { display: block; width: 100%; margin-top: 4px; font: inherit; padding: 8px;
  border: 1px solid var(--bord); border-radius: 6px; }
#message { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.ligne-champs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 10px; }
.ligne-champs input[type=text] { width: 160px; }
.actions-facture { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.paliers input { width: 90px; }
code { background: var(--fond); padding: 1px 4px; border-radius: 4px; }
.menu-contextuel { position: absolute; z-index: 20; background: #fff; border: 1px solid var(--bord); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15); padding: 4px; min-width: 220px; max-width: 260px; }
.menu-contextuel[hidden] { display: none; }
.menu-contextuel button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 10px; font: inherit; cursor: pointer; border-radius: 6px; }
.menu-contextuel button:hover { background: var(--fond); }
.menu-contextuel div { padding: 6px 10px; }
.avertissement { background: var(--orange); border-left: 4px solid var(--orange-bord); padding: 8px 12px; border-radius: 6px; margin: 0 0 10px; }

/* comptes */
.barre .compte { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; }
.barre .compte a.actif { color: #fff; }
.barre .compte form { margin: 0; }
.lien-barre { background: none; border: 0; color: #cbd2dd; cursor: pointer; font: inherit; padding: 0; }
.lien-barre:hover, .barre .compte a:hover { color: #fff; }
.carte-connexion { max-width: 420px; margin: 40px auto; }
.carte-connexion input[type=text], .carte-connexion input[type=password] { display: block; width: 100%; margin-top: 4px; font: inherit;
  padding: 8px; border: 1px solid var(--bord); border-radius: 6px; }
.carte-connexion .bouton { margin-top: 14px; }
form.en-ligne { display: inline; }
code.mdp { font-size: 16px; padding: 2px 8px; user-select: all; }
.carte + .carte { margin-top: 16px; }