/* Clippeur.io — app.css
   Application-level styles on top of the Signal design system.
   Load order: tokens.css → signal.css → app.css → Tailwind (layout utilities only).
   Rules: no shadows, no gradients, no emoji; 1 px lines and sunken backgrounds. */

/* ---------- Minimal base (Tailwind preflight is disabled) ---------- */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; height: auto; }
svg { vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
hr { border: 0; border-top: var(--border-hair) solid var(--line); margin: 0; }
.hidden { display: none !important; }
.sg-skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--surface); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); }
.sg-skip:focus { left: 8px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: var(--radius-pill); }

/* ---------- Text helpers ---------- */
.sg-muted { color: var(--ink-muted); }
.sg-faint { color: var(--ink-faint); }
.sg-accent { color: var(--violet); }
.sg-success { color: var(--ink); }
.sg-danger { color: var(--ink); }
.sg-warning { color: var(--ink-muted); }
.sg-right { text-align: right; }
.sg-center { text-align: center; }
.sg-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.sg-stack--tight { gap: var(--space-3); }
.sg-inline { display: inline-flex; align-items: center; gap: var(--space-2); }
.sg-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.sg-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.sg-divider { border-top: var(--border-hair) solid var(--line); margin: var(--space-4) 0; }
.sg-sunken { background: var(--bg-sunken); border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); padding: var(--space-4); }
.sg-prose { color: var(--ink-muted); line-height: 22px; white-space: pre-line; }

/* ---------- Layout ---------- */
.sg-body { min-height: 100vh; }
.sg-main > .sg-flash { margin-bottom: 0; }
.sg-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.sg-public { padding: var(--space-8) 0 var(--space-10); }
.sg-public .sg-container { display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 720px) {
  .sg-container { padding: 0 var(--space-4); }
  .sg-main { padding: var(--space-5) var(--space-4); }
  .sg-public { padding: var(--space-5) 0 var(--space-8); }
}

/* Sidebar extras */
.sg-nav__who { flex: 1; min-width: 0; }
.sg-nav__name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Top bar (public layout) ---------- */
.sg-topbar { background: var(--surface); border-bottom: var(--border-hair) solid var(--line); position: sticky; top: 0; z-index: 40; }
.sg-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: var(--space-4); }
.sg-topbar__brand { padding: 0; }
.sg-topbar__links { display: flex; align-items: center; gap: var(--space-2); }
.sg-topbar__link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border-radius: var(--radius-md); font-weight: 600; color: var(--ink-muted); }
.sg-topbar__link:hover { background: var(--bg-sunken); color: var(--ink); }
.sg-topbar__link--active { background: var(--violet-tint); color: var(--violet-strong); }
.sg-topbar__sep { width: 1px; height: 24px; background: var(--line); margin: 0 var(--space-2); }
.sg-topbar__user { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; padding: 0 var(--space-2); }
.sg-topbar__burger { display: none; }
@media (max-width: 860px) {
  .sg-topbar__burger { display: inline-flex; }
  .sg-topbar__links { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch; gap: 4px; padding: var(--space-3) var(--space-4) var(--space-4); background: var(--surface); border-bottom: var(--border-hair) solid var(--line); }
  .sg-topbar__links.is-open { display: flex; }
  .sg-topbar__links .sg-btn { justify-content: center; }
  .sg-topbar__sep { width: auto; height: 1px; margin: var(--space-2) 0; }
  .sg-footer__inner { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .sg-footer__links { flex-wrap: wrap; gap: 4px var(--space-2); }
}

/* ---------- Footer ---------- */
.sg-footer { background: var(--surface); border-top: var(--border-hair) solid var(--line); padding: var(--space-6) 0; }
.sg-footer__inner { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.sg-footer__brand { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.sg-footer__links { display: flex; gap: var(--space-1); }

/* ---------- Flash stack ---------- */
.sg-flash { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-flash .sg-toast { max-width: none; }
.sg-toast.is-leaving { opacity: 0; transition: opacity .3s; }

/* ---------- Theme toggle ---------- */
.sg-theme-toggle__moon { display: none; }
[data-theme="dark"] .sg-theme-toggle__sun { display: none; }
[data-theme="dark"] .sg-theme-toggle__moon { display: inline-flex; }
[data-theme="dark"] .sg-modal__backdrop { background: rgba(0, 0, 0, .6); }

/* ---------- Error page ---------- */
.sg-error { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-4); padding: var(--space-8) var(--space-4); }
.sg-error__code { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 96px; line-height: 1; font-weight: 600; color: var(--violet); }
.sg-error__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; margin-top: var(--space-2); }

/* ---------- Component extensions ---------- */
/* Campaign card, finished state */
.sg-ccard--done { opacity: .75; }
.sg-ccard--done .sg-ccard__cover { background: var(--bg-sunken); color: var(--ink-faint); }
.sg-ccard__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 720px) { .sg-grid-2 { grid-template-columns: 1fr; } }

/* Row, finished campaign */
.sg-row--done .sg-row__amount { color: var(--ink-muted); }
.sg-row__thumb--muted { background: var(--bg-sunken); color: var(--ink-faint); }

/* Clip card: 9:16 grid variant (campaign arena) */
.sg-clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); }
.sg-clipcard { display: flex; flex-direction: column; background: var(--surface); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); transition: border-color .15s; }
.sg-clipcard:hover { border-color: var(--line-strong); }
.sg-clipcard__thumb { aspect-ratio: 9 / 16; background: var(--bg-sunken); display: flex; align-items: center; justify-content: center; color: var(--ink-faint); position: relative; overflow: hidden; }
.sg-clipcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.sg-clipcard__thumb .sg-rank, .sg-clipcard__thumb .sg-chip { position: absolute; top: var(--space-2); left: var(--space-2); }
.sg-clipcard__thumb .sg-rank { background: var(--surface); border: var(--border-hair) solid var(--line); border-radius: var(--radius-pill); padding: 2px 8px; font-size: 12px; }
.sg-clipcard__thumb .sg-plat { position: absolute; right: var(--space-2); bottom: var(--space-2); }
.sg-clipcard__body { padding: var(--space-3); display: flex; flex-direction: column; gap: 6px; }
.sg-clipcard__who { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; font-weight: 700; min-width: 0; }
.sg-clipcard__who span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-clipcard__views { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }

/* Choice tiles (radio groups: role, distribution mode, source platform) */
.sg-choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer; background: var(--surface); }
.sg-choice:hover { background: var(--bg-sunken); }
.sg-choice input { margin: 3px 0 0; accent-color: var(--violet); flex: 0 0 auto; }
.sg-choice__title { font-weight: 700; }
.sg-choice__text { color: var(--ink-muted); font-size: 12px; line-height: 16px; margin-top: 2px; }
.sg-choice:has(input:checked) { border-color: var(--violet); background: var(--violet-tint); }
.sg-choice.is-checked { border-color: var(--violet); background: var(--violet-tint); }

/* Pagination */
.sg-pager { display: flex; justify-content: center; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.sg-pager__page { min-width: 36px; height: 36px; padding: 0 10px; border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; border: var(--border-hair) solid transparent; }
.sg-pager__page:hover { background: var(--bg-sunken); color: var(--ink); }
.sg-pager__page--active { background: var(--ink); color: var(--surface); }

/* Loader (no spinner glow: a simple ring) */
.sg-loader { display: flex; justify-content: center; padding: var(--space-8); }
.sg-loader::after { content: ""; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--violet); animation: sg-spin .8s linear infinite; }
@keyframes sg-spin { to { transform: rotate(360deg); } }
.sg-skeleton { background: var(--bg-sunken); border-radius: var(--radius-md); min-height: 16px; }

/* Progress fill (≤ 400 ms per the DS) */
.sg-progress__bar { transition: width .4s ease; }

/* Modal, hidden by default */
.sg-modal__backdrop { z-index: 60; }
.sg-modal__backdrop[hidden] { display: none; }

/* Horizontal gallery (recent clips) */
.sg-gallery { display: flex; gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-1); scrollbar-width: thin; }
.sg-gallery > * { flex: 0 0 150px; }

/* Definition list (campaign facts) */
.sg-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); }
.sg-facts .sg-num { display: block; margin-top: 2px; }

/* Key/value rows (sidebar) */
.sg-kv { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: var(--border-hair) solid var(--line); }
.sg-kv:last-child { border-bottom: 0; }
.sg-kv__k { color: var(--ink-muted); font-size: 13px; font-weight: 600; }

/* Auth pages */
.sg-auth { max-width: 440px; margin: var(--space-8) auto; display: flex; flex-direction: column; gap: var(--space-5); }
.sg-auth .sg-card { display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.sg-auth .sg-card > .sg-field, .sg-auth .sg-card > fieldset, .sg-auth .sg-card > form, .sg-auth .sg-card > .sg-or { align-self: stretch; }
.sg-btn--google { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.sg-btn--google:hover { background: var(--bg-sunken); }

/* Form grid */
.sg-form { display: flex; flex-direction: column; gap: var(--space-5); }
.sg-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 720px) { .sg-form__row { grid-template-columns: 1fr; } }
.sg-input--prefix { position: relative; }
.sg-input--prefix .sg-input { padding-left: 32px; }
.sg-input--prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); font-family: var(--font-mono); pointer-events: none; }

/* Table helpers */
.sg-table td.sg-shrink, .sg-table th.sg-shrink { width: 1%; white-space: nowrap; }
.sg-table .sg-actions { justify-content: flex-end; flex-wrap: nowrap; }

/* Hero: an action is a secondary (white) button, never primary */
.sg-hero .sg-btn--secondary { background: var(--on-violet-deep); color: var(--violet-deep); border-color: transparent; }
.sg-hero a:not(.sg-btn) { color: var(--on-violet-deep); text-decoration: underline; }

/* Stat tile in the hero (creator dashboard): mono on deep */
.sg-hero__facts { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.sg-hero__fact .sg-num-lg { color: var(--on-violet-deep); display: block; }

/* Tier list header */
.sg-tiers__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-3); }

/* Video embed */
.sg-embed { aspect-ratio: 16 / 9; width: 100%; border: 0; border-radius: var(--radius-md); background: var(--bg-sunken); }

/* Media picker (clip submission from connected channels) */
.sg-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--space-3); }
.sg-media__item { position: relative; border: var(--border-hair) solid var(--line); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-sunken); cursor: pointer; aspect-ratio: 9 / 16; }
.sg-media__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-media__item.is-selected { outline: var(--border-focus) solid var(--violet); outline-offset: 1px; }
.sg-media__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; background: var(--surface); border-top: var(--border-hair) solid var(--line); font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Added: admin/users (search form in the page header) ---------- */
.sg-page-head__actions .sg-input-group { flex: 1 1 320px; }
.sg-page-head__actions .sg-input-group .sg-input { min-width: 0; }
@media (max-width: 720px) {
  .sg-page-head__actions { width: 100%; }
  .sg-page-head__actions .sg-input-group { width: 100%; }
}
/* ---------- Added: clips/create (channel rows as buttons) ---------- */
button.sg-row { font: inherit; color: var(--ink); }
button.sg-row:hover { background: var(--bg-sunken); }

/* ---------- Added: dashboard views ---------- */
/* [hidden] must win over component display rules (sg-row, sg-clip, sg-field are flex). */
[hidden] { display: none !important; }
.sg-acct__note { font-size: 12px; line-height: 16px; color: var(--ink-muted); padding: 0 0 10px 48px; }
/* ---------- Added: hidden attribute wins over display rules (loader, grids, steps) ---------- */
/* Narrow screens: clip cards and list rows wrap their trailing column under the body. */
@media (max-width: 720px) {
  .sg-clip { flex-wrap: wrap; }
  .sg-clip__side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; padding-top: var(--space-2); border-top: var(--border-hair) solid var(--line); }
  .sg-row { flex-wrap: wrap; row-gap: var(--space-2); }
  .sg-row__body { flex-basis: calc(100% - 44px - var(--space-4)); }
  .sg-row__amount { min-width: 0; margin-left: auto; }
  .sg-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .sg-tab { white-space: nowrap; }
}

/* ---------- Added: campaigns ---------- */
.sg-inline > svg { flex: 0 0 auto; }
.sg-ccard__fact .sg-num { white-space: nowrap; }

/* Account rows: let the action buttons wrap on narrow screens (settings page). */
.sg-acct { flex-wrap: wrap; }
.sg-acct form { margin: 0; }

/* YouTube channels under the YouTube account line (settings, dashboards): one row each. */
.sg-channel { display: flex; align-items: center; gap: 10px; padding: 6px 0 6px 48px; min-width: 0; }
.sg-channel + .sg-channel { border-top: var(--border-hair) solid var(--line); }
.sg-channel__logo { width: 24px; height: 24px; max-width: 24px; max-height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 24px; background: var(--bg-sunken); }
.sg-channel__logo--empty { display: inline-flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-sans); color: var(--ink-muted); }
.sg-channel__name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-channel__name:hover { text-decoration: underline; }
.sg-channel__meta { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.sg-channel form { margin: 0; }
.sg-channel--add { padding-top: 8px; padding-bottom: 10px; }
.sg-channel--add .sg-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* Channel logo inside the clip submission channel list keeps the platform mark size. */
.channel-btn .sg-channel__logo { width: 40px; height: 40px; max-width: 40px; max-height: 40px; flex-basis: 40px; }

/* ---------- Landing page ---------- */
.sg-landing__section { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); }
.sg-landing__section-head { display: flex; flex-direction: column; gap: 8px; }
.sg-landing__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sg-landing__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 20px; font-weight: 500; }
.sg-landing__list li svg { flex: 0 0 auto; margin-top: 2px; color: var(--violet); }
.sg-landing__list--no li { color: var(--ink-muted); }
.sg-landing__list--no li svg { color: var(--ink-faint); }
.sg-landing__step { display: flex; flex-direction: column; gap: 8px; padding: var(--space-5); }
.sg-landing__step-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; color: var(--violet-strong); letter-spacing: .08em; }
.sg-landing__step .heading { margin: 0; }
.sg-landing__step .body { margin: 0; }
.sg-landing__compare-us { border-color: var(--violet); }
.sg-landing__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-5); }
@media (max-width: 860px) {
  .sg-landing__audiences, .sg-landing__steps { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
}

/* ---------- Sign-up: profile choice & onboarding ---------- */
.sg-auth--dialog { max-width: 600px; gap: var(--space-6); }
.sg-auth--wide { max-width: 680px; }
.sg-form-section { display: flex; flex-direction: column; gap: var(--space-3); }
.sg-form-section__title { margin: 0; }
.sg-format-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: var(--space-2); align-items: center; }
.sg-btn--icon { padding: 0; width: 36px; min-width: 36px; justify-content: center; }
@media (max-width: 560px) { .sg-format-row { grid-template-columns: minmax(0, 1fr) auto; } .sg-format-row .sg-select { grid-column: 1; } .sg-fieldgroup__row { grid-template-columns: 1fr; } .sg-fieldgroup__row .sg-fieldgroup__item + .sg-fieldgroup__item { border-left: 0; border-top: var(--border-hair) solid var(--line); } }
.sg-auth .sg-modal { width: 100%; max-width: none; padding: 48px; gap: var(--space-8); }
.sg-auth .sg-modal__title { font-size: 32px; line-height: 38px; }
.sg-auth .sg-modal__sub { margin-top: 10px; font-size: 15px; line-height: 22px; }
.sg-auth .sg-modal__foot { padding-top: var(--space-6); }
@media (max-width: 720px) { .sg-auth .sg-modal { padding: var(--space-6); gap: var(--space-6); } .sg-auth .sg-modal__title { font-size: 26px; line-height: 32px; } }
.sg-modal__foot { align-items: center; }
.sg-modal__foot .sg-btn--google { gap: 10px; }

/* YouTube channel picker (after the Google consent). */
.sg-channel--pick { cursor: pointer; padding-top: 10px; padding-bottom: 10px; }
.sg-channel--pick input { accent-color: var(--violet); margin: 0; }
.sg-channel--pick.is-disabled { opacity: .6; cursor: default; }
.sg-channel__logo--md { width: 36px; height: 36px; max-width: 36px; max-height: 36px; flex-basis: 36px; }

/* Public layout: the footer sits at the bottom even on short pages. */
.sg-body--public { min-height: 100vh; display: flex; flex-direction: column; }
.sg-body--public .sg-public { flex: 1; }

/* Auth dialogs: the e-mail alternative stays small under the Google button. */
.sg-auth__alt { display: flex; flex-direction: column; gap: var(--space-4); }
.sg-auth__alt > .sg-link { background: none; border: 0; padding: 0; cursor: pointer; align-self: center; font-weight: 600; }
.sg-auth__alt > form { text-align: left; }

.sg-auth .sg-modal .sg-list { display: flex; flex-direction: column; }

/* Dashboard sidebar: always the viewport height, user block pinned at the bottom left. */
@media (min-width: 721px) {
  .sg-nav { position: sticky; top: 0; height: 100vh; min-height: 0; align-self: flex-start; overflow-y: auto; }
}

/* Avatar photo covers the initial; if it fails to load it is removed and the initial shows. */
.sg-avatar img { position: absolute; inset: 0; border-radius: 50%; }

/* Campaign brief: file input, cover preview, media rows, checkboxes, brief chips and media links. */
.sg-input--file { padding: 9px 12px; line-height: 24px; }
.sg-input--file::file-selector-button { font: 700 13px/18px var(--font-sans); color: var(--ink); background: var(--bg-sunken); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-sm); padding: 2px 10px; margin-right: 10px; cursor: pointer; }
.sg-cover-preview { display: block; width: 100%; max-width: 360px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-md); border: var(--border-hair) solid var(--line); margin-top: 8px; }
.sg-media-row { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto; gap: var(--space-2); align-items: center; }
@media (max-width: 720px) { .sg-media-row { grid-template-columns: 1fr; } }
.sg-check { display: flex; gap: var(--space-3); align-items: flex-start; cursor: pointer; }
.sg-check input { margin: 3px 0 0; accent-color: var(--violet); flex: 0 0 auto; }
.sg-check__title { display: block; font-weight: 700; }
.sg-check__text { display: block; color: var(--ink-muted); font-size: 12px; line-height: 16px; margin-top: 2px; }
.sg-brief__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-brief__media { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: var(--border-hair) solid var(--line); color: inherit; }
.sg-brief__media:last-child { border-bottom: 0; }
.sg-brief__media:hover .sg-brief__media-name { text-decoration: underline; }
.sg-brief__media-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-brief__media-host { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.sg-brief__media svg { color: var(--ink-faint); flex: 0 0 auto; }

/* ---------- Landing hero: copy left, phone mockup right ---------- */
.sg-landing__hero { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: var(--space-8); align-items: center; padding: var(--space-6) 0 var(--space-5); }
.sg-landing__hero-copy { min-width: 0; }
.sg-landing__title { margin: 0; font-size: 64px; line-height: 1.02; font-weight: 800; letter-spacing: -.035em; color: var(--ink); }
.sg-landing__lead { color: var(--ink-muted); margin: var(--space-5) 0 0; max-width: 52ch; font-size: 17px; line-height: 26px; font-weight: 500; }
.sg-landing__cta-row { margin-top: var(--space-6); gap: var(--space-4); align-items: flex-start; }
.sg-landing__stats { display: flex; flex-wrap: wrap; gap: var(--space-6) var(--space-10); margin-top: var(--space-10); }
.sg-landing__stat { display: flex; flex-direction: column; gap: 4px; }
.sg-landing__stat .sg-num-lg { color: var(--ink); }
.sg-landing__visual { position: relative; height: 600px; display: flex; align-items: center; justify-content: center; }
.sg-landing__phone { position: relative; z-index: 2; width: 272px; height: 560px; padding: 12px; border-radius: 44px; background: #111114; box-shadow: 0 30px 60px -30px rgba(21, 21, 26, .45); }
.sg-landing__phone::before { content: ''; position: absolute; top: 20px; left: 50%; width: 92px; height: 24px; transform: translateX(-50%); border-radius: 12px; background: #111114; z-index: 3; }
.sg-landing__phone-screen { position: relative; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #000; }
.sg-landing__phone-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sg-landing__phone-play { position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border-radius: 50%; background: rgba(21, 21, 26, .55); color: #fff; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.sg-landing__phone-play svg { margin-left: 3px; }
.sg-landing__phone-caption { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(21, 21, 26, .72); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.sg-landing__phone-caption .sg-mono { margin-left: auto; font-weight: 500; opacity: .85; white-space: nowrap; }
.sg-landing__phone-caption .sg-plat { flex: 0 0 auto; }
.sg-landing__phone-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.sg-landing__card { position: absolute; top: 50%; width: 190px; height: 330px; border-radius: 28px; overflow: hidden; background: #15151a; display: flex; align-items: center; justify-content: center; }
.sg-landing__card--left { left: 2%; transform: translateY(-58%) rotate(-10deg); background: linear-gradient(160deg, #2a2a33, #09090b); }
.sg-landing__card--left .sg-plat { width: 72px; height: 72px; background: transparent; color: rgba(255, 255, 255, .22); }
.sg-landing__card--left .sg-plat svg { width: 56px; height: 56px; }
.sg-landing__card--right { right: 2%; transform: translateY(-42%) rotate(9deg); }
.sg-landing__card--right img { width: 100%; height: 100%; object-fit: cover; }
.sg-landing__card--right .sg-plat { width: 72px; height: 72px; background: transparent; color: rgba(255, 255, 255, .22); }
.sg-landing__platforms { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; gap: 10px; }
.sg-landing__platforms .sg-plat { width: 28px; height: 28px; border-radius: 50%; }
@media (max-width: 1100px) {
  .sg-landing__title { font-size: 52px; }
  .sg-landing__visual { height: 540px; }
  .sg-landing__card { width: 160px; height: 280px; }
}
@media (max-width: 860px) {
  .sg-landing__hero { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-4) 0 0; }
  .sg-landing__title { font-size: 36px; line-height: 1.05; }
  .sg-landing__lead { font-size: 15px; line-height: 22px; margin-top: var(--space-4); }
  .sg-landing__cta-row { margin-top: var(--space-6); }
  .sg-landing__cta-row .sg-btn--lg { min-height: 44px; padding: 0 18px; font-size: 14px; white-space: nowrap; }
  .sg-landing__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); width: 100%; margin-top: var(--space-8); }
  .sg-landing__stat { gap: 2px; }
  .sg-landing__stat .sg-num-lg { font-size: 18px; line-height: 22px; }
  .sg-landing__stat .caption { font-size: 11px; line-height: 14px; }
  .sg-landing__visual { height: 400px; overflow: hidden; }
  .sg-landing__phone { width: 184px; height: 380px; padding: 8px; border-radius: 32px; }
  .sg-landing__phone::before { width: 64px; height: 18px; top: 14px; }
  .sg-landing__phone-screen { border-radius: 26px; }
  .sg-landing__phone-play { width: 48px; height: 48px; }
  .sg-landing__phone-caption { left: 10px; right: 10px; bottom: 12px; padding: 6px 8px; font-size: 11px; }
  .sg-landing__phone-caption .sg-truncate { display: none; }
  .sg-landing__phone-caption .sg-mono { margin-left: 0; }
  .sg-pin { padding-top: var(--space-4); }
  .sg-landing__card { width: 110px; height: 190px; border-radius: 18px; }
  .sg-landing__card--left { left: 50%; margin-left: -175px; transform: translateY(-58%) rotate(-10deg); }
  .sg-landing__card--right { right: 50%; margin-right: -175px; transform: translateY(-42%) rotate(9deg); }
  .sg-landing__card--left .sg-plat svg { width: 36px; height: 36px; }
  .sg-landing__platforms { display: none; }
  .sg-landing__section { gap: var(--space-4); padding-top: var(--space-4); }
  .sg-landing__section .display { font-size: 28px; line-height: 32px; }
  .sg-landing__section-head.sg-between { flex-direction: column; align-items: flex-start; }
  .sg-landing__step { padding: var(--space-4); }
  .sg-landing__cta { padding: var(--space-5); }
  .sg-landing__cta .sg-actions { flex-wrap: wrap; gap: var(--space-2); }
  .sg-landing__cta .sg-btn--lg { min-height: 44px; padding: 0 16px; font-size: 14px; }
}

/* ---------- Campaign cards (grid) & list page ---------- */
.sg-ccard { padding: var(--space-4); gap: var(--space-3); color: inherit; }
.sg-ccard__cover { position: relative; }
.sg-ccard__mode { position: absolute; top: var(--space-3); right: var(--space-3); padding: 3px 8px; border-radius: var(--radius-pill); background: rgba(21, 21, 26, .72); color: #fff; font: 600 10px/16px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(4px); }
.sg-ccard__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sg-ccard__creator { font-weight: 700; font-size: 13px; min-width: 0; }
.sg-ccard__since { margin-left: auto; font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.sg-ccard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.sg-ccard__head .sg-ccard__title { flex: 1 1 auto; min-width: 0; }
.sg-ccard__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-top: auto; }
.sg-ccard__platforms { display: flex; gap: 6px; }
.sg-ccard__pay { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: 0 0 auto; }
.sg-ccard__pay-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; line-height: 26px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.sg-ccard__bar { display: flex; flex-direction: column; gap: 6px; }
.sg-ccard__bar-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--ink-muted); }
.sg-ccard--done .sg-ccard__pay-num { color: var(--ink-muted); }
.sg-campaigns__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); }
.sg-campaigns__creator { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 0 12px; }
.campaign-grid { gap: var(--space-5); }
@media (max-width: 1100px) { .campaign-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .campaign-grid { grid-template-columns: 1fr; } }

/* Active tab stays readable under the mouse (the hover rule has a higher specificity). */
.sg-tab--active:hover { color: var(--surface); }


/* ---------- "Vous êtes…" cards ---------- */
.sg-aud { display: flex; flex-direction: column; background: var(--surface); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: inherit; }
.sg-aud:hover { border-color: var(--line-strong); }
.sg-aud__visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-sunken); }
.sg-aud__visual > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-aud__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: var(--space-5); }
.sg-aud__body .title { margin: 0; }
.sg-aud__body .body { margin: 0; }
.sg-aud__body .sg-btn { margin-top: 6px; }
/* creator montage: six thumbnails, slight tilt */
.sg-aud__montage { position: absolute; inset: -8% -6%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 8px; transform: rotate(-6deg) scale(1.08); }
.sg-aud__montage-img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(21, 21, 26, .6); }
.sg-aud__montage-img--2, .sg-aud__montage-img--5 { transform: translateY(14px); }
/* clipper studio: dark composed visual */
.sg-aud__visual--clipper { background: radial-gradient(120% 90% at 100% 0%, #2a2a36 0%, #0e0e12 60%); color: #fff; }
.sg-aud__studio { position: absolute; top: 14px; right: 14px; left: 40%; display: flex; flex-direction: column; gap: 8px; transform: rotate(-4deg); transform-origin: top right; }
.sg-aud__studio-card, .sg-aud__studio-list { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(6px); }
.sg-aud__studio-label { font: 500 9px/12px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.sg-aud__studio-amount { font: 600 22px/26px var(--font-mono); font-variant-numeric: tabular-nums; }
.sg-aud__studio-btn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 5px 10px; border-radius: 8px; background: var(--violet); color: #fff; font: 700 11px/16px var(--font-sans); }
.sg-aud__studio-row { display: flex; align-items: center; gap: 8px; font: 500 11px/16px var(--font-mono); color: rgba(255, 255, 255, .8); }
.sg-aud__studio-plus { color: #8ef0a6; white-space: nowrap; }
.sg-aud__headline { position: absolute; left: 16px; bottom: 14px; max-width: 36%; font: 800 22px/1.02 var(--font-sans); letter-spacing: -.03em; text-transform: uppercase; }
.sg-aud__headline em { font-style: normal; color: var(--violet); }
@media (max-width: 860px) { .sg-landing__audiences { grid-template-columns: 1fr; } }

/* ---------- Landing scroll animations ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal] [data-reveal-child] { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
[data-reveal].is-in [data-reveal-child] { opacity: 1; transform: none; }
[data-reveal].is-in [data-reveal-child]:nth-child(2) { transition-delay: .08s; }
[data-reveal].is-in [data-reveal-child]:nth-child(3) { transition-delay: .16s; }
[data-reveal].is-in [data-reveal-child]:nth-child(4) { transition-delay: .24s; }
[data-reveal].is-in [data-reveal-child]:nth-child(5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal] [data-reveal-child] { opacity: 1; transform: none; transition: none; } }
.sg-aud__visual--standalone { border-radius: var(--radius-xl); border: var(--border-hair) solid var(--line); }

/* V1: alternating rows */
.sg-v1 { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-8) 0 var(--space-5); }
.sg-v1__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; }
.sg-v1__row--flip .sg-v1__copy { order: 2; }
.sg-v1__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.sg-v1__copy .display { margin: 0; font-size: 40px; line-height: 46px; }
.sg-v1__copy .body { margin: 0; max-width: 48ch; font-size: 16px; line-height: 24px; }
.sg-v1__visual .sg-aud__visual { aspect-ratio: 4 / 3; border-radius: var(--radius-xl); border: var(--border-hair) solid var(--line); }
.sg-v1__visual[data-reveal-child] { transform: translateY(18px) scale(.97); transition-delay: .1s; }
@media (max-width: 860px) { .sg-v1__row { grid-template-columns: 1fr; gap: var(--space-5); } .sg-v1__row--flip .sg-v1__copy { order: 0; } .sg-v1__copy .display { font-size: 30px; line-height: 36px; } .sg-v1 { gap: var(--space-8); } }

/* V2: scrollytelling */
.sg-v2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; padding: var(--space-8) 0 var(--space-5); }
.sg-v2__steps { display: flex; flex-direction: column; }
.sg-v2__step { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); opacity: .25; transform: translateX(-12px); transition: opacity .5s, transform .5s; }
.sg-v2__step.is-active { opacity: 1; transform: none; }
.sg-v2__step .display { margin: 0; font-size: 40px; line-height: 46px; }
.sg-v2__step .body { margin: 0; max-width: 46ch; font-size: 16px; line-height: 24px; }
.sg-v2__sticky { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-4); }
.sg-v2__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-xl); overflow: hidden; border: var(--border-hair) solid var(--line); background: var(--bg-sunken); }
.sg-v2__visual { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.sg-v2__visual.is-active { opacity: 1; transform: none; }
.sg-v2__visual .sg-aud__visual { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.sg-v2__progress { display: flex; gap: 8px; justify-content: center; }
.sg-v2__dot { font: 600 11px/24px var(--font-mono); letter-spacing: .08em; padding: 0 10px; border-radius: var(--radius-pill); border: var(--border-hair) solid var(--line); color: var(--ink-muted); transition: background .3s, color .3s; }
.sg-v2__dot.is-active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
@media (max-width: 860px) { .sg-v2 { grid-template-columns: 1fr; } .sg-v2__sticky { position: static; order: -1; } .sg-v2__step { min-height: 0; padding: var(--space-6) 0; opacity: 1; transform: none; } .sg-v2__step .display { font-size: 30px; line-height: 36px; } .sg-v2__frame { aspect-ratio: 16 / 10; } .sg-v2__visual { position: absolute; } .sg-v2__visual:not(.is-active) { display: none; } }

/* V3: stacked panels */
.sg-v3 { padding: var(--space-8) 0 0; }
.sg-v3__panel { position: sticky; top: calc(64px + var(--i) * 16px); min-height: calc(100vh - 96px); border-radius: var(--radius-xl); border: var(--border-hair) solid var(--line); background: var(--surface); margin-bottom: var(--space-6); overflow: hidden; transform-origin: top center; will-change: transform, opacity; }
.sg-v3__panel--creator { background: var(--violet-tint); border-color: transparent; }
.sg-v3__panel--production { background: var(--violet-deep); color: var(--on-violet-deep); border-color: transparent; }
.sg-v3__panel--production .sg-label { color: var(--on-violet-deep-muted); }
.sg-v3__panel--production .sg-v3__text { color: var(--on-violet-deep-muted); }
.sg-v3__panel--production .sg-btn--secondary { background: var(--on-violet-deep); color: var(--violet-deep); border-color: transparent; }
.sg-v3__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; min-height: calc(100vh - 96px); padding: var(--space-8); }
.sg-v3__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.sg-v3__title { margin: 0; font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -.03em; }
.sg-v3__text { margin: 0; max-width: 46ch; font-size: 16px; line-height: 24px; color: var(--ink-muted); font-weight: 500; }
.sg-v3__visual .sg-aud__visual { aspect-ratio: 4 / 3; border-radius: var(--radius-lg); }
@media (max-width: 860px) { .sg-v3__panel { position: relative; top: 0; min-height: 0; } .sg-v3__inner { grid-template-columns: 1fr; min-height: 0; padding: var(--space-5); gap: var(--space-5); } .sg-v3__title { font-size: 30px; line-height: 36px; } }

/* ---------- Landing V4–V6: pinned panels + motion primitives ---------- */
.sg-pin { padding: var(--space-8) 0 0; }
.sg-pin__panel { position: sticky; top: calc(64px + var(--i) * 12px); min-height: calc(100vh - 88px); border-radius: var(--radius-xl); overflow: hidden; margin-bottom: var(--space-6); transform-origin: top center; will-change: transform; isolation: isolate; }
.sg-pin__panel::after { content: ''; position: absolute; inset: 0; background: var(--ink); opacity: calc(var(--cover, 0) * .45); pointer-events: none; z-index: 30; }
.sg-v3__panel { opacity: calc(1 - var(--cover, 0) * .35); }
/* word masks + soft reveals, triggered by .is-in on the panel */
.sg-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
.sg-w > span { display: inline-block; transform: translateY(115%); transition: transform .9s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.is-in .sg-w > span { transform: none; }
.sg-r { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--d, 0s), transform .8s cubic-bezier(.2, .8, .2, 1) var(--d, 0s); }
.is-in .sg-r { opacity: 1; transform: none; }
/* marquee: two identical groups, each slides its own width */
.sg-marquee { display: flex; overflow: hidden; width: 100%; }
.sg-marquee__group { display: flex; gap: 12px; flex: 0 0 auto; padding-right: 12px; animation: sg-marquee var(--t, 32s) linear infinite; }
.sg-marquee--reverse .sg-marquee__group { animation-direction: reverse; }
@keyframes sg-marquee { to { transform: translateX(-100%); } }
/* live line chart */
.sg-chart { width: 100%; height: auto; display: block; overflow: visible; color: var(--violet); }
.sg-chart__grid line { stroke: currentColor; stroke-opacity: .14; stroke-width: 1; }
.sg-chart__line { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sg-draw 7s cubic-bezier(.4, 0, .2, 1) infinite; }
.sg-chart__area { opacity: 0; fill: currentColor; fill-opacity: .12; animation: sg-area 7s linear infinite; }
.sg-chart__dot { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: sg-dot 7s linear infinite; }
.sg-chart__halo { fill: none; stroke: currentColor; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: sg-halo 1.6s ease-out infinite; }
@keyframes sg-draw { 0% { stroke-dashoffset: 1; opacity: 1; } 50%, 86% { stroke-dashoffset: 0; opacity: 1; } 92% { stroke-dashoffset: 0; opacity: 0; } 92.1% { stroke-dashoffset: 1; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 1; } }
@keyframes sg-area { 0%, 30% { opacity: 0; } 52%, 86% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes sg-dot { 0%, 46% { opacity: 0; transform: scale(.4); } 52%, 86% { opacity: 1; transform: scale(1); } 92%, 100% { opacity: 0; } }
@keyframes sg-halo { from { transform: scale(1); opacity: .7; } to { transform: scale(3.6); opacity: 0; } }
/* live bars (traffic) */
.sg-bars { display: flex; align-items: flex-end; gap: 4px; height: 44px; }
.sg-bars span { flex: 1; height: var(--h); border-radius: var(--radius-pill) var(--radius-pill) 0 0; background: currentColor; opacity: .9; transform-origin: bottom; animation: sg-bar var(--t) ease-in-out var(--d) infinite alternate; }
@keyframes sg-bar { from { transform: scaleY(.2); } to { transform: scaleY(1); } }
@keyframes sg-kenburns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -3%); } }
@keyframes sg-blink { to { visibility: hidden; } }
@keyframes sg-float { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
.sg-v4__title, .sg-v5__title, .sg-v6__title { margin: 0; font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.sg-v4__title em, .sg-v5__title em, .sg-v6__title em { font-style: normal; color: var(--violet); }

/* V4 — typographique */
.sg-v4__panel { display: flex; flex-direction: column; justify-content: space-between; padding: 56px 56px 0; background: var(--surface); border: var(--border-hair) solid var(--line); }
.sg-v4__bignum { position: absolute; right: 16px; top: -60px; font: 800 clamp(200px, 30vw, 400px)/1 var(--font-sans); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); transform: translateY(calc((1 - var(--p, 0)) * 180px)); pointer-events: none; z-index: 0; }
.sg-v4__top { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
.sg-v4__title { font-size: clamp(48px, 7.2vw, 104px); }
.sg-v4__title--center { text-align: center; font-size: clamp(40px, 5.6vw, 80px); }
.sg-v4__bottom { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; padding: 40px 0 92px; }
.sg-v4__live { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.sg-v4__counter { display: flex; flex-direction: column; gap: 6px; }
.sg-v4__counter-num { font: 600 clamp(40px, 4.6vw, 64px)/1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.sg-v4__side { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sg-v4__text { margin: 0; max-width: 46ch; font-size: 17px; line-height: 26px; font-weight: 500; color: var(--ink-muted); }
.sg-v4__marquee { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 0; border-top: var(--border-hair) solid var(--line); background: var(--bg-sunken); z-index: 1; }
.sg-v4__chip { gap: 8px; }
.sg-v4__chip strong { color: var(--ink); font-weight: 600; }
.sg-v4__panel--creator { background: var(--violet-tint); border-color: transparent; padding: 0; }
.sg-v4__strip { padding: 22px 0; transform: rotate(-2.5deg) scale(1.06); }
.sg-v4__strip--bottom { transform: rotate(2.5deg) scale(1.06); }
.sg-v4__strip .sg-marquee__group { gap: 14px; padding-right: 14px; --t: 55s; }
.sg-v4__frame { display: block; width: 220px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.sg-v4__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-v4__center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding: 16px 56px; }
.sg-v4__center .sg-v4__text { text-align: center; }
.sg-v4__ticker { display: flex; align-items: center; gap: 16px; padding: 10px 18px; border-radius: var(--radius-pill); background: var(--surface); border: var(--border-hair) solid var(--line); }
.sg-v4__ticker-num { font: 600 24px/28px var(--font-mono); font-variant-numeric: tabular-nums; }
.sg-v4__bars { width: 120px; height: 28px; color: var(--violet); }
.sg-v4__panel--production { background: var(--violet-deep); color: var(--on-violet-deep); border-color: transparent; justify-content: flex-end; padding: 56px; }
.sg-v4__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: sg-kenburns 24s ease-in-out infinite alternate; z-index: 0; }
.sg-v4__shade { position: absolute; inset: 0; background: var(--violet-deep); opacity: .82; z-index: 1; }
.sg-v4__poster { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 780px; }
.sg-v4__rec, .sg-v5__rec { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px var(--font-mono); letter-spacing: .08em; color: var(--on-violet-deep); }
.sg-v4__rec { position: absolute; top: 24px; left: 56px; z-index: 2; }
.sg-v4__stamps { position: absolute; top: 24px; right: 56px; z-index: 2; }
.sg-v4__stamp, .sg-v5__stamp { position: absolute; opacity: 0; animation: sg-stamp 9.6s cubic-bezier(.2, .8, .2, 1) calc(var(--k) * 2.4s) infinite; }
.sg-v4__stamp { right: 0; top: 0; }
.sg-v5__stamp { left: var(--space-3); top: calc(11% + var(--space-3)); z-index: 3; }
@keyframes sg-stamp { 0% { opacity: 0; transform: translateY(6px); } 4%, 22% { opacity: 1; transform: none; } 26%, 100% { opacity: 0; transform: translateY(-6px); } }
.sg-v4__rec i, .sg-v5__rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); animation: sg-blink 1s steps(2, start) infinite; }
.sg-v4__poster .sg-label, .sg-v4__poster .sg-v4__text { color: var(--on-violet-deep-muted); }
.sg-v4__poster .sg-v4__title em { color: var(--on-violet-deep-muted); }
.sg-v4__panel--production .sg-btn--secondary, .sg-v5__panel--production .sg-btn--secondary, .sg-v6__panel--production .sg-btn--secondary { background: var(--surface); color: var(--violet-deep); border-color: transparent; }

/* V5 — produit vivant */
.sg-v5__panel { padding: 56px; display: flex; align-items: center; }
.sg-v5__panel--clipper { background: var(--ink); color: var(--on-violet-deep); }
.sg-v5__panel--creator { background: var(--surface); border: var(--border-hair) solid var(--line); }
.sg-v5__panel--production { background: var(--violet-deep); color: var(--on-violet-deep); }
.sg-v5__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; width: 100%; }
.sg-v5__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sg-v5__title { font-size: clamp(40px, 4.8vw, 68px); }
.sg-v5__panel--clipper .sg-v5__title em { color: var(--on-violet-deep-muted); }
.sg-v5__panel--production .sg-v5__title em { color: var(--on-violet-deep-muted); }
.sg-v5__text { margin: 0; max-width: 46ch; font-size: 16px; line-height: 25px; font-weight: 500; color: var(--ink-muted); }
.sg-v5__panel--clipper .sg-v5__text, .sg-v5__panel--production .sg-v5__text { color: var(--on-violet-deep-muted); }
.sg-v5__panel--clipper .sg-label, .sg-v5__panel--production .sg-label { color: var(--on-violet-deep-muted); }
.sg-v5__stage { position: relative; height: 620px; display: flex; align-items: center; justify-content: center; padding-right: 110px; }
.sg-v5__phone { position: relative; width: 264px; height: 540px; padding: 10px; border-radius: 42px; background: var(--ink); border: var(--border-hair) solid var(--line-strong); z-index: 2; }
.sg-v5__screen { position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: var(--ink); }
.sg-v5__feed { height: 100%; animation: sg-feed 14s cubic-bezier(.75, 0, .2, 1) infinite; }
@keyframes sg-feed { 0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-100%); } 50%, 68% { transform: translateY(-200%); } 75%, 93% { transform: translateY(-300%); } 100% { transform: translateY(-400%); } }
.sg-v5__item { position: relative; height: 100%; }
.sg-v5__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-v5__item-bar { position: absolute; left: 12px; right: 12px; bottom: 16px; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md); background: rgba(21, 21, 26, .72); font: 600 12px/16px var(--font-sans); }
.sg-v5__item-bar .sg-mono { margin-left: auto; }
.sg-v5__notif, .sg-v5__wallet, .sg-v5__meter, .sg-v6__board, .sg-v6__timeline { color: var(--ink); }
.sg-v5__notif .sg-label, .sg-v5__wallet .sg-label, .sg-v6__board .sg-label, .sg-v6__timeline .sg-label { color: var(--ink-muted); }
.sg-v5__notif { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); min-width: 200px; max-width: 240px; opacity: 0; animation: sg-notif 9s cubic-bezier(.2, .8, .2, 1) var(--d) infinite; z-index: 3; }
.sg-v5__notif--1 { left: -2%; top: 14%; } .sg-v5__notif--2 { right: 0; top: 34%; } .sg-v5__notif--3 { left: 0; top: 70%; }
.sg-v5__notif-meta { display: flex; gap: 4px; min-width: 0; white-space: nowrap; }
@keyframes sg-notif { 0% { opacity: 0; transform: translateY(16px) scale(.92); } 5%, 28% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-14px) scale(.96); } }
.sg-v5__wallet { position: absolute; right: 0; bottom: 3%; display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); min-width: 180px; z-index: 3; }
.sg-v5__wallet-num { font: 600 26px/30px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.sg-v5__wallet-bars { height: 26px; color: var(--violet); }
.sg-v5__grid--flip .sg-v5__burst { order: 0; } .sg-v5__grid--flip .sg-v5__copy { order: 1; }
.sg-v5__cinema { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); overflow: hidden; background: var(--ink); }
.sg-v5__cinema-img { width: 100%; height: 100%; object-fit: cover; display: block; animation: sg-kenburns 20s ease-in-out infinite alternate; }
.sg-v5__bar { position: absolute; left: 0; right: 0; height: 0; background: var(--ink); transition: height 1.2s cubic-bezier(.2, .8, .2, 1) .3s; z-index: 2; }
.sg-v5__bar--top { top: 0; } .sg-v5__bar--bottom { bottom: 0; }
.is-in .sg-v5__bar { height: 11%; }
.sg-v5__rec { position: absolute; top: 15%; right: 20px; z-index: 3; }
.sg-v5__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--surface); opacity: .5; z-index: 3; animation: sg-scan 5s linear infinite; }
@keyframes sg-scan { from { top: 0; } to { top: 100%; } }
.sg-v5__timeline { position: absolute; left: 20px; right: 20px; bottom: 15%; height: 3px; margin-bottom: 10px; background: var(--track-on-deep); z-index: 3; }
.sg-v5__timeline i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--surface); animation: sg-fill 9s linear infinite; }
@keyframes sg-fill { from { width: 0; } to { width: 100%; } }
.sg-v5__queue { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 10px; }
.sg-v5__queue-row { display: grid; grid-template-columns: 1fr 110px 96px; align-items: center; gap: 12px; font: 500 13px/18px var(--font-sans); }
.sg-v5__queue-bar { height: 6px; border-radius: var(--radius-pill); background: var(--track-on-deep); overflow: hidden; }
.sg-v5__queue-bar i { display: block; height: 100%; background: var(--on-violet-deep); animation: sg-queue 8s linear calc(var(--k) * 2s) infinite; }
@keyframes sg-queue { 0% { width: 0; } 60%, 100% { width: 100%; } }
.sg-v5__queue-state { justify-self: start; opacity: 0; animation: sg-queue-state 8s linear calc(var(--k) * 2s) infinite; }
@keyframes sg-queue-state { 0%, 58% { opacity: 0; } 62%, 100% { opacity: 1; } }
.sg-v5__burst { position: relative; height: 560px; display: flex; align-items: center; justify-content: center; }
.sg-v5__source { position: relative; width: 300px; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); z-index: 2; }
.sg-v5__source img { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg); display: block; }
.sg-v5__source-tag { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 3; }
.sg-v5__ring { position: absolute; inset: -6px; border-radius: 20px; border: 2px solid var(--violet); opacity: 0; animation: sg-ring 2.4s ease-out infinite; z-index: 1; }
.sg-v5__ring--2 { animation-delay: 1.2s; }
@keyframes sg-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.4); opacity: 0; } }
.sg-v5__clip { position: absolute; left: 50%; top: 50%; width: 100px; aspect-ratio: 9 / 16; margin: -89px 0 0 -50px; opacity: 0; transform: scale(.3); transition: transform 1.1s cubic-bezier(.2, .9, .25, 1.05) var(--d), opacity .4s var(--d); z-index: 1; }
.is-in .sg-v5__clip { opacity: 1; transform: translate(var(--tx), var(--ty)) rotate(var(--r)); }
.sg-v5__clip-in { position: relative; width: 100%; height: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); animation: sg-float 4s ease-in-out calc(var(--d) * -3) infinite alternate; }
.sg-v5__clip-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-v5__clip-tag { position: absolute; left: var(--space-2); bottom: var(--space-2); padding: 2px 8px; }
.sg-v5__meter { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); }
.sg-v5__meter-head { display: flex; justify-content: space-between; align-items: baseline; }
.sg-v5__meter-head .sg-mono, .sg-v6__board-head .sg-mono { font-weight: 600; font-variant-numeric: tabular-nums; }
/* V6 — collage cinétique */
.sg-v6__grid--flip .sg-v6__phone-wrap { order: 0; }
.sg-v6__phone-wrap { display: flex; justify-content: center; }
.sg-v6__phone { width: 300px; height: 600px; padding: 10px; border-radius: 44px; background: var(--ink); border: var(--border-hair) solid var(--line-strong); }
.sg-v6__screen { height: 100%; border-radius: 34px; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; color: var(--ink); }
.sg-v6__screen-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 22px 16px 12px; background: var(--surface); border-bottom: var(--border-hair) solid var(--line); }
.sg-v6__panel--production .sg-v6__screen-head .sg-label { color: var(--ink-muted); }
.sg-v6__panel--production .sg-v6__title { font-size: clamp(38px, 4.4vw, 60px); }
.sg-v6__feed { flex: 1; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 85%, transparent); mask-image: linear-gradient(180deg, #000 85%, transparent); }
.sg-v6__feed-group { display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 8px; animation: sg-feed-up 22s linear infinite; }
@keyframes sg-feed-up { to { transform: translateY(-100%); } }
.sg-v6__row { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-md); background: var(--surface); border: var(--border-hair) solid var(--line); }
.sg-v6__row--rejected { background: var(--bg-sunken); }
.sg-v6__row--rejected .sg-v6__row-thumb { opacity: .55; }
.sg-v6__row-thumb { width: 36px; height: 56px; flex: 0 0 36px; border-radius: var(--radius-sm); overflow: hidden; background: var(--ink); }
.sg-v6__row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-v6__row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-v6__row-who { font: 700 12px/16px var(--font-sans); }
.sg-v6__row-title { font: 500 11px/14px var(--font-sans); color: var(--ink-muted); }
.sg-v6__row-why { font: 500 10px/14px var(--font-mono); color: var(--ink-muted); }
.sg-v6__row .sg-chip { padding: 2px 8px; font-size: 10px; }
.sg-v6__rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sg-v6__rules li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--on-violet-deep); }
.sg-v6__rules li svg { flex: 0 0 auto; margin-top: 2px; color: var(--on-violet-deep-muted); }
.sg-v6__rules--ink li { color: var(--ink); }
.sg-v6__rules--ink li svg { color: var(--violet); }
.sg-v6__panel { padding: 56px; display: flex; flex-direction: column; justify-content: center; }
.sg-v6__panel--clipper { background: var(--surface); border: var(--border-hair) solid var(--line); }
.sg-v6__panel--creator { background: var(--violet-tint); gap: 24px; }
.sg-v6__panel--production { background: var(--violet-deep); color: var(--on-violet-deep); }
.sg-v6__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sg-v6__grid--flip .sg-v6__curtain { order: 0; } .sg-v6__grid--flip .sg-v6__copy { order: 1; }
.sg-v6__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.sg-v6__title { font-size: clamp(42px, 5.4vw, 76px); }
.sg-v6__panel--production .sg-v6__title em { color: var(--on-violet-deep-muted); }
.sg-v6__title--center { text-align: center; }
.sg-v6__text { margin: 0; max-width: 46ch; font-size: 16px; line-height: 25px; font-weight: 500; color: var(--ink-muted); }
.sg-v6__panel--production .sg-v6__text, .sg-v6__panel--production .sg-label { color: var(--on-violet-deep-muted); }
.sg-v6__kpis { display: flex; gap: 32px; }
.sg-v6__kpi { display: flex; flex-direction: column; gap: 4px; }
.sg-v6__kpi-num { font: 600 34px/38px var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sg-v6__wall { position: relative; height: 620px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; overflow: hidden; border-radius: var(--radius-lg); }
.sg-v6__col { transform: translateY(calc(var(--p, 0) * var(--shift))); }
.sg-v6__col--1 { --shift: -120px; } .sg-v6__col--2 { --shift: 80px; margin-top: -140px; } .sg-v6__col--3 { --shift: -60px; margin-top: -60px; }
.sg-v6__col-in { display: flex; flex-direction: column; gap: 14px; padding-bottom: 14px; animation: sg-scroll-col var(--t, 38s) linear infinite; }
.sg-v6__col--2 .sg-v6__col-in { animation-direction: reverse; --t: 46s; }
.sg-v6__col--3 .sg-v6__col-in { --t: 52s; }
@keyframes sg-scroll-col { to { transform: translateY(-50%); } }
.sg-v6__tile { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); }
.sg-v6__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-v6__tag { position: absolute; left: var(--space-2); top: var(--space-2); opacity: 0; animation: sg-tag 6s ease var(--d) infinite; }
@keyframes sg-tag { 0% { opacity: 0; transform: translateY(6px) scale(.9); } 8%, 60% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; transform: translateY(-6px); } }
.sg-v6__center { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.sg-v6__center .sg-v6__text { text-align: center; }
.sg-v6__timeline { position: relative; width: 100%; max-width: 980px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }
.sg-v6__tl-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 150px; }
.sg-v6__tl-count { font: 600 28px/32px var(--font-mono); font-variant-numeric: tabular-nums; }
.sg-v6__tl-track { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.sg-v6__tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--radius-pill); background: var(--violet); }
.sg-v6__tl-head-dot { position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--violet); }
.sg-v6__tl-marks { display: flex; justify-content: space-between; margin-top: 150px; font: 500 12px/16px var(--font-mono); color: var(--ink-muted); }
.sg-v6__tl-clips { position: absolute; left: 0; right: 0; top: 50%; height: 0; }
.sg-v6__tl-clip { position: absolute; left: calc(var(--at) * 100%); top: var(--y); width: 70px; aspect-ratio: 9 / 16; margin-left: -35px; border-radius: var(--radius-md); overflow: hidden; background: var(--ink); opacity: 0; transform: translateY(12px) scale(.8); transition: opacity .35s, transform .6s cubic-bezier(.2, .9, .25, 1.1); }
.sg-v6__tl-clip.is-on { opacity: 1; transform: none; }
.sg-v6__tl-clip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-v6__curtain { position: relative; aspect-ratio: 4 / 5; max-height: 620px; border-radius: var(--radius-xl); overflow: hidden; background: var(--ink); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0 round 18px); }
.sg-v6__curtain > img { width: 100%; height: 100%; object-fit: cover; display: block; animation: sg-kenburns 22s ease-in-out infinite alternate; }
.sg-v6__curtain-tag { position: absolute; top: var(--space-4); left: var(--space-4); }
.sg-v6__board { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; gap: 10px; padding: var(--space-4); }
.sg-v6__board-head { display: flex; justify-content: space-between; align-items: baseline; }
.sg-v6__board .sg-label { color: var(--ink-muted); }
.sg-v6__board-rows { display: flex; flex-direction: column; gap: 8px; }
.sg-v6__board-row { display: grid; grid-template-columns: 1fr 1fr 48px; align-items: center; gap: 12px; font: 500 12px/16px var(--font-sans); }
.sg-v6__board-row .sg-mono { text-align: right; font-weight: 600; }
.sg-v6__board-bar { height: 6px; border-radius: var(--radius-pill); background: var(--violet-tint); overflow: hidden; }
.sg-v6__board-bar i { display: block; height: 100%; width: var(--v); background: var(--violet); transform-origin: left; animation: sg-grow 6s cubic-bezier(.2, .8, .2, 1) calc(var(--k) * .3s) infinite; }
@keyframes sg-grow { 0% { transform: scaleX(0); } 30%, 85% { transform: scaleX(1); } 95%, 100% { transform: scaleX(0); } }

@media (max-width: 900px) {
  .sg-pin__panel { position: relative; top: 0; min-height: 0; }
  .sg-pin__panel::after { display: none; }
  .sg-v4__panel, .sg-v5__panel, .sg-v6__panel { padding: 32px 20px; }
  .sg-v4__panel { padding-bottom: 0; }
  .sg-v4__bignum { display: none; }
  .sg-v4__bottom, .sg-v5__grid, .sg-v6__grid { grid-template-columns: 1fr; gap: 32px; }
  .sg-v4__bottom { padding-bottom: 84px; }
  .sg-v4__title { font-size: 40px; } .sg-v4__title--center { font-size: 34px; }
  .sg-v4__center { padding: 16px 20px; } .sg-v4__panel--creator { padding: 0; }
  .sg-v4__panel--production { min-height: 560px; }
  .sg-v5__title, .sg-v6__title { font-size: 36px; }
  .sg-v5__grid--flip .sg-v5__burst, .sg-v6__grid--flip .sg-v6__curtain, .sg-v6__grid--flip .sg-v6__phone-wrap { order: 1; }
  .sg-v5__grid--flip .sg-v5__copy, .sg-v6__grid--flip .sg-v6__copy { order: 0; }
  /* V5 clipper: phone centred, balance card below it, no floating notifications */
  .sg-v5__stage { height: auto; padding: 0; flex-direction: column; gap: 20px; }
  .sg-v5__phone { width: 220px; height: 450px; }
  .sg-v5__notif { display: none; }
  .sg-v5__wallet { position: static; width: 100%; max-width: 280px; }
  /* V5 creator: source video, then four clips in a row */
  .sg-v5__burst { height: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: start; }
  .sg-v5__source { order: -1; grid-column: 1 / -1; width: 100%; margin-bottom: 8px; }
  .sg-v5__ring { display: none; }
  .sg-v5__clip { position: static; margin: 0; width: auto; opacity: 1; transform: none !important; transition: none; }
  .sg-v5__clip:nth-child(n + 5) { display: none; }
  .sg-v5__clip-in { animation: none; }
  /* V5 production: programme list without the bars */
  .sg-v5__queue-row { grid-template-columns: minmax(0, 1fr) auto; }
  .sg-v5__queue-bar { display: none; }
  /* V6 clipper */
  .sg-v6__kpis { flex-direction: column; gap: 16px; }
  .sg-v6__kpi-num { font-size: 28px; line-height: 32px; }
  .sg-v6__wall { height: 380px; }
  .sg-v6__tag { display: none; }
  /* V6 creator: compact timeline, four clips in a row under the track */
  .sg-v6__timeline { padding: 0; background: transparent; border: 0; border-radius: 0; }
  .sg-v6__tl-head { margin-bottom: 14px; flex-wrap: wrap; gap: 8px; }
  .sg-v6__tl-count { font-size: 22px; line-height: 26px; }
  .sg-v6__tl-marks { margin-top: 10px; font-size: 11px; }
  .sg-v6__tl-clips { position: static; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: auto; margin-top: 16px; }
  .sg-v6__tl-clip { position: static; margin: 0; width: auto; }
  .sg-v6__tl-clip:nth-child(n + 6) { display: none; }
  /* V6 production: compact board */
  .sg-v6__curtain { aspect-ratio: 4 / 5; }
  .sg-v6__phone { width: 260px; height: 520px; }
  .sg-v6__board { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); padding: var(--space-3); gap: 8px; }
  .sg-v6__board-row { grid-template-columns: minmax(0, 1fr) 72px 40px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-w > span, .sg-r, .sg-v5__clip, .sg-v6__tl-clip { transform: none !important; opacity: 1 !important; transition: none !important; }
  .sg-marquee__group, .sg-chart__line, .sg-chart__area, .sg-chart__dot, .sg-chart__halo, .sg-bars span, .sg-v4__bg, .sg-v5__cinema-img, .sg-v6__curtain > img, .sg-v5__feed, .sg-v5__notif, .sg-v5__clip-in, .sg-v5__ring, .sg-v5__scan, .sg-v4__stamp, .sg-v5__stamp, .sg-v5__queue-bar i, .sg-v5__queue-state, .sg-v5__timeline i, .sg-v6__board-bar i, .sg-v5__glow, .sg-v6__col-in, .sg-v6__tag { position: absolute; left: var(--space-2); top: var(--space-2); opacity: 0; animation: sg-tag 6s ease var(--d) infinite; }
  .sg-v6__curtain { clip-path: none; }
}

/* ---------- Per-prospect landings (/clippeurs, /createurs, /productions) ---------- */
.sg-seg__hero { padding-bottom: var(--space-6); }
.sg-seg__hero .sg-landing__title { font-size: 56px; }
.sg-seg__visual { display: flex; align-items: center; justify-content: center; min-width: 0; }
.sg-seg__visual--wall .sg-v6__wall { width: 100%; height: 560px; }
.sg-seg__visual--timeline { flex-direction: column; }
.sg-seg__visual--timeline .sg-v6__timeline { width: 100%; padding: var(--space-5); }
.sg-seg__visual--timeline .sg-v6__tl-head { margin-bottom: 16px; }
.sg-seg__visual--timeline .sg-v6__tl-marks { margin-top: 10px; }
.sg-seg__visual--timeline .sg-v6__tl-clips { position: static; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; height: auto; margin-top: 20px; }
.sg-seg__visual--timeline .sg-v6__tl-clip { position: static; width: auto; margin: 0; }
.sg-seg__visual--phone .sg-v6__phone-wrap { width: 100%; }
.sg-seg__visual--phone .sg-v6__screen-head .sg-label { color: var(--ink-muted); }
.sg-seg__list { margin-top: var(--space-6); }
.sg-seg__intro { margin: 4px 0 0; max-width: 60ch; }
.sg-seg__points { gap: var(--space-4); }
.sg-seg__point { display: flex; flex-direction: column; gap: 8px; padding: var(--space-5); }
.sg-seg__point .heading, .sg-seg__point .body { margin: 0; }
.sg-seg__platforms { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sg-seg__platform { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border: var(--border-hair) solid var(--line); border-radius: var(--radius-pill); background: var(--surface); }
.sg-seg__clips { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.sg-seg__clip { display: flex; flex-direction: column; gap: 4px; min-width: 0; color: inherit; text-decoration: none; }
.sg-seg__clip-thumb { aspect-ratio: 9 / 16; border-radius: var(--radius-md); overflow: hidden; background: var(--ink); border: var(--border-hair) solid var(--line); }
.sg-seg__clip-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-seg__clip:hover .sg-seg__clip-thumb { border-color: var(--line-strong); }
.sg-faq { display: flex; flex-direction: column; gap: var(--space-2); max-width: 760px; }
.sg-faq__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px 0; font-size: 17px; line-height: 24px; font-weight: 700; cursor: pointer; list-style: none; }
.sg-faq__q:hover { color: var(--violet-strong); }
.sg-faq__q::-webkit-details-marker { display: none; }
.sg-faq__q svg { flex: 0 0 auto; color: var(--ink-muted); transition: transform .2s; }
.sg-faq__item[open] .sg-faq__q svg { transform: rotate(180deg); }
.sg-faq__a { margin: 0 0 12px; max-width: 70ch; }

/* Vertical rhythm of the per-prospect landings: wide gaps separate the sections, the CTAs breathe. */
body:has(.sg-seg__hero) .sg-seg__hero { padding: var(--space-10) 0 72px; }
body:has(.sg-seg__hero) .sg-landing__cta-row { margin-top: var(--space-10); }
body:has(.sg-seg__hero) .sg-landing__stats { margin-top: 56px; }
body:has(.sg-seg__hero) .sg-landing__section { gap: var(--space-8); padding-top: 88px; }
body:has(.sg-seg__hero) .sg-landing__section-head { gap: 10px; }
body:has(.sg-seg__hero) .sg-landing__cta { margin-top: 96px; padding: 56px; gap: var(--space-8); }
body:has(.sg-seg__hero) .sg-landing__cta .body { margin-top: 12px; }
@media (max-width: 860px) {
  body:has(.sg-seg__hero) .sg-seg__hero { padding: var(--space-5) 0 48px; }
  body:has(.sg-seg__hero) .sg-landing__cta-row { margin-top: var(--space-8); }
  body:has(.sg-seg__hero) .sg-landing__stats { margin-top: var(--space-8); }
  body:has(.sg-seg__hero) .sg-landing__section { gap: var(--space-6); padding-top: 56px; }
  body:has(.sg-seg__hero) .sg-landing__cta { margin-top: 64px; padding: var(--space-8) var(--space-6); }
}
.sg-v6__ghost-deep { color: var(--on-violet-deep); }
.sg-v6__ghost-deep:hover { background: var(--track-on-deep); color: var(--on-violet-deep); }
@media (max-width: 1100px) { .sg-seg__clips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sg-seg__hero .sg-landing__title { font-size: 44px; } }
@media (max-width: 860px) {
  .sg-seg__hero .sg-landing__title { font-size: 34px; }
  .sg-seg__visual--wall .sg-v6__wall { height: 380px; }
  .sg-seg__visual--timeline .sg-v6__timeline { padding: 0; background: transparent; border: 0; }
  .sg-seg__visual--timeline .sg-v6__tl-clips { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sg-seg__visual--timeline .sg-v6__tl-clip:nth-child(n + 6) { display: none; }
  .sg-seg__points { gap: var(--space-3); }
  .sg-seg__clips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sg-seg__list { margin-top: var(--space-5); }
}

/* === Admin · revue des clips en swipe =================================== */
.sg-review { max-width: 520px; margin: 0 auto; }
.sg-review__bar { display: flex; align-items: center; gap: 12px; margin-bottom: var(--space-4); }
.sg-review__stack { position: relative; height: min(78vh, 820px); min-height: 560px; }
.sg-review__card { position: absolute; inset: 0; background: var(--surface); border: var(--border-hair) solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.08)); display: flex; flex-direction: column; overflow: hidden; touch-action: pan-y; user-select: none; cursor: grab; transform-origin: 50% 100%; transition: transform .3s ease, opacity .3s ease; opacity: 0; pointer-events: none; }
.sg-review__card.is-top { opacity: 1; pointer-events: auto; }
.sg-review__card.is-next { opacity: 1; transform: translateY(12px) scale(.96); }
.sg-review__card.is-deep { opacity: 1; transform: translateY(24px) scale(.92); }
.sg-review__card.is-dragging { cursor: grabbing; }
.sg-review__handle { display: flex; justify-content: center; padding: 8px 0 4px; }
.sg-review__handle span { width: 44px; height: 4px; border-radius: 2px; background: var(--line); }
.sg-review__embed { position: relative; flex: 1 1 auto; min-height: 0; background: var(--bg-sunken); margin: 0 12px; border-radius: var(--radius-md); overflow: hidden; }
.sg-review__embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sg-review__noembed { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.sg-review__body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.sg-review__title { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.sg-review__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sg-review__campaign { border-top: var(--border-hair) solid var(--line); padding-top: 8px; }
.sg-review__brief { margin: 6px 0 0; }
.sg-review__stamp { position: absolute; top: 18px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-md); border: 2px solid; font-weight: 800; font-size: 15px; letter-spacing: .02em; text-transform: uppercase; opacity: 0; pointer-events: none; background: var(--surface); }
.sg-review__stamp--yes { left: 18px; color: var(--violet-strong); border-color: var(--violet); transform: rotate(-10deg); }
.sg-review__stamp--no { right: 18px; color: var(--ink); border-color: var(--ink); transform: rotate(10deg); }
.sg-review__done { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.sg-review__actions { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: var(--space-4); }
@media (max-width: 720px) { .sg-review__stack { height: calc(100vh - 300px); min-height: 520px; } .sg-review__brief { display: none; } .sg-review__actions { gap: 8px; } .sg-review__actions .sg-btn--lg { height: 40px; padding: 0 16px; font-size: 14px; } }

/* === Cartes de choix illustrées (inscription) ============================ */
.sg-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sg-pick__card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px 16px; border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.sg-pick__card:hover { background: var(--bg-sunken); }
.sg-pick__card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sg-pick__card:has(input:checked) { border-color: var(--violet); background: var(--violet-tint); box-shadow: inset 0 0 0 1px var(--violet); }
.sg-pick__card:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: 2px; }
.sg-pick__check { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--on-violet); display: inline-flex; align-items: center; justify-content: center; }
.sg-pick__check .sg-icon { opacity: 0; }
.sg-pick__card:has(input:checked) .sg-pick__check { background: var(--violet); border-color: var(--violet); }
.sg-pick__card:has(input:checked) .sg-pick__check .sg-icon { opacity: 1; }
.sg-pick__art { width: 64px; height: 64px; color: var(--ink); flex: 0 0 auto; }
.sg-pick__art .acc { stroke: var(--violet); }
.sg-pick__body { display: flex; flex-direction: column; min-width: 0; }
.sg-pick__body .sg-choice__title { display: block; }
.sg-pick__body .sg-choice__text { display: block; margin-top: 3px; }
@media (max-width: 480px) { .sg-pick { grid-template-columns: 1fr; gap: 8px; } .sg-pick__card { flex-direction: row; align-items: center; padding: 12px 40px 12px 12px; gap: 12px; } .sg-pick__art { width: 48px; height: 48px; } }

/* Sections de l'étape 2 : un titre, un bloc, un filet entre chaque */
.sg-steps { display: flex; flex-direction: column; }
.sg-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.sg-step + .sg-step { margin-top: 28px; }
.sg-step[hidden] { display: none; }
.sg-step__title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin: 0 0 10px; padding: 0; }
.sg-step__req { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); background: var(--bg-sunken); border-radius: var(--radius-pill); padding: 2px 8px; }
.sg-step__cta { display: flex; align-items: center; gap: 16px; }
.sg-step__cta .sg-btn { flex: 0 0 auto; }
.sg-pick__card { padding: 14px 14px 12px; gap: 10px; }
.sg-pick__art { width: 56px; height: 56px; }
/* Attestation : un contrôle segmenté, deux options sur une ligne */
.sg-seg { display: grid; grid-template-columns: 1fr 1fr; border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.sg-seg__opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; min-height: 60px; }
.sg-seg__opt + .sg-seg__opt { border-left: var(--border-hair) solid var(--line-strong); }
.sg-seg__opt:hover { background: var(--bg-sunken); }
.sg-seg__opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sg-seg__opt:has(input:checked) { background: var(--violet-tint); box-shadow: inset 0 0 0 1.5px var(--violet); }
.sg-seg__opt:has(input:focus-visible) { outline: 2px solid var(--violet); outline-offset: -2px; }
.sg-seg__mark { font-family: var(--font-mono); font-size: 20px; font-weight: 600; line-height: 1; color: var(--ink); flex: 0 0 auto; min-width: 40px; }
.sg-seg__mark small { font-size: 13px; color: var(--violet); }
.sg-seg__text { display: flex; flex-direction: column; min-width: 0; }
.sg-seg__title { font-weight: 700; font-size: 13px; }
.sg-seg__sub { font-size: 12px; color: var(--ink-muted); line-height: 15px; margin-top: 1px; }
@media (max-width: 480px) { .sg-step__cta { flex-direction: column; align-items: flex-start; gap: 10px; } .sg-seg__opt { padding: 10px 10px; gap: 8px; } .sg-seg__mark { min-width: 32px; font-size: 17px; } .sg-seg__sub { display: none; } }

/* ---------- Clippers landing · "Comment ça marche + catalogue" ---------- */
.sg-how__panel { background: var(--violet-deep); color: var(--on-violet-deep); border-radius: var(--radius-xl); padding: 56px; display: flex; flex-direction: column; gap: 48px; overflow: hidden; }
.sg-how__head .sg-label, .sg-how__catalog .sg-label { color: var(--on-violet-deep-muted); }
.sg-how__title { font-size: 52px; line-height: 1.04; font-weight: 800; letter-spacing: -.03em; margin-top: 14px; }
.sg-how__title em { font-style: normal; color: var(--on-violet-deep-muted); }
/* Frise : ligne qui se trace, pastilles, puis les étapes */
.sg-how__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); padding-top: 28px; }
.sg-how__steps::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--track-on-deep); }
.sg-how__steps::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px; background: var(--on-violet-deep-muted); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(.2, .7, .2, 1) .3s; }
.is-in .sg-how__steps::after { transform: scaleX(1); }
.sg-how__step { position: relative; display: flex; flex-direction: column; gap: 10px; }
.sg-how__step::before { content: ""; position: absolute; z-index: 1; left: 0; top: -33px; width: 12px; height: 12px; border-radius: 50%; background: var(--violet-deep); border: 2px solid var(--on-violet-deep-muted); opacity: 0; transition: opacity .4s calc(.5s + var(--i, 0) * .5s); }
.is-in .sg-how__step::before { opacity: 1; }
.sg-how__row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sg-how__row .heading { margin: 0; color: var(--on-violet-deep); }
.sg-how__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--on-violet-deep-muted); }
.sg-how__step .body { margin: 0; color: var(--on-violet-deep-muted); }
/* Icônes au trait qui se dessinent à l'entrée */
.sg-how__icon { color: var(--on-violet-deep); flex: 0 0 auto; }
.sg-how__icon * { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s cubic-bezier(.2, .7, .2, 1) calc(.5s + var(--i, 0) * .3s); }
.is-in .sg-how__icon * { stroke-dashoffset: 0; }
/* Catalogue en défilement */
.sg-how__catalog { display: flex; flex-direction: column; gap: 14px; }
.sg-how__marquee { width: calc(100% + 112px); margin: 0 -56px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.sg-how__marquee .sg-marquee__group { --t: 40s; gap: 10px; padding-right: 10px; }
.sg-how__client { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, .08); white-space: nowrap; }
.sg-how__client .sg-avatar { object-fit: cover; }
.sg-how__client .caption { color: var(--on-violet-deep-muted); }

@media (max-width: 860px) {
  .sg-how__panel { padding: 32px 20px; gap: 32px; border-radius: var(--radius-lg); }
  .sg-how__title { font-size: 34px; }
  .sg-how__steps { grid-template-columns: 1fr; gap: var(--space-6); padding-top: 0; padding-left: 22px; }
  .sg-how__steps::before, .sg-how__steps::after { left: 5px; right: auto; top: 6px; bottom: 6px; width: 2px; height: auto; }
  .sg-how__steps::after { transform: scaleY(0); transform-origin: top; }
  .is-in .sg-how__steps::after { transform: scaleY(1); }
  .sg-how__step::before { left: -22px; top: 8px; }
  .sg-how__marquee { width: calc(100% + 40px); margin: 0 -20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-how__icon * { stroke-dashoffset: 0; transition: none; }
  .sg-how__steps::after, .sg-how__step::before { transform: none; opacity: 1; transition: none; }
  .sg-how__marquee .sg-marquee__group { animation: none; }
}

/* ---------- Landings · "Rémunération" : trois modes illustrés ---------- */
.sg-pay__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); }
.sg-pay__mode { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sg-pay__mode .heading { margin: 12px 0 0; }
.sg-pay__mode .body { margin: 0; }
.sg-pay__visual { height: 168px; border-radius: var(--radius-lg); background: var(--violet-tint); padding: 20px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
/* Prorata : barres qui se remplissent */
.sg-pay__share { display: flex; flex-direction: column; gap: 10px; }
.sg-pay__share-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 48px; align-items: center; gap: 10px; }
.sg-pay__share-label { color: var(--ink-muted); white-space: nowrap; }
.sg-pay__share-amt { text-align: right; color: var(--ink-muted); }
.sg-pay__share-row.is-me .sg-pay__share-label, .sg-pay__share-row.is-me .sg-pay__share-amt { color: var(--ink); font-weight: 600; }
.sg-pay__share-track { display: block; height: 10px; border-radius: 5px; background: rgba(106, 31, 214, .12); overflow: hidden; }
.sg-pay__share-bar { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--violet); opacity: .45; transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i, 0) * .15s); }
.sg-pay__share-row.is-me .sg-pay__share-bar { opacity: 1; }
.is-in .sg-pay__share-bar { transform: scaleX(1); }
.sg-pay__foot { margin-top: 6px; }
/* CPM : formule qui compte */
.sg-pay__cpm { display: flex; flex-direction: column; gap: 6px; }
.sg-pay__cpm-row { display: flex; align-items: baseline; gap: 8px; }
.sg-pay__cpm-big { font: 600 30px/34px var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); }
.sg-pay__cpm-big--result { color: var(--violet-strong); }
/* Cagnotte : podium qui monte */
.sg-pay__podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end; height: 100%; }
.sg-pay__step { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.sg-pay__step-bar { display: block; width: 100%; height: var(--h); border-radius: 8px 8px 4px 4px; background: var(--violet); opacity: .45; transform: scaleY(0); transform-origin: bottom; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) calc(.3s + var(--i, 0) * .18s); }
.sg-pay__step.is-first .sg-pay__step-bar { opacity: 1; }
.is-in .sg-pay__step-bar { transform: scaleY(1); }
.sg-pay__step-amt { color: var(--ink-muted); opacity: 0; transition: opacity .5s calc(1.1s + var(--i, 0) * .18s); }
.sg-pay__step.is-first .sg-pay__step-amt { color: var(--ink); font-weight: 600; }
.is-in .sg-pay__step-amt { opacity: 1; }
@media (max-width: 860px) {
  .sg-pay__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .sg-pay__visual { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-pay__share-bar, .sg-pay__step-bar { transform: none; transition: none; }
  .sg-pay__step-amt { opacity: 1; transition: none; }
}

/* ---------- Clippers landing · "Vos chaînes" : garanties + comptes connectés animés ---------- */
.sg-chan__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.sg-chan__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.sg-chan__copy .sg-landing__section-head .body { margin-top: 4px; max-width: 520px; }
.sg-chan__points { display: flex; flex-direction: column; gap: 12px; }
.sg-chan__points li { display: flex; align-items: flex-start; gap: 10px; }
.sg-chan__points li svg { color: var(--violet); flex: 0 0 auto; margin-top: 4px; }
.sg-chan__mock { justify-self: end; width: 100%; max-width: 480px; background: var(--surface); border: var(--border-hair) solid var(--line); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: 6px; }
.sg-chan__mock-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sg-chan__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-muted); }
.sg-chan__live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); position: relative; }
.sg-chan__live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--violet); animation: sg-ring 1.6s ease-out infinite; }
.sg-chan__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; opacity: 0; transform: translateY(10px); transition: opacity .5s calc(.45s + var(--i, 0) * .14s), transform .5s cubic-bezier(.2, .7, .2, 1) calc(.45s + var(--i, 0) * .14s); }
.is-in .sg-chan__row { opacity: 1; transform: none; }
.sg-chan__ok { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.sg-chan__ok svg { color: var(--violet); }
.sg-chan__views { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; min-width: 118px; text-align: right; }
.sg-chan__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 4px; }
.sg-chan__total-num { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--violet-strong); }
@media (max-width: 860px) {
  .sg-chan__grid { grid-template-columns: 1fr; gap: var(--space-6); }
  .sg-chan__mock { max-width: none; padding: var(--space-4); }
  .sg-chan__mock-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sg-chan__mock-head .sg-label, .sg-chan__live { white-space: nowrap; }
  .sg-chan__row { grid-template-columns: auto minmax(0, 1fr) auto; }
  .sg-chan__ok { display: none; }
  .sg-chan__views { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .sg-chan__row { opacity: 1; transform: none; transition: none; } .sg-chan__live-dot::after { animation: none; } }

/* ---------- Clippers landing · scène vidéo façon logiciel de montage (boucle 16 s, 4 extraits de 4 s) ---------- */
.sg-cut__stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.sg-cut__stage:not(.is-run) * { animation-play-state: paused !important; }
.sg-cut__stage * { animation-duration: 16s; animation-timing-function: linear; animation-iteration-count: infinite; }
.sg-cut__intro { max-width: none; } .sg-cut__intro .body { margin: 0; max-width: none; }
/* L'application de montage : fond sombre, aperçu, outils, pistes */
.sg-cut__app { --app-line: rgba(255, 255, 255, .09); --app-muted: #a0a0ab; --app-accent: #a985f0; min-width: 0; background: #15151a; color: #f2f2f5; border-radius: var(--radius-xl); overflow: hidden; display: flex; flex-direction: column; }
.sg-cut__top { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--app-line); min-width: 0; }
.sg-cut__creator { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; display: block; }
.sg-cut__top-title { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 13px; display: flex; align-items: baseline; gap: 8px; }
.sg-cut__top-sub { font-weight: 500; font-size: 11px; color: var(--app-muted); white-space: nowrap; }
.sg-cut__clock { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--app-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.sg-cut__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--app-accent); animation-name: sg-cut-rec; animation-duration: 1.2s; }
@keyframes sg-cut-rec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.sg-cut__export { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--violet); color: #fff; font-size: 12px; font-weight: 700; flex: 0 0 auto; }
.sg-cut__video { position: relative; aspect-ratio: 16 / 9; margin: 10px 12px 0; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.sg-cut__source { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-cut__tools { display: flex; align-items: center; gap: 4px; padding: 8px 12px 4px; min-width: 0; overflow: hidden; }
.sg-cut__tool { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: var(--radius-sm); font-size: 11.5px; font-weight: 600; color: var(--app-muted); white-space: nowrap; }
.sg-cut__tool.is-on { color: #fff; background: rgba(255, 255, 255, .08); }
.sg-cut__zoom { margin-left: auto; font-size: 11px; color: var(--app-muted); white-space: nowrap; }
/* Pistes : règle, pellicule des 4 extraits, forme d'onde, tête de lecture qui traverse */
.sg-cut__timeline { position: relative; margin: 0 12px 12px; padding-top: 18px; }
.sg-cut__ruler { position: relative; height: 16px; border-bottom: 1px solid var(--app-line); margin-bottom: 6px; background-image: repeating-linear-gradient(90deg, var(--app-line) 0 1px, transparent 1px 6.25%); background-size: 100% 5px; background-repeat: no-repeat; background-position: 0 100%; }
.sg-cut__ruler span { position: absolute; top: 0; font-size: 10px; color: var(--app-muted); transform: translateX(4px); }
.sg-cut__track { position: relative; height: 44px; border-radius: 6px; overflow: hidden; background-size: 100% 100%; background-repeat: no-repeat; }
.sg-cut__track--video { background-color: #222; }
.sg-cut__track--audio { height: 26px; margin-top: 6px; background-color: #1b1b21; background-size: 100% 100%; }
.sg-cut__gap { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #15151a; }
.sg-cut__range { position: absolute; top: 0; bottom: 0; width: 5%; border: 2px solid var(--app-accent); border-radius: 4px; background: rgba(169, 133, 240, .22); opacity: 0; }
.sg-cut__range[style*="--i:0"] { left: 7%; animation-name: sg-cut-r0; } .sg-cut__range[style*="--i:1"] { left: 32%; animation-name: sg-cut-r1; } .sg-cut__range[style*="--i:2"] { left: 57%; animation-name: sg-cut-r2; }
@keyframes sg-cut-r0 { 0%, 8% { opacity: 0; } 10%, 97% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
@keyframes sg-cut-r1 { 0%, 33% { opacity: 0; } 35%, 97% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
@keyframes sg-cut-r2 { 0%, 58% { opacity: 0; } 60%, 97% { opacity: 1; } 99.5%, 100% { opacity: 0; } }
.sg-cut__head { position: absolute; top: 18px; bottom: 0; width: 2px; margin-left: -1px; background: #fff; animation-name: sg-cut-headmove; z-index: 2; }
.sg-cut__head::before { content: ""; position: absolute; top: -6px; left: -5px; width: 12px; height: 12px; border-radius: 3px; background: #fff; transform: rotate(45deg); }
@keyframes sg-cut-headmove { 0% { left: 0%; } 100% { left: 100%; } }
.sg-cut__sc { position: absolute; top: -8px; width: 26px; height: 26px; margin-left: -13px; color: #fff; opacity: 0; animation-name: sg-cut-sc; z-index: 3; }
.sg-cut__sc svg { display: block; transform: rotate(90deg); }
@keyframes sg-cut-sc { 0%, 7.9% { opacity: 0; left: 7%; } 8%, 9% { opacity: 1; left: 7%; } 14% { opacity: 1; left: 12%; } 15%, 32.9% { opacity: 0; left: 32%; } 33%, 34% { opacity: 1; left: 32%; } 39% { opacity: 1; left: 37%; } 40%, 57.9% { opacity: 0; left: 57%; } 58%, 59% { opacity: 1; left: 57%; } 64% { opacity: 1; left: 62%; } 65%, 100% { opacity: 0; left: 62%; } }
.sg-cut__blade { transform-origin: 16.67px 16px; animation-duration: .3s; animation-timing-function: ease-in-out; animation-direction: alternate; }
.sg-cut__blade--a { animation-name: sg-cut-snip; } .sg-cut__blade--b { animation-name: sg-cut-snip-b; }
@keyframes sg-cut-snip { from { transform: rotate(-18deg); } to { transform: rotate(0deg); } }
@keyframes sg-cut-snip-b { from { transform: rotate(18deg); } to { transform: rotate(0deg); } }
/* Trois coupes, une par extrait (8 %, 33 %, 58 % de la boucle) : assombrissement, cadre 9:16, traits */
.sg-cut__dim { position: absolute; top: 0; bottom: 0; width: 34.18%; background: rgba(0, 0, 0, .55); opacity: 0; animation-name: sg-cut-pulse; }
.sg-cut__dim--l { left: 0; } .sg-cut__dim--r { right: 0; }
.sg-cut__crop { position: absolute; top: 0; height: 100%; aspect-ratio: 9 / 16; left: 50%; transform: translateX(-50%); border: 2px solid #fff; border-radius: 6px; opacity: 0; animation-name: sg-cut-pulse; }
.sg-cut__line { position: absolute; top: 0; height: 100%; width: 0; border-left: 2px dashed #fff; opacity: 0; animation-name: sg-cut-pulse; }
.sg-cut__line--l { left: 34.18%; } .sg-cut__line--r { left: 65.82%; }
@keyframes sg-cut-pulse { 0%, 6% { opacity: 0; } 8%, 16% { opacity: 1; } 19%, 31% { opacity: 0; } 33%, 41% { opacity: 1; } 44%, 56% { opacity: 0; } 58%, 66% { opacity: 1; } 69%, 100% { opacity: 0; } }
/* Le passage découpé part vers son téléphone (même trajectoire, décalée d'un extrait = 4 s) */
.sg-cut__piece { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 5; pointer-events: none; border-radius: 6px; overflow: hidden; opacity: 0; transform-origin: center; animation-name: sg-cut-fly; animation-timing-function: cubic-bezier(.3, .7, .2, 1); animation-delay: calc(var(--i) * 4s); will-change: transform; }
.sg-cut__piece img { width: 100%; height: 100%; object-fit: cover; display: block; }
@keyframes sg-cut-fly { 0%, 11% { opacity: 0; transform: none; } 12% { opacity: 1; transform: none; } 14% { opacity: 1; transform: scale(1.06); } 22% { opacity: 1; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1)); } 22.5%, 100% { opacity: 0; transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(var(--s, 1)); } }
/* Colonne droite : téléphones puis compteur de gains */
.sg-cut__right { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); min-width: 0; }
.sg-cut__earn { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; }
.sg-cut__earn-row { display: flex; align-items: baseline; gap: 18px; }
.sg-cut__earn-num { font-size: 30px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--violet-strong); min-width: 7ch; text-align: right; }
.sg-cut__earn-sub { white-space: nowrap; }
/* Écran d'attente des téléphones : la landing Clippeur en miniature, remplacée par le clip à son arrivée */
.sg-cut__idle { position: absolute; inset: 0; background: #f4f4f6; color: #15151a; font-family: var(--font-sans); font-size: 8.5px; line-height: 1.3; padding: 1.4em 1.1em; display: flex; flex-direction: column; gap: .8em; overflow: hidden; }
.sg-cut__idle-top { display: flex; align-items: center; gap: .5em; font-weight: 800; font-size: 1.15em; }
.sg-cut__idle-logo { width: 1.7em; height: 1.7em; border-radius: .45em; background: var(--violet); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .9em; }
.sg-cut__idle-h1 { font-weight: 800; font-size: 1.55em; line-height: 1.1; letter-spacing: -.02em; margin-top: .4em; }
.sg-cut__idle-btn { align-self: flex-start; background: var(--violet); color: #fff; font-weight: 700; padding: .55em 1em; border-radius: 999px; font-size: 1em; }
.sg-cut__idle-label { font-family: var(--font-mono); font-size: .8em; letter-spacing: .08em; text-transform: uppercase; color: #666670; margin-top: .6em; }
.sg-cut__idle-card { background: #fff; border: 1px solid #e3e3e8; border-radius: .9em; overflow: hidden; flex: 0 0 auto; }
.sg-cut__idle-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sg-cut__idle-meta { padding: .6em .7em .7em; display: flex; flex-direction: column; gap: .3em; }
.sg-cut__idle-title { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sg-cut__idle-row { display: flex; justify-content: space-between; gap: .5em; color: #666670; font-size: .9em; }
.sg-cut__idle-row .sg-mono { color: #15151a; font-weight: 600; }
.sg-cut__phone[style*="--i:0"] .sg-cut__idle { animation-name: sg-cut-i0; } .sg-cut__phone[style*="--i:1"] .sg-cut__idle { animation-name: sg-cut-i1; } .sg-cut__phone[style*="--i:2"] .sg-cut__idle { animation-name: sg-cut-i2; }
@keyframes sg-cut-i0 { 0%, 21.5% { opacity: 1; } 22%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes sg-cut-i1 { 0%, 46.5% { opacity: 1; } 47%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes sg-cut-i2 { 0%, 71.5% { opacity: 1; } 72%, 96% { opacity: 0; } 99%, 100% { opacity: 1; } }
.sg-cut__screen video { position: relative; z-index: 1; }
.sg-cut__ui { z-index: 2; }
.sg-cut__stage.is-static .sg-cut__idle { opacity: 0; }
/* Téléphones : chacun s'allume à l'arrivée de son passage (22 %, 47 %, 72 %) et joue le clip vertical */
.sg-cut__phones { display: flex; justify-content: center; align-items: flex-end; perspective: 1400px; perspective-origin: 50% 40%; }
.sg-cut__phone { width: 150px; aspect-ratio: 9 / 19; background: var(--ink); border-radius: 26px; padding: 8px; box-sizing: border-box; transform-style: preserve-3d; animation-name: sg-cut-float; animation-duration: 6s; animation-timing-function: ease-in-out; animation-direction: alternate; animation-delay: calc(var(--i) * -2s); }
.sg-cut__phone[style*="--i:0"] { transform: translateY(22px) rotateY(18deg); margin-right: -18px; }
.sg-cut__phone[style*="--i:1"] { position: relative; z-index: 1; }
.sg-cut__phone[style*="--i:2"] { transform: translateY(22px) rotateY(-18deg); margin-left: -18px; }
@keyframes sg-cut-float { from { translate: 0 0; } to { translate: 0 -8px; } }
.sg-cut__screen { position: relative; width: 100%; height: 100%; border-radius: 19px; overflow: hidden; background: #111; }
.sg-cut__screen video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; }
.sg-cut__phone[style*="--i:0"] .sg-cut__screen video { animation-name: sg-cut-s0; } .sg-cut__phone[style*="--i:1"] .sg-cut__screen video { animation-name: sg-cut-s1; } .sg-cut__phone[style*="--i:2"] .sg-cut__screen video { animation-name: sg-cut-s2; }
@keyframes sg-cut-s0 { 0%, 21.5% { opacity: 0; } 22%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes sg-cut-s1 { 0%, 46.5% { opacity: 0; } 47%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes sg-cut-s2 { 0%, 71.5% { opacity: 0; } 72%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.sg-cut__ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 12px 10px; color: #fff; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 30%, transparent 60%, rgba(0, 0, 0, .6)); opacity: 0; }
.sg-cut__phone[style*="--i:0"] .sg-cut__ui { animation-name: sg-cut-u0; } .sg-cut__phone[style*="--i:1"] .sg-cut__ui { animation-name: sg-cut-u1; } .sg-cut__phone[style*="--i:2"] .sg-cut__ui { animation-name: sg-cut-u2; }
@keyframes sg-cut-u0 { 0%, 23% { opacity: 0; } 26%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes sg-cut-u1 { 0%, 48% { opacity: 0; } 51%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
@keyframes sg-cut-u2 { 0%, 73% { opacity: 0; } 76%, 96% { opacity: 1; } 99%, 100% { opacity: 0; } }
.sg-cut__ui-top { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sg-cut__ui-top .sg-plat { width: 20px; height: 20px; }
.sg-cut__ui-bottom { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.sg-cut__views { font-family: var(--font-mono); font-size: 12px; display: inline-flex; align-items: baseline; gap: 4px; }
.sg-cut__views-in { display: inline-block; height: 1.2em; line-height: 1.2em; overflow: hidden; vertical-align: bottom; }
.sg-cut__views-in > span { display: block; animation-timing-function: steps(1, end); }
.sg-cut__phone[style*="--i:0"] .sg-cut__views-in > span { animation-name: sg-cut-c0; } .sg-cut__phone[style*="--i:1"] .sg-cut__views-in > span { animation-name: sg-cut-c1; } .sg-cut__phone[style*="--i:2"] .sg-cut__views-in > span { animation-name: sg-cut-c2; }
@keyframes sg-cut-c0 { 0%, 26% { transform: translateY(0); } 30% { transform: translateY(-1.2em); } 35% { transform: translateY(-2.4em); } 41%, 100% { transform: translateY(-3.6em); } }
@keyframes sg-cut-c1 { 0%, 51% { transform: translateY(0); } 55% { transform: translateY(-1.2em); } 60% { transform: translateY(-2.4em); } 66%, 100% { transform: translateY(-3.6em); } }
@keyframes sg-cut-c2 { 0%, 76% { transform: translateY(0); } 80% { transform: translateY(-1.2em); } 85% { transform: translateY(-2.4em); } 91%, 100% { transform: translateY(-3.6em); } }
/* Sans animation (préférence système) : affiche la scène figée, téléphones allumés */
.sg-cut__stage.is-static * { animation: none !important; }
.sg-cut__stage.is-static .sg-cut__dim, .sg-cut__stage.is-static .sg-cut__crop, .sg-cut__stage.is-static .sg-cut__line, .sg-cut__stage.is-static .sg-cut__range, .sg-cut__stage.is-static .sg-cut__screen video, .sg-cut__stage.is-static .sg-cut__ui { opacity: 1; }
.sg-cut__stage.is-static .sg-cut__sc, .sg-cut__stage.is-static .sg-cut__piece { display: none; } .sg-cut__stage.is-static .sg-cut__head { left: 40%; }
@media (max-width: 860px) {
  .sg-cut__stage { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .sg-cut__top-sub, .sg-cut__zoom, .sg-cut__tool--extra { display: none; }
  .sg-cut__tools { gap: 0; } .sg-cut__tool { padding: 5px 7px; font-size: 11px; }
  .sg-cut__track { height: 36px; } .sg-cut__track--audio { height: 20px; }
  .sg-cut__earn-row { gap: 14px; } .sg-cut__earn-num { font-size: 26px; }
  .sg-cut__idle { font-size: 6px; }
  .sg-cut__phones { perspective: 900px; }
  .sg-cut__phone { width: 104px; border-radius: 18px; padding: 5px; }
  .sg-cut__phone[style*="--i:0"] { margin-right: -10px; } .sg-cut__phone[style*="--i:2"] { margin-left: -10px; }
  .sg-cut__screen { border-radius: 14px; }
  .sg-cut__ui { padding: 8px 7px; } .sg-cut__ui-top, .sg-cut__ui-bottom, .sg-cut__views { font-size: 10px; }
  .sg-cut__ui-top .sg-plat { width: 16px; height: 16px; }
}

/* ---------- Creators landing · "Ce que vous ne faites plus" : trois figures en boucle ---------- */
.sg-save:not(.is-in) .sg-save__v * { animation-play-state: paused !important; }
.sg-save .sg-pay__visual { height: 200px; justify-content: center; }
.sg-save__flow { gap: 12px; }
/* 1 · Pellicule qui défile sous un scanner, moments repérés (boucle 12 s) */
.sg-save__scanhead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.sg-save__found-n, .sg-save__race-amt, .sg-save__join-n { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.sg-save__found-n > span, .sg-save__race-amt > span, .sg-save__join-n > span { display: block; }
.sg-save__found-n > span > span, .sg-save__race-amt > span > span, .sg-save__join-n > span > span { display: block; }
.sg-save__found-n > span { animation: sg-save-found-n 12s steps(1, end) infinite; }
@keyframes sg-save-found-n { 0%, 18% { transform: translateY(0); } 19%, 48% { transform: translateY(-1.3em); } 49%, 78% { transform: translateY(-2.6em); } 79%, 100% { transform: translateY(-3.9em); } }
.sg-save__film { position: relative; height: 54px; border-radius: 8px; overflow: hidden; background-color: #222; background-size: auto 100%; background-repeat: repeat-x; animation: sg-save-film 24s linear infinite; }
@keyframes sg-save-film { from { background-position: 0 0; } to { background-position: -1536px 0; } }
.sg-save__scan { position: absolute; top: 0; bottom: 0; left: 50%; width: 36px; margin-left: -18px; border: 2px solid #fff; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); animation: sg-save-scan 12s linear infinite; }
@keyframes sg-save-scan { 0%, 14% { border-color: #fff; } 16%, 26% { border-color: var(--violet); } 28%, 44% { border-color: #fff; } 46%, 56% { border-color: var(--violet); } 58%, 74% { border-color: #fff; } 76%, 86% { border-color: var(--violet); } 88%, 100% { border-color: #fff; } }
.sg-save__found { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.8); display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--violet); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; opacity: 0; animation: sg-save-found 12s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes sg-save-found { 0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 17%, 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 27%, 45% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 47%, 55% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 57%, 75% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 77%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 87%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } }
/* 2 · Deux factures qui courent : le monteur à l'heure, le clippeur aux vues (boucle 8 s) */
.sg-save__race { display: flex; flex-direction: column; gap: 14px; }
.sg-save__race-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label amt" "track track"; gap: 6px 10px; align-items: end; }
.sg-save__race-label { grid-area: label; display: flex; flex-direction: column; line-height: 1.25; }
.sg-save__race-amt { grid-area: amt; font-size: 15px; font-weight: 600; text-align: right; color: var(--ink-muted); }
.sg-save__race-amt--new { color: var(--violet-strong); }
.sg-save__race-track { grid-area: track; display: block; height: 8px; border-radius: 4px; background: rgba(106, 31, 214, .12); overflow: hidden; }
.sg-save__race-bar { display: block; height: 100%; border-radius: 4px; transform-origin: left; transform: scaleX(0); }
.sg-save__race-bar--old { background: var(--ink-faint); animation: sg-save-old 8s linear infinite; }
@keyframes sg-save-old { 0% { transform: scaleX(0); } 80%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.sg-save__race-amt > span { animation: sg-save-amt-old 8s steps(1, end) infinite; }
@keyframes sg-save-amt-old { 0%, 19% { transform: translateY(0); } 20%, 39% { transform: translateY(-1.3em); } 40%, 59% { transform: translateY(-2.6em); } 60%, 79% { transform: translateY(-3.9em); } 80%, 94% { transform: translateY(-5.2em); } 95%, 100% { transform: translateY(0); } }
.sg-save__race-bar--new { background: var(--violet); animation: sg-save-new 8s cubic-bezier(.2, .7, .2, 1) infinite; }
@keyframes sg-save-new { 0%, 30% { transform: scaleX(0); } 38%, 50% { transform: scaleX(.25); } 58%, 70% { transform: scaleX(.62); } 78%, 94% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.sg-save__race-amt--new > span { animation: sg-save-amt-new 8s steps(1, end) infinite; }
@keyframes sg-save-amt-new { 0%, 37% { transform: translateY(-1.3em); } 38%, 57% { transform: translateY(-2.6em); } 58%, 77% { transform: translateY(-3.9em); } 78%, 94% { transform: translateY(-5.2em); } 95%, 100% { transform: translateY(0); } }
/* 3 · Deux parcours : l'agence étape par étape jusqu'à J+21, la campagne Clippeur le jour même (boucle 8 s) */
.sg-save__flow { display: flex; flex-direction: column; }
.sg-save__flow-row { grid-template-areas: "label when" "steps steps"; }
.sg-save__flow-when { grid-area: when; height: auto; overflow: visible; opacity: 0; }
.sg-save__flow-when--old { animation: sg-save-when-old 8s steps(1, end) infinite; }
.sg-save__flow-when--new { animation: sg-save-when-new 8s steps(1, end) infinite; }
@keyframes sg-save-when-old { 0%, 74% { opacity: 0; } 75%, 93% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes sg-save-when-new { 0%, 16% { opacity: 0; } 17%, 93% { opacity: 1; } 94%, 100% { opacity: 0; } }
.sg-save__flow-steps { grid-area: steps; display: flex; gap: 6px; flex-wrap: wrap; }
.sg-save__flow-step { display: inline-block; padding: 3px 9px; border-radius: var(--radius-pill); background: rgba(106, 31, 214, .12); color: var(--ink-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; animation-duration: 8s; animation-timing-function: steps(1, end); animation-iteration-count: infinite; }
.is-old .sg-save__flow-step[style*="--i:0"] { animation-name: sg-save-step-o0; } .is-old .sg-save__flow-step[style*="--i:1"] { animation-name: sg-save-step-o1; } .is-old .sg-save__flow-step[style*="--i:2"] { animation-name: sg-save-step-o2; } .is-old .sg-save__flow-step[style*="--i:3"] { animation-name: sg-save-step-o3; }
.is-new .sg-save__flow-step[style*="--i:0"] { animation-name: sg-save-step-n0; } .is-new .sg-save__flow-step[style*="--i:1"] { animation-name: sg-save-step-n1; }
@keyframes sg-save-step-o0 { 0%, 9% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } 10%, 93% { background: var(--ink-faint); color: #fff; } 94%, 100% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } }
@keyframes sg-save-step-o1 { 0%, 30% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } 31%, 93% { background: var(--ink-faint); color: #fff; } 94%, 100% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } }
@keyframes sg-save-step-o2 { 0%, 52% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } 53%, 93% { background: var(--ink-faint); color: #fff; } 94%, 100% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } }
@keyframes sg-save-step-o3 { 0%, 74% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } 75%, 93% { background: var(--ink-faint); color: #fff; } 94%, 100% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } }
@keyframes sg-save-step-n0 { 0%, 9% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } 10%, 93% { background: var(--violet); color: #fff; } 94%, 100% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } }
@keyframes sg-save-step-n1 { 0%, 16% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } 17%, 93% { background: var(--violet); color: #fff; } 94%, 100% { background: rgba(106, 31, 214, .12); color: var(--ink-muted); } }
@media (prefers-reduced-motion: reduce) {
  .sg-save__v * { animation: none !important; }
  .sg-save__found { opacity: 1; transform: translate(-50%, -50%); } .sg-save__race-bar--old { transform: scaleX(1); } .sg-save__race-bar--new { transform: scaleX(1); } .sg-save__flow-when { opacity: 1; }
}
.sg-ctrl__row { grid-template-columns: auto minmax(0, 1fr) auto; }
.sg-ctrl__thumb { width: 44px; height: 30px; border-radius: 6px; overflow: hidden; background: var(--bg-sunken); flex: 0 0 auto; }
.sg-ctrl__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-ctrl__text { display: flex; flex-direction: column; min-width: 0; }
.sg-ctrl__verdict { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--violet-tint); color: var(--violet-strong); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; transform: scale(.85); transition: opacity .35s calc(1.1s + var(--i, 0) * .14s), transform .35s cubic-bezier(.2, .7, .2, 1) calc(1.1s + var(--i, 0) * .14s); }
.sg-ctrl__verdict.is-no { background: var(--bg-sunken); color: var(--ink-muted); border: var(--border-hair) solid var(--line); }
.is-in .sg-ctrl__verdict { opacity: 1; transform: none; }
.sg-ctrl .sg-chan__total-num { font-size: 13px; color: var(--ink); }
@media (max-width: 860px) { .sg-ctrl__verdict { padding: 3px 7px; font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .sg-save__mark, .sg-save__bill-row, .sg-ctrl__verdict { opacity: 1; transform: none; transition: none; } }

/* Creators hero: title on two lines, timeline without its card */
.sg-seg__hero--tight .sg-landing__title { font-size: 36px; line-height: 1.1; }
.sg-seg__visual--timeline .sg-v6__timeline { background: transparent; border: 0; border-radius: 0; padding: 0; }
@media (max-width: 1100px) { .sg-seg__hero--tight .sg-landing__title { font-size: 36px; } }
@media (max-width: 860px) { .sg-seg__hero--tight .sg-landing__title { font-size: 30px; } }
@media (max-width: 860px) { .sg-seg__hero { gap: var(--space-10); } }
/* Creators hero: stats right under the lead, CTA last */
.sg-seg__hero--tight .sg-landing__stats { margin-top: var(--space-8); }
.sg-seg__hero--tight .sg-landing__stats + .sg-landing__cta-row { margin-top: var(--space-8); }