:root{--fond:#f3f6f4;--carte:#fff;--texte:#1d2b25;--accent:#1f7a4d;--accent2:#e8f3ec;--bord:#d5e0d9;--alerte:#b3261e}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fond);color:var(--texte);line-height:1.45}
header.top{background:var(--accent);color:#fff;padding:18px 24px}
header.top h1{margin:0;font-size:1.5rem}header.top p{margin:4px 0 0;opacity:.9}
main{max-width:1100px;margin:0 auto;padding:20px}
.carte{background:var(--carte);border:1px solid var(--bord);border-radius:12px;padding:20px;margin-bottom:20px}
.carte.petit{max-width:560px;margin:40px auto}
h2{margin:0 0 4px;color:var(--accent);font-size:1.25rem}
.aide{margin:0 0 14px;color:#55665d;font-size:.92rem}
label{display:block;font-weight:600;margin:12px 0}
input,select{display:block;width:100%;padding:9px 10px;margin-top:4px;border:1px solid var(--bord);border-radius:8px;font:inherit;background:#fff}
.ligne{display:grid;grid-template-columns:1.1fr 1.4fr .8fr auto;gap:10px;align-items:start;padding:12px;background:var(--accent2);border-radius:10px;margin-bottom:10px}
.ligne label{margin:0;font-size:.85rem}
.ligne .msg{grid-column:1/-1;font-size:.9rem;color:#2e4a3c;min-height:1.2em}
.btn{background:var(--accent);color:#fff;border:0;border-radius:8px;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{filter:brightness(1.1)}
.btn.sec{background:#fff;color:var(--accent);border:1px solid var(--accent)}
.btn.suppr{background:#fff;color:var(--alerte);border:1px solid var(--bord);padding:9px 12px;margin-top:22px}
.barre{text-align:center;margin:10px 0 24px}
.barre .btn{font-size:1.15rem;padding:14px 38px}
.alerte{color:var(--alerte);background:#fdecea;padding:10px;border-radius:8px}
.succes{color:#14532d;background:#dcfce7;padding:10px;border-radius:8px}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.graph{border:1px solid var(--bord);border-radius:12px;padding:14px;background:#fff;text-align:center}
.graph h3{margin:0 0 2px;font-size:1.05rem}
.graph .tot{font-size:.85rem;color:#55665d;margin-bottom:6px}
.graph svg{width:200px;height:200px}
.legende{list-style:none;margin:8px 0 0;padding:0;text-align:left;font-size:.9rem}
.legende li{display:flex;align-items:center;gap:8px;padding:2px 0}
.legende i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legende b{margin-left:auto}
.vide{color:#55665d;font-style:italic}
.ligne .com{grid-column:1/-1}
.ligne .poids{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end}
.poids .pd{width:170px}
.unites{border:0;margin:0;padding:0;min-width:0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.unites legend{font-size:.85rem;font-weight:600;padding:0;margin-bottom:6px}
.ligne .unites label{display:flex;align-items:center;gap:6px;font-weight:500;font-size:.95rem}
.unites input[type=radio]{width:auto;display:inline-block;margin:0}
.sauvegarde{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.sauvegarde .sv-txt{flex:1 1 320px;font-size:.95rem}
.sauvegarde .sv-nom{flex:1 1 100%;margin:0}
.sauvegarde .sv-btn{display:flex;gap:10px;flex-wrap:wrap}
.sauvegarde #info,.sauvegarde #cmp-info{flex:1 1 100%;margin:0}
.cmp-legende{display:flex;flex-wrap:wrap;gap:8px 24px;margin:0 0 14px;font-weight:600}
.cmp-leg{display:inline-flex;align-items:center;gap:8px}
.cmp-leg i{width:14px;height:14px;border-radius:3px;display:inline-block}
.cmp-h{margin:26px 0 10px;color:var(--accent);font-size:1.08rem}
#recap,.graph .defil{overflow-x:auto}
.graph svg.histo{width:100%;height:auto;max-width:520px}
.graph.large{margin-bottom:6px}
.graph.large svg.histo{max-width:none;min-width:620px}
.graph.large .defil:last-child{margin-top:14px;text-align:left}
.bl{display:grid;grid-template-columns:minmax(120px,32%) 1fr 64px;gap:10px;align-items:center;padding:5px 0;border-bottom:1px dashed var(--bord);cursor:help}
.bl-lab{font-size:.92rem;overflow-wrap:anywhere}
.bl-piste{background:#d3e0d8;border-radius:6px;height:22px;overflow:hidden}
.bl-fill{height:22px;background:#2f8f5f;border-radius:6px}
.bl-fill.top{background:var(--alerte)}
.bl-val{text-align:right;font-weight:700;font-size:.92rem}
table.recap{width:100%;border-collapse:collapse;font-size:.92rem}
table.recap th,table.recap td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--bord);vertical-align:top}
table.recap th{background:var(--accent2)}
@media(max-width:720px){.ligne{grid-template-columns:1fr}.btn.suppr{margin-top:0}}

/* ---- admin.php ---- */
.admin-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.form-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px 18px}
.form-grille label small{display:block;font-weight:400;color:#55665d;font-size:.82rem}
fieldset.bloc{border:1px solid var(--bord);border-radius:10px;padding:6px 16px 12px;margin:0 0 16px;min-width:0}
fieldset.bloc legend{font-weight:700;color:var(--accent);padding:0 8px}
.somme{font-weight:600;margin:6px 0 0;min-height:1.3em}
.somme.ok{color:#14532d}.somme.attention{color:var(--alerte)}
.alerte ul{margin:6px 0 0;padding-left:20px}
.alerte.attention{background:#fff4e0;color:#7a4a00}
label.coche{display:flex;align-items:center;gap:8px;font-weight:600}
label.coche input{width:auto;margin:0}

/* ---- Rapport PDF / impression : les graphiques ne sont jamais coupés entre deux pages ---- */
#entete-rapport h1{margin:0 0 4px;font-size:1.5rem;color:var(--accent)}
#entete-rapport p{margin:0 0 14px;color:#55665d}
@page{size:A4;margin:14mm}
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{background:#fff}
  header.top,.sauvegarde,#fabrication,#utilisation,#transport,.barre,#erreur{display:none!important}
  main{max-width:none;padding:0;margin:0}
  .carte{border:0;padding:0;margin:0;box-shadow:none}
  .bloc-rapport{break-inside:avoid;page-break-inside:avoid}
  h2,h3{break-after:avoid;page-break-after:avoid}
  .aide{break-after:avoid;page-break-after:avoid}
  .grille{display:flex;flex-wrap:wrap;gap:12px}
  .grille>.graph{flex:1 1 44%;max-width:48%}
  .graph{break-inside:avoid;page-break-inside:avoid}
  .graph.large{flex:none;max-width:none}
  .graph.large svg.histo{min-width:0;width:100%;max-width:none}
  .graph.large .defil{overflow:visible}
  #barres .bl,table.recap tr{break-inside:avoid;page-break-inside:avoid}
  #points,#cmp-synthese{break-inside:avoid;page-break-inside:avoid}
  #recap,.graph .defil{overflow:visible}
}