/* La suite — la barre de gauche commune au Lab et à Grain, et le panneau du verrou.
   Les couleurs reprennent la charte du Lab (noir profond, rouge brand). Tout est préfixé sx-
   pour ne rien écraser des styles propres à chaque outil. */

:root{
  --sx-paper:#0A0A0A; --sx-surface:#141414; --sx-surface-2:#1B1B1B;
  --sx-ink:#FFFFFF; --sx-muted:#B0B0B0; --sx-faint:#888888;
  --sx-line:#2A2A2A; --sx-line-strong:#3A3A3A;
  --sx-stamp:#C8102E; --sx-stamp-soft:#26090F; --sx-green:#5CC98F; --sx-green-soft:#0F2318;
  --sx-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.sx-nav{padding:14px 10px 10px;border-bottom:1px solid var(--sx-line);display:flex;flex-direction:column;gap:2px}
.sx-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 12px}
.sx-brand img{width:30px;height:30px;border-radius:99px;object-fit:cover;border:1px solid var(--sx-line-strong);flex:0 0 auto}
.sx-brand .n{font-weight:700;font-size:14.5px;line-height:1.15;letter-spacing:.01em}
.sx-brand .s{font-family:var(--sx-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-faint);margin-top:2px}

.sx-label{font-family:var(--sx-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-faint);
  padding:10px 8px 5px}

.sx-item{display:flex;align-items:flex-start;gap:10px;padding:8px 8px 8px 9px;border-radius:9px;
  color:var(--sx-ink);text-decoration:none;border:1px solid transparent;position:relative;
  transition:background .12s,border-color .12s}
.sx-item:hover{background:var(--sx-surface);border-color:var(--sx-line)}
.sx-item.on{background:var(--sx-surface);border-color:var(--sx-line-strong)}
.sx-item.on::before{content:"";position:absolute;left:-1px;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--sx-stamp)}
.sx-ico{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--sx-paper);border:1px solid var(--sx-line-strong);color:var(--sx-muted)}
.sx-item.on .sx-ico{color:var(--sx-stamp);border-color:var(--sx-stamp);background:var(--sx-stamp-soft)}
.sx-ico svg{width:15px;height:15px}
.sx-txt{min-width:0;flex:1 1 auto}
.sx-txt .t{font-size:13.5px;font-weight:600;line-height:1.25;display:flex;align-items:center;gap:6px}
.sx-txt .d{font-size:11.5px;color:var(--sx-faint);line-height:1.35;margin-top:2px}
.sx-chip{font-family:var(--sx-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:99px;border:1px solid var(--sx-line-strong);color:var(--sx-faint);white-space:nowrap;margin-left:auto;align-self:center}
.sx-chip.ok{border-color:#1d4a33;color:var(--sx-green);background:var(--sx-green-soft)}
.sx-chip.hot{border-color:var(--sx-stamp);color:#ff8a9a;background:var(--sx-stamp-soft)}
.sx-lock{color:var(--sx-faint);display:inline-grid;place-items:center;margin-left:auto;align-self:center}
.sx-lock svg{width:14px;height:14px}
.sx-item.locked .sx-txt .t{color:var(--sx-muted)}
.sx-item.locked:hover .sx-lock{color:var(--sx-stamp)}
.sx-item.soon{cursor:default;opacity:.55}
.sx-item.soon:hover{background:transparent;border-color:transparent}

.sx-foot{padding:10px 14px 12px;border-top:1px solid var(--sx-line);display:flex;flex-direction:column;gap:6px}
.sx-who{font-size:12px;color:var(--sx-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sx-status{font-family:var(--sx-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--sx-faint)}
.sx-link{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--sx-muted);cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-align:left}
.sx-link:hover{color:var(--sx-stamp)}
.sx-cta{display:block;text-align:center;text-decoration:none;font-size:13px;font-weight:600;color:#fff;
  background:var(--sx-stamp);border:1px solid var(--sx-stamp);border-radius:9px;padding:8px 12px}
.sx-cta:hover{opacity:.88}

/* ---------- le panneau du verrou ---------- */
.sx-locked{max-width:680px;margin:0 auto;padding:clamp(26px,6vh,64px) 18px 48px;display:flex;flex-direction:column;gap:18px}
.sx-locked .k{font-family:var(--sx-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--sx-stamp);
  display:flex;align-items:center;gap:7px}
.sx-locked .k svg{width:13px;height:13px}
.sx-locked h1{font-size:clamp(27px,6vw,38px);line-height:1.1;margin:0;letter-spacing:-.015em;font-weight:700}
.sx-locked .lead{font-size:16.5px;color:var(--sx-muted);line-height:1.55;margin:0}
.sx-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width:640px){.sx-steps{grid-template-columns:1fr}}
.sx-step{border:1px solid var(--sx-line);border-radius:10px;padding:13px;background:var(--sx-surface)}
.sx-step .n{font-family:var(--sx-mono);font-size:10px;color:var(--sx-stamp);letter-spacing:.1em}
.sx-step .h{font-weight:600;font-size:14.5px;margin-top:6px}
.sx-step .p{font-size:13px;color:var(--sx-muted);margin-top:4px;line-height:1.45}
.sx-offer{border:1px solid var(--sx-stamp);border-radius:12px;background:linear-gradient(180deg,var(--sx-stamp-soft),var(--sx-surface) 70%);
  padding:18px;display:flex;flex-direction:column;gap:12px}
.sx-offer .h{font-weight:700;font-size:17px}
.sx-offer ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.sx-offer li{display:flex;gap:9px;font-size:14.5px;line-height:1.4}
.sx-offer li::before{content:"✓";color:var(--sx-green);font-weight:700;flex:0 0 auto}
.sx-offer li.soon{color:var(--sx-muted)}
.sx-offer li.soon::before{content:"◌";color:var(--sx-faint)}
.sx-price{font-size:15px;color:var(--sx-muted)}
.sx-price b{color:var(--sx-ink);font-size:22px;font-weight:700;margin-right:4px}
.sx-buy{display:block;text-align:center;text-decoration:none;font-weight:600;font-size:15.5px;color:#fff;
  background:var(--sx-stamp);border-radius:10px;padding:13px 16px;border:1px solid var(--sx-stamp)}
.sx-buy:hover{opacity:.9}
.sx-buy[aria-disabled="true"]{opacity:.4;pointer-events:none}
.sx-fine{font-size:12.5px;color:var(--sx-faint);margin:0;line-height:1.5}

/* ---------- le mode clair ----------
   Le sombre reste la charte par défaut ; le clair se choisit dans la barre (soleil / lune)
   et se retient sur l'appareil. Les deux jeux de variables (celles des pages et les sx-)
   basculent ensemble ; :root[data-theme] l'emporte sur le :root des pages. */
:root{color-scheme:dark}
:root[data-theme="light"]{
  color-scheme:light;
  --paper:#F7F6F3; --surface:#FFFFFF; --surface-2:#EFEEEA;
  --ink:#141414; --muted:#55524D; --faint:#7C7872;
  --line:#E2E0DB; --line-strong:#CCC9C2;
  --stamp:#C8102E; --stamp-soft:#FBE8EB;
  --red:#B42318; --red-soft:#FDECEA; --green:#17804F; --green-soft:#E5F4EC;
  --shadow:0 1px 2px rgba(20,20,20,.06), 0 10px 24px -18px rgba(20,20,20,.25);
  --sx-paper:#F7F6F3; --sx-surface:#FFFFFF; --sx-surface-2:#EFEEEA;
  --sx-ink:#141414; --sx-muted:#55524D; --sx-faint:#7C7872;
  --sx-line:#E2E0DB; --sx-line-strong:#CCC9C2;
  --sx-stamp:#C8102E; --sx-stamp-soft:#FBE8EB; --sx-green:#17804F; --sx-green-soft:#E5F4EC;
}
:root[data-theme="light"] .sx-chip.ok{border-color:#B9DEC9}
:root[data-theme="light"] .sx-chip.hot{color:var(--sx-stamp)}

.sx-theme{margin-left:auto;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:0 0 auto;
  background:transparent;border:1px solid var(--sx-line-strong);color:var(--sx-muted);cursor:pointer}
.sx-theme:hover{color:var(--sx-ink);border-color:var(--sx-ink)}
.sx-theme svg{width:15px;height:15px}

/* ---------- le micro ---------- */
.sx-mic{flex:0 0 auto;width:44px;height:44px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  background:var(--sx-surface);border:1px solid var(--sx-line-strong);color:var(--sx-muted);transition:color .12s,border-color .12s,background .12s}
.sx-mic:hover{color:var(--sx-ink);border-color:var(--sx-ink)}
.sx-mic svg{width:18px;height:18px}
.sx-mic.on{color:#fff;background:var(--sx-stamp);border-color:var(--sx-stamp);animation:sx-pulse 1.4s ease-in-out infinite}
.sx-mic[disabled]{opacity:.35;cursor:default;animation:none}
@keyframes sx-pulse{0%,100%{box-shadow:0 0 0 0 rgba(200,16,46,.45)}50%{box-shadow:0 0 0 7px rgba(200,16,46,0)}}
@media (prefers-reduced-motion:reduce){.sx-mic.on{animation:none}}
.sx-mic-msg{font-size:12.5px;color:var(--sx-stamp);max-width:780px;margin:6px auto 0}