/* ============================================================
   SOS-Ouman — Back-office · Rubrique Imports / HelloAsso
   Couche de finition par-dessus Bulma 1.x
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Palette de marque (override des variables Bulma 1.x) ---- */
  --bulma-family-primary: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --bulma-family-secondary: 'Hanken Grotesk', system-ui, sans-serif;

  /* Primary = teal de solidarité (action), distinct du bleu "info" */
  --bulma-primary-h: 176deg;
  --bulma-primary-s: 58%;
  --bulma-primary-l: 35%;

  --bulma-link-h: 176deg;
  --bulma-link-s: 58%;
  --bulma-link-l: 35%;

  --bulma-radius-small: 7px;
  --bulma-radius: 10px;
  --bulma-radius-large: 14px;

  /* Tokens maison */
  --so-sidebar-bg: hsl(192 26% 13%);
  --so-sidebar-bg-soft: hsl(192 22% 17%);
  --so-sidebar-text: hsl(192 14% 72%);
  --so-sidebar-text-dim: hsl(192 12% 52%);
  --so-sidebar-active: hsl(176 58% 42%);
  --so-canvas: hsl(204 22% 96%);
  --so-ink: hsl(206 24% 16%);
  --so-ink-soft: hsl(206 12% 42%);
  --so-line: hsl(206 18% 89%);
  --so-card-shadow: 0 1px 2px hsl(206 30% 20% / 0.05), 0 4px 16px hsl(206 30% 20% / 0.05);
  --so-card-shadow-hover: 0 2px 6px hsl(206 30% 20% / 0.08), 0 10px 28px hsl(206 30% 20% / 0.10);
  --so-sidebar-w: 256px;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html, body {
  background: var(--so-canvas);
  color: var(--so-ink);
  font-family: var(--bulma-family-primary);
  min-height: 100vh;
}

body { font-size: 15px; }

.tnum { font-variant-numeric: tabular-nums; }

/* ============================================================
   LAYOUT — coquille (sidebar + zone de contenu)
   ============================================================ */
.so-app { display: flex; min-height: 100vh; }

.so-sidebar {
  width: var(--so-sidebar-w);
  flex: 0 0 var(--so-sidebar-w);
  background: var(--so-sidebar-bg);
  color: var(--so-sidebar-text);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.so-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 1.15rem 1.25rem;
  border-bottom: 1px solid hsl(192 22% 22%);
}
.so-brand__mark {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--so-sidebar-active), hsl(176 58% 30%));
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 0.92rem;
  letter-spacing: -0.03em;
  box-shadow: inset 0 1px 0 hsl(176 60% 60% / 0.5);
}
.so-brand__name { color: #fff; font-weight: 800; font-size: 1.02rem; line-height: 1.05; letter-spacing: -0.01em; }
.so-brand__sub { color: var(--so-sidebar-text-dim); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.02em; }

.so-nav { padding: 0.85rem 0.7rem; flex: 1; }
.so-nav__label {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--so-sidebar-text-dim);
  padding: 0.9rem 0.6rem 0.4rem;
}
.so-nav__item {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  color: var(--so-sidebar-text);
  font-weight: 500; font-size: 0.9rem;
  text-decoration: none;
  transition: background 0.13s ease, color 0.13s ease;
  position: relative;
}
.so-nav__item .fa-fw { color: var(--so-sidebar-text-dim); width: 1.1rem; font-size: 0.92rem; transition: color 0.13s; }
.so-nav__item:hover { background: var(--so-sidebar-bg-soft); color: #fff; }
.so-nav__item:hover .fa-fw { color: var(--so-sidebar-text); }
.so-nav__item.is-active { background: hsl(176 58% 42% / 0.16); color: #fff; }
.so-nav__item.is-active .fa-fw { color: var(--so-sidebar-active); }
.so-nav__item.is-active::before {
  content: ''; position: absolute; left: -0.7rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 1.35rem; border-radius: 0 3px 3px 0; background: var(--so-sidebar-active);
}
.so-nav__sub { margin-left: 1.85rem; }
.so-nav__sub .so-nav__item { padding: 0.4rem 0.7rem; font-size: 0.86rem; }
.so-nav__badge {
  margin-left: auto; background: hsl(48 92% 56%); color: hsl(40 60% 18%);
  font-size: 0.66rem; font-weight: 800; padding: 0.05rem 0.42rem; border-radius: 999px;
}

.so-sidebar__foot {
  padding: 0.9rem 1rem; border-top: 1px solid hsl(192 22% 22%);
  display: flex; align-items: center; gap: 0.65rem;
}
.so-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px;
  background: hsl(176 40% 30%); color: #fff; display: grid; place-items: center;
  font-weight: 700; font-size: 0.78rem;
}
.so-sidebar__foot .nm { color: #fff; font-size: 0.82rem; font-weight: 600; line-height: 1.1; }
.so-sidebar__foot .rl { color: var(--so-sidebar-text-dim); font-size: 0.7rem; }

/* ---- Zone de contenu ---- */
.so-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.so-topbar {
  background: #fff;
  border-bottom: 1px solid var(--so-line);
  padding: 0.7rem 2rem;
  display: flex; align-items: center; gap: 1rem;
  position: sticky; top: 0; z-index: 20;
}
.so-topbar__spacer { flex: 1; }
.so-topbar__action { display: flex; align-items: center; gap: 0.6rem; }
/* Topbar masquée sur desktop quand elle n'a aucune action (le burger est mobile-only). */
@media (min-width: 1024px) {
  .so-topbar:not(:has(.so-topbar__action > *)) { display: none; }
}

/* Fil d'Ariane désormais en haut de la page (dans le contenu), pas dans la nav. */
.so-breadcrumb { margin: 0 0 1.25rem; font-size: 0.85rem; }
.so-breadcrumb a { color: var(--so-ink-soft); }
.so-breadcrumb li.is-active a { color: var(--so-ink); font-weight: 600; }
.so-env {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  color: hsl(206 12% 50%); background: var(--so-canvas);
  border: 1px solid var(--so-line); padding: 0.2rem 0.55rem; border-radius: 999px;
}

.so-content { flex: 1 0 auto; padding: 2rem 2rem 3.5rem; max-width: 1240px; width: 100%; margin: 0 auto; }

/* Footer collé en bas de page (la zone de contenu grandit pour le pousser) */
.so-main > .footer {
  flex-shrink: 0;
  background: transparent;
  border-top: 1px solid var(--so-line);
  padding: 1.1rem 2rem;
  color: var(--so-ink-soft);
  font-size: 0.85rem;
}

.so-pagehead { margin-bottom: 1.6rem; }
.so-pagehead h1 {
  font-size: 1.72rem; font-weight: 800; letter-spacing: -0.02em; color: var(--so-ink);
  line-height: 1.1; margin: 0;
}
.so-pagehead p { color: var(--so-ink-soft); margin-top: 0.35rem; font-size: 0.96rem; max-width: 60ch; }

/* ============================================================
   COMPOSANTS — finition
   ============================================================ */
.box {
  box-shadow: var(--so-card-shadow);
  border: 1px solid var(--so-line);
  border-radius: var(--bulma-radius-large);
}

.so-section-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--so-ink-soft); margin-bottom: 0.85rem; display: flex; align-items: center; gap: 0.5rem;
}

/* Bandeau état de connexion */
.so-connbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.95rem 1.25rem; border-radius: var(--bulma-radius);
  border: 1px solid hsl(145 50% 80%); background: hsl(145 55% 96%);
}
.so-connbar.is-ok { border-color: hsl(145 45% 78%); background: hsl(145 55% 96%); }
.so-connbar__dot {
  width: 11px; height: 11px; border-radius: 50%; background: hsl(145 60% 42%);
  box-shadow: 0 0 0 4px hsl(145 60% 42% / 0.18); flex: 0 0 11px;
}
.so-connbar__txt { flex: 1; }
.so-connbar__txt strong { color: hsl(145 50% 22%); font-weight: 700; }
.so-connbar__txt .sub { color: hsl(145 25% 34%); font-size: 0.85rem; }

/* Cartes statistiques */
.so-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.so-stat {
  background: #fff; border: 1px solid var(--so-line); border-radius: var(--bulma-radius-large);
  padding: 1.15rem 1.25rem 0.9rem; box-shadow: var(--so-card-shadow);
  transition: box-shadow 0.16s ease, transform 0.16s ease; position: relative; overflow: hidden;
}
.so-stat:hover { box-shadow: var(--so-card-shadow-hover); transform: translateY(-2px); }
.so-stat__top { display: flex; align-items: center; justify-content: space-between; }
.so-stat__icon {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1.05rem;
}
.so-stat__icon.t-don { background: hsl(330 70% 95%); color: hsl(330 62% 48%); }
.so-stat__icon.t-bill { background: hsl(265 60% 95%); color: hsl(265 52% 52%); }
.so-stat__icon.t-vente { background: hsl(28 80% 93%); color: hsl(28 78% 46%); }
.so-stat__icon.t-todo { background: hsl(48 90% 90%); color: hsl(40 80% 40%); }
.so-stat__val { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 0.85rem; color: var(--so-ink); }
.so-stat__label { color: var(--so-ink-soft); font-size: 0.9rem; font-weight: 600; margin-top: 0.2rem; }
.so-stat__foot { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px solid var(--so-line); }
.so-stat__foot a { font-size: 0.82rem; font-weight: 600; color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); text-decoration: none; }
.so-stat__foot a:hover { text-decoration: underline; }
.so-stat.is-warn { background: hsl(48 95% 97%); border-color: hsl(48 80% 80%); }

/* Bouton d'action principal centré */
.so-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 0.5rem 0; }
.button.is-primary { font-weight: 700; }
.button.so-cta {
  font-size: 1.12rem; font-weight: 700; padding: 1.45rem 2.4rem; height: auto;
  border-radius: 12px; box-shadow: 0 6px 18px hsl(var(--bulma-primary-h) var(--bulma-primary-s) 30% / 0.30);
}
.button.so-cta .icon { margin-right: 0.2rem; }
.so-cta-hint { color: var(--so-ink-soft); font-size: 0.85rem; }

/* Tables — finition DataTables-like */
.so-tablecard { background: #fff; border: 1px solid var(--so-line); border-radius: var(--bulma-radius-large); box-shadow: var(--so-card-shadow); overflow: hidden; }
.so-toolbar { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; border-bottom: 1px solid var(--so-line); flex-wrap: wrap; }
.so-toolbar .field { margin: 0; }
.so-toolbar__spacer { flex: 1; }
table.table { width: 100%; }
table.table thead th {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--so-ink-soft);
  font-weight: 700; border-bottom: 1px solid var(--so-line); padding: 0.7rem 1.1rem; background: hsl(204 22% 98%);
  white-space: nowrap;
}
table.table thead th.sortable { cursor: pointer; }
table.table thead th.sortable .fa-sort { opacity: 0.4; margin-left: 0.3rem; font-size: 0.75rem; }
table.table tbody td { padding: 0.8rem 1.1rem; vertical-align: middle; border-color: var(--so-line); }
table.table tbody tr { transition: background 0.1s; }
table.table tbody tr:hover { background: hsl(204 30% 98%); }
table.table tbody tr.is-clickable { cursor: pointer; }
.so-table-foot { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1.1rem; border-top: 1px solid var(--so-line); font-size: 0.85rem; color: var(--so-ink-soft); flex-wrap: wrap; gap: 0.5rem; }

.so-formname { font-weight: 600; color: var(--so-ink); }
.so-sub { color: var(--so-ink-soft); font-size: 0.82rem; }
.so-natpill { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.85rem; white-space: nowrap; }
.so-natpill .ic { font-size: 0.85rem; }

.tag { font-weight: 600; }
.tag.is-rounded { padding-left: 0.8em; padding-right: 0.8em; }

a.so-extlink { color: var(--so-ink-soft); font-weight: 600; font-size: 0.85rem; text-decoration: none; white-space: nowrap; }
a.so-extlink:hover { color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); }

/* Tabs finition */
.tabs.so-tabs ul { border-bottom-color: var(--so-line); }
.tabs.so-tabs li a { border-bottom-width: 2px; color: var(--so-ink-soft); font-weight: 600; padding-bottom: 0.7rem; }
.tabs.so-tabs li.is-active a { color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); }
.tabs.so-tabs li a .count { margin-left: 0.4rem; background: var(--so-canvas); color: var(--so-ink-soft); font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 999px; }
.tabs.so-tabs li.is-active a .count { background: hsl(var(--bulma-primary-h) var(--bulma-primary-s) 92%); color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) 32%); }

/* Mini historique */
.so-mini-run { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--so-line); }
.so-mini-run:last-child { border-bottom: 0; }
.so-mini-run .dt { font-weight: 600; min-width: 165px; }
.so-mini-run .meta { color: var(--so-ink-soft); font-size: 0.88rem; flex: 1; }

/* ============================================================
   ASSISTANT (Écran C) — stepper
   ============================================================ */
.so-stepper { display: flex; align-items: center; gap: 0; margin-bottom: 1.8rem; }
.so-step { display: flex; align-items: center; gap: 0.65rem; }
.so-step__num {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 0.9rem; background: #fff; border: 2px solid var(--so-line); color: var(--so-ink-soft);
  transition: all 0.2s; flex: 0 0 30px;
}
.so-step__txt { font-weight: 600; color: var(--so-ink-soft); font-size: 0.92rem; transition: color 0.2s; }
.so-step__txt small { display: block; font-weight: 500; font-size: 0.74rem; color: var(--so-ink-soft); opacity: 0.8; }
.so-step.is-active .so-step__num { background: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); border-color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); color: #fff; }
.so-step.is-active .so-step__txt { color: var(--so-ink); }
.so-step.is-done .so-step__num { background: hsl(145 60% 42%); border-color: hsl(145 60% 42%); color: #fff; }
.so-step.is-done .so-step__txt { color: var(--so-ink); }
.so-step__line { flex: 1; height: 2px; background: var(--so-line); margin: 0 1rem; min-width: 36px; }
.so-step__line.is-done { background: hsl(145 60% 42%); }

.so-radio-card {
  display: flex; gap: 0.85rem; align-items: flex-start; padding: 1rem 1.15rem; border: 1.5px solid var(--so-line);
  border-radius: var(--bulma-radius); cursor: pointer; transition: all 0.14s; background: #fff;
}
.so-radio-card:hover { border-color: hsl(var(--bulma-primary-h) 30% 70%); }
.so-radio-card.is-selected { border-color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); background: hsl(var(--bulma-primary-h) 40% 98%); box-shadow: 0 0 0 3px hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l) / 0.12); }
.so-radio-card input { margin-top: 0.2rem; accent-color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); }
.so-radio-card .rc-title { font-weight: 600; color: var(--so-ink); }
.so-radio-card .rc-sub { color: var(--so-ink-soft); font-size: 0.85rem; margin-top: 0.15rem; }

.so-natcheck { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.so-natcheck label {
  display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 1rem; border: 1.5px solid var(--so-line);
  border-radius: 999px; cursor: pointer; font-weight: 600; transition: all 0.13s; user-select: none;
}
.so-natcheck label.is-checked { border-color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) 55%); background: hsl(var(--bulma-primary-h) 40% 97%); }
.so-natcheck input { accent-color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); }

/* Encart "sans risque" */
.so-safe {
  display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.85rem 1.1rem; border-radius: var(--bulma-radius);
  background: hsl(204 70% 96%); border: 1px solid hsl(204 60% 86%); color: hsl(204 45% 28%); font-size: 0.9rem;
}
.so-safe .icon { color: hsl(204 65% 45%); margin-top: 0.1rem; }

.so-analysis-num { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--so-ink); }

.so-success-panel {
  border: 1px solid hsl(145 50% 78%); background: hsl(145 55% 97%); border-radius: var(--bulma-radius-large);
  padding: 2rem; text-align: center;
}
.so-success-panel .so-check {
  width: 64px; height: 64px; border-radius: 50%; background: hsl(145 60% 42%); color: #fff;
  display: grid; place-items: center; font-size: 1.8rem; margin: 0 auto 1rem;
  box-shadow: 0 8px 22px hsl(145 60% 35% / 0.30);
}

/* Toast */
.so-toast-wrap { position: fixed; top: 1.1rem; right: 1.1rem; z-index: 100; display: flex; flex-direction: column; gap: 0.6rem; }
.so-toast {
  display: flex; align-items: center; gap: 0.7rem; background: var(--so-ink); color: #fff;
  padding: 0.85rem 1.1rem; border-radius: 10px; box-shadow: 0 10px 30px hsl(206 30% 15% / 0.30);
  font-weight: 600; font-size: 0.9rem; min-width: 280px;
  animation: so-toast-in 0.3s cubic-bezier(0.2,0.8,0.2,1);
}
.so-toast.is-success { background: hsl(145 55% 30%); }
.so-toast.is-error { background: hsl(2 65% 42%); }
.so-toast .icon { font-size: 1rem; }
@keyframes so-toast-in { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* Skeleton / utilitaires */
.so-spin { animation: so-spin 0.9s linear infinite; }
@keyframes so-spin { to { transform: rotate(360deg); } }

.fade-in { animation: so-fade 0.35s ease; }
@keyframes so-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ============================================================
   NAVIGATION VERTICALE RESPONSIVE — tiroir + backdrop (guideline VIIZIA §3/§5)
   ============================================================ */
/* Backdrop : voile cliquable sous le tiroir, masqué au-dessus du breakpoint. */
.so-backdrop {
  position: fixed; inset: 0; z-index: 40;
  background: hsl(192 26% 10% / 0.45);
  border: 0; padding: 0; margin: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 1024px) {
  .so-backdrop { display: none !important; }
}
/* Verrou de défilement du fond quand le tiroir est ouvert. */
body.so-noscroll { overflow: hidden; }

/* Responsive — tablette / mobile (≤ 1023px) */
@media (max-width: 1023px) {
  /* Anti-débordement horizontal global (point sensible des guidelines). */
  html, body { max-width: 100%; overflow-x: clip; }
  /* Shell en bloc : la sidebar passe en position fixed (hors flux),
     le contenu occupe 100 % de la largeur. */
  .so-app { display: block; }
  .so-main { min-width: 0; max-width: 100%; }
  .so-content { padding: 1.3rem; max-width: 100%; overflow-x: clip; }

  /* Topbar mobile : fond de marque + logo (comme la zone de marque de la sidebar). */
  .so-topbar {
    background: var(--so-sidebar-bg);
    border-bottom-color: hsl(192 22% 22%);
  }
  .so-topbar__brand { display: flex; align-items: center; text-decoration: none; }
  .so-topbar__brand img { max-height: 34px; max-width: 160px; width: auto; height: auto; display: block; }
  .so-topbar__brandtext { color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }
  #so-burger {
    background: transparent; color: #fff; border-color: transparent; box-shadow: none;
  }
  #so-burger:hover, #so-burger:focus { background: var(--so-sidebar-bg-soft); color: #fff; }

  /* Tiroir */
  .so-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 50;
    width: min(288px, 86vw);
    transform: translateX(-103%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px hsl(192 26% 8% / 0.35);
  }
  .so-sidebar.is-open { transform: none; }

  .so-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
  .so-stats { grid-template-columns: 1fr; }
}

/* ============================================================
   AUTHENTIFICATION (login / inscription) — carte centrée
   ============================================================ */
.so-auth {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1rem; padding: 2rem 1rem;
}
.so-auth__card {
  width: 100%; max-width: 430px; background: #fff;
  border: 1px solid var(--so-line); border-radius: var(--bulma-radius-large);
  box-shadow: var(--so-card-shadow-hover); padding: 2rem 2rem 2.2rem;
}
.so-auth__brand { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.5rem; }
.so-auth__brand--logo { justify-content: center; }
.so-auth__logo { max-height: 96px; max-width: 100%; width: auto; height: auto; display: block; }
.so-auth__foot { color: var(--so-ink-soft); font-size: 0.82rem; }
.so-auth .button.is-success,
.so-auth .button.is-primary { width: 100%; font-weight: 700; }
.so-auth h1 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; color: var(--so-ink); margin-bottom: 1.1rem; }

/* Bandeau de connexion — état erreur */
.so-connbar.is-ko { border-color: hsl(2 60% 82%); background: hsl(2 65% 97%); }
.so-connbar.is-ko .so-connbar__dot { background: hsl(2 65% 50%); box-shadow: 0 0 0 4px hsl(2 65% 50% / 0.18); }
.so-connbar.is-ko .so-connbar__txt strong { color: hsl(2 60% 38%); }
.so-connbar.is-ko .so-connbar__txt .sub { color: hsl(2 35% 40%); }

/* ============================================================
   TABLEAUX RESPONSIVE — mode « cartes empilées » (guideline §4)
   Activé par la classe .has-mobile-cards sur le conteneur du tableau.
   ============================================================ */
@media screen and (max-width: 768px) {
  /* Gardes anti-débordement + cartes pleine largeur : on « dé-tableau-ise »
     table / tbody / tr en blocs 100 % (sinon la carte ne s'étire pas). */
  .has-mobile-cards { width: 100%; max-width: 100%; }
  .has-mobile-cards .table-container { overflow-x: visible; }
  .has-mobile-cards table {
    display: block; width: 100% !important; min-width: 0 !important; max-width: 100%;
  }
  .has-mobile-cards tbody { display: block; width: 100%; }
  .has-mobile-cards td, .has-mobile-cards th { min-width: 0 !important; max-width: 100% !important; }

  .has-mobile-cards thead { display: none !important; }
  .has-mobile-cards tbody tr {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--so-line);
    border-radius: 10px;
    background: #fff;
  }
  .has-mobile-cards tbody td {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    border: none;
    padding: 0.4rem 0;
    min-width: 0;
    text-align: right;
    white-space: normal;
  }
  .has-mobile-cards tbody td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    max-width: 10rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--so-ink-soft);
    text-align: left;
  }
  .has-mobile-cards tbody td:empty { display: none; }
  /* Colonne actions (ou cellule sans libellé) : pas de label, contenu pleine largeur. */
  .has-mobile-cards tbody td[data-label=""]::before { display: none; }
  .has-mobile-cards tbody td[data-label=""] { justify-content: flex-end; }
  .has-mobile-cards tbody td .buttons { justify-content: flex-end; margin: 0; }
}

/* Ligne total + en-têtes triables */
.so-total-row td { border-top: 2px solid var(--so-line); background: hsl(204 22% 98%); }
.so-total-row strong { color: var(--so-ink); }
table.table thead th.sortable i { margin-left: 0.35rem; font-size: 0.72rem; opacity: 0.45; }
table.table thead th.sortable i.fa-sort-up,
table.table thead th.sortable i.fa-sort-down { opacity: 1; color: hsl(var(--bulma-primary-h) var(--bulma-primary-s) var(--bulma-primary-l)); }
@media screen and (max-width: 768px) {
  .has-mobile-cards tfoot .so-total-row { display: block; border-radius: 10px; background: hsl(204 22% 97%); padding: 0.6rem 1rem; }
  .has-mobile-cards tfoot .so-total-row td,
  .has-mobile-cards tfoot .so-total-row th { display: block; text-align: right; border: 0; padding: 0.12rem 0; }
  .has-mobile-cards tfoot .so-total-row td:empty,
  .has-mobile-cards tfoot .so-total-row th:empty { display: none; }
}

/* DataTables : le tableau tient à 100 % de l'espace dispo (pas de scroll horizontal).
   table-layout: fixed répartit la largeur ; le contenu long revient à la ligne. */
@media (min-width: 769px) {
  .table-container.has-mobile-cards table.dataTable {
    width: 100% !important;
    table-layout: fixed;
  }
  .table-container.has-mobile-cards table.dataTable td,
  .table-container.has-mobile-cards table.dataTable th {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    vertical-align: top;
  }
}
/* Mobile : conteneur sans scroll (cartes pleine largeur). */
@media screen and (max-width: 768px) {
  .table-container.has-mobile-cards { overflow: visible; }
}

/* Matrice des droits utilisateurs (lecture seule) */
.so-perm-group td {
  background: var(--so-canvas);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--so-ink-soft);
}
.so-perm-cell { cursor: default; }
.so-perm-cell input {
  width: 18px; height: 18px; vertical-align: middle;
  accent-color: hsl(176 58% 42%); opacity: 1; cursor: default;
}
@media screen and (max-width: 768px) {
  .has-mobile-cards .so-perm-group td { justify-content: flex-start; font-weight: 800; }
}

/* Pages de listes larges : la zone de contenu prend toute la largeur disponible */
.so-content.is-wide { max-width: none; }

/* Tri générique des tableaux statiques (.js-sortable) — guideline : toutes les colonnes triables */
table.js-sortable thead th:not([data-no-sort]) {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
table.js-sortable thead th:not([data-no-sort])::after {
  content: '\2195';
  opacity: 0.3;
  margin-left: 0.4em;
  font-size: 0.8em;
}
table.js-sortable thead th.is-sorted-asc::after { content: '\2191'; opacity: 0.85; }
table.js-sortable thead th.is-sorted-desc::after { content: '\2193'; opacity: 0.85; }

/* Logo de l'organisation dans la zone de marque de la sidebar */
.so-brand__logo {
  max-height: 56px;
  max-width: 150px;
  width: auto;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto; /* centre le logo dans la zone de marque (conteneur flex) */
}