/* ════════════════════════════════════════════════════════════
   TALOS — SHARED STYLES · dark-first
   ════════════════════════════════════════════════════════════ */

:root {
  --ink: #0A0908;
  --ink-2: #14110F;
  --ink-3: #1F1B17;
  --ink-4: #2A2520;
  --parchemin: #F5EDDC;
  --parchemin-2: #EFE6D0;
  --bronze: #C9963F;
  --bronze-2: #D9A658;
  --patine: #B5803A;
  --olivier: #7E9587;
  --terracotta: #D87554;
  --muted: rgba(245, 237, 220, 0.62);
  --muted-strong: rgba(245, 237, 220, 0.82);
  --line: rgba(245, 237, 220, 0.11);
  --line-strong: rgba(245, 237, 220, 0.2);
  --font-serif: Georgia, "Times New Roman", serif;
  --font-sans: "Helvetica Neue", Helvetica, "Inter", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--ink);
  color: var(--parchemin);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
  min-height: 100vh;
}

/* ════════════════════════════════════════════
   HOME — Réordre des sections (parcours logique)
   ════════════════════════════════════════════ */

body { display: flex; flex-direction: column; }
body > .hero            { order: 1; }
body > .flow-section    { order: 2; }
body > .adapt-section   { order: 3; }
body > .auto-section    { order: 4; }
body > .proof           { order: 5; }   /* ← témoignage après les 6 process */
body > .web-section-wrap{ order: 6; }
body > .cta-strip       { order: 7; }
body > .kpi-strip       { order: 8; }   /* ← résultats tout en bas */
body > footer           { order: 9; }
/* le reste (nav fixed, cursor, preloader) reste hors flex via position */

/* ════════════════════════════════════════════
   FONDS VARIÉS PAR SECTION (subtils, animés)
   ════════════════════════════════════════════ */

/* Wrapper position-relative + isolation pour chaque section */
.flow-section,
.proof,
.adapt-section,
.kpi-strip,
.auto-section,
.web-section-wrap {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* ── FLOW (avant/après) : blueprint vertical animé ── */
.flow-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(20,17,15,.6) 0%, rgba(10,9,8,1) 100%),
    repeating-linear-gradient(90deg, transparent 0 60px, rgba(245,237,220,.025) 60px 61px);
  pointer-events: none;
}
.flow-section::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.06) 0%, transparent 60%);
  transform: translateX(-50%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  animation: flowBgPulse 8s ease-in-out infinite;
}
@keyframes flowBgPulse {
  0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;  transform: translateX(-50%) scale(1.15); }
}

/* ── PROOF (témoignage) : spot doré centré ── */
.proof::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(31,27,23,.8) 0%, rgba(10,9,8,1) 70%);
  pointer-events: none;
}
.proof::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  filter: blur(70px);
  z-index: -1;
  pointer-events: none;
  animation: proofGlow 6s ease-in-out infinite;
}
@keyframes proofGlow {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

/* ── ADAPTATION : 2 orbes qui dérivent (bronze + olivier) ── */
.adapt-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10,9,8,1) 0%, rgba(20,17,15,.7) 50%, rgba(10,9,8,1) 100%);
  pointer-events: none;
}
.adapt-section::after {
  content: '';
  position: absolute;
  top: 30%;
  left: 15%;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.1) 0%, transparent 70%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
  animation: adaptOrbDrift 18s ease-in-out infinite;
}
@keyframes adaptOrbDrift {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  50%       { transform: translate(60vw, 20%) scale(1.2); opacity: .7; }
}

/* ── KPI STRIP (données pilotes) : grille animée ── */
.kpi-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(245,237,220,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,220,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  animation: kpiGridDrift 40s linear infinite;
  pointer-events: none;
}
@keyframes kpiGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 60px 60px; }
}
.kpi-strip::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, rgba(126,149,135,.04) 0%, transparent 50%, rgba(201,150,63,.04) 100%);
  pointer-events: none;
}

/* ── AUTO SECTION (6 process) : pattern de points subtil ── */
.auto-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(245,237,220,.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  pointer-events: none;
  animation: autoDotDrift 50s linear infinite;
}
@keyframes autoDotDrift {
  from { background-position: 0 0; }
  to   { background-position: 24px 24px; }
}

/* ── WEB SECTION (site qui bouge) : scanline + radial bronze ── */
.web-section-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(245,237,220,.015) 3px 4px),
    linear-gradient(180deg, rgba(20,17,15,.6) 0%, rgba(10,9,8,1) 100%);
  pointer-events: none;
}
.web-section-wrap::after {
  content: '';
  position: absolute;
  top: 10%;
  right: -10%;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.07) 0%, transparent 60%);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
  animation: webBgFloat 12s ease-in-out infinite;
}
@keyframes webBgFloat {
  0%, 100% { transform: translate(0, 0); opacity: .7; }
  50%       { transform: translate(-30vw, 20%); opacity: 1; }
}

/* ════════════════════════════════════════════
   MINI MOTIONS — 3 NOUVELLES CARTES (réponse, inbox, paiements)
   ════════════════════════════════════════════ */

/* MINI-RESPONSE (réponse 24/7) */
.mini-response {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: linear-gradient(180deg, rgba(126,149,135,.04) 0%, rgba(201,150,63,.04) 100%);
}
.mini-resp-row {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
}
.mini-resp-in { animation: respIn 4s 0s ease-out infinite; }
.mini-resp-out {
  flex-direction: row-reverse;
  animation: respIn 4s 1.2s ease-out infinite;
}
@keyframes respIn {
  0%, 100% { opacity: 0; transform: translateY(8px); }
  15%, 85%  { opacity: 1; transform: translateY(0); }
}
.mini-resp-bubble {
  font-size: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(245,237,220,.07);
  color: rgba(245,237,220,.75);
  border: 1px solid rgba(245,237,220,.1);
}
.mini-resp-bubble.talos {
  background: rgba(126,149,135,.18);
  color: var(--olivier);
  border-color: rgba(126,149,135,.3);
}
.mini-resp-time {
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(245,237,220,.35);
}
.mini-resp-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--olivier);
  text-align: center;
  margin-top: auto;
  padding: 6px;
  background: rgba(126,149,135,.08);
  border: 1px solid rgba(126,149,135,.2);
  border-radius: 6px;
}
.mini-resp-status strong { color: var(--parchemin); }

/* MINI-INBOX (tri inbox) */
.mini-inbox-tile {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mini-inbox-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.mini-inbox-cell {
  padding: 8px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid;
  opacity: 0;
  animation: inboxCellIn .6s ease-out forwards;
}
.mini-inbox-cell:nth-child(1) { animation-delay: .2s; }
.mini-inbox-cell:nth-child(2) { animation-delay: .4s; }
.mini-inbox-cell:nth-child(3) { animation-delay: .6s; }
.mini-inbox-cell:nth-child(4) { animation-delay: .8s; }
@keyframes inboxCellIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.mini-inbox-cell.urgent   { background: rgba(216,117,84,.12); border-color: rgba(216,117,84,.3);   color: #D87554; }
.mini-inbox-cell.prospect { background: rgba(201,150,63,.12); border-color: rgba(201,150,63,.3);   color: var(--bronze); }
.mini-inbox-cell.pub      { background: rgba(245,237,220,.04); border-color: rgba(245,237,220,.1); color: rgba(245,237,220,.4); }
.mini-inbox-cell.admin    { background: rgba(126,149,135,.12); border-color: rgba(126,149,135,.3); color: var(--olivier); }
.mini-inbox-num { font-size: 18px; font-weight: 800; line-height: 1; }
.mini-inbox-lbl { font-family: var(--font-mono); font-size: 8px; letter-spacing: 1px; opacity: .85; }
.mini-inbox-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: rgba(245,237,220,.5);
  text-align: center;
  padding: 6px;
  background: rgba(245,237,220,.03);
  border: 1px solid rgba(245,237,220,.06);
  border-radius: 6px;
}
.mini-inbox-status strong { color: var(--bronze); }

/* MINI-PAYMENTS (suivi paiements) */
.mini-payments {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-pay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(245,237,220,.03);
  border-radius: 6px;
  opacity: 0;
  animation: payRowIn .5s ease-out forwards;
}
.mini-pay-row:nth-child(1) { animation-delay: .2s; }
.mini-pay-row:nth-child(2) { animation-delay: .4s; }
.mini-pay-row:nth-child(3) { animation-delay: .6s; }
@keyframes payRowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.mini-pay-status {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mini-pay-status.mini-pay-ok {
  background: var(--olivier);
  box-shadow: 0 0 6px rgba(126,149,135,.5);
}
.mini-pay-status.mini-pay-pending {
  background: var(--bronze);
  animation: payPendingPulse 1.5s ease-in-out infinite;
}
@keyframes payPendingPulse {
  0%, 100% { opacity: .5; transform: scale(.85); }
  50%       { opacity: 1;  transform: scale(1.15); }
}
.mini-pay-name {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(245,237,220,.7);
  flex: 1;
}
.mini-pay-amount {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--olivier);
}
.mini-pay-row:has(.mini-pay-pending) .mini-pay-amount { color: var(--bronze); }
.mini-pay-status-bar {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--olivier);
  text-align: center;
  padding: 4px;
  margin-top: 4px;
  background: rgba(126,149,135,.1);
  border-radius: 4px;
  border: 1px solid rgba(126,149,135,.2);
}

/* ════════════════════════════════════════════
   FONT SYSTEM — Helvetica partout, Georgia pour l'impact
   ════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6,
.hero-h1, .page-head h1,
.section-title, .kpi-strip-title, .cta-strip h2,
.cn-kpi-val, .kpi-cell-val, .kpi-cell-spark,
.price-num, .price-name,
.auto-title, .auto-data-val,
.hist-h1, .hist-chapter-h2, .hist-manifeste-h2, .hist-cta-h2,
.meth-step-h2, .meth-kpi-val,
.setup-section h2, .setup-card-title,
.impact-value, .impact-sign, .impact-suffix,
.faq-q > span:first-child,
.flow-side-time,
.confirm-h1, .step-2 h2, .step-3 h2, .step-4 h2,
.ms-card h4 {
  font-family: var(--font-sans) !important;
  font-weight: 800;
  letter-spacing: -0.5px;
}

/* Mots / phrases à impact : Georgia italique */
.italic,
em,
.hero-h1 .italic, .hist-h1 em, .hist-chapter-h2 em,
.meth-step-h2 em, .meth-step-p em,
.hist-p em, .hist-cta-h2 em,
.page-head h1 .italic {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.5px;
}
a, button, [data-cursor] { cursor: none; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--bronze); color: var(--ink); }
img, svg { display: block; max-width: 100%; }
button { font: inherit; }

/* ─────── CURSOR ─────── */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; pointer-events: none;
  z-index: 9999;
}
.cursor-ring { border-radius: 50%; }

/* Curseur : petit éclair Talos */
.cursor-dot {
  width: 11px; height: 16px;
  transform: translate(-50%, -50%);
  color: var(--bronze);
  filter: drop-shadow(0 0 6px rgba(201, 150, 63, 0.55));
  transition: color 0.25s, transform 0.25s, filter 0.25s;
}
.cursor-dot svg { display: block; width: 100%; height: 100%; }
.cursor-ring {
  width: 30px; height: 30px;
  border: 0.5px solid var(--parchemin);
  transform: translate(-50%, -50%);
  transition: width 0.25s, height 0.25s, border-color 0.25s, background 0.25s;
}
.cursor-ring.hover {
  width: 56px; height: 56px;
  border-color: var(--bronze);
  background: rgba(201, 150, 63, 0.08);
}
/* Quand on survole un élément interactif, l'éclair s'agrandit */
.cursor-ring.hover ~ .cursor-dot,
body:has(.cursor-ring.hover) .cursor-dot {
  transform: translate(-50%, -50%) scale(1.3);
  filter: drop-shadow(0 0 10px rgba(201, 150, 63, 0.8));
}

/* ════════════════════════════════════════════
   BURGER + MOBILE MENU
   ════════════════════════════════════════════ */

/* Bouton burger — caché sur desktop, visible sur mobile via media query */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 22px;
  padding: 5px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-right: 6px;
  position: relative;
  z-index: 1001;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--parchemin);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.4,0,.2,1),
              opacity .25s,
              background .25s;
  transform-origin: center;
}
.nav-burger span:nth-child(2) { width: 70%; align-self: flex-end; }

/* État actif (X) */
.nav-burger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
  background: var(--bronze);
}
.nav-burger.active span:nth-child(2) {
  opacity: 0;
  transform: translateX(20px);
}
.nav-burger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
  background: var(--bronze);
}

/* Overlay menu mobile — fullscreen avec backdrop blur */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 9, 8, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility .35s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 28px 40px;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}
.mobile-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}
.mobile-menu a {
  font-family: var(--font-sans);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--parchemin);
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid rgba(245, 237, 220, .08);
  background: rgba(255, 255, 255, .02);
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  opacity: 0;
  transform: translateY(20px);
  transition: background .25s, border-color .25s, color .25s;
}
.mobile-menu a::after {
  content: '→';
  font-size: 22px;
  color: rgba(245, 237, 220, .35);
  transition: color .25s, transform .25s;
}
.mobile-menu a:hover,
.mobile-menu a:active {
  background: rgba(201, 150, 63, .08);
  border-color: rgba(201, 150, 63, .25);
  color: var(--bronze);
}
.mobile-menu a:hover::after,
.mobile-menu a:active::after {
  color: var(--bronze);
  transform: translateX(4px);
}
.mobile-menu.open a {
  animation: mobileMenuItemIn .5s cubic-bezier(.16,1,.3,1) forwards;
}
.mobile-menu.open a:nth-child(1) { animation-delay: .08s; }
.mobile-menu.open a:nth-child(2) { animation-delay: .14s; }
.mobile-menu.open a:nth-child(3) { animation-delay: .20s; }
.mobile-menu.open a:nth-child(4) { animation-delay: .26s; }
.mobile-menu.open a:nth-child(5) { animation-delay: .32s; }
@keyframes mobileMenuItemIn {
  to { opacity: 1; transform: translateY(0); }
}

/* CTA spécial en bas du menu mobile */
.mobile-menu .mobile-menu-cta {
  background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-2) 100%);
  color: var(--ink);
  border-color: transparent;
  margin-top: 10px;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(201, 150, 63, .3);
}
.mobile-menu .mobile-menu-cta::after {
  color: var(--ink);
}
.mobile-menu .mobile-menu-cta:hover,
.mobile-menu .mobile-menu-cta:active {
  background: linear-gradient(135deg, var(--bronze-2) 0%, var(--bronze) 100%);
  color: var(--ink);
}

/* Body bloqué quand menu ouvert */
body.menu-open { overflow: hidden; }

/* Cache le menu/burger sur desktop (>700px) - le @media existant à 700px active déjà */
@media (min-width: 701px) {
  .mobile-menu { display: none; }
  .nav-burger { display: none !important; }
}

/* ════════════════════════════════════════════
   THUNDER STRIKE — au clic
   ════════════════════════════════════════════ */

/* 1. Éclair central qui flashe */
.thunder-bolt {
  position: fixed;
  width: 32px;
  height: 48px;
  transform: translate(-50%, -50%) scale(0.3) rotate(-12deg);
  pointer-events: none;
  z-index: 9998;
  color: var(--bronze);
  opacity: 0;
  filter: drop-shadow(0 0 16px rgba(201, 150, 63, 0.9));
  animation: thunderBoltFlash .55s cubic-bezier(.2,1,.3,1) forwards;
}
.thunder-bolt svg { width: 100%; height: 100%; display: block; }
@keyframes thunderBoltFlash {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.3) rotate(-12deg); }
  20%  { opacity: 1;   transform: translate(-50%, -50%) scale(1.5) rotate(0deg); }
  60%  { opacity: 0.7; transform: translate(-50%, -50%) scale(1.8) rotate(8deg); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(2.4) rotate(15deg); }
}

/* 2. Onde de choc bronze qui s'étend */
.thunder-ring {
  position: fixed;
  width: 14px;
  height: 14px;
  border: 2px solid var(--bronze);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  pointer-events: none;
  z-index: 9997;
  opacity: 1;
  box-shadow: 0 0 12px rgba(201, 150, 63, 0.5),
              inset 0 0 8px rgba(201, 150, 63, 0.3);
  animation: thunderRingExpand .65s cubic-bezier(.16, .85, .3, 1) forwards;
}
@keyframes thunderRingExpand {
  0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 1;  border-width: 2px; }
  60%  { opacity: 0.6; border-width: 1.5px; }
  100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; border-width: 0.5px; }
}

/* 3. Étincelles qui s'envolent */
.thunder-spark {
  position: fixed;
  width: 3px;
  height: 3px;
  background: var(--bronze);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 9996;
  box-shadow: 0 0 6px rgba(201, 150, 63, 0.9),
              0 0 12px rgba(201, 150, 63, 0.5);
  animation: thunderSparkFly .65s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes thunderSparkFly {
  0%   { transform: translate(-50%, -50%) translate(0, 0)             scale(1.2); opacity: 1; }
  60%  { opacity: 0.8; }
  100% { transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(0.2); opacity: 0; }
}

/* Désactivé sur mobile */
@media (pointer: coarse) {
  .thunder-bolt, .thunder-ring, .thunder-spark { display: none; }
}
@media (pointer: coarse) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}

/* ─────── PRELOADER ─────── */
.preloader {
  position: fixed; inset: 0; background: var(--ink); z-index: 10000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  transition: opacity 0.6s, visibility 0.6s;
}
.preloader.done { opacity: 0; visibility: hidden; }
.pl-bar { fill: var(--parchemin); transform-origin: left; animation: plBar 0.5s ease-out 0.1s both; }
.pl-bolt { fill: var(--bronze); clip-path: inset(0 0 100% 0); animation: plBolt 0.6s cubic-bezier(0.65, 0, 0.35, 1) 0.5s both; }
@keyframes plBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes plBolt { to { clip-path: inset(0 0 0 0); } }
.pl-track { width: 130px; height: 1px; background: rgba(245, 237, 220, 0.15); overflow: hidden; }
.pl-fill { height: 100%; width: 0%; background: var(--bronze); animation: plFill 1.4s ease-out 0.3s forwards; }
@keyframes plFill { to { width: 100%; } }
.pl-status {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2.5px;
  color: var(--bronze); opacity: 0.7;
  animation: plBlink 1s steps(2) infinite;
}
@keyframes plBlink { 50% { opacity: 0.3; } }

/* ─────── SCROLL PROGRESS ─────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-2));
  z-index: 99; transition: width 0.05s linear;
}

/* ─────── NAV ─────── */
nav.top {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 16px 40px; z-index: 98;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(10, 9, 8, 0.78);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border-bottom: 0.5px solid var(--line);
  transition: padding 0.3s ease;
}
nav.top.compact { padding: 11px 40px; }
.nav-left { display: flex; align-items: center; gap: 14px; }
.nav-mark { display: flex; align-items: center; }
.live-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 100px;
  border: 0.5px solid var(--line);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px;
  color: var(--bronze); font-weight: 600;
}
.live-tag .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--olivier);
  box-shadow: 0 0 0 0 rgba(126, 149, 135, 0.6);
  animation: livePulse 1.7s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126, 149, 135, 0.6); }
  50% { box-shadow: 0 0 0 5px rgba(126, 149, 135, 0); }
}
nav.top .links { display: flex; gap: 28px; }
nav.top .links a {
  color: var(--parchemin);
  font-size: 13px; font-weight: 500; letter-spacing: 0.2px;
  position: relative;
  opacity: 0.78;
  transition: opacity 0.2s;
}
nav.top .links a:hover { opacity: 1; }
nav.top .links a.active { opacity: 1; color: var(--bronze); }
nav.top .links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px;
  height: 1px; background: var(--bronze);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
nav.top .links a:hover::after,
nav.top .links a.active::after { transform: scaleX(1); }

/* ─────── BUTTONS ─────── */
.cta {
  background: var(--bronze); color: var(--ink);
  padding: 10px 20px; border-radius: 6px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.2px;
  border: none; cursor: none;
  transition: transform 0.2s, background 0.2s, box-shadow 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.cta:hover { background: var(--bronze-2); transform: translateY(-1px); box-shadow: 0 8px 24px -8px rgba(201, 150, 63, 0.5); }
.cta-ghost {
  background: transparent; color: var(--parchemin);
  padding: 10px 20px; border-radius: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.2px;
  border: 0.5px solid var(--line-strong); cursor: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.cta-ghost:hover { background: var(--parchemin); color: var(--ink); border-color: var(--parchemin); }
.cta-bronze {
  background: var(--bronze); color: var(--ink);
  padding: 14px 26px; border-radius: 6px;
  font-size: 14px; font-weight: 700; letter-spacing: 0.2px;
  border: none; cursor: none;
  transition: transform 0.2s, background 0.2s, box-shadow 0.25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.cta-bronze:hover { background: var(--bronze-2); transform: translateY(-2px); box-shadow: 0 14px 40px -10px rgba(201, 150, 63, 0.6); }
.cta-bronze svg { transition: transform 0.25s; }
.cta-bronze:hover svg { transform: translateX(3px); }
.cta-ghost svg { transition: transform 0.25s; }
.cta-ghost:hover svg { transform: translateX(3px); }

/* Magnetic effect: CTA scales subtly */
.magnetic { transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1); }

/* ─────── SECTION HELPERS ─────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.reveal.visible { opacity: 1; transform: translateY(0); }
/* Stagger reveal — items inside a grid fade in successively */
.auto-grid > *, .kpi-grid > *, .stats > * { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.stagger-in { opacity: 1 !important; transform: translateY(0) !important; }
.section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px;
  color: var(--bronze); font-weight: 600;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-label::before { content: ""; width: 22px; height: 1px; background: var(--bronze); }
.section-title {
  font-family: var(--font-serif); font-size: 46px; line-height: 1.12;
  color: var(--parchemin); max-width: 820px; margin-bottom: 22px;
  letter-spacing: -1px;
}
.section-lede { font-size: 17px; color: var(--muted); max-width: 640px; line-height: 1.65; }
.section-lede strong { color: var(--parchemin); font-weight: 600; }
.container { max-width: 1320px; margin: 0 auto; padding: 0 40px; }

/* ─────── PAGE HEAD ─────── */
.page-head {
  padding: 150px 40px 70px;
  max-width: 1320px; margin: 0 auto;
  position: relative;
}
.page-head::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 20% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 20% 50%, black 30%, transparent 80%);
  pointer-events: none;
}
.page-head .breadcrumb {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--muted); font-weight: 600;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  position: relative;
}
.page-head .breadcrumb a { color: var(--muted); transition: color 0.2s; }
.page-head .breadcrumb a:hover { color: var(--bronze); }
.page-head .breadcrumb .sep { opacity: 0.4; }
.page-head h1 {
  font-family: var(--font-serif); font-size: 64px; line-height: 1.05;
  color: var(--parchemin); letter-spacing: -1.5px;
  margin-bottom: 22px; max-width: 880px;
  position: relative;
}
.page-head h1 .italic { font-style: italic; color: var(--bronze); }
.page-head .lede {
  font-size: 18px; color: var(--muted-strong);
  max-width: 620px; line-height: 1.65;
  position: relative;
}
.page-head .lede strong { color: var(--parchemin); font-weight: 600; }

/* ─────── FOOTER ─────── */
footer {
  background: var(--ink-2);
  color: var(--parchemin);
  padding: 70px 40px 36px;
  border-top: 0.5px solid var(--line);
  position: relative;
}
.footer-grid {
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px;
}
footer h5 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 2px;
  color: var(--bronze); margin-bottom: 18px; font-weight: 700;
}
footer ul { list-style: none; }
footer li { margin-bottom: 10px; }
footer a {
  color: var(--parchemin); font-size: 13px;
  opacity: 0.7; transition: opacity 0.2s, color 0.2s;
}
footer a:hover { opacity: 1; color: var(--bronze); }
.footer-tagline {
  font-family: var(--font-serif); font-style: italic; font-size: 15px;
  color: var(--parchemin); opacity: 0.65; line-height: 1.55;
  margin-top: 18px; max-width: 320px;
}
.footer-bottom {
  max-width: 1320px; margin: 50px auto 0; padding-top: 22px;
  border-top: 0.5px solid var(--line);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--parchemin); opacity: 0.45; letter-spacing: 1px;
}

/* ════════════════════════════════════════════════════════════
   HERO (LANDING)
   ════════════════════════════════════════════════════════════ */
.hero {
  padding: 130px 40px 60px;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 70px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, black 20%, transparent 75%);
  pointer-events: none;
}
.hero-left { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-radius: 100px;
  border: 0.5px solid var(--line);
  background: rgba(245, 237, 220, 0.03);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--bronze); font-weight: 600;
  margin-bottom: 28px;
  opacity: 0; animation: fadeUp 0.7s ease-out 1.6s forwards;
}
.hero-eyebrow .pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--olivier);
  animation: livePulse 1.6s ease-in-out infinite;
}
.hero-h1 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: 64px; line-height: 1.05;
  color: var(--parchemin);
  letter-spacing: -1.5px;
  margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.8s ease-out 1.85s forwards;
}
.hero-h1 .italic { font-style: italic; color: var(--bronze); }
.hero-h1 .underline {
  background-image: linear-gradient(transparent 92%, var(--bronze) 92%);
  background-size: 0% 100%; background-repeat: no-repeat;
  animation: drawUnderline 1.2s ease-out 2.5s forwards;
}
@keyframes drawUnderline { to { background-size: 100% 100%; } }
.hero-lede {
  font-size: 17px; color: var(--muted-strong);
  line-height: 1.65; max-width: 500px;
  margin-bottom: 36px;
  opacity: 0; animation: fadeUp 0.7s ease-out 2.1s forwards;
}
.hero-lede strong { color: var(--parchemin); font-weight: 600; }
.hero-ctas {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 40px;
  opacity: 0; animation: fadeUp 0.7s ease-out 2.3s forwards;
}
.hero-trust {
  display: flex; align-items: center; gap: 22px;
  padding-top: 26px; border-top: 0.5px solid var(--line);
  opacity: 0; animation: fadeUp 0.7s ease-out 2.5s forwards;
}
.hero-trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero-trust-num {
  font-family: var(--font-serif); font-size: 24px;
  color: var(--parchemin); line-height: 1;
}
.hero-trust-num .suffix { color: var(--bronze); font-size: 16px; }
.hero-trust-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--muted); font-weight: 600;
  text-transform: uppercase;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ─────── CONSOLE (hero right) ─────── */
.console {
  background: var(--ink-2);
  border-radius: 14px;
  padding: 22px;
  color: var(--parchemin);
  position: relative; z-index: 2;
  border: 0.5px solid var(--line-strong);
  box-shadow:
    0 30px 80px -20px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(201, 150, 63, 0.06);
  opacity: 0; transform: translateY(30px) scale(0.98);
  animation: consoleIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards;
}
@keyframes consoleIn { to { opacity: 1; transform: translateY(0) scale(1); } }
.console::after {
  content: ""; position: absolute; inset: -1px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(201, 150, 63, 0.4), transparent 30%, transparent 70%, rgba(201, 150, 63, 0.15));
  z-index: -1; pointer-events: none;
}
.cn-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 0.5px solid var(--line);
  margin-bottom: 16px;
}
.cn-dots { display: flex; gap: 6px; }
.cn-dots span { width: 8px; height: 8px; border-radius: 50%; background: rgba(245, 237, 220, 0.18); }
.cn-dots span.live {
  background: var(--olivier);
  box-shadow: 0 0 8px rgba(126, 149, 135, 0.6);
  animation: livePulse 1.6s ease-in-out infinite;
}
.cn-id { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px; color: var(--bronze); }
.cn-time { font-family: var(--font-mono); font-size: 10px; color: var(--parchemin); opacity: 0.5; }
.cn-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.cn-kpis { display: grid; grid-template-rows: auto auto; gap: 14px; }
.cn-kpi {
  background: rgba(245, 237, 220, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 8px; padding: 14px 16px;
  position: relative; overflow: hidden;
}
.cn-kpi-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--parchemin); opacity: 0.55; font-weight: 600;
  margin-bottom: 8px;
}
.cn-kpi-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cn-kpi-val { font-family: var(--font-serif); font-size: 30px; line-height: 1; color: var(--parchemin); }
.cn-kpi-val .unit { font-size: 16px; color: var(--bronze); margin-left: 2px; }
.cn-delta {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(126, 149, 135, 0.18); color: var(--olivier);
  display: inline-flex; align-items: center; gap: 4px;
}
.cn-delta.down { background: rgba(216, 117, 84, 0.18); color: var(--terracotta); }
.spark { width: 100%; height: 28px; display: block; }
.spark polyline { fill: none; stroke: var(--bronze); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.spark.olivier polyline { stroke: var(--olivier); }
.spark-fill { fill: rgba(201, 150, 63, 0.15); stroke: none; }
.spark.olivier .spark-fill { fill: rgba(126, 149, 135, 0.18); }

.cn-positions {
  background: rgba(245, 237, 220, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 8px; padding: 14px 14px 4px;
}
.cn-positions-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cn-positions-title {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px;
  color: var(--parchemin); opacity: 0.7; font-weight: 600;
}
.cn-positions-tab {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--bronze); font-weight: 600;
}
.cn-pos {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--line);
  font-size: 11.5px;
}
.cn-pos:last-child { border-bottom: none; }
.cn-pos-status {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--olivier);
  box-shadow: 0 0 6px rgba(126, 149, 135, 0.7);
}
.cn-pos-status.run {
  background: var(--bronze);
  box-shadow: 0 0 6px rgba(201, 150, 63, 0.7);
  animation: livePulse 1.6s ease-in-out infinite;
}
.cn-pos-status.wait { background: rgba(245, 237, 220, 0.3); box-shadow: none; }
.cn-pos-name { color: var(--parchemin); }
.cn-pos-name .desc {
  display: block; font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1px; color: var(--parchemin); opacity: 0.45;
  margin-top: 2px;
}
.cn-pos-val { font-family: var(--font-mono); font-size: 11px; color: var(--bronze); font-weight: 600; }
.cn-pos-val.olivier { color: var(--olivier); }
.cn-foot {
  margin-top: 16px; padding: 12px 14px;
  background: rgba(201, 150, 63, 0.07);
  border: 0.5px solid rgba(201, 150, 63, 0.18);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px;
}
.cn-foot-left { display: flex; align-items: center; gap: 10px; color: var(--bronze); font-weight: 600; }
.cn-foot-flash {
  width: 5px; height: 5px; border-radius: 50%; background: var(--bronze);
  animation: livePulse 1.4s ease-in-out infinite;
}
.cn-foot-right { color: var(--parchemin); opacity: 0.6; }

/* ─────── TICKER ─────── */
.ticker {
  background: var(--ink-2);
  color: var(--parchemin);
  padding: 14px 0; overflow: hidden;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.ticker-track { display: inline-flex; gap: 40px; white-space: nowrap; animation: marquee 42s linear infinite; }
.ticker .tk {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 2.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 12px;
}
.ticker .tdot { width: 4px; height: 4px; background: var(--bronze); border-radius: 50%; }
.ticker .tnum { color: var(--bronze); }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════════════════
   KPI STRIP
   ════════════════════════════════════════════════════════════ */
.kpi-strip { padding: 80px 40px; max-width: 1320px; margin: 0 auto; }
.kpi-strip-head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 32px; gap: 30px; }
.kpi-strip-title { font-family: var(--font-serif); font-size: 32px; line-height: 1.2; color: var(--parchemin); max-width: 560px; }
.kpi-strip-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px; color: var(--muted); text-align: right; }
.kpi-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 0.5px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.kpi-cell {
  background: var(--ink-2);
  padding: 26px 24px 22px;
  position: relative;
  transition: background 0.3s;
  overflow: hidden;
}
.kpi-cell:hover { background: var(--ink-3); }
.kpi-cell-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px;
  color: var(--bronze); font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.kpi-cell-label .badge {
  padding: 2px 7px; border-radius: 4px;
  background: rgba(126, 149, 135, 0.18); color: var(--olivier);
  font-size: 9px; letter-spacing: 0.8px;
}
.kpi-cell-label .badge.down { background: rgba(216, 117, 84, 0.18); color: var(--terracotta); }
.kpi-cell-val {
  font-family: var(--font-serif); font-size: 56px; line-height: 1;
  color: var(--parchemin); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 6px;
}
.kpi-cell-val .unit { font-size: 24px; color: var(--bronze); }
.kpi-cell-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.kpi-cell-spark { height: 36px; width: 100%; }

/* ════════════════════════════════════════════════════════════
   AUTOMATIONS
   ════════════════════════════════════════════════════════════ */
.auto-section { padding: 100px 40px; max-width: 1320px; margin: 0 auto; }
.auto-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; margin-top: 50px;
  background: var(--line);
  border: 0.5px solid var(--line);
  border-radius: 10px; overflow: hidden;
}
.auto-card {
  background: var(--ink-2);
  padding: 30px 26px 26px;
  position: relative;
  transition: background 0.4s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
}
.auto-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(201, 150, 63, 0.2);
}
.auto-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 150, 63, 0.1), transparent 50%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.auto-card:hover { background: var(--ink-3); }
.auto-card:hover::before { opacity: 1; }
.auto-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.auto-icon {
  width: 42px; height: 42px;
  border: 0.5px solid var(--line-strong);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--parchemin);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.auto-card:hover .auto-icon { background: var(--bronze); color: var(--ink); border-color: var(--bronze); }
.auto-num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--muted); font-weight: 600;
}
.auto-title {
  font-family: var(--font-serif); font-size: 22px; margin-bottom: 12px;
  line-height: 1.25; color: var(--parchemin); letter-spacing: -0.3px;
}
.auto-desc {
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
  margin-bottom: 22px; min-height: 80px;
}
.auto-data {
  background: rgba(201, 150, 63, 0.05);
  border: 0.5px solid rgba(201, 150, 63, 0.15);
  border-radius: 6px;
  padding: 14px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center;
}
.auto-data-main { display: flex; flex-direction: column; gap: 4px; }
.auto-data-val { font-family: var(--font-serif); font-size: 26px; color: var(--parchemin); line-height: 1; }
.auto-data-val .unit { color: var(--bronze); font-size: 15px; }
.auto-data-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  color: var(--bronze); font-weight: 600;
}
.auto-spark { width: 80px; height: 30px; }

/* ════════════════════════════════════════════════════════════
   PAIN COMPARE
   ════════════════════════════════════════════════════════════ */
.pain { padding: 90px 0; background: var(--ink-2); border-top: 0.5px solid var(--line); border-bottom: 0.5px solid var(--line); }
.pain-inner { max-width: 1320px; margin: 0 auto; padding: 0 40px; }
.pain-grid { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.pain-col {
  background: var(--ink-3);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 36px 32px;
}
.pain-col h3 {
  font-family: var(--font-serif); font-size: 24px; margin-bottom: 24px;
  display: flex; align-items: center; gap: 12px; font-weight: 400;
}
.pain-col.before h3 { color: var(--terracotta); }
.pain-col.after h3 { color: var(--olivier); }
.pain-list { list-style: none; }
.pain-list li {
  padding: 14px 0; border-bottom: 0.5px solid var(--line);
  font-size: 14.5px; color: var(--parchemin);
  display: flex; align-items: center; gap: 12px;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.5s, transform 0.5s;
}
.pain-list li:last-child { border-bottom: none; }
.pain-col.before .pain-list li {
  color: var(--muted); text-decoration: line-through;
  text-decoration-color: rgba(216, 117, 84, 0.4);
}
.pain-list.visible li { opacity: 1; transform: translateX(0); }
.pain-list.visible li:nth-child(1) { transition-delay: 0.05s; }
.pain-list.visible li:nth-child(2) { transition-delay: 0.15s; }
.pain-list.visible li:nth-child(3) { transition-delay: 0.25s; }
.pain-list.visible li:nth-child(4) { transition-delay: 0.35s; }
.pain-list.visible li:nth-child(5) { transition-delay: 0.45s; }
.pain-list.visible li:nth-child(6) { transition-delay: 0.55s; }
.pain-list li svg { width: 17px; height: 17px; flex-shrink: 0; }
.pain-col.before .pain-list li svg { color: var(--terracotta); }
.pain-col.after .pain-list li svg { color: var(--olivier); }
.pain-col.after .pain-list li strong { color: var(--parchemin); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   PROCESS / STEPS
   ════════════════════════════════════════════════════════════ */
.process { padding: 100px 40px; max-width: 1320px; margin: 0 auto; position: relative; }
.process::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245, 237, 220, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 237, 220, 0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 80%);
  pointer-events: none;
}
.process > * { position: relative; z-index: 1; }
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 60px; position: relative;
}
.step {
  background: var(--ink-2);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 32px 28px 30px;
  position: relative; overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.step::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(400px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 150, 63, 0.12), transparent 40%);
  opacity: 0; transition: opacity 0.4s; pointer-events: none;
}
.step:hover { border-color: var(--bronze); box-shadow: 0 18px 50px -15px rgba(201, 150, 63, 0.25); }
.step:hover::after { opacity: 1; }
.step-num { font-family: var(--font-mono); font-size: 10px; color: var(--bronze); letter-spacing: 2px; margin-bottom: 22px; font-weight: 600; }
.step-icon { width: 32px; height: 32px; margin-bottom: 20px; color: var(--bronze); }
.step h4 {
  font-family: var(--font-serif); font-size: 22px; color: var(--parchemin);
  margin-bottom: 10px; font-weight: 400; letter-spacing: -0.2px;
}
.step p { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.step-time {
  margin-top: 18px; padding-top: 14px;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--bronze); font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.conn-line { position: absolute; top: 50%; height: 0.5px; background: rgba(201, 150, 63, 0.3); z-index: 0; }
.conn-line::after {
  content: ""; position: absolute; top: -2px; left: 0;
  width: 6px; height: 6px; background: var(--bronze); border-radius: 50%;
  box-shadow: 0 0 8px rgba(201, 150, 63, 0.8);
  animation: travel 3s ease-in-out infinite;
}
@keyframes travel { 0% { left: 0%; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.conn-1 { left: calc(33.33% + 8px); width: calc(33.33% - 16px); }
.conn-2 { left: calc(66.66% + 8px); width: calc(33.33% - 16px); }
.conn-2::after { animation-delay: 1.5s; }

/* ════════════════════════════════════════════════════════════
   LIVE BOARD
   ════════════════════════════════════════════════════════════ */
section.live { padding: 100px 40px; max-width: 1320px; margin: 0 auto; }
.live-board { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; margin-top: 50px; }
.live-card {
  background: var(--ink-2); border-radius: 12px;
  padding: 24px; overflow: hidden;
  border: 0.5px solid var(--line);
}
.live-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; padding-bottom: 14px;
  border-bottom: 0.5px solid var(--line);
}
.live-title {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--bronze);
  letter-spacing: 2px; display: flex; align-items: center; gap: 10px; font-weight: 600;
}
.live-dot { width: 7px; height: 7px; background: var(--olivier); border-radius: 50%; animation: livePulse 1.6s ease-in-out infinite; }
.live-meta { font-family: var(--font-mono); font-size: 9.5px; color: var(--parchemin); opacity: 0.5; letter-spacing: 1.2px; }
.live-log { height: 240px; overflow: hidden; position: relative; }
.log-line {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--parchemin);
  padding: 9px 0; opacity: 0; transform: translateY(8px);
  transition: opacity 0.4s, transform 0.4s;
  display: grid; grid-template-columns: 56px 84px 1fr;
  gap: 12px; align-items: center;
  border-bottom: 0.5px solid var(--line);
}
.log-line.show { opacity: 1; transform: translateY(0); }
.log-time { color: var(--parchemin); opacity: 0.45; }
.log-type { font-size: 9.5px; letter-spacing: 1.5px; color: var(--bronze); font-weight: 600; }
.log-type.olivier { color: var(--olivier); }
.log-msg { color: var(--parchemin); opacity: 0.92; }
.log-msg .accent { color: var(--bronze); font-weight: 600; }
.log-msg .ok { color: var(--olivier); font-weight: 600; }
.live-stats { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.mini-stat {
  background: var(--ink-2); border: 0.5px solid var(--line);
  border-radius: 10px; padding: 22px;
}
.mini-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.8px;
  color: var(--bronze); font-weight: 600; margin-bottom: 10px;
}
.mini-val {
  font-family: var(--font-serif); font-size: 40px; line-height: 1;
  color: var(--parchemin); display: flex; align-items: baseline; gap: 4px;
}
.mini-val .pct { font-size: 22px; color: var(--bronze); }
.mini-bar { margin-top: 14px; height: 32px; }

/* ════════════════════════════════════════════════════════════
   PROOF / STATS / CASE
   ════════════════════════════════════════════════════════════ */
.proof { padding: 100px 40px; max-width: 1320px; margin: 0 auto; }
.stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  margin-top: 50px; padding: 50px 0;
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
}
.stat-num {
  font-family: var(--font-serif); font-size: 78px;
  color: var(--parchemin); line-height: 1; margin-bottom: 10px;
  letter-spacing: -1.5px;
}
.stat-num .suffix { font-size: 36px; color: var(--bronze); margin-left: 4px; }
.stat-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  letter-spacing: 1.5px; line-height: 1.6; font-weight: 600;
}
.case-card {
  background: var(--ink-2); border: 0.5px solid var(--line);
  border-radius: 12px; padding: 42px 44px;
  margin-top: 40px; position: relative;
  display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: start;
}
.case-card::before {
  content: ""; position: absolute; top: 0; left: 42px;
  width: 32px; height: 2px; background: var(--bronze);
}
.case-avatar {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--ink-3); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-size: 32px; color: var(--bronze);
  border: 2px solid var(--bronze);
}
.case-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--bronze); font-weight: 600; margin-bottom: 16px;
}
.case-quote {
  font-family: var(--font-serif); font-size: 24px; line-height: 1.4;
  color: var(--parchemin); margin-bottom: 18px; letter-spacing: -0.2px;
}
.case-detail { font-size: 13.5px; color: var(--muted); }
.case-badge {
  background: var(--olivier); color: var(--ink);
  padding: 3px 12px; border-radius: 4px;
  font-size: 12px; font-weight: 700; display: inline-block;
  margin-left: 6px;
}

/* ════════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════════ */
.pricing { padding: 100px 40px; max-width: 1320px; margin: 0 auto; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 50px; }
.price-card {
  background: var(--ink-2); border: 0.5px solid var(--line);
  border-radius: 12px; padding: 32px 28px 28px;
  position: relative;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}
.price-card:hover {
  border-color: var(--bronze);
  box-shadow: 0 20px 50px -15px rgba(201, 150, 63, 0.2);
  transform: translateY(-4px);
}
.price-card.featured {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border-color: var(--bronze);
  box-shadow: 0 30px 80px -30px rgba(201, 150, 63, 0.4);
}
.price-tag {
  position: absolute; top: -11px; right: 20px;
  background: var(--bronze); color: var(--ink);
  padding: 4px 12px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  font-weight: 700;
}
.price-name {
  font-family: var(--font-serif); font-size: 24px; color: var(--parchemin);
  margin-bottom: 6px; letter-spacing: -0.2px;
}
.price-detail { font-size: 13px; color: var(--muted); margin-bottom: 24px; min-height: 38px; }
.price-num {
  font-family: var(--font-serif); font-size: 56px; line-height: 1;
  color: var(--parchemin); margin-bottom: 6px; letter-spacing: -1.5px;
  display: flex; align-items: baseline; gap: 4px;
}
.price-num .currency { font-size: 26px; color: var(--bronze); }
.price-num .period {
  font-family: var(--font-sans); font-size: 13px; color: var(--muted);
  margin-left: 4px; font-weight: 400;
}
.price-meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--bronze); margin-bottom: 24px; font-weight: 600;
}
.price-feat { list-style: none; margin-bottom: 28px; }
.price-feat li {
  padding: 12px 0; font-size: 13.5px;
  border-bottom: 0.5px solid var(--line);
  display: flex; align-items: start; gap: 10px;
  color: var(--parchemin);
}
.price-feat li svg { color: var(--bronze); flex-shrink: 0; margin-top: 2px; }
.price-cta {
  display: block; text-align: center;
  padding: 14px; border-radius: 6px;
  background: var(--ink); color: var(--parchemin);
  border: 0.5px solid var(--line-strong);
  font-size: 13.5px; font-weight: 600;
  transition: background 0.2s, transform 0.2s, color 0.2s, border-color 0.2s;
}
.price-card.featured .price-cta { background: var(--bronze); color: var(--ink); border-color: var(--bronze); }
.price-card.featured .price-cta:hover { background: var(--bronze-2); border-color: var(--bronze-2); }
.price-cta:hover { transform: translateY(-1px); background: var(--parchemin); color: var(--ink); border-color: var(--parchemin); }

/* ════════════════════════════════════════════════════════════
   FAQ
   ════════════════════════════════════════════════════════════ */
.faq { padding: 100px 40px; max-width: 900px; margin: 0 auto; }
.faq-list { margin-top: 50px; }
.faq-item { border-bottom: 0.5px solid var(--line); padding: 0; }
.faq-q {
  width: 100%;
  background: transparent; border: none;
  padding: 22px 0; text-align: left;
  font-family: var(--font-serif); font-size: 20px;
  color: var(--parchemin); cursor: none;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; letter-spacing: -0.2px;
}
.faq-q-icon {
  width: 28px; height: 28px; border-radius: 50%;
  border: 0.5px solid var(--line-strong);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
  color: var(--parchemin);
}
.faq-q-icon svg { width: 14px; height: 14px; }
.faq-item.open .faq-q-icon {
  background: var(--bronze); border-color: var(--bronze);
  color: var(--ink); transform: rotate(180deg);
}
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-a-content {
  padding: 0 0 22px;
  font-size: 14.5px; color: var(--muted); line-height: 1.7;
  max-width: 720px;
}

/* ════════════════════════════════════════════════════════════
   CTA STRIP (cross-page)
   ════════════════════════════════════════════════════════════ */
.cta-strip {
  padding: 90px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-top: 0.5px solid var(--line);
}
.cta-strip::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(201, 150, 63, 0.18), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(201, 150, 63, 0.1), transparent 40%);
  pointer-events: none;
  animation: aura 8s ease-in-out infinite alternate;
}
@keyframes aura { from { transform: scale(1) rotate(0); } to { transform: scale(1.08) rotate(2deg); } }
.cta-strip h2 {
  font-family: var(--font-serif); font-size: 44px; line-height: 1.15;
  color: var(--parchemin); margin: 0 auto 18px;
  max-width: 720px; letter-spacing: -0.6px;
  position: relative;
}
.cta-strip p {
  font-size: 17px; color: var(--bronze);
  margin-bottom: 36px; position: relative;
}
.cta-strip .cta-row { display: inline-flex; gap: 12px; position: relative; flex-wrap: wrap; justify-content: center; }

/* ════════════════════════════════════════════════════════════
   BOOKING FLOW (reserver.html)
   ════════════════════════════════════════════════════════════ */
.booking { padding: 100px 40px 110px; position: relative; overflow: hidden; }
.booking::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(201, 150, 63, 0.1), transparent 35%),
    radial-gradient(circle at 85% 75%, rgba(201, 150, 63, 0.06), transparent 35%);
  pointer-events: none;
  animation: aura 9s ease-in-out infinite alternate;
}
.booking-inner {
  max-width: 1320px; margin: 0 auto; position: relative; z-index: 1;
  display: grid; grid-template-columns: 0.9fr 1.2fr; gap: 60px;
  align-items: start;
}
.booking-side { position: sticky; top: 100px; }
.booking-perks { list-style: none; margin-top: 32px; }
.booking-perks li {
  display: flex; align-items: start; gap: 14px;
  padding: 14px 0;
  font-size: 14px;
  color: var(--parchemin); opacity: 0.82;
  border-bottom: 0.5px solid var(--line);
}
.booking-perks li:last-child { border-bottom: none; }
.booking-perks li svg { color: var(--bronze); flex-shrink: 0; margin-top: 2px; }
.booking-perks li strong { color: var(--parchemin); opacity: 1; font-weight: 600; display: block; margin-bottom: 2px; }

.booking-card {
  background: var(--ink-2);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 32px 32px 28px;
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.6);
}

/* Stepper */
.stepper {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 0.5px solid var(--line);
}
.step-dot { display: flex; align-items: center; gap: 8px; flex: 1; }
.step-dot-circle {
  width: 26px; height: 26px; border-radius: 50%;
  border: 0.5px solid var(--line-strong);
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--parchemin); opacity: 0.5;
  transition: all 0.3s;
  flex-shrink: 0;
}
.step-dot.active .step-dot-circle {
  background: var(--bronze); color: var(--ink);
  border-color: var(--bronze);
  box-shadow: 0 0 0 4px rgba(201, 150, 63, 0.18);
  opacity: 1;
}
.step-dot.done .step-dot-circle {
  background: var(--olivier); color: var(--ink);
  border-color: var(--olivier); opacity: 1;
}
.step-dot-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.2px;
  color: var(--parchemin); opacity: 0.5; font-weight: 600;
  white-space: nowrap;
  transition: opacity 0.3s, color 0.3s;
}
.step-dot.active .step-dot-label { opacity: 1; color: var(--bronze); }
.step-dot.done .step-dot-label { opacity: 0.8; }
.step-line { flex: 0 0 auto; width: 18px; height: 0.5px; background: var(--line-strong); }

.step-panel { display: none; }
.step-panel.active { display: block; animation: stepIn 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.step-eyebrow {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.8px;
  color: var(--bronze); font-weight: 600; margin-bottom: 10px;
}
.step-question {
  font-family: var(--font-serif); font-size: 26px; line-height: 1.25;
  color: var(--parchemin); margin-bottom: 6px; letter-spacing: -0.3px;
}
.step-hint { font-size: 13px; color: var(--muted); margin-bottom: 24px; }

/* Trade selector */
.trade-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.trade-tile {
  background: rgba(245, 237, 220, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 18px 14px;
  text-align: center;
  cursor: none;
  transition: all 0.25s;
  color: var(--parchemin);
}
.trade-tile:hover {
  background: rgba(201, 150, 63, 0.08);
  border-color: rgba(201, 150, 63, 0.3);
}
.trade-tile.selected {
  background: var(--bronze); color: var(--ink);
  border-color: var(--bronze);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -8px rgba(201, 150, 63, 0.5);
}
.trade-tile.selected .trade-icon { color: var(--ink); }
.trade-icon { width: 26px; height: 26px; margin: 0 auto 8px; color: var(--bronze); transition: color 0.2s; }
.trade-label { font-size: 12.5px; font-weight: 600; }

/* Pain tiles multi */
.pain-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pain-tile {
  background: rgba(245, 237, 220, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 8px;
  padding: 14px 14px 14px 42px;
  text-align: left;
  cursor: none;
  transition: all 0.2s;
  color: var(--parchemin);
  font-size: 13px;
  position: relative;
  line-height: 1.4;
}
.pain-tile::before {
  content: ""; position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border: 0.5px solid var(--line-strong);
  border-radius: 4px;
  background: transparent;
  transition: all 0.2s;
}
.pain-tile.selected {
  background: rgba(201, 150, 63, 0.12);
  border-color: rgba(201, 150, 63, 0.4);
}
.pain-tile.selected::before {
  background: var(--bronze); border-color: var(--bronze);
  box-shadow: inset 0 0 0 3px var(--ink-2);
}
.pain-tile.selected::after {
  content: ""; position: absolute; left: 19px; top: 50%;
  transform: translateY(-65%) rotate(-45deg);
  width: 6px; height: 3px;
  border-left: 1.5px solid var(--parchemin);
  border-bottom: 1.5px solid var(--parchemin);
}
.pain-tile:hover { border-color: var(--line-strong); }

/* Calendar */
.cal {
  background: rgba(245, 237, 220, 0.02);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
}
.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cal-month { font-family: var(--font-serif); font-size: 16px; color: var(--parchemin); }
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 26px; height: 26px; border-radius: 6px;
  background: rgba(245, 237, 220, 0.05);
  border: 0.5px solid var(--line);
  color: var(--parchemin); cursor: none;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.cal-nav button:hover { background: rgba(201, 150, 63, 0.18); }
.cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow {
  text-align: center; padding: 6px 0;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  color: var(--parchemin); opacity: 0.4; font-weight: 600;
}
.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 12.5px; color: var(--parchemin);
  cursor: none;
  transition: all 0.15s;
  background: transparent;
  border: 0.5px solid transparent;
  position: relative;
}
.cal-day:not(.disabled):not(.empty):hover {
  background: rgba(201, 150, 63, 0.12);
  border-color: rgba(201, 150, 63, 0.25);
}
.cal-day.empty { opacity: 0; pointer-events: none; }
.cal-day.disabled { opacity: 0.25; pointer-events: none; }
.cal-day.today { color: var(--bronze); font-weight: 700; }
.cal-day.has-slots::after {
  content: ""; position: absolute; bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--olivier);
}
.cal-day.selected {
  background: var(--bronze); color: var(--ink);
  border-color: var(--bronze); font-weight: 700;
}
.cal-day.selected::after { background: var(--ink); }

.slot-list-wrap {
  margin-top: 14px;
  background: rgba(245, 237, 220, 0.02);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 16px;
}
.slot-list-head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--bronze); font-weight: 600; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.slot-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.slot {
  padding: 9px 8px;
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--parchemin);
  text-align: center;
  cursor: none;
  transition: all 0.2s;
}
.slot:hover { background: rgba(201, 150, 63, 0.12); border-color: rgba(201, 150, 63, 0.3); }
.slot.selected { background: var(--bronze); color: var(--ink); border-color: var(--bronze); }
.slot.taken { opacity: 0.3; pointer-events: none; text-decoration: line-through; }

/* Form */
.form-row { margin-bottom: 14px; }
.form-row.split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px;
  color: var(--bronze); opacity: 0.85; font-weight: 600;
}
.form-input, .form-select, .form-textarea {
  width: 100%;
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  border-radius: 6px;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--parchemin);
  transition: border-color 0.2s, background 0.2s;
  cursor: none;
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--parchemin); opacity: 0.3; }
.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--bronze);
  background: rgba(201, 150, 63, 0.06);
}
.form-textarea { resize: vertical; min-height: 80px; }
.form-check {
  display: flex; align-items: start; gap: 10px;
  font-size: 12px; color: var(--parchemin); opacity: 0.75;
  line-height: 1.5; cursor: none;
  padding: 8px 0;
}
.form-check input { margin-top: 2px; accent-color: var(--bronze); cursor: none; }
.form-check a { color: var(--bronze); text-decoration: underline; }

/* Step controls */
.step-ctrl {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 0.5px solid var(--line);
}
.btn-prev {
  background: transparent; border: 0.5px solid var(--line-strong);
  color: var(--parchemin); opacity: 0.75;
  padding: 11px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 600;
  cursor: none; transition: all 0.2s;
}
.btn-prev:hover { opacity: 1; border-color: var(--parchemin); }
.btn-prev:disabled { visibility: hidden; }
.btn-next {
  background: var(--bronze); color: var(--ink);
  padding: 13px 24px; border-radius: 6px;
  border: none;
  font-size: 14px; font-weight: 700;
  cursor: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 0.2s, transform 0.2s, opacity 0.2s;
}
.btn-next:hover:not(:disabled) { background: var(--bronze-2); transform: translateY(-1px); }
.btn-next:disabled {
  background: rgba(201, 150, 63, 0.25);
  color: rgba(10, 9, 8, 0.5);
  cursor: not-allowed;
}

/* Confirmation */
.confirm-icon {
  width: 64px; height: 64px;
  border-radius: 50%; background: rgba(126, 149, 135, 0.2);
  display: flex; align-items: center; justify-content: center;
  color: var(--olivier);
  margin: 0 auto 22px;
  animation: confirmPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes confirmPop { 0% { transform: scale(0); } 80% { transform: scale(1.1); } 100% { transform: scale(1); } }
.confirm-title {
  font-family: var(--font-serif); font-size: 28px;
  color: var(--parchemin); text-align: center;
  margin-bottom: 8px;
}
.confirm-sub {
  text-align: center; color: var(--muted-strong);
  font-size: 14px; margin-bottom: 26px; line-height: 1.55;
}
.confirm-detail {
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 22px;
}
.confirm-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
  font-size: 13px; gap: 12px;
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row .lbl {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--bronze); font-weight: 600;
}
.confirm-row .val { color: var(--parchemin); font-weight: 600; text-align: right; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirm-btn {
  padding: 12px; border-radius: 6px;
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  color: var(--parchemin);
  font-size: 12.5px; font-weight: 600;
  cursor: none;
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all 0.2s;
}
.confirm-btn:hover { background: rgba(201, 150, 63, 0.12); border-color: var(--bronze); color: var(--bronze); }

.booking-summary {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(201, 150, 63, 0.08);
  border: 0.5px solid rgba(201, 150, 63, 0.2);
  border-radius: 8px;
  font-size: 12px;
  color: var(--parchemin);
  display: flex; align-items: center; gap: 10px;
  line-height: 1.5;
}
.booking-summary svg { color: var(--bronze); flex-shrink: 0; }
.booking-summary .pill {
  display: inline-block;
  padding: 2px 8px; border-radius: 100px;
  background: rgba(201, 150, 63, 0.2); color: var(--bronze);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  font-weight: 600; margin: 0 3px;
}

/* ════════════════════════════════════════════════════════════
   AUTOMATION DETAIL BLOCKS (automatisations.html)
   ════════════════════════════════════════════════════════════ */
.auto-detail {
  padding: 80px 40px;
  max-width: 1320px; margin: 0 auto;
  border-bottom: 0.5px solid var(--line);
}
.auto-detail:last-of-type { border-bottom: none; }
.auto-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.auto-detail.reverse .auto-detail-grid > div:first-child { order: 2; }
.auto-detail-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2.5px;
  color: var(--bronze); font-weight: 600; margin-bottom: 16px;
}
.auto-detail h2 {
  font-family: var(--font-serif); font-size: 38px;
  color: var(--parchemin); line-height: 1.15; margin-bottom: 18px;
  letter-spacing: -0.8px;
}
.auto-detail p {
  font-size: 16px; color: var(--muted-strong); line-height: 1.7;
  margin-bottom: 18px; max-width: 480px;
}
.auto-detail .feats { list-style: none; margin: 18px 0 28px; }
.auto-detail .feats li {
  padding: 10px 0;
  display: flex; align-items: start; gap: 12px;
  font-size: 14px; color: var(--parchemin);
}
.auto-detail .feats li svg { color: var(--bronze); flex-shrink: 0; margin-top: 3px; }

/* Visual mockup */
.auto-mock {
  background: var(--ink-2);
  border: 0.5px solid var(--line-strong);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  position: relative;
}
.auto-mock::after {
  content: ""; position: absolute; inset: -1px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(201, 150, 63, 0.3), transparent 30%, transparent 70%, rgba(201, 150, 63, 0.12));
  z-index: -1; pointer-events: none;
}
.mock-head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 0.5px solid var(--line);
}
.mock-title {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--bronze); font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
.mock-dots { display: flex; gap: 5px; }
.mock-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(245, 237, 220, 0.2); }
.mock-dots span.live { background: var(--olivier); box-shadow: 0 0 6px rgba(126, 149, 135, 0.6); animation: livePulse 1.6s ease-in-out infinite; }
.mock-line {
  padding: 14px 0;
  border-bottom: 0.5px solid var(--line);
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 12px; align-items: center;
  font-size: 13px; color: var(--parchemin);
}
.mock-line:last-child { border-bottom: none; }
.mock-line .mline-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(201, 150, 63, 0.12);
  border: 0.5px solid rgba(201, 150, 63, 0.25);
  display: flex; align-items: center; justify-content: center;
  color: var(--bronze);
  flex-shrink: 0;
}
.mock-line .mline-text { display: flex; flex-direction: column; gap: 2px; }
.mock-line .mline-main { font-weight: 600; }
.mock-line .mline-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; color: var(--muted); }
.mock-line .mline-val { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--bronze); }
.mock-line .mline-val.olivier { color: var(--olivier); }
.mock-foot {
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(201, 150, 63, 0.07);
  border: 0.5px solid rgba(201, 150, 63, 0.18);
  border-radius: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px;
  color: var(--bronze);
  display: flex; align-items: center; justify-content: space-between;
}

/* ════════════════════════════════════════════════════════════
   MINI MOTIONS · Aperçu cards (homepage)
   ════════════════════════════════════════════════════════════ */
.mini-motion {
  height: 88px;
  margin: 16px 0 18px;
  padding: 12px 14px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(201, 150, 63, 0.06), transparent 70%),
    rgba(245, 237, 220, 0.02);
  border: 0.5px solid rgba(201, 150, 63, 0.15);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}

/* ── DEVIS : 4 jours qui rétrécit, 12 min qui pulse ── */
.mini-devis {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  align-items: center;
  gap: 10px;
}
.mini-devis .mm-before, .mini-devis .mm-after {
  display: flex; flex-direction: column; gap: 8px;
}
.mini-devis .mm-before-time, .mini-devis .mm-after-time {
  font-family: var(--font-serif); font-size: 22px;
  color: var(--terracotta);
  text-decoration: line-through;
  text-decoration-color: rgba(216, 117, 84, 0.5);
  line-height: 1;
  display: flex; align-items: baseline; gap: 4px;
}
.mini-devis .mm-after-time {
  color: var(--bronze);
  text-decoration: none;
  font-size: 26px;
  animation: devisAfterPulse 2.4s ease-in-out infinite;
}
@keyframes devisAfterPulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(201,150,63,0); }
  50% { transform: scale(1.06); text-shadow: 0 0 14px rgba(201,150,63,0.5); }
}
.mini-devis .mm-unit {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.2px; font-weight: 700;
}
.mini-devis .mm-before-bar, .mini-devis .mm-after-bar {
  height: 3px; border-radius: 2px;
  background: rgba(245, 237, 220, 0.06);
  overflow: hidden;
}
.mini-devis .mm-before-fill {
  height: 100%; background: var(--terracotta);
  width: 100%;
  transform-origin: left;
  animation: devisShrink 3s ease-out infinite;
}
@keyframes devisShrink {
  0% { transform: scaleX(1); opacity: 0.7; }
  60%, 100% { transform: scaleX(0.05); opacity: 0.3; }
}
.mini-devis .mm-after-fill {
  height: 100%; background: linear-gradient(90deg, var(--olivier), var(--bronze));
  width: 0%;
  animation: devisGrow 3s ease-out infinite;
}
@keyframes devisGrow {
  0% { width: 0%; }
  60%, 100% { width: 100%; }
}
.mini-devis .mm-vs {
  font-family: var(--font-mono); font-size: 18px;
  color: var(--bronze);
  text-align: center;
  animation: devisArrow 3s ease-in-out infinite;
}
@keyframes devisArrow {
  0%, 100% { transform: translateX(0); opacity: 0.4; }
  50% { transform: translateX(3px); opacity: 1; }
}

/* ── RELANCES : timeline + 3 avions papier ── */
.mini-relances {
  display: flex; align-items: center;
  padding: 14px 16px;
}
.mini-relances .mm-tl {
  flex: 1; position: relative; height: 100%;
}
.mini-relances .mm-tl-rail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, rgba(201,150,63,0.4) 0 5px, transparent 5px 10px);
}
.mini-relances .mm-tl-step {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.mini-relances .mm-tl-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--ink-2);
  border: 1.5px solid var(--bronze);
  position: relative;
}
.mini-relances .mm-tl-step:nth-child(2) .mm-tl-dot::after,
.mini-relances .mm-tl-step:nth-child(3) .mm-tl-dot::after,
.mini-relances .mm-tl-step:nth-child(4) .mm-tl-dot::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--bronze);
  opacity: 0;
  animation: relanceMarkerPing 4.5s ease-out infinite;
}
.mini-relances .mm-tl-step:nth-child(2) .mm-tl-dot::after { animation-delay: 0.3s; }
.mini-relances .mm-tl-step:nth-child(3) .mm-tl-dot::after { animation-delay: 1.5s; }
.mini-relances .mm-tl-step:nth-child(4) .mm-tl-dot::after { animation-delay: 2.7s; }
.mini-relances .mm-tl-lbl {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.2px; color: var(--bronze); font-weight: 700;
  position: absolute; top: 14px;
  white-space: nowrap;
}
.mini-relances .mm-tl-plane {
  position: absolute; top: 50%; left: 0;
  width: 14px; height: 14px;
  color: var(--bronze);
  opacity: 0;
  animation: relancePlaneMini 4.5s ease-out infinite;
}
.mini-relances .mm-tl-plane.p1 { left: 18%; animation-delay: 0.4s; }
.mini-relances .mm-tl-plane.p2 { left: 50%; animation-delay: 1.6s; }
.mini-relances .mm-tl-plane.p3 { left: 82%; animation-delay: 2.8s; }
@keyframes relancePlaneMini {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(-20deg) scale(0.6); }
  15% { opacity: 1; transform: translate(-30%, -10px) rotate(-25deg) scale(1); }
  35% { opacity: 0; transform: translate(20%, -36px) rotate(-30deg) scale(0.8); }
  100% { opacity: 0; }
}

/* ── FACTURE : compteur € qui s'incrémente + ping +XXX € ── */
.mini-facture {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
}
.mini-facture .mm-counter-row {
  display: flex; align-items: center; gap: 8px;
}
.mini-facture .mm-counter-label {
  font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: 1.5px; color: var(--olivier);
  font-weight: 700;
  white-space: nowrap;
}
.mini-facture .mm-counter-val {
  margin-left: auto;
  font-family: var(--font-serif); font-size: 20px;
  color: var(--parchemin); line-height: 1;
  display: flex; align-items: baseline; gap: 2px;
  letter-spacing: -0.4px;
}
.mini-facture .mm-counter-eur {
  color: var(--bronze); font-size: 14px;
}
.mini-facture .mm-counter-check {
  width: 18px; height: 18px;
  color: var(--olivier);
  background: rgba(126,149,135,0.18);
  border-radius: 50%; padding: 2px;
  animation: factureCheckPulse 3s ease-in-out infinite;
}
@keyframes factureCheckPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126,149,135,0.4); }
  50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(126,149,135,0); }
}
.mini-facture .mm-counter-bar {
  height: 4px; background: rgba(245, 237, 220, 0.06);
  border-radius: 2px; overflow: hidden;
  position: relative;
}
.mini-facture .mm-counter-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--olivier), var(--bronze));
  border-radius: 2px;
  animation: factureFill 4s ease-out infinite;
}
@keyframes factureFill {
  0% { width: 0%; }
  100% { width: 92%; }
}
.mini-facture .mm-counter-pings {
  position: relative;
  height: 14px;
}
.mini-facture .mm-ping {
  position: absolute;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1px; font-weight: 700;
  color: var(--olivier);
  opacity: 0;
  animation: facturePingFly 4s ease-out infinite;
}
.mini-facture .mm-ping:nth-child(1) { left: 5%; animation-delay: 0s; }
.mini-facture .mm-ping:nth-child(2) { left: 40%; animation-delay: 1.3s; }
.mini-facture .mm-ping:nth-child(3) { left: 70%; animation-delay: 2.6s; }
@keyframes facturePingFly {
  0% { opacity: 0; transform: translateY(8px); }
  20% { opacity: 1; transform: translateY(0); }
  60% { opacity: 1; transform: translateY(-6px); }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* Mobile mini motions */
@media (max-width: 700px) {
  .mini-motion { height: 84px; padding: 10px 12px; margin: 14px 0 16px; }
  .mini-devis { grid-template-columns: 1fr 20px 1fr; gap: 6px; }
  .mini-devis .mm-after-time { font-size: 22px; }
  .mini-devis .mm-before-time { font-size: 16px; }
  .mini-devis .mm-unit { font-size: 8px; }
  .mini-devis .mm-vs { font-size: 14px; }
  .mini-relances .mm-tl-lbl { font-size: 8.5px; }
  .mini-facture .mm-counter-val { font-size: 17px; }
  .mini-facture .mm-counter-eur { font-size: 12px; }
  .mini-facture .mm-counter-label { font-size: 8px; }
  .mini-facture .mm-counter-check { width: 16px; height: 16px; }
  .mini-facture .mm-ping { font-size: 8.5px; }
}

/* ════════════════════════════════════════════════════════════
   WEB DEMO · un vrai site Talos en motion live
   ════════════════════════════════════════════════════════════ */
.web-demo {
  margin: 50px 0 30px;
  position: relative;
}
.web-demo-frame {
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 0.5px solid rgba(201, 150, 63, 0.3);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 60px 120px -30px rgba(0, 0, 0, 0.7),
    0 0 0 0.5px rgba(201, 150, 63, 0.18);
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}
.web-demo-frame::after {
  content: ""; position: absolute; inset: -1px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(201, 150, 63, 0.5), transparent 25%, transparent 75%, rgba(201, 150, 63, 0.2));
  z-index: -1; pointer-events: none;
}

/* Browser chrome */
.wd-chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: rgba(245, 237, 220, 0.04);
  border-bottom: 0.5px solid var(--line);
}
.wd-traffic { display: flex; gap: 6px; }
.wd-traffic span {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(245, 237, 220, 0.2);
}
.wd-traffic span:nth-child(1) { background: rgba(216, 117, 84, 0.7); box-shadow: 0 0 4px rgba(216, 117, 84, 0.4); }
.wd-traffic span:nth-child(2) { background: rgba(201, 150, 63, 0.7); box-shadow: 0 0 4px rgba(201, 150, 63, 0.4); }
.wd-traffic span:nth-child(3) { background: rgba(126, 149, 135, 0.7); box-shadow: 0 0 4px rgba(126, 149, 135, 0.4); }
.wd-url {
  flex: 0 1 280px;
  padding: 6px 14px;
  background: rgba(245, 237, 220, 0.06);
  border-radius: 6px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted-strong);
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 8px;
}
.wd-url svg { color: var(--olivier); flex-shrink: 0; }
.wd-meta {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.6px; color: var(--bronze);
  font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.wd-meta::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--olivier);
  animation: livePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(126, 149, 135, 0.7);
}

/* Site interior */
.wd-site {
  position: relative;
  padding: 36px 40px 40px;
  min-height: 520px;
  background: linear-gradient(180deg, var(--ink), var(--ink-2) 80%);
}
.wd-site::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.04) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 100% 70% at 50% 30%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 30%, black 30%, transparent 90%);
}

/* Navbar */
.wd-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 30px;
  position: relative; z-index: 1;
}
.wd-logo {
  width: 76px; height: 18px;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-2));
  border-radius: 3px;
}
.wd-nav-links {
  display: flex; gap: 18px;
}
.wd-nav-links span {
  width: 40px; height: 5px;
  background: rgba(245, 237, 220, 0.12);
  border-radius: 2px;
}
.wd-nav-cta {
  width: 80px; height: 22px;
  background: rgba(201, 150, 63, 0.18);
  border: 0.5px solid rgba(201, 150, 63, 0.4);
  border-radius: 4px;
}

/* Hero */
.wd-hero {
  margin-bottom: 32px;
  position: relative; z-index: 1;
}
.wd-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.8px; color: var(--bronze);
  margin-bottom: 18px;
  font-weight: 700;
  padding: 4px 10px;
  border: 0.5px solid rgba(201, 150, 63, 0.3);
  border-radius: 100px;
  background: rgba(201, 150, 63, 0.06);
}
.wd-eb-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--bronze);
  animation: livePulse 1.5s ease-in-out infinite;
}
.wd-hero-headline {
  font-family: var(--font-serif); font-size: 46px;
  color: var(--parchemin); line-height: 1.05;
  letter-spacing: -1.2px;
  margin-bottom: 12px;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0 12px;
}
.wd-hero-headline .wd-line {
  display: inline-block;
  background: linear-gradient(90deg, var(--parchemin), var(--bronze), var(--parchemin));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: wdHeadlineShine 5s linear infinite;
}
.wd-hero-headline .wd-line:nth-of-type(2) {
  animation-delay: 0.6s;
  color: var(--bronze);
  -webkit-text-fill-color: var(--bronze);
  font-style: italic;
}
@keyframes wdHeadlineShine {
  0% { background-position: 200% 0%; }
  100% { background-position: -100% 0%; }
}
.wd-caret {
  display: inline-block;
  width: 3px; height: 38px;
  background: var(--bronze);
  margin-left: 2px;
  animation: wdCaret 0.8s steps(2) infinite;
}
@keyframes wdCaret { 50% { opacity: 0; } }
.wd-hero-sub {
  font-size: 15.5px; color: var(--muted-strong);
  margin-bottom: 22px;
  max-width: 480px;
}
.wd-cta-wrap {
  display: inline-flex; align-items: center;
  position: relative;
}
.wd-cta {
  padding: 13px 24px;
  background: var(--bronze);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.5px;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: none;
  box-shadow: 0 8px 24px -6px rgba(201, 150, 63, 0.5);
  animation: wdCtaPulse 2.4s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes wdCtaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 24px -6px rgba(201, 150, 63, 0.5); }
  50% { transform: scale(1.05); box-shadow: 0 18px 38px -6px rgba(201, 150, 63, 0.9), 0 0 0 8px rgba(201, 150, 63, 0.1); }
}
.wd-cursor-pointer {
  position: absolute;
  width: 20px; height: 20px;
  border: 2px solid var(--parchemin);
  border-radius: 50%;
  pointer-events: none;
  left: 0; top: 50%;
  background: rgba(245, 237, 220, 0.06);
  animation: wdCursor 5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes wdCursor {
  0% { transform: translate(-40px, -60px); opacity: 0; }
  10% { opacity: 1; }
  35% { transform: translate(80px, -10px); }
  55% { transform: translate(110px, -10px) scale(0.7); background: var(--bronze); }
  60% { transform: translate(110px, -10px) scale(1); background: rgba(245, 237, 220, 0.06); }
  85% { transform: translate(40px, 30px); opacity: 0.8; }
  100% { transform: translate(0, 60px); opacity: 0; }
}

/* Stats row */
.wd-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
  position: relative; z-index: 1;
}
.wd-stat {
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.wd-stat-val {
  font-family: var(--font-serif); font-size: 30px;
  color: var(--bronze); line-height: 1;
  letter-spacing: -0.8px;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.wd-stat-val span { font-size: 18px; }
.wd-stat-lbl {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.4px; color: var(--muted);
  font-weight: 700;
  margin-bottom: 12px;
}
.wd-stat-bar {
  height: 4px; background: rgba(245, 237, 220, 0.06);
  border-radius: 2px; overflow: hidden;
}
.wd-stat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--olivier), var(--bronze));
  width: var(--w);
  transform-origin: left;
  animation: wdStatFill 4s ease-out infinite;
}
@keyframes wdStatFill {
  0% { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}

/* Chart row */
.wd-chart {
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  padding: 14px 18px 16px;
  position: relative; z-index: 1;
}
.wd-chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.wd-chart-head span:first-child {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.4px; color: var(--bronze); font-weight: 700;
}
.wd-chart-delta {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.8px; padding: 3px 9px; border-radius: 4px;
  background: rgba(126, 149, 135, 0.2); color: var(--olivier);
  font-weight: 700;
}
.wd-chart-bars {
  display: flex; align-items: end; gap: 8px;
  height: 56px;
}
.wd-cb {
  flex: 1;
  height: var(--p);
  background: linear-gradient(180deg, var(--bronze-2), var(--bronze));
  border-radius: 3px 3px 1px 1px;
  transform-origin: bottom;
  transform: scaleY(0.1);
  animation: wdChartBar 3.6s ease-in-out infinite;
}
.wd-cb:nth-child(1) { animation-delay: 0s; }
.wd-cb:nth-child(2) { animation-delay: 0.1s; }
.wd-cb:nth-child(3) { animation-delay: 0.2s; }
.wd-cb:nth-child(4) { animation-delay: 0.3s; }
.wd-cb:nth-child(5) { animation-delay: 0.4s; }
.wd-cb:nth-child(6) { animation-delay: 0.5s; }
.wd-cb.tall {
  background: linear-gradient(180deg, var(--olivier), var(--bronze));
  animation-delay: 0.6s;
  box-shadow: 0 0 16px -2px rgba(126, 149, 135, 0.5);
}
@keyframes wdChartBar {
  0%, 100% { transform: scaleY(0.1); opacity: 0.55; }
  45%, 65% { transform: scaleY(1); opacity: 1; }
}

/* Toast notification */
.wd-toast {
  position: absolute;
  top: 90px; right: 30px;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  border: 0.5px solid rgba(126, 149, 135, 0.5);
  border-radius: 10px;
  padding: 11px 14px 11px 12px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--parchemin); font-weight: 600;
  letter-spacing: 0.3px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 0.5px rgba(126, 149, 135, 0.25);
  z-index: 4;
  white-space: nowrap;
  animation: wdToast 6.5s ease-in-out infinite;
}
.wd-toast-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--olivier);
  box-shadow: 0 0 8px var(--olivier);
  flex-shrink: 0;
  animation: livePulse 1.6s ease-in-out infinite;
}
.wd-toast strong {
  display: block; font-weight: 700;
  color: var(--parchemin);
  font-size: 11px;
  letter-spacing: 0.4px;
}
.wd-toast > div > span {
  display: block; font-size: 9.5px;
  color: var(--muted); font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
@keyframes wdToast {
  0%, 8% { transform: translate(30px, -16px); opacity: 0; }
  18%, 72% { transform: translate(0, 0); opacity: 1; }
  84%, 100% { transform: translate(30px, -16px); opacity: 0; }
}

/* Caption */
.web-demo-caption {
  max-width: 760px; margin: 32px auto 0;
  text-align: center;
}
.wd-cap-label {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 2px; color: var(--bronze);
  font-weight: 700; margin-bottom: 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.wd-cap-label::before, .wd-cap-label::after {
  content: ""; width: 22px; height: 1px; background: var(--bronze); opacity: 0.4;
}
.wd-cap-text {
  font-family: var(--font-serif); font-size: 18px;
  color: var(--parchemin); line-height: 1.55;
}
.wd-cap-text strong { color: var(--bronze); font-weight: 400; }

@media (max-width: 800px) {
  .wd-site { padding: 24px 20px 28px; min-height: auto; }
  .wd-hero-headline { font-size: 32px; gap: 0 8px; }
  .wd-caret { height: 26px; }
  .wd-hero-sub { font-size: 13.5px; }
  .wd-stats { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .wd-stat { padding: 10px 12px; }
  .wd-stat-val { font-size: 22px; }
  .wd-stat-lbl { font-size: 8.5px; }
  .wd-chart-bars { height: 46px; }
  .wd-nav-links span { width: 24px; }
  .wd-nav-cta { width: 56px; height: 18px; }
  .wd-url { font-size: 9.5px; padding: 5px 10px; }
  .wd-meta { font-size: 8.5px; }
  .wd-toast { top: 70px; right: 14px; padding: 8px 11px; font-size: 9px; }
  .wd-toast strong { font-size: 10px; }
  .wd-cap-text { font-size: 15px; }
  .wd-cursor-pointer { display: none; }
}

/* ═══════════════════════════════════════════════════
   HISTOIRE PAGE
   ═══════════════════════════════════════════════════ */

/* ── HERO ── */
.hist-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 140px 40px 100px;
  overflow: hidden;
}
.hist-hero-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hist-bg-mark {
  width: min(700px, 90vw);
  height: auto;
  animation: histBgPulse 6s ease-in-out infinite;
}
@keyframes histBgPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}
.hist-hero-inner { position: relative; z-index: 1; max-width: 800px; }
.hist-eyebrow {
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 28px;
  opacity: 0.8;
}
.hist-h1 {
  font-size: clamp(46px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: -3px;
  line-height: 1.0;
  color: var(--parchemin);
  margin: 0 0 28px;
}
.hist-h1 em {
  font-style: italic;
  font-weight: 300;
  color: var(--bronze);
}
.hist-hero-sub {
  font-size: clamp(16px, 2vw, 20px);
  color: rgba(245,237,220,.6);
  line-height: 1.6;
  margin: 0;
}
.hist-hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(245,237,220,.3);
  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 600;
}
.hist-scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(201,150,63,.5), transparent);
  animation: histScrollDrop 2s ease-in-out infinite;
}
@keyframes histScrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── CHAPTERS ── */
.hist-chapter {
  padding: 100px 40px;
  border-top: 1px solid rgba(245,237,220,.06);
}
.hist-chapter-alt { background: rgba(255,255,255,.015); }
.hist-chapter-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.hist-chapter-aside {
  flex: 0 0 140px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 6px;
  position: sticky;
  top: 100px;
}
.hist-num {
  font-size: 80px;
  font-weight: 800;
  line-height: 1;
  color: rgba(201,150,63,.12);
  letter-spacing: -4px;
}
.hist-chapter-label {
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--bronze);
  font-weight: 600;
  opacity: 0.7;
}
.hist-chapter-body { flex: 1; min-width: 0; }
.hist-timestamp {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: rgba(201,150,63,.7);
  font-weight: 600;
  margin-bottom: 20px;
}
.hist-chapter-h2 {
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.1;
  color: var(--parchemin);
  margin: 0 0 32px;
}
.hist-p {
  font-size: 17px;
  line-height: 1.8;
  color: rgba(245,237,220,.72);
  margin: 0 0 20px;
}
.hist-p strong { color: var(--parchemin); font-weight: 600; }
.hist-p em { font-style: italic; color: var(--bronze); }
.hist-pull {
  margin: 44px 0;
  padding: 0 0 0 24px;
  border-left: 3px solid var(--bronze);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.8px;
  line-height: 1.3;
  color: var(--parchemin);
  font-style: normal;
}

/* ── MYTH VISUAL ── */
.hist-myth-visual {
  margin: 40px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hist-myth-island {
  position: relative;
  width: 280px;
  height: 160px;
  background: linear-gradient(180deg, #1a2540 0%, #0d1a35 60%, #0A0908 100%);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(201,150,63,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hist-myth-sun {
  position: absolute;
  top: 20px;
  right: 30px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle, #C9963F 0%, rgba(201,150,63,.2) 70%, transparent 100%);
  animation: histSunGlow 4s ease-in-out infinite;
}
@keyframes histSunGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.2); }
}
.hist-myth-sea {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  background: linear-gradient(180deg, transparent, rgba(30,80,160,.3));
}
.hist-myth-figure {
  position: relative;
  z-index: 1;
  animation: histFigureStep 3s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(201,150,63,.4));
}
@keyframes histFigureStep {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.hist-myth-waves {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
}
.hist-myth-waves span {
  width: 30px;
  height: 2px;
  border-radius: 2px;
  background: rgba(201,150,63,.3);
  animation: histWave 2.4s ease-in-out infinite;
}
.hist-myth-waves span:nth-child(2) { animation-delay: .4s; width: 20px; }
.hist-myth-waves span:nth-child(3) { animation-delay: .8s; width: 25px; }
@keyframes histWave {
  0%, 100% { transform: scaleX(1);   opacity: 0.4; }
  50%       { transform: scaleX(1.3); opacity: 0.8; }
}
.hist-myth-caption {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(245,237,220,.3);
  text-transform: uppercase;
}

/* ── TERMINAL ── */
.hist-terminal {
  margin: 36px 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,237,220,.08);
  border-radius: 12px;
  overflow: hidden;
}
.hist-term-bar {
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(245,237,220,.06);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ht-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(245,237,220,.15);
}
.ht-title {
  font-size: 11px;
  color: rgba(245,237,220,.4);
  letter-spacing: 1.5px;
  margin-left: 8px;
}
.hist-term-body { padding: 20px 20px; display: flex; flex-direction: column; gap: 12px; }
.ht-line { display: flex; gap: 16px; align-items: baseline; }
.ht-time {
  font-size: 11px;
  color: rgba(201,150,63,.6);
  font-family: 'SF Mono', 'Fira Code', monospace;
  flex-shrink: 0;
}
.ht-text {
  font-size: 14px;
  color: rgba(245,237,220,.6);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.ht-line-break { margin-top: 8px; padding-top: 12px; border-top: 1px solid rgba(245,237,220,.06); }
.ht-spark {
  color: var(--bronze) !important;
  font-weight: 600;
  animation: htSparkPulse 2s ease-in-out infinite;
}
@keyframes htSparkPulse {
  0%, 100% { opacity: 0.8; }
  50%       { opacity: 1; text-shadow: 0 0 20px rgba(201,150,63,.4); }
}

/* ── STACK TECH ── */
.hist-stack {
  margin: 36px 0;
  padding: 28px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(245,237,220,.07);
  border-radius: 12px;
}
.hist-stack-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
}
.hist-stack-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,237,220,.08);
  border-radius: 8px;
  color: rgba(245,237,220,.7);
  font-size: 13px;
  font-weight: 500;
  flex: 1;
  justify-content: center;
}
.hist-stack-talos {
  border-color: rgba(201,150,63,.3) !important;
  background: rgba(201,150,63,.06) !important;
  color: var(--bronze) !important;
}
.hist-stack-arrow {
  color: rgba(201,150,63,.5);
  font-size: 18px;
  flex-shrink: 0;
}
.hist-stack-sub {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: rgba(245,237,220,.25);
  text-align: center;
}

/* ── PORTRAITS ── */
.hist-portraits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 36px 0;
}
.hist-portrait {
  padding: 20px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(245,237,220,.07);
  border-radius: 10px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color .3s, background .3s;
}
.hist-portrait:hover {
  border-color: rgba(201,150,63,.2);
  background: rgba(201,150,63,.04);
}
.hist-portrait-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(201,150,63,.08);
  border: 1px solid rgba(201,150,63,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze);
}
.hist-portrait-text {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245,237,220,.65);
}
.hist-portrait-text strong { color: var(--parchemin); display: block; margin-bottom: 4px; }

/* ── MANIFESTE ── */
.hist-manifeste {
  padding: 120px 40px;
  background: linear-gradient(180deg, transparent, rgba(201,150,63,.04), transparent);
  border-top: 1px solid rgba(245,237,220,.06);
  border-bottom: 1px solid rgba(245,237,220,.06);
}
.hist-manifeste-inner {
  max-width: 760px;
  margin: 0 auto;
}
.hist-manifeste-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 20px;
  opacity: 0.8;
}
.hist-manifeste-h2 {
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--parchemin);
  margin: 0 0 60px;
}
.hist-manifeste-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hist-manifeste-list li {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding: 28px 0;
  border-bottom: 1px solid rgba(245,237,220,.06);
  transition: color .3s;
}
.hist-manifeste-list li:last-child { border-bottom: none; }
.hist-manifeste-list li:hover .hm-text { color: var(--parchemin); }
.hm-num {
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(201,150,63,.5);
  font-weight: 700;
  flex-shrink: 0;
  width: 24px;
}
.hm-text {
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 600;
  color: rgba(245,237,220,.75);
  letter-spacing: -0.4px;
  line-height: 1.4;
  transition: color .3s;
}

/* ── TEAM ── */
.hist-team {
  padding: 100px 40px;
  border-top: 1px solid rgba(245,237,220,.06);
}
.hist-team-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  gap: 80px;
  align-items: flex-start;
}
.hist-team-values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 32px;
}
.htv-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(245,237,220,.07);
  border-radius: 8px;
  font-size: 13px;
  color: rgba(245,237,220,.65);
}
.htv-item svg { color: var(--bronze); flex-shrink: 0; }

/* ── CTA FINAL ── */
.hist-cta {
  padding: 140px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hist-cta-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.hist-cta-inner { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.hist-cta-label {
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--bronze);
  font-weight: 600;
  margin-bottom: 20px;
  opacity: 0.8;
}
.hist-cta-h2 {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--parchemin);
  line-height: 1.1;
  margin: 0 0 20px;
}
.hist-cta-sub {
  font-size: 16px;
  color: rgba(245,237,220,.55);
  line-height: 1.6;
  margin: 0 0 40px;
}

/* ── NAV ACTIVE LINK ── */
.links a.active { color: var(--bronze); }

/* ════════════════════════════════════════════
   IMPACT GRID — compact + motion subtil
   ════════════════════════════════════════════ */

.impact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
}

.impact-card {
  padding: 20px 22px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(245,237,220,.07);
  border-radius: 12px;
  transition: border-color .35s, background .35s, transform .35s;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.impact-card::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.08) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.impact-card:hover {
  border-color: rgba(201,150,63,.25);
  background: rgba(201,150,63,.02);
  transform: translateY(-3px);
}
.impact-card:hover::before { opacity: 1; }

/* Nom du KPI */
.impact-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: rgba(245,237,220,.5);
}
.impact-name svg { color: var(--bronze); flex-shrink: 0; }

/* Le chiffre héros */
.impact-hero {
  position: relative;
  padding-bottom: 12px;
}
.impact-hero::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 2px;
  background: linear-gradient(90deg, var(--bronze) 0%, rgba(201,150,63,.4) 60%, transparent 100%);
  border-radius: 2px;
}

.impact-value {
  display: flex;
  align-items: baseline;
  gap: 3px;
  line-height: 1;
  color: var(--bronze);
  font-variant-numeric: tabular-nums;
}

.impact-sign {
  font-size: clamp(28px, 3vw, 38px);
  color: var(--bronze);
  opacity: .8;
}
.impact-value .counter {
  font-size: clamp(40px, 4.6vw, 56px);
  letter-spacing: -2px;
}
.impact-suffix {
  font-size: clamp(16px, 1.7vw, 20px);
  color: rgba(201,150,63,.85);
  letter-spacing: -0.5px;
  margin-left: 2px;
}
.impact-caption {
  font-size: 12px;
  color: rgba(245,237,220,.6);
  margin-top: 8px;
  line-height: 1.4;
}
.impact-caption strong {
  color: var(--parchemin);
  font-weight: 700;
}

/* Footer */
.impact-footer {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(245,237,220,.55);
  padding-top: 12px;
  border-top: 1px solid rgba(245,237,220,.06);
}


/* ── Tablette ── */
@media (max-width: 800px) {
  .impact-grid { gap: 10px; margin-top: 22px; }
  .impact-card { padding: 18px 16px; gap: 12px; }
  .impact-value .counter { font-size: 38px; letter-spacing: -1.5px; }
  .impact-sign { font-size: 26px; }
  .impact-suffix { font-size: 15px; }
}

/* ── Smartphone : on garde 2 colonnes mais plus serré ── */
@media (max-width: 500px) {
  .impact-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .impact-card { padding: 14px 12px; gap: 10px; }
  .impact-name { font-size: 8px; letter-spacing: 1.2px; gap: 6px; }
  .impact-name svg { width: 12px; height: 12px; }
  .impact-hero { padding-bottom: 10px; }
  .impact-value .counter { font-size: 30px; letter-spacing: -1.2px; }
  .impact-sign { font-size: 20px; }
  .impact-suffix { font-size: 12px; }
  .impact-caption { font-size: 10px; margin-top: 6px; }
  .impact-footer { font-size: 11px; line-height: 1.45; padding-top: 10px; }
}

/* ════════════════════════════════════════════
   DASHBOARD — FLUX DE DONNÉES ANIMÉ (cn-flow)
   ════════════════════════════════════════════ */

.cn-flow {
  position: relative;
  height: 32px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(245,237,220,.02);
  display: flex;
  align-items: center;
  padding: 0 10px;
}
.cn-flow-rail {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(201,150,63,.2) 15%,
    rgba(201,150,63,.2) 85%,
    transparent 100%);
  transform: translateY(-50%);
  pointer-events: none;
}

/* Petits "blips" qui traversent la ligne — comme des paquets de données */
.cn-flow-blip {
  position: absolute;
  top: 50%;
  left: -15%;
  width: 60px;
  height: 12px;
  background: radial-gradient(ellipse at center, var(--bronze) 0%, rgba(201,150,63,.4) 35%, transparent 70%);
  filter: blur(2px);
  transform: translateY(-50%);
  opacity: 0;
  animation: cnBlipTravel 3.4s var(--d, 0s) cubic-bezier(.4,0,.5,1) infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes cnBlipTravel {
  0%   { left: -15%; opacity: 0;  transform: translateY(-50%) scale(.6); }
  10%  { opacity: .9; transform: translateY(-50%) scale(1); }
  85%  { opacity: .9; transform: translateY(-50%) scale(1); }
  100% { left: 110%;  opacity: 0;  transform: translateY(-50%) scale(.6); }
}

/* Point pulsant "live" tout à droite */
.cn-flow-pulse-dot {
  position: absolute;
  right: 50px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(201,150,63,.6);
  animation: cnPulseDot 1.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes cnPulseDot {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1);   box-shadow: 0 0 0 0 rgba(201,150,63,.5); }
  50%       { opacity: .8; transform: translateY(-50%) scale(1.3); box-shadow: 0 0 0 8px rgba(201,150,63,0); }
}

.cn-flow-tag {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 8px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: var(--bronze);
  background: rgba(201,150,63,.1);
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}

/* ── TÂCHES qui s'éliminent (TEMPS RÉCUPÉRÉ) ── */
.cn-flow-tasks {
  padding: 0;
}
.cn-task {
  position: absolute;
  left: -10%;
  top: 50%;
  transform: translateY(-50%) scale(.7);
  padding: 3px 7px;
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 1.3px;
  font-weight: 700;
  background: rgba(245,237,220,.08);
  border: 1px solid rgba(245,237,220,.15);
  color: rgba(245,237,220,.7);
  white-space: nowrap;
  opacity: 0;
  animation: cnTaskEliminate 7s var(--d, 0s) cubic-bezier(.4,0,.55,1) infinite;
  pointer-events: none;
}
.cn-task::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  top: 50%;
  height: 1.5px;
  background: var(--bronze);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left;
  border-radius: 1px;
  animation: cnTaskStrike 7s var(--d, 0s) cubic-bezier(.4,0,.55,1) infinite;
}
@keyframes cnTaskEliminate {
  0%   { left: -10%; opacity: 0; transform: translateY(-50%) scale(.6); color: rgba(245,237,220,.7); }
  8%   { opacity: 1; transform: translateY(-50%) scale(1); }
  50%  { left: 55%;  opacity: 1; color: rgba(245,237,220,.7); }
  62%  { left: 65%;  opacity: 1; color: var(--bronze); background: rgba(201,150,63,.12); border-color: rgba(201,150,63,.35); }
  75%  { left: 78%;  opacity: .6; color: var(--bronze); }
  88%  { left: 92%;  opacity: 0; transform: translateY(-50%) scale(.4); }
  100% { opacity: 0; }
}
@keyframes cnTaskStrike {
  0%, 55% { transform: translateY(-50%) scaleX(0); opacity: 0; }
  62%      { transform: translateY(-50%) scaleX(1); opacity: 1; }
  88%      { transform: translateY(-50%) scaleX(1); opacity: .5; }
  100%     { transform: translateY(-50%) scaleX(1); opacity: 0; }
}
.cn-flow-tag-time {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: .5px;
  font-weight: 800;
  color: var(--bronze);
  background: rgba(201,150,63,.15);
  border: 1px solid rgba(201,150,63,.3);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 3;
  animation: cnTagPulse 3s ease-in-out infinite;
}
@keyframes cnTagPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,63,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(201,150,63,0); }
}

/* ── CONTRATS qui s'enchaînent (CA SIGNÉ) ── */
.cn-flow-contracts {
  padding: 0;
}
.cn-flow-contracts .cn-flow-rail {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(126,149,135,.2) 15%,
    rgba(126,149,135,.2) 80%,
    transparent 100%);
}
.cn-contract {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%) scale(.5);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(126,149,135,.1);
  border: 1px solid rgba(126,149,135,.3);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--olivier);
  white-space: nowrap;
  opacity: 0;
  animation: cnContractSign 4.5s var(--d, 0s) cubic-bezier(.16,1,.3,1) infinite;
  pointer-events: none;
}
.cn-contract svg { flex-shrink: 0; }
.cn-contract-amt {
  font-family: var(--font-mono);
  letter-spacing: .5px;
}
.cn-contract-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--olivier);
  color: var(--ink);
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0);
}
@keyframes cnContractSign {
  0%   { left: 25%; opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  18%  { transform: translate(-50%, -50%) scale(1); }
  40%  { left: 50%; opacity: 1; }
  100% { left: 100%; opacity: 0; transform: translate(-50%, -50%) scale(.7); }
}
/* La coche apparaît après que le contrat est posé (40% du cycle) */
.cn-contract .cn-contract-check {
  animation: cnContractCheck 4.5s var(--d, 0s) cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes cnContractCheck {
  0%, 30% { opacity: 0; transform: scale(0) rotate(-90deg); }
  35%      { opacity: 1; transform: scale(1.4) rotate(0deg); }
  42%      { transform: scale(1) rotate(0deg); }
  90%      { opacity: 1; transform: scale(1); }
  100%     { opacity: 0; transform: scale(.7); }
}

.cn-flow-tag-ca {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--olivier);
  background: rgba(126,149,135,.15);
  border: 1px solid rgba(126,149,135,.3);
  padding: 3px 8px;
  border-radius: 4px;
  z-index: 3;
  animation: cnTagPulseOlivier 3s ease-in-out infinite;
}
@keyframes cnTagPulseOlivier {
  0%, 100% { box-shadow: 0 0 0 0 rgba(126,149,135,.4); }
  50%       { box-shadow: 0 0 0 6px rgba(126,149,135,0); }
}

/* ── Hauteur dashboard agrandie pour les nouveaux motions ── */
.cn-flow { height: 36px; margin-top: 12px; padding: 0; }

/* ════════════════════════════════════════════
   IMPACT CARDS — Motion + couleurs (perte évitée)
   ════════════════════════════════════════════ */

.impact-trend {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  letter-spacing: 1.5px;
  font-weight: 700;
  margin-bottom: 8px;
  padding: 3px 8px;
  border-radius: 12px;
  width: fit-content;
}
.impact-trend svg {
  width: 9px;
  height: 9px;
  animation: impactArrowPulse 1.8s ease-in-out infinite;
}
@keyframes impactArrowPulse {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(-3px); opacity: .55; }
}
.impact-card[data-trend="down"] .impact-trend svg {
  animation: impactArrowPulseDown 1.8s ease-in-out infinite;
}
@keyframes impactArrowPulseDown {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%       { transform: translateY(3px); opacity: .55; }
}

/* Couleurs par type */
.impact-card[data-type="time"] .impact-value,
.impact-card[data-type="time"] .impact-sign,
.impact-card[data-type="time"] .impact-suffix { color: var(--olivier); }
.impact-card[data-type="time"] .impact-trend {
  background: rgba(126,149,135,.12);
  color: var(--olivier);
}
.impact-card[data-type="time"] .impact-hero::after {
  background: linear-gradient(90deg, var(--olivier) 0%, rgba(126,149,135,.4) 60%, transparent 100%);
}

.impact-card[data-type="gain"] .impact-trend {
  background: rgba(201,150,63,.12);
  color: var(--bronze);
}

.impact-card[data-type="reduce"] .impact-value,
.impact-card[data-type="reduce"] .impact-sign,
.impact-card[data-type="reduce"] .impact-suffix { color: #D87554; }
.impact-card[data-type="reduce"] .impact-trend {
  background: rgba(216,117,84,.12);
  color: #D87554;
}
.impact-card[data-type="reduce"] .impact-hero::after {
  background: linear-gradient(90deg, #D87554 0%, rgba(216,117,84,.4) 60%, transparent 100%);
}

/* ─── MOTION ─── */

/* 1. ENTRÉE de carte : fade + slide stagger */
.impact-grid.in .impact-card {
  animation: impactCardEnter .8s var(--ce, 0s) cubic-bezier(.16,1,.3,1) both;
}
@keyframes impactCardEnter {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.impact-grid.in .impact-card:nth-child(1) { --ce: .05s; }
.impact-grid.in .impact-card:nth-child(2) { --ce: .18s; }
.impact-grid.in .impact-card:nth-child(3) { --ce: .31s; }
.impact-grid.in .impact-card:nth-child(4) { --ce: .44s; }

/* 2. BADGE de tendance : pop-in avec spring */
.impact-grid.in .impact-trend {
  animation: impactTrendPop .7s calc(var(--ce, 0s) + .15s) cubic-bezier(.34,1.6,.64,1) backwards;
}
@keyframes impactTrendPop {
  0%   { opacity: 0; transform: scale(.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* 3. ACCENT line se dessine */
.impact-hero::after {
  width: 0;
  transition: width 1.4s cubic-bezier(.16,1,.3,1);
}
.impact-grid.in .impact-hero::after {
  width: 50%;
  transition-delay: calc(var(--ce, 0s) + .5s);
}

/* 4. GLOW perpetuel derrière la valeur (couleur courante) */
.impact-value { position: relative; }
.impact-value::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: radial-gradient(ellipse at center, currentColor 0%, transparent 60%);
  opacity: .1;
  pointer-events: none;
  z-index: -1;
  filter: blur(24px);
  animation: impactValueBreathe 4s ease-in-out infinite;
}
@keyframes impactValueBreathe {
  0%, 100% { opacity: .08; transform: scale(1); }
  50%       { opacity: .22; transform: scale(1.12); }
}

/* 5. PERTE ÉVITÉE — cards data-type="reduce" : value bascule rouge → bronze → rouge */
.impact-card[data-type="reduce"] .impact-value,
.impact-card[data-type="reduce"] .impact-sign,
.impact-card[data-type="reduce"] .impact-suffix {
  animation: impactReduceMorph 4.5s ease-in-out infinite;
}
@keyframes impactReduceMorph {
  0%, 100% {
    color: #D87554;
    text-shadow: 0 0 20px rgba(216,117,84,.35);
  }
  50% {
    color: var(--bronze);
    text-shadow: 0 0 28px rgba(201,150,63,.5);
  }
}

/* Petit badge "ÉVITÉ" en bronze pulsant sur les cards reduce */
.impact-card[data-type="reduce"] .impact-hero {
  position: relative;
}
.impact-card[data-type="reduce"] .impact-hero::before {
  content: '✓ ÉVITÉ';
  position: absolute;
  top: 30px;
  right: 0;
  font-size: 8px;
  letter-spacing: 1.5px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 10px;
  background: rgba(201,150,63,.15);
  color: var(--bronze);
  border: 1px solid rgba(201,150,63,.3);
  animation: impactEvitedPulse 2.5s ease-in-out infinite;
  z-index: 1;
  font-family: var(--font-mono);
}
@keyframes impactEvitedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,63,.5); transform: scale(1); }
  50%       { box-shadow: 0 0 0 6px rgba(201,150,63,0); transform: scale(1.06); }
}

/* 6. GAIN — cards data-type="time" et "gain" : value avec subtle pulse vert/bronze */
.impact-card[data-type="time"] .impact-value,
.impact-card[data-type="time"] .impact-sign,
.impact-card[data-type="time"] .impact-suffix {
  animation: impactGainPulse 4s ease-in-out infinite;
}
.impact-card[data-type="gain"] .impact-value,
.impact-card[data-type="gain"] .impact-sign,
.impact-card[data-type="gain"] .impact-suffix {
  animation: impactGainPulseBronze 4s ease-in-out infinite;
}
@keyframes impactGainPulse {
  0%, 100% {
    color: var(--olivier);
    text-shadow: 0 0 18px rgba(126,149,135,.3);
  }
  50% {
    color: #a8c0b0;
    text-shadow: 0 0 30px rgba(168,192,176,.5);
  }
}
@keyframes impactGainPulseBronze {
  0%, 100% {
    color: var(--bronze);
    text-shadow: 0 0 18px rgba(201,150,63,.35);
  }
  50% {
    color: var(--bronze-2);
    text-shadow: 0 0 30px rgba(217,166,88,.5);
  }
}

/* ════════════════════════════════════════════
   BAR CHARTS — remplace les sparklines/courbes
   ════════════════════════════════════════════ */

/* Mini bars (utilisé dans la console + cn-kpi) */
.mini-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  width: 100%;
  margin-top: 6px;
}
.mini-bars span {
  flex: 1;
  display: block;
  background: var(--bronze);
  border-radius: 2px 2px 0 0;
  height: 0;
  opacity: .85;
  animation: miniBarGrow .9s var(--d, 0s) cubic-bezier(.16,1,.3,1) both;
  transform-origin: bottom;
}
@keyframes miniBarGrow {
  0%   { height: 0;                 opacity: 0; }
  60%  { opacity: .9; }
  100% { height: calc(var(--h) * 1%); opacity: .85; }
}
.mini-bars-olivier span { background: var(--olivier); }
.mini-bars-rouille span { background: #D87554; }

/* KPI bars (utilisé dans .kpi-cell) */
.kpi-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
  width: 100%;
  margin-top: 14px;
}
.kpi-bars span {
  flex: 1;
  display: block;
  background: var(--bronze);
  border-radius: 3px 3px 0 0;
  height: calc(var(--h) * 1%);
  opacity: .9;
  transition: opacity .2s, transform .2s;
  position: relative;
}
.kpi-cell:hover .kpi-bars span:last-child {
  background: var(--parchemin);
  opacity: 1;
}
.kpi-bars span:last-child {
  background: var(--parchemin);
  opacity: 1;
}
.kpi-bars-olivier span { background: var(--olivier); }
.kpi-bars-olivier span:last-child { background: #a8c0b0; opacity: 1; }
.kpi-bars-rouille span { background: #D87554; }
.kpi-bars-rouille span:last-child { background: #e89481; opacity: 1; }

/* Animation au chargement */
.kpi-cell .kpi-bars span {
  animation: kpiBarRise 1.2s cubic-bezier(.16,1,.3,1) both;
}
.kpi-cell .kpi-bars span:nth-child(1)  { animation-delay: .05s; }
.kpi-cell .kpi-bars span:nth-child(2)  { animation-delay: .10s; }
.kpi-cell .kpi-bars span:nth-child(3)  { animation-delay: .15s; }
.kpi-cell .kpi-bars span:nth-child(4)  { animation-delay: .20s; }
.kpi-cell .kpi-bars span:nth-child(5)  { animation-delay: .25s; }
.kpi-cell .kpi-bars span:nth-child(6)  { animation-delay: .30s; }
.kpi-cell .kpi-bars span:nth-child(7)  { animation-delay: .35s; }
.kpi-cell .kpi-bars span:nth-child(8)  { animation-delay: .40s; }
.kpi-cell .kpi-bars span:nth-child(9)  { animation-delay: .45s; }
.kpi-cell .kpi-bars span:nth-child(10) { animation-delay: .50s; }
@keyframes kpiBarRise {
  from { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
  to   { transform: scaleY(1); transform-origin: bottom; opacity: .9; }
}

/* ════════════════════════════════════════════
   SETUP TIMELINE HORIZONTALE
   ════════════════════════════════════════════ */

.setup-section {
  padding: 80px 40px 100px;
  max-width: 1200px;
  margin: 0 auto;
}

.setup-timeline {
  margin-top: 80px;
  position: relative;
  padding: 0 20px;
}

/* Track horizontal */
.setup-track {
  position: relative;
  height: 60px;
  margin: 0 8% 60px;
}
.setup-track-bg {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(245,237,220,.08);
  border-radius: 2px;
  transform: translateY(-50%);
}
.setup-track-fill {
  position: absolute;
  top: 50%;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--bronze) 0%, #d9a84a 100%);
  border-radius: 2px;
  transform: translateY(-50%);
  width: 0%;
  animation: setupFill 2.6s .3s cubic-bezier(.16,1,.3,1) forwards;
  box-shadow: 0 0 12px rgba(201,150,63,.3);
}
@keyframes setupFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Milestones */
.setup-milestone {
  position: absolute;
  top: 50%;
  left: var(--ml);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.setup-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid rgba(245,237,220,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  animation: setupDotActivate .5s var(--md) cubic-bezier(.16,1,.3,1) both;
}
@keyframes setupDotActivate {
  0%   { border-color: rgba(245,237,220,.15); }
  100% { border-color: var(--bronze); box-shadow: 0 0 0 4px rgba(201,150,63,.15); }
}
.setup-dot-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(245,237,220,.15);
  animation: setupDotInner .5s var(--md) cubic-bezier(.16,1,.3,1) both,
             setupDotPulse 2.4s calc(var(--md) + .5s) ease-out infinite;
}
@keyframes setupDotInner {
  to { background: var(--bronze); }
}
@keyframes setupDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,150,63,.6); }
  100% { box-shadow: 0 0 0 14px rgba(201,150,63,0); }
}
.setup-day {
  position: absolute;
  top: calc(100% + 12px);
  font-size: 11px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--bronze);
  white-space: nowrap;
  opacity: 0;
  animation: setupDayFade .4s var(--md) forwards;
}
@keyframes setupDayFade {
  to { opacity: 1; }
}

/* Cards */
.setup-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  margin-top: 40px;
}
.setup-card {
  padding: 28px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(245,237,220,.07);
  border-radius: 14px;
  transition: border-color .3s, transform .3s, background .3s;
  opacity: 0;
  animation: setupCardIn .6s var(--cd) cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes setupCardIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.setup-card:hover {
  border-color: rgba(201,150,63,.25);
  background: rgba(201,150,63,.04);
  transform: translateY(-3px);
}
.setup-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.setup-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(201,150,63,.1);
  border: 1px solid rgba(201,150,63,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze);
  flex-shrink: 0;
}
.setup-card-tag {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--bronze);
}
.setup-card-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--parchemin);
  margin: 0 0 10px;
  letter-spacing: -0.3px;
}
.setup-card-p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245,237,220,.55);
  margin: 0 0 18px;
}
.setup-card-meta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  background: rgba(245,237,220,.05);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  color: rgba(245,237,220,.7);
}
.setup-card-meta svg { color: var(--bronze); }
.setup-card-live {
  background: rgba(126,149,135,.1);
  color: var(--olivier);
  border: 1px solid rgba(126,149,135,.2);
}
.setup-card-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--olivier);
  animation: setupLiveBlink 1.4s ease-in-out infinite;
}
@keyframes setupLiveBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}

/* Mini progress bar dans la card 2 */
.setup-card-progress {
  margin-top: 18px;
}
.setup-card-progress-track {
  height: 6px;
  background: rgba(245,237,220,.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.setup-card-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bronze), #d9a84a);
  border-radius: 3px;
  width: 0;
  animation: setupProgressFill 1.4s 2.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes setupProgressFill {
  to { width: var(--pf); }
}
.setup-card-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  color: rgba(245,237,220,.5);
}
.setup-card-progress-val {
  color: var(--bronze);
}

/* ── mobile setup ── */
@media (max-width: 800px) {
  .setup-section { padding: 60px 20px 80px; }
  .setup-timeline { margin-top: 50px; padding: 0; }
  .setup-track { margin: 0 5% 50px; height: 50px; }
  .setup-cards { grid-template-columns: 1fr; gap: 16px; }
  .setup-card { padding: 22px; }
  .setup-card-title { font-size: 17px; }
}
@media (max-width: 500px) {
  .setup-day { font-size: 10px; letter-spacing: 1.5px; }
  .setup-dot { width: 18px; height: 18px; }
}

/* ════════════════════════════════════════════
   MÉTHODE — JOURNEY 3 ÉTAPES
   ════════════════════════════════════════════ */

.meth-journey {
  padding: 0 0 80px;
}

/* ── step wrapper ── */
.meth-step {
  padding: 80px 40px;
  border-top: 1px solid rgba(245,237,220,.06);
}
.meth-step-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}
.meth-step-tag {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--bronze);
  margin-bottom: 20px;
  opacity: .8;
}
.meth-step-num {
  font-size: 44px;
  font-weight: 800;
  color: rgba(201,150,63,.18);
  letter-spacing: -2px;
  line-height: 1;
}
.meth-step-h2 {
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.15;
  color: var(--parchemin);
  margin: 0 0 20px;
}
.meth-step-p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(245,237,220,.65);
  margin: 0 0 16px;
}
.meth-step-p em { color: var(--bronze); font-style: italic; }
.meth-step-kpi {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 28px;
  padding: 16px 20px;
  background: rgba(201,150,63,.06);
  border: 1px solid rgba(201,150,63,.15);
  border-radius: 10px;
  width: fit-content;
}
.meth-kpi-val {
  font-size: 32px;
  font-weight: 800;
  color: var(--bronze);
  letter-spacing: -1px;
  line-height: 1;
}
.meth-kpi-label {
  font-size: 12px;
  color: rgba(245,237,220,.5);
  letter-spacing: .5px;
  font-weight: 500;
}

/* ── connector ── */
.meth-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
}
.meth-conn-line {
  width: 1px;
  height: 48px;
  background: linear-gradient(to bottom, transparent, rgba(201,150,63,.3), transparent);
}
.meth-conn-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(201,150,63,.1);
  border: 1px solid rgba(201,150,63,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bronze);
  animation: methConnPulse 2s ease-in-out infinite;
}
@keyframes methConnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,63,.3); }
  50%       { box-shadow: 0 0 0 8px rgba(201,150,63,0); }
}

/* ── base demo card ── */
.meth-step-visual {}
.meth-demo {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(245,237,220,.08);
  border-radius: 16px;
  padding: 24px;
  overflow: hidden;
  position: relative;
}

/* ════════════
   DEMO 1 — SCAN
   ════════════ */
.meth-scan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.meth-scan-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--bronze);
}
.meth-scan-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--bronze);
  animation: methDotBlink 1.2s step-end infinite;
}
@keyframes methDotBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.meth-scan-timer {
  font-size: 11px;
  font-family: 'SF Mono', monospace;
  color: rgba(245,237,220,.35);
  animation: methTimerTick 1s step-end infinite;
}
@keyframes methTimerTick {
  0%, 49% { opacity: 1; }
  50%, 100%{ opacity: .4; }
}
.meth-scan-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.meth-scan-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: 13px;
  color: rgba(245,237,220,.6);
  border: 1px solid transparent;
  animation: methItemReveal .5s calc(var(--si) * 0.18s + 0.1s) both;
}
@keyframes methItemReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.meth-scan-flagged {
  animation: methItemReveal .5s calc(var(--si) * 0.18s + 0.1s) both,
             methItemFlag 4s calc(var(--si) * 0.4s + 1s) ease-in-out infinite;
}
@keyframes methItemFlag {
  0%, 25%  { background: transparent;            border-color: transparent;          color: rgba(245,237,220,.6); }
  35%, 65% { background: rgba(255,90,60,.07);    border-color: rgba(255,90,60,.2);   color: #ff8070; }
  75%, 100%{ background: transparent;            border-color: transparent;          color: rgba(245,237,220,.6); }
}
.meth-scan-icon { font-size: 14px; flex-shrink: 0; }
.meth-scan-name { flex: 1; }
.meth-scan-cost {
  font-size: 11px;
  font-weight: 700;
  color: #ff8070;
  letter-spacing: .5px;
  animation: methCostPulse 4s ease-in-out infinite;
}
@keyframes methCostPulse {
  0%, 25%, 75%, 100% { opacity: 0; }
  35%, 65%           { opacity: 1; }
}
.meth-scan-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(201,150,63,.08);
  border: 1px solid rgba(201,150,63,.2);
  border-radius: 8px;
  font-size: 13px;
  color: var(--bronze);
  animation: methResultReveal 1s 1.2s both;
}
@keyframes methResultReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.meth-scan-result strong { color: var(--parchemin); }

/* ════════════
   DEMO 2 — FORGE
   ════════════ */
.meth-demo-forge {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  min-height: 220px;
}
.meth-forge-inputs,
.meth-forge-outputs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meth-forge-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,237,220,.07);
  border-radius: 7px;
  font-size: 12px;
  color: rgba(245,237,220,.6);
  animation: methForgeIn .5s calc(var(--fii) * 0.22s + 0.1s) both,
             methForgeInPulse 3.2s calc(var(--fii) * 0.5s + 0.8s) ease-in-out infinite;
}
@keyframes methForgeIn {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes methForgeInPulse {
  0%, 100% { border-color: rgba(245,237,220,.07); }
  50%      { border-color: rgba(201,150,63,.25); }
}
.meth-forge-in-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(201,150,63,.5);
  flex-shrink: 0;
  animation: methDotTravel 3.2s ease-in-out infinite;
  animation-delay: calc(var(--fii) * 0.5s);
}
@keyframes methDotTravel {
  0%   { transform: translateX(0);    opacity: .5; }
  50%  { transform: translateX(12px); opacity: 1; }
  100% { transform: translateX(0);    opacity: .5; }
}
.meth-forge-center {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
}
.meth-forge-pulse {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1.5px solid rgba(201,150,63,.3);
  animation: methForgePulse 2s ease-out infinite;
}
@keyframes methForgePulse {
  0%   { transform: scale(.8); opacity: .8; }
  100% { transform: scale(1.8); opacity: 0; }
}
.meth-forge-bolt { filter: drop-shadow(0 0 10px rgba(201,150,63,.4)); }
.meth-forge-out {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(40,200,64,.05);
  border: 1px solid rgba(40,200,64,.15);
  border-radius: 7px;
  font-size: 12px;
  color: #5dd87a;
  animation: methForgeOut .5s calc(var(--foi) * 0.22s + 0.6s) both;
}
@keyframes methForgeOut {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.meth-forge-out svg { color: #5dd87a; flex-shrink: 0; }

/* ════════════
   DEMO 3 — FREEDOM
   ════════════ */
.meth-demo-free {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.meth-free-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
}
.meth-free-before-label { color: rgba(245,237,220,.3); }
.meth-free-after-label  { color: var(--bronze); }
.meth-free-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.meth-free-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  text-align: center;
  animation: methBlockIn .4s calc(var(--fbi) * 0.1s + 0.2s) both;
}
@keyframes methBlockIn {
  from { opacity: 0; transform: translateY(10px) scale(.95); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.meth-free-block span {
  font-size: 8px;
  opacity: .5;
  font-weight: 400;
  letter-spacing: 1px;
}
.meth-free-block small {
  font-size: 8px;
  opacity: .6;
  display: block;
}
.meth-free-admin {
  background: rgba(255,70,50,.07);
  border: 1px solid rgba(255,70,50,.15);
  color: rgba(255,120,100,.8);
}
.meth-free-libre {
  background: rgba(201,150,63,.08);
  border: 1px solid rgba(201,150,63,.2);
  color: var(--bronze);
}
.meth-free-work {
  background: rgba(40,200,64,.06);
  border: 1px solid rgba(40,200,64,.18);
  color: #5dd87a;
}
.meth-free-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
}
.meth-free-arrow-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,150,63,.4), transparent);
}
.meth-free-arrow-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--bronze);
  white-space: nowrap;
  animation: methArrowPulse 2s ease-in-out infinite;
}
@keyframes methArrowPulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

/* ── mobile ── */
@media (max-width: 800px) {
  .meth-step-inner { grid-template-columns: 1fr; gap: 32px; }
  .meth-step { padding: 60px 20px; }
  .meth-demo-forge { grid-template-columns: 1fr; gap: 12px; }
  .meth-forge-center { margin: 0 auto; }
  .meth-forge-inputs, .meth-forge-outputs { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .meth-free-row { grid-template-columns: repeat(5,1fr); gap: 4px; }
  .meth-free-block { padding: 8px 2px; font-size: 8px; }
  .meth-forge-inputs, .meth-forge-outputs { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════
   BANDEAU ADAPTABILITÉ (page automatisations)
   ════════════════════════════════════════════ */

.adapt-banner {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 0 40px;
  position: relative;
}
.adapt-banner-inner {
  position: relative;
  padding: 28px 32px;
  background: linear-gradient(135deg, rgba(201,150,63,.08) 0%, rgba(201,150,63,.02) 100%);
  border: 1px solid rgba(201,150,63,.22);
  border-radius: 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  overflow: hidden;
}
.adapt-banner-inner::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.15) 0%, transparent 70%);
  pointer-events: none;
  animation: adaptBannerPulse 5s ease-in-out infinite;
}
@keyframes adaptBannerPulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%       { transform: scale(1.15); opacity: 1;  }
}
.adapt-banner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(201,150,63,.15);
  border: 1px solid rgba(201,150,63,.35);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--bronze);
  white-space: nowrap;
}
.adapt-banner-text {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245,237,220,.75);
  margin: 0;
}
.adapt-banner-text strong { color: var(--parchemin); font-weight: 700; }
.adapt-banner-text em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--bronze);
  font-weight: 400;
}
.adapt-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--bronze);
  color: var(--ink);
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.adapt-banner-cta:hover {
  background: var(--bronze-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201,150,63,.3);
}
@media (max-width: 900px) {
  .adapt-banner { padding: 0 20px; margin-bottom: 30px; }
  .adapt-banner-inner { grid-template-columns: 1fr; padding: 22px; gap: 16px; text-align: left; }
  .adapt-banner-cta { justify-content: center; }
}
@media (max-width: 500px) {
  .adapt-banner-inner { padding: 18px; }
  .adapt-banner-text { font-size: 13px; }
}

/* ════════════════════════════════════════════
   PRICING — fond animé + icônes par feature
   ════════════════════════════════════════════ */

.pricing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ── FOND ANIMÉ ── */
.pricing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Orbes flous qui dérivent lentement */
.pricing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .35;
  will-change: transform;
}
.pricing-orb-1 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(201,150,63,.55) 0%, transparent 70%);
  top: -10%;
  left: -8%;
  animation: orbDrift1 22s ease-in-out infinite;
}
.pricing-orb-2 {
  width: 460px;
  height: 460px;
  background: radial-gradient(circle, rgba(126,149,135,.4) 0%, transparent 70%);
  bottom: -10%;
  right: -10%;
  animation: orbDrift2 26s ease-in-out infinite;
}
.pricing-orb-3 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(201,150,63,.35) 0%, transparent 70%);
  top: 40%;
  left: 45%;
  animation: orbDrift3 19s ease-in-out infinite;
}
@keyframes orbDrift1 {
  0%, 100% { transform: translate(0, 0)        scale(1); }
  33%       { transform: translate(180px, 120px) scale(1.1); }
  66%       { transform: translate(80px, -60px)  scale(.95); }
}
@keyframes orbDrift2 {
  0%, 100% { transform: translate(0, 0)         scale(1); }
  50%       { transform: translate(-160px, -100px) scale(1.15); }
}
@keyframes orbDrift3 {
  0%, 100% { transform: translate(0, 0)        scale(1)   rotate(0); }
  50%       { transform: translate(-90px, 70px) scale(.85) rotate(180deg); }
}

/* Grille de fond très subtile */
.pricing-grid-pattern {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(245,237,220,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,237,220,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  opacity: .8;
  animation: gridShift 30s linear infinite;
}
@keyframes gridShift {
  from { background-position: 0 0; }
  to   { background-position: 48px 48px; }
}

/* Particules dorées qui flottent */
.pricing-particles {
  position: absolute;
  inset: 0;
}
.pricing-particles span {
  position: absolute;
  left: var(--px);
  top: var(--py);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 8px rgba(201,150,63,.6);
  opacity: 0;
  animation: particleFloat var(--ps) var(--pd) ease-in-out infinite;
}
@keyframes particleFloat {
  0%, 100% { opacity: 0;   transform: translate(0, 0)        scale(.5); }
  15%       { opacity: .6;  transform: translate(20px, -30px) scale(1); }
  50%       { opacity: .9;  transform: translate(-15px, -80px) scale(1.2); }
  85%       { opacity: .4;  transform: translate(30px, -130px) scale(1); }
}

/* Tout le contenu pricing passe au-dessus du fond */
.pricing > .price-grid,
.pricing > .price-custom {
  position: relative;
  z-index: 1;
}

/* ── TOGGLE MENSUEL / ANNUEL ── */
.billing-toggle-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 0 0 36px;
  position: relative;
  z-index: 2;
}
.billing-toggle {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,237,220,.1);
  border-radius: 14px;
  gap: 0;
}
.billing-tab {
  padding: 12px 22px;
  background: transparent;
  border: none;
  color: rgba(245,237,220,.55);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  border-radius: 10px;
  transition: color .35s, background .35s, box-shadow .35s, transform .35s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.billing-tab:hover:not(.active) { color: var(--parchemin); }
.billing-tab.active {
  color: var(--ink);
  background: linear-gradient(135deg, var(--bronze) 0%, var(--bronze-2) 100%);
  box-shadow: 0 4px 14px rgba(201,150,63,.3);
}

.billing-tab-bonus {
  font-size: 9px;
  letter-spacing: 1.3px;
  font-weight: 800;
  padding: 3px 7px;
  border-radius: 12px;
  background: var(--bronze);
  color: var(--ink);
  transition: background .35s, color .35s, box-shadow .35s, transform .35s;
}
.billing-tab.active .billing-tab-bonus {
  background: rgba(10,9,8,.18);
  color: var(--ink);
  animation: none;
}
.billing-tab:not(.active) .billing-tab-bonus {
  animation: billingBonusPulse 2s ease-in-out infinite;
}
@keyframes billingBonusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,63,.6); transform: scale(1); }
  50%       { box-shadow: 0 0 0 6px rgba(201,150,63,0); transform: scale(1.04); }
}

/* ── PRIX DYNAMIQUE + NOTES BILLING ── */
.price-amount {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: color .3s;
}
.price-card .price-num[data-monthly] {
  transition: color .3s;
}
.price-billing-note {
  font-size: 10px;
  letter-spacing: 1.2px;
  font-weight: 600;
  color: rgba(245,237,220,.35);
  margin-top: -4px;
  margin-bottom: 8px;
  transition: color .3s;
}

/* Bandeau économies (visible uniquement en annuel) */
.price-savings {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  margin-bottom: 12px;
  background: rgba(126,149,135,.1);
  border: 1px solid rgba(126,149,135,.3);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--olivier);
  letter-spacing: .2px;
  opacity: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition: opacity .35s ease, max-height .35s ease, padding .35s ease, margin .35s ease;
}
.price-savings.active {
  opacity: 1;
  max-height: 40px;
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 12px;
}
.price-savings svg { color: var(--olivier); flex-shrink: 0; }
.price-savings strong { color: var(--parchemin); font-weight: 800; }

/* Pro savings : version premium dorée */
.price-savings-pro {
  background: linear-gradient(135deg, rgba(201,150,63,.15) 0%, rgba(201,150,63,.06) 100%);
  border-color: rgba(201,150,63,.4);
  color: var(--bronze);
}
.price-savings-pro svg { color: var(--bronze); }
.price-savings-pro strong { color: var(--bronze); }
.price-savings-pro.active {
  animation: proSavingsGlow 2.4s ease-in-out infinite;
}
@keyframes proSavingsGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,150,63,.4), inset 0 0 0 rgba(201,150,63,0); }
  50%       { box-shadow: 0 0 0 6px rgba(201,150,63,0), inset 0 0 20px rgba(201,150,63,.08); }
}

/* Mobile */
@media (max-width: 500px) {
  .billing-toggle { margin-bottom: 28px; }
  .billing-tab { padding: 10px 16px; font-size: 12px; gap: 6px; }
  .billing-tab-bonus { font-size: 8px; padding: 2px 6px; letter-spacing: 1px; }
  .price-savings { font-size: 10px; padding: 5px 10px; }
}

/* ── ICÔNES DEVANT CHAQUE FEATURE ── */
.price-feat li {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.price-feat li > svg:first-child {
  display: none; /* on cache les anciens checkmarks */
}
.feat-ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(201,150,63,.1);
  border: 1px solid rgba(201,150,63,.22);
  color: var(--bronze);
  transition: transform .25s, background .25s, border-color .25s;
}
.price-card:hover .feat-ico {
  transform: scale(1.08) rotate(-3deg);
  background: rgba(201,150,63,.18);
  border-color: rgba(201,150,63,.4);
}
/* Pour la carte featured, les icônes sont déjà mises en avant */
.price-card.featured .feat-ico {
  background: rgba(201,150,63,.18);
  border-color: rgba(201,150,63,.35);
  box-shadow: 0 0 12px rgba(201,150,63,.15);
}

/* ── PRICING CUSTOM (DEVIS SUR MESURE) ── */
.price-custom {
  max-width: 1000px;
  margin: 32px auto 0;
  padding: 40px 48px;
  background: linear-gradient(135deg, rgba(201,150,63,.07) 0%, rgba(201,150,63,.03) 100%);
  border: 1px solid rgba(201,150,63,.25);
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.price-custom::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.12) 0%, transparent 70%);
  pointer-events: none;
}
.price-custom-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: rgba(201,150,63,.12);
  border: 1px solid rgba(201,150,63,.3);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--bronze);
  margin-bottom: 20px;
}
.price-custom-title {
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.2;
  color: var(--parchemin);
  margin: 0 0 16px;
}
.price-custom-accent {
  color: var(--bronze);
  position: relative;
}
.price-custom-sub {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(245,237,220,.6);
  margin: 0;
}
.price-custom-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.price-custom-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(245,237,220,.75);
}
.price-custom-item svg { color: var(--bronze); flex-shrink: 0; }
.price-custom-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--bronze);
  color: #0A0908;
  border-radius: 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: .3px;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.price-custom-cta:hover {
  background: #d9a84a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201,150,63,.3);
}
@media (max-width: 800px) {
  .price-custom { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
}

/* ── PARTICULES HERO ── */
.hist-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hist-particles span {
  position: absolute;
  left: var(--hpx);
  top: var(--hpy);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bronze);
  opacity: 0;
  animation: histParticleRise var(--hps) var(--hpd) ease-in infinite;
}
@keyframes histParticleRise {
  0%   { opacity: 0;   transform: translateY(0)    scale(1); }
  15%  { opacity: 0.7; }
  80%  { opacity: 0.3; }
  100% { opacity: 0;   transform: translateY(-180px) scale(0.3); }
}

/* ── HERO TEXT REVEAL ── */
.hist-h1 {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hist-line-reveal {
  display: block;
  overflow: hidden;
  animation: histLineUp .8s var(--hlr-d, 0s) cubic-bezier(.16,1,.3,1) both;
}
@keyframes histLineUp {
  from { opacity: 0; transform: translateY(60px) skewY(3deg); }
  to   { opacity: 1; transform: translateY(0)    skewY(0deg); }
}
.hist-word-reveal {
  animation: histFadeUp .7s .15s cubic-bezier(.16,1,.3,1) both;
}
@keyframes histFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── PULL QUOTE REVEAL ── */
.hist-pull-reveal {
  border-left-width: 0;
  transition: border-left-width .6s .1s ease;
}
.hist-pull-reveal.hist-pull-in {
  border-left-width: 3px;
}

/* ── TERMINAL TAGS ── */
.ht-tag {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
}
.ht-tag-warn { background: rgba(254,188,46,.12); color: #febc2e; }
.ht-tag-err  { background: rgba(255,95,87,.1);  color: #ff5f57; }
.ht-cursor {
  display: inline-block;
  color: var(--bronze);
  animation: htCursorBlink .9s step-end infinite;
  margin-left: 2px;
}
@keyframes htCursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── ARROW ANIMATION ── */
.hist-arrow-anim {
  color: rgba(201,150,63,.5);
  animation: histArrowSlide 1.6s ease-in-out infinite;
}
@keyframes histArrowSlide {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50%       { opacity: 1;   transform: translateX(4px); }
}
.hist-stack-free {
  border-color: rgba(40,200,64,.25) !important;
  background: rgba(40,200,64,.05) !important;
  color: #28c840 !important;
}

/* ── COUNTER ── */
.hist-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  color: var(--bronze);
}

/* ── MYTH EXTRAS ── */
.hist-myth-halo {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,150,63,.25) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: histHaloPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes histHaloPulse {
  0%, 100% { transform: translate(-50%,-50%) scale(1);   opacity: .6; }
  50%       { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }
}
.hist-myth-figure { position: relative; }
.hist-myth-stars { position: absolute; inset: 0; pointer-events: none; }
.hist-myth-stars span {
  position: absolute;
  left: var(--sx);
  top: var(--sy);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #F5EDDC;
  animation: histStarTwinkle 2s var(--sd) ease-in-out infinite;
}
@keyframes histStarTwinkle {
  0%, 100% { opacity: .2; transform: scale(1); }
  50%       { opacity: 1;  transform: scale(1.8); }
}

@media (max-width: 500px) {
  .wd-chrome { padding: 10px 12px; gap: 10px; }
  .wd-url { flex: 1; }
  .wd-meta { display: none; }
  .wd-hero-headline { font-size: 26px; }
  .wd-hero-eyebrow { font-size: 9px; }
  .wd-cta { padding: 10px 16px; font-size: 10.5px; }
  .wd-toast { right: 10px; top: 60px; }
  .wd-stat-val { font-size: 18px; }
  .wd-stat-bar { display: none; }
}

/* ════════════════════════════════════════════════════════════
   WEB HERO · Site banal vs Site Talos (comparison)
   ════════════════════════════════════════════════════════════ */
.web-hero {
  margin: 50px 0 50px;
  padding: 38px 30px 32px;
  background:
    radial-gradient(ellipse 80% 90% at 50% 0%, rgba(201, 150, 63, 0.08), transparent 60%),
    linear-gradient(180deg, var(--ink-3), var(--ink-2));
  border: 0.5px solid rgba(201, 150, 63, 0.22);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.web-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.04) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}
.web-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  align-items: start;
  position: relative; z-index: 1;
}
.web-hero-side {
  display: flex; flex-direction: column;
  gap: 16px; align-items: center;
}
.web-hero-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--muted); font-weight: 700;
  padding: 6px 14px; border-radius: 100px;
  border: 0.5px solid var(--line-strong);
  background: rgba(245, 237, 220, 0.03);
}
.web-hero-tag.featured {
  background: var(--bronze); color: var(--ink); border-color: var(--bronze);
  box-shadow: 0 8px 22px -8px rgba(201, 150, 63, 0.55);
}

/* Screen mockup */
.web-hero-screen {
  width: 100%; max-width: 300px;
  aspect-ratio: 10/14;
  background: var(--ink);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
}

/* BLAND screen — static, dull */
.web-hero-screen.bland { filter: saturate(0.4); }
.wh-bland-nav {
  height: 5px; width: 50%;
  background: rgba(245, 237, 220, 0.12);
  border-radius: 3px; margin-bottom: 22px;
}
.wh-bland-h {
  height: 9px; width: 80%;
  background: rgba(245, 237, 220, 0.16);
  border-radius: 3px; margin-bottom: 6px;
}
.wh-bland-line {
  height: 3px; width: 100%;
  background: rgba(245, 237, 220, 0.08);
  border-radius: 2px; margin-bottom: 5px;
}
.wh-bland-line.short { width: 55%; margin-bottom: 14px; }
.wh-bland-cta {
  margin-top: auto;
  align-self: flex-start;
  padding: 7px 14px;
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.2px;
  background: rgba(245, 237, 220, 0.07);
  border: 0.5px solid var(--line-strong);
  border-radius: 4px;
  color: var(--muted);
  font-weight: 600;
}

/* RICH screen — animated */
.web-hero-screen.rich {
  border-color: rgba(201, 150, 63, 0.4);
  box-shadow: 0 40px 80px -25px rgba(201, 150, 63, 0.35), 0 0 0 0.5px rgba(201, 150, 63, 0.2);
  background: linear-gradient(180deg, var(--ink), var(--ink-2));
}
.web-hero-screen.rich::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(201, 150, 63, 0.15), transparent 60%);
  pointer-events: none;
}
.web-hero-screen.rich > * { position: relative; z-index: 1; }
.wh-rich-nav {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 22px;
}
.wh-rich-logo {
  width: 36px; height: 8px;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-2));
  border-radius: 2px;
}
.wh-rich-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--olivier);
  animation: livePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(126, 149, 135, 0.7);
}
.wh-rich-h {
  font-family: var(--font-serif); font-size: 18px;
  color: var(--parchemin); line-height: 1.05;
  letter-spacing: -0.4px;
  margin-bottom: 6px;
  background: linear-gradient(90deg, var(--parchemin), var(--bronze), var(--parchemin));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: richHeadlineShine 4s linear infinite;
}
@keyframes richHeadlineShine {
  0% { background-position: 100% 0%; }
  100% { background-position: -100% 0%; }
}
.wh-rich-subline {
  height: 4px; width: 70%;
  background: rgba(245, 237, 220, 0.12);
  border-radius: 2px;
  margin-bottom: 14px;
}
.wh-rich-particles {
  position: relative; height: 36px;
  margin-bottom: 10px;
}
.wh-rich-particles span {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--bronze);
  bottom: 4px;
  animation: richParticle 3.5s ease-in-out infinite;
}
.wh-rich-particles span:nth-child(1) { left: 8%; animation-delay: 0s; }
.wh-rich-particles span:nth-child(2) { left: 28%; animation-delay: 0.5s; background: var(--olivier); }
.wh-rich-particles span:nth-child(3) { left: 50%; animation-delay: 1.0s; }
.wh-rich-particles span:nth-child(4) { left: 72%; animation-delay: 1.5s; background: var(--olivier); }
.wh-rich-particles span:nth-child(5) { left: 90%; animation-delay: 2.0s; }
@keyframes richParticle {
  0% { transform: translateY(0); opacity: 0; }
  20% { opacity: 1; }
  90% { transform: translateY(-36px); opacity: 0; }
  100% { transform: translateY(-36px); opacity: 0; }
}
.wh-rich-row {
  display: flex; gap: 8px;
  margin-bottom: 14px;
}
.wh-rich-mini {
  flex: 1;
  font-family: var(--font-serif); font-size: 16px;
  color: var(--bronze); font-weight: 400;
  padding: 6px 10px;
  background: rgba(201, 150, 63, 0.08);
  border: 0.5px solid rgba(201, 150, 63, 0.25);
  border-radius: 6px;
  text-align: center;
  letter-spacing: -0.3px;
}
.wh-rich-mini span {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1px; color: var(--bronze);
  margin-left: 2px;
  font-weight: 600;
  vertical-align: super;
}
.wh-rich-cta {
  margin-top: auto;
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.2px;
  background: var(--bronze);
  color: var(--ink);
  border-radius: 6px;
  font-weight: 700;
  text-align: center;
  animation: richCtaPulse 2.4s ease-in-out infinite;
}
@keyframes richCtaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 6px 20px -5px rgba(201, 150, 63, 0.5); }
  50% { transform: scale(1.04); box-shadow: 0 12px 30px -5px rgba(201, 150, 63, 0.8), 0 0 0 6px rgba(201, 150, 63, 0.12); }
}

/* VS column */
.web-hero-vs {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px;
  padding-top: 40px;
  align-self: stretch;
}
.vs-line {
  flex: 1; width: 1px;
  background: linear-gradient(180deg, transparent, rgba(201, 150, 63, 0.4), transparent);
}
.vs-pill {
  font-family: var(--font-serif); font-size: 28px;
  color: var(--bronze); font-weight: 400;
  padding: 10px 16px; border-radius: 100px;
  background: var(--ink);
  border: 0.5px solid rgba(201, 150, 63, 0.4);
  box-shadow: 0 10px 30px -8px rgba(201, 150, 63, 0.4);
  animation: vsPillPulse 3s ease-in-out infinite;
  letter-spacing: -0.8px;
}
@keyframes vsPillPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 30px -8px rgba(201, 150, 63, 0.35); }
  50% { transform: scale(1.05); box-shadow: 0 18px 50px -10px rgba(201, 150, 63, 0.6), 0 0 0 8px rgba(201, 150, 63, 0.08); }
}

/* Stat bars */
.web-hero-stat {
  width: 100%; max-width: 300px;
  display: flex; flex-direction: column; gap: 8px;
}
.wh-stat-bar {
  height: 12px; border-radius: 6px;
  background: rgba(245, 237, 220, 0.05);
  overflow: hidden;
  position: relative;
}
.wh-stat-fill {
  height: 100%; border-radius: 6px;
  transform-origin: left;
  transform: scaleX(0);
}
.wh-stat-bar.bland .wh-stat-fill {
  width: 23%;
  background: linear-gradient(90deg, var(--terracotta), rgba(216, 117, 84, 0.5));
  animation: statFillBland 5s ease-out infinite;
}
.wh-stat-bar.rich .wh-stat-fill {
  width: 97%;
  background: linear-gradient(90deg, var(--olivier), var(--bronze));
  animation: statFillRich 5s ease-out infinite;
}
@keyframes statFillBland {
  0%, 5% { transform: scaleX(0); }
  20%, 100% { transform: scaleX(1); }
}
@keyframes statFillRich {
  0%, 5% { transform: scaleX(0); }
  30%, 100% { transform: scaleX(1); }
}
.wh-stat-text {
  text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1.5px; color: var(--muted);
  font-weight: 600;
}
.wh-stat-num {
  font-family: var(--font-serif); font-size: 28px;
  color: var(--terracotta);
  letter-spacing: -0.6px;
  margin-right: 6px;
}
.wh-stat-num.featured {
  color: var(--bronze);
  animation: webStatBig 3s ease-in-out infinite;
}
@keyframes webStatBig {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.wh-stat-text .pct {
  font-size: 16px;
  color: inherit;
}

.web-hero-caption {
  margin-top: 30px; padding-top: 22px;
  border-top: 0.5px solid var(--line);
  text-align: center;
  font-family: var(--font-serif); font-size: 18px;
  color: var(--parchemin); line-height: 1.5;
  position: relative; z-index: 1;
}
.web-hero-caption strong { color: var(--bronze); font-weight: 400; }
.web-hero-caption .dim {
  display: block; margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 1.4px; color: var(--muted);
  font-weight: 600;
}

@media (max-width: 900px) {
  .web-hero { padding: 28px 18px 24px; }
  .web-hero-grid { grid-template-columns: 1fr; gap: 24px; }
  .web-hero-vs { flex-direction: row; padding-top: 0; padding: 0 20px; }
  .vs-line { height: 1px; width: auto; background: linear-gradient(90deg, transparent, rgba(201,150,63,0.4), transparent); }
  .vs-pill { font-size: 24px; padding: 8px 14px; }
  .web-hero-screen { max-width: 240px; }
  .web-hero-caption { font-size: 15px; margin-top: 22px; }
  .wh-stat-num { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════
   MOTION SHOWCASE · 6 capabilities en mini-démos live
   ════════════════════════════════════════════════════════════ */
.ms-head { margin-bottom: 30px; }
.ms-head-title {
  font-family: var(--font-serif); font-size: 32px; line-height: 1.15;
  color: var(--parchemin); letter-spacing: -0.6px;
}
.motion-showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.ms-card {
  background: var(--ink-2);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  cursor: none;
}
.ms-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 150, 63, 0.45);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55), 0 0 0 0.5px rgba(201, 150, 63, 0.2);
}
.ms-demo {
  height: 160px;
  background:
    radial-gradient(ellipse 100% 100% at 50% 50%, rgba(201, 150, 63, 0.06), transparent 70%),
    linear-gradient(180deg, var(--ink), var(--ink-2));
  position: relative;
  overflow: hidden;
  border-bottom: 0.5px solid var(--line);
}
.ms-demo::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.04) 1px, transparent 1px);
  background-size: 16px 16px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 30%, transparent 90%);
  pointer-events: none;
}
.ms-demo > * { position: relative; z-index: 1; }
.ms-label {
  padding: 18px 20px 20px;
}
.ms-num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--bronze); font-weight: 700; margin-bottom: 8px;
}
.ms-name {
  font-family: var(--font-serif); font-size: 19px;
  color: var(--parchemin); letter-spacing: -0.3px;
  margin-bottom: 6px; line-height: 1.2;
}
.ms-desc {
  font-size: 12.5px; color: var(--muted);
  line-height: 1.55;
}

/* 01 — Hero reveal */
.ms-hero-reveal {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start;
  padding: 28px 22px;
  gap: 10px;
}
.ms-hero-reveal .ms-line {
  display: block;
  height: 9px; border-radius: 3px;
  background: var(--bronze);
  transform-origin: left;
  transform: scaleX(0);
  animation: heroLineDraw 5s ease-out infinite;
}
.ms-hero-reveal .ms-line-1 { width: 70%; animation-delay: 0s; background: linear-gradient(90deg, var(--bronze), var(--bronze-2)); }
.ms-hero-reveal .ms-line-2 { width: 92%; animation-delay: 0.35s; }
.ms-hero-reveal .ms-line-3 { width: 45%; animation-delay: 0.7s; background: rgba(245, 237, 220, 0.15); height: 5px; }
@keyframes heroLineDraw {
  0%, 5% { transform: scaleX(0); }
  25%, 80% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
.ms-hero-reveal .ms-caret {
  display: block; width: 2px; height: 14px;
  background: var(--bronze);
  margin-top: 2px;
  animation: heroCaret 0.8s steps(2) infinite;
}
@keyframes heroCaret {
  50% { opacity: 0; }
}

/* 02 — Magnetic CTA */
.ms-magnetic {
  display: flex; align-items: center; justify-content: center;
}
.ms-magnetic .ms-btn {
  padding: 13px 22px;
  background: var(--bronze);
  color: var(--ink);
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  cursor: none;
  position: relative;
  z-index: 2;
  animation: magneticDance 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  box-shadow: 0 8px 24px -6px rgba(201, 150, 63, 0.5);
}
@keyframes magneticDance {
  0%, 100% { transform: translate(0, 0); }
  15% { transform: translate(-10px, -6px); }
  35% { transform: translate(12px, -3px); box-shadow: 0 14px 36px -6px rgba(201, 150, 63, 0.8); }
  55% { transform: translate(8px, 6px); }
  75% { transform: translate(-6px, 3px); }
}
.ms-cursor-ring {
  position: absolute;
  width: 22px; height: 22px;
  border: 1.5px solid rgba(245, 237, 220, 0.6);
  border-radius: 50%;
  pointer-events: none; z-index: 1;
  animation: cursorTrack 4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes cursorTrack {
  0%, 100% { transform: translate(40px, 30px); }
  15% { transform: translate(20px, 0); }
  35% { transform: translate(60px, 10px); }
  55% { transform: translate(50px, 40px); }
  75% { transform: translate(30px, 30px); }
}

/* 03 — Live counter */
.ms-counter {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
}
.ms-counter-num {
  font-family: var(--font-serif);
  font-size: 46px;
  color: var(--bronze);
  letter-spacing: -1.2px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: counterTick 1.6s ease-out infinite;
}
@keyframes counterTick {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.05); color: var(--bronze-2); }
}
.ms-counter-meta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.5px; color: var(--olivier);
  font-weight: 700;
}
.ms-counter-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--olivier);
  animation: livePulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(126, 149, 135, 0.7);
}

/* 04 — Toast notification */
.ms-toast {
  padding: 18px;
}
.ms-toast-bg {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 6px;
}
.ms-toast-ph {
  height: 5px; border-radius: 2px;
  background: rgba(245, 237, 220, 0.08);
  width: 92%;
}
.ms-toast-ph.short { width: 60%; }
.ms-toast-pop {
  position: absolute; top: 16px; right: 16px;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-2));
  border: 0.5px solid rgba(201, 150, 63, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--parchemin); font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 0.5px rgba(201, 150, 63, 0.18);
  animation: toastSlide 4.5s ease-in-out infinite;
}
.ms-toast-icon {
  width: 16px; height: 16px;
  background: var(--olivier);
  border-radius: 50%;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ms-toast-text { color: var(--parchemin); }
@keyframes toastSlide {
  0%, 8% { transform: translate(140%, 0); opacity: 0; }
  18%, 70% { transform: translate(0, 0); opacity: 1; }
  82%, 100% { transform: translate(140%, 0); opacity: 0; }
}

/* 05 — Data viz live (bars) */
.ms-chart {
  display: flex; align-items: end; justify-content: center;
  gap: 9px; padding: 24px 18px 22px;
  height: 100%;
}
.ms-chart .ms-bar {
  width: 14px;
  height: var(--peak, 50%);
  background: linear-gradient(180deg, var(--bronze-2), var(--bronze));
  border-radius: 3px 3px 1px 1px;
  transform-origin: bottom;
  transform: scaleY(0.15);
  animation: chartBarRise 3s ease-in-out infinite;
}
.ms-chart .ms-bar:nth-child(1) { animation-delay: 0s; }
.ms-chart .ms-bar:nth-child(2) { animation-delay: 0.12s; }
.ms-chart .ms-bar:nth-child(3) { animation-delay: 0.24s; }
.ms-chart .ms-bar:nth-child(4) { animation-delay: 0.36s; }
.ms-chart .ms-bar:nth-child(5) { animation-delay: 0.48s; }
.ms-chart .ms-bar.tall {
  animation-delay: 0.6s;
  background: linear-gradient(180deg, var(--olivier), var(--bronze));
  box-shadow: 0 0 16px -2px rgba(126, 149, 135, 0.5);
}
@keyframes chartBarRise {
  0%, 100% { transform: scaleY(0.15); opacity: 0.6; }
  40%, 70% { transform: scaleY(1); opacity: 1; }
}

/* 06 — Parallax depth */
.ms-parallax {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.ms-px {
  position: absolute;
  border-radius: 50%;
}
.ms-px-back {
  width: 100px; height: 100px;
  background: radial-gradient(circle, rgba(126, 149, 135, 0.4), transparent 70%);
  left: 8%; top: 12%;
  animation: pxFloat 9s ease-in-out infinite;
}
.ms-px-mid {
  width: 60px; height: 60px;
  background: radial-gradient(circle, rgba(201, 150, 63, 0.45), transparent 65%);
  right: 12%; top: 18%;
  animation: pxFloat 6s ease-in-out infinite reverse;
  animation-delay: 0.5s;
}
.ms-px-front {
  width: 30px; height: 30px;
  background: var(--bronze);
  box-shadow: 0 0 24px var(--bronze);
  left: 48%; top: 50%;
  animation: pxFloat 4s ease-in-out infinite;
  animation-delay: 1s;
}
@keyframes pxFloat {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(20px, -16px); }
}
.ms-px-line {
  position: absolute;
  left: 0; right: 0; bottom: 36%;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  opacity: 0.6;
  animation: pxLineSlide 5s linear infinite;
}
@keyframes pxLineSlide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Toast on web-hero rich phone */
.wh-rich-toast {
  position: absolute;
  top: 16px; right: 12px;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  border: 0.5px solid rgba(126, 149, 135, 0.5);
  border-radius: 6px;
  padding: 5px 9px;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--parchemin); font-weight: 700;
  letter-spacing: 0.5px;
  white-space: nowrap;
  box-shadow: 0 8px 18px -4px rgba(0, 0, 0, 0.6);
  animation: whToast 6s ease-in-out infinite;
}
.wh-rich-toast-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--olivier);
  box-shadow: 0 0 6px var(--olivier);
}
@keyframes whToast {
  0%, 12% { transform: translateY(-30px); opacity: 0; }
  20%, 68% { transform: translateY(0); opacity: 1; }
  80%, 100% { transform: translateY(-30px); opacity: 0; }
}

@media (max-width: 900px) {
  .motion-showcase { grid-template-columns: 1fr 1fr; gap: 10px; }
}
@media (max-width: 600px) {
  .motion-showcase { grid-template-columns: 1fr; gap: 12px; }
  .ms-demo { height: 130px; }
  .ms-label { padding: 14px 16px 16px; }
  .ms-name { font-size: 17px; }
  .ms-head-title { font-size: 24px; }
  .ms-counter-num { font-size: 38px; }
}

/* ════════════════════════════════════════════════════════════
   ADAPT SECTION (Branchement / Sur-mesure)
   ════════════════════════════════════════════════════════════ */
.adapt-section {
  padding: 100px 40px;
  max-width: 1320px; margin: 0 auto;
}
.adapt-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 24px; margin-top: 50px;
}
.adapt-card {
  background: var(--ink-2);
  border: 0.5px solid var(--line);
  border-radius: 14px;
  padding: 28px 28px 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
}
.adapt-card:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 150, 63, 0.4);
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(201, 150, 63, 0.2);
}
.adapt-card.adapt-build { border-color: rgba(201, 150, 63, 0.28); }
.adapt-card.adapt-build:hover { border-color: var(--bronze); }
.adapt-card.adapt-build::before {
  content: ""; position: absolute; inset: -1px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(201, 150, 63, 0.4), transparent 30%, transparent 70%, rgba(201, 150, 63, 0.15));
  z-index: -1; pointer-events: none;
}
.adapt-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px; margin-bottom: 18px;
}
.adapt-num {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.8px;
  color: var(--muted); font-weight: 600;
}
.adapt-pill {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.5px;
  padding: 5px 11px; border-radius: 100px;
  background: rgba(245, 237, 220, 0.06);
  border: 0.5px solid var(--line-strong);
  color: var(--parchemin); font-weight: 700;
  white-space: nowrap;
}
.adapt-pill.featured {
  background: var(--bronze); color: var(--ink);
  border-color: var(--bronze);
  box-shadow: 0 6px 18px -6px rgba(201, 150, 63, 0.5);
}

/* Motion area inside card */
.adapt-motion {
  height: 140px;
  margin-bottom: 22px;
  padding: 16px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(201, 150, 63, 0.06), transparent 70%),
    linear-gradient(180deg, rgba(245, 237, 220, 0.03), rgba(245, 237, 220, 0.005));
  border: 0.5px solid rgba(201, 150, 63, 0.15);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.adapt-motion::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
}

/* Branch motion — tools connecting to Talos */
.adapt-motion-branch {
  display: flex; align-items: center; gap: 12px;
}
.adapt-motion-branch .adapt-tools {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0; z-index: 1; position: relative;
}
.adapt-motion-branch .adapt-tool {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.2px; font-weight: 700;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(245, 237, 220, 0.05);
  border: 0.5px solid var(--line-strong);
  color: var(--parchemin);
  opacity: 0;
  animation: branchToolIn 4.5s var(--d, 0s) ease-out infinite;
}
@keyframes branchToolIn {
  0%, 6% { opacity: 0; transform: translateX(-6px); }
  18%, 75% { opacity: 1; transform: translateX(0); }
  85%, 100% { opacity: 0.7; }
}
.adapt-motion-branch .adapt-lines {
  flex: 1; height: 100%;
  color: var(--bronze);
  opacity: 0.5;
  z-index: 1; position: relative;
}
.adapt-motion-branch .adapt-lines path {
  stroke-dashoffset: 0;
  animation: branchLineFlow 2.5s linear infinite;
}
@keyframes branchLineFlow {
  to { stroke-dashoffset: -24; }
}
.adapt-motion-branch .adapt-core {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--bronze);
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  position: relative; z-index: 1;
  box-shadow: 0 8px 28px -8px rgba(201, 150, 63, 0.55);
  animation: branchCorePulse 2.5s ease-in-out infinite;
}
@keyframes branchCorePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 28px -8px rgba(201, 150, 63, 0.45); }
  50% { transform: scale(1.05); box-shadow: 0 12px 40px -10px rgba(201, 150, 63, 0.8), 0 0 0 8px rgba(201, 150, 63, 0.1); }
}

/* Build motion — blueprint drawing itself */
.adapt-motion-build {
  display: flex; align-items: center; justify-content: center;
}
.adapt-motion-build .adapt-blueprint {
  width: 100%; height: 100%;
  color: var(--bronze);
}
.adapt-motion-build .bp-rect {
  fill: rgba(201, 150, 63, 0.06);
  stroke: var(--bronze);
  stroke-width: 0.5;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: buildDraw 5s ease-out infinite;
}
.adapt-motion-build .bp-rect:nth-child(1) { animation-delay: 0s; }
.adapt-motion-build .bp-rect:nth-child(2) { animation-delay: 0.25s; }
.adapt-motion-build .bp-rect:nth-child(3) { animation-delay: 0.5s; }
.adapt-motion-build .bp-rect:nth-child(4) { animation-delay: 0.85s; }
.adapt-motion-build .bp-rect:nth-child(5) { animation-delay: 1.05s; }
.adapt-motion-build .bp-rect:nth-child(6) { animation-delay: 1.25s; }
.adapt-motion-build .bp-rect:nth-child(7) { animation-delay: 1.6s; }
@keyframes buildDraw {
  0%, 5% { stroke-dashoffset: 200; fill-opacity: 0; opacity: 0; }
  20%, 75% { stroke-dashoffset: 0; fill-opacity: 1; opacity: 1; }
  90%, 100% { stroke-dashoffset: 0; opacity: 0.65; }
}
.adapt-motion-build .bp-axis {
  stroke: var(--bronze); stroke-width: 0.4; opacity: 0.4;
}
.adapt-motion-build .bp-label {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 6px; letter-spacing: 2px; font-weight: 700;
  fill: var(--bronze);
  opacity: 0;
  animation: buildStamp 5s ease-out infinite;
  animation-delay: 2s;
}
@keyframes buildStamp {
  0%, 40% { opacity: 0; }
  55%, 90% { opacity: 0.9; }
  100% { opacity: 0; }
}

.adapt-title {
  font-family: var(--font-serif); font-size: 22px; line-height: 1.25;
  color: var(--parchemin); margin-bottom: 10px;
  letter-spacing: -0.3px;
}
.adapt-desc {
  font-size: 13.5px; color: var(--muted); line-height: 1.6;
  margin-bottom: 18px;
}
.adapt-feats {
  list-style: none; padding: 16px 0 0;
  border-top: 0.5px solid var(--line);
}
.adapt-feats li {
  display: flex; align-items: start; gap: 10px;
  padding: 8px 0;
  font-size: 13px; color: var(--parchemin);
  line-height: 1.5;
}
.adapt-feats li svg {
  color: var(--bronze); flex-shrink: 0; margin-top: 3px;
}

/* Bottom big time savings */
.adapt-bottom {
  margin-top: 36px;
  background: linear-gradient(135deg, rgba(201, 150, 63, 0.1), rgba(126, 149, 135, 0.08));
  border: 0.5px solid rgba(201, 150, 63, 0.25);
  border-radius: 14px;
  padding: 26px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  position: relative; overflow: hidden;
}
.adapt-bottom::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 50%, rgba(201, 150, 63, 0.18), transparent 50%),
    radial-gradient(circle at 20% 50%, rgba(126, 149, 135, 0.12), transparent 50%);
  pointer-events: none;
  animation: aura 8s ease-in-out infinite alternate;
}
.adapt-bottom > * { position: relative; z-index: 1; }
.adapt-bottom-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px;
  color: var(--bronze); font-weight: 700; margin-bottom: 8px;
}
.adapt-bottom-headline {
  font-family: var(--font-serif); font-size: 30px;
  color: var(--parchemin); line-height: 1.1;
  letter-spacing: -0.6px;
}
.adapt-bottom-headline .big {
  font-size: 56px; color: var(--bronze);
  letter-spacing: -2px;
  display: inline-block;
  animation: bigPulse 3s ease-in-out infinite;
}
@keyframes bigPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
.adapt-bottom-headline .dim {
  color: var(--muted); font-style: italic; font-size: 22px;
}
.adapt-bottom-sub {
  font-size: 13px; color: var(--muted); margin-top: 6px;
  font-family: var(--font-serif); font-style: italic;
}
.adapt-bottom-sub em { color: var(--bronze); font-style: italic; }

@media (max-width: 1100px) {
  .adapt-grid { grid-template-columns: 1fr; }
  .adapt-bottom { flex-direction: column; align-items: flex-start; padding: 22px 24px; }
}
@media (max-width: 700px) {
  .adapt-section { padding: 60px 18px; }
  .adapt-card { padding: 20px 20px 22px; }
  .adapt-title { font-size: 18px; }
  .adapt-bottom { padding: 20px; gap: 14px; }
  .adapt-bottom-headline { font-size: 22px; }
  .adapt-bottom-headline .big { font-size: 42px; }
  .adapt-bottom-headline .dim { font-size: 16px; }
  .adapt-motion { height: 120px; padding: 12px; }
}

/* ════════════════════════════════════════════════════════════
   MOCK MOTION DESIGN BANNERS · un par automatisation
   ════════════════════════════════════════════════════════════ */
.mock-motion {
  height: 138px;
  margin: 4px 0 18px;
  padding: 18px 22px;
  background:
    radial-gradient(ellipse 80% 100% at 50% 50%, rgba(201, 150, 63, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(245, 237, 220, 0.04), rgba(245, 237, 220, 0.01));
  border: 0.5px solid rgba(201, 150, 63, 0.18);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.mock-motion::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(201, 150, 63, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 150, 63, 0.05) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 75%);
}
.mock-motion > * { position: relative; z-index: 1; }

/* ── 01 DEVIS — phone + flow + doc ── */
.motion-devis .mm-phone {
  position: relative;
  width: 38px; height: 56px;
  border: 0.5px solid var(--bronze);
  border-radius: 7px;
  background: rgba(201, 150, 63, 0.06);
  display: flex; flex-direction: column; align-items: center;
  padding: 5px 4px;
  flex-shrink: 0;
}
.motion-devis .mm-phone::before {
  content: ""; width: 4px; height: 4px;
  border-radius: 50%; background: var(--bronze);
  margin-bottom: 4px;
  animation: devisFlash 3.4s ease-in-out infinite;
}
.motion-devis .mm-phone-screen {
  flex: 1; width: 100%;
  background: linear-gradient(180deg, rgba(201,150,63,0.18), rgba(201,150,63,0.04));
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.motion-devis .mm-phone-screen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(245,237,220,0.5), transparent);
  transform: translateX(-100%);
  animation: devisScan 3.4s ease-in-out infinite;
}
@keyframes devisFlash {
  0%, 100% { opacity: 0.4; }
  10% { opacity: 1; box-shadow: 0 0 18px rgba(201,150,63,0.9); }
  20% { opacity: 0.4; box-shadow: none; }
}
@keyframes devisScan {
  0% { transform: translateX(-100%); }
  40%, 100% { transform: translateX(120%); }
}
.motion-devis .mm-mic {
  position: absolute; left: 42px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 8.5px;
  color: var(--bronze);
  display: flex; align-items: center; gap: 4px;
  letter-spacing: 1px;
  animation: devisMicPulse 2s ease-in-out infinite;
}
.motion-devis .mm-mic svg { width: 11px; height: 11px; }
@keyframes devisMicPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.motion-devis .mm-flow {
  flex: 1; height: 2px;
  background: linear-gradient(90deg, rgba(201,150,63,0.1), rgba(201,150,63,0.4), rgba(201,150,63,0.1));
  border-radius: 2px;
  position: relative;
  margin: 0 14px 0 56px;
  overflow: hidden;
}
.motion-devis .mm-flow::before {
  content: ""; position: absolute;
  left: -20px; top: -3px; bottom: -3px; width: 30px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  filter: blur(2px);
  animation: devisFlow 2.6s linear infinite;
}
@keyframes devisFlow {
  0% { transform: translateX(0); }
  100% { transform: translateX(220px); }
}
.motion-devis .mm-doc {
  width: 92px;
  background: var(--ink);
  border: 0.5px solid rgba(201, 150, 63, 0.3);
  border-radius: 6px;
  padding: 9px 10px;
  flex-shrink: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.motion-devis .mm-doc-line {
  height: 3px;
  background: rgba(245, 237, 220, 0.15);
  border-radius: 2px;
  width: 0%;
  animation: devisLineDraw 3.4s ease-out infinite;
}
.motion-devis .mm-doc-line:nth-child(1) { animation-delay: 0.4s; }
.motion-devis .mm-doc-line:nth-child(2) { animation-delay: 0.8s; }
.motion-devis .mm-doc-line.short { animation-delay: 1.2s; width: 60%; }
@keyframes devisLineDraw {
  0%, 10% { width: 0%; opacity: 0; }
  18% { opacity: 1; }
  30%, 90% { width: 100%; opacity: 1; }
  100% { width: 100%; opacity: 0; }
}
.motion-devis .mm-doc-line.short { animation-name: devisLineDrawShort; }
@keyframes devisLineDrawShort {
  0%, 10% { width: 0%; opacity: 0; }
  18% { opacity: 1; }
  30%, 90% { width: 60%; opacity: 1; }
  100% { width: 60%; opacity: 0; }
}
.motion-devis .mm-doc-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-serif); font-size: 13px;
  color: var(--bronze);
  text-align: right;
  opacity: 0;
  animation: devisTotal 3.4s ease-out infinite;
  animation-delay: 1.5s;
}
@keyframes devisTotal {
  0%, 40% { opacity: 0; transform: translateY(4px); }
  55%, 90% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; }
}

/* ── 02 RELANCES — timeline + planes ── */
.motion-relances {
  align-items: stretch;
  padding: 14px 22px;
}
.motion-relances .mm-timeline {
  flex: 1; position: relative;
  display: flex; align-items: center;
  height: 100%;
}
.motion-relances .mm-rail {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(201,150,63,0.4) 0 5px, transparent 5px 10px);
  transform: translateY(-50%);
}
.motion-relances .mm-day {
  position: absolute; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.motion-relances .mm-day.day-3 { left: 15%; }
.motion-relances .mm-day.day-7 { left: 50%; }
.motion-relances .mm-day.day-14 { left: 85%; }
.motion-relances .mm-day-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.4px; color: var(--bronze); font-weight: 700;
}
.motion-relances .mm-marker {
  width: 11px; height: 11px;
  background: var(--ink-2);
  border: 1.5px solid var(--bronze);
  border-radius: 50%;
  position: relative;
}
.motion-relances .mm-marker::after {
  content: ""; position: absolute; inset: -3px;
  border-radius: 50%; border: 1px solid var(--bronze);
  opacity: 0;
  animation: relanceMarkerPing 5.4s ease-out infinite;
}
.motion-relances .day-3 .mm-marker::after { animation-delay: 0s; }
.motion-relances .day-7 .mm-marker::after { animation-delay: 1.8s; }
.motion-relances .day-14 .mm-marker::after { animation-delay: 3.6s; }
@keyframes relanceMarkerPing {
  0% { transform: scale(1); opacity: 0; }
  10% { opacity: 1; }
  30% { transform: scale(2.6); opacity: 0; }
  100% { opacity: 0; }
}
.motion-relances .mm-plane {
  position: absolute; bottom: 100%; left: 50%;
  width: 16px; height: 16px;
  color: var(--bronze);
  opacity: 0;
  transform: translate(-50%, 0);
  animation: relancePlane 5.4s ease-out infinite;
}
.motion-relances .day-3 .mm-plane { animation-delay: 0.1s; }
.motion-relances .day-7 .mm-plane { animation-delay: 1.9s; }
.motion-relances .day-14 .mm-plane { animation-delay: 3.7s; }
@keyframes relancePlane {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(-20deg) scale(0.6); }
  10% { opacity: 1; }
  35% { opacity: 1; transform: translate(20%, -42px) rotate(-30deg) scale(1); }
  55% { opacity: 0; transform: translate(80%, -64px) rotate(-30deg) scale(0.8); }
  100% { opacity: 0; transform: translate(80%, -64px); }
}
.motion-relances .mm-counter {
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 1.4px; color: var(--olivier);
  font-weight: 700;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(126, 149, 135, 0.15);
  border: 0.5px solid rgba(126, 149, 135, 0.3);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── 03 RÉPONSE 24/7 — day/night ring + chat ── */
.motion-response .mm-clock {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #C9963F 0deg, #C9963F 180deg, #1F1B17 180deg, #1F1B17 360deg);
  position: relative;
  flex-shrink: 0;
  animation: respClock 8s linear infinite;
}
.motion-response .mm-clock::before {
  content: ""; position: absolute; inset: 5px;
  background: var(--ink-2);
  border-radius: 50%;
}
.motion-response .mm-clock::after {
  content: "24/7";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1px; color: var(--bronze); font-weight: 700;
}
@keyframes respClock {
  to { transform: rotate(360deg); }
}
.motion-response .mm-clock::after { animation: respClockUnrotate 8s linear infinite; }
@keyframes respClockUnrotate {
  to { transform: rotate(-360deg); }
}
.motion-response .mm-bubbles {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  align-items: stretch;
  position: relative; height: 100%;
  justify-content: center;
}
.motion-response .mm-bubble {
  font-family: var(--font-mono); font-size: 9.5px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 0.5px solid var(--line);
  max-width: 78%;
  white-space: nowrap;
  letter-spacing: 0.5px;
  opacity: 0;
  animation: respBubble 5.2s ease-out infinite;
}
.motion-response .mm-bubble.in {
  align-self: flex-start;
  background: rgba(245, 237, 220, 0.05);
  color: var(--parchemin);
  border-top-left-radius: 2px;
  animation-delay: 0.2s;
}
.motion-response .mm-bubble.typing {
  align-self: flex-end;
  background: rgba(201, 150, 63, 0.1);
  border-color: rgba(201, 150, 63, 0.3);
  border-top-right-radius: 2px;
  padding: 8px 12px;
  display: inline-flex; gap: 3px;
  animation-delay: 1.4s;
  animation-duration: 5.2s;
  animation-name: respTyping;
}
.motion-response .mm-bubble.typing span {
  width: 4px; height: 4px;
  background: var(--bronze);
  border-radius: 50%;
  animation: respTypingDot 1s ease-in-out infinite;
}
.motion-response .mm-bubble.typing span:nth-child(2) { animation-delay: 0.15s; }
.motion-response .mm-bubble.typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes respTypingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}
.motion-response .mm-bubble.out {
  align-self: flex-end;
  background: var(--bronze);
  color: var(--ink);
  border-color: var(--bronze);
  border-top-right-radius: 2px;
  font-weight: 700;
  animation-delay: 2.6s;
  animation-name: respBubbleOut;
}
@keyframes respBubble {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  10%, 60% { opacity: 1; transform: translateY(0); }
  70%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes respTyping {
  0%, 24% { opacity: 0; }
  30%, 46% { opacity: 1; }
  52%, 100% { opacity: 0; }
}
@keyframes respBubbleOut {
  0%, 48% { opacity: 0; transform: translateY(6px) scale(0.9); }
  55%, 90% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; }
}

/* ── 04 FACTURATION — devis → stamp → export ── */
.motion-billing {
  justify-content: space-evenly;
}
.motion-billing .mm-bill {
  position: relative;
  width: 84px; height: 92px;
}
.motion-billing .mm-bill-paper {
  position: absolute; inset: 0;
  background: var(--ink);
  border: 0.5px solid rgba(201, 150, 63, 0.35);
  border-radius: 5px;
  padding: 9px 10px;
  display: flex; flex-direction: column; gap: 5px;
}
.motion-billing .mm-bill-line {
  height: 3px; border-radius: 2px;
  background: rgba(245, 237, 220, 0.12);
  width: 80%;
}
.motion-billing .mm-bill-line.short { width: 50%; }
.motion-billing .mm-bill-total {
  margin-top: auto;
  font-family: var(--font-serif); font-size: 12px;
  color: var(--bronze); text-align: right;
}
.motion-billing .mm-stamp {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-18deg) scale(0);
  width: 46px; height: 46px;
  border: 2px solid var(--olivier);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--olivier);
  background: rgba(126, 149, 135, 0.18);
  animation: billStamp 3.8s ease-in-out infinite;
}
.motion-billing .mm-stamp svg { width: 22px; height: 22px; }
@keyframes billStamp {
  0%, 30% { transform: translate(-50%, -200%) rotate(-50deg) scale(1.4); opacity: 0; }
  42% { transform: translate(-50%, -50%) rotate(-18deg) scale(1.2); opacity: 1; }
  48%, 72% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 1; }
  85%, 100% { transform: translate(-50%, -50%) rotate(-12deg) scale(1); opacity: 0; }
}
.motion-billing .mm-arrow {
  font-family: var(--font-mono);
  color: var(--bronze);
  font-size: 18px;
  opacity: 0.6;
  animation: billArrow 3.8s ease-in-out infinite;
}
@keyframes billArrow {
  0%, 70% { opacity: 0; transform: translateX(-6px); }
  80%, 95% { opacity: 1; transform: translateX(0); }
}
.motion-billing .mm-export {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.4px; color: var(--olivier); font-weight: 700;
  opacity: 0;
  animation: billExport 3.8s ease-out infinite;
}
.motion-billing .mm-export svg {
  width: 28px; height: 32px;
  color: var(--olivier);
}
@keyframes billExport {
  0%, 75% { opacity: 0; transform: scale(0.85); }
  85%, 95% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; }
}

/* ── 05 TRI INBOX — cloud → funnel → 4 lines ── */
.motion-inbox {
  padding: 14px 20px;
}
.motion-inbox .mm-cloud {
  width: 78px; height: 100px;
  position: relative;
  flex-shrink: 0;
}
.motion-inbox .mm-mail-dot {
  position: absolute;
  width: 6px; height: 4px;
  background: rgba(245, 237, 220, 0.25);
  border-radius: 1px;
  animation: inboxFly 3.2s ease-in infinite;
}
/* Position random-ish dots */
.motion-inbox .mm-mail-dot:nth-child(1) { left: 5%; top: 10%; animation-delay: 0s; }
.motion-inbox .mm-mail-dot:nth-child(2) { left: 30%; top: 15%; animation-delay: 0.15s; }
.motion-inbox .mm-mail-dot:nth-child(3) { left: 60%; top: 5%; animation-delay: 0.3s; }
.motion-inbox .mm-mail-dot:nth-child(4) { left: 15%; top: 30%; animation-delay: 0.45s; }
.motion-inbox .mm-mail-dot:nth-child(5) { left: 45%; top: 32%; animation-delay: 0.6s; }
.motion-inbox .mm-mail-dot:nth-child(6) { left: 75%; top: 25%; animation-delay: 0.75s; }
.motion-inbox .mm-mail-dot:nth-child(7) { left: 5%; top: 50%; animation-delay: 0.9s; }
.motion-inbox .mm-mail-dot:nth-child(8) { left: 35%; top: 55%; animation-delay: 1.05s; }
.motion-inbox .mm-mail-dot:nth-child(9) { left: 65%; top: 50%; animation-delay: 1.2s; }
.motion-inbox .mm-mail-dot:nth-child(10) { left: 20%; top: 75%; animation-delay: 1.35s; }
.motion-inbox .mm-mail-dot:nth-child(11) { left: 50%; top: 80%; animation-delay: 1.5s; }
.motion-inbox .mm-mail-dot:nth-child(12) { left: 80%; top: 70%; animation-delay: 1.65s; }
@keyframes inboxFly {
  0% { opacity: 0; transform: translate(0, 0) scale(1); }
  20% { opacity: 1; }
  80% { opacity: 0.4; transform: translate(40px, 6px) scale(0.7); }
  100% { opacity: 0; transform: translate(80px, 12px) scale(0.4); }
}
.motion-inbox .mm-funnel {
  width: 30px; height: 60px;
  color: var(--bronze);
  flex-shrink: 0;
  animation: inboxFunnel 3.2s ease-in-out infinite;
}
@keyframes inboxFunnel {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.motion-inbox .mm-categories {
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.motion-inbox .mm-cat {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1px; font-weight: 700;
  padding: 4px 9px;
  border-radius: 4px;
  display: flex; justify-content: space-between;
  opacity: 0;
  animation: inboxCat 3.2s ease-out infinite;
}
.motion-inbox .mm-cat.urgent {
  background: rgba(216, 117, 84, 0.15); color: var(--terracotta);
  border: 0.5px solid rgba(216, 117, 84, 0.3);
  animation-delay: 1.4s;
}
.motion-inbox .mm-cat.opp {
  background: rgba(126, 149, 135, 0.15); color: var(--olivier);
  border: 0.5px solid rgba(126, 149, 135, 0.3);
  animation-delay: 1.7s;
}
.motion-inbox .mm-cat.ok {
  background: rgba(201, 150, 63, 0.1); color: var(--bronze);
  border: 0.5px solid rgba(201, 150, 63, 0.25);
  animation-delay: 2s;
}
.motion-inbox .mm-cat.archive {
  background: rgba(245, 237, 220, 0.04); color: var(--muted);
  border: 0.5px solid var(--line);
  animation-delay: 2.3s;
}
@keyframes inboxCat {
  0%, 40% { opacity: 0; transform: translateX(-8px); }
  55%, 90% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; }
}

/* ── 06 SUIVI PAIEMENTS — coins rising into meter ── */
.motion-pay {
  padding: 14px 22px;
}
.motion-pay .mm-coins {
  width: 76px; height: 100px;
  position: relative;
  flex-shrink: 0;
}
.motion-pay .mm-euro {
  position: absolute;
  font-family: var(--font-serif); font-size: 18px;
  color: var(--bronze);
  font-weight: 700;
  bottom: 0;
  opacity: 0;
  animation: payRise 4s ease-out infinite;
}
.motion-pay .mm-euro:nth-child(1) { left: 8%; animation-delay: 0s; }
.motion-pay .mm-euro:nth-child(2) { left: 30%; animation-delay: 0.6s; }
.motion-pay .mm-euro:nth-child(3) { left: 52%; animation-delay: 1.2s; font-size: 22px; color: var(--olivier); }
.motion-pay .mm-euro:nth-child(4) { left: 74%; animation-delay: 1.8s; }
.motion-pay .mm-euro:nth-child(5) { left: 18%; animation-delay: 2.4s; font-size: 14px; }
@keyframes payRise {
  0% { opacity: 0; bottom: 0; transform: scale(0.6) rotate(-8deg); }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; bottom: 90px; transform: scale(1.2) rotate(8deg); }
}
.motion-pay .mm-meter {
  flex: 1;
  background: rgba(126, 149, 135, 0.06);
  border: 0.5px solid rgba(126, 149, 135, 0.3);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.motion-pay .mm-meter-label {
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 1.4px; color: var(--olivier);
  font-weight: 700; margin-bottom: 8px;
}
.motion-pay .mm-meter-bar {
  height: 8px; background: rgba(245, 237, 220, 0.06);
  border-radius: 4px; overflow: hidden;
  position: relative;
}
.motion-pay .mm-meter-fill {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--olivier), var(--bronze));
  border-radius: 4px;
  transform-origin: left;
  animation: payFill 4s ease-out infinite;
}
@keyframes payFill {
  0% { transform: scaleX(0); }
  85%, 100% { transform: scaleX(0.86); }
}
.motion-pay .mm-meter-counter {
  margin-top: 8px;
  font-family: var(--font-serif); font-size: 18px;
  color: var(--olivier); font-weight: 400;
  letter-spacing: -0.4px;
}
.motion-pay .mm-meter-counter::after {
  content: " €";
  font-size: 14px; color: var(--bronze);
}

/* Mobile: tighter motion banners */
@media (max-width: 700px) {
  .mock-motion { height: 110px; padding: 12px 14px; gap: 10px; }
  .motion-relances .mm-day-label { font-size: 8px; }
  .motion-response .mm-clock { width: 50px; height: 50px; }
  .motion-response .mm-bubble { font-size: 8.5px; padding: 4px 7px; }
  .motion-billing .mm-bill { width: 64px; height: 74px; }
  .motion-billing .mm-stamp { width: 36px; height: 36px; }
  .motion-billing .mm-stamp svg { width: 18px; height: 18px; }
  .motion-billing .mm-export svg { width: 24px; height: 28px; }
  .motion-inbox .mm-cloud, .motion-pay .mm-coins { width: 56px; }
  .motion-pay .mm-meter-counter { font-size: 14px; }
  .motion-devis .mm-phone { width: 32px; height: 46px; }
}

/* ════════════════════════════════════════════════════════════
   HERO · FLOATING GHOST TASKS (chronophages qui disparaissent)
   ════════════════════════════════════════════════════════════ */
.ghost-tasks {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 3;
  overflow: hidden;
}
.ghost-task {
  position: absolute;
  left: var(--x); top: var(--y);
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 1.8px; font-weight: 600;
  color: rgba(216, 117, 84, 0.55);
  padding: 6px 12px;
  border: 0.5px dashed rgba(216, 117, 84, 0.32);
  border-radius: 100px;
  background: rgba(216, 117, 84, 0.05);
  white-space: nowrap;
  opacity: 0;
  animation: ghostDrift 7s var(--delay, 0s) ease-out infinite;
  transform-origin: center;
}
.ghost-task::before {
  content: "";
  position: absolute; left: 8px; top: 50%;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--terracotta);
  transform: translateY(-50%);
  opacity: 0.7;
}
.ghost-task { padding-left: 20px; }
@keyframes ghostDrift {
  0%   { opacity: 0; transform: translate(0, 8px) scale(0.95); filter: blur(0px); }
  18%  { opacity: 1; transform: translate(0, 0) scale(1); }
  60%  { opacity: 0.7; transform: translate(-14px, -12px) scale(1); filter: blur(0px); }
  90%  { opacity: 0; transform: translate(-44px, -28px) scale(0.85); filter: blur(6px); }
  100% { opacity: 0; transform: translate(-50px, -32px) scale(0.8); filter: blur(8px); }
}

/* ════════════════════════════════════════════════════════════
   FLOW SECTION (AVANT/APRÈS motion)
   ════════════════════════════════════════════════════════════ */
.flow-section {
  padding: 90px 40px;
  max-width: 1320px; margin: 0 auto;
  position: relative;
}
.flow-wrap {
  margin-top: 50px;
  display: flex; flex-direction: column; gap: 0;
}
.flow-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 22px; align-items: center;
  padding: 26px 26px;
  border-radius: 14px;
  border: 0.5px solid var(--line);
  background: var(--ink-2);
  position: relative;
  overflow: hidden;
}
.flow-row.flow-before {
  background: linear-gradient(180deg, rgba(216,117,84,0.04), var(--ink-2));
  border-color: rgba(216,117,84,0.18);
}
.flow-row.flow-after {
  background: linear-gradient(180deg, rgba(126,149,135,0.06), var(--ink-2));
  border-color: rgba(126,149,135,0.22);
  box-shadow: 0 30px 80px -30px rgba(126,149,135,0.18);
}
.flow-side {
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start;
}
.flow-side-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 2.5px;
  color: var(--terracotta); font-weight: 700;
}
.flow-side-label.after { color: var(--olivier); }
.flow-side-time {
  font-family: var(--font-serif); font-size: 26px; color: var(--terracotta);
  letter-spacing: -0.5px; line-height: 1;
}
.flow-side-time.after { color: var(--olivier); }

.flow-rail {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 4px 0;
}
.flow-rail::-webkit-scrollbar { display: none; }

.flow-step {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px; flex-shrink: 0;
  padding: 12px 14px; min-width: 88px;
  background: rgba(245, 237, 220, 0.04);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.8px;
  color: var(--parchemin); font-weight: 600;
  text-transform: uppercase;
}
.flow-step svg { width: 18px; height: 18px; color: var(--bronze); }
.flow-step.jitter {
  border-style: dashed;
  border-color: rgba(216, 117, 84, 0.3);
  background: rgba(216, 117, 84, 0.04);
  color: rgba(245, 237, 220, 0.7);
  animation: stepJitter 4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
}
.flow-step.jitter svg { color: var(--terracotta); opacity: 0.85; }
@keyframes stepJitter {
  0%, 100% { transform: translate(0, 0) rotate(0); opacity: 0.85; }
  20% { transform: translate(-1px, 1px) rotate(-0.5deg); }
  40% { transform: translate(1px, -1px) rotate(0.3deg); opacity: 1; }
  70% { transform: translate(-1px, 0) rotate(-0.3deg); opacity: 0.75; }
}
.flow-step.clean {
  background: rgba(126, 149, 135, 0.08);
  border-color: rgba(126, 149, 135, 0.35);
}
.flow-step.clean svg { color: var(--olivier); }
.flow-step.clean.done {
  background: var(--olivier); color: var(--ink); border-color: var(--olivier);
  box-shadow: 0 10px 28px -10px rgba(126,149,135,0.6);
}
.flow-step.clean.done svg { color: var(--ink); }
.flow-step.talos {
  background: var(--bronze); border-color: var(--bronze); color: var(--ink);
  box-shadow: 0 12px 30px -10px rgba(201,150,63,0.55);
  animation: talosPulse 2.2s ease-in-out infinite;
}
.flow-step.talos svg { width: 16px; height: 22px; color: var(--ink); }
@keyframes talosPulse {
  0%, 100% { box-shadow: 0 12px 30px -10px rgba(201,150,63,0.45); }
  50% { box-shadow: 0 16px 40px -10px rgba(201,150,63,0.85), 0 0 0 6px rgba(201,150,63,0.12); }
}

.flow-link {
  display: inline-block; flex-shrink: 0;
  width: 26px; height: 0.5px; position: relative;
}
.flow-link.dashed {
  background: repeating-linear-gradient(90deg, rgba(216,117,84,0.4) 0 4px, transparent 4px 8px);
  height: 1px;
}
.flow-link.bronze {
  height: 2px;
  background: linear-gradient(90deg, rgba(201,150,63,0.2), rgba(201,150,63,0.7), rgba(201,150,63,0.2));
  border-radius: 2px;
  width: 38px;
  overflow: hidden;
}
.flow-pulse {
  position: absolute; left: -10px; top: 0; bottom: 0;
  width: 18px;
  background: linear-gradient(90deg, transparent, var(--bronze), transparent);
  animation: flowPulse 2.4s linear infinite;
  opacity: 0.95;
}
@keyframes flowPulse {
  0% { transform: translateX(-30px); }
  100% { transform: translateX(60px); }
}

.flow-arrow-vert {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 0;
  position: relative;
}
.flow-arrow-line {
  width: 1px; height: 26px;
  background: linear-gradient(180deg, rgba(216,117,84,0.4), rgba(201,150,63,0.85));
}
.flow-arrow-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bronze); color: var(--ink);
  padding: 6px 14px; border-radius: 100px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  font-weight: 700;
  box-shadow: 0 10px 24px -8px rgba(201,150,63,0.5);
  animation: pillFloat 3s ease-in-out infinite;
}
@keyframes pillFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

/* ════════════════════════════════════════════════════════════
   AUTO-CARD LINK (Voir le process →)
   ════════════════════════════════════════════════════════════ */
.auto-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 16px; padding-top: 14px;
  border-top: 0.5px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.4px;
  color: var(--bronze); font-weight: 600;
  opacity: 0.75;
  transition: opacity 0.25s, gap 0.25s;
}
.auto-card:hover .auto-link { opacity: 1; gap: 10px; }
.auto-link svg { transition: transform 0.25s; }
.auto-card:hover .auto-link svg { transform: translateX(2px); }

/* ════════════════════════════════════════════════════════════
   SECTOR TABS (reserver.html step 1)
   ════════════════════════════════════════════════════════════ */
.sector-tabs {
  display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap;
}
.sector-tab {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 10px; flex: 1; min-width: 0;
  background: rgba(245, 237, 220, 0.03);
  border: 0.5px solid var(--line);
  border-radius: 10px;
  color: var(--parchemin); cursor: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; font-weight: 600;
  transition: all 0.2s;
  white-space: nowrap;
}
.sector-tab:hover {
  background: rgba(201, 150, 63, 0.08);
  border-color: rgba(201, 150, 63, 0.3);
}
.sector-tab.active {
  background: var(--bronze); color: var(--ink);
  border-color: var(--bronze);
  box-shadow: 0 6px 20px -6px rgba(201, 150, 63, 0.4);
}
.sector-tab-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Pain tile icon at end */
.pain-tile-icon {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--bronze); opacity: 0.5;
  flex-shrink: 0; pointer-events: none;
}
.pain-tile { padding-right: 36px; } /* make room for icon */
.pain-tile.selected .pain-tile-icon { opacity: 1; }

/* ════════════════════════════════════════════════════════════
   SECTORS STRIP (homepage)
   ════════════════════════════════════════════════════════════ */
.sectors-strip {
  padding: 18px 40px;
  background: var(--ink-2);
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.sector-pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 100px;
  border: 0.5px solid var(--line);
  background: rgba(245, 237, 220, 0.03);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px; font-weight: 600;
  color: var(--muted);
  transition: all 0.2s;
}
.sector-pill:hover { border-color: var(--bronze); color: var(--bronze); background: rgba(201, 150, 63, 0.06); }
.sector-pill svg { width: 13px; height: 13px; }
.sectors-divider {
  height: 20px; width: 0.5px; background: var(--line); margin: 0 6px;
}
.sectors-all-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px;
  color: var(--bronze); opacity: 0.7; font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   WEB & INTERFACES SECTION
   ════════════════════════════════════════════════════════════ */
.web-section-wrap {
  background: var(--ink-2);
  border-top: 0.5px solid var(--line);
  border-bottom: 0.5px solid var(--line);
  position: relative;
  overflow: hidden;
}
.web-section-wrap::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 80% 20%, rgba(126, 149, 135, 0.12), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(201, 150, 63, 0.07), transparent 40%);
  pointer-events: none;
}
.web-section-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 100px 40px;
  position: relative; z-index: 1;
}

/* CTA nav responsive label swap (desktop full, mobile short) */
.cta .cta-short { display: none; }
@media (max-width: 700px) {
  .cta .cta-full { display: none; }
  .cta .cta-short { display: inline; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding-top: 100px; }
  .booking-inner { grid-template-columns: 1fr; gap: 30px; }
  .booking-side { position: static; }
  .auto-grid, .kpi-grid, .steps, .stats, .price-grid { grid-template-columns: repeat(2, 1fr); }
  .live-board, .pain-grid { grid-template-columns: 1fr; }
  .case-card { grid-template-columns: 60px 1fr; gap: 18px; padding: 28px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-h1, .page-head h1 { font-size: 48px; }
  .section-title { font-size: 34px; }
  .auto-detail-grid { grid-template-columns: 1fr; gap: 24px; }
  .auto-detail.reverse .auto-detail-grid > div:first-child { order: 0; }
  .auto-detail h2 { font-size: 30px; }

  /* ── RÉORDRE MOBILE : titre → explication → motion → checks → CTA ── */
  .auto-detail-grid { display: flex; flex-direction: column; }
  .auto-detail-grid > div:not(.auto-mock) { display: contents; }
  .auto-detail-grid .auto-detail-num { order: 1; }
  .auto-detail-grid h2                { order: 2; }
  .auto-detail-grid > div > p         { order: 3; }
  .auto-mock                          { order: 4; margin: 8px 0 4px; }
  .auto-detail-grid .feats            { order: 5; margin-top: 4px; }
  .auto-detail-grid > div > .cta-bronze { order: 6; align-self: flex-start; }
}
@media (max-width: 1100px) {
  .sector-tabs { gap: 4px; }
  .sector-tab { font-size: 9px; padding: 10px 7px; }
  .flow-row { grid-template-columns: 90px 1fr; padding: 22px 18px; gap: 16px; }
  .flow-side-time { font-size: 22px; }
  .flow-step { min-width: 76px; padding: 10px 10px; font-size: 9px; }
  .ghost-task { font-size: 9.5px; }
}
@media (max-width: 700px) {
  body { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
  nav.top { padding: 12px 16px; gap: 8px; }
  nav.top.compact { padding: 9px 16px; }
  nav.top .links { display: none; }
  nav.top .cta { padding: 9px 14px; font-size: 12.5px; gap: 6px; }
  nav.top .nav-mark svg { width: 64px; height: 18px; }
  nav.top .nav-burger { display: inline-flex; }
  .live-tag { display: none; }
  /* Disable horizontal scroll body-wide */
  body { overflow-x: hidden; }
  /* Touch-friendly tap targets */
  a, button, .cta, .cta-ghost, .cta-bronze { -webkit-tap-highlight-color: transparent; }
  .sectors-strip { padding: 14px 18px; gap: 6px; }
  .sectors-divider, .sectors-all-label { display: none; }
  .sector-pill { font-size: 9px; padding: 6px 10px; }
  .web-section-inner { padding: 60px 18px; }

  /* Auto-detail (automatisations.html) — stack mock+text */
  .auto-detail-grid { grid-template-columns: 1fr; gap: 30px; }
  .auto-detail.reverse .auto-detail-grid > div:first-child { order: 0; }
  .auto-detail h2 { font-size: 26px; }
  .auto-detail p { font-size: 15px; }
  .auto-mock { padding: 18px; }
  .mock-line { font-size: 12px; gap: 8px; }
  .mock-line .mline-icon { width: 28px; height: 28px; }

  /* Booking flow mobile */
  .booking { padding: 80px 18px 80px; }
  .booking-card { padding: 20px 14px; }
  .stepper { overflow-x: auto; padding-bottom: 6px; }
  .step-question { font-size: 20px; line-height: 1.2; }
  .sector-tabs { gap: 5px; }
  .sector-tab { padding: 9px 6px; font-size: 8.5px; gap: 4px; }
  .sector-tab-icon { width: 16px; height: 16px; }
  .trade-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .trade-tile { padding: 14px 10px; }
  .trade-label { font-size: 11.5px; }
  .pain-tiles { grid-template-columns: 1fr; gap: 6px; }
  .pain-tile { font-size: 12.5px; padding-right: 32px; }
  .cal { padding: 12px; }
  .slot-list { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .slot { font-size: 10.5px; padding: 7px 4px; }
  .form-row.split { grid-template-columns: 1fr; gap: 12px; }
  .step-ctrl { flex-direction: column-reverse; gap: 10px; align-items: stretch; }
  .step-ctrl .btn-prev, .step-ctrl .btn-next { width: 100%; justify-content: center; }
  .confirm-actions { grid-template-columns: 1fr; }
  .confirm-row { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 0; }

  /* Adapt section mobile refinements */
  .adapt-grid { gap: 16px; }
  .adapt-card { padding: 20px 18px 22px; }
  .adapt-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .adapt-title { font-size: 19px; }
  .adapt-motion-branch .adapt-tool { font-size: 9px; padding: 3px 7px; }
  .adapt-motion-branch .adapt-core { width: 44px; height: 44px; }
  .adapt-motion-branch .adapt-core svg { width: 22px; height: 32px; }

  /* Adapt bottom mobile */
  .adapt-bottom-headline { font-size: 22px; }
  .adapt-bottom-headline .big { font-size: 40px; }
  .adapt-bottom-headline .dim { display: block; font-size: 14px; margin-top: 4px; }
  .adapt-bottom .cta-bronze { width: 100%; justify-content: center; }

  /* Web hero comparison mobile */
  .web-hero { margin: 30px 0; padding: 22px 14px 20px; }
  .web-hero-screen { max-width: 220px; aspect-ratio: 10/13; padding: 14px 12px; }
  .wh-rich-h { font-size: 16px; }
  .wh-rich-mini { font-size: 13px; padding: 5px 8px; }
  .wh-rich-cta { font-size: 9.5px; padding: 8px 12px; }
  .web-hero-vs { padding: 0; }
  .vs-pill { font-size: 22px; padding: 7px 12px; }
  .wh-stat-num { font-size: 22px; }
  .web-hero-caption { font-size: 15px; }
  .web-hero-stat { max-width: 220px; }

  /* Sectors strip mobile (already partial) */
  .sectors-strip { padding: 12px 14px; gap: 5px; }

  /* Auto-card spacing & data mobile */
  .auto-card { padding: 22px 18px 20px; }
  .auto-title { font-size: 18px; }
  .auto-desc { font-size: 13px; min-height: auto; margin-bottom: 16px; }
  .auto-data-val { font-size: 22px; }

  /* Hero-trust mobile improvements */
  .hero-trust { flex-direction: column; align-items: flex-start; gap: 16px; }
  .hero-trust-item { width: 100%; }
  .hero-eyebrow { display: inline-block; white-space: normal; }

  /* Console hero on mobile - constrain widths */
  .console { padding: 14px; }
  .cn-id { font-size: 9px; letter-spacing: 1px; }
  .cn-time { font-size: 9px; }
  .cn-positions-tab { font-size: 8.5px; }
  .cn-kpi-val { font-size: 22px; }
  .cn-pos { font-size: 11px; gap: 8px; }
  .cn-pos-name .desc { font-size: 8.5px; }
  .cn-pos-val { font-size: 10px; }
  .cn-foot { font-size: 9px; padding: 10px 12px; }

  /* Stats mobile : 1 col already, ensure styling */
  .stat-num { font-size: 52px; }
  .stat-num .suffix { font-size: 26px; }

  /* Case card mobile */
  .case-quote { font-size: 18px; }
  .case-detail { font-size: 12.5px; }

  /* Pain section mobile */
  .pain-col { padding: 24px 18px; }
  .pain-col h3 { font-size: 20px; }
  .pain-list li { font-size: 13px; padding: 11px 0; }

  /* Page-head mobile */
  .page-head { padding: 120px 18px 40px; }
  .page-head h1 { font-size: 34px; letter-spacing: -0.6px; }
  .page-head .lede { font-size: 15px; }
  .breadcrumb { font-size: 9.5px; }

  /* Footer mobile */
  .footer-grid { gap: 28px; }
  .footer-bottom { font-size: 9.5px; padding-top: 16px; gap: 6px; }

  /* Flow section mobile */
  .flow-section { padding: 60px 18px; }
  .flow-row { grid-template-columns: 1fr; padding: 18px 14px; gap: 14px; }
  .flow-side { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .flow-side-time { font-size: 18px; }
  .flow-rail {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12px, black calc(100% - 12px), transparent 100%);
  }
  .flow-step { min-width: 78px; padding: 10px 8px; font-size: 9px; }
  .flow-step svg { width: 16px; height: 16px; }
  .flow-arrow-pill { font-size: 9px; padding: 5px 11px; }

  /* Ghost tasks: hide on small screens to keep hero clean */
  .ghost-tasks { display: none; }

  /* Auto-card link mobile */
  .auto-link { font-size: 9.5px; }

  /* Hero CTA stacking */
  .hero-ctas { flex-wrap: wrap; }
  .hero-ctas .cta-bronze, .hero-ctas .cta-ghost { width: 100%; justify-content: center; }
  .hero-trust { gap: 12px; }
  .hero-trust-num { font-size: 20px; }
  .hero-eyebrow { font-size: 9px; letter-spacing: 1.4px; padding: 5px 10px; }

  /* CTA strip mobile */
  .cta-strip { padding: 60px 18px; }
  .cta-strip .cta-row { flex-direction: column; width: 100%; }
  .cta-strip .cta-bronze, .cta-strip .cta-ghost { width: 100%; justify-content: center; }
  .hero, .auto-section, .kpi-strip, .pricing, .live, .proof, .booking, .faq, .process, footer, .cta-strip, .page-head, .auto-detail { padding-left: 18px; padding-right: 18px; }
  .hero { padding-top: 90px; }
  .page-head { padding-top: 130px; padding-bottom: 50px; }
  .hero-h1, .page-head h1 { font-size: 38px; letter-spacing: -0.8px; }
  .section-title, .kpi-strip-title, .cta-strip h2 { font-size: 26px; }
  .kpi-strip-head { flex-direction: column; gap: 16px; align-items: start; }
  .auto-grid, .stats, .steps, .price-grid, .pain-grid { grid-template-columns: 1fr; gap: 14px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .trade-grid, .slot-list, .form-row.split, .confirm-actions { grid-template-columns: 1fr 1fr; }
  .pain-tiles { grid-template-columns: 1fr; }
  .conn-line { display: none; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .stepper { gap: 4px; }
  .step-line { width: 8px; }
  .step-dot-label { display: none; }
  .step-dot.active .step-dot-label { display: block; }
  .booking-card { padding: 22px 18px; }
  .case-card { grid-template-columns: 1fr; }
  .case-avatar { display: none; }
  .console { padding: 16px; }
  .cn-grid { grid-template-columns: 1fr; gap: 10px; }
  .cn-kpi-val { font-size: 24px; }
  .hero-trust { flex-wrap: wrap; gap: 16px; }
  .auto-detail { padding: 60px 18px; }
  .auto-detail h2 { font-size: 26px; }
  .hist-hero { padding: 110px 20px 60px; min-height: auto; }
  .hist-h1 { font-size: 38px; letter-spacing: -1.5px; }
  .hist-chapter-inner { flex-direction: column; gap: 24px; }
  .hist-chapter-aside { flex-direction: row; align-items: center; gap: 12px; min-width: auto; }
  .hist-num { font-size: 48px; }
  .hist-chapter-h2 { font-size: 28px; }
  .hist-pull { font-size: 22px; margin: 32px 0; }
  .hist-manifeste-h2 { font-size: 28px; }
  .hm-text { font-size: 18px; }
  .hist-cta-h2 { font-size: 30px; }
  .hist-portraits { grid-template-columns: 1fr; }
  .hist-stack-row { flex-wrap: wrap; gap: 10px; }
  .hist-team-values { grid-template-columns: 1fr 1fr; }
  .hist-myth-visual { margin: 28px 0; }
  .hist-terminal { margin: 24px 0; }
}