:root{
  /* --- Palette : vert sarcelle (aligné sur retention.urbaac.com), plus
     deux teintes fonctionnelles pour distinguer les deux scénarios de
     pluie (courante 10 mm vs étudiée) --- */
  --paper: #F6F7F6;
  --ink: #17262A;
  --ink-soft: #4A5B5E;
  --ink-faint: #8A9793;
  --line: #DEE3E0;
  --line-soft: #EAEDEB;
  --water: #2E6E8A;
  --critical: #A73A2C;
  --critical-soft: #FBEEEA;
  --brand: #0F766E;
  --brand-hover: #0B5C55;
  --brand-soft: #E6F5F2;
  --ok-bg: #FFFFFF;

  /* Pluie courante (10 mm) — olive */
  --scenario-a: #6B7F3E;
  --scenario-a-soft: #EEF2E2;
  /* Pluie étudiée (occurrence) — bleu ardoise */
  --scenario-b: #3B5B8C;
  --scenario-b-soft: #E9EEF8;

  /* --- Typographie --- */
  /* --- Typographie : Corbel pour toute l'interface, y compris les
     valeurs numériques (alignées via tabular-nums plutôt qu'en chasse
     fixe). --- */
  --sans: Corbel, "Lucida Sans Unicode", "Segoe UI", -apple-system, Candara, Calibri, Helvetica, Arial, sans-serif;
  --mono: Corbel, "Lucida Sans Unicode", "Segoe UI", -apple-system, Candara, Calibri, Helvetica, Arial, sans-serif;

  /* --- Échelle d'espacement (base 4px) --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;

  /* --- Rayons : arrondis partout (identité du logiciel de référence) --- */
  --radius: 10px;
  --radius-sm: 7px;

  /* --- Élévation, discrète --- */
  --shadow-sm: 0 1px 2px rgba(23,38,42,.05), 0 1px 1px rgba(23,38,42,.04);
  --shadow-md: 0 8px 20px rgba(23,38,42,.09), 0 1px 3px rgba(23,38,42,.06);
  --focus-ring: 0 0 0 3px rgba(15,118,110,.14);

  --ease: 140ms ease;
}

*{ box-sizing: border-box; }

html, body{
  margin:0; padding:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Chiffres alignés verticalement dans les tableaux et les synthèses,
   sans recourir à une police à chasse fixe. */
table, .kv-row b, .big-number, .result-value, .rb-grid b, input[type="number"],
.badge, .result-banner .rb-value{ font-variant-numeric: tabular-nums; }

a{ color: var(--brand); }
::selection{ background: var(--brand-soft); color: var(--brand-hover); }
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; }

.wrap{ max-width: 1600px; margin: 0 auto; padding: 0 var(--sp-7) var(--sp-8); }

/* ============================= En-tête ================================ */
header.topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--ok-bg);
  border-bottom: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-6);
  margin-bottom: var(--sp-7);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

header.topbar .brand{ font-size: 17px; font-weight: 650; letter-spacing: -0.005em; display:flex; align-items:center; gap: var(--sp-2); }
header.topbar .brand::before{
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2CA79A, var(--brand));
  display:inline-block; flex-shrink:0;
}
header.topbar .brand .module{ font-weight: 400; color: var(--ink-soft); font-size: 14px; letter-spacing: 0; }
header.topbar .brand a{ color: var(--ink); text-decoration: none; display:flex; align-items:center; gap: var(--sp-2); }

header.topbar nav{ display: flex; align-items: center; gap: var(--sp-4); font-size: 13.5px; color: var(--ink-soft); }
header.topbar nav a{ text-decoration: none; transition: color var(--ease); }
header.topbar nav a:hover{ color: var(--brand); }
header.topbar .version{ font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

/* ============================= Titres ================================== */
h1{ font-size: 25px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }

.hint{ font-size: 12.5px; color: var(--ink-faint); line-height: 1.5; }

.flash{
  border: 1px solid var(--critical);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  color: var(--critical);
  background: var(--critical-soft);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: 13.5px;
}

.panel-title{
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin: 0 0 var(--sp-4);
  font-weight: 650;
}

/* ============================= Formulaires ============================== */
/* Champs en boîte bordée (plutôt que soulignement seul), comme sur la
   référence. */
.field{ margin-bottom: var(--sp-4); }
.field label{ display: block; font-size: 12.5px; color: var(--ink-soft); margin-bottom: var(--sp-2); }
.field .hint{ display: block; margin-top: var(--sp-1); }
.field input, .field select{
  width: 100%;
  font-family: var(--sans);
  font-size: 14.5px;
  color: var(--ink);
  background: var(--ok-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  outline: none;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.field input:hover, .field select:hover{ border-color: var(--ink-faint); }
.field input:focus, .field select:focus{ border-color: var(--brand); box-shadow: var(--focus-ring); }
.row2{ display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.row3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
.row4{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--sp-4); }
.row5{ display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }

/* Sélecteur placé dans l'en-tête d'une carte (méthode de calcul) */
.header-select{
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border: 1px solid var(--brand); border-radius: 999px;
  padding: var(--sp-2) var(--sp-4); cursor: pointer; max-width: 260px;
  transition: background var(--ease);
}
.header-select:hover{ background: #D8EDE7; }
.header-select:focus{ outline: none; box-shadow: var(--focus-ring); }

/* ============================= Boutons =================================== */
button, .btn{
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  background: var(--brand);
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-5);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  box-shadow: var(--shadow-sm);
  transition: background var(--ease), box-shadow var(--ease), transform var(--ease);
}
button:hover, .btn:hover{ background: var(--brand-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
button:active, .btn:active{ transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn-outline{
  background: var(--ok-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-outline:hover{ background: var(--ok-bg); color: var(--brand); border-color: var(--brand); box-shadow: var(--shadow-sm); transform: none; }

.btn-danger{ background: var(--ok-bg); color: var(--critical); border: 1px solid var(--critical); padding: var(--sp-2) var(--sp-3); font-size: 12.5px; box-shadow: none; }
.btn-danger:hover{ background: var(--critical); color: #fff; box-shadow: var(--shadow-sm); transform: none; }
.btn-sm{ padding: var(--sp-2) var(--sp-3); font-size: 12.5px; }

/* ============================= Cartes ===================================== */
.card{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--ok-bg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.card-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-2); gap: var(--sp-3); }

/* Sous-groupe imbriqué dans une carte (ex. contexte pluviométrique) */
.subpanel{
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin: var(--sp-2) 0 var(--sp-5);
}

/* ============================= Tableaux ==================================== */
table{ width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td{ text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line-soft); }
th{ font-size: 11px; text-transform: uppercase; letter-spacing: 0.045em; color: var(--ink-faint); font-weight: 650; }
tr:hover td{ background: rgba(15,118,110,0.025); }
tr.crit-row td{ background: var(--brand-soft); }

/* Colonnes teintées par scénario, dans le tableau des surfaces */
th.scenario-a, td.scenario-a{ background: var(--scenario-a-soft); }
th.scenario-b, td.scenario-b{ background: var(--scenario-b-soft); }
tfoot th.scenario-a, tfoot td.scenario-a{ background: #E3E9D4; font-weight: 650; color: var(--scenario-a); }
tfoot th.scenario-b, tfoot td.scenario-b{ background: #DEE6F3; font-weight: 650; color: var(--scenario-b); }

.result-value{
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 650;
  color: var(--critical);
  line-height: 1;
  letter-spacing: -0.01em;
}
.result-value span{ font-size: 17px; font-weight: 500; margin-left: var(--sp-2); color: var(--ink-soft); }

.login-box{ max-width: 360px; margin: var(--sp-8) auto 0; }

/* --- Mise en page à deux colonnes (fiche projet) --- */
.two-col{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-6); align-items: start; }
@media (max-width: 980px){ .two-col{ grid-template-columns: 1fr; } }

/* ============================= Responsive ================================= */
@media (max-width: 760px){
  .wrap{ padding: 0 var(--sp-4) var(--sp-6); }
  header.topbar{ padding: var(--sp-3) var(--sp-4); }
  header.topbar .brand{ font-size: 15px; }
  header.topbar .brand .module{ display:none; }
  h1{ font-size: 21px; }
  .row3, .row4, .row5{ grid-template-columns: 1fr 1fr; }
  .result-boxes{ grid-template-columns: 1fr; }
  .card{ padding: var(--sp-4); }
  .table-scroll, .card table{ display:block; overflow-x:auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 520px){
  .row2, .row3, .row4, .row5{ grid-template-columns: 1fr; }
  .sidebar-card .metrics{ gap: var(--sp-3); }
}

/* --- Onglets (méthode / gestion) : grandes cartes-onglets --- */
.tabbar{ display:flex; gap: var(--sp-3); margin-bottom: var(--sp-5); flex-wrap:wrap; }
.tabbar a{
  border:1px solid var(--line); border-radius: var(--radius); background:var(--ok-bg); color:var(--ink-soft);
  padding: var(--sp-3) var(--sp-5); text-decoration:none; font-size:13.5px;
  display:flex; align-items:center; gap: var(--sp-2); transition: border-color var(--ease), color var(--ease), box-shadow var(--ease);
  box-shadow: var(--shadow-sm);
}
.tabbar a.active{ border-color: var(--brand); color: var(--brand); background: var(--brand-soft); font-weight:600; }
.tabbar a .dot{ width:6px; height:6px; border-radius:50%; background: var(--brand); display:inline-block; }
.tabbar a.disabled-tab{ opacity:0.5; cursor:not-allowed; box-shadow:none; }

/* --- Onglets de bassin : pilules --- */
.basin-tabs{ display:flex; gap: var(--sp-2); flex-wrap:wrap; margin-bottom: var(--sp-4); }
.basin-tabs a{
  border:1px solid var(--line); background:var(--ok-bg); color:var(--ink-soft);
  padding: var(--sp-2) var(--sp-4); text-decoration:none; font-size:12.5px; border-radius:999px;
  transition: background var(--ease), color var(--ease), box-shadow var(--ease);
}
.basin-tabs a:hover{ border-color: var(--brand); color: var(--brand); }
.basin-tabs a.active{ background: var(--brand); color:#fff; border-color:var(--brand); box-shadow: var(--shadow-sm); }

/* --- Cartes de synthèse (colonne de droite) --- */
.sidebar-card{ padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--ok-bg); box-shadow: var(--shadow-sm); }
.sidebar-card.dark{ background: linear-gradient(155deg, #12857B, var(--brand-hover)); color: #fff; border-color: var(--brand); box-shadow: var(--shadow-md); }
.sidebar-card.dark .panel-title{ color: rgba(255,255,255,0.75); }
.sidebar-card .big-number{ font-family: var(--mono); font-size: 28px; font-weight: 650; line-height:1; margin-bottom: var(--sp-3); letter-spacing: -0.01em; }
.sidebar-card .metrics{ display:flex; gap: var(--sp-5); flex-wrap:wrap; font-size:11px; }
.sidebar-card .metrics div{ opacity:0.85; }
.sidebar-card .metrics b{ display:block; font-family: var(--mono); font-size:13px; font-weight:600; margin-top: var(--sp-1); }
.kv-row{ display:flex; justify-content:space-between; padding: var(--sp-2) 0; border-bottom:1px solid var(--line-soft); font-size:13px; }
.kv-row:last-child{ border-bottom:none; }
.kv-row b{ font-family: var(--mono); font-weight:600; }
.badge{
  font-family: var(--mono); font-size:10.5px; border:1px solid var(--brand); color:var(--brand);
  background: var(--brand-soft); padding: var(--sp-1) var(--sp-3); border-radius: 999px;
}
.badge.brand{ border-color: var(--brand); color: var(--brand); }

/* --- Checkbox + petits champs dans les tableaux --- */
.checkbox-row{ display:flex; align-items:flex-start; gap: var(--sp-3); margin: var(--sp-3) 0 var(--sp-5); font-size:13px; }
.checkbox-row input{ margin-top:3px; }
table input[type="text"], table input[type="number"]{
  width: 100%; font-family: var(--sans); font-size: 13px; color: var(--ink);
  background: var(--ok-bg); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-2);
  transition: border-color var(--ease), box-shadow var(--ease);
}
table input:hover{ border-color: var(--ink-faint); }
table input:focus{ outline:none; border-color: var(--brand); box-shadow: var(--focus-ring); }
td.num{ text-align:right; }
th.num{ text-align:right; }

.result-boxes{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: var(--sp-4) 0; }
.result-box{ border:1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); box-shadow: var(--shadow-sm); }
.result-box.scenario-a{ background: var(--scenario-a-soft); border-color: #C9D3AE; }
.result-box.scenario-b{ background: var(--scenario-b-soft); border-color: #C4D2E9; }
.result-box .rb-title{ font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:0.045em; margin-bottom: var(--sp-3); font-weight: 650; }
.result-box.scenario-a .rb-title{ color: var(--scenario-a); }
.result-box.scenario-b .rb-title{ color: var(--scenario-b); }
.result-box .rb-grid{ display:flex; justify-content:space-between; gap: var(--sp-3); }
.result-box .rb-grid div{ font-size:11px; color:var(--ink-soft); }
.result-box .rb-grid b{ display:block; font-family:var(--mono); font-size:15px; color:var(--ink); font-weight:600; margin-top: var(--sp-1); }

.result-banner{
  background: var(--brand); color:#fff; border-radius: var(--radius); padding: var(--sp-4) var(--sp-6); display:flex;
  justify-content:space-between; align-items:center; margin-top: var(--sp-5); flex-wrap:wrap; gap: var(--sp-2);
  box-shadow: var(--shadow-md);
}
.result-banner .rb-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; opacity:0.85; }
.result-banner .rb-value{ font-family:var(--mono); font-size:19px; font-weight:650; }

/* ============================= Bibliothèque de stations (fenêtre modale) === */
dialog#stations-modal{
  border: none;
  border-radius: var(--radius);
  padding: 0;
  width: min(920px, 92vw);
  max-height: 88vh;
  box-shadow: var(--shadow-md);
}
dialog#stations-modal::backdrop{ background: rgba(23,38,42,0.45); }

.modal-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  padding: var(--sp-5) var(--sp-6); border-bottom: 1px solid var(--line-soft);
}
.modal-head .eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:0.07em; color: var(--brand); font-weight:650; margin-bottom: var(--sp-1); }
.modal-head h2{ font-size:19px; margin: 0 0 var(--sp-1); font-weight:650; }
.modal-close{
  background:none; border:none; box-shadow:none; color: var(--ink-faint);
  font-size:20px; line-height:1; padding: var(--sp-1); cursor:pointer;
}
.modal-close:hover{ color: var(--ink); background:none; box-shadow:none; transform:none; }

.modal-body{ display:grid; grid-template-columns: 260px 1fr; gap: var(--sp-5); padding: var(--sp-5) var(--sp-6); overflow-y:auto; max-height: calc(88vh - 90px); }
@media (max-width: 700px){ .modal-body{ grid-template-columns: 1fr; } }

.station-item{
  border:1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.station-item.active{ border-color: var(--brand); background: var(--brand-soft); }
.station-item .st-name{ font-weight:600; font-size:13.5px; }
.station-item .st-sub{ font-size:11.5px; color: var(--ink-faint); margin: 2px 0 var(--sp-2); }
.station-item .st-actions{ display:flex; gap: var(--sp-3); font-size:12px; }
.station-item .st-actions a, .station-item .st-actions button{
  background:none; border:none; box-shadow:none; padding:0; color: var(--brand);
  font-weight:600; font-size:12px; cursor:pointer; text-decoration:none;
}
.station-item .st-actions button.danger{ color: var(--critical); }

.occurrence-table th, .occurrence-table td{ padding: var(--sp-2) var(--sp-2); }
.occurrence-table th{ background: var(--brand-soft); }

/* ============== Champ avec suffixe d'unité (cf. capture de référence) ===== */
.field .input-unit{ position: relative; display:block; }
.field .input-unit input{ padding-right: 46px; }
.field .input-unit .unit{
  position:absolute; right: var(--sp-3); top:50%; transform:translateY(-50%);
  font-size:11.5px; color: var(--ink-faint); pointer-events:none; font-weight:600;
}
.field label.tech{
  font-size:11px; text-transform:uppercase; letter-spacing:0.06em;
  color: var(--ink-soft); font-weight:650;
}

/* Bandeau de paramètres hydrauliques, encadré comme sur la référence */
.param-strip{
  background: var(--paper); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: var(--sp-4); margin: var(--sp-4) 0;
}
.param-strip .field{ margin-bottom:0; }

/* Champs verrouillés (coefficients 10 mm repris de la pluie étudiée) */
input:disabled, select:disabled{
  background: #F1F3F2 !important; color: var(--ink-faint) !important;
  cursor: not-allowed; border-color: var(--line-soft) !important;
}

/* Boutons de réordonnancement des lignes de surface */
.row-move{
  background:none; border:1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow:none; color: var(--ink-soft); padding: 2px 7px; font-size: 12px;
  line-height:1.3; cursor:pointer;
}
.row-move:hover{ background: var(--brand-soft); color: var(--brand); border-color: var(--brand); box-shadow:none; transform:none; }
.row-move:disabled{ opacity:0.3; cursor:default; }
td.row-tools{ white-space:nowrap; display:flex; gap:4px; align-items:center; }

/* ============================= Graphique ================================== */
.chart-card .chart-head{ margin-bottom: var(--sp-4); }
.chart-card .eyebrow{
  font-size:11px; text-transform:uppercase; letter-spacing:0.07em;
  color: var(--brand); font-weight:650; margin-bottom: 2px;
}
.chart-card h3{ font-size:18px; font-weight:650; margin:0; letter-spacing:-0.01em; }

/* ============ Bandeau du bassin (nom + surface totale + actions) ========= */
.basin-bar{
  display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap;
  background: var(--paper); border:1px solid var(--line-soft); border-radius: var(--radius);
  padding: var(--sp-3); margin-top: var(--sp-2);
}
.basin-bar .basin-name{
  flex: 1 1 260px; font-weight:650; font-size:15px; font-family: var(--sans);
  background: var(--ok-bg); border:1px solid var(--line); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}
.basin-bar .basin-name:focus{ outline:none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.total-chip{
  display:flex; align-items:center; gap: var(--sp-4); justify-content:space-between;
  background: var(--brand-soft); border:1px solid #C9E3DC; border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4); flex: 1 1 300px;
}
.total-chip span{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color: var(--brand); font-weight:650; }
.total-chip b{ font-size:16px; font-weight:650; }
.total-chip b i, .rb-val i{ font-style:normal; font-size:11px; color: var(--ink-faint); font-weight:600; }
.basin-bar-actions{ display:flex; gap: var(--sp-4); align-items:center; }

.linklike{
  background:none; border:none; box-shadow:none; padding:0; color: var(--brand);
  font-weight:600; font-size:13px; cursor:pointer;
}
.linklike:hover{ background:none; box-shadow:none; transform:none; text-decoration:underline; }
.linklike.danger{ color: var(--critical); }

.pill-dot{ width:7px; height:7px; border-radius:50%; background: currentColor; display:inline-block; opacity:0.55; }
.pill-dot.a{ background: var(--scenario-a); opacity:1; }
.pill-dot.b{ background: var(--scenario-b); opacity:1; }
.basin-tabs a{ display:inline-flex; align-items:center; gap: var(--sp-2); }

/* ============ Encadré de la case à cocher ================================ */
.checkbox-panel{
  display:flex; align-items:flex-start; gap: var(--sp-3); font-size:14px;
  background: var(--brand-soft); border:1px solid #CFE6DF; border-radius: var(--radius);
  padding: var(--sp-4); margin: var(--sp-4) 0;
}
.checkbox-panel input{ margin-top:3px; width:16px; height:16px; accent-color: var(--brand); }

/* ============ Tableau des surfaces, en-têtes groupés ===================== */
.surface-table-wrap{ overflow-x:auto; }
.surface-table{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.surface-table th.group-head{
  text-align:center; font-size:11.5px; letter-spacing:0.06em; font-weight:650;
  border-bottom:1px solid var(--line);
}
.surface-table th.scenario-a.group-head{ color: var(--scenario-a); }
.surface-table th.scenario-b.group-head{ color: var(--scenario-b); }
.surface-table th.sub-head{ font-size:10.5px; }
.surface-table tfoot td{ border-top:1px solid var(--line); border-bottom:none; }
.surface-table tfoot b{ font-size:13.5px; }
.surface-table td, .surface-table th{ vertical-align:middle; }

/* ============ Encarts de résultat, version détaillée ===================== */
.result-box{ padding:0; overflow:hidden; }
.rb-head{
  display:flex; justify-content:space-between; align-items:center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom:1px solid rgba(23,38,42,.08);
}
.rb-eyebrow{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.07em; color: var(--ink-soft); font-weight:650; display:flex; align-items:center; gap:6px; }
.rb-name{ font-weight:650; font-size:14.5px; margin-top:2px; }
.cr-chip{
  background: var(--ok-bg); border:1px solid var(--line); border-radius:999px;
  padding: var(--sp-1) var(--sp-3); font-size:11.5px; color: var(--ink-soft); white-space:nowrap;
}
.cr-chip b{ color: var(--ink); margin-left:4px; }
.rb-cells{ display:grid; grid-template-columns: 1fr 1fr; background: var(--ok-bg); }
.rb-cells > div{ padding: var(--sp-3) var(--sp-4); border-right:1px solid var(--line-soft); }
.rb-cells > div:last-child{ border-right:none; }
.rb-lab{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-faint); font-weight:650; margin-bottom:4px; }
.rb-val{ font-size:17px; font-weight:650; }
.rb-sub{ font-size:11px; color: var(--ink-faint); margin-top:2px; }

/* ============ Indicateur d'enregistrement automatique ==================== */
.save-row{ display:flex; align-items:center; gap: var(--sp-4); margin-top: var(--sp-4); }
.save-state{ font-size:12.5px; color: var(--ink-faint); min-height:1em; }
.save-state.ok{ color: var(--brand); }
.save-state.err{ color: var(--critical); }

/* ============ Panneau pluviométrique (localisation + station) ============= */
.meteo-panel{
  background: #F4F8F6; border:1px solid #D9E6E0; border-radius: var(--radius);
  padding: var(--sp-4); margin: var(--sp-5) 0;
}
.meteo-grid{ display:grid; grid-template-columns: 140px 1fr 1.6fr; gap: var(--sp-4); }
@media (max-width: 820px){ .meteo-grid{ grid-template-columns: 1fr; } }
.meteo-panel .field{ margin-bottom:0; }

.station-strip{
  display:grid; grid-template-columns: 1.3fr 1fr 1.3fr auto; gap: var(--sp-4); align-items:center;
  background: var(--ok-bg); border:1px solid var(--line-soft); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
}
@media (max-width: 980px){ .station-strip{ grid-template-columns: 1fr 1fr; } }
.ss-lab{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-faint); font-weight:650; }
.ss-val{ font-size:13px; font-weight:650; margin-top:2px; }
.ss-val.small{ font-size:11.5px; font-weight:500; color: var(--ink-soft); }
.ss-right{ display:flex; align-items:center; gap: var(--sp-3); flex-wrap:wrap; justify-content:flex-end; }
.coef-chip{
  background: var(--brand-soft); border:1px solid #C9E3DC; border-radius:999px;
  padding: var(--sp-1) var(--sp-3); font-size:11.5px; color: var(--brand); font-weight:600; white-space:nowrap;
}
.field .hint.formula{ font-size:10.5px; margin-top:3px; }

/* ============ Bandeau de synthèse du calcul ============================== */
.calc-strip{
  display:grid; grid-template-columns: repeat(3, 1fr);
  background: var(--brand-soft); border:1px solid #CFE6DF; border-radius: var(--radius);
  margin: var(--sp-4) 0;
}
@media (max-width: 720px){ .calc-strip{ grid-template-columns: 1fr; } }
.calc-strip > div{ padding: var(--sp-3) var(--sp-4); border-right:1px solid rgba(23,38,42,.07); }
.calc-strip > div:last-child{ border-right:none; }
.cs-lab{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); font-weight:650; }
.cs-val{ font-size:17px; font-weight:650; margin-top:2px; }
.cs-sub{ font-size:10.5px; color: var(--ink-faint); margin-top:1px; }

/* ============ Tableau détaillé du calcul ================================== */
.calc-table{ border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; }
.calc-table thead th{
  background: var(--paper); vertical-align:top; line-height:1.3;
  font-size:11px; text-transform:none; letter-spacing:0; color: var(--ink); font-weight:650;
  border-bottom:1px solid var(--line);
}
.calc-table .th-sub{
  display:block; font-size:9.5px; font-weight:500; color: var(--ink-faint);
  text-transform:none; letter-spacing:0; margin-top:3px;
}
.calc-table .t-cell b{ display:block; font-size:13px; }
.calc-table .t-sub{ display:block; font-size:10.5px; color: var(--ink-faint); }
.calc-table tr.crit-row td{ background: #FDF6E7; }
.calc-table tr.crit-row td:first-child{ box-shadow: inset 3px 0 0 #E0A030; }
.tm-tag{
  display:inline-block; margin-top:4px; background:#E0A030; color:#fff;
  font-size:9.5px; font-weight:700; padding:1px 7px; border-radius:999px; letter-spacing:0.04em;
}
.calc-table tfoot td{ background: var(--brand-soft); border-top:1px solid var(--line); border-bottom:none; }

.tm-box{
  background:#FDF6E7; border:1px solid #EACB8C; border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-4); text-align:right; white-space:nowrap;
}
.tm-lab{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.06em; color:#8A6212; font-weight:650; }
.tm-val{ font-size:15px; font-weight:650; color:#6B4B0C; }

/* ============================= Menu déroulant ============================= */
.dropdown{ position:relative; display:inline-block; }
.dropdown-menu{
  display:none; position:absolute; right:0; top:calc(100% + 6px); z-index:50;
  background: var(--ok-bg); border:1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); min-width:300px; overflow:hidden;
}
.dropdown-menu.open{ display:block; }
.dropdown-menu a{
  display:block; padding: var(--sp-3) var(--sp-4); text-decoration:none; color: var(--ink);
  border-bottom:1px solid var(--line-soft); transition: background var(--ease);
}
.dropdown-menu a:last-child{ border-bottom:none; }
.dropdown-menu a:hover{ background: var(--brand-soft); }
.dropdown-menu a b{ display:block; font-size:13.5px; font-weight:650; }
.dropdown-menu a span{ display:block; font-size:11.5px; color: var(--ink-faint); margin-top:2px; }

/* ======================== Module Gestion EP ============================== */
.scenario-tabs{ display:flex; gap: var(--sp-3); flex-wrap:wrap; margin: var(--sp-4) 0; }
.sc-tab{
  display:flex; align-items:center; gap: var(--sp-3); flex:1 1 220px;
  border:1px solid var(--line); border-radius: var(--radius); background: var(--ok-bg);
  padding: var(--sp-3) var(--sp-4); text-decoration:none; color: var(--ink-soft);
  box-shadow: var(--shadow-sm); transition: border-color var(--ease), background var(--ease);
}
.sc-tab b{ display:block; font-size:13.5px; color: var(--ink); }
.sc-tab i{ display:block; font-style:normal; font-size:11px; color: var(--ink-faint); margin-top:1px; }
.sc-tab .sc-dot{ width:10px; height:10px; border-radius:50%; background: var(--line); flex-shrink:0; }
.sc-tab:hover{ border-color: var(--ink-faint); }
.sc-tab.active{ border-color: var(--brand); background: var(--brand-soft); }
.sc-tab.active b{ color: var(--brand); }
.sc-tab.sc-courante.active{ border-color: var(--scenario-a); background: var(--scenario-a-soft); }
.sc-tab.sc-courante.active b{ color: var(--scenario-a); }
.sc-tab.sc-courante.active .sc-dot{ background: var(--scenario-a); }
.sc-tab.sc-projet.active{ border-color: var(--scenario-b); background: var(--scenario-b-soft); }
.sc-tab.sc-projet.active b{ color: var(--scenario-b); }
.sc-tab.sc-projet.active .sc-dot{ background: var(--scenario-b); }
.sc-tab.sc-exceptionnelle.active{ border-color: #A73A2C; background: var(--critical-soft); }
.sc-tab.sc-exceptionnelle.active b{ color: #A73A2C; }
.sc-tab.sc-exceptionnelle.active .sc-dot{ background: #A73A2C; }

.scenario-banner{
  border-left:3px solid var(--brand); background: var(--paper);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
}
.scenario-banner.sc-courante{ border-left-color: var(--scenario-a); background: var(--scenario-a-soft); }
.scenario-banner.sc-projet{ border-left-color: var(--scenario-b); background: var(--scenario-b-soft); }
.scenario-banner.sc-exceptionnelle{ border-left-color: #A73A2C; background: var(--critical-soft); }
.sb-lab{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--ink-soft); font-weight:650; }
.sb-txt{ font-size:13px; margin-top:2px; }

.kpi-strip{ width:100%; border-collapse:separate; border-spacing: var(--sp-3) 0; margin: var(--sp-4) 0 0; }
.kpi-strip td{
  border:1px solid var(--line); border-radius: var(--radius); background: var(--ok-bg);
  padding: var(--sp-3) var(--sp-4); width:25%; vertical-align:top; box-shadow: var(--shadow-sm);
}
.kpi-strip td.alerte{ border-color:#EACB8C; background:#FDF6E7; }
.kpi-strip .k-lab{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-soft); font-weight:650; }
.kpi-strip .k-val{ font-size:22px; font-weight:650; color: var(--brand); margin-top:2px; }
.kpi-strip td.alerte .k-val{ color:#8A6212; }
.kpi-strip .k-sub{ font-size:10.5px; color: var(--ink-faint); }

.exc-panel{
  border:1px solid var(--line); border-radius: var(--radius); background: var(--ok-bg);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-4);
}
.exc-panel summary{ cursor:pointer; font-size:13px; font-weight:650; color: var(--ink-soft); }
.exc-panel summary:hover{ color: var(--brand); }

.ouvrage-card{
  border:1px solid var(--line); border-radius: var(--radius); background: var(--ok-bg);
  padding: var(--sp-4); margin-top: var(--sp-3); box-shadow: var(--shadow-sm);
}
.ouvrage-card.herite{ background: var(--paper); border-style:dashed; }
.ouvrage-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-3); }
.oh-tag{
  font-size:10px; text-transform:uppercase; letter-spacing:0.06em; font-weight:650;
  color: var(--brand); background: var(--brand-soft); border-radius:999px; padding:3px 10px;
}
.ouvrage-card.herite .oh-tag{ color: var(--ink-faint); background: var(--line-soft); }
.expression{
  font-family: var(--sans); font-weight:650; font-size:14px; color: var(--brand);
  background: var(--brand-soft); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3);
}
.bilan-ouvrage{ width:100%; border-collapse:collapse; margin-top: var(--sp-3); }
.bilan-ouvrage td{
  border:1px solid var(--line-soft); padding: var(--sp-2) var(--sp-3); vertical-align:top;
  background: var(--paper);
}
.bilan-ouvrage .k-lab{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.05em; color: var(--ink-faint); font-weight:650; }
.bo-val{ font-size:15px; font-weight:650; margin-top:1px; font-variant-numeric: tabular-nums; }
.kv-row b.residuel{ color: var(--critical); }

/* ---------------- Diagrammes zoomables du module Gestion EP -------------- */
.zoom-zone{
  border:1px solid var(--line); border-radius: var(--radius); background: var(--ok-bg);
  overflow:hidden; height: 460px; position:relative; cursor:grab; touch-action:none;
}
.zoom-zone.glisse{ cursor:grabbing; }
.zoom-inner{ transform-origin: 0 0; padding: 8px; display:inline-block; }
.zoom-ctrl{ display:flex; align-items:center; gap:6px; }
.zoom-ctrl button{
  background: var(--ok-bg); color: var(--ink-soft); border:1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow:none; padding: 4px 10px; font-size:14px;
  line-height:1; cursor:pointer;
}
.zoom-ctrl button:hover{ background: var(--brand-soft); color: var(--brand); border-color: var(--brand); box-shadow:none; transform:none; }
.zoom-ctrl button.reset{ font-size:11.5px; padding: 5px 10px; }
.zoom-val{ font-size:11.5px; color: var(--ink-faint); min-width:46px; text-align:center; font-variant-numeric: tabular-nums; }