/* ─── Thème web « ChatGPT » pour clip.wesma.app ──────────────────────────────────
   Même langage visuel que chat.wesma.app : noir pur, surfaces grises plates (pas de verre
   flou), police système de ChatGPT, titres moins lourds, boutons pilule blancs, accents
   bleu-logo. Couche ajoutée APRÈS style.css/v3.css de l'app : l'app de bureau ne change pas.
   L'app écrit beaucoup de styles en dur (rgba + backdrop-filter) → !important ciblés. */

:root, :root[data-theme], :root[data-theme="system"] {
  --sidebar-w: 260px;
  --topbar-h: 52px;

  --bg-app: #000000;
  --sidebar-bg: #000000;
  --main-bg: #000000;
  --card-bg: #171717;
  --elevated: #262626;
  --input-bg: #1c1c1c;
  --input-border: rgba(255, 255, 255, 0.1);
  --input-color: #ececec;
  --hover-bg: rgba(255, 255, 255, 0.06);

  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text-primary: #ececec;
  --text-secondary: #afafaf;
  --text-muted: #8f8f8f;

  --accent: #ececec;
  --accent-hover: #ffffff;
  --accent-dim: rgba(255, 255, 255, 0.06);
  --accent-secondary: #8cc8dc;
  --success: #34c759;

  --radius: 12px;
  --radius-lg: 20px;
  --radius-sm: 10px;

  --font-display: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-text: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

  --w-brand: #8cc8dc;
  --w-brand-strong: #5aa7c2;
  --w-brand-grad: linear-gradient(135deg, #a9d6e5, #4f9bb8);
  --w-surface: #262626;
  --w-composer: #1c1c1c;
}

html, body {
  background: #000 !important;
  color: var(--text-primary);
  font-family: var(--font-text) !important;
  -webkit-font-smoothing: antialiased;
}

/* Fond d'écran personnalisable de l'app → noir uni comme ChatGPT. */
#bg-layer { background: #000 !important; background-image: none !important; }

/* Plus de verre flou nulle part dans l'app. */
.app *, .app *::before, .app *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

::selection { background: rgba(140, 200, 220, 0.35); }
* { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }

/* ─── Barre latérale ─────────────────────────────────────── */
.sidebar { background: #000 !important; border-right: 1px solid var(--border) !important; }
.sidebar-drag { height: 8px !important; }
.sidebar-logo { background: none !important; padding: 10px 18px 18px !important; }
.logo-text { font-size: 22px !important; letter-spacing: .01em !important; color: #ececec !important; }
.sidebar-nav { padding: 0 8px !important; gap: 22px !important; }
.nav-section { gap: 1px !important; }
.nav-section-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  padding: 0 10px 6px !important;
}
.nav-item {
  font-size: 15px !important;
  font-weight: 400 !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  color: var(--text-primary) !important;
  gap: 12px !important;
}
.nav-item .nav-icon svg { opacity: .85; }
.nav-item:hover { background: var(--hover-bg) !important; }
.nav-item.active { background: var(--w-surface) !important; font-weight: 400 !important; box-shadow: none !important; border: 0 !important; outline: 0 !important; }
.nav-badge, .nav-badge.new, .nav-badge.soon {
  background: rgba(140, 200, 220, 0.14) !important;
  color: var(--w-brand) !important;
  border: 0 !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
}
.sidebar-footer { border-top: 1px solid var(--border) !important; padding: 12px 14px !important; }
.plan-text, .app-version { font-size: 13px !important; }

/* ─── Barre du haut ──────────────────────────────────────── */
.topbar {
  background: #000 !important;
  border-bottom: 0 !important;
  padding: 0 20px !important;
}
.breadcrumb { font-size: 15px !important; }
.breadcrumb-current { font-weight: 500 !important; }
.status-badge { background: var(--w-surface) !important; border: 0 !important; border-radius: 999px !important; }

/* ─── Écrans : titres façon ChatGPT (moins gras, plus calmes) ─ */
.main, .content, .main-body { background: #000 !important; }
.screen-title {
  font-weight: 500 !important;
  font-size: 30px !important;
  letter-spacing: -0.01em !important;
  color: var(--text-primary) !important;
}
.screen-sub { font-size: 15px !important; color: var(--text-secondary) !important; }
h1, h2, h3 { font-family: var(--font-display); }
.home-projects-title, .section-title { font-weight: 500 !important; font-size: 18px !important; }

/* ─── Cartes et surfaces : plates, bord fin, coins arrondis ─ */
.stat-card, .settings-section, .clip-card, .vod-clip-card, .plan-card, .home-hero,
.creator-profile-step, .card, .panel {
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
  border-radius: var(--radius-lg) !important;
}
.stat-card:hover, .clip-card:hover, .vod-clip-card:hover { transform: none !important; background: #1d1d1d !important; border-color: var(--border-strong) !important; }
.stat-value { font-weight: 500 !important; }

/* Zone « Glisse ta vidéo ici » = gros composer ChatGPT. */
.home-hero-drop {
  background: var(--w-composer) !important;
  border: 1px solid var(--border) !important;
  border-radius: 28px !important;
}
.home-hero-drop:hover, .home-hero-drop.drag-over { border-color: var(--w-brand-strong) !important; background: #202020 !important; }
.home-hero-drop-title { font-weight: 500 !important; font-size: 20px !important; color: var(--text-primary) !important; }
.home-tool-circle { background: var(--w-surface) !important; border: 0 !important; box-shadow: none !important; }
.home-tool:hover .home-tool-circle { background: #333 !important; }

/* ─── Boutons ────────────────────────────────────────────── */
.btn-primary, .btn-accent, .plan-upgrade-btn {
  background: #ececec !important;
  color: #0d0d0d !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 10px 18px !important;
  transform: none !important;
}
.btn-primary:hover, .btn-accent:hover, .plan-upgrade-btn:hover { background: #fff !important; }
.btn-primary:disabled, .btn-accent:disabled { opacity: .35 !important; }
.btn-sm {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
}
.btn-sm:hover { background: var(--hover-bg) !important; }

/* ─── Champs ─────────────────────────────────────────────── */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]),
select, textarea {
  background: var(--w-composer) !important;
  border: 1px solid var(--input-border) !important;
  border-radius: 14px !important;
  color: var(--input-color) !important;
  font-family: var(--font-text) !important;
}
input:focus, select:focus, textarea:focus { border-color: var(--w-brand-strong) !important; box-shadow: none !important; outline: none !important; }
input::placeholder, textarea::placeholder { color: var(--text-muted) !important; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--w-brand-strong); }

/* ─── Fenêtres et menus ──────────────────────────────────── */
.v3-modal, .v3-toast { border-radius: var(--radius-lg); }
.v3-modal, .v3-toast { background: var(--w-surface) !important; border: 1px solid var(--border) !important; box-shadow: 0 8px 32px rgba(0, 0, 0, .45) !important; }
.v3-modal-bg { background: rgba(0, 0, 0, .55) !important; }

/* Accents : bleu du logo au lieu du blanc / bleu générique. */
a { color: var(--w-brand); }
.success, .text-success { color: var(--success) !important; }

/* Titres de section (Paramètres…) : sans majuscules forcées, comme ChatGPT. */
.settings-section-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--text-primary) !important;
}
.settings-label { font-size: 14px !important; }
.settings-value { font-size: 14px !important; }