/* Sparktacus : staging Opti UI-UX (direction A, resserree).
   DA design-system Sparktacus (charte v1 2026-06-06) : Barlow Condensed + Inter,
   copper #C4622D, fonds stone/deep adoucis (v2 : blancs desatures, moins de fatigue).
   Auto-contenu, aucune dependance a styles.css prod. */

/* ===== Fonts de marque auto-hebergees (EU/RGPD, zero CDN) ===== */
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/assets/fonts/ds/BarlowCondensed-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/ds/BarlowCondensed-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700 800; font-display: swap;
  src: url('/assets/fonts/ds/BarlowCondensed-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/assets/fonts/ds/Inter-var.woff2') format('woff2');
}

/* ===== Tokens (design system Sparktacus, palette adoucie v2) ===== */
:root {
  --ink-primary:   #1C1A18;
  --bg-deep:       #121110;
  --bg-stone:      #ECE6DD; /* pierre desaturee (etait #F2EDE8) */
  --logo-reversed: #DED7CD; /* creme adouci sur fond sombre (etait #EDE8E3) */
  --accent-copper: #C4622D;
  --accent-ember:  #8C2E0F;
  --neutral-700:   #3D3A37;
  --neutral-500:   #615D59; /* fonce pour rester AA sur stone adouci */
  --neutral-200:   #C9C4BE;
  --card-bg:       #F8F4EE; /* cartes : blanc casse chaud, plus de #fff pur */

  --font-display: 'Barlow Condensed', 'Oswald', Impact, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: 56px; --fs-h1: 44px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px;
  --fs-body-l: 18px; --fs-body: 16px; --fs-small: 13px; --fs-micro: 11px;
  --fw-medium: 500; --fw-semibold: 600; --fw-display: 700; --fw-display-max: 800;
  --tracking-wordmark: .10em; --tracking-eyebrow: .18em; --tracking-heading: .06em;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.55;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-8: 48px;

  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 12px; --radius-pill: 999px;
  --border-hairline: 1px solid var(--neutral-200);

  --rev-85: rgba(222, 215, 205, .85);
  --rev-75: rgba(222, 215, 205, .75);
  --rev-60: rgba(222, 215, 205, .6);
  --rev-50: rgba(222, 215, 205, .5);
  --rev-line: rgba(222, 215, 205, .1);
}

/* ===== Base ===== */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-primary);
  background: var(--bg-stone);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--accent-copper); outline-offset: 2px; }

/* ===== Composants design system (spk-*) ===== */
.spk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold); line-height: 1;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.spk-btn--sm { font-size: var(--fs-small);  padding: var(--space-2) var(--space-4); }
.spk-btn--md { font-size: var(--fs-body);   padding: var(--space-3) var(--space-5); }
.spk-btn--lg { font-size: var(--fs-body-l); padding: var(--space-4) var(--space-6); }
.spk-btn--primary { background: var(--accent-copper); color: var(--card-bg); }
.spk-btn--primary:hover { background: var(--accent-ember); }
.spk-btn--secondary { background: transparent; color: var(--ink-primary); border-color: var(--ink-primary); }
.spk-btn--secondary:hover { background: var(--ink-primary); color: var(--bg-stone); }
.spk-btn--secondary-rev { color: var(--logo-reversed); border-color: var(--logo-reversed); }
.spk-btn--secondary-rev:hover { background: var(--logo-reversed); color: var(--ink-primary); }
.spk-btn--ghost { background: transparent; color: var(--accent-copper); }
.spk-btn--ghost:hover { color: var(--accent-ember); }

.spk-heading { font-family: var(--font-display); color: var(--ink-primary); margin: 0; line-height: var(--lh-snug); }
.spk-heading--caps { text-transform: uppercase; letter-spacing: var(--tracking-heading); }
.spk-heading--display { font-weight: var(--fw-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-wordmark); }
.spk-heading--h2 { font-size: var(--fs-h2); font-weight: var(--fw-semibold); }
.spk-heading--h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); }
.spk-heading--h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }

.spk-card { border-radius: var(--radius-lg); border: var(--border-hairline); background: var(--card-bg); color: var(--ink-primary); }
.spk-card--dark { background: var(--bg-deep); color: var(--logo-reversed); border-color: transparent; }
.spk-card--pad-md { padding: var(--space-5); }
.spk-card--pad-lg { padding: var(--space-6); }

.spk-tag {
  display: inline-flex; align-items: center; font-family: var(--font-body);
  font-weight: var(--fw-semibold); font-size: var(--fs-micro); text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow); padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill); border: 1px solid transparent;
}
.spk-tag--outline.spk-tag--copper  { color: var(--accent-copper); border-color: var(--accent-copper); }
.spk-tag--outline.spk-tag--neutral { color: var(--neutral-700); border-color: var(--neutral-200); }
.spk-tag--outline.spk-tag--ondark  { color: var(--rev-75); border-color: rgba(222, 215, 205, .3); }

.spk-eyebrow {
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-micro);
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-copper);
}

/* ===== Layout ===== */
.o-wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 32px); }
.o-sec { padding-block: clamp(56px, 8vw, 96px); }
.bg-deep { background: var(--bg-deep); }
.bg-stone { background: var(--bg-stone); }
.t-rev { color: var(--logo-reversed); }
.t-copper { color: var(--accent-copper); }
.o-maxw720 { max-width: 720px; }
.o-maxw860 { max-width: 860px; }

.o-col20 { display: flex; flex-direction: column; gap: 20px; }
.o-col32 { display: flex; flex-direction: column; gap: 32px; }

.o-head { max-width: 720px; display: flex; flex-direction: column; gap: var(--space-3); }
.o-h2 { font-size: clamp(28px, 3.5vw, 36px); }
.o-lead { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--neutral-700); }
.o-lead--rev { color: var(--rev-75); }
.o-body15 { font-size: 15px; line-height: var(--lh-body); color: var(--neutral-700); }
.o-body14 { font-size: 14px; line-height: 1.5; color: var(--neutral-700); }

.o-grid { display: grid; gap: 20px; }
.g-cards { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g-demos { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); align-items: start; }
.g-steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.o-split { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 64px); align-items: center; }
.o-split--top { align-items: flex-start; }
.o-split-txt { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--space-4); }
.o-split-fig { flex: 1 1 400px; min-width: 0; }

/* ===== Header ===== */
.o-hdr {
  position: sticky; top: 0; z-index: 90;
  background: var(--bg-deep); border-bottom: 1px solid var(--rev-line);
}
.o-hdr-in {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px);
  height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.o-brand { display: flex; align-items: center; flex-shrink: 0; }
.o-brand img { height: 40px; display: block; }
.o-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 28px); }
.o-nav a:not(.spk-btn) {
  font-weight: var(--fw-semibold); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--logo-reversed); text-decoration: none; transition: color .15s ease;
}
.o-nav a:not(.spk-btn):hover { color: var(--accent-copper); }
.o-hdr-mobile { display: none; align-items: center; gap: 10px; }
.o-burger {
  display: flex; flex-direction: column; gap: 4px;
  background: none; border: none; cursor: pointer; padding: 10px;
}
.o-burger span { width: 20px; height: 2px; background: var(--logo-reversed); transition: transform .2s ease, opacity .2s ease; }
.o-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.o-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.o-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.o-mobile-menu {
  flex-direction: column;
  background: var(--bg-deep); border-top: 1px solid var(--rev-line); padding: 8px 0 16px;
}
.o-mobile-menu.open { display: flex !important; }
.o-mobile-menu a {
  font-weight: var(--fw-semibold); font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--logo-reversed); text-decoration: none; padding: 14px clamp(16px, 3vw, 32px);
}
.o-mobile-menu a.is-cta { color: var(--accent-copper); }
@media (max-width: 880px) {
  .o-nav { display: none; }
  .o-hdr-mobile { display: flex; }
  .o-brand img { height: 34px; }
}

/* ===== Hero ===== */
.hero-a { position: relative; background: var(--bg-deep); overflow: hidden; }
.hero-a-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero-a-in {
  position: relative; max-width: 1160px; margin: 0 auto;
  padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 32px) clamp(56px, 8vw, 96px);
  display: flex; flex-direction: column; gap: 22px;
}
.o-eyeline { display: flex; align-items: center; gap: var(--space-3); }
.o-dash { width: 28px; height: 2px; background: var(--accent-copper); flex-shrink: 0; }
.o-h1 { color: var(--logo-reversed); font-size: clamp(42px, 6.5vw, 78px); max-width: 920px; }
.o-hero-sub { max-width: 560px; font-size: clamp(16px, 1.6vw, 19px); line-height: var(--lh-body); color: var(--rev-85); }
.o-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.o-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ===== Strip definition ===== */
.o-strip { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); padding-block: clamp(32px, 5vw, 48px); }
.o-def { flex: 1 1 300px; font-style: italic; font-size: 17px; line-height: var(--lh-body); color: var(--neutral-700); }
.o-def strong { color: var(--ink-primary); font-style: normal; }
.o-points { flex: 2 1 480px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); }
.o-pt { display: flex; gap: 10px; }
.o-pt p { font-size: 14px; line-height: 1.45; color: var(--neutral-700); }
.o-pt strong { color: var(--ink-primary); }
.o-bullet { width: 8px; height: 8px; background: var(--accent-copper); margin-top: 6px; flex-shrink: 0; }
.o-ptlist { display: flex; flex-direction: column; gap: var(--space-3); }
.o-ptlist .o-pt p { font-size: 15px; line-height: 1.5; }

/* ===== Cards corvees / steps / refs ===== */
.o-mod { display: flex; flex-direction: column; gap: var(--space-3); }
.o-num {
  font-family: var(--font-display); font-weight: var(--fw-display);
  font-size: 36px; color: var(--accent-copper); letter-spacing: .06em; line-height: 1;
}
.o-num--32 { font-size: 32px; }
.o-step { display: flex; flex-direction: column; gap: 10px; }
.o-ref { display: flex; flex-direction: column; gap: var(--space-3); text-decoration: none; transition: border-color .15s ease; }
.o-ref:hover { border-color: var(--accent-copper); }
.o-ref-link { font-size: 13px; font-weight: var(--fw-semibold); color: var(--accent-copper); margin-top: auto; }

/* ===== Demos ===== */
.o-demo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.o-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.o-demo-lab {
  font-weight: var(--fw-semibold); font-size: var(--fs-micro); letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase; color: var(--neutral-500);
}
.o-demo-act { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.o-demo-note { font-size: 12px; color: var(--neutral-500); }
.o-idle { margin: auto 0; font-size: 13px; line-height: 1.5; color: var(--neutral-500); text-align: center; padding: 0 12px; }

.o-mailbox { display: flex; flex-direction: column; gap: var(--space-2); }
.o-mailrow {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  padding: 10px 12px; border-radius: 8px; background: #EFE9E0;
  border-left: 3px solid transparent; transition: border-color .3s ease;
}
.o-mailrow.is-tagged { border-left-color: var(--row-c); }
.o-mail-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.o-mail-from { font-weight: var(--fw-semibold); font-size: 13px; color: var(--ink-primary); }
.o-mail-subj { font-size: 13px; color: var(--neutral-700); }
.o-mail-meta { display: none; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.is-tagged .o-mail-meta { display: flex; }
.o-mail-tag {
  font-weight: var(--fw-semibold); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #EFE9E0; background: var(--row-c); padding: 3px 9px; border-radius: var(--radius-pill);
  animation: spkFadeUp .35s both; animation-delay: var(--d, 0s);
}
.o-mail-act { font-size: var(--fs-micro); color: var(--neutral-500); text-align: right; }

.o-callbox { display: flex; flex-direction: column; gap: var(--space-2); min-height: 250px; }
.o-callline { display: flex; flex-direction: column; gap: 3px; animation: spkFadeUp .3s both; }
.o-callline.from-sparkan { align-items: flex-end; }
.o-callline.from-caller { align-items: flex-start; }
.o-callline.is-system { align-items: stretch; }
.o-call-who {
  font-weight: var(--fw-semibold); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--neutral-500);
}
.from-sparkan .o-call-who, .is-system .o-call-who { color: var(--accent-copper); }
.o-call-bubble {
  max-width: 88%; padding: 9px 13px; border-radius: var(--radius-md);
  font-size: 13px; line-height: 1.45; background: #EFE9E0; color: var(--ink-primary);
}
.from-sparkan .o-call-bubble { background: var(--accent-copper); color: #F5F0E9; }
.is-system .o-call-bubble { max-width: 100%; background: var(--ink-primary); color: var(--logo-reversed); }

.o-qabox { display: flex; flex-direction: column; gap: 10px; min-height: 250px; }
.o-qa-q {
  align-self: flex-end; max-width: 88%; padding: 10px 14px; border-radius: var(--radius-md);
  background: #E4DDD3; animation: spkFadeUp .3s both;
  font-size: 13px; line-height: 1.45; color: var(--ink-primary);
}
.o-qa-a {
  align-self: flex-start; max-width: 92%; padding: 10px 14px; border-radius: var(--radius-md);
  background: #F4EFE7; border-left: 3px solid var(--accent-copper); animation: spkFadeUp .3s both;
  font-size: 13px; line-height: 1.45; color: var(--neutral-700);
}
.o-qa-a strong { color: var(--ink-primary); }
.o-qa-chip {
  align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px; border-radius: var(--radius-pill); background: var(--bg-deep);
  animation: spkFadeUp .3s both; font-size: 12px; font-weight: var(--fw-semibold); color: var(--logo-reversed);
}
.o-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent-copper);
  animation: spkPulse 2s infinite; flex-shrink: 0;
}

/* ===== Tableau de bord (Transparence) ===== */
.o-dashcard { display: flex; flex-direction: column; gap: 18px; }
.o-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--accent-copper); }
.o-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.o-kpi { display: flex; flex-direction: column; gap: var(--space-1); }
.o-kpi-v { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(24px, 3vw, 34px); color: var(--logo-reversed); }
.o-kpi-l { font-size: var(--fs-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--rev-60); }
.o-chart { display: flex; flex-direction: column; gap: var(--space-2); }
.o-bars { display: flex; align-items: flex-end; gap: 6px; height: 64px; }
.o-bars span { flex: 1; height: var(--h); background: var(--accent-copper); opacity: var(--o, 1); }
.o-caption { font-size: var(--fs-micro); color: var(--rev-50); }

/* ===== Contact ===== */
.o-coords { display: flex; flex-direction: column; gap: var(--space-2); }
.o-coords > span { font-size: 14px; color: var(--rev-75); }
.o-email-img { height: 16px; vertical-align: middle; }
.o-tel { color: var(--accent-copper); font-weight: var(--fw-semibold); text-decoration: none; }
.o-form { display: flex; flex-direction: column; gap: 14px; }
.o-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: var(--fw-semibold); color: var(--ink-primary); }
.o-form input, .o-form textarea {
  width: 100%; padding: 12px 14px; border: var(--border-hairline); border-radius: var(--radius-md);
  font-family: var(--font-body); font-size: 15px; color: var(--ink-primary); background: #FDFAF5;
}
.o-form textarea { resize: vertical; }
.o-form input:focus, .o-form textarea:focus { outline: 2px solid var(--accent-copper); outline-offset: 0; border-color: transparent; }
.o-form input.is-invalid, .o-form textarea.is-invalid { border-color: var(--accent-ember); }
.o-fmsg { font-size: 12px; color: var(--accent-ember); font-weight: 400; min-height: 0; }
.o-note { font-size: 13px; color: var(--neutral-700); }
.o-note.success { color: var(--accent-copper); }
.o-privacy { font-size: 12px; color: var(--neutral-500); }
.o-privacy a { color: var(--neutral-500); }

/* ===== Footer ===== */
.o-ftr { background: var(--bg-deep); }
.o-ftr-in { padding-block: clamp(32px, 5vw, 48px); display: flex; flex-direction: column; gap: var(--space-5); }
.o-ftr-top { display: flex; flex-wrap: wrap; gap: var(--space-5); align-items: center; justify-content: space-between; }
.o-ftr-brand { display: flex; flex-direction: column; gap: var(--space-2); }
.o-ftr-brand img { height: 32px; display: block; }
.o-ftr-tag { font-size: 12px; color: var(--rev-60); }
.o-ftr-nav { display: flex; flex-wrap: wrap; gap: 20px; }
.o-ftr-nav a {
  font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .1em; text-transform: uppercase;
  color: var(--rev-75); text-decoration: none; transition: color .15s ease;
}
.o-ftr-nav a:hover { color: var(--accent-copper); }
.o-ftr-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  border-top: 1px solid var(--rev-line); padding-top: 20px;
}
.o-ftr-legal { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.o-ftr-legal a { font-size: 12px; color: var(--rev-50); text-decoration: none; }
.o-ftr-legal a:hover { color: var(--rev-75); }
.o-ftr-copy { font-size: 12px; color: var(--rev-50); }

/* ===== Back to top ===== */
.to-top {
  position: fixed; bottom: 18px; right: 18px; z-index: 110;
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent-copper); color: #F5F0E9;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background-color .15s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent-ember); }

/* ===== Badge staging ===== */
.o-staging {
  position: fixed; bottom: 18px; left: 16px; z-index: 100;
  font-weight: var(--fw-semibold); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neutral-500); background: #1C1A18; border: 1px solid rgba(222, 215, 205, .15);
  border-radius: 3px; padding: 5px 10px;
}
@media (max-width: 720px) { .o-staging { display: none; } }

/* ===== Animations ===== */
@keyframes spkFadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spkPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Reveal au scroll : uniquement si JS present (sinon contenu toujours visible) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .o-mail-tag, .o-callline, .o-qa-q, .o-qa-a, .o-qa-chip { animation: none; }
  .o-live-dot { animation: none; }
  * { transition-duration: .01ms !important; }
}