/*
 * Sillon Design System v1 — Day 11 v3 Mission CC design-α REFONTE
 *
 * Variables CSS centralisées + classes utilitaires extraites empirique RÉEL
 * depuis les 3 HTML Stefani existants (Pattern P9.2 sincère absolu — pas
 * d'invention from scratch).
 *
 * Servi via Express static `app.use(express.static('frontend'))` à
 * engine/api.ts:63 — aucune modification mount nécessaire.
 *
 * Consommé par <link rel="stylesheet" href="/sillon-design.css"> dans :
 *   - frontend/demos-stefani.html (388L)
 *   - frontend/demos-stefani-detail.html (796L)
 *   - frontend/demos-stefani-login.html (185L)
 *
 * Stratégie d'intégration additive : ce fichier déclare un namespace
 * `--sillon-*` et `.sillon-*` collision-safe. Les `<style>` inline existants
 * dans chaque HTML restent intacts et conservent priorité par cascade
 * (préservation isolation visuelle, 0 régression). Cf. ADR-0073.
 *
 * Foundation réutilisable Mission CC vende-α + daniel-α (Wave 2 Phase 1).
 * God-node deny-write absolu : engine/api/demos-stefani.ts NON TOUCHÉ.
 */

:root {
  /* ── Palette de fond Sillon (identitaire) ── */
  --sillon-bg: #0a0a0a;
  --sillon-bg-2: #111111;
  --sillon-bg-3: #161616;

  /* ── Palette de texte (3 niveaux contraste) ── */
  --sillon-fg: #f5f5f5;
  --sillon-fg-2: #b5b5b5;
  --sillon-fg-3: #7a7a7a;

  /* ── Couleur accent identitaire ── */
  --sillon-accent: #00F5A0;
  --sillon-accent-soft: rgba(0, 245, 160, 0.1);
  --sillon-accent-border: rgba(0, 245, 160, 0.25);

  /* ── Bordures + cartes ── */
  --sillon-border: #262626;
  --sillon-border-2: #2a2a2a;
  --sillon-card: #141414;
  --sillon-card-2: #1a1a1a;

  /* ── Badges types démos (5 types templates) ── */
  --sillon-badge-guest: #3b82f6;
  --sillon-badge-expert: #8b5cf6;
  --sillon-badge-saga: #f59e0b;
  --sillon-badge-thematic: #ef4444;
  --sillon-badge-cross: #00F5A0;

  /* ── État erreur ── */
  --sillon-error: #ef4444;

  /* ── Typographie ── */
  --sillon-font-sans: 'Inter', system-ui, -apple-system, sans-serif;

  /* ── Espacement (échelle 4-8-16-24-32) ── */
  --sillon-space-xs: 4px;
  --sillon-space-sm: 8px;
  --sillon-space-md: 16px;
  --sillon-space-lg: 24px;
  --sillon-space-xl: 32px;

  /* ── Radius (échelle 4-8-12-16) ── */
  --sillon-radius-sm: 4px;
  --sillon-radius-md: 8px;
  --sillon-radius-lg: 12px;
  --sillon-radius-xl: 16px;
}

/* ─────────────────────────────────────────────────────────────────────
 * Classes utilitaires opt-in (préfixe `.sillon-*` collision-safe)
 * ───────────────────────────────────────────────────────────────────── */

.sillon-spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--sillon-border);
  border-top-color: var(--sillon-accent);
  animation: sillon-spin 0.7s linear infinite;
  margin: 0 auto 16px;
}

@keyframes sillon-spin {
  to {
    transform: rotate(360deg);
  }
}

.sillon-btn-primary {
  padding: 6px 14px;
  border-radius: var(--sillon-radius-md);
  font-size: 12px;
  font-weight: 700;
  background: var(--sillon-accent);
  color: #000;
  border: none;
  cursor: pointer;
  font-family: var(--sillon-font-sans);
  transition: opacity 0.15s;
}
.sillon-btn-primary:hover {
  opacity: 0.88;
}
.sillon-btn-primary:active {
  opacity: 0.76;
}

.sillon-btn-ghost {
  padding: 6px 12px;
  border-radius: var(--sillon-radius-md);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--sillon-fg-3);
  border: 1px solid var(--sillon-border);
  cursor: pointer;
  font-family: var(--sillon-font-sans);
  transition: border-color 0.15s, color 0.15s;
}
.sillon-btn-ghost:hover {
  border-color: var(--sillon-border-2);
  color: var(--sillon-fg-2);
}

.sillon-badge {
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sillon-badge-demo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sillon-accent-soft);
  color: var(--sillon-accent);
  border: 1px solid var(--sillon-accent-border);
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
}

.sillon-card {
  background: var(--sillon-card);
  border: 1px solid var(--sillon-border);
  border-radius: var(--sillon-radius-lg);
  padding: 20px;
}

.sillon-col-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sillon-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--sillon-fg-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ─────────────────────────────────────────────────────────────────────
 * Mode présentation cinématique F5 (toggle via sillon-presenting.js)
 *
 * Cachés en mode présentation : nav, topbar, login-card, hero, demos-header,
 * panneaux latéraux 3-col detail (sources + studio).
 *
 * Élargis : workspace brief, demos-grid (espace maximum slide-like).
 * ───────────────────────────────────────────────────────────────────── */

body.sillon-presenting nav,
body.sillon-presenting .topbar,
body.sillon-presenting .hero,
body.sillon-presenting .demos-header,
body.sillon-presenting .col-sources,
body.sillon-presenting .col-studio,
body.sillon-presenting .login-card {
  display: none !important;
}

body.sillon-presenting .workspace,
body.sillon-presenting .demos-section {
  padding: 48px !important;
}

body.sillon-presenting .col-brief {
  width: 100%;
}

body.sillon-presenting .brief-scroll {
  padding: 24px 64px 64px !important;
}

body.sillon-presenting .brief-content {
  max-width: 920px;
  font-size: 1.05em;
  line-height: 1.75;
}

body.sillon-presenting .demos-grid {
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)) !important;
  gap: 24px !important;
}

/* Indicateur visuel discret mode présentation actif */
.sillon-presenting-hint {
  position: fixed;
  bottom: 16px;
  right: 16px;
  background: var(--sillon-accent);
  color: #000;
  padding: 6px 12px;
  border-radius: var(--sillon-radius-md);
  font-family: var(--sillon-font-sans);
  font-size: 11px;
  font-weight: 700;
  z-index: 9999;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 245, 160, 0.25);
}