:root{
  --anthracite:#1F2A33;
  --anthracite-clair:#2C3A45;
  --orange:#E8710A;
  --orange-clair:#FFF1E3;
  --vert:#1B7A5A;
  --rouge:#C0392B;
  --bleu:#1F6FB2;
  --fond:#F2F4F6;
  --carte:#FFFFFF;
  --trait:#DFE4E9;
  --texte:#1F2A33;
  --texte-doux:#65727C;
  --rayon:14px;
  --ombre:0 1px 2px rgba(31,42,51,.06), 0 8px 24px rgba(31,42,51,.06);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--texte);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.45;
}
h1,h2,h3{margin:0 0 .6rem}
h1{font-size:1.45rem}
h2{font-size:1.1rem}
h3{font-size:.95rem}

/* ---------- Barre du haut ---------- */
.topbar{
  background:var(--anthracite); color:#fff; padding:.7rem 1.2rem .1rem;
  position:sticky; top:0; z-index:20;
}
.marque{display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem}
.marque-carre{
  width:40px;height:40px;border-radius:11px;background:var(--orange);
  display:grid;place-items:center;font-weight:700;letter-spacing:.5px
}
.marque-nom{font-weight:700; font-size:1.05rem}
.marque-sous{font-size:.78rem; color:#A9B6C0}
.onglets{display:flex; gap:.25rem; overflow-x:auto}
.onglet{
  background:none;border:0;color:#A9B6C0;padding:.55rem .9rem;cursor:pointer;
  border-radius:10px 10px 0 0; font-size:.9rem; white-space:nowrap; font-family:inherit
}
.onglet:hover{color:#fff}
.onglet.actif{background:var(--fond); color:var(--anthracite); font-weight:600}

/* ---------- Structure ---------- */
main{padding:1.2rem; max-width:1180px; margin:0 auto}
.carte{
  background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon);
  padding:1rem 1.1rem; box-shadow:var(--ombre); margin-bottom:1rem
}
.entete-vue{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.grille{display:grid; gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.doux{color:var(--texte-doux); font-size:.85rem}
.vide{padding:2rem; text-align:center; color:var(--texte-doux)}

/* ---------- Boutons ---------- */
button, .btn{font-family:inherit; font-size:.9rem}
.btn{
  border:1px solid var(--trait); background:#fff; color:var(--texte);
  padding:.5rem .9rem; border-radius:999px; cursor:pointer; white-space:nowrap
}
.btn:hover{background:#F7F9FA}
.btn-plein{background:var(--orange); border-color:var(--orange); color:#fff; font-weight:600}
.btn-plein:hover{background:#CE6208}
.btn-sombre{background:var(--anthracite); border-color:var(--anthracite); color:#fff}
.btn-danger{color:var(--rouge); border-color:#E9C4BF}
.btn-danger:hover{background:#FDF3F2}
.btn-min{padding:.28rem .6rem; font-size:.8rem}

/* ---------- Champs ---------- */
label{display:block; font-size:.78rem; color:var(--texte-doux); margin-bottom:.25rem}
input,select,textarea{
  width:100%; padding:.5rem .65rem; border:1px solid var(--trait); border-radius:10px;
  font-family:inherit; font-size:.9rem; background:#fff; color:var(--texte)
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange-clair); border-color:var(--orange)}
.champ{margin-bottom:.8rem}
.ligne-champs{display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
input[type=number]{text-align:right}

/* ---------- Tableaux ---------- */
table{width:100%; border-collapse:collapse; font-size:.88rem}
th{text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:var(--texte-doux); font-weight:600; padding:.45rem .5rem; border-bottom:1px solid var(--trait)}
td{padding:.5rem; border-bottom:1px solid #EDF0F2; vertical-align:middle}
tr:last-child td{border-bottom:0}
.num{text-align:right; font-variant-numeric:tabular-nums}
.tbl-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* ---------- Pastilles ---------- */
.pastille{
  display:inline-block; padding:.16rem .6rem; border-radius:999px; font-size:.74rem; font-weight:600;
  background:#EEF1F4; color:var(--texte-doux)
}
.p-orange{background:var(--orange-clair); color:#A24E05}
.p-vert{background:#E3F3EE; color:var(--vert)}
.p-bleu{background:#E6F0F9; color:var(--bleu)}
.p-rouge{background:#FBEAE8; color:var(--rouge)}

/* ---------- Indicateurs ---------- */
.kpi{background:var(--carte); border:1px solid var(--trait); border-radius:var(--rayon); padding:.9rem 1rem; box-shadow:var(--ombre)}
.kpi-val{font-size:1.55rem; font-weight:700; font-variant-numeric:tabular-nums}
.kpi-lib{font-size:.78rem; color:var(--texte-doux)}

/* ---------- Récapitulatif devis ---------- */
.recap div{display:flex; justify-content:space-between; padding:.32rem 0; font-size:.9rem}
.recap .sep{border-top:1px solid var(--trait); margin:.4rem 0; padding:0}
.recap .fort{font-weight:700; font-size:1.05rem}
.recap .val{font-variant-numeric:tabular-nums}

/* ---------- Checklist ---------- */
.check{display:flex; align-items:flex-start; gap:.6rem; padding:.45rem 0; border-bottom:1px solid #EDF0F2}
.check:last-child{border-bottom:0}
.check input{width:18px; height:18px; margin-top:.15rem; flex:0 0 auto; accent-color:var(--orange)}
.check-txt{font-size:.88rem}
.check-note{font-size:.76rem; color:var(--texte-doux)}

/* ---------- Modale ---------- */
.modale-fond{position:fixed; inset:0; background:rgba(31,42,51,.45); display:grid; place-items:center; padding:1rem; z-index:40}
.modale-fond[hidden]{display:none}
.modale{background:#fff; border-radius:18px; padding:1.2rem; width:min(640px,100%); max-height:88vh; overflow:auto; box-shadow:0 24px 60px rgba(0,0,0,.25)}
.modale-pied{display:flex; gap:.5rem; justify-content:flex-end; margin-top:1rem}

/* ---------- Impression ---------- */
@media print{
  .topbar,.onglets,.no-print{display:none !important}
  body{background:#fff}
  main{padding:0; max-width:none}
  .carte{box-shadow:none; border:0; page-break-inside:avoid}
  .modale-fond{position:static; background:none; padding:0}
  .modale{box-shadow:none; max-height:none; width:100%}
}

/* Référence réglementaire sous une étape */
.ref{font-size:.74rem; color:var(--bleu); text-decoration:none; border-bottom:1px dotted var(--bleu)}
.ref:hover{color:var(--orange); border-color:var(--orange)}

/* ---------- Audit ---------- */
.q{padding:.8rem 0; border-bottom:1px solid #EDF0F2}
.q:last-child{border-bottom:0}
.q-lib{font-weight:600; margin-bottom:.15rem}
.q-aide{font-size:.8rem; color:var(--texte-doux); margin-bottom:.45rem}
.q-rep{max-width:560px}
.choix{display:flex; flex-wrap:wrap; gap:.4rem}
.choix label{display:inline-flex; align-items:center; gap:.35rem; border:1px solid var(--trait);
  border-radius:999px; padding:.32rem .75rem; cursor:pointer; font-size:.86rem;
  color:var(--texte); margin:0; background:#fff}
.choix label:hover{background:#F7F9FA}
.choix input{width:auto; margin:0; accent-color:var(--orange)}
.choix label.sel{border-color:var(--orange); background:var(--orange-clair); font-weight:600}
.jauge{height:9px; background:#EEF1F4; border-radius:99px; overflow:hidden}
.jauge div{height:9px; border-radius:99px}
.note{font-size:1.9rem; font-weight:700; line-height:1; font-variant-numeric:tabular-nums}
.alerte{display:flex; gap:.6rem; padding:.5rem 0; border-bottom:1px solid #EDF0F2}
.alerte:last-child{border-bottom:0}
.puce{width:9px;height:9px;border-radius:99px;margin-top:.42rem;flex:0 0 auto}