/* ==========================================================================
   Globalsecure — Design System "Clair"
   Socle visuel partagé par les 4 espaces. Surcouche Bootstrap 5 + Inter.
   ========================================================================== */
:root{
  --gs-bg:#f7f8fc;
  --gs-surface:#ffffff;
  --gs-surface-2:#fbfbfe;
  --gs-ink:#1a1d2b;
  --gs-ink-2:#3a4055;
  --gs-muted:#737a91;
  --gs-faint:#9aa1b5;
  --gs-border:#ecedf4;
  --gs-border-2:#e3e5f0;

  --gs-primary:#4f46e5;
  --gs-primary-600:#4338ca;
  --gs-primary-tint:#eef0fe;
  --gs-primary-ink:#ffffff;
  --gs-accent:#f59e0b;

  --gs-success:#0ea36b; --gs-success-bg:#e3f7ee;
  --gs-warning:#d97a06; --gs-warning-bg:#fdf2dd;
  --gs-danger:#e23b3b;  --gs-danger-bg:#fdeaea;
  --gs-info:#6366f1;    --gs-info-bg:#eef0fe;
  --gs-violet:#a855f7;  --gs-violet-bg:#f6edfe;

  --gs-r:11px;
  --gs-r-lg:18px;
  --gs-r-sm:8px;
  --gs-shadow-sm:0 1px 2px rgba(26,29,43,.05);
  --gs-shadow:0 2px 8px -2px rgba(26,29,43,.08), 0 1px 2px rgba(26,29,43,.05);
  --gs-shadow-lg:0 18px 48px -16px rgba(40,40,90,.28);
  --gs-shadow-primary:0 8px 20px -6px rgba(79,70,229,.45);

  /* Bootstrap overrides */
  --bs-primary:#4f46e5;
  --bs-primary-rgb:79,70,229;
  --bs-body-color:#1a1d2b;
  --bs-body-bg:#f7f8fc;
  --bs-body-font-family:'Inter',system-ui,-apple-system,sans-serif;
  --bs-border-color:#ecedf4;
  --bs-border-radius:11px;
}

*{ -webkit-font-smoothing:antialiased; }
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--gs-bg);
  color:var(--gs-ink);
  font-size:14px;
}
.num{ font-variant-numeric:tabular-nums; }
a{ text-decoration:none; }

/* ============ APP SHELL ============ */
.gs-app{ display:grid; grid-template-columns:248px 1fr; min-height:100vh; }
.gs-app.collapsed{ grid-template-columns:72px 1fr; }

/* ----- Sidebar ----- */
.gs-side{
  background:var(--gs-surface);
  border-right:1px solid var(--gs-border);
  padding:18px 14px;
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.gs-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 16px; }
.gs-brand .mark{
  width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center;
  background:linear-gradient(135deg,#6366f1,#a855f7); color:#fff;
  box-shadow:var(--gs-shadow-primary);
}
.gs-brand .mark svg{ width:19px; height:19px; }
.gs-brand b{ font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--gs-ink); white-space:nowrap; }
.gs-brand b span{ color:var(--gs-primary); }
.gs-brand .tier{ font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--gs-violet); background:var(--gs-violet-bg); border-radius:5px; padding:2px 6px; margin-top:3px; display:inline-block; }

.gs-nav-sec{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gs-faint); padding:16px 11px 6px; }
.gs-nav{
  display:flex; align-items:center; gap:12px; padding:9px 11px; border-radius:var(--gs-r);
  font-size:13.5px; font-weight:500; color:var(--gs-muted); cursor:pointer; border:none; background:none;
  width:100%; text-align:left; transition:background .12s,color .12s;
}
.gs-nav svg{ width:18px; height:18px; flex:none; opacity:.9; }
.gs-nav:hover{ background:var(--gs-surface-2); color:var(--gs-ink); }
.gs-nav.active{ background:var(--gs-primary-tint); color:var(--gs-primary); font-weight:600; }
.gs-nav.active svg{ opacity:1; }
.gs-nav .gs-pill-badge{ margin-left:auto; font-size:10.5px; font-weight:700; color:#fff;
  background:var(--gs-danger); border-radius:999px; padding:1px 7px; min-width:20px; text-align:center; }
.gs-nav .gs-pill-badge.warn{ background:var(--gs-warning); }
.gs-side-foot{ margin-top:auto; padding-top:14px; border-top:1px solid var(--gs-border); }
.collapsed .gs-nav span, .collapsed .gs-nav-sec, .collapsed .gs-brand b, .collapsed .gs-side-foot .who{ display:none; }
.collapsed .gs-nav{ justify-content:center; }
.collapsed .gs-brand{ justify-content:center; }

/* ----- Main / Topbar ----- */
.gs-main{ display:flex; flex-direction:column; min-width:0; }
.gs-top{
  height:64px; display:flex; align-items:center; gap:16px; padding:0 28px;
  border-bottom:1px solid var(--gs-border); background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(8px); position:sticky; top:0; z-index:20;
}
.gs-search{ flex:1; max-width:380px; display:flex; align-items:center; gap:9px;
  background:var(--gs-surface-2); border:1px solid var(--gs-border); border-radius:var(--gs-r);
  padding:9px 14px; color:var(--gs-faint); font-size:13px; }
.gs-search svg{ width:16px; height:16px; flex:none; }
.gs-search input{ border:none; background:none; outline:none; flex:1; color:var(--gs-ink); font-size:13px; }
.gs-iconbtn{ width:38px; height:38px; border-radius:var(--gs-r); display:grid; place-items:center;
  color:var(--gs-muted); border:1px solid var(--gs-border); background:var(--gs-surface); position:relative; cursor:pointer; }
.gs-iconbtn:hover{ background:var(--gs-surface-2); color:var(--gs-ink); }
.gs-iconbtn svg{ width:18px; height:18px; }
.gs-iconbtn .dot{ position:absolute; top:7px; right:8px; width:8px; height:8px; border-radius:50%;
  background:var(--gs-danger); box-shadow:0 0 0 2px var(--gs-surface); }
.gs-user{ display:flex; align-items:center; gap:11px; cursor:pointer; padding-left:6px; }
.gs-user .info{ text-align:right; line-height:1.2; }
.gs-user .info b{ font-size:13px; font-weight:600; display:block; }
.gs-user .info small{ font-size:11px; color:var(--gs-muted); }

.gs-avatar{ border-radius:50%; display:grid; place-items:center; font-weight:700; color:#fff; flex:none;
  background:linear-gradient(135deg,#6366f1,#a855f7); width:36px; height:36px; font-size:13px; }
.gs-avatar.sm{ width:30px; height:30px; font-size:11px; }
.gs-avatar.lg{ width:48px; height:48px; font-size:16px; }
.gs-avatar.c1{ background:linear-gradient(135deg,#0ea36b,#14b8a6); }
.gs-avatar.c2{ background:linear-gradient(135deg,#f59e0b,#ef4444); }
.gs-avatar.c3{ background:linear-gradient(135deg,#3b82f6,#06b6d4); }
.gs-avatar.c4{ background:linear-gradient(135deg,#a855f7,#ec4899); }

/* ----- Content ----- */
.gs-content{ padding:26px 28px 56px; display:flex; flex-direction:column; gap:22px; flex:1 1 auto; }
/* Footer collé en bas même sur les pages courtes (la zone contenu remplit la hauteur). */
.gs-content > footer{ margin-top:auto; }
.gs-pagehead{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.gs-pagehead h1{ font-size:23px; font-weight:700; letter-spacing:-.02em; margin:0; }
.gs-pagehead .sub{ font-size:13px; color:var(--gs-muted); margin-top:4px; }
.gs-pagehead .spacer{ flex:1; }
.gs-breadcrumb{ font-size:12.5px; color:var(--gs-muted); margin-bottom:2px; display:flex; gap:7px; align-items:center; }
.gs-breadcrumb a{ color:var(--gs-muted); }
.gs-breadcrumb a:hover{ color:var(--gs-primary); }
.gs-breadcrumb svg{ width:13px; height:13px; opacity:.6; }

/* ----- Buttons ----- */
.gs-btn{ display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  border:none; border-radius:var(--gs-r); padding:10px 16px; cursor:pointer; transition:.14s; white-space:nowrap; }
.gs-btn svg{ width:16px; height:16px; }
.gs-btn-primary{ background:var(--gs-primary); color:#fff; box-shadow:var(--gs-shadow-primary); }
.gs-btn-primary:hover{ background:var(--gs-primary-600); }
.gs-btn-ghost{ background:var(--gs-surface); color:var(--gs-ink); border:1px solid var(--gs-border-2); }
.gs-btn-ghost:hover{ background:var(--gs-surface-2); }
.gs-btn-soft{ background:var(--gs-primary-tint); color:var(--gs-primary); }
.gs-btn-soft:hover{ background:#e3e6fe; }
.gs-btn-sm{ padding:7px 12px; font-size:12px; }
.gs-btn-danger{ background:var(--gs-danger); color:#fff; }
.gs-btn-success{ background:var(--gs-success); color:#fff; }

/* ----- Cards / Panels ----- */
.gs-card{ background:var(--gs-surface); border:1px solid var(--gs-border); border-radius:var(--gs-r-lg);
  box-shadow:var(--gs-shadow-sm); }
.gs-panel{ background:var(--gs-surface); border:1px solid var(--gs-border); border-radius:var(--gs-r-lg);
  box-shadow:var(--gs-shadow-sm); padding:20px 21px; }
.gs-panel-head{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.gs-panel-head h3{ font-size:15px; font-weight:700; letter-spacing:-.01em; margin:0; }
.gs-panel-head .pill{ font-size:11px; font-weight:600; color:var(--gs-muted); background:var(--gs-surface-2);
  border:1px solid var(--gs-border); border-radius:999px; padding:3px 10px; }
.gs-panel-head .link{ margin-left:auto; font-size:12.5px; font-weight:600; color:var(--gs-primary); cursor:pointer; }

/* ----- KPI ----- */
.gs-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:15px; }
.gs-kpi{ background:var(--gs-surface); border:1px solid var(--gs-border); border-radius:var(--gs-r-lg);
  padding:17px 18px; box-shadow:var(--gs-shadow-sm); }
.gs-kpi .klabel{ font-size:12px; font-weight:600; color:var(--gs-muted); display:flex; align-items:center; gap:9px; }
.gs-kpi .kicon{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; flex:none; }
.gs-kpi .kicon svg{ width:17px; height:17px; }
.gs-kpi .kval{ font-size:31px; font-weight:700; letter-spacing:-.02em; margin-top:13px;
  font-variant-numeric:tabular-nums; line-height:1; }
.gs-kpi .kval small{ font-size:15px; font-weight:600; color:var(--gs-muted); }
.gs-kpi .ktrend{ font-size:11.5px; font-weight:600; margin-top:7px; display:flex; align-items:center; gap:5px; }
.gs-kpi .ktrend svg{ width:13px; height:13px; flex:none; }
.up{ color:var(--gs-success); } .down{ color:var(--gs-danger); } .flat{ color:var(--gs-muted); }

/* ----- Status badges ----- */
.gs-badge{ font-size:11px; font-weight:700; border-radius:999px; padding:4px 10px; white-space:nowrap;
  display:inline-flex; align-items:center; gap:5px; }
.gs-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.gs-badge.no-dot::before{ display:none; }
.b-ok,.b-confirmed{ background:var(--gs-success-bg); color:var(--gs-success); }
.b-open{ background:var(--gs-warning-bg); color:var(--gs-warning); }
.b-wait,.b-pending{ background:var(--gs-info-bg); color:var(--gs-info); }
.b-refused,.b-danger{ background:var(--gs-danger-bg); color:var(--gs-danger); }
.b-neutral{ background:#f1f2f7; color:var(--gs-muted); }
.b-violet{ background:var(--gs-violet-bg); color:var(--gs-violet); }

/* severity */
.sev{ width:9px; height:9px; border-radius:50%; flex:none; }
.sev.crit{ background:var(--gs-danger); } .sev.med{ background:var(--gs-warning); } .sev.low{ background:var(--gs-info); }
.sevbar{ width:4px; border-radius:4px; align-self:stretch; flex:none; }
.sevbar.crit{ background:var(--gs-danger); } .sevbar.med{ background:var(--gs-warning); } .sevbar.low{ background:var(--gs-info); }

/* ----- Tables ----- */
.gs-table{ width:100%; border-collapse:collapse; }
.gs-table th{ font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--gs-muted); text-align:left; padding:0 14px 11px; border-bottom:1px solid var(--gs-border); }
.gs-table td{ padding:13px 14px; border-bottom:1px solid var(--gs-border); font-size:13px; vertical-align:middle; }
.gs-table tr:last-child td{ border-bottom:none; }
.gs-table tbody tr{ transition:background .1s; }
.gs-table.hover tbody tr:hover{ background:var(--gs-surface-2); cursor:pointer; }
.gs-table .strong{ font-weight:600; color:var(--gs-ink); }
.gs-table .mut{ color:var(--gs-muted); }
.cellflex{ display:flex; align-items:center; gap:11px; }

/* list rows */
.gs-row{ display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--gs-border); }
.gs-row:first-of-type{ border-top:none; }
.gs-row .grow{ flex:1; min-width:0; }
.gs-row .t1{ font-size:13px; font-weight:600; }
.gs-row .t2{ font-size:11.5px; color:var(--gs-muted); margin-top:2px; }
.gs-row .time{ font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ----- Chart bars ----- */
.gs-chart{ display:flex; align-items:flex-end; gap:14px; height:180px; padding-top:6px; }
.gs-chart .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:9px; height:100%; justify-content:flex-end; }
.gs-chart .bars{ display:flex; align-items:flex-end; gap:4px; height:100%; width:100%; justify-content:center; }
.gs-chart .bar{ width:14px; border-radius:5px 5px 3px 3px; }
.gs-chart .bar.b1{ background:var(--gs-primary); }
.gs-chart .bar.b2{ background:#e0e2f7; }
.gs-chart .cl{ font-size:11px; color:var(--gs-muted); font-weight:500; }
.gs-legend{ display:flex; gap:18px; margin-top:6px; }
.gs-legend span{ font-size:11.5px; color:var(--gs-muted); display:flex; align-items:center; gap:6px; font-weight:500; }
.gs-legend i{ width:10px; height:10px; border-radius:3px; }

/* progress */
.gs-bar-track{ height:7px; border-radius:999px; background:var(--gs-border-2); overflow:hidden; }
.gs-bar-fill{ height:100%; border-radius:999px; background:var(--gs-primary); }
.gs-bar-fill.ok{ background:var(--gs-success); } .gs-bar-fill.warn{ background:var(--gs-warning); }

/* ----- Tabs ----- */
.gs-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--gs-border); }
.gs-tab{ font-size:13px; font-weight:600; color:var(--gs-muted); padding:11px 14px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px; background:none; border-top:none; border-left:none; border-right:none; }
.gs-tab:hover{ color:var(--gs-ink); }
.gs-tab.active{ color:var(--gs-primary); border-bottom-color:var(--gs-primary); }

/* views router */
.gs-view{ display:none; }
.gs-view.active{ display:flex; flex-direction:column; gap:22px; animation:gsfade .22s ease; }
@keyframes gsfade{ from{ transform:translateY(7px); } to{ transform:none; } }

/* segmented */
.gs-seg{ display:inline-flex; background:var(--gs-surface-2); border:1px solid var(--gs-border); border-radius:var(--gs-r); padding:3px; gap:2px; }
.gs-seg button{ border:none; background:none; font-size:12.5px; font-weight:600; color:var(--gs-muted);
  padding:6px 13px; border-radius:8px; cursor:pointer; }
.gs-seg button.active{ background:var(--gs-surface); color:var(--gs-primary); box-shadow:var(--gs-shadow-sm); }

/* avatar stack */
.gs-stack{ display:flex; }
.gs-stack .gs-avatar{ box-shadow:0 0 0 2px var(--gs-surface); margin-left:-8px; }
.gs-stack .gs-avatar:first-child{ margin-left:0; }
.gs-stack .more{ background:#eceefb!important; color:var(--gs-primary)!important; }

/* utility */
.muted{ color:var(--gs-muted); }
.faint{ color:var(--gs-faint); }
.ink{ color:var(--gs-ink); }
.dotsep::before{ content:"·"; margin:0 7px; color:var(--gs-faint); }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#dcdfe9; border-radius:8px; border:3px solid var(--gs-bg); }
::-webkit-scrollbar-thumb:hover{ background:#c7cbd9; }

/* ============ ESPACE CLIENT (lecture seule) ============ */
.ro-banner{ display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:600; color:var(--gs-info);
  background:var(--gs-info-bg); border:1px solid #d9dcfb; border-radius:999px; padding:5px 12px; }
.ro-banner svg{ width:14px; height:14px; }
.gs-nav[href]{ text-decoration:none; }

/* lien actif rendu côté serveur */
a.gs-nav.active{ background:var(--gs-primary-tint); color:var(--gs-primary); font-weight:600; }

/* Calendrier des quarts confirmés */
.cal{ display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--gs-border); border-radius:var(--gs-r-lg); overflow:hidden; background:var(--gs-surface); }
.cal .dow{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--gs-faint); padding:11px 12px; border-bottom:1px solid var(--gs-border); background:var(--gs-surface-2); }
.cal .cell{ min-height:104px; border-right:1px solid var(--gs-border); border-bottom:1px solid var(--gs-border); padding:8px; display:flex; flex-direction:column; gap:4px; }
.cal .cell:nth-child(7n){ border-right:none; }
.cal .cell.out{ background:var(--gs-surface-2); }
.cal .cell .dnum{ font-size:12.5px; font-weight:600; color:var(--gs-ink-2); }
.cal .cell.out .dnum{ color:var(--gs-faint); }
.cal .cell.today .dnum{ display:inline-grid; place-items:center; background:var(--gs-primary); color:#fff; width:22px; height:22px; border-radius:50%; font-size:11.5px; }
.cal-chip{ font-size:10.5px; font-weight:600; border-radius:6px; padding:3px 7px; border-left:3px solid var(--gs-success); background:var(--gs-success-bg); color:#0b7a50; line-height:1.25; }

/* Ligne site / activité */
.site-stat{ display:flex; align-items:center; gap:13px; padding:14px 0; border-top:1px solid var(--gs-border); }
.site-stat:first-child{ border-top:none; }
.site-stat .ico{ width:40px; height:40px; border-radius:11px; background:var(--gs-primary-tint); color:var(--gs-primary); display:grid; place-items:center; flex:none; }
.site-stat .ico svg{ width:19px; height:19px; }
.site-stat .grow{ flex:1; min-width:0; }
.site-stat .nm{ font-size:13.5px; font-weight:600; }
.site-stat .mt{ font-size:11.5px; color:var(--gs-muted); margin-top:2px; }

/* Flash messages dans l'app shell */
.gs-flash{ border-radius:var(--gs-r); padding:11px 15px; font-size:13px; font-weight:500; margin-bottom:4px; border:1px solid transparent; }
.gs-flash.success{ background:var(--gs-success-bg); color:var(--gs-success); border-color:#bfe9d6; }
.gs-flash.danger{ background:var(--gs-danger-bg); color:var(--gs-danger); border-color:#f6cccc; }
.gs-flash.warning{ background:var(--gs-warning-bg); color:var(--gs-warning); border-color:#f3dca8; }
.gs-flash.info{ background:var(--gs-info-bg); color:var(--gs-info); border-color:#d9dcfb; }

@media(max-width:1100px){ .gs-kpis{ grid-template-columns:repeat(2,1fr); } }

/* ----- Responsive : sidebar repliée en barre supérieure ----- */
@media(max-width:860px){
  .gs-app{ grid-template-columns:1fr; }
  .gs-side{ position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px;
    border-right:none; border-bottom:1px solid var(--gs-border); padding:10px 12px; }
  .gs-side .gs-brand{ padding:0 8px 0 0; }
  .gs-side .gs-nav-sec{ display:none; }
  .gs-side .gs-nav{ width:auto; padding:8px 11px; }
  .gs-side .gs-nav span:not(.gs-pill-badge){ display:none; }
  .gs-side-foot{ display:none; }
  .gs-side .ro-banner-wrap{ display:none; }
  .gs-content{ padding:18px 16px 48px; }
  .gs-main .gs-top{ padding:0 16px; }
  .gs-pagehead h1{ font-size:20px; }
}
@media(max-width:680px){
  .gs-top .gs-search{ display:none; }
}

/* ----- Colonnes & cartes agent (fiche détail d'un quart) ----- */
.col3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media(max-width:1100px){ .col3{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:720px){ .col3{ grid-template-columns:1fr; } }
.agent-card{ display:flex; align-items:center; gap:12px; padding:12px; border:1px solid var(--gs-border);
  border-radius:var(--gs-r); background:var(--gs-surface); }
.agent-card .grow{ flex:1; min-width:0; }
.agent-card .nm{ font-size:13px; font-weight:600; color:var(--gs-ink); }
.agent-card .mt{ font-size:11px; color:var(--gs-muted); margin-top:2px; }
.recap-grid{ display:grid; grid-template-columns:repeat(4,1fr); }
@media(max-width:760px){ .recap-grid{ grid-template-columns:repeat(2,1fr); } }
.recap-cell{ padding:16px 18px; border-right:1px solid var(--gs-border); }
.recap-cell:last-child{ border-right:none; }
.recap-cell .k{ color:var(--gs-muted); font-size:11.5px; font-weight:600; }
.recap-cell .v{ font-weight:700; margin-top:5px; color:var(--gs-ink); }
.conflict-tag{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; font-size:10.5px; font-weight:700;
  background:var(--gs-danger-bg); color:var(--gs-danger); border:1px solid #f6cccc; border-radius:999px; padding:2px 8px; }

/* ----- En-têtes de section distinctifs (espace agent mobile) ----- */
.sh-sec{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-radius:13px; margin:6px 0 14px; }
.sh-sec .ico{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; flex:none; }
.sh-sec .ico i{ font-size:1.1rem; }
.sh-sec .grow{ flex:1; min-width:0; }
.sh-sec .t{ font-size:1rem; font-weight:800; line-height:1.1; }
.sh-sec .d{ font-size:.74rem; margin-top:2px; }
.sh-sec .cnt{ font-family:var(--gs-mono,monospace); font-weight:800; font-size:1.1rem; min-width:30px; text-align:center; }
.sh-sec.open{ background:var(--gs-primary-tint); border:1px solid #d9dcfb; }
.sh-sec.open .ico{ background:var(--gs-primary); color:#fff; }
.sh-sec.open .t{ color:var(--gs-primary-600); }
.sh-sec.open .d{ color:#5b57c9; }
.sh-sec.open .cnt{ color:var(--gs-primary); }
.sh-sec.ok{ background:var(--gs-success-bg); border:1px solid #bfe9d6; }
.sh-sec.ok .ico{ background:var(--gs-success); color:#fff; }
.sh-sec.ok .t{ color:#0b7a50; }
.sh-sec.ok .d{ color:#0b7a50; opacity:.8; }
.sh-sec.ok .cnt{ color:var(--gs-success); }
.sh-card-open{ border-left:3px solid var(--gs-primary); }
.sh-card-mine{ border-left:3px solid var(--gs-info); }
.sh-card-ok{ border-left:3px solid var(--gs-success); }

/* ==========================================================================
   RESPONSIVITÉ — tableaux défilables, calendrier, grilles (admin + client)
   ========================================================================== */

/* Conteneur de tableau toujours défilable horizontalement. La classe
   .gr-tbl-wrap est utilisée dans plusieurs vues mais n'était définie nulle
   part — c'était la cause n°1 des débordements de tableaux. */
.gr-tbl-wrap{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* Grille 2 colonnes (tableaux de bord) qui se replie en 1 colonne sur mobile. */
.gs-2col{ display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }

@media(max-width:860px){
  /* Tout conteneur de tableau défile au lieu de déborder la page entière
     (cartes de liste, panneaux, corps de carte). */
  .gr-card-b, .gs-panel{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Largeur mini : on défile plutôt que d'écraser les colonnes (illisible). */
  .gr-tbl, .gs-table{ min-width:600px; }
  /* Les grilles 2 colonnes passent en pile verticale. */
  .gs-2col{ grid-template-columns:1fr; }
}

/* Calendrier des quarts : défilable + plus compact sous mobile. */
@media(max-width:760px){
  .cal{ min-width:620px; }
  .cal .cell{ min-height:78px; padding:6px; }
  .cal-chip{ font-size:9.5px; padding:2px 5px; }
}