/* ═══════════════════════════════════════════════════════════════════════════
   LA PAGE DES CHANTIERS — le plan relevé, ses segments, ses poteaux.

   Ces règles vivaient dans `app.css`, en trois morceaux à mille lignes l'un
   de l'autre, au milieu de ce que toutes les pages chargent. Seule
   `chantiers.html` s'en sert : elle les charge seule, APRÈS `app.css` — les
   jetons de couleur (`--accent`, `--alerte`…), les blocs et les tableaux du
   Débit (`.debit-block`, `.debit-table`) qu'elle réemploie viennent de là.
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════ LE PLAN DE CHANTIER

   Le contour relevé, vu de dessus. Il réemploie les blocs et les tableaux du
   Débit — même encadré, même grille, mêmes en-têtes marqués `num` — parce que
   c'est la même famille de lecture : une feuille d'atelier. Ne sont ici que
   les traits qui lui sont propres. */

/* UNE SEULE LARGEUR DE COLONNE, du plan aux tableaux.

   Les tableaux s'étalaient sur toute la page pendant que le plan tenait dans
   920 px : la même incohérence que le Débit et la Nomenclature avaient, et
   pour la même raison — personne n'avait dit où s'arrêtait la feuille. */
#chantiers .pane-contenu > * { max-width: 920px; }

/* LA TÊTE PORTE LA FICHE : le code, le nom qu'on retape, la case de
   fermeture, et la suppression tout à droite. */
.cha-tete { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cha-nom { font-size: 1rem; font-weight: 600; min-width: 14rem; }
.cha-ferme { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--muted); }
.cha-tete button.danger { margin-left: auto; }

/* LA TOILE. Un fond à elle, plus sourd que la page : c'est un plan posé sur
   une table, pas une zone de texte. */
.cha-svg {
  display: block;
  width: 100%;
  max-width: 920px;
  margin: 0 0 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  touch-action: none;
}

/* LES QUATRE ÉTATS D'UN SEGMENT, UNE COULEUR CHACUN — sur le plan, sur la
   pastille de sa ligne, dans la légende et dans l'état du chantier. La couleur
   est un jeton posé par l'état, et chaque endroit l'emploie à sa façon : le
   trait la prend en `stroke`, la pastille en bordure, le bloc en liseré. Un
   plan tout gris ne disait rien de ce qui restait à faire. */
#chantiers [data-etat="vide"] { --etat: var(--muted); }
#chantiers [data-etat="partiel"] { --etat: var(--alerte); }
#chantiers [data-etat="complet"] { --etat: var(--succes); }
#chantiers [data-etat="deborde"] { --etat: var(--danger); }
#chantiers [data-etat="choix"] { --etat: var(--accent); }

/* LE SEGMENT : un trait franc. C'est la matière à venir, pas un repère.
   Pointillé tant qu'il n'est pas découpé : rien n'y est encore posé. */
.cha-segment { stroke: var(--etat, var(--texte-2)); stroke-width: 2.5; stroke-linecap: round; }
.cha-segment[data-etat="vide"] { stroke-dasharray: 8 6; }
.cha-fleche { fill: var(--etat, var(--texte-2)); }

/* L'EMPLACEMENT, EN BANDE SUR LE TRAIT : pleine quand un ouvrage l'occupe,
   creuse quand il attend qu'on le choisisse. */
.cha-empl-bande { stroke: var(--accent); stroke-width: 8; stroke-linecap: butt; opacity: 0.55; }
.cha-empl-bande.vacant { stroke: var(--alerte); opacity: 0.35; }

/* LA PASTILLE D'ÉTAT — la forme des pastilles de carte, la couleur de l'état.
   Creuse, sauf « complet », qui est le seul état qu'on ne cherche plus. */
.cha-pastille {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  color: var(--etat);
  box-shadow: inset 0 0 0 1px var(--etat);
}
.cha-pastille[data-etat="complet"] { background: var(--etat); color: var(--bg); box-shadow: none; }

/* L'ÉTAT DU CHANTIER, sous son nom : le linéaire à équiper, puis les pastilles. */
.cha-etat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  margin: 0.4rem 0 0.8rem;
  font-size: 0.85rem;
}
.cha-etat-mot { color: var(--muted); }

/* LA LÉGENDE, sous le plan et avant l'aide : un trait par état, et la flèche. */
.cha-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
}
.cha-legende-item { display: inline-flex; align-items: center; gap: 0.4rem; }
.cha-legende-trait { display: inline-block; width: 1.5rem; height: 0; border-top: 3px solid var(--etat); }
.cha-legende-trait[data-etat="vide"] { border-top-style: dashed; }
.cha-legende-fleche { font-size: 0.7rem; color: var(--texte-2); }

/* UN SEGMENT ÉQUIPÉ : une ligne qu'on déplie, et ce qu'on y a posé.

   Le CADRE dit « ceci contient », le fond dirait « ceci est choisi » — la même
   règle que pour les groupes de la navigation. Un segment n'est pas désigné,
   il est ouvert.

   `cha-segment` TOUT COURT EST DÉJÀ PRIS : c'est le TRAIT du segment sur le
   plan. Troisième collision de nom de la journée, après `pose` et `cha-mesure`
   — un nom se cherche avant de se poser, et le dépôt répond en une seconde. */
.cha-segment-bloc {
  border: 1px solid var(--bord);
  /* De la couleur de son état — la même que son trait sur le plan. */
  border-left: 3px solid var(--etat, var(--bord));
  border-radius: 6px;
  margin-bottom: 0.6rem;
  padding: 0.4rem 0.6rem;
}

/* LA CASE DU CHEVRON A BESOIN DE `--trait`, et il n'existe que dans `.arbre`.
   Sans lui, sa bordure est invalide et la case DISPARAÎT sans rien dire : il ne
   restait que la croix de cinq pixels, et Benjamin ne la voyait pas. Le piège
   est écrit noir sur blanc au-dessus de `.grille-titre`, qui le contourne de la
   même façon — je l'ai lu après coup.

   ET TOUTE LA LIGNE OUVRE. Viser une case de quatorze pixels pour déplier une
   travée de huit mètres n'a pas de sens ; le chevron dit ce qui se passe, la
   ligne entière le déclenche. */
.cha-segment-tete {
  --trait: var(--filet-champ);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  padding: 0.15rem 0;
}

.cha-segment-tete:hover .arbre-chevron::before { border-color: var(--panneau-sourd); }

.cha-segment-nom { font-weight: 600; }
.cha-segment-long { margin-left: auto; font-variant-numeric: tabular-nums; }
/* L'état vient APRÈS la longueur, et il est le dernier mot de la ligne : c'est
   lui qu'on parcourt des yeux pour trouver le segment encore à combler. */
.cha-segment-etat { min-width: 9rem; text-align: right; }

.cha-segment-corps {
  margin: 0.5rem 0 0.7rem;
  padding-left: 1.4rem;
}

/* Les mesures du relevé : des couples mot / valeur, alignés en ligne et qui
   passent à la ligne d'eux-mêmes quand le panneau rétrécit. */
.cha-segment-mesures {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.4rem;
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--bord);
}

/* `cha-mesure` EST DÉJÀ PRIS — c'est l'enveloppe d'un nombre qu'on tape, et
   elle porte `width: 100%`. Ma règle s'appliquait aux deux, et les quatre
   mesures du relevé s'empilaient chacune sur toute la largeur. Un nom de classe
   se cherche avant de se poser. */
.cha-releve { display: flex; align-items: baseline; gap: 0.4rem; }
.cha-releve-mot { color: var(--panneau-sourd); font-size: 0.85em; }
.cha-releve-val { font-variant-numeric: tabular-nums; }

/* LE CHOIX DE L'OUVRAGE prend la place qu'il faut : un code et un libellé, plus
   long qu'un « longueur fixe ». Discret tant qu'on ne le touche pas, comme le
   sens du virage — c'est un choix qu'on fait une fois, pas une commande. */
.cha-modele { max-width: 22rem; }

/* UN EMPLACEMENT QUI ATTEND SON OUVRAGE. Sourd, pas alarmant : ce n'est pas une
   erreur, c'est du travail qui reste — on découpe le relevé avant d'arrêter les
   modèles. L'alarme est réservée à ce qui déborde. */
.cha-vacant { color: var(--muted); font-style: italic; }

/* Les trois gestes d'un ouvrage posé, serrés : monter, descendre, retirer. */
.cha-poses-gestes { display: flex; gap: 0.2rem; }

/* LE REFEND : la limite entre deux emplacements, donc un poteau intermédiaire.
   Plus fin que le trait du segment — il le divise, il ne le concurrence pas —
   et de la même teinte, parce que c'est la même matière. */
.cha-refend { stroke: var(--texte-2); stroke-width: 1.5; stroke-linecap: round; }

/* LE NOM DE L'OUVRAGE posé dans un emplacement, sur le plan. Petit : on vient
   lire des longueurs, le nom n'est qu'un repère pour savoir où l'on est. */
.cha-empl {
  fill: var(--texte-2);
  font-size: 9px;
  font-family: ui-monospace, monospace;
  pointer-events: none;
}

/* Un emplacement qui attend son ouvrage : un « ? » sourd. Ce n'est pas une
   alarme — on découpe avant de choisir — mais ça doit se remarquer. */
.cha-empl-vacant { fill: var(--muted); font-style: italic; }

/* LA COTE, posée sur le segment. Sourde : on la lit quand on la cherche, elle
   ne dispute pas le tracé. */
/* LA COTE SE LIT SUR LE TRAIT : un liseré de la couleur du fond la détache de
   ce qu'elle croise — un autre segment, une bande d'emplacement. */
.cha-cote {
  fill: var(--texte-2);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* La longueur réelle d'un segment en pente : elle accompagne la cote du plan,
   elle ne la remplace pas. Voir `rendPlan`. */
.cha-cote-pente { fill: var(--texte-3, var(--muted)); font-size: 11px; }

/* LE POTEAU. Il se tire, donc il se saisit : le curseur le dit avant qu'on
   essaie. Désigné, il prend le minium — c'est une ACTION en cours, et c'est
   le seul endroit de ce plan où la couleur de l'action a sa place. */
.cha-poteau { cursor: grab; }
.cha-poteau circle { fill: var(--surface); stroke: var(--texte-2); stroke-width: 2; }
.cha-poteau:hover circle { stroke: var(--accent); }
.cha-poteau.choisi circle { fill: var(--accent); stroke: var(--accent); }
.cha-poteau .cha-rang { fill: var(--muted); font-size: 10px; pointer-events: none; }
.cha-poteau.choisi .cha-rang { fill: var(--bg); font-weight: 700; }

/* L'ANNEAU D'ACCROCHE du premier poteau : « revenez ici pour refermer ».
   En pointille et sourd tant qu'on ne le vise pas — c'est une invitation,
   pas une commande ; il ne doit pas peser autant que le trace lui-meme. */
.cha-accroche { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.cha-poteau.referme:hover .cha-accroche { stroke: var(--accent); stroke-dasharray: none; }

/* LES DEUX TABLEAUX, à la grille fixe : une ligne de poteau doit tomber sous
   la précédente, sinon on ne descend pas la liste du regard. Voir la note de
   `.debit-plan`. */
.cha-sommets { table-layout: fixed; }
.cha-sommets th:nth-child(1) { width: 3rem; }
.cha-sommets th:nth-child(2),
.cha-sommets th:nth-child(3),
.cha-sommets th:nth-child(4) { width: 7.5rem; }
.cha-sommets th:nth-child(5) { width: 5rem; }
.cha-sommets th:nth-child(7) { width: 2.5rem; }

/* LA COTE QUI SE TAPE. C'est ici que le relevé devient juste — le plan dit la
   forme, ce champ dit la mesure. Alignée à droite comme le nombre qu'elle
   porte, et sans les flèches du navigateur : on tape 3 847, on n'incrémente
   pas trois mille huit cent quarante-sept fois. */
/* UN CHAMP QUI NE CRIE PAS. Douze boîtes grises pleine largeur faisaient de
   ce tableau un formulaire : on y voyait des cases à remplir avant de voir les
   cotes qu'elles portent. Le champ ne se montre qu'au survol et à la saisie —
   au repos, c'est un nombre dans un tableau. */
.cha-cote-champ {
  width: 100%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 0.1rem 0.3rem;
  background: transparent;
  border: 1px solid transparent;
}
.cha-cote-champ:hover { border-color: var(--border); }
.cha-cote-champ:focus { background: var(--surface); border-color: var(--accent); }

/* LA MESURE ET SON UNITE. L'unite s'ecrit A COTE du champ : dans un
   `input[type=number]`, un degre ou un « mm » en ferait un texte que le
   navigateur refuserait d'incrementer. */
.cha-mesure { display: inline-flex; align-items: baseline; gap: 0.15rem; justify-content: flex-end; width: 100%; }
.cha-mesure .cha-cote-champ { width: auto; flex: 1 1 auto; min-width: 0; }
.cha-unite { color: var(--muted); font-size: 0.85em; flex: none; }

/* Le sens du virage : un choix, pas un mot mort. Discret tant qu'on ne le
   touche pas — c'est une correction rare, pas une commande de tous les jours. */
.cha-sens { background: transparent; border: 1px solid transparent; padding: 0.05rem 0.2rem; }
.cha-sens:hover { border-color: var(--border); }
.cha-cote-champ::-webkit-outer-spin-button,
.cha-cote-champ::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* La ligne du poteau désigné, en écho au plan : on clique d'un côté, l'autre
   répond. Sans cela, il faut chercher des yeux lequel des huit on tient. */
.cha-choisi td { background: var(--choix); }

.cha-total { margin-top: 0.9rem; font-size: 0.9rem; }