/* ==========================================================
   CARILLON BACK-OFFICE — la MÊME identité que l'app cliente
   (décision patron 18/07) : carillon-ui.css est chargé AVANT
   et fournit jetons + doctrine (nuit #071c3b, bleu France
   #1546a0, vermillon = alertes seules, warn = gris, titres
   Fraunces). Le vieux thème est RETIRÉ : tout le fichier
   consomme directement les jetons carillon-ui (repli littéral
   identique) — admin.css n'ajoute que la mise en page
   (sidebar nuit, tableaux, kanban, agents, configuration).
   ========================================================== */
:root {
  /* Seules VALEURS LOCALES sans jeton carillon-ui officiel — tout le reste
     du fichier consomme directement les jetons de carillon-ui.css. */
  --nuit-2: #051530;                                /* borne sombre du dégradé gate */
  --alerte-douce: #fdeeee;                          /* fond doux des alertes */
  --ombre-carte: 0 1px 2px rgba(7, 28, 59, 0.05);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--blanc-chaud, #faf8f3);
  color: var(--ink, #071c3b);
  font-size: 15.5px;
  line-height: 1.5;
  font-family: var(--font-interface, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
h2, h3 { color: var(--carillon-nuit, #071c3b); font-family: var(--font-titres, Fraunces, Georgia, serif); }
h2 { font-size: 1.3rem; font-weight: 600; }
h3 { font-weight: 600; }
.wordmark { font-family: var(--font-titres, Georgia, serif); font-weight: 500; color: var(--carillon-nuit, #071c3b); }
.dot { color: var(--carillon-bleu, #1546a0); }
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }

/* ---------- champs et boutons : mêmes formes que l'app ---------- */
.field { display: grid; gap: 5px; min-width: 0; }
.field span { font-size: 0.78rem; font-weight: 700; color: var(--muted, #596579); }
.field input, .field select, .search, .filters select {
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 9px;
  padding: 9px 12px;
  background: var(--surface, #fff);
  color: var(--ink, #071c3b);
  min-height: 42px;
}
.field input:focus, .search:focus { outline: 2px solid var(--carillon-bleu, #1546a0); outline-offset: 1px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--line, #d9e2ee); border-radius: 10px;
  background: var(--surface, #fff); color: var(--carillon-nuit, #071c3b);
  padding: 9px 16px; font-weight: 700; min-height: 42px;
}
.btn:hover { border-color: var(--carillon-bleu, #1546a0); background: var(--gris-bleute, #e8eef7); }
.btn.primary { background: var(--carillon-bleu, #1546a0); border-color: var(--carillon-bleu, #1546a0); color: #fff; }
.btn.primary:hover { background: var(--carillon-bleu-fonce, #0f3578); border-color: var(--carillon-bleu-fonce, #0f3578); }
.btn.danger { background: var(--carillon-rouge, #e63946); border-color: var(--carillon-rouge, #e63946); color: #fff; }
.btn.danger:disabled { opacity: 0.45; cursor: not-allowed; }
.icon-btn { border: 0; background: transparent; font-size: 1.4rem; color: var(--muted, #596579); width: 42px; height: 42px; }

.badge {
  display: inline-block; border-radius: 999px; padding: 2px 10px;
  font-size: 0.74rem; font-weight: 700; white-space: nowrap;
}
.badge.ok { background: var(--surface-green, #e9f5ef); color: var(--carillon-vert, #168a4b); }
/* Doctrine app : « warn » = brouillon GRIS (jamais orange), vermillon = alertes seules. */
.badge.warn { background: var(--gris-bleute, #e8eef7); color: var(--muted, #596579); }
.badge.danger { background: var(--alerte-douce); color: var(--carillon-rouge, #e63946); }
.badge.info { background: var(--gris-bleute, #e8eef7); color: var(--carillon-bleu-fonce, #0f3578); }

/* ---------- écran d'entrée : même famille que le login de l'app ---------- */
/* ---------- Bannière d'environnement (Gate 0 / ADM-IND-003) ---------- */
.env-banner {
  position: fixed; top: 0; left: 0; right: 0; height: 30px; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; box-shadow: 0 1px 4px rgba(7, 28, 59, 0.35);
}
.env-banner .env-host { font-weight: 600; letter-spacing: 0.04em; opacity: 0.85; text-transform: none; }
.env-prod    { background: var(--carillon-rouge, #e63946); }         /* PRODUCTION = alerte */
.env-qual    { background: #a15c00; }                                /* bande d'AVERTISSEMENT test dédiée (pas l'identité app) */
.env-local   { background: var(--carillon-nuit, #071c3b); color: #c6d2e6; }
.env-unknown { background: repeating-linear-gradient(45deg, var(--carillon-rouge, #e63946) 0 12px, #b12b37 12px 24px); }
/* Décale les racines sous la bande fixe, sans débordement. */
body.env-on .gate,
body.env-on .console { margin-top: 30px; min-height: calc(100vh - 30px); }
/* Offset de la sidebar STICKY : desktop uniquement (en mobile ≤860px elle est
   `position:static; height:auto` — ne pas clobber cette mise en page horizontale). */
@media (min-width: 861px) {
  body.env-on .side { top: 30px; height: calc(100vh - 30px); }
}

/* ---------- P0-002 : purge sûre ---------- */
.purge-panel .purge-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.purge-panel .field { margin: 0; }
.purge-panel .field > span { display: block; font-size: 0.8rem; color: var(--muted, #596579); margin-bottom: 4px; }
.purge-panel input, .purge-panel select { padding: 8px 10px; border: 1px solid var(--line, #d9e2ee); border-radius: 10px; background: var(--surface, #fff); font: inherit; }
.purge-panel input:focus, .purge-panel select:focus { outline: 2px solid var(--carillon-bleu, #1546a0); outline-offset: 1px; }
.purge-preview { margin-top: 12px; }
.purge-confirm { margin-top: 12px; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line, #d9e2ee); border-radius: 12px; background: var(--gris-bleute, #e8eef7); }
.purge-appro { display: flex; gap: 12px; flex-wrap: wrap; }
.purge-appro .field { flex: 1; min-width: 160px; }

.gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--nuit-2) 0%, var(--carillon-nuit, #071c3b) 55%, #0d2b57 100%);
  padding: 20px;
}
.gate-card {
  background: var(--surface, #ffffff); border-radius: 18px; padding: 36px 34px;
  width: 100%; max-width: 400px; display: grid; gap: 14px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.gate-logo { width: 92px; margin: 0 auto; }
.gate-card h1 { font-family: var(--font-titres, Georgia, serif); font-weight: 500; font-size: 1.7rem; color: var(--carillon-nuit, #071c3b); }
.gate-sub { color: var(--muted, #596579); font-size: 0.92rem; }
.gate-card .field { text-align: left; }
.gate-status { min-height: 1.2em; font-size: 0.85rem; color: var(--carillon-rouge, #e63946); font-weight: 600; }
.gate-separator { display:flex; align-items:center; gap:10px; color:var(--muted,#596579); font-size:.78rem; }
.gate-separator::before,.gate-separator::after { content:""; height:1px; flex:1; background:var(--line,#d9e2ee); }
.gate-mfa { display:grid; gap:10px; padding:12px; border:1px solid var(--line,#d9e2ee); border-radius:12px; text-align:left; background:var(--bo-soft,#f3f6fa); }
.gate-mfa p { margin:0; font-size:.84rem; color:var(--muted,#596579); }
.gate-mfa pre { max-height:150px; margin:0; padding:9px; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; border-radius:8px; background: var(--surface, #fff); font-size:.72rem; }

/* ---------- console : sidebar BLEU NUIT comme l'app (carillon-ui §3) ---------- */
.console { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100vh; }
.side {
  background: var(--carillon-nuit, #071c3b);
  border-right: none;
  color: #e7edf7;
  display: flex; flex-direction: column; gap: 18px;
  padding: 20px 14px; position: sticky; top: 0; height: 100vh;
}
.side-brand { display: flex; gap: 10px; align-items: center; padding: 0 6px; }
.side-brand img { width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); background: var(--surface, #fff); }
.side-brand strong {
  font-family: var(--font-titres, Georgia, serif); font-weight: 500;
  color: #ffffff; font-size: 1.25rem; display: block; line-height: 1.1;
}
.side-brand span { font-size: 0.72rem; color: #c6d2e6; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.side-nav { display: grid; gap: 4px; }
.side-nav button {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1px solid transparent; color: #c6d2e6;
  padding: 10px 12px; border-radius: 10px; font-weight: 700; text-align: left; min-height: 44px;
}
.side-nav button .nav-ico {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.side-nav button:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.side-nav button.active { background: var(--carillon-bleu, #1546a0); border-color: var(--carillon-bleu, #1546a0); color: #fff; box-shadow: none; }
.side-foot { margin-top: auto; display: grid; gap: 8px; }
.side-foot .btn { background: transparent; border-color: rgba(255, 255, 255, 0.25); color: #ffffff; }
.side-foot .btn:hover { border-color: rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.1); }

main { padding: 26px 30px 60px; min-width: 0; }
.section { display: none; }
.section.active { display: block; }
.section-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.stamp { font-size: 0.8rem; color: var(--muted, #596579); }
.search { min-width: 260px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }

.card {
  background: var(--surface, #ffffff); border: 1px solid var(--line, #d9e2ee);
  border-radius: 14px; padding: 18px;
  box-shadow: var(--ombre-carte);
}
.card h3 { font-size: 1.02rem; margin-bottom: 12px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }

/* KPI : mêmes chiffres géants colorés que l'app */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface, #ffffff); border: 1px solid var(--line, #d9e2ee); border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--ombre-carte);
  display: grid; gap: 2px;
}
.kpi strong { font-size: 1.6rem; font-weight: 800; color: var(--kpi-accent, var(--carillon-bleu, #1546a0)); font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi span { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #596579); }

.alert-list { display: grid; gap: 8px; }
.alert-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px;
  border: 1px solid var(--line, #d9e2ee); border-radius: 10px; background: var(--surface, #fff); cursor: pointer;
}
.alert-row:hover { border-color: var(--carillon-bleu, #1546a0); background: var(--surface-douce, #f3f6fa); }
.alert-row .metier-badge { width: 28px; height: 28px; border-radius: 8px; flex: none; }
.alert-row strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alert-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; min-width: 0; max-width: 100%; }
.empty {
  color: var(--muted, #596579); font-size: 0.9rem; padding: 14px; text-align: center;
  border: 1.5px dashed var(--line, #d9e2ee); border-radius: 10px; background: var(--surface-douce, #f3f6fa);
}

/* capacité + jauges */
.capacity-box, .gauge-grid { display: grid; gap: 12px; }
.gauge label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.85rem; font-weight: 650; margin-bottom: 4px; }
.gauge .track { height: 10px; border-radius: 999px; background: var(--gris-bleute, #e8eef7); overflow: hidden; }
.gauge .fill { height: 100%; border-radius: 999px; background: var(--carillon-vert, #168a4b); }
.gauge.warn .fill { background: var(--warn, #596579); }
.gauge.danger .fill { background: var(--carillon-rouge, #e63946); }
.capacity-banner {
  border-radius: 10px; padding: 12px 14px; font-weight: 700;
  background: var(--surface-green, #e9f5ef); color: var(--carillon-vert, #168a4b);
}
.capacity-banner.warn { background: var(--gris-bleute, #e8eef7); color: var(--muted, #596579); }
.capacity-banner.danger { background: var(--alerte-douce, #fdecee); color: var(--carillon-rouge, #e63946); }

/* table clients */
.table-card { padding: 0; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted, #596579); padding: 12px 14px; border-bottom: 1px solid var(--line, #d9e2ee);
  white-space: nowrap; font-weight: 800;
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--gris-bleute, #e8eef7); vertical-align: middle; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: var(--surface-douce, #f3f6fa); }
.table tbody tr:last-child td { border-bottom: 0; }
.cell-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cell-name .metier-badge { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.cell-name strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; display: block; }
.cell-price { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--carillon-nuit, #071c3b); white-space: nowrap; }

.create-card { margin-top: 16px; }
.create-card summary { font-weight: 750; color: var(--carillon-nuit, #071c3b); cursor: pointer; min-height: 24px; }
.create-card .form-grid { margin-top: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.hint { font-size: 0.8rem; color: var(--muted, #596579); line-height: 1.45; }

/* abonnements */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.sub-card {
  background: var(--surface, #ffffff); border: 1px solid var(--line, #d9e2ee); border-radius: 14px;
  padding: 16px; box-shadow: var(--ombre-carte); cursor: pointer;
}
.sub-card:hover { border-color: var(--carillon-bleu, #1546a0); }
.sub-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.sub-card .head .metier-badge { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.sub-card .head > div { flex: 1; min-width: 0; }
.sub-card .head strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-card .head small { color: var(--muted, #596579); font-size: 0.78rem; }
.sub-line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 0.88rem; border-bottom: 1px dashed var(--gris-bleute, #e8eef7); }
.sub-line span:first-child { min-width: 0; overflow-wrap: anywhere; }
/* Valeur bornée : une raison longue SANS espaces (chemin, identifiant) se
   coupe dans SA colonne au lieu d'écraser le libellé à 1 caractère/ligne
   (défaut vu sur le panneau Déploiement, capture 02/08). */
.sub-line .p { font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; flex: 0 1 auto; min-width: 9ch; text-align: right; }
.sub-line.total { border-bottom: 0; font-weight: 800; color: var(--carillon-nuit, #071c3b); font-size: 1rem; padding-top: 9px; }
.sub-line.muted { color: var(--muted, #596579); }

/* journal */
.journal-list { display: grid; gap: 2px; max-height: 66vh; overflow-y: auto; }
.log-row { display: grid; grid-template-columns: 148px 160px minmax(0, 1fr); gap: 12px; padding: 8px 6px; border-bottom: 1px solid var(--gris-bleute, #e8eef7); font-size: 0.86rem; }
.log-row:last-child { border-bottom: 0; }
.log-row time { color: var(--muted, #596579); font-variant-numeric: tabular-nums; white-space: nowrap; }
.log-row .actor { font-weight: 700; color: var(--carillon-nuit, #071c3b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-row .what { min-width: 0; overflow-wrap: anywhere; }
.log-row .what b { color: var(--carillon-bleu-fonce, #0f3578); font-weight: 700; }

/* fiche client : modale centrée (verdict patron V2) */
.bo-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
.bo-modal-backdrop { position: absolute; inset: 0; background: rgba(30, 42, 63, 0.5); backdrop-filter: blur(2px); }
.bo-modal-card {
  position: relative; width: min(640px, 96vw); max-height: 88vh;
  background: var(--blanc-chaud, #faf8f3); border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(30, 42, 63, 0.35);
  display: flex; flex-direction: column;
}
.bo-modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--line, #d9e2ee); background: var(--surface, #fff); flex: none;
}
.bo-modal-head .metier-badge { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.bo-modal-head > div { flex: 1; min-width: 0; }
.bo-modal-head strong { display: block; font-size: 1.05rem; color: var(--carillon-nuit, #071c3b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-modal-head span { font-size: 0.82rem; color: var(--muted, #596579); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bo-modal-body { overflow-y: auto; padding: 16px 18px 28px; display: grid; gap: 14px; }
.d-block { background: var(--surface, #fff); border: 1px solid var(--line, #d9e2ee); border-radius: 12px; padding: 14px; box-shadow: var(--ombre-carte); }
.d-block h4, .d-summary { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #596579); margin-bottom: 10px; font-weight: 800; }
.d-summary { cursor: pointer; margin-bottom: 0; }
details[open] > .d-summary { margin-bottom: 10px; }
.d-identity .sub-line, .d-usage .sub-line, .d-accounts .sub-line { font-size: 0.88rem; }
.btn .btn-ico { width: 15px; height: 15px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.server-actions { margin-top: 14px; }
.d-option { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--gris-bleute, #e8eef7); font-size: 0.88rem; cursor: pointer; }
.d-option:last-of-type { border-bottom: 0; }
.d-option input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--carillon-bleu, #1546a0); flex: none; }
.d-option > span:not(.p) { min-width: 0; }
.d-option small { color: var(--muted, #596579); }
.d-option .p { margin-left: auto; white-space: nowrap; color: var(--muted, #596579); font-variant-numeric: tabular-nums; flex: none; font-size: 0.8rem; }
.d-option.included .p { color: var(--carillon-vert, #168a4b); }
.d-extra { margin: 12px 0 4px; font-size: 0.88rem; }
.d-extra label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; color: var(--ink, #071c3b); }
.d-extra input { width: 84px; border: 1px solid var(--line, #d9e2ee); border-radius: 8px; padding: 7px 9px; min-height: 38px; }
.danger-zone { border-color: #f7ccd1; }
.danger-zone h4, .danger-zone .d-summary { color: var(--carillon-rouge, #e63946); }
.bo-modal .toolbar { margin-top: 10px; }
.bo-modal .btn { min-height: 44px; }

/* divers */
.metier-badge { object-fit: cover; }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--carillon-nuit, #071c3b); color: #fff; border-radius: 12px;
  padding: 12px 20px; font-weight: 650; max-width: min(560px, 92vw);
  box-shadow: 0 14px 40px rgba(30, 42, 63, 0.35); z-index: 90;
}
/* Un succès et un échec ne partagent pas la même couleur (audit UI 28/07). */
.toast.success { background: var(--carillon-vert, #168a4b); }
.toast.error { background: var(--carillon-rouge, #e63946); }
.waiting {
  border: 1.5px dashed var(--line, #d9e2ee); border-radius: 14px; padding: 26px; text-align: center; color: var(--muted, #596579);
  background: var(--surface-douce, #f3f6fa);
}
.waiting b { color: var(--carillon-nuit, #071c3b); display: block; margin-bottom: 6px; }

@media (max-width: 860px) {
  .console { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .side-nav { display: flex; flex-wrap: wrap; }
  .side-foot { margin: 0; display: flex; }
  main { padding: 18px 14px 50px; }
  .two-col { grid-template-columns: 1fr; }
  .log-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Amelioration continue des bases metier */
.metier-update-card { margin-bottom: 14px; }
.metier-update-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.metier-update-head h3 { margin: 3px 0 4px; }
.metier-update-head p { margin: 0; color: var(--muted, #596579); }
.metier-update-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
}
.metier-update-kpis .mini-kpi {
  display: grid;
  align-content: center;
  gap: 3px;
  min-height: 72px;
  padding: 10px;
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 12px;
  background: var(--surface-soft, #f7f9fc);
}
.metier-update-kpis .mini-kpi strong { display: block; font-size: 1.25rem; }
.metier-update-kpis .mini-kpi span { display: block; color: var(--muted, #596579); font-size: .78rem; }
.metier-update-list { display: grid; gap: 8px; }
.metier-update-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.metier-update-item-main { display: grid; gap: 4px; min-width: 0; }
.metier-update-item-main small { color: var(--muted, #596579); }
.metier-update-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.metier-source-settings { margin-top: 14px; border-top: 1px solid var(--line, #d9e2ee); padding-top: 12px; }
.metier-source-settings summary { cursor: pointer; font-weight: 800; color: var(--carillon-nuit, #071c3b); }
.metier-source-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.metier-source-form label { display: grid; gap: 5px; font-size: .84rem; font-weight: 700; }
.metier-source-form input,
.metier-source-form select { width: 100%; min-height: 44px; }
.metier-review-modal { width: min(1180px, 94vw); }
.metier-review-body { align-content: start; }
.metier-review-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.metier-review-fact,
.metier-review-source,
.metier-review-gate {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 10px;
  background: var(--surface-soft, #f7f9fc);
}
.metier-review-fact b,
.metier-review-source b {
  display: block;
  margin-bottom: 4px;
  color: var(--muted, #596579);
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.metier-review-fact code,
.metier-review-source code {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
  color: var(--carillon-nuit, #071c3b);
}
.metier-review-sources,
.metier-review-gates { display: grid; gap: 8px; }
.metier-review-sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metier-review-source small {
  display: block;
  margin-top: 5px;
  color: var(--muted, #596579);
  overflow-wrap: anywhere;
}
.metier-review-diff { display: grid; gap: 10px; }
.metier-diff-group {
  overflow: hidden;
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.metier-diff-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  cursor: pointer;
  color: var(--carillon-nuit, #071c3b);
  font-weight: 800;
  background: var(--surface-soft, #f7f9fc);
}
.metier-diff-list { display: grid; }
.metier-diff-row {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr) minmax(0, 1.2fr);
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line, #d9e2ee);
}
.metier-diff-row.added { border-left: 4px solid var(--carillon-vert, #168a4b); }
.metier-diff-row.removed { border-left: 4px solid var(--carillon-rouge, #e63946); }
.metier-diff-row.changed { border-left: 4px solid #c67a00; }
.metier-diff-row > b { overflow-wrap: anywhere; font-size: .82rem; }
.metier-diff-value {
  min-width: 0;
  max-height: 190px;
  margin: 0;
  overflow: auto;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-douce, #f3f6fa);
  color: var(--ink, #071c3b);
  font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.metier-review-warnings ul,
.metier-review-remaining ul { margin: 0; padding-left: 20px; }
.metier-review-warnings li,
.metier-review-remaining li { margin: 6px 0; overflow-wrap: anywhere; }
.metier-review-gates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metier-review-gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
.metier-review-gate i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eef2f7;
  color: var(--muted, #596579);
  font-style: normal;
  font-weight: 900;
}
.metier-review-gate.ok i { background: #dcf7e8; color: var(--carillon-vert, #168a4b); }
.metier-review-gate.blocked i { background: #fde7e9; color: var(--carillon-rouge, #e63946); }
.metier-review-gate b { display: block; margin-bottom: 2px; }
.metier-review-gate small { color: var(--muted, #596579); }
.metier-review-remaining {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid #f1cf8c;
  border-radius: 10px;
  background: #fff8e8;
  color: #6f4700;
}
.metier-review-confirmation { border-color: #b8c9e3; }
.metier-review-confirmation textarea { width: 100%; resize: vertical; }
.metier-review-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 12px 0;
  font-weight: 750;
}
.metier-review-check input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex: none;
}
.metier-confirm-phrase {
  margin: 6px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef3fb;
  color: var(--carillon-nuit, #071c3b);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 800;
  overflow-wrap: anywhere;
}

@media (max-width: 1500px) {
  .metier-update-head { display: grid; }
  .metier-update-head .btn { justify-self: start; }
}

@media (max-width: 700px) {
  .metier-update-head { display: grid; }
  .metier-update-head .btn { width: 100%; }
  .metier-update-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-bottom: 0;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  .metier-update-kpis .mini-kpi { min-width: 0; scroll-snap-align: none; }
  .metier-update-item { grid-template-columns: 1fr; }
  .metier-update-actions { justify-content: stretch; }
  .metier-update-actions .btn { flex: 1 1 120px; min-height: 46px; }
  .metier-source-form { grid-template-columns: 1fr; }
  .metier-review-modal { width: 100%; }
  .metier-review-facts,
  .metier-review-sources,
  .metier-review-gates { grid-template-columns: 1fr; }
  .metier-diff-row { grid-template-columns: 1fr; }
  .metier-diff-row > b { font-size: .78rem; }
}


/* ---------- maintenance : kanban des tickets ---------- */
.ticket-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.ticket-col {
  background: var(--surface-douce, #f3f6fa);
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 14px;
  padding: 10px;
  min-height: 180px;
}
.ticket-col > header {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 800; color: var(--carillon-nuit, #071c3b); font-size: 0.85rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 4px 6px 10px;
}
.ticket-col > header i {
  font-style: normal; background: var(--surface, #fff); border: 1px solid var(--line, #d9e2ee);
  border-radius: 999px; min-width: 26px; text-align: center; padding: 1px 8px;
}
.ticket-col-body { display: grid; gap: 8px; }
.ticket-kcard {
  background: var(--surface, #ffffff); border: 1px solid var(--line, #d9e2ee); border-radius: 11px;
  padding: 11px 12px; box-shadow: var(--ombre-carte); cursor: grab;
}
.ticket-kcard:active { cursor: grabbing; }
.ticket-kcard .k-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.ticket-kcard .k-head strong { font-size: 0.9rem; min-width: 0; overflow-wrap: anywhere; }
.ticket-kcard .k-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; font-size: 0.76rem; color: var(--muted, #596579); }
.ticket-kcard .k-desc { font-size: 0.82rem; color: var(--muted, #596579); overflow-wrap: anywhere; }
.ticket-kcard .k-actions { display: flex; gap: 8px; margin-top: 9px; align-items: center; }
.ticket-kcard .k-actions select {
  flex: 1; min-width: 0; border: 1px solid var(--line, #d9e2ee); border-radius: 8px; padding: 6px 8px; min-height: 36px;
}
.ticket-kcard .k-actions .btn { min-height: 36px; padding: 6px 12px; }
@media (max-width: 1100px) { .ticket-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ticket-board { grid-template-columns: 1fr; } }


/* ---------- correctifs mobile (findings 390px) ---------- */
.console > * { min-width: 0; }
.two-col > * { min-width: 0; }
.alert-row { flex-wrap: wrap; }
#gateToken { font-size: 16px; } /* anti-zoom iOS */
@media (max-width: 860px) {
  /* C-390-01 (revue S5) : marque + nav + pied ne tiennent pas dans 390px —
     la RANGÉE sidebar défile en interne, le body ne déborde jamais. */
  .side { flex-wrap: nowrap; gap: 10px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .side-foot .btn { white-space: nowrap; }
  .side-nav {
    display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex: 1; min-width: 0; padding-bottom: 4px;
  }
  .side-nav button { white-space: nowrap; flex: none; }
  .side-brand span { display: none; }
  .side-foot { flex: none; }
  .side-foot .btn { padding: 8px 10px; }
  .bo-modal { padding: 10px; }
  .bo-modal-card { max-height: 94vh; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* KPI compacts (journal) + badge purge cliquable */
.kpi-grid-mini { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.kpi.kpi-mini { padding: 10px 14px; }
.kpi.kpi-mini strong { font-size: 1.25rem; }

/* ===== Cockpit Agents IA (Lot 1 P0) : file de validation + sous-titres. Adopte
   l'echelle du design-system partage (--space-*/--text-*, carillon-ui.css Lot F). ===== */
.agent-kpis { margin: var(--space-3, 12px) 0; }
.agents-sub { font-size: var(--text-base, 16px); font-weight: 700; margin: var(--space-4, 16px) 0 var(--space-2, 8px); }
.agents-validation { display: grid; gap: var(--space-2, 8px); }
.agent-validation-row {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid var(--line, #d9e2ee); border-left: 3px solid var(--carillon-orange, #d98324);
  border-radius: var(--radius-sm, 10px); background: var(--surface, #fff);
}
.agent-validation-main { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agent-validation-main strong { font-size: var(--text-sm, 14px); }
.agent-validation-meta { font-size: var(--text-xs, 12px); color: var(--muted, #596579); }

/* ===== Journal (Lot 2 P0) : niveau DEDUIT — couleur + LIBELLE, jamais la couleur
   seule (accessibilite) ; detail depliable ; fin de la troncature silencieuse. ===== */
.jlevel { font-size: var(--text-xs, 12px); font-weight: 800; padding: 2px var(--space-2, 8px); border-radius: 999px; white-space: nowrap; border: 1px solid transparent; }
.jlevel-error { background: #fdecec; color: #a01722; border-color: #f3c2c6; }
.jlevel-warn { background: #fdf3e3; color: #8a5200; border-color: #f0d9ae; }
.jlevel-success { background: #e8f6ee; color: #126b3c; border-color: #b9e2cb; }
.jlevel-info { background: #eef2f9; color: #3b4a63; border-color: #d3dcea; }
.log-row { cursor: pointer; }
.log-detail { display: grid; gap: var(--space-1, 4px); padding: var(--space-3, 12px) var(--space-4, 16px); background: #f7f9fc; border-left: 3px solid var(--carillon-bleu, #1546a0); border-radius: var(--radius-sm, 10px); margin: 0 0 var(--space-2, 8px); font-size: var(--text-xs, 12px); }
.log-detail b { display: inline-block; min-width: 150px; color: var(--muted, #596579); font-weight: 700; }
.log-detail .jnote { margin-top: var(--space-1, 4px); color: var(--muted, #596579); font-style: italic; }
.journal-more { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-3, 12px); flex-wrap: wrap; }
.jcount { font-size: var(--text-xs, 12px); color: var(--muted, #596579); font-weight: 700; }

/* ===== Reprise (seam Helper C, lecture seule) : verdict de restauration + registre. ===== */
.restore-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-3, 12px) var(--space-5, 24px);
  margin-bottom: var(--space-2, 8px);
}
.restore-grid span { font-size: var(--text-sm, 14px); display: inline-flex; align-items: center; gap: var(--space-2, 8px); }
.restore-grid b { color: var(--muted, #596579); font-weight: 700; }
.restore-grid small { color: var(--muted, #596579); }
/* ===== Copie hors site : échec fermé, liste blanche et lecture seule. ===== */
#offsiteStatusBox { margin-bottom: var(--space-3, 12px); }
.offsite-card { border-left: 4px solid var(--carillon-rouge, #e63946); }
.offsite-card-ok { border-left-color: #126b3c; }
.offsite-card-loading { border-left-color: var(--carillon-bleu, #1546a0); }
.offsite-card-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3, 12px); margin-bottom: var(--space-3, 12px);
}
.offsite-card-head > div { min-width: 0; }
.offsite-card-head h3 { margin-bottom: 2px; }
.offsite-kicker { color: var(--muted, #596579); font-size: var(--text-xs, 12px); font-weight: 700; }
.offsite-message {
  display: grid; gap: var(--space-1, 4px); padding: var(--space-3, 12px) var(--space-4, 16px);
  border: 1px solid #efb7bd; border-radius: var(--radius-sm, 10px);
  background: #fdecec; color: #7f1820;
}
.offsite-message span { font-size: var(--text-sm, 14px); }
.offsite-card-ok .offsite-message { border-color: #a9d8be; background: #e8f6ee; color: #0d5f34; }
.offsite-loading {
  padding: var(--space-3, 12px) var(--space-4, 16px); border-radius: var(--radius-sm, 10px);
  background: #eef2f9; color: #3b4a63; font-size: var(--text-sm, 14px); font-weight: 700;
}
.offsite-targets {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2, 8px); margin: var(--space-3, 12px) 0 0; padding: 0;
  list-style: none;
}
.offsite-target {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2, 8px);
  min-width: 0; padding: var(--space-3, 12px); border: 1px solid var(--line, #d9e2ee);
  border-radius: var(--radius-sm, 10px); background: #f7f9fc;
}
.offsite-target-name { min-width: 0; overflow-wrap: anywhere; font-weight: 800; }
.offsite-meta {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2, 8px); margin-top: var(--space-3, 12px);
}
.offsite-meta > div { min-width: 0; padding: var(--space-2, 8px) var(--space-3, 12px); border-left: 2px solid var(--line, #d9e2ee); }
.offsite-meta dt { color: var(--muted, #596579); font-size: var(--text-xs, 12px); font-weight: 700; }
.offsite-meta dd { overflow-wrap: anywhere; color: var(--carillon-nuit, #071c3b); font-weight: 800; font-variant-numeric: tabular-nums; }
.offsite-technical { margin-top: var(--space-3, 12px); color: var(--muted, #596579); font-size: var(--text-xs, 12px); }
.offsite-technical code { color: inherit; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-weight: 700; }
@media (max-width: 640px) {
  .offsite-card-head { align-items: flex-start; }
  .offsite-targets, .offsite-meta { grid-template-columns: 1fr; }
}

.purge-badge { border: 0; cursor: pointer; margin-left: 6px; }
.purge-badge:hover { filter: brightness(0.92); }


/* comptes de l'établissement */
.add-account-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line, #d9e2ee); }
.user-remove { width: 30px; height: 30px; font-size: 1.1rem; color: var(--carillon-rouge, #e63946); }
.user-remove:hover { background: var(--alerte-douce); border-radius: 8px; }
.user-act { width: 30px; height: 30px; color: var(--muted, #596579); }
.user-act .btn-ico { width: 14px; height: 14px; }
.user-act:hover { background: var(--gris-bleute, #e8eef7); border-radius: 8px; color: var(--carillon-bleu-fonce, #0f3578); }
.hint-warn { color: var(--muted, #596579); font-weight: 700; }


/* détail ticket */
.td-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.td-description { font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.td-shot {
  max-width: 100%; max-height: 320px; object-fit: contain;
  border: 1px solid var(--line, #d9e2ee); border-radius: 10px; margin-top: 12px;
  background: var(--surface, #fff); cursor: zoom-in;
}
.td-comments { display: grid; gap: 6px; }
.td-handoff-resultat {
  margin-top: 10px; max-height: 320px; overflow: auto;
  background: var(--surface-douce, #f3f6fa); border: 1px solid var(--line, #d9e2ee);
  border-radius: 10px; padding: 10px 12px; font-size: 0.85rem;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.td-comment { background: var(--surface-douce, #f3f6fa); border-radius: 10px; padding: 8px 12px; font-size: 0.88rem; overflow-wrap: anywhere; }
.td-comment.from-support { background: var(--surface-blue, #eef2ff); }
.td-comment b { color: var(--carillon-nuit, #071c3b); margin-right: 6px; }
.td-reply { display: flex; gap: 8px; }
.td-reply input { flex: 1; min-width: 0; border: 1px solid var(--line, #d9e2ee); border-radius: 9px; padding: 9px 12px; min-height: 44px; }
#tdStatus { border: 1px solid var(--line, #d9e2ee); border-radius: 9px; padding: 9px 12px; min-height: 44px; width: 100%; }

/* ---------- constructeur d'agents ---------- */
.agents-intro { color: var(--muted, #596579); font-size: 0.9rem; margin: 4px 0 14px; max-width: 760px; }
.agents-list { display: grid; gap: 8px; }
.agents-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface, #ffffff); border: 1px solid var(--line, #d9e2ee); border-radius: 12px;
  padding: 12px 14px; box-shadow: var(--ombre-carte);
}
.agents-row-main { flex: 1; min-width: 180px; display: grid; gap: 2px; }
.agents-row-main strong { color: var(--carillon-nuit, #071c3b); font-size: 0.95rem; }
.agents-row-sum { color: var(--muted, #596579); font-size: 0.82rem; }
.ab-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.ab-dot.on { background: var(--carillon-vert, #168a4b); }
.ab-dot.off { background: #c8c2b6; }

.agents-editor {
  margin-top: 16px; background: var(--surface-douce, #f3f6fa); border: 1px solid var(--line, #d9e2ee);
  border-radius: 14px; padding: 16px 18px;
}
.ab-editor-head { margin-bottom: 14px; }
.ab-name {
  width: 100%; max-width: 420px; border: 1px solid var(--line, #d9e2ee); border-radius: 9px;
  padding: 10px 12px; min-height: 44px; font-weight: 600; color: var(--carillon-nuit, #071c3b); background: var(--surface, #fff);
}
.ab-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.ab-node {
  flex: 1; min-width: 190px; background: var(--surface, #fff); border: 1px solid var(--line, #d9e2ee);
  border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
}
.ab-node-h { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--carillon-nuit, #071c3b); font-size: 0.86rem; }
.ab-node-num {
  width: 22px; height: 22px; border-radius: 50%; background: var(--carillon-nuit, #071c3b); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; flex-shrink: 0;
}
.ab-node-b { display: flex; flex-direction: column; gap: 8px; }
.ab-arrow { align-self: center; color: var(--muted, #596579); font-size: 1.2rem; }
.ab-ctl, .ab-ctl-sm, .ab-sample {
  border: 1px solid var(--line, #d9e2ee); border-radius: 9px; padding: 8px 10px; background: var(--surface, #fff); color: var(--ink, #071c3b);
}
.ab-ctl { width: 100%; min-height: 40px; }
.ab-ctl-sm { min-height: 36px; }
.ab-cond { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.ab-cond .ab-cond-value { flex: 1; min-width: 90px; }
.ab-cond-logic { font-size: 0.82rem; color: var(--muted, #596579); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ab-risk { font-size: 0.78rem; color: var(--muted, #596579); }
.ab-note { font-size: 0.76rem; color: var(--muted, #596579); }
.ab-note.warn { color: var(--carillon-bleu-fonce, #0f3578); }
.ab-test { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ab-sample { flex: 1; min-width: 200px; min-height: 40px; }
.ab-test-result { font-size: 0.84rem; }
.ab-test-result.ok { color: var(--carillon-vert, #168a4b); }
.ab-test-result.no { color: var(--carillon-bleu-fonce, #0f3578); }
.ab-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* journal d'exécutions */
.agents-runs-title { margin: 22px 0 10px; font-size: 1rem; }
.agents-runs { display: grid; gap: 8px; }
.agents-run {
  background: var(--surface, #ffffff); border: 1px solid var(--line, #d9e2ee); border-radius: 12px;
  padding: 11px 14px; box-shadow: var(--ombre-carte);
}
.agents-run-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.agents-run-head strong { color: var(--carillon-nuit, #071c3b); font-size: 0.92rem; }
.agents-run-when { color: var(--muted, #596579); font-size: 0.78rem; white-space: nowrap; }
.agents-run-meta { display: flex; align-items: center; gap: 8px; color: var(--muted, #596579); font-size: 0.8rem; margin-top: 3px; }
.ab-report { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ab-report-kpi {
  display: grid; gap: 1px; background: var(--surface-douce, #f3f6fa); border-radius: 9px;
  padding: 7px 11px; font-size: 0.72rem; color: var(--muted, #596579); min-width: 84px;
}
.ab-report-kpi strong { font-size: 1rem; color: var(--carillon-nuit, #071c3b); }

/* ---------- icône métier DANS le champ (motif S5, un <option> ne rend pas de SVG) ---------- */
.field-select-iconed { position: relative; display: flex; align-items: center; min-width: 0; }
.field-select-iconed .metier-badge {
  position: absolute; left: 9px; width: 26px; height: 26px; border-radius: 7px;
  pointer-events: none; z-index: 1;
}
.field-select-iconed select { width: 100%; padding-left: 44px; min-height: 44px; border: 1px solid var(--line, #d9e2ee); border-radius: 9px; background: var(--surface, #fff); color: var(--ink, #071c3b); }

/* ---------- icônes dans bannières/toasts (remplace les anciens glyphes coche/alerte/trombone) ---------- */
.banner-ico, .k-clip {
  width: 15px; height: 15px; vertical-align: -2px; margin-right: 6px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.k-clip { margin-right: 0; }

/* ---------- section Configuration de l'app (contrat app-config v1.1) ---------- */
.cfg-intro { max-width: 68ch; margin-bottom: 16px; }
.cfg-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cfg-col { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 1050px) { .cfg-grid { grid-template-columns: 1fr; } }

.cfg-card h3 { display: flex; align-items: center; gap: 8px; }
.cfg-card h3 .cfg-ico { width: 16px; height: 16px; flex: none; stroke: var(--carillon-bleu, #1546a0); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cfg-lead { color: var(--muted, #596579); font-size: 0.82rem; margin: -6px 0 12px; }

.cfg-profil {
  display: flex; align-items: center; gap: 12px; padding: 12px; flex-wrap: wrap;
  border: 1px solid var(--line, #d9e2ee); border-radius: 12px; background: var(--gris-bleute, #e8eef7);
}
.cfg-profil .metier-badge { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.cfg-profil .pt { flex: 1; min-width: 150px; }
.cfg-profil .pt strong { display: block; color: var(--carillon-nuit, #071c3b); }
.cfg-profil .pt small { color: var(--muted, #596579); font-size: 0.78rem; }
.cfg-profil select { min-height: 44px; border: 1px solid var(--line, #d9e2ee); border-radius: 9px; padding: 8px 10px; background: var(--surface, #fff); font-weight: 600; }

.cfg-switch { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line, #d9e2ee); }
.cfg-switch:first-of-type { border-top: 0; }
.cfg-switch .sl { flex: 1; min-width: 0; }
.cfg-switch .sl strong { display: block; font-weight: 700; color: var(--carillon-nuit, #071c3b); font-size: 0.88rem; }
.cfg-switch .sl small { color: var(--muted, #596579); font-size: 0.77rem; }
.cfg-tgl {
  width: 44px; height: 24px; border-radius: 999px; border: 0; background: #c3cede;
  position: relative; flex: none; cursor: pointer; transition: background 0.15s;
}
/* Cible tactile >= 44px (retouche S5) : zone cliquable étendue, visuel inchangé. */
.cfg-tgl::before { content: ""; position: absolute; inset: -10px 0; }
.cfg-tgl::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface, #fff); box-shadow: 0 1px 2px rgba(7, 28, 59, 0.35); transition: left 0.15s;
}
.cfg-tgl[aria-checked="true"] { background: var(--carillon-bleu, #1546a0); }
.cfg-tgl[aria-checked="true"]::after { left: 22px; }
/* Règle verrouillée : affichée cadenassée, jamais cachée (gate S5). */
.cfg-locked { display: inline-flex; align-items: center; gap: 5px; }
.cfg-locked .banner-ico { margin-right: 0; }

.cfg-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 6px; }
/* Bordure PLEINE à l'état inactif : le pointillé est la signature réservée du badge SIMULÉ (gate S5). */
.cfg-chip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  border: 1px solid var(--line, #d9e2ee); border-radius: 999px; padding: 5px 12px;
  font-size: 0.78rem; font-weight: 600; color: var(--muted, #596579); background: var(--surface, #ffffff); cursor: pointer;
}
.cfg-chip.on { border: 1px solid var(--carillon-bleu, #1546a0); color: var(--carillon-bleu-fonce, #0f3578); background: var(--gris-bleute, #e8eef7); }
.cfg-chip .banner-ico { width: 12px; height: 12px; margin-right: 0; }
.cfg-chip:disabled { cursor: not-allowed; opacity: 0.7; }

.cfg-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.cfg-state.published { background: var(--surface-green, #e9f5ef); color: var(--carillon-vert, #168a4b); }
.cfg-state.draft { background: var(--gris-bleute, #e8eef7); color: var(--carillon-bleu-fonce, #0f3578); }
.cfg-state .banner-ico { width: 12px; height: 12px; margin-right: 0; }

.cfg-diff-line { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line, #d9e2ee); font-size: 0.86rem; }
.cfg-diff-line:first-of-type { border-top: 0; }
.cfg-diff-mark { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center; }
.cfg-diff-mark .banner-ico { width: 12px; height: 12px; margin-right: 0; }
.cfg-diff-line.add .cfg-diff-mark { background: var(--surface-green, #e9f5ef); color: var(--carillon-vert, #168a4b); }
.cfg-diff-line.rem .cfg-diff-mark { background: var(--alerte-douce); color: var(--carillon-rouge, #e63946); }
.cfg-diff-line.chg .cfg-diff-mark { background: var(--gris-bleute, #e8eef7); color: var(--carillon-bleu-fonce, #0f3578); }
.cfg-diff-line .dt { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cfg-diff-line .dp { font-variant-numeric: tabular-nums; color: var(--muted, #596579); font-weight: 700; white-space: nowrap; }

.cfg-hist-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line, #d9e2ee); }
.cfg-hist-row:first-of-type { border-top: 0; }
.cfg-hist-rev {
  width: 30px; height: 30px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--surface-douce, #f3f6fa); border: 1px solid var(--line, #d9e2ee);
  font-weight: 800; font-size: 0.8rem; color: var(--carillon-nuit, #071c3b); font-variant-numeric: tabular-nums;
}
.cfg-hist-row.current .cfg-hist-rev { background: var(--carillon-nuit, #071c3b); color: #fff; border-color: var(--carillon-nuit, #071c3b); }
.cfg-hist-row .hl { flex: 1; min-width: 0; }
.cfg-hist-row .hl strong { display: block; font-weight: 700; color: var(--carillon-nuit, #071c3b); font-size: 0.86rem; }
.cfg-hist-row .hl small { color: var(--muted, #596579); font-size: 0.76rem; overflow-wrap: anywhere; }
.cfg-hist-row .btn { min-height: 36px; padding: 6px 12px; }

.cfg-provenance { font-size: 0.78rem; color: var(--muted, #596579); margin-top: 8px; }

/* ---------- connexions des canaux (installation) ---------- */
.connex-box { margin-top: 16px; }
.connex-bind { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 0.88rem; font-weight: 600; color: var(--carillon-nuit, #071c3b); margin-bottom: 12px; }
.connex-bind select { min-height: 44px; border: 1px solid var(--line, #d9e2ee); border-radius: 9px; padding: 8px 10px; background: var(--surface, #fff); font-weight: 600; }
.connex-card { border: 1px solid var(--line, #d9e2ee); border-radius: 12px; background: var(--surface, #ffffff); padding: 0 14px; margin-top: 10px; }
.connex-card > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; cursor: pointer; min-height: 48px; padding: 10px 0; font-size: 0.92rem; color: var(--carillon-nuit, #071c3b); }
.connex-card[open] > summary { border-bottom: 1px dashed var(--gris-bleute, #e8eef7); }
.connex-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; padding: 12px 0 2px; }
.connex-field input { border: 1px solid var(--line, #d9e2ee); border-radius: 9px; padding: 9px 12px; min-height: 42px; background: var(--surface, #fff); color: var(--ink, #071c3b); }
.connex-card .toolbar { padding-bottom: 14px; }
.connex-test-result { font-size: 0.8rem; color: var(--muted, #596579); }

/* ==========================================================
   AUDIT UX/UI BACKOFFICE - cockpit d'exploitation 2026-07-23
   ========================================================== */
:root { --bo-success:#168a4b; --bo-danger:#e63946; --bo-soft:#f4f7fb; }
.side { overflow-x:hidden; overflow-y:auto; }
.side-group-label { margin:12px 12px 3px; color:#91a3bd; font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
.side-health { display:flex; align-items:center; gap:8px; padding:8px 10px; color:#c6d2e6; font-size:.72rem; }
.side-health i,.live-status i { width:8px; height:8px; border-radius:50%; background:var(--bo-success); box-shadow:0 0 0 4px rgba(22,138,75,.14); }
main { padding-top:0; }
.admin-topbar { position:sticky; top:0; z-index:20; min-height:76px; margin:0 -30px 24px; padding:12px 30px; display:flex; align-items:center; justify-content:space-between; gap:18px; background:rgba(250,248,243,.96); border-bottom:1px solid var(--line,#d9e2ee); backdrop-filter:blur(12px); }
body.env-on .admin-topbar { top:30px; }
.admin-topbar>div:first-child { display:grid; }
.admin-topbar-kicker { color:var(--carillon-bleu,#1546a0); font-size:.67rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.admin-topbar strong { color:var(--carillon-nuit,#071c3b); font-family:var(--font-titres,Georgia,serif); font-size:1.15rem; }
.admin-topbar small,.section-subtitle { color:var(--muted,#596579); }
.admin-topbar-actions,.live-status { display:flex; align-items:center; gap:10px; }
.live-status { font-size:.77rem; font-weight:700; color:var(--muted,#596579); }
.section-subtitle { margin-top:3px; font-size:.86rem; }
.section-kpis { margin-bottom:14px; }
.kpi { min-height:108px; align-content:center; text-align:left; }
button.kpi { width:100%; cursor:pointer; font:inherit; }
button.kpi:hover { border-color:var(--carillon-bleu,#1546a0); transform:translateY(-1px); box-shadow:0 8px 24px rgba(7,28,59,.09); }
button:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid rgba(21,70,160,.32)!important; outline-offset:2px; }
.kpi small { color:var(--muted,#596579); font-size:.72rem; }
/* .priority-strip / .priority-action : SUPPRIMÉS (fusion densité 02/08) —
   la rangée répétait quick-actions et la sidebar sur le même écran. */
.filter-bar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; padding:10px; border:1px solid var(--line,#d9e2ee); border-radius:14px; background: var(--surface, #fff); }
.filter-bar .search { flex:1 1 260px; }
.filter-bar select { min-height:42px; padding:8px 32px 8px 10px; border:1px solid var(--line,#d9e2ee); border-radius:9px; background: var(--surface, #fff); color:var(--ink,#071c3b); }
.table-card { overflow:hidden; padding:0; }
.table-card .table { margin:0; }
.table tbody tr:hover { background:var(--bo-soft); }
.table td:last-child { white-space:nowrap; }
.row-actions { display:flex; gap:6px; }
.row-actions .btn { min-height:36px; padding:6px 10px; }
.pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:54px; padding:10px 14px; border-top:1px solid var(--line,#d9e2ee); color:var(--muted,#596579); font-size:.8rem; }
.pagination .pagination-actions { display:flex; align-items:center; gap:6px; }
.sub-card .subscription-actions { display:flex; gap:8px; margin-top:12px; }
.sub-card .next-payment { margin-top:8px; color:var(--muted,#596579); font-size:.78rem; }
.ticket-board { grid-template-columns:repeat(5,minmax(220px,1fr)); overflow-x:auto; padding-bottom:8px; }
.ticket-col { min-width:220px; }
.ticket-meta-audit { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; color:var(--muted,#596579); font-size:.75rem; }
.ticket-meta-audit .sla-badge { white-space:nowrap; font-weight:800; }
.ticket-meta-audit .sla-badge.danger { color:var(--bo-danger); }
.ticket-meta-audit .sla-badge.warning { color:#9a5a00; }
.ticket-meta-audit .sla-badge.ok { color:var(--bo-success); }
.ticket-meta-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.bo-modal-card { width:min(1440px,82vw); max-width:none; max-height:92vh; display:flex; flex-direction:column; }
.bo-modal-body { flex:1; overflow:auto; }
.client-tabs { position:sticky; top:0; z-index:2; display:flex; gap:4px; overflow-x:auto; margin:-2px 0 16px; padding:4px; background:var(--blanc-chaud,#faf8f3); border:1px solid var(--line,#d9e2ee); border-radius:12px; }
.client-tabs button { min-height:40px; flex:0 0 auto; padding:8px 13px; border:0; border-radius:9px; background:transparent; color:var(--muted,#596579); font-weight:800; }
.client-tabs button.active { background:var(--carillon-nuit,#071c3b); color:#fff; }
.client-tab-panel { display:none; }
.client-tab-panel.active { display:block; }
.bo-modal-actions { position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; background: var(--surface, #fff); border-top:1px solid var(--line,#d9e2ee); }
.cfg-card:has(.cfg-switch) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:18px; }
.cfg-card:has(.cfg-switch)>h3,.cfg-card:has(.cfg-switch)>.cfg-lead { grid-column:1/-1; }
@media(max-width:1200px){.console{grid-template-columns:210px minmax(0,1fr)}main{padding-left:20px;padding-right:20px}.admin-topbar{margin-left:-20px;margin-right:-20px;padding-left:20px;padding-right:20px}.two-col,.cfg-grid{grid-template-columns:1fr}.table-card{overflow-x:auto}.table{min-width:1080px}.bo-modal-card{width:92vw}}
@media(max-width:860px){.console{display:block}.side{position:static;width:100%;height:auto;padding:10px}.side-brand,.side-foot{display:none}.side-nav{display:flex;overflow-x:auto;padding-bottom:4px}.side-nav button{flex:0 0 auto}.side-group-label{display:none}main{padding:0 14px 40px}.admin-topbar{top:0;margin:0 -14px 18px;padding:10px 14px}body.env-on .admin-topbar{top:30px}.admin-topbar small,.live-status{display:none}.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-bar>*{flex:1 1 100%;width:100%}.bo-modal-card{width:100vw;height:calc(100vh - 30px);max-height:none;border-radius:0}.ticket-meta-form,.cfg-card:has(.cfg-switch){grid-template-columns:1fr}.cfg-card:has(.cfg-switch)>h3,.cfg-card:has(.cfg-switch)>.cfg-lead{grid-column:auto}}
@media(max-width:520px){.kpi-grid{grid-template-columns:1fr}.admin-topbar-actions .btn span{display:none}.bo-modal-actions{display:grid;grid-template-columns:1fr}}

/* ==========================================================
   ADMIN-MAINT-001 — tickets, candidats et verrous de release
   ========================================================== */
/* .maintenance-kpis : SUPPRIMÉE (fusion densité 02/08) — la rangée
   au-dessus des onglets doublonnait ticketKpis et deploymentReadiness. */
.maintenance-tabs {
  display:flex;
  gap:4px;
  width:max-content;
  margin:14px 0;
  padding:4px;
  border:1px solid var(--line,#d9e2ee);
  border-radius:12px;
  background: var(--surface, #fff);
}
.maintenance-tabs button {
  min-height:42px;
  padding:8px 16px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--muted,#596579);
  font-weight:800;
}
.maintenance-tabs button.active { background:var(--carillon-nuit,#071c3b); color:#fff; }
.maintenance-filters { margin-bottom:14px; }
.qual-reset-card { display:grid; gap:18px; }
.qual-reset-scope { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.qual-reset-scope > div { display:grid; gap:5px; padding:14px; border:1px solid var(--line,#dce2ea); border-radius:14px; background:var(--surface,#fff); }
.qual-reset-scope span { color:var(--muted,#596579); line-height:1.45; }
.qual-reset-actions { display:grid; grid-template-columns:auto minmax(260px,1fr) auto; gap:12px; align-items:end; }
.qual-reset-actions label { display:grid; gap:6px; font-weight:700; color:var(--carillon-nuit,#071c3b); }
.qual-reset-actions input { width:100%; }
@media (max-width:760px) {
  .qual-reset-scope, .qual-reset-actions { grid-template-columns:1fr; }
}
.deployment-cockpit {
  display:grid;
  gap:16px;
  margin-bottom:16px;
  padding:18px;
  border:1px solid rgba(21,70,160,.2);
  background:linear-gradient(145deg,#fff 0%,#f5f8ff 100%);
}
.deployment-cockpit-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.deployment-cockpit-head h3 { margin:2px 0 4px; color:var(--carillon-nuit,#071c3b); }
.deployment-cockpit-head p { margin:0; color:var(--muted,#596579); }
.deployment-readiness {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:8px;
}
.deployment-metric {
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px;
  border:1px solid var(--line,#d9e2ee);
  border-radius:12px;
  background: var(--surface, #fff);
}
.deployment-metric > strong {
  min-width:42px;
  color:var(--carillon-bleu,#1546a0);
  font-size:1.45rem;
  line-height:1;
}
.deployment-metric span,.deployment-metric b,.deployment-metric small { display:block; min-width:0; }
.deployment-metric b { color:var(--carillon-nuit,#071c3b); font-size:.78rem; }
.deployment-metric small { margin-top:2px; color:var(--muted,#596579); font-size:.67rem; line-height:1.25; }
.deployment-metric.is-danger { border-color:rgba(230,57,70,.35); background:#fff5f5; }
.deployment-metric.is-danger > strong { color:var(--bo-danger,#c92f3e); }
.deployment-path {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.deployment-path li {
  min-width:0;
  display:flex;
  gap:9px;
  padding:10px;
  border-radius:11px;
  background:rgba(255,255,255,.78);
}
.deployment-path li > strong {
  width:27px;
  height:27px;
  flex:0 0 27px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--carillon-nuit,#071c3b);
  color:#fff;
  font-size:.78rem;
}
.deployment-path span,.deployment-path b,.deployment-path small { display:block; min-width:0; }
.deployment-path b { color:var(--carillon-nuit,#071c3b); font-size:.78rem; }
.deployment-path small { margin-top:2px; color:var(--muted,#596579); font-size:.68rem; line-height:1.25; }
.deployment-next-action {
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  padding:11px 13px;
  border-left:4px solid var(--carillon-bleu,#1546a0);
  border-radius:8px;
  background: var(--surface, #fff);
}
.deployment-next-action b { flex:0 0 auto; color:var(--carillon-nuit,#071c3b); }
.deployment-next-action span { color:var(--muted,#596579); }
.kpi-grid-mini .mini-kpi {
  min-width:0;
  min-height:64px;
  display:grid;
  align-content:center;
  gap:2px;
  padding:10px 12px;
  border:1px solid var(--line,#d9e2ee);
  border-radius:12px;
  background: var(--surface, #fff);
}
.kpi-grid-mini .mini-kpi strong { color:var(--carillon-nuit,#071c3b); font-size:1.2rem; }
.kpi-grid-mini .mini-kpi span { color:var(--muted,#596579); font-size:.72rem; font-weight:700; }
.kpi-grid-mini .mini-kpi.is-danger { border-color:rgba(230,57,70,.35); background:#fff5f5; }
.ticket-board {
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:visible;
}
.ticket-col { min-width:0; }
.maintenance-queue { display:grid; gap:10px; }
.release-card {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:15px 16px;
  border:1px solid var(--line,#d9e2ee);
  border-radius:14px;
  background: var(--surface, #fff);
}
.release-card-main { min-width:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:5px 10px; align-items:center; }
.release-card-main strong { min-width:0; overflow-wrap:anywhere; color:var(--carillon-nuit,#071c3b); }
.release-card-main small { grid-column:2; min-width:0; overflow-wrap:anywhere; color:var(--muted,#596579); }
.maintenance-link-state { margin-bottom:12px; color:var(--muted,#596579); }
.maintenance-detail { display:grid; gap:14px; }
.release-stepper { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:6px; }
.release-step {
  position:relative;
  min-width:0;
  display:grid;
  justify-items:center;
  gap:5px;
  color:var(--muted,#596579);
  font-size:.7rem;
  font-weight:800;
  text-align:center;
}
.release-step::before {
  content:"";
  position:absolute;
  z-index:0;
  top:15px;
  left:-50%;
  width:100%;
  height:2px;
  background:var(--line,#d9e2ee);
}
.release-step:first-child::before { display:none; }
.release-step i {
  position:relative;
  z-index:1;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:2px solid var(--line,#d9e2ee);
  border-radius:50%;
  background: var(--surface, #fff);
  font-style:normal;
}
.release-step.done i { border-color:var(--carillon-bleu,#1546a0); color:#fff; background:var(--carillon-bleu,#1546a0); }
.release-step.current i { border-color:var(--carillon-bleu,#1546a0); color:var(--carillon-bleu,#1546a0); background: var(--surface, #fff); box-shadow:0 0 0 4px rgba(21,70,160,.12); }
.release-step.done::before,.release-step.current::before { background:var(--carillon-bleu,#1546a0); }
.release-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.release-facts span { min-width:0; padding:10px; border-radius:10px; background:var(--bo-soft,#f3f6fa); overflow-wrap:anywhere; }
.release-facts b { display:block; margin-bottom:3px; color:var(--muted,#596579); font-size:.7rem; text-transform:uppercase; }
.release-window { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.release-audience { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.release-audience label { min-height:44px; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line,#d9e2ee); border-radius:10px; }
.release-audience span { min-width:0; overflow-wrap:anywhere; }
.release-audience input { width:18px; height:18px; }
.release-gates { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.release-gate { min-height:44px; display:flex; align-items:center; gap:9px; padding:9px 11px; border:1px solid var(--line,#d9e2ee); border-radius:10px; }
.release-gate i { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#eef1f5; font-style:normal; font-weight:900; }
.release-gate.ok { border-color:rgba(22,138,75,.3); background:#f2fbf6; color:var(--bo-success,#168a4b); }
.release-gate.ok i { background:var(--bo-success,#168a4b); color:#fff; }
.release-audit { display:grid; gap:0; }
.release-audit > div { display:grid; grid-template-columns:130px 140px minmax(0,1fr); gap:10px; padding:9px 0; border-bottom:1px solid var(--line,#d9e2ee); }
.release-audit time,.release-audit small { color:var(--muted,#596579); }
.release-actions .danger { margin-left:auto; }
.release-actions .btn:disabled { opacity:.42; cursor:not-allowed; filter:grayscale(.35); }
@media(max-width:860px) {
  .maintenance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .deployment-readiness { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .deployment-path { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ticket-board { display:grid; grid-template-columns:1fr; overflow:visible; }
  .ticket-col { min-width:0; }
  .release-stepper { grid-template-columns:1fr; gap:4px; }
  .release-step { grid-template-columns:30px minmax(0,1fr); justify-items:start; align-items:center; text-align:left; }
  .release-step::before { top:-50%; left:14px; width:2px; height:100%; }
  .release-facts,.release-window,.release-audience,.release-gates { grid-template-columns:1fr; }
  .release-audit > div { grid-template-columns:1fr; gap:2px; }
  .release-actions { grid-template-columns:1fr; }
}
@media(max-width:520px) {
  .maintenance-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .deployment-cockpit-head { display:grid; }
  .deployment-readiness,.deployment-path { grid-template-columns:1fr; }
  .deployment-next-action { display:grid; gap:4px; }
  .release-card { align-items:stretch; flex-direction:column; }
  .release-card .btn { width:100%; min-height:44px; }
  #releaseDetail .bo-modal-card { width:100vw; height:100vh; max-height:none; }
}
/* ==========================================================
   ADMIN-SAAS-001 — cockpit SaaS et navigation mobile
   ========================================================== */
.mobile-bar { display: none; }
.side-close, .side-backdrop { display: none; }

.side-nav {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.nav-label {
  margin: 10px 12px 2px;
  color: #8395b0;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.nav-label:first-child { margin-top: 0; }
.side-nav button > span:not(.nav-count) { min-width: 0; }
.nav-count {
  min-width: 22px;
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--carillon-rouge, #e63946);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

.cockpit-head { align-items: flex-end; margin-bottom: 16px; }
.cockpit-head h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); line-height: 1.08; }
.cockpit-head-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--carillon-bleu, #1546a0);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.section-lead { max-width: 70ch; margin-top: 5px; color: var(--muted, #596579); font-size: 0.9rem; }

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 70px;
  padding: 12px 14px;
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 13px;
  background: var(--surface, #fff);
  color: var(--carillon-nuit, #071c3b);
  text-align: left;
  box-shadow: var(--ombre-carte);
}
.quick-action:hover { border-color: var(--carillon-bleu, #1546a0); background: var(--surface-douce, #f3f6fa); }
.quick-action.primary-action { background: var(--carillon-nuit, #071c3b); border-color: var(--carillon-nuit, #071c3b); color: #fff; }
.quick-action.primary-action:hover { background: var(--carillon-bleu-fonce, #0f3578); }
.quick-action .nav-ico {
  width: 21px;
  height: 21px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.quick-action span { min-width: 0; }
.quick-action strong, .quick-action small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-action strong { font-size: 0.88rem; }
.quick-action small { margin-top: 2px; color: var(--muted, #596579); font-size: 0.72rem; }
.quick-action.primary-action small { color: #c6d2e6; }

.cockpit-block-head, .card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.cockpit-block-head { margin: 0 0 10px; }
.cockpit-block-head h3, .card-head h3 { margin: 0; }
.measure-legend { color: var(--muted, #596579); font-size: 0.75rem; white-space: nowrap; }
.measure-legend i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 999px;
  background: var(--carillon-vert, #168a4b);
}
.cockpit-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.cockpit-grid > * { min-width: 0; }
.priority-card { grid-column: span 7; }
.operations-card { grid-column: span 5; }
/* .capacity-card : supprimée (fusion densité 02/08) — la capacité est une
   health-row de la carte Exploitation. */
.capacity-track { height: 6px; border-radius: 999px; background: var(--gris-bleute, #e8eef7); margin-top: 6px; overflow: hidden; }
.capacity-track .fill { height: 100%; border-radius: 999px; background: var(--carillon-bleu, #1546a0); }
.card-head { margin-bottom: 12px; }
.text-action {
  border: 0;
  background: transparent;
  color: var(--carillon-bleu, #1546a0);
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}
.text-action:hover { text-decoration: underline; }

.ops-health { display: grid; gap: 8px; }
.health-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 10px;
  background: var(--surface, #fff);
}
.health-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--muted, #596579); }
.health-row.measured .health-dot { background: var(--carillon-vert, #168a4b); }
.health-row.attention .health-dot { background: var(--carillon-rouge, #e63946); }
.health-row.unavailable .health-dot { background: var(--muted, #596579); }
.health-copy { min-width: 0; }
.health-copy strong, .health-copy small { display: block; overflow-wrap: anywhere; }
.health-copy strong { font-size: 0.84rem; }
.health-copy small { color: var(--muted, #596579); font-size: 0.72rem; }
.health-state {
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--gris-bleute, #e8eef7);
  color: var(--muted, #596579);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}
.health-row.measured .health-state { background: var(--surface-green, #e9f5ef); color: var(--carillon-vert, #168a4b); }
.health-row.attention .health-state { background: var(--alerte-douce); color: var(--carillon-rouge, #e63946); }

@media (max-width: 1120px) {
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .priority-card, .operations-card { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  body.sidebar-open { overflow: hidden; }
  .console { display: block; min-height: 100vh; }
  .side {
    position: fixed;
    z-index: 1002;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, calc(100vw - 44px));
    height: 100vh;
    padding: 18px 14px;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: 18px 0 42px rgba(7, 28, 59, 0.28);
  }
  body.env-on .side { top: 30px; height: calc(100vh - 30px); }
  .side.nav-open { transform: translateX(0); }
  .side-brand span { display: block; }
  .side-close {
    display: grid;
    place-items: center;
    margin-left: auto;
    color: #fff;
  }
  .side-nav {
    display: grid;
    flex: initial;
    overflow-x: hidden;
    overflow-y: visible;
    padding: 0;
  }
  .side-nav button { white-space: normal; width: 100%; flex: initial; }
  .side-foot { display: grid; margin-top: auto; }
  .side-foot .btn { width: 100%; }
  .side-backdrop {
    position: fixed;
    z-index: 1001;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: rgba(7, 28, 59, 0.52);
  }
  body.env-on .side-backdrop { top: 30px; height: calc(100% - 30px); }
  main { width: 100%; min-width: 0; padding: 0 14px 44px; }
  .mobile-bar {
    position: sticky;
    z-index: 900;
    top: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    gap: 9px;
    align-items: center;
    min-height: 62px;
    margin: 0 -14px 18px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--line, #d9e2ee);
    background: rgba(250, 248, 243, 0.97);
    backdrop-filter: blur(10px);
  }
  body.env-on .mobile-bar { top: 30px; }
  .mobile-bar > div { min-width: 0; }
  .mobile-bar strong, .mobile-bar span { display: block; }
  .mobile-bar strong { font-family: var(--font-titres, Georgia, serif); line-height: 1.1; }
  .mobile-bar span { color: var(--muted, #596579); font-size: 0.68rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; }
  .mobile-menu, .mobile-refresh { width: 42px; height: 42px; padding: 0; border: 1px solid var(--line, #d9e2ee); border-radius: 10px; background: var(--surface, #fff); }
  .mobile-menu .nav-ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
  .cockpit-head-meta { width: 100%; justify-content: space-between; }
  .cockpit-grid { grid-template-columns: 1fr; }
  .priority-card, .operations-card { grid-column: 1; }
}

@media (max-width: 520px) {
  h2 { font-size: 1.2rem; }
  .section-head { align-items: stretch; }
  .section-head > .filters, .section-head > .search { width: 100%; min-width: 0; }
  .filters > *, .section-head > .search { max-width: 100%; }
  .quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .quick-action { min-height: 64px; padding: 10px; }
  .quick-action small { display: none; }
  .cockpit-block-head { align-items: flex-start; }
  .measure-legend { white-space: normal; text-align: right; }
  .kpi { padding: 13px 12px; }
  .kpi strong { font-size: 1.35rem; }
  .kpi span { font-size: 0.65rem; }
  .card { padding: 14px; }
  .card-head { align-items: flex-start; }
  .priority-card, .priority-card .card-head, .priority-card .alert-list, .priority-card .alert-row { min-width: 0; max-width: 100%; }
  .priority-card .card-head { flex-wrap: wrap; }
  .alert-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; }
  .alert-row .metier-badge { grid-column: 1; }
  .alert-row strong { grid-column: 2; width: 100%; }
  .alert-badges { grid-column: 1 / -1; width: 100%; justify-content: flex-start; }
  .alert-badges .badge { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .health-row { grid-template-columns: auto minmax(0, 1fr); }
  .health-state { grid-column: 2; justify-self: start; }
  .search { min-width: 0; width: 100%; }
  .form-grid, .sub-grid, .connex-fields { grid-template-columns: minmax(0, 1fr); }
  .table-card { max-width: 100%; }
  .table th, .table td { padding: 9px 10px; }
  .bo-modal { padding: 0; }
  .bo-modal-card { width: 100%; max-height: 100vh; border-radius: 0; }
}

@media (max-width: 350px) {
  .quick-actions, .kpi-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
   ADMIN-MAINT-MOBILE-002 — pilotage tactile de la maintenance
   ========================================================== */
.mobile-bottom-nav,
.mobile-ticket-status-tabs { display: none; }

@media (max-width: 860px) {
  .admin-topbar { display: none; }
  main {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  }
  .mobile-bar {
    min-height: 64px;
    margin-bottom: 12px;
  }
  .mobile-context {
    min-width: 0;
    text-align: center;
  }
  .mobile-context strong,
  .mobile-context span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mobile-menu,
  .mobile-refresh,
  .mobile-bottom-nav button,
  .maintenance-tabs button,
  .mobile-ticket-status-tabs button,
  .ticket-kcard .k-actions select,
  .ticket-kcard .k-actions .btn,
  #ticketDetail .btn,
  #ticketDetail input,
  #ticketDetail select,
  #releaseDetail .btn,
  #releaseDetail input,
  #releaseDetail select {
    min-height: 48px;
  }
  .mobile-menu,
  .mobile-refresh {
    width: 48px;
    height: 48px;
  }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 850;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line, #d9e2ee);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 -10px 28px rgba(7, 28, 59, 0.12);
    backdrop-filter: blur(12px);
  }
  .mobile-bottom-nav button {
    position: relative;
    display: grid;
    place-items: center;
    gap: 2px;
    min-width: 0;
    padding: 5px 3px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted, #596579);
    font-size: 0.67rem;
    font-weight: 800;
  }
  .mobile-bottom-nav button.active {
    background: var(--gris-bleute, #e8eef7);
    color: var(--carillon-bleu, #1546a0);
  }
  .mobile-bottom-nav .nav-ico {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
  }
  .mobile-nav-icon { position: relative; display: grid; place-items: center; }
  .mobile-nav-icon .nav-count {
    position: absolute;
    top: -8px;
    right: -14px;
    min-width: 18px;
    padding: 0 5px;
    font-style: normal;
  }
  .maintenance-tabs {
    position: sticky;
    z-index: 30;
    top: 64px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    max-width: 100%;
    padding: 4px;
    overflow-x: visible;
    background: rgba(255, 255, 255, 0.98);
  }
  .maintenance-tabs button {
    min-width: 0;
    padding-right: 6px;
    padding-left: 6px;
    font-size: clamp(.72rem, 3.2vw, .85rem);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    line-height: 1.15;
  }
  body.env-on .maintenance-tabs { top: 94px; }
  .mobile-ticket-status-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0 0 10px;
    padding: 3px 0 8px;
    overflow-x: visible;
  }
  .mobile-ticket-status-tabs button {
    min-width: 0;
    padding: 8px 6px;
    border: 1px solid var(--line, #d9e2ee);
    border-radius: 999px;
    background: var(--surface, #fff);
    color: var(--muted, #596579);
    font-weight: 800;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.15;
  }
  .mobile-ticket-status-tabs button.active {
    border-color: var(--carillon-bleu, #1546a0);
    background: var(--carillon-nuit, #071c3b);
    color: #fff;
  }
  #ticketKpis.kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-right: 0;
    margin-left: 0;
    padding: 0 0 8px;
    overflow-x: visible;
    scroll-snap-type: none;
  }
  #ticketKpis .mini-kpi {
    min-width: 0;
    min-height: 72px;
    scroll-snap-align: none;
  }
  .ticket-board .ticket-col { display: none; min-height: 0; }
  .ticket-board .ticket-col.mobile-active { display: block; }
  .ticket-kcard { cursor: default; }
  .ticket-kcard .k-actions { align-items: stretch; }
  .ticket-kcard .k-actions select,
  .ticket-kcard .k-actions .btn { min-height: 48px; }
  .bo-modal {
    z-index: 1100;
    padding: 0;
    align-items: stretch;
  }
  .bo-modal-card,
  #releaseDetail .bo-modal-card {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  body.env-on .bo-modal-card,
  body.env-on #releaseDetail .bo-modal-card {
    height: calc(100dvh - 30px);
    margin-top: 30px;
  }
  .bo-modal-head {
    position: sticky;
    z-index: 3;
    top: 0;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }
  .bo-modal-head .icon-btn {
    width: 48px;
    height: 48px;
    flex: none;
  }
  #ticketDetail .bo-modal-head > div { min-width: 0; }
  #ticketDetail .bo-modal-head strong,
  #ticketDetail .bo-modal-head span {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .bo-modal-body {
    padding-right: 14px;
    padding-bottom: 28px;
    padding-left: 14px;
    overscroll-behavior: contain;
  }
  .bo-modal-actions {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  body.modal-open {
    overflow: hidden;
    touch-action: none;
  }
  body.modal-open .mobile-bottom-nav { display: none; }
  .release-stepper {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82px;
    grid-template-columns: none;
    gap: 8px;
    padding: 4px 2px 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .release-step {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 4px;
    min-width: 0;
    text-align: center;
    scroll-snap-align: center;
  }
  .release-step::before { display: none; }
  .release-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .release-facts span:last-child { grid-column: 1 / -1; }
  .release-audience {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .release-actions .btn.hidden,
  .release-actions .btn:disabled { display: none; }
  .td-reply { display: grid; grid-template-columns: 1fr; }
}

/* ==================== MODE SOMBRE (audit UI 28/07, M1) ====================
   Surcharge des JETONS uniquement, ici et pas dans carillon-ui.css (partagé
   avec l'app artisan, tenu par une autre session). Le JS pose data-theme sur
   <html> : « auto » suit prefers-color-scheme, le choix est persisté. */
:root[data-theme="dark"] {
  color-scheme: dark;                    /* champs, selects, scrollbars natifs */
  --carillon-nuit: #e7edf8;              /* l'encre devient claire */
  --carillon-bleu: #7aa2ff;
  --carillon-bleu-fonce: #a9c2ff;
  --carillon-rouge: #ff7b86;
  --carillon-vert: #4cc98a;
  --blanc-chaud: #0b1220;                /* fond de page */
  --surface: #121b2e;                    /* cartes */
  --surface-douce: #1a2439;
  --gris-bleute: #223050;
  --line: #2b3a5c;
  --muted: #9aa7bd;
  --warn: #9aa7bd;
  --ink: #e7edf8;
  --bg: #0b1220;
  --panel: #121b2e;
  --sidebar: #0a142a;                    /* la sidebar RESTE nuit */
  --sector-soft: #223050;
  --soft-blue: #1c2b4a;
  --soft-teal: #16302b;
  --soft-amber: #1a2439;
  --soft-coral: #3a1f27;
  --surface-soft: #1a2439;
  --surface-teal: #16302b;
  --surface-blue: #182742;
  --surface-cyan: #182742;
  --surface-green: #143327;
  --surface-amber: #1a2439;
  --surface-rose: #3a1f27;
  --surface-red: #3a1f27;
  --alerte-douce: #3a1f27;
  --bo-soft: #1a2439;
  --ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.5);
}
/* Les rares surfaces qui employaient l'encre « nuit » comme FOND : en sombre,
   l'encre est claire — on leur redonne un fond foncé explicite. */
:root[data-theme="dark"] .toast { background: #223050; }
:root[data-theme="dark"] .toast.success { background: #14532d; }
:root[data-theme="dark"] .toast.error { background: #7f1d2b; }

/* Bascule de thème, dans la sidebar (fond nuit dans les deux thèmes). */
.theme-switch { display: flex; gap: 6px; margin: 10px 0; }
.theme-switch button {
  flex: 1; padding: 6px 4px; font: inherit; font-size: 0.78rem; font-weight: 650;
  color: rgba(255, 255, 255, 0.75); background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; cursor: pointer;
}
.theme-switch button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.theme-switch button.active { background: var(--carillon-bleu, #1546a0); border-color: var(--carillon-bleu, #1546a0); color: #fff; }

/* MA-4 : entrées dépliables des deux voies de déploiement. */
.train-entree {
  border: 1px solid var(--line, #d9e2ee); border-radius: 10px;
  padding: 8px 12px; margin-top: 8px; background: var(--surface, #fff);
}
.train-entree summary { cursor: pointer; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.train-entree code { font-size: 0.8rem; background: var(--surface-douce, #f3f6fa); padding: 2px 6px; border-radius: 6px; overflow-wrap: anywhere; }
.train-detail { margin-top: 8px; border-top: 1px dashed var(--gris-bleute, #e8eef7); padding-top: 6px; }

/* UI-3 : palette de commandes. */
.palette { position: fixed; inset: 0; z-index: 95; }
.palette-backdrop { position: absolute; inset: 0; background: rgba(7, 28, 59, 0.45); }
.palette-card {
  position: relative; margin: 10vh auto 0; width: min(560px, 92vw);
  background: var(--surface, #fff); border: 1px solid var(--line, #d9e2ee);
  border-radius: 14px; padding: 12px; box-shadow: 0 24px 60px rgba(7, 28, 59, 0.35);
  display: grid; gap: 8px;
}
.palette-card input {
  padding: 10px 12px; font: inherit; border: 1px solid var(--line, #d9e2ee);
  border-radius: 10px; background: var(--surface-douce, #f3f6fa);
}
#paletteList { max-height: 44vh; overflow: auto; }
.palette-item {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.palette-item.active, .palette-item:hover { background: var(--gris-bleute, #e8eef7); }
.palette-item .p { color: var(--muted, #596579); font-size: 0.82rem; }

/* UI-4 : densité compacte persistée + en-têtes triables. */
body.table-compact .table th, body.table-compact .table td { padding: 6px 10px; font-size: 0.84rem; }
#clientTable thead th { cursor: pointer; user-select: none; }

/* ADMIN-UX-A11Y-20260822 : chaque ligne Client devient une carte mobile.
   Les neuf valeurs restent dans le DOM et leur en-tête est répété visuellement. */
@media (max-width: 520px) {
  .table-card:has(#clientTable) { overflow: visible; background: transparent; border: 0; box-shadow: none; }
  #clientTable { display: block; min-width: 0; }
  #clientTable thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #clientTable tbody { display: grid; gap: 12px; }
  #clientTable tbody tr {
    display: block;
    overflow: hidden;
    border: 1px solid var(--line, #d9e2ee);
    border-radius: 14px;
    background: var(--surface, #fff);
    box-shadow: 0 4px 16px rgba(7, 28, 59, .06);
  }
  #clientTable tbody tr[hidden] { display: none !important; }
  #clientTable tbody td[data-label] {
    display: grid;
    grid-template-columns: minmax(88px, .8fr) minmax(0, 1.2fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 9px 12px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #clientTable tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--muted, #596579);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  #clientTable tbody td[data-label]:last-child { display: flex; flex-wrap: wrap; }
  #clientTable tbody td[data-label]:last-child::before { flex: 0 0 100%; margin-bottom: 6px; }
  #clientTable .cell-name { min-width: 0; }
}

/* Confort : les animations et le défilement doux s'effacent sur demande. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================
   Visuels CarillonCharts — MISE EN PAGE uniquement (le module
   carillon-charts.css, chargé avant, porte jetons + composants ;
   les deux thèmes suivent via les variables data-theme).
   ========================================================== */
/* Tuile KPI du cockpit : même gabarit que les cartes .kpi voisines. */
.cch-tuile.kpi-tuile { min-height: 108px; justify-content: center; box-shadow: var(--ombre-carte); }
/* Alerte réelle (erreurs > 1 %, disque >= 85 %) : vermillon — jamais décoratif. */
.cch-tuile--alerte { border-color: var(--carillon-rouge, #e63946); }
.cch-tuile--alerte .cch-tuile-chiffre { color: var(--carillon-rouge, #e63946); }
/* Carte « Disque occupé » : tuile + donut dans UNE seule carte de la grille KPI. */
.kpi-avec-donut {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #d9e2ee);
  border-radius: 14px;
  box-shadow: var(--ombre-carte);
  min-width: 0;
}
.kpi-avec-donut .cch-tuile { border: none; background: transparent; box-shadow: none; }
.kpi-avec-donut .cch-donut { padding: 0 16px 14px; }
/* Pastille de légende de la piste (« Libre ») : même gamme, cerclée pour rester visible. */
.cch-dot.cch-fill--track { background: var(--cch-track, #e8eef7); border: 1px solid var(--cch-line, #d9e2ee); }
/* Respiration des graphiques posés dans les cartes existantes. */
.card .cch-barres { margin: 10px 0 12px; }
.card .cch-spark { margin: 8px 0 4px; }
/* MRR par offre : la boîte disparaît tant qu'il n'y a rien à dessiner. */
.sub-mrr { margin: 0 0 14px; }
.sub-mrr:empty { display: none; }

/* ==========================================================
   Fusion densité 02/08 — cockpit compacté (mandat patron :
   « KPI, tendances et indicateurs dans le même rang »).
   ========================================================== */
/* En-tête de carte avec pastille d'état (ex. « Audit intact : Oui »). */
.cockpit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cockpit-card-head h3 { margin: 0; }
/* Pastille NON MESURÉE : grise, raison en title — jamais une couleur d'état. */
.badge.muted { background: var(--gris-bleute, #e8eef7); color: var(--muted, #596579); }
/* Contrôles de déploiement au vert : pastilles compactes, détail en title.
   Les contrôles « bloque »/« non mesuré » gardent leur ligne en clair. */
.controle-pastilles { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--gris-bleute, #e8eef7); }
/* Rangées de mini-compteurs posées DANS une carte (Sécurité, SLA). */
.card .kpi-grid-mini { margin: 4px 0 10px; }
/* « Non mesuré » dans un mini-compteur : plus petit que le chiffre, gris,
   la raison reste en title (span.p produit par valeurMesuree). */
.kpi-grid-mini .mini-kpi strong .p { font-size: .85rem; font-weight: 700; color: var(--muted, #596579); }