/* =============================================================
   Weloop AI — Design Tokens
   Ported from src/index.css + tailwind.config.ts in the website
   repo (victor-a/test-weloop-website). HSL triples are kept
   behind the CSS var wrapper exactly as shipped so any
   hsl(var(--x) / alpha) pattern from the codebase keeps working.
   ============================================================= */

/* ---------- Type ---------- */
:root {
  /* -------- Color primitives (HSL triples) -------- */
  --background: 244 100% 99%; /* @kind color */      /* #FCFCFF  near-white w/ violet tint */
  --foreground: 240 20% 10%; /* @kind color */       /* #14141F  ink */

  --card: 0 0% 100%; /* @kind color */
  --card-foreground: 240 20% 10%; /* @kind color */

  --popover: 0 0% 100%; /* @kind color */
  --popover-foreground: 240 20% 10%; /* @kind color */

  --primary: 260 100% 69%; /* @kind color */         /* #7B3FFF  violet — the brand */
  --primary-foreground: 0 0% 100%; /* @kind color */

  --secondary: 160 70% 46%; /* @kind color */        /* #24C38A  mint green — success / positive */
  --secondary-foreground: 0 0% 100%; /* @kind color */

  --muted: 244 30% 95%; /* @kind color */            /* #EEEFF7  surface tint */
  --muted-foreground: 240 10% 46%; /* @kind color */ /* #6A6B78  body secondary */

  --accent: 244 50% 96%; /* @kind color */           /* #EFF0FB  violet-tinted surface */
  --accent-foreground: 260 100% 69%; /* @kind color */

  --destructive: 0 100% 64%; /* @kind color */       /* #FF4747  error red */
  --destructive-foreground: 0 0% 100%; /* @kind color */

  --border: 244 20% 92%; /* @kind color */           /* #E8E9F1 */
  --input:  244 20% 92%; /* @kind color */
  --ring:   260 100% 69%; /* @kind color */

  /* -------- Semantic request-type tokens -------- */
  /* Used to tag bug vs feature vs question etc. across the app */
  --color-bug:      340 100% 73%; /* @kind color */   /* pink   */
  --color-feature:  260 100% 69%; /* @kind color */   /* violet */
  --color-question: 160 100% 83%; /* @kind color */   /* mint   */
  --color-support:  210 100% 61%; /* @kind color */   /* blue   */
  --color-business:  42 100% 50%; /* @kind color */   /* amber  */
  --color-warning:   42 100% 50%; /* @kind color */
  --color-info:     210 100% 61%; /* @kind color */

  /* -------- Radius system -------- */
  --radius:    1rem;                /* 16px base (cards, inputs) */
  --radius-sm: calc(var(--radius) - 4px);  /* 12px */
  --radius-md: calc(var(--radius) - 2px);  /* 14px */
  --radius-lg: var(--radius);              /* 16px */
  --radius-2xl: 1.25rem;            /* 20px — panels */
  --radius-3xl: 1.5rem;             /* 24px — hero blocks */
  --radius-full: 9999px;            /* pills, buttons, badges */

  /* -------- Shadows / elevation -------- */
  /* Soft violet-tinted shadows — NOT neutral grey. This is a
     signature of the brand's cards & elevated surfaces. */
  --shadow-card:        0 1px 3px hsl(260 100% 69% / 0.04), 0 8px 24px hsl(260 100% 69% / 0.06); /* @kind shadow */
  --shadow-card-hover:  0 6px 16px hsl(260 100% 69% / 0.12), 0 24px 56px hsl(260 100% 69% / 0.18); /* @kind shadow */
  --shadow-cta:         0 10px 30px hsl(260 100% 69% / 0.25); /* @kind shadow */
  --shadow-sm:          0 1px 2px hsl(260 100% 69% / 0.06); /* @kind shadow */

  /* -------- Gradients -------- */
  --gradient-hero:    linear-gradient(135deg, hsl(260 100% 69% / 0.08) 0%, hsl(160 70% 46% / 0.06) 50%, hsl(244 100% 99%) 100%); /* @kind color */
  --gradient-primary: linear-gradient(135deg, hsl(260 100% 69%), hsl(280 80% 60%)); /* @kind color */
  --gradient-glow:    radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), hsl(260 100% 69% / 0.06), transparent 40%); /* @kind color */

  /* -------- Spacing scale (Tailwind-compatible rem scale) -------- */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-24: 6rem;     /* 96 — section vertical rhythm */
  --space-32: 8rem;     /* 128 — large section vertical rhythm */

  /* -------- Layout -------- */
  --container-max: 1400px; /* @kind spacing */   /* tailwind 2xl container width */
  --container-padding: 2rem; /* @kind spacing */

  /* -------- Type primitives -------- */
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
               'Liberation Mono', monospace;

  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold: 800; /* @kind font */

  /* Font sizes — match Tailwind's default scale used throughout
     the Weloop landing (text-xs…text-7xl). */
  --fs-xs:   0.75rem; /* @kind font */   /* 12 */
  --fs-sm:   0.875rem; /* @kind font */  /* 14 */
  --fs-base: 1rem; /* @kind font */      /* 16 */
  --fs-lg:   1.125rem; /* @kind font */  /* 18 */
  --fs-xl:   1.25rem; /* @kind font */   /* 20 */
  --fs-2xl:  1.5rem; /* @kind font */    /* 24 */
  --fs-3xl:  1.875rem; /* @kind font */  /* 30 */
  --fs-4xl:  2.25rem; /* @kind font */   /* 36 */
  --fs-5xl:  3rem; /* @kind font */      /* 48 */
  --fs-6xl:  3.75rem; /* @kind font */   /* 60 */
  --fs-7xl:  4.5rem; /* @kind font */    /* 72 */

  --lh-tight:   1.1; /* @kind font */
  --lh-snug:    1.25; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.625; /* @kind font */

  /* -------- Motion -------- */
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --easing-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --duration-fast:   150ms; /* @kind other */
  --duration-base:   300ms; /* @kind other */
  --duration-slow:   600ms; /* @kind other */
  --duration-hero:   800ms; /* @kind other */
}

/* ============ Dark mode (declared by app; opt-in) ============ */
.dark {
  --background: 240 15% 6%; /* @kind color */
  --foreground: 0 0% 95%; /* @kind color */
  --card: 240 15% 9%; /* @kind color */
  --card-foreground: 0 0% 95%; /* @kind color */
  --popover: 240 15% 9%; /* @kind color */
  --popover-foreground: 0 0% 95%; /* @kind color */
  --primary: 260 100% 69%; /* @kind color */
  --primary-foreground: 0 0% 100%; /* @kind color */
  --secondary: 160 70% 46%; /* @kind color */
  --secondary-foreground: 0 0% 100%; /* @kind color */
  --muted: 240 15% 15%; /* @kind color */
  --muted-foreground: 240 10% 60%; /* @kind color */
  --accent: 240 15% 15%; /* @kind color */
  --accent-foreground: 260 100% 75%; /* @kind color */
  --destructive: 0 100% 64%; /* @kind color */
  --destructive-foreground: 0 0% 100%; /* @kind color */
  --border: 240 15% 18%; /* @kind color */
  --input:  240 15% 18%; /* @kind color */
  --ring:   260 100% 69%; /* @kind color */
}

/* =============================================================
   Semantic typography roles
   Used by design artifacts; matches usage in the landing code
   (h1/h2 use font-extrabold tracking-tight; body uses default).
   ============================================================= */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.h-display, h1.display {
  font-size: clamp(2.5rem, 5vw, var(--fs-7xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}

h1, .h1 {
  font-size: clamp(2rem, 4vw, var(--fs-5xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

h2, .h2 {
  font-size: clamp(1.875rem, 3.5vw, var(--fs-5xl));
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

h3, .h3 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

h4, .h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--primary));
}

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: hsl(var(--muted-foreground));
}

p, .body {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: hsl(var(--foreground));
}

.body-sm, small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: hsl(var(--muted-foreground));
}

.caption {
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: hsl(var(--muted-foreground));
}

code, kbd, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ======== Signature utility: gradient headline fill ========
   Used extensively in the landing (text-gradient-primary). Keep
   as its own class so any artifact can opt-in a single word. */
.text-gradient-primary {
  background-image: var(--gradient-primary);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.bg-hero-gradient  { background: var(--gradient-hero); }
.shadow-card       { box-shadow: var(--shadow-card); }
.shadow-card-hover { box-shadow: var(--shadow-card-hover); }

/* =============================================================
   Weloop — Présentation produit · page stylesheet
   Layered on the Weloop design tokens (colors_and_type.css).
   Editorial scroll-story. Violet / mint brand, Plus Jakarta Sans,
   soft violet-tinted shadows, mono eyebrows.
   ============================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: hsl(var(--background)); color: hsl(var(--foreground)); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: hsl(var(--primary) / .18); }

/* ---------- canvas ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.section { padding: 132px 0; }
.section-tight { padding: 88px 0; }
@media (max-width: 720px) { .section { padding: 88px 0; } .wrap, .wrap-narrow { padding: 0 22px; } }

.dark-band { background: hsl(240 18% 8%); color: hsl(0 0% 96%); }
.dark-band .muted { color: hsl(240 8% 62%); }
.bg-grid {
  background-image:
    radial-gradient(ellipse 780px 500px at 50% -5%, hsl(260 100% 69% / 0.20), transparent 62%),
    radial-gradient(ellipse 620px 420px at 92% 108%, hsl(160 70% 46% / 0.12), transparent 60%),
    linear-gradient(hsl(0 0% 100% / 0.035) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / 0.035) 1px, transparent 1px);
  background-size: auto, auto, 58px 58px, 58px 58px;
}

/* ---------- type ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: hsl(var(--primary));
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(160 70% 46%); box-shadow: 0 0 0 4px hsl(160 70% 46% / .16); }
.eyebrow.on-dark { color: hsl(260 100% 82%); }
.eyebrow.on-dark .dot { background: hsl(160 70% 54%); }

.h-display {
  font-size: clamp(42px, 6vw, 80px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.0;
  margin: 0; text-wrap: balance;
}
.h-section {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1.06;
  margin: 0; text-wrap: balance;
}
.h-sub {
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0; text-wrap: balance;
}
.lede {
  font-size: clamp(18px, 2vw, 21px); line-height: 1.55;
  color: hsl(var(--muted-foreground)); margin: 0;
  text-wrap: pretty;
}
.muted { color: hsl(var(--muted-foreground)); }
.ink { color: hsl(var(--foreground)); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }

.text-grad {
  background: linear-gradient(116deg, hsl(260 100% 69%) 0%, hsl(282 88% 62%) 48%, hsl(300 78% 60%) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.text-mint { color: hsl(160 64% 38%); }
.on-dark .text-mint { color: hsl(160 70% 60%); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 48px; padding: 0 24px; border-radius: 9999px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform 180ms var(--easing-out), background 180ms var(--easing-standard), box-shadow 220ms var(--easing-standard), border-color 180ms var(--easing-standard), color 160ms;
  white-space: nowrap;
}
.btn .arrow { transition: transform 220ms var(--easing-out); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: hsl(var(--primary)); color: #fff; box-shadow: 0 1px 0 hsl(260 100% 82%) inset, var(--shadow-cta); }
.btn-primary:hover { background: hsl(260 100% 64%); transform: translateY(-1px); box-shadow: 0 1px 0 hsl(260 100% 82%) inset, 0 16px 40px hsl(260 100% 69% / .34); }
.btn-ink { background: hsl(var(--foreground)); color: #fff; box-shadow: 0 8px 24px hsl(240 20% 10% / .18); }
.btn-ink:hover { background: hsl(240 22% 4%); transform: translateY(-1px); }
.btn-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-outline:hover { background: hsl(var(--accent)); border-color: hsl(244 30% 84%); }
.btn-ghost { background: transparent; color: hsl(var(--muted-foreground)); }
.btn-ghost:hover { color: hsl(var(--foreground)); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 28px; font-size: 16px; }
.on-dark .btn-outline { color: #fff; border-color: hsl(240 8% 30%); }
.on-dark .btn-outline:hover { background: hsl(240 18% 14%); border-color: hsl(240 8% 42%); }
.btn-light { background: #fff; color: hsl(var(--foreground)); }
.btn-light:hover { background: hsl(244 40% 97%); transform: translateY(-1px); }

/* ---------- pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 14px; border-radius: 9999px; white-space: nowrap;
  font-size: 13px; font-weight: 600;
  background: hsl(var(--primary) / .07);
  border: 1px solid hsl(var(--primary) / .18);
  color: hsl(var(--primary));
}
.pill .dot { width: 7px; height: 7px; border-radius: 999px; background: hsl(160 70% 46%); box-shadow: 0 0 0 4px hsl(160 70% 46% / .16); }
.on-dark .pill { background: hsl(260 100% 69% / .12); border-color: hsl(260 100% 69% / .26); color: hsl(260 100% 84%); }

.fr-flag {
  display: inline-flex; width: 22px; height: 15px; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px hsl(240 20% 10% / .08);
}
.fr-flag i { flex: 1; }
.fr-flag .b { background: #2438a8; } .fr-flag .w { background: #fff; } .fr-flag .r { background: #e1313a; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: hsl(244 100% 99% / .72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid hsl(var(--border) / .8);
  transform: translateY(0);
  transition: background .4s var(--easing-standard), border-color .4s var(--easing-standard), box-shadow .4s var(--easing-standard), transform .4s var(--easing-standard);
}
/* Hidden state: slides up out of view while scrolling down (toggled by JS) */
.nav.nav--hidden { transform: translateY(-100%); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 72px; }
.brand { display: inline-flex; align-items: center; }
.brand .brand-logo { height: 30px; width: auto; display: block; transition: filter .4s var(--easing-standard); }
.nav-links { display: flex; align-items: center; gap: 4px; font-size: 14.5px; color: hsl(var(--muted-foreground)); margin-left: 8px; }
.nav-links a { padding: 8px 13px; border-radius: 999px; transition: color 150ms, background 150ms; }
.nav-links a:hover { color: hsl(var(--foreground)); background: hsl(var(--accent)); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.nav-sov {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 13px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.005em;
  color: hsl(var(--foreground));
  background: hsl(160 70% 46% / .1); border: 1px solid hsl(160 70% 46% / .26);
  transition: color .4s var(--easing-standard), background .4s var(--easing-standard), border-color .4s var(--easing-standard);
}
.nav-sov-flags { font-size: 15px; line-height: 1; }
.nav.at-top .nav-sov { color: hsl(0 0% 100% / .92); background: hsl(0 0% 100% / .1); border-color: hsl(0 0% 100% / .22); }
@media (max-width: 880px) { .nav-sov { display: none; } }
@media (max-width: 940px) { .nav-links { display: none; } }
@media (max-width: 560px) { .nav-cta .btn-ghost { display: none; } }

/* Transparent state while sitting over the dark hero (added by JS at top of page) */
.nav.at-top {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none !important;
}
.nav.at-top .brand-logo { filter: brightness(0) invert(1); }
.nav.at-top .nav-links { color: hsl(0 0% 100% / .76); }
.nav.at-top .nav-links a:hover { color: #fff; background: hsl(0 0% 100% / .1); }
.nav.at-top .btn-ghost { color: hsl(0 0% 100% / .82); }
.nav.at-top .btn-ghost:hover { color: #fff; }

/* ---------- hero (dark · cinematic) ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: -73px;          /* pull up under the sticky nav so it reads transparent */
  padding: 84px 0 28px;
  color: #fff;
  background:
    radial-gradient(120% 95% at 50% -2%, hsl(256 48% 17%), transparent 58%),
    linear-gradient(180deg, hsl(249 42% 9%) 0%, hsl(245 32% 8%) 66%, hsl(240 18% 8%) 100%);
}
/* fine grid, masked to fade out toward the edges */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(hsl(0 0% 100% / .045) 1px, transparent 1px),
    linear-gradient(90deg, hsl(0 0% 100% / .045) 1px, transparent 1px);
  background-size: 60px 60px;
  -webkit-mask-image: radial-gradient(ellipse 105% 78% at 50% 4%, #000 32%, transparent 76%);
  mask-image: radial-gradient(ellipse 105% 78% at 50% 4%, #000 32%, transparent 76%);
}
/* film grain */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* drifting aurora blobs + mouse-follow glow */
.hero-aura { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aura { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.aura-1 { width: 640px; height: 640px; top: -200px; right: -140px;
  background: radial-gradient(circle, hsl(262 100% 66% / .9), transparent 70%); }
.aura-2 { width: 520px; height: 520px; bottom: -180px; left: -120px;
  background: radial-gradient(circle, hsl(160 85% 50% / .65), transparent 70%); }
.aura-3 { width: 480px; height: 480px; top: 26%; left: 42%;
  background: radial-gradient(circle, hsl(304 95% 62% / .5), transparent 70%); }
.hero-glow {
  position: absolute; width: 640px; height: 640px; border-radius: 50%;
  left: var(--gx, 62%); top: var(--gy, 34%); transform: translate(-50%, -50%);
  background: radial-gradient(circle, hsl(264 100% 74% / .16), transparent 60%);
  transition: left .35s var(--easing-out), top .35s var(--easing-out);
}

.hero-grid {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 1.04fr 0.96fr; gap: 56px; align-items: center;
}
@media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }

.hero-copy { position: relative; max-width: 600px; }
.hero .pill {
  margin-bottom: 22px;
  background: hsl(262 100% 70% / .14); border-color: hsl(262 100% 82% / .32); color: hsl(262 100% 90%);
}
.hero .pill .dot { background: hsl(160 80% 56%); box-shadow: 0 0 0 4px hsl(160 80% 56% / .2); }
.hero-title {
  margin: 0; font-size: clamp(31px, 3.2vw, 48px); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.07; text-wrap: balance; color: #fff;
}
.hero-lede {
  margin: 22px 0 0; max-width: 520px;
  font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.6; color: hsl(244 16% 76%);
  text-wrap: pretty;
}
.hero-lede .hl { color: #fff; font-weight: 700; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 40px; padding-top: 28px; border-top: 1px solid hsl(0 0% 100% / .1);
}
.hero-stat .n { font-size: clamp(26px, 2.4vw, 33px); font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.hero-stat .n .u { color: hsl(262 100% 80%); }
.hero-stat .l { font-size: 12.5px; color: hsl(244 12% 64%); margin-top: 5px; line-height: 1.4; }

/* the white agent console pops off the dark canvas */
.hero-visual { position: relative; }
.hero-visual::before {
  content: ""; position: absolute; inset: -28px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 52% 42%, hsl(262 100% 64% / .4), transparent 68%);
  filter: blur(44px);
}
.hero .console {
  color: hsl(var(--foreground));   /* reset: the white card must not inherit the hero's white text */
  box-shadow:
    0 1px 0 hsl(0 0% 100% / .6) inset,
    0 36px 90px hsl(255 70% 3% / .6),
    0 0 0 1px hsl(0 0% 100% / .05),
    0 0 70px hsl(262 100% 60% / .18);
}
.hero .hero-trust { color: hsl(244 12% 62%); margin-top: 14px; }

/* brighter gradient phrase on the dark hero */
.hero .text-grad {
  background: linear-gradient(108deg, hsl(266 100% 80%) 0%, hsl(292 100% 76%) 46%, hsl(330 100% 73%) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* glass button for the dark hero */
.btn-glass {
  background: hsl(0 0% 100% / .08); color: #fff; border-color: hsl(0 0% 100% / .2);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover { background: hsl(0 0% 100% / .15); border-color: hsl(0 0% 100% / .34); transform: translateY(-1px); }

@media (prefers-reduced-motion: no-preference) {
  .aura-1 { animation: drift1 19s ease-in-out infinite; }
  .aura-2 { animation: drift2 23s ease-in-out infinite; }
  .aura-3 { animation: drift3 27s ease-in-out infinite; }
  .hero .console { animation: floaty 7s var(--easing-standard) infinite; }
}
@keyframes drift1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-46px, 38px); } }
@keyframes drift2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(44px, -30px); } }
@keyframes drift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-30px, -24px) scale(1.12); } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (max-width: 720px) { .hero { padding: 96px 0 40px; } }

/* ---------- agent console (hero asset) ---------- */
.console {
  position: relative; border-radius: 24px;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 1px 0 #fff inset, 0 36px 90px hsl(260 100% 69% / .16), 0 10px 30px hsl(260 100% 69% / .08);
  overflow: hidden;
}
.console-head {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid hsl(var(--border));
  background: linear-gradient(180deg, hsl(244 100% 99%), hsl(var(--card)));
}
.dots { display: flex; gap: 6px; }
.dots span { width: 11px; height: 11px; border-radius: 999px; background: hsl(244 20% 88%); }
.console-url { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; color: hsl(var(--muted-foreground)); }
.console-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11.5px; color: hsl(160 64% 34%);
  padding: 4px 11px; border-radius: 999px;
  background: hsl(160 70% 46% / .1); border: 1px solid hsl(160 70% 46% / .28);
}
.live-dot { width: 7px; height: 7px; border-radius: 999px; background: hsl(160 70% 46%); animation: pulse 2.2s ease-in-out infinite; }
.console-body { padding: 14px 20px 15px; }
.agent-id { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid hsl(var(--border)); }
.agent-avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: var(--gradient-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px hsl(260 100% 69% / .35);
}
.agent-feed { display: flex; flex-direction: column; gap: 9px; padding-top: 14px; }
.feed-row { display: grid; grid-template-columns: 26px 1fr; gap: 11px; align-items: start; }
.feed-ic {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 14px;
}
.feed-ic.user { background: hsl(244 30% 92%); color: hsl(244 20% 38%); }
.feed-ic.think { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.feed-ic.resolve { background: hsl(160 70% 46% / .14); color: hsl(160 64% 34%); }
.feed-ic.route { background: hsl(210 100% 61% / .14); color: hsl(210 80% 46%); }
.feed-ic.measure { background: hsl(42 100% 50% / .16); color: hsl(38 90% 40%); }
.feed-ic.photo { padding: 0; overflow: hidden; background: none; }
.feed-ic.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-txt { font-size: 13.5px; line-height: 1.45; }
.feed-txt .sub { color: hsl(var(--muted-foreground)); font-size: 12.5px; display: block; margin-top: 2px; }
.feed-txt .mono { font-size: 12px; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; font-family: var(--font-mono); letter-spacing: 0.03em;
  vertical-align: middle;
}
.tag-bug { background: hsl(var(--color-bug) / .15); color: hsl(340 78% 46%); }
.tag-feature { background: hsl(var(--color-feature) / .12); color: hsl(var(--primary)); }
.tag-question { background: hsl(160 70% 46% / .15); color: hsl(160 62% 32%); }
.tag-resolved { background: hsl(160 70% 46% / .15); color: hsl(160 62% 32%); }
.tool-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px; vertical-align: middle;
  background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
}
.console-result {
  margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(180deg, hsl(160 70% 46% / .07), hsl(160 70% 46% / .02));
  border: 1px solid hsl(160 70% 46% / .26);
}
.console-result .k { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: hsl(160 62% 34%); text-transform: uppercase; }
.console-result .v { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; margin-top: 2px; }

.hero-trust {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding: 0 4px; font-size: 12.5px; color: hsl(var(--muted-foreground)); flex-wrap: wrap;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- generic section header ---------- */
.sec-head { max-width: 760px; }
.sec-head .eyebrow { margin-bottom: 18px; }
.sec-head .lede { margin-top: 22px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .eyebrow { justify-content: center; }

/* ---------- "en une phrase" statement ---------- */
.statement { max-width: 940px; }
.statement .big {
  font-size: clamp(26px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.025em;
  line-height: 1.18; margin: 0; text-wrap: balance;
}
.statement .big .muted-ink { color: hsl(240 12% 56%); }

/* ---------- sovereign band ---------- */
.sovereign {
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
  padding: 30px 34px; border-radius: 22px;
  background: linear-gradient(135deg, hsl(260 100% 69% / .07), hsl(244 50% 96% / .6));
  border: 1px solid hsl(var(--primary) / .18);
}
.sovereign .crest {
  width: 56px; height: 56px; border-radius: 16px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-sm);
}
.sovereign h4 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.sovereign p { margin: 0; font-size: 15px; line-height: 1.55; color: hsl(var(--muted-foreground)); }
.sovereign.on-dark {
  background: linear-gradient(135deg, hsl(260 100% 69% / .14), hsl(240 18% 13% / .6));
  border-color: hsl(260 100% 69% / .26);
  text-align: left;
}
.sovereign.on-dark .crest { background: #fff; border-color: transparent; }
.sovereign.on-dark h4 { color: #fff; }
.sovereign.on-dark p { color: hsl(240 8% 66%); }
@media (max-width: 600px) { .sovereign { grid-template-columns: 1fr; } }

/* ---------- problem (dark) ---------- */
.flux-wrap { position: relative; margin-top: 56px; border-radius: 24px; overflow: hidden; border: 1px solid hsl(240 8% 18%); }
.flux {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 0;
  background: hsl(240 18% 10% / .6);
}
@media (max-width: 820px) { .flux { grid-template-columns: 1fr; } }
.flux-col { padding: 26px 28px; }
.flux-col + .flux-col { border-left: 1px solid hsl(240 8% 16%); }
@media (max-width: 820px) { .flux-col + .flux-col { border-left: 0; border-top: 1px solid hsl(240 8% 16%); } }
.flux-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: hsl(240 8% 56%); margin-bottom: 16px; }
.chip-stack { display: flex; flex-wrap: wrap; gap: 8px; }
.raw-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: 10px; font-size: 13px;
  background: hsl(240 18% 14%); border: 1px solid hsl(240 8% 22%); color: hsl(240 8% 82%);
}
.raw-chip .d { width: 6px; height: 6px; border-radius: 999px; }
.dest-list { display: flex; flex-direction: column; gap: 10px; }
.dest {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px;
  background: hsl(240 18% 13%); border: 1px solid hsl(240 8% 20%);
}
.dest .ic { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; }
.dest .t { font-size: 14px; font-weight: 600; color: #fff; }
.dest .s { font-size: 12px; color: hsl(240 8% 58%); font-family: var(--font-mono); }
.flux-arrow { display: flex; align-items: center; justify-content: center; color: hsl(240 8% 40%); padding: 0 6px; }
@media (max-width: 820px) { .flux-arrow { transform: rotate(90deg); padding: 8px 0; } }

.fail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 28px; }
@media (max-width: 880px) { .fail-grid { grid-template-columns: 1fr; } }
.fail {
  padding: 28px; border-radius: 20px;
  background: linear-gradient(180deg, hsl(240 18% 12%), hsl(240 18% 9.5%));
  border: 1px solid hsl(240 8% 18%);
}
.fail .n { font-family: var(--font-mono); font-size: 12px; color: hsl(0 100% 72%); letter-spacing: .08em; }
.fail h3 { margin: 14px 0 10px; font-size: 19px; font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.fail p { margin: 0; font-size: 14.5px; line-height: 1.58; color: hsl(240 8% 64%); }

.cost-quote {
  margin-top: 52px; padding: 0 0 0 28px; border-left: 3px solid hsl(var(--primary));
  font-size: clamp(22px, 2.8vw, 32px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.3;
  color: #fff; max-width: 920px; text-wrap: balance;
}
.cost-quote em { font-style: normal; color: hsl(260 100% 80%); }

/* ---------- solution: sticky steps ---------- */
.story-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: 72px; align-items: start; }
@media (max-width: 1000px) { .story-grid { grid-template-columns: 1fr; gap: 40px; } }
.story-sticky { position: sticky; top: 100px; }
@media (max-width: 1000px) { .story-sticky { position: static; } }

.stage {
  position: relative; border-radius: 24px; overflow: hidden;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  box-shadow: 0 1px 0 #fff inset, 0 30px 80px hsl(260 100% 69% / .12), 0 8px 24px hsl(260 100% 69% / .06);
  min-height: 460px;
}
.stage-head {
  display: flex; align-items: center; gap: 10px; padding: 13px 18px;
  border-bottom: 1px solid hsl(var(--border)); background: hsl(244 60% 99%);
  font-family: var(--font-mono); font-size: 12px; color: hsl(var(--muted-foreground));
}
.stage-panels { position: relative; }
.stage-panel {
  position: absolute; inset: 0; padding: 26px;
  opacity: 0; transform: translateY(14px) scale(.99);
  transition: opacity .5s var(--easing-out), transform .5s var(--easing-out);
  pointer-events: none;
}
.stage-panel.active { opacity: 1; transform: none; pointer-events: auto; position: relative; }

.steps { display: flex; flex-direction: column; }
.step {
  padding: 30px 0 30px 28px; border-left: 2px solid hsl(var(--border)); position: relative;
  transition: border-color .35s, opacity .35s;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.step:first-child { padding-top: 0; }
/* clickable affordance: any step can be revisited; lift the dim + tint the rail on hover */
.step:hover:not(.active) { opacity: 1; border-left-color: hsl(var(--primary) / .45); }
.step:hover:not(.active)::before { border-color: hsl(var(--primary) / .55); }
.step:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 6px; border-radius: 6px; }
.step:focus:not(:focus-visible) { outline: none; }
.step::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 999px;
  background: hsl(var(--background)); border: 2px solid hsl(244 20% 84%);
  transition: background .35s, border-color .35s, box-shadow .35s;
}
.step:first-child::before { top: 0; }
.step.active { border-left-color: hsl(var(--primary)); }
.step.active::before { background: hsl(var(--primary)); border-color: hsl(var(--primary)); box-shadow: 0 0 0 5px hsl(var(--primary) / .14); }
.step:not(.active) { opacity: .8; }   /* readable over the hands backdrop; active step still led by the violet rail/dot */
.step .num { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: hsl(var(--primary)); }
.step h3 { margin: 8px 0 10px; font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 16px; line-height: 1.6; color: hsl(var(--muted-foreground)); }
.step p b { color: hsl(var(--foreground)); font-weight: 700; }

/* dark aurora surface (same family as the final-CTA card) — the animated
   blobs/sheen live in .cta-aura inside it; content is lifted above via z-index
   and tuned for white-on-dark legibility. */
.solution-foot {
  position: relative; overflow: hidden;
  margin-top: 64px; padding: 34px 40px; border-radius: 24px;
  background:
    radial-gradient(ellipse 560px 320px at 84% -14%, hsl(260 100% 69% / .38), transparent 60%),
    radial-gradient(ellipse 480px 320px at 10% 114%, hsl(160 70% 46% / .24), transparent 60%),
    hsl(240 18% 8%);
  border: 1px solid hsl(240 8% 18%);
  display: flex; align-items: center; gap: 34px;
}
@media (max-width: 680px) { .solution-foot { flex-direction: column; text-align: center; gap: 24px; padding: 32px 24px; } }
.solution-foot .foot-faces, .solution-foot .foot-copy { position: relative; z-index: 2; }
.foot-copy { flex: 1; }
.foot-statement {
  margin: 0; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.3; text-wrap: balance;
  color: #fff; text-shadow: 0 1px 16px hsl(240 50% 3% / .6);
}
/* brighter gradient phrase so it stays vivid on the dark canvas */
.solution-foot .text-grad {
  background: linear-gradient(108deg, hsl(266 100% 82%) 0%, hsl(292 100% 78%) 50%, hsl(330 100% 75%) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.foot-sub { margin: 14px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: hsl(240 12% 80%); text-shadow: 0 1px 12px hsl(240 50% 3% / .55); }
.foot-sub b { color: #fff; font-weight: 700; }

/* fast-switching faces of the people who used to field every request */
.foot-faces { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; width: 150px; }
.face-stack { position: relative; width: 104px; height: 104px; }
.face-stack img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%; opacity: 1; box-shadow: 0 12px 28px hsl(260 100% 69% / .3);
  transform-origin: 50% 94%;           /* pivot low, so the top card lifts like a peeled note */
  backface-visibility: hidden;
}
/* base stacking — first face on top (also the no-JS / reduced-motion resting state) */
.face-stack img:nth-of-type(1) { z-index: 5; }
.face-stack img:nth-of-type(2) { z-index: 4; }
.face-stack img:nth-of-type(3) { z-index: 3; }
.face-stack img:nth-of-type(4) { z-index: 2; }
.face-stack img:nth-of-type(5) { z-index: 1; }
/* the top card peels up and flicks away, revealing the one resting beneath */
.face-stack img.peeling {
  transition: transform .8s cubic-bezier(.22, 1, .36, 1), opacity .8s cubic-bezier(.22, 1, .36, 1);
  transform: translate(-40px, -74px) rotate(-13deg) scale(.93);
  opacity: 0;
}
.face-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid hsl(260 100% 78% / .45); pointer-events: none; }
.face-badge {
  position: absolute; right: -2px; bottom: 4px; z-index: 11;
  width: 32px; height: 32px; border-radius: 999px;
  background: hsl(160 70% 46%); color: #fff; border: 3px solid hsl(240 18% 8%);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; box-shadow: 0 6px 16px hsl(160 70% 46% / .4);
}
.face-role { position: relative; width: 100%; height: 18px; }
.face-role span {
  position: absolute; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .02em;
  color: hsl(260 100% 84%); white-space: nowrap;
  opacity: 0; transition: opacity .6s var(--easing-standard);
}
.face-role span.on { opacity: 1; }                /* fallback: first span carries .on in markup */

/* ---------- solution: Creation-of-Adam hands (scroll-driven) ----------
   Two halves of one image. image1part1 enters from the left, image1part2
   from the right; --p (0→1, set by JS from scroll) slides them together so
   they meet, top-aligned, in the centre by the time "Assure le suivi" is
   reached. Each arm is a full half of the viewport, so when they meet the
   outer edges reach the screen edges and the inner edges touch at the centre
   without overlapping. 50% transparent (opacity .5). Behind the content. */
#solution { position: relative; }
/* The hands live inside .sol-hands-scope, which excludes the closing
   .solution-foot card. They are NOT pinned — they scroll vertically with the
   content, rising with the page and passing above the card (never behind it). */
.sol-hands-scope { position: relative; overflow: clip; }   /* safety clip: the hands can never paint past the story area, onto the card below */
.sol-hands-scope > .wrap { position: relative; z-index: 1; }   /* story content above the hands */
/* Tarifs: the crown rises above the scope, so don't clip it (the hands sit
   well within the scope, so nothing spills onto the ROI line below). */
#tarifs .sol-hands-scope { overflow: visible; }

.solution-hands {
  --p: 0;                 /* scroll progress, written by script.js */
  --hand-op: .5;          /* resting opacity (50% transparent) */
  position: absolute; inset: 0;   /* part of the story's flow — scrolls vertically with the content, not pinned */
  z-index: 0; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;  /* sit low, on the steps, meeting near "Assure le suivi" */
}
.solution-hands .hands-stage {
  position: relative;
  width: 100%; height: 41vw;   /* full-bleed; tall enough for the (taller) right arm */
}
/* Tarifs reuse: flatter arm images, centred on the shorter pricing scope. */
.solution-hands.hands-tarifs { align-items: center; }
.solution-hands.hands-tarifs .hands-stage { height: 23vw; }   /* fits the taller (human) arm at 50vw */
.solution-hands .hand {
  position: absolute; top: 0; height: auto;
  opacity: clamp(0, calc(var(--p) * 3), var(--hand-op));
  will-change: transform;
  filter: drop-shadow(0 18px 34px hsl(260 60% 24% / .12));
}
/* Each half spans 50vw: outer edge reaches the screen edge, inner edges meet
   sharply at the centre (right:50% / left:50% — touching, no overlap). */
.solution-hands .hand-left {
  right: 50%; width: 50vw;
  transform: translateX(calc((var(--p) - 1) * 130%));
}
.solution-hands .hand-right {
  left: 50%; width: 50vw;
  transform: translateX(calc((1 - var(--p)) * 130%));
}
/* AI crown (tarifs only): a full-width layer of the SAME composition as the two
   hands. img2part1 + img2part2 reunite into one screen-wide image; the crown is
   the matching screen-wide overlay (width:100vw, left:0, top:0) so it superposes
   exactly on top. It descends from the top — translateY driven by --p — and lands
   perfectly registered at p=1. Same transparency as the hands (--hand-op). */
.hands-tarifs .hand-crown {
  position: absolute; left: 0; top: 0;
  width: 100vw; height: auto;
  opacity: clamp(0, calc(var(--p) * 3), var(--hand-op));
  /* -58%: vertical registration so the full-width crown sits just above the
     handshake (the crown graphic is in the lower-centre of its canvas).
     + descent from the top driven by --p. */
  transform: translateY(calc(-58% + (var(--p) - 1) * 55vh));
  will-change: transform, opacity;
}
/* Ease the scroll-tracked motion so the slide feels smooth, not stepped. */
@media (prefers-reduced-motion: no-preference) {
  .solution-hands .hand,
  .hands-tarifs .hand-crown {
    transition: transform .45s var(--easing-out), opacity .5s var(--easing-standard);
  }
}

/* ---------- Tarifs: readability once the crown lands (.is-lit, toggled by JS at p≈0.9) ----------
   A very soft radial white gradient lightens the crown ONLY behind the heading
   (the image stays visible on the edges). The title goes to full ink, the accent
   to deep violet, the subtitle gains weight. Minimal — keeps "titre posé sur la couronne". */
#tarifs .sec-head { position: relative; }
#tarifs .sec-head > * { position: relative; z-index: 1; }   /* text sits above the glow */
#tarifs .sec-head::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: -10% -8% -4%;
  background: radial-gradient(62% 72% at 50% 44%,
    hsl(0 0% 100% / .86) 0%, hsl(0 0% 100% / .58) 42%, hsl(0 0% 100% / 0) 72%);
  opacity: 0;
  transition: opacity .55s var(--easing-standard);
}
#tarifs.is-lit .sec-head::before { opacity: 1; }

#tarifs .sec-head h2,
#tarifs .sec-head .text-grad,
#tarifs .sec-head .lede { transition: color .55s var(--easing-standard); }
#tarifs.is-lit .sec-head h2 { color: hsl(var(--foreground)); }     /* full ink */
#tarifs.is-lit .sec-head .text-grad {                              /* accent → deep violet */
  background: none;
  -webkit-text-fill-color: hsl(266 72% 40%);
  color: hsl(266 72% 40%);
}
#tarifs.is-lit .sec-head .lede {                                   /* subtitle gains weight */
  font-weight: 600;
  color: hsl(var(--foreground));
}

/* stage internals */
.s-chat { display: flex; flex-direction: column; gap: 12px; }
.bubble { max-width: 84%; padding: 12px 15px; border-radius: 16px; font-size: 14px; line-height: 1.45; }
.bubble.user { align-self: flex-end; background: hsl(244 30% 94%); border-bottom-right-radius: 5px; }
.bubble.agent { align-self: flex-start; background: hsl(var(--primary) / .08); border: 1px solid hsl(var(--primary) / .16); border-bottom-left-radius: 5px; }
.bubble .who { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.bubble.user .who { flex-direction: row-reverse; }   /* avatar hugs the right edge of the right-aligned user bubble */
.bubble .who-name { font-size: 11px; font-family: var(--font-mono); letter-spacing: .04em; text-transform: uppercase; opacity: .6; }
.bubble .who-photo { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: block; box-shadow: 0 1px 3px hsl(244 40% 30% / .22); }
.bubble .who .weloop-logo { width: 24px; flex-shrink: 0; }

.s-resolve { display: flex; flex-direction: column; gap: 12px; }
.resolve-row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px;
  background: #fff; border: 1px solid hsl(var(--border));
}
.resolve-row .check { width: 26px; height: 26px; border-radius: 999px; background: hsl(160 70% 46% / .15); color: hsl(160 64% 34%); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.resolve-row .t { font-size: 14px; flex: 1; }
.resolve-row .t .s { display: block; font-size: 12px; color: hsl(var(--muted-foreground)); margin-top: 2px; }

.s-route { display: flex; flex-direction: column; gap: 14px; }
.route-card {
  padding: 16px; border-radius: 14px; border: 1px solid hsl(var(--border)); background: #fff;
}
.route-card .label { font-size: 12px; font-family: var(--font-mono); color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .06em; }
.route-flow { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.route-node {
  flex: 1; padding: 12px; border-radius: 12px; text-align: center; font-size: 13px; font-weight: 600;
  background: hsl(244 40% 97%); border: 1px solid hsl(var(--border));
}
.route-node.dest { background: hsl(210 100% 61% / .08); border-color: hsl(210 100% 61% / .25); color: hsl(210 80% 42%); }
.route-node .ic { font-size: 18px; margin-bottom: 4px; }
.route-arrow { color: hsl(var(--primary)); flex-shrink: 0; }
.rule-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); }

.s-follow { display: flex; flex-direction: column; gap: 14px; }
.follow-track { display: flex; align-items: center; gap: 0; }
.follow-dot { width: 12px; height: 12px; border-radius: 999px; background: hsl(160 70% 46%); flex-shrink: 0; }
.follow-dot.open { background: hsl(244 20% 80%); }
.follow-line { flex: 1; height: 2px; background: hsl(160 70% 46%); }
.follow-line.open { background: hsl(244 20% 84%); }
.follow-stage-label { display: flex; justify-content: space-between; font-size: 11px; font-family: var(--font-mono); color: hsl(var(--muted-foreground)); margin-top: 8px; }
.csat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.csat-card { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid hsl(var(--border)); }
.csat-card .k { font-size: 11.5px; font-family: var(--font-mono); color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .06em; }
.csat-card .v { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.csat-card .v small { font-size: 14px; color: hsl(var(--muted-foreground)); font-weight: 600; }

/* ---------- NPS / CSAT section ---------- */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 60px; align-items: center; }
@media (max-width: 980px) { .split { grid-template-columns: 1fr; gap: 44px; } }
.loop-list { display: flex; flex-direction: column; gap: 16px; margin-top: 30px; }
.loop-item { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; }
.loop-item .ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; margin-top: 1px; }
.loop-item .ic.a { background: hsl(0 100% 64% / .12); color: hsl(0 78% 56%); }
.loop-item .ic.b { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); }
.loop-item .ic.c { background: hsl(160 70% 46% / .14); color: hsl(160 64% 34%); }
.loop-item p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.loop-item p b { font-weight: 700; }

.survey-card {
  border-radius: 22px; overflow: hidden; border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  box-shadow: 0 1px 0 #fff inset, 0 30px 80px hsl(260 100% 69% / .12), 0 8px 24px hsl(260 100% 69% / .06);
}
.survey-app-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); background: hsl(244 60% 99%); font-size: 12.5px; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); }
.survey-body { padding: 24px; }
.survey-q { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.nps-scale { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; margin: 16px 0 8px; }
.nps-num { aspect-ratio: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; font-family: var(--font-mono); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); background: #fff; }
.nps-num.det { background: hsl(0 100% 64% / .1); border-color: hsl(0 100% 64% / .3); color: hsl(0 76% 52%); }
.nps-num.sel { background: hsl(0 100% 64%); border-color: hsl(0 100% 64%); color: #fff; box-shadow: 0 6px 16px hsl(0 100% 64% / .3); }
.nps-num.pro { background: hsl(160 70% 46% / .12); border-color: hsl(160 70% 46% / .3); color: hsl(160 62% 34%); }
.nps-ends { display: flex; justify-content: space-between; font-size: 11.5px; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); }
.survey-action {
  margin-top: 18px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(180deg, hsl(260 100% 69% / .07), hsl(260 100% 69% / .02));
  border: 1px solid hsl(var(--primary) / .2);
  display: flex; align-items: center; gap: 12px;
}
.survey-action .av { width: 30px; height: 30px; border-radius: 9px; background: var(--gradient-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 5px 14px hsl(260 100% 69% / .3); }
.survey-action .t { font-size: 13.5px; line-height: 1.4; }
.survey-action .t b { font-weight: 700; }

.nps-quote {
  margin-top: 56px; padding: 34px 40px; border-radius: 24px;
  background: hsl(var(--foreground)); color: #fff; text-align: center;
  font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.32;
  text-wrap: balance; position: relative; overflow: hidden;
}
.nps-quote::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 600px 300px at 80% -10%, hsl(260 100% 69% / .4), transparent 60%); pointer-events: none; }
.nps-quote span { position: relative; }
.nps-quote em { font-style: normal; color: hsl(160 70% 64%); }

/* ---------- benefits ("ce que ça change") ---------- */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 8px; align-items: stretch; }
@media (max-width: 900px) { .benefits { grid-template-columns: 1fr; max-width: 440px; margin: 8px auto 0; } }
.benefit {
  display: flex; flex-direction: column; position: relative; overflow: hidden;
  padding: 30px 28px; border-radius: 24px; background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-card);
  transition: box-shadow .25s, transform .25s, border-color .25s;
}
.benefit::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-primary); opacity: 0; transition: opacity .25s; }
.benefit:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.benefit:hover::before { opacity: .9; }
.benefit.featured {
  border-color: hsl(var(--primary) / .42);
  background: linear-gradient(180deg, hsl(260 100% 69% / .05), hsl(var(--card)));
  box-shadow: 0 1px 0 #fff inset, 0 24px 56px hsl(260 100% 69% / .16), 0 8px 24px hsl(260 100% 69% / .08);
}
.benefit.featured::before { opacity: .9; }
.b-top { display: flex; align-items: center; gap: 12px; }
.b-ic {
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--primary) / .1);
  box-shadow: 0 0 0 2px hsl(var(--card)), 0 0 0 3.5px hsl(var(--primary) / .28);
}
.b-ic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.benefit.featured .b-ic { box-shadow: 0 0 0 2px hsl(var(--card)), 0 0 0 3.5px hsl(260 100% 69% / .6); }
.b-who { font-size: 12px; font-weight: 700; font-family: var(--font-mono); letter-spacing: .03em; text-transform: uppercase; color: hsl(var(--muted-foreground)); line-height: 1.3; }
.b-title { margin: 22px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.015em; line-height: 1.2; }
.b-copy { margin: 11px 0 0; font-size: 15px; line-height: 1.6; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.b-copy b { color: hsl(var(--foreground)); font-weight: 700; }
.b-metric { margin-top: auto; padding-top: 22px; border-top: 1px solid hsl(var(--border)); }
.benefit.featured .b-metric { border-top-color: hsl(var(--primary) / .2); }
.b-num {
  font-size: clamp(38px, 4.6vw, 50px); font-weight: 800; letter-spacing: -.03em; line-height: 1;
  background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.b-mlabel { margin-top: 8px; font-size: 13px; line-height: 1.45; color: hsl(var(--muted-foreground)); }
.b-mlabel b { color: hsl(var(--foreground)); font-weight: 700; }

/* ---------- "Ce que ça change" + users carousel: one 13" screen ----------
   Same idea as the hero — on laptop-height screens (≈13"), the benefits
   section and the "+100 000 utilisateurs" carousel just below it are
   compacted so the two read together as a single screen, no scroll needed.
   Scoped to wide+short viewports so larger desktop monitors are untouched. */
@media (min-width: 1000px) {
  .changes-section { padding: clamp(40px, 6vh, 112px) 0 clamp(30px, 4.5vh, 84px); }
  .changes-section .sec-head { margin-bottom: 42px !important; max-width: 880px; }
  .changes-section .sec-head .h-section { margin-top: 18px !important; font-size: clamp(32px, 3.2vw, 46px); }
  .changes-section .sec-head .lede { margin-top: 18px !important; font-size: 18px; }

  .changes-section .benefit { padding: 36px 32px; }
  .changes-section .b-ic { width: 54px; height: 54px; }
  .changes-section .b-title { margin-top: 22px; font-size: 23px; }
  .changes-section .b-metric { padding-top: 26px; }
  .changes-section .b-num { font-size: clamp(46px, 4.6vw, 58px); }
  .changes-section .b-mlabel { margin-top: 10px; font-size: 14px; }

  .logo-strip.users-section { padding: 32px 0 36px; }
  .users-section .logo-cloud-label { margin-bottom: 18px; }
}

/* ---------- Résultats / Équipe / Tarifs / Démo CTA: one 13" screen each ----------
   Same approach as the benefits block — on laptop-height (≈13") screens each
   of these full sections is compacted to fit a single viewport on its own.
   Scoped by id so the sticky-scroll #solution / #mesure sections are untouched. */
@media (min-width: 1000px) {
  #resultats, #equipe, #tarifs { padding: clamp(40px, 6vh, 112px) 0; }

  /* shared section-header tightening (overrides inline margins) */
  #resultats .sec-head .h-section,
  #equipe   .sec-head .h-section,
  #tarifs   .sec-head .h-section { margin-top: 16px !important; font-size: clamp(32px, 3.1vw, 46px); }
  #resultats .sec-head .lede,
  #equipe   .sec-head .lede,
  #tarifs   .sec-head .lede { margin-top: 16px !important; font-size: 18px; }
  #tarifs .sec-head { margin-bottom: 32px !important; }

  /* Résultats — live dashboard + redirections carousel (one screen) */
  #resultats { padding: clamp(34px, 4.8vh, 92px) 0; }
  #resultats .dash { margin-top: 22px; }
  #resultats .metric { padding: 17px 24px; }
  #resultats .metric .v { font-size: clamp(30px, 2.8vw, 40px); margin-top: 8px; }
  #resultats .metric .spark { height: 20px; margin-top: 10px; }
  #resultats .metric .prio-list { margin-top: 12px; gap: 8px; }
  #resultats .redirects { margin-top: 22px; }
  #resultats .redirects-label { margin-bottom: 14px; }
  /* scaled down from the hero's 100px just enough to keep the whole
     section inside one short (≈13") viewport */
  #resultats .redirect-chip img { height: 62px; }

  /* Équipe — team + investors */
  #equipe .team-grid { margin-top: 44px; }
  #equipe .team-card { padding: 30px 24px; }
  #equipe .team-avatar { width: 120px; height: 120px; margin-bottom: 20px; }
  #equipe .backers { margin-top: 42px; padding: 30px 40px; }
  #equipe .backers-logo { padding: 18px 26px; }
  #equipe .backers-logo img { height: 56px; }

  /* Tarifs — pricing */
  #tarifs { padding: clamp(34px, 4.8vh, 92px) 0; }
  #tarifs .price-card { padding: 22px 28px; }
  #tarifs .price-for { min-height: 0; margin-top: 6px; }
  #tarifs .price-amount { margin-top: 14px; }
  #tarifs .price-value { margin: 14px 0 16px; padding: 12px 15px; }
  #tarifs .price-support { padding: 10px 13px; margin-bottom: 12px; }
  #tarifs .price-foot { margin-top: 20px; }

  /* Démo CTA — two-column (copy left, booking right). The widget stays tall
     enough to avoid any internal scroll; only padding + copy are tightened. */
  #demo { padding: clamp(12px, 2vh, 48px) 0; }
  #demo .final-cta { padding: clamp(22px, 3vh, 48px) clamp(28px, 3vw, 56px); }
  #demo .cta-split { gap: 44px; }
  #demo .cta-copy h2 { font-size: clamp(30px, 3.3vw, 46px); }
  #demo .cta-copy p { font-size: 16px; margin-top: 16px; }
  #demo .cta-points { margin-top: 24px; gap: 12px; }
  /* the booking iframe is the section's tallest fixed element — scale it to the
     viewport so the whole CTA always fits one screen (never an internal scroll) */
  #demo .calendly-inline-widget { height: clamp(560px, calc(100vh - 150px), 720px) !important; }
}

/* ---------- 13" rhythm: compact the UPPER sections too ----------
   The blocks above were the only ones brought into the 13" rhythm, which
   left the statement band, #solution and #mesure at the full 132px desktop
   spacing — so the page read loose at the top and tight at the bottom.
   Pull these three into the same ~52px outer rhythm + tighter inner gaps so
   the vertical spacing is homogeneous from hero to footer. */
@media (min-width: 1000px) {
  /* L'essentiel — statement + sovereignty card (the dark band WITHOUT an id;
     #resultats is the other .dark-band and is compacted separately above). */
  section.dark-band:not([id]) { padding: clamp(44px, 6.5vh, 118px) 0; }
  section.dark-band:not([id]) .statement .eyebrow { margin-bottom: 20px !important; }
  section.dark-band:not([id]) .sov-pro { margin-top: 40px; }
  section.dark-band:not([id]) .sov-pro-top { padding: 32px 40px 28px; }
  section.dark-band:not([id]) .sov-stack { padding: 22px 40px; }
  section.dark-band:not([id]) .sov-flex-card { padding: 28px 34px; }

  /* La solution — sticky scroll story */
  #solution { padding: clamp(44px, 6.5vh, 118px) 0; }
  #solution .sec-head { margin-bottom: 44px !important; }
  #solution .solution-foot { margin-top: 44px; padding: 30px 38px; }

  /* Mesure — NPS / CSAT split */
  #mesure { padding: clamp(46px, 7vh, 120px) 0; }
  #mesure .split { gap: 52px; }
  #mesure .nps-quote { margin-top: 44px; padding: 34px 44px; }

  /* Hero — keep the cinematic console + clients carousel within one screen,
     scaling the outer rhythm to the viewport height like every other section. */
  .hero { padding: clamp(60px, 10vh, 100px) 0 clamp(18px, 2.5vh, 36px); }
  .hero-clients { margin-top: clamp(20px, 3.5vh, 52px); }
}

/* ============================================================
   ONE SECTION PER SCREEN (desktop ≥ 1000px)
   ------------------------------------------------------------
   The clamps above already shrink each section's content to fit
   one viewport. This block guarantees the *converse*: on a TALL
   screen a section can no longer be shorter than the viewport, so
   the next section never peeks in — you always see exactly one
   full section at a time, with its content vertically centred so
   it breathes (the "more space between sections" the page wanted).

   Gentle (`proximity`) scroll-snapping settles the scroll onto a
   section boundary without trapping the user. `safe center` falls
   back to top-alignment if content ever exceeds one screen, so
   nothing is clipped on very short laptops.

   Deliberately EXCLUDED:
     • #solution — the sticky scroll-story spans several viewports.
     • .logo-strip — thin marquee connectors between full sections.
   ============================================================ */
@media (min-width: 1000px) {
  html {
    scroll-snap-type: y proximity;
    scroll-padding-top: 72px;        /* clear the sticky nav on snap + anchor jumps */
  }

  .hero,
  section.dark-band:not([id]),
  #mesure,
  .changes-section,
  #resultats,
  #equipe,
  #tarifs,
  #faq,
  #demo {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: safe center;    /* centre content; never clip if it overflows */
    scroll-snap-align: start;
  }
}

/* ---------- distinguish ---------- */
.dist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 12px; }
@media (max-width: 760px) { .dist-grid { grid-template-columns: 1fr; } }
.dist {
  display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start;
  padding: 28px; border-radius: 20px; background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-card);
  transition: box-shadow .25s, transform .25s;
}
.dist:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.dist .ic { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.dist h3 { margin: 0 0 8px; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; }
.dist p { margin: 0; font-size: 14.5px; line-height: 1.58; color: hsl(var(--muted-foreground)); text-wrap: pretty; }
.dist p b { color: hsl(var(--foreground)); }

/* ---------- metrics dashboard (dark) ---------- */
.dash {
  margin-top: 56px; border-radius: 26px; overflow: hidden;
  border: 1px solid hsl(240 8% 18%); background: hsl(240 18% 10% / .7); backdrop-filter: blur(8px);
  box-shadow: 0 40px 100px hsl(260 100% 69% / .12);
}
.dash-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid hsl(240 8% 16%); }
.dash-bar .title { font-weight: 700; font-size: 14.5px; color: #fff; }
.dash-bar .live { margin-left: auto; }
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .dash-grid { grid-template-columns: 1fr; } }
.metric { padding: 30px 28px; border-right: 1px solid hsl(240 8% 16%); border-bottom: 1px solid hsl(240 8% 16%); position: relative; }
.metric .k { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-family: var(--font-mono); color: hsl(240 8% 60%); letter-spacing: .03em; }
.metric .k .ic { color: hsl(260 100% 76%); font-size: 14px; }
.metric .v { font-size: clamp(38px, 4vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 16px;
  background: linear-gradient(180deg, #fff, hsl(240 10% 72%)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.metric .v .u { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.metric .d { font-size: 13.5px; color: hsl(240 8% 58%); margin-top: 12px; line-height: 1.5; }
.metric .spark { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 14px; }
.metric .spark span { width: 5px; border-radius: 2px; background: linear-gradient(180deg, hsl(260 100% 76%), hsl(260 100% 64%)); }
.metric .prio-list { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.prio { display: flex; align-items: center; gap: 9px; font-size: 13px; color: hsl(240 8% 78%); }
.prio .d { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }

/* ---------- vision ---------- */
.vision { text-align: center; max-width: 940px; }
.vision .big {
  font-size: clamp(28px, 3.8vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.12;
  margin: 22px 0 0; text-wrap: balance;
}
.vision .big .muted-ink { color: hsl(240 12% 56%); }
.vision-quote {
  margin-top: 44px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.3; text-wrap: balance;
}

/* ---------- final CTA (dark) ---------- */
.final-cta {
  position: relative; border-radius: 32px; overflow: hidden; padding: 88px 56px; text-align: center;
  background:
    radial-gradient(ellipse 720px 420px at 78% -8%, hsl(260 100% 69% / .42), transparent 60%),
    radial-gradient(ellipse 640px 420px at 18% 108%, hsl(160 70% 46% / .28), transparent 60%),
    hsl(240 18% 8%);
  color: #fff; border: 1px solid hsl(240 8% 18%);
}
.final-cta::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(hsl(0 0% 100% / .045) 1px, transparent 1px), linear-gradient(90deg, hsl(0 0% 100% / .045) 1px, transparent 1px);
  background-size: 58px 58px; mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 30%, transparent 88%);
}
.final-cta > * { position: relative; }
.final-cta h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; margin: 22px 0 0; text-wrap: balance; }
.final-cta p { margin: 20px auto 0; max-width: 600px; font-size: 18px; line-height: 1.55; color: hsl(240 8% 72%); }
.final-cta .cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.final-cta .cta-note { margin-top: 22px; font-size: 13px; color: hsl(240 8% 58%); font-family: var(--font-mono); }

/* final CTA — two columns: pitch + trust on the left, live booking on the right.
   Keeps the Calendly widget at full height (no internal scroll) while the section
   still fits one screen, because the copy no longer stacks above the iframe. */
.cta-split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 48px; align-items: center; text-align: left; }
.cta-copy .eyebrow { justify-content: flex-start; margin-bottom: 18px; }
.cta-copy h2 { margin-top: 0; }
.cta-copy p { margin: 18px 0 0; max-width: 480px; }
.cta-points { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cta-points li { display: flex; align-items: center; gap: 11px; font-size: 15.5px; font-weight: 600; color: hsl(0 0% 100% / .86); }
.cta-points .ck {
  width: 23px; height: 23px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: hsl(160 70% 46% / .18); color: hsl(160 70% 64%);
}
.cta-social { margin-top: clamp(22px, 3vh, 34px); }
.cta-social-label {
  margin: 0 0 14px; max-width: 480px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: hsl(0 0% 100% / .52);
}
/* All 5 logos on a single row: 5 equal columns, each logo shrinks to fit its cell
   so the row never wraps or overflows the column, at any width. */
.cta-social-logos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(14px, 1.8vw, 30px);
}
.cta-social-logos img {
  width: auto; height: auto;
  max-width: 100%;
  max-height: clamp(34px, 3vw, 50px);
  opacity: .8;
  filter: brightness(0) invert(1);
}
.cta-booking .calendly-inline-widget {
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px hsl(255 70% 3% / .5), 0 0 0 1px hsl(0 0% 100% / .08);
}
@media (max-width: 900px) {
  .cta-split { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .cta-copy .eyebrow { justify-content: center; }
  .cta-copy p { margin-left: auto; margin-right: auto; }
  .cta-points { align-items: center; }
  .cta-social-label { margin-left: auto; margin-right: auto; }
  .cta-social-logos { justify-items: center; column-gap: 10px; }
  .cta-social-logos img { max-height: 26px; }
}
/* Narrow phones: the card's wide padding + the Calendly widget's inline
   min-width:320px together exceed the viewport, clipping the headline and copy.
   Shrink the padding, let the widget go full-width, and scale the headline so
   "Reprenez le contrôle du signal." always fits on screen. */
@media (max-width: 600px) {
  .final-cta { padding: clamp(28px, 7vw, 48px) clamp(18px, 5vw, 30px); }
  .cta-copy h2 { font-size: clamp(26px, 7.4vw, 36px); letter-spacing: -0.025em; }
  .cta-copy p { font-size: 16px; }
  .cta-points li { font-size: 15px; }
  .cta-booking .calendly-inline-widget { min-width: 0 !important; width: 100%; }
}

/* ---------- final CTA: bold animated aurora (WOW) ----------
   Drifting colour blobs + a rotating sheen + a sweeping streak behind the
   card — same family as the hero aura, but brighter, bolder and in constant
   motion. `isolation` keeps the screen-blend contained to the dark card so
   the page behind it is untouched; content sits above via z-index. */
.final-cta, .solution-foot { isolation: isolate; }
.cta-aura {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; border-radius: inherit;
}
.cta-blob {
  position: absolute; border-radius: 50%; filter: blur(68px);
  mix-blend-mode: screen; opacity: .95; will-change: transform;
}
.cta-blob.b1 { width: 640px; height: 640px; top: -200px; right: -130px;
  background: radial-gradient(circle, hsl(262 100% 66% / 1), transparent 66%); }
.cta-blob.b2 { width: 520px; height: 520px; bottom: -190px; left: -120px;
  background: radial-gradient(circle, hsl(160 90% 52% / .9), transparent 66%); }
.cta-blob.b3 { width: 500px; height: 500px; top: 12%; left: 38%;
  background: radial-gradient(circle, hsl(304 100% 64% / .98), transparent 66%); }
.cta-blob.b4 { width: 440px; height: 440px; bottom: -90px; right: 24%;
  background: radial-gradient(circle, hsl(216 100% 62% / .82), transparent 66%); }

/* rotating conic sheen — the "shiny" sweep across the whole card.
   Blurred + centre-faded so it reads as a soft light-sweep, never a hard pivot. */
.cta-shine {
  position: absolute; inset: -45%; will-change: transform;
  mix-blend-mode: screen; opacity: 1; filter: blur(26px);
  background: conic-gradient(from 0deg,
    transparent 0deg,
    hsl(266 100% 82% / .32) 52deg,
    transparent 120deg,
    hsl(160 90% 64% / .22) 195deg,
    transparent 250deg,
    hsl(304 100% 76% / .3) 312deg,
    transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 16%, #000 52%);
  mask-image: radial-gradient(circle at 50% 50%, transparent 0%, transparent 16%, #000 52%);
}

/* specular streak that periodically sweeps diagonally across the card */
.cta-streak {
  position: absolute; top: -60%; left: -75%;
  width: 60%; height: 220%; transform: rotate(22deg);
  mix-blend-mode: screen; will-change: transform, opacity; opacity: 0;
  background: linear-gradient(90deg,
    transparent, hsl(0 0% 100% / .14) 42%, hsl(266 100% 86% / .28) 50%, hsl(0 0% 100% / .14) 58%, transparent);
  filter: blur(6px);
}

/* keep the grid overlay + content above the aura */
.final-cta::after { z-index: 1; }
.cta-split { position: relative; z-index: 2; }

/* solution-foot is a wide, short card: pull the bright blob cores out toward
   the corners and ease the intensity so the central text band stays readable. */
.solution-foot .cta-blob { filter: blur(60px); opacity: .82; }
.solution-foot .cta-blob.b1 { width: 380px; height: 380px; top: -180px; right: -90px; }
.solution-foot .cta-blob.b2 { width: 340px; height: 340px; bottom: -170px; left: -80px; }
.solution-foot .cta-blob.b3 { width: 320px; height: 320px; top: -150px; left: 44%; }
.solution-foot .cta-blob.b4 { width: 320px; height: 320px; bottom: -160px; right: 18%; }

@media (prefers-reduced-motion: no-preference) {
  .cta-blob.b1 { animation: ctaDrift1 16s ease-in-out infinite; }
  .cta-blob.b2 { animation: ctaDrift2 21s ease-in-out infinite; }
  .cta-blob.b3 { animation: ctaDrift3 18s ease-in-out infinite; }
  .cta-blob.b4 { animation: ctaDrift2 24s ease-in-out infinite reverse; }
  .cta-shine  { animation: ctaSpin 22s linear infinite; }
  .cta-streak { animation: ctaStreak 7s ease-in-out 1.5s infinite; }
  .final-cta, .solution-foot { animation: ctaGlow 6.5s ease-in-out infinite; }
}
@keyframes ctaDrift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-64px, 54px) scale(1.14); } }
@keyframes ctaDrift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(60px, -42px) scale(1.1); } }
@keyframes ctaDrift3 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-44px, -54px) scale(1.2); } }
@keyframes ctaSpin { to { transform: rotate(360deg); } }
@keyframes ctaStreak {
  0%   { transform: translateX(0) rotate(22deg); opacity: 0; }
  8%   { opacity: 1; }
  26%  { opacity: 1; }
  40%  { transform: translateX(360%) rotate(22deg); opacity: 0; }
  100% { transform: translateX(360%) rotate(22deg); opacity: 0; }
}
@keyframes ctaGlow {
  0%, 100% { box-shadow: 0 26px 70px hsl(260 100% 50% / .20); }
  50%      { box-shadow: 0 34px 110px hsl(288 100% 56% / .40); }
}

/* ---------- footer ---------- */
.footer { padding: 64px 0 48px; border-top: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); font-size: 14px; }
.footer-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .brand { font-size: 19px; }
.footer-tag { margin-top: 14px; max-width: 320px; font-size: 14px; line-height: 1.55; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer h5 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font-mono); color: hsl(var(--foreground)); margin: 0 0 16px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.footer a:hover { color: hsl(var(--foreground)); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid hsl(var(--border)); flex-wrap: wrap; font-size: 13px; }
.footer-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-legal a { color: hsl(var(--muted-foreground)); }
.footer-legal a:hover { color: hsl(var(--foreground)); }

/* Social icons (LinkedIn, …) */
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  transition: color 150ms, border-color 150ms, background 150ms, transform 150ms, box-shadow 150ms;
}
.footer-social a:hover {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / .5);
  background: hsl(var(--accent));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.footer-social svg { width: 18px; height: 18px; display: block; }

/* ============================================================
   LEGAL PAGES (politique-confidentialite, cgu)
   Long-form prose — scrolls normally; the one-screen rule
   (CLAUDE.md) applies only to the marketing sections.
   ============================================================ */
.legal { padding: clamp(40px, 7vh, 88px) 0 clamp(56px, 10vh, 120px); }
.legal-head { max-width: 760px; margin: 0 auto clamp(32px, 5vh, 56px); }
.legal-eyebrow {
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  color: hsl(var(--primary)); margin: 0 0 14px;
}
.legal-title {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: var(--fw-extrabold);
  letter-spacing: -0.02em; line-height: 1.08; margin: 0;
}
.legal-prose {
  max-width: 760px; margin: 0 auto;
  font-size: 16px; line-height: 1.7;
  color: hsl(var(--foreground) / .88);
}
.legal-prose > :first-child { margin-top: 0; }
.legal-prose h3, .legal-prose h4, .legal-prose h5 {
  font-weight: var(--fw-extrabold); letter-spacing: -0.01em;
  line-height: 1.25; color: hsl(var(--foreground));
}
.legal-prose h3 { font-size: 1.5rem; margin: 2.2em 0 .6em; }
.legal-prose h4 { font-size: 1.2rem; margin: 2em 0 .55em; padding-top: 1.4em; border-top: 1px solid hsl(var(--border)); }
.legal-prose h3 + h4, .legal-prose h4:first-child { border-top: 0; padding-top: 0; }
.legal-prose h5 { font-size: 1.02rem; margin: 1.7em 0 .45em; color: hsl(var(--muted-foreground)); }
.legal-prose p { margin: 0 0 1.1em; }
.legal-prose a { color: hsl(var(--primary)); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { color: hsl(260 100% 60%); }
.legal-prose ul { margin: 0 0 1.2em; padding-left: 1.3em; display: flex; flex-direction: column; gap: .5em; }
.legal-prose li { line-height: 1.6; }
.legal-prose li::marker { color: hsl(var(--primary) / .6); }
.legal-prose strong { font-weight: var(--fw-bold); color: hsl(var(--foreground)); }
@media (max-width: 640px) { .legal-prose { font-size: 15px; } }

/* ---------- keyframes ---------- */
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(.82); } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- motion (gated) ----------
   Content is fully visible by default — works with no JS, in print,
   and under reduced-motion. Entrance/scroll motion only activates when
   JS adds .reveal-on AND the user accepts motion. This keeps the
   resting state visible even when the animation clock is paused
   (background tabs, print snapshots). */
@media (prefers-reduced-motion: no-preference) {
  .reveal-on .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--easing-out), transform .7s var(--easing-out); }
  .reveal-on .reveal.in { opacity: 1; transform: none; }
  .reveal-on .reveal.d1 { transition-delay: .08s; }
  .reveal-on .reveal.d2 { transition-delay: .16s; }
  .reveal-on .reveal.d3 { transition-delay: .24s; }

  .reveal-on .fade-up { animation: fade-up .8s var(--easing-out) both; }
  .reveal-on .fade-up.delay1 { animation-delay: .1s; }
  .reveal-on .fade-up.delay2 { animation-delay: .2s; }
  .reveal-on .fade-up.delay3 { animation-delay: .3s; }

  .reveal-on .feed-row { opacity: 0; transform: translateY(8px); }
  .reveal-on .feed-row.show { animation: pop .42s var(--easing-out) forwards; }
}

/* ---------- customer logos (light strip below the hero) ---------- */
.logo-strip {
  position: relative; padding: 20px 0 44px;
  background:
    radial-gradient(120% 140% at 50% -40%, hsl(260 100% 69% / .06), transparent 60%),
    hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
}
.logo-rows { display: flex; flex-direction: column; gap: 48px; }
.logo-cloud { margin: 0; }
.logo-cloud-label {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center; font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: hsl(var(--muted-foreground)); margin-bottom: 14px;
}
.logo-cloud-label .dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(160 70% 46%); box-shadow: 0 0 0 4px hsl(160 70% 46% / .16); }
.logo-cloud-label .grad { font-size: 14px; font-weight: 800; letter-spacing: .1em; }

/* shared marquee engine — two identical groups, translate -50% loops seamlessly */
.marquee {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee-reverse .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-group { display: flex; align-items: center; flex: 0 0 auto; gap: 40px; padding-right: 40px; }
.marquee img {
  width: auto; flex-shrink: 0;
  transition: opacity .25s var(--easing-standard), transform .25s var(--easing-out);
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* row 1 · platforms (compact) */
.cloud-platforms .marquee-track { animation-duration: 40s; }
.cloud-platforms .marquee-group { gap: 44px; padding-right: 44px; }
.cloud-platforms .marquee img { height: 40px; opacity: .88; }
.cloud-platforms .marquee img:hover { opacity: 1; transform: translateY(-2px); }

/* row 2 · clients (2× bigger, tightly packed) */
.cloud-clients .marquee-track { animation-duration: 50s; }
.cloud-clients .marquee-group { gap: 40px; padding-right: 40px; }
/* white logos on the dark hero block */
.cloud-clients .marquee img { height: 100px; opacity: .8; filter: brightness(0) invert(1); }
.cloud-clients .marquee img:hover { opacity: 1; transform: scale(1.05); }

/* clients carousel — only the logos, floating on the hero's dark canvas */
.hero-clients {
  position: relative; z-index: 2;
  margin-top: 44px;
}

/* seamless hand-off: dissolve the seam between the hero and the dark section below it */
.hero + .section { position: relative; isolation: isolate; }
.hero + .section > * { position: relative; z-index: 1; }
.hero + .section::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 220px; z-index: 0;
  background: linear-gradient(180deg, hsl(240 18% 8%) 0%, hsl(240 18% 8% / 0) 100%);
  pointer-events: none;
}

/* row 3 · users (face + EU flag pills) */
.cloud-users .marquee-track { animation-duration: 52s; }
.cloud-users .marquee-group { gap: 18px; padding-right: 18px; }
.user-pill {
  display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto;
  padding: 6px 18px 6px 6px; border-radius: 999px;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  box-shadow: 0 6px 18px hsl(240 38% 22% / .06);
}
.user-pill img { height: 46px; width: 46px; border-radius: 999px; object-fit: cover; display: block; }
.user-pill .uname { font-size: 14.5px; font-weight: 600; color: hsl(var(--foreground)); white-space: nowrap; }
.user-pill .flag { font-size: 20px; line-height: 1; }

/* ---------- redirections carousel (dark · #resultats) ----------
   The tools Weloop routes decisions into. Same treatment as the hero
   clients carousel: white monochrome logos floating on the dark band,
   no card behind them. */
.redirects { margin-top: 34px; }
.redirects-label {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  text-align: center; font-family: var(--font-mono);
  font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: hsl(240 8% 62%); margin-bottom: 18px;
}
.redirects-label .dot { width: 6px; height: 6px; border-radius: 999px; background: hsl(160 70% 50%); box-shadow: 0 0 0 4px hsl(160 70% 46% / .16); }
.redirects .marquee-track { animation-duration: 50s; }
.redirects .marquee-group { gap: 40px; padding-right: 40px; }
.redirect-chip { display: inline-flex; align-items: center; flex: 0 0 auto; }
.redirect-chip img { height: 100px; width: auto; opacity: .8; filter: brightness(0) invert(1); }
.redirect-chip:hover img { opacity: 1; transform: scale(1.05); }
@media (max-width: 720px) {
  .redirect-chip img { height: 66px; }
  .redirects .marquee-group { gap: 30px; padding-right: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; }
  .marquee-group { width: 100%; flex-wrap: wrap; justify-content: center; padding-right: 0; }
  .marquee-group[aria-hidden="true"] { display: none; }
}
@media (max-width: 720px) {
  .logo-strip { padding: 44px 0 50px; }
  .logo-rows { gap: 36px; }
  .cloud-clients .marquee img { height: 66px; }
  .cloud-clients .marquee-group { gap: 30px; padding-right: 30px; }
  .cloud-platforms .marquee img { height: 32px; }
  .cloud-platforms .marquee-group { gap: 34px; padding-right: 34px; }
  .user-pill img { height: 32px; width: 32px; }
  .user-pill .uname { font-size: 12.5px; }
}

/* ---------- team / direction ---------- */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
  padding: 32px 24px; border-radius: 22px; text-align: center;
  background: hsl(var(--card)); border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow-card); transition: box-shadow .25s, transform .25s;
}
.team-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-3px); }
.team-avatar {
  width: 132px; height: 132px; border-radius: 32px; margin: 0 auto 22px;
  display: block; object-fit: cover; object-position: center top;
}
.team-avatar.grad-violet { box-shadow: 0 14px 34px hsl(260 100% 69% / .36); }
.team-avatar.grad-mint { box-shadow: 0 14px 34px hsl(160 70% 46% / .36); }
@media (max-width: 460px) { .team-avatar { width: 116px; height: 116px; } }
.team-card h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.team-role { margin-top: 7px; font-size: 13px; color: hsl(var(--muted-foreground)); font-family: var(--font-mono); }

/* ---------- backers / fundraising band ---------- */
.backers {
  margin-top: 56px; display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center;
  padding: 34px 42px; border-radius: 24px;
  background: linear-gradient(135deg, hsl(260 100% 69% / .07), hsl(160 70% 46% / .05));
  border: 1px solid hsl(var(--primary) / .16);
}
.backers-text .eyebrow { margin-bottom: 12px; }
.backers-text p {
  margin: 0; font-size: clamp(19px, 2.2vw, 26px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.28; text-wrap: balance;
}
.backers-logo {
  flex-shrink: 0; background: #fff; border-radius: 18px; padding: 20px 28px;
  border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-card);
}
.backers-logo img { height: 60px; width: auto; }
@media (max-width: 720px) {
  .backers { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 26px; padding: 30px 26px; }
  .backers-text .eyebrow { justify-content: center; }
  .backers-logo img { height: 50px; }
}

/* ---------- sovereignty block (cocorico) ---------- */
.sov-pro {
  margin: 56px auto 0; max-width: 1000px;
  border-radius: 28px; overflow: hidden;
  padding: 6px 0 0;
  background:
    radial-gradient(ellipse 640px 320px at 6% -10%, hsl(214 80% 50% / .18), transparent 62%),
    radial-gradient(ellipse 640px 320px at 96% 110%, hsl(356 80% 56% / .16), transparent 62%),
    linear-gradient(180deg, hsl(240 18% 13% / .9), hsl(240 18% 10% / .9));
  border: 1px solid hsl(260 100% 69% / .26);
  box-shadow: 0 40px 100px hsl(260 100% 69% / .14);
}
/* tricolore top accent bar */
.sov-pro::before {
  content: ""; display: block; height: 6px;
  background: linear-gradient(90deg, #2438a8 0 33.33%, #fff 33.33% 66.66%, #e1313a 66.66% 100%);
}
.sov-pro-top { display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start; padding: 36px 40px 28px; }
.tricolore {
  display: flex; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 10px 28px hsl(240 30% 0% / .45), 0 0 0 1px hsl(0 0% 100% / .1) inset;
}
.tricolore i { flex: 1; }
.tricolore i:nth-child(1) { background: #2438a8; }
.tricolore i:nth-child(2) { background: #fff; }
.tricolore i:nth-child(3) { background: #e1313a; }
.sov-pro-headings .eyebrow { margin-bottom: 12px; }
.sov-pro-title { margin: 0; font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: #fff; }
.sov-pro-lede { margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.55; color: hsl(240 8% 72%); max-width: 640px; }
.sov-pro-lede b { color: #fff; font-weight: 700; }
@media (max-width: 620px) { .sov-pro-top { grid-template-columns: 1fr; gap: 18px; padding: 30px 24px 24px; } }

/* partner logo stack */
.sov-stack {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px 22px;
  padding: 22px 40px; margin: 0 0 4px;
  border-top: 1px solid hsl(0 0% 100% / .08); border-bottom: 1px solid hsl(0 0% 100% / .08);
  background: hsl(240 18% 7% / .4);
}
.sov-stack-label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: hsl(240 8% 58%); }
.sov-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.sov-logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border-radius: 12px; padding: 12px 20px;
  box-shadow: 0 8px 22px hsl(240 30% 0% / .28);
}
.sov-logo img { height: 26px; width: auto; display: block; }
.sov-stack-more { font-size: 13.5px; color: hsl(240 8% 70%); }
.sov-stack-more b { color: #fff; font-weight: 700; }
.sov-stack-more span { color: hsl(160 70% 60%); font-weight: 800; margin-right: 2px; }
@media (max-width: 620px) { .sov-stack { padding: 20px 24px; } }

/* flexibility callouts: on-premise + other models */
.sov-flex { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 860px) { .sov-flex { grid-template-columns: 1fr; } }
.sov-flex-card { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: center; padding: 26px 30px 30px; }
.sov-flex-card + .sov-flex-card { border-left: 1px solid hsl(0 0% 100% / .08); }
@media (max-width: 860px) {
  .sov-flex-card { padding: 24px; grid-template-columns: 44px 1fr; gap: 16px; }
  .sov-flex-card + .sov-flex-card { border-left: 0; border-top: 1px solid hsl(0 0% 100% / .08); }
}
.sov-flex-card .ic { width: 40px; height: 40px; border-radius: 12px; }
@media (max-width: 860px) { .sov-flex-card .ic { width: 44px; height: 44px; border-radius: 13px; } }

/* ---------- pricing / tarifs ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 920px) { .price-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.price-card {
  display: flex; flex-direction: column; position: relative;
  padding: 34px 30px; border-radius: 24px; background: hsl(var(--card));
  border: 1px solid hsl(var(--border)); box-shadow: var(--shadow-card);
  transition: box-shadow .25s, transform .25s;
}
.price-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); }
.price-card.featured {
  border-color: hsl(var(--primary) / .42);
  background-color: hsl(var(--card));
  background-image: linear-gradient(180deg, hsl(260 100% 69% / .05), hsl(var(--card)));
  box-shadow: 0 1px 0 #fff inset, 0 30px 70px hsl(260 100% 69% / .18), 0 8px 24px hsl(260 100% 69% / .08);
}
@media (min-width: 921px) { .price-card.featured { transform: scale(1.035); } .price-card.featured:hover { transform: scale(1.035) translateY(-4px); } }
.price-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gradient-primary); color: #fff;
  font-size: 11.5px; font-weight: 700; font-family: var(--font-mono);
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  padding: 6px 15px; border-radius: 999px; box-shadow: var(--shadow-cta);
}
.price-tier { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.price-for { margin-top: 6px; font-size: 13.5px; color: hsl(var(--muted-foreground)); min-height: 40px; line-height: 1.4; }
.price-amount { display: flex; align-items: baseline; gap: 2px; margin-top: 18px; min-height: 50px; flex-wrap: wrap; }
.price-amount .num { font-size: 46px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.price-amount .cur { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-left: 1px; }
.price-amount .per { font-size: 15px; font-weight: 600; color: hsl(var(--muted-foreground)); margin-left: 5px; }
.price-amount .num-sm { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
/* "Sur devis" sits alone in the amount row — bottom-align it so its baseline
   matches the big numeric prices in the other cards. */
.price-amount:has(.num-sm) { align-items: flex-end; }
.price-value {
  margin: 22px 0 26px; padding: 14px 16px; border-radius: 14px;
  display: flex; flex-direction: column; gap: 3px;
  background: linear-gradient(180deg, hsl(160 70% 46% / .1), hsl(160 70% 46% / .03));
  border: 1px solid hsl(160 70% 46% / .26);
}
.price-value .pv-k { font-size: 11px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .07em; color: hsl(160 62% 34%); }
.price-value .pv-v { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: hsl(160 64% 28%); }
.price-value .pv-v small { font-size: 13px; font-weight: 600; color: hsl(160 45% 40%); }
.price-support {
  margin-top: auto; display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 14px; margin-bottom: 14px;
  background: hsl(var(--muted) / .55); border: 1px solid hsl(var(--border));
}
.ps-avatar { position: relative; flex-shrink: 0; width: 38px; height: 38px; }
.ps-avatar img {
  width: 38px; height: 38px; border-radius: 50%; display: block;
  object-fit: cover; object-position: center top;
  box-shadow: 0 3px 10px hsl(260 100% 69% / .25);
}
.ps-online {
  position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px;
  border-radius: 50%; background: hsl(160 70% 46%); border: 2px solid hsl(var(--card));
}
.ps-text { display: flex; flex-direction: column; gap: 1px; }
.ps-text b { font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: hsl(var(--foreground)); }
.ps-sub { font-size: 11.5px; line-height: 1.3; color: hsl(var(--muted-foreground)); }
.price-cta { width: 100%; justify-content: center; }
.price-foot { margin: 36px auto 0; text-align: center; font-size: 14px; color: hsl(var(--muted-foreground)); }
.price-foot b { color: hsl(var(--foreground)); font-weight: 800; }
.sov-flex-card .ic {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: hsl(260 100% 69% / .16); color: hsl(260 100% 82%);
  border: 1px solid hsl(260 100% 69% / .28);
}
.sov-flex-card h4 { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.sov-flex-card p { margin: 0; font-size: 14px; line-height: 1.55; color: hsl(240 8% 68%); }
.sov-flex-card p b { color: #fff; font-weight: 700; }

/* users carousel relocated below the benefits cards — sits flat on the same
   layer as "Ce que ça change": no own background, no dividing borders. */
.logo-strip.users-section { background: none; border-top: 0; border-bottom: 0; }

/* ---------- Weloop animated logo mark (Agent avatar) ----------
   Ported 1:1 from the weloop-ai-pilot chat widget (WeloopLogoAnimation).
   The full icon mark is sliced into 4 pieces via background-position; the
   "fan" variant unfolds them around the logo centre. Replayed by script.js
   each time the Engage panel becomes active. */
.weloop-logo {
  --weloop-logo-url: url('assets/weloop-mark.png');
  --weloop-speed: 1;
  --weloop-dur: calc(900ms / var(--weloop-speed));
  position: relative; display: block;
  aspect-ratio: 2793 / 2501;
  width: 240px;   /* overridden where used */
}
.weloop-logo .weloop-piece {
  position: absolute;
  background-repeat: no-repeat;
  background-image: var(--weloop-logo-url);
  transform-origin: center center;
  will-change: transform, opacity;
  animation-fill-mode: both;
  animation-duration: var(--weloop-dur);
}
.weloop-logo .wp1 { left: 0%;    top: 17.6%; width: 41%;   height: 45.9%; background-size: 243.9%  217.9%;  background-position: 0%     32.53%; }
.weloop-logo .wp2 { left: 32.9%; top: 0%;    width: 41.2%; height: 45.5%; background-size: 242.72% 219.78%; background-position: 55.95% 0%;     }
.weloop-logo .wp3 { left: 59.4%; top: 17.6%; width: 40.6%; height: 45.9%; background-size: 246.3%  217.9%;  background-position: 100%   32.53%; }
.weloop-logo .wp4 { left: 19.7%; top: 74.9%; width: 61.1%; height: 25.1%; background-size: 163.67% 398.41%; background-position: 50.64% 100%;   }

/* fan: pieces unfold around the logo centre */
.weloop-logo.v-fan .weloop-piece {
  animation-name: weloop-fan;
  animation-timing-function: cubic-bezier(.25, .85, .35, 1.02);
  animation-duration: calc(var(--weloop-dur) * 1.05);
}
.weloop-logo.v-fan .wp1 { transform-origin: 121.95% 70.59%;  animation-delay: calc( 20ms / var(--weloop-speed)); }
.weloop-logo.v-fan .wp2 { transform-origin:  41.50% 109.89%; animation-delay: calc(160ms / var(--weloop-speed)); }
.weloop-logo.v-fan .wp3 { transform-origin: -23.15% 70.59%;  animation-delay: calc(300ms / var(--weloop-speed)); }
.weloop-logo.v-fan .wp4 { transform-origin:  49.59% -99.20%; animation-delay: calc(440ms / var(--weloop-speed)); }
@keyframes weloop-fan {
  0%   { transform: rotate(-130deg) scale(.55); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: rotate(0deg)    scale(1);   opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .weloop-logo, .weloop-logo .weloop-piece {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* =============================================================
   Cookie consent — RGPD banner + preferences modal
   Non-blocking bottom bar (SEO/GEO safe) using the brand tokens.
   ============================================================= */
.cookie-banner {
  position: fixed;
  left: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  /* leave the bottom-right corner free for the Crisp bubble */
  right: auto;
  max-width: min(560px, calc(100vw - 24px));
  z-index: 9000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: clamp(14px, 2vh, 20px);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-card-hover);
  color: hsl(var(--foreground));
  font-family: var(--font-sans);
  transform: translateY(0);
  opacity: 1;
  transition: transform 300ms var(--easing-out), opacity 300ms var(--easing-out);
}
.cookie-banner--hide {
  transform: translateY(16px);
  opacity: 0;
  pointer-events: none;
}
.cookie-banner__text { flex: 1 1 260px; min-width: 220px; }
.cookie-banner__text strong {
  display: block;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.cookie-banner__text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.cookie-banner__text a {
  color: hsl(var(--primary));
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 0 auto;
}

/* ---- preferences modal (opens only on explicit click) ---- */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}
.cookie-modal__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(240 20% 10% / 0.45);
  backdrop-filter: blur(2px);
}
.cookie-modal__panel {
  position: relative;
  width: min(520px, 100%);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-3xl);
  box-shadow: var(--shadow-card-hover);
  padding: clamp(20px, 3vh, 28px);
  font-family: var(--font-sans);
  color: hsl(var(--foreground));
}
.cookie-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-full);
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 180ms var(--easing-standard);
}
.cookie-modal__close:hover { background: hsl(var(--accent)); }
.cookie-modal__title {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cookie-modal__intro {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: hsl(var(--muted-foreground));
}
.cookie-modal__note {
  margin: 0 0 16px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  background: hsl(var(--primary) / 0.07);
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: var(--radius-md);
  color: hsl(var(--primary));
}

.cookie-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 0;
  border-top: 1px solid hsl(var(--border));
  cursor: pointer;
}
.cookie-toggle.is-locked { cursor: default; }
.cookie-toggle__info { flex: 1 1 auto; }
.cookie-toggle__title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.cookie-toggle__desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: hsl(var(--muted-foreground));
}
/* visually-hidden checkbox drives the switch via the sibling selector */
.cookie-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.cookie-toggle__switch {
  flex: 0 0 auto;
  position: relative;
  width: 42px;
  height: 24px;
  border-radius: var(--radius-full);
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
  transition: background 180ms var(--easing-standard), border-color 180ms var(--easing-standard);
}
.cookie-toggle__switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: #fff;
  box-shadow: 0 1px 2px hsl(240 20% 10% / 0.25);
  transition: transform 180ms var(--easing-out);
}
.cookie-toggle input:checked ~ .cookie-toggle__switch {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.cookie-toggle input:checked ~ .cookie-toggle__switch::after { transform: translateX(18px); }
.cookie-toggle input:disabled ~ .cookie-toggle__switch { opacity: 0.55; }
.cookie-toggle input:focus-visible ~ .cookie-toggle__switch {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

.cookie-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid hsl(var(--border));
}
.cookie-modal__actions .btn-primary { margin-left: auto; }
.cookie-modal__alt {
  font-size: 13px;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .cookie-banner {
    left: 8px;
    right: 8px;
    bottom: 8px;
    max-width: none;
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions { justify-content: stretch; }
  .cookie-banner__actions .btn { flex: 1 1 auto; justify-content: center; }
  .cookie-modal__actions .btn-primary { margin-left: 0; }
  .cookie-modal__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner,
  .cookie-banner--hide,
  .cookie-toggle__switch,
  .cookie-toggle__switch::after { transition: none !important; }
}

/* ============================================================
   FAQ  (#faq)
   ------------------------------------------------------------
   Native <details> accordions — content lives in the DOM (good
   for SEO/GEO crawlers) and mirrors the FAQPage JSON-LD. Laid
   out as a 2-column grid so the whole section fits one desktop
   viewport with every item collapsed (one-section-per-screen).
   ============================================================ */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}
.faq-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: box-shadow .25s var(--easing-standard), border-color .25s var(--easing-standard);
}
.faq-item:hover { box-shadow: var(--shadow-card-hover); }
.faq-item[open] { border-color: hsl(var(--primary) / .4); }
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.35;
  color: hsl(var(--foreground));
  letter-spacing: -0.01em;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}
.faq-ic { position: relative; width: 20px; height: 20px; flex: none; }
.faq-ic::before,
.faq-ic::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 2px; border-radius: 2px;
  background: hsl(var(--primary));
  transform: translate(-50%, -50%);
  transition: transform .25s var(--easing-standard), opacity .25s var(--easing-standard);
}
.faq-ic::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-ic::after { transform: translate(-50%, -50%) rotate(0); opacity: 0; }
.faq-a {
  padding: 0 22px 22px;
  color: hsl(var(--muted-foreground));
  font-size: 15px;
  line-height: 1.65;
}
.faq-a p { margin: 0; }
.faq-item[open] .faq-a { animation: faqReveal .3s var(--easing-standard); }
@keyframes faqReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-item summary { font-size: 15.5px; padding: 18px 18px; }
  .faq-a { padding: 0 18px 18px; }
}

/* Desktop one-screen rhythm — match #equipe / #tarifs compaction */
@media (min-width: 1000px) {
  #faq { padding: clamp(34px, 4.8vh, 92px) 0; }
  #faq .sec-head { margin-bottom: clamp(28px, 4vh, 48px) !important; }
  #faq .sec-head .h-section { margin-top: 16px !important; font-size: clamp(32px, 3.1vw, 46px); }
  #faq .sec-head .lede { margin-top: 16px !important; font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-item[open] .faq-a { animation: none; }
}