/* style.css — Métreur */

:root {
  --fond: #f2efe9;
  --papier: #ffffff;
  --encre: #2c2924;
  --encre-douce: #6d675d;
  --trait: #ddd6c9;
  --trait-fort: #c4bbaa;
  --accent: #b45309;
  --accent-clair: #fdf0e2;
  --bleu: #2f6b8f;
  --vert: #2f7d55;
  --rouge: #a03434;
  --ombre: 0 1px 2px rgba(60, 50, 35, .10), 0 4px 12px rgba(60, 50, 35, .06);
  --r: 6px;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--encre);
  background: var(--fond);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ------------------------------------------------------------- barre haute */

.barre {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  height: 50px;
  flex: 0 0 auto;
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  box-shadow: var(--ombre);
  z-index: 5;
}

.marque {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--accent);
  white-space: nowrap;
}

.nom-projet {
  width: 220px;
  padding: 6px 9px;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: #fbfaf7;
  font: inherit;
  color: inherit;
}
.nom-projet:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.onglets { display: flex; gap: 2px; margin-left: auto; }

.onglet {
  border: 1px solid transparent;
  background: none;
  padding: 6px 12px;
  border-radius: var(--r);
  font: inherit;
  color: var(--encre-douce);
  cursor: pointer;
}
.onglet:hover { background: #f4f1ea; color: var(--encre); }
.onglet.actif { background: var(--accent-clair); border-color: #f0d9bd; color: var(--accent); font-weight: 600; }

.actions { display: flex; gap: 5px; margin-left: auto; }

.btn {
  border: 1px solid var(--trait);
  background: #fbfaf7;
  padding: 6px 10px;
  border-radius: var(--r);
  font: inherit;
  color: var(--encre);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: #f1ede4; border-color: var(--trait-fort); }
.btn-primaire { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primaire:hover { background: #99460a; border-color: #99460a; }
.btn-danger { color: var(--rouge); border-color: #e3c9c9; background: #fdf5f5; }
.btn-danger:hover { background: #f8e8e8; }

/* -------------------------------------------------------------------- vues */

main { flex: 1 1 auto; min-height: 0; position: relative; }

.vue { position: absolute; inset: 0; }
.vue[hidden] { display: none; }

.vue-plan {
  display: grid;
  grid-template-columns: 92px 1fr 328px;
  min-height: 0;
}

/* ---------------------------------------------------------------- outils */

.outils {
  background: var(--papier);
  border-right: 1px solid var(--trait);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
}

.outil {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 5px 2px 4px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  font: inherit;
  font-size: 10.5px;
  color: var(--encre-douce);
  cursor: pointer;
}
.outil svg { width: 20px; height: 20px; }
.outil:hover { background: #f4f1ea; color: var(--encre); }
.outil.actif { background: var(--accent-clair); border-color: #f0d9bd; color: var(--accent); font-weight: 600; }

.separateur { height: 1px; background: var(--trait); margin: 4px 4px; }

/* La barre d'outils doit tenir SANS ascenseur sur un portable 1366 x 768 :
   sous 900 px de hauteur de fenêtre, les libellés s'effacent et la colonne se
   resserre. Le nom de l'outil actif reste lisible dans l'encart d'aide, et le
   survol donne le titre complet. */
@media (max-height: 900px) {
  .vue-plan { grid-template-columns: 54px 1fr 328px; }
  .outils { padding: 6px 4px; gap: 1px; }
  .outil { padding: 6px 2px; font-size: 0; gap: 0; }
  .outil span { display: none; }
  .outil svg { width: 21px; height: 21px; }
}

@media (max-height: 640px) {
  .outil { padding: 4px 2px; }
  .outil svg { width: 19px; height: 19px; }
}

/* Écrans étroits : le panneau de droite cède avant le dessin. */
@media (max-width: 1240px) {
  .vue-plan { grid-template-columns: 54px 1fr 286px; }
  .outil span { display: none; }
  .outil { padding: 6px 2px; font-size: 0; gap: 0; }
  .outils { padding: 6px 4px; gap: 1px; }
}

/* ---------------------------------------------------------------- canvas */

.zone-canvas { position: relative; overflow: hidden; background: #f7f5f1; }
#plan { display: block; }

.aide {
  position: absolute;
  left: 12px; bottom: 12px;
  max-width: 340px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--trait);
  border-radius: var(--r);
  font-size: 11.5px;
  color: var(--encre-douce);
  box-shadow: var(--ombre);
  pointer-events: none;
}
.aide b { color: var(--encre); }
.aide kbd {
  font: inherit; font-size: 10.5px;
  background: #f1ede4; border: 1px solid var(--trait-fort);
  border-bottom-width: 2px; border-radius: 3px; padding: 0 4px;
}

/* --------------------------------------------------------------- panneau */

.panneau {
  background: var(--papier);
  border-left: 1px solid var(--trait);
  overflow-y: auto;
  padding: 0 0 24px;
}

.panneau h2 {
  margin: 0;
  padding: 11px 14px 10px;
  font-size: 13px;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--trait);
  background: #fbfaf7;
  position: sticky; top: 0; z-index: 2;
}
.panneau h2 small { display: block; font-weight: 400; color: var(--encre-douce); font-size: 11px; margin-top: 2px; }

.groupe { border-bottom: 1px solid var(--trait); padding: 10px 14px 12px; }
.groupe > h3 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--encre-douce);
  font-weight: 700;
}

.champ { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.champ > label { flex: 0 0 118px; color: var(--encre-douce); font-size: 12px; }
.champ > input, .champ > select {
  flex: 1 1 auto; min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--trait);
  border-radius: 5px;
  background: #fbfaf7;
  font: inherit;
  color: inherit;
}
.champ > input:focus, .champ > select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.champ .unite { flex: 0 0 auto; color: var(--encre-douce); font-size: 11px; width: 22px; }

.champ-case { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.champ-case input { margin: 0; }
.champ-case label { font-size: 12px; }

.pleine-largeur > label { flex: 0 0 auto; }
.champ-bloc { display: block; margin-bottom: 8px; }
.champ-bloc > label { display: block; color: var(--encre-douce); font-size: 12px; margin-bottom: 3px; }
.champ-bloc > select, .champ-bloc > input { width: 100%; padding: 5px 7px; border: 1px solid var(--trait); border-radius: 5px; background: #fbfaf7; font: inherit; }

.info { display: flex; justify-content: space-between; font-size: 12px; padding: 2px 0; }
.info span:first-child { color: var(--encre-douce); }
.info span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }

.vide { padding: 24px 16px; color: var(--encre-douce); font-size: 12px; text-align: center; }

/* -------------------------------------------------------------- feuilles */

.vue > .feuille { position: absolute; inset: 0; overflow-y: auto; padding: 22px 26px 60px; }

.feuille h1 { font-size: 20px; margin: 0 0 2px; }
.feuille .sous-titre { color: var(--encre-douce); margin: 0 0 18px; font-size: 12.5px; }
.feuille h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  margin: 26px 0 8px; padding-bottom: 5px;
  border-bottom: 2px solid var(--trait-fort); color: var(--accent);
}

.cartes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; }
.carte {
  background: var(--papier); border: 1px solid var(--trait); border-radius: var(--r);
  padding: 9px 13px; min-width: 118px; box-shadow: var(--ombre);
}
.carte .valeur { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.carte .libelle { font-size: 11px; color: var(--encre-douce); text-transform: uppercase; letter-spacing: .05em; }

table.tbl {
  width: 100%; border-collapse: collapse; background: var(--papier);
  border: 1px solid var(--trait); border-radius: var(--r); overflow: hidden;
  font-size: 12.5px;
}
table.tbl th {
  text-align: left; padding: 7px 10px; background: #faf8f4;
  border-bottom: 1px solid var(--trait); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--encre-douce);
}
table.tbl td { padding: 6px 10px; border-bottom: 1px solid #f0ece4; vertical-align: top; }
table.tbl tr:last-child td { border-bottom: none; }
table.tbl tbody tr:hover { background: #fdfcfa; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.note { color: var(--encre-douce); font-size: 11px; }
.detail { color: var(--encre-douce); font-size: 11px; font-style: italic; }
tr.total td { background: #faf6ef; font-weight: 700; border-top: 2px solid var(--trait-fort); }

.avertissement {
  background: #fdf6e7; border: 1px solid #ecd9ac; color: #7a5a12;
  padding: 8px 12px; border-radius: var(--r); margin: 10px 0; font-size: 12px;
}
.encart {
  background: #f5f8fa; border: 1px solid #cfe0ea; color: #2c4a5e;
  padding: 9px 12px; border-radius: var(--r); margin: 12px 0; font-size: 12px;
}

.prix-input {
  width: 100px; padding: 3px 6px; text-align: right;
  border: 1px solid var(--trait); border-radius: 4px; background: #fbfaf7;
  font: inherit; font-variant-numeric: tabular-nums;
}
.prix-input.modifie { border-color: var(--accent); background: var(--accent-clair); font-weight: 600; }

/* ---------------------------------------------------------------- statut */

.statut {
  flex: 0 0 auto; height: 24px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px;
  background: var(--papier); border-top: 1px solid var(--trait);
  font-size: 11.5px; color: var(--encre-douce);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- impression */


/* ------------------------------------------------ annuler / retablir */

.groupe-boutons { display: flex; gap: 3px; }

.btn-icone {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 29px; padding: 0;
}
.btn-icone svg { width: 16px; height: 16px; }
.btn-icone:disabled { opacity: .35; cursor: default; background: #fbfaf7; border-color: var(--trait); }

/* --------------------------------------------------- barre de niveaux */

.centre { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.barre-niveaux {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  overflow-x: auto;
}

.barre-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--encre-douce); font-weight: 700; margin-right: 2px; white-space: nowrap;
}

.niveau {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--trait);
  border-radius: var(--r);
  background: #fbfaf7;
  white-space: nowrap;
}
.niveau.actif { background: var(--accent-clair); border-color: #eccfa9; }

.niveau-oeil {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 3px;
  border: none; background: none; padding: 0; cursor: pointer;
  color: var(--encre-douce); border-radius: 4px;
}
.niveau-oeil svg { width: 15px; height: 15px; }
.niveau-oeil:hover { background: rgba(0,0,0,.06); color: var(--encre); }
.niveau-oeil.off { color: #b9b0a3; }

.niveau-nom {
  border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--encre-douce);
  padding: 5px 9px 5px 3px;
}
.niveau.actif .niveau-nom { color: var(--accent); font-weight: 700; }

.niveau-badge {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  background: #efe9de; color: #8a8175; border-radius: 3px;
  padding: 1px 5px; margin: 0 6px 0 -4px;
}

.niveau-ajout {
  border: 1px dashed var(--trait-fort); background: none;
  border-radius: var(--r); padding: 5px 10px;
  font: inherit; font-size: 12px; color: var(--encre-douce); cursor: pointer;
  white-space: nowrap;
}
.niveau-ajout:hover { background: #f4f1ea; color: var(--accent); border-color: var(--accent); }

.zone-canvas { flex: 1 1 auto; min-height: 0; }

/* --------------------------------------- niveaux dans le panneau */

.niveau-reglage {
  border: 1px solid var(--trait);
  border-radius: var(--r);
  padding: 8px 9px 6px;
  margin-bottom: 8px;
  background: #fbfaf7;
}
.niveau-reglage.actif { border-color: #eccfa9; background: #fffaf3; }
.niveau-reglage .champ > label { flex-basis: 96px; }

.niveau-actions { display: flex; gap: 5px; margin-top: 6px; }
.btn.mini { padding: 3px 8px; font-size: 11.5px; width: auto; }

/* ------------------------------------------- cases de prise en compte */

.champ-case.accent label { font-weight: 600; }
.champ-case.accent input { width: 15px; height: 15px; accent-color: var(--accent); }

.case-metre { width: 15px; height: 15px; accent-color: var(--vert); cursor: pointer; margin: 1px 0 0; }

h2.lot { display: flex; align-items: center; gap: 9px; }
h2.lot .case-metre { accent-color: var(--accent); }
h2.lot.exclu { color: var(--encre-douce); border-bottom-color: var(--trait); }

table.tbl tr.exclue > td { color: #a49b8f; background: #faf9f6; }
table.tbl tr.exclue > td:nth-child(2) { text-decoration: line-through; text-decoration-color: #cfc5b6; }
table.tbl tr.exclue .note, table.tbl tr.exclue .detail, table.tbl tr.exclue .annexe { text-decoration: none; }

.annexe { color: #8a7f6d; font-size: 11px; margin-top: 2px; }

tr.total.doux td { background: #f7f5f1; font-weight: 500; color: var(--encre-douce); border-top: 1px solid var(--trait); }

/* ---------------------------------------------- filtre par niveau */

.filtre-niveaux {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 4px;
}
.filtre-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--encre-douce); font-weight: 700;
}
.puce {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--trait); border-radius: 999px;
  padding: 4px 12px 4px 9px;
  background: var(--papier); font-size: 12px; cursor: pointer;
  color: var(--encre-douce);
}
.puce.active { border-color: #cfe0ea; background: #f5f9fb; color: #2c4a5e; font-weight: 600; }
.puce input { margin: 0; accent-color: var(--bleu); }


/* -------------------------------------------- prestations et forfaits */

.carte.argent { background: #fbfaf7; }
.carte.argent .valeur { font-size: 17px; }
.carte.fort { background: var(--accent-clair); border-color: #eccfa9; }
.carte.fort .valeur { color: var(--accent); }

td.presta { color: var(--encre-douce); font-size: 12px; }

.badge {
  display: inline-block; margin-left: 6px;
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em;
  background: #e9f0e9; color: #35633f; border-radius: 3px; padding: 1px 5px;
  vertical-align: 1px;
}
.badge.devis { background: #f3ecdd; color: #8a6a22; }

.select-mode {
  width: 100%; padding: 3px 5px; font: inherit; font-size: 11.5px;
  border: 1px solid var(--trait); border-radius: 4px; background: #fbfaf7;
  color: var(--encre-douce);
}

table.tbl tr.a-renseigner td:first-child { color: var(--encre-douce); }
table.tbl tr.a-renseigner .prix-input { border-style: dashed; }

.info .ok { color: var(--vert); }
.info .alerte { color: var(--rouge); }

/* ------------------------------------------------- niveaux et articles */

.niveau-fleches { display: flex; gap: 2px; margin-left: 2px; }
.niveau-fleche {
  border: none; background: none; cursor: pointer; padding: 0 3px;
  color: var(--encre-douce); font-size: 11px; line-height: 1.1; border-radius: 3px;
}
.niveau-fleche:hover:not(:disabled) { background: rgba(0,0,0,.07); color: var(--accent); }
.niveau-fleche:disabled { opacity: .25; cursor: default; }

.alerte-niveau {
  margin: 8px 0 0; padding: 7px 9px; font-size: 11.5px; line-height: 1.4;
  background: #fdf5f5; border: 1px solid #e3c9c9; border-radius: var(--r); color: var(--rouge);
}

.form-article {
  border: 1px solid var(--trait); border-radius: var(--r);
  background: #fbfaf7; padding: 10px 12px 12px; margin: 8px 0 18px;
}
.form-article h4 { margin: 0 0 8px; font-size: 12px; }
.grille-article {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 14px;
}
.grille-article .champ > label, .grille-article .champ-bloc > label { flex-basis: auto; }
.form-article .actions-article { display: flex; gap: 8px; margin-top: 10px; }

td.perso-nom b { color: var(--accent); }
.badge-perso {
  display: inline-block; margin-left: 6px; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .05em; background: var(--accent-clair); color: var(--accent);
  border: 1px solid #eccfa9; border-radius: 3px; padding: 0 5px;
}
.btn-suppr-article {
  border: none; background: none; color: var(--rouge); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 2px 6px; border-radius: 3px;
}
.btn-suppr-article:hover { background: #f8e8e8; }

.demolition-titre { color: var(--rouge); }

@media print {
  body { overflow: visible; height: auto; display: block; background: #fff; }
  .barre, .statut, .outils, .panneau, .aide, .vue-plan { display: none !important; }
  main { position: static; }
  .vue { position: static; }
  .vue[hidden] { display: none !important; }
  .vue > .feuille { position: static; overflow: visible; padding: 0; }
  table.tbl { box-shadow: none; font-size: 10.5px; page-break-inside: auto; }
  table.tbl tr { page-break-inside: avoid; }
  .feuille h2 { page-break-after: avoid; }
  .carte { box-shadow: none; }
  .prix-input { border: none; background: none; }
  .barre-niveaux, .groupe-boutons { display: none !important; }
  .case-metre, table.tbl th:first-child, table.tbl td:first-child { display: none; }
  .select-mode { border: none; background: none; -webkit-appearance: none; appearance: none; }
  h2.lot .case-metre { display: none; }
  table.tbl tr.exclue > td { color: #999; }
  .filtre-niveaux { gap: 6px; }
  .puce input { display: none; }
}