/* EnergySys — feuille de style unique */

:root {
  --bg: #f4f6f8;
  --panel: #ffffff;
  --border: #d7dee4;
  --border-strong: #b8c4cd;
  --text: #1d262d;
  --muted: #6a7783;
  --accent: #0f5c8c;
  --accent-soft: #e7f0f6;
  --hot: #e0483a;
  --cold: #2f7fd1;
  --air: #8a9199;
  --elec: #3faa5a;
  --fuel: #d98d20;
  --loop: #8e44ad;
  --source: #0f8f8f;
  --data: #222222;
  --ok: #2e8b57;
  --warn: #c98a12;
  --error: #c0392b;
  --shadow: 0 1px 3px rgba(20, 34, 47, .10), 0 6px 18px rgba(20, 34, 47, .06);
  --radius: 7px;
}

* { box-sizing: border-box; }

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

body {
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* ---------------------------------------------------------------- amorçage */
.boot {
  height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 14px; color: var(--muted);
}
.boot-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
.boot-note { max-width: 380px; text-align: center; font-size: 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ layout */
.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  /* Les colonnes latérales se replient (poignées sur les bords du schéma) :
     la variable tombe à zéro et le schéma prend toute la largeur. */
  grid-template-columns: var(--col-palette, 232px) 1fr var(--col-props, 336px);
  grid-template-areas:
    "top    top    top"
    "kpi    kpi    kpi"
    "palette canvas props"
    "status status status";
}
.app.palette-repliee { --col-palette: 0px; }
.app.props-replies   { --col-props: 0px; }
/* Le grand format des résultats vit dans une fenêtre : le repli du volet
   latéral ne doit pas le masquer avec lui. */
.palette-repliee .palette, .props-replies .props:not(.props-grand) { display: none; }

.volet-poignee {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 8;
  width: 20px; height: 56px; padding: 0;
  border: 1px solid var(--border-strong); background: var(--panel);
  color: var(--muted); font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.volet-gauche { left: 0; border-left: none; border-radius: 0 9px 9px 0; }
.volet-droite { right: 0; border-right: none; border-radius: 9px 0 0 9px; }
.volet-poignee:hover { background: var(--accent-soft); color: var(--accent); }

.topbar   { grid-area: top; }
.kpibar   { grid-area: kpi; }
.palette  { grid-area: palette; }
.canvas   { grid-area: canvas; position: relative; }

/* ------------------------------------------------ voile de simulation */
/* Le schéma se FIGE et se grise pendant une simulation qui dure (ou une
   ouverture de projet) : la carte dit ce qui se passe, la barre avance au
   rythme de la simulation précédente du même projet. */
.voile-simulation { position: absolute; inset: 0; z-index: 40;
  background: rgba(238, 243, 247, .55); backdrop-filter: blur(1.5px);
  display: flex; align-items: center; justify-content: center; cursor: wait; }
.voile-carte { background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 18px 50px rgba(15, 40, 60, .18);
  padding: 18px 26px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; min-width: 240px; }
.voile-titre { font-size: 13px; font-weight: 600; }
.voile-barre { width: 230px; height: 8px; background: #e4ebf1;
  border-radius: 6px; overflow: hidden; }
.voile-barre > div { height: 100%; background: var(--accent, #0f5c8c);
  border-radius: 6px; transition: width .2s linear; }
.voile-barre.indeterminee > div { width: 36%;
  animation: voile-va-et-vient 1.1s ease-in-out infinite alternate; }
@keyframes voile-va-et-vient {
  from { margin-left: 0; } to { margin-left: 64%; } }
.voile-restant { font-size: 11px; color: var(--muted); }
.props    { grid-area: props; }
.statusbar{ grid-area: status; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  display: flex; align-items: center; gap: 10px;
  /* La barre passe à la ligne plutôt que d'être tronquée quand la fenêtre
     est trop étroite pour tous les boutons. */
  flex-wrap: wrap; row-gap: 5px;
  padding: 7px 12px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; color: var(--accent); letter-spacing: .2px; margin-right: 4px;
}
.brand .logo { width: 26px; height: 26px; display: block; flex: none; }
.brand small { font-weight: 400; color: var(--muted); font-size: 10px; margin-left: 4px; }

.project-name {
  border: 1px solid transparent; background: transparent;
  padding: 4px 8px; border-radius: var(--radius); min-width: 190px;
  font-weight: 600;
}
.project-name:hover { border-color: var(--border); }
.project-name:focus { border-color: var(--accent); background: var(--panel); outline: none; }
.project-name::placeholder { color: var(--muted); font-weight: 400; }
/* Des blocs mais pas de nom : le champ le réclame — rien ne s'enregistre
   tant que le projet n'est pas nommé. */
.project-name.nom-requis { border-color: #e8a13c; background: #fdf6e9; }
.nom-rappel {
  font-size: 11.5px; color: #9a6a14; background: #fdf3dd;
  border: 1px solid #ecd9ae; border-radius: 11px; padding: 3px 9px;
  white-space: nowrap;
}

.spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--panel);
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; background: var(--panel); border-color: var(--border); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn-primary:hover { background: #0c4a71; border-color: #0c4a71; }
.btn-ghost { border-color: transparent; }
.btn-ghost:hover { border-color: var(--border); }

.account {
  display: inline-flex; align-items: center; gap: 4px;
  padding-left: 8px; margin-left: 2px; border-left: 1px solid var(--border);
}
.account-name {
  font-size: 11.5px; color: var(--muted); max-width: 130px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account .btn { padding: 4px 7px; text-decoration: none; color: var(--muted); }
.account .btn:hover { color: var(--error); border-color: var(--border); }

.select-inline {
  padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); max-width: 160px;
}

/* -------------------------------------------------------------------- KPIs */
.kpibar {
  display: flex; gap: 0; overflow-x: auto;
  background: var(--panel); border-bottom: 1px solid var(--border);
}
.kpi {
  padding: 7px 16px; border-right: 1px solid var(--border);
  min-width: 132px; flex-shrink: 0;
}
.kpi-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.kpi-value { font-size: 17px; font-weight: 650; margin-top: 1px; }
.kpi-value span { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.kpi-sub { font-size: 10.5px; color: var(--muted); }
.kpi.good .kpi-value { color: var(--ok); }
.kpi.bad  .kpi-value { color: var(--error); }
.kpi.stale { opacity: .45; }

/* ----------------------------------------------------------------- palette */
.palette, .props {
  background: var(--panel);
  overflow-y: auto;
}
.palette { border-right: 1px solid var(--border); }
.props   { border-left: 1px solid var(--border); }

.palette-search {
  position: sticky; top: 0; z-index: 2;
  padding: 8px; background: var(--panel); border-bottom: 1px solid var(--border);
}
.palette-search input {
  width: 100%; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.palette-search input:focus { outline: none; border-color: var(--accent); }

.cat { padding: 4px 0 6px; }
.cat-title {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  cursor: pointer; user-select: none;
}
.cat-dot { width: 7px; height: 7px; border-radius: 50%; }

.block-item {
  display: flex; align-items: center; gap: 8px;
  margin: 2px 7px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); cursor: grab; line-height: 1.25;
}
.block-item:hover { border-color: var(--accent); background: var(--accent-soft); }
.block-item:active { cursor: grabbing; }
.block-item .ico { font-size: 16px; width: 20px; text-align: center; }
.block-item .lbl { flex: 1; font-size: 12px; }
.block-item .star { color: var(--border-strong); font-size: 12px; }
.block-item .star.on { color: #e0a30c; }

.palette-empty { padding: 16px 12px; color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------------ canvas */
.react-flow__renderer { background: var(--bg); }
.react-flow__attribution { display: none; }

.eq-node {
  width: 150px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 11px;
  position: relative;
}
.eq-node.selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft), var(--shadow); }
.eq-node.disabled { opacity: .42; filter: grayscale(1); }
.eq-node.has-error { border-color: var(--error); }
.eq-node.has-warn  { border-color: var(--warn); }

.eq-head {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 7px; border-bottom: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
}
.eq-ico { font-size: 13px; }
.eq-name { font-weight: 650; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-badge { font-size: 9px; padding: 0 3px; border-radius: 3px; background: var(--error); color: #fff; }
.eq-type { padding: 3px 7px 0; font-size: 9.5px; color: var(--muted); }
/* Les pastilles mordent 9 px dans le bloc : le texte se tient à 13 px des
   bords, sinon un connecteur recouvre le début de la ligne — « P 300 kW »
   masqué par l'arrivée de combustible. */
.eq-params { padding: 2px 13px 6px; color: var(--text); }
.eq-params div { font-size: 10px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-result {
  padding: 3px 13px; border-top: 1px dashed var(--border);
  font-size: 9.5px; color: var(--accent); font-weight: 600;
}

/* Connecteurs : assez grands pour être vus et visés, colorés par nature de
   flux, et lisibles dans leur sens — une entrée est ronde, une sortie carrée.
   Le halo blanc les détache du trait qui arrive dessus. */
.react-flow__handle {
  width: 12px; height: 12px; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(20, 40, 60, .25);
  transition: transform .1s;
}
.react-flow__handle.source { border-radius: 3px; }
.react-flow__handle:hover {
  transform: scale(1.35);
  box-shadow: 0 0 0 2px rgba(20, 40, 60, .35);
  z-index: 5;
}
/* Pendant le tracé d'un lien, la pastille survolée confirme qu'on peut lâcher. */
.connecting .react-flow__handle:hover {
  transform: scale(1.6);
}
.react-flow__handle.h-hot  { background: var(--hot); }
.react-flow__handle.h-cold { background: var(--cold); }
/* Change-over (PAC réversible 2 tubes) : la même sortie sert le chaud et
   le froid selon la saison — pastille scindée en diagonale rouge/bleu. */
/* Piquage sur conduite (marche 3) : un rond plein à la couleur du réseau.
   Le ROND SE GLISSE — c'est ainsi qu'on reprend un piquage sur une autre
   conduite, et c'est ce que promet son infobulle. La pastille de départ
   couvrait tout le rond : chaque clic-glissé démarrait un lien, le rond
   restait prisonnier de son porteur. Elle vit désormais À CÔTÉ du rond,
   révélée au survol — le rond au glisser, la pastille au raccordement. */
.tap-node { position: relative; width: 14px; height: 14px; }
.tap-rond { display: block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid #fff; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(20, 34, 46, .35), 0 1px 3px rgba(20, 34, 46, .3); }
.react-flow__handle.tap-handle { position: absolute; inset: auto;
  top: 50%; left: 100%; right: auto; bottom: auto;
  width: 9px; height: 9px; min-width: 0; min-height: 0;
  border-radius: 50%; background: var(--panel); border: 1.5px solid #243239;
  box-shadow: 0 1px 2px rgba(20, 34, 46, .35);
  transform: translate(3px, -50%);
  opacity: 0; transition: opacity .12s ease; }
.tap-node:hover .react-flow__handle.tap-handle,
.react-flow__handle.tap-handle:hover,
.react-flow__handle.tap-handle.connecting { opacity: 1; }

/* PASTILLE RETOUR (mode expert) : la jumelle « P~r » d'un port d'eau, posée
   14 px sous lui, atténuée — l'eau qui ressort d'une entrée, l'eau qui revient
   à une sortie. Elle se raccorde indépendamment. */
.react-flow__handle.h-retour { opacity: .55; width: 8px; height: 8px;
  border-width: 1.5px; }
.react-flow__handle.h-retour:hover { opacity: 1; }

.react-flow__handle.h-changeover {
  background: linear-gradient(135deg, var(--hot) 0 50%, var(--cold) 50% 100%);
}
.react-flow__handle.h-air  { background: var(--air); }
.react-flow__handle.h-air_supply  { background: #12a04b; }
.react-flow__handle.h-air_return  { background: #f2790f; }
.react-flow__handle.h-air_extract { background: #8036c9; }
.react-flow__handle.h-elec { background: var(--elec); }
.react-flow__handle.h-fuel { background: var(--fuel); }
.react-flow__handle.h-loop { background: var(--loop); }
.react-flow__handle.h-source { background: var(--source); }
.react-flow__handle.h-water { background: #55b7d9; }
.react-flow__handle.h-data { background: var(--data); }

/* Étiquettes de ports : une pastille de texte sur fond blanc, colorée par la
   nature du flux. Elles apparaissent au survol du bloc, et sur TOUS les blocs
   pendant qu'un lien est en cours de tracé — c'est à ce moment-là qu'on
   cherche où atterrir, pas bloc par bloc au survol. */
.port-label {
  position: absolute; font-size: 9px; font-weight: 600; line-height: 1.3;
  white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s;
  background: rgba(255, 255, 255, .94); border: 1px solid currentColor;
  border-radius: 3px; padding: 0 4px; color: var(--muted);
}
.eq-node:hover .port-label,
.connecting .port-label { opacity: 1; }
.port-label.left  { right: 100%; margin-right: 9px; }
.port-label.right { left: 100%;  margin-left: 9px; }
.port-label.pl-hot    { color: var(--hot); }
.port-label.pl-cold   { color: var(--cold); }
.port-label.pl-air    { color: var(--air); }
.port-label.pl-air_supply  { color: #12a04b; }
.port-label.pl-air_return  { color: #f2790f; }
.port-label.pl-air_extract { color: #8036c9; }
.port-label.pl-elec   { color: var(--elec); }
.port-label.pl-fuel   { color: var(--fuel); }
.port-label.pl-loop   { color: var(--loop); }
.port-label.pl-source { color: var(--source); }
.port-label.pl-water  { color: #3a93b5; }
.port-label.pl-data   { color: var(--data); }

/* -------------------------------------------------- vue intérieure zone */
.interieur-overlay {
  position: absolute; inset: 0; z-index: 8;
  background: var(--bg, #f4f7f9);
  display: flex; flex-direction: column;
}
.interieur-tete {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 7px 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.interieur-tete .sub { color: var(--muted); font-size: 11.5px; }
.interieur-corps { flex: 1; display: flex; min-height: 0; }
.interieur-outils {
  width: 250px; overflow-y: auto; padding: 8px 10px;
  background: var(--panel); border-right: 1px solid var(--border);
  font-size: 12px;
}
.interieur-outils input, .interieur-outils select {
  width: 100%; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 12px;
}
.interieur-niveau {
  display: flex; gap: 5px; align-items: center; margin: 4px 0;
}
.interieur-niveau input { flex: 1; min-width: 0; }
.interieur-niveau .sub { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.interieur-canvas { flex: 1; position: relative; }

/* ------------------------------------ fenêtre de paramètres d'un équipement
   Production et traitement d'air portent jusqu'à quarante réglages et des
   tableaux constructeur : ils s'ouvrent en pleine page, sur le modèle de la
   vue intérieure d'une zone, plutôt que dans la bande de droite. */
.params-overlay {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg, #f4f7f9);
  display: flex; flex-direction: column;
}
.params-tete {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 12px; background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.params-tete .params-ico { font-size: 16px; }
.params-tete .params-nom {
  width: 260px; padding: 5px 7px; font-weight: 650;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.params-tete .params-nom:focus { outline: none; border-color: var(--accent); }
.params-tete .sub { color: var(--muted); font-size: 11.5px; flex: 1; }
.params-corps { flex: 1; display: flex; min-height: 0; }
/* Les onglets passent sur le flanc : ils tiennent tous sans défilement, et la
   largeur gagnée revient aux paramètres. */
.params-rail {
  width: 170px; flex-shrink: 0; overflow-y: auto; padding: 8px 0;
  background: var(--panel); border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
}
.params-rail button {
  padding: 8px 14px; border: none; background: none; cursor: pointer;
  text-align: left; font-size: 12px; color: var(--muted);
  border-left: 3px solid transparent;
}
.params-rail button:hover { background: var(--accent-soft); }
.params-rail button.active {
  border-left-color: var(--accent); color: var(--accent); font-weight: 650;
  background: var(--accent-soft);
}
.params-contenu { flex: 1; overflow-y: auto; min-width: 0; }
/* Les réglages s'étalent en colonnes ; les éditeurs déployés — composition,
   tableaux constructeur, profil mesuré — reprennent toute la largeur. */
.params-grille {
  display: grid; gap: 0 18px; padding: 0 6px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  align-items: start;
}
.params-grille .field-large { grid-column: 1 / -1; }
.arrivee-node {
  padding: 5px 10px; background: var(--panel); border: 1.6px solid;
  border-radius: 12px; font-size: 11.5px; font-weight: 600;
  text-align: center;
}
.arrivee-node .resume {
  display: block; font-size: 9px; font-weight: 500; color: var(--muted);
  margin-top: 1px;
}
/* Case de local : jointive avec ses voisines, la rangée forme la bande
   continue du niveau — nom en tête, tableau de valeurs dessous. */
.local-case {
  height: 126px; background: var(--panel);
  border: 1px solid #9aa7b1; margin: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 4px 4px;
}
.local-case.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.local-nom {
  font-size: 11px; font-weight: 650; text-align: center;
  border-bottom: 1px solid var(--border); padding-bottom: 3px; width: 100%;
}
.local-table { margin-top: 5px; font-size: 9.5px; border-collapse: collapse; }
.local-table td { border: 1px solid var(--border); padding: 0 5px; line-height: 1.5; }
.local-table td:first-child { color: var(--muted); font-weight: 600; }
/* Les valeurs portent la couleur de leur réseau : chaud rouge, froid bleu,
   soufflage vert — on lit à quoi chaque nombre correspond sans légende. */
.local-table .v-chaud   { color: #e0483a; font-weight: 600; }
.local-table .v-froid   { color: #2f7fd1; font-weight: 600; }
.local-table .v-souffle { color: #12a04b; font-weight: 600; }
.local-table .v-reprise { color: #f2790f; font-weight: 600; }
.local-table .v-extract { color: #8036c9; font-weight: 600; }
.local-emetteur { font-size: 10px; opacity: .8; }

/* Valeur d'un tronçon de réseau : petite pastille blanche posée SUR le
   trait, centrée sur le point calculé, insensible au pointeur. */
.etiquette-reseau {
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .95);
  border-radius: 3px; padding: 0 3px;
  font-size: 8.5px; font-weight: 650; white-space: nowrap;
  pointer-events: none;
}

.niveau-trait {
  display: flex; align-items: center; gap: 8px;
  pointer-events: none; font-size: 11px; font-weight: 650;
  color: var(--muted); letter-spacing: .4px;
}
.niveau-trait .ligne { flex: 1; border-top: 1.4px dashed #b8c4cd; }

/* ------------------------------------------------------- barre de temps */
.timebar-toggle {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px;
  z-index: 6; padding: 4px 12px; border-radius: 14px;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .95);
  cursor: pointer; font-size: 12px; color: var(--muted);
  box-shadow: 0 1px 6px rgba(20, 40, 60, .12);
}
.timebar-toggle:hover { border-color: var(--accent); color: var(--accent); }
.timebar {
  position: absolute; left: 12px; right: 12px; bottom: 8px; z-index: 6;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 6px 10px 5px;
  box-shadow: 0 2px 10px rgba(20, 40, 60, .14);
}
.timebar input[type=range] { width: 100%; margin: 0 0 3px; accent-color: var(--accent); }
.timebar-ligne {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11.5px;
}
.timebar-date { display: inline-flex; align-items: center; gap: 4px; }
.timebar-date select {
  padding: 1px 3px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); font-size: 11.5px;
}
.timebar-num {
  width: 40px; padding: 1px 4px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 11.5px;
}
.timebar-etat { font-weight: 600; }
.timebar-note { color: var(--muted); font-size: 10.5px; margin-left: auto; cursor: help; }

/* ------------------------------------------------------- onglet Courbes */
.chart-controls {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin: 4px 0 6px;
}
.chart-controls select {
  padding: 2px 4px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); font-size: 11px;
}
.chart-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.chart-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel); cursor: pointer; font-size: 10.5px; color: var(--muted);
}
.chart-chip .dot { width: 8px; height: 8px; border-radius: 50%; }
.chart-chip.on { border-color: var(--border-strong); color: var(--ink); }
.chart-chip.off .dot { opacity: .25; }
.chart-chip:disabled { opacity: .4; cursor: default; }
.chart-wrap { position: relative; }
.chart-tip {
  position: absolute; pointer-events: none; z-index: 4;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 5px 8px; font-size: 10.5px;
  box-shadow: 0 2px 8px rgba(20, 40, 60, .15); white-space: nowrap;
}
.chart-tip .t { font-weight: 650; margin-bottom: 2px; }
.chart-tip .l { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
.chart-tip .dot { width: 7px; height: 7px; border-radius: 50%; }

/* Cartouche des liens : puissance sur la première ligne, régime et débit
   dessous. Le texte ne doit pas intercepter le clic, sinon la liaison
   elle-même devient impossible à sélectionner sous son étiquette. */
.react-flow__edge-text { font-size: 9px; pointer-events: none; }
.react-flow__edge-text tspan:first-child { font-weight: 600; }
.react-flow__edge-textbg { fill: #fff; fill-opacity: .88; pointer-events: none; }

/* ------------------------------------------------------------ menu contextuel */
.ctxmenu {
  position: fixed; z-index: 1000;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 4px; min-width: 186px;
}
.ctxmenu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 9px; border: none; background: none; text-align: left;
  border-radius: 4px; cursor: pointer;
}
.ctxmenu button:hover { background: var(--accent-soft); }
.ctxmenu button.danger:hover { background: #fdecea; color: var(--error); }
.ctxmenu hr { border: none; border-top: 1px solid var(--border); margin: 4px 2px; }
.ctxmenu .ctx-title {
  padding: 4px 9px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--muted); font-weight: 700;
}
.ctx-sub { max-height: 260px; overflow-y: auto; }

/* --------------------------------------------------------------- propriétés */
.props-empty { padding: 26px 18px; color: var(--muted); text-align: center; line-height: 1.6; }

.props-head { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.props-head input {
  width: 100%; padding: 5px 7px; font-weight: 650;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.props-head input:focus { outline: none; border-color: var(--accent); }
.props-head .sub { font-size: 11px; color: var(--muted); margin-top: 4px; }

.tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  padding: 7px 10px; border: none; background: none; cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; font-size: 12px;
  color: var(--muted);
}
.tabs button.active { border-bottom-color: var(--accent); color: var(--accent); font-weight: 650; }

.field { padding: 7px 12px; border-bottom: 1px solid #eef1f4; }
.field label { display: block; font-size: 11.5px; margin-bottom: 3px; }
.field .row { display: flex; align-items: center; gap: 6px; }
.field input[type=number], .field input[type=text], .field select {
  flex: 1; min-width: 0; padding: 4px 7px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field .unit { font-size: 11px; color: var(--muted); min-width: 46px; }
.field .help { font-size: 10.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* ------------------------------------------------------- bulle d'aide « i » */
.info-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; margin-left: 5px;
  border: 1px solid var(--border-strong); border-radius: 50%;
  font-size: 9px; font-weight: 700; font-style: italic;
  color: var(--muted); background: var(--panel);
  cursor: help; vertical-align: middle; user-select: none;
  flex-shrink: 0; line-height: 1;
}
.info-badge:hover, .info-badge:focus {
  border-color: var(--accent); color: #fff; background: var(--accent); outline: none;
}

.infotip {
  position: fixed; z-index: 1200;
  background: #1d262d; color: #eef3f7;
  border-radius: 6px; padding: 9px 11px;
  box-shadow: 0 4px 18px rgba(20, 34, 47, .32);
  font-size: 11.5px; line-height: 1.5;
  pointer-events: none;
}
.infotip-help { color: #ffffff; }
.infotip-options {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  display: grid; gap: 5px;
}
.infotip-option { line-height: 1.35; }
.infotip-option-nom { color: #9fd1f5; font-weight: 600; }
.infotip-option-desc { color: #e2ecf4; }
.infotip-impact {
  margin-top: 7px; padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  color: #cfe0ec;
}
.infotip-tag {
  display: inline-block; margin-right: 5px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #7fc4f0;
}
/* Un champ que la fiche technique renseigne troque son « i » contre un badge
   repérable : sans cela, rien ne distinguerait une aide d'une suggestion. */
.info-badge.has-fiche {
  width: auto; height: auto; padding: 1px 4px; border-radius: 4px;
  border-color: var(--source); background: #e4f4f4;
  font-size: 9px; font-style: normal; cursor: pointer;
}
.info-badge.has-fiche:hover, .info-badge.has-fiche:focus {
  background: var(--source); border-color: var(--source);
}
.infotip-actif { pointer-events: auto; }
.infotip-fiche { margin-bottom: 8px; }
.infotip-fiche + .infotip-help {
  padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .16);
}
.infotip-choix { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.infotip-valeur {
  padding: 3px 9px; border: 1px solid rgba(127, 196, 240, .5); border-radius: 4px;
  background: rgba(127, 196, 240, .14); color: #eaf5fc;
  font: inherit; font-weight: 650; cursor: pointer;
}
.infotip-valeur:hover { background: #7fc4f0; border-color: #7fc4f0; color: #10202b; }
.infotip-gamme { margin-top: 5px; font-size: 10.5px; color: #cfe0ec; }
.infotip-extrait {
  margin-top: 6px; font-size: 10.5px; line-height: 1.45; color: #a9bccb;
  font-style: italic; word-break: break-word;
}

.field.switch .row { justify-content: space-between; }
.field.switch label { margin: 0; }

/* ------------------------------------------- interrupteur Normal / Secours */
.mode-secours {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px; margin-right: 4px;
  border: 1px solid var(--border); border-radius: 999px;
  font-size: 11.5px; color: var(--muted); cursor: pointer; user-select: none;
  background: var(--panel);
}
.mode-secours.actif {
  border-color: #d79a2b; background: #fdf4e3; color: #7a5410;
}
.mode-secours .mode-actif { font-weight: 700; color: var(--text); }
.mode-secours.actif .mode-actif { color: #7a5410; }
.mode-glissiere { position: relative; width: 30px; height: 16px; }
.mode-glissiere input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.mode-glissiere i {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--border-strong); transition: background .15s;
}
.mode-glissiere i::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: var(--panel);
  transition: left .15s;
}
.mode-glissiere input:checked + i { background: #d79a2b; }
.mode-glissiere input:checked + i::after { left: 16px; }

/* ------------------------------------------ lecture d'une fiche constructeur */
.fiche-zone {
  margin: 12px 12px 4px; padding: 10px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  background: #fbfcfd;
}
.fiche-zone.survol { border-color: var(--source); background: #eff8f8; }
.fiche-depot {
  display: flex; align-items: center; gap: 10px;
  position: relative; overflow: hidden; cursor: pointer;
}
.fiche-depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fiche-ico { font-size: 19px; line-height: 1; }
.fiche-depot strong { display: block; font-size: 12px; }
.fiche-depot em { display: block; font-size: 10.5px; color: var(--muted); font-style: normal; }
.fiche-etat { margin-top: 8px; font-size: 12px; color: var(--accent); }
.fiche-bilan { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.fiche-compte { font-size: 12px; }
.fiche-compte strong { color: var(--source); font-size: 14px; }
.fiche-note { margin: 6px 0 8px; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
.fiche-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.fiche-liste li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 11.5px; border-bottom: 1px dotted var(--border);
}
.fiche-liste span { color: var(--muted); }
.fiche-liste strong { white-space: nowrap; font-weight: 650; }
.fiche-bilan .btn { width: 100%; }

/* --------------------------------------------- mois d'effacement (12 cases) */
.months {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px;
  margin-top: 5px;
}
.months button {
  padding: 6px 0; border: 1px solid var(--border); background: var(--panel);
  border-radius: 3px; cursor: pointer; font-size: 10px; font-weight: 600;
  color: var(--muted); line-height: 1;
}
.months button:hover { border-color: var(--accent); }
.months button.on {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.months-legend {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 5px; font-size: 10.5px; color: var(--muted);
}
.months-legend button {
  border: none; background: none; color: var(--accent); cursor: pointer;
  font-size: 10.5px; padding: 0 4px;
}
.months-legend button:hover { text-decoration: underline; }

/* ------------------------------------------- composition d'une CTA (sections) */
.field-sections { padding: 9px 10px; }
.field-sections > label { margin-bottom: 7px; }

.sections-end {
  font-size: 10px; color: var(--muted); text-align: center;
  text-transform: uppercase; letter-spacing: .5px; padding: 3px 0;
}
.sections-empty {
  padding: 12px 10px; font-size: 11.5px; color: var(--muted);
  text-align: center; border: 1px dashed var(--border); border-radius: var(--radius);
}

.section {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); margin-bottom: 4px; overflow: hidden;
}
.section.open { border-color: var(--accent); }

.section-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 6px; cursor: pointer;
}
.section-head:hover { background: var(--accent-soft); }

.section-num {
  width: 15px; height: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; background: var(--bg); color: var(--muted);
  font-size: 9px; font-weight: 700;
}
.section-ico { font-size: 13px; width: 16px; text-align: center; flex-shrink: 0; }
.section-title {
  flex: 1; min-width: 0; font-size: 11.5px; font-weight: 600; line-height: 1.3;
}
.section-sub {
  display: block; font-weight: 400; font-size: 10px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.section-tools { display: flex; gap: 1px; flex-shrink: 0; }
.section-tools button {
  width: 19px; height: 19px; padding: 0;
  border: none; background: none; border-radius: 3px;
  color: var(--muted); cursor: pointer; font-size: 11px; line-height: 1;
}
.section-tools button:hover { background: var(--border); color: var(--text); }
.section-tools button:disabled { opacity: .25; cursor: default; background: none; }
.section-tools button.danger:hover { background: #fdecea; color: var(--error); }

.section-body { border-top: 1px solid var(--border); background: #fbfcfd; }
.section-body .field { padding: 6px 9px; }
.section-body .field:last-child { border-bottom: none; }

.section-add { width: 100%; margin-top: 6px; justify-content: center; }

.section-add-list {
  margin-top: 6px; border: 1px solid var(--accent); border-radius: var(--radius);
  overflow: hidden;
}
.section-add-list button {
  display: flex; align-items: flex-start; gap: 7px; width: 100%;
  padding: 6px 8px; border: none; background: var(--panel); cursor: pointer;
  text-align: left; border-bottom: 1px solid var(--border); font-size: 11.5px;
}
.section-add-list button:hover { background: var(--accent-soft); }
.section-add-list button.cancel {
  justify-content: center; color: var(--muted); border-bottom: none; background: var(--bg);
}

/* Composition horizontale : les cartes se lisent comme le synoptique,
   dans le sens du flux — entrée à gauche, sortie à droite. */
.sections-strip {
  display: flex; align-items: stretch; gap: 5px;
  overflow-x: auto; padding: 4px 2px 6px;
}
.sections-strip .sections-empty { flex: 1; align-self: center; }
.sections-cap {
  align-self: center; flex-shrink: 0; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; max-width: 64px;
  text-align: center;
}
.section-carte {
  flex: 0 0 138px; display: flex; flex-direction: column; gap: 3px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--panel); padding: 5px 6px; cursor: pointer; min-width: 0;
}
.section-carte:hover { background: var(--accent-soft); }
.section-carte.open { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.carte-tete { display: flex; align-items: center; gap: 4px; }
.carte-tete .section-tools { margin-left: auto; }
.carte-nom { font-size: 11px; font-weight: 600; line-height: 1.25; }
.carte-resume {
  font-size: 9.5px; color: var(--muted); line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.carte-recup-commune {
  border-style: dashed; border-color: #2f9e77; background: #f0f8f4;
  cursor: default;
}
.carte-recup-commune .carte-resume { color: #2f9e77; }

.section-carte-ajout {
  flex: 0 0 40px; align-items: center; justify-content: center;
  font-size: 17px; color: var(--muted); border-style: dashed;
}
.section-carte-ajout:hover { color: var(--accent); border-color: var(--accent); }
.section-body-large {
  border: 1px solid var(--accent); border-radius: var(--radius);
  margin-bottom: 6px; background: #fbfcfd;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  column-gap: 12px;
}

/* La visite guidée : projecteur + carte, l'application reste utilisable */
.tuto-projecteur {
  position: fixed; z-index: 90; pointer-events: none; border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(12, 22, 32, .48), 0 0 0 2.5px var(--accent);
  transition: all .3s ease;
}
.tuto-voile {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: rgba(12, 22, 32, .48);
}
.tuto-carte {
  z-index: 95; width: 360px; background: var(--panel); border-radius: 12px;
  padding: 16px 18px; box-shadow: 0 18px 50px rgba(12, 22, 32, .35);
  border: 1px solid var(--border);
}
.tuto-tete { display: flex; align-items: baseline; justify-content: space-between;
             margin-bottom: 6px; }
.tuto-tete strong { font-size: 15px; }
.tuto-pas { font-size: 11.5px; color: var(--muted); }
.tuto-carte p { font-size: 13px; line-height: 1.55; color: #33414c; }
.tuto-geste {
  margin-top: 10px; font-size: 12px; color: var(--accent);
  background: var(--accent-soft); border-radius: 6px; padding: 6px 9px;
}
.tuto-actions { display: flex; justify-content: space-between; margin-top: 14px; }

/* Groupes de blocs, façon Dynamo : cadre teinté, titre renommable en place */
.groupe-cadre {
  border: 1.6px solid; border-radius: 9px; position: relative;
  box-sizing: border-box;
}
/* Le CORPS du cadre laisse tout passer — liens cliquables, lasso, pan —
   et seul le BANDEAU-TITRE prend la souris : c'est par lui qu'on saisit
   le groupe pour le déplacer entier, comme dans Dynamo. */
.react-flow__node-groupe { pointer-events: none !important; }
.groupe-tete {
  pointer-events: all; cursor: grab;
  position: absolute; top: 0; left: 0; right: 0; height: 28px;
  display: flex; align-items: center; padding: 0 10px;
  border-radius: 8px 8px 0 0;
}
.groupe-tete:active { cursor: grabbing; }
.groupe-titre {
  flex: 1; border: none; background: transparent; outline: none;
  font-size: 13.5px; font-weight: 700; color: #33414c;
  font-family: inherit; min-width: 0;
}
.groupe-titre:focus { background: rgba(255, 255, 255, .75); border-radius: 4px; }
.groupe-prise {
  flex: none; font-size: 11px; color: #33414c; opacity: .55;
  letter-spacing: 1.5px; user-select: none;
}
/* Le contour entier du cadre se saisit : trois bandes fines le long des
   bords (le bandeau couvre le haut), qui débordent un peu vers l'extérieur
   pour se prendre facilement sans voler l'intérieur aux liens. */
.groupe-bord { position: absolute; pointer-events: all; cursor: grab; }
.groupe-bord:active { cursor: grabbing; }
.bord-gauche { left: -4px; top: 28px; bottom: 0; width: 11px; }
.bord-droite { right: -4px; top: 28px; bottom: 0; width: 11px; }
.bord-bas { left: 0; right: 0; bottom: -4px; height: 11px; }
.mode-tablette .bord-gauche, .mode-tablette .bord-droite { width: 16px; left: -6px; }
.mode-tablette .bord-droite { left: auto; right: -6px; }
.mode-tablette .bord-bas { height: 16px; bottom: -6px; }

/* Grille d'occupation 7 j x 24 h de la GTB */
.week-grid table { border-collapse: collapse; }
.week-grid th { font-size: 9px; color: var(--muted); font-weight: 600;
  padding: 1px 3px; text-align: right; }
.week-grid thead th { text-align: center; }
.week-grid td {
  width: 15px; height: 15px; border: 1px solid var(--border);
  background: var(--panel); cursor: pointer;
}
.week-grid td.occ { background: var(--accent); border-color: var(--accent); }
.week-grid td:hover { outline: 2px solid var(--accent); outline-offset: -2px; }
.week-grid tbody th button {
  border: none; background: none; cursor: pointer; color: var(--muted);
  font-size: 11px;
}
.week-grid tbody th button:hover { color: var(--accent); }
.week-outils { display: flex; gap: 6px; align-items: center; margin: 4px 0 6px; }
.week-total { font-size: 10.5px; color: var(--muted); margin-left: auto; }

/* Historique, lecture seule, partage et corbeille des projets */
.menu-historique {
  position: absolute; top: 30px; left: 0; z-index: 60; min-width: 190px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(20, 30, 40, .14); overflow: hidden;
}
.menu-historique button {
  display: block; width: 100%; padding: 6px 10px; border: none; background: none;
  text-align: left; font-size: 11.5px; cursor: pointer;
}
.menu-historique button:hover { background: var(--accent-soft); }
.menu-historique-vide { padding: 8px 10px; font-size: 11px; color: var(--muted); }
.lecture-seule {
  font-size: 11px; color: #a05a00; background: #fdf3e2;
  border: 1px solid #ecd2a0; border-radius: 999px; padding: 2px 9px;
}
.proj-partage-note { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }
.proj-partage {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 8px 8px 16px; border-bottom: 1px solid var(--border);
}
.proj-partage input, .proj-partage select {
  font-size: 11.5px; padding: 3px 6px; border: 1px solid var(--border);
  border-radius: 4px;
}
.proj-partage-pastille {
  font-size: 11px; background: var(--accent-soft); border-radius: 999px;
  padding: 2px 8px; display: inline-flex; align-items: center; gap: 4px;
}
.proj-partage-pastille button { border: none; background: none; cursor: pointer; color: var(--muted); }
.proj-partage-erreur { font-size: 11px; color: var(--error); }
.proj-corbeille-titre { width: 100%; margin-top: 10px; justify-content: flex-start; color: var(--muted); }
.proj-row-corbeille { opacity: .75; }

.props-messages { padding: 8px 12px; border-bottom: 1px solid var(--border); }

.props-section { padding: 9px 12px 4px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }

.conn-list { padding: 4px 12px 12px; }
.conn {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 0; border-bottom: 1px solid #eef1f4; font-size: 11.5px;
}
.conn .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.conn .txt { flex: 1; }
.conn .state { font-size: 10.5px; color: var(--muted); }
.conn .state.on { color: var(--ok); }

/* ---------------------------------------------------------------- résultats */
.result-grid { padding: 4px 12px 12px; }
.result-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid #eef1f4; font-size: 12px;
}
.result-row .k { color: var(--muted); }
.result-row .v { font-weight: 600; white-space: nowrap; }
.result-row.total .k, .result-row.total .v { font-weight: 700; color: var(--accent); }

/* En FENÊTRE, une ligne de résultat ne s'étire plus sur toute la largeur de
   l'écran : la valeur reste près de son étiquette au lieu d'être collée au
   bord droit — un 27 pouces mettait un gouffre entre les deux. */
.params-overlay .result-row,
.params-overlay .props-section,
.params-overlay .conn { max-width: 880px; }
.params-overlay .props-help { max-width: 980px; }

.bar-chart { padding: 8px 12px 14px; }
.bar-chart svg { width: 100%; display: block; }

.mini-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.mini-table th, .mini-table td { padding: 3px 5px; border-bottom: 1px solid #eef1f4; text-align: right; }
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }
.mini-table th { color: var(--muted); font-weight: 600; }

/* -------------------------------------------------------------------- statut */
.statusbar {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px; background: var(--panel);
  border-top: 1px solid var(--border); font-size: 11.5px;
  min-height: 30px;
}
.msg { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.msg.error { color: var(--error); }
.msg.warning { color: var(--warn); }
.msg.ok { color: var(--ok); }
.msg.info { color: var(--muted); }
.msg-count {
  padding: 0 6px; border-radius: 9px; background: var(--accent-soft);
  color: var(--accent); font-weight: 650;
}

/* ------------------------------------------------------------------ modales */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 34, 47, .35);
  display: flex; align-items: center; justify-content: center; z-index: 900;
}
.modal {
  background: var(--panel); border-radius: 10px; box-shadow: var(--shadow);
  width: min(660px, 92vw); max-height: 84vh; overflow: auto;
}
.modal h2 { margin: 0; padding: 14px 18px; font-size: 15px; border-bottom: 1px solid var(--border); }
.modal .body { padding: 14px 18px; }
.modal .foot { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }


/* Pendant qu'un export se fabrique, les choix cessent de réagir : une note
   horaire demande quelques secondes, et rien ne dit qu'on a cliqué. */
/* Synoptique d'une machine : le dessin, puis sa note de lecture. */
.machine-schema { padding: 10px 12px 14px; }
.machine-schema svg {
  display: block; max-width: 900px; margin: 0 auto;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.machine-note {
  max-width: 900px; margin: 10px auto 0; font-size: 11px; line-height: 1.55;
  color: var(--muted);
}

/* Fenêtre d'extrapolation des performances : le point déclaré, puis la grille. */
.extrap-grille {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 12px;
}
.extrap-grille label { display: block; font-size: 11.5px; color: var(--muted); }
.extrap-grille input, .extrap-grille select {
  width: 100%; margin-top: 3px; padding: 4px 7px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
}
.extrap-bilan {
  margin-top: 12px; padding: 10px; font-size: 11.5px; line-height: 1.5;
  background: var(--accent-soft); border-radius: var(--radius);
}
.perft-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.perft-actions .section-add { flex: 1; }

.tpl-attente { opacity: .55; cursor: progress; }
.tpl-attente:hover { border-color: var(--border); background: none; }

.proj-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 6px;
}
.proj-row .n { flex: 1; font-weight: 600; }
.proj-row .m { font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------ mode d'emploi */
.manual {
  background: var(--panel); border-radius: 10px; box-shadow: var(--shadow);
  width: min(1180px, 95vw); height: min(88vh, 900px);
  display: flex; flex-direction: column; overflow: hidden;
}

.manual-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.manual-title { font-size: 15px; font-weight: 700; color: var(--accent); }
.manual-sub { font-size: 11px; color: var(--muted); margin-top: 1px; }
.manual-search {
  margin-left: auto; width: 260px; padding: 5px 9px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.manual-search:focus { outline: none; border-color: var(--accent); }

.manual-error { padding: 10px 16px; color: var(--error); font-size: 12px; }
.manual-loading {
  padding: 40px; text-align: center; color: var(--muted);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.manual-body { flex: 1; display: flex; min-height: 0; }

.manual-toc {
  width: 250px; flex-shrink: 0; overflow-y: auto;
  border-right: 1px solid var(--border); background: #fafcfd;
  padding: 8px 6px;
}
.manual-toc button {
  display: block; width: 100%; text-align: left;
  padding: 6px 10px; border: none; background: none; cursor: pointer;
  border-radius: var(--radius); font-size: 12px; color: var(--text);
  line-height: 1.35;
}
.manual-toc button:hover { background: var(--accent-soft); color: var(--accent); }
.manual-toc button.active {
  background: var(--accent-soft); color: var(--accent); font-weight: 650;
}
.manual-none { padding: 10px; font-size: 12px; color: var(--muted); }

.manual-content {
  flex: 1; overflow-y: auto; padding: 4px 26px 60px;
  font-size: 13px; line-height: 1.65; position: relative;
}
.manual-content section { padding-top: 18px; }
.manual-content h2 {
  font-size: 16px; color: var(--accent); margin: 6px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.manual-content h3 { font-size: 13px; margin: 18px 0 6px; }
.manual-content p { margin: 0 0 10px; }
.manual-content ul, .manual-content ol { margin: 0 0 12px; padding-left: 22px; }
.manual-content li { margin-bottom: 6px; }

.man-note, .man-warn {
  border-radius: var(--radius); padding: 9px 12px; margin: 4px 0 14px;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
}
.man-warn { background: #fdf6e7; border-left-color: var(--warn); }
.man-note strong { color: var(--accent); margin-right: 4px; }
.man-warn strong { color: var(--warn); margin-right: 4px; }

.man-code {
  background: #1d262d; color: #eef3f7; padding: 9px 12px;
  border-radius: var(--radius); margin: 4px 0 14px;
  font-family: Consolas, "Courier New", monospace; font-size: 12px;
  overflow-x: auto;
}

/* Formules : l'équation, puis ce qui permet de s'en servir */
.man-formula {
  border-left: 3px solid var(--accent); background: #f7fafc;
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 10px 14px; margin: 6px 0 18px;
}
.man-fx-title { font-weight: 650; margin-bottom: 7px; }
.man-fx-expr {
  margin: 0 0 9px; padding: 0; overflow-x: auto;
  font-family: Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  font-size: 12.5px; line-height: 1.7; color: var(--accent);
  white-space: pre; background: none;
}
.man-fx-legend {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 12px;
  margin: 0 0 8px; font-size: 12px;
}
.man-fx-legend dt {
  font-family: Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  font-weight: 700; color: var(--text); white-space: nowrap;
}
.man-fx-legend dd { margin: 0; color: var(--muted); }
.man-fx-meta {
  font-size: 12px; color: var(--text); margin-top: 5px; line-height: 1.55;
}
.man-fx-meta span {
  display: inline-block; min-width: 62px; margin-right: 8px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--accent); vertical-align: 1px;
}
.man-fx-meta.caveat span { color: var(--warn); }

.man-table-wrap { overflow-x: auto; margin: 4px 0 16px; }
.man-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.man-table th {
  background: var(--accent); color: #fff; text-align: left;
  padding: 6px 8px; font-weight: 600; white-space: nowrap;
}
.man-table td {
  padding: 5px 8px; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.5;
}
.man-table tbody tr:nth-child(even) { background: var(--accent-soft); }

@media (max-width: 900px) {
  .manual-toc { display: none; }
  .manual-search { width: 150px; }
}

.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.settings-grid .field { border: none; padding: 0; }

.busy-tag {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 11.5px;
}
.busy-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

/* ---------------------------------------------------------------- estimatif
   Un chiffrage se lit à deux niveaux : le montant, et la confiance qu'on peut
   lui accorder. D'où la barre de maturité au-dessus du bordereau, et la puce
   qui distingue ligne par ligne un prix saisi d'un ratio. */

.maturity { margin: 2px 0 14px; }
.maturity-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; margin-bottom: 5px;
}
.maturity-verdict { color: var(--muted); font-size: 11px; }
.maturity-track {
  height: 5px; border-radius: 3px; background: var(--border); overflow: hidden;
}
.maturity-fill { height: 100%; transition: width .25s ease; }
.maturity-legend { font-size: 10.5px; color: var(--muted); margin-top: 5px; }

.estimatif { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.estimatif th {
  text-align: right; font-weight: 600; font-size: 10.5px; color: var(--muted);
  padding: 0 0 5px 8px; border-bottom: 1px solid var(--border);
}
.estimatif th:first-child { text-align: left; padding-left: 0; }
.estimatif td { padding: 5px 0 5px 8px; text-align: right; vertical-align: top; }
.estimatif td:first-child { text-align: left; padding-left: 0; }

.estimatif tr.lot td {
  font-weight: 650; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--accent);
  padding-top: 12px; border-bottom: 1px solid var(--border);
}
.estimatif tbody tr:not(.lot) { cursor: pointer; }
.estimatif tbody tr:not(.lot):hover { background: var(--accent-soft); }

.puce {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
  border: 1px solid var(--muted); background: transparent;
}
.puce-ferme { background: var(--ok); border-color: var(--ok); }

.origine {
  display: block; font-size: 10px; color: var(--muted);
  margin: 1px 0 0 12px; font-style: italic;
}

.estimatif tfoot td {
  font-weight: 650; padding-top: 9px; border-top: 2px solid var(--border);
}
.estimatif-empty { font-size: 11.5px; color: var(--muted); padding: 6px 0; }

/* --------------------------------------------------------------- loi d'eau
   Quatre nombres alignés ne disent rien d'une régulation ; une pente
   aberrante, elle, se voit du premier coup d'œil. D'où le tracé. */

.loi-bouton {
  display: flex; align-items: center; gap: 8px; width: 100%;
  justify-content: flex-start; font-size: 12px; text-align: left;
}
.loi-pastille {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  border: 1px solid var(--muted); background: transparent;
}
.loi-pastille.active { background: var(--ok); border-color: var(--ok); }

.loi-actif { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.loi-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; margin: 8px 0 0; }

.loi-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0 6px; }
.loi-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--accent); font-weight: 650; margin-bottom: 8px;
}
.loi-champ { display: block; font-size: 12px; margin-bottom: 10px; }
.loi-champ > span:first-child { display: block; margin-bottom: 4px; color: var(--muted); }
.loi-champ .row { display: flex; align-items: center; gap: 6px; }
.loi-champ input {
  width: 100%; padding: 6px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.loi-champ input:focus { outline: none; border-color: var(--accent); }

.loi-trace { width: 100%; height: auto; margin-top: 6px; }
.loi-trace line { stroke: var(--border); stroke-width: 1; }
.loi-courbe { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.loi-point { fill: var(--accent); }
.loi-axe { font-size: 8px; fill: var(--muted); }
.loi-fin { text-anchor: end; }

/* ------------------------------------------------------- profils mesurés */

.prof-ligne { display: flex; gap: 12px; align-items: flex-end; margin: 14px 0 4px; }
.prof-unite { flex: 1; font-size: 12px; }
.prof-unite span { display: block; margin-bottom: 4px; color: var(--muted); }
.prof-unite select { width: 100%; padding: 7px 9px; font-size: 13px; }
.prof-fichier { position: relative; overflow: hidden; white-space: nowrap; }
.prof-fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.prof-attente { font-size: 12px; color: var(--accent); margin: 10px 0 0; }

.flash-erreur, .flash-alerte {
  padding: 9px 12px; border-radius: var(--radius); font-size: 12px;
  line-height: 1.55; margin-top: 12px;
}
.flash-erreur { background: #fdecea; border-left: 3px solid var(--error); color: #8c2c20; }
.flash-alerte { background: #fdf4e3; border-left: 3px solid #d79a2b; color: #7a5410; }

.prof-chiffres {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px;
  margin: 18px 0 6px; padding: 14px; border-radius: var(--radius);
  background: var(--accent-soft);
}
.prof-chiffres span { display: block; font-size: 10.5px; color: var(--muted); }
.prof-chiffres strong { font-size: 15px; font-weight: 650; }
.prof-chiffres .prof-periode { font-size: 12px; }
.prof-chiffres em { display: block; font-size: 10px; color: var(--muted); font-style: normal; }

.prof-titre {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px;
  color: var(--accent); font-weight: 650; margin: 18px 0 8px;
}
.prof-barres { display: flex; gap: 5px; align-items: flex-end; height: 92px; }
.prof-mois { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.prof-pile { flex: 1; width: 100%; display: flex; flex-direction: column;
             justify-content: flex-end; gap: 1px; }
.prof-mois span { font-size: 9.5px; color: var(--muted); }
.prof-occ { background: var(--accent); border-radius: 2px 2px 0 0; }
.prof-inocc { background: var(--border); }
.prof-legende { display: flex; gap: 16px; margin-top: 8px; font-size: 10.5px; color: var(--muted); }
.prof-legende i { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
                  margin-right: 5px; vertical-align: -1px; }

.prof-trame {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 14px 15px; margin: 14px 0 18px;
}
.prof-trame .prof-ligne { margin: 0; }
.prof-unite input[type=date] {
  width: 100%; padding: 7px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
}

/* Champ neutralisé par un profil mesuré : la valeur reste lisible — elle
   redevient le repli dès que le profil est retiré — mais on ne peut plus la
   saisir, et l'on dit ce qui la remplace. */
.field-remplace input { background: var(--accent-soft); color: var(--muted); cursor: not-allowed; }
.field-remplace label { color: var(--muted); }
.field-note {
  font-size: 10.5px; color: var(--accent); line-height: 1.5;
  margin: 4px 0 0; padding-left: 1px;
}

.prof-pas .row { display: flex; gap: 6px; }
.prof-pas input[type=number] {
  width: 68px; padding: 7px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.prof-pas select { flex: 1; }

/* ------------------------------------------------------------------ audit */
/* Contrôle de cohérence : chaque invariant sur sa ligne, valeurs en face. */
.audit-modal { width: min(820px, 94vw); }
.audit-attente { color: var(--muted); padding: 18px 0; text-align: center; }
.audit-verdict {
  padding: 9px 12px; border-radius: var(--radius); font-weight: 650;
  margin-bottom: 12px;
}
.audit-verdict.ok { background: #e8f6ec; color: #1c7a3d; }
.audit-verdict.ko { background: #fdecea; color: #b3261e; }
.audit-groupe h3 {
  margin: 12px 0 4px; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.audit-ligne {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 6px; border-radius: 4px; font-size: 12.5px; line-height: 1.4;
}
.audit-ligne:nth-child(odd) { background: #f7fafc; }
.audit-ligne.ko { background: #fdecea; }
.audit-etat { flex: 0 0 auto; font-weight: 700; color: #1c7a3d; }
.audit-ligne.ko .audit-etat { color: #b3261e; }
.audit-libelle { flex: 1 1 auto; }
.audit-detail { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.audit-note {
  margin: 14px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5;
}

/* ---------------------------------------------------------------- journée */
.jour-releve {
  font-size: 11px; line-height: 1.5; margin-top: 4px;
  min-height: 30px;
}
.jour-releve.muted { color: var(--muted); }
.mini-table tr.jour-inoccupe td { color: var(--muted); }

/* --------------------------------------------------------------- versions */
.brand-version {
  border: none; background: none; cursor: pointer; position: relative;
  font: inherit; font-size: 10.5px; color: var(--muted);
  padding: 0 2px 0 4px; vertical-align: baseline;
}
.brand-version:hover { color: var(--accent); text-decoration: underline; }
.version-neuve {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #e0483a; margin-left: 3px; vertical-align: super;
  animation: version-pulse 1.6s ease-in-out infinite;
}
@keyframes version-pulse {
  0%, 100% { opacity: 1; } 50% { opacity: 0.35; }
}
.versions-modal { width: min(720px, 94vw); }
.versions-regle { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.versions-regle code { background: #f0f4f7; padding: 1px 4px; border-radius: 3px; }
.version-entree { margin-bottom: 14px; }
.version-tete { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.version-badge {
  font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 10px;
  color: #fff; background: #6a7783;
}
.version-badge.majeure { background: #b3261e; }
.version-badge.mineure { background: #d98d20; }
.version-badge.legere { background: #2f9e63; }
.version-date { font-size: 10.5px; color: var(--muted); margin-left: auto; }
.version-note { font-size: 12px; line-height: 1.5; padding: 1px 0 1px 8px; }

/* ------------------------------------------------- sections en extraction */
.section-title.section-ignoree { opacity: 0.55; text-decoration: line-through; }
.section-ignoree-note { color: #b3261e; text-decoration: none; display: inline-block; }

/* -------------------------------------------------------------- variantes */
.variantes-modal { width: min(860px, 96vw); }
.variante-ligne {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 6px;
}
.variante-ligne.active { border-color: var(--accent); background: var(--accent-soft, #eef5fa); }
.variante-ligne input {
  flex: 1; padding: 5px 8px; font-size: 13px;
  border: 1px solid var(--border); border-radius: 4px;
}
.variante-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #fff; background: var(--accent); border-radius: 9px; padding: 2px 8px;
}
.variante-date { font-size: 10.5px; color: var(--muted); min-width: 66px; }
.variante-outils { display: flex; gap: 4px; }
.variante-creer { display: flex; gap: 8px; margin-top: 10px; }
.variante-creer input {
  flex: 1; padding: 6px 9px; font-size: 13px;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.cmp-defile { overflow-x: auto; }
.cmp-table th { white-space: nowrap; }
.cmp-table td { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table td:first-child { text-align: left; }
.cmp-table td.cmp-best { color: #1c7a3d; font-weight: 700; background: #e8f6ec; }

.variante-note {
  width: 100%; box-sizing: border-box; margin: -2px 0 8px; padding: 6px 9px;
  font: inherit; font-size: 12px; line-height: 1.45; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius); color: inherit;
}
.variante-note::placeholder { color: var(--muted); }

/* --------------------------------------------------- points constructeur */
.perf-table { display: flex; flex-direction: column; gap: 4px; }
.perf-ligne {
  display: grid; gap: 4px; align-items: center;
  grid-template-columns: 64px 52px 1fr 1fr 1fr 1fr 24px;
}
.perf-ligne input, .perf-ligne select {
  width: 100%; box-sizing: border-box; padding: 4px 5px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 4px;
}
.perf-entete span {
  font-size: 9.5px; color: var(--muted); text-transform: uppercase;
  letter-spacing: .03em;
}
.perf-note { font-size: 10.5px; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------ catalogue machines */
.catalogue-machines { border-bottom: 1px solid var(--border); }
.catalogue-titre { width: 100%; text-align: left; padding: 7px 12px; font-size: 12px; }
.catalogue-corps { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.catalogue-corps > input {
  padding: 5px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: 4px;
}
.catalogue-message { font-size: 11px; line-height: 1.4; }
.catalogue-vide { font-size: 11px; color: var(--muted); }
.catalogue-fiche { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.catalogue-nom { flex: 1; line-height: 1.3; }
.catalogue-detail { display: block; font-size: 10.5px; color: var(--muted); }
.catalogue-form { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 4px; }
.catalogue-form input, .catalogue-form select {
  padding: 5px 7px; font-size: 11.5px; border: 1px solid var(--border); border-radius: 4px;
}

/* ------------------------------------------------------------ bibliothèque */
.bibliotheque-modal { width: min(880px, 96vw); }
.fiche-badge {
  flex: 0 0 auto; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 9px; color: #fff;
}
.fiche-badge.simple { background: #6a7783; }
.fiche-badge.detaillee { background: #0f5c8c; }
.fiche-editeur { display: flex; flex-direction: column; }
.fiche-grille { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.fiche-champ { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.fiche-champ input, .fiche-champ select {
  padding: 5px 8px; font-size: 12.5px; color: var(--text, #1d262d);
  border: 1px solid var(--border); border-radius: 4px;
}
.bibliotheque-modal .foot { align-items: center; }

/* ------------------------------------------- tableaux de performance */
.perf-tables { display: flex; flex-direction: column; gap: 10px; }
.perft { border: 1px solid var(--border); border-radius: var(--radius); padding: 7px; }
.perft-tete { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.perft-tete select {
  padding: 4px 6px; font-size: 11.5px; border: 1px solid var(--border); border-radius: 4px;
}
.perft-source { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.perft-source input {
  width: 64px; padding: 4px 6px; font-size: 11.5px;
  border: 1px solid var(--border); border-radius: 4px;
}
.perft-recup { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); margin-left: auto; }
.perft-grille { display: grid; gap: 3px; align-items: center; }
.perft-grille input {
  width: 100%; box-sizing: border-box; padding: 3px 4px; font-size: 11px;
  border: 1px solid var(--border); border-radius: 3px;
}
.perft-th {
  font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .02em;
}
.perft-charge { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.perft-cop {
  font-size: 11.5px; font-weight: 650; text-align: center;
  background: #f0f4f7; border-radius: 3px; padding: 3px 2px;
}
.perft-cop.incoherent { background: #fdecea; color: #b3261e; }

.fiche-params { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 14px; }
.fiche-params .field-sections, .fiche-params .field:has(.perf-tables) { grid-column: 1 / -1; }

/* ------------------------------------------------- effet des paramètres */
.fx {
  display: inline-block; margin-left: 5px; font-size: 10px; line-height: 1;
  vertical-align: 1px; cursor: help;
}
.fx-calc { color: var(--accent); }
.fx-info { color: var(--muted); opacity: .8; }

/* Contrôles de bon sens : distingués des erreurs de calcul par une étiquette. */
.msg-tag {
  display: inline-block; margin: 0 4px 0 2px; padding: 0 6px;
  border-radius: 9px; font-size: 10px; font-weight: 600; letter-spacing: .02em;
  background: #e8f0f7; color: #2f5f8a; vertical-align: 1px; white-space: nowrap;
}

/* ------------------------------------------------------- mode tablette
   Bascule 📱/💻 du ruban : cibles élargies pour le doigt, appui long =
   clic droit, un doigt déplace le plan (bascule lasso flottante). Le mode
   est détecté au premier lancement (écran tactile) puis mémorisé. */
.mode-tablette .btn { padding: 9px 13px; font-size: 13.5px; }
.mode-tablette .topbar { row-gap: 7px; }
.mode-tablette .ctxmenu button { padding: 11px 14px; font-size: 13.5px; }
.mode-tablette .palette .block-item { padding: 10px 9px; }
.mode-tablette .react-flow__handle { width: 15px; height: 15px; }
.mode-tablette .volet-poignee { width: 27px; height: 74px; font-size: 15px; }
.mode-tablette .canvas {
  /* L'appui long ne doit pas déclencher la loupe ou le menu de copie du
     navigateur : c'est NOTRE clic droit. */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}

.outil-tactile {
  position: absolute; left: 12px; bottom: 148px; z-index: 8;
  padding: 10px 15px; border-radius: 21px;
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .96);
  font-size: 13.5px; cursor: pointer;
  box-shadow: 0 3px 10px rgba(12, 22, 32, .18);
}
.outil-tactile.actif { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Les résultats EN GRAND : la bande de droite, déployée en pleine page —
   les SVG (courbes, monotone) s'étirent avec la largeur, les tableaux et
   les valeurs respirent. */
.resultats-grand {
  width: min(1150px, 94vw); height: 92vh;
  background: var(--panel); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(12, 22, 32, .4);
  overflow: hidden; display: flex;
}
.resultats-grand .props.props-grand {
  width: 100%; max-width: none; border-left: none;
  overflow-y: auto; font-size: 13px;
}
/* ACCROCHES des liens : poignées d'étirement au milieu de chaque segment,
   visibles au survol du lien seulement — le schéma reste net au repos.
   La MAIN du cartouche (✥) suit la même règle. */
.poignee-lien { opacity: 0; transition: opacity .12s ease; }
.react-flow__edge:hover .poignee-lien,
.poignee-lien:active { opacity: 1; }
.main-cartouche { opacity: 0; transition: opacity .12s ease; }
.react-flow__edge:hover .main-cartouche,
.react-flow__edge-textwrapper:hover .main-cartouche { opacity: 1; }

/* Cadenas du schéma : allumé quand les positions sont verrouillées. */
.btn-cadenas.actif { background: #2c3e50; color: #fff; border-color: #2c3e50; }

/* MODE du projet (v1.139) : badge dans la barre — simplifié (un trait) ou
   expert (double trait, scission, piquages). Le bouton « → expert » monte
   un projet simplifié, une fois. */
.badge-mode { display: inline-block; padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .02em; line-height: 16px;
  border: 1px solid transparent; white-space: nowrap; }
.badge-mode.simplifie { background: #eef3f7; color: #45566a; border-color: #d3dce6; }
.badge-mode.expert { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.btn.btn-mode { padding: 2px 8px; font-size: 11px; }
.btn.btn-danger { background: #b3261e; color: #fff; border-color: #b3261e; }
/* Couleurs d'un réseau (expert) : aller et retour, dans le volet du lien. */
.couleurs-lien { display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 4px 0 6px; font-size: 12px; color: var(--muted); }
.couleurs-lien label { display: inline-flex; align-items: center; gap: 6px; }
.couleurs-lien input[type="color"] { width: 34px; height: 22px; padding: 0; border: 1px solid #d3dce6;
  border-radius: 4px; background: transparent; cursor: pointer; }
.btn.btn-danger:hover { background: #8f1d17; border-color: #8f1d17; }
.choix-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0 16px; }
.choix-mode .carte-mode { border: 1px solid #d3dce6; border-radius: 10px; padding: 12px 14px;
  cursor: pointer; background: var(--panel); text-align: left; }
.choix-mode .carte-mode:hover { border-color: #2c3e50; box-shadow: 0 0 0 2px rgba(44, 62, 80, .12); }
.choix-mode .carte-mode.actif { border-color: #2c3e50; background: #f4f7fa; }
.choix-mode .carte-mode strong { display: block; font-size: 14px; margin-bottom: 4px; }
.choix-mode .carte-mode span { font-size: 12px; color: #5b6770; line-height: 1.35; }

/* Onglet Puissances : le sélecteur Chaud/Froid — le bouton actif prend la
   couleur de son service. */
.chart-controls .btn.actif { background: #2c3e50; color: #fff;
                             border-color: #2c3e50; }

/* Assistant : un volet de chat en bas à droite — bulles, saisie, et la
   confidentialité écrite en tête, pas cachée dans une mention. */
.assistant-volet {
  position: fixed; right: 16px; bottom: 44px; width: 380px; z-index: 55;
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 10px; box-shadow: 0 8px 28px rgba(20, 40, 60, .25);
  display: flex; flex-direction: column; max-height: min(560px, 78vh);
}
.assistant-tete {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 10px; border-bottom: 1px solid var(--border);
  font-weight: 700; font-size: 13px;
}
.assistant-confidentialite {
  font-size: 9.5px; color: var(--muted); line-height: 1.4;
  padding: 6px 10px; border-bottom: 1px solid var(--border);
  background: var(--panel-2, #f7f9fb);
}
.assistant-fil {
  flex: 1; overflow-y: auto; padding: 10px;
  display: flex; flex-direction: column; gap: 8px; min-height: 120px;
}
.assistant-bulle {
  font-size: 12px; line-height: 1.5; padding: 7px 10px;
  border-radius: 10px; max-width: 92%; white-space: pre-wrap;
  word-break: break-word;
}
.assistant-moi { align-self: flex-end; background: var(--accent-soft, #e8f1fb); }
.assistant-bot { align-self: flex-start; background: #f2f4f6;
                 border: 1px solid var(--border); }
.assistant-saisie {
  display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--border);
}
.assistant-saisie textarea {
  flex: 1; resize: none; font: inherit; font-size: 12px;
  border: 1px solid var(--border-strong); border-radius: 6px; padding: 6px 8px;
}

/* Onglet Aides : une ligne par opération CEE — la fiche en badge, le calcul
   en dessous, les hypothèses en retrait. Les non-retenues restent visibles,
   estompées : rien n'est silencieux. */
.aide-ligne {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 7px 9px; margin-bottom: 7px; background: var(--panel);
}
.aide-refusee { opacity: .62; }
.aide-alerte { border-color: #d98d20; background: #fdf6ec; }
.aide-tete { display: flex; align-items: baseline; gap: 8px; }
.aide-fiche {
  font-size: 9.5px; font-weight: 700; letter-spacing: .3px;
  background: var(--accent-soft, #e8f1fb); color: var(--accent, #2c6eb5);
  border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.aide-nom { font-size: 11.5px; font-weight: 600; flex: 1; min-width: 0;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aide-montant { font-size: 11px; white-space: nowrap; }
.aide-detail { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.aide-hypothese { font-size: 10px; color: var(--muted); margin-top: 2px;
                  padding-left: 6px; }

/* Verdict du contrôle d'organisation : un bandeau discret, quelques
   secondes après chaque « Organiser », qui dit combien de valeurs de réseau
   ont été posées et qu'aucune ne recouvre rien. */
.avis-controle {
  position: fixed; bottom: 44px; left: 50%; transform: translateX(-50%);
  background: rgba(28, 44, 60, .92); color: #fff;
  padding: 7px 14px; border-radius: 18px; font-size: 12px;
  box-shadow: 0 4px 14px rgba(20, 40, 60, .25); z-index: 60;
  pointer-events: none; white-space: nowrap;
}

/* Le graphique grandit par son GABARIT (viewBox élargi côté JS), pas par
   étirement : sans ce plafond, l'image était dilatée et sa police avec —
   des chiffres énormes sur des courbes floues. */
.props-grand .chart-wrap svg { width: 100%; max-width: 820px; height: auto; }
.props-grand .mini-table { font-size: 12.5px; }
.props-grand .props-section { font-size: 13.5px; }
.props-grand .chart-controls select,
.props-grand .chart-chip { font-size: 12px; }