/* ═══════════════════════════════════════════════════════════════
   AXIOMDEV — KINETIC OBSIDIAN PERFORMANCE
   Couche de design globale. Chargée en dernier sur chaque page,
   elle re-thème l'ensemble du site (tokens + composants).
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ────────────────────────────────────────────────── */
:root {
  /* surfaces obsidian */
  --bg:          #050505;
  --bg-2:        #0a0b0c;
  --bg-3:        #101214;
  --bg-card:     #0a0b0c;
  --surface:     rgba(255,255,255,.03);
  --glass:       rgba(255,255,255,.04);

  /* bordures */
  --border:      rgba(255,255,255,.07);
  --border-2:    rgba(255,255,255,.14);
  --border-h:    rgba(52,211,153,.45);

  /* accents émeraude → cyan */
  --cyan:        #34d399;
  --cyan-dim:    rgba(52,211,153,.55);
  --cyan-glow:   rgba(52,211,153,.10);
  --green:       #34d399;
  --green-dim:   rgba(52,211,153,.12);
  --teal:        #22d3ee;
  --blue:        #22d3ee;
  --purple:      #a78bfa;
  --purple-dim:  rgba(167,139,250,.12);
  --orange:      #fbbf24;
  --orange-dim:  rgba(251,191,36,.12);
  --red:         #f87171;
  --warn:        #f87171;

  /* texte */
  --text:        #a1a1aa;
  --text-bright: #fafafa;
  --muted:       #71717a;

  /* typo */
  --ff-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --ff-body: 'Inter', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 18px;
  --max-w: 1180px;

  --glow: 0 0 0 1px rgba(255,255,255,.04), 0 18px 50px -20px rgba(52,211,153,.25);
  --glow-strong: 0 0 0 1px rgba(52,211,153,.3), 0 24px 70px -24px rgba(52,211,153,.45);
  --card-dim: rgba(255,255,255,.05);
  --card-accent: rgba(52,211,153,.5);
}

/* ── 2. BASE ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
body {
  font-family: var(--ff-body);
  background: var(--bg);
  color: var(--text);
  font-weight: 400;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* halos aurora, plein écran, derrière tout le contenu */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60rem 40rem at 12% -10%, rgba(52,211,153,.13), transparent 60%),
    radial-gradient(50rem 36rem at 88% 8%, rgba(34,211,238,.10), transparent 62%),
    radial-gradient(60rem 50rem at 50% 110%, rgba(52,211,153,.07), transparent 60%);
  animation: obsDrift 22s ease-in-out infinite alternate;
}
@keyframes obsDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(0,-2%,0) scale(1.06); }
}
/* grain fin */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* on retire l'ancien décor "sci-fi" */
.scan-bar, .hud-corners, .hud-corners-2,
.data-stream-left, .data-stream-right,
.status-bar, #particles { display: none !important; }

.hud-grid {
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) !important;
  background-size: 96px 96px !important;
  mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 10%, transparent 75%) !important;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 25%, #000 10%, transparent 75%) !important;
}

section, footer, nav, main { position: relative; z-index: 1; }
.container { max-width: var(--max-w); padding: 0 28px; }

/* ── 3. TYPOGRAPHIE ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, .logo, .stat-val, .metric-num, .num {
  font-family: var(--ff-head) !important;
  text-transform: none !important;
  letter-spacing: -0.035em !important;
  color: var(--text-bright);
}
h1 { font-weight: 800 !important; line-height: 1.02 !important; }
h2 { font-weight: 800 !important; line-height: 1.06 !important; }
h3, h4 { font-weight: 700 !important; line-height: 1.25 !important; }

.page-hero h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); max-width: 18ch; }
h2.stitle { font-size: clamp(1.9rem, 4vw, 3rem); }
h3.stitle-sm { font-size: clamp(1.15rem, 2.4vw, 1.6rem); }

.hero h1, .hero-title, .hero-t {
  font-size: clamp(2.6rem, 7.2vw, 5.4rem) !important;
  font-weight: 800 !important;
  line-height: .98 !important;
  letter-spacing: -0.045em !important;
}

p { letter-spacing: -0.003em; }

/* labels monospace */
.slabel, .mono-label, .bc-tag, .stat-label, .fcopy, .floc, .breadcrumb {
  font-family: var(--ff-mono) !important;
  text-transform: uppercase;
  letter-spacing: .22em !important;
  font-size: .66rem !important;
  color: var(--cyan);
}
.slabel { color: var(--cyan); }
.slabel::before { content: 'SYS ::'; color: rgba(52,211,153,.5); letter-spacing: .18em; }
.stat-label, .fcopy, .floc, .breadcrumb { color: var(--muted); }

/* dégradé texte */
.grad, .text-gradient {
  background: linear-gradient(105deg, #34d399 0%, #6ee7b7 38%, #22d3ee 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: none !important;
}

/* ── 4. NAVIGATION ────────────────────────────────────────────── */
nav {
  padding: 16px 0 !important;
  background: rgba(5,5,5,.62) !important;
  backdrop-filter: blur(22px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(160%) !important;
  border-bottom: 1px solid var(--border) !important;
}
nav::after { opacity: .25 !important; background: linear-gradient(90deg, transparent, rgba(52,211,153,.5), transparent) !important; }
.logo { font-size: 1.02rem !important; letter-spacing: -0.03em !important; color: var(--text-bright) !important; font-weight: 800 !important; }
.logo span { color: var(--muted); font-weight: 500; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 11px !important;
  border: 1px solid rgba(52,211,153,.35) !important;
  background: linear-gradient(140deg, rgba(52,211,153,.18), rgba(34,211,238,.10)) !important;
  color: #d1fae5 !important; box-shadow: 0 10px 30px -14px rgba(52,211,153,.7) !important;
  font-family: var(--ff-head); font-weight: 800;
}
.logo-mark::after { border-color: rgba(255,255,255,.06) !important; border-radius: 8px; }
.nav-links a {
  font-family: var(--ff-body) !important;
  font-size: .875rem !important; text-transform: none !important;
  letter-spacing: -0.01em !important; color: var(--text) !important;
}
.nav-links a:hover { color: var(--text-bright) !important; }
.nav-links a::after { box-shadow: none !important; background: var(--cyan) !important; }

.nav-cta, .cta-btn, .btn-p, .btn-primary {
  border-radius: 999px !important;
  font-family: var(--ff-body) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  font-weight: 600 !important;
  background: linear-gradient(120deg, #34d399, #22d3ee) !important;
  color: #04140f !important;
  border: 1px solid transparent !important;
  box-shadow: 0 14px 40px -18px rgba(52,211,153,.9) !important;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.nav-cta:hover, .cta-btn:hover, .btn-p:hover, .btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 20px 55px -18px rgba(52,211,153,1) !important;
}
.btn, .btn-s, .btn-secondary {
  border-radius: 999px !important;
  font-family: var(--ff-body) !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  transition: transform .25s ease, border-color .25s ease, background .25s ease !important;
}
.btn:hover, .btn-s:hover, .btn-secondary:hover { transform: translateY(-2px); }

/* ── 5. CARTES BENTO / VERRE FUMÉ ─────────────────────────────── */
.feature-card, .stat-card, .link-card, .faq-item, .blog-card,
.cta-banner, .bento, .card, .metric, .chip, .case-card, .exp-card,
.service-card, .info-card, .value-card, .step-card, .price-card {
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.018)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -40px rgba(0,0,0,.9);
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease !important;
}
.feature-card:hover, .link-card:hover, .blog-card:hover, .bento:hover,
.card:hover, .case-card:hover, .service-card:hover, .step-card:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(52,211,153,.28) !important;
  box-shadow: 0 30px 70px -34px rgba(52,211,153,.35) !important;
}
.feature-card::before { background: linear-gradient(90deg, #34d399, #22d3ee) !important; height: 1px !important; }
.feature-card .fc-icon {
  border-radius: 12px !important;
  background: rgba(52,211,153,.08) !important;
  border: 1px solid rgba(52,211,153,.18) !important;
}
.feature-card h4, .blog-card h3 {
  font-size: 1.02rem !important; letter-spacing: -0.03em !important;
  text-transform: none !important; font-weight: 700 !important;
}
.stat-val, .metric-num, .num {
  color: transparent !important;
  background: linear-gradient(105deg, #34d399, #22d3ee) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  text-shadow: none !important;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem) !important;
  font-weight: 800 !important;
}

/* CTA final */
.cta-banner {
  padding: clamp(38px, 6vw, 72px) !important;
  border-color: rgba(52,211,153,.22) !important;
  background:
    radial-gradient(60rem 24rem at 50% -30%, rgba(52,211,153,.16), transparent 65%),
    linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)) !important;
}
.cta-banner::before { background: linear-gradient(90deg, transparent, #34d399, transparent) !important; opacity: .7 !important; }

/* FAQ */
.faq-item.open { border-color: rgba(52,211,153,.3) !important; }
.faq-q { font-family: var(--ff-body) !important; font-size: .98rem !important; padding: 22px 26px !important; }
.faq-a { font-size: .92rem !important; line-height: 1.8 !important; }

/* liens / tags */
.tag, .chip, .pill {
  border-radius: 999px !important;
  font-family: var(--ff-mono) !important;
  font-size: .66rem !important;
  letter-spacing: .12em !important;
  text-transform: uppercase;
}
a { text-underline-offset: 3px; }

/* prose */
.content-prose p, .content-prose ul li { color: var(--text); }
.content-prose h3 {
  font-family: var(--ff-head) !important; font-size: 1.15rem !important;
  text-transform: none !important; letter-spacing: -0.03em !important;
  color: var(--text-bright) !important; border-top-color: var(--border) !important;
}
.content-prose ul li::before { content: '—'; color: var(--cyan); }

/* sections */
.content-section, .links-section { padding: clamp(64px, 9vw, 116px) 0; }
.content-section + .content-section { border-top: 1px solid var(--border); }
.page-hero { padding: clamp(150px, 18vw, 210px) 0 clamp(70px, 9vw, 110px); }
.page-hero .hero-line { background: linear-gradient(90deg, rgba(52,211,153,.5), transparent) !important; }
.page-hero .hero-sub, .ssub { color: var(--muted); font-size: 1.05rem; line-height: 1.75; }

/* footer */
footer { border-top: 1px solid var(--border); padding: 52px 0 !important; }
.flinks a { font-family: var(--ff-mono) !important; font-size: .68rem !important; letter-spacing: .14em !important; }
.flinks a:hover { color: var(--cyan) !important; }

/* formulaires */
input, textarea, select {
  font-family: var(--ff-body) !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  color: var(--text-bright) !important;
  transition: border-color .25s ease, box-shadow .25s ease !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(52,211,153,.45) !important;
  box-shadow: 0 0 0 3px rgba(52,211,153,.12) !important;
}
button[type="submit"], .form button {
  border-radius: 999px !important;
  background: linear-gradient(120deg, #34d399, #22d3ee) !important;
  color: #04140f !important; border: none !important;
  font-family: var(--ff-body) !important; font-weight: 600 !important;
  text-transform: none !important; letter-spacing: -0.01em !important;
}

/* animations d'apparition */
.reveal { transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1); }
.glitch { animation: none !important; }

::selection { background: rgba(52,211,153,.28); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(52,211,153,.35); }

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .cta-banner { padding: 34px 22px !important; }
}

@media (prefers-reduced-motion: reduce) {
  body::before { animation: none !important; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── 6. CORRECTIFS FINAUX ─────────────────────────────────────── */
/* boutons : pas de découpes angulaires héritées, taille lisible */
.nav-cta, .cta-btn, .btn, .btn-p, .btn-s, .btn-primary, .btn-secondary,
button[type="submit"], .form button, .tag, .chip, .pill {
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
.btn, .btn-p, .btn-s, .cta-btn, .btn-primary, .btn-secondary {
  padding: 15px 30px !important;
  font-size: .95rem !important;
  display: inline-flex !important;
  align-items: center; gap: 8px;
}
.nav-cta { padding: 11px 22px !important; font-size: .86rem !important; }
.btn-s, .btn-secondary {
  background: rgba(255,255,255,.04) !important;
  color: var(--text-bright) !important;
  border: 1px solid var(--border-2) !important;
  box-shadow: none !important;
}
.btn-s:hover, .btn-secondary:hover { border-color: rgba(52,211,153,.4) !important; background: rgba(52,211,153,.08) !important; }

/* titres hero : plafond de taille pour rester sur 2-3 lignes */
.hero h1, .hero-title, .hero-t { font-size: clamp(2.4rem, 5.4vw, 4.2rem) !important; max-width: 20ch; margin-inline: auto; }

/* espaces morts après le trait de hero */
.page-hero .hero-line { margin-top: 34px !important; margin-bottom: 0 !important; }
.page-hero { padding-bottom: clamp(40px, 5vw, 64px) !important; }

/* liens dans le contenu */
main a:not(.btn):not(.btn-p):not(.btn-s):not(.cta-btn):not(.nav-cta):not(.link-card):not(.blog-card),
.content-prose a, .content-section a:not(.btn):not(.cta-btn):not(.link-card):not(.blog-card),
.faq-a a, footer a {
  color: var(--cyan);
  text-decoration-color: rgba(52,211,153,.35);
}
main a:hover, .content-prose a:hover { color: #6ee7b7; }

/* cartes : icônes emoji lisibles */
.fc-icon, .lc-icon { font-family: 'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji', var(--ff-body) !important; }