:root {
  --ardoise: #2f3540; --orange: #ff8a00; --papier: #faf8f4; --etabli: #cfccc6;
  --chute: #c3c8cf; --chute-trait: #767c85; --defaut: #c98b84; --defaut-trait: #a85a52;
  --scie: #c0392b; --fond: #f4f3f0; --carte: #ffffff; --texte: #22262c; --mid: #6b737d;
  --bord: #d6d9de;
}
@media (prefers-color-scheme: dark) {
  :root { --fond: #1a1e23; --carte: #22272e; --texte: #d8dde3; --mid: #8a929c; --bord: #3a404a; --etabli: #3b4048; }
}
* { box-sizing: border-box; }
/* 100dvh et non 100% : sur une tablette, la barre d'adresse se rétracte
   en défilant, et une hauteur figée laissait le bas de la page sous le
   pied de page — un bandeau sombre en travers du dernier paragraphe. */
html, body { margin: 0; height: 100%; height: 100dvh; }
body { font: 14px/1.35 system-ui, sans-serif; color: var(--texte); background: var(--fond); display: flex; flex-direction: column; }
button { font: inherit; padding: 4px 10px; border: 1px solid var(--bord); background: var(--carte); color: var(--texte); border-radius: 4px; cursor: pointer; }
button:hover { border-color: var(--mid); }
button:disabled { opacity: .5; cursor: default; }
button.accent { background: var(--orange); color: #1a1e23; font-weight: bold; border: none; padding: 5px 14px; }
input, select { font: inherit; color: var(--texte); background: var(--carte); border: 1px solid var(--bord); border-radius: 3px; padding: 2px 4px; }
.discret { color: var(--mid); font-size: 12.5px; }
.etire { flex: 1; }
/* La pastille de version : neutre tant qu'on ne sait pas (hors-ligne), verte
   à jour, orange quand une version plus récente est en ligne — la toucher
   met à jour. */
.ver { font-size: 10.5px; font-weight: bold; letter-spacing: .02em; padding: 2px 7px; border-radius: 6px; color: var(--mid); background: transparent; cursor: default; }
.ver.ok { background: #2f7d43; border-color: #2f7d43; color: #fff; }
.ver.vieux { background: var(--orange); border-color: var(--orange); color: #1a1e23; cursor: pointer; }
.langue { font-size: 11px; font-weight: bold; padding: 2px 7px; border-radius: 6px; }
.barre { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--carte); border-bottom: 1px solid var(--bord); flex-wrap: wrap; }
.logo { height: 26px; }
.menu { position: relative; }
.menu summary { cursor: pointer; padding: 4px 10px; border: 1px solid var(--bord); border-radius: 4px; list-style: none; }
.menu > div { position: absolute; right: 0; top: 110%; background: var(--carte); border: 1px solid var(--bord); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 20; min-width: 260px; box-shadow: 0 6px 20px rgba(0,0,0,.15); }
.menu > div button { text-align: left; border: none; padding: 6px 10px; }
.menu > div button:hover { background: rgba(255,138,0,.15); }
.menu summary:hover { border-color: var(--mid); }
/* La saisie, une poignée, le plan. La largeur de la saisie se règle à la
   souris — douze colonnes de stock ne tiennent pas dans un tiers d'écran,
   et c'est à l'établi qu'on sait laquelle des deux moitiés compte. */
main { flex: 1; display: grid; grid-template-columns: var(--saisie, minmax(420px, 34%)) 6px 1fr; gap: 4px; padding: 10px; min-height: 0; }
.poignee { cursor: col-resize; border-radius: 3px; background: transparent; align-self: stretch; }
.poignee:hover, .poignee:focus-visible { background: var(--orange); outline: none; }
.saisie { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: auto; }
.bloc { background: var(--carte); border: 1px solid var(--bord); border-radius: 6px; padding: 8px 10px; }
.bloc h2 { font-size: 14px; margin: 0 0 6px; display: inline; }
.compte { color: var(--mid); font-weight: normal; }
details.bloc summary { cursor: pointer; }
/* Une barre de défilement fine et discrète : celle du système prenait
   quinze pixels sous chaque table et venait buter sur la ligne de
   résumé, qu'on lisait à travers. */
.table-cadre { overflow: auto; max-height: 38vh; scrollbar-width: thin; scrollbar-color: var(--bord) transparent; }
.table-cadre::-webkit-scrollbar { height: 8px; width: 8px; }
.table-cadre::-webkit-scrollbar-track { background: transparent; }
.table-cadre::-webkit-scrollbar-thumb { background: var(--bord); border-radius: 4px; }
.table-cadre::-webkit-scrollbar-thumb:hover { background: var(--mid); }
.table-cadre + .discret { margin: 6px 0 0; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th { text-align: left; font-weight: 600; color: var(--mid); padding: 2px 4px; border-bottom: 1px solid var(--bord); white-space: nowrap; position: sticky; top: 0; background: var(--carte); }
td { padding: 1px 2px; border-bottom: 1px solid var(--bord); }
td input[type=text], td input[type=number] { width: 100%; min-width: 2.4em; border: 1px solid transparent; background: transparent; }
td select { max-width: 8.2em; }
td input:focus { border-color: var(--orange); background: var(--carte); }
td.num input { text-align: right; }
td.bool { text-align: center; }
td.contour { color: var(--mid); white-space: nowrap; }
tr.choisie { outline: 2px solid var(--orange); outline-offset: -2px; }
tr.choisie td { background: rgba(255,138,0,.08); }
input.faux { background: rgba(192,57,43,.25) !important; }
.actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
/* Les réglages sont rangés en rubriques repliables : vingt champs d'un
   seul tenant, il fallait tout parcourir pour en retrouver un. La grille
   label / champ / explication vit maintenant DANS chaque rubrique. */
#filtre-reglages { width: 100%; margin: 4px 0 6px; }
.titre-reglages { font-size: 13px; margin: 14px 0 2px; color: var(--mid);
  border-top: 1px solid var(--bord); padding-top: 10px; }
.groupe-reglage { border: 1px solid var(--bord); border-radius: 5px; margin-bottom: 4px; }
.groupe-reglage > summary { cursor: pointer; padding: 5px 8px; font-weight: 600; font-size: 13px; }
.groupe-reglage > summary:hover { background: var(--carte); }
.grille-reglage { display: grid; grid-template-columns: 1fr auto;
  gap: 4px 10px; align-items: center; padding: 2px 8px 8px; }
.grille-reglage .discret { grid-column: 1 / -1; margin: 0 0 4px; }
.grille-reglage input { width: 9em; }
/* Un select prend la largeur de son libellé le plus long : figé à 9em,
   « le bois — moins de pertes » se coupait en « le bois — moin » et il
   fallait ouvrir la liste pour savoir ce qu'on avait choisi (signalé par
   Christophe, 10/09/2026). Borné, pour ne pas écraser la colonne des
   noms sur une fenêtre étroite. */
.grille-reglage select { width: max-content; max-width: 100%; }
/* Libellé et liste déroulante prennent chacun toute la largeur : côte à
   côte, une liste qui porte une phrase mangeait la colonne des noms. */
.grille-reglage .large { grid-column: 1 / -1; }
.grille-reglage label.large { margin-bottom: -2px; }
.grille-reglage select.large { width: 100%; }
.grille-reglage input[type="checkbox"] { width: auto; }
.resultats { display: flex; flex-direction: column; gap: 8px; min-width: 0; min-height: 0; }
/* auto-fit plutôt qu'un compte fixe : la place réelle des tuiles dépend
   de LA POIGNÉE saisie/plan (déplaçable), pas seulement de la largeur de
   la fenêtre — un média-requête sur la page entière ne pouvait pas le
   savoir. À 1000 px de fenêtre (poignée à sa position par défaut), les
   six tuiles n'avaient que ~410 px : une valeur comme « 0,125 m² » ou
   « 21 / 21 » s'y coupait en deux lignes, en plein milieu du nombre
   (audit du 05/09/2026). */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.tuile { background: var(--carte); border: 1px solid var(--bord); border-radius: 5px; padding: 6px 10px; }
.tuile .libelle { font-size: 11px; letter-spacing: .04em; color: var(--mid); text-transform: uppercase; }
.tuile .valeur { font-size: 20px; font-weight: 600; }
.tuile .detail { font-size: 12px; color: var(--mid); }
.tuile.alerte .valeur { color: var(--scie); }
.tuile.accent .valeur { color: var(--orange); }
.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--bord); }
.onglets button { border: 1px solid transparent; border-bottom: none; background: transparent; border-radius: 6px 6px 0 0; }
.onglets button.actif { background: var(--carte); border-color: var(--bord); }
.onglet { display: none; flex: 1; min-height: 0; flex-direction: column; }
.onglet.actif { display: flex; }
.outils-plan { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.plan { flex: 1; min-height: 300px; overflow: auto; background: var(--etabli); border: 1px solid var(--bord); border-radius: 4px; position: relative; }
.plan svg { display: block; }
.plan .cartouche { fill: var(--texte); }
td input[data-colonne=reference] { min-width: 9em; }
.plan .vide { position: absolute; inset: 40%; text-align: center; color: var(--texte); }
.legende { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 2px; font-size: 13px; }
.legende .pastille { display: inline-block; width: 13px; height: 13px; border: 1px solid var(--ardoise); vertical-align: -2px; margin-right: 4px; }
ul { margin: 4px 0; padding-left: 20px; }
.rouge { color: var(--scie); }
footer { display: flex; align-items: center; gap: 10px; padding: 4px 12px; border-top: 1px solid var(--bord); background: var(--carte); }
footer a { color: inherit; }
footer .kofi { background: var(--orange); color: #1a1e23; font-weight: bold; padding: 3px 10px; border-radius: 6px; text-decoration: none; }
footer .kofi:hover { filter: brightness(1.08); }
.menu-contextuel { position: fixed; background: var(--carte); border: 1px solid var(--bord); border-radius: 6px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 30; display: flex; flex-direction: column; min-width: 220px; }
.menu-contextuel[hidden] { display: none; }
.menu-contextuel button { border: none; text-align: left; padding: 6px 10px; }
.menu-contextuel button:hover { background: rgba(255,138,0,.15); }
.menu-contextuel .titre { padding: 4px 10px; color: var(--mid); font-size: 12px; }
.menu-contextuel .sep { border-top: 1px solid var(--bord); margin: 3px 0; }
#d-matiere { border: 1px solid var(--bord); border-radius: 8px; padding: 16px; min-width: 280px; background: var(--carte); color: var(--texte); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#d-matiere::backdrop { background: rgba(0,0,0,.35); }
#d-matiere form { display: flex; flex-direction: column; gap: 10px; }
#d-matiere input { width: 100%; padding: 6px 8px; }
#d-matiere .actions { display: flex; justify-content: flex-end; gap: 8px; }
#d-defauts { border: 1px solid var(--bord); border-radius: 8px; padding: 16px; width: 360px; background: var(--carte); color: var(--texte); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#d-defauts::backdrop { background: rgba(0,0,0,.35); }
#d-defauts form { display: flex; flex-direction: column; gap: 10px; }
#d-defauts-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 30vh; overflow: auto; }
#d-defauts-liste li { display: flex; align-items: center; gap: 6px; background: var(--fond); border-radius: 4px; padding: 4px 6px; font-size: 12.5px; }
#d-defauts-liste li span { flex: 1; }
#d-defauts-liste li button { padding: 0 6px; line-height: 1.6; }
#d-defauts-liste:empty::before { content: "Aucun défaut."; color: var(--mid); font-size: 12.5px; }
.d-defauts-ajout { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--bord); padding-top: 10px; }
.d-defauts-champs-lignes { display: flex; gap: 6px; flex-wrap: wrap; }
.d-defauts-champs-lignes label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--mid); flex: 1; min-width: 7em; }
#d-defauts .actions { display: flex; justify-content: flex-end; gap: 8px; }
button.icone { padding: 2px 5px; font-size: 12px; line-height: 1; }
.impression { display: none; }
/* Tablette et téléphone : les deux moitiés l'une SOUS l'autre, et la page
   défile. Côte à côte sur 800 px, la saisie tombait bien en dessous de sa
   largeur utile, et le plan gardait ses 300 px de haut qui poussaient la
   légende sous le pied de page. */
@media (max-width: 950px) {
  html, body { height: auto; min-height: 100dvh; }
  main { grid-template-columns: 1fr; gap: 10px; overflow: visible; }
  .poignee { display: none; }
  .saisie { overflow: visible; }
  .table-cadre { max-height: 50vh; }
  .plan { min-height: 60vh; }
}

/* Un écran bas — une tablette couchée, une fenêtre réduite : le plan ne
   garde pas 300 px de haut au prix du reste. */
@media (max-height: 620px) {
  /* La page défile plutôt que de tasser : sinon le contenu débordait
     SOUS le pied de page, qui barrait le dernier paragraphe d'un bandeau
     sombre (tablette couchée, 4 septembre 2026). */
  html, body { height: auto; min-height: 100dvh; }
  main { overflow: visible; }
  .saisie { overflow: visible; }
  .plan { min-height: 260px; }
  .table-cadre { max-height: 34vh; }
}

@media print {
  header, main .saisie, .poignee, .onglets, .outils-plan, footer, .legende, .discret, #tuiles { display: none !important; }
  main { display: block; padding: 0; }
  .resultats, .onglet.actif { display: block; }
  .onglet:not(.actif) { display: none; }
  .plan { overflow: visible; background: white; border: none; min-height: 0; }
  .plan svg { width: 100% !important; height: auto !important; }
  .impression { display: block; font-size: 10pt; }
  .impression h3 { font-size: 11pt; margin: 8pt 0 2pt; }
  .impression p { margin: 0 0 2pt; }
}