/* ============================================================
   Freescale — Hero section
   ============================================================ */

:root {
  --bg:        #EFF3F9;
  --ink:       #15171d;
  --ink-soft:  #5d6675;
  --nav-bg:    #15161a;
  --nav-text:  #c7ccd6;
  --white:     #ffffff;

  --grad: linear-gradient(102deg, #1E40FF 0%, #A78BFA 52%, #FF7AB8 100%);
  /* brand accent — bleu roi profond → lavande → rose vibrant */
  --accent-grad: linear-gradient(140deg, #1E40FF 0%, #6E7EF5 48%, #FF7AB8 100%);
  /* Nouvelle palette gradient : Bleu roi / Lavande claire / Rose vibrant / Rose pâle */
  --fs-pink:   #FF7AB8;                          /* Vivid Pink */
  --fs-light:  #FDE8F1;                          /* Soft Pink */
  --fs-focus:  #C7B8F6;                          /* Quiet Focus */
  --fs-sky:    #1E40FF;                          /* Royal Blue */
  --cta-grad:  linear-gradient(120deg, #FF7AB8 0%, #FDE8F1 25%, #C7B8F6 50%, #1E40FF 75%, #C7B8F6 100%);

  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --shell: 1140px;                             /* réduit de 1240 à 1140 → +100px de marge totale (50px chaque côté) sur écran ≥1140 */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--bg);
  min-height: 100svh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* ============================================================
   Ambient background
   ============================================================ */

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60% 50% at 78% 8%,  rgba(255,255,255,.8), transparent 70%),
    radial-gradient(45% 40% at 30% 18%, rgba(180,170,255,.16), transparent 70%),
    radial-gradient(50% 45% at 90% 60%, rgba(140,180,255,.14), transparent 70%);
}

.bg-lines {
  /* anchored to the hero (not the viewport) so the fade stays at the hero's
     bottom and the whole layer scrolls away — otherwise a fixed layer keeps
     showing lines in the top of the viewport as you scroll the hero up */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100svh;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(33, 49, 84, .07) 0 1px,
    transparent 1px 120px
  );
  /* lines fade out toward the bottom of the hero */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 80%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 80%);
  opacity: 1;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* MULTI-LAYER progressive blur behind the nav — sits ABOVE content (z2), BELOW
   nav (z50). Three stacked backdrop-filter layers whose blur ramps UP toward the
   top (each later sibling also re-blurs the previous one → strong, smooth, vivid
   frosted ramp). Far more visible & original than a single blur. */
.nav-blur {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 74px;
  z-index: 40;
  pointer-events: none;
}
.nav-blur__l { position: absolute; inset: 0; }
.nav-blur__l:nth-child(1) {            /* base, spans the short band */
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 100%);
}
.nav-blur__l:nth-child(2) {            /* a little more, upper part */
  -webkit-backdrop-filter: blur(5px) saturate(1.15);
          backdrop-filter: blur(5px) saturate(1.15);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 58%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 22%, transparent 58%);
}
.nav-blur__l:nth-child(3) {            /* gentle peak, top only (lightened) */
  -webkit-backdrop-filter: blur(11px) saturate(1.25);
          backdrop-filter: blur(11px) saturate(1.25);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 30%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 8%, transparent 30%);
}
/* original touch — a faint "signature" tint (echoes the CTA orange→blue) over the frost */
.nav-blur::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    rgba(255,138,26,.10) 0%,
    rgba(176,71,201,.055) 50%,
    rgba(42,107,255,.10) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 82%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 24%, transparent 82%);
  transition: opacity .25s ease;
}
/* Passé la hero : fond blanc net, on désactive les blurs teintés */
.nav-blur {
  transition: transform .55s cubic-bezier(.33, 1, .68, 1),
              opacity .45s cubic-bezier(.33, 1, .68, 1),
              background-color .25s ease,
              box-shadow .25s ease;
}
.nav-blur.is-past-hero { background: #fff; box-shadow: 0 1px 0 rgba(20,22,30,.06); }
.nav-blur.is-past-hero .nav-blur__l { opacity: 0; }
.nav-blur.is-past-hero::after { opacity: 0; }
/* Quand le header se cache au scroll down, le fond blanc du blur suit */
.nav-blur.is-past-hero.is-hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   Navbar
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: 1240px;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 26px 24px;
  /* 'backwards' (not 'both'): the entrance fill must NOT hold the end state,
     otherwise the animation overrides .is-hidden's transform/opacity */
  animation: dropIn .8s cubic-bezier(.2,.7,.2,1) backwards;
  /* hide-on-scroll-down / reveal-on-scroll-up — ease-OUT so it starts moving
     instantly (no slow-start "delay"), then decelerates smoothly */
  transition: transform .55s cubic-bezier(.33, 1, .68, 1),
              opacity .45s cubic-bezier(.33, 1, .68, 1);
  will-change: transform, opacity;
  transform-origin: center top;
}
.nav.is-hidden {
  transform: translateY(-120%);
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
}
}

.brand { display: flex; align-items: center; justify-self: start; }
.brand__logo {
  display: block;
  height: 26px;
  width: auto;
}
.brand__name {
  color: #15171d;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -.005em;
  padding-bottom: 2px;
}

.nav__links {
  display: flex;
  align-items: center;
  justify-self: center;
  gap: 30px;
}
.nav__links a {
  display: inline-flex;
  align-items: center;
  color: #4a5360;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s ease;
}
.nav__links a:hover { color: #15171d; }

/* ═══ Download dropdown ═══ */
.nav__dl { position: relative; display: inline-flex; align-items: center; }
.nav__dl-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0; padding: 0;
  color: #4a5360; font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
  transition: color .18s ease;
}
.nav__dl-trigger:hover,
.nav__dl:hover .nav__dl-trigger,
.nav__dl-trigger[aria-expanded="true"] { color: #15171d; }
.nav__dl-chev {
  width: 14px; height: 14px;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1);
}
.nav__dl:hover .nav__dl-chev,
.nav__dl-trigger[aria-expanded="true"] .nav__dl-chev {
  transform: rotate(180deg);
}
.nav__dl-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  min-width: 320px;
  background: #fff;
  border: 1px solid rgba(20,22,30,.06);
  border-radius: 22px;
  padding: 12px;
  box-shadow:
    0 1px 2px rgba(20,22,30,.04),
    0 24px 60px -20px rgba(20,22,30,.2);
  display: flex; flex-direction: column; gap: 4px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, transform .28s cubic-bezier(.34,1.56,.64,1), visibility .22s;
  z-index: 60;
}
.nav__dl:hover .nav__dl-menu,
.nav__dl-menu:hover,
.nav__dl-trigger[aria-expanded="true"] + .nav__dl-menu {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* petit pont invisible pour maintenir le hover entre trigger et menu */
.nav__dl::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 12px;
}
.nav__dl-item {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #14151a;
  font-size: 15px; font-weight: 500;
  text-decoration: none;
  transition: background .18s ease;
}
.nav__dl-item:hover { background: rgba(20,22,30,.04); }
.nav__dl-ic {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(20,22,30,.1);
  display: inline-flex; align-items: center; justify-content: center;
  color: #14151a;
  background: #fff;
  flex: none;
}
.nav__dl-ic svg { width: 18px; height: 18px; display: block; }

.nav__actions { display: flex; align-items: center; justify-self: end; gap: 6px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn--ghost {
  padding: 9px 15px;
  border-radius: 10px;
  color: #2a3039;
  font-size: 15px;
  background: transparent;
}
.btn--ghost:hover { background: rgba(20,22,30,.06); }
.btn--light {
  padding: 10px 20px;
  border-radius: 10px;
  background: #14151a;
  color: #fff;
  font-size: 15px;
}

.nav__burger {
  display: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 10px;
  background: rgba(20,22,30,.06);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.nav__burger span {
  width: 16px; height: 1.7px; border-radius: 2px;
  background: #15171d;
  transition: transform .25s ease, opacity .2s ease;
}

/* ============================================================
   Hero layout
   ============================================================ */

.hero {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  min-height: 88svh;                              /* réduit de 100 → 88svh pour rapprocher le contenu du header */
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  column-gap: 24px;
}

/* ---------------- LEFT : copy ---------------- */

.hero__copy {
  position: relative;
  z-index: 1;                       /* sous .hero__visual (z:5) → les flies volent au-dessus */
  align-self: center;
  padding: 90px 0 90px;             /* réduit de 150 → 90px : moins d'espace sous le header */
  max-width: 640px;
  transform: translateY(-100px);
}

.sparkle {
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: #fff;
  border-radius: 17px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  margin-bottom: 26px;
}
.sparkle img { width: 30px; height: 30px; }

.headline {
  position: relative;
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.042em;
  /* Taille calée pour que les 2 lignes tiennent chacune sur une seule
     ligne dans la colonne hero (max-width: 640px) :
       ligne 1 (serif italique, ~32 car.) = facteur limitant
       ligne 2 (bold, ~25 car.) tient large. */
  font-size: clamp(1.95rem, 4.3vw, 2.85rem);
  color: var(--ink);
}
.line { display: block; }
.line--bold,
.line--serif { white-space: nowrap; }
.line--serif {
  font-family: var(--serif);
  font-weight: 400;
  font-style: italic;
  letter-spacing: -.012em;
  font-size: .98em;
  padding-bottom: .06em;
  color: #1b1d24;
}
.line--bold { font-weight: 500; }

/* headline word reveal — CTA gradient → black, word by word (same as .statement, NO grey phase)
   words are wrapped by JS into .hl-word; gradient is sliced continuous across the headline */
.hl-word {
  background-image: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #d3d7de;     /* OPAQUE light grey hides the gradient until the sweep */
  color: #d3d7de;
  opacity: 0;
  transform: translateY(.16em);
  will-change: opacity, transform;
}
.headline.is-in .hl-word {
  animation: stmtWordIn .8s cubic-bezier(.4, 0, .25, 1) both;
  animation-delay: var(--d, 0s);   /* JS sequences this LINE BY LINE */
}
@media (prefers-reduced-motion: reduce) {
  .headline.is-in .hl-word,
  .hl-word { animation: none; opacity: 1; transform: none; -webkit-text-fill-color: #14161c; color: #14161c; }
}

/* Support badge */
.badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: baseline;
  margin-left: .4em;
  transform: translateY(-.5em) rotate(-3deg);
  padding: .30em .62em;
  border-radius: .58em;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--grad) border-box;
  border: 2px solid transparent;
  box-shadow: none;
  font-size: .40em;
  white-space: nowrap;
}
.badge__text {
  font-weight: 700;
  letter-spacing: -.01em;
  background: var(--grad);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* speech-bubble tail */
.badge::after {
  content: "";
  position: absolute;
  left: 1.05em;
  bottom: -.34em;
  width: .55em; height: .55em;
  background: #fff;
  border-right: 2px solid #9a64e6;
  border-bottom: 2px solid #b455e6;
  border-bottom-right-radius: 4px;
  transform: rotate(58deg) skew(-8deg);
}

.subtext {
  margin-top: 30px;
  max-width: 420px;
  color: #858d9a;
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: -.003em;
}

.actions { margin-top: 30px; }

/* Get started CTA */
.cta-row {
  margin-top: 38px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.btn-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  /* the 8px black frame is a BORDER (not padding) so overflow:hidden clips the
     sliding words at the gradient interior — the small black margins stay intact */
  padding: 0 24px 0 0;
  background: #14151a;
  border: 8px solid #14151a;
  border-radius: 19px;
  box-shadow: none;
}
/* gradient tile — expands to fill the whole button on hover */
/* ── CTA hover animation ───────────────────────────────────────────
   IN  (mouse enters): smooth ease-out, the fresh word TRAILS the arrow (delays)
   OUT (mouse leaves):  quick, clean reset — NO delays, so it never lags.
   Each element carries its OUT transition in the base rule and its IN
   transition in the :hover rule, so the two directions are fully independent.
   --------------------------------------------------------------------- */
.btn-cta::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  border-radius: 11px;
  /* Gradient adouci : palette pastelisée + noise très léger pour texture organique */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='cg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23cg)' opacity='0.18'/%3E%3C/svg%3E"),
    linear-gradient(120deg, #FBD4E6 0%, #FDE8F1 30%, #E4DCFB 55%, #B9C9FF 80%, #8DA5FF 100%);
  background-blend-mode: soft-light, normal;
  background-size: 120px 120px, auto;
  z-index: 0;
  transition: width .32s cubic-bezier(.4, 0, .2, 1);            /* OUT */
}
.btn-cta:hover::before {
  width: 100%;
  transition: width .5s cubic-bezier(.22, 1, .36, 1);          /* IN */
}
.btn-cta__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);        /* OUT */
}
.btn-cta__icon svg {
  width: 23px;
  height: 23px;
  color: #fff;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.3));
}
/* keep the arrow — push it to the right on hover (it leads) */
.btn-cta:hover .btn-cta__icon {
  transform: translateX(134px);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);      /* IN */
}
.btn-cta__label {
  position: relative;
  z-index: 1;
  display: inline-grid;
  grid-template-columns: 1fr;                                   /* force stack single-col : les 2 mots partagent 1/1 sans wrap */
  overflow: hidden;                                             /* clip strict des mots qui sortent (le button clippait aussi mais renforcé) */
  color: #fff;
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  transition:
    transform .32s cubic-bezier(.4, 0, .2, 1),
    color .32s ease;                                            /* OUT : label repasse en blanc quand on quitte */
}
/* the label shifts left ET vire au foncé pour rester lisible sur le gradient pastel Free Horizon */
.btn-cta:hover .btn-cta__label {
  transform: translateX(-40px);
  color: #14151a;                                              /* dark ink on pastel bg = contraste garanti */
  transition:
    transform .5s cubic-bezier(.22, 1, .36, 1),
    color .28s ease;
}
.btn-cta:hover .btn-cta__icon svg { color: #14151a; filter: none; }
/* Word swap — PURE SLIDE (no opacity / no fade), moving in PERFECT SYNC with the
   arrow: identical timing, NO delays. The full-width travel (±200px) keeps the two
   copies ~200px apart (> word width) so they never overlap mid-swap. */
.btn-cta__word {
  grid-area: 1 / 1;
  white-space: nowrap;
  will-change: transform;
}
/* OUT (mouse leaves) — same curve/duration as the arrow, no delay */
.btn-cta__word:nth-child(1) {
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
.btn-cta__word:nth-child(2) {
  transform: translateX(-200px);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
/* IN (hover) — le 1er mot part à droite, le 2ème arrive de la gauche, courbe douce */
.btn-cta:hover .btn-cta__word:nth-child(1) {
  transform: translateX(200px);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.btn-cta:hover .btn-cta__word:nth-child(2) {
  transform: translateX(0);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.btn-cta:hover .btn-cta__label { transform: translateX(-40px); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }
.btn-cta:hover .btn-cta__icon { transform: translateX(134px); transition: transform .5s cubic-bezier(.22, 1, .36, 1); }

/* ── Nav "Commencer" — mini twin of the hero CTA (same hover behaviour) ── */
/* Bouton nav — version d'origine (freescale-five.vercel.app) : blanc, tuile grise, word-swap */
.btn-cta--mini {
  gap: 10px;
  padding: 0 19px 0 0;
  border-width: 8px;
  border-radius: 10px;
  background: #fff;
  border-color: #fff;
  box-shadow: none;
  align-self: center;
}
.btn-cta--mini::before {
  width: 26px; height: 26px; border-radius: 7px;
  background: linear-gradient(105deg, #e6e9f0 0%, #f2f4f8 100%);
  background-blend-mode: normal;
}
.btn-cta--mini .btn-cta__icon { width: 26px; height: 26px; }
.btn-cta--mini .btn-cta__icon svg { width: 14px; height: 14px; color: var(--ink); filter: none; }
.btn-cta--mini .btn-cta__label { font-size: .92rem; color: var(--ink); }
.btn-cta--mini .btn-cta__word:nth-child(2) { transform: translateX(-140px); }
.btn-cta--mini:hover .btn-cta__icon  { transform: translateX(90px); }
.btn-cta--mini:hover .btn-cta__label { transform: translateX(-27px); }
.btn-cta--mini:hover .btn-cta__word:nth-child(1) { transform: translateX(140px); }

/* ── Bouton secondaire "Regarder la démo" — à côté du CTA principal ──
   Calé sur la hauteur du .btn-cta--glow (58 px) pour s'aligner, mais en
   blanc sur bordure fine — clairement secondaire, ne concurrence pas
   le CTA noir/lumineux. Icône play, légère lift au hover. */
.btn-demo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 58px;
  padding: 0 22px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .12);
  border-radius: 19px;
  color: var(--ink);
  font-family: inherit;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -.005em;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(20, 22, 30, .04);
  transition:
    transform .35s cubic-bezier(.22, 1, .36, 1),
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}
.btn-demo:hover {
  transform: translateY(-1px);
  background: #fafbfd;
  border-color: rgba(20, 22, 30, .22);
  box-shadow: 0 10px 22px -12px rgba(20, 22, 30, .25);
}
.btn-demo:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.btn-demo__icon {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(20, 22, 30, .06);
  color: var(--ink);
  flex: none;
  transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.btn-demo:hover .btn-demo__icon {
  background: var(--ink);
  color: #fff;
  transform: translateX(2px);
}
.btn-demo__icon svg { width: 12px; height: 12px; display: block; }
.btn-demo__label { white-space: nowrap; }

/* ── Hero "Commencer" — contour animé multicolore lumineux ──────────────
   Deux effets superposés pour attirer l'œil sans casser le clic :
   1) la bordure 8px noire existante est remplacée par un gradient conique
      qui TOURNE (orange→rouge→violet→indigo→bleu→orange). Astuce
      double-background avec background-clip pour garder l'intérieur noir.
   2) un halo coloré qui PULSE autour du bouton via box-shadow — non
      clippé par overflow:hidden, donc visible en débordement.
   ----------------------------------------------------------------------- */

/* Angle rotatif animable (Chrome/Safari/FF 128+ via @property). */
@property --cta-glow-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.btn-cta--glow {
  /* Gradient bleu Freescale, aligné sur .btn-simple / .btn-cta--mini */
  border: 0;
  background: linear-gradient(180deg, #4A6DFF 0%, #1E40FF 55%, #0C38C9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 10px 30px -8px rgba(12,56,201,.55),
    0 4px 12px rgba(20,22,30,.12);
}

@keyframes cta-glow-spin {
  to { --cta-glow-angle: 360deg; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-cta--glow { animation: none; }
}

.btn--dark {
  padding: 16px 30px;
  border-radius: 13px;
  background: #141519;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 8px 18px -9px rgba(0,0,0,.85);
}
.btn--dark:hover {
  transform: translateY(-2px);
  box-shadow: inset 0 1.2px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(255,255,255,.06), inset 0 8px 18px -9px rgba(0,0,0,.85);
}
.btn--dark:active { transform: translateY(0); }

.proof {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}
.proof__avatars { display: flex; }
.av {
  width: 33px; height: 33px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  margin-left: -11px;
  box-shadow: none;
  background-size: cover;
}
.av:first-child { margin-left: 0; }
.av1 { background: radial-gradient(120% 120% at 30% 20%, #ffd9a8, #e98a5d); }
.av2 { background: radial-gradient(120% 120% at 30% 20%, #ffc6d9, #c66b9a); }
.av3 { background: radial-gradient(120% 120% at 30% 20%, #cfe0ff, #6f8fd6); }
.av4 { background: radial-gradient(120% 120% at 30% 20%, #d7d2cc, #8d8780); }
.proof__label {
  color: #7a828f;
  font-size: .9rem;
  font-weight: 500;
}

/* customer reviews — rounded face strip */
.reviews {
  position: absolute;
  bottom: 34px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 13px;
  z-index: 4;
  white-space: nowrap;
  animation: fadeReviews .7s ease .9s both;
}
@keyframes fadeReviews { from { opacity: 0; } to { opacity: 1; } }
.reviews__faces {
  display: flex;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #fff;
  box-shadow: none;
}
.reviews__faces img {
  width: 42px;
  height: 50px;
  object-fit: cover;
  display: block;
}
.reviews__faces img + img { border-left: 2px solid #fff; }
.reviews__label {
  color: #7a828f;
  font-size: .92rem;
  font-weight: 500;
}

/* ---------------- RIGHT : visual ---------------- */

.hero__visual {
  position: relative;
  z-index: 5;                       /* au-dessus de .hero__copy (implicite) → flies passent devant le texte */
  align-self: end;
  justify-self: center;
  height: 100svh;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  bottom: 92px;
  right: 64px;
  will-change: transform, opacity;
}
.hero__woman {
  height: min(85svh, 815px);
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: bottom center;
  animation: heroIn 1s cubic-bezier(.2,.7,.2,1) .2s both;
}

/* floating app chips */
.chip {
  position: absolute;
  width: clamp(58px, 6.2vw, 88px);
  aspect-ratio: 1;
  filter: drop-shadow(0 18px 26px rgba(35,45,75,.22));
  z-index: 3;
}
.chip img {
  width: 100%; height: 100%;
}
.chip--whatsapp  { top: 30%;  left: 4%;  }
.chip--instagram { top: 60%;  left: 1%;  }
.chip--gmail     { top: 45%;  right: 5%; }

/* ============================================================
   Animations
   ============================================================ */

@keyframes dropIn {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(34px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop {
  from { opacity: 0; transform: scale(.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-13px); }
}

.reveal {
  opacity: 0;
  animation: rise .8s cubic-bezier(.21,.7,.25,1) both;
  animation-delay: calc(.15s + var(--i, 0) * .09s);
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .hero { column-gap: 8px; }
}

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__actions .btn--ghost { display: none; }
  .nav {
    display: flex;
    justify-content: flex-start;
    gap: 10px;
    padding: 18px 20px;
  }
  .nav__actions { margin-left: auto; }
  .nav__burger { display: flex; }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    row-gap: 0;
    text-align: center;
  }
  .hero__copy {
    padding: 132px 0 0;
    max-width: 600px;
    margin: 0 auto;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform: none;
  }
  .headline { font-size: clamp(2.2rem, 9.5vw, 3.4rem); }
  .line--bold,
  .line--serif { white-space: normal; }
  .subtext { max-width: 460px; }
  .cta-row { flex-direction: column; align-items: center; gap: 22px; }
  .proof { align-items: center; }
  .reviews {
    position: static;
    transform: none;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 24px auto 32px;
    white-space: normal;
  }

  .hero__visual {
    height: auto;
    margin-top: 10px;
    bottom: 0;
    right: 0;
  }
  .hero__woman { height: auto; width: min(86vw, 470px); }
  .chip--whatsapp  { top: 18%; left: 2%;  }
  .chip--instagram { top: 54%; left: -2%; }
  .chip--gmail     { top: 34%; right: 1%; }
}

@media (max-width: 480px) {
  .hero__copy { padding-top: 120px; }
  .chip { width: clamp(50px, 15vw, 64px); }
}

/* ============================================================
   Feature — unified inbox + AI copilot
   ============================================================ */
.feature {
  position: relative;
  z-index: 2;
  margin-top: -210px;
  padding: 70px 24px 120px;
  /* PAS d'overflow:hidden ici → les flies (icônes Gmail/Insta/WhatsApp)
     doivent pouvoir déborder dans le hero quand l'utilisateur est en
     haut de page. Le fond + le border-radius sont donc déportés sur
     un ::before pseudo, qui peut clipper son propre contenu sans
     impacter les enfants de .feature. */
}
/* Fond supprimé : le gradient passe autour du screen (halo) au lieu de la section */
.feature::before { content: none; }
@keyframes featureGradShift {
  0%   { background-position: 0 0, 0 0,   0% 50%; }
  22%  { background-position: 0 0, 0 0,  28% 48%; }
  48%  { background-position: 0 0, 0 0,  82% 52%; }
  68%  { background-position: 0 0, 0 0, 100% 50%; }
  88%  { background-position: 0 0, 0 0,  38% 51%; }
  100% { background-position: 0 0, 0 0,   0% 50%; }
}
.feature__head {
  max-width: 1080px;                            /* élargi pour que chaque .line tienne sur 1 ligne visuelle → 2 lignes total */
  margin: 0 auto 54px;
  text-align: center;
  position: relative;
  z-index: 3;
}
.feature__title .line--serif,
.feature__title .line--bold { white-space: nowrap; color: #0C1E5A; -webkit-text-fill-color: #0C1E5A; }
@media (max-width: 900px) {
  .feature__title .line--serif,
  .feature__title .line--bold { white-space: normal; }   /* wrap autorisé sur mobile où pas de place */
}
/* Icône Freescale (le F en dégradé) centrée au-dessus du titre */
.feature__icon {
  width: 120px;
  height: auto;
  display: block;
  margin: 0 auto 28px;
  filter: drop-shadow(0 16px 30px rgba(20, 22, 30, .22));
}
/* Le titre en 2 lignes — couleur blanche pour ressortir sur le gradient,
   ligne 1 en serif italique (Instrument Serif), ligne 2 en sans bold.
   On surcharge .line / .line--serif / .line--bold seulement DANS .feature
   pour ne pas casser le hero qui utilise les mêmes classes. */
.feature__title {
  margin: 0;
  font-weight: 400;
  color: #0C1E5A;                              /* dark maintenant que le fond est blanc */
}
.feature__title .line {
  display: block;
  text-shadow: none;
}
.feature__title .line--serif {
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.005em;
  white-space: normal;
  padding-bottom: .02em;
  color: #5b6275;                              /* gris moyen pour la première ligne italique */
}
.feature__title .line--bold {
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  white-space: normal;
  color: #0C1E5A;                              /* ink pour la 2e ligne */
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 20px;
  padding: 7px 15px;
  border-radius: 14px;
  background: #fff;
  box-shadow: none;
  font-size: .82rem;
  font-weight: 600;
  color: #51596a;
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-grad);
}
.feature__title {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--ink);
}
.feature__sub {
  margin: 20px auto 0;
  max-width: 580px;
  color: #5a6473;
  font-size: 1.08rem;
  line-height: 1.55;
}
.feature__sub strong { color: var(--ink); font-weight: 700; }

/* screen = the inbox mockup + its floating collage (Makro-style showcase) */
.screen {
  position: relative;
  max-width: calc(var(--shell) - 48px); /* match hero/nav content width (1192px) */
  margin: 0 auto;
  perspective: 2400px;           /* gentle 3D depth for the mini screen tilt */
}
.inbox {
  width: 100%;
  display: grid;
  grid-template-columns: 330px 1fr;
  height: 808px;                 /* taller screen */
  background: #fff;
  border-radius: 8px;            /* much less rounded */
  border: 1px solid rgba(20,22,30,.06);
  box-shadow: 0 0 0 12px rgba(255,255,255,.5);
  overflow: hidden;
  will-change: transform;
  transition: transform .45s cubic-bezier(.16, 1, .3, 1); /* eases the subtle scroll parallax → smooth */
}

/* ── Social icons that fly in from the hero and dock at the screen's top-right ── */
.dock {
  position: fixed;                                      /* déplacé au root via JS → viewport-fixed, sort de tous les contextes */
  inset: 0;
  z-index: 100;                                         /* au-dessus de .hero, .feature et de tous les contextes */
  pointer-events: none;
}
.fly {
  position: absolute;
  z-index: 9999;                                        /* max local pour tenter de dépasser la hiérarchie */
  width: 30px;
  aspect-ratio: 1;
  margin: 0;
  transform-origin: center center;
  will-change: transform;
  perspective: 560px;
  /* Ombre plus douce et plus diffuse : radius 22px + spread léger, deux couches (contact + halo) */
  filter:
    drop-shadow(0 2px 4px rgba(30, 40, 70, .18))
    drop-shadow(0 12px 24px rgba(30, 40, 70, .22));
}
/* real extruded 3D tile: a face + darkened slabs stacked behind in Z (built by JS) */
.fly__tile {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Flottement discret hero : animé sur .fly__face. Le JS règle scale sur face
   (Teams a un boost x1.15), on préserve donc ce scale dans les keyframes. */
@keyframes flyFloatBase {
  0%, 100% { transform: translateZ(.5px) scale(1) translateY(0); }
  50%      { transform: translateZ(.5px) scale(1) translateY(-6%); }
}
@keyframes flyFloatTeams {
  0%, 100% { transform: translateZ(.5px) scale(1.15) translateY(0); }
  50%      { transform: translateZ(.5px) scale(1.15) translateY(-6%); }
}
.fly[data-target="gmail"] .fly__face   { animation: flyFloatBase  4.2s ease-in-out infinite; animation-delay: 0s;    }
.fly[data-target="outlook"] .fly__face { animation: flyFloatBase  4.6s ease-in-out infinite; animation-delay: -1.4s; }
.fly[data-target="teams"] .fly__face   { animation: flyFloatTeams 5.0s ease-in-out infinite; animation-delay: -2.6s; }
.fly__face,
.fly__edge {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  border-radius: 22%;                                   /* coins nets mais arrondis modérés — la douceur vient du bord (bevel) */
  overflow: hidden;
}
.fly__edge {
  filter: brightness(.62) saturate(.9);                 /* slabs plus clairs = tuile plus douce */
  opacity: .95;
}

/* ── Trust bar : small stat + styled client logos (like the reference), after the screen ── */
.trust {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 150px 24px 140px;
  text-align: center;
}
.trust__stat {
  max-width: 720px;
  margin: 0 auto 56px;
  font-family: var(--sans);
  font-size: clamp(.88rem, 1.15vw, 1.02rem);   /* small */
  font-weight: 500;
  letter-spacing: -.005em;
  color: #41495d;                              /* dark slate, like the ref */
}
.trust__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 5vw, 64px);
  color: #1b2433;
}
.tlogo { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; line-height: 1; }
.tlogo--candle {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 2.1vw, 1.78rem);
  letter-spacing: -.02em;
}
.tlogo--arc {
  position: relative;
  padding-top: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw, 1.62rem);
  letter-spacing: -.015em;
}
.tlogo__arc {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-54%);
  width: clamp(50px, 5.2vw, 62px);
  height: auto;
}
.tlogo--agnost {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1rem, 1.6vw, 1.36rem);
  letter-spacing: .04em;
}
.tlogo--adria {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.12rem, 1.9vw, 1.52rem);
  letter-spacing: -.01em;
}
.tlogo__mark { width: clamp(19px, 2vw, 25px); height: auto; }

/* ── Floating collage cards overflowing the screen corners ── */
.screen-collage {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  transition: transform .25s ease-out;     /* eased parallax */
  will-change: transform;
}
.float-card {
  position: absolute;
  background: #fff;
  border: 1px solid rgba(20,22,30,.05);
  border-radius: 15px;
  box-shadow: none;
}
/* Mue AI action — bottom-right, overlapping the corner */
.float-card--mue {
  bottom: -30px;
  right: -34px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px 13px 13px;
}
.float-card__icon {
  flex: none;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--accent-grad);
  display: grid; place-items: center;
  box-shadow: none;
}
.float-card__icon svg { width: 18px; height: 18px; fill: #fff; }
.float-card__body { display: flex; flex-direction: column; gap: 2px; }
.float-card__title { font-size: 14px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.1; }
.float-card__sub { font-size: 12.5px; color: #5a6473; }
/* Channels unified — bottom-left, overlapping the corner */
.float-card--channels {
  bottom: -24px;
  left: -28px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 13px 16px;
}
.float-card__chips { display: flex; }
.float-card__chips img { width: 30px; height: 30px; border-radius: 8px; box-shadow: none; }
.float-card__chips img + img { margin-left: -8px; }
.float-card__small { font-size: 12.5px; font-weight: 600; color: var(--ink); }

/* sidebar */
.inbox__side {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(20,22,30,.07);
  background: #fafbfd;
  min-width: 0;
}
.inbox__side-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 18px 12px;
}
.inbox__side-title { font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.inbox__count {
  min-width: 22px; height: 22px; padding: 0 7px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--ink); color: #fff;
  font-size: .73rem; font-weight: 700;
}
.inbox__search {
  margin: 0 14px 8px;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  border-radius: 10px;
  background: #eceff5;
  color: #8a93a0; font-size: .85rem;
}
.inbox__search-icn { width: 15px; height: 15px; fill: none; stroke: #9aa3b0; stroke-width: 2; stroke-linecap: round; flex: none; }

.convos { list-style: none; margin: 0; padding: 4px 8px; overflow-y: auto; flex: 1; }
.convo {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 11px;
  border-radius: 12px;
}
.convo--active { background: #fff; box-shadow: none; }

.avatar {
  position: relative;
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--c, #8a93a0);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .01em;
}
.ch {
  position: absolute; right: -3px; bottom: -3px;
  width: 19px; height: 19px;
  border-radius: 6px;
  background-size: cover; background-position: center;
  border: 2px solid #fafbfd;
}
.convo--active .ch, .thread__head .ch { border-color: #fff; }
.ch--wa { background-image: url("assets/icon-whatsapp.webp"); }
.ch--ig { background-image: url("assets/icon-instagram.webp"); }
.ch--gm { background-image: url("assets/icon-gmail.webp"); }

.convo__main { flex: 1; min-width: 0; }
.convo__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.convo__name { font-weight: 600; font-size: .92rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.convo__time { font-size: .74rem; color: #9aa3b0; flex: none; }
.convo__msg {
  display: block; margin-top: 1px;
  font-size: .84rem; color: #6b7480;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.convo__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-grad); }

/* thread */
.thread { display: flex; flex-direction: column; min-width: 0; }
.thread__head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px;
  border-bottom: 1px solid rgba(20,22,30,.07);
}
.thread__who { display: flex; flex-direction: column; line-height: 1.3; }
.thread__name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.thread__chan { font-size: .8rem; color: #8a93a0; }

.thread__body {
  flex: 1;
  padding: 22px;
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
  background: radial-gradient(circle at 1px 1px, rgba(20,22,30,.045) 1px, transparent 0) 0 0 / 20px 20px;
}
.bubble {
  max-width: 74%;
  padding: 10px 15px;
  font-size: .92rem; line-height: 1.45;
  border-radius: 16px;
}
.bubble--in { align-self: flex-start; background: #eef1f6; color: #1f2530; border-bottom-left-radius: 5px; }
.bubble--out { align-self: flex-end; background: var(--ink); color: #fff; border-bottom-right-radius: 5px; }

/* AI copilot */
.copilot {
  align-self: stretch;
  margin-top: 8px;
  padding: 15px 16px;
  border-radius: 16px;
  background: linear-gradient(#fff, #fff) padding-box, var(--accent-grad) border-box;
  border: 1.5px solid transparent;
  box-shadow: none;
}
.copilot__top { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.copilot__badge {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-grad);
}
.copilot__badge svg { width: 14px; height: 14px; fill: #fff; }
.copilot__name { font-weight: 700; font-size: .87rem; color: var(--ink); }
.copilot__tag {
  margin-left: auto;
  padding: 3px 9px; border-radius: 999px;
  background: #eef1f6; color: #6b7480;
  font-size: .71rem; font-weight: 600;
}
.copilot__text { color: #2a3340; font-size: .95rem; line-height: 1.5; }
.copilot__actions { display: flex; gap: 8px; margin-top: 13px; }
.copilot__use {
  padding: 8px 16px; border: 0; border-radius: 9px;
  background: var(--ink); color: #fff;
  font-size: .84rem; font-weight: 600; cursor: pointer;
}
.copilot__alt {
  padding: 8px 14px; border: 1px solid rgba(20,22,30,.14); border-radius: 9px;
  background: #fff; color: #4a5360;
  font-size: .84rem; font-weight: 600; cursor: pointer;
}

.thread__composer {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
  border-top: 1px solid rgba(20,22,30,.07);
}
.composer__field {
  flex: 1;
  padding: 11px 16px; border-radius: 11px;
  background: #eef1f6; color: #9aa3b0; font-size: .9rem;
}
.composer__send {
  flex: none;
  width: 42px; height: 42px; border: 0; border-radius: 11px;
  background: var(--accent-grad);
  display: grid; place-items: center; cursor: pointer;
}
.composer__send svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* social-proof band — PART OF the statement section; pulled UP so it sits just under the
   pinned phrase (negative margin cancels the empty bottom half of the 100vh pin box) */
.iproof {
  margin: -22vh auto 0;
  padding: 0 24px 84px;      /* tail spacing inside the statement section */
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;     /* ferré au centre */
  text-align: center;
}
.iproof__eyebrow { font-size: 14px; font-weight: 600; color: #51596a; }
.iproof__row { display: flex; align-items: center; gap: 14px; }
.iproof__avatars { display: flex; align-items: center; }
.iproof__avatars img {
  width: 42px; height: 42px; border-radius: 10px; object-fit: cover;
  border: 2px solid #fff; box-shadow: none;
}
.iproof__avatars img + img { margin-left: -10px; }
.iproof__info { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.iproof__stars { display: inline-flex; align-items: center; gap: 8px; color: #f3b53f; font-size: 16px; letter-spacing: 1px; line-height: 1; }
.iproof__score { color: var(--ink); font-size: 14px; font-weight: 700; }
.iproof__caption { font-size: 14px; font-weight: 500; color: #5a6473; }

/* ============================================================
   Statement — big line that fills grey → ink as you scroll
   ============================================================ */
/* the statement is a TALL scroll-track; the text PINS at viewport centre and
   fills slowly as you scroll through it (you must scroll a lot to fully reveal) */
.statement {
  position: relative;
  z-index: 2;
  background: #f4f5f9;                     /* même gris que Pillars & halo — 1 seule couleur autour du darkblock */
  padding-bottom: 480px;
  /* height comes from .statement__track; the .iproof band flows after it as the tail */
}
.statement__track {
  position: relative;          /* no fixed height → the section flows normally (no scroll lock) */
}
.statement__pin {
  position: static;            /* not sticky anymore — the phrase scrolls past normally */
  min-height: 72vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
}
.statement__stage {
  position: relative;
  width: 100%;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}
/* small pill above the phrase */
.statement__tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 17px 8px 13px;
  border-radius: 14px;
  border: 1px solid rgba(21, 23, 29, .1);
  background: rgba(21, 23, 29, .025);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: var(--ink-soft);
}
.statement__tag-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cta-grad);
  flex: none;
}
.statement__text {
  position: relative;          /* offsetParent for the words → continuous gradient slicing */
  max-width: 820px;
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;            /* bold sans (like the reference) */
  font-size: clamp(1.4rem, 2.9vw, 2.35rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  transform-origin: center center;
  will-change: transform;
  /* fallback / reduced-motion start tone (JS paints each word) */
  color: rgba(21, 23, 29, .18);
}
/* each word carries the CTA gradient clipped to its glyphs; the reveal animates
   the text-fill from transparent (gradient shows) → black — NO grey phase */
.statement__word {
  background-image: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #d3d7de;     /* OPAQUE light grey hides the gradient until the sweep */
  color: #d3d7de;
  opacity: 0;
  transform: translateY(.16em);
  will-change: opacity, transform;
}
.statement.is-in .statement__word {
  animation: stmtWordIn .8s cubic-bezier(.4, 0, .25, 1) both;
  animation-delay: var(--d, 0s);   /* JS sequences this LINE BY LINE */
}
/* fast fluid wave with a CLEARLY VISIBLE grey phase: the word lands in light grey,
   holds it, then the CTA gradient sweeps through and it settles to black. */
@keyframes stmtWordIn {
  0%   { opacity: 0; transform: translateY(.18em); -webkit-text-fill-color: #d6dae1; }
  20%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: #cfd3da; }   /* lands in grey */
  48%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: #cfd3da; }   /* grey clearly held */
  72%  { -webkit-text-fill-color: transparent; }    /* CTA gradient sweeps through */
  100% { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: #14161c; }   /* settles to black */
}
@media (prefers-reduced-motion: reduce) {
  .statement.is-in .statement__word {
    animation: none; opacity: 1; transform: none;
    -webkit-text-fill-color: #14161c; color: #14161c;
  }
}
.statement__word--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;          /* Instrument Serif reads a touch smaller — balance it */
  letter-spacing: 0;
}

/* advantages card — slides in from the right in phase 2 (revealed via JS) */
.statement__card {
  position: absolute;
  top: 50%;
  right: 0;
  width: 350px;
  transform: translateY(-50%) translateX(40px);
  opacity: 0;
  will-change: transform, opacity;
}
.adv-card {
  padding: 28px 30px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(20,22,30,.06);
  box-shadow: none;
  text-align: left;
}
.adv-card__eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #8089a0;
  text-transform: uppercase;
}
.adv-card__list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.adv-card__list li {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 1.02rem;
  font-weight: 500;
  color: #20242e;
  line-height: 1.3;
}
.adv-card__ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: var(--cta-grad);
  display: grid;
  place-items: center;
  box-shadow: none;
}
.adv-card__ic svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Mue panel — mirrored scroll reveal (image right / copy left)
   the "other direction" twin of the statement section
   (own .mue namespace — the inbox card already uses .copilot)
   ============================================================ */
.mue {
  position: relative;
  z-index: 2;
  background: #fff;
  height: 240vh;            /* pinned track: image slides in, title fills, copy staggers */
}
.mue__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 24px;
}
.mue__stage {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 440px;   /* copy | image — mirror of the statement */
  gap: 64px;
  align-items: center;
}

/* ── left column: the copy that appears on scroll ── */
.mue__copy { max-width: 520px; opacity: 0; will-change: opacity; }   /* JS reveals in phase 2 */
.mue__eyebrow {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8089a0;
  opacity: 0;                /* JS reveals */
  will-change: transform, opacity;
}
.mue__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.2vw, 2.9rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  color: rgba(21, 23, 29, .18);   /* fallback grey; JS paints each word grey→ink */
}
.mue__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.mue__word { color: rgba(21, 23, 29, .18); }
.mue__word--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.mue__text {
  margin: 22px 0 0;
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--ink-soft);
  opacity: 0;                /* JS staggers */
  will-change: transform, opacity;
}
.mue__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mue__list li {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: .99rem;
  font-weight: 500;
  color: #20242e;
  line-height: 1.4;
  opacity: 0;                /* JS staggers */
  will-change: transform, opacity;
}
.mue__ic {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border-radius: 8px;
  background: var(--cta-grad);
  display: grid;
  place-items: center;
  box-shadow: none;
}
.mue__ic svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── right column: the image panel (the entering "actor") ── */
.mue__visual {
  position: relative;
  width: 440px;
  justify-self: end;
  opacity: 1;                /* always present — no apparition; JS only slides it */
  will-change: transform;
}
.mue__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 24px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .06);
  box-shadow: none;
}
.mue__media::before {        /* soft gradient nappe behind the cut-out + bottom fade into white */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 18%, rgba(106, 77, 240, .16), transparent 60%),
    radial-gradient(120% 80% at 50% 100%, #fff 0%, transparent 58%),
    #fff;
}
.mue__media img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 10%;
  filter: drop-shadow(0 24px 40px rgba(33, 42, 74, .28));
  will-change: transform;
}
.mue__media::after {         /* signature gradient bar at the bottom edge */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--cta-grad);
  z-index: 3;
}
.mue__pill {
  position: absolute;
  top: 20px;
  right: -16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px 9px 11px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 13px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;                /* JS fades it in at the end */
  will-change: transform, opacity;
}
.mue__pill-ic {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: var(--cta-grad);
  box-shadow: none;
}

/* stacked layout — JS also forces the final state below 900px */
@media (max-width: 900px) {
  .mue { height: auto; }
  .mue__pin { position: static; height: auto; padding: 76px 22px; }
  .mue__stage { grid-template-columns: 1fr; gap: 34px; }
  .mue__copy { max-width: none; }
  .mue__visual { order: 2; justify-self: center; width: min(360px, 82vw); }
  .mue__title { font-size: clamp(1.5rem, 6.4vw, 2.2rem); }
  .mue__copy,
  .mue__eyebrow,
  .mue__text,
  .mue__list li,
  .mue__visual,
  .mue__media img,
  .mue__pill {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   Process — 4 steps "comment ça marche & pourquoi ta vie change"
   light theme, copy | visual grid alternating sides
   ============================================================ */
.steps {
  position: relative;
  z-index: 2;
  background: #f3f3f4;          /* near-white, matched to the 3D renders' background (rgb ~243) */
  padding: 168px 24px 130px;    /* top room for the curved arc divider + airy bottom */
}
/* curved black ARC at the top of the section; JS morphs it convex→concave on scroll.
   The SVG paints WHITE (= the statement above) down to the curve; below the curve the
   black section shows → the boundary is the arc. */
.steps__arc {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 190px;
  z-index: 0;
  display: block;
  pointer-events: none;
}
.steps__arc path { fill: #fff; }
.steps__eyebrow {
  position: relative;
  z-index: 1;
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6a7384;
}
/* ── ONE glossy 3D icon, STICKY, that morphs through the steps on scroll ── */
.steps__layout {
  position: relative;
  z-index: 1;
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.steps__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.morph {
  position: relative;
  width: clamp(170px, 22vw, 250px);
  height: clamp(170px, 22vw, 250px);
  perspective: 1200px;               /* 3D stage: the icon spins on its vertical axis */
}
.morph__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.morph__icon {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .14s linear;   /* faces swap edge-on (90°) — quick fade hides the sliver */
  will-change: opacity, transform;
}
.morph__icon.is-active { opacity: 1; }
.morph__icon .i3d {
  width: clamp(240px, 27vw, 350px);  /* the renders have inner padding — oversize to keep the object big */
  max-width: none;
  height: auto;
  display: block;
  /* feather the square photo edge so the render's grainy bg melts into the section bg
     (objects sit within ~55% radial of these renders — safe to fade from 56%) */
  -webkit-mask-image: radial-gradient(closest-side, #000 56%, transparent 86%);
  mask-image: radial-gradient(closest-side, #000 56%, transparent 86%);
}

.steps__list { position: relative; z-index: 1; }
.step {
  position: relative;
  min-height: 74vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step__num {
  display: block;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(58px, 6vw, 104px);
  line-height: .8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(21, 23, 29, .18);
  user-select: none;
}
.step__copy { position: relative; z-index: 1; max-width: 472px; }
.step__kicker {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #98a1b6;
}
.step__title {
  margin: 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(3.4rem, 6vw, 5.6rem);
  line-height: .96;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.step__title em {
  font-style: normal;
  background: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.step__text {
  margin: 26px 0 0;
  max-width: 420px;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.step__visual { display: flex; justify-content: center; }

/* ── reference-style DARK message-list card (one per step) ── */
.dcard {
  width: 100%;
  max-width: 560px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.drow {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.022);
  border: 1px solid rgba(255,255,255,.06);
}
.drow.is-dim { opacity: .5; }
.drow__av,
.drow__avi {
  flex: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  object-fit: cover;
}
.drow__avi {
  display: grid; place-items: center;
  background: var(--c, #42506e);
  color: #fff; font-size: .8rem; font-weight: 700;
  border: 1px solid rgba(255,255,255,.12);
}
.drow__id { display: flex; flex-direction: column; gap: 7px; flex: none; min-width: 170px; }
.drow__name {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .98rem; font-weight: 700; color: #f4f5f8; letter-spacing: -.01em;
}
.dch { width: 17px; height: 17px; border-radius: 4px; background-size: cover; background-position: center; flex: none; }
.dch--wa { background-image: url("assets/icon-whatsapp.webp"); }
.dch--gm { background-image: url("assets/icon-gmail.webp"); }
.dch--ig { background-image: url("assets/icon-instagram.webp"); }
.dtag {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 7px;
  white-space: nowrap;
}
.dtag--blue   { background: rgba(86,150,255,.16);  color: #8fbaff; }
.dtag--amber  { background: rgba(214,160,70,.16);  color: #e3bb74; }
.dtag--green  { background: rgba(78,196,128,.16);  color: #84e0a6; }
.dtag--violet { background: rgba(150,110,255,.18); color: #c0a9ff; }
.dtag--coral  { background: rgba(255,108,98,.16);  color: #ff998f; }
.dtag--grey   { background: rgba(255,255,255,.06);  color: #9aa2b3; }
.dtag--done   { background: rgba(78,196,128,.14);  color: #7fd9a0; }
.dtag__spark { width: 11px; height: 11px; border-radius: 3px; background: var(--cta-grad); flex: none; }
.drow__subject {
  margin-left: auto; text-align: right;
  font-size: .94rem; color: rgba(255,255,255,.5); letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* checkbox — only this toggles the row; clicking the row itself does nothing */
.dcheck {
  flex: none;
  width: 22px; height: 22px;
  margin-right: -2px;
  border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,.22);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background .18s ease, border-color .18s ease;
}
.dcheck svg {
  width: 12px; height: 12px;
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.5);
  transition: opacity .18s ease, transform .18s cubic-bezier(.34,1.56,.64,1);
}
.drow.is-done .dcheck { background: var(--cta-grad); border-color: transparent; }
.drow.is-done .dcheck svg { opacity: 1; transform: scale(1); }
.drow.is-done .drow__name,
.drow.is-done .drow__subject { text-decoration: line-through; opacity: .5; }
.drow.is-done .dtag { opacity: .45; }

/* shared mockup primitives */
.sv-card {
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .06);
  border-radius: 20px;
  box-shadow: none;
}
.sv-badge {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 9px;
  background: var(--cta-grad);
  display: grid; place-items: center;
  box-shadow: none;
}
.sv-badge svg { width: 15px; height: 15px; fill: #fff; }
.sv-badge--clock svg { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-pill {
  flex: none;
  font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.sv-pill--grad { background: var(--cta-grad); color: #fff; }
.sv-pill--amber { background: #fbe7c8; color: #97600f; }
.sv-pill--mute { background: #eceef3; color: #8a93a3; }
.sv-pill--soft { background: #eef1f6; color: #5d6675; font-weight: 600; }
.sv-check {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--cta-grad);
  display: grid; place-items: center; flex: none;
}
.sv-check svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* —— Step 1 : connect channels —— */
.sv-chan { width: 360px; padding: 24px; }
.sv-chan__title { font-weight: 700; font-size: 1rem; color: var(--ink); margin-bottom: 15px; }
.sv-chan__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sv-chan__row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(20, 22, 30, .06); }
.sv-chan__icon { width: 34px; height: 34px; border-radius: 9px; object-fit: contain; flex: none; }
.sv-chan__meta { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.sv-chan__name { font-weight: 600; font-size: .92rem; color: var(--ink); }
.sv-chan__sub { font-size: .78rem; color: var(--ink-soft); }
.sv-toggle { width: 40px; height: 23px; border-radius: 999px; background: #dfe3ea; position: relative; flex: none; }
.sv-toggle i { position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; box-shadow: none; }
.sv-toggle.is-on { background: var(--cta-grad); }
.sv-toggle.is-on i { left: 19px; }
.sv-chan__connect { font-size: .82rem; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid rgba(20, 22, 30, .14); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.sv-chan__progress { height: 5px; border-radius: 999px; background: #e7eaf0; margin: 16px 0 9px; overflow: hidden; }
.sv-chan__progress span { display: block; height: 100%; background: var(--cta-grad); border-radius: 999px; }
.sv-chan__foot { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--ink-soft); gap: 10px; }
.sv-chan__soon { color: #aab1c0; border: 1px dashed rgba(20, 22, 30, .16); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* —— Step 2 : morning briefing —— */
.sv-brief { width: 384px; padding: 22px; }
.sv-brief__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sv-brief__title { font-weight: 700; font-size: .98rem; color: var(--ink); margin-right: auto; }
.sv-brief__date { font-size: .8rem; color: var(--ink-soft); }
.sv-brief__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sv-prio { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: #f6f8fb; }
.sv-prio--hot { background: #fff; box-shadow: inset 3px 0 0 0 #FF7A2F; }
.sv-prio.is-dim { opacity: .5; }
.sv-av { position: relative; flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; font-size: .72rem; font-weight: 700; }
.sv-av--a { background: linear-gradient(135deg, #6A4DF0, #2A6BFF); }
.sv-av--b { background: linear-gradient(135deg, #FF8A1A, #FF5550); }
.sv-av--c { background: linear-gradient(135deg, #B047C9, #6A4DF0); }
.sv-ch { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 5px; border: 2px solid #fff; background-size: cover; background-position: center; }
.sv-ch--wa { background-image: url("assets/icon-whatsapp.webp"); }
.sv-ch--gm { background-image: url("assets/icon-gmail.webp"); }
.sv-ch--ig { background-image: url("assets/icon-instagram.webp"); }
.sv-prio__txt { margin-right: auto; font-size: .9rem; color: var(--ink); font-weight: 500; }
.sv-prio__txt em { font-style: normal; color: var(--ink-soft); }
.sv-brief__foot { margin-top: 14px; font-size: .8rem; color: var(--ink-soft); text-align: center; }

/* —— Step 3 : Mue draft —— */
.sv-draft { width: 400px; display: flex; flex-direction: column; gap: 14px; }
.sv-bubble { align-self: flex-start; max-width: 82%; background: #eef1f6; color: var(--ink); font-size: .92rem; padding: 11px 15px; border-radius: 16px; border-bottom-left-radius: 5px; }
.sv-reply {
  border: 1.5px solid transparent;
  border-radius: 18px;
  background: linear-gradient(#fff, #fff) padding-box, var(--cta-grad) border-box;
  padding: 16px 18px;
  box-shadow: none;
}
.sv-reply__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sv-reply__name { font-weight: 700; font-size: .9rem; color: var(--ink); margin-right: auto; }
.sv-reply__text { margin: 0 0 16px; font-size: .95rem; line-height: 1.5; color: var(--ink); font-style: italic; }
.sv-grad { font-style: italic; font-weight: 600; background: var(--cta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-reply__actions { display: flex; gap: 10px; }
.sv-btn { font-size: .88rem; font-weight: 600; border-radius: 10px; padding: 9px 16px; cursor: pointer; border: 1px solid transparent; }
.sv-btn--send { background: var(--ink); color: #fff; box-shadow: none; }
.sv-btn--ghost { background: #fff; color: var(--ink); border-color: rgba(20, 22, 30, .14); }
.sv-draft__tag { align-self: flex-end; display: flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.sv-draft__tag .sv-check { width: 18px; height: 18px; border-radius: 6px; }
.sv-draft__tag .sv-check svg { width: 10px; height: 10px; }

/* —— Step 4 : serenity —— */
.sv-zen { width: 384px; position: relative; display: flex; flex-direction: column; gap: 14px; }
.sv-zen__main { padding: 24px 26px; }
.sv-zen__stat { font-size: 1.05rem; font-weight: 600; color: var(--ink); display: flex; align-items: baseline; gap: 12px; }
.sv-zen__num { font-size: 4.4rem; font-weight: 800; line-height: .85; letter-spacing: -.03em; background: var(--cta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-zen__sub { margin-top: 8px; font-size: .9rem; color: var(--ink-soft); }
.sv-zen__avatars { display: flex; align-items: center; margin-top: 16px; }
.sv-zen__avatars img { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; margin-left: -8px; }
.sv-zen__avatars img:first-child { margin-left: 0; }
.sv-zen__done { margin-left: 10px; }
.sv-zen__hours { display: flex; align-items: center; gap: 14px; padding: 16px 20px; }
.sv-zen__hwrap { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.sv-zen__hnum { font-size: 1.55rem; font-weight: 800; line-height: 1; background: var(--cta-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sv-zen__hlbl { font-size: .82rem; color: var(--ink-soft); }
.sv-zen__hbar { height: 4px; border-radius: 999px; background: #e7eaf0; overflow: hidden; margin-top: 4px; }
.sv-zen__hbar i { display: block; height: 100%; width: 78%; background: var(--cta-grad); border-radius: 999px; }
.sv-zen__pill {
  position: absolute; top: -14px; right: -12px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: none;
  border-radius: 12px; padding: 8px 12px;
  font-size: .8rem; font-weight: 600; color: var(--ink); white-space: nowrap;
}
.sv-dot { width: 8px; height: 8px; border-radius: 50%; background: #2ec26b; flex: none; box-shadow: 0 0 0 3px rgba(46, 194, 107, .18); }

@media (max-width: 900px) {
  .steps__layout { grid-template-columns: 1fr; gap: 0; }
  .steps__sticky { position: sticky; top: 64px; height: auto; padding: 8px 0 16px; }
  .morph { width: clamp(120px, 34vw, 172px); height: clamp(120px, 34vw, 172px); }
  .morph__icon .i3d { width: clamp(170px, 46vw, 240px); }
  .step { min-height: 52vh; }
  .step__copy { max-width: none; }
  .step__num { font-size: clamp(46px, 13vw, 80px); }
  .dcard { max-width: 100%; }
}
@media (max-width: 560px) {
  .drow { gap: 12px; padding: 13px 14px; }
  .drow__av, .drow__avi { width: 40px; height: 40px; }
  .drow__id { min-width: 0; }
  .drow__subject { display: none; }   /* keep avatar + name + tag on narrow phones */
}

@media (max-width: 820px) {
  .feature { padding: 70px 18px 90px; margin-top: 0; }
  .screen-collage { display: none; }       /* keep mobile clean */
  .screen-collage { display: none; }       /* keep mobile clean */
  .inbox { box-shadow: 0 0 0 8px rgba(255,255,255,.5); }
  .statement__pin { min-height: 56vh; padding: 0 22px; }
  .statement__card { display: none; }   /* phase 2 is desktop-only */
  .statement__text { font-size: clamp(1.5rem, 6.4vw, 2.2rem); transform: none !important; }
  .inbox {
    grid-template-columns: 1fr;
    height: auto;
  }
  .inbox__side {
    border-right: 0;
    border-bottom: 1px solid rgba(20,22,30,.07);
    max-height: 290px;
  }
  .thread { min-height: 470px; }
  .bubble { max-width: 84%; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Testimonials — ported "Testimonial" component (.tm namespace)
   ============================================================ */
.testimonials {
  position: relative;
  z-index: 2;
  background: var(--bg);
  padding: 0 0 96px;
}

.tm {
  --tm-navy:  #1C2E59;
  --tm-ink:   #2A2F3A;
  --tm-muted: #5B6573;
  --tm-line:  #E5E7EC;
  --tm-stone: #F5F1E8;
  --tm-ease:  cubic-bezier(0.16, 1, 0.3, 1);
  --tm-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  width: min(1320px, calc(100% - 48px));
  margin: clamp(40px, 6vh, 80px) auto 0;
  padding: clamp(64px, 9vh, 104px) 0;
  font-family: var(--tm-sans);
  box-sizing: border-box;
}
.tm *, .tm *::before, .tm *::after { box-sizing: border-box; }
.tm__bg { position: absolute; inset: 0; z-index: -1; background: #16223f; }
.tm__bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 19, 34, 0.22), rgba(14, 19, 34, 0.34));
}
.tm__inner { max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
.tm__proof { display: flex; flex-direction: column; gap: 8px; color: #fff; max-width: 640px; margin: 0 auto 22px; }
.tm__eyebrow { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.tm__rating-row { display: flex; align-items: center; gap: 14px; }
.tm__avatars { display: flex; align-items: center; flex-shrink: 0; }
.tm__avatars img {
  width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
  background: var(--tm-stone); box-shadow: none;
}
.tm__avatars img + img { margin-left: -8px; }
.tm__rating-info { display: flex; flex-direction: column; gap: 4px; }
.tm__stars-lg { display: inline-flex; align-items: center; gap: 2px; font-size: 16px; letter-spacing: 1px; line-height: 1; color: #ffd66b; }
.tm__score { font-size: 14px; font-weight: 500; margin-left: 8px; letter-spacing: 0; color: #fff; }
.tm__caption { font-size: 14px; font-weight: 500; letter-spacing: -0.005em; }
.tm__card {
  max-width: 640px; margin: 0 auto; background: #fff;
  border-radius: 16px; padding: 26px 32px 22px;
  box-shadow: none; text-align: left;
}
.tm__card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.tm__stars { color: #f3b53f; letter-spacing: 3px; font-size: 13px; line-height: 1; }
.tm__date { font-size: 13px; color: var(--tm-muted); }
.tm__quote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--tm-ink); min-height: 3.2em; }
.tm__foot { margin-top: 26px; }
.tm__author { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tm-muted); font-weight: 600; }
.tm__avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tm__dots { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.tm__bar { width: 28px; height: 4px; border-radius: 2px; background: var(--tm-line); overflow: hidden; position: relative; }
.tm__bar i { position: absolute; inset: 0; width: 0%; background: var(--accent-grad); border-radius: 2px; }
.tm__reveal {
  opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(8px);
  transition: opacity 1.1s var(--tm-ease), transform 1.2s var(--tm-ease), filter 1.1s var(--tm-ease);
  will-change: opacity, transform, filter;
}
.tm__reveal--d1 { transition-delay: 0.08s; }
.tm.is-visible .tm__reveal { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }

@media (max-width: 860px) {
  .testimonials { padding-bottom: 72px; }
  .tm { width: 100%; border-radius: 0; padding: 72px 0 80px; margin: 56px 0 0; }
  .tm__proof { padding: 0 24px; align-items: center; text-align: center; gap: 16px; margin-bottom: 30px; text-shadow: 0 2px 16px rgba(10, 19, 34, 0.5); }
  .tm__rating-row { flex-direction: column; align-items: center; gap: 14px; }
  .tm__rating-info { align-items: center; gap: 6px; }
  .tm__caption { white-space: nowrap; }
  .tm__eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; opacity: 0.92; }
  .tm__avatars img { width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.92); box-shadow: none; }
  .tm__avatars img + img { margin-left: -14px; }
  .tm__card { margin: 0 16px; padding: 22px 22px 18px; }
  .tm__quote { font-size: 15px; line-height: 1.55; min-height: 7em; }
}
@media (max-width: 720px) {
  .tm__reveal { filter: none; transform: translate3d(0, 24px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .tm__reveal { opacity: 1; transform: none; filter: none; }
}

/* ============================================================
   Post-screen flow — pill / statement logos / why / gallery / pricing / faq / closer
   ============================================================ */

/* pill — white chip with a soft shadow ring (reference style, no dot) */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(21, 23, 29, .05);
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .005em;
  color: var(--ink);
}

/* generic WAVE reveal for section titles (same grey -> gradient -> black as the hero/statement;
   words are wrapped by JS into .wv-word, gradient sliced continuous, delays line-by-line) */
.wv-word {
  background-image: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: #d3d7de;     /* opaque light grey hides the gradient until the sweep */
  color: #d3d7de;
  opacity: 0;
  transform: translateY(.16em);
  will-change: opacity, transform;
}
.wv-word--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: 0;
}
.is-in > .wv-word {
  animation: stmtWordIn .8s cubic-bezier(.4, 0, .25, 1) both;
  animation-delay: var(--d, 0s);
}
@media (prefers-reduced-motion: reduce) {
  .wv-word {
    animation: none !important;
    opacity: 1;
    transform: none;
    -webkit-text-fill-color: #14161c;
    color: #14161c;
  }
}

/* shared section title (bold sans + serif italic accent) */
.why__title, .pricing__title, .faq__title {
  margin: 24px 0 0;
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.1vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--ink);
}
.why__title em, .pricing__title em, .faq__title em, .closer__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: 0;
}

/* wordmarks under the promise (the reference moves the logos here) — smaller & raised;
   they FADE+SLIDE IN from the bottom once the phrase's wave has finished
   (--logos-delay is computed by the statement JS = end of the last word's reveal) */
.statement__logos {
  opacity: 0;
  transform: translateY(-30px);   /* slides DOWN from the top */
  will-change: opacity, transform;
}
.statement.is-in .statement__logos {
  animation: logosIn .85s cubic-bezier(.22, 1, .36, 1) var(--logos-delay, 1.9s) both;
}
@keyframes logosIn {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .statement__logos { opacity: 1; transform: none; }
  .statement.is-in .statement__logos { animation: none; }
}
.statement__logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 3.6vw, 46px);
  padding: 0 24px;
  margin-top: -140px;           /* pulled up close under the phrase */
  color: #1b2433;
}
.statement__logos .tlogo--candle { font-size: clamp(1rem, 1.6vw, 1.34rem); }
.statement__logos .tlogo--arc { font-size: clamp(.95rem, 1.5vw, 1.22rem); padding-top: 11px; }
.statement__logos .tlogo__arc { width: clamp(38px, 3.9vw, 47px); }
.statement__logos .tlogo--agnost { font-size: clamp(.78rem, 1.2vw, 1.02rem); }
.statement__logos .tlogo--adria { font-size: clamp(.85rem, 1.45vw, 1.15rem); }
.statement__logos .tlogo__mark { width: clamp(14px, 1.5vw, 19px); }

/* ── WHY : ONE simple white rounded rect, HUGGED by a grey collar that follows its
   top + sides then flares into the full-width grey band (the statement's white runs
   down BESIDE the collar until the band starts) ── */
.why {
  position: relative;
  z-index: 3;
  background: #fff;
  padding: 96px 24px 100px;
}
/* full-width grey band from below the collar to the section end */
.why::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 306px;                    /* = card top (96) + 210 */
  bottom: 0;
  background: #ededee;
}
/* the grey collar hugging the card's top corners and sides */
.why__collar {
  position: absolute;
  top: 78px;                     /* card top (96) − collar thickness (18) */
  left: 50%;
  transform: translateX(-50%);
  width: min(1116px, 100%);      /* card width + 2×18 */
  height: 228px;                 /* 18 + 210 (down to the band) */
  background: #ededee;
  border-radius: 62px 62px 0 0;  /* card radius 44 + thickness 18 */
}
/* concave fillets where the collar legs flare into the full band (white quarter cuts) */
.why__collar::before,
.why__collar::after {
  content: "";
  position: absolute;
  top: calc(100% - 24px);
  width: 24px;
  height: 24px;
}
.why__collar::before {
  left: -24px;
  background: radial-gradient(circle 24px at 0 0, rgba(237, 237, 238, 0) 23px, #ededee 24px);
}
.why__collar::after {
  right: -24px;
  background: radial-gradient(circle 24px at 100% 0, rgba(237, 237, 238, 0) 23px, #ededee 24px);
}
.why__card {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  background: #fff;
  border-radius: 44px;
  padding: 64px clamp(24px, 6vw, 96px) 80px;
  text-align: center;
  box-shadow: none;
}
/* 3-column rows like the reference: /num far left · sticky visual centre · big copy right */
.why__layout {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 80px 380px 1fr;
  gap: 0 28px;
  align-items: start;
  text-align: left;
}
.why__sticky {
  grid-column: 2;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why__list { grid-column: 3; }
/* ONE cut-out 3D visual that spins on itself and transforms between steps */
.wmorph {
  position: relative;
  width: clamp(220px, 23vw, 310px);
  height: clamp(220px, 23vw, 310px);
  perspective: 1200px;
}
.wmorph__spin {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}
.wmorph__icon {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .14s linear;   /* faces swap edge-on (90°) — quick fade hides the sliver */
  will-change: opacity, transform;
}
.wmorph__icon.is-active { opacity: 1; }
.wmorph__icon img {
  width: 112%;
  max-width: none;
  height: auto;
  display: block;
}
/* Three.js mount (icon 1) — fills the morph stage */
.wmorph__icon .w3d {
  width: 88%;                  /* bigger canvas, smaller object inside → same visual size, no crop */
  height: 88%;
  flex: none;
  transform: translateX(-6%);
}
.wmorph__icon .w3d canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
/* Mue pixel-art (carte 02 « Mue rédige pour toi ») — sprite SVG 40×40
   rendu sans antialiasing pour garder les pixels nets, et une légère
   pulsation pour évoquer la "respiration" du sprite animé dans le SaaS. */
.wmorph__icon .mue-pixel {
  width: 88%;
  height: 88%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  filter: drop-shadow(0 14px 24px rgba(123, 92, 255, .28));
  animation: mue-breathe 2.8s ease-in-out infinite;
}
@keyframes mue-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .wmorph__icon .mue-pixel { animation: none; }
}
.wstep {
  position: relative;
  min-height: 100vh;             /* one viewport per step → its centred text coincides
                                    with the centred sticky visual = same level */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
/* the /0X sits in the far-left column, vertically centred on the row (ref UI) */
.why__num {
  position: absolute;
  left: -516px;                /* −(num col 80 + gap 28 + visual col 380 + gap 28) */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.2rem, 3.2vw, 3rem);
  letter-spacing: -.02em;
  color: #d9dbe0;
}
.why__name {
  margin: 0 0 18px;
  font-weight: 700;
  font-size: clamp(2.2rem, 3.4vw, 3.1rem);
  letter-spacing: -.03em;
  color: var(--ink);
}
.why__text {
  margin: 0;
  max-width: 560px;
  font-size: 1.02rem;
  line-height: 1.62;
  color: var(--ink-soft);
}
.why__cta {
  margin-top: 48px;
  display: flex;
  justify-content: center;
}

/* ── PROOF : 3 stats sur fond clair entre "Pourquoi" et la galerie ──
   Cible : matérialiser le gain de temps revendiqué dans le hero.
   Design : trois grosses cartes chiffrées, héro typo serif, fond doux.
   ----------------------------------------------------------------- */
.proof {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 130px 24px 110px;
}
.proof__inner {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
}
.proof__head {
  text-align: center;
  margin-bottom: 72px;
}
.proof__title {
  margin: 22px auto 0;
  max-width: 760px;
  font-family: var(--font-serif, "Instrument Serif", "Times New Roman", serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--ink, #14151a);
}
.proof__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.proof__stat {
  position: relative;
  padding: 36px 32px 34px;
  background: #fafbfd;
  border: 1px solid rgba(20, 22, 30, .06);
  border-radius: 22px;
  box-shadow: 0 1px 2px rgba(20, 22, 30, .03);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s cubic-bezier(.22, 1, .36, 1);
}
.proof__stat:hover {
  transform: translateY(-4px);
  box-shadow:
    0 18px 34px -18px rgba(20, 22, 30, .18),
    0 4px 10px rgba(20, 22, 30, .04);
}
.proof__num {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-serif, "Instrument Serif", "Times New Roman", serif);
  font-weight: 400;
  font-size: clamp(3rem, 5.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.02em;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.proof__unit {
  font-family: inherit;
  font-size: .42em;
  letter-spacing: 0;
  color: #6b7180;
  background: none;
  -webkit-text-fill-color: #6b7180;
}
.proof__name {
  margin: 14px 0 12px;
  font-size: 1.12rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink, #14151a);
}
.proof__sub {
  font-size: .95rem;
  line-height: 1.55;
  color: #5b6275;
  margin: 0;
}
.proof__sub sup {
  font-size: .65em;
  color: #8b93a4;
}
.proof__foot {
  margin: 56px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  color: #8b93a4;
}
.proof__foot sup {
  margin-right: 2px;
}

@media (max-width: 980px) {
  .proof { padding: 90px 22px 80px; }
  .proof__head { margin-bottom: 48px; }
  .proof__grid { grid-template-columns: 1fr; gap: 18px; }
  .proof__stat { padding: 28px 24px; }
}

/* ═════════════════════════════════════════════════════════════════════
   NOUVELLES SECTIONS LANDING (ordre d'apparition) :
   .chans   — Canaux supportés (après Statement)
   .meet    — Voici Mue (entre Why et Proof)
   .testi   — Témoignages beta (après Proof)
   .compare — Tableau vs alternatives (avant Pricing)
   .trust2  — Bande sécurité (juste avant Pricing)
   ═════════════════════════════════════════════════════════════════════ */

/* ── Canaux : marquee horizontal infini des outils connectables ──────
   Mécanique : le .chans__track contient 2 copies de la liste de logos
   et se translate de 0 → -50% en boucle. Comme la 2e copie est
   identique à la 1ère, la fin de la boucle aboutit pile sur l'état
   initial → pas de saut visible. Pause au hover (UX courtoise). */
.chans {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 40px 0 100px;                              /* moins de padding-top : suit directement Kickoff dans le darkblock */
  overflow: hidden;
}
.chans__inner {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
  padding: 0 24px;
}
.chans__head { text-align: center; margin-bottom: 56px; }
.chans__title {
  margin: 20px auto 12px;
  max-width: 720px;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.chans__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.chans__sub {
  max-width: 560px; margin: 0 auto;
  color: #5b6275; font-size: 1rem; line-height: 1.55;
}

/* Le rail du marquee, avec fade gauche/droite en mask pour ne pas
   couper sec les logos en bord. */
.chans__marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.chans__track {
  display: flex;
  gap: 22px;
  width: max-content;
  padding: 12px 0;
  animation: chans-scroll 40s linear infinite;
}
.chans__marquee:hover .chans__track { animation-play-state: paused; }

/* Version statique : logos centrés sur une ligne, pas de défilement */
.chans__static {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px 44px;
  padding: 12px 24px;
  max-width: 1180px;
  margin: 0 auto;
}

@keyframes chans-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }   /* on a doublé la liste → -50% = 1 cycle */
}

/* Cartes logo */
.chans__logo {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: #fafbfd;
  border: 1px solid rgba(20, 22, 30, .06);
  border-radius: 16px;
  font-weight: 600;
  font-size: .95rem;
  color: var(--ink);
  white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.chans__logo:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 22, 30, .12);
  box-shadow: 0 10px 24px -14px rgba(20, 22, 30, .2);
}
.chans__logo img,
.chans__logo .chans__svg {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  flex: none;
}
.chans__logo img { object-fit: contain; }
.chans__svg { background: #fff; box-shadow: inset 0 0 0 1px rgba(20, 22, 30, .06); }
.chans__svg svg { width: 20px; height: 20px; display: block; }
.chans__svg--li { background: #0A66C2; box-shadow: none; }
.chans__svg--dc { background: #5865F2; box-shadow: none; }
.chans__svg--tg { background: #229ED9; box-shadow: none; }
.chans__svg--ic { background: #f1f3f8; box-shadow: inset 0 0 0 1px rgba(20, 22, 30, .04); }
.chans__svg--im { background: #f1f3f8; box-shadow: inset 0 0 0 1px rgba(20, 22, 30, .04); }

.chans__foot {
  text-align: center; margin: 38px auto 0;
  padding: 0 24px;
  font-size: .9rem; color: #6b7180;
}
.chans__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .chans { padding: 70px 0 60px; }
  .chans__head { margin-bottom: 40px; }
  .chans__track { gap: 14px; animation-duration: 30s; }     /* plus court → cadence plus vive sur petit écran */
  .chans__logo { padding: 11px 16px; font-size: .88rem; }
  .chans__logo img,
  .chans__logo .chans__svg { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .chans__track { animation: none; transform: translate3d(0, 0, 0); }
}

/* ── 4 piliers (style "produits/modules" inspiré Monday) ──────────────
   Layout : header en grille 2 colonnes (titre / sub+CTAs), puis corps
   en grille 2 colonnes (4 cartes 2×2 / photo labellisée). Sur mobile,
   tout passe en pile verticale. */
.pillars {
  position: relative;
  z-index: 2;
  background: #f4f5f9;
  padding: 60px 24px;
  min-height: 100vh;
  max-height: 100vh;                                    /* la section ne dépasse pas le viewport */
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pillars__inner {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 24px;
}
.pillars__head {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 0;
  flex: none;
}
.pillars__title {
  margin: 0;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(2.2rem, 4.1vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.022em;
  color: var(--ink);
}
.pillars__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pillars__intro {
  display: flex; flex-direction: column;
  align-items: flex-end;                   /* colonne droite : CTAs ferrés à droite */
  gap: 22px;
}
.pillars__sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: #5b6275;
}
.pillars__ctas {
  display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: flex-end;               /* ferre les 2 boutons à droite */
}
/* CTAs façon Monday : pilule noire pleine + pilule bordée blanche.
   Variantes "plain" pour ne pas hériter du système .btn-cta (qui a son
   propre rail d'animation hover du label). Ici on veut sobre et net. */
.btn-cta-plain {
  display: inline-flex; align-items: center; gap: 10px;
  height: 48px;
  padding: 0 24px;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  font-size: .98rem;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease;
}
.btn-cta-plain:hover {
  background: #000;
  transform: translateY(-1px);
}
.btn-cta-plain span { font-size: 1.05em; line-height: 1; }
.btn-demo-plain {
  display: inline-flex; align-items: center;
  height: 48px;
  padding: 0 24px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .18);
  color: var(--ink);
  font-weight: 500;
  font-size: .98rem;
  border-radius: 14px;
  text-decoration: none;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn-demo-plain:hover {
  background: #fafbfd;
  border-color: rgba(20, 22, 30, .35);
  transform: translateY(-1px);
}

/* Corps : grille 2 colonnes (cartes / visuel), rempli l'espace vertical restant */
.pillars__body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 30px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  min-height: 0;
}

/* Carte pilier */
.pcard {
  display: flex; flex-direction: column; gap: 12px;
  padding: 20px 22px 18px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .05);
  border-radius: 18px;
  transition: transform .25s ease, box-shadow .25s ease;
  min-height: 0;
  overflow: hidden;
}
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(20, 22, 30, .22);
}
.pcard__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 11px;
  flex: none;
}
.pcard__icon svg { width: 22px; height: 22px; display: block; }
.pcard__icon--lav { background: #6A4DF0; }
.pcard__icon--cyan { background: #0fb6b6; }
.pcard__icon--lime { background: #18b85c; }
.pcard__icon--rose { background: #F25E6B; }
.pcard__brand {
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--ink);
}
.pcard__brand strong { font-weight: 700; }
.pcard__brand span { color: #5b6275; }
.pcard__title {
  margin: 0;
  font-size: 1.12rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.014em;
  color: var(--ink);
}
.pcard__text {
  margin: 0;
  flex: 1;
  font-size: .98rem;
  line-height: 1.5;
  color: var(--ink);
}
.pcard__more {
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.pcard__more:hover { text-decoration-thickness: 2px; }

/* Visuel à droite : photo + labels-canaux flottants, remplit toute la hauteur dispo */
.pillars__visual {
  position: relative;
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, #f7e6dd 100%);
  min-height: 0;
  height: 100%;
}
.pillars__photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}
.ptag {
  position: absolute;
  top: var(--top, 20%);
  left: var(--left, 50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 8px;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(20, 22, 30, .08),
    0 10px 24px -14px rgba(20, 22, 30, .25);
  animation: ptag-float 5s ease-in-out infinite;
}
.ptag:nth-of-type(2) { animation-delay: -1.2s; }
.ptag:nth-of-type(3) { animation-delay: -2.4s; }
.ptag:nth-of-type(4) { animation-delay: -3.6s; }
@keyframes ptag-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.ptag img,
.ptag__svg {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: grid; place-items: center;
  object-fit: contain;
  flex: none;
}
.ptag__svg { background: #0A66C2; }
.ptag__svg svg { width: 14px; height: 14px; display: block; }

/* Tags "persona" : pastilles colorées Monday-style, une couleur par label */
.ptag--persona {
  background: var(--tag, #191542);
  color: var(--tag-ink, #fff);
  padding: 7px 14px;
  font-weight: 600;
  border-radius: 8px;                                   /* rectangle arrondi, plus proche du Monday */
  backdrop-filter: none;
  box-shadow:
    0 1px 2px rgba(0,0,0,.12),
    0 12px 28px -12px rgba(0,0,0,.35);
}

@media (max-width: 1100px) {
  .pillars {
    max-height: none;                                  /* on relâche la contrainte hauteur en mobile/tablette */
    min-height: 0;
    padding: 80px 24px;
    display: block;
  }
  .pillars__inner { height: auto; }
  .pillars__head { grid-template-columns: 1fr; gap: 28px; align-items: start; }
  .pillars__body { grid-template-columns: 1fr; gap: 22px; }
  .pillars__visual { min-height: 380px; height: auto; }
}
@media (max-width: 720px) {
  .pillars { padding: 70px 22px; }
  .pillars__grid { grid-template-columns: 1fr; }
  .pillars__visual { min-height: 340px; }
  .ptag { font-size: .76rem; padding: 6px 12px 6px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ptag { animation: none; }
}

/* ── Sprawl : framing du problème, 3 nœuds + 3 stats ──────────────────
   Mécanique : 3 .sprawl__tangle côte à côte, chacun avec un SVG nœud
   (filet/ruban) positionné absolument et des icônes/quotes flottantes
   au-dessus. En mobile on passe en pile. */
.sprawl {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 130px 24px 110px;
  text-align: center;
  margin-top: 0;                              /* pas de chevauchement */
  border-radius: 0;
  box-shadow: none;
}
.sprawl__head {
  max-width: 980px;
  margin: 0 auto 20px;          /* réduit la marge entre titre et nœud */
}
.sprawl__title {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(2rem, 3.8vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: var(--ink);
}
.sprawl__neg {
  display: block;
  margin-top: 4px;
  color: #5b6275;
}
.sprawl__italic {
  display: block;
  margin-top: 4px;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-style: italic;
  font-weight: 400;
}
.sprawl__sub {
  margin: 0 auto;
  max-width: 620px;
  font-size: 1.05rem;
  color: #8b93a4;
  line-height: 1.55;
}

/* La visualisation : 3 nœuds alignés horizontalement. Conteneur en grille
   pour répartir 1/3 1/3 1/3. Chaque tangle est en position relative pour
   ancrer les icônes/quotes flottantes. */
/* Viz : un seul conteneur plein cadre qui héberge le fil unique
   et toutes les icônes/quotes positionnées en absolu.
   Sort de la padding latérale du parent .sprawl pour s'étendre sur
   toute la largeur du viewport — le nœud ne doit pas être coupé. */
.sprawl__viz {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: -100px;                 /* remonte le nœud plus près du titre */
  margin-bottom: 80px;
  aspect-ratio: 1200 / 480;
  min-height: 360px;
  overflow: visible;                  /* le ruban peut dépasser librement */
}
/* Variante image : les 3 nœuds sont une image statique (sprawl-knots.webp) */
.sprawl__viz--img {
  aspect-ratio: auto;
  min-height: 0;
  margin-top: 40px;
  margin-bottom: 40px;
  max-width: 1200px;
  width: min(96vw, 1200px);
  margin-left: auto;
  margin-right: auto;
  transform: none;
  display: block;
}
.sprawl__pic {
  display: block;
  width: 100%;
  height: auto;
}
/* Force visible sur tous les ancêtres pour qu'aucun ne clippe */
.sprawl { overflow: visible; }
.sprawl__knot { overflow: visible !important; }
.sprawl__knot path { overflow: visible; }

/* Un seul fil sinueux SVG qui couvre toute la viz. Au repos il est
   visible et stable (pas d'animation initiale "fil simple") puisque le
   nouveau design est déjà un fil continu. On l'anime juste en fade-in
   léger au moment où .is-tangled arrive. */
.sprawl__knot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  transform: none;
  transition: opacity .8s ease;
  overflow: visible;                              /* laisse le ruban dépasser du viewBox sans être coupé */
}
/* Path drawing : transition CSS sur changement de classe.
   Le seul mécanisme qui re-render correctement chez l'utilisateur.
   On a 21 classes (p0..p100 par paliers de 5%) — le JS ajoute la bonne
   selon la position de scroll. Les transitions lissent entre les états. */
.sprawl__knot path {
  stroke-dasharray: 3000;
  stroke-dashoffset: 3000;
  transition: stroke-dashoffset .5s cubic-bezier(.22, 1, .36, 1);
}
.sprawl.p2 .sprawl__knot path { stroke-dashoffset: 2940; }
.sprawl.p5 .sprawl__knot path { stroke-dashoffset: 2850; }
.sprawl.p7 .sprawl__knot path { stroke-dashoffset: 2790; }
.sprawl.p10 .sprawl__knot path { stroke-dashoffset: 2700; }
.sprawl.p12 .sprawl__knot path { stroke-dashoffset: 2640; }
.sprawl.p15 .sprawl__knot path { stroke-dashoffset: 2550; }
.sprawl.p17 .sprawl__knot path { stroke-dashoffset: 2490; }
.sprawl.p20 .sprawl__knot path { stroke-dashoffset: 2400; }
.sprawl.p22 .sprawl__knot path { stroke-dashoffset: 2340; }
.sprawl.p25 .sprawl__knot path { stroke-dashoffset: 2250; }
.sprawl.p27 .sprawl__knot path { stroke-dashoffset: 2190; }
.sprawl.p30 .sprawl__knot path { stroke-dashoffset: 2100; }
.sprawl.p32 .sprawl__knot path { stroke-dashoffset: 2040; }
.sprawl.p35 .sprawl__knot path { stroke-dashoffset: 1950; }
.sprawl.p37 .sprawl__knot path { stroke-dashoffset: 1890; }
.sprawl.p40 .sprawl__knot path { stroke-dashoffset: 1800; }
.sprawl.p42 .sprawl__knot path { stroke-dashoffset: 1740; }
.sprawl.p45 .sprawl__knot path { stroke-dashoffset: 1650; }
.sprawl.p47 .sprawl__knot path { stroke-dashoffset: 1590; }
.sprawl.p50 .sprawl__knot path { stroke-dashoffset: 1500; }
.sprawl.p52 .sprawl__knot path { stroke-dashoffset: 1440; }
.sprawl.p55 .sprawl__knot path { stroke-dashoffset: 1350; }
.sprawl.p57 .sprawl__knot path { stroke-dashoffset: 1290; }
.sprawl.p60 .sprawl__knot path { stroke-dashoffset: 1200; }
.sprawl.p62 .sprawl__knot path { stroke-dashoffset: 1140; }
.sprawl.p65 .sprawl__knot path { stroke-dashoffset: 1050; }
.sprawl.p67 .sprawl__knot path { stroke-dashoffset: 990; }
.sprawl.p70 .sprawl__knot path { stroke-dashoffset: 900; }
.sprawl.p72 .sprawl__knot path { stroke-dashoffset: 840; }
.sprawl.p75 .sprawl__knot path { stroke-dashoffset: 750; }
.sprawl.p77 .sprawl__knot path { stroke-dashoffset: 690; }
.sprawl.p80 .sprawl__knot path { stroke-dashoffset: 600; }
.sprawl.p82 .sprawl__knot path { stroke-dashoffset: 540; }
.sprawl.p85 .sprawl__knot path { stroke-dashoffset: 450; }
.sprawl.p87 .sprawl__knot path { stroke-dashoffset: 390; }
.sprawl.p90 .sprawl__knot path { stroke-dashoffset: 300; }
.sprawl.p92 .sprawl__knot path { stroke-dashoffset: 240; }
.sprawl.p95 .sprawl__knot path { stroke-dashoffset: 150; }
.sprawl.p97 .sprawl__knot path { stroke-dashoffset: 90; }
.sprawl.p100 .sprawl__knot path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .sprawl__knot path { transition: none; stroke-dashoffset: 0; }
}

/* État animé : la section est entrée dans le viewport */
.sprawl.is-tangled .sprawl__thread { opacity: 0; transform: translateY(-50%) scaleY(.1); }
.sprawl.is-tangled .sprawl__knot { opacity: 1; }

/* Icônes (.sicon) et quotes (.sq) flottantes, positionnées par var CSS.
   AU REPOS : opacité 0 + collapse au centre (translate vers le milieu
   horizontal de la tangle), comme si elles étaient encore "dans" le fil.
   À .is-tangled : elles s'écartent vers leur position finale + apparaissent
   en quinconce après l'apparition du nœud. */
.sicon {
  position: absolute;
  top: var(--top, 50%);
  left: var(--left, 50%);
  /* État repos : ramassé au centre, invisible, petit */
  transform: translate(-50%, -50%) scale(.3);
  opacity: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 22, 30, .06),
    0 10px 28px -10px rgba(20, 22, 30, .18);
  transition:
    opacity .6s ease,
    transform .9s cubic-bezier(.34, 1.5, .64, 1);
  z-index: 2;
}
.sprawl.is-tangled .sicon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: sicon-float 5s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);                   /* prolonge l'idle après que tout est en place */
}
/* Stagger d'apparition des icônes dans chaque tangle */
.sprawl.is-tangled .sicon:nth-of-type(1) { transition-delay: .35s; --anim-delay: 0s; }
.sprawl.is-tangled .sicon:nth-of-type(2) { transition-delay: .45s; --anim-delay: -.8s; }
.sprawl.is-tangled .sicon:nth-of-type(3) { transition-delay: .55s; --anim-delay: -1.6s; }
.sprawl.is-tangled .sicon:nth-of-type(4) { transition-delay: .65s; --anim-delay: -2.4s; }
.sprawl.is-tangled .sicon:nth-of-type(5) { transition-delay: .75s; --anim-delay: -3.2s; }
/* La 2e tangle commence légèrement plus tard (suit le stagger global) */
.sprawl.is-tangled .sprawl__tangle:nth-child(3) .sicon { transition-delay: calc(.15s + var(--idx-stagger, .35s)); }
.sprawl.is-tangled .sprawl__tangle:nth-child(4) .sicon { transition-delay: calc(.3s + var(--idx-stagger, .35s)); }

@keyframes sicon-float {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, calc(-50% - 5px)) scale(1); }
}
.sicon img,
.sicon svg {
  width: 32px;
  height: 32px;
  display: block;
  object-fit: contain;
}
.sicon--li { background: #0A66C2; }
.sicon--sl { background: #fff; }
.sicon--mue {
  background: linear-gradient(135deg, #F3EAFE, #FBCFE8);
  width: 64px; height: 64px;
}
.sicon--mue img,
.sicon--mue svg {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.sicon--spark {
  background: #fff;
  color: #B79EFC;
  width: 44px; height: 44px;
}
.sicon--spark svg { width: 24px; height: 24px; }

/* Bulles "questions" (3e tangle) — même mécanique d'apparition que .sicon */
.sq {
  position: absolute;
  top: var(--top, 50%);
  left: var(--left, 50%);
  /* État repos : ramassé invisible */
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  padding: 10px 16px;
  background: #fff;
  border-radius: 14px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  box-shadow:
    0 1px 2px rgba(20, 22, 30, .06),
    0 10px 28px -10px rgba(20, 22, 30, .18);
  transition:
    opacity .6s ease,
    transform .9s cubic-bezier(.34, 1.5, .64, 1);
  z-index: 2;
}
.sprawl.is-tangled .sq {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  animation: sicon-float 5s ease-in-out infinite;
  animation-delay: var(--anim-delay, 0s);
}
.sprawl.is-tangled .sq:nth-of-type(1) { transition-delay: .8s; --anim-delay: 0s; }
.sprawl.is-tangled .sq:nth-of-type(2) { transition-delay: .95s; --anim-delay: -1.2s; }
.sprawl.is-tangled .sq:nth-of-type(3) { transition-delay: 1.1s; --anim-delay: -2.4s; }

/* 3 stats colonnes (sous la viz) */
.sprawl__stats {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  text-align: left;
}
.sprawl__stat {
  padding-top: 26px;
  border-top: 1px solid rgba(20, 22, 30, .1);
}
.sprawl__stat h3 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.sprawl__stat p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #5b6275;
}
.sprawl__stat strong {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 980px) {
  .sprawl { padding: 80px 22px; }
  .sprawl__head { margin-bottom: 50px; }
  .sprawl__viz { gap: 14px; margin-bottom: 50px; }
  .sicon { width: 44px; height: 44px; border-radius: 11px; }
  .sicon img, .sicon svg { width: 24px; height: 24px; }
  .sicon--mue { width: 50px; height: 50px; }
  .sicon--spark { width: 36px; height: 36px; }
  .sicon--spark svg { width: 20px; height: 20px; }
  .sq { font-size: .78rem; padding: 8px 12px; }
  .sprawl__stats { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sicon, .sq { animation: none; }
}

/* ── Centra : une seule app pour chaque métier (style "Monday tabs") ──
   Header titre centré → row de tabs en pilule (1 actif sombre, autres
   ghost) → grille 2 colonnes : showcase principal (carte gradient avec
   mockup intégré) + side bar (métrique + témoignage). Tabs cliquables
   via JS — voir bloc dédié dans script.js. */
.centra {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 110px 24px 100px;
}
.centra__head {
  text-align: center;
  margin-bottom: 36px;
}
.centra__title {
  margin: 0 auto;
  max-width: 860px;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.1vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.022em;
  color: var(--ink);
}
.centra__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Onglets : pilule horizontale avec onglet actif sombre */
.centra__tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: 0 auto 48px;
  padding: 6px;
  background: #f4f5f9;
  border-radius: 14px;
  width: fit-content;
  max-width: 100%;
}
.ctab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 20px 10px 16px;
  border-radius: 14px;
  font-family: inherit;
  font-size: .95rem;
  font-weight: 500;
  color: #5b6275;
  cursor: pointer;
  transition: color .2s ease, background .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ctab__ic {
  width: 16px; height: 16px;
  flex: none;
  color: currentColor;
  opacity: .78;
  transition: opacity .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.ctab:hover .ctab__ic { opacity: 1; transform: scale(1.08); }
.ctab.is-active .ctab__ic { opacity: 1; }
.ctab:hover { color: var(--ink); }
.ctab.is-active {
  background: var(--persona-color, var(--ink));
  color: var(--persona-ink, #fff);
}
.ctab:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Grille de contenu : showcase 2/3 + sidebar 1/3 */
.centra__grid {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  align-items: stretch;
}

/* Carte principale : gradient brand + mockup intégré */
.centra__main {
  position: relative;
  padding: 48px 44px 44px;
  background:
    radial-gradient(circle at 80% 0%, rgba(255,255,255,.22), transparent 60%),
    linear-gradient(135deg, var(--persona-color, #6A4DF0) 0%, var(--persona-color-dark, #4a52e6) 100%);
  border-radius: 22px;
  color: var(--persona-ink, #fff);
  overflow: hidden;
  display: grid;                                        /* 2 colonnes : texte / mockup */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: start;
  transition: background .35s ease, color .35s ease;
}
.centra__main-title,
.centra__main-text,
.centra__brand,
.centra__brand strong { color: var(--persona-ink, #fff); }
.centra__brand-role {
  background: rgba(255,255,255,.22);
  color: var(--persona-ink, #fff);
}
.centra__brand-mark {
  background: rgba(255,255,255,.22);
}
.centra__brand-mark img {
  filter: none;                                         /* laisse le visage garder ses couleurs */
}
.centra__cta {
  background: var(--persona-ink, #fff) !important;
  color: var(--persona-color, var(--ink)) !important;
}
.centra__cta:hover {
  filter: brightness(.95);
}

/* Transition smooth au clic de tab : fade sur le contenu, le fond change en même temps. */
.centra__copy,
.centra__mockup,
.centra__side {
  transition: opacity .22s ease, transform .32s cubic-bezier(.22,1,.36,1);
}
.centra.is-swapping .centra__copy,
.centra.is-swapping .centra__mockup,
.centra.is-swapping .centra__side {
  opacity: 0;
  transform: translateY(8px);
}
.ctab { transition: background .35s ease, color .35s ease; }
.centra__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding-right: 8px;
}
.centra__brand {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  font-size: .98rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: rgba(255,255,255,.92);
}
.centra__brand strong { color: #fff; font-weight: 700; }
.centra__brand-role {
  padding: 2px 9px;
  background: rgba(255,255,255,.18);
  border-radius: 14px;
  font-size: .82rem;
  color: #fff;
}
.centra__brand-mark {
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: rgba(255,255,255,.18);
  border-radius: 8px;
}
.centra__brand-mark img {
  width: 18px; height: 18px;
  filter: brightness(0) invert(1);                              /* visage en blanc sur fond mauve */
}
.centra__main-title {
  margin: 0 0 16px;
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.018em;
  color: #fff;
}
.centra__main-text {
  margin: 0 0 26px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255,255,255,.88);
}
.centra__cta {
  background: #fff !important;
  color: var(--ink) !important;
}
.centra__cta:hover {
  background: #fafbfd !important;
  transform: translateY(-1px);
}

/* Mockup intégré : screenshot du SaaS qui flotte sur la carte gradient */
.centra__mockup {
  position: relative;
  z-index: 1;
  display: block;
  pointer-events: none;
  margin-right: -60px;                                  /* débord à droite comme Monday */
  align-self: center;
}
.centra__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: #f6f7fb;                                  /* fallback pendant le chargement */
  box-shadow:
    0 1px 2px rgba(0,0,0,.06),
    0 30px 60px -20px rgba(0,0,0,.45),
    0 8px 20px -6px rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.35);
}
.cmock {
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20, 22, 30, .04),
    0 24px 50px -22px rgba(20, 22, 30, .35);
  color: var(--ink);
}
.cmock--thread { padding: 14px 16px; }
.cmock--mue { padding: 14px 16px; transform: translateX(-22px); }
.cmock--task { display: flex; gap: 12px; align-items: start; padding: 14px 16px; transform: translateX(8px); }

.cmock__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.cmock__avatar {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c, #DDD6FE);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  flex: none;
}
.cmock__avatar--mue {
  background: linear-gradient(135deg, #F3EAFE, #FBCFE8);
  overflow: hidden;
}
.cmock__avatar--mue img {
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.cmock__who { flex: 1; min-width: 0; }
.cmock__who strong { display: block; font-size: .82rem; color: var(--ink); }
.cmock__who em { display: block; font-size: .7rem; color: #8b93a4; font-style: normal; }
.cmock__chan {
  width: 18px; height: 18px;
  object-fit: contain;
  flex: none;
}
.cmock__pill {
  padding: 3px 8px;
  background: linear-gradient(120deg, rgba(176,71,201,.16), rgba(106,77,240,.16));
  border-radius: 14px;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--ink);
}
.cmock__body {
  margin: 0;
  font-size: .82rem;
  line-height: 1.45;
  color: var(--ink);
}
.cmock__check {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 7px;
  background: #d1fae5;
  color: #047857;
  flex: none;
}
.cmock__check svg { width: 16px; height: 16px; }
.cmock--task strong { display: block; font-size: .82rem; color: var(--ink); }
.cmock--task em { display: block; font-size: .7rem; color: #8b93a4; font-style: normal; margin-top: 2px; }

/* Side : métrique + témoignage */
.centra__side {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.centra__metric,
.centra__quote {
  margin: 0;
  padding: 26px 24px;
  background: #f4f5f9;
  border-radius: 18px;
}
.centra__logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.005em;
  color: var(--ink);
}
.centra__logo-mark {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-size: .85rem;
}
.centra__metric-big {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.centra__metric-big strong { font-weight: 700; }
.centra__metric-sub {
  margin: 4px 0 0;
  font-size: .92rem;
  color: #5b6275;
}

.centra__quote blockquote {
  margin: 0 0 18px;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
}
.centra__quote figcaption {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(20, 22, 30, .1);
}
.centra__qavatar {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--c, #DDD6FE);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  flex: none;
}
.centra__quote figcaption strong { display: block; font-size: .92rem; color: var(--ink); }
.centra__quote figcaption em { display: block; font-size: .8rem; color: #8b93a4; font-style: normal; }

@media (max-width: 1100px) {
  .centra__grid { grid-template-columns: 1fr; }
  .centra__main { grid-template-columns: 1fr; gap: 20px; }
  .centra__copy { min-height: auto; padding-right: 0; }
  .centra__mockup {
    width: 100%;
    margin-top: 24px;
    margin-right: 0;
  }
  .cmock--mue, .cmock--task { transform: none; }
}
@media (max-width: 720px) {
  .centra { padding: 70px 22px; }
  .centra__main { padding: 32px 24px; }
  .centra__tabs { gap: 2px; padding: 4px; }
  .ctab { padding: 10px 16px; font-size: .88rem; }
}

/* ── Active Mue : un seul visage qui bascule au hover ─────────────────
   Mécanique : .meet__stage est la zone interactive (bouton focusable).
   À :hover / :focus-visible / :active, on flip le visage (scaleX -1),
   on swap les labels Toi/Mue, et on bascule les 3 scénarios en
   cross-fade. CSS only — pas de JS, accessible clavier + tactile. */
.meet {
  position: relative;
  z-index: 2;
  background: #f8f6ef;                                /* crème, écho de l'inspi logo */
  padding: 130px 24px 110px;
}
.meet__inner { max-width: calc(var(--shell) - 48px); margin: 0 auto; }
.meet__head { text-align: center; margin-bottom: 60px; }
.meet__title {
  margin: 20px auto 16px;
  max-width: 820px;
  font-family: var(--font-serif, serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.meet__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.meet__lede {
  max-width: 620px; margin: 0 auto;
  color: #5b6275; font-size: 1.02rem; line-height: 1.55;
}

/* ── La scène interactive ── */
.meet__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin: 0 auto 60px;
  padding: 30px 40px 24px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  border-radius: 24px;
  transition: background .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.meet__stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.meet__stage:hover { background: rgba(20, 22, 30, .04); }

/* Visage : flippe au hover/focus/active */
.meet__avatar {
  width: clamp(140px, 16vw, 200px);
  aspect-ratio: 1;
  perspective: 900px;
}
.meet__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  /* État Toi par défaut = visage à l'endroit (tel que dessiné).
     Au hover, on bascule à 180° → Mue = la tête en bas. */
  transform: rotate(0deg);
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 14px 28px rgba(20, 22, 30, .16));
}
.meet__stage:hover .meet__avatar img,
.meet__stage:focus-visible .meet__avatar img,
.meet__stage:active .meet__avatar img {
  transform: rotate(-180deg);
}

/* Label "Toi" / "Mue" cross-fade au même endroit */
.meet__id {
  position: relative;
  width: 80px; height: 1.4em;
  display: grid;
  place-items: center;
}
.meet__id-you,
.meet__id-mue {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-serif, serif);
  font-style: italic;
  font-size: 1.2rem;
  transition: opacity .35s ease;
}
.meet__id-you { color: var(--ink); opacity: 1; }
.meet__id-mue {
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  opacity: 0;
}
.meet__stage:hover .meet__id-you,
.meet__stage:focus-visible .meet__id-you,
.meet__stage:active .meet__id-you { opacity: 0; }
.meet__stage:hover .meet__id-mue,
.meet__stage:focus-visible .meet__id-mue,
.meet__stage:active .meet__id-mue { opacity: 1; }

/* Indice utilisateur — disparaît dès qu'on hover */
.meet__hint {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8b93a4;
  transition: opacity .25s ease;
}
.meet__stage:hover .meet__hint,
.meet__stage:focus-visible .meet__hint { opacity: 0; }

/* ── Les 3 scénarios qui swappent en même temps que le visage ──
   Idéalement on synchronise via :has() sur le parent. Comme :has()
   n'est pas garanti partout, on cible aussi via la sœur précédente
   (les scenes viennent juste après .meet__stage). */
.meet__scenes {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 880px;
  margin: 0 auto;
}
.meet__scene {
  position: relative;
  padding: 24px 22px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .06);
  border-radius: 18px;
  min-height: 132px;
  display: flex; flex-direction: column; gap: 10px;
}
.meet__scene-em { font-size: 1.4rem; line-height: 1; }
.meet__scene-line {
  position: absolute;
  left: 22px; right: 22px; bottom: 22px;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink);
  transition: opacity .35s ease;
}
.meet__scene-line strong { font-weight: 600; }
.meet__scene-you { opacity: 1; }
.meet__scene-mue { opacity: 0; }
.meet__scene-mue strong {
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Quand on hover .meet__stage, la liste sœur suivante reflète l'état */
.meet__stage:hover ~ .meet__scenes .meet__scene-you,
.meet__stage:focus-visible ~ .meet__scenes .meet__scene-you,
.meet__stage:active ~ .meet__scenes .meet__scene-you { opacity: 0; }
.meet__stage:hover ~ .meet__scenes .meet__scene-mue,
.meet__stage:focus-visible ~ .meet__scenes .meet__scene-mue,
.meet__stage:active ~ .meet__scenes .meet__scene-mue { opacity: 1; }

.meet__foot {
  margin: 56px auto 0;
  text-align: center;
  font-size: 1rem;
  color: var(--ink);
}
.meet__foot em {
  font-family: var(--font-serif, serif);
  font-style: italic;
}

@media (max-width: 980px) {
  .meet { padding: 80px 22px 70px; }
  .meet__head { margin-bottom: 50px; }
  .meet__avatar { width: clamp(110px, 32vw, 150px); }
  .meet__scenes { grid-template-columns: 1fr; }
  .meet__scene { min-height: 0; }
  .meet__scene-line { position: relative; left: 0; right: 0; bottom: 0; }
  /* Sur mobile (pas de hover), on bascule l'affichage en stack pour
     que les deux états restent visibles si l'user tape pas. */
  .meet__scene-mue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .meet__avatar img,
  .meet__id-you,
  .meet__id-mue,
  .meet__scene-line { transition: none; }
}

/* ── Témoignages beta ─────────────────────────────────────────────── */
.testi {
  position: relative;
  z-index: 2;
  padding: 120px 24px 130px;
  background: #EFF3F9;                     /* même fond que le halo autour du darkblock : zéro démarcation */
  overflow: hidden;
}
.testi__inner { max-width: calc(var(--shell) - 48px); margin: 0 auto; }
.testi__head { text-align: center; margin-bottom: 46px; }
.testi__head .fx-h2 { max-width: 820px; margin-left: auto; margin-right: auto; margin-bottom: 0; }
.testi__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1180px;
  margin: 0 auto;
}
.testi__card {
  position: relative;
  margin: 0;
  padding: 32px 30px 26px;
  background: #fff;
  border: 1px solid rgba(20,22,30,.06);
  border-radius: 24px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow:
    0 1px 2px rgba(20,22,30,.04),
    0 12px 28px -20px rgba(20,22,30,.12);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  isolation: isolate;
}
/* Halo pastel qui apparaît au hover — brand touch */
.testi__card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--cta-grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}
/* Guillemet décoratif en filigrane */
.testi__card::after {
  content: "\201C";
  position: absolute;
  top: -18px; right: 18px;
  font-family: "ivyora-display", "Playfair Display", serif;
  font-size: 120px;
  line-height: 1;
  color: rgba(251,163,196,.14);
  pointer-events: none;
  z-index: 0;
}
.testi__card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(20,22,30,.05),
    0 26px 50px -22px rgba(199,184,246,.35);
}
.testi__card:hover::before { opacity: 1; }
.testi__stars {
  color: #FBA3C4;                                    /* Momentum Pink — cohérent brand */
  font-size: 1rem; letter-spacing: 3px;
  filter: drop-shadow(0 1px 0 rgba(251,163,196,.35));
  position: relative; z-index: 2;
}
.testi__card blockquote {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.6;
  color: #14151a;
  font-style: normal;
  position: relative;
  z-index: 2;
  flex: 1;
}
.testi__card figcaption {
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(20,22,30,.06);
  position: relative;
  z-index: 2;
}
.testi__avatar {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--c, #DDD6FE);
  color: #14151a;
  font-weight: 700; font-size: .82rem;
  flex: none;
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 0 1px rgba(20,22,30,.06),
    0 6px 14px -6px rgba(20,22,30,.18);
  letter-spacing: .02em;
}
.testi__card figcaption strong {
  display: block;
  font-size: .95rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.005em;
}
.testi__card figcaption em {
  display: block;
  font-size: .82rem;
  color: #6b7385;
  font-style: normal;
  margin-top: 2px;
}
.testi__foot {
  margin: 52px auto 0;
  text-align: center;
  font-size: .82rem;
  color: #8b93a4;
  letter-spacing: .01em;
}

@media (max-width: 980px) {
  .testi { padding: 80px 22px 90px; }
  .testi__grid { grid-template-columns: 1fr; gap: 18px; max-width: 520px; }
  .testi__card::after { font-size: 96px; top: -14px; right: 14px; }
}

/* ── Comparaison ──────────────────────────────────────────────────── */
.compare {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 110px 24px 80px;
}
.compare__inner { max-width: calc(var(--shell) - 48px); margin: 0 auto; }
.compare__head { text-align: center; margin-bottom: 50px; }
.compare__title {
  margin: 20px auto 0; max-width: 720px;
  font-family: var(--font-serif, serif); font-weight: 400;
  font-size: clamp(1.95rem, 3.4vw, 2.7rem);
  line-height: 1.1; letter-spacing: -.015em; color: var(--ink);
}
.compare__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.compare__lede {
  margin: 22px auto 0;
  max-width: 640px;
  font-size: 1.02rem;
  line-height: 1.55;
  color: #5b6275;
}
.compare__lede strong { color: var(--ink); font-weight: 700; }

.compare__tablewrap {
  overflow-x: auto;
  border-radius: 24px;
  border: 1px solid rgba(20,22,30,.05);
  background: #fbfbfc;
  box-shadow:
    0 1px 2px rgba(20,22,30,.03),
    0 30px 60px -30px rgba(20,22,30,.12);
}
.compare__table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92rem;
  min-width: 900px;
}
.compare__table th,
.compare__table td {
  padding: 16px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(20,22,30,.04);
  vertical-align: middle;
}
.compare__table tbody th {
  text-align: left;
  font-weight: 500;
  color: var(--ink);
  width: 30%;
  padding-left: 22px;
  font-size: .92rem;
  letter-spacing: -.005em;
}
.compare__table thead th {
  font-size: .72rem;
  font-weight: 600;
  color: #8b93a4;
  padding-top: 22px;
  padding-bottom: 22px;
  vertical-align: bottom;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.compare__table thead th.compare__own {
  color: var(--ink);
  text-transform: none;
  letter-spacing: -.01em;
  font-size: .82rem;
  font-weight: 700;
}
.compare__corner {
  background: transparent !important;
  text-align: left !important;
  padding-left: 22px !important;
}
.compare__corner-hint {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8b93a4;
}

/* Colonne Freescale : surlignage doux monochrome, plus discret */
.compare__table thead th.compare__own,
.compare__table tbody td.compare__own {
  background: rgba(20,22,30,.025);
  color: var(--ink);
  position: relative;
}
.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td { border-bottom: none; }

/* Cellules brand : logo + nom + rôle */
.compare__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: .86rem;
  color: var(--ink);
}
.compare__brand em {
  font-size: .66rem;
  font-weight: 500;
  font-style: normal;
  color: #8b93a4;
  letter-spacing: 0;
  text-transform: none;
}
.compare__brand--own em.compare__brand-badge {
  background: linear-gradient(135deg, #DF2153, #7d7bff);
  color: #fff;
  padding: 2px 8px;
  border-radius: 14px;
  font-weight: 700;
  font-size: .58rem;
  letter-spacing: .05em;
  text-transform: uppercase;
}
/* Style unifié pour tous les logos : carré arrondi blanc + double ombre subtile
   (halo doux + ombre portée) pour se détacher du fond gris fafbfd. */
.compare__logo {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  flex: none;
  background: transparent;
  padding: 0;
  box-shadow: none;
  border: none;
}
.compare__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.compare__logo--txt {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* Paire de logos (Front + Missive, Notion + Zapier) — même effet, taille réduite */
.compare__logos-pair {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.compare__logos-pair img {
  width: 24px; height: 24px;
  background: transparent;
  padding: 0;
  object-fit: contain;
  display: block;
  box-shadow: none;
  border: none;
}

/* Cellules de feature (nom de la caractéristique) */
.compare__feat {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.compare__feat-ic {
  font-size: 1.1rem;
  flex: none;
}

/* Dots de statut : ✓ / ~ / ✗ — minimal, discret, cohérent */
.compare__dot {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
  margin-bottom: 0;
  transition: transform .2s ease;
}
.compare__dot--yes { background: rgba(14,122,78,.10); color: #0e7a4e; }
.compare__dot--half { background: rgba(20,22,30,.06); color: #8b93a4; }
.compare__dot--no { background: transparent; color: rgba(20,22,30,.22); font-weight: 500; }
.compare__table td.compare__own .compare__dot--yes {
  background: var(--ink);
  color: #fff;
}
.compare__table td small {
  display: block;
  font-size: .68rem;
  color: #6b7180;
  font-weight: 500;
  line-height: 1.3;
  max-width: 140px;
  margin: 0 auto;
}
.compare__table td.compare__own small { color: var(--ink); font-weight: 600; }

/* Ligne prix */
.compare__table td strong {
  display: block;
  font-family: var(--font-serif, serif);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}
.compare__own--price strong {
  color: var(--ink);
  font-weight: 500;
  font-size: 1.45rem;
}

/* Ligne bilan */
.compare__score th, .compare__score td {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  background: rgba(20,22,30,.02);
  border-top: 1px solid rgba(20,22,30,.06);
}
.compare__score td.compare__own {
  background: rgba(20,22,30,.045) !important;
}
.compare__score th {
  font-size: .72rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #8b93a4 !important;
  font-weight: 600 !important;
}
.compare__badge {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 14px;
  background: transparent;
  border: 1px solid rgba(20,22,30,.12);
  font-weight: 600;
  font-size: .8rem;
  color: #6b7180;
  letter-spacing: -.005em;
}
.compare__badge--win {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}

/* Ligne d'introduction manquant sur ligne 3 (fix typo <th> non fermé) */
.compare__foot {
  margin: 40px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 1rem;
  color: #5b6275;
}
.compare__foot strong { color: var(--ink); }

@media (max-width: 980px) {
  .compare { padding: 70px 22px 60px; }
  .compare__table { font-size: .82rem; min-width: 780px; }
  .compare__table th, .compare__table td { padding: 12px 10px; }
  .compare__table td small { font-size: .68rem; max-width: 130px; }
  .compare__brand { gap: 6px; font-size: .82rem; }
  .compare__brand em { font-size: .64rem; }
  .compare__logo { width: 32px; height: 32px; }
  .compare__logo--txt { font-size: .95rem; }
}

/* ── Trust band (privacy) ─────────────────────────────────────────── */
.trust2 {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
  padding: 60px 24px 90px;
}
.trust2__inner { max-width: calc(var(--shell) - 48px); margin: 0 auto; text-align: center; }
.trust2__title {
  font-family: var(--font-serif, serif); font-weight: 400; font-style: normal;
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  color: var(--ink); margin: 0 0 32px;
}
.trust2__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.trust2__list {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  text-align: left;
}
.trust2__list li {
  display: flex; gap: 12px; align-items: start;
  padding: 18px 16px;
  background: #fff;
  border: 1px solid rgba(20,22,30,.06);
  border-radius: 14px;
}
.trust2__list svg {
  width: 22px; height: 22px; flex: none;
  color: var(--ink);
  margin-top: 2px;
}
.trust2__list span { font-size: .88rem; line-height: 1.5; color: #5b6275; }
.trust2__list strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; font-size: .92rem; }

@media (max-width: 980px) {
  .trust2 { padding: 50px 22px 70px; }
  .trust2__list { grid-template-columns: 1fr 1fr; gap: 14px; }
}
@media (max-width: 600px) {
  .trust2__list { grid-template-columns: 1fr; }
}

/* ── GALLERY : white clipped panel on the grey band, two marquee rows ── */
.gal {
  position: relative;
  z-index: 2;
  background: #ededee;
  padding: 0 24px 100px;        /* grey continues from .why above */
  overflow: hidden;
}
.gal__panel {
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  border-radius: 28px;
  padding: 22px 0;
  overflow: hidden;
}
.gal__row { overflow: hidden; }
.gal__row + .gal__row { margin-top: 14px; }
.gal__track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: galScroll 52s linear infinite;
}
.gal__row--b .gal__track { animation: galScrollBack 66s linear infinite; }
@keyframes galScroll     { to { transform: translateX(-50%); } }
@keyframes galScrollBack { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.gtile {
  position: relative;
  width: 218px;
  height: 388px;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  flex: none;
  background: #f3f3f4;
}
.gtile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gtile--top > img { object-position: top; }
.gtile--mid > img { object-position: 50% 28%; }
/* Avatars « membres » de la galerie en noir et blanc.
   La dame du hero (.hero__woman) et la photo de la section contact
   (.faq__contact-photo) restent EN COULEUR. Les logos canaux
   (.gtile--chan) restent en couleur eux aussi. */
.gtile:not(.gtile--chan) > img {
  filter: grayscale(1);
}
/* floating dark chip on photo tiles (reference detail) */
.gtile__chip {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100% - 24px);
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(13, 15, 20, .58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtile__chip svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: #fff;
}
.gtile--chan {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gtile--chan > img { width: 82px; height: 82px; object-fit: contain; }
.gtile--wa { background: linear-gradient(165deg, #e8f9ee, #d2f3de); }
.gtile--ig { background: linear-gradient(165deg, #fdeef3, #fbe0ec); }
.gtile--gm { background: linear-gradient(165deg, #fdf1ef, #fae3df); }
.gtile--spark { background: #f3f3f4; }
.gtile--chat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
  padding: 24px 18px;
  background: #f6f7fa;
}
.gtile__bubble {
  margin: 0;
  align-self: flex-start;
  max-width: 100%;
  padding: 10px 13px;
  border-radius: 14px 14px 14px 4px;
  background: #fff;
  font-size: .84rem;
  line-height: 1.45;
  color: var(--ink);
  box-shadow: none;
}
.gtile__bubble--me {
  align-self: flex-end;
  border-radius: 14px 14px 4px 14px;
  background: #15171d;
  color: #fff;
}
.gtile__meta {
  margin-top: 5px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #8a93a6;
}
@media (prefers-reduced-motion: reduce) {
  .gal__track, .gal__row--b .gal__track { animation: none; }
}

/* ── PRICING : pastel mesh panel, tinted cards with a white top box ── */
.pricing {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 110px 24px 130px;
  text-align: center;
}
/* Variante compacte : titre + sub + CTA + plans tous visibles sans scroll (like Monday) */
.pricing--tight {
  padding: 90px 24px 60px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.pricing--tight .pricing__head {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.pricing__title--h1 {
  margin: 0;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--ink);
}
.pricing__title--h1 em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.pricing__sub {
  margin: 0;
  font-size: 1rem;
  color: #5b6275;
}
.pricing__cta-row { margin-top: 4px; }
.pricing--tight .pricing__panel {
  margin: 28px auto 0;
  padding: clamp(28px, 3vw, 48px) clamp(20px, 3vw, 44px);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pricing--tight .plan {
  gap: 14px;
}
.pricing--tight .plan__list li {
  padding: 6px 0;
  font-size: .92rem;
}
.pricing--tight .plans__foot {
  font-size: .82rem;
  margin-top: 20px;
}
@media (max-width: 900px) {
  .pricing--tight { min-height: 0; padding: 70px 22px 40px; }
  .pricing--tight .pricing__panel { flex: none; }
}
.pricing__panel {
  max-width: 1400px;
  margin: 56px auto 0;
  border-radius: 32px;
  padding: clamp(44px, 5vw, 84px) clamp(20px, 4vw, 72px);
  background:
    radial-gradient(58% 64% at 10% 0%,  #fdeede 0%, rgba(253, 238, 222, 0) 60%),
    radial-gradient(52% 58% at 92% 4%,  #e9e2fb 0%, rgba(233, 226, 251, 0) 62%),
    radial-gradient(64% 70% at 78% 100%, #dde9fc 0%, rgba(221, 233, 252, 0) 65%),
    radial-gradient(46% 52% at 18% 100%, #f7e2ee 0%, rgba(247, 226, 238, 0) 60%),
    #f7f5f4;
}
.plans {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
  text-align: left;
}
/* Variante 2 plans (Annuel + Mensuel) : deux colonnes centrées, plus larges */
.plans--pair {
  max-width: 820px;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}
.plans__foot {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  font-size: .95rem;
  line-height: 1.55;
  color: #5b6275;
}
.plans__foot strong { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .plans--pair { grid-template-columns: 1fr; max-width: 480px; }
}
.plan {
  display: flex;
  flex-direction: column;
  background: #e9edf8;          /* light blue tint — the list zone */
  border-radius: 26px;
  padding: 8px 8px 22px;
  box-shadow: none;
}
/* featured = gradient wrapper + flag strip + tinted shell inside */
.plan--featured {
  background: linear-gradient(120deg, #f9b36e, #f07cc0 36%, #9a7bf7 70%, #6f8ffb);
  padding: 0 3px 3px;
  border-radius: 30px;
  box-shadow: none;
}
.plan__flag {
  display: block;
  padding: 9px 8px 8px;
  text-align: center;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
}
.plan__shell {
  display: flex;
  flex-direction: column;
  background: #e9edf8;
  border-radius: 27px;
  padding: 8px 8px 22px;
}
.plan__top {
  background: #fff;
  border-radius: 20px;
  padding: 20px 22px 24px;
  box-shadow: none;
}
.plan__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.plan__no {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: #8a93a6;
}
.plan__cat {
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}
.plan__dots {
  margin-left: auto;
  font-size: .8rem;
  letter-spacing: 2px;
  color: #c2c8d4;
  user-select: none;
}
.plan__name {
  margin: 16px 0 4px;
  font-size: 2.05rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.plan__sub {
  margin: 0 0 22px;
  font-size: .88rem;
  color: var(--ink-soft);
}
.plan__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.plan__cta {
  flex: none;
  padding: 11px 20px;
  border-radius: 14px;
  border: 1.5px solid rgba(21, 23, 29, .45);
  background: #fff;
  font-weight: 700;
  font-size: .88rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s, border-color .2s;
}
.plan__cta:hover { transform: translateY(-2px); box-shadow: none; }
.plan__cta--grad {
  background: var(--cta-grad);
  border-color: transparent;
  color: #fff;
}
.plan__pricebox { text-align: right; min-width: 0; }
.plan__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
}
.plan__price strong {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.plan__price span {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
}
.plan__note {
  display: block;
  margin-top: 2px;
  font-size: .67rem;
  color: #9aa2b4;
}
.plan__list {
  margin: 0;
  padding: 22px 16px 4px;
  list-style: none;
  display: grid;
  gap: 12px;
}
.plan__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .88rem;
  line-height: 1.45;
  color: #3c4354;
}
.plan__check {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  fill: none;
  stroke: #6b7488;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── FAQ : attached tabs, light cards, contact card with cut-out photo ── */
.faq {
  position: relative;
  z-index: 2;
  background: #f4f4f5;
  padding: 104px 24px 120px;
  min-height: 900px;                       /* hauteur fixe → pas de saut quand on change de tab ou déplie une question */
  box-sizing: border-box;
}
.faq__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.faq__tabs {
  margin: 42px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.faq__tab {
  padding: 13px 22px 15px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: #e7e7ea;
  font-family: var(--sans);
  font-size: .92rem;
  font-weight: 600;
  color: #8a8f9c;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.faq__tab:hover { color: var(--ink); }
.faq__tab.is-on {
  background: #fff;
  color: var(--ink);
}
.faq__list { text-align: left; }
.faq__item {
  border: 0;
  border-radius: 16px;
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow .25s;
}
.faq__item[open] { box-shadow: none; }
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: -.01em;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__x {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.faq__x::before, .faq__x::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  background: #9aa0ac;
  border-radius: 2px;
}
.faq__x::before { width: 16px; height: 1.5px; }
.faq__x::after  { width: 1.5px; height: 16px; }
.faq__item[open] .faq__x { transform: rotate(45deg); }
.faq__body {
  overflow: hidden;
  transition: height .32s cubic-bezier(.22, 1, .36, 1);
  will-change: height;
}
.faq__item p {
  margin: 0;
  padding: 0 56px 22px 24px;
  max-width: 660px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  text-align: left;
}
.faq__contact {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  min-height: 320px;
  border-radius: 18px;
  background: #fff;
  padding: 42px 46px;
  text-align: left;
  box-shadow: none;
}
.faq__contact-copy {
  position: relative;
  z-index: 1;
  max-width: 56%;
}
.faq__hello {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 14px;
  border: 1px solid rgba(21, 23, 29, .12);
  background: #fff;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink);
}
.faq__hello svg {
  width: 13px;
  height: 13px;
  fill: var(--ink);
}
.faq__contact-copy h3 {
  margin: 18px 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.faq__contact-copy p {
  margin: 0 0 26px;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
/* cut-out portrait sitting on the card's bottom-right (reference detail) */
.faq__contact-photo {
  position: absolute;
  right: 26px;
  bottom: -4px;
  width: clamp(220px, 26vw, 320px);
  margin: 0;
}
.faq__contact-photo img {
  width: 100%;
  height: auto;
  display: block;
}
/* dark CTA with a lime arrow tile (reference style) */
.btn-cta--lime {
  background: #191a1f;
  border-color: #191a1f;
  box-shadow: none;
}
.btn-cta--lime .btn-cta__word { color: #fff; }
.btn-cta--lime::before {
  background: linear-gradient(110deg, #dcf56e, #c3ec4d);
  background-blend-mode: normal;
}
.btn-cta--lime .btn-cta__icon svg { color: #14151a; }
.btn-cta--lime:hover .btn-cta__word { color: #14151a; }

/* ── CLOSER ── */
.closer {
  position: relative;
  z-index: 2;
  background: #f3f3f4;
  padding: 118px 24px 126px;
}
.closer__inner {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
}
.closer__title {
  margin: 0;
  max-width: 820px;
  font-weight: 800;
  font-size: clamp(2.05rem, 4vw, 3.3rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  color: var(--ink);
}
.closer__grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.closer__spark {
  margin: 0;
  overflow: hidden;
}
.closer__spark img {
  width: 112%;
  margin: -6%;
  display: block;
  -webkit-mask-image: radial-gradient(closest-side, #000 58%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 58%, transparent 92%);
}
.closer__text {
  margin: 0;
  max-width: 470px;
  font-size: 1.12rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.closer__ctas {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.closer__ghost {
  padding: 15px 24px;
  border-radius: 14px;
  border: 1px solid rgba(21, 23, 29, .14);
  background: #fff;
  font-weight: 700;
  font-size: .98rem;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.closer__ghost:hover { border-color: rgba(21, 23, 29, .34); transform: translateY(-2px); }
.closer__trusted {
  margin: 52px 0 0;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #8a93a6;
}
.closer__logos {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(24px, 4vw, 48px);
  color: #1b2433;
}

/* ── responsive ── */
@media (max-width: 1020px) {
  .wmorph { width: clamp(220px, 24vw, 290px); height: clamp(220px, 24vw, 290px); }
}
@media (max-width: 900px) {
  .why { background: #ededee; padding: 32px 16px 72px; }
  .why::before, .why__collar { display: none; }
  .why__card { border-radius: 28px; padding: 44px 22px 48px; }
  .why__layout { grid-template-columns: 1fr; gap: 0; }
  .why__sticky, .why__list { grid-column: 1; }
  .why__num { position: static; transform: none; margin-bottom: 10px; font-size: 1.5rem; }
  .why__sticky { position: sticky; top: 56px; height: auto; padding: 6px 0 10px; z-index: 1; }
  .wmorph { width: clamp(150px, 38vw, 200px); height: clamp(150px, 38vw, 200px); }
  .wstep { min-height: 46vh; align-items: center; text-align: center; }
  .why__name { font-size: 1.6rem; margin-bottom: 8px; }
  .why__text { max-width: 420px; }
  .gal { padding-bottom: 72px; }
  .gal__panel { border-radius: 20px; padding: 14px 0; }
  .gtile { width: 172px; height: 306px; }
  .pricing { padding: 80px 16px 96px; }
  .pricing__panel { border-radius: 24px; }
  .plans { grid-template-columns: 1fr; max-width: 440px; }
  .faq__contact { padding: 34px 26px 0; }
  .faq__contact-copy { max-width: 100%; }
  .faq__contact-photo {
    position: static;
    width: 240px;
    margin: 18px auto 0;
  }
  .closer__grid { grid-template-columns: 1fr; }
  .closer__spark { max-width: 300px; margin: 0 auto; }
}

/* ============================================================
   SCREEN MOCKUP v2 — Freescale "Tâches" dashboard (replaces the inbox)
   ============================================================ */
.inbox {                                   /* override: was a 2-col grid */
  display: flex !important;
  flex-direction: column;
  grid-template-columns: none !important;
}

/* ── top bar ── */
.appbar {
  flex: none;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  border-bottom: 1px solid rgba(20, 22, 30, .07);
}
.appbar__brand { display: inline-flex; align-items: center; gap: 9px; }
.appbar__mark { width: 24px; height: 24px; display: block; }
.appbar__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.45rem;
  letter-spacing: -.01em;
  color: var(--ink);
}
.appbar__right { display: inline-flex; align-items: center; gap: 14px; }
.appbar__chans { display: inline-flex; align-items: center; gap: 7px; }
.ctile {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(20, 22, 30, .07);
}
.ctile img { width: 19px; height: 19px; object-fit: contain; display: block; }
.ctile svg { width: 19px; height: 19px; display: block; }
.ctile--video { background: #7b5cff; box-shadow: none; }
.ctile--li { background: #0A66C2; box-shadow: none; }
.ctile--slack { background: #fff; box-shadow: inset 0 0 0 1px rgba(20,22,30,.07); }
.ctile--slot { background: transparent; box-shadow: none; }   /* reserved slot — a flying 3D icon docks here */
.appbar__iconbtn {
  width: 36px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(20, 22, 30, .12);
  border-radius: 10px;
  background: #fff;
  color: #5b6475;
  cursor: pointer;
}
.appbar__iconbtn svg { width: 18px; height: 18px; }
.appbar__mue {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 15px;
  border: 1px solid rgba(20, 22, 30, .14);
  border-radius: 10px;
  background: #fff;
  font-family: var(--sans);
  font-size: .92rem; font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.appbar__mue svg { width: 17px; height: 17px; color: #5b6475; }

/* ── body: sidebar + main ── */
.appbody { flex: 1; display: flex; min-height: 0; }
.appside {
  flex: none;
  width: 248px;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  border-right: 1px solid rgba(20, 22, 30, .07);
}
.appnav { display: flex; flex-direction: column; gap: 2px; }
.appnav__item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px;
  border-radius: 11px;
  font-family: var(--sans);
  font-size: 1rem; font-weight: 500;
  color: #5d6675;
  cursor: pointer;
  text-decoration: none;
}
.appnav__item:hover { background: rgba(20, 22, 30, .035); }
.appnav__item.is-active { background: rgba(20, 22, 30, .06); color: var(--ink); font-weight: 700; }
.appnav__ic { width: 20px; height: 20px; flex: none; }
.appnav__count {
  margin-left: auto;
  min-width: 22px; height: 21px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  background: rgba(20, 22, 30, .07);
  font-size: .82rem; font-weight: 600; color: #5d6675;
}
.appside__user {
  margin-top: auto;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
}
.appside__avatar {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--c, #3a3f4a);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.appside__name { font-size: .98rem; font-weight: 600; color: var(--ink); }

.appmain { flex: 1; min-width: 0; padding: 26px 30px; overflow: hidden; }

/* ── Mue banner ── */
.muebanner {
  display: flex; align-items: center; gap: 24px;
  padding: 26px 30px;
  border-radius: 18px;
  background: linear-gradient(108deg, #2f2a86 0%, #4338b8 38%, #4b63d8 70%, #3f76e6 100%);
  color: #fff;
}
.muebanner__txt { flex: 1; min-width: 0; }
.muebanner__title { margin: 0 0 7px; font-size: 1.18rem; font-weight: 700; letter-spacing: -.01em; }
.muebanner__sub { margin: 0; font-size: .92rem; line-height: 1.5; color: rgba(255, 255, 255, .82); max-width: 760px; }
.muebanner__btn {
  flex: none;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 20px;
  border: 0; border-radius: 12px;
  background: #fff;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  color: #3b34a3;
  cursor: pointer;
  box-shadow: none;
}
.muebanner__btn svg { width: 17px; height: 17px; color: #5b4bdd; }

/* ── task groups ── */
.tgroup { margin-top: 26px; }
.tgroup__head {
  display: flex; align-items: center; gap: 9px;
  padding: 0 6px 4px;
  font-size: .76rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #98a1b2;
}
.tgroup__chev { width: 15px; height: 15px; color: #b3bbc8; }
.tgroup__count {
  min-width: 20px; height: 19px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(20, 22, 30, .06);
  font-size: .78rem; font-weight: 600; color: #7c8597;
  letter-spacing: 0;
}
.tlist { list-style: none; margin: 4px 0 0; padding: 0; }
.trow {
  display: flex; align-items: center; gap: 16px;
  padding: 15px 8px;
  border-bottom: 1px solid rgba(20, 22, 30, .055);
}
.tcheck {
  flex: none;
  width: 21px; height: 21px;
  border: 2px solid rgba(20, 22, 30, .2);
  border-radius: 6px;
}
.trow__title {
  flex: 1; min-width: 0;
  font-size: 1.02rem; font-weight: 600; color: var(--ink);
  letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trow__sub {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(20, 22, 30, .06);
  font-size: .76rem; font-weight: 600; color: #7c8597;
}
.trow__person {
  flex: none; width: 190px;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .96rem; color: #4a5263;
}
.cdot { width: 18px; height: 18px; flex: none; border-radius: 5px; }
.cdot--wa { background: url("assets/icon-whatsapp.webp") center/contain no-repeat; }
.cdot--gm { background: url("assets/icon-gmail.webp") center/contain no-repeat; }
.cdot--li {
  background: #0A66C2; border-radius: 4px;
  position: relative;
}
.cdot--li::before {
  content: "in";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: .56rem; font-weight: 700; color: #fff;
}
.trow__due {
  flex: none; width: 130px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .95rem; color: #8089a0;
}
.trow__cal { width: 15px; height: 15px; flex: none; }
.trow__due--today { color: var(--ink); font-weight: 600; }
.trow__due--late { color: #e0483d; font-weight: 600; }
.trow__due--late .trow__cal { color: #e0483d; }
/* add-a-task row */
.trow--add { border-bottom: 0; color: #aab1c0; }
.tadd {
  flex: none; width: 21px; height: 21px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #b3bbc8;
}
.trow__placeholder { font-size: 1rem; color: #aab1c0; }

@media (max-width: 820px) {
  .appside { display: none; }
  .muebanner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 20px; }
  .trow__person { width: 130px; }
  .trow__due { width: 92px; }
}

/* ─────────────────────────────────────────────────────────────────────
   FOOTER : gradient bg full-width + carte foncée (colonnes de liens) +
   wordmark "freescale" italique très large en dessous, même largeur
   que la carte. Inspi : style "Lovable footer".
   ──────────────────────────────────────────────────────────────────── */
.ftr {
  position: relative;
  padding: 80px 24px 60px;
  background: transparent;
  overflow: visible;
}
/* Halos radiaux reprenant les 4 couleurs vives du gradient Freescale — amplifiés,
   débordent vers le haut sur la section précédente (top négatif), fade doux */
.ftr::before {
  content: "";
  position: absolute;
  top: -1200px; left: -10%; right: -10%; bottom: 0;
  z-index: -1;
  background:
    radial-gradient(760px 520px at 12% 78%, rgba(255,122,184,.95) 0%, transparent 62%),   /* Vivid Pink #FF7AB8 en bas gauche */
    radial-gradient(820px 560px at 88% 32%, rgba(30,64,255,.8) 0%, transparent 62%),      /* Royal Blue #1E40FF en haut droite */
    radial-gradient(680px 460px at 32% 8%, rgba(253,232,241,1) 0%, transparent 65%),      /* Soft Pink #FDE8F1 en haut gauche */
    radial-gradient(720px 500px at 78% 96%, rgba(199,184,246,.95) 0%, transparent 62%);   /* Quiet Focus #C7B8F6 en bas droite */
  animation: ftrHaloDrift 22s ease-in-out infinite alternate;
  pointer-events: none;
  /* Fade doux vers le haut → aucun bord dur avec la section précédente */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.2) 25%,
    rgba(0,0,0,.6) 50%,
    #000 70%,
    #000 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,.2) 25%,
    rgba(0,0,0,.6) 50%,
    #000 70%,
    #000 100%);
}
@keyframes ftrHaloDrift {
  0%   { background-position: 0 0, 0 0, 0 0, 0 0; }
  50%  { background-position: 6% -4%, -5% 3%, 4% 6%, -3% -5%; }
  100% { background-position: -3% 5%, 4% -3%, -5% -4%, 3% 5%; }
}
.ftr__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .feature::before, .ftr::before { animation: none; }
}
.ftr__inner {
  max-width: 1240px;
  margin: 0 auto;
  container-type: inline-size;         /* rend .ftr__inner container pour cqi */
}

/* Carte foncée arrondie avec les colonnes */
.ftr__card {
  background: #1a1d24;
  color: rgba(255, 255, 255, .78);
  border-radius: 28px;
  padding: 56px 54px 32px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .35);
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr);
  column-gap: 60px;
  row-gap: 40px;
}
/* Bloc brand à gauche : logo + tagline + lang selector alignés */
.ftr__top {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 0;
}
.ftr__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.ftr__brand img {
  height: 40px;
  width: auto;
  display: block;
}
.ftr__tag {
  font-size: .88rem;
  color: rgba(255, 255, 255, .55);
  line-height: 1.55;
  max-width: 240px;
  margin: 0;
}

/* Colonnes à droite : 4 colonnes égales */
.ftr__cols {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.ftr__col h3 {
  margin: 0 0 18px;
  font-size: .82rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .01em;
}
.ftr__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.ftr__col a {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.4;
  transition: color .18s ease;
}
.ftr__col a:hover { color: #fff; }

/* Bas de la carte : sélecteur de langue + copyright, ancrés dans la colonne brand */
.ftr__bottom {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.ftr__copyright {
  font-size: .78rem;
  color: rgba(255, 255, 255, .4);
  margin: 0;
}
@media (max-width: 900px) {
  .ftr__card { grid-template-columns: 1fr; row-gap: 36px; padding: 40px 28px 28px; }
  .ftr__top { grid-column: 1; grid-row: 1; }
  .ftr__cols { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, 1fr); }
  .ftr__bottom { grid-column: 1; grid-row: auto; }
}
.ftr__lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .55);
  font-family: inherit;
  font-size: .82rem;
  cursor: pointer;
  border-radius: 8px;
  transition: background .18s ease, color .18s ease;
}
.ftr__lang:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* Wordmark "freescale" géant italique sous la carte —
   largeur calée pour matcher la carte (1240px max) */
.ftr__wordmark {
  margin-top: 40px;
  margin-bottom: -0.18em;                  /* mange l'espace fantôme sous la baseline italique — la descente du "f" aligne pile en bas */
  padding: 0;
  font-family: "ivyora-display", "Playfair Display", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  color: #fff;
  text-align: center;
  font-size: 32cqi;                        /* le wordmark scale sur la largeur du container = largeur du bloc noir */
  line-height: .72;                        /* très serré : la line-box colle à la hauteur des glyphes */
  letter-spacing: -.02em;
  user-select: none;
  overflow: visible;
}
.ftr__inner { overflow: visible; }         /* .ftr garde son overflow:hidden pour couper tout débordement final */

@media (max-width: 980px) {
  .ftr { padding: 60px 16px 30px; }
  .ftr__card { padding: 36px 28px 24px; border-radius: 22px; }
  .ftr__cols { grid-template-columns: 1fr 1fr; gap: 32px; }
  .ftr__wordmark { font-size: 32cqi; }
}
@media (max-width: 520px) {
  .ftr__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ─────────────────────────────────────────────────────────────────────
   SUB-PAGES (produit, à propos, tarifs, contact)
   Hero compact + sections de contenu (page-block, page-grid, page-card,
   pricing tiers, formulaire contact, état actif dans la nav).
   ──────────────────────────────────────────────────────────────────── */

/* État actif dans la navigation principale */
.nav__links a.is-current {
  color: var(--ink);
  font-weight: 600;
  position: relative;
}
.nav__links a.is-current::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--ink);
  border-radius: 1px;
}

/* Subhero : hero compact pour les sous-pages */
.subhero {
  position: relative;
  z-index: 2;
  padding: 180px 24px 80px;
  text-align: center;
}
.subhero__inner {
  max-width: 820px;
  margin: 0 auto;
}
.subhero__title {
  margin: 22px auto 18px;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.subhero__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.subhero__lede {
  margin: 0 auto;
  max-width: 620px;
  font-size: 1.1rem;
  line-height: 1.55;
  color: #5b6275;
}
.subhero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 32px;
}

/* Page block : section de contenu standard */
.page-block {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 80px 24px;
}
.page-block--alt {
  background: #fafbfd;
}
.page-block__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.page-block__head {
  text-align: center;
  margin-bottom: 50px;
}
.page-block__head h2 {
  margin: 0 0 12px;
  font-family: var(--font-serif, serif);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
}
.page-block__head p {
  margin: 0;
  font-size: 1rem;
  color: #5b6275;
  line-height: 1.55;
}
.page-block__head a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Grille de cartes (3 colonnes desktop, 1 mobile) */
.page-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.page-card {
  padding: 28px 26px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .06);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(20, 22, 30, .03);
  transition: transform .25s ease, box-shadow .25s ease;
}
.page-block--alt .page-card { background: #fff; }
.page-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 36px -22px rgba(20, 22, 30, .22);
}
.page-card h3 {
  margin: 0 0 12px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
}
.page-card p {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.55;
  color: #5b6275;
}
.page-card p:last-child { margin-bottom: 0; }
.page-card a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}

/* Pricing : 3 tiers sur la page tarifs */
.page-pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.page-tier {
  position: relative;
  padding: 36px 30px 32px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .08);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.page-tier--feat {
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cta-grad) border-box;
  border: 2px solid transparent;
  box-shadow: 0 24px 50px -28px rgba(106, 77, 240, .35);
}
.page-tier__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.page-tier h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.page-tier__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-serif, serif);
}
.page-tier__price strong {
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.02em;
}
.page-tier__price span {
  font-size: .9rem;
  color: #8b93a4;
  font-family: inherit;
}
.page-tier__sub {
  margin: 0;
  color: #5b6275;
  font-size: .92rem;
}
.page-tier ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.page-tier li {
  position: relative;
  padding-left: 22px;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ink);
}
.page-tier li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 14px; height: 7px;
  border-left: 2px solid #0e7a4e;
  border-bottom: 2px solid #0e7a4e;
  transform: rotate(-45deg);
}

/* Formulaire de contact */
.page-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
}
.page-form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
}
.page-form__full { grid-column: 1 / -1; }
.page-form input,
.page-form textarea {
  padding: 12px 14px;
  background: #fff;
  border: 1px solid rgba(20, 22, 30, .12);
  border-radius: 11px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--ink);
  transition: border-color .2s ease;
  resize: vertical;
}
.page-form input::placeholder,
.page-form textarea::placeholder {
  color: #aab1c0;
}
.page-form input:focus,
.page-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.page-form__cta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}

@media (max-width: 920px) {
  .subhero { padding: 140px 22px 60px; }
  .page-block { padding: 60px 22px; }
  .page-grid,
  .page-pricing { grid-template-columns: 1fr; }
  .page-form { grid-template-columns: 1fr; max-width: 100%; }
  .nav__links a.is-current::after { display: none; }
}

/* ─────────────────────────────────────────────────────────────────────
   REACH — deux mains qui se rejoignent au scroll (référence Sistine).
   Section haute avec inner sticky ; --reach-p (0 → 1) animé via JS
   déplace les mains depuis les bords vers le centre. */
.reach {
  position: relative;
  background: #0b0d10;
  min-height: 110vh;                      /* course courte : anim posée, sticky minimal pour éviter de bloquer le scroll */
  --reach-p: 0;
  z-index: 3;
  /* PAS d'overflow: hidden ici — ça casserait position: sticky sur le stage enfant.
     Le stage a son propre overflow: hidden pour clipper les mains hors-champ. */
}
.reach__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reach__hand {
  position: absolute;
  top: 50%;
  height: auto;
  width: 62%;
  max-width: 900px;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}
.reach__hand--l {
  left: 0;
  /* p=0 → hors-champ gauche ; p=1 → alignée sur le bord gauche naturel */
  transform: translate(calc(-100% + var(--reach-p) * 100%), -50%);
}
.reach__hand--r {
  right: 0;
  /* p=0 → hors-champ droit ; p=1 → alignée sur le bord droit naturel */
  transform: translate(calc(100% - var(--reach-p) * 100%), -50%);
}
.reach__caption {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  max-width: 620px;
  padding: 0 24px;
  opacity: calc(var(--reach-p) * 1.4 - .3);       /* fade in doux quand les mains se rapprochent */
  transform: translateY(calc((1 - var(--reach-p)) * 20px));
  transition: none;
}
.reach__caption h2 {
  font-family: "Inter", sans-serif;
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  margin: 0 0 14px;
}
.reach__caption h2 em {
  font-family: "ivyora-display", "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  color: #ff5aa5;
}
.reach__caption p {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255,255,255,.72);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .reach { min-height: 110vh; }
  .reach__hand { width: 78%; }
  .reach__caption h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
}

/* ─────────────────────────────────────────────────────────────────────
   TEAMS — bandeau "adopté par des freelances" + awards + 3 vidéos
   témoignage. Layout inspiré de ClickUp/Monday. */
.teams {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 110px 24px 90px;
}
.teams__inner {
  max-width: calc(var(--shell) - 48px);
  margin: 0 auto;
}
.teams__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  margin-bottom: 44px;
}
.teams__headtxt { display: flex; flex-direction: column; align-items: flex-start; }
.teams__headtxt .fx-h2 { margin-bottom: 0; }
.teams__awards {
  height: clamp(80px, 9vw, 120px);
  width: auto;
  display: block;
  flex-shrink: 0;
}
.teams__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tvid {
  position: relative;
  aspect-ratio: 5 / 7;
  border-radius: 22px;
  overflow: hidden;
  background: #0b0d10;
  box-shadow: 0 20px 40px -22px rgba(20,22,30,.28);
  isolation: isolate;
}
.tvid__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 1;
}
.tvid__gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.72) 100%);
  z-index: 2;
  pointer-events: none;
}
.tvid__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px 26px 26px;
  z-index: 3;
  color: #fff;
}
.tvid__quote {
  margin: 0 0 14px;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.008em;
  color: #fff;
}
.tvid__author strong {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
}
.tvid__author em {
  display: block;
  font-size: .82rem;
  font-style: normal;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .teams__head { grid-template-columns: 1fr; gap: 20px; }
  .teams__awards { justify-self: start; }
  .teams__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
@media (max-width: 820px) {
  .teams { padding: 80px 22px 70px; }
  .teams__grid { grid-template-columns: 1fr; gap: 18px; max-width: 420px; margin: 0 auto; }
  .tvid { aspect-ratio: 5 / 7; }
}

/* ─────────────────────────────────────────────────────────────────────
   ANYWHERE — bandeau sombre "la meilleure IA c'est la tienne" avant
   le Reach. Inspiré du Brain² : fond noir + radial gradients aux
   4 coins (persona colors), gros titre italique, plateformes en pied. */
.anywhere {
  position: relative;
  z-index: 2;                        /* passe au-dessus du .bg-glow fixed z:0 */
  padding: 130px 24px 110px;
  background: #06070a;                       /* fond uniforme, aucune démarcation de gradient */
  color: #fff;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.anywhere__inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.anywhere__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.anywhere__logo {
  width: 44px; height: 44px;
  display: block;
}
.anywhere__wordmark {
  font-family: "ivyora-display", "Playfair Display", serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: -.01em;
  color: #fff;
  line-height: 1;
}
.anywhere__wordlogo {
  display: block;
  height: clamp(38px, 4.5vw, 56px);
  width: auto;
}
.anywhere__anim {
  display: block;
  height: clamp(160px, 22vw, 280px);
  width: auto;
  background: transparent;
  pointer-events: none;
}
.anywhere__title {
  position: relative;
  max-width: 820px;
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: rgba(255,255,255,.2);                   /* fallback / reduced-motion */
  max-width: 960px;
}
/* Words injected par JS : chaque mot reçoit le gradient CTA clippé sur ses glyphs.
   L'animation part d'un gris opaque (le gradient est caché) → gradient dévoilé →
   se pose en BLANC (adapté au fond noir de Anywhere). */
.anywhere__word {
  background-image: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.28);
  opacity: 0;
  transform: translateY(.16em);
  will-change: opacity, transform;
}
.anywhere.is-in .anywhere__word {
  animation: anywhereWordIn .8s cubic-bezier(.4, 0, .25, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes anywhereWordIn {
  0%   { opacity: 0; transform: translateY(.18em); -webkit-text-fill-color: rgba(255,255,255,.22); }
  20%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: rgba(255,255,255,.28); }
  48%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: rgba(255,255,255,.28); }
  72%  { -webkit-text-fill-color: transparent; }              /* le gradient CTA sweep */
  100% { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
  .anywhere.is-in .anywhere__word {
    animation: none; opacity: 1; transform: none;
    -webkit-text-fill-color: #fff; color: #fff;
  }
}
.anywhere__word--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: 0;
}
.anywhere__sub {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: rgba(255,255,255,.7);
  max-width: 640px;
}
.anywhere__platforms {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}
.anywhere__label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.anywhere__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
.anywhere__list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
}
.anywhere__list svg {
  width: 18px; height: 18px;
  color: rgba(255,255,255,.75);
}

@media (max-width: 720px) {
  .anywhere { padding: 90px 22px 80px; }
  .anywhere__list { gap: 20px; }
  .anywhere__list li { font-size: .74rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   DARKBLOCK — wrapper qui contient Anywhere + Reach.
   Au départ : marges latérales + bord arrondi (comme une carte).
   Au scroll : bord et marges disparaissent → prend toute la largeur.
   Piloté par --dark-p (0 → 1) via JS. */
.darkblock {
  --dark-p: 0;
  --dark-exit-p: 0;                            /* 0 = début/milieu, 1 = fin de sortie (halo vire au blanc) */
  position: relative;
  z-index: 2;
  /* Layout figée à 100vw pour ne pas recalculer la largeur à chaque scroll
     (l'ancienne width interpolée déclenchait un reflow massif → scroll saccadé).
     L'effet grow/shrink est produit visuellement par un clip-path animé
     (GPU-composited, aucun coût de layout). */
  width: 100vw;
  margin-inline: auto;
  border-radius: 0;
  clip-path: inset(
    0
    calc((1 - var(--dark-p)) * max(24px, (100vw - (var(--shell) - 48px)) / 2))
    round calc((1 - var(--dark-p)) * 32px)
  );
  /* overflow: clip → même effet visuel que hidden mais ne crée pas de scroll
     container → position: sticky des enfants (reach__stage) reste active. */
  overflow: clip;
  background: #06070a;                       /* fond sombre uniforme */
  /* Halo ambiant autour du bloc (couleur de la page qui déborde en douceur) */
  box-shadow: 0 0 0 100vmax var(--dark-halo, #EFF3F9);
}
/* Le fond noir vit sur le wrapper : on rend Anywhere + Reach transparents. */
.darkblock .anywhere,
.darkblock .reach {
  background: transparent;
}
.darkblock .reach__stage { background: transparent; }

/* ─────────────────────────────────────────────────────────────────────
   AGENTS — dans le darkblock, sous la section Reach. 2 colonnes :
   liste de 5 "agents" à gauche, screenshot du SaaS + tags flottants
   à droite. Inspiré de Monday CRM. */
.agents {
  position: relative;
  padding: 100px 32px 130px;
  color: #fff;
}
.agents__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
  gap: 48px;
  align-items: center;
}
.agents__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agent {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid transparent;         /* réserve l'espace du border → aucun décalage à l'activation */
  cursor: default;
  transition: background .25s ease, border-color .25s ease;
}
.agent.is-active {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
}
/* Icônes .agent — même style que .fx-step__icon et .fx-trust__ic :
   cercle blanc + bordure gradient Free Horizon, icône navy #0C1E5A */
.agent__icon {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cta-grad) border-box;
  background-size: auto, 240% 240%;
  border: 1.5px solid transparent;
  color: #0C1E5A;
  box-shadow: 0 8px 20px -10px rgba(30, 64, 255, .35);
  animation: freescaleGradShift 7s ease-in-out infinite;
  flex: none;
}
.agent__icon svg { width: 20px; height: 20px; display: block; }
/* Overrides couleurs supprimés — toutes les icônes partagent le même style unifié */
.agent__icon--rose,
.agent__icon--blue,
.agent__icon--teal,
.agent__icon--gold,
.agent__icon--green {
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cta-grad) border-box;
  color: #0C1E5A;
}
.agent__label {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}
.agent.is-active .agent__label { color: #fff; font-weight: 600; }

/* Colonne droite : screenshot + tags flottants avec bordure gradient */
.agents__demo {
  position: relative;
  border-radius: 22px;
  overflow: visible;
}
.agents__shot {
  display: block;
  width: 100%;
  aspect-ratio: 1558 / 920;              /* ratio fixe → aucune variation de hauteur au swap */
  object-fit: cover;
  object-position: center top;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.15),
    0 30px 70px -20px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.06);
}
.agents__tag {
  position: absolute;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px;
  background: #12131a;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  border: 1.5px solid transparent;
  background-clip: padding-box;
}
/* Bordure gradient façon Monday : trois couches */
.agents__tag::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: var(--cta-grad);
  background-size: 240% 240%;
  animation: freescaleGradShift 7s ease-in-out infinite;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.agents__tag svg {
  width: 16px; height: 16px;
  color: #FBA3C4;
  flex: none;
}
.agents__tag--1 { top: -14px; left: -30px; }
.agents__tag--2 { top: 44%; left: -50px; }
.agents__tag--3 { bottom: 12%; left: 30%; }

@media (max-width: 900px) {
  .agents { padding: 70px 22px 90px; }
  .agents__inner { grid-template-columns: 1fr; gap: 40px; }
  .agents__list { max-width: 480px; margin: 0 auto; }
  .agents__tag { font-size: .78rem; padding: 8px 12px 8px 10px; }
  .agents__tag--1 { top: -10px; left: 8px; }
  .agents__tag--2 { top: 40%; left: 8px; }
  .agents__tag--3 { bottom: 8%; left: 20%; }
}

/* Fade seul quand le screenshot change : pas de translate, pas de mouvement */
.agents__shot { transition: opacity .22s ease; }
.agents__demo.is-swapping .agents__shot { opacity: 0; }
.agent { cursor: pointer; }
.agent:hover:not(.is-active) { background: rgba(255,255,255,.03); }
.agent:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 2px; }

/* Pins : fade uniquement, la position change instantanément (invisible pendant le fade) */
.agents__tag { transition: opacity .22s ease; }
.agents__demo.is-swapping .agents__tag { opacity: 0; }

/* ── Chans dans le darkblock : version fond noir ── */
.darkblock .chans { background: transparent; }
.darkblock .chans__title { color: #fff; }
.darkblock .chans__sub { color: rgba(255,255,255,.7); }
.darkblock .chans__foot { color: rgba(255,255,255,.6); }
.darkblock .chans__foot a { color: #fff; }
.darkblock .chans .pill {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}
.darkblock .chan {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: #fff;
}
.darkblock .chan__label { color: #fff; }

/* Reach CTA : réutilise .btn-cta (avec toute l'animation hover — arrow slide,
   gradient fill, word swap). On ajoute juste l'espacement dans le caption. */
.reach__cta { margin-top: 30px; }

/* ─────────────────────────────────────────────────────────────────────
   KICKOFF — dernière section du darkblock, inspirée de la ref Brain :
   fond noir + halo rose/saumon en bas, gros titre sans bold, CTA blanc
   pilule, lien "En savoir plus" sous le bouton. */
.kickoff {
  position: relative;
  padding: 130px 24px 40px;                /* moins d'air en bas → Chans se colle */
  text-align: center;
  color: #fff;
  background: transparent;                 /* utilise le fond du darkblock → aucune démarcation */
  isolation: isolate;
}
.kickoff__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.kickoff__title {
  position: relative;
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -.028em;
  color: rgba(255,255,255,.2);                     /* fallback / reduced-motion */
  text-align: center;
}
.kickoff__sub {
  margin: 20px auto 0;
  max-width: 520px;
  text-align: center;
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255,255,255,.6);
}
.kickoff__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}
/* Words injected par JS : gradient CTA sweep → se pose en blanc */
.kickoff__word {
  background-image: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.28);
  opacity: 0;
  transform: translateY(.16em);
  will-change: opacity, transform;
}
.kickoff.is-in .kickoff__word {
  animation: kickoffWordIn .8s cubic-bezier(.4, 0, .25, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes kickoffWordIn {
  0%   { opacity: 0; transform: translateY(.18em); -webkit-text-fill-color: rgba(255,255,255,.22); }
  20%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: rgba(255,255,255,.28); }
  48%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: rgba(255,255,255,.28); }
  72%  { -webkit-text-fill-color: transparent; }
  100% { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
  .kickoff.is-in .kickoff__word {
    animation: none; opacity: 1; transform: none;
    -webkit-text-fill-color: #fff; color: #fff;
  }
}
.kickoff__word--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: 0;
}
.kickoff__ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
/* Bloc téléchargements sous le titre kickoff : petit espacement au-dessus/dessous */
.kickoff__platforms {
  margin: 28px auto 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
/* CTA "premium" : pilule blanche + pastille gradient à gauche qui s'étend
   au hover en balayant tout le fond, mots qui slident en synchro, halo doux.
   Reprend la mécanique du .btn-cta du hero avec un habillage clair. */
/* Kickoff CTA : reprend intégralement le style .btn-cta du hero pour la
   cohérence visuelle. Rien de custom, juste la sourdine du blur du halo. */
.kickoff__more {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s ease;
}
.kickoff__more:hover { color: #fff; }

@media (max-width: 720px) {
  .kickoff { padding: 100px 22px 120px; }
  .kickoff__title { font-size: clamp(2rem, 8vw, 2.8rem); }
}

/* ── Boutons de téléchargement dans la section anywhere (fond noir) ── */
.anywhere__list { gap: 14px; align-items: stretch; }
.anywhere__list li { display: flex; }
.anywhere__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px 12px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
  cursor: pointer;
}
.anywhere__btn:hover {
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.anywhere__btn svg {
  width: 22px; height: 22px;
  color: rgba(255,255,255,.85);
  flex: none;
}
.anywhere__btn > span:first-of-type {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1;
}
.anywhere__btn-sub {
  font-size: .68rem;
  font-weight: 500;
  color: rgba(255,255,255,.6);
  letter-spacing: .02em;
  text-transform: none;
  line-height: 1;
  margin-left: 2px;
}

@media (max-width: 720px) {
  .anywhere__list { flex-direction: column; align-items: center; }
  .anywhere__btn { min-width: 200px; justify-content: center; }
}

/* ── Split desktop / mobile : macOS+Windows sur laptop, iOS+Android sur téléphone ── */
.anywhere__list--mobile { display: none; }
.anywhere__list--desktop { display: flex; flex-wrap: nowrap; }
.anywhere__list--desktop .anywhere__item { flex: 1 1 0; min-width: 0; }
.kickoff__platforms .anywhere__list--desktop {
  max-width: 900px;
  width: 100%;
}
@media (max-width: 720px) {
  .anywhere__list--desktop { display: none; }
  .anywhere__list--mobile { display: flex; }
}

/* ── Bouton plateforme "multi" : head (icône + nom + format) puis variantes empilées ── */
.anywhere__btn--multi {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 20px 18px 16px;
  width: 300px;
  cursor: default;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  position: relative;
  overflow: visible;                                  /* rien ne clip les labels : les shine effects sont scopés aux variantes */
}
.anywhere__btn--multi:hover {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  transform: none;
}
.anywhere__btn-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  position: relative;
}
.anywhere__btn-logo {
  width: 22px; height: 22px;
  color: #fff;
  flex: none;
}
.anywhere__btn-headtxt {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.anywhere__btn-name {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.anywhere__btn-format {
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
  line-height: 1;
}
.anywhere__variants {
  display: flex;
  flex-direction: column;                             /* stacking vertical : chaque variante prend toute la largeur */
  gap: 6px;
  position: relative;
}
.anywhere__variant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: 0;
  transition:
    background .25s ease,
    border-color .25s ease,
    color .2s ease,
    padding-left .3s cubic-bezier(.22,1,.36,1);
}
.anywhere__variant:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #fff;
  padding-left: 18px;                                 /* léger shift à droite au hover — cue d'interaction subtil */
}
.anywhere__variant-label {
  white-space: nowrap;
}
.anywhere__variant-arrow {
  width: 16px; height: 16px;
  flex: none;
  color: rgba(255,255,255,.5);
  transition: color .2s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.anywhere__variant:hover .anywhere__variant-arrow {
  color: #fff;
  transform: translateY(3px);                         /* flèche descend = accent "download" au survol */
}

/* ─────────────────────────────────────────────────────────────────────
   FINALCTA — bloc de clôture inspiré Monday : gros titre serif +
   sub court + gros bouton violet arrondi. Sur fond blanc, centré. */
.finalcta {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 120px 24px 140px;
  text-align: center;
}
.finalcta__inner {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.finalcta__title {
  margin: 0;
  font-family: var(--font-serif, "Instrument Serif", serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -.022em;
  color: var(--ink);
}
.finalcta__title em {
  font-style: italic;
  background: var(--cta-grad);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.finalcta__sub {
  margin: 0;
  font-size: 1.1rem;
  color: #5b6275;
  max-width: 560px;
  line-height: 1.5;
}
.finalcta__btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #6A4DF0, #7d7bff);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.005em;
  text-decoration: none;
  border-radius: 14px;
  box-shadow:
    0 4px 10px rgba(106,77,240,.3),
    0 20px 40px -12px rgba(106,77,240,.4);
  transition: transform .3s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease;
}
.finalcta__btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px rgba(106,77,240,.4),
    0 28px 56px -12px rgba(106,77,240,.5);
}
.finalcta__btn:hover .finalcta__arrow { transform: translateX(4px); }
.finalcta__arrow {
  display: grid; place-items: center;
  transition: transform .3s cubic-bezier(.34,1.4,.5,1);
}
.finalcta__arrow svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .finalcta { padding: 80px 22px 100px; }
  .finalcta__title { font-size: clamp(1.8rem, 8vw, 2.4rem); }
  .finalcta__sub { font-size: .98rem; }
  .finalcta__btn { padding: 14px 28px; font-size: 1rem; }
}

/* ─────────────────────────────────────────────────────────────────────
   IMPACTFUL — bandeau sombre de clôture au-dessus du footer, inspiré
   de la section de fin Superhuman : fond violet profond, petit badge
   circulaire au centre, gros titre blanc, gros bouton pilule lavande. */
.impactful {
  position: relative;
  z-index: 2;
  background: #06070a;                       /* noir profond, uniforme */
  padding: 130px 24px 150px;
  text-align: center;
  overflow: hidden;
}
.impactful__inner {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}
.impactful__badge {
  width: 72px; height: 72px;
  display: grid; place-items: center;
  filter: drop-shadow(0 20px 30px rgba(0,0,0,.4));
}
.impactful__badge img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;                             /* logo Freescale sans fond ni marge */
}
.impactful__title {
  position: relative;
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.8vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  color: rgba(255,255,255,.2);              /* fallback / reduced-motion */
  max-width: 720px;
}
/* Word-split animation : gradient CTA sweep → white (même effet que .anywhere) */
.impactful__word {
  background-image: var(--cta-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: rgba(255,255,255,.28);
  color: rgba(255,255,255,.28);
  opacity: 0;
  transform: translateY(.16em);
  will-change: opacity, transform;
}
.impactful.is-in .impactful__word {
  animation: impactfulWordIn .8s cubic-bezier(.4, 0, .25, 1) both;
  animation-delay: var(--d, 0s);
}
@keyframes impactfulWordIn {
  0%   { opacity: 0; transform: translateY(.18em); -webkit-text-fill-color: rgba(255,255,255,.22); }
  20%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: rgba(255,255,255,.28); }
  48%  { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: rgba(255,255,255,.28); }
  72%  { -webkit-text-fill-color: transparent; }              /* le gradient CTA sweep */
  100% { opacity: 1; transform: translateY(0);     -webkit-text-fill-color: #ffffff; }
}
@media (prefers-reduced-motion: reduce) {
  .impactful.is-in .impactful__word {
    animation: none; opacity: 1; transform: none;
    -webkit-text-fill-color: #fff; color: #fff;
  }
}
.impactful__word--serif {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.07em;
  letter-spacing: 0;
}
/* Impactful CTA : réutilise le style .btn-cta du hero, aucun override nécessaire. */

@media (max-width: 720px) {
  .impactful { padding: 90px 22px 110px; }
  .impactful__inner { gap: 36px; }
  .impactful__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .impactful__btn { padding: 14px 26px; font-size: .95rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING v2 — 3 cartes + toggle Annuel/Mensuel (copie fidèle de la réf.)
   ═══════════════════════════════════════════════════════════════════════ */
.pricing2 {
  position: relative;
  z-index: 2;
  padding: 100px 24px 130px;
  background: var(--bg);
}
.pricing2__head {
  max-width: 820px;
  margin: 0 auto 56px;
  text-align: center;
}
.pricing2__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  letter-spacing: -.03em;
  line-height: 1.1;
  color: #0C1E5A;
  margin: 0 0 16px;
}
.pricing2__sub {
  font-size: 1.02rem;
  color: #6b7285;
  margin: 0 0 32px;
}
.pricing2__toggle {
  display: inline-flex;
  padding: 6px;
  background: #fff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(20,22,30,.05),
    0 10px 26px -14px rgba(20,22,30,.14);
  gap: 2px;
}
.ptg {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 12px 30px;
  border-radius: 14px;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 500;
  color: #5b6275;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.ptg:hover { color: #0C1E5A; }
.ptg.is-on {
  background: #0C1E5A;
  color: #fff;
}

/* Grille 3 cartes — grid large + gap 24px (spec InboxZero gap-6) */
.pricing2__grid {
  max-width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* Carte : specs exactes InboxZero — outer shell gradient white→#F9F9F9 + inner white pur */
.p2card {
  position: relative;
  background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
  border: 1px solid #F7F7F7;
  border-radius: 52px;
  padding: 20px;
  transition: transform .3s ease;
}
.p2card:hover { transform: translateY(-2px); }
/* Le featured n'a AUCUN traitement visuel spécial sur la carte, juste le bouton bleu + badge */

/* Inner card : une seule surface blanche, radius 32px, subtle border + soft shadow (spec InboxZero) */
.p2card__inner {
  background: #fff;
  border: 1px solid rgba(231,231,231,.5);
  border-radius: 32px 32px 0 0;                     /* arrondi haut seul — le body continue en bas */
  border-bottom: 0;                                 /* évite double bordure au divider */
  padding: 24px 24px 20px;
  box-shadow: 0 3px 12.9px 0 rgba(151,151,151,.08);
}

.p2card__topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 34px;
  margin-bottom: 30px;
}
.p2card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #303540;
}
.p2card__icon svg { width: 24px; height: 24px; }

.p2card__badge {
  display: inline-block;
  padding: 5px 12px;
  background: #daf5df;
  color: #1a7530;
  font-size: .78rem;
  font-weight: 500;
  border-radius: 14px;
  letter-spacing: 0;
}

.p2card__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.7rem;
  letter-spacing: -.015em;
  color: #0C1E5A;
  margin: 0 0 12px;
}
.p2card__lede {
  font-size: .96rem;
  color: #6b7285;
  line-height: 1.55;
  margin: 0 0 40px;
  min-height: 52px;
}

.p2card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 28px;
}
.p2card__price-num {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: -.035em;
  color: #0C1E5A;
  line-height: 1;
}
.p2card__price-cur {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1.9rem;
  color: #0C1E5A;
  line-height: 1;
}
.p2card__price-suffix {
  font-size: .88rem;
  color: #8b93a4;
  font-weight: 500;
  margin-left: 8px;
}

.p2card__cta {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(20,22,30,.14);
  color: #0C1E5A;
  text-align: center;
  font-family: inherit;
  font-size: .96rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.p2card__cta:hover {
  background: #fafbff;
  border-color: rgba(20,22,30,.24);
}
.p2card__cta--primary {
  background: #3b6bff;
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px -6px rgba(59,107,255,.45);
}
.p2card__cta--primary:hover {
  background: #2d5aeb;
  color: #fff;
}

/* Body : suite de la carte blanche unique — border sur les 3 côtés + hairline top */
.p2card__body {
  background: #fff;
  border: 1px solid rgba(231,231,231,.5);
  border-top: 1px solid rgba(20,22,30,.08);         /* divider intra-carte */
  border-radius: 0 0 32px 32px;                     /* arrondi bas seul */
  padding: 22px 24px 24px;
  margin-top: 0;
  box-shadow: 0 3px 12.9px 0 rgba(151,151,151,.08);
}
.p2card__more {
  font-size: .96rem;
  color: #0C1E5A;
  font-weight: 400;
  margin: 0 0 20px;
}
.p2card__feats {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p2card__feats li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .95rem;
  color: #303540;
  line-height: 1.5;
}
.p2card__feats li::before {
  content: "";
  flex: none;
  width: 18px; height: 18px;
  margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%233b6bff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 980px) {
  .pricing2__grid { grid-template-columns: 1fr; max-width: 460px; gap: 18px; }
  .p2card__lede { min-height: 0; }
}
@media (max-width: 720px) {
  .pricing2 { padding: 80px 16px 90px; }
  .pricing2__title { font-size: clamp(1.9rem, 7.5vw, 2.6rem); }
  .p2card__inner { padding: 28px 24px 22px; }
  .p2card__body { padding: 22px 24px 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING v2 — Section 2 : Compare plans (tableau feature × 3 plans)
   ═══════════════════════════════════════════════════════════════════════ */
.pcmp {
  padding: 80px 24px 80px;
  background: var(--bg);
}
.pcmp__inner {
  max-width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}
.pcmp__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -.025em;
  color: #0C1E5A;
  text-align: center;
  margin: 0 0 40px;
}
.pcmp__shell {
  background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
  border: 1px solid #F7F7F7;
  border-radius: 52px;
  padding: 20px;
}
.pcmp__table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  background: #fff;
  border: 1px solid rgba(231,231,231,.5);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 3px 12.9px 0 rgba(151,151,151,.08);
}
.pcmp__table thead tr { border-bottom: 1px solid rgba(231,231,231,.5); }
.pcmp__col-head {
  padding: 20px 24px;
  font-size: .85rem;
  font-weight: 500;
  color: #6b7285;
}
.pcmp__col-plan {
  padding: 20px 24px;
  text-align: center;
  min-width: 140px;
}
.pcmp__plan-name {
  font-size: .95rem;
  font-weight: 600;
  color: #0C1E5A;
}
.pcmp__plan-price {
  font-size: .78rem;
  color: #8b93a4;
  margin-top: 2px;
}
.pcmp__table tbody tr { border-bottom: 1px solid rgba(231,231,231,.5); }
.pcmp__table tbody tr:last-child { border-bottom: 0; }
.pcmp__table td {
  padding: 14px 24px;
  font-size: .92rem;
  color: #303540;
}
.pcmp__table td.pc-c { text-align: center; }
.pcv {                                              /* check ✓ bleu */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  color: #3b6bff;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1;
}
.pcx {                                              /* absent — tiret gris pâle */
  color: rgba(20,22,30,.22);
  font-size: 1rem;
}
.pcw {                                              /* mot (Limitée / Illimitée) */
  font-size: .85rem;
  color: #303540;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   PRICING v2 — Section 3 : FAQ tarifs (grid 2 col mini-cards en shell)
   ═══════════════════════════════════════════════════════════════════════ */
.pfaq {
  padding: 40px 24px 120px;
  background: var(--bg);
}
.pfaq__inner {
  max-width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}
.pfaq__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -.025em;
  color: #0C1E5A;
  text-align: center;
  margin: 0 0 40px;
}
.pfaq__shell {
  background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%);
  border: 1px solid #F7F7F7;
  border-radius: 52px;
  padding: 20px;
}
.pfaq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 0;
}
.pfaq__item {
  background: #fff;
  border: 1px solid rgba(231,231,231,.5);
  border-radius: 32px;
  box-shadow: 0 3px 12.9px 0 rgba(151,151,151,.08);
  padding: 24px;
}
.pfaq__item dt {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #0C1E5A;
  margin-bottom: 12px;
}
.pfaq__item dd {
  margin: 0;
  font-size: .95rem;
  color: #848484;
  line-height: 1.55;
}
.pfaq__item dd a {
  color: #3b6bff;
  text-decoration: underline;
}

@media (max-width: 820px) {
  .pcmp__table { display: block; overflow-x: auto; }
  .pfaq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .pcmp, .pfaq { padding: 60px 16px; }
  .pcmp__shell, .pfaq__shell { padding: 12px; border-radius: 32px; }
  .pcmp__table, .pfaq__item { border-radius: 22px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   GRADIENT FREESCALE DYNAMIQUE — animation continue du multicolor
   Le --cta-grad shift horizontalement en boucle sur tous les éléments qui l'utilisent
   (boutons CTA, badges, texte gradient, spark, checks…)
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes freescaleGradShift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

.btn-cta,
.btn-cta--glow,
.btn-cta--mini,
.plan__cta--grad,
.finalcta__btn,
.impactful__btn,
.sv-pill--grad,
.sv-grad,
.sv-zen__num,
.sv-zen__hnum,
.sv-zen__hbar i,
.sv-toggle.is-on,
.sv-chan__progress span,
.dtag__spark,
.drow.is-done .dcheck {
  background-size: 240% 240% !important;
  animation: freescaleGradShift 7s ease-in-out infinite;
}

/* Respecter les préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .btn-cta, .btn-cta--glow, .btn-cta--mini, .plan__cta--grad, .finalcta__btn,
  .impactful__btn, .sv-pill--grad, .sv-grad, .sv-zen__num, .sv-zen__hnum,
  .sv-zen__hbar i, .sv-toggle.is-on, .sv-chan__progress span,
  .dtag__spark, .drow.is-done .dcheck {
    animation: none;
    background-size: 100% 100% !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Inbox variant: real product screenshot (au lieu du mockup HTML)
   ═══════════════════════════════════════════════════════════════════════ */
.inbox--shot {
  display: block !important;
  grid-template-columns: none !important;
  height: auto !important;
  padding: 0;
  overflow: hidden;
}
.inbox--shot .inbox__shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: inherit;
}
.inbox--shot .inbox__video {
  display: none;
  width: 100%;
  height: auto;
  border-radius: inherit;
  background: #000;
}
.inbox--shot.is-playing .inbox__shot,
.inbox--shot.is-playing .inbox__play,
.inbox--shot.is-playing .inbox__docktarget { display: none !important; }
.inbox--shot.is-playing .inbox__video { display: block; }
.screen:has(.inbox--shot.is-playing) .dock { display: none !important; }
.screen.is-playing .dock { display: none !important; }

/* Dock target invisible pour les icônes .fly qui atterrissent sur le screenshot
   Positionné à la zone canaux du top bar (près du Gmail icon existant) */
.inbox__docktarget {
  position: absolute;
  top: 2.3%;
  right: 8.5%;                    /* laisse place au bouton "+ Ajouter un canal" à l'extrême droite */
  display: flex;
  gap: 6px;
  align-items: center;
  height: 3.5%;
  min-height: 30px;
  opacity: 0;                     /* les slots eux-mêmes sont invisibles — seules les .fly s'y dockent */
  pointer-events: none;
}
.inbox__docktarget .ctile--slot,
.inbox__docktarget .ctile--ref {
  width: 30px;
  height: 30px;
  display: inline-block;
}

/* Gutters latéraux : bump 24 → 44px sur écrans ≥ 900 pour respirer côté marge */
@media (min-width: 900px) {
  .hero, .feature, .sprawl, .centra, .anywhere, .agents, .kickoff,
  .chans, .trust, .testi, .teams, .compare, .trust2, .faq, .impactful, .finalcta,
  .subhero, .page-block, .pricing, .pricing2, .pcmp, .pfaq, .v2-section, .v2-steps {
    padding-left: 44px;
    padding-right: 44px;
  }
  /* .reach : pleine largeur, sans gouttières (les mains touchent les bords) */
  .reach { padding-left: 0; padding-right: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO BLUR → SHARP au scroll : "Freescale vous fait passer du flou à la lisibilité"
   Piloté par la variable --hb (mise à jour en JS selon scrollY).
   Aura pastel derrière le hero pour un flou "naturel" plutôt qu'un simple blur uniforme.
   ═══════════════════════════════════════════════════════════════════════ */
.hero { --hb: 18px; }
.hero__copy .headline { filter: blur(calc(var(--hb) * 1)); transition: filter .12s linear; will-change: filter; }
.hero__copy .subtext { filter: blur(calc(var(--hb) * .85)); transition: filter .12s linear; will-change: filter; }
.hero__copy .cta-row { filter: blur(calc(var(--hb) * .7)); transition: filter .12s linear; will-change: filter; }
.hero__copy .fx-hero-chip { filter: blur(calc(var(--hb) * .35)); transition: filter .12s linear; will-change: filter; }
.hero__visual, .hero__woman { filter: blur(calc(var(--hb) * 1.15)); transition: filter .14s linear; will-change: filter; }

/* Aura pastel derrière la hero — visible seulement quand le flou est fort */
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute; inset: -40px;
  z-index: 0;
  background:
    radial-gradient(60% 45% at 30% 40%, rgba(238,143,160,.32) 0%, transparent 60%),
    radial-gradient(50% 55% at 75% 55%, rgba(165,184,232,.34) 0%, transparent 60%),
    radial-gradient(45% 40% at 60% 25%, rgba(245,205,168,.28) 0%, transparent 60%);
  filter: blur(calc(var(--hb) * 3));
  opacity: calc(var(--hb) / 18);           /* fade out quand net */
  pointer-events: none;
  transition: opacity .14s linear;
}
.hero__copy, .hero__visual { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero { --hb: 0px !important; }
  .hero::before { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HERO "Du flou à la clarté" — concept scroll-driven
   Piloté par --hb (0..1) mis à jour au scroll par le JS
   ═══════════════════════════════════════════════════════════════════════ */
/* Wrapper qui donne de la hauteur de scroll pour l'effet pinned (hero reste fixe pendant que --hb passe de 1 → 0) */
.fxhero-scroll {
  position: relative;
  height: 200svh;                                     /* 2× viewport : 1 pour flou→net, 1 pour laisser la clarté respirer */
}
.fxhero {
  --hb: 1;                                            /* 1 = flou max, 0 = net */
  position: sticky;                                   /* pinné en haut pendant que la page scroll par dessus */
  top: 0;
  height: 100svh;
  padding: 120px 24px 80px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  isolation: isolate;
}

/* Layer 1 : le vrai screenshot du SaaS en fond, flou au départ */
.fxhero__screen {
  position: absolute; inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.fxhero__screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  filter: blur(calc(2px + 22px * var(--hb))) saturate(calc(.9 + .1 * (1 - var(--hb))));
  transform: scale(calc(1 + .04 * var(--hb)));      /* léger zoom quand flou pour cacher les bords blurred */
  transition: filter .12s linear, transform .12s linear;
  will-change: filter, transform;
}

/* Layer 2 : verre embué + gouttes d'eau + grain */
.fxhero__glass {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Tint lumineuse + noise grain SVG (fractalNoise) pour la texture "eau sur vitre" */
  background:
    /* Grain fin façon buée */
    url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    /* Voile blanc lumineux */
    linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.24) 100%);
  background-size: 200px 200px, 100% 100%;
  opacity: calc(.15 + .85 * var(--hb));              /* s'efface totalement quand net */
  transition: opacity .12s linear;
  mix-blend-mode: normal;
}

/* Layer 2b : gouttes d'eau (multiples radial-gradients) — donne des bumps/loupes */
.fxhero__droplets {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.7) 0 6px, rgba(255,255,255,.2) 8px, transparent 22px),
    radial-gradient(circle at 88% 22%, rgba(255,255,255,.6) 0 4px, rgba(255,255,255,.15) 7px, transparent 18px),
    radial-gradient(circle at 22% 68%, rgba(255,255,255,.65) 0 5px, rgba(255,255,255,.18) 9px, transparent 24px),
    radial-gradient(circle at 78% 78%, rgba(255,255,255,.55) 0 4px, rgba(255,255,255,.12) 7px, transparent 20px),
    radial-gradient(circle at 45% 32%, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,.1) 6px, transparent 14px),
    radial-gradient(circle at 62% 55%, rgba(255,255,255,.6) 0 5px, rgba(255,255,255,.15) 9px, transparent 20px),
    radial-gradient(circle at 35% 88%, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,.1) 6px, transparent 15px),
    radial-gradient(circle at 92% 55%, rgba(255,255,255,.55) 0 4px, rgba(255,255,255,.12) 8px, transparent 18px),
    radial-gradient(circle at 8% 42%, rgba(255,255,255,.5) 0 3px, rgba(255,255,255,.1) 6px, transparent 15px);
  filter: blur(calc(1px + 3px * var(--hb)));
  opacity: calc(var(--hb) * .9);
  transition: filter .12s linear, opacity .12s linear;
}

/* Stage centré : le texte s'estompe au fur et à mesure que le SaaS devient net */
.fxhero__stage {
  position: relative;
  z-index: 2;
  max-width: 780px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
/* Le titre et le sub fadent progressivement pour révéler le SaaS ; les CTA restent nets */
.fxhero__title { opacity: calc(.15 + .85 * var(--hb)); transition: opacity .12s linear; }
.fxhero__sub { opacity: calc(.25 + .75 * var(--hb)); transition: opacity .12s linear; }
.fxhero__eyebrow { opacity: calc(.35 + .65 * var(--hb)); transition: opacity .12s linear; }
.fxhero__eyebrow {
  display: inline-block;
  padding: 7px 16px;
  background: rgba(255,255,255,.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(20,22,30,.06);
  border-radius: 14px;
  color: #3b6bff;
  font-size: .78rem; font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Titre : 2 mots, "Du flou." blur qui se dissipe, "À la clarté." toujours net */
.fxhero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 8.5vw, 6.5rem);
  letter-spacing: -.035em;
  line-height: .96;
  margin: 0;
  color: #0C1E5A;
}
.fxhero__word { display: block; }
.fxhero__word--fog {
  font-style: italic;
  color: rgba(20,22,30,.9);
  text-shadow: 0 2px 20px rgba(255,255,255,.9);       /* halo blanc pour lisibilité sur frosted glass */
}
.fxhero__word--sharp {
  font-family: var(--sans);
  font-weight: 700;
  color: #0C1E5A;
  background: var(--cta-grad);
  background-size: 240% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: freescaleGradShift 8s ease-in-out infinite;
}

.fxhero__sub {
  max-width: 620px;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #303540;
  margin: 0;
  text-shadow: 0 1px 12px rgba(255,255,255,.85);
}
.fxhero__sub strong { color: #0C1E5A; font-weight: 600; }

.fxhero__ctas {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px;
}

.fxhero__chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(20,22,30,.08);
  border-radius: 14px;
  box-shadow: 0 6px 20px -10px rgba(20,22,30,.15);
  font-size: .82rem; color: #5b6275; font-weight: 500;
  margin-top: 8px;
}
.fxhero__chip-stack { display: inline-flex; }
.fxhero__chip-stack img {
  width: 20px; height: 20px; border-radius: 5px;
  margin-left: -5px; background: #fff; box-shadow: 0 0 0 1.5px #fff;
}
.fxhero__chip-stack img:first-child { margin-left: 0; }

.fxhero__scrollhint {
  margin-top: 40px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; color: #6b7285; font-weight: 500;
  opacity: calc(.85 * var(--hb));
  transition: opacity .12s linear;
}
.fxhero__scrollhint svg { width: 16px; height: 16px; animation: fxhero-bob 1.8s ease-in-out infinite; }
@keyframes fxhero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

@media (max-width: 900px) {
  .fxhero { padding: 90px 20px 60px; min-height: 90svh; }
  .fxhero__msg { font-size: .72rem; max-width: 62vw; padding: 8px 12px; }
  .fxhero__title { font-size: clamp(2.6rem, 12vw, 4.2rem); }
  .fxhero__sub { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fxhero { --hb: 0 !important; }
  .fxhero__msg { animation: none; }
  .fxhero__scrollhint svg { animation: none; }
}

/* Pont narratif entre le hero pinned (révélation SaaS) et les Steps */
.fxbridge {
  position: relative;
  z-index: 2;
  padding: 90px 24px 70px;
  text-align: center;
  background: #fff;
}
.fxbridge__inner { max-width: 720px; margin: 0 auto; }
.fxbridge__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  color: #0C1E5A;
  margin: 0 0 14px;
}
.fxbridge__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--cta-grad);
  background-size: 240% 240%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: freescaleGradShift 7s ease-in-out infinite;
}
.fxbridge__sub {
  font-size: 1rem;
  color: #5b6275;
  line-height: 1.55;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANIMATIONS CONTEMPORAINES — reveals springy, tilt 3D, shine, marquee, parallax
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --fx-spring: cubic-bezier(.34, 1.28, .64, 1);       /* légère surcompensation à la fin */
  --fx-out: cubic-bezier(.16, 1, .3, 1);              /* ease-out rapide puis lent */
  --fx-dur: 1s;
}

/* Base : élément en attente (invisible + translaté + scale + rotation subtile) */
.fx-steps__grid > *,
.fx-split__col,
.fx-compare__grid > *,
.fx-testi__grid > *,
.fx-privacy__grid > *,
.fx-pricing__grid > *,
.fx-faq__grid > *,
.fxbridge__inner > *,
.agent,
.agents__demo,
.reach__caption,
.kickoff__inner > * {
  opacity: 0;
  transform: translateY(48px) scale(.94);
  filter: blur(6px);
  transition:
    opacity .9s var(--fx-out),
    transform 1s var(--fx-spring),
    filter .7s var(--fx-out);
  will-change: opacity, transform, filter;
}

/* Split : le visuel arrive depuis la droite avec rotation légère + scale */
.fx-split__col--v {
  transform: translateY(48px) translateX(40px) scale(.9) rotate(2deg);
}
/* Le col text à gauche : arrive depuis la gauche */
.fx-split__col:not(.fx-split__col--v) {
  transform: translateY(48px) translateX(-28px) scale(.96);
}

/* Révélé */
.fx-steps__grid.fx-reveal > *,
.fx-split.fx-reveal .fx-split__col,
.fx-compare__grid.fx-reveal > *,
.fx-testi__grid.fx-reveal > *,
.fx-privacy__grid.fx-reveal > *,
.fx-pricing__grid.fx-reveal > *,
.fx-faq__grid.fx-reveal > *,
.fxbridge.fx-reveal .fxbridge__inner > *,
.agents.fx-reveal .agent,
.agents.fx-reveal .agents__demo,
.reach.fx-reveal .reach__caption,
.kickoff.fx-reveal .kickoff__inner > * {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1) rotate(0);
  filter: blur(0);
}

/* Stagger généreux : 100ms entre chaque enfant */
.fx-reveal > *:nth-child(1)  { transition-delay:  0ms; }
.fx-reveal > *:nth-child(2)  { transition-delay: 100ms; }
.fx-reveal > *:nth-child(3)  { transition-delay: 200ms; }
.fx-reveal > *:nth-child(4)  { transition-delay: 300ms; }
.fx-reveal > *:nth-child(5)  { transition-delay: 400ms; }
.fx-reveal > *:nth-child(6)  { transition-delay: 500ms; }
.fx-reveal > *:nth-child(7)  { transition-delay: 600ms; }
.fx-reveal > *:nth-child(8)  { transition-delay: 700ms; }

/* Split : visuel révélé après le texte (décalage 200ms) */
.fx-split.fx-reveal .fx-split__col--v { transition-delay: 200ms; }

/* ── HOVER : cards avec tilt 3D ── */
.fx-step, .p2card, .fx-comp-card, .fx-t-card, .fx-faq__item, .fx-pt, .anywhere__btn--multi {
  transition: transform .5s var(--fx-out), box-shadow .5s var(--fx-out);
  transform-style: preserve-3d;
  perspective: 1000px;
}
.fx-step:hover, .fx-comp-card:hover, .fx-t-card:hover, .fx-faq__item:hover, .fx-pt:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 60px -20px rgba(20,22,30,.2);
}
/* Data-tilt : élément qui suit la souris (piloté en JS) */
[data-tilt] {
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0);
  transition: transform .25s var(--fx-out);
}
[data-tilt]:hover { transition: transform .06s linear; }

/* ── SHINE SWEEP : bandeau lumineux qui balaie le CTA principal ── */
.btn-cta--glow { position: relative; overflow: hidden; }
.btn-cta--glow::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
  animation: fxShine 4.5s ease-in-out infinite;
}
@keyframes fxShine {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* ── HERO : parallax subtil sur l'image (piloté en JS via --pfx) + float continue ── */
.hero__woman {
  transform: translate3d(0, calc(var(--pfx, 0) * -20px), 0);
  transition: transform .1s linear;
  will-change: transform;
  animation: fxheroFloat 9s ease-in-out infinite;
}
@keyframes fxheroFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}

/* ── TEXTES : mots qui blur-fade-in un par un pour les H2 principaux ── */
.fx-word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(16px);
  transition: opacity .7s var(--fx-out), filter .7s var(--fx-out), transform .8s var(--fx-spring);
}
.fx-reveal-text .fx-word,
.fx-reveal .fx-word,
[data-reveal-text].fx-reveal-text .fx-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.fx-word + .fx-word { margin-left: .2em; }

/* ── MARQUEE : personas ou logos qui défilent horizontalement en boucle ── */
.fx-marquee {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.fx-marquee__track {
  display: inline-flex;
  gap: 14px;
  animation: fxMarquee 28s linear infinite;
}
.fx-marquee:hover .fx-marquee__track { animation-play-state: paused; }
@keyframes fxMarquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── EYEBROW chip : gradient shift subtil en boucle ── */
/* ═══════════════════════════════════════════════════════════════════════
   PAGES LÉGALES — layout narrow, typo article, TOC sidebar
   ═══════════════════════════════════════════════════════════════════════ */
.lg { padding: 130px 24px 100px; position: relative; z-index: 2; }
.lg__inner { max-width: 940px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 60px; align-items: start; }
.lg__toc { position: sticky; top: 100px; }
.lg__toc-label { font-size: .72rem; font-weight: 600; color: #6b7385; text-transform: uppercase; letter-spacing: .1em; margin: 0 0 14px; }
.lg__toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; counter-reset: toc; }
.lg__toc li { counter-increment: toc; }
.lg__toc a { display: flex; gap: 10px; color: #5b6275; text-decoration: none; font-size: .88rem; line-height: 1.4; transition: color .2s ease; padding: 4px 0; }
.lg__toc a::before { content: counter(toc, decimal-leading-zero); color: #b0b6c1; font-variant-numeric: tabular-nums; font-weight: 600; flex: none; }
.lg__toc a:hover { color: #0C1E5A; }
.lg__body { max-width: none; }
.lg__eyebrow { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(59,107,255,.10); color: #3b6bff; font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 20px; }
.lg__title { font-family: var(--sans); font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 3rem); letter-spacing: -.03em; line-height: 1.1; color: #0C1E5A; margin: 0 0 14px; }
.lg__meta { font-size: .88rem; color: #6b7385; margin: 0 0 48px; padding-bottom: 24px; border-bottom: 1px solid rgba(20,22,30,.08); }
.lg__meta strong { color: #0C1E5A; font-weight: 600; }
.lg__intro { font-size: 1.08rem; line-height: 1.7; color: #2a303c; margin: 0 0 48px; }
.lg__section { margin: 0 0 44px; scroll-margin-top: 100px; }
.lg__section h2 { font-family: var(--sans); font-weight: 700; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; color: #0C1E5A; margin: 0 0 16px; }
.lg__section h3 { font-family: var(--sans); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: #0C1E5A; margin: 24px 0 10px; }
.lg__section p { font-size: 1rem; line-height: 1.7; color: #3d4557; margin: 0 0 14px; }
.lg__section p:last-child { margin-bottom: 0; }
.lg__section ul, .lg__section ol { margin: 0 0 14px; padding-left: 20px; color: #3d4557; font-size: 1rem; line-height: 1.7; }
.lg__section ul li, .lg__section ol li { margin-bottom: 6px; }
.lg__section a { color: #1E40FF; text-decoration: underline; text-decoration-color: rgba(30,64,255,.35); text-underline-offset: 3px; }
.lg__section a:hover { text-decoration-color: currentColor; }
.lg__section strong { color: #0C1E5A; font-weight: 600; }
.lg__note { margin: 48px 0 0; padding: 20px 22px; border: 1px solid rgba(30,64,255,.18); background: rgba(59,107,255,.04); border-radius: 14px; font-size: .88rem; line-height: 1.55; color: #3d4557; }
.lg__note strong { color: #0C1E5A; }
@media (max-width: 900px) {
  .lg__inner { grid-template-columns: 1fr; gap: 40px; }
  .lg__toc { position: static; }
  .lg { padding: 90px 18px 70px; }
}

/* Pastille : bleu clair uni, texte bleu, uppercase, arrondi pill */
.fx-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 14px;
  background: rgba(59,107,255,.10);
  color: #3b6bff;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
@keyframes fxEyebrowShift {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-steps__grid > *, .fx-split__col, .fx-compare__grid > *,
  .fx-testi__grid > *, .fx-privacy__grid > *, .fx-pricing__grid > *,
  .fx-faq__grid > *, .fxbridge__inner > *, .agent, .agents__demo,
  .reach__caption, .kickoff__inner > *, .fx-split__col--v, .fx-word {
    opacity: 1; transform: none; transition: none; filter: none;
  }
  .hero__woman, .btn-cta--glow::after, .fx-eyebrow, .fx-marquee__track {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   FOOTER "Dia-like" : minimal + pyramide arc-en-ciel étagée
   ═══════════════════════════════════════════════════════════════════════ */
.dfooter {
  position: relative;
  z-index: 2;
  background: #fff;
  padding: 100px 40px 0;
  overflow: hidden;
  color: #0C1E5A;
}

/* Nav pill compacte centrée */
.dfooter__pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: rgba(20,22,30,.04);
  border: 1px solid rgba(20,22,30,.06);
  border-radius: 14px;
  margin: 0 auto;
  display: flex;
  width: fit-content;
  box-shadow: 0 8px 30px -14px rgba(20,22,30,.15);
}
.dfooter__pill-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  color: #0C1E5A;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
}
.dfooter__pill-brand img { width: 24px; height: 24px; }
.dfooter__pill-link {
  padding: 8px 16px;
  color: #303540;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .9rem;
  border-radius: 14px;
  transition: background .2s ease;
}
.dfooter__pill-link:hover { background: rgba(20,22,30,.06); }
.dfooter__pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  font-family: var(--sans);
  font-weight: 500;
  font-size: .88rem;
  margin-left: 4px;
  transition: background .2s ease;
}
.dfooter__pill-cta:hover { background: #2a2d38; }

/* Signature centrée */
.dfooter__signature {
  text-align: center;
  margin: 44px auto 20px;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: #6b7285;
  line-height: 1.7;
}

/* Social row centré */
.dfooter__social {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin: 0 auto 80px;
}
.dfooter__social a {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #0C1E5A;
  text-decoration: none;
  transition: color .2s ease;
}
.dfooter__social a:hover { color: #3b6bff; }

/* Meta rows : gauche/droite spread */
.dfooter__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 40px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: #0C1E5A;
}
.dfooter__meta-l { text-decoration: none; color: #0C1E5A; }
.dfooter__meta-l:hover { color: #3b6bff; }
.dfooter__meta-r { color: #0C1E5A; }
.dfooter__meta-r b { color: #1a7a4b; font-weight: 700; letter-spacing: .06em; }

/* PYRAMIDE ARC-EN-CIEL ÉTAGÉE */
.dfooter__rainbow {
  margin-top: 70px;
  width: 100%;
  line-height: 0;
}
.dfooter__rainbow svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
}

@media (max-width: 780px) {
  .dfooter { padding: 60px 20px 0; }
  .dfooter__pill { flex-wrap: wrap; justify-content: center; padding: 8px; }
  .dfooter__pill-link { padding: 8px 12px; font-size: .85rem; }
  .dfooter__meta { padding: 6px 8px; font-size: .66rem; letter-spacing: .08em; }
  .dfooter__social { gap: 20px; margin-bottom: 60px; }
  .dfooter__rainbow svg { max-height: 220px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ORB SECTION : deux mains qui se rapprochent au scroll + boule qui naît
   Pinné pendant que --op passe de 0 à 1
   ═══════════════════════════════════════════════════════════════════════ */
.orb-scroll {
  position: relative;
  height: 220svh;
}
.orb {
  --op: 0;                                  /* progression 0..1 pilotée en JS */
  position: sticky;
  top: 0;
  height: 100svh;
  background: linear-gradient(180deg, #0a0b12 0%, #1a1730 50%, #0d0a24 100%);
  overflow: hidden;
  display: grid;
  place-items: center;
  color: #fff;
  isolation: isolate;
}

/* Cosmos : étoiles + nébuleuse pastel en fond */
.orb__cosmos {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    radial-gradient(2px 2px at 15% 22%, rgba(255,255,255,.9), transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(255,255,255,.75), transparent 50%),
    radial-gradient(2px 2px at 42% 68%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(1px 1px at 88% 62%, rgba(255,255,255,.6), transparent 50%),
    radial-gradient(1.5px 1.5px at 8% 78%, rgba(255,255,255,.7), transparent 50%),
    radial-gradient(2px 2px at 62% 32%, rgba(255,255,255,.55), transparent 50%),
    radial-gradient(1px 1px at 33% 12%, rgba(255,255,255,.5), transparent 50%),
    radial-gradient(70% 55% at 50% 70%, rgba(232,85,120,.14) 0%, transparent 60%),
    radial-gradient(60% 50% at 30% 30%, rgba(165,184,232,.12) 0%, transparent 60%);
  animation: orbTwinkle 6s ease-in-out infinite;
}
@keyframes orbTwinkle {
  0%, 100% { opacity: .85; }
  50%      { opacity: 1; }
}

/* Stage : conteneur central */
.orb__stage {
  position: relative;
  z-index: 2;
  width: min(720px, 90vw);
  height: min(520px, 60svh);
  display: grid;
  place-items: center;
}

/* Mains : composition diagonale comme la ref cosmique.
   Main top-left : arrive du haut-gauche, cupping down over the orb (rotation ~ -25deg → 0)
   Main bottom-right : arrive du bas-droite, cupping up under the orb (rotation ~ 155deg → 180) */
/* Mains détourées "Between Us" (rose glow) — composition ref : top hand haut-gauche, bottom hand bas-droite */
.orb__hand {
  position: absolute;
  width: 55%;
  height: auto;
  filter:
    drop-shadow(0 0 40px rgba(251,163,196,.4))                /* halo rose diffus */
    drop-shadow(0 12px 30px rgba(0,0,0,.35));                 /* profondeur */
  transition: transform .1s linear, opacity .12s linear;
  will-change: transform, opacity;
  opacity: calc(.2 + var(--op) * .8);
  pointer-events: none;
}
.orb__hand--l {
  /* hand-top.png : arrive du haut-gauche, fingers reaching down-right vers l'orb */
  top: 10%;
  left: -8%;
  transform: translate(calc(-30% + var(--op) * 22%), calc(-40% + var(--op) * 30%));
}
.orb__hand--r {
  /* hand-bottom.png : arrive du bas-droite, fingers reaching up-left vers l'orb */
  bottom: 10%;
  right: -8%;
  transform: translate(calc(30% - var(--op) * 22%), calc(40% - var(--op) * 30%));
}

/* La boule : cachée au départ, naît quand les mains se touchent (--op > .5) */
.orb__ball {
  position: relative;
  width: clamp(120px, 22vw, 220px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* Apparition : progression basée sur la 2e moitié du scroll (op de .5 à 1) → scale de 0 à 1 */
  opacity: calc(max(0, (var(--op) - .35) * 2.5));
  transform: scale(calc(max(0, (var(--op) - .35) * 1.7)));
  transition: transform .1s linear, opacity .1s linear;
  z-index: 3;
}
/* Anneau lumineux (glow ring autour de la boule) — palette officielle Freescale */
.orb__ball-ring {
  position: absolute; inset: -8%;
  border-radius: 50%;
  background: conic-gradient(from calc(var(--op) * 540deg),
    #FF7AB8,   /* Vivid Pink */
    #FDE8F1,   /* Soft Pink */
    #C7B8F6,   /* Quiet Focus */
    #1E40FF,   /* Royal Blue */
    #C7B8F6,   /* Quiet Focus */
    #FDE8F1,   /* Soft Pink */
    #FF7AB8);
  filter: blur(calc(10px + var(--op) * 18px));
  opacity: calc(.7 + var(--op) * .3);
  animation: orbRingSpin 14s linear infinite;
}
@keyframes orbRingSpin {
  to { transform: rotate(360deg); }
}
/* Cœur sombre (l'eclipse) */
.orb__ball-core {
  position: absolute; inset: 6%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #1a1730 0%, #05030f 70%);
  box-shadow: inset 0 0 40px rgba(0,0,0,.8);
}
/* Petit spark satellite qui orbite (Momentum Pink) */
.orb__ball-spark {
  position: absolute;
  top: 50%; left: 100%;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #FBA3C4;
  box-shadow: 0 0 22px 4px rgba(251,163,196,.95), 0 0 44px 10px rgba(251,163,196,.55);
  transform-origin: calc(-50% - 8px) 0;
  animation: orbSpark 5s linear infinite;
}
@keyframes orbSpark {
  from { transform: rotate(0deg) translate(0, -50%); }
  to   { transform: rotate(360deg) translate(0, -50%); }
}

/* Caption : apparait à la fin, en bas */
.orb__caption {
  position: absolute;
  bottom: 8svh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  text-align: center;
  max-width: 620px;
  padding: 0 20px;
  opacity: calc(max(0, (var(--op) - .55) * 2.5));
  transform: translate(-50%, calc(20px - var(--op) * 20px));
  transition: opacity .1s linear, transform .1s linear;
}
.orb__eyebrow {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: #F5CDA8;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  margin-bottom: 14px;
}
.orb__title {
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -.025em;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 12px;
}
.orb__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(120deg, #FF7AB8, #FDE8F1, #C7B8F6, #1E40FF, #C7B8F6, #FDE8F1, #FF7AB8);
  background-size: 220% 220%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: freescaleGradShift 6s ease-in-out infinite;
}
.orb__sub {
  font-size: 1rem;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 720px) {
  .orb-scroll { height: 200svh; }
  .orb__stage { width: 100vw; height: 45svh; }
  .orb__hand { width: 55%; }
  .orb__ball { width: clamp(90px, 30vw, 160px); }
  .orb__title { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .orb { --op: 1 !important; }
  .orb__cosmos, .orb__ball-ring, .orb__ball-spark { animation: none; }
}

/* Variante .headline--one : les 2 .line s'affichent inline sur une seule ligne */
.headline--one { white-space: nowrap; }
.headline--one .line { display: inline; }
.headline--one .line--bold { margin-left: .28em; }
@media (max-width: 900px) {
  .headline--one { white-space: normal; }
  .headline--one .line { display: block; }
  .headline--one .line--bold { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   BTN-SIMPLE : bouton bleu Freescale #0C38C9, plein, halo et gloss subtils
   ═══════════════════════════════════════════════════════════════════════ */
.btn-simple {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 30px;
  /* Gradient bleu pill : ton uni azuré, subtle depth */
  background: linear-gradient(180deg, #607EF6 0%, #4666EE 100%);
  color: #fff;
  border: 0;
  border-radius: 14px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -.005em;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 3px 10px -4px rgba(70,102,238,.28);
  transition:
    background .25s ease,
    box-shadow .3s ease,
    filter .25s ease;
  cursor: pointer;
}
.btn-simple::before { content: none; }
.btn-simple {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.btn-simple:hover {
  transform: scale(1.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 16px -4px rgba(70,102,238,.4);
}
.btn-simple:hover::before { left: 130%; }
.btn-simple:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 4px 10px -2px rgba(12,56,201,.4);
}
.btn-simple:focus-visible {
  outline: 2px solid #A9D8FF;
  outline-offset: 3px;
}
.btn-simple__label { position: relative; z-index: 1; line-height: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   Halo Freescale autour du screen (feature section) — remplace le fond gradient
   Aura conic-gradient qui tourne lentement, palette officielle
   ═══════════════════════════════════════════════════════════════════════ */
.feature .screen { position: relative; }
.feature .screen::before {
  content: "";
  position: absolute;
  inset: -80px;
  z-index: -1;
  background: conic-gradient(from 45deg,
    #FF7AB8,   /* Vivid Pink */
    #FDE8F1,   /* Soft Pink */
    #C7B8F6,   /* Quiet Focus */
    #1E40FF,   /* Royal Blue */
    #C7B8F6,   /* Quiet Focus */
    #FDE8F1,   /* Soft Pink */
    #FF7AB8);
  filter: blur(70px);
  opacity: .8;
  border-radius: 40px;
  animation: featureHaloSpin 24s linear infinite;
  pointer-events: none;
}
@keyframes featureHaloSpin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .feature .screen::before { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PLAY BUTTON sur le screen (démo vidéo)
   ═══════════════════════════════════════════════════════════════════════ */
.inbox__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 72px; height: 72px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 1px 1px rgba(255,255,255,.7),
    0 8px 32px rgba(0,0,0,.1);
  color: #333;
  cursor: pointer;
  z-index: 5;
  padding: 0;
  display: grid; place-items: center;
  transition: transform .2s ease, box-shadow .2s ease;
}
.inbox__play svg { display: block; width: 38px; height: 38px; }
.inbox__play:hover {
  transform: translate(-50%, -50%) scale(1.04);
  background: rgba(255,255,255,.22);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.55),
    inset 0 1px 1px rgba(255,255,255,.65),
    0 10px 36px rgba(0,0,0,.14);
}
.inbox__play:active { transform: translate(-50%, -50%) scale(.96); }
.inbox__play-halo { display: none; }
.inbox__play-btn { display: contents; }

/* ── Overrides ciblés en #0C1E5A ─────────────────────────────────────────── */
/* Headline "Votre activité, enfin au clair." (hero, .headline--one) */
.headline--one,
.headline--one .line--serif,
.headline--one .line--bold { color: #0C1E5A; }
.headline--one .hl-word { -webkit-text-fill-color: #0C1E5A !important; }
@media (prefers-reduced-motion: reduce) {
  .headline--one.is-in .hl-word,
  .headline--one .hl-word { color: #0C1E5A; -webkit-text-fill-color: #0C1E5A !important; }
}

/* Titre "Configuré en moins de 5 minutes." (fx-steps h2 + em gradient) */
.fx-steps .fx-h2 { color: #0C1E5A; }
.fx-steps .fx-h2 em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #0C1E5A;
  color: #0C1E5A;
  animation: none;
}

/* Em italiques des 4 blocs fx-split : le gradient passait par un stop rose pâle
   quasi invisible → on force la couleur solide #0C1E5A pour rester lisible. */
.fx-split .fx-h2 em {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: #0C1E5A;
  color: #0C1E5A;
  animation: none;
}


/* ══════════════════════════════════════════════════════════════════════════════
   PRICING3 — 3 cards clean, toggle Annual/Monthly, badge Populaire
   Style minimal inspiré du screenshot fourni (cartes blanches douces,
   card featured avec CTA bleu solide).
   ══════════════════════════════════════════════════════════════════════════════ */
.pricing3 { padding: 120px 24px 100px; background: transparent; position: relative; z-index: 2; }
.pricing3__head { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.pricing3__title { font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.03em; line-height: 1.1; color: #0C1E5A; margin: 0 0 14px; }
.pricing3__title br { display: block; }
.pricing3__sub { font-size: 1rem; color: #5b6275; margin: 0 0 32px; }
.pricing3__toggle { display: inline-flex; padding: 5px; border-radius: 999px; background: rgba(12, 30, 90, .06); gap: 4px; }
.p3tg { border: 0; background: transparent; padding: 10px 22px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: .9rem; color: #5b6275; cursor: pointer; transition: background .18s ease, color .18s ease; }
.p3tg.is-on { background: #0C1E5A; color: #fff; }

.pricing3__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1180px; margin: 0 auto; align-items: stretch; }
.p3card { background: #fff; border: 1px solid rgba(20, 22, 30, .08); border-radius: 22px; padding: 30px 28px 32px; display: flex; flex-direction: column; box-shadow: 0 2px 10px -4px rgba(20, 22, 30, .06); transition: transform .25s ease, box-shadow .25s ease; }
.p3card:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -12px rgba(20, 22, 30, .12); }
.p3card--featured {
  position: relative;
  border: 3px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cta-grad) border-box;
  background-size: auto, 240% 240%;
  box-shadow: 0 14px 40px -14px rgba(30, 64, 255, .22);
  animation: freescaleGradShift 7s ease-in-out infinite;
}

.p3card__top { display: flex; flex-direction: column; padding-bottom: 26px; border-bottom: 1px solid rgba(20, 22, 30, .06); margin-bottom: 26px; position: relative; }
.p3card__icon { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; color: #0C1E5A; margin-bottom: 22px; }
.p3card__icon svg { width: 26px; height: 26px; display: block; }
.p3card__badge { position: absolute; top: 0; right: 0; padding: 4px 10px; border-radius: 999px; background: #DEFCE9; color: #128F4C; font-size: .72rem; font-weight: 600; letter-spacing: .02em; }
.p3card__name { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; color: #0C1E5A; margin: 0 0 10px; }
.p3card__lede { font-size: .9rem; color: #5b6275; line-height: 1.5; margin: 0 0 22px; min-height: 2.7em; }
.p3card__price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 6px; color: #0C1E5A; }
.p3card__price-num { font-family: var(--sans); font-weight: 700; font-size: clamp(2.2rem, 3.4vw, 2.8rem); line-height: 1; letter-spacing: -.03em; }
.p3card__price-cur { font-size: 1.2rem; font-weight: 600; }
.p3card__price-suffix { font-size: .82rem; color: #8b93a4; font-weight: 500; margin-left: 6px; }
.p3card__note { font-size: .78rem; color: #8b93a4; margin: 0 0 18px; }
/* CTAs plans tarifs — alignés sur .btn-simple pour cohérence brand */
.p3card__cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 20px;
  border-radius: 14px;
  background: #fff;
  color: #0C1E5A;
  border: 1px solid rgba(20, 22, 30, .12);
  font-family: var(--sans);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  margin-top: 6px;
  transition: background .18s ease, border-color .18s ease;
}
.p3card__cta:hover { background: rgba(12, 30, 90, .04); border-color: rgba(12, 30, 90, .25); }

/* Primary : même DA que .btn-simple — gradient vertical + gloss + halo bleu + shine sweep au hover */
/* Aligné DA .btn-simple : pill bleu uni, gradient doux, hover darken */
.p3card__cta--primary {
  position: relative;
  background: linear-gradient(180deg, #607EF6 0%, #4666EE 100%);
  color: #fff;
  border: 0;
  padding: 14px 24px;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 3px 10px -4px rgba(70,102,238,.28);
  transition:
    background .25s ease,
    box-shadow .3s ease;
}
.p3card__cta--primary::before { content: none; }
.p3card__cta--primary {
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;
}
.p3card__cta--primary:hover {
  transform: scale(1.035);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 16px -4px rgba(70,102,238,.4);
}
.p3card__cta--primary:active { transform: scale(1); transition-duration: .1s; }

.p3card__more { font-size: .82rem; font-weight: 600; color: #0C1E5A; margin: 0 0 12px; }
.p3card__feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.p3card__feats li { display: flex; gap: 10px; font-size: .9rem; color: #303540; line-height: 1.5; }
.p3card__feats li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none'%3E%3Cpath d='M5 12l5 5L20 7' stroke='%231E40FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

@media (max-width: 900px) {
  .pricing3__grid { grid-template-columns: 1fr; max-width: 480px; }
  .p3card__lede { min-height: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TARIFS PAGE — adapter la DA à la homepage (typo, couleurs, gradient em)
   ══════════════════════════════════════════════════════════════════════════════ */
/* Titre principal pricing3 : em italique en gradient de marque */
.pricing3__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: #0C1E5A;
}

/* Comparaison des plans : mise en cohérence avec la DA homepage */
.pcmp { background: #EFF3F9; padding: 100px 24px; position: relative; z-index: 2; }
.pcmp__inner { max-width: 1180px; margin: 0 auto; }
.pcmp__title { font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.03em; color: #0C1E5A; text-align: center; margin: 0 0 48px; }
.pcmp__wrap { background: #fff; border-radius: 24px; border: 1px solid rgba(20,22,30,.06); box-shadow: 0 3px 12px rgba(151,151,151,.05); overflow: hidden; }
.pcmp__table { width: 100%; border-collapse: collapse; }
.pcmp__table th, .pcmp__table td { padding: 16px 20px; text-align: left; font-size: .92rem; color: #303540; border-bottom: 1px solid rgba(20,22,30,.05); }
.pcmp__col-head { color: #0C1E5A; font-weight: 700; font-size: .95rem; background: rgba(12,30,90,.03); }
.pcmp__col-plan { text-align: center; font-weight: 700; color: #0C1E5A; background: rgba(12,30,90,.03); }
.pcmp__plan-name { font-size: 1rem; font-weight: 700; color: #0C1E5A; }
.pcmp__plan-price { font-size: .8rem; font-weight: 500; color: #5b6275; margin-top: 2px; }
.pcmp__table tbody tr:last-child td { border-bottom: 0; }
.pcmp__table tbody tr:hover { background: rgba(30, 64, 255, .02); }
.pc-c { text-align: center; }
.pcv { color: #1E40FF; font-weight: 700; }
.pcx { color: #b0b6c1; }
.pcw { font-size: .84rem; font-weight: 600; color: #0C1E5A; padding: 3px 10px; border-radius: 999px; background: rgba(12,30,90,.06); }

/* ═══════════════════════════════════════════════════════════════════════
   CALCULATEUR DE VALEUR — aligné DA homepage (cartes blanches, palette Free Horizon)
   ═══════════════════════════════════════════════════════════════════════ */
.pcalc {
  padding: 120px 24px;
  position: relative;
  z-index: 2;
  background: transparent;
  overflow: hidden;
}
.pcalc__inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
.pcalc__head { text-align: center; margin-bottom: 56px; }
.pcalc__head .fx-eyebrow { margin: 0 auto 18px; }
.pcalc__title { max-width: 720px; margin-left: auto; margin-right: auto; margin-bottom: 14px; }
.pcalc__sub { max-width: 560px; margin: 0 auto; color: #5b6275; font-size: 1rem; line-height: 1.55; }

.pcalc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pcalc__grid { grid-template-columns: 1fr; }
}

/* ───────── CARD SHARED (même look que .testi__card, .fx-trust__card) ───────── */
.pcalc__inputs,
.pcalc__result {
  position: relative;
  background: #fff;
  border: 1px solid rgba(20,22,30,.06);
  border-radius: 22px;
  padding: 32px;
  box-shadow:
    0 1px 2px rgba(20,22,30,.04),
    0 12px 28px -20px rgba(20,22,30,.12);
}

.pcalc__inputs {
  display: flex; flex-direction: column; gap: 34px;
}
.pcalc__field { display: flex; flex-direction: column; gap: 14px; }
.pcalc__label {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-size: .95rem; font-weight: 500; color: #14151a;
}
.pcalc__label > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
/* Petite icône dans cercle blanc + bordure gradient Free Horizon (style .fx-step__icon) */
.pcalc__label .pcalc__ic {
  width: 32px; height: 32px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--cta-grad) border-box;
  background-size: auto, 240% 240%;
  border: 1.5px solid transparent;
  color: #0C1E5A;
  flex: none;
  animation: freescaleGradShift 7s ease-in-out infinite;
}
.pcalc__label .pcalc__ic svg { width: 16px; height: 16px; display: block; }
.pcalc__val {
  font-family: var(--sans);
  font-weight: 700; font-size: 1.35rem; color: #0C1E5A;
  letter-spacing: -.02em;
  min-width: 76px; text-align: right;
  font-variant-numeric: tabular-nums;
  transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.pcalc__val.is-bumping { transform: scale(1.08); }

.pcalc__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px;
  border-radius: 14px;
  background: linear-gradient(90deg, #0C1E5A 0%, #0C1E5A var(--fill, 0%), rgba(20,22,30,.08) var(--fill, 0%));
  outline: none; cursor: pointer;
}
.pcalc__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff;
  border: 3px solid #0C1E5A;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(12,30,90,.25);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.pcalc__slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pcalc__slider:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }
.pcalc__slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 3px solid #0C1E5A; cursor: grab;
  box-shadow: 0 2px 6px rgba(12,30,90,.25);
}
.pcalc__scale {
  display: flex; justify-content: space-between;
  font-size: .78rem; color: #8b93a4;
  font-variant-numeric: tabular-nums;
}

/* ───────── RESULT CARD (blanc, dans le même style que .testi__card) ───────── */
.pcalc__result {
  display: flex; flex-direction: column; justify-content: center;
  isolation: isolate;
}
/* Guillemet gradient discret en fond, style testi */
.pcalc__result::before {
  content: "";
  position: absolute;
  top: -30%; right: -20%;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,184,246,.22) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}
.pcalc__result-line { display: flex; flex-direction: column; gap: 4px; position: relative; z-index: 1; }
.pcalc__result-lbl {
  font-size: .78rem;
  color: #6b7385;
  font-weight: 500;
}
.pcalc__result-lbl::before { content: none; }
.pcalc__result-big {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(2.2rem, 4vw, 2.8rem);
  line-height: 1;
  letter-spacing: -.025em;
  color: #0C1E5A;
  font-variant-numeric: tabular-nums;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.pcalc__result-big.is-bumping { transform: scale(1.04); }
/* La grande valeur en italique serif (comme les <em> des .fx-h2) */
.pcalc__result-big--grad {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  color: #0C1E5A;
  background: none;
  -webkit-background-clip: initial;
          background-clip: initial;
  -webkit-text-fill-color: #0C1E5A;
  animation: none;
}
.pcalc__result-suf {
  font-size: 1rem; font-weight: 500; color: #8b93a4;
  margin-left: 6px; letter-spacing: 0;
  -webkit-text-fill-color: #8b93a4;
  font-family: var(--sans);
  font-style: normal;
}
.pcalc__result-sep {
  height: 1px;
  background: rgba(20,22,30,.06);
  margin: 20px 0;
}
.pcalc__result-ratio {
  font-size: .92rem;
  color: #5b6275;
  line-height: 1.6;
  margin: 4px 0 22px;
  position: relative; z-index: 1;
}
.pcalc__result-ratio strong { color: #0C1E5A; font-weight: 600; font-variant-numeric: tabular-nums; }
.pcalc__cta { display: inline-flex; width: 100%; justify-content: center; margin-top: 4px; position: relative; z-index: 1; }
.pcalc__cta.btn-simple {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: .95rem;
}
.pcalc__disclaimer {
  font-size: .72rem;
  color: #8b93a4;
  line-height: 1.55;
  margin: 22px 0 0;
  position: relative; z-index: 1;
  padding-top: 18px;
  border-top: 1px solid rgba(20,22,30,.06);
}

@media (max-width: 640px) {
  .pcalc { padding: 70px 16px; }
  .pcalc__inputs, .pcalc__result { padding: 24px; }
  .pcalc__val { font-size: 1.2rem; }
}

/* FAQ tarifs : mêmes cartes que .fx-faq de la homepage */
.pfaq { background: #fff; padding: 100px 24px; position: relative; z-index: 2; }
.pfaq__inner { max-width: 1000px; margin: 0 auto; }
.pfaq__title { font-family: var(--sans); font-weight: 700; font-size: clamp(2rem, 4vw, 2.6rem); letter-spacing: -.03em; color: #0C1E5A; text-align: center; margin: 0 0 44px; }
.pfaq__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; text-align: left; }
.pfaq__item { background: linear-gradient(180deg, #FFFFFF 0%, #F9F9F9 100%); border: 1px solid rgba(20,22,30,.06); border-radius: 20px; padding: 24px; }
.pfaq__item dt { font-size: 1rem; font-weight: 600; color: #0C1E5A; margin: 0 0 10px; letter-spacing: -.01em; }
.pfaq__item dd { font-size: .92rem; color: #5b6275; line-height: 1.55; margin: 0; }
.pfaq__item dd a { color: #1E40FF; text-decoration: underline; }
@media (max-width: 720px) { .pfaq__grid { grid-template-columns: 1fr; } }

/* Final CTA : reprend le style .fx-final de la homepage */
.finalcta { background: linear-gradient(180deg, #F5F7FC 0%, #EDF0F8 100%); text-align: center; padding: 120px 24px 130px; position: relative; z-index: 2; }
.finalcta__inner { max-width: 800px; margin: 0 auto; }
.finalcta__title { font-family: var(--sans); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.03em; line-height: 1.1; color: #0C1E5A; margin: 0 0 20px; }
.finalcta__title em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  background: var(--cta-grad);
  background-size: 240% 240%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: freescaleGradShift 7s ease-in-out infinite;
}
.finalcta__sub { font-size: 1.08rem; color: #5b6275; margin: 0 0 40px; }
.finalcta__btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; border-radius: 14px; background: #1E40FF; color: #fff; font-family: var(--sans); font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 14px 32px -12px rgba(30, 64, 255, .5); transition: background .18s ease, transform .18s ease; }
.finalcta__btn:hover { background: #0d2ee0; transform: translateY(-2px); }
.finalcta__arrow { display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease; }
.finalcta__arrow svg { width: 18px; height: 18px; }

/* Pricing3 — ruban 14 jours gratuits + grille 2 colonnes */
.pricing3__ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 14px;
  background: rgba(30, 64, 255, .06);
  border: 1px solid rgba(30, 64, 255, .18);
  color: #0C1E5A;
  font-size: .8rem;
  margin: 0 auto 40px;
  max-width: fit-content;
  display: flex;
  justify-content: center;
}
.pricing3__ribbon-ic { color: #1E40FF; display: inline-flex; }
.pricing3__ribbon-ic svg { width: 14px; height: 14px; }
.pricing3__ribbon-txt strong { color: #0C1E5A; font-weight: 700; }
.pricing3__ribbon { display: flex; margin-left: auto; margin-right: auto; }

/* 2 colonnes centrées, cards plus resserrées */
.pricing3__grid--two { grid-template-columns: repeat(2, 1fr); max-width: 880px; }
@media (max-width: 720px) {
  .pricing3__grid--two { grid-template-columns: 1fr; max-width: 480px; }
}