/* =========================================================
   SmartServices30 — Design Tokens (Premium Dark)
   Phase 1 — Hero
   ========================================================= */

:root {
  /* ---------- Couleurs ---------- */
  --ss-bg:           #070710;
  --ss-bg-2:         #0A0A14;
  --ss-surface:      #0F0F1A;
  --ss-surface-2:    #14141F;
  --ss-border:       rgba(255, 255, 255, 0.08);
  --ss-border-strong:rgba(255, 255, 255, 0.16);

  --ss-text:         #FAFAFA;
  --ss-text-muted:   #9BA0B3;
  --ss-text-dim:     #6B7080;

  /* Accent gradient signature : cyan → violet → magenta */
  --ss-grad-1: #22D3EE;
  --ss-grad-2: #A78BFA;
  --ss-grad-3: #F472B6;
  --ss-gradient: linear-gradient(135deg, var(--ss-grad-1) 0%, var(--ss-grad-2) 50%, var(--ss-grad-3) 100%);
  --ss-gradient-soft: linear-gradient(135deg, rgba(34, 211, 238, 0.15) 0%, rgba(167, 139, 250, 0.15) 50%, rgba(244, 114, 182, 0.15) 100%);

  /* Accent vert électrique (succès, online, badges tech) */
  --ss-accent-2: #34D399;

  /* ---------- Typo ---------- */
  --ss-font-display: "Geist", "Inter Tight", system-ui, -apple-system, sans-serif;
  --ss-font-body:    "Inter Tight", "Inter", system-ui, -apple-system, sans-serif;
  --ss-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ss-display-tracking: -0.04em;
  --ss-body-tracking:    -0.01em;

  /* ---------- Espacements ---------- */
  --ss-container-max: 1440px;
  --ss-container-pad: clamp(1.5rem, 4vw, 3rem);

  /* ---------- Radii ---------- */
  --ss-radius-sm: 8px;
  --ss-radius:    12px;
  --ss-radius-lg: 16px;
  --ss-radius-xl: 24px;

  /* ---------- Shadows / glows ---------- */
  --ss-shadow-card:
    0 1px 0 0 rgba(255,255,255,0.04) inset,
    0 0 0 1px var(--ss-border),
    0 20px 60px -20px rgba(0,0,0,0.6);
  --ss-glow-cyan:    0 0 60px -10px rgba(34, 211, 238, 0.5);
  --ss-glow-violet:  0 0 60px -10px rgba(167, 139, 250, 0.5);

  /* ---------- Easings & durations ---------- */
  --ss-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ss-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---------- Z-index ---------- */
  --ss-z-nav: 50;
  --ss-z-overlay: 90;
  --ss-z-modal: 100;
}

/* =========================================================
   Reset minimal & base globale (uniquement sur front-page premium)
   ========================================================= */
body.ss-premium {
  background: var(--ss-bg);
  color: var(--ss-text);
  font-family: var(--ss-font-body);
  font-feature-settings: "ss01", "ss02", "cv11";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--ss-body-tracking);
  overflow-x: clip;
}

body.ss-premium *,
body.ss-premium *::before,
body.ss-premium *::after {
  box-sizing: border-box;
}

body.ss-premium a {
  color: inherit;
  text-decoration: none;
}

body.ss-premium img,
body.ss-premium svg {
  display: block;
  max-width: 100%;
}

.ss-container {
  width: 100%;
  max-width: var(--ss-container-max);
  margin-inline: auto;
  padding-inline: var(--ss-container-pad);
}

.ss-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ss-font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ss-text-muted);
}

.ss-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ss-accent-2);
  box-shadow: 0 0 12px var(--ss-accent-2);
}

.ss-gradient-text {
  background: var(--ss-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Bouton premium */
.ss-btn {
  --btn-pad-y: 0.875rem;
  --btn-pad-x: 1.5rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--ss-radius);
  font-family: var(--ss-font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.4s var(--ss-ease-out), box-shadow 0.4s var(--ss-ease-out);
  white-space: nowrap;
  border: none;
}

.ss-btn:hover { transform: translateY(-1px); }
.ss-btn:active { transform: translateY(0); }

.ss-btn-primary,
.ss-btn--primary {
  background: linear-gradient(135deg, var(--ss-grad-1, #22D3EE), var(--ss-grad-2, #A78BFA));
  color: #07070F;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.25) inset,
    0 10px 30px -10px rgba(34,211,238,0.45);
}
.ss-btn-primary:hover,
.ss-btn--primary:hover {
  color: #07070F;
  box-shadow:
    0 1px 0 0 rgba(255,255,255,0.3) inset,
    0 20px 40px -10px rgba(167,139,250,0.55),
    var(--ss-glow-cyan, 0 0 24px rgba(34,211,238,0.35));
  filter: brightness(1.05);
}

.ss-btn-ghost,
.ss-btn--ghost {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ss-text, #E5E7EB);
  border: 1px solid var(--ss-border, rgba(255,255,255,0.12));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ss-btn-ghost:hover,
.ss-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--ss-border-strong, rgba(255,255,255,0.25));
  color: #fff;
}

/* Safety net : un .ss-btn sans modificateur reste lisible */
.ss-btn { color: var(--ss-text, #E5E7EB); text-decoration: none; }
.ss-btn:visited { color: inherit; }

.ss-btn .ss-btn-arrow {
  width: 16px;
  height: 16px;
  transition: transform 0.4s var(--ss-ease-out);
}
.ss-btn:hover .ss-btn-arrow {
  transform: translate(2px, -2px);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  body.ss-premium *,
  body.ss-premium *::before,
  body.ss-premium *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}