:root{
  --fond:#f6f7f9; --carte:#fff; --bord:#e3e6ea; --bord-fort:#cfd4da;
  --texte:#15181d; --texte-2:#4d5560; --muet:#858e99;
  --accent:#1f5f4e; --accent-clair:#e8f2ef;
  --rouge:#b3261e; --rouge-clair:#fdecea;
  --orange:#a05a00; --orange-clair:#fff4e2;
  --vert:#1e6b3a; --vert-clair:#e8f4ec;
  --ombre:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.08);
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --fond:#111417; --carte:#191d21; --bord:#282e34; --bord-fort:#39414a;
    --texte:#e8ebee; --texte-2:#aab3bd; --muet:#7d8792;
    --accent:#5fbfa3; --accent-clair:#14302a;
    --rouge:#f18a82; --rouge-clair:#3a1a18;
    --orange:#e0a353; --orange-clair:#352814;
    --vert:#68c98c; --vert-clair:#15301f;
    --ombre:none;
  }
}
*{box-sizing:border-box}
/* Une regle d'auteur qui pose `display` bat le `[hidden]` du navigateur :
   sans ce !important, la modale s'affiche des le chargement de la page. */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--fond); color:var(--texte);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
p{margin:0}
button{font:inherit;cursor:pointer}
a{color:var(--accent)}

/* ------------------------------------------------------------- portail --- */
.portail{min-height:100dvh;display:grid;place-items:center;padding:24px}
.carte-code{
  background:var(--carte);border:1px solid var(--bord);border-radius:14px;
  padding:32px 28px;width:min(360px,100%);text-align:center;box-shadow:var(--ombre);
}
.carte-code .logo{font-size:40px;line-height:1}
.carte-code h1{font-size:22px;margin:10px 0 4px}
.carte-code .sous{color:var(--muet);font-size:13px;margin-bottom:20px}
.carte-code input{
  width:100%;padding:11px 13px;border:1px solid var(--bord-fort);border-radius:9px;
  background:var(--fond);color:var(--texte);font-size:16px;text-align:center;letter-spacing:.12em;
}
.carte-code button{
  width:100%;margin-top:12px;padding:11px;border:0;border-radius:9px;
  background:var(--accent);color:#fff;font-weight:600;
}
@media (prefers-color-scheme:dark){.carte-code button{color:#0d1a17}}
.erreur{color:var(--rouge);font-size:13px;margin-top:12px;min-height:1.2em}

/* -------------------------------------------------------------- entete --- */
/* Entete et onglets forment UN bloc collant. Les empiler avec deux `top`
   codes en dur (57 px, 99 px) laissait passer le contenu dans l'interstice
   des que la hauteur reelle changeait d'un pixel. La hauteur mesuree est
   publiee dans --haut, dont l'en-tete de tableau se sert. */
.barre-haute{position:sticky;top:0;z-index:30;background:var(--fond)}
.entete{
  background:var(--carte);
  border-bottom:1px solid var(--bord);padding:12px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.entete-titre{display:flex;align-items:center;gap:11px;min-width:0}
.logo-petit{font-size:22px}
.entete h1{font-size:17px}
.entete p{color:var(--muet);font-size:12.5px}
.entete-actions{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:13px}
.lien{background:none;border:0;color:var(--texte-2);padding:0;text-decoration:underline;text-underline-offset:3px}
.lien:hover{color:var(--texte)}
.lien.danger{color:var(--rouge)}

/* ------------------------------------------------------------- onglets --- */
.onglets{
  background:var(--fond);
  border-bottom:1px solid var(--bord);padding:0 20px;
  display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;
}
.onglets::-webkit-scrollbar{display:none}
.onglets button{
  background:none;border:0;border-bottom:2px solid transparent;color:var(--texte-2);
  padding:11px 12px;white-space:nowrap;font-weight:550;font-size:13.5px;
}
.onglets button[aria-current="true"]{color:var(--texte);border-bottom-color:var(--accent)}
.onglets .pastille{
  display:inline-block;min-width:17px;padding:0 5px;margin-left:6px;border-radius:9px;
  background:var(--rouge-clair);color:var(--rouge);font-size:11px;font-weight:700;line-height:17px;
}

/* --------------------------------------------------------------- pages --- */
main{padding:20px;max-width:1240px;margin:0 auto}
.bloc{margin-bottom:26px}
.bloc>h2{font-size:15px;margin-bottom:4px}
.bloc>.chapo{color:var(--muet);font-size:13px;margin-bottom:12px}

.tuiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.tuile{background:var(--carte);border:1px solid var(--bord);border-radius:11px;padding:14px 15px;box-shadow:var(--ombre)}
.tuile .lb{color:var(--muet);font-size:12px;font-weight:550}
.tuile .vl{font-size:23px;font-weight:660;margin-top:3px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.tuile .nt{color:var(--texte-2);font-size:12px;margin-top:3px}
.tuile.alerte{border-color:var(--rouge);background:var(--rouge-clair)}
.tuile.alerte .vl{color:var(--rouge)}

/* Surtout PAS d'overflow ici en grand ecran : `overflow` fait du cadre un
   conteneur de defilement, et l'en-tete collant se cale alors sur le haut du
   CADRE (99 px plus bas) au lieu du haut de la fenetre -- il flottait au
   milieu du tableau. Sous 1024 px, le tableau defile dans son cadre et
   l'en-tete redevient normal. */
.cadre{background:var(--carte);border:1px solid var(--bord);border-radius:11px;box-shadow:var(--ombre)}
@media (max-width:1023px){
  .cadre{overflow-x:auto}
  thead th{position:static}
}

table{width:100%;border-collapse:collapse;font-size:13.5px}
thead th{
  position:sticky;top:var(--haut,100px);z-index:5;background:var(--carte);
  text-align:left;font-weight:600;color:var(--texte-2);font-size:12px;
  letter-spacing:.02em;text-transform:uppercase;
  padding:9px 12px;border-bottom:1px solid var(--bord);white-space:nowrap;
}
tbody td{padding:9px 12px;border-bottom:1px solid var(--bord);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr.cliquable{cursor:pointer}
tbody tr.cliquable:hover{background:var(--accent-clair)}
tbody tr.inactif td{opacity:.5}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.principal{font-weight:600}
.secondaire-txt{color:var(--muet);font-size:12px;margin-top:2px}
.vide{color:var(--muet)}
tfoot td{padding:10px 12px;border-top:2px solid var(--bord-fort);font-weight:650;background:var(--carte)}

.puce{display:inline-block;padding:1px 7px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.puce.rouge{background:var(--rouge-clair);color:var(--rouge)}
.puce.orange{background:var(--orange-clair);color:var(--orange)}
.puce.vert{background:var(--vert-clair);color:var(--vert)}
.puce.gris{background:var(--fond);color:var(--muet);border:1px solid var(--bord)}
.baisse{color:var(--vert);font-weight:600}
.hausse{color:var(--rouge);font-weight:600}

.alertes{display:flex;flex-direction:column;gap:8px}
.alerte-ligne{
  display:flex;gap:11px;align-items:flex-start;background:var(--carte);
  border:1px solid var(--bord);border-left:3px solid var(--bord-fort);
  border-radius:9px;padding:11px 13px;cursor:pointer;
}
.alerte-ligne:hover{border-color:var(--bord-fort)}
.alerte-ligne.rouge{border-left-color:var(--rouge)}
.alerte-ligne.orange{border-left-color:var(--orange)}
.alerte-ligne .qui{font-weight:600}
.alerte-ligne .quoi{color:var(--texte-2);font-size:13px;margin-top:1px}
.alerte-ligne .ou{color:var(--muet);font-size:11.5px;margin-top:3px}

.vide-etat{color:var(--muet);padding:26px;text-align:center;background:var(--carte);
  border:1px dashed var(--bord-fort);border-radius:11px}

.barre-outils{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.primaire{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:600}
@media (prefers-color-scheme:dark){.primaire{color:#0d1a17}}
.secondaire{background:var(--carte);color:var(--texte);border:1px solid var(--bord-fort);border-radius:8px;padding:8px 14px;font-weight:550}

/* --------------------------------------------------------------- modale --- */
.modale{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px}
.modale-fond{position:absolute;inset:0;background:rgba(10,14,18,.5)}
.modale-boite{
  position:relative;background:var(--carte);border:1px solid var(--bord);border-radius:14px;
  width:min(720px,100%);max-height:90dvh;display:flex;flex-direction:column;box-shadow:0 20px 50px rgba(0,0,0,.25);
}
.modale-tete{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--bord)}
.modale-tete h2{font-size:16px;flex:1;min-width:0}
.modale-corps{padding:18px;overflow:auto}
.modale-pied{display:flex;align-items:center;gap:10px;padding:14px 18px;border-top:1px solid var(--bord)}
.modale-pied .espace{flex:1}

.champs{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.champ{display:flex;flex-direction:column;gap:4px}
.champ.large{grid-column:1/-1}
.champ label{font-size:12px;color:var(--muet);font-weight:600}
.champ input,.champ select,.champ textarea{
  padding:8px 10px;border:1px solid var(--bord-fort);border-radius:8px;
  background:var(--fond);color:var(--texte);font:inherit;width:100%;
}
.champ textarea{min-height:64px;resize:vertical}
.champ .aide{font-size:11.5px;color:var(--muet)}
.champ.coche{flex-direction:row;align-items:center;gap:8px}
/* Sans ceci, le `width:100%` des champs s'applique aussi a la case a cocher :
   elle s'etirait sur toute la largeur et repoussait son libelle. */
.champ.coche input{width:auto;flex:0 0 auto;margin:0}
.champ.coche label{font-size:13px;color:var(--texte);font-weight:500}

.millesimes{margin-top:20px}
.millesimes h3{font-size:13px;color:var(--texte-2);margin-bottom:8px}
.mill-ligne{display:grid;grid-template-columns:104px 1fr 120px 92px;gap:9px;align-items:center;margin-bottom:8px}
.mill-ligne .p{font-weight:600;font-size:13px}
.mill-ligne input{padding:7px 9px;border:1px solid var(--bord-fort);border-radius:7px;background:var(--fond);color:var(--texte);font:inherit;width:100%}
.mill-ligne .devis{font-size:11.5px;color:var(--muet);text-align:center}

.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;
  background:var(--texte);color:var(--fond);padding:10px 16px;border-radius:9px;font-size:13.5px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.toast.ko{background:var(--rouge);color:#fff}

.pied{padding:16px 20px 40px;text-align:center;color:var(--muet);font-size:12px}

@media (max-width:720px){
  .entete{padding:10px 14px}
  .onglets{padding:0 8px}
  main{padding:14px}
  .champs{grid-template-columns:1fr}
  .mill-ligne{grid-template-columns:1fr 1fr;gap:7px}
  .mill-ligne .p{grid-column:1/-1}
}