/* ═══════════════════════════════════════════════════════════════════
   GMAO CMCP — Studio (pages construites par l'équipe)
   Identité CMCP : encre #0a0a0b, orange #ff6a13, Geist, angles nets,
   filets 1px, petites capitales espacées pour les libellés de compteur.
   ═══════════════════════════════════════════════════════════════════ */
#gst, .gst-menu, .gst-toast, .gst-ghost, .gst-ind {
  --g-ink: var(--ink, #0a0a0b); --g-ink2: var(--ink-2, #1e1e23); --g-mut: var(--mut, #6b6b75); --g-mut2: var(--mut-2, #a3a3ad);
  --g-line: var(--line, #ececf0); --g-line2: var(--line-2, #f3f3f7); --g-bg: var(--bg, #fafafb); --g-paper: #fff;
  --g-acc: var(--accent, #ff6a13); --g-acc-soft: var(--accent-soft, #fff2e8); --g-acc-ink: var(--accent-ink, #b74a09);
  --g-ok: #0e9f6e; --g-ok-soft: #e6f6ef; --g-warn: #d97706; --g-warn-soft: #fff5e0; --g-bad: #dc2626; --g-bad-soft: #fdecec;
  --g-ease: cubic-bezier(0.23, 1, 0.32, 1);
}
#gst {
  position: fixed; z-index: 60; background: var(--g-bg); color: var(--g-ink);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
#gst[hidden] { display: none; }
#gst *, #gst *::before, #gst *::after { box-sizing: border-box; }
:where(#gst) button { font: inherit; color: inherit; cursor: pointer; }
#gst :focus-visible { outline: 2px solid var(--g-acc); outline-offset: 1px; }
#gst .gst-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: calc(var(--gmao-nav-h, 0px) + 24px); }

/* ── barre d'en-tête (même gabarit que l'en-tête de l'application) ── */
.gst-bar {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 24px 10px 32px;
  background: var(--g-paper); border-bottom: 1px solid var(--g-line);
}
.gst-bar h1 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gst-bar .gst-sub { font-size: 12px; color: var(--g-mut); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gst-bar .gst-titlebox { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; }
.gst-bar .gst-acts { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.gst-back { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--g-line); background: var(--g-paper); flex: 0 0 auto; }
.gst-back svg { width: 16px; height: 16px; }
@media (hover: hover) { .gst-back:hover { border-color: var(--g-ink); } }
.gst-pageicon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--g-ink); color: var(--pc, var(--g-acc)); }
.gst-pageicon svg { width: 18px; height: 18px; }

/* ── boutons ──────────────────────────────────────────────────────── */
.gst-btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border: 1px solid #d4d4d8; background: var(--g-paper);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; border-radius: 0;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms var(--g-ease);
}
.gst-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.gst-btn:active:not(:disabled) { transform: scale(0.97); }
.gst-btn:disabled { opacity: 0.45; cursor: not-allowed; }
@media (hover: hover) { .gst-btn:hover:not(:disabled) { border-color: var(--g-ink); } }
.gst-btn.pri { background: var(--g-acc); border-color: var(--g-acc); color: #fff; }
@media (hover: hover) { .gst-btn.pri:hover:not(:disabled) { background: #ea580c; border-color: #ea580c; } }
.gst-btn.ink, #gst .gst-btn.ink[aria-pressed="true"] { background: var(--g-ink) !important; border-color: var(--g-ink) !important; color: #fff !important; }
#gst .gst-btn[aria-pressed="false"] { background: var(--g-paper); }
.gst-btn.ghost { border-color: transparent; background: transparent; }
@media (hover: hover) { .gst-btn.ghost:hover:not(:disabled) { background: var(--g-line2); border-color: transparent; } }
.gst-btn.sm { height: 28px; padding: 0 9px; font-size: 12px; }
.gst-btn.danger { color: var(--g-bad); }
.gst-ibtn { width: 28px; height: 28px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--g-mut); padding: 0; }
.gst-ibtn svg { width: 15px; height: 15px; }
@media (hover: hover) { .gst-ibtn:hover { background: var(--g-line2); color: var(--g-ink); } }
.gst-seg { display: inline-flex; border: 1px solid #d4d4d8; background: var(--g-paper); }
.gst-seg button { border: 0; background: transparent; padding: 0 10px; height: 30px; font-size: 12px; font-weight: 600; color: var(--g-mut); }
.gst-seg button + button { border-left: 1px solid var(--g-line); }
#gst .gst-seg button[aria-pressed="true"] { background: var(--g-ink) !important; color: #fff !important; border-color: var(--g-ink) !important; }

.gst-bar .gst-pageicon svg > rect { animation: gs-drop 520ms cubic-bezier(0.2, 0.9, 0.25, 1.2) 180ms backwards; transform-box: fill-box; }

/* ── accueil du Studio ────────────────────────────────────────────── */
.gst-wrap { padding: 24px 32px 32px; display: flex; flex-direction: column; gap: 28px; }
.gst-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.gst-sec-h h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.gst-sec-h p { margin: 0; font-size: 12.5px; color: var(--g-mut); }
/* ── en-tête du Studio (v8.1) : logo animé, briques qui se posent toutes seules ── */
.gst-hero {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-width: 0; gap: 0;
  background: var(--g-ink); color: #fff; border: 1px solid var(--g-ink); overflow: hidden; isolation: isolate;
}
.gst-hero::before { /* lueur orange discrète derrière l'atelier */
  content: ""; position: absolute; z-index: -1; right: -10%; top: -40%; width: 60%; height: 140%;
  background: radial-gradient(closest-side, rgba(255, 106, 19, 0.16), transparent 70%); pointer-events: none;
}
.gst-hero-l { min-width: 0; padding: 26px 30px 24px; display: flex; flex-direction: column; gap: 14px; }
.gst-brand { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #a1a1aa; }
.gst-brand > i { width: 16px; height: 1px; background: #3f3f46; }
.gst-brand-s { color: var(--g-acc); }
.gst-logo { position: relative; width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.gst-logo img { width: 30px; height: 30px; display: block; transition: transform 600ms var(--g-ease); animation: gs-logo-in 760ms cubic-bezier(0.2, 0.9, 0.2, 1.15) 80ms backwards; }
.gst-logo::after { content: ""; position: absolute; inset: 0; border: 1.5px solid var(--g-acc); opacity: 0; animation: gs-ring 900ms ease-out 520ms backwards; pointer-events: none; }
@media (hover: hover) { .gst-hero:hover .gst-logo img { transform: rotate(90deg); } }
.gst-hero h2 { margin: 2px 0 0; font-size: 28px; line-height: 1.12; font-weight: 700; letter-spacing: -0.025em; max-width: 24ch; }
.gst-hl {
  background-image: linear-gradient(var(--g-acc), var(--g-acc)); background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% 3px; padding-bottom: 2px; animation: gs-underline 700ms var(--g-ease) 420ms backwards;
}
.gst-hero p { margin: 0; color: #b4b4bd; font-size: 13.5px; max-width: 54ch; }
.gst-assist { position: relative; display: flex; gap: 0; margin-top: 4px; }
.gst-assist-ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--g-acc); display: grid; pointer-events: none; }
.gst-assist-ic svg { width: 16px; height: 16px; }
.gst-assist input {
  flex: 1; min-width: 0; height: 44px; padding: 0 14px 0 38px; border: 1px solid #2a2a30; border-right: 0; background: #141417; color: #fff; font: inherit; font-size: 13.5px; border-radius: 0;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.gst-assist input::placeholder { color: #75757f; }
.gst-assist input:focus { outline: none; border-color: var(--g-acc); background: #18181c; }
.gst-assist .gst-btn { height: 44px; padding: 0 18px; }
.gst-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gst-chip { border: 1px solid #2a2a30; background: transparent; color: #c4c4cc; font-size: 12px; padding: 5px 9px; transition: border-color 120ms ease, color 120ms ease, transform 120ms var(--g-ease); animation: gs-fade-up 360ms var(--g-ease) backwards; animation-delay: calc(380ms + var(--i, 0) * 50ms); }
@media (hover: hover) { .gst-chip:hover { border-color: var(--g-acc); color: #fff; } }
.gst-chip:active { transform: scale(0.97); }
.gst-hero-stats { display: flex; gap: 0; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid #1f1f23; }
.gst-hero-stats > div { padding: 0 22px 0 0; margin-right: 22px; border-right: 1px solid #1f1f23; }
.gst-hero-stats > div:last-child { border-right: 0; margin-right: 0; }
.gst-hero-stats dt { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #71717a; }
.gst-hero-stats dd { margin: 2px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }

/* l'atelier : 4 compteurs, un graphique, un tableau ; une brique « Formulaire » vient se poser */
.gst-hero-r {
  position: relative; border-left: 1px solid #1f1f23; padding: 24px; display: flex; align-items: center;
  background-color: #0d0d10; background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: 16px 16px;
}
.gs-scene { width: 100%; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 30px; gap: 7px; }
.gs-scene > div { position: relative; background: #18181c; border: 1px solid #2a2a30; animation: gs-drop 560ms cubic-bezier(0.2, 0.9, 0.25, 1.12) backwards; animation-delay: calc(240ms + var(--d, 0) * 85ms); }
.gs-scene s { position: absolute; left: 9px; top: 8px; width: 34%; height: 4px; background: #3a3a42; text-decoration: none; }
.gs-k { grid-column: span 3; grid-row: span 2; }
.gs-k b { position: absolute; left: 9px; bottom: 7px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #e4e4e7; font-variant-numeric: tabular-nums; }
.gs-k.a b { color: var(--g-acc); }
.gs-chart { grid-column: span 7; grid-row: span 4; }
.gs-chart i { position: absolute; bottom: 9px; width: 9%; height: var(--h); left: calc(7% + var(--j) * 12.5%); background: #3a3a42; transform-origin: bottom; animation: gs-grow 520ms var(--g-ease) backwards; animation-delay: calc(780ms + var(--j) * 70ms); }
.gs-chart i.on { background: var(--g-acc); }
.gs-table { grid-column: span 5; grid-row: span 4; padding: 24px 9px 6px; display: flex; flex-direction: column; gap: 6px; }
.gs-table i { display: grid; grid-template-columns: 1.4fr 1fr 0.6fr; gap: 6px; height: 13px; }
.gs-table u { display: block; background: #2a2a30; transform-origin: left; animation: gs-fill 420ms var(--g-ease) backwards; animation-delay: calc(900ms + var(--j) * 90ms); }
.gs-table i:nth-child(3) u:last-child { background: rgba(255, 106, 19, 0.7); }
.gs-slot { grid-column: span 12; grid-row: span 2; background: transparent !important; border: 1px dashed #3a3a42 !important; }
.gs-new {
  position: absolute; inset: 5px; background: #1d1d22; border: 1px solid var(--g-acc); box-shadow: 0 10px 24px -12px rgba(255, 106, 19, 0.6);
  animation: gs-place 6.4s cubic-bezier(0.3, 0.7, 0.2, 1) 1.6s infinite backwards;
}
.gs-new s { background: rgba(255, 106, 19, 0.65) !important; width: 22% !important; }
.gs-new em { position: absolute; top: 22px; height: 10px; width: 28%; background: #2a2a30; }
.gs-new em:nth-of-type(1) { left: 9px; } .gs-new em:nth-of-type(2) { left: calc(28% + 18px); }
.gs-new span { position: absolute; right: 9px; top: 20px; width: 64px; height: 14px; background: var(--g-acc); }
.gs-cursor { position: absolute; right: 26px; top: 24px; width: 20px; height: 20px; color: #fff; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); animation: gs-cursor 6.4s ease 1.6s infinite backwards; }
.gs-cursor svg { width: 20px; height: 20px; fill: #fff; stroke: #0a0a0b; stroke-width: 1.2; stroke-linejoin: round; }

@keyframes gs-logo-in { from { opacity: 0; transform: rotate(-120deg) scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes gs-ring { 0% { opacity: 0.8; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes gs-underline { from { background-size: 0% 3px; } to { background-size: 100% 3px; } }
@keyframes gs-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes gs-drop { from { opacity: 0; transform: translateY(-22px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes gs-grow { from { transform: scaleY(0); } to { transform: none; } }
@keyframes gs-fill { from { transform: scaleX(0); } to { transform: none; } }
@keyframes gs-place {
  0% { opacity: 0; transform: translate(46%, -60%) rotate(2deg); }
  10% { opacity: 1; transform: translate(34%, -55%) rotate(2deg); }
  32% { opacity: 1; transform: translate(0, -6%) rotate(0); }
  37% { transform: translate(0, 0) scale(1.012); }
  41% { transform: none; }
  84% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: none; }
}
@keyframes gs-cursor { 0%, 33% { opacity: 1; transform: none; } 45%, 100% { opacity: 0; transform: translate(18px, 14px); } }

.gst-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.gst-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--g-paper); border: 1px solid var(--g-line); text-align: left; min-height: 150px; transition: border-color 140ms ease, transform 180ms var(--g-ease), box-shadow 180ms ease; }
@media (hover: hover) { .gst-card:hover { border-color: var(--g-ink); transform: translateY(-2px); box-shadow: 0 12px 24px -18px rgba(10, 10, 11, 0.5); } .gst-card:hover .gst-card-ic { background: var(--pc, var(--g-acc)); color: #fff; } }
.gst-card-ic { transition: background-color 160ms ease, color 160ms ease; }
.gst-tpl .gst-card-foot > span:last-child::after { content: " \2192"; display: inline-block; transition: transform 160ms var(--g-ease); }
@media (hover: hover) { .gst-tpl:hover .gst-card-foot > span:last-child::after { transform: translateX(3px); } }
.gst-card-top { display: flex; align-items: center; gap: 10px; }
.gst-card-ic { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; background: var(--g-ink); color: var(--pc, var(--g-acc)); }
.gst-card-ic svg { width: 17px; height: 17px; }
.gst-card h3 { margin: 0; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.gst-card p { margin: 0; font-size: 12.5px; color: var(--g-mut); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gst-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--g-mut); }
.gst-card-foot .gst-acts { display: flex; gap: 4px; }
.gst-card .gst-open { position: absolute; inset: 0; border: 0; background: transparent; }
.gst-card .gst-card-foot .gst-btn, .gst-card .gst-card-foot .gst-ibtn { position: relative; z-index: 1; }
.gst-card.new { border-style: dashed; align-items: center; justify-content: center; color: var(--g-mut); font-weight: 600; gap: 8px; }
.gst-card.new svg { width: 22px; height: 22px; }
@media (hover: hover) { .gst-card.new:hover { color: var(--g-ink); } }
.gst-tpl .gst-card-ic { background: var(--g-line2); color: var(--g-ink); }
.gst-empty { padding: 26px; border: 1px dashed #d4d4d8; color: var(--g-mut); font-size: 13px; background: var(--g-paper); }

/* ── pages : grille de briques ────────────────────────────────────── */
.gst-page { padding: 20px 24px 28px; }
.gst-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; align-items: start; }
.gst-block { grid-column: span var(--w, 12); min-width: 0; background: var(--g-paper); border: 1px solid var(--g-line); position: relative; }
.gst-block-h { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px 8px 14px; border-bottom: 1px solid var(--g-line); }
.gst-block-h h3 { margin: 0; flex: 1; min-width: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gst-block-h .gst-meta { font-size: 11.5px; color: var(--g-mut); white-space: nowrap; }
@media (max-width: 1100px) { .gst-block { grid-column: span max(6, var(--w, 12)); } }
@media (max-width: 767px) {
  .gst-page { padding: 12px 10px 20px; }
  .gst-grid { gap: 8px; }
  .gst-block { grid-column: span 12; }
  .gst-block.k { grid-column: span 6; }
}

/* compteur */
.gst-kpi { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; min-height: 108px; }
.gst-kpi-l { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--g-mut); display: flex; justify-content: space-between; gap: 8px; }
.gst-kpi-v { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.gst-kpi-v small { font-size: 13px; font-weight: 600; color: var(--g-mut); letter-spacing: 0; margin-left: 4px; }
.gst-kpi-s { font-size: 12px; color: var(--g-mut); }
.gst-kpi.t-ink { background: var(--g-ink); border-color: var(--g-ink); color: #fff; }
.gst-kpi.t-ink .gst-kpi-l, .gst-kpi.t-ink .gst-kpi-s, .gst-kpi.t-ink small { color: #a3a3ad; }
.gst-kpi.t-accent .gst-kpi-v { color: var(--g-acc); }
.gst-kpi.t-bad .gst-kpi-v { color: var(--g-bad); }
.gst-kpi.t-good .gst-kpi-v { color: var(--g-ok); }
.gst-kpi-bar { height: 4px; background: var(--g-line2); margin-top: 2px; }
.gst-kpi-bar i { display: block; height: 100%; background: var(--g-acc); }
.gst-kpi.t-ink .gst-kpi-bar { background: #2a2a30; }

/* graphique */
.gst-chart { padding: 10px 14px 14px; }
.gst-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.gst-chart .ax { stroke: var(--g-line); }
.gst-chart text { font-family: inherit; font-size: 11px; fill: var(--g-mut); }
.gst-chart text.v { fill: var(--g-ink); font-weight: 600; }
.gst-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--g-ink2); }
.gst-legend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gst-legend i { width: 9px; height: 9px; display: inline-block; }
.gst-donut { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; }
@media (max-width: 520px) { .gst-donut { grid-template-columns: 1fr; } }

/* texte */
.gst-text { padding: 14px 16px; font-size: 13.5px; color: var(--g-ink2); }
.gst-text p { margin: 0 0 8px; max-width: 80ch; }
.gst-text p:last-child, .gst-text ul:last-child { margin-bottom: 0; }
.gst-text ul { margin: 0 0 8px; padding-left: 18px; }
.gst-text.s-title { padding: 6px 2px; background: transparent; border-color: transparent; }
.gst-text.s-title p:first-child { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: var(--g-ink); }
.gst-text.s-note { background: var(--g-line2); border-color: var(--g-line2); }
.gst-text.s-warn { background: var(--g-acc-soft); border-color: #ffd7bd; color: #7a2e04; }

/* formulaire */
.gst-form { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.gst-f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gst-f.wide { grid-column: 1 / -1; }
.gst-f > span { font-size: 11.5px; font-weight: 600; color: var(--g-ink2); }
.gst-f > span em { color: var(--g-acc); font-style: normal; }
.gst-in, #gst select.gst-in, #gst textarea.gst-in {
  width: 100%; height: 34px; padding: 0 10px; border: 1px solid #d4d4d8; background: var(--g-paper); font: inherit; font-size: 13px; color: var(--g-ink); border-radius: 0;
}
#gst textarea.gst-in { height: auto; min-height: 70px; padding: 8px 10px; resize: vertical; }
.gst-in:focus { outline: none; border-color: var(--g-acc); box-shadow: 0 0 0 3px rgba(255, 106, 19, 0.15); }
.gst-form-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.gst-okmsg { font-size: 12.5px; color: var(--g-ok); font-weight: 600; }

/* échéances */
.gst-due { list-style: none; margin: 0; padding: 0; }
.gst-due li { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--g-line2); font-size: 13px; }
.gst-due li:last-child { border-bottom: 0; }
.gst-due .nm { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gst-due .dt { color: var(--g-mut); font-size: 12px; font-variant-numeric: tabular-nums; }

/* ── le tableur ───────────────────────────────────────────────────── */
.gst-tb-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-bottom: 1px solid var(--g-line); }
.gst-tb-tools .gst-search { position: relative; flex: 0 1 240px; }
.gst-tb-tools .gst-search svg { position: absolute; left: 9px; top: 9px; width: 14px; height: 14px; color: var(--g-mut2); }
.gst-tb-tools .gst-search input { width: 100%; height: 32px; padding: 0 10px 0 28px; border: 1px solid var(--g-line); font: inherit; font-size: 12.5px; background: var(--g-bg); border-radius: 0; }
.gst-tb-tools .gst-search input:focus { outline: none; border-color: var(--g-acc); background: var(--g-paper); }
.gst-tb-tools .sp { flex: 1; }
.gst-sheet { overflow: auto; max-height: 70vh; position: relative; }
.gst-sheet table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12.5px; }
.gst-sheet th, .gst-sheet td { border-right: 1px solid var(--g-line); border-bottom: 1px solid var(--g-line); padding: 0; height: 34px; text-align: left; vertical-align: middle; background: var(--g-paper); }
.gst-sheet thead th { position: sticky; top: 0; z-index: 2; background: #f6f6f8; font-weight: 600; font-size: 11.5px; color: var(--g-ink2); height: 32px; }
.gst-sheet thead th .h { display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 32px; min-width: 110px; max-width: 280px; white-space: nowrap; border: 0; background: transparent; width: 100%; text-align: left; font-weight: 600; }
.gst-sheet thead th .h .ty { display: inline-grid; place-items: center; color: var(--g-mut2); flex: 0 0 auto; }
.gst-ti { width: 13px; height: 13px; }
.gst-sheet thead th .h .lb { overflow: hidden; text-overflow: ellipsis; }
.gst-sheet thead th .h .so { color: var(--g-acc); margin-left: auto; }
.gst-sheet thead th.col-sel { background: var(--g-acc-soft); box-shadow: inset 0 -2px 0 var(--g-acc); }
.gst-sheet thead th.add { min-width: 44px; }
.gst-sheet thead th.add button { width: 44px; height: 32px; border: 0; background: transparent; color: var(--g-mut); font-size: 16px; }
@media (hover: hover) { .gst-sheet thead th.add button:hover { color: var(--g-acc); } .gst-sheet thead th .h:hover { background: #eeeef2; } }
.gst-sheet .rn { position: sticky; left: 0; z-index: 1; width: 44px; min-width: 44px; text-align: center; color: var(--g-mut2); font-size: 11px; background: #f6f6f8; font-variant-numeric: tabular-nums; }
.gst-sheet thead .rn { z-index: 3; }
.gst-sheet tr.al-bad .rn { background: var(--g-bad); color: #fff; }
.gst-sheet tr.al-warn .rn { background: var(--g-warn); color: #fff; }
.gst-sheet td.c { position: relative; }
.gst-sheet td.c > .v { display: flex; align-items: center; gap: 6px; height: 33px; padding: 0 10px; min-width: 110px; max-width: 280px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gst-sheet td.c.num > .v { justify-content: flex-end; font-variant-numeric: tabular-nums; }
.gst-sheet td.c.fx { background: #fbfbfc; }
.gst-sheet td.c.fx > .v { color: var(--g-ink2); }
.gst-sheet td.c.err > .v { color: var(--g-bad); font-weight: 600; }
.gst-sheet td.c.hit { background: #fdf3f2; }
.gst-sheet td.c.hit-warn { background: #fff8eb; }
.gst-sheet td.c.ro > .v { color: var(--g-ink2); }
.gst-sheet td.c.sel { box-shadow: inset 0 0 0 2px var(--g-acc); z-index: 1; }
.gst-sheet tr.new td { background: #fcfcfd; }
.gst-sheet tr.new td.c > .v { color: var(--g-mut2); }
.gst-sheet tr.new .rn { color: var(--g-acc); font-weight: 700; font-size: 14px; }
.gst-sheet td.c .ed { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0 9px; font: inherit; font-size: 12.5px; background: #fff; box-shadow: inset 0 0 0 2px var(--g-acc); border-radius: 0; color: var(--g-ink); z-index: 2; }
.gst-sheet td.c .ed:focus { outline: none; }
.gst-sheet td.act { width: 40px; min-width: 40px; text-align: center; }
.gst-sheet tbody tr:hover td.c:not(.sel) { background-color: #fafafc; }
.gst-pill { display: inline-flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; font-size: 11.5px; font-weight: 600; background: color-mix(in srgb, var(--c, #64748b) 13%, #fff); color: color-mix(in srgb, var(--c, #64748b) 80%, #000); white-space: nowrap; }
.gst-pill::before { content: ""; width: 6px; height: 6px; background: var(--c, #64748b); flex: 0 0 auto; }
.gst-ck { display: inline-grid; place-items: center; min-width: 34px; height: 21px; padding: 0 6px; font-size: 11px; font-weight: 700; color: #fff; }
.gst-ck.ok { background: var(--g-ok); } .gst-ck.nok { background: var(--g-bad); } .gst-ck.na { background: #94a3b8; }
.gst-box { width: 15px; height: 15px; border: 1.5px solid #a1a1aa; display: inline-grid; place-items: center; }
.gst-box.on { background: var(--g-ink); border-color: var(--g-ink); }
.gst-box.on::after { content: ""; width: 7px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.gst-unit { color: var(--g-mut2); font-size: 11px; }
.gst-al { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; }
.gst-al.bad { background: var(--g-bad-soft); color: var(--g-bad); } .gst-al.warn { background: var(--g-warn-soft); color: #9a5b00; }
.gst-tb-foot { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 12px; color: var(--g-mut); border-top: 1px solid var(--g-line); }
.gst-tb-foot .sp { flex: 1; }
.gst-saving { font-size: 11.5px; color: var(--g-mut); }
.gst-saving.err { color: var(--g-bad); font-weight: 600; }
.gst-saving.ok::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--g-ok); margin-right: 6px; vertical-align: 1px; }

/* menu contextuel */
.gst-menu { position: fixed; z-index: 75; min-width: 220px; background: var(--g-paper); border: 1px solid var(--g-ink); box-shadow: 0 12px 32px -8px rgba(10, 10, 11, 0.28); padding: 4px; transform-origin: top left; animation: gst-pop 140ms var(--g-ease) both; }
.gst-menu button { color: var(--g-ink); font: inherit; cursor: pointer; display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 8px 10px; font-size: 12.5px; text-align: left; }
.gst-menu button svg { width: 14px; height: 14px; color: var(--g-mut); }
.gst-menu button.danger, .gst-menu button.danger svg { color: var(--g-bad) !important; }
.gst-menu hr { border: 0; border-top: 1px solid var(--g-line); margin: 4px 0; }
@media (hover: hover) { .gst-menu button:hover { background: var(--g-line2); } }
@keyframes gst-pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }

/* toast */
.gst-toast { position: fixed; z-index: 85; left: 50%; bottom: calc(24px + var(--gmao-nav-h, 0px)); transform: translate(-50%, 8px); opacity: 0; background: var(--g-ink); color: #fff; padding: 10px 14px; font-size: 12.5px; font-weight: 600; transition: opacity 180ms ease, transform 220ms var(--g-ease); pointer-events: none; max-width: calc(100vw - 32px); }
.gst-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ── l'atelier (éditeur) ──────────────────────────────────────────── */
.gst-ed { flex: 1; min-height: 0; display: grid; grid-template-columns: 232px minmax(0, 1fr) 316px; }
.gst-pal, .gst-insp { background: var(--g-paper); overflow: auto; min-height: 0; }
.gst-pal { border-right: 1px solid var(--g-line); padding: 16px 14px 24px; }
.gst-insp { border-left: 1px solid var(--g-line); padding: 0 0 24px; }
.gst-pal h4, .gst-insp h4 { margin: 0 0 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--g-mut); }
.gst-pal h4 + p { margin: -4px 0 12px; font-size: 12px; color: var(--g-mut); }
.gst-bricks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 22px; }
.gst-brick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px; min-height: 92px; text-align: left;
  border: 1px solid var(--g-line); background: var(--g-paper); touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color 140ms ease, transform 120ms var(--g-ease);
}
.gst-brick:active { transform: scale(0.97); }
@media (hover: hover) { .gst-brick:hover { border-color: var(--g-ink); } }
.gst-cube { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--g-ink); color: var(--g-acc); position: relative; }
.gst-cube::after { content: ""; position: absolute; right: -3px; bottom: -3px; width: 30px; height: 30px; border-right: 3px solid #3a3a42; border-bottom: 3px solid #3a3a42; pointer-events: none; }
.gst-cube svg { width: 16px; height: 16px; }
.gst-brick b { font-size: 12.5px; font-weight: 700; line-height: 1.2; }
.gst-brick > span:not(.gst-cube) { font-size: 11px; color: var(--g-mut); line-height: 1.3; }
.gst-srcs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 22px; }
.gst-src { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--g-line); background: var(--g-paper); text-align: left; touch-action: none; user-select: none; -webkit-user-select: none; }
.gst-src svg { width: 16px; height: 16px; color: var(--g-mut); flex: 0 0 auto; }
.gst-src b { font-size: 12.5px; font-weight: 600; flex: 1; }
.gst-src small { font-size: 11px; color: var(--g-mut2); }
@media (hover: hover) { .gst-src:hover { border-color: var(--g-ink); } }

.gst-canvas { overflow: auto; min-height: 0; padding: 20px 24px 120px; background: var(--g-bg); background-image: radial-gradient(#dcdce2 1px, transparent 1px); background-size: 16px 16px; }
.gst-canvas .gst-grid { min-height: 240px; }
.gst-canvas .gst-block { cursor: pointer; transition: box-shadow 140ms ease; }
.gst-canvas .gst-block.sel { box-shadow: 0 0 0 2px var(--g-acc); border-color: var(--g-acc); }
@media (hover: hover) { .gst-canvas .gst-block:not(.sel):hover { box-shadow: 0 0 0 1px var(--g-ink); } }
.gst-canvas .gst-block .gst-live { pointer-events: none; }
.gst-canvas .gst-block .gst-live .gst-sheet { pointer-events: auto; }
.gst-canvas .gst-block .gst-live tbody { pointer-events: none; }
.gst-canvas .gst-sheet thead th .h { cursor: pointer; }
@media (hover: hover) { .gst-canvas .gst-sheet thead th .h:hover { background: var(--g-acc-soft); } }
.gst-canvas .gst-block .gst-live .gst-sheet { max-height: 300px; }
.gst-tools { position: absolute; top: -27px; right: -1px; z-index: 4; display: none; align-items: center; background: var(--g-ink); color: #fff; height: 26px; }
.gst-block.sel .gst-tools, .gst-block:focus-within .gst-tools { display: flex; }
@media (hover: hover) { .gst-canvas .gst-block:hover .gst-tools { display: flex; } }
.gst-tools button { width: 26px; height: 26px; border: 0; background: transparent; color: #d4d4d8; display: grid; place-items: center; padding: 0; }
.gst-tools button svg { width: 13px; height: 13px; }
.gst-tools .grip { cursor: grab; touch-action: none; }
.gst-tools .wv { font-size: 11px; font-weight: 700; padding: 0 4px; min-width: 30px; text-align: center; color: #fff; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .gst-tools button:hover { color: var(--g-acc); } }
.gst-resize { position: absolute; top: 0; right: -6px; bottom: 0; width: 12px; cursor: ew-resize; z-index: 3; touch-action: none; }
.gst-resize::after { content: ""; position: absolute; top: 50%; left: 4px; width: 4px; height: 28px; margin-top: -14px; background: var(--g-acc); opacity: 0; transition: opacity 120ms ease; }
.gst-block.sel .gst-resize::after, .gst-resize:hover::after { opacity: 1; }
.gst-drop { grid-column: 1 / -1; min-height: 160px; border: 2px dashed #c8c8d0; display: grid; place-items: center; text-align: center; color: var(--g-mut); font-size: 13px; padding: 20px; background: rgba(255, 255, 255, 0.6); }
.gst-drop b { display: block; color: var(--g-ink); font-size: 14px; margin-bottom: 4px; }
.gst-ind { position: absolute; z-index: 30; background: var(--g-acc); pointer-events: none; }
.gst-ghost { position: fixed; z-index: 90; pointer-events: none; padding: 8px 12px; background: var(--g-ink); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); transform: translate(-50%, -120%); }
.gst-ghost svg { width: 14px; height: 14px; color: var(--g-acc); }
body.gst-dragging, body.gst-dragging * { cursor: grabbing !important; user-select: none !important; }
.gst-pagehead { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.gst-pagehead input { flex: 1; min-width: 0; border: 1px solid transparent; background: transparent; font: inherit; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; padding: 2px 6px; margin-left: -6px; color: var(--g-ink); border-radius: 0; }
.gst-pagehead input:hover { border-color: #d4d4d8; }
.gst-pagehead input:focus { outline: none; border-color: var(--g-acc); background: var(--g-paper); }

/* inspecteur */
.gst-insp-h { position: sticky; top: 0; z-index: 2; background: var(--g-paper); display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; border-bottom: 1px solid var(--g-line); }
.gst-insp-h b { flex: 1; font-size: 13.5px; font-weight: 700; }
.gst-insp-h .gst-cube { width: 26px; height: 26px; }
.gst-insp-h .gst-cube::after { width: 26px; height: 26px; }
.gst-insp-s { padding: 14px 16px; border-bottom: 1px solid var(--g-line2); display: flex; flex-direction: column; gap: 12px; }
.gst-insp-s:last-child { border-bottom: 0; }
.gst-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gst-lab { display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--g-ink2); }
.gst-lab small { font-weight: 400; color: var(--g-mut); font-size: 11.5px; }
.gst-widths { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid #d4d4d8; }
.gst-widths button { height: 30px; border: 0; background: var(--g-paper); font-size: 11.5px; font-weight: 700; color: var(--g-mut); }
.gst-widths button + button { border-left: 1px solid var(--g-line); }
#gst .gst-widths button[aria-pressed="true"] { background: var(--g-ink) !important; color: #fff !important; border-color: var(--g-line) !important; }
.gst-checks { display: flex; flex-direction: column; border: 1px solid var(--g-line); max-height: 260px; overflow: auto; }
.gst-checks label { display: flex; align-items: center; gap: 8px; padding: 6px 9px; font-size: 12.5px; border-bottom: 1px solid var(--g-line2); cursor: pointer; }
.gst-checks label:last-child { border-bottom: 0; }
.gst-checks input { accent-color: var(--g-acc); }
.gst-checks .ty { margin-left: auto; font-size: 10.5px; color: var(--g-mut2); display: inline-flex; align-items: center; gap: 4px; }
.gst-checks .ty .gst-ti { width: 12px; height: 12px; }
.gst-swatch { display: flex; flex-wrap: wrap; gap: 6px; }
.gst-swatch button { width: 24px; height: 24px; border: 0; background: var(--c); padding: 0; }
#gst .gst-swatch button, #gst .gst-swatch button[aria-pressed="true"] { background: var(--c) !important; border: 0 !important; }
#gst .gst-swatch button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }
.gst-icons { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.gst-icons button { height: 32px; border: 1px solid var(--g-line); background: var(--g-paper); display: grid; place-items: center; padding: 0; color: var(--g-ink2); }
.gst-icons button svg { width: 16px; height: 16px; }
#gst .gst-icons button[aria-pressed="true"] { background: var(--g-ink) !important; color: var(--g-acc) !important; border-color: var(--g-ink) !important; }
.gst-roles { display: flex; flex-wrap: wrap; gap: 5px; }
.gst-roles button { border: 1px solid #d4d4d8; background: var(--g-paper); padding: 4px 8px; font-size: 11.5px; font-weight: 600; color: var(--g-mut); }
#gst .gst-roles button[aria-pressed="true"] { background: var(--g-ink) !important; border-color: var(--g-ink) !important; color: #fff !important; }
.gst-opts { display: flex; flex-direction: column; gap: 4px; }
.gst-opt { display: grid; grid-template-columns: 22px 1fr 28px; gap: 6px; align-items: center; }
.gst-opt input[type="color"] { width: 22px; height: 22px; border: 1px solid var(--g-line); padding: 0; background: none; }
.gst-fx { display: flex; flex-wrap: wrap; gap: 4px; }
.gst-fx button { border: 1px solid var(--g-line); background: var(--g-line2); font-size: 11px; padding: 3px 6px; font-family: "Geist Mono", ui-monospace, monospace; }
@media (hover: hover) { .gst-fx button:hover { border-color: var(--g-ink); } }
.gst-fxres { font-size: 12px; padding: 7px 9px; background: var(--g-line2); font-family: "Geist Mono", ui-monospace, monospace; }
.gst-fxres.bad { background: var(--g-bad-soft); color: var(--g-bad); }
.gst-fxres.ok { background: var(--g-ok-soft); color: #065f46; }
.gst-rule { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px; border: 1px solid var(--g-line); position: relative; }
.gst-rule .x { position: absolute; right: 2px; top: 2px; }
.gst-note { font-size: 12px; color: var(--g-mut); margin: 0; }
.gst-dirty { font-size: 11.5px; color: var(--g-acc-ink); font-weight: 600; }

@media (max-width: 1180px) {
  .gst-ed { grid-template-columns: 200px minmax(0, 1fr) 280px; }
  .gst-bricks { grid-template-columns: 1fr; }
  .gst-brick { min-height: 0; flex-direction: row; align-items: center; }
  .gst-brick > span:not(.gst-cube) { display: none; }
}
@media (max-width: 860px) {
  .gst-ed { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .gst-pal { border-right: 0; border-bottom: 1px solid var(--g-line); padding: 10px; overflow-x: auto; }
  .gst-pal h4, .gst-pal h4 + p, .gst-pal .gst-srcs, .gst-pal .gst-pal-more { display: none; }
  .gst-bricks { display: flex; gap: 6px; margin: 0; }
  .gst-brick { flex: 0 0 auto; padding: 8px 10px; }
  .gst-insp { border-left: 0; border-top: 1px solid var(--g-line); max-height: 42vh; }
  .gst-canvas { padding: 12px 10px 60px; }
  .gst-bar { padding: 10px 12px; min-height: 60px; }
  .gst-bar h1 { font-size: 18px; }
  .gst-bar .gst-btn .lbl { display: none; }
  .gst-wrap { padding: 16px 12px 24px; }
  .gst-hero { grid-template-columns: minmax(0, 1fr); }
  .gst-assist .gst-btn { padding: 0 12px; }
  .gst-hero-r { display: none; }
  .gst-hero-l { padding: 20px 18px; }
  .gst-hero h2 { font-size: 21px; }
}

/* ── menu latéral ─────────────────────────────────────────────────── */
aside.w-20 .gst-navlab { padding: 10px 0 4px; text-align: center; font-size: 0; }
aside.w-20 .gst-navlab::after { content: ""; display: block; width: 24px; height: 1px; margin: 0 auto; background: #27272a; }
.gst-nav .gst-dot { width: 20px; height: 20px; margin-right: 12px; flex: 0 0 auto; display: grid; place-items: center; color: var(--pc, #9ca3af); }
.gst-nav .gst-dot svg { width: 18px; height: 18px; }
aside.w-20 .gst-nav .gst-lbl { display: none; }
aside.w-20 .gst-nav { justify-content: center; }
aside.w-20 .gst-nav .gst-dot { margin-right: 0; }
aside.gst-open nav > button.text-accent-nav:not(.gst-nav) { background: transparent !important; color: #9ca3af !important; }
aside.gst-open nav > button.text-accent-nav:not(.gst-nav)::after { display: none !important; }
aside.gst-open nav > button.text-accent-nav:not(.gst-nav) svg { color: #6b7280 !important; }
.gst-sp-item { display: flex; align-items: center; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  #gst *, .gst-menu, .gst-toast { animation: none !important; transition: none !important; }
}
@media print {
  #gst { position: static !important; overflow: visible; }
  #gst .gst-scroll { overflow: visible; }
  #gst .gst-bar .gst-acts, .gst-tb-tools, .gst-sheet .act { display: none !important; }
}

/* le témoin « En ligne » de l'application ne recouvre pas la barre du Studio */
@media (min-width: 768px) {
  body.gst-on #gmao-net-pill:not(.gm-net-docked) { top: auto !important; bottom: 14px !important; left: auto !important; right: 14px !important; transform: none !important; }
}

/* le tableur garde sa propre sélection (le cadre bleu de survol de l'application est retiré ici) */
#gst .gst-sheet tbody tr:hover > td { box-shadow: none !important; }
#gst .gst-sheet tbody tr > td.c.sel { box-shadow: inset 0 0 0 2px var(--g-acc) !important; }
#gst .gst-search input { padding-left: 30px !important; }

/* entrée d'une page du Studio : les briques se posent l'une après l'autre (une fois) */
@keyframes gst-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gst-enter .gst-block, .gst-enter .gst-card { animation: gst-in 220ms var(--g-ease) backwards; animation-delay: calc(min(var(--i, 0), 10) * 30ms); }
#gst .gst-scroll { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gst-enter .gst-block, .gst-enter .gst-card { animation: none; }
  .gst-logo img, .gst-logo::after, .gst-hl, .gst-chip, .gs-scene > div, .gs-chart i, .gs-table u, .gs-new, .gs-cursor, .gst-bar .gst-pageicon svg > rect { animation: none !important; }
  .gs-new { display: none; }
  .gst-card:hover { transform: none; }
}

/* v8.1 — téléphone : l'icône de l'assistant ne recouvre pas le texte ; lueur en haut à droite */
#gst .gst-assist input { padding-left: 38px !important; }
@media (max-width: 767px) {
  .gst-hero::before { right: -35%; top: -45%; width: 100%; height: 80%; }
  .gst-hero h2 { font-size: 22px; }
  .gst-hero-stats > div { padding-right: 16px; margin-right: 16px; }
}