/* Vocaza Ads landing: page-scoped layout glue on an 8px spacing grid.
   Breakpoints: 1100px (tablet) and 680px (mobile). Shared stylesheets stay untouched;
   every override here is prefixed by .vocaza-page. */

/* ---------- Scale ---------- */
.vocaza-page {
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px;
  --s8: 64px; --s10: 80px; --s12: 96px; --s16: 128px;
  --vz-gutter: var(--s4);
  --vz-section: var(--s12);
  --vz-head-gap: var(--s6);
  --vz-card-pad: var(--s4);
  --vz-grid-gap: var(--s3);
  --vz-text-to-button: var(--s4);
  overflow-x: clip;
}

/* ---------- Shared layout primitives ---------- */
.vocaza-page .container { width: min(1240px, calc(100% - 2 * var(--vz-gutter))); }
.vocaza-page .section { padding-block: var(--vz-section); }
.vocaza-page .button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 var(--s3); }
.vocaza-page .section-heading { margin-bottom: var(--vz-head-gap); }
.vocaza-page .section-heading .eyebrow { margin-bottom: var(--s2); }
.vocaza-page .section-heading > p { margin-top: var(--s2); }
.vz-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.vocaza-page .vz-actions .button { margin-top: 0; }
.vz-center { display: flex; justify-content: center; margin-top: var(--vz-head-gap); }
.vocaza-page .vz-center .button { margin-top: 0; }
.vz-card-icon { color: var(--purple); }

/* ---------- Header ---------- */
.vocaza-page .brand { display: inline-flex; }
.vocaza-page .nav-inner { gap: var(--s1); }
.vz-nav-actions { display: flex; align-items: center; gap: var(--s1); }
.vocaza-page .site-header .button { margin-top: 0; min-width: 0; min-height: 40px; height: 40px; padding: 0 var(--s2); font-size: 13px; }
.vocaza-page > .site-header:not(.is-scrolled) .vz-nav-team { background: transparent; color: var(--opening-on-media); border-color: oklch(1 0 0 / 55%); }

/* ---------- Hero (Glow Horizon) ---------- */
.vocaza-page .hero.vz-glow-hero { position: relative; overflow: hidden; background: #000; height: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 0; padding: 24svh var(--vz-gutter) var(--s8); --horizon-h: 1000px; }
.vz-glow-hero .vz-glow { position: absolute; left: 50%; top: 0; width: 150%; height: var(--horizon-h); transform: translateX(-50%); z-index: 0; pointer-events: none; }
.vz-glow-hero .vz-glow > div { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.vz-glow-hero .vz-glow > div > div { position: absolute; inset: 0; border-radius: 100%; will-change: transform; }
.vz-glow-hero .video-opening-copy { position: relative; z-index: 1; margin: 0 auto; padding: 0; transform: none; }
.vz-glow-hero h1, .vz-glow-hero h1 span, .vocaza-page .vz-glow-hero .hero-kicker { color: #fff; text-shadow: 0 1px 18px rgb(0 0 0 / 35%); }
.vocaza-page .vz-glow-hero .hero-kicker { margin: 0 auto var(--s2); }
.vocaza-page .vz-glow-hero h1 { margin-bottom: var(--s3); }
.vz-hero-sub { max-width: 640px; margin: 0 auto; color: rgb(255 255 255 / 70%); text-shadow: 0 1px 12px rgb(0 0 0 / 40%); font-size: 17px; line-height: 1.6; }
.vz-glow-hero .vz-hero-below { padding-top: var(--s10); }
.vocaza-page .vz-glow-hero .video-opening-reassurance { margin: var(--s2) 0 0; color: rgb(255 255 255 / 70%); text-shadow: 0 1px 12px rgb(0 0 0 / 40%); }
.vocaza-page .vz-glow-hero .video-opening-badges { margin: var(--s3) 0 0; gap: var(--s1) var(--s3); }
.vocaza-page .vz-glow-hero .video-opening-cert { gap: var(--s1); }
.vocaza-page .vz-glow-hero .video-opening-clients { margin: var(--s4) auto 0; gap: var(--s2) var(--s4); }
.vz-glow-hero .video-opening-clients img { filter: brightness(0) invert(1); opacity: .6; }
@keyframes vz-below-in { from { opacity: 0; } to { opacity: 1; } }

/* Hero lockup Vocaza -> Feedier */
.vz-lockup { display: flex; align-items: center; justify-content: center; gap: var(--s2); margin: 0 auto var(--s2); }
.vz-lockup-tile { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 12%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.vz-lockup-tile img { width: 24px; height: 24px; object-fit: contain; }
.vz-lockup-link { position: relative; width: 40px; height: 14px; display: block; }
.vz-lockup-line { position: absolute; left: 0; right: 6px; top: 50%; height: 1px; background: rgb(255 255 255 / 20%); }
.vz-lockup-chevron { position: absolute; right: -4px; top: 0; color: rgb(255 255 255 / 60%); }
.vz-lockup-dot { position: absolute; top: calc(50% - 3px); left: 0; width: 6px; height: 6px; border-radius: 999px; background: linear-gradient(90deg, #A558FB, #fff); box-shadow: 0 0 8px 2px rgb(165 88 251 / 60%); opacity: 0; }
.vz-lockup.is-live .vz-lockup-dot { animation: vz-lockup-dot 3.6s ease-in-out infinite; }
.vz-lockup.is-live .vz-lockup-feedier { animation: vz-lockup-pulse 3.6s ease-out infinite; }
@keyframes vz-lockup-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes vz-lockup-dot { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 60% { opacity: 1; } 66.6% { left: calc(100% - 6px); opacity: 0; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes vz-lockup-pulse { 0%, 62% { box-shadow: 0 0 0 0 rgb(165 88 251 / 0%); } 70% { box-shadow: 0 0 18px 2px rgb(165 88 251 / 45%); } 90%, 100% { box-shadow: 0 0 0 0 rgb(165 88 251 / 0%); } }

/* ---------- Ce qu'on reprend pour vous ---------- */
.vocaza-page .value-grid { gap: 0; }
.vocaza-page .value-card { padding: var(--vz-card-pad) var(--vz-card-pad) var(--vz-card-pad) 0; }
.vocaza-page .value-card + article { padding-left: var(--vz-card-pad); }
.vocaza-page .value-card:last-child { padding-right: 0; }
.vocaza-page .value-card .vz-card-icon { margin-bottom: var(--s2); }
.vocaza-page .value-card > p { margin-top: var(--s1); }

/* ---------- Et en plus: editorial 5-step gain grid ---------- */
.vz-journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: relative; border-top: 1px solid var(--border); }
.vz-journey::before { content: ""; position: absolute; top: -1px; left: 0; height: 2px; width: 100%; background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 45%, var(--background))); transform: scaleX(0); transform-origin: left; }
.vz-journey.is-shown::before { transform: scaleX(1); transition: transform .9s cubic-bezier(.16,1,.3,1); }
.vz-step { position: relative; padding: var(--s4) var(--s3) var(--s1); border-left: 1px solid var(--border); }
.vz-step:first-child { border-left: 0; padding-left: 0; }
.vz-step::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--primary); opacity: 0; transition: opacity .2s ease; }
.vz-step-head { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s1); }
.vz-step-icon { color: var(--primary); }
.vz-step-head h3 { font-size: 18px; font-weight: 600; }
.vz-step p { font-size: 15px; line-height: 1.55; color: color-mix(in oklab, var(--foreground) 75%, transparent); transition: color .2s ease; }
@media (hover: hover) { .vz-step:hover p { color: var(--foreground); } .vz-step:hover::before { opacity: 1; } }
.vz-journey .vz-step { opacity: 0; }
.vz-journey.is-shown .vz-step { opacity: 1; transition: opacity .3s ease calc(var(--i) * 60ms); }
.vz-reassure { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.vz-reassure ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.vz-reassure li { display: flex; align-items: center; gap: var(--s1); font-size: 14px; }
.vz-reassure li svg { color: var(--primary); flex: none; }
.vz-reassure-actions { display: flex; align-items: center; gap: var(--s3); }
.vocaza-page .vz-reassure-actions .button { margin-top: 0; }
.vz-text-link { font-size: 14px; font-weight: 500; color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border); }
.vz-text-link:hover { text-decoration-color: var(--primary); }

/* ---------- Product demo (shared ProductJourney, Vocaza overrides only) ---------- */
.vocaza-page .pj-scroll-proposal { padding-bottom: var(--s4); }
.vocaza-page .pj-scroll-proposal > .pj-section-heading { width: min(1100px, calc(100% - 2 * var(--vz-gutter))); padding-top: var(--s4); }
.vocaza-page .pj-scroll-proposal .pj-section-heading > .eyebrow { margin-bottom: var(--s2); }
.vocaza-page .pj-scroll-proposal .pj-section-heading > p { margin-top: var(--s2); }
.vocaza-page .pj-scroll-track { margin-top: var(--s2); }
.vocaza-page .pj-scroll-pin { width: min(1100px, calc(100% - 2 * var(--vz-gutter))); }
.vocaza-page .pj-scroll-proposal[data-layout=pinned] .pj-scroll-pin { padding-block: var(--s2); }
.vocaza-page .pj-scroll-proposal[data-layout=flow] .pj-scroll-pin { padding-block: var(--s4); }
.vocaza-page .pj-scroll-proposal[data-layout=flow] .pj-chapters { gap: var(--s8); }
.vocaza-page .pj-scroll-navigation { margin: 0 auto var(--s4); gap: var(--s3); }
.vocaza-page .pj-scroll-navigation > button { gap: var(--s1); padding: 0 0 var(--s1); }
.vocaza-page .pj-scroll-navigation > button > span:last-child { gap: var(--s1); }
.vocaza-page .pj-scroll-navigation > button b { margin-top: 0; }
.vocaza-page .pj-scroll-proposal[data-layout=flow] .pj-scroll-navigation { padding: var(--s2) 0 var(--s1); }
/* Title, subtitle and checks: every variant stacked in one grid cell so the reserved height is the tallest one */
.vz-copy-stack, .vz-benefits-stack { display: grid; }
.vz-copy-stack > *, .vz-benefits-stack > * { grid-area: 1 / 1; }
.vz-copy-stack > :not([data-active]), .vz-benefits-stack > :not([data-active]) { visibility: hidden; }
.vocaza-page .vz-copy-stack { margin-bottom: var(--s5); }
.vocaza-page .pj-chapter-copy.vz-journey-copy { margin: 0 auto; padding-inline: 0; animation: none; }
.vocaza-page .pj-chapter-copy.vz-journey-copy > p { margin-top: var(--s2); }
.vocaza-page .vz-benefits-stack { margin-top: var(--s3); }
.vocaza-page .pj-chapter-benefits.vz-journey-benefits { margin: 0 auto; gap: var(--s3); }
.vocaza-page .pj-chapter-benefits.vz-journey-benefits > li { gap: var(--s1); }
.vocaza-page .pj-chapter-benefits.vz-journey-benefits svg { margin-top: 4px; }
.vocaza-page .pj-frame-header { padding: var(--s1) var(--s2); gap: var(--s2); }
.vocaza-page .pj-frame-header > div:first-child { gap: var(--s2); }
.vocaza-page .pj-scene-switch { padding: 4px; gap: 4px; }
.vocaza-page .pj-scene-switch button { padding: 4px var(--s1); }
.vocaza-page .pj-frame-footer { padding: var(--s1) var(--s2); gap: var(--s2); }
.vocaza-page .pj-frame-footer > button { padding: 0; gap: var(--s1); }
.vocaza-page .pj-frame-signal .pj-source-scene { padding: var(--s4); }
.vocaza-page .pj-frame-signal .pj-source-grid { gap: var(--s3) var(--s2); }
.vocaza-page .pj-frame-signal .pj-source-tile { padding: var(--s1) var(--s2); gap: var(--s1); min-height: 80px; }
.vocaza-page .pj-frame-signal .pj-source-tile:last-child { min-height: 48px; }
.vocaza-page .pj-frame-signal .pj-source-name { gap: var(--s1); }
.vocaza-page .pj-frame-signal .pj-source-summary { margin-top: var(--s3); gap: var(--s1); }
.vocaza-page .pj-source-summary > span { gap: var(--s1); }
.vocaza-page .pj-scroll-end { width: min(920px, calc(100% - 2 * var(--vz-gutter))); padding-top: var(--s4); gap: var(--s4); }
.vocaza-page .pj-scroll-end > button { gap: var(--s1); padding: var(--s1) 0; }
.logo-crop.vz-vocaza-logo { width: 110px; height: 28px; overflow: visible; display: flex; align-items: center; }
.logo-crop.vz-vocaza-logo img { position: static; width: 100%; height: 100%; max-height: none; object-fit: contain; transform: none; opacity: 1; filter: none; }
/* Section title rendered as h2 on this page: mirrors the shared h1 typography at the shared component's own thresholds */
.vocaza-page .pj-scroll-proposal .pj-section-heading h2#pj-title { font-size: 36px; line-height: 1.18; letter-spacing: -1.4px; font-weight: 500; color: #19171f; margin: 0; }
.vocaza-page .pj-scroll-proposal .pj-section-heading h2#pj-title > span { color: #96909e; white-space: nowrap; }

/* ---------- Migration ---------- */
.vocaza-page .steps { margin: 0; gap: var(--vz-grid-gap); }
.vocaza-page .steps article { padding-top: var(--vz-card-pad); }
.vocaza-page .steps .step-top { margin-bottom: var(--s2); }
.vocaza-page .steps article > p { margin-top: var(--s1); }

/* ---------- FAQ ---------- */
.vocaza-page .faq-section { gap: var(--s6); }
.vocaza-page .faq-heading h2 { margin-top: var(--s2); }
.vocaza-page .faq-heading > p { margin: var(--s2) 0 var(--s1); }
.vocaza-page .faq-list [data-slot=accordion-trigger] { padding-block: var(--s3); }

/* ---------- Final CTA: contained Mosaic shader banner ---------- */
.vocaza-page .final-cta.vz-final-banner { background: none; padding: var(--s10) 0; border: 0; }
.vz-final-banner .vz-final-shader { border-radius: 24px; overflow: hidden; }
.vz-final-inner { padding: var(--s12) var(--s6); text-align: center; display: flex; flex-direction: column; align-items: center; }
.vz-final-inner .eyebrow { color: rgb(255 255 255 / 60%); }
.vocaza-page .final-cta .vz-final-inner h2 { color: #fff; margin-top: var(--s2); }
.vocaza-page .final-cta .vz-final-inner p { color: rgb(255 255 255 / 80%); opacity: 1; margin-top: var(--s2); max-width: 560px; }
.vocaza-page .final-cta .vz-final-inner .vz-actions { justify-content: center; margin-top: var(--vz-text-to-button); }
.vocaza-page .final-cta .vz-final-inner .button { margin-top: 0; }
.vz-final-trial { margin: var(--s5) auto 0; max-width: 560px; display: grid; justify-items: center; gap: var(--s2); }
.vocaza-page .final-cta .vz-final-trial p { margin-top: 0; }
.vocaza-page .final-cta .vz-final-inner a.button.button-secondary { background: transparent; border: 1px solid rgb(255 255 255 / 24%); color: #fff; box-shadow: none; }
.vocaza-page .final-cta .vz-final-inner a.button.button-secondary:hover { background: rgb(255 255 255 / 8%); }

/* ---------- Footer ---------- */
.vocaza-page .site-footer { padding-block: var(--s6); }
.vocaza-page .footer-bottom { margin-top: 0; gap: var(--s2) var(--s3); }
.vocaza-page .footer-bottom nav { gap: var(--s2) var(--s3); }

/* ---------- Booking modal ---------- */
.vz-booking { max-width: min(920px, 94vw); width: 94vw; padding: var(--s3); gap: var(--s1); }
.vz-booking h2 { font-size: 1.25rem; font-weight: 600; }
.vz-booking p { color: var(--muted-foreground); font-size: .95rem; }
.vz-booking-frame { width: 100%; height: min(720px, 75vh); border: 0; margin-top: var(--s1); }

/* ---------- Mobile sticky bar ---------- */
.vz-sticky { display: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .vocaza-page { --vz-section: var(--s10); --vz-head-gap: var(--s5); }
  .vz-glow-hero .vz-glow { width: 220%; }
  .vz-final-inner { padding: var(--s10) var(--s4); }
  .vz-journey { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .vz-step { grid-column: span 2; padding-bottom: var(--s4); }
  .vz-step:nth-child(4), .vz-step:nth-child(5) { grid-column: span 3; border-top: 1px solid var(--border); }
  .vz-step:nth-child(4) { border-left: 0; padding-left: 0; }
  .vocaza-page .vz-copy-stack { margin-bottom: var(--s4); }
  .vocaza-page .faq-section { gap: var(--s5); }
}

/* ---------- Mobile ---------- */
@media (max-width: 680px) {
  .vocaza-page { --vz-gutter: var(--s3); --vz-section: var(--s8); --vz-head-gap: var(--s4); --vz-card-pad: var(--s3); --vz-grid-gap: var(--s2); --vz-text-to-button: var(--s3); }
  .vz-nav-team { display: none; }
  .vocaza-page .hero.vz-glow-hero { padding-top: 11svh; padding-bottom: var(--s4); --horizon-h: 780px; }
  .vz-glow-hero .vz-glow { width: 260%; }
  .vz-hero-sub { font-size: 15px; }
  .vz-glow-hero .vz-hero-below { padding-top: var(--s8); }
  .vocaza-page .vz-glow-hero .video-opening-badges { gap: var(--s1) var(--s2); }
  .vocaza-page .vz-glow-hero .video-opening-clients { gap: var(--s2) var(--s3); }
  .vz-actions { flex-direction: column; align-items: stretch; }
  .vz-glow-hero .vz-actions, .vz-glow-hero .vz-actions .button { width: 100%; }
  .vz-lockup { gap: var(--s1); }
  .vz-lockup-tile { width: 40px; height: 40px; }
  .vz-lockup-tile img { width: 20px; height: 20px; }
  .vz-lockup-link { width: 32px; }
  .vocaza-page .value-card, .vocaza-page .value-card + article { display: block; padding: var(--vz-card-pad) 0; }
  .vocaza-page .value-card > p { margin-top: var(--s1); }
  .vz-journey { grid-template-columns: 1fr; }
  .vz-step, .vz-step:nth-child(4), .vz-step:nth-child(5) { grid-column: auto; border-left: 0; padding: var(--s3) 0; }
  .vz-step + .vz-step { border-top: 1px solid var(--border); }
  .vz-step::before { display: none; }
  .vz-step-head { flex-direction: row; align-items: center; gap: var(--s1); }
  .vz-reassure { margin-top: var(--s5); flex-direction: column; align-items: stretch; }
  .vz-reassure ul { flex-direction: column; }
  .vz-reassure-actions { flex-direction: column; align-items: stretch; text-align: center; }
  .vocaza-page .pj-scroll-proposal > .pj-section-heading { padding-top: var(--s3); }
  .vocaza-page .pj-scroll-navigation { margin-bottom: var(--s3); gap: var(--s1); }
  .vocaza-page .pj-scroll-proposal[data-layout=flow] .pj-scroll-pin { padding-block: var(--s3); }
  .vocaza-page .vz-copy-stack { margin-bottom: var(--s3); }
  .vocaza-page .pj-chapter-benefits.vz-journey-benefits { gap: var(--s1); padding: 0 var(--s1); }
  .vocaza-page .pj-frame-signal .pj-source-scene { padding: var(--s3); }
  .vocaza-page .pj-frame-signal .pj-source-grid { gap: var(--s1); }
  .vocaza-page .pj-frame-signal .pj-source-tile { padding: var(--s1); min-height: 56px; }
  .vocaza-page .pj-frame-signal .pj-source-tile:last-child { min-height: 40px; }
  .vocaza-page .pj-frame-footer { padding: var(--s1) var(--s2); }
  .vocaza-page .pj-scroll-end { gap: var(--s3); padding-top: var(--s3); }
  .vocaza-page .faq-section { gap: var(--s4); }
  .vocaza-page .faq-list [data-slot=accordion-trigger] { padding-block: var(--s2); }
  .vocaza-page .final-cta.vz-final-banner { padding: var(--s8) 0; }
  .vz-final-banner .vz-final-shader { border-radius: 16px; }
  .vz-final-inner { padding: var(--s8) var(--s3); }
  .vocaza-page .site-footer { padding-block: var(--s4) var(--s12); }
  .vz-sticky { position: fixed; inset: auto 0 0; z-index: 60; display: flex; gap: var(--s1); padding: var(--s1) var(--s2) calc(var(--s1) + env(safe-area-inset-bottom)); background: var(--background); border-top: 1px solid var(--border); transform: translateY(110%); transition: transform .3s ease; }
  .vz-sticky.is-visible { transform: none; }
  .vocaza-page .vz-sticky .button { margin-top: 0; min-width: 0; min-height: 48px; height: 48px; }
  .vz-sticky-team { flex: 1; gap: var(--s1); padding-inline: var(--s2); }
}

/* Shared component typography mirrored for the h2 title (its own thresholds, not page breakpoints) */
@media (max-width: 859px) { .vocaza-page .pj-scroll-proposal .pj-section-heading h2#pj-title { font-size: 32px; } .vocaza-page .pj-scroll-proposal .pj-section-heading h2#pj-title > span { display: block; white-space: normal; } }
@media (max-width: 600px) { .vocaza-page .pj-scroll-proposal .pj-section-heading h2#pj-title { font-size: 31px; letter-spacing: -1.2px; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .vz-sticky { transition: none; }
  .vz-glow-hero .vz-hero-below { animation: none; }
  .vz-lockup.is-live .vz-lockup-dot, .vz-lockup.is-live .vz-lockup-feedier { animation: none; }
  .vz-lockup-dot { display: none; }
  .vz-journey .vz-step, .vz-journey.is-shown .vz-step { opacity: 1; transition: none; }
  .vz-journey::before { transform: scaleX(1); transition: none; }
}

/* Hero entrance runs on the GlowHorizon clock (framer-motion), not CSS */
.vz-glow-hero .video-opening-copy > * { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .vz-glow-hero .vz-lockup, .vz-glow-hero .hero-kicker, .vz-glow-hero h1, .vz-glow-hero .vz-hero-sub, .vz-glow-hero .vz-hero-below { opacity: 1 !important; filter: none !important; transform: none !important; }
}