/* ═══════════════ COCKPIT SUPER ADMIN v3 (.sa-*) — salle de contrôle ═══════════════
   Volontairement hors DA CONI : graphite, dense, signaux colorés.
   Ne s'applique qu'à la page plein écran 'superadmin' (js/pages/superadmin.js),
   plus la pastille .sa-pill de retour affichée dans CONI.

   ENCOCHE iPhone — cause et correctif (v3)
   style.css met `overflow-x:hidden` sur html ET sur body. Dès que html a un
   overflow non « visible », celui de body ne remonte plus au viewport : body
   devient lui-même un conteneur de défilement (overflow-y calculé = auto)
   qui ne défile jamais (c'est le document qui défile). Un `position:sticky`
   se colle à son plus proche ancêtre défilant… donc à body : l'ancienne
   barre .sa-top n'était PAS collante, elle partait avec la page. En PWA
   (black-translucent + viewport-fit=cover) la barre d'état est transparente :
   dès que la page avait défilé (ou était rouverte défilée), le titre et le
   contenu passaient sous l'heure et l'encoche, malgré le padding-top
   env(safe-area-inset-top).
   Correctif : le cockpit est une coquille FIXE (inset:0) en grille ; seule
   .sa-main défile. La barre haute est hors de la zone de défilement et garde
   son padding de zone sûre en permanence. Aucune valeur en dur : la zone sûre
   vient de env(safe-area-inset-top), surchargeable par --sat pour les tests. */

.sa-root{
  --sa-bg:#0B0D10;
  --sa-surface:#12161B;
  --sa-surface-2:#171C22;
  --sa-surface-3:#1C232B;
  --sa-line:#1F262E;
  --sa-line-2:#2A333D;
  --sa-text:#E6EDF3;
  --sa-text-2:#8B96A3;
  --sa-text-3:#5F6B78;
  --sa-ok:#3DDC97;
  --sa-warn:#F5A524;
  --sa-crit:#FF5D5D;
  --sa-accent:#4CC9F0;
  --sa-ok-bg:rgba(61,220,151,.10);
  --sa-warn-bg:rgba(245,165,36,.12);
  --sa-crit-bg:rgba(255,93,93,.12);
  --sa-accent-bg:rgba(76,201,240,.10);
  --sa-sat:var(--sat, env(safe-area-inset-top, 0px));
  --sa-sab:env(safe-area-inset-bottom, 0px);
  --sa-sal:env(safe-area-inset-left, 0px);
  --sa-sar:env(safe-area-inset-right, 0px);
  --sa-gutter:16px;
  --sa-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  position:fixed;inset:0;z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"top" "main" "nav";
  background:var(--sa-bg);color:var(--sa-text);
  font-family:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:14px;line-height:1.45;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow:hidden;
}
.sa-root *{box-sizing:border-box}
.sa-root button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.sa-root svg{flex-shrink:0;display:block}

/* ── Typo utilitaire ── */
.sa-num,.sa-mono{font-family:var(--sa-mono);font-variant-numeric:tabular-nums;font-weight:500}
.sa-mono{font-size:12px}
.sa-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sa-text-2)}
.sa-label--gap{display:block;margin-top:12px}
.sa-dim{color:var(--sa-text-3);font-weight:400}
.sa-t-ok{color:var(--sa-ok)}.sa-t-warn{color:var(--sa-warn)}.sa-t-crit{color:var(--sa-crit)}
.sa-t-dim{color:var(--sa-text-2)}.sa-t-accent{color:var(--sa-accent)}

/* ── Barre haute : hors zone de défilement, sous la barre d'état ── */
.sa-top{
  grid-area:top;display:flex;align-items:center;gap:10px;
  padding:calc(var(--sa-sat) + 10px) calc(var(--sa-sar) + var(--sa-gutter)) 10px calc(var(--sa-sal) + var(--sa-gutter));
  background:var(--sa-bg);border-bottom:1px solid var(--sa-line);z-index:20;
}
.sa-brand{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:0}
.sa-brand-mark{width:10px;height:10px;border-radius:2px;background:var(--sa-accent);box-shadow:0 0 0 3px rgba(76,201,240,.18),0 0 14px rgba(76,201,240,.55)}
.sa-brand-txt{font-family:var(--sa-mono);font-weight:600;font-size:14px;letter-spacing:.2em}
.sa-brand-sub{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sa-text-3);white-space:nowrap}
.sa-top-date{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;font-family:var(--sa-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--sa-text-2);white-space:nowrap}

/* ── Boutons ── */
.sa-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--sa-surface-2);color:var(--sa-text);border:1px solid var(--sa-line-2);
  border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;
  min-height:40px;white-space:nowrap;transition:background .15s,border-color .15s
}
.sa-btn svg{width:16px;height:16px}
.sa-btn:hover{background:var(--sa-surface-3);border-color:#36414D}
.sa-btn:active{transform:translateY(1px)}
.sa-btn--accent{background:var(--sa-accent);border-color:var(--sa-accent);color:#06222C}
.sa-btn--accent:hover{background:#6AD4F4;border-color:#6AD4F4}
.sa-btn--danger{background:var(--sa-crit-bg);border-color:rgba(255,93,93,.35);color:var(--sa-crit)}
.sa-btn--danger:hover{background:rgba(255,93,93,.18);border-color:rgba(255,93,93,.55)}
.sa-btn--sm{min-height:36px;padding:6px 12px;font-family:var(--sa-mono);letter-spacing:.08em;font-size:12px}
.sa-btn--block{display:flex;width:100%;margin-top:12px;white-space:normal;text-align:left}
.sa-btn--gap{margin-top:28px}
.sa-btn--tall{min-height:46px;flex-shrink:0}
.sa-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:40px;height:40px;padding:0 10px;border-radius:8px;cursor:pointer;
  background:transparent;border:1px solid var(--sa-line-2);color:var(--sa-text-2)
}
.sa-iconbtn:hover{color:var(--sa-text);background:var(--sa-surface-2)}
.sa-iconbtn--danger{color:var(--sa-crit);border-color:rgba(255,93,93,.3)}
.sa-iconbtn--danger:hover{color:var(--sa-crit);background:var(--sa-crit-bg)}
.sa-linkbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:none;color:var(--sa-accent);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;padding:6px 0}
.sa-linkbtn svg{width:14px;height:14px}
.sa-linkbtn:disabled{opacity:.5;cursor:default}
.sa-primary{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--sa-accent);color:#06222C;border:1px solid var(--sa-accent);border-radius:10px;
  padding:13px 16px;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px;min-height:50px
}
.sa-primary svg{width:18px;height:18px}
.sa-primary:hover{background:#6AD4F4}
.sa-primary--quiet{background:var(--sa-surface-2);color:var(--sa-accent);border-color:rgba(76,201,240,.45)}
.sa-primary--quiet:hover{background:var(--sa-accent-bg)}

/* ── Onglets : barre du bas (mobile) ── */
.sa-tabbar{
  grid-area:nav;display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--sa-surface);border-top:1px solid var(--sa-line);
  padding:0 var(--sa-sar) var(--sa-sab) var(--sa-sal);z-index:20
}
.sa-tab{
  position:relative;background:none;border:none;color:var(--sa-text-3);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:9px 2px 8px;min-height:58px
}
.sa-tab-ic svg{width:21px;height:21px}
.sa-tab-lb{font-size:11px;font-weight:600;letter-spacing:.04em}
.sa-tab:hover{color:var(--sa-text-2)}
.sa-tab--on{color:var(--sa-accent)}
.sa-tab--on::before{content:'';position:absolute;top:-1px;left:22%;right:22%;height:2px;border-radius:0 0 2px 2px;background:var(--sa-accent);box-shadow:0 0 10px rgba(76,201,240,.6)}

/* ── Zone liste (seule à défiler) ── */
.sa-main{
  grid-area:main;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;padding:0 var(--sa-sar) 28px var(--sa-sal);min-width:0
}
.sa-loading{display:flex;align-items:center;justify-content:center;gap:12px;padding:60px 16px;color:var(--sa-text-2)}
.sa-spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--sa-line-2);border-top-color:var(--sa-accent);animation:saSpin .8s linear infinite}
@keyframes saSpin{to{transform:rotate(360deg)}}
.sa-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px var(--sa-gutter) 10px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-text-2)}
.sa-section-title .sa-dim{letter-spacing:.06em;text-transform:none;font-size:12px}
.sa-section-title--inline{padding:0;gap:10px;justify-content:flex-start}
.sa-section-title--sheet{padding-left:0;padding-right:0;padding-top:26px}
.sa-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px var(--sa-gutter) 4px}
.sa-actions{display:flex;gap:8px;padding:14px var(--sa-gutter) 0;overflow-x:auto;scrollbar-width:none}
.sa-actions::-webkit-scrollbar{display:none}
.sa-empty{padding:28px var(--sa-gutter);color:var(--sa-text-2);text-align:center}
.sa-hint{font-size:12px;color:var(--sa-text-2);margin-top:8px;line-height:1.5}
.sa-pad{padding:18px var(--sa-gutter)}
.sa-pad-x{padding:0 var(--sa-gutter)}

/* ── Pastilles & étiquettes d'état ── */
.sa-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--sa-text-3)}
.sa-dot--ok{background:var(--sa-ok);box-shadow:0 0 8px rgba(61,220,151,.55)}
.sa-dot--warn{background:var(--sa-warn);box-shadow:0 0 8px rgba(245,165,36,.55)}
.sa-dot--crit{background:var(--sa-crit);box-shadow:0 0 9px rgba(255,93,93,.7);animation:saBlink 1.6s ease-in-out infinite}
.sa-dot--dim{background:var(--sa-text-3)}
@keyframes saBlink{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.sa-dot--crit,.sa-spinner{animation:none}}
.sa-tag{font-family:var(--sa-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;border:1px solid;white-space:nowrap}
.sa-tag--ok{color:var(--sa-ok);border-color:rgba(61,220,151,.35);background:var(--sa-ok-bg)}
.sa-tag--warn{color:var(--sa-warn);border-color:rgba(245,165,36,.4);background:var(--sa-warn-bg)}
.sa-tag--crit{color:var(--sa-crit);border-color:rgba(255,93,93,.45);background:var(--sa-crit-bg)}
.sa-tag--role{color:#9BE2F7;border-color:rgba(76,201,240,.3);background:var(--sa-accent-bg);text-transform:none;letter-spacing:.02em;font-family:inherit;font-size:12px}
.sa-tag--admin{color:var(--sa-accent);border-color:rgba(76,201,240,.55)}
.sa-badge{display:inline-block;font-family:var(--sa-mono);font-size:11px;line-height:16px;font-weight:600;letter-spacing:.08em;padding:0 5px;border-radius:4px;vertical-align:1px;white-space:nowrap}
.sa-badge--warn{color:var(--sa-warn);background:var(--sa-warn-bg);border:1px solid rgba(245,165,36,.35)}
.sa-badge--crit{color:var(--sa-crit);background:var(--sa-crit-bg);border:1px solid rgba(255,93,93,.35)}
.sa-state{display:inline-flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.sa-state--ok{color:var(--sa-ok)}.sa-state--crit{color:var(--sa-crit)}.sa-state--dim{color:var(--sa-text-2)}
.sa-code{font-size:12px;color:var(--sa-text-2);border:1px solid var(--sa-line-2);border-radius:4px;padding:1px 6px}

/* ── Bandeau État du parc ── */
.sa-fleet{margin:16px var(--sa-gutter) 0;background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:12px;overflow:hidden}
.sa-fleet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 0}
.sa-fleet-total{font-size:12px;color:var(--sa-text-2)}
.sa-fleet-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 14px 12px}
.sa-fleet-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.sa-fleet-n{font-size:34px;line-height:1;font-weight:600;letter-spacing:-.02em}
.sa-fleet-cell--ok .sa-fleet-n{color:var(--sa-ok)}
.sa-fleet-cell--warn .sa-fleet-n{color:var(--sa-warn)}
.sa-fleet-cell--crit .sa-fleet-n{color:var(--sa-crit)}
.sa-fleet-cell.is-zero .sa-fleet-n{color:var(--sa-text-3)}
.sa-fleet-cell.is-zero .sa-dot{background:var(--sa-text-3);box-shadow:none;animation:none}
.sa-fleet-lb{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sa-text-2);white-space:nowrap}
.sa-fleet-bar{display:flex;gap:3px;height:4px;margin:0 14px 14px}
.sa-fleet-seg{border-radius:2px;background:var(--sa-line-2)}
.sa-fleet-seg--ok{background:var(--sa-ok)}.sa-fleet-seg--warn{background:var(--sa-warn)}.sa-fleet-seg--crit{background:var(--sa-crit)}
.sa-fleet-kpis{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--sa-line)}
.sa-fleet-kpis .sa-kpi+.sa-kpi{border-left:1px solid var(--sa-line)}

.sa-kpis{display:grid;grid-template-columns:repeat(4,1fr);background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:10px;margin:14px 0 4px;overflow:hidden}
.sa-kpis .sa-kpi+.sa-kpi{border-left:1px solid var(--sa-line)}
.sa-kpi{padding:12px 8px;text-align:center;min-width:0}
.sa-kpi-val{font-size:22px;font-weight:600;line-height:1.1;color:var(--sa-text)}
.sa-kpi-of{font-size:13px;color:var(--sa-text-3);font-weight:500}
.sa-kpi-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sa-text-2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Cartes site (Pilotage) ── */
.sa-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:12px;padding:0 var(--sa-gutter)}
.sa-card{
  position:relative;display:flex;flex-direction:column;text-align:left;width:100%;cursor:pointer;
  background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:12px;color:var(--sa-text);
  padding:0;overflow:hidden;transition:border-color .15s,background .15s
}
.sa-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sa-line-2)}
.sa-card--ok::before{background:var(--sa-ok)}
.sa-card--warn::before{background:var(--sa-warn)}
.sa-card--crit::before{background:var(--sa-crit)}
.sa-card:hover{border-color:var(--sa-line-2);background:var(--sa-surface-2)}
.sa-card.is-sel{border-color:var(--sa-accent);box-shadow:0 0 0 1px var(--sa-accent) inset}
.sa-card-head{display:flex;align-items:center;gap:9px;padding:12px 14px 0 17px}
.sa-card-name{flex:1;min-width:0;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-card-body{display:flex;align-items:stretch;gap:14px;padding:12px 14px 12px 17px}
.sa-card-score{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:84px;padding-right:14px;border-right:1px solid var(--sa-line)}
.sa-card-score-n{font-size:40px;line-height:1;font-weight:600;letter-spacing:-.03em}
.sa-card-score .sa-label{font-size:11px;letter-spacing:.08em;white-space:nowrap}
.sa-card-metrics{flex:1;min-width:0;margin:0;display:flex;flex-direction:column;justify-content:center;gap:7px}
.sa-card-metrics>div{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sa-card-metrics dt{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--sa-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-card-metrics dd{margin:0;font-size:13px;white-space:nowrap;color:var(--sa-text)}
.sa-card-foot{padding:9px 14px 10px 17px;border-top:1px solid var(--sa-line);font-size:12px;line-height:1.5;color:var(--sa-text-2)}
.sa-card--crit .sa-card-foot{color:#FF8A8A}
.sa-card--warn .sa-card-foot{color:#F7BC5A}

/* ── Listes (Sites, Comptes, fiches) ── */
.sa-list{border-top:1px solid var(--sa-line);margin-top:4px}
.sa-row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:12px var(--sa-gutter);min-height:60px;background:transparent;color:var(--sa-text);
  border:none;border-bottom:1px solid var(--sa-line);cursor:pointer;position:relative
}
button.sa-row:hover{background:var(--sa-surface)}
.sa-row.is-sel{background:var(--sa-accent-bg)}
.sa-row.is-sel::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sa-accent)}
.sa-row.is-off{opacity:.55}
.sa-row--flat{cursor:default;min-height:52px}
.sa-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.sa-row-main--link{cursor:pointer}
.sa-row-main--link:hover .sa-row-name{color:var(--sa-accent)}
.sa-row-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-row-name--kv{font-weight:500;color:var(--sa-text-2);font-size:13px}
.sa-row-meta{font-size:12px;color:var(--sa-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-row-val{font-size:13px;text-align:right;min-width:0}
.sa-row-score{font-size:20px;font-weight:600;min-width:36px;text-align:right}
.sa-chev{color:var(--sa-text-3)}
.sa-chev svg{width:16px;height:16px}
.sa-list--kv .sa-row{min-height:48px}
.sa-avatar{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--sa-surface-3);border:1px solid var(--sa-line-2);font-family:var(--sa-mono);font-size:12px;font-weight:600;color:var(--sa-text-2)}
.sa-avatar--admin{color:var(--sa-accent);border-color:rgba(76,201,240,.5)}
.sa-role{color:var(--sa-text)}
.sa-role--metier{color:#9BE2F7}
.sa-role--admin{color:var(--sa-accent)}

/* ── Filtres Comptes ── */
.sa-filters{display:flex;flex-direction:column;gap:10px;padding:12px var(--sa-gutter) 0}
.sa-search{display:flex;align-items:center;gap:10px;background:var(--sa-surface);border:1px solid var(--sa-line-2);border-radius:10px;padding:0 12px;color:var(--sa-text-3);min-height:46px}
.sa-search:focus-within{border-color:var(--sa-accent);color:var(--sa-accent)}
.sa-search-input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--sa-text);font-size:16px;font-family:inherit;padding:10px 0}
.sa-search-input::placeholder{color:var(--sa-text-3)}
.sa-search-input::-webkit-search-cancel-button{filter:invert(.6)}
.sa-filter-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sa-filter-row .sa-input--mini{width:100%}
.sa-chips{
  display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;
  margin:0 calc(-1 * var(--sa-gutter));padding:2px var(--sa-gutter);
  scroll-padding-inline:var(--sa-gutter)
}
.sa-chips::-webkit-scrollbar{display:none}
.sa-chip{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;flex-shrink:0;background:transparent;color:var(--sa-text-2);border:1px solid var(--sa-line-2);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:500;cursor:pointer;min-height:34px}
.sa-chip .sa-num{font-size:12px;color:var(--sa-text-3)}
.sa-chip:hover{color:var(--sa-text)}
.sa-chip--on{background:var(--sa-accent-bg);border-color:rgba(76,201,240,.6);color:var(--sa-accent)}
.sa-chip--on .sa-num{color:var(--sa-accent)}
.sa-chip--warn .sa-num{color:var(--sa-warn)}

/* ── Journal ── */
.sa-feed{padding:0 0 8px}
.sa-feed-day{position:sticky;top:0;z-index:2;padding:16px var(--sa-gutter) 8px;background:var(--sa-bg);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-text-2);border-bottom:1px solid var(--sa-line)}
.sa-feed-day::first-letter{text-transform:uppercase}
.sa-feed-list{list-style:none;margin:0;padding:6px 0 4px;position:relative}
.sa-feed-list::before{content:'';position:absolute;top:18px;bottom:18px;left:calc(var(--sa-gutter) + 62px);width:1px;background:var(--sa-line-2)}
.sa-feed-item{display:grid;grid-template-columns:48px 30px minmax(0,1fr);align-items:center;column-gap:12px;padding:8px var(--sa-gutter);position:relative}
.sa-feed-time{font-size:12px;color:var(--sa-text-2)}
.sa-feed-ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--sa-surface);border:1px solid var(--sa-line-2);color:var(--sa-text-2);position:relative;z-index:1}
.sa-feed-ic svg{width:15px;height:15px}
.sa-feed-ic--add{color:var(--sa-ok);border-color:rgba(61,220,151,.45)}
.sa-feed-ic--upd{color:var(--sa-accent);border-color:rgba(76,201,240,.45)}
.sa-feed-ic--del{color:var(--sa-crit);border-color:rgba(255,93,93,.5)}
.sa-feed-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.sa-feed-title{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-feed-act{font-family:var(--sa-mono);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-left:6px}
.sa-feed-act--add{color:var(--sa-ok)}.sa-feed-act--upd{color:var(--sa-accent)}.sa-feed-act--del{color:var(--sa-crit)}
.sa-feed-meta{font-size:12px;color:var(--sa-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── Fiches ── */
.sa-detail{grid-area:main;display:none;min-width:0}
.sa-root--sheet .sa-detail{display:block;position:fixed;inset:0;z-index:70;background:var(--sa-bg)}
.sa-sheet{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--sa-bg);padding-bottom:calc(var(--sa-sab) + 32px)}
.sa-sheet-top{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:calc(var(--sa-sat) + 10px) calc(var(--sa-sar) + var(--sa-gutter)) 10px calc(var(--sa-sal) + var(--sa-gutter));
  background:var(--sa-bg);border-bottom:1px solid var(--sa-line)
}
.sa-sheet-back{padding:0 12px 0 8px}
.sa-sheet-back-lb{font-size:13px;font-weight:600}
.sa-sheet-close{display:none}
.sa-sheet-title{flex:1;min-width:0;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--sa-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sa-sheet-body{padding:16px calc(var(--sa-sar) + var(--sa-gutter)) 0 calc(var(--sa-sal) + var(--sa-gutter))}
.sa-detail-recent{--sa-gutter:20px;height:100%;overflow-y:auto;overscroll-behavior:contain;padding-bottom:24px}
.sa-detail-hint{display:flex;align-items:center;gap:12px;margin:18px 20px 0;padding:12px 14px;border:1px dashed var(--sa-line-2);border-radius:10px;color:var(--sa-text-2);font-size:13px;line-height:1.45}
.sa-detail-hint-ic{flex:0 0 auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--sa-line-2);display:flex;align-items:center;justify-content:center;color:var(--sa-text-3)}
.sa-detail-hint-ic svg{width:15px;height:15px}
.sa-detail-recent .sa-section-title{padding-top:20px}
.sa-feed--recent .sa-feed-day{background:var(--sa-surface)}

.sa-idcard{background:var(--sa-surface);border:1px solid var(--sa-line);border-radius:12px;padding:14px 16px 16px}
.sa-idcard-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.sa-idcard-top .sa-code{margin-left:auto}
.sa-idcard-name{font-weight:600;font-size:19px;margin-top:10px;line-height:1.25}
.sa-idcard-login{display:inline-flex;align-items:center;gap:10px;background:none;border:none;padding:4px 0;margin:6px 0 2px;cursor:pointer;font-size:22px;letter-spacing:.16em;color:var(--sa-accent)}
.sa-idcard-login svg{width:16px;height:16px;color:var(--sa-text-3)}
.sa-idcard-role{font-size:12px;color:var(--sa-text-2);margin-top:4px}
.sa-idcard-reasons{font-size:12px;color:var(--sa-text-2);margin-top:10px;padding-top:10px;border-top:1px solid var(--sa-line)}
.sa-result{background:var(--sa-accent-bg);border:1px solid rgba(76,201,240,.4);border-radius:12px;padding:14px;margin-top:10px}
.sa-result-val{display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;font-size:20px;letter-spacing:.14em;color:var(--sa-accent);padding:8px 0;cursor:pointer;font-weight:600;text-align:left}
.sa-result-val svg{width:16px;height:16px;color:var(--sa-text-2)}

.sa-form{display:flex;flex-direction:column;gap:12px}
.sa-form-row{display:flex;gap:10px}
.sa-form-row>.sa-fgroup{flex:1;min-width:0}
.sa-form-row--end{align-items:flex-end;margin-top:12px}
.sa-form-row--gap{margin-top:16px}
.sa-fgroup{display:flex;flex-direction:column;gap:6px}
.sa-form-row>.sa-fgroup--role{flex:0 0 132px}
.sa-input{background:var(--sa-surface);border:1px solid var(--sa-line-2);border-radius:8px;color:var(--sa-text);padding:11px 12px;font-size:16px;font-family:inherit;width:100%;min-height:46px}
.sa-input:focus{outline:none;border-color:var(--sa-accent);box-shadow:0 0 0 3px rgba(76,201,240,.15)}
.sa-input--mini{width:auto;min-height:38px;padding:6px 30px 6px 10px;font-size:13px;flex-shrink:0;max-width:100%}
select.sa-input{appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B96A3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
select.sa-input option{background:#12161B;color:#E6EDF3}
textarea.sa-input{min-height:100px;resize:vertical}
.sa-list--sheet{margin:0 calc(-1 * var(--sa-gutter))}
.sa-list--sheet .sa-row{gap:8px}

/* ── Pastille de retour au cockpit (affichée dans CONI) ── */
.sa-pill{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom, 0px) + 78px);z-index:90;width:46px;height:46px;border-radius:50%;background:#0B0D10;color:#4CC9F0;border:2px solid #4CC9F0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 12px rgba(76,201,240,.35)}
.sa-pill svg{width:22px;height:22px;display:block}

/* ── Petits écrans ── */
@media (max-width:389px){
  .sa-brand-sub{display:none}
  .sa-top-date{visibility:hidden}
  .sa-fleet-n{font-size:28px}
  .sa-card-score{min-width:70px}
  .sa-card-score-n{font-size:34px}
}
@media (max-width:519px){
  .sa-brand-sub,.sa-hide-sm{display:none}
  .sa-kpi-lbl{letter-spacing:.06em}
}

/* ── Bureau (>= 1024 px) : onglets à gauche, liste au centre, fiche à droite ── */
@media (min-width:1024px){
  .sa-root{
    --sa-gutter:24px;
    grid-template-columns:208px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"top top" "nav main";
  }
  .sa-root--detail{
    grid-template-columns:208px minmax(0,1fr) minmax(400px,32%);
    grid-template-areas:"top top top" "nav main detail";
  }
  .sa-top{padding-top:calc(var(--sa-sat) + 12px);padding-bottom:12px}
  .sa-brand-sub{display:inline}
  .sa-tabbar{
    display:flex;flex-direction:column;gap:2px;padding:16px 10px;
    border-top:none;border-right:1px solid var(--sa-line);background:var(--sa-bg)
  }
  .sa-tab{flex-direction:row;justify-content:flex-start;gap:12px;min-height:42px;padding:0 12px;border-radius:8px}
  .sa-tab-lb{font-size:13px;font-weight:500;letter-spacing:0}
  .sa-tab-ic svg{width:18px;height:18px}
  .sa-tab:hover{background:var(--sa-surface);color:var(--sa-text)}
  .sa-tab--on{background:var(--sa-surface-2);color:var(--sa-text)}
  .sa-tab--on .sa-tab-ic{color:var(--sa-accent)}
  .sa-tab--on::before{top:10px;bottom:10px;left:-10px;right:auto;width:3px;height:auto;border-radius:0 2px 2px 0}
  .sa-main{padding-bottom:40px}
  .sa-root:not(.sa-root--detail) .sa-main-in{max-width:980px}
  .sa-root--detail .sa-detail,.sa-root--sheet .sa-detail{
    display:block;grid-area:detail;position:relative;inset:auto;z-index:auto;
    border-left:1px solid var(--sa-line);background:var(--sa-surface);overflow:hidden
  }
  .sa-sheet{background:var(--sa-surface);padding-bottom:32px}
  .sa-sheet-top{padding:12px 20px;background:var(--sa-surface)}
  .sa-sheet-back{display:none}
  .sa-sheet-close{display:inline-flex}
  .sa-sheet-body{padding:18px 20px 0}
  .sa-list--sheet{margin:0 -20px}
  .sa-list--sheet .sa-row{padding-left:20px;padding-right:20px}
  .sa-idcard,.sa-kpis{background-color:var(--sa-bg)}
  .sa-sheet .sa-input{background-color:var(--sa-bg)}
  .sa-filters{flex-direction:row;flex-wrap:wrap;align-items:center}
  .sa-search{flex:1 1 280px}
  .sa-filter-row{display:flex;flex:0 0 auto}
  .sa-filter-row .sa-input--mini{width:auto;min-height:46px}
  .sa-chips{flex-basis:100%;margin:0;padding:2px 0}
  .sa-fleet-counts{padding:12px 18px 14px}
  .sa-fleet-head{padding:14px 18px 0}
  .sa-fleet-bar{margin:0 18px 16px}
  .sa-fleet-n{font-size:40px}
  .sa-row{min-height:56px}
}
@media (min-width:1440px){
  .sa-cards{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
}