:root{--bleu:#005a9c;--bleu-f:#003f6e;--orange:#e87722;--fond:#f4f6f9;--carte:#fff;--texte:#1d2733;--doux:#5b6878;--trait:#dfe5ec;
--ok:#1f8a4c;--ok-f:#e6f4ec;--cours:#b85c00;--cours-f:#fdf0e3;--afaire:#5b6878;--afaire-f:#eef1f5;--bloque:#c0392b;--bloque-f:#fbeaea;--accent-f:#e8f1f8}
@media (prefers-color-scheme:dark){:root{--bleu:#5aa7e6;--bleu-f:#9cc9ef;--orange:#f39a4f;--fond:#0f141a;--carte:#18202a;--texte:#e6ebf1;--doux:#9aa7b6;--trait:#2a3542;
--ok:#4cc27e;--ok-f:#173325;--cours:#f2a253;--cours-f:#3a2915;--afaire:#9aa7b6;--afaire-f:#222c37;--bloque:#ef6f61;--bloque-f:#3b1d1a;--accent-f:#1b2a3a}}
*{box-sizing:border-box}html,body{margin:0}
body{font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fond);color:var(--texte)}
a{color:var(--bleu)}
.marque{font-weight:800;font-style:italic;font-size:22px;letter-spacing:-.5px}.marque b{color:var(--bleu)}.marque i{color:var(--orange)}
header{background:var(--carte);border-bottom:3px solid var(--orange);position:sticky;top:0;z-index:5}
.haut{display:flex;align-items:center;gap:16px;padding:10px 20px;max-width:1240px;margin:auto}
.haut .titre{color:var(--doux);font-size:13px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.haut .moi{font-size:13px;color:var(--doux);white-space:nowrap}
nav{display:flex;gap:2px;overflow-x:auto;padding:0 16px;max-width:1240px;margin:auto;scrollbar-width:none}
nav button{background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-3px;padding:10px 12px;font:inherit;font-size:14px;color:var(--doux);cursor:pointer;white-space:nowrap}
nav button.on{color:var(--bleu);border-color:var(--bleu);font-weight:600}
nav .pastille{background:var(--orange);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:4px}
main{max-width:1240px;margin:auto;padding:20px 16px 60px}
h1{font-size:22px;margin:0 0 4px;color:var(--bleu-f)}h2{font-size:17px;margin:28px 0 10px;color:var(--bleu-f)}
.sous{color:var(--doux);margin:0 0 18px;font-size:14px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.carte{background:var(--carte);border:1px solid var(--trait);border-radius:8px;padding:14px 16px}
.chiffre{font-size:26px;font-weight:700;color:var(--bleu-f)}.libelle{font-size:12px;color:var(--doux);text-transform:uppercase;letter-spacing:.5px}
.barre{height:10px;background:var(--afaire-f);border-radius:5px;overflow:hidden;display:flex}
.barre span{display:block;height:100%}
.etiq{display:inline-block;font-size:12px;padding:1px 9px;border-radius:10px;font-weight:600;white-space:nowrap}
.s-ok{background:var(--ok-f);color:var(--ok)}.s-en_cours{background:var(--cours-f);color:var(--cours)}.s-a_faire{background:var(--afaire-f);color:var(--afaire)}.s-bloque{background:var(--bloque-f);color:var(--bloque)}
.o-technickel{color:var(--bleu)}.o-client{color:var(--orange)}.o-tiers{color:var(--doux)}
.jalon{background:var(--carte);border:1px solid var(--trait);border-radius:8px;margin-bottom:14px;overflow:hidden}
.jalon-tete{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--accent-f);flex-wrap:wrap}
.jalon-tete .num{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--doux);min-width:60px}
.jalon-tete .nom{font-weight:700;flex:1;color:var(--bleu-f);min-width:180px}
.jalon-tete .sem{background:var(--orange);color:#fff;border-radius:4px;padding:1px 8px;font-size:12px;font-weight:600}
.jalon-tete .dates{font-size:13px;color:var(--doux)}
.jalon-corps{padding:6px 16px 12px}
.tache{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed var(--trait)}
.tache:last-child{border:0}.tache .t{flex:1}.tache .qui{font-size:12px;font-weight:600;min-width:84px}
.tache .note{display:block;font-size:12px;color:var(--doux)}
.tache button.etiq{border:0;cursor:pointer}
.resultat{font-size:13px;color:var(--bleu-f);padding-top:8px;border-top:1px solid var(--trait);margin-top:4px}.resultat b{color:var(--orange)}
.filtres{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.filtres button,.btn{border:1px solid var(--trait);background:var(--carte);color:var(--texte);border-radius:6px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.filtres button.on{background:var(--bleu);border-color:var(--bleu);color:#fff}
.btn.prim{background:var(--bleu);border-color:var(--bleu);color:#fff}.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}.btn.non{color:var(--bloque)}
.btn:disabled{opacity:.5;cursor:default}
.produits{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.produit h3{margin:0 0 2px;font-size:16px}.produit .meta{font-size:12px;color:var(--doux);margin-bottom:8px}
.calc{display:grid;grid-template-columns:1fr auto;font-size:13px;gap:1px 12px;margin:8px 0;padding:8px;background:var(--fond);border-radius:6px}
.calc .tot{font-weight:700;border-top:1px solid var(--trait);padding-top:3px}
.produit p{font-size:13px;margin:6px 0}.produit ul{margin:4px 0;padding-left:18px;font-size:12px;color:var(--doux)}
.actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.moteur{font-size:11px;font-weight:700;padding:1px 7px;border-radius:4px;background:var(--afaire-f)}
.moteur.deepseek{color:#4d6bfe}.moteur.claude{color:#c96442}
table{width:100%;border-collapse:collapse;background:var(--carte);border:1px solid var(--trait);border-radius:8px;overflow:hidden;font-size:13px}
th{text-align:left;background:var(--accent-f);color:var(--bleu-f);font-weight:600;padding:8px 10px;white-space:nowrap}
td{padding:7px 10px;border-top:1px solid var(--trait);vertical-align:top}
.tablo{overflow-x:auto}
.vide{color:var(--doux);background:var(--carte);border:1px dashed var(--trait);border-radius:8px;padding:24px;text-align:center}
.reglage{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--trait);flex-wrap:wrap}
.reglage input{width:120px;padding:6px 8px;border:1px solid var(--trait);border-radius:6px;font:inherit;background:var(--fond);color:var(--texte)}
.info{background:var(--accent-f);border-left:4px solid var(--bleu);padding:10px 14px;border-radius:4px;font-size:13px;margin:12px 0}
.info.orange{background:var(--cours-f);border-color:var(--orange)}
.legende{display:flex;gap:14px;font-size:12px;color:var(--doux);flex-wrap:wrap;margin:8px 0 16px}
.legende i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
@media (max-width:640px){.haut .titre{display:none}.tache{flex-wrap:wrap}.tache .qui{min-width:0}.produits{grid-template-columns:1fr}}