/* ═══════════════════════════════════════════════════════════════════════
   VoxSplit Pro — refonte v3 : mise en page et mouvement.

   Principes
   - Une seule échelle typographique : la page assemblait 5 tailles de h2 et
     10 tailles de paragraphes venues de six anciennes pages.
   - VOXSPLIT PRO domine le haut de page ; le titre vient en second.
   - Lignes de texte limitées à ~68 caractères.
   - Le mouvement raconte le produit : une piste mélangée qui se sépare en
     deux voix, une tête de lecture qui révèle les images, un parcours en
     quatre étapes piloté par le défilement. Rien ne bouge sans raison.
   - Tout est visible sans JavaScript ; le mouvement n'est ajouté que si
     html.motion-ok est posé (et jamais en prefers-reduced-motion).
══════════════════════════════════════════════════════════════════════ */

:root {
  --v3-pad: clamp(72px, 9vw, 128px);
  --v3-measure: 68ch;
  --v3-ease: cubic-bezier(.2, .7, .2, 1);
  --voice-a: #70D8E8;
  --voice-b: #C060EC;
  --voice-mix: #84D29C;
}

/* ─── Échelle typographique unique ──────────────────────────────────── */
main h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.12; }
main h3 { font-size: 1.12rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
main p  { font-size: 17px; line-height: 1.65; }
main .v3-small, main figcaption p, main .faq-answer p { font-size: 15px; }
main section p, .v3-head p, .about-v3-text p { max-width: var(--v3-measure); }

/* Les étiquettes : un petit trait aux deux couleurs des voix, puis le texte. */
main .label { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; }
main .label::before {
  content: ''; display: block !important; width: 18px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--voice-a) 50%, var(--voice-b) 50%);
  opacity: 1;
}

/* ─── Rythme vertical ───────────────────────────────────────────────── */
.v3-section { padding: var(--v3-pad) 0; position: relative; }
.v3-section > section, .v3-section > div > section { padding: 0; }
.v3-section > section + section { margin-top: var(--v3-pad); }
.v3-section + .v3-section { border-top: 1px solid var(--border); }
.v3-head { max-width: 760px; margin-bottom: 56px; }
.v3-head h2 { margin: 0 0 16px; }
.v3-head p:not(.label) { color: var(--txt2); }
[id] { scroll-margin-top: 84px; }

/* Les anciens blocs réutilisés gardaient leur propre rembourrage. */
#produit section, #tarifs section, #faq section, #contact section { padding-top: 0 !important; padding-bottom: 0 !important; }
#produit section + section, #tarifs > section + section, #faq section + section { margin-top: var(--v3-pad); }
#tarifs .op-head, #faq .op-head, #contact .op-head { padding: 0 0 40px; }

/* ═══ HERO ══════════════════════════════════════════════════════════ */
.v3-hero { padding: clamp(56px, 8vw, 104px) 0 0; position: relative; overflow: hidden; }
.v3-hero-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .v3-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }

.v3-kicker { font-size: 13px !important; color: var(--txt3); letter-spacing: 0.02em; margin: 0 0 22px; }
.wordmark-hero { display: flex; font-size: clamp(2.6rem, 6.2vw, 5.2rem); gap: 0.28em; margin: 0 0 26px; }
.wordmark-hero .wm-bars i { width: 0.1em; border-radius: 0.03em; }
.v3-h1 { font-size: clamp(1.7rem, 3.1vw, 2.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 20px; max-width: 18ch; }
.v3-lede { color: var(--txt2); font-size: 18px !important; max-width: 52ch; margin: 0 0 32px; }
.v3-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.v3-compat { font-size: 14px !important; color: var(--txt3); }
.v3-compat a { color: var(--txt2); }

/* Le visuel signature : la piste mélangée qui se sépare en deux voix. */
.v3-hero-visual { position: relative; }
.split-canvas { display: block; width: 100%; height: clamp(240px, 26vw, 340px); }
.split-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; gap: 22px; font-size: 13px; color: var(--txt3); }
.split-legend li { display: inline-flex; align-items: center; gap: 8px; }
.split-legend li::before { content: ''; width: 18px; height: 2px; border-radius: 1px; background: currentColor; }
.lg-mix { color: var(--voice-mix); } .lg-a { color: var(--voice-a); } .lg-b { color: var(--voice-b); }
.split-legend li { opacity: .9; }

/* La capture du plugin monte et se redresse au défilement (variable --rise). */
.v3-shot { margin: clamp(56px, 7vw, 96px) 0 0; }
.v3-shot img {
  display: block; width: 100%; height: auto; border-radius: 12px;
  border: 1px solid var(--border2);
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.8);
}
html.motion-ok .v3-shot {
  transform: perspective(1400px) rotateX(calc((1 - var(--rise, 0)) * 14deg)) scale(calc(.94 + var(--rise, 0) * .06));
  transform-origin: 50% 0;
  will-change: transform;
}

/* Entrée orchestrée du hero : un seul moment, au chargement. */
html.motion-ok [data-hero-in] { opacity: 0; transform: translateY(18px); }
html.motion-ok.hero-ready [data-hero-in] {
  opacity: 1; transform: none;
  transition: opacity .9s var(--v3-ease), transform .9s var(--v3-ease);
}
html.motion-ok.hero-ready [data-hero-in]:nth-child(2) { transition-delay: .08s; }
html.motion-ok.hero-ready [data-hero-in]:nth-child(3) { transition-delay: .16s; }
html.motion-ok.hero-ready [data-hero-in]:nth-child(4) { transition-delay: .24s; }
html.motion-ok.hero-ready [data-hero-in]:nth-child(5) { transition-delay: .32s; }
html.motion-ok.hero-ready [data-hero-in]:nth-child(6) { transition-delay: .40s; }

/* Les barres du logo se tracent l'une après l'autre. */
html.motion-ok .wordmark-hero .wm-bars i { transform: skewX(13deg) scaleY(0); transform-origin: 50% 100%; }
html.motion-ok.hero-ready .wordmark-hero .wm-bars i { transform: skewX(13deg) scaleY(1); transition: transform .7s var(--v3-ease) .25s; }
html.motion-ok.hero-ready .wordmark-hero .wm-bars i:last-child { transition-delay: .38s; }

/* ═══ RÉVÉLATIONS AU DÉFILEMENT ═════════════════════════════════════ */
html.motion-ok [data-reveal-up] { opacity: 0; transform: translateY(26px); }
html.motion-ok [data-reveal-up].is-in {
  opacity: 1; transform: none;
  transition: opacity .8s var(--v3-ease) var(--d, 0ms), transform .8s var(--v3-ease) var(--d, 0ms);
}

/* Tête de lecture : une ligne cyan balaie l'image de gauche à droite et la
   découvre, comme le curseur de lecture sur une piste. */
html.motion-ok [data-playhead] { position: relative; clip-path: inset(0 100% 0 0); }
html.motion-ok [data-playhead]::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 2px;
  background: var(--voice-a); box-shadow: 0 0 12px var(--voice-a); opacity: 0;
}
html.motion-ok [data-playhead].is-in { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--v3-ease) var(--d, 0ms); }
html.motion-ok [data-playhead].is-in::after { animation: playhead 1.1s var(--v3-ease) var(--d, 0ms) both; }
@keyframes playhead { 0% { left: 0; opacity: 1; } 92% { opacity: 1; } 100% { left: calc(100% - 2px); opacity: 0; } }

/* ═══ ÉCOUTER ═══════════════════════════════════════════════════════ */
.v3-videos { display: grid; grid-template-columns: 1fr; gap: 56px; }
@media (min-width: 900px) { .v3-videos { grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: end; } }
.v3-video h3 { font-size: 1.35rem; margin: 0 0 8px; }
.v3-video .v3-small { color: var(--txt2); margin: 0 0 20px; }
.v3-video .video-wrap { margin: 0; }

/* ═══ FONCTIONNEMENT : récit en quatre étapes ═══════════════════════ */
.story { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 1000px) {
  .story { grid-template-columns: minmax(280px, .75fr) 1.25fr; gap: 64px; align-items: start; }
  /* Chaque étape occupe une hauteur d'écran : le défilement fait avancer
     le récit pendant que l'image reste fixe à droite. */
  .story-step { min-height: 62vh; }
  .story-step:last-child { min-height: 40vh; }
  .story-stage { position: sticky; top: 110px; }
}
.story-steps { list-style: none; margin: 0; padding: 0; }
.story-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 18px; align-items: start;
  padding: 22px 0 22px 20px; border-left: 2px solid var(--border);
  opacity: .42; transition: opacity .5s var(--v3-ease), border-color .5s var(--v3-ease);
}
.story-step.is-active { opacity: 1; border-left-color: var(--voice-a); }
.story-step:nth-child(2).is-active { border-left-color: #8FA8EA; }
.story-step:nth-child(3).is-active { border-left-color: #A88AEA; }
.story-step:nth-child(4).is-active { border-left-color: var(--voice-b); }
.story-n {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--border2); font-weight: 600; font-size: 14px; color: var(--txt2);
}
.story-step.is-active .story-n { color: var(--bg); background: var(--txt); border-color: var(--txt); }
.story-step h3 { font-size: 1.4rem; margin: 4px 0 8px; }
.story-step p { color: var(--txt2); margin: 0; font-size: 16px; }

/* Pas de position ici : elle est donnee par les deux media queries
   (sticky partout). Une position declaree ici, apres elles, annulait le
   sticky et l'image filait avec la page. */
.story-stage { aspect-ratio: 1700 / 952; }
.story-frame {
  position: absolute; inset: 0; margin: 0; display: grid; place-items: center;
  opacity: 0; transform: scale(.975); transition: opacity .28s ease-out, transform .9s var(--v3-ease);
}
/* L'image sortante s'efface vite, la suivante arrive juste apres : on ne
   voit jamais deux interfaces melangees. */
.story-frame.is-active { opacity: 1; transform: none; transition: opacity .6s var(--v3-ease) .12s, transform .9s var(--v3-ease); }
.story-frame img { max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--border2); box-shadow: 0 30px 90px -30px rgba(0,0,0,.75); }
.story-progress { position: absolute; left: 0; right: 0; top: -22px; height: 2px; background: var(--border); border-radius: 1px; overflow: hidden; }
.story-progress span { display: block; height: 100%; width: calc(var(--story, 0) * 100%); background: linear-gradient(90deg, var(--voice-a), var(--voice-b)); transition: width .15s linear; }

@media (max-width: 999px) {
  /* Sur mobile, l'image reste au-dessus des étapes et change avec elles. */
  .story { display: flex; flex-direction: column-reverse; }
  .story-stage { position: sticky; top: 72px; z-index: 2; background: var(--bg); padding-bottom: 12px; }
}

/* ═══ PROFILS ═══════════════════════════════════════════════════════ */
.prof-grid { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 760px) { .prof-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.prof { margin: 0; }
.prof-img { border-radius: 10px; overflow: hidden; border: 1px solid var(--border2); background: var(--surface); }
.prof-img img { display: block; width: 100%; height: auto; transition: transform .8s var(--v3-ease); }
.prof:hover .prof-img img { transform: scale(1.03); }
.prof figcaption { padding-top: 18px; }
.prof-name { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--txt2); border: 1px solid var(--border2); border-radius: 4px; padding: 2px 8px; margin-bottom: 10px; }
.prof h3 { margin: 0 0 6px; }
.prof p { color: var(--txt2); margin: 0; }

/* ═══ QUI SOMMES-NOUS ═══════════════════════════════════════════════ */
.v3-about { padding-top: 0; }
.about-banner { position: relative; margin: 0; height: clamp(300px, 58vh, 620px); overflow: hidden; }
.about-banner img { position: absolute; left: 0; width: 100%; height: 120%; top: -10%; object-fit: cover; object-position: 55% 40%; }
html.motion-ok .about-banner img { transform: translateY(calc(var(--p, 0) * 8%)); will-change: transform; }
.about-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,11,19,0) 45%, var(--bg) 100%); }
.about-banner figcaption { position: absolute; z-index: 1; left: max(24px, calc((100vw - 1180px) / 2)); bottom: 28px; font-size: 13px; color: var(--txt2); }

.about-v3 { display: grid; grid-template-columns: 1fr; gap: 40px; margin-top: -40px; position: relative; z-index: 1; }
@media (min-width: 900px) { .about-v3 { grid-template-columns: minmax(260px, .8fr) 1.2fr; gap: 72px; margin-top: -140px; } }
.about-v3-photo img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border2); box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); }
@media (min-width: 900px) { .about-v3-text { padding-top: 172px; } }
.about-v3-text h2 { margin: 0 0 8px; }
.about-v3-role { color: var(--txt2); margin: 0 0 28px; }
.about-v3-text > p + p { margin-top: 18px; }
.about-v3-data { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.about-v3-data h3 { margin: 0 0 8px; }
.about-v3-data p { color: var(--txt2); font-size: 15px; }
.psa-inline { display: flex; gap: 18px; align-items: center; margin-top: 28px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.psa-inline img { width: 52px; height: auto; flex: none; }
.psa-inline p { margin: 0; font-size: 14px; color: var(--txt2); }
.psa-inline a { color: var(--voice-a); }
.psa-inline .psa-note { display: block; margin-top: 6px; font-size: 12.5px; color: var(--txt3); }

/* ═══ NAVIGATION : la partie en cours est soulignée ═════════════════ */
.nav-links a { position: relative; }
.nav-links a.is-current { color: var(--txt); }
.nav-links a.is-current::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--voice-a) 50%, var(--voice-b) 50%);
}
nav { transition: background-color .3s, backdrop-filter .3s; }
html.scrolled nav { background-color: rgba(9, 11, 19, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }

/* ═══ Sécurité : aucun mouvement si l'utilisateur l'a demandé ═══════ */
@media (prefers-reduced-motion: reduce) {
  html.motion-ok [data-hero-in], html.motion-ok [data-reveal-up], html.motion-ok [data-playhead] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .story-frame, .story-step, .prof-img img { transition: none !important; }
}

/* La video d'ambiance du site reste en fond, mais en retrait : c'est le
   visuel anime du haut de page qui doit porter le regard. */
/* La video d'ambiance garde son opacite d'origine (7 % a 12 % selon le
   defilement, definie dans style.css) : la reduire assombrissait la page. */

/* "Compte iLok requis" passe a la ligne au lieu de se coller a la liste des formats. */
.v3-compat a { display: block; margin-top: 6px; }

/* ═══ Revue : échelle typographique appliquée aux blocs réutilisés ════ */
/* Les en-têtes Tarifs / FAQ / Contact restaient à 45 px. */
main .op-head h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
/* "Assistance technique" est un intertitre, pas un titre de partie. */
main .support-help h2 { font-size: 1.12rem; margin-bottom: 10px; }
/* Deux niveaux de h3 seulement : titres de blocs, et petits titres. */
main .v3-video h3, main .story-step h3 { font-size: 1.3rem; }
main .benefit-item h3, main [class*="benefit"] h3 { font-size: 1.12rem; }
/* Rien sous 12,5 px : les libellés de colonnes faisaient 10 px. */
main .col-label { font-size: 12.5px !important; letter-spacing: .02em; }
main #tarifs p[style*="font-size: 12px"], main #tarifs p[style*="font-size:12px"],
main #contact-form p[style*="font-size: 12px"] { font-size: 13px !important; }
/* Longueur de ligne bornée partout, y compris dans les anciens blocs. */
main p { max-width: 70ch; }
/* Les etiquettes des formules et les champs du formulaire faisaient 10 px. */
main .pricing-label, main .field label, main form label { font-size: 12.5px !important; letter-spacing: .02em; }
main .prof-name { font-size: 12.5px; }

/* Bandeau des trois atouts : plus de capitales espacees en chasse fixe. */
main .stat-label { font-family: inherit !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; color: var(--txt2); }
main .stat-value { font-size: 1.25rem !important; font-weight: 600; letter-spacing: -0.01em; }

/* Les deux videos alignees : etiquette, titre, texte et lecteur partagent les
   memes lignes de grille, quelle que soit la longueur du texte. */
@media (min-width: 900px) {
  .v3-videos { grid-template-rows: auto auto auto auto; align-items: start; row-gap: 0; }
  .v3-video { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
  .v3-video .video-wrap { align-self: end; }
}

/* Les lecteurs video cales sur le haut : la video de gauche, plus large, est
   aussi plus haute ; calee en bas, elle decalait les deux lecteurs. */
@media (min-width: 900px) { .v3-video .video-wrap { align-self: start; } }

/* ═══ MINI UI : une fonction a part entiere, pas une etape ════════════ */
.mini-ui { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(48px, 6vw, 80px); border-top: 1px solid var(--border); }
@media (min-width: 900px) { .mini-ui { grid-template-columns: 1.15fr 1fr; gap: 64px; } }
.mini-ui-img { margin: 0; }
.mini-ui-img img { display: block; width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border2); box-shadow: 0 30px 90px -30px rgba(0,0,0,.75); }
.mini-ui-text h3 { font-size: 1.3rem; margin: 0 0 12px; }
.mini-ui-text p:not(.label) { color: var(--txt2); }
.mini-ui-text p + p { margin-top: 12px; }

/* La bande de chiffres laisse voir la video de fond : pas d'aplat opaque. */
.stats-strip { background: rgba(9, 11, 19, 0.28); backdrop-filter: none; }
/* Une image plus haute que large (le zoom sur les boutons Render) doit tenir
   dans la scene : en grille, max-height en % ne se resolvait pas. */
.story-frame { display: flex; align-items: center; justify-content: center; }
.story-frame img { max-height: 100%; min-height: 0; object-fit: contain; }

/* Témoignages : quatre cartes, citation puis auteur. Initiales à la place des
   photos tant qu'elles ne sont pas fournies. */
.testi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.testi { position: relative; margin: 0; padding: 30px 28px 24px; display: flex; flex-direction: column; gap: 22px;
  border: 1px solid var(--border2); border-radius: var(--radius-lg); background: rgba(14, 20, 38, 0.78); }
.testi::before { content: "“"; position: absolute; top: 6px; left: 22px; font: 700 64px/1 Georgia, serif;
  background: linear-gradient(135deg, var(--cyan), var(--purple)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .55; }
.testi blockquote { margin: 0; padding-top: 18px; }
.testi blockquote p { margin: 0 0 10px; color: var(--txt); font-size: 1.02rem; line-height: 1.65; max-width: none; }
.testi blockquote p:last-child { margin-bottom: 0; }
.testi figcaption { margin-top: auto; display: flex; align-items: center; gap: 14px; }
.testi-avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .95rem; letter-spacing: .02em; color: #06121a;
  background: linear-gradient(135deg, var(--cyan), var(--purple)); }
.testi-who { display: flex; flex-direction: column; line-height: 1.35; }
.testi-who strong { color: var(--txt); font-size: 1rem; }
.testi-who span { color: var(--txt2); font-size: .9rem; }
.testi-tr { color: var(--txt3); font-size: .78rem; font-style: normal; margin-top: 2px; }
.testi-tr:empty { display: none; }
.testi-consent { margin-top: 18px; color: var(--txt3); font-size: .85rem; }
@media (max-width: 860px) { .testi-grid { grid-template-columns: 1fr; } .testi { padding: 28px 22px 22px; } }