/* =========================================================
   VITAL PROTECT — Immersive redesign direction
   Inspired by high-end interactive/webgl studio patterns.
   No external assets. No copied third-party UI.
   ========================================================= */

:root {
  --vp-black: #05070c;
  --vp-ink: #0b1020;
  --vp-night: #101b31;
  --vp-slate: #6b7280;
  --vp-white: #f8fbff;
  --vp-line: rgba(255,255,255,.14);
  --vp-line-dark: rgba(8,14,28,.12);
  --vp-neon: #ffffff;
  --vp-teal: #2f6f9f;
  --vp-cyan: #d8e6f3;
  --vp-gold: #9aa8b8;
  --vp-orange: #6f7f91;
  --vp-radius: 32px;
  --vp-shadow: 0 30px 90px rgba(0,0,0,.28);
  --vp-ease: cubic-bezier(.16,1,.3,1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--vp-black);
}

body {
  margin: 0;
  color: var(--vp-white);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--vp-black);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

.vpl-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(47,111,159,.16), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(113,129,150,.10), transparent 22%),
    linear-gradient(180deg, #05070c 0%, #0a1020 44%, #f4f7fb 44%, #f4f7fb 100%);
}

.vpl-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .98;
}

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

.vpl-container {
  width: min(1240px, calc(100% - 32px));
  margin-inline: auto;
  position: relative;
  z-index: 3;
}

/* NAV */
.vpl-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 40;
  width: min(1240px, calc(100% - 32px));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(6, 10, 18, .58);
  box-shadow: 0 18px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(22px) saturate(1.5);
}

.vpl-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  min-width: 0;
}

.vpl-brand img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
  padding: 7px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 32px rgba(0,0,0,.24);
}

.vpl-brand b {
  display: block;
  font-weight: 950;
  letter-spacing: -.04em;
  line-height: .95;
  white-space: nowrap;
}

.vpl-brand span {
  display: block;
  color: rgba(255,255,255,.56);
  font-size: .74rem;
  font-weight: 700;
  white-space: nowrap;
  margin-top: 4px;
}

.vpl-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.vpl-menu::-webkit-scrollbar { display: none; }

.vpl-menu a,
.vpl-nav-ghost {
  white-space: nowrap;
  text-decoration: none;
  color: rgba(255,255,255,.76);
  font-size: .88rem;
  font-weight: 800;
  padding: 12px 13px;
  border-radius: 999px;
  transition: color .25s var(--vp-ease), background .25s var(--vp-ease), transform .25s var(--vp-ease);
}

.vpl-menu a:hover,
.vpl-menu a.active {
  color: #fff;
  background: rgba(255,255,255,.09);
  transform: translateY(-1px);
}

.vpl-nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  white-space: nowrap;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border-radius: 999px;
  color: #051018;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #ffffff, #e8eef5 70%, #b7c4d1);
  box-shadow: 0 18px 45px rgba(47,111,159,.18);
}

.vpl-nav-cta::before,
.vpl-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  transform: skewX(-22deg);
  transition: left .65s var(--vp-ease);
}

.vpl-nav-cta:hover::before,
.vpl-button:hover::before {
  left: 125%;
}

/* HERO */
.vpl-hero {
  min-height: 100svh;
  padding: 154px 0 80px;
  display: grid;
  align-items: center;
  position: relative;
  z-index: 3;
}

.vpl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 48px;
  align-items: center;
}

.vpl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.07);
  padding: 10px 13px;
  border-radius: 999px;
  font-weight: 850;
  font-size: .92rem;
  backdrop-filter: blur(14px);
}

.vpl-eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vp-neon);
  box-shadow: 0 0 0 7px rgba(255,255,255,.12);
}

.vpl-title {
  margin: 24px 0 0;
  max-width: 10ch;
  font-size: clamp(4.2rem, 10vw, 9.4rem);
  line-height: .78;
  letter-spacing: -.095em;
  color: #fff;
  font-weight: 950;
}

.vpl-title span {
  display: block;
  background: linear-gradient(135deg, #fff 0%, var(--vp-neon) 48%, var(--vp-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vpl-lead {
  max-width: 68ch;
  margin: 28px 0 0;
  color: rgba(255,255,255,.70);
  font-size: clamp(1.06rem, 1.4vw, 1.25rem);
  line-height: 1.82;
}

.vpl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.vpl-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -.03em;
  transition: transform .25s var(--vp-ease), box-shadow .25s var(--vp-ease), background .25s var(--vp-ease);
}

.vpl-button:hover { transform: translateY(-4px); }

.vpl-button-primary {
  color: #051018;
  background: linear-gradient(135deg, #ffffff, #e8eef5 70%, #b7c4d1);
  box-shadow: 0 20px 50px rgba(47,111,159,.18);
}

.vpl-button-secondary {
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
}

.vpl-proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.vpl-proof {
  color: rgba(255,255,255,.78);
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06);
  border-radius: 999px;
  padding: 9px 12px;
  font-size: .9rem;
  font-weight: 800;
}

.vpl-proof::before {
  content: "●";
  color: var(--vp-neon);
  margin-right: 8px;
}

/* VISUAL */
.vpl-visual {
  position: relative;
  min-height: 640px;
  perspective: 1200px;
}

.vpl-orb {
  position: absolute;
  right: 3%;
  top: 4%;
  width: 390px;
  height: 390px;
  border-radius: 47% 53% 62% 38% / 42% 34% 66% 58%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.78), rgba(255,255,255,.16) 18%, transparent 34%),
    radial-gradient(circle at 68% 70%, rgba(255,255,255,.90), transparent 20%),
    linear-gradient(135deg, rgba(34,73,118,.95), rgba(15,35,65,.92) 62%, rgba(113,129,150,.70));
  box-shadow: 0 0 80px rgba(47,111,159,.25), 0 45px 90px rgba(0,0,0,.35);
  animation: vplMorph 9s ease-in-out infinite;
}

.vpl-visual-card {
  position: absolute;
  overflow: hidden;
  border-radius: 34px;
  box-shadow: 0 36px 90px rgba(0,0,0,.34);
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  transform-style: preserve-3d;
}

.vpl-visual-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.03);
}

.vpl-visual-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,7,12,.58), transparent 52%);
}

.vpl-visual-card-main {
  right: 0;
  bottom: 48px;
  width: min(520px, 92%);
  height: 430px;
  transform: rotateY(-9deg) rotateX(4deg) rotateZ(1.5deg);
}

.vpl-visual-card-small {
  left: 0;
  top: 115px;
  width: min(290px, 54%);
  height: 360px;
  transform: rotateY(11deg) rotateX(2deg) rotateZ(-4deg);
}

.vpl-float-panel {
  position: absolute;
  z-index: 4;
  width: 300px;
  padding: 18px;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.86);
  color: #07111f;
  box-shadow: 0 28px 70px rgba(0,0,0,.26);
  backdrop-filter: blur(16px);
}

.vpl-float-panel strong {
  display: block;
  font-size: 1.1rem;
  letter-spacing: -.04em;
  line-height: 1.12;
}

.vpl-float-panel span {
  display: block;
  margin-top: 8px;
  color: #64748b;
  line-height: 1.55;
  font-size: .92rem;
}

.vpl-float-panel-a { left: 22px; bottom: 0; animation: vplFloat 7s ease-in-out infinite; }
.vpl-float-panel-b { right: 20px; top: 52px; animation: vplFloat 8s ease-in-out infinite reverse; }

.vpl-scroll {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.55);
  font-size: .78rem;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* LIGHT SECTIONS */
.vpl-light {
  position: relative;
  z-index: 3;
  color: #07111f;
  background: #f4f7fb;
}

.vpl-section {
  padding: 112px 0;
  position: relative;
  overflow: hidden;
}

.vpl-section-dark {
  color: #fff;
  background:
    radial-gradient(circle at 12% 14%, rgba(47,111,159,.16), transparent 24%),
    radial-gradient(circle at 88% 70%, rgba(113,129,150,.10), transparent 22%),
    linear-gradient(135deg, #05070c, #101b31);
}

.vpl-section-head {
  max-width: 880px;
  margin-bottom: 34px;
}

.vpl-section-head.center { text-align: center; margin-inline: auto; }

.vpl-section-kicker {
  display: inline-flex;
  margin-bottom: 16px;
  color: #0b1020;
  background: rgba(255,255,255,.90);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: .85rem;
  font-weight: 950;
}

.vpl-section-dark .vpl-section-kicker { color: #07111f; }

.vpl-section-title {
  margin: 0;
  font-size: clamp(2.8rem, 6vw, 6.5rem);
  line-height: .86;
  letter-spacing: -.08em;
  font-weight: 950;
}

.vpl-section-copy {
  margin: 20px 0 0;
  color: #657184;
  max-width: 70ch;
  font-size: 1.08rem;
  line-height: 1.8;
}

.vpl-section-dark .vpl-section-copy { color: rgba(255,255,255,.66); }

.vpl-marquee {
  display: flex;
  overflow: hidden;
  gap: 22px;
  border-block: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.76);
  background: rgba(255,255,255,.04);
}

.vpl-marquee-track {
  flex: 0 0 auto;
  display: flex;
  gap: 22px;
  min-width: 100%;
  padding: 20px 0;
  animation: vplMarquee 28s linear infinite;
}

.vpl-marquee span {
  white-space: nowrap;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 950;
  letter-spacing: -.04em;
}

.vpl-marquee em {
  color: var(--vp-neon);
  font-style: normal;
}

/* CARDS */
.vpl-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 22px;
}

.vpl-card {
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: 26px;
  border-radius: 36px;
  border: 1px solid rgba(8,14,28,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 70px rgba(8,14,28,.10);
  transition: transform .35s var(--vp-ease), box-shadow .35s var(--vp-ease), border-color .35s var(--vp-ease);
}

.vpl-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(47,111,159,.16), transparent 45%);
  opacity: 0;
  transition: opacity .28s var(--vp-ease);
}

.vpl-card::after {
  content: "";
  position: absolute;
  right: -80px;
  top: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(216,230,243,.52), rgba(47,111,159,.16));
  opacity: .78;
}

.vpl-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 34px 90px rgba(8,14,28,.14);
  border-color: rgba(47,111,159,.20);
}

.vpl-card:hover::before { opacity: 1; }

.vpl-card-num {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  color: var(--vp-neon);
  background: #07111f;
  font-weight: 950;
  margin-bottom: 84px;
}

.vpl-card h3 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.03;
  letter-spacing: -.055em;
}

.vpl-card p {
  position: relative;
  z-index: 1;
  margin: 14px 0 0;
  color: #657184;
  line-height: 1.7;
}

/* IMMERSIVE IMAGE CARDS */
.vpl-image-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 22px;
  align-items: stretch;
}

.vpl-image-card {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 42px;
  color: #fff;
  box-shadow: 0 35px 100px rgba(0,0,0,.26);
  isolation: isolate;
}

.vpl-image-card.small { min-height: 268px; }

.vpl-image-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .8s var(--vp-ease), filter .8s var(--vp-ease);
}

.vpl-image-card:hover img {
  transform: scale(1.08) rotate(.8deg);
  filter: saturate(1.15) contrast(1.05);
}

.vpl-image-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 80% 8%, rgba(216,230,243,.20), transparent 20%),
    linear-gradient(to top, rgba(5,7,12,.86), rgba(5,7,12,.32) 54%, rgba(5,7,12,.05));
}

.vpl-image-content {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
}

.vpl-tag {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  padding: 9px 12px;
  border-radius: 999px;
  color: #061018;
  background: var(--vp-neon);
  font-size: .82rem;
  font-weight: 950;
}

.vpl-image-card h3 {
  margin: 0;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(2rem, 4vw, 4.5rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.vpl-image-card.small h3 { font-size: clamp(1.65rem, 2.4vw, 2.7rem); }

.vpl-image-card p {
  max-width: 58ch;
  margin: 16px 0 0;
  color: rgba(255,255,255,.74);
  line-height: 1.7;
}

/* STEPS */
.vpl-steps {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 34px;
  align-items: start;
}

.vpl-sticky {
  position: sticky;
  top: 120px;
}

.vpl-step-list {
  display: grid;
  gap: 14px;
}

.vpl-step {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 22px;
  border-radius: 28px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
}

.vpl-step b {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 22px;
  color: #061018;
  background: var(--vp-neon);
}

.vpl-step h3 {
  margin: 0 0 6px;
  font-size: 1.24rem;
  letter-spacing: -.04em;
}

.vpl-step p {
  margin: 0;
  color: rgba(255,255,255,.66);
  line-height: 1.7;
}

/* CTA */
.vpl-final {
  padding: 120px 0;
  color: #fff;
  background:
    radial-gradient(circle at 18% 16%, rgba(255,255,255,.08), transparent 20%),
    radial-gradient(circle at 86% 80%, rgba(47,111,159,.18), transparent 22%),
    #05070c;
}

.vpl-final-box {
  position: relative;
  overflow: hidden;
  padding: clamp(32px, 6vw, 78px);
  border-radius: 54px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    radial-gradient(circle at 82% 10%, rgba(255,255,255,.10), transparent 25%);
  box-shadow: var(--vp-shadow);
}

.vpl-final-box h2 {
  margin: 0;
  max-width: 11ch;
  color: #fff;
  font-size: clamp(3rem, 7vw, 7.5rem);
  line-height: .82;
  letter-spacing: -.09em;
}

.vpl-final-box p {
  max-width: 70ch;
  margin: 24px 0 0;
  color: rgba(255,255,255,.68);
  line-height: 1.78;
  font-size: 1.08rem;
}

/* FOOTER */
.vpl-footer {
  position: relative;
  z-index: 3;
  color: rgba(255,255,255,.64);
  background: #05070c;
  border-top: 1px solid rgba(255,255,255,.10);
  padding: 36px 0;
}

.vpl-footer-grid {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.vpl-footer a {
  text-decoration: none;
  color: rgba(255,255,255,.74);
  margin-left: 16px;
  font-weight: 800;
}

.vpl-footer a:hover { color: #fff; }

/* reveal/magnetic */
.js .vpl-reveal {
  opacity: 0;
  transform: translateY(34px) scale(.98);
  transition: opacity .8s var(--vp-ease), transform .8s var(--vp-ease);
}
.js .vpl-reveal.in-view {
  opacity: 1;
  transform: none;
}

@keyframes vplFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-18px) rotate(1deg); }
}
@keyframes vplMorph {
  0%,100% { border-radius: 47% 53% 62% 38% / 42% 34% 66% 58%; transform: rotate(0deg) translateY(0); }
  50% { border-radius: 60% 40% 38% 62% / 50% 64% 36% 50%; transform: rotate(8deg) translateY(-18px); }
}
@keyframes vplMarquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - 22px)); } }

@media (max-width: 1080px) {
  .vpl-nav {
    grid-template-columns: 1fr;
    border-radius: 28px;
    position: sticky;
    top: 10px;
    transform: none;
    left: auto;
    width: min(1240px, calc(100% - 24px));
    margin: 10px auto 0;
  }
  .vpl-menu { justify-content: flex-start; }
  .vpl-nav-cta { width: fit-content; }
  .vpl-hero { padding-top: 68px; }
  .vpl-hero-grid, .vpl-steps, .vpl-image-grid { grid-template-columns: 1fr; }
  .vpl-card-grid { grid-template-columns: 1fr; }
  .vpl-visual { min-height: 560px; }
  .vpl-visual-card-main { width: 86%; }
}
@media (max-width: 640px) {
  .vpl-container { width: min(100% - 24px, 1240px); }
  .vpl-brand span { display: none; }
  .vpl-title { font-size: clamp(4rem, 19vw, 6.5rem); }
  .vpl-actions .vpl-button { width: 100%; }
  .vpl-visual { min-height: 590px; }
  .vpl-orb { width: 280px; height: 280px; }
  .vpl-visual-card-main { height: 360px; width: 92%; }
  .vpl-visual-card-small { width: 58%; height: 260px; }
  .vpl-float-panel { width: 260px; }
  .vpl-card { min-height: 300px; }
  .vpl-image-card, .vpl-image-card.small { min-height: 420px; }
  .vpl-section { padding: 80px 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js .vpl-reveal { opacity: 1 !important; transform: none !important; }
}


/* =========================================================
   Corrections client — palette navy/white/black/grey
   + line-height + layout safe + same style on all pages
   ========================================================= */

:root {
  --vp-black: #05070c;
  --vp-ink: #07111f;
  --vp-night: #0d1b2a;
  --vp-navy-deep: #07172b;
  --vp-navy: #0d2340;
  --vp-navy-2: #17314f;
  --vp-steel: #718196;
  --vp-grey: #d7dee7;
  --vp-white: #f8fbff;
  --vp-neon: #ffffff;
  --vp-teal: #2f6f9f;
  --vp-cyan: #d8e6f3;
  --vp-gold: #9aa8b8;
  --vp-orange: #6f7f91;
}

/* Neutralise le vert partout */
.vpl-section-kicker,
.vpl-nav-cta,
.vpl-button-primary,
.vpl-tag,
.vpl-step b,
.vpl-card-num {
  background: linear-gradient(135deg, #ffffff, #dce6f1 72%, #aebdca) !important;
  color: #07111f !important;
}

.vpl-title span,
.vpl-section-title span {
  background: linear-gradient(135deg, #ffffff 0%, #dfe8f2 54%, #9aa8b8 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.vpl-proof::before,
.vpl-eyebrow::before {
  color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 7px rgba(255,255,255,.12) !important;
}

/* Gros titres : plus jamais coupés */
.vpl-title,
.vpl-section-title,
.vpl-final-box h2 {
  line-height: .96 !important;
  letter-spacing: -.085em !important;
  padding-bottom: .08em !important;
  overflow: visible !important;
}

.vpl-title {
  max-width: 11ch !important;
  font-size: clamp(3.6rem, 8.5vw, 8rem) !important;
}

.vpl-section-title {
  max-width: 13ch;
  font-size: clamp(2.8rem, 5.5vw, 5.9rem) !important;
}

.vpl-final-box h2 {
  max-width: 13ch !important;
  font-size: clamp(2.9rem, 6.5vw, 6.8rem) !important;
}

/* Hero : éviter que l'image recouvre le texte */
.vpl-hero {
  min-height: auto !important;
  padding: 150px 0 96px !important;
}

.vpl-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr) !important;
  gap: clamp(36px, 6vw, 86px) !important;
}

.vpl-hero-grid > div:first-child {
  position: relative;
  z-index: 6;
}

.vpl-visual {
  z-index: 3;
  min-height: 600px !important;
}

.vpl-visual-card-main {
  right: 0 !important;
  bottom: 40px !important;
  width: min(460px, 88%) !important;
  height: 390px !important;
}

.vpl-visual-card-small {
  left: 16px !important;
  top: 120px !important;
  width: min(250px, 48%) !important;
  height: 320px !important;
}

.vpl-orb {
  right: 8% !important;
  top: 8% !important;
  width: 330px !important;
  height: 330px !important;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.72), rgba(255,255,255,.14) 18%, transparent 34%),
    radial-gradient(circle at 68% 70%, rgba(216,230,243,.52), transparent 20%),
    linear-gradient(135deg, rgba(47,111,159,.95), rgba(15,35,65,.92) 62%, rgba(113,129,150,.70)) !important;
  box-shadow: 0 0 80px rgba(47,111,159,.28), 0 45px 90px rgba(0,0,0,.35) !important;
}

.vpl-float-panel-a {
  left: 6px !important;
  bottom: 8px !important;
}

.vpl-float-panel-b {
  right: 12px !important;
  top: 44px !important;
}

/* Navy/white/grey backgrounds instead of greenish */
.vpl-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(47,111,159,.18), transparent 22%),
    radial-gradient(circle at 88% 8%, rgba(255,255,255,.08), transparent 18%),
    radial-gradient(circle at 78% 72%, rgba(113,129,150,.10), transparent 22%),
    linear-gradient(180deg, #05070c 0%, #0a1020 44%, #f4f7fb 44%, #f4f7fb 100%) !important;
}

.vpl-section-dark,
.vpl-final {
  background:
    radial-gradient(circle at 12% 14%, rgba(47,111,159,.18), transparent 24%),
    radial-gradient(circle at 88% 70%, rgba(255,255,255,.07), transparent 22%),
    linear-gradient(135deg, #05070c, #101b31) !important;
}

.vpl-marquee em {
  color: #ffffff !important;
}

/* Boutons premium navy/white */
.vpl-button-primary,
.vpl-nav-cta {
  box-shadow: 0 20px 50px rgba(216,230,243,.16) !important;
}

.vpl-button-secondary {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.20) !important;
}

/* Cards en style plus sobre navy */
.vpl-card::after {
  background: linear-gradient(135deg, rgba(255,255,255,.50), rgba(47,111,159,.16)) !important;
}

.vpl-card::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(47,111,159,.15), transparent 45%) !important;
}

/* Pages internes — même univers visuel */
.vpl-inner-page {
  min-height: 100vh;
  color: #07111f;
  background:
    radial-gradient(circle at 12% 3%, rgba(47,111,159,.12), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(8,17,31,.08), transparent 20%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3f8 100%);
  overflow-x: hidden;
}

.vpl-inner-hero {
  position: relative;
  overflow: hidden;
  padding: 148px 0 78px;
  color: #fff;
  background:
    radial-gradient(circle at 16% 16%, rgba(47,111,159,.30), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,.10), transparent 20%),
    linear-gradient(135deg, #05070c 0%, #0d1b2a 58%, #17314f 100%);
  border-bottom-left-radius: 54px;
  border-bottom-right-radius: 54px;
}

.vpl-inner-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -140px;
  width: 420px;
  height: 420px;
  border-radius: 47% 53% 62% 38% / 42% 34% 66% 58%;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(47,111,159,.20));
  animation: vplMorph 9s ease-in-out infinite;
  pointer-events: none;
}

.vpl-inner-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(320px, .94fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}

.vpl-inner-title {
  margin: 20px 0 0;
  max-width: 13ch;
  font-size: clamp(3.1rem, 7.2vw, 7rem);
  line-height: .96;
  letter-spacing: -.085em;
  font-weight: 950;
  padding-bottom: .08em;
  color: #fff;
}

.vpl-inner-title span {
  display: block;
  background: linear-gradient(135deg, #ffffff, #dce6f1 62%, #aebdca);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vpl-inner-lead {
  max-width: 70ch;
  margin: 22px 0 0;
  color: rgba(255,255,255,.70);
  line-height: 1.82;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
}

.vpl-inner-visual {
  position: relative;
  min-height: auto;
  display: grid;
  justify-items: end;
  align-content: start;
}

.vpl-inner-visual img {
  position: relative;
  inset: auto;
  width: min(520px, 100%);
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 38px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 35px 100px rgba(0,0,0,.32);
  transform: none;
}

.vpl-inner-stat {
  position: relative;
  left: auto;
  bottom: auto;
  width: min(380px, 100%);
  margin-top: 18px;
  padding: 18px;
  border-radius: 26px;
  background: rgba(255,255,255,.90);
  color: #07111f;
  box-shadow: 0 28px 70px rgba(0,0,0,.22);
  backdrop-filter: blur(16px);
}

.vpl-inner-stat strong {
  display: block;
  font-size: 1.08rem;
  letter-spacing: -.04em;
}

.vpl-inner-stat span {
  display: block;
  margin-top: 8px;
  color: #637184;
  line-height: 1.55;
  font-size: .92rem;
}

/* Appliquer une patine Lusion aux sections existantes */
.vpl-inner-page main > section:not(.vpl-inner-hero),
body:not(.vpl-home) main > section:not(.vpl-inner-hero) {
  position: relative;
  z-index: 2;
}

.vpl-inner-page .card,
.vpl-inner-page .info-card,
.vpl-inner-page .soft-card,
.vpl-inner-page .stage-card,
.vpl-inner-page .map-card,
.vpl-inner-page .map-sidebar,
.vpl-inner-page .faq-card,
.vpl-inner-page .proof-card,
.vpl-inner-page .audience-card,
.vpl-inner-page .pillar-card,
.vpl-inner-page .surface-panel,
.vpl-inner-page .cta-panel,
.vpl-inner-page .glass-panel,
.vpl-inner-page details,
.vpl-inner-page form,
.vpl-inner-page .hero-card {
  border-radius: 32px !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 24px 70px rgba(8,14,28,.10) !important;
  backdrop-filter: blur(16px);
  transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1);
}

.vpl-inner-page .card:hover,
.vpl-inner-page .info-card:hover,
.vpl-inner-page .soft-card:hover,
.vpl-inner-page .stage-card:hover,
.vpl-inner-page .faq-card:hover,
.vpl-inner-page .proof-card:hover,
.vpl-inner-page .audience-card:hover,
.vpl-inner-page .pillar-card:hover,
.vpl-inner-page details:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 90px rgba(8,14,28,.14) !important;
}

.vpl-inner-page .section-head h2,
.vpl-inner-page h2 {
  letter-spacing: -.065em;
}

.vpl-inner-page .btn-primary {
  color: #07111f !important;
  background: linear-gradient(135deg, #ffffff, #dce6f1 72%, #aebdca) !important;
}

.vpl-inner-page .btn-dark {
  color: #fff !important;
  background: linear-gradient(135deg, #05070c, #0d2340 72%, #17314f) !important;
}

/* Responsive safe */
@media (max-width: 1080px) {
  .vpl-hero-grid,
  .vpl-inner-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .vpl-visual,
  .vpl-inner-visual {
    min-height: auto !important;
  }

  .vpl-visual-card-main {
    width: min(540px, 82%) !important;
    left: auto !important;
    right: 0 !important;
  }

  .vpl-inner-visual img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    max-height: 420px;
  }

  .vpl-inner-stat {
    position: relative;
    left: auto;
    bottom: auto;
    width: min(420px, 100%);
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .vpl-title,
  .vpl-inner-title {
    font-size: clamp(3.1rem, 17vw, 5.2rem) !important;
    line-height: 1 !important;
    max-width: 9.5ch !important;
  }

  .vpl-section-title,
  .vpl-final-box h2 {
    font-size: clamp(2.8rem, 15vw, 5rem) !important;
    line-height: 1 !important;
    max-width: 10.5ch !important;
  }

  .vpl-hero,
  .vpl-inner-hero {
    padding-top: 72px !important;
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
  }

  .vpl-visual {
    min-height: 570px !important;
  }

  .vpl-visual-card-main {
    width: 92% !important;
    height: 340px !important;
  }

  .vpl-visual-card-small {
    width: 58% !important;
    height: 260px !important;
  }

  .vpl-float-panel {
    width: 255px !important;
  }
}


/* ===== Final hotfixes: remove green + secure hero title ===== */
.vpl-title,
.vpl-inner-title {
  font-size: clamp(3rem, 7.6vw, 7.2rem) !important;
  line-height: 1.02 !important;
  max-width: 8.8ch !important;
  letter-spacing: -.078em !important;
  margin-bottom: 18px !important;
  position: relative;
  z-index: 7;
}

.vpl-title span,
.vpl-inner-title span,
.vpl-section-title span {
  background: linear-gradient(135deg, #ffffff 0%, #eef3f8 55%, #bac6d2 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

.vpl-lead,
.vpl-inner-lead {
  position: relative;
  z-index: 7;
}

.vpl-hero-grid {
  grid-template-columns: minmax(0, 1.14fr) minmax(300px, .78fr) !important;
  gap: clamp(28px, 4vw, 56px) !important;
  align-items: start !important;
}

.vpl-visual {
  min-height: 540px !important;
  margin-top: 34px !important;
}

.vpl-visual-card-main {
  width: min(360px, 76%) !important;
  height: 360px !important;
  right: 0 !important;
  bottom: 18px !important;
}

.vpl-visual-card-small {
  width: min(210px, 42%) !important;
  height: 250px !important;
  left: 10px !important;
  top: 118px !important;
}

.vpl-orb {
  width: 280px !important;
  height: 280px !important;
  right: 6% !important;
  top: 4% !important;
}

.vpl-float-panel-b {
  right: 6px !important;
  top: 24px !important;
  width: 250px !important;
}

.vpl-float-panel-a {
  left: 0 !important;
  bottom: 0 !important;
  width: 250px !important;
}

.vpl-nav-cta,
.vpl-button-primary,
.vpl-section-kicker,
.vpl-tag,
.vpl-step b,
.vpl-card-num {
  background: linear-gradient(135deg, #ffffff 0%, #e7edf4 72%, #bcc7d2 100%) !important;
  color: #07111f !important;
}

@media (max-width: 1080px) {
  .vpl-title,
  .vpl-inner-title {
    max-width: 9.5ch !important;
    font-size: clamp(3rem, 10vw, 5.8rem) !important;
  }

  .vpl-visual {
    margin-top: 8px !important;
    min-height: 500px !important;
  }

  .vpl-visual-card-main {
    width: min(390px, 82%) !important;
    height: 330px !important;
  }
}

@media (max-width: 640px) {
  .vpl-title,
  .vpl-inner-title {
    font-size: clamp(2.8rem, 15vw, 4.8rem) !important;
    max-width: 10.5ch !important;
    line-height: 1.02 !important;
  }

  .vpl-hero {
    padding-top: 88px !important;
  }

  .vpl-visual {
    min-height: 460px !important;
  }

  .vpl-visual-card-main {
    width: 82% !important;
    height: 270px !important;
  }

  .vpl-visual-card-small {
    width: 44% !important;
    height: 180px !important;
    top: 100px !important;
  }

  .vpl-float-panel,
  .vpl-float-panel-a,
  .vpl-float-panel-b {
    width: 210px !important;
    font-size: .92rem;
  }
}


/* ===== V4: same immersive effect system on internal pages ===== */
.vpl-inner-page .vpl-marquee {
  position: relative;
  z-index: 3;
}

.vpl-inner-page .vpl-light {
  position: relative;
  z-index: 3;
  background: #f4f7fb;
  color: #07111f;
}

.vpl-internal-effects {
  position: relative;
  z-index: 3;
}

.vpl-internal-effects .vpl-section {
  overflow: hidden;
}

.vpl-inner-page .vpl-image-grid,
.vpl-inner-page .vpl-card-grid,
.vpl-inner-page .vpl-steps {
  margin-top: 8px;
}

.vpl-inner-page .vpl-section-title {
  max-width: 14ch;
}

.vpl-inner-page .vpl-section-head.center .vpl-section-title {
  margin-inline: auto;
}

.vpl-inner-page .vpl-final {
  position: relative;
  z-index: 3;
}

.vpl-mini-orbit {
  position: absolute;
  right: -8rem;
  top: -8rem;
  width: 22rem;
  height: 22rem;
  border-radius: 47% 53% 62% 38% / 42% 34% 66% 58%;
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(47,111,159,.16));
  filter: blur(.2px);
  animation: vplMorph 10s ease-in-out infinite;
  pointer-events: none;
}

.vpl-kinetic-strip {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 28px 0;
  color: #fff;
  background: #05070c;
}

.vpl-kinetic-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(47,111,159,.22), transparent 24%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.08), transparent 22%);
  z-index: -1;
}

.vpl-kinetic-row {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.vpl-kinetic-row span {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 14px 18px;
  border-radius: 999px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.11);
  font-weight: 950;
  letter-spacing: -.04em;
  animation: vplKinetic 18s linear infinite;
}

@keyframes vplKinetic {
  from { transform: translateX(0); }
  to { transform: translateX(-120%); }
}

.vpl-inner-page .vpl-showcase-note {
  position: absolute;
  right: 24px;
  top: 24px;
  max-width: 260px;
  padding: 16px;
  border-radius: 24px;
  color: #07111f;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(255,255,255,.70);
  box-shadow: 0 24px 60px rgba(0,0,0,.20);
  backdrop-filter: blur(16px);
  z-index: 2;
}

.vpl-showcase-note strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -.035em;
}

.vpl-showcase-note span {
  display: block;
  margin-top: 6px;
  color: #637184;
  line-height: 1.45;
  font-size: .88rem;
}

@media (max-width: 900px) {
  .vpl-inner-page .vpl-showcase-note {
    position: relative;
    right: auto;
    top: auto;
    max-width: none;
    margin: -42px 18px 0;
  }
}


/* =========================================================
   V5 — Ribbon scroll + richer lighting + honeycomb build
   ========================================================= */

.vpl-page {
  position: relative;
  isolation: isolate;
}

.vpl-page::before,
.vpl-page::after,
.vpl-inner-page::before,
.vpl-inner-page::after {
  content: "";
  position: fixed;
  inset: auto;
  pointer-events: none;
  z-index: 0;
  filter: blur(18px);
}

.vpl-page::before,
.vpl-inner-page::before {
  left: -10rem;
  top: 12vh;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(84,126,186,.18) 0%, rgba(84,126,186,.12) 28%, rgba(84,126,186,0) 72%);
}

.vpl-page::after,
.vpl-inner-page::after {
  right: -8rem;
  top: 44vh;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(201,214,228,.07) 36%, rgba(201,214,228,0) 72%);
}

.vpl-hero::before,
.vpl-inner-hero::after,
.vpl-final::before,
.vpl-section-dark::before {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
  z-index: 1;
  filter: blur(26px);
}

.vpl-hero::before {
  left: 10%;
  top: 18%;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.09), rgba(75,127,179,.10) 34%, rgba(75,127,179,0) 74%);
}

.vpl-section-dark::before,
.vpl-final::before {
  right: 6%;
  top: 8%;
  width: 18rem;
  height: 18rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.08), rgba(132,170,210,.08) 34%, rgba(132,170,210,0) 74%);
}

.vpl-card,
.vpl-image-card,
.vpl-final-box,
.vpl-inner-stat,
.vpl-float-panel,
.vpl-sheen-card {
  position: relative;
  overflow: hidden;
}

.vpl-card::after,
.vpl-image-card::after,
.vpl-final-box::after,
.vpl-sheen-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.00) 10%, rgba(255,255,255,.10) 24%, rgba(255,255,255,0) 38%),
    linear-gradient(135deg, rgba(255,255,255,.28), rgba(75,127,179,.07));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 1px;
  border-radius: inherit;
  pointer-events: none;
}

.vpl-button-primary,
.vpl-nav-cta {
  box-shadow: 0 18px 50px rgba(126,166,208,.18), 0 0 0 1px rgba(255,255,255,.18) inset !important;
}

.vpl-button-primary::before,
.vpl-nav-cta::before,
.vpl-button-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.42) 50%, transparent 75%);
  transition: transform .9s ease;
}

.vpl-button-primary:hover::before,
.vpl-nav-cta:hover::before,
.vpl-button-secondary:hover::before {
  transform: translateX(120%);
}

/* Scroll ribbon */
.vpl-scroll-ribbon {
  position: fixed;
  right: clamp(10px, 2vw, 24px);
  top: 108px;
  width: 86px;
  height: calc(100vh - 148px);
  z-index: 14;
  pointer-events: none;
  opacity: .92;
  mix-blend-mode: screen;
}

.vpl-scroll-ribbon-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vpl-ribbon-base {
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vpl-ribbon-progress {
  fill: none;
  stroke: url(#vplRibbonGradient);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.25)) drop-shadow(0 0 18px rgba(75,127,179,.18));
}

.vpl-ribbon-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.45)) drop-shadow(0 0 20px rgba(75,127,179,.32));
}

@media (max-width: 1024px) {
  .vpl-scroll-ribbon {
    display: none;
  }
}

/* Honeycomb mosaic */
.vpl-honeycomb-section {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 22%, rgba(75,127,179,.10), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(255,255,255,.16), transparent 18%),
    linear-gradient(180deg, #f4f7fb 0%, #eef3f8 100%);
}

.vpl-honeycomb-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  gap: clamp(28px, 4vw, 54px);
  align-items: center;
  margin-top: 34px;
}

.vpl-honeycomb-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(90px, 120px));
  justify-content: center;
  gap: 14px 10px;
  padding: 28px 0 40px;
}

.vpl-hex {
  position: relative;
  width: 120px;
  height: 132px;
  display: grid;
  place-items: center;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(223,232,241,.84) 60%, rgba(132,170,210,.48));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 18px 45px rgba(10,16,32,.10);
  transform: translateY(24px) scale(.84);
  opacity: 0;
  transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .55s ease, box-shadow .35s ease;
}

.vpl-hex:nth-child(2n) {
  transform: translateY(84px) scale(.84);
}

.vpl-hex.is-visible {
  opacity: 1;
}

.vpl-hex.is-visible:nth-child(2n) {
  transform: translateY(84px) scale(1);
}

.vpl-hex.is-visible:nth-child(2n+1) {
  transform: translateY(24px) scale(1);
}

.vpl-hex::before {
  content: "";
  position: absolute;
  inset: 8px;
  clip-path: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.38), rgba(255,255,255,0));
  opacity: .7;
}

.vpl-hex:hover {
  box-shadow: 0 24px 60px rgba(10,16,32,.15), 0 0 0 1px rgba(255,255,255,.8) inset;
}

.vpl-hex span {
  position: relative;
  z-index: 2;
  max-width: 72%;
  text-align: center;
  font-weight: 900;
  font-size: .92rem;
  line-height: 1.12;
  letter-spacing: -.04em;
  color: #07111f;
}

.vpl-honeycomb-copy {
  display: flex;
  align-items: center;
}

.vpl-sheen-card {
  padding: 28px;
  border-radius: 30px;
  color: #07111f;
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 24px 70px rgba(10,16,32,.10);
  backdrop-filter: blur(18px);
}

.vpl-sheen-card strong {
  display: block;
  font-size: 1.24rem;
  line-height: 1.08;
  letter-spacing: -.04em;
}

.vpl-sheen-card p {
  margin: 14px 0 0;
  color: #5d6c80;
  line-height: 1.7;
}

@media (max-width: 1080px) {
  .vpl-honeycomb-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .vpl-honeycomb-grid {
    grid-template-columns: repeat(3, minmax(80px, 1fr));
  }
  .vpl-hex {
    width: 96px;
    height: 106px;
  }
}

@media (max-width: 540px) {
  .vpl-honeycomb-grid {
    grid-template-columns: repeat(2, minmax(80px, 1fr));
    gap: 12px 8px;
  }
  .vpl-hex,
  .vpl-hex:nth-child(2n),
  .vpl-hex.is-visible:nth-child(2n),
  .vpl-hex.is-visible:nth-child(2n+1) {
    width: 98px;
    height: 108px;
    transform: translateY(0) scale(.9);
  }
  .vpl-hex.is-visible {
    transform: translateY(0) scale(1);
  }
}


/* =========================================================
   V6 — Thick looping ribbon + dark text on light sections
   ========================================================= */

.vpl-page,
.vpl-inner-page {
  position: relative;
}

.vpl-page > *,
.vpl-inner-page > * {
  position: relative;
}

.vpl-canvas,
.vpl-noise {
  z-index: 0;
}

.vpl-scroll-ribbon {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: .92;
  mix-blend-mode: normal;
}

.vpl-scroll-ribbon-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.vpl-ribbon-base {
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 46;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(.2px);
}

.vpl-ribbon-progress {
  fill: none;
  stroke: url(#vplRibbonGradient);
  stroke-width: 46;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.30)) drop-shadow(0 0 28px rgba(124,167,211,.28));
}

.vpl-ribbon-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 14px rgba(255,255,255,.50)) drop-shadow(0 0 28px rgba(124,167,211,.35));
}

.vpl-page,
.vpl-nav,
.vpl-inner-hero,
.vpl-marquee,
.vpl-light,
.vpl-section,
.vpl-section-dark,
.vpl-final,
.vpl-kinetic-strip,
main {
  z-index: 2;
}

/* Light sections must have dark text */
.vpl-light,
.vpl-light .vpl-section-head,
.vpl-light .vpl-section-title,
.vpl-light .vpl-section-copy,
.vpl-light .vpl-card h3,
.vpl-light .vpl-card p,
.vpl-light .vpl-step h3,
.vpl-light .vpl-step p,
.vpl-light .vpl-image-content h3,
.vpl-light .vpl-image-content p,
.vpl-light .vpl-sheen-card,
.vpl-light .vpl-sheen-card strong,
.vpl-light .vpl-sheen-card p,
.vpl-honeycomb-section,
.vpl-honeycomb-section .vpl-section-head,
.vpl-honeycomb-section .vpl-section-title,
.vpl-honeycomb-section .vpl-section-copy,
.vpl-honeycomb-section .vpl-section-kicker,
.vpl-honeycomb-section .vpl-sheen-card,
.vpl-honeycomb-section .vpl-sheen-card strong,
.vpl-honeycomb-section .vpl-sheen-card p {
  color: #07111f !important;
}

.vpl-light .vpl-section-copy,
.vpl-light .vpl-card p,
.vpl-light .vpl-step p,
.vpl-light .vpl-image-content p,
.vpl-honeycomb-section .vpl-section-copy,
.vpl-honeycomb-section .vpl-sheen-card p {
  color: #566578 !important;
}

.vpl-light .vpl-section-kicker,
.vpl-honeycomb-section .vpl-section-kicker {
  background: linear-gradient(135deg, #e8eef5 0%, #d5e0ea 72%, #b5c4d2 100%) !important;
  color: #07111f !important;
}

.vpl-honeycomb-section .vpl-section-title {
  max-width: 11ch;
}

@media (max-width: 1024px) {
  .vpl-scroll-ribbon {
    opacity: .55;
  }
  .vpl-ribbon-base,
  .vpl-ribbon-progress {
    stroke-width: 30;
  }
}


/* =========================================================
   V7 — Ruban après la navbar, sur toutes les pages
   ========================================================= */

/* La navbar doit toujours passer au-dessus du ruban */
.vpl-nav {
  z-index: 80 !important;
}

/* Le ruban commence sous la navbar et ne crée aucun espace de layout */
.vpl-scroll-ribbon {
  position: fixed !important;
  top: 112px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 112px) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: .82 !important;
  mix-blend-mode: normal !important;
  overflow: hidden !important;
}

/* Le SVG remplit uniquement la zone sous la navbar */
.vpl-scroll-ribbon-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Le ruban reste en arrière-plan, les contenus restent au-dessus */
.vpl-page,
.vpl-inner-page,
.vpl-hero,
.vpl-inner-hero,
.vpl-light,
.vpl-section,
.vpl-section-dark,
.vpl-final,
.vpl-marquee,
main,
footer {
  position: relative;
  z-index: 2;
}

/* Le canvas et le bruit restent encore plus loin derrière */
.vpl-canvas,
.vpl-noise {
  z-index: 0 !important;
}

/* Ruban visible mais pas envahissant sur les sections claires */
.vpl-ribbon-base {
  stroke: rgba(7, 17, 31, .055) !important;
}

.vpl-ribbon-progress {
  stroke-width: 44 !important;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.22)) drop-shadow(0 0 24px rgba(80,120,170,.18)) !important;
}

/* Sur mobile, on allège pour ne pas gêner la lecture */
@media (max-width: 1024px) {
  .vpl-scroll-ribbon {
    top: 132px !important;
    height: calc(100vh - 132px) !important;
    opacity: .42 !important;
  }

  .vpl-ribbon-base,
  .vpl-ribbon-progress {
    stroke-width: 28 !important;
  }
}

@media (max-width: 640px) {
  .vpl-scroll-ribbon {
    display: none !important;
  }
}

/* =========================================================
   V8 — Fix vidéo : navbar toujours en haut + contrastes
   ========================================================= */

/* La navbar reste toujours visible en haut, même en zoom / tablette. */
.vpl-nav {
  position: fixed !important;
  top: 18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(1240px, calc(100% - 32px)) !important;
  margin: 0 !important;
  z-index: 100 !important;
}

/* Le ruban commence bien sous la navbar fixe. */
.vpl-scroll-ribbon {
  top: 108px !important;
  height: calc(100vh - 108px) !important;
  z-index: 1 !important;
}

/* Les contenus commencent sous la navbar, pas avant. */
.vpl-hero,
.vpl-inner-hero {
  padding-top: 150px !important;
}

/* Contraste fort sur les sections sombres. */
.vpl-section-dark,
.vpl-section-dark .vpl-section-head,
.vpl-section-dark .vpl-section-title,
.vpl-section-dark h1,
.vpl-section-dark h2,
.vpl-section-dark h3,
.vpl-section-dark strong,
.vpl-final,
.vpl-final h1,
.vpl-final h2,
.vpl-final h3,
.vpl-final strong {
  color: #ffffff !important;
}

.vpl-section-dark .vpl-section-copy,
.vpl-section-dark p,
.vpl-section-dark .vpl-step p,
.vpl-final p {
  color: rgba(255,255,255,.72) !important;
}

/* Les cards claires dans une section sombre gardent un texte foncé. */
.vpl-section-dark .vpl-card,
.vpl-section-dark .vpl-sheen-card {
  color: #07111f !important;
}

.vpl-section-dark .vpl-card h3,
.vpl-section-dark .vpl-card strong,
.vpl-section-dark .vpl-sheen-card h3,
.vpl-section-dark .vpl-sheen-card strong {
  color: #07111f !important;
}

.vpl-section-dark .vpl-card p,
.vpl-section-dark .vpl-sheen-card p {
  color: #566578 !important;
}

/* Les steps sombres restent lisibles. */
.vpl-section-dark .vpl-step {
  color: #ffffff !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.15) !important;
}

.vpl-section-dark .vpl-step h3 {
  color: #ffffff !important;
}

.vpl-section-dark .vpl-step p {
  color: rgba(255,255,255,.70) !important;
}

/* Clarté sur fonds blancs/clairs. */
.vpl-light,
.vpl-honeycomb-section,
.vpl-light h1,
.vpl-light h2,
.vpl-light h3,
.vpl-light strong,
.vpl-honeycomb-section h1,
.vpl-honeycomb-section h2,
.vpl-honeycomb-section h3,
.vpl-honeycomb-section strong {
  color: #07111f !important;
}

.vpl-light p,
.vpl-honeycomb-section p,
.vpl-light .vpl-section-copy,
.vpl-honeycomb-section .vpl-section-copy {
  color: #566578 !important;
}

@media (max-width: 1080px) {
  .vpl-nav {
    position: fixed !important;
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
    grid-template-columns: 1fr !important;
    border-radius: 28px !important;
    max-height: 138px !important;
    overflow: hidden !important;
  }

  .vpl-menu {
    justify-content: flex-start !important;
  }

  .vpl-hero,
  .vpl-inner-hero {
    padding-top: 188px !important;
  }

  .vpl-scroll-ribbon {
    top: 166px !important;
    height: calc(100vh - 166px) !important;
  }
}

@media (max-width: 640px) {
  .vpl-nav {
    max-height: 150px !important;
  }

  .vpl-hero,
  .vpl-inner-hero {
    padding-top: 190px !important;
  }
}


/* =========================================================
   V9 — Suppression de l'espace après la navbar
   ========================================================= */

/* Les pages internes remontent sous la navbar : le hero commence immédiatement après le menu. */
body.vpl-inner-page main {
  margin-top: -128px !important;
}

body.vpl-inner-page .vpl-inner-hero {
  padding-top: 206px !important;
}

/* Le ruban reste sous la navbar, sans pousser le contenu. */
body.vpl-inner-page .vpl-scroll-ribbon {
  top: 108px !important;
  height: calc(100vh - 108px) !important;
}

/* Sécurité : aucun élément décoratif ne doit créer d'espace de layout. */
.vpl-scroll-ribbon,
.vpl-canvas,
.vpl-noise {
  display: block !important;
  position: fixed !important;
  margin: 0 !important;
}

@media (max-width: 1080px) {
  body.vpl-inner-page main {
    margin-top: -154px !important;
  }

  body.vpl-inner-page .vpl-inner-hero {
    padding-top: 242px !important;
  }
}

@media (max-width: 640px) {
  body.vpl-inner-page main {
    margin-top: -112px !important;
  }

  body.vpl-inner-page .vpl-inner-hero {
    padding-top: 214px !important;
  }
}


/* =========================================================
   V10 — Ruban dessiné au scroll, sans chemin visible au départ
   ========================================================= */

/* Le ruban ne doit jamais occuper d'espace dans la page */
.vpl-scroll-ribbon {
  position: fixed !important;
  top: var(--vpl-ribbon-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--vpl-ribbon-top, 0px)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: .92 !important;
  transform: translateZ(0);
}

/* La navbar reste devant */
.vpl-nav {
  z-index: 90 !important;
}

/* On supprime le tracé fantôme : le chemin ne doit pas être visible avant création */
.vpl-ribbon-base {
  opacity: 0 !important;
  stroke: transparent !important;
}

/* Grâce à pathLength="1" dans le HTML, le ruban est entièrement masqué avant JS/scroll */
.vpl-ribbon-progress {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
  opacity: 1 !important;
  transition: stroke-dashoffset .08s linear;
}

/* Le point lumineux est caché tout en haut, puis apparaît quand le tracé commence */
.vpl-ribbon-dot {
  opacity: 0;
  transform-origin: center;
  transition: opacity .18s ease;
}

.vpl-scroll-ribbon.is-drawing .vpl-ribbon-dot {
  opacity: .95;
}

@media (max-width: 640px) {
  .vpl-scroll-ribbon {
    display: none !important;
  }
}


/* =========================================================
   V11 — Ruban bleu qui laisse une trace au scroll
   ========================================================= */

/* Le ruban reste derrière le contenu et commence sous la navbar */
.vpl-scroll-ribbon {
  position: fixed !important;
  top: var(--vpl-ribbon-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--vpl-ribbon-top, 0px)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  overflow: hidden !important;
  opacity: .96 !important;
  mix-blend-mode: normal !important;
}

/* Aucun chemin gris/transparent visible avant le dessin */
.vpl-ribbon-base {
  opacity: 0 !important;
  stroke: transparent !important;
}

/* Le vrai ruban : bleu, épais, lumineux, dessiné par JS */
.vpl-ribbon-progress {
  opacity: 1 !important;
  stroke: #2f7fca !important;
  stroke-width: 48 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 0 10px rgba(47,127,202,.45))
    drop-shadow(0 0 24px rgba(47,127,202,.26))
    drop-shadow(0 0 42px rgba(255,255,255,.16)) !important;
  transition: stroke-dashoffset .06s linear !important;
}

/* Couche lumineuse secondaire, créée via le même path si disponible */
.vpl-scroll-ribbon.is-drawing .vpl-ribbon-progress {
  stroke: url(#vplRibbonGradient) !important;
}

/* Le pointeur devient bleu et accompagne le dessin */
.vpl-ribbon-dot {
  opacity: 0 !important;
  fill: #2f7fca !important;
  r: 19;
  filter:
    drop-shadow(0 0 10px rgba(47,127,202,.70))
    drop-shadow(0 0 24px rgba(47,127,202,.42))
    drop-shadow(0 0 36px rgba(255,255,255,.20)) !important;
  transition: opacity .18s ease !important;
}

.vpl-scroll-ribbon.is-drawing .vpl-ribbon-dot {
  opacity: 1 !important;
}

@media (max-width: 1024px) {
  .vpl-ribbon-progress {
    stroke-width: 34 !important;
  }
}

@media (max-width: 640px) {
  .vpl-scroll-ribbon {
    display: none !important;
  }
}


/* =========================================================
   V12 — Vrai dessin progressif du ruban au scroll
   ========================================================= */

/* Le chemin de base reste invisible : pas de tracé déjà affiché */
.vpl-ribbon-base {
  opacity: 0 !important;
  stroke: transparent !important;
}

/*
  Important : les paths SVG ont pathLength="1".
  Le ruban est donc masqué avec dashoffset: 1 et révélé vers 0 par JS.
*/
.vpl-ribbon-progress {
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1 !important;
  opacity: 1 !important;
  stroke: #2f7fca !important;
  stroke-width: 48 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: stroke-dashoffset .04s linear !important;
  filter:
    drop-shadow(0 0 10px rgba(47,127,202,.50))
    drop-shadow(0 0 26px rgba(47,127,202,.30))
    drop-shadow(0 0 44px rgba(255,255,255,.16)) !important;
}

.vpl-scroll-ribbon.is-drawing .vpl-ribbon-progress {
  stroke: url(#vplRibbonGradient) !important;
}

/* Le pointeur ne s'affiche qu'une fois que le dessin commence */
.vpl-ribbon-dot {
  opacity: 0 !important;
  fill: #2f7fca !important;
  transition: opacity .16s ease !important;
}

.vpl-scroll-ribbon.is-drawing .vpl-ribbon-dot {
  opacity: 1 !important;
}


/* =========================================================
   V13 — Ruban visible aussi sur la page d'accueil
   ========================================================= */

/*
  Sur l'accueil, le fond .vpl-page masquait le ruban.
  Le ruban est maintenant au-dessus des fonds, mais sous la navbar et sous les contenus importants.
*/
.vpl-scroll-ribbon {
  z-index: 4 !important;
}

/* La navbar reste toujours au-dessus */
.vpl-nav {
  z-index: 90 !important;
}

/* Les contenus éditoriaux passent au-dessus du ruban */
.vpl-hero-grid,
.vpl-hero > .vpl-container,
.vpl-inner-hero-grid,
.vpl-section-head,
.vpl-card-grid,
.vpl-image-grid,
.vpl-steps,
.vpl-final-box,
.vpl-honeycomb-shell,
.vpl-marquee,
.vpl-footer,
.vpl-kinetic-strip,
.vpl-light > *,
.vpl-section > .vpl-container,
.vpl-section-dark > .vpl-container,
.vpl-final > .vpl-container {
  position: relative;
  z-index: 6;
}

/* Sur l'accueil, le ruban doit traverser le hero et les sections sans être masqué */
body.vpl-home .vpl-scroll-ribbon {
  z-index: 4 !important;
  opacity: .92 !important;
}

/* Les grands fonds gardent leur rôle visuel sans recouvrir le ruban */
body.vpl-home .vpl-page {
  isolation: auto !important;
}

body.vpl-home .vpl-hero,
body.vpl-home .vpl-light,
body.vpl-home .vpl-section,
body.vpl-home .vpl-section-dark,
body.vpl-home .vpl-final {
  position: relative;
}

/* Le canvas reste derrière tout */
.vpl-canvas,
.vpl-noise {
  z-index: 0 !important;
}


/* =========================================================
   V14 — Ruban derrière les éléments, devant les fonds
   ========================================================= */

/*
  Objectif :
  - le ruban reste au-dessus des fonds / arrière-plans de section
  - mais TOUS les contenus (textes, images, cards, boutons, formulaires) passent devant
*/

.vpl-scroll-ribbon {
  z-index: 4 !important;
}

.vpl-nav {
  z-index: 90 !important;
}

/* Les wrappers de section restent sous le ruban */
.vpl-page,
.vpl-inner-page,
.vpl-hero,
.vpl-inner-hero,
.vpl-light,
.vpl-section,
.vpl-section-dark,
.vpl-final,
.vpl-marquee,
.vpl-kinetic-strip,
footer,
main {
  position: relative;
  z-index: 2;
}

/* Les contenus passent devant le ruban */
.vpl-container,
.vpl-container > *,
.vpl-hero-grid,
.vpl-hero-grid > *,
.vpl-inner-hero-grid,
.vpl-inner-hero-grid > *,
.vpl-section-head,
.vpl-section-head > *,
.vpl-card-grid,
.vpl-card-grid > *,
.vpl-image-grid,
.vpl-image-grid > *,
.vpl-steps,
.vpl-steps > *,
.vpl-step-list,
.vpl-step-list > *,
.vpl-final-box,
.vpl-final-box > *,
.vpl-honeycomb-shell,
.vpl-honeycomb-shell > *,
.vpl-sheen-card,
.vpl-sheen-card > *,
.vpl-showcase-note,
.vpl-showcase-note > *,
.vpl-form-card,
.vpl-form-card > *,
.vpl-contact-card,
.vpl-contact-card > *,
.vpl-card,
.vpl-card > *,
.vpl-image-card,
.vpl-image-card > *,
.vpl-float-panel,
.vpl-float-panel > *,
.vpl-inner-stat,
.vpl-inner-stat > *,
.vpl-actions,
.vpl-actions > * {
  position: relative;
  z-index: 8 !important;
}

/* Les médias et textes sont explicitement au premier plan */
.vpl-page h1, .vpl-page h2, .vpl-page h3, .vpl-page h4,
.vpl-page p, .vpl-page li, .vpl-page a, .vpl-page span, .vpl-page strong,
.vpl-page img, .vpl-page picture, .vpl-page video, .vpl-page svg,
.vpl-inner-page h1, .vpl-inner-page h2, .vpl-inner-page h3, .vpl-inner-page h4,
.vpl-inner-page p, .vpl-inner-page li, .vpl-inner-page a, .vpl-inner-page span, .vpl-inner-page strong,
.vpl-inner-page img, .vpl-inner-page picture, .vpl-inner-page video, .vpl-inner-page svg,
input, textarea, select, button, label, form {
  position: relative;
  z-index: 9;
}

/* Les pseudo-fonds décoratifs restent derrière */
.vpl-page::before,
.vpl-page::after,
.vpl-inner-page::before,
.vpl-inner-page::after,
.vpl-hero::before,
.vpl-inner-hero::before,
.vpl-inner-hero::after,
.vpl-section-dark::before,
.vpl-final::before {
  z-index: 1 !important;
  pointer-events: none;
}

.vpl-canvas,
.vpl-noise {
  z-index: 0 !important;
}


/* =========================================================
   V15 — Correctif réel du stacking : ruban derrière les contenus
   ========================================================= */

/*
  Le bug venait du fait que les parents (.vpl-page, .vpl-section, etc.)
  créaient une couche complète sous le ruban. Même avec z-index élevé,
  les enfants ne pouvaient pas passer devant.

  Nouvelle logique :
  - les grands parents ne créent plus de couche z-index fermée ;
  - le ruban reste en fixed z-index 4 ;
  - les contenus importants passent au-dessus en z-index 20 ;
  - les fonds de section restent en flux normal, donc derrière le ruban.
*/

.vpl-page,
.vpl-inner-page,
.vpl-hero,
.vpl-inner-hero,
.vpl-light,
.vpl-section,
.vpl-section-dark,
.vpl-final,
.vpl-marquee,
.vpl-kinetic-strip,
main,
footer {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}

/* Le ruban est entre les fonds et les contenus */
.vpl-scroll-ribbon {
  z-index: 4 !important;
  pointer-events: none !important;
}

/* La navbar reste tout au-dessus */
.vpl-nav {
  z-index: 100 !important;
}

/* Tous les blocs de contenu repassent réellement au-dessus du ruban */
.vpl-container,
.vpl-hero-grid,
.vpl-hero-grid > *,
.vpl-inner-hero-grid,
.vpl-inner-hero-grid > *,
.vpl-visual,
.vpl-visual > *,
.vpl-inner-visual,
.vpl-inner-visual > *,
.vpl-section-head,
.vpl-section-head > *,
.vpl-card-grid,
.vpl-card-grid > *,
.vpl-image-grid,
.vpl-image-grid > *,
.vpl-steps,
.vpl-steps > *,
.vpl-step-list,
.vpl-step-list > *,
.vpl-final-box,
.vpl-final-box > *,
.vpl-honeycomb-shell,
.vpl-honeycomb-shell > *,
.vpl-honeycomb-grid,
.vpl-honeycomb-grid > *,
.vpl-honeycomb-copy,
.vpl-sheen-card,
.vpl-sheen-card > *,
.vpl-showcase-note,
.vpl-showcase-note > *,
.vpl-card,
.vpl-card > *,
.vpl-image-card,
.vpl-image-card > *,
.vpl-image-content,
.vpl-image-content > *,
.vpl-float-panel,
.vpl-float-panel > *,
.vpl-inner-stat,
.vpl-inner-stat > *,
.vpl-actions,
.vpl-actions > *,
.vpl-step,
.vpl-step > *,
.vpl-modern-tile,
.vpl-modern-tile > *,
.vpl-proof-row,
.vpl-proof-row > *,
.vpl-form-card,
.vpl-contact-card,
form,
form > *,
input,
textarea,
select,
button,
label {
  position: relative !important;
  z-index: 20 !important;
}

/* Textes, médias, boutons, liens : premier plan absolu */
.vpl-page h1,
.vpl-page h2,
.vpl-page h3,
.vpl-page h4,
.vpl-page p,
.vpl-page li,
.vpl-page a,
.vpl-page span,
.vpl-page strong,
.vpl-page em,
.vpl-page small,
.vpl-page img,
.vpl-page picture,
.vpl-page video,
.vpl-inner-page h1,
.vpl-inner-page h2,
.vpl-inner-page h3,
.vpl-inner-page h4,
.vpl-inner-page p,
.vpl-inner-page li,
.vpl-inner-page a,
.vpl-inner-page span,
.vpl-inner-page strong,
.vpl-inner-page em,
.vpl-inner-page small,
.vpl-inner-page img,
.vpl-inner-page picture,
.vpl-inner-page video {
  position: relative !important;
  z-index: 22 !important;
}

/* Les pseudo-éléments décoratifs restent derrière */
.vpl-page::before,
.vpl-page::after,
.vpl-inner-page::before,
.vpl-inner-page::after,
.vpl-hero::before,
.vpl-hero::after,
.vpl-inner-hero::before,
.vpl-inner-hero::after,
.vpl-section::before,
.vpl-section::after,
.vpl-section-dark::before,
.vpl-section-dark::after,
.vpl-final::before,
.vpl-final::after {
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Le canvas et le noise restent tout au fond */
.vpl-canvas,
.vpl-noise {
  z-index: 0 !important;
}

/* Important : éviter qu’une carte crée un effet de découpe au-dessus du ruban */
.vpl-card::before,
.vpl-card::after,
.vpl-image-card::before,
.vpl-image-card::after,
.vpl-final-box::before,
.vpl-final-box::after,
.vpl-sheen-card::before,
.vpl-sheen-card::after {
  z-index: 0 !important;
}

/* Mais le contenu interne des cartes reste devant */
.vpl-card > *,
.vpl-image-card > *,
.vpl-final-box > *,
.vpl-sheen-card > * {
  position: relative !important;
  z-index: 23 !important;
}


/* =========================================================
   Card cinema effect — sticky horizontal cards, inspired by provided video
   ========================================================= */

.vpl-card-cinema {
  position: relative;
  height: 260vh;
  margin: 0;
  padding: 0;
  color: #07111f;
  background:
    radial-gradient(circle at 52% 40%, rgba(255,255,255,.95), rgba(255,255,255,0) 16%),
    radial-gradient(circle at 78% 34%, rgba(100,140,190,.16), transparent 24%),
    radial-gradient(circle at 22% 66%, rgba(255,255,255,.75), transparent 28%),
    linear-gradient(180deg, #f4f7fb 0%, #eaf1f8 100%);
  overflow: clip;
  isolation: isolate;
}

.vpl-card-cinema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7,17,31,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,17,31,.045) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%);
  opacity: .52;
}

.vpl-card-cinema-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  display: grid;
  align-items: center;
  overflow: hidden;
}

.vpl-card-cinema-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vpl-card-cinema-orb {
  position: absolute;
  left: 44%;
  top: 33%;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(225,236,247,.34) 38%, rgba(225,236,247,0) 70%);
  filter: blur(14px);
  animation: vplCinemaFloat 9s ease-in-out infinite;
}

.vpl-card-cinema-orb--two {
  left: auto;
  right: -7rem;
  top: 12%;
  width: 20rem;
  height: 20rem;
  background: radial-gradient(circle, rgba(73,126,185,.22) 0%, rgba(73,126,185,.09) 42%, rgba(73,126,185,0) 70%);
  animation-duration: 12s;
  animation-direction: reverse;
}

.vpl-card-cinema-layout {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(420px, 1.04fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  padding-top: 80px;
  padding-bottom: 54px;
}

.vpl-card-cinema-copy {
  position: relative;
  z-index: 6;
  max-width: 690px;
}

.vpl-card-cinema-copy h2 {
  margin: 18px 0 0;
  color: #07111f;
  font-size: clamp(3.4rem, 7.4vw, 8.2rem);
  line-height: .9;
  letter-spacing: -.09em;
  font-weight: 950;
}

.vpl-card-cinema-copy p {
  max-width: 55ch;
  margin: 28px 0 0;
  color: #5b687a;
  font-size: clamp(1rem, 1.35vw, 1.18rem);
  line-height: 1.82;
}

.vpl-card-cinema-stage {
  position: relative;
  z-index: 5;
  height: 640px;
  perspective: 1200px;
}

.vpl-card-cinema-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.vpl-floating-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(330px, 72vw);
  min-height: 380px;
  padding: 24px;
  border-radius: 28px;
  color: #07111f;
  background:
    linear-gradient(160deg, rgba(255,255,255,.94), rgba(236,244,252,.86)),
    radial-gradient(circle at 22% 0%, rgba(255,255,255,.98), transparent 38%);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow:
    0 34px 90px rgba(7,17,31,.16),
    inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
  transform:
    translate3d(calc(var(--x, 0px) + (var(--card-progress, 0) * var(--travel, -1200px))), calc(-50% + var(--y, 0px)), var(--z, 0px))
    rotate(var(--r, 0deg))
    rotateY(calc(var(--ry, 0deg) + var(--tilt-y, 0deg)))
    rotateX(var(--tilt-x, 0deg));
  transition: box-shadow .35s ease, border-color .35s ease;
  overflow: hidden;
  will-change: transform;
}

.vpl-floating-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 20%), rgba(74,130,192,.20), transparent 42%),
    linear-gradient(115deg, transparent 0 30%, rgba(255,255,255,.42) 44%, transparent 58% 100%);
  opacity: .72;
  pointer-events: none;
}

.vpl-floating-card::after {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  height: 1px;
  background: linear-gradient(90deg, rgba(47,127,202,.85), rgba(255,255,255,0));
  opacity: .8;
}

.vpl-floating-card:hover {
  border-color: rgba(47,127,202,.22);
  box-shadow:
    0 42px 100px rgba(7,17,31,.20),
    0 0 0 1px rgba(47,127,202,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.vpl-floating-card-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 52px;
}

.vpl-floating-card-top span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #07111f, #17314f 70%, #2f7fca);
  font-weight: 950;
}

.vpl-floating-card-top b {
  color: #526174;
  font-size: .88rem;
  letter-spacing: -.02em;
}

.vpl-floating-card h3 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #07111f;
  font-size: 2.05rem;
  line-height: 1;
  letter-spacing: -.065em;
}

.vpl-floating-card p {
  position: relative;
  z-index: 2;
  margin: 16px 0 0;
  color: #5b687a;
  line-height: 1.7;
}

.vpl-floating-card small {
  position: absolute;
  z-index: 2;
  left: 24px;
  bottom: 28px;
  color: #2f7fca;
  font-weight: 900;
  letter-spacing: -.02em;
}

.vpl-floating-card--one {
  --x: 660px;
  --y: -180px;
  --z: 60px;
  --r: -7deg;
  --ry: -6deg;
  --travel: -1500px;
}

.vpl-floating-card--two {
  --x: 960px;
  --y: -60px;
  --z: 20px;
  --r: 4deg;
  --ry: -8deg;
  --travel: -1600px;
}

.vpl-floating-card--three {
  --x: 1250px;
  --y: 86px;
  --z: 90px;
  --r: -3deg;
  --ry: 5deg;
  --travel: -1720px;
}

.vpl-floating-card--four {
  --x: 1540px;
  --y: -130px;
  --z: 40px;
  --r: 6deg;
  --ry: -5deg;
  --travel: -1780px;
}

.vpl-floating-card--five {
  --x: 1830px;
  --y: 42px;
  --z: 110px;
  --r: -5deg;
  --ry: 7deg;
  --travel: -1880px;
}

@keyframes vplCinemaFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(28px, -22px, 0) scale(1.06); }
}

@media (max-width: 1100px) {
  .vpl-card-cinema {
    height: auto;
  }

  .vpl-card-cinema-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 88px 0;
  }

  .vpl-card-cinema-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .vpl-card-cinema-stage {
    height: auto;
    perspective: none;
  }

  .vpl-card-cinema-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .vpl-floating-card,
  .vpl-floating-card--one,
  .vpl-floating-card--two,
  .vpl-floating-card--three,
  .vpl-floating-card--four,
  .vpl-floating-card--five {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 310px;
    transform: none !important;
  }
}

@media (max-width: 700px) {
  .vpl-card-cinema-track {
    grid-template-columns: 1fr;
  }

  .vpl-card-cinema-copy h2 {
    font-size: clamp(2.8rem, 15vw, 4.8rem);
  }
}

/* =========================================================
   V16 — Corrections UX motion : card cinema, ruban, nav, honeycomb, images
   ========================================================= */

/* 1/2/3 — Card cinema recalibrée : moins longue, moins vide, cards visibles */
.vpl-card-cinema {
  height: 178vh !important;
  background:
    linear-gradient(180deg, rgba(8,17,31,.02), rgba(255,255,255,0) 11%, rgba(255,255,255,0) 82%, rgba(8,17,31,.035)),
    radial-gradient(circle at 52% 42%, rgba(255,255,255,.95), rgba(255,255,255,0) 18%),
    radial-gradient(circle at 75% 34%, rgba(80,132,192,.14), transparent 24%),
    radial-gradient(circle at 18% 72%, rgba(255,255,255,.76), transparent 26%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3f9 100%) !important;
}

.vpl-card-cinema-sticky {
  min-height: 650px !important;
  padding-top: clamp(84px, 11vh, 126px) !important;
  align-items: start !important;
}

.vpl-card-cinema-layout {
  min-height: calc(100vh - 80px) !important;
  padding-top: 36px !important;
  padding-bottom: 28px !important;
  grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr) !important;
  align-items: center !important;
}

.vpl-card-cinema-copy h2 {
  max-width: 9.8ch !important;
  font-size: clamp(3rem, 5.8vw, 6.25rem) !important;
  line-height: .94 !important;
  letter-spacing: -.082em !important;
}

.vpl-card-cinema-copy p {
  max-width: 50ch !important;
  margin-top: 22px !important;
}

.vpl-card-cinema-stage {
  height: 560px !important;
}

.vpl-floating-card {
  width: min(360px, 74vw) !important;
  min-height: 370px !important;
}

/* Cards plus proches du centre au départ + déplacement moins violent */
.vpl-floating-card--one {
  --x: 190px !important;
  --y: -168px !important;
  --z: 70px !important;
  --r: -6deg !important;
  --ry: -4deg !important;
  --travel: -560px !important;
}

.vpl-floating-card--two {
  --x: 400px !important;
  --y: -44px !important;
  --z: 120px !important;
  --r: 3deg !important;
  --ry: -6deg !important;
  --travel: -650px !important;
}

.vpl-floating-card--three {
  --x: 615px !important;
  --y: 95px !important;
  --z: 90px !important;
  --r: -3deg !important;
  --ry: 4deg !important;
  --travel: -720px !important;
}

.vpl-floating-card--four {
  --x: 830px !important;
  --y: -118px !important;
  --z: 50px !important;
  --r: 5deg !important;
  --ry: -4deg !important;
  --travel: -790px !important;
}

.vpl-floating-card--five {
  --x: 1030px !important;
  --y: 36px !important;
  --z: 105px !important;
  --r: -4deg !important;
  --ry: 5deg !important;
  --travel: -855px !important;
}

/* 4/5 — Ruban moins dominant sur fonds clairs, quasi invisible sur CTA final */
.vpl-scroll-ribbon {
  transition: opacity .28s ease, filter .28s ease, transform .28s ease !important;
}

.vpl-scroll-ribbon.is-on-light {
  opacity: .34 !important;
  filter: blur(.45px) saturate(.82) !important;
}

.vpl-scroll-ribbon.is-on-final {
  opacity: .06 !important;
  filter: blur(1.2px) saturate(.55) !important;
}

.vpl-scroll-ribbon.is-on-dark,
.vpl-scroll-ribbon.is-on-hero {
  opacity: .88 !important;
  filter: none !important;
}

/* 6 — Nid d'abeille plus dense, plus premium, avec connexions lumineuses */
.vpl-honeycomb-section {
  padding-top: clamp(84px, 9vw, 130px) !important;
  padding-bottom: clamp(84px, 9vw, 130px) !important;
  background:
    radial-gradient(circle at 18% 24%, rgba(47,127,202,.10), transparent 24%),
    radial-gradient(circle at 78% 16%, rgba(255,255,255,.34), transparent 20%),
    linear-gradient(180deg, #f5f8fc 0%, #eaf1f8 100%) !important;
}

.vpl-honeycomb-shell {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr) !important;
  gap: clamp(28px, 4vw, 62px) !important;
}

.vpl-honeycomb-grid {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, 126px) !important;
  justify-content: center !important;
  gap: 0 2px !important;
  padding: 40px 10px 76px !important;
  isolation: isolate !important;
}

.vpl-honeycomb-grid::before,
.vpl-honeycomb-grid::after {
  content: "" !important;
  position: absolute !important;
  inset: 8% 6% 4% 6% !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .50 !important;
}

.vpl-honeycomb-grid::before {
  background:
    linear-gradient(60deg, transparent 47%, rgba(47,127,202,.18) 48% 52%, transparent 53%),
    linear-gradient(-60deg, transparent 47%, rgba(47,127,202,.14) 48% 52%, transparent 53%),
    linear-gradient(0deg, transparent 47%, rgba(255,255,255,.42) 48% 52%, transparent 53%) !important;
  background-size: 126px 72px !important;
  mask-image: radial-gradient(circle at 52% 48%, black 0 58%, transparent 78%) !important;
}

.vpl-honeycomb-grid::after {
  background: radial-gradient(circle at 50% 48%, rgba(255,255,255,.74), rgba(47,127,202,.08) 42%, transparent 72%) !important;
  filter: blur(16px) !important;
}

.vpl-hex {
  width: 132px !important;
  height: 146px !important;
  margin-top: -8px !important;
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 28%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(224,234,245,.88) 58%, rgba(111,157,204,.52)) !important;
  box-shadow:
    0 20px 48px rgba(7,17,31,.12),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.vpl-hex:nth-child(2n) {
  transform: translateY(70px) scale(.82) !important;
}

.vpl-hex.is-visible:nth-child(2n) {
  transform: translateY(70px) scale(1) !important;
}

.vpl-hex.is-visible:nth-child(2n+1) {
  transform: translateY(8px) scale(1) !important;
}

.vpl-hex span {
  font-size: .95rem !important;
}

/* 7 — Transitions plus douces entre sections */
.vpl-light > .vpl-section,
.vpl-section,
.vpl-section-dark,
.vpl-final,
.vpl-honeycomb-section {
  position: relative !important;
}

.vpl-light > .vpl-section + .vpl-section,
.vpl-section-dark + .vpl-honeycomb-section,
.vpl-honeycomb-section + .vpl-final {
  margin-top: 0 !important;
}

.vpl-section-dark::before {
  opacity: .72 !important;
}

.vpl-light > .vpl-section::after,
.vpl-honeycomb-section::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 110px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(244,247,251,0), rgba(5,7,12,.08)) !important;
  z-index: 1 !important;
}

.vpl-section-dark::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  height: 120px !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(5,7,12,0), rgba(244,247,251,.96)) !important;
  z-index: 1 !important;
}

/* 8 — Images moins agressives, moins coupées */
.vpl-image-card {
  min-height: 500px !important;
  border-radius: 36px !important;
}

.vpl-image-card.small {
  min-height: 240px !important;
}

.vpl-image-card img {
  object-position: center 42% !important;
}

.vpl-image-grid > .vpl-image-card:first-child img {
  object-position: center 34% !important;
}

.vpl-image-grid > div .vpl-image-card:first-child img {
  object-position: center 38% !important;
}

.vpl-image-grid > div .vpl-image-card:last-child img {
  object-position: center 28% !important;
}

/* 9 — Navbar moins dense, CTA plus lisible */
.vpl-nav {
  padding: 9px 10px !important;
  gap: 10px !important;
  background: rgba(6, 10, 18, .46) !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: 0 16px 52px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.vpl-brand img {
  width: 46px !important;
  height: 46px !important;
}

.vpl-menu {
  gap: 2px !important;
}

.vpl-menu a {
  font-size: .9rem !important;
  padding: 11px 12px !important;
}

.vpl-menu a[href="/faq.html"] {
  display: none !important;
}

.vpl-nav-cta {
  min-height: 52px !important;
  padding: 0 22px !important;
  font-size: .96rem !important;
}

@media (max-width: 1100px) {
  .vpl-card-cinema {
    height: auto !important;
  }

  .vpl-card-cinema-sticky {
    padding: 78px 0 !important;
  }

  .vpl-card-cinema-layout {
    grid-template-columns: 1fr !important;
  }

  .vpl-card-cinema-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .vpl-floating-card {
    min-height: 300px !important;
  }

  .vpl-honeycomb-grid {
    grid-template-columns: repeat(3, 126px) !important;
  }
}

@media (max-width: 760px) {
  .vpl-card-cinema-copy h2 {
    font-size: clamp(2.65rem, 13vw, 4.4rem) !important;
  }

  .vpl-card-cinema-track {
    grid-template-columns: 1fr !important;
  }

  .vpl-image-card,
  .vpl-image-card.small {
    min-height: 390px !important;
  }

  .vpl-honeycomb-grid {
    grid-template-columns: repeat(2, 112px) !important;
    gap: 8px !important;
  }

  .vpl-hex {
    width: 112px !important;
    height: 124px !important;
  }
}


/* =========================================================
   V17 — Card cinema en déploiement éventail, toutes visibles en bas
   ========================================================= */

/*
  Nouvelle logique :
  - les cards ne traversent plus trop loin hors écran ;
  - elles se déploient progressivement dès l'arrivée dans la section ;
  - en bas de section, toutes les cards restent visibles dans la scène.
*/

.vpl-card-cinema {
  height: 165vh !important;
}

.vpl-card-cinema-sticky {
  min-height: 640px !important;
  padding-top: clamp(86px, 10vh, 118px) !important;
}

.vpl-card-cinema-layout {
  grid-template-columns: minmax(0, .86fr) minmax(520px, 1.14fr) !important;
  gap: clamp(28px, 4vw, 60px) !important;
}

.vpl-card-cinema-stage {
  height: 620px !important;
  overflow: visible !important;
}

.vpl-card-cinema-track {
  overflow: visible !important;
}

/* Le titre reste présent mais ne prend plus toute la scène */
.vpl-card-cinema-copy h2 {
  font-size: clamp(3rem, 5.35vw, 5.95rem) !important;
  max-width: 10.4ch !important;
}

/* Override total de l'ancien trajet horizontal */
.vpl-card-cinema .vpl-floating-card {
  width: min(310px, 70vw) !important;
  min-height: 350px !important;
  left: 50% !important;
  top: 50% !important;
  opacity: var(--cinema-opacity, .18) !important;
  transform:
    translate3d(
      calc(-50% + var(--cinema-x, 0px)),
      calc(-50% + var(--cinema-y, 0px)),
      var(--cinema-z, 0px)
    )
    rotate(var(--cinema-r, 0deg))
    rotateY(var(--cinema-ry, 0deg))
    rotateX(var(--tilt-x, 0deg))
    scale(var(--cinema-scale, .86)) !important;
  transition:
    opacity .28s ease,
    box-shadow .35s ease,
    border-color .35s ease !important;
}

/* Positions finales en éventail : toutes visibles */
.vpl-card-cinema .vpl-floating-card--one {
  --final-x: -250px;
  --final-y: -150px;
  --final-z: 80px;
  --final-r: -7deg;
  --final-ry: -8deg;
}

.vpl-card-cinema .vpl-floating-card--two {
  --final-x: -40px;
  --final-y: -42px;
  --final-z: 130px;
  --final-r: 3deg;
  --final-ry: -4deg;
}

.vpl-card-cinema .vpl-floating-card--three {
  --final-x: 180px;
  --final-y: 108px;
  --final-z: 100px;
  --final-r: -3deg;
  --final-ry: 5deg;
}

.vpl-card-cinema .vpl-floating-card--four {
  --final-x: 360px;
  --final-y: -116px;
  --final-z: 70px;
  --final-r: 6deg;
  --final-ry: -5deg;
}

.vpl-card-cinema .vpl-floating-card--five {
  --final-x: 505px;
  --final-y: 72px;
  --final-z: 115px;
  --final-r: -5deg;
  --final-ry: 6deg;
}

/* Début de l'animation : stack compacte, pas hors champ */
.vpl-card-cinema:not(.is-ready) .vpl-floating-card {
  --cinema-x: 230px;
  --cinema-y: 0px;
  --cinema-z: 0px;
  --cinema-r: 0deg;
  --cinema-ry: 0deg;
  --cinema-scale: .82;
  --cinema-opacity: 0;
}

/* Effet de profondeur plus lisible */
.vpl-card-cinema .vpl-floating-card h3 {
  font-size: 1.82rem !important;
}

.vpl-card-cinema .vpl-floating-card-top {
  margin-bottom: 44px !important;
}

.vpl-card-cinema .vpl-floating-card p {
  font-size: .96rem !important;
}

/* Fin de section : on garantit que toutes les cards restent visibles */
.vpl-card-cinema.is-complete .vpl-floating-card {
  opacity: 1 !important;
}

/* Responsive : grille normale, aucune animation hors champ */
@media (max-width: 1100px) {
  .vpl-card-cinema {
    height: auto !important;
  }

  .vpl-card-cinema .vpl-floating-card,
  .vpl-card-cinema .vpl-floating-card--one,
  .vpl-card-cinema .vpl-floating-card--two,
  .vpl-card-cinema .vpl-floating-card--three,
  .vpl-card-cinema .vpl-floating-card--four,
  .vpl-card-cinema .vpl-floating-card--five {
    left: auto !important;
    top: auto !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
  }
}


/* =========================================================
   V18 — Remplacement card cinema par une carte unique progressive
   ========================================================= */

/* L'ancienne section multi-cards est remplacée dans le HTML par .vpl-single-card-section. */
.vpl-single-card-section {
  position: relative;
  height: 185vh;
  overflow: clip;
  color: #07111f;
  background:
    linear-gradient(180deg, rgba(8,17,31,.025), rgba(255,255,255,0) 12%, rgba(255,255,255,0) 86%, rgba(8,17,31,.035)),
    radial-gradient(circle at 70% 42%, rgba(47,127,202,.13), transparent 25%),
    radial-gradient(circle at 20% 66%, rgba(255,255,255,.82), transparent 30%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3f9 100%);
  isolation: isolate;
}

.vpl-single-card-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7,17,31,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,17,31,.04) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 54% 45%, black, transparent 76%);
  opacity: .48;
}

.vpl-single-card-sticky {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: grid;
  align-items: center;
  padding-top: clamp(96px, 11vh, 134px);
  padding-bottom: 44px;
  overflow: hidden;
}

.vpl-single-card-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.vpl-single-card-bg span {
  position: absolute;
  width: 26rem;
  height: 26rem;
  border-radius: 50%;
  filter: blur(18px);
  background: radial-gradient(circle, rgba(255,255,255,.92), rgba(215,230,245,.28) 40%, transparent 72%);
  left: 45%;
  top: 28%;
  animation: vplCinemaFloat 10s ease-in-out infinite;
}

.vpl-single-card-bg span:nth-child(2) {
  left: auto;
  right: -7rem;
  top: 14%;
  width: 22rem;
  height: 22rem;
  background: radial-gradient(circle, rgba(47,127,202,.18), rgba(47,127,202,.06) 42%, transparent 72%);
  animation-direction: reverse;
  animation-duration: 13s;
}

.vpl-single-card-layout {
  position: relative;
  z-index: 6;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(520px, 1.22fr);
  align-items: center;
  gap: clamp(34px, 5vw, 74px);
}

.vpl-single-card-copy {
  max-width: 620px;
}

.vpl-single-card-copy h2 {
  margin: 18px 0 0;
  color: #07111f;
  font-size: clamp(3rem, 5.8vw, 6.25rem);
  line-height: .93;
  letter-spacing: -.086em;
  font-weight: 950;
  max-width: 10.5ch;
}

.vpl-single-card-copy p {
  margin: 24px 0 0;
  max-width: 52ch;
  color: #566578;
  font-size: clamp(1rem, 1.25vw, 1.14rem);
  line-height: 1.8;
}

/* Carte unique */
.vpl-master-card {
  position: relative;
  z-index: 8;
  width: min(780px, 100%);
  min-height: 610px;
  padding: clamp(24px, 3vw, 36px);
  border-radius: 38px;
  color: #07111f;
  background:
    linear-gradient(155deg, rgba(255,255,255,.96), rgba(235,244,252,.90)),
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.98), transparent 32%);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow:
    0 44px 120px rgba(7,17,31,.18),
    inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter: blur(22px);
  overflow: hidden;
  transform:
    translate3d(calc((1 - var(--single-progress, 0)) * 80px), calc((1 - var(--single-progress, 0)) * 34px), 0)
    rotateY(calc(-8deg + var(--single-progress, 0) * 8deg))
    rotateX(calc(4deg - var(--single-progress, 0) * 4deg))
    scale(calc(.92 + var(--single-progress, 0) * .08));
  opacity: calc(.55 + var(--single-progress, 0) * .45);
  transition: box-shadow .3s ease, border-color .3s ease;
  will-change: transform, opacity;
}

.vpl-master-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx, 68%) var(--my, 22%), rgba(47,127,202,.20), transparent 44%),
    linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.38) 42%, transparent 58% 100%);
}

.vpl-master-card-glow {
  position: absolute;
  right: -110px;
  top: -120px;
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,127,202,.24), transparent 70%);
  filter: blur(12px);
  pointer-events: none;
}

.vpl-master-card-header,
.vpl-master-card-body,
.vpl-master-card-footer {
  position: relative;
  z-index: 2;
}

.vpl-master-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 30px;
}

.vpl-master-card-kicker {
  display: inline-flex;
  margin-bottom: 10px;
  color: #2f7fca;
  font-size: .86rem;
  font-weight: 950;
  letter-spacing: -.02em;
}

.vpl-master-card-header h3 {
  margin: 0;
  color: #07111f;
  font-size: clamp(2.2rem, 3.8vw, 4.2rem);
  line-height: .9;
  letter-spacing: -.075em;
  max-width: 10ch;
}

.vpl-master-card-progress {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 88px;
  height: 58px;
  padding: 0 14px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, #07111f, #163a63 62%, #2f7fca);
  box-shadow: 0 20px 52px rgba(47,127,202,.22);
}

.vpl-master-card-body {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: center;
}

.vpl-master-card-visual {
  position: relative;
  min-height: 300px;
  display: grid;
  place-items: center;
}

.vpl-master-card-visual b {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 128px;
  height: 128px;
  border-radius: 38px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.34), transparent 30%),
    linear-gradient(135deg, #07111f, #17314f 58%, #2f7fca);
  font-size: 2rem;
  letter-spacing: -.08em;
  box-shadow: 0 28px 70px rgba(7,17,31,.22);
  transform: rotate(calc(-6deg + var(--single-progress, 0) * 6deg));
}

.vpl-master-orbit {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.vpl-master-orbit span {
  position: absolute;
  border: 1px solid rgba(47,127,202,.16);
  border-radius: 50%;
  transform: scale(calc(.65 + var(--single-progress, 0) * .35));
  opacity: calc(.25 + var(--single-progress, 0) * .55);
}

.vpl-master-orbit span:nth-child(1) {
  width: 132px;
  height: 132px;
}

.vpl-master-orbit span:nth-child(2) {
  width: 190px;
  height: 190px;
  animation: vplOrbitRotate 12s linear infinite;
}

.vpl-master-orbit span:nth-child(3) {
  width: 250px;
  height: 250px;
  animation: vplOrbitRotate 18s linear infinite reverse;
}

.vpl-master-card-lines {
  display: grid;
  gap: 12px;
}

.vpl-master-line {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: start;
  padding: 16px;
  border-radius: 22px;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(7,17,31,.07);
  box-shadow: 0 12px 34px rgba(7,17,31,.06);
  opacity: .22;
  transform: translateX(28px) scale(.98);
  transition: opacity .35s ease, transform .45s cubic-bezier(.16,1,.3,1), background .35s ease;
}

.vpl-master-line.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
  background: rgba(255,255,255,.82);
}

.vpl-master-line span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(135deg, #07111f, #2f7fca);
  font-weight: 950;
}

.vpl-master-line strong {
  display: block;
  color: #07111f;
  font-size: 1.02rem;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.vpl-master-line p {
  margin: 6px 0 0;
  color: #5b687a;
  line-height: 1.45;
  font-size: .92rem;
}

.vpl-master-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.vpl-master-card-footer span {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  color: #17314f;
  background: rgba(47,127,202,.10);
  border: 1px solid rgba(47,127,202,.14);
  font-size: .86rem;
  font-weight: 900;
}

@keyframes vplOrbitRotate {
  from { transform: rotate(0deg) scale(calc(.65 + var(--single-progress, 0) * .35)); }
  to { transform: rotate(360deg) scale(calc(.65 + var(--single-progress, 0) * .35)); }
}

/* Masque l'ancien système si un résidu existe encore */
.vpl-card-cinema {
  display: none !important;
}

@media (max-width: 1100px) {
  .vpl-single-card-section {
    height: auto;
  }

  .vpl-single-card-sticky {
    position: relative;
    min-height: 0;
    padding: 86px 0;
  }

  .vpl-single-card-layout {
    grid-template-columns: 1fr;
  }

  .vpl-master-card {
    transform: none !important;
    opacity: 1 !important;
    min-height: auto;
  }

  .vpl-master-line {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 760px) {
  .vpl-single-card-copy h2 {
    font-size: clamp(2.7rem, 14vw, 4.7rem);
  }

  .vpl-master-card {
    border-radius: 28px;
  }

  .vpl-master-card-body {
    grid-template-columns: 1fr;
  }

  .vpl-master-card-visual {
    min-height: 210px;
  }
}


.vpl-premium-carousel {
  position: relative;
  overflow: hidden;
  padding: clamp(86px, 10vw, 132px) 0;
  color: #07111f;
  background:
    radial-gradient(circle at 78% 22%, rgba(47,127,202,.14), transparent 24%),
    radial-gradient(circle at 16% 72%, rgba(255,255,255,.82), transparent 28%),
    linear-gradient(180deg, #f5f8fc 0%, #edf3f9 100%);
}

.vpl-premium-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7,17,31,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,17,31,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 74%);
  opacity: .52;
}

.vpl-carousel-head {
  position: relative;
  z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.vpl-carousel-head h2 {
  margin: 14px 0 0;
  max-width: 11ch;
  color: #07111f;
  font-size: clamp(2.7rem, 5.8vw, 6.3rem);
  line-height: .92;
  letter-spacing: -.085em;
}

.vpl-carousel-controls {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.vpl-carousel-btn {
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  color: #07111f;
  background: linear-gradient(135deg, #ffffff, #e1ebf5);
  box-shadow: 0 16px 40px rgba(7,17,31,.12), inset 0 1px 0 rgba(255,255,255,.92);
  font-size: 1.2rem;
  font-weight: 950;
  cursor: pointer;
}

.vpl-carousel-shell {
  position: relative;
  z-index: 8;
  overflow: hidden;
  border-radius: 38px;
}

.vpl-carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 24px;
  scrollbar-width: none;
}

.vpl-carousel-track::-webkit-scrollbar {
  display: none;
}

.vpl-carousel-card {
  position: relative;
  flex: 0 0 min(840px, 82vw);
  min-height: 330px;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(28px, 4vw, 46px);
  border-radius: 36px;
  scroll-snap-align: start;
  color: #07111f;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.98), transparent 30%),
    linear-gradient(145deg, rgba(255,255,255,.95), rgba(230,240,250,.88));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: 0 30px 90px rgba(7,17,31,.14), inset 0 1px 0 rgba(255,255,255,.92);
  overflow: hidden;
  transform: translateZ(0);
}

.vpl-carousel-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(440px circle at var(--mx, 70%) var(--my, 20%), rgba(47,127,202,.18), transparent 42%),
    linear-gradient(115deg, transparent 0 32%, rgba(255,255,255,.42) 46%, transparent 58% 100%);
  pointer-events: none;
}

.vpl-carousel-card::after {
  content: "";
  position: absolute;
  right: -100px;
  top: -100px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47,127,202,.22), transparent 70%);
  filter: blur(10px);
  pointer-events: none;
}

.vpl-carousel-num {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 28px;
  color: #fff;
  background: linear-gradient(135deg, #07111f, #17314f 62%, #2f7fca);
  box-shadow: 0 24px 60px rgba(47,127,202,.22);
  font-size: 1.45rem;
  font-weight: 950;
}

.vpl-carousel-card > div {
  position: relative;
  z-index: 2;
}

.vpl-carousel-card strong {
  display: inline-flex;
  margin-bottom: 12px;
  color: #2f7fca;
  font-size: .9rem;
  font-weight: 950;
  letter-spacing: -.02em;
}

.vpl-carousel-card h3 {
  margin: 0;
  color: #07111f;
  font-size: clamp(2.15rem, 4.2vw, 4.5rem);
  line-height: .92;
  letter-spacing: -.075em;
  max-width: 10ch;
}

.vpl-carousel-card p {
  max-width: 58ch;
  margin: 18px 0 0;
  color: #566578;
  line-height: 1.75;
  font-size: 1.04rem;
}

.vpl-carousel-dots {
  position: relative;
  z-index: 8;
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.vpl-carousel-dot {
  width: 34px;
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(7,17,31,.18);
  cursor: pointer;
}

.vpl-carousel-dot.is-active {
  width: 54px;
  background: #2f7fca;
}

.vpl-single-card-section {
  display: none !important;
}

@media (max-width: 760px) {
  .vpl-carousel-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .vpl-carousel-card {
    grid-template-columns: 1fr;
    min-height: 360px;
    flex-basis: min(92vw, 520px);
  }

  .vpl-carousel-num {
    width: 72px;
    height: 72px;
    border-radius: 22px;
  }
}


/* =========================================================
   V20 — Section constellation premium
   ========================================================= */
.vpl-premium-carousel,
.vpl-single-card-section,
.vpl-card-cinema {
  display: none !important;
}

.vpl-constellation-section {
  position: relative;
  overflow: hidden;
  padding: clamp(92px, 10vw, 138px) 0;
  color: #07111f;
  background:
    radial-gradient(circle at 82% 18%, rgba(47,127,202,.15), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.82), transparent 26%),
    linear-gradient(180deg, #f5f8fc 0%, #eaf1f8 100%);
  isolation: isolate;
}

.vpl-constellation-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(7,17,31,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,17,31,.035) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%);
  opacity: .5;
}

.vpl-constellation-head {
  position: relative;
  z-index: 5;
  margin-bottom: 34px;
}

.vpl-constellation-head h2 {
  margin: 14px 0 0;
  max-width: 11ch;
  font-size: clamp(2.9rem, 5.9vw, 6.5rem);
  line-height: .92;
  letter-spacing: -.085em;
  color: #07111f;
}

.vpl-constellation-head p {
  max-width: 58ch;
  margin: 22px 0 0;
  color: #566578;
  line-height: 1.75;
}

.vpl-constellation-stage {
  position: relative;
  z-index: 5;
  min-height: 760px;
  border-radius: 42px;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.68), rgba(232,241,250,.52)),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.72), transparent 70%);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 30px 100px rgba(7,17,31,.12), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter: blur(18px);
}

.vpl-constellation-stage::before,
.vpl-constellation-stage::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(16px);
}

.vpl-constellation-stage::before {
  width: 280px;
  height: 280px;
  right: -70px;
  top: -70px;
  background: radial-gradient(circle, rgba(47,127,202,.22), transparent 72%);
}

.vpl-constellation-stage::after {
  width: 240px;
  height: 240px;
  left: -80px;
  bottom: -60px;
  background: radial-gradient(circle, rgba(255,255,255,.72), transparent 72%);
}

.vpl-constellation-links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.vpl-constellation-links path {
  fill: none;
  stroke: rgba(47,127,202,.22);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  filter: drop-shadow(0 0 8px rgba(47,127,202,.18));
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);
}

.vpl-constellation-stage.is-visible .vpl-constellation-links path {
  stroke-dashoffset: 0;
}

.vpl-constellation-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(420px, calc(100% - 48px));
  padding: 34px;
  transform: translate(-50%, -50%) scale(.92);
  transform-style: preserve-3d;
  border-radius: 34px;
  z-index: 3;
  color: #07111f;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,.98), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(230,240,250,.9));
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 34px 90px rgba(7,17,31,.15), inset 0 1px 0 rgba(255,255,255,.94);
  opacity: 0;
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}

.vpl-constellation-stage.is-visible .vpl-constellation-core {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.vpl-constellation-core-kicker {
  display: inline-flex;
  margin-bottom: 12px;
  color: #2f7fca;
  font-size: .9rem;
  font-weight: 950;
}

.vpl-constellation-core h3 {
  margin: 0;
  font-size: clamp(2.15rem, 4vw, 4.2rem);
  line-height: .92;
  letter-spacing: -.075em;
  max-width: 10ch;
}

.vpl-constellation-core p {
  margin: 18px 0 0;
  color: #566578;
  line-height: 1.75;
}

.vpl-constellation-core-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.vpl-constellation-core-tags span {
  display: inline-flex;
  padding: 9px 12px;
  border-radius: 999px;
  color: #17314f;
  background: rgba(47,127,202,.10);
  border: 1px solid rgba(47,127,202,.14);
  font-size: .84rem;
  font-weight: 900;
}

.vpl-constellation-node {
  position: absolute;
  width: 250px;
  padding: 22px;
  border-radius: 28px;
  z-index: 2;
  color: #07111f;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.98), transparent 28%),
    linear-gradient(150deg, rgba(255,255,255,.96), rgba(230,240,250,.88));
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 26px 70px rgba(7,17,31,.11), inset 0 1px 0 rgba(255,255,255,.92);
  opacity: 0;
  transform: translateY(22px) scale(.94);
  transition: opacity .65s ease, transform .75s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
  overflow: hidden;
}

.vpl-constellation-stage.is-visible .vpl-constellation-node {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.vpl-constellation-node::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 70%) var(--my, 20%), rgba(47,127,202,.16), transparent 42%);
  pointer-events: none;
}

.vpl-constellation-node:hover {
  box-shadow: 0 30px 80px rgba(7,17,31,.16), 0 0 0 1px rgba(47,127,202,.10), inset 0 1px 0 rgba(255,255,255,.92);
}

.vpl-constellation-node:nth-of-type(1) { transition-delay: .12s; }
.vpl-constellation-node:nth-of-type(2) { transition-delay: .22s; }
.vpl-constellation-node:nth-of-type(3) { transition-delay: .32s; }
.vpl-constellation-node:nth-of-type(4) { transition-delay: .42s; }
.vpl-constellation-node:nth-of-type(5) { transition-delay: .52s; }

.vpl-constellation-node-num {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #07111f, #17314f 62%, #2f7fca);
  box-shadow: 0 20px 52px rgba(47,127,202,.22);
  font-weight: 950;
}

.vpl-constellation-node strong {
  display: inline-flex;
  color: #2f7fca;
  font-size: .86rem;
  font-weight: 950;
}

.vpl-constellation-node h4 {
  margin: 10px 0 0;
  font-size: 1.52rem;
  line-height: 1;
  letter-spacing: -.05em;
}

.vpl-constellation-node p {
  margin: 12px 0 0;
  color: #566578;
  line-height: 1.6;
  font-size: .95rem;
}

.vpl-constellation-stage .node-1 { left: 56px; top: 74px; }
.vpl-constellation-stage .node-2 { right: 56px; top: 88px; }
.vpl-constellation-stage .node-3 { left: 72px; bottom: 76px; }
.vpl-constellation-stage .node-4 { right: 68px; bottom: 84px; }
.vpl-constellation-stage .node-5 { right: 304px; top: 250px; }

@media (max-width: 1100px) {
  .vpl-constellation-stage {
    min-height: auto;
    padding: 28px;
  }

  .vpl-constellation-links {
    display: none;
  }

  .vpl-constellation-core,
  .vpl-constellation-node {
    position: relative;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100%;
    max-width: none;
    transform: none !important;
    opacity: 1 !important;
    margin-bottom: 18px;
  }

  .vpl-constellation-stage {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-items: stretch;
  }

  .vpl-constellation-core {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .vpl-constellation-head h2 {
    font-size: clamp(2.6rem, 13vw, 4.5rem);
  }

  .vpl-constellation-stage {
    grid-template-columns: 1fr;
    border-radius: 28px;
    padding: 20px;
  }

  .vpl-constellation-core {
    padding: 24px;
    border-radius: 24px;
  }

  .vpl-constellation-node {
    padding: 18px;
    border-radius: 22px;
  }
}


/* =========================================================
   ECG intro final — copie du fichier fourni
   ========================================================= */

:root {
      --vp-bg: #05070a;
      --vp-bg-2: #0b1722;
      --vp-cyan: #5de7ff;
      --vp-white: #ffffff;
      --vp-soft: rgba(255,255,255,.74);
    }

    * { box-sizing: border-box; }

    html, body {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background: #07111b;
      color: white;
    }

    body.vp-intro-playing {
      overflow: hidden;
    }

    /* =========================
       INTRO
    ========================= */

    .vp-intro {
      position: fixed;
      inset: 0;
      z-index: 999999;
      overflow: hidden;
      background: transparent;
      perspective: 1400px;
    }

    .vp-half {
      position: absolute;
      left: 0;
      width: 100vw;
      height: 50vh;
      overflow: hidden;
      background: #05070a;
      transition:
        transform 1.55s cubic-bezier(.78, 0, .18, 1),
        filter 1.55s cubic-bezier(.78, 0, .18, 1);
      will-change: transform, filter;
    }

    .vp-half-top {
      top: 0;
      transform-origin: center bottom;
    }

    .vp-half-bottom {
      bottom: 0;
      transform-origin: center top;
    }

    .vp-half-inner {
      position: absolute;
      left: 0;
      width: 100vw;
      height: 100vh;
      background:
        radial-gradient(circle at 50% 38%, rgba(93,231,255,.16), transparent 22%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 12%),
        linear-gradient(140deg, var(--vp-bg) 0%, var(--vp-bg-2) 52%, var(--vp-bg) 100%);
    }

    .vp-half-top .vp-half-inner {
      top: 0;
    }

    .vp-half-bottom .vp-half-inner {
      top: -50vh;
    }

    .vp-content {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      pointer-events: none;
    }

    .vp-content-box {
      width: min(1100px, 92vw);
      padding: 24px;
      transform: translateY(-96px);
    }

    .vp-title {
      margin: 0;
      font-size: clamp(2.5rem, 7vw, 6.4rem);
      line-height: 1;
      letter-spacing: .14em;
      font-weight: 900;
      text-transform: uppercase;
      color: var(--vp-white);
      text-shadow:
        0 0 8px rgba(93,231,255,.78),
        0 0 22px rgba(93,231,255,.45),
        0 0 44px rgba(93,231,255,.22);
      animation: vpTitleFlicker 2.2s infinite;
      transform-origin: center center;
      transition:
        transform .16s ease,
        text-shadow .16s ease,
        filter .16s ease;
      will-change: transform, text-shadow, filter;
    }

    .vp-title.is-beating {
      transform: scale(1.045);
      text-shadow:
        0 0 10px rgba(255,255,255,1),
        0 0 26px rgba(93,231,255,.95),
        0 0 54px rgba(93,231,255,.50);
      filter: brightness(1.08);
    }

    .vp-subtitle {
      margin: 28px 0 0;
      transform: translateY(14px);
      color: var(--vp-soft);
      font-size: .92rem;
      letter-spacing: .22em;
      text-transform: uppercase;
    }

    /* =========================
       ECG CONTINU PLEIN ÉCRAN
    ========================= */

    .vp-ecg-zone {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100vw;
      height: 230px;
      transform: translateY(-50%);
      z-index: 9;
      overflow: visible;
      pointer-events: none;
    }

    .vp-ecg-svg {
      display: block;
      width: 100vw;
      height: 230px;
      overflow: visible;
    }

    .vp-ecg-base {
      display: none;
    }

    .vp-ecg-line {
      fill: none;
      stroke: var(--vp-cyan);
      stroke-width: 5;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      filter:
        drop-shadow(0 0 6px rgba(93,231,255,.98))
        drop-shadow(0 0 18px rgba(93,231,255,.72))
        drop-shadow(0 0 34px rgba(93,231,255,.34));
    }

    .vp-ecg-line.is-active {
      opacity: 1;
    }

    .vp-ecg-line.is-power {
      opacity: 1;
      animation: vpPowerPulse .32s linear infinite;
    }

    .vp-ecg-line.is-flatline {
      opacity: 1;
      stroke-width: 4;
      animation: none;
    }

    .vp-tracer {
      position: absolute;
      top: 50%;
      left: 0;
      width: 54px;
      height: 54px;
      border-radius: 999px;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, #fff 0%, rgba(93,231,255,1) 24%, rgba(93,231,255,.34) 58%, transparent 74%);
      box-shadow:
        0 0 22px rgba(93,231,255,1),
        0 0 58px rgba(93,231,255,.62);
      opacity: 0;
      pointer-events: none;
    }

    .vp-tracer.is-active {
      opacity: 1;
    }

    .vp-intro.vp-open .vp-half-top {
      transform: translateY(-104%) rotateX(8deg);
      filter: brightness(.82);
    }

    .vp-intro.vp-open .vp-half-bottom {
      transform: translateY(104%) rotateX(-8deg);
      filter: brightness(.82);
    }

    .vp-intro.vp-open .vp-ecg-zone {
      opacity: 0;
      transition: opacity .3s ease;
    }

    .vp-intro.vp-hidden {
      display: none;
    }

    @keyframes vpPowerPulse {
      0%, 100% {
        filter:
          drop-shadow(0 0 6px rgba(93,231,255,.98))
          drop-shadow(0 0 18px rgba(93,231,255,.72))
          drop-shadow(0 0 34px rgba(93,231,255,.34));
      }
      50% {
        filter:
          drop-shadow(0 0 12px rgba(255,255,255,1))
          drop-shadow(0 0 30px rgba(93,231,255,1))
          drop-shadow(0 0 64px rgba(93,231,255,.62));
      }
    }

    @keyframes vpTitleFlicker {
      0%, 100% { opacity: 1; }
      8% { opacity: .84; }
      11% { opacity: 1; }
      18% { opacity: .9; }
      22% { opacity: 1; }
      74% {
        text-shadow:
          0 0 8px rgba(93,231,255,.84),
          0 0 30px rgba(93,231,255,.52),
          0 0 54px rgba(93,231,255,.28);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .vp-intro { display: none; }
    }

/* =========================================================
   VITAL PROTECT — Hero visual polish v13
   Objectif : rendre les images + bulles plus premium et cohérentes.
   ========================================================= */

.vpl-proof {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: rgba(248,251,255,.82) !important;
  border-color: rgba(216,230,243,.18) !important;
  background: rgba(216,230,243,.075) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.vpl-proof::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  margin-right: 0 !important;
  border-radius: 999px !important;
  background: #f8fbff !important;
  box-shadow: 0 0 0 5px rgba(216,230,243,.10), 0 0 22px rgba(216,230,243,.28) !important;
}

.vpl-visual {
  isolation: isolate !important;
}

.vpl-visual::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 58px 8px 28px 36px !important;
  border-radius: 46px !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  background:
    radial-gradient(circle at 22% 18%, rgba(216,230,243,.14), transparent 30%),
    radial-gradient(circle at 84% 16%, rgba(47,111,159,.20), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 54%, rgba(47,111,159,.075)) !important;
  box-shadow:
    0 46px 120px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  transform: rotate(-1.4deg) !important;
}

.vpl-orb {
  z-index: 1 !important;
  width: 300px !important;
  height: 300px !important;
  right: 8% !important;
  top: 12px !important;
  opacity: .76 !important;
  filter: saturate(1.05) blur(.2px) !important;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.68), rgba(255,255,255,.13) 16%, transparent 32%),
    radial-gradient(circle at 67% 69%, rgba(216,230,243,.42), transparent 18%),
    radial-gradient(circle at 45% 48%, rgba(47,111,159,.46), transparent 56%),
    linear-gradient(135deg, rgba(31,68,110,.92), rgba(8,24,48,.88) 64%, rgba(113,129,150,.52)) !important;
  box-shadow:
    0 0 96px rgba(47,111,159,.24),
    0 40px 90px rgba(0,0,0,.34) !important;
}

.vpl-visual-card {
  z-index: 3 !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.vpl-visual-card img {
  filter: saturate(1.03) contrast(1.02) brightness(.95) !important;
}

.vpl-visual-card::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 34%),
    linear-gradient(to top, rgba(5,7,12,.42), transparent 56%) !important;
}

.vpl-visual-card-main {
  width: min(440px, 88%) !important;
  height: 320px !important;
  right: 18px !important;
  top: 86px !important;
  bottom: auto !important;
  border-radius: 38px !important;
  transform: rotateY(-4deg) rotateX(2deg) rotateZ(-1.8deg) translateZ(0) !important;
}

.vpl-visual-card-small {
  z-index: 3 !important;
  width: min(238px, 48%) !important;
  height: 178px !important;
  left: 12px !important;
  top: 306px !important;
  border-radius: 30px !important;
  transform: rotateY(4deg) rotateX(1deg) rotateZ(3.2deg) translateZ(0) !important;
}

.vpl-float-panel {
  z-index: 4 !important;
  width: 236px !important;
  padding: 15px 16px !important;
  border-radius: 24px !important;
  border-color: rgba(216,230,243,.20) !important;
  color: #f8fbff !important;
  background:
    linear-gradient(135deg, rgba(13,27,42,.82), rgba(8,18,32,.66)) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
}

.vpl-float-panel strong {
  font-size: .98rem !important;
  line-height: 1.15 !important;
  letter-spacing: -.035em !important;
}

.vpl-float-panel span {
  color: rgba(216,230,243,.72) !important;
  font-size: .84rem !important;
  line-height: 1.48 !important;
}

.vpl-float-panel-a {
  left: auto !important;
  right: 26px !important;
  top: 372px !important;
  bottom: auto !important;
}

.vpl-float-panel-b {
  left: 44px !important;
  right: auto !important;
  top: auto !important;
  bottom: 18px !important;
}

@media (min-width: 1081px) {
  .vpl-hero {
    min-height: 100svh !important;
    padding: 136px 0 72px !important;
  }

  .vpl-hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(420px, .82fr) !important;
    align-items: center !important;
    gap: clamp(42px, 6vw, 92px) !important;
  }

  .vpl-visual {
    min-height: 560px !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 1080px) {
  .vpl-visual {
    width: min(640px, 100%) !important;
    min-height: 540px !important;
    margin: 18px auto 0 !important;
  }

  .vpl-visual::before {
    inset: 42px 4px 22px 20px !important;
  }

  .vpl-visual-card-main {
    width: min(430px, 84%) !important;
    height: 310px !important;
    right: 20px !important;
    top: 82px !important;
  }

  .vpl-visual-card-small {
    width: min(230px, 46%) !important;
    height: 170px !important;
    left: 18px !important;
    top: 292px !important;
  }

  .vpl-float-panel-a {
    right: 22px !important;
    top: 356px !important;
  }

  .vpl-float-panel-b {
    left: 40px !important;
    bottom: 16px !important;
  }
}

@media (max-width: 640px) {
  .vpl-hero {
    padding-bottom: 54px !important;
  }

  .vpl-proof-row {
    gap: 8px !important;
  }

  .vpl-proof {
    padding: 8px 10px !important;
    font-size: .82rem !important;
  }

  .vpl-visual {
    min-height: 570px !important;
    max-width: 460px !important;
    margin-top: 10px !important;
  }

  .vpl-visual::before {
    inset: 26px 0 18px 0 !important;
    border-radius: 34px !important;
    transform: rotate(-.8deg) !important;
  }

  .vpl-orb {
    width: 220px !important;
    height: 220px !important;
    right: -18px !important;
    top: 24px !important;
    opacity: .68 !important;
  }

  .vpl-visual-card-main {
    width: 92% !important;
    height: 250px !important;
    right: 0 !important;
    top: 58px !important;
    border-radius: 30px !important;
    transform: rotateZ(-1.2deg) !important;
  }

  .vpl-visual-card-small {
    width: 47% !important;
    height: 146px !important;
    left: 0 !important;
    top: 234px !important;
    border-radius: 24px !important;
    transform: rotateZ(3deg) !important;
  }

  .vpl-float-panel,
  .vpl-float-panel-a,
  .vpl-float-panel-b {
    width: min(252px, 68%) !important;
    padding: 13px 14px !important;
    border-radius: 22px !important;
  }

  .vpl-float-panel-a {
    left: auto !important;
    right: 0 !important;
    top: 318px !important;
    bottom: auto !important;
  }

  .vpl-float-panel-b {
    left: 18px !important;
    right: auto !important;
    top: 432px !important;
    bottom: auto !important;
  }

  .vpl-float-panel strong {
    font-size: .92rem !important;
  }

  .vpl-float-panel span {
    font-size: .78rem !important;
  }
}


/* =========================================================
   VITAL PROTECT — Hero clean pass v15
   Correction franche de la première section : plus de grand panneau vide,
   plus de collage de bulles. Le visuel devient un bloc éditorial propre.
   ========================================================= */

body.vpl-home .vpl-page {
  background:
    radial-gradient(circle at 13% 15%, rgba(93,231,255,.12), transparent 23%),
    radial-gradient(circle at 82% 16%, rgba(47,111,159,.18), transparent 26%),
    radial-gradient(circle at 62% 86%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, #05070c 0%, #0a1020 42%, #f4f7fb 42%, #f4f7fb 100%) !important;
}

body.vpl-home .vpl-hero {
  min-height: 100svh !important;
  padding: clamp(124px, 14vh, 162px) 0 clamp(66px, 8vh, 92px) !important;
  overflow: hidden !important;
}

body.vpl-home .vpl-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -12% -10% -8% -10% !important;
  z-index: -2 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 16% 32%, rgba(93,231,255,.14), transparent 27%),
    radial-gradient(circle at 72% 24%, rgba(87,150,222,.16), transparent 31%),
    linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0) 48%) !important;
}

body.vpl-home .vpl-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  opacity: .25 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px) !important;
  background-size: 74px 74px !important;
  mask-image: linear-gradient(90deg, #000, transparent 88%) !important;
}

body.vpl-home .vpl-hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(430px, .86fr) !important;
  gap: clamp(48px, 7vw, 116px) !important;
  align-items: center !important;
}

body.vpl-home .vpl-eyebrow {
  border-color: rgba(93,231,255,.28) !important;
  background: linear-gradient(135deg, rgba(93,231,255,.13), rgba(255,255,255,.055)) !important;
  color: rgba(241,250,255,.88) !important;
  box-shadow:
    0 18px 55px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.12) !important;
}

body.vpl-home .vpl-title {
  max-width: 9.8ch !important;
  font-size: clamp(4rem, 8.6vw, 8.25rem) !important;
  line-height: .82 !important;
  letter-spacing: -.09em !important;
  text-shadow: 0 26px 86px rgba(0,0,0,.50) !important;
}

body.vpl-home .vpl-title span {
  background: linear-gradient(135deg, #fff 0%, #dff8ff 30%, #73e5ff 58%, #75a8ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

body.vpl-home .vpl-lead {
  max-width: 62ch !important;
  color: rgba(232,242,250,.74) !important;
  font-size: clamp(1.02rem, 1.22vw, 1.15rem) !important;
  line-height: 1.76 !important;
}

body.vpl-home .vpl-actions {
  margin-top: 30px !important;
}

body.vpl-home .vpl-button-primary {
  background: linear-gradient(135deg, #ffffff, #e6f8ff 44%, #7ae8ff 100%) !important;
  box-shadow:
    0 20px 60px rgba(93,231,255,.20),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

body.vpl-home .vpl-button-secondary {
  background: rgba(255,255,255,.065) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.vpl-home .vpl-proof-row {
  margin-top: 28px !important;
  max-width: 620px !important;
}

body.vpl-home .vpl-proof {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 9px 12px !important;
  background: rgba(6,17,30,.42) !important;
  border-color: rgba(216,235,247,.16) !important;
  color: rgba(241,248,255,.80) !important;
  box-shadow:
    0 10px 32px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

body.vpl-home .vpl-proof::before {
  content: "" !important;
  flex: 0 0 auto !important;
  width: 7px !important;
  height: 7px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  background: #eafaff !important;
  box-shadow: 0 0 0 5px rgba(93,231,255,.10), 0 0 20px rgba(93,231,255,.28) !important;
}

body.vpl-home .vpl-visual {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  max-width: 610px !important;
  margin-left: auto !important;
  padding: 18px !important;
  display: grid !important;
  grid-template-columns: 1fr .58fr !important;
  grid-template-rows: 372px auto !important;
  gap: 16px !important;
  border-radius: 44px !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.12), transparent 28%),
    radial-gradient(circle at 86% 8%, rgba(93,231,255,.12), transparent 34%),
    linear-gradient(145deg, rgba(11,26,45,.72), rgba(5,13,24,.52) 58%, rgba(255,255,255,.045)) !important;
  box-shadow:
    0 58px 150px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.13),
    inset 0 -1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter: blur(22px) saturate(1.2) !important;
  isolation: isolate !important;
  perspective: none !important;
  transform: none !important;
}

body.vpl-home .vpl-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  border: 0 !important;
  background:
    linear-gradient(130deg, rgba(255,255,255,.14), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 12% 0%, rgba(93,231,255,.16), transparent 32%) !important;
  box-shadow: none !important;
  transform: none !important;
  pointer-events: none !important;
}

body.vpl-home .vpl-orb {
  position: absolute !important;
  z-index: -1 !important;
  width: 270px !important;
  height: 270px !important;
  right: -46px !important;
  top: -54px !important;
  opacity: .52 !important;
  filter: blur(.2px) saturate(1.1) !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.58), rgba(255,255,255,.12) 17%, transparent 32%),
    radial-gradient(circle at 64% 67%, rgba(216,244,255,.36), transparent 20%),
    linear-gradient(135deg, rgba(33,72,120,.88), rgba(9,26,55,.82) 64%, rgba(84,124,169,.48)) !important;
  box-shadow: 0 0 110px rgba(93,231,255,.20), 0 42px 100px rgba(0,0,0,.28) !important;
}

body.vpl-home .vpl-visual-card,
body.vpl-home .vpl-float-panel {
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  animation: none !important;
}

body.vpl-home .vpl-visual-card {
  overflow: hidden !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.07) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: 0 32px 90px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) !important;
}

body.vpl-home .vpl-visual-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(1.03) contrast(1.04) brightness(.92) !important;
}

body.vpl-home .vpl-visual-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), transparent 34%),
    linear-gradient(to top, rgba(4,9,16,.52), transparent 58%) !important;
  pointer-events: none !important;
}

body.vpl-home .vpl-visual-card-main {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  min-height: 372px !important;
  border-radius: 34px !important;
}

body.vpl-home .vpl-visual-card-small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  min-height: 170px !important;
  border-radius: 28px !important;
}

body.vpl-home .vpl-float-panel {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 170px !important;
  padding: 18px !important;
  border-radius: 28px !important;
  border: 1px solid rgba(148,199,232,.18) !important;
  color: #f8fbff !important;
  background: linear-gradient(135deg, rgba(7,18,31,.88), rgba(7,17,30,.70)) !important;
  box-shadow: 0 24px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) saturate(1.35) !important;
}

body.vpl-home .vpl-float-panel::before {
  content: "" !important;
  display: block !important;
  width: 24px !important;
  height: 2px !important;
  margin-bottom: 12px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(93,231,255,.9), rgba(255,255,255,.25)) !important;
  box-shadow: 0 0 16px rgba(93,231,255,.45) !important;
}

body.vpl-home .vpl-float-panel strong {
  display: block !important;
  color: #fff !important;
  font-size: .98rem !important;
  line-height: 1.16 !important;
  letter-spacing: -.035em !important;
}

body.vpl-home .vpl-float-panel span {
  display: block !important;
  margin-top: 8px !important;
  color: rgba(222,236,246,.72) !important;
  font-size: .82rem !important;
  line-height: 1.45 !important;
}

body.vpl-home .vpl-float-panel-a {
  grid-column: 2 !important;
  grid-row: 2 !important;
}

body.vpl-home .vpl-float-panel-b {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-height: 128px !important;
}

body.vpl-home .vpl-scroll {
  bottom: 22px !important;
  opacity: .56 !important;
}

@media (max-width: 1080px) {
  body.vpl-home .vpl-hero {
    padding-top: 112px !important;
  }

  body.vpl-home .vpl-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 38px !important;
  }

  body.vpl-home .vpl-title {
    max-width: 10ch !important;
    font-size: clamp(3.6rem, 15vw, 7rem) !important;
  }

  body.vpl-home .vpl-visual {
    width: min(650px, 100%) !important;
    margin: 2px auto 0 !important;
  }
}

@media (max-width: 640px) {
  .vp-subtitle {
    margin-top: 22px !important;
    transform: translateY(10px) !important;
  }

  body.vpl-home .vpl-hero {
    padding-top: 96px !important;
    padding-bottom: 46px !important;
  }

  body.vpl-home .vpl-title {
    font-size: clamp(3.1rem, 18vw, 5.2rem) !important;
    line-height: .84 !important;
  }

  body.vpl-home .vpl-lead {
    font-size: .98rem !important;
    line-height: 1.65 !important;
  }

  body.vpl-home .vpl-actions {
    gap: 10px !important;
  }

  body.vpl-home .vpl-button {
    min-height: 52px !important;
    padding-inline: 18px !important;
  }

  body.vpl-home .vpl-proof-row {
    gap: 8px !important;
  }

  body.vpl-home .vpl-proof {
    padding: 8px 10px !important;
    font-size: .82rem !important;
  }

  body.vpl-home .vpl-visual {
    grid-template-columns: 1fr !important;
    grid-template-rows: 270px 145px auto auto !important;
    gap: 12px !important;
    padding: 12px !important;
    border-radius: 34px !important;
    max-width: 460px !important;
  }

  body.vpl-home .vpl-visual-card-main {
    min-height: 270px !important;
    border-radius: 26px !important;
  }

  body.vpl-home .vpl-visual-card-small {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-height: 145px !important;
    border-radius: 24px !important;
  }

  body.vpl-home .vpl-float-panel-a,
  body.vpl-home .vpl-float-panel-b {
    grid-column: 1 !important;
    min-height: auto !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  body.vpl-home .vpl-float-panel-a {
    grid-row: 3 !important;
  }

  body.vpl-home .vpl-float-panel-b {
    grid-row: 4 !important;
  }

  body.vpl-home .vpl-orb {
    width: 210px !important;
    height: 210px !important;
    right: -58px !important;
    top: -34px !important;
    opacity: .45 !important;
  }

  body.vpl-home .vpl-float-panel strong {
    font-size: .92rem !important;
  }

  body.vpl-home .vpl-float-panel span {
    font-size: .78rem !important;
  }
}

/* =========================================================
   V21 — Correctifs audit visuel : nav compacte, sections recalées,
   schéma sans superposition, light UI plus premium, photos éditoriales
   ========================================================= */

:root {
  --vpl-nav-offset: 92px;
}

/* Header sticky moins massif : plus fin, moins opaque, moins haut. */
.vpl-nav {
  top: 10px !important;
  width: min(1180px, calc(100% - 36px)) !important;
  min-height: 56px !important;
  padding: 6px 8px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  background: rgba(5, 10, 18, .34) !important;
  border-color: rgba(255,255,255,.13) !important;
  box-shadow:
    0 14px 46px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(18px) saturate(1.25) !important;
  transition:
    top .28s ease,
    opacity .28s ease,
    background .28s ease,
    box-shadow .28s ease,
    transform .28s ease !important;
}

html.vpl-scrolled .vpl-nav {
  top: 8px !important;
  opacity: .94 !important;
  background: rgba(5, 10, 18, .28) !important;
  box-shadow:
    0 10px 34px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
}

.vpl-brand {
  gap: 9px !important;
}

.vpl-brand img {
  width: 38px !important;
  height: 38px !important;
  padding: 5px !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.18) !important;
}

.vpl-brand b {
  font-size: .9rem !important;
  letter-spacing: -.035em !important;
}

.vpl-brand span {
  display: none !important;
}

.vpl-menu {
  gap: 1px !important;
}

.vpl-menu a,
.vpl-nav-ghost {
  padding: 9px 9px !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,.70) !important;
}

.vpl-menu a:hover,
.vpl-menu a.active {
  background: rgba(255,255,255,.075) !important;
}

.vpl-nav-cta {
  min-height: 42px !important;
  padding: 0 16px !important;
  font-size: .83rem !important;
  box-shadow: 0 12px 32px rgba(126,166,208,.14), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

/* Le contenu a de l'air sans passer sous le header. */
.vpl-hero,
.vpl-inner-hero,
.vpl-section,
.vpl-section-dark,
.vpl-honeycomb-section,
.vpl-constellation-section,
.vpl-final {
  scroll-margin-top: var(--vpl-nav-offset) !important;
}

.vpl-hero,
.vpl-inner-hero {
  padding-top: clamp(104px, 12vh, 134px) !important;
}

body.vpl-home .vpl-hero {
  padding-top: clamp(108px, 12vh, 138px) !important;
}

.vpl-section {
  padding: clamp(76px, 8vw, 102px) 0 !important;
}

.vpl-section-head {
  margin-bottom: 28px !important;
}

.vpl-sticky {
  top: 92px !important;
}

/* Sections claires : fond plus net, contraste plus premium. */
.vpl-light,
.vpl-constellation-section,
.vpl-honeycomb-section,
.vpl-premium-carousel {
  background:
    radial-gradient(circle at 82% 14%, rgba(47,127,202,.13), transparent 22%),
    radial-gradient(circle at 14% 72%, rgba(255,255,255,.95), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
}

.vpl-light::before,
.vpl-constellation-section::before,
.vpl-honeycomb-section::before {
  opacity: .32 !important;
}

.vpl-light .vpl-section-title,
.vpl-constellation-head h2,
.vpl-honeycomb-section .vpl-section-title {
  color: #06101f !important;
  text-shadow: none !important;
}

.vpl-light .vpl-section-copy,
.vpl-constellation-head p,
.vpl-honeycomb-section .vpl-section-copy {
  color: #43536a !important;
}

.vpl-light .vpl-section-kicker,
.vpl-honeycomb-section .vpl-section-kicker,
.vpl-constellation-section .vpl-section-kicker {
  color: #f8fbff !important;
  background: linear-gradient(135deg, #07111f, #17395f 68%, #2f7fca) !important;
  box-shadow: 0 14px 34px rgba(47,127,202,.16) !important;
}

.vpl-card,
.vpl-sheen-card,
.vpl-hex,
.vpl-carousel-card {
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,1), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.98), rgba(235,243,251,.94)) !important;
  border-color: rgba(7,17,31,.09) !important;
  box-shadow:
    0 24px 70px rgba(7,17,31,.10),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

.vpl-card-num,
.vpl-step b,
.vpl-hex::before {
  color: #fff !important;
}

.vpl-light .vpl-button-secondary,
.vpl-honeycomb-section .vpl-button-secondary,
.vpl-constellation-section .vpl-button-secondary {
  color: #07111f !important;
  border-color: rgba(7,17,31,.14) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 30px rgba(7,17,31,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}

.vpl-tag {
  color: #fff !important;
  background: linear-gradient(135deg, #07111f, #2f7fca) !important;
  box-shadow: 0 14px 34px rgba(47,127,202,.18) !important;
}

/* Schéma central : suppression du chevauchement texte/lignes/cartes. */
.vpl-constellation-section {
  padding: clamp(78px, 8vw, 108px) 0 !important;
}

.vpl-constellation-head {
  margin-bottom: 26px !important;
}

.vpl-constellation-head h2 {
  max-width: 12.5ch !important;
  font-size: clamp(2.55rem, 5vw, 5.6rem) !important;
  line-height: .95 !important;
}

.vpl-constellation-stage {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, .86fr) minmax(340px, 1.12fr) minmax(0, .86fr) !important;
  grid-template-areas:
    "n1 core n2"
    "n3 core n4"
    "n5 n5 n5" !important;
  gap: 18px !important;
  padding: clamp(20px, 3vw, 32px) !important;
  overflow: visible !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(47,127,202,.10), transparent 34%),
    linear-gradient(150deg, rgba(255,255,255,.88), rgba(235,244,252,.78)) !important;
  border-color: rgba(255,255,255,.92) !important;
  box-shadow:
    0 24px 80px rgba(7,17,31,.10),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.vpl-constellation-links {
  display: none !important;
}

.vpl-constellation-core,
.vpl-constellation-node,
.vpl-constellation-stage .node-1,
.vpl-constellation-stage .node-2,
.vpl-constellation-stage .node-3,
.vpl-constellation-stage .node-4,
.vpl-constellation-stage .node-5 {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.vpl-constellation-core {
  grid-area: core !important;
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  z-index: 4 !important;
  padding: clamp(26px, 3vw, 36px) !important;
  border-radius: 32px !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(255,255,255,1), transparent 34%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(231,241,250,.96)) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 30px 86px rgba(7,17,31,.14),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

.vpl-constellation-core h3 {
  max-width: 11ch !important;
  font-size: clamp(2rem, 3.35vw, 3.65rem) !important;
  line-height: .95 !important;
}

.vpl-constellation-core p {
  color: #43536a !important;
  line-height: 1.64 !important;
}

.vpl-constellation-node {
  min-height: 214px !important;
  z-index: 3 !important;
  padding: 20px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,1), transparent 30%),
    linear-gradient(150deg, rgba(255,255,255,.97), rgba(232,242,251,.92)) !important;
  border: 1px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 20px 54px rgba(7,17,31,.09),
    inset 0 1px 0 rgba(255,255,255,.94) !important;
}

.vpl-constellation-node * {
  position: relative !important;
  z-index: 2 !important;
}

.vpl-constellation-node h4 {
  font-size: clamp(1.28rem, 1.7vw, 1.62rem) !important;
  letter-spacing: -.045em !important;
}

.vpl-constellation-node p {
  color: #4a5b70 !important;
  font-size: .92rem !important;
  line-height: 1.55 !important;
}

.vpl-constellation-node-num {
  width: 44px !important;
  height: 44px !important;
  margin-bottom: 14px !important;
  border-radius: 15px !important;
}

.vpl-constellation-stage .node-1 { grid-area: n1 !important; }
.vpl-constellation-stage .node-2 { grid-area: n2 !important; }
.vpl-constellation-stage .node-3 { grid-area: n3 !important; }
.vpl-constellation-stage .node-4 { grid-area: n4 !important; }
.vpl-constellation-stage .node-5 {
  grid-area: n5 !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  align-items: center !important;
  column-gap: 18px !important;
}

.vpl-constellation-stage .node-5 .vpl-constellation-node-num {
  margin-bottom: 0 !important;
}

.vpl-constellation-stage .node-5 strong,
.vpl-constellation-stage .node-5 h4,
.vpl-constellation-stage .node-5 p {
  grid-column: 2 !important;
}

/* Photos : traitement plus éditorial et moins “image posée”. */
.vpl-image-grid {
  gap: clamp(16px, 2vw, 24px) !important;
}

.vpl-image-card {
  min-height: clamp(390px, 42vw, 500px) !important;
  border-radius: 34px !important;
  border: 1px solid rgba(255,255,255,.32) !important;
  box-shadow:
    0 30px 90px rgba(7,17,31,.18),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

.vpl-image-card.small {
  min-height: clamp(230px, 20vw, 270px) !important;
}

.vpl-image-card img {
  object-position: center 38% !important;
  filter: saturate(1.02) contrast(1.04) brightness(.90) !important;
}

.vpl-image-grid > .vpl-image-card:first-child img {
  object-position: center 30% !important;
}

.vpl-image-grid > div .vpl-image-card:first-child img {
  object-position: center 36% !important;
}

.vpl-image-grid > div .vpl-image-card:last-child img {
  object-position: center 26% !important;
}

.vpl-image-content {
  padding: clamp(22px, 3vw, 32px) !important;
}

.vpl-image-card h3 {
  max-width: 11ch !important;
  font-size: clamp(2rem, 3.55vw, 4.05rem) !important;
  line-height: .92 !important;
}

.vpl-image-card.small h3 {
  font-size: clamp(1.55rem, 2.2vw, 2.45rem) !important;
}

/* Ruban décoratif moins envahissant sur les sections blanches. */
.vpl-scroll-ribbon.is-on-light {
  opacity: .18 !important;
  filter: blur(.75px) saturate(.72) !important;
}

.vpl-ribbon-progress {
  stroke-width: 34 !important;
}

@media (max-width: 1180px) {
  .vpl-menu a[href="/faq.html"],
  .vpl-menu a[href="/contact.html"] {
    display: none !important;
  }
}

@media (max-width: 1080px) {
  :root { --vpl-nav-offset: 82px; }

  .vpl-nav {
    top: 10px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    transform: none !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    max-height: 62px !important;
    overflow: visible !important;
    border-radius: 999px !important;
    padding: 7px !important;
  }

  .vpl-menu {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  .vpl-menu a,
  .vpl-nav-ghost {
    padding: 8px 8px !important;
    font-size: .76rem !important;
  }

  .vpl-nav-cta {
    min-height: 40px !important;
    padding-inline: 13px !important;
  }

  .vpl-hero,
  .vpl-inner-hero,
  body.vpl-home .vpl-hero {
    padding-top: 92px !important;
  }

  .vpl-scroll-ribbon {
    top: 76px !important;
    height: calc(100vh - 76px) !important;
  }

  .vpl-constellation-stage {
    grid-template-columns: 1fr 1fr !important;
    grid-template-areas:
      "core core"
      "n1 n2"
      "n3 n4"
      "n5 n5" !important;
  }
}

@media (max-width: 760px) {
  :root { --vpl-nav-offset: 76px; }

  .vpl-nav {
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
    min-height: 54px !important;
    max-height: 58px !important;
  }

  .vpl-menu {
    display: none !important;
  }

  .vpl-brand img {
    width: 36px !important;
    height: 36px !important;
  }

  .vpl-brand b {
    font-size: .82rem !important;
  }

  .vpl-nav-cta {
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: .78rem !important;
  }

  .vpl-hero,
  .vpl-inner-hero,
  body.vpl-home .vpl-hero {
    padding-top: 82px !important;
  }

  .vpl-section,
  .vpl-constellation-section,
  .vpl-honeycomb-section {
    padding: 66px 0 !important;
  }

  .vpl-constellation-stage {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "core"
      "n1"
      "n2"
      "n3"
      "n4"
      "n5" !important;
    padding: 16px !important;
    border-radius: 28px !important;
  }

  .vpl-constellation-core,
  .vpl-constellation-node {
    border-radius: 22px !important;
    min-height: auto !important;
  }

  .vpl-constellation-stage .node-5 {
    grid-template-columns: 1fr !important;
  }

  .vpl-constellation-stage .node-5 strong,
  .vpl-constellation-stage .node-5 h4,
  .vpl-constellation-stage .node-5 p {
    grid-column: auto !important;
  }

  .vpl-constellation-stage .node-5 .vpl-constellation-node-num {
    margin-bottom: 14px !important;
  }
}

/* =========================================================
   V22 — optimisation mobile rapide
   Header plus discret, hero compact, cartes/images recalées.
   ========================================================= */
@media (max-width: 900px) {
  html { scroll-padding-top: 76px !important; }
  body { overflow-x: hidden !important; }
  .vpl-canvas, .vpl-scroll-ribbon { display: none !important; }
  .vpl-noise { opacity: .035 !important; }
  .vpl-container { width: min(100% - 28px, 680px) !important; }
  .vpl-section-head, .vpl-section-head.center, .vpl-constellation-head {
    max-width: none !important;
    text-align: left !important;
    margin-bottom: 22px !important;
  }
  .vpl-section-title, .vpl-constellation-head h2, .vpl-honeycomb-section .vpl-section-title {
    max-width: 11ch !important;
    font-size: clamp(2.25rem, 12vw, 4.2rem) !important;
    line-height: .92 !important;
    letter-spacing: -.075em !important;
  }
  .vpl-section-copy, .vpl-constellation-head p, .vpl-honeycomb-section .vpl-section-copy {
    max-width: 58ch !important;
    font-size: .98rem !important;
    line-height: 1.62 !important;
  }
  .vpl-card-grid, .vpl-steps, .vpl-image-grid, .vpl-premium-grid, .vpl-carousel-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .vpl-sticky { position: relative !important; top: auto !important; }
}

@media (max-width: 760px) {
  :root { --vpl-nav-offset: 68px; --vp-radius: 24px; }
  .vpl-page {
    background:
      radial-gradient(circle at 50% 0%, rgba(93,231,255,.13), transparent 30%),
      linear-gradient(180deg, #05070c 0%, #0a1020 38%, #f7fbff 38%, #f7fbff 100%) !important;
  }

  .vpl-nav {
    top: 7px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-height: 50px !important;
    max-height: 50px !important;
    padding: 5px 6px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    border-radius: 18px !important;
    background: rgba(5,10,18,.62) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(16px) saturate(1.2) !important;
  }
  html.vpl-scrolled .vpl-nav { top: 6px !important; opacity: .92 !important; background: rgba(5,10,18,.54) !important; }
  .vpl-brand { gap: 8px !important; overflow: hidden !important; }
  .vpl-brand img { width: 34px !important; height: 34px !important; padding: 4px !important; flex: 0 0 auto !important; }
  .vpl-brand b { max-width: 42vw !important; overflow: hidden !important; text-overflow: ellipsis !important; font-size: .84rem !important; line-height: .95 !important; }
  .vpl-brand span, .vpl-menu, .vpl-nav-ghost { display: none !important; }
  .vpl-nav-cta {
    min-height: 38px !important;
    max-width: 42vw !important;
    padding: 0 12px !important;
    font-size: .76rem !important;
    letter-spacing: -.035em !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-shadow: 0 10px 24px rgba(93,231,255,.13), inset 0 1px 0 rgba(255,255,255,.86) !important;
  }

  .vpl-hero, .vpl-inner-hero, body.vpl-home .vpl-hero {
    min-height: auto !important;
    padding-top: 78px !important;
    padding-bottom: 42px !important;
  }
  body.vpl-home .vpl-hero-grid, .vpl-hero-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
  body.vpl-home .vpl-eyebrow, .vpl-eyebrow {
    max-width: 100% !important;
    padding: 8px 10px !important;
    font-size: .76rem !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
  body.vpl-home .vpl-title, .vpl-title {
    max-width: 9.6ch !important;
    margin-top: 16px !important;
    font-size: clamp(3rem, 18vw, 5rem) !important;
    line-height: .84 !important;
    letter-spacing: -.085em !important;
  }
  body.vpl-home .vpl-lead, .vpl-lead {
    max-width: none !important;
    margin-top: 18px !important;
    font-size: .98rem !important;
    line-height: 1.58 !important;
  }
  body.vpl-home .vpl-actions, .vpl-actions { display: grid !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 22px !important; }
  body.vpl-home .vpl-button, .vpl-button {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    font-size: .92rem !important;
  }
  body.vpl-home .vpl-proof-row, .vpl-proof-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-top: 18px !important; }
  body.vpl-home .vpl-proof, .vpl-proof {
    width: 100% !important;
    min-height: 40px !important;
    padding: 8px 9px !important;
    justify-content: flex-start !important;
    font-size: .75rem !important;
    line-height: 1.18 !important;
    border-radius: 14px !important;
  }

  body.vpl-home .vpl-visual, .vpl-visual {
    width: 100% !important;
    max-width: 520px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 8% 0%, rgba(255,255,255,.13), transparent 28%),
      radial-gradient(circle at 95% 4%, rgba(93,231,255,.14), transparent 32%),
      linear-gradient(145deg, rgba(11,26,45,.82), rgba(5,13,24,.70)) !important;
    box-shadow: 0 28px 78px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  body.vpl-home .vpl-visual::before, .vpl-visual::before { display: none !important; }
  body.vpl-home .vpl-orb, .vpl-orb { width: 180px !important; height: 180px !important; right: -64px !important; top: -64px !important; opacity: .36 !important; pointer-events: none !important; }
  body.vpl-home .vpl-visual-card, body.vpl-home .vpl-float-panel, .vpl-visual-card, .vpl-float-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    animation: none !important;
  }
  body.vpl-home .vpl-visual-card-main, .vpl-visual-card-main { grid-column: 1 !important; grid-row: auto !important; min-height: 0 !important; aspect-ratio: 1.15 / 1 !important; border-radius: 22px !important; }
  body.vpl-home .vpl-visual-card-small, .vpl-visual-card-small { grid-column: 1 !important; grid-row: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9 !important; border-radius: 20px !important; }
  body.vpl-home .vpl-visual-card img, .vpl-visual-card img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center 36% !important; }
  body.vpl-home .vpl-float-panel, .vpl-float-panel {
    min-height: auto !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, rgba(7,18,31,.92), rgba(9,26,45,.78)) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
  }
  body.vpl-home .vpl-float-panel::before, .vpl-float-panel::before { width: 22px !important; margin-bottom: 10px !important; }
  body.vpl-home .vpl-float-panel strong, .vpl-float-panel strong { font-size: .91rem !important; line-height: 1.16 !important; }
  body.vpl-home .vpl-float-panel span, .vpl-float-panel span { margin-top: 6px !important; font-size: .78rem !important; line-height: 1.42 !important; }
  .vpl-scroll, body.vpl-home .vpl-scroll { display: none !important; }

  .vpl-marquee { margin-top: 0 !important; height: 52px !important; opacity: .78 !important; }
  .vpl-marquee-track span { font-size: 1.05rem !important; }
  .vpl-light, .vpl-constellation-section, .vpl-honeycomb-section, .vpl-premium-carousel {
    background:
      radial-gradient(circle at 50% 0%, rgba(47,127,202,.12), transparent 26%),
      linear-gradient(180deg, #f9fcff 0%, #eef5fb 100%) !important;
  }
  .vpl-section, .vpl-section-dark, .vpl-constellation-section, .vpl-honeycomb-section, .vpl-final { padding: 54px 0 !important; scroll-margin-top: 72px !important; }
  .vpl-card, .vpl-sheen-card, .vpl-step, .vpl-hex, .vpl-carousel-card { padding: 20px !important; border-radius: 22px !important; min-height: auto !important; }
  .vpl-card h3, .vpl-step h3, .vpl-hex h3 { font-size: clamp(1.35rem, 7vw, 1.9rem) !important; line-height: 1 !important; }

  .vpl-constellation-stage {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "core" "n1" "n2" "n3" "n4" "n5" !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 26px !important;
    overflow: hidden !important;
  }
  .vpl-constellation-links { display: none !important; }
  .vpl-constellation-core, .vpl-constellation-node { width: 100% !important; max-width: none !important; min-height: auto !important; padding: 18px !important; border-radius: 20px !important; transform: none !important; }
  .vpl-constellation-core h3 { max-width: 100% !important; font-size: clamp(2rem, 11vw, 3rem) !important; line-height: .96 !important; }
  .vpl-constellation-core p, .vpl-constellation-node p { font-size: .9rem !important; line-height: 1.52 !important; }
  .vpl-constellation-core-tags { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .vpl-constellation-core-tags span { justify-content: center !important; text-align: center !important; padding: 9px 10px !important; }
  .vpl-constellation-node-num, .vpl-card-num { width: 40px !important; height: 40px !important; border-radius: 14px !important; margin-bottom: 12px !important; }
  .vpl-constellation-stage .node-5 { display: block !important; }
  .vpl-constellation-stage .node-5 strong, .vpl-constellation-stage .node-5 h4, .vpl-constellation-stage .node-5 p { grid-column: auto !important; }
  .vpl-constellation-stage .node-5 .vpl-constellation-node-num { margin-bottom: 12px !important; }

  .vpl-image-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .vpl-image-grid > div { display: grid !important; gap: 12px !important; }
  .vpl-image-card, .vpl-image-card.small { min-height: 0 !important; height: auto !important; aspect-ratio: 1.04 / 1 !important; border-radius: 24px !important; overflow: hidden !important; }
  .vpl-image-card.small { aspect-ratio: 1.28 / 1 !important; }
  .vpl-image-content { padding: 18px !important; }
  .vpl-image-card h3, .vpl-image-card.small h3 { max-width: 13ch !important; font-size: clamp(1.8rem, 10vw, 3.2rem) !important; line-height: .92 !important; }
  .vpl-image-card p { max-width: 34ch !important; font-size: .9rem !important; line-height: 1.45 !important; }
  .vpl-section-dark { background: radial-gradient(circle at 80% 0%, rgba(93,231,255,.11), transparent 30%), linear-gradient(180deg, #05070c 0%, #0b1220 100%) !important; }
  .vpl-honeycomb-shell, .vpl-honeycomb-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .vpl-honeycomb-copy { padding: 18px !important; border-radius: 22px !important; }
  .vpl-final-box { padding: 24px 18px !important; border-radius: 26px !important; }
}

@media (max-width: 480px) {
  .vpl-container { width: calc(100% - 22px) !important; }
  .vpl-brand b { max-width: 38vw !important; }
  .vpl-nav-cta { max-width: 42vw !important; font-size: 0 !important; }
  .vpl-nav-cta::after { content: "Réserver" !important; font-size: .76rem !important; }
  body.vpl-home .vpl-title, .vpl-title { font-size: clamp(2.75rem, 17vw, 4.25rem) !important; }
  body.vpl-home .vpl-proof-row, .vpl-proof-row { grid-template-columns: 1fr !important; }
  body.vpl-home .vpl-visual, .vpl-visual { border-radius: 22px !important; padding: 8px !important; }
  body.vpl-home .vpl-visual-card-main, .vpl-visual-card-main { aspect-ratio: 1 / .82 !important; border-radius: 18px !important; }
  body.vpl-home .vpl-visual-card-small, .vpl-visual-card-small, body.vpl-home .vpl-float-panel-a, .vpl-float-panel-a { display: none !important; }
  .vpl-section, .vpl-section-dark, .vpl-constellation-section, .vpl-honeycomb-section, .vpl-final { padding: 46px 0 !important; }
  .vpl-section-title, .vpl-constellation-head h2, .vpl-honeycomb-section .vpl-section-title { font-size: clamp(2rem, 12vw, 3.45rem) !important; }
  .vpl-card, .vpl-sheen-card, .vpl-step, .vpl-hex, .vpl-carousel-card, .vpl-constellation-core, .vpl-constellation-node { padding: 17px !important; border-radius: 18px !important; }
  .vpl-constellation-core-tags { grid-template-columns: 1fr !important; }
  .vpl-image-card, .vpl-image-card.small { aspect-ratio: 1 / 1.08 !important; border-radius: 20px !important; }
  .vpl-image-card.small { aspect-ratio: 1 / .92 !important; }
  .vpl-image-content { padding: 16px !important; }
  .vpl-image-card h3, .vpl-image-card.small h3 { font-size: clamp(1.65rem, 11vw, 2.75rem) !important; }
  .vp-title { font-size: clamp(2rem, 13vw, 3.4rem) !important; letter-spacing: .055em !important; }
  .vp-ecg-zone, .vp-ecg-svg { height: 190px !important; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .vpl-nav { position: absolute !important; }
  body.vpl-home .vpl-hero, .vpl-hero, .vpl-inner-hero { padding-top: 72px !important; }
  body.vpl-home .vpl-hero-grid, .vpl-hero-grid { gap: 18px !important; }
  body.vpl-home .vpl-visual, .vpl-visual { max-width: 620px !important; }
}

/* =========================================================
   V24 — Hero final: composition sombre premium + carte animée
   ========================================================= */

body.vpl-home {
  --hero-cyan: #5de7ff;
  --hero-blue: #0b9dff;
  --hero-ink: #030813;
  --hero-line: rgba(141, 202, 255, .26);
}

body.vpl-home .vpl-page {
  background:
    radial-gradient(circle at 17% 38%, rgba(93,231,255,.11), transparent 28%),
    radial-gradient(circle at 82% 31%, rgba(28,125,255,.18), transparent 31%),
    radial-gradient(circle at 52% 5%, rgba(255,255,255,.06), transparent 34%),
    linear-gradient(180deg, #02060d 0%, #071322 48%, #f4f8fc 48%, #f4f8fc 100%) !important;
}

body.vpl-home .vpl-nav {
  width: min(1280px, calc(100% - 56px)) !important;
  top: 18px !important;
  min-height: 58px !important;
  padding: 6px 8px !important;
  background: rgba(2, 8, 18, .42) !important;
  border: 1px solid rgba(180, 220, 255, .09) !important;
  box-shadow: 0 18px 54px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
}

html.vpl-scrolled body.vpl-home .vpl-nav {
  top: 10px !important;
  background: rgba(2, 8, 18, .52) !important;
}

body.vpl-home .vpl-brand img {
  width: 42px !important;
  height: 42px !important;
}

body.vpl-home .vpl-brand b {
  font-size: .98rem !important;
  letter-spacing: -.025em !important;
}

body.vpl-home .vpl-menu {
  gap: 8px !important;
}

body.vpl-home .vpl-menu a,
body.vpl-home .vpl-nav-ghost {
  padding: 10px 12px !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  color: rgba(244,249,255,.78) !important;
  border-radius: 14px !important;
}

body.vpl-home .vpl-menu a.active {
  color: #fff !important;
  background: transparent !important;
}

body.vpl-home .vpl-menu a.active::after {
  height: 3px !important;
  bottom: 4px !important;
  background: linear-gradient(90deg, transparent, var(--hero-cyan), var(--hero-blue), transparent) !important;
  box-shadow: 0 0 14px rgba(93,231,255,.68) !important;
}

body.vpl-home .vpl-nav-cta {
  min-height: 46px !important;
  padding: 0 22px !important;
  gap: 12px !important;
  color: #06111c !important;
  background: linear-gradient(135deg, #ffffff 0%, #e9f6ff 58%, #c4e9ff 100%) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  box-shadow: 0 16px 42px rgba(93,231,255,.16), inset 0 1px 0 rgba(255,255,255,.95) !important;
}

body.vpl-home .vpl-hero,
body.vpl-home .vpl-inner-hero {
  min-height: 100svh !important;
  padding: clamp(118px, 13vh, 150px) 0 clamp(70px, 7vh, 96px) !important;
  overflow: hidden !important;
}

body.vpl-home .vpl-hero > .vpl-container {
  width: min(1300px, calc(100% - 76px)) !important;
}

body.vpl-home .vpl-hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle at 9% 70%, rgba(93,231,255,.13), transparent 24%),
    radial-gradient(circle at 51% 45%, rgba(14,113,211,.13), transparent 31%),
    radial-gradient(circle at 95% 12%, rgba(93,231,255,.16), transparent 26%),
    linear-gradient(115deg, rgba(255,255,255,.04), rgba(255,255,255,0) 45%) !important;
}

body.vpl-home .vpl-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .18 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
  background-size: 76px 76px !important;
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.84) 48%, rgba(0,0,0,.12) 100%) !important;
}

body.vpl-home .vpl-hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(520px, 1fr) !important;
  gap: clamp(42px, 5vw, 74px) !important;
  align-items: center !important;
}

body.vpl-home .vpl-hero-copy {
  position: relative !important;
  z-index: 3 !important;
  max-width: 660px !important;
}

body.vpl-home .vpl-eyebrow {
  gap: 10px !important;
  padding: 9px 14px 9px 12px !important;
  border-radius: 999px !important;
  color: rgba(249,252,255,.88) !important;
  border: 1px solid rgba(129,202,255,.30) !important;
  background: linear-gradient(135deg, rgba(93,231,255,.14), rgba(255,255,255,.045)) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.13) !important;
}

body.vpl-home .vpl-eyebrow::before {
  width: 11px !important;
  height: 11px !important;
  background: #eefbff !important;
  box-shadow: 0 0 0 6px rgba(93,231,255,.12), 0 0 22px rgba(93,231,255,.82) !important;
}

body.vpl-home .vpl-eyebrow span {
  display: inline-flex !important;
  align-items: center !important;
  background: none !important;
  color: inherit !important;
  font-weight: 900 !important;
  letter-spacing: -.03em !important;
}

body.vpl-home .vpl-eyebrow span + span::before {
  content: "" !important;
  display: inline-block !important;
  width: 4px !important;
  height: 4px !important;
  margin-right: 10px !important;
  border-radius: 50% !important;
  background: rgba(186,226,255,.72) !important;
  box-shadow: 0 0 10px rgba(93,231,255,.64) !important;
}

body.vpl-home .vpl-title {
  display: block !important;
  max-width: 7.9ch !important;
  margin: 26px 0 0 !important;
  font-size: clamp(4.3rem, 7.8vw, 7.85rem) !important;
  line-height: .91 !important;
  letter-spacing: -.075em !important;
  color: #fff !important;
  text-shadow: 0 28px 90px rgba(0,0,0,.48) !important;
}

body.vpl-home .vpl-title > span,
body.vpl-home .vpl-title-line {
  display: block !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: #fff !important;
}

body.vpl-home .vpl-title .vpl-title-accent {
  background: linear-gradient(135deg, #92f5ff 0%, #54d8ff 38%, #128cff 82%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 18px 38px rgba(32,165,255,.22)) !important;
}

body.vpl-home .vpl-lead {
  max-width: 59ch !important;
  margin-top: 26px !important;
  color: rgba(235,244,252,.74) !important;
  font-size: clamp(1rem, 1.06vw, 1.12rem) !important;
  line-height: 1.75 !important;
}

body.vpl-home .vpl-actions {
  gap: 18px !important;
  margin-top: 34px !important;
}

body.vpl-home .vpl-button {
  min-width: 230px !important;
  min-height: 58px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font-size: .98rem !important;
}

body.vpl-home .vpl-button-primary {
  color: #06111c !important;
  background: linear-gradient(135deg, #ffffff 0%, #e8f7ff 58%, #bceeff 100%) !important;
  box-shadow: 0 20px 54px rgba(93,231,255,.22), 0 0 0 1px rgba(255,255,255,.48), inset 0 1px 0 rgba(255,255,255,.96) !important;
}

body.vpl-home .vpl-button-secondary {
  color: rgba(250,253,255,.94) !important;
  border: 1px solid rgba(181,220,255,.26) !important;
  background: rgba(4,12,24,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 42px rgba(0,0,0,.16) !important;
}

body.vpl-home .vpl-proof-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 610px !important;
  margin-top: 32px !important;
}

body.vpl-home .vpl-proof {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 74px !important;
  padding: 12px 13px !important;
  border-radius: 17px !important;
  color: rgba(246,251,255,.86) !important;
  background: linear-gradient(145deg, rgba(7,18,34,.72), rgba(5,13,26,.42)) !important;
  border: 1px solid rgba(151,206,255,.22) !important;
  box-shadow: 0 20px 52px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.09) !important;
}

body.vpl-home .vpl-proof::before { display: none !important; }

body.vpl-home .vpl-proof svg {
  flex: 0 0 auto !important;
  width: 25px !important;
  height: 25px !important;
  fill: none !important;
  stroke: var(--hero-cyan) !important;
  stroke-width: 1.9 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 10px rgba(93,231,255,.52)) !important;
}

body.vpl-home .vpl-proof span {
  color: inherit !important;
  font-size: .86rem !important;
  font-weight: 850 !important;
  line-height: 1.25 !important;
  letter-spacing: -.04em !important;
}

body.vpl-home .vpl-visual {
  --hero-rx: 0deg;
  --hero-ry: 0deg;
  --hero-x: 50%;
  --hero-y: 50%;
  position: relative !important;
  isolation: isolate !important;
  width: 100% !important;
  max-width: 640px !important;
  margin-left: auto !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 16px !important;
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  grid-template-rows: minmax(300px, 350px) minmax(220px, 250px) minmax(96px, auto) !important;
  gap: 14px !important;
  border-radius: 38px !important;
  border: 1px solid rgba(129,202,255,.35) !important;
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(93,231,255,.16), transparent 33%),
    linear-gradient(145deg, rgba(8,22,41,.78), rgba(3,9,19,.72) 62%, rgba(255,255,255,.045)) !important;
  box-shadow:
    0 52px 150px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.045),
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(93,231,255,.08) !important;
  backdrop-filter: blur(22px) saturate(1.24) !important;
  perspective: 1200px !important;
  transform: rotateX(var(--hero-ry)) rotateY(var(--hero-rx)) translateZ(0) !important;
  transform-style: preserve-3d !important;
  transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .45s ease !important;
}

body.vpl-home .vpl-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    linear-gradient(120deg, rgba(255,255,255,.22), transparent 20%, transparent 72%, rgba(93,231,255,.24)),
    radial-gradient(circle at 98% 10%, rgba(93,231,255,.48), transparent 9%),
    radial-gradient(circle at 0% 43%, rgba(93,231,255,.35), transparent 8%) !important;
  opacity: .72 !important;
  filter: drop-shadow(0 0 18px rgba(93,231,255,.28)) !important;
}

body.vpl-home .vpl-visual::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 5 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.10) 43%, rgba(93,231,255,.18) 48%, transparent 55%) !important;
  transform: translateX(-120%) skewX(-16deg) !important;
  animation: vplHeroSweep 6.2s cubic-bezier(.22,1,.36,1) infinite 1.2s !important;
  mix-blend-mode: screen !important;
}

body.vpl-home .vpl-visual-shine {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.vpl-home .vpl-visual-shine::before,
body.vpl-home .vpl-visual-shine::after {
  content: "" !important;
  position: absolute !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 12px #fff, 0 0 26px rgba(93,231,255,.95), 0 0 60px rgba(93,231,255,.45) !important;
}

body.vpl-home .vpl-visual-shine::before { right: -2px !important; top: 12% !important; }
body.vpl-home .vpl-visual-shine::after { left: -2px !important; top: 43% !important; }

body.vpl-home .vpl-orb {
  z-index: -1 !important;
  width: 310px !important;
  height: 310px !important;
  right: -86px !important;
  top: -64px !important;
  opacity: .48 !important;
  filter: blur(.2px) saturate(1.18) !important;
  background:
    radial-gradient(circle at 32% 23%, rgba(255,255,255,.62), rgba(255,255,255,.16) 18%, transparent 35%),
    radial-gradient(circle at 68% 70%, rgba(93,231,255,.42), transparent 25%),
    linear-gradient(135deg, rgba(31,95,155,.78), rgba(7,24,54,.82) 64%, rgba(100,158,219,.42)) !important;
  box-shadow: 0 0 120px rgba(93,231,255,.24), 0 52px 120px rgba(0,0,0,.32) !important;
}

body.vpl-home .vpl-visual-card,
body.vpl-home .vpl-float-panel {
  position: relative !important;
  inset: auto !important;
  z-index: 2 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  animation: none !important;
  transform: translate3d(var(--card-x, 0), var(--card-y, 0), 0) !important;
  transition: transform .6s cubic-bezier(.16,1,.3,1), border-color .3s ease, filter .3s ease !important;
}

body.vpl-home .vpl-visual-card {
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(159,211,255,.28) !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: 0 26px 75px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.14) !important;
  backdrop-filter: blur(16px) !important;
}

body.vpl-home .vpl-visual:hover .vpl-visual-card,
body.vpl-home .vpl-visual:hover .vpl-float-panel {
  filter: brightness(1.035) saturate(1.04) !important;
}

body.vpl-home .vpl-visual-card img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  filter: saturate(1.07) contrast(1.05) brightness(.88) !important;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), filter .45s ease !important;
}

body.vpl-home .vpl-visual:hover .vpl-visual-card img {
  transform: scale(1.035) !important;
  filter: saturate(1.1) contrast(1.07) brightness(.94) !important;
}

body.vpl-home .vpl-visual-card::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), transparent 32%),
    linear-gradient(to top, rgba(3,8,16,.54), transparent 56%) !important;
}

body.vpl-home .vpl-visual-card-main {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  border-radius: 28px !important;
}

body.vpl-home .vpl-visual-card-main img {
  object-position: center 46% !important;
}

body.vpl-home .vpl-visual-card-small {
  grid-column: 1 !important;
  grid-row: 2 !important;
  border-radius: 22px !important;
}

body.vpl-home .vpl-visual-card-small img {
  object-position: center 38% !important;
}

body.vpl-home .vpl-float-panel {
  border-radius: 22px !important;
  color: #fff !important;
  border: 1px solid rgba(151,206,255,.24) !important;
  background: linear-gradient(145deg, rgba(7,18,33,.92), rgba(3,10,22,.78)) !important;
  box-shadow: 0 26px 74px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

body.vpl-home .vpl-float-panel svg {
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  fill: none !important;
  stroke: var(--hero-cyan) !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter: drop-shadow(0 0 14px rgba(93,231,255,.5)) !important;
}

body.vpl-home .vpl-float-panel::before {
  content: "" !important;
  display: block !important;
  width: 38px !important;
  height: 3px !important;
  margin: 14px 0 16px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, var(--hero-cyan), rgba(255,255,255,.25)) !important;
  box-shadow: 0 0 18px rgba(93,231,255,.48) !important;
}

body.vpl-home .vpl-float-panel strong {
  display: block !important;
  font-size: clamp(1.05rem, 1.35vw, 1.28rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.055em !important;
  color: #fff !important;
}

body.vpl-home .vpl-float-panel span {
  display: block !important;
  margin-top: 14px !important;
  color: rgba(225,238,248,.75) !important;
  font-size: .91rem !important;
  line-height: 1.52 !important;
}

body.vpl-home .vpl-float-panel-a {
  grid-column: 2 !important;
  grid-row: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 28px !important;
}

body.vpl-home .vpl-float-panel-b {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  min-height: 100px !important;
  display: flex !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 22px 24px !important;
}

body.vpl-home .vpl-float-panel-b::before { display: none !important; }

body.vpl-home .vpl-float-panel-b svg {
  width: 54px !important;
  height: 54px !important;
}

body.vpl-home .vpl-float-panel-b span {
  margin-top: 8px !important;
}

body.vpl-home .vpl-scroll {
  display: none !important;
}

.js body.vpl-home .vpl-hero-copy,
.js body.vpl-home .vpl-visual {
  opacity: 0;
  transform: translateY(18px);
}

.js body.vpl-home .vpl-visual {
  transform: translateY(22px) rotateX(var(--hero-ry)) rotateY(var(--hero-rx));
}

.js body.vpl-home .vpl-hero.vpl-hero-mounted .vpl-hero-copy,
.js body.vpl-home .vpl-hero.vpl-hero-mounted .vpl-visual {
  opacity: 1;
  transform: translateY(0) rotateX(var(--hero-ry)) rotateY(var(--hero-rx)) !important;
  transition: opacity .85s ease, transform .95s cubic-bezier(.16,1,.3,1) !important;
}

.js body.vpl-home .vpl-hero.vpl-hero-mounted .vpl-visual {
  transition-delay: .12s !important;
}

@keyframes vplHeroSweep {
  0%, 24% { transform: translateX(-120%) skewX(-16deg); opacity: 0; }
  34% { opacity: 1; }
  52%, 100% { transform: translateX(120%) skewX(-16deg); opacity: 0; }
}

@media (min-width: 1081px) and (max-width: 1260px) {
  body.vpl-home .vpl-hero-grid {
    grid-template-columns: minmax(0, .92fr) minmax(475px, .98fr) !important;
    gap: 36px !important;
  }
  body.vpl-home .vpl-title {
    font-size: clamp(3.8rem, 7vw, 6.4rem) !important;
  }
  body.vpl-home .vpl-proof-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 500px !important;
  }
  body.vpl-home .vpl-visual {
    max-width: 570px !important;
    grid-template-rows: minmax(270px, 310px) minmax(190px, 220px) minmax(90px, auto) !important;
  }
  body.vpl-home .vpl-float-panel-a { padding: 22px !important; }
}

@media (max-width: 1080px) {
  body.vpl-home .vpl-hero > .vpl-container {
    width: min(720px, calc(100% - 42px)) !important;
  }
  body.vpl-home .vpl-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  body.vpl-home .vpl-hero-copy {
    max-width: 720px !important;
  }
  body.vpl-home .vpl-title {
    max-width: 9ch !important;
    font-size: clamp(3.8rem, 13vw, 6.6rem) !important;
  }
  body.vpl-home .vpl-visual {
    margin: 0 auto !important;
    max-width: 650px !important;
  }
}

@media (max-width: 760px) {
  body.vpl-home .vpl-page {
    background:
      radial-gradient(circle at 50% 0%, rgba(93,231,255,.13), transparent 30%),
      radial-gradient(circle at 100% 18%, rgba(18,140,255,.13), transparent 24%),
      linear-gradient(180deg, #02060d 0%, #071322 44%, #f7fbff 44%, #f7fbff 100%) !important;
  }
  body.vpl-home .vpl-nav {
    top: 7px !important;
    width: auto !important;
    min-height: 50px !important;
    max-height: 50px !important;
    background: rgba(3,10,22,.64) !important;
  }
  body.vpl-home .vpl-hero,
  body.vpl-home .vpl-inner-hero {
    padding-top: 82px !important;
    padding-bottom: 42px !important;
  }
  body.vpl-home .vpl-hero > .vpl-container {
    width: calc(100% - 24px) !important;
  }
  body.vpl-home .vpl-eyebrow {
    width: 100% !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 10px !important;
    font-size: .72rem !important;
    white-space: normal !important;
    text-align: center !important;
  }
  body.vpl-home .vpl-eyebrow span + span::before {
    margin-right: 7px !important;
  }
  body.vpl-home .vpl-title {
    max-width: 8.4ch !important;
    margin-top: 18px !important;
    font-size: clamp(3rem, 18vw, 4.9rem) !important;
    line-height: .90 !important;
    letter-spacing: -.075em !important;
  }
  body.vpl-home .vpl-lead {
    margin-top: 20px !important;
    font-size: .98rem !important;
    line-height: 1.6 !important;
  }
  body.vpl-home .vpl-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }
  body.vpl-home .vpl-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    border-radius: 16px !important;
  }
  body.vpl-home .vpl-proof-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 9px !important;
    margin-top: 20px !important;
  }
  body.vpl-home .vpl-proof {
    min-height: 54px !important;
    padding: 10px !important;
    border-radius: 15px !important;
  }
  body.vpl-home .vpl-proof svg {
    width: 22px !important;
    height: 22px !important;
  }
  body.vpl-home .vpl-proof span {
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }
  body.vpl-home .vpl-visual {
    max-width: 520px !important;
    padding: 10px !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
    border-radius: 28px !important;
    transform: none !important;
  }
  .js body.vpl-home .vpl-hero.vpl-hero-mounted .vpl-visual {
    transform: translateY(0) !important;
  }
  body.vpl-home .vpl-visual::after {
    display: none !important;
  }
  body.vpl-home .vpl-visual-card-main,
  body.vpl-home .vpl-visual-card-small,
  body.vpl-home .vpl-float-panel-a,
  body.vpl-home .vpl-float-panel-b {
    grid-column: 1 !important;
    grid-row: auto !important;
    display: flex !important;
  }
  body.vpl-home .vpl-visual-card-main {
    aspect-ratio: 1.22 / .84 !important;
    border-radius: 20px !important;
  }
  body.vpl-home .vpl-visual-card-small {
    aspect-ratio: 16 / 9 !important;
    border-radius: 18px !important;
  }
  body.vpl-home .vpl-float-panel-a {
    padding: 18px !important;
    border-radius: 18px !important;
  }
  body.vpl-home .vpl-float-panel-a svg {
    width: 32px !important;
    height: 32px !important;
  }
  body.vpl-home .vpl-float-panel-a strong,
  body.vpl-home .vpl-float-panel-b strong {
    font-size: 1.04rem !important;
  }
  body.vpl-home .vpl-float-panel-a span,
  body.vpl-home .vpl-float-panel-b span {
    font-size: .82rem !important;
  }
  body.vpl-home .vpl-float-panel-b {
    padding: 18px !important;
    gap: 14px !important;
    align-items: flex-start !important;
    border-radius: 18px !important;
  }
  body.vpl-home .vpl-float-panel-b svg {
    width: 40px !important;
    height: 40px !important;
  }
}

@media (max-width: 480px) {
  body.vpl-home .vpl-title {
    font-size: clamp(2.7rem, 17vw, 4.1rem) !important;
  }
  body.vpl-home .vpl-proof-row {
    grid-template-columns: 1fr !important;
  }
  body.vpl-home .vpl-visual-card-small,
  body.vpl-home .vpl-float-panel-a {
    display: flex !important;
  }
  body.vpl-home .vpl-visual-card-main {
    aspect-ratio: 1 / .82 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vpl-home .vpl-visual::after,
  body.vpl-home .vpl-orb {
    animation: none !important;
  }
  .js body.vpl-home .vpl-hero-copy,
  .js body.vpl-home .vpl-visual {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* V25 — Hero card: reprise animation "wow" + recalage du texte */
@property --hero-float {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

body.vpl-home .vpl-hero-grid {
  grid-template-columns: minmax(0, 540px) minmax(560px, 1fr) !important;
  gap: clamp(34px, 4.2vw, 58px) !important;
}

body.vpl-home .vpl-hero-copy {
  max-width: 540px !important;
  min-width: 0 !important;
}

body.vpl-home .vpl-title {
  max-width: 8.15ch !important;
  font-size: clamp(3.85rem, 6.8vw, 7.05rem) !important;
  line-height: .93 !important;
  letter-spacing: -.072em !important;
}

body.vpl-home .vpl-lead {
  max-width: 52ch !important;
  font-size: clamp(.98rem, 1vw, 1.08rem) !important;
}

body.vpl-home .vpl-proof-row {
  max-width: 560px !important;
}

body.vpl-home .vpl-visual {
  --hero-float: 0px;
  overflow: hidden !important;
  max-width: 650px !important;
  grid-template-rows: minmax(300px, 360px) minmax(216px, 252px) minmax(96px, auto) !important;
  border-radius: 42px !important;
  border-color: rgba(158, 224, 255, .28) !important;
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(93,231,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(7,17,31,.82), rgba(4,12,23,.91) 64%, rgba(4,18,34,.84)) !important;
  box-shadow:
    0 40px 120px rgba(0, 0, 0, .50),
    0 0 0 1px rgba(255,255,255,.045) inset,
    0 0 90px rgba(58,190,255,.16),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
  transform: translate3d(0, var(--hero-float), 0) rotateY(var(--hero-rx)) rotateX(var(--hero-ry)) !important;
  animation: vplHeroCardFloatWow 5.8s ease-in-out infinite !important;
}

.js body.vpl-home .vpl-hero.vpl-hero-mounted .vpl-visual {
  transform: translate3d(0, var(--hero-float), 0) rotateY(var(--hero-rx)) rotateX(var(--hero-ry)) !important;
  animation: vplHeroCardFloatWow 5.8s ease-in-out .75s infinite !important;
}

body.vpl-home .vpl-visual::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 8 !important;
  padding: 1px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 70deg,
    rgba(88,216,255,.95) 104deg,
    transparent 136deg,
    transparent 238deg,
    rgba(255,255,255,.42) 278deg,
    transparent 312deg,
    transparent 360deg
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: .78 !important;
  filter: drop-shadow(0 0 20px rgba(93,231,255,.34)) !important;
  animation: vplSpinBorderWow 4.2s linear infinite !important;
}

body.vpl-home .vpl-visual::after {
  display: none !important;
}

body.vpl-home .vpl-card-aura {
  position: absolute !important;
  inset: 44px 10px 10px !important;
  z-index: -2 !important;
  border-radius: 46px !important;
  background: radial-gradient(circle, rgba(70,202,255,.30), transparent 64%) !important;
  filter: blur(44px) !important;
  opacity: .52 !important;
  animation: vplAuraPulseWow 3.2s ease-in-out infinite !important;
  pointer-events: none !important;
}

body.vpl-home .vpl-card-sweep {
  position: absolute !important;
  z-index: 7 !important;
  inset: -20% auto -20% 0 !important;
  width: 38% !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent) !important;
  transform: translateX(-250%) rotate(18deg) !important;
  filter: blur(2px) !important;
  opacity: 0 !important;
  animation: vplShineSweepWow 3.8s cubic-bezier(.16,1,.3,1) infinite !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

body.vpl-home .vpl-card-scan {
  position: absolute !important;
  z-index: 6 !important;
  left: 0 !important;
  right: 0 !important;
  top: -20% !important;
  height: 90px !important;
  background: linear-gradient(to bottom, transparent, rgba(91,219,255,.20), transparent) !important;
  opacity: 0 !important;
  animation: vplScanLineWow 3.5s ease-in-out infinite .35s !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

body.vpl-home .vpl-card-particle {
  position: absolute !important;
  z-index: 7 !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: #9df0ff !important;
  box-shadow: 0 0 18px #62dfff !important;
  opacity: 0 !important;
  animation: vplParticleRiseWow 2.8s ease-out infinite !important;
  pointer-events: none !important;
}

body.vpl-home .vpl-card-particle:nth-of-type(1) { left: 12%; top: 76%; animation-delay: .1s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(2) { left: 24%; top: 64%; animation-delay: .55s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(3) { left: 37%; top: 78%; animation-delay: .9s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(4) { left: 51%; top: 68%; animation-delay: .25s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(5) { left: 72%; top: 74%; animation-delay: .72s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(6) { left: 86%; top: 61%; animation-delay: 1.1s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(7) { left: 65%; top: 28%; animation-delay: 1.35s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(8) { left: 18%; top: 32%; animation-delay: 1.6s !important; }

body.vpl-home .vpl-orb {
  animation: vplOrbitWow 7s ease-in-out infinite !important;
}

body.vpl-home .vpl-orb-secondary {
  width: 116px !important;
  height: 116px !important;
  left: -68px !important;
  right: auto !important;
  top: auto !important;
  bottom: 70px !important;
  opacity: .46 !important;
  animation-delay: -2.2s !important;
}

body.vpl-home .vpl-visual-card,
body.vpl-home .vpl-float-panel {
  z-index: 3 !important;
}

body.vpl-home .vpl-visual-card-main img {
  animation: vplVisualZoomWow 7s ease-in-out infinite !important;
}

body.vpl-home .vpl-visual-card-small {
  animation: vplMiniPopWow 4s ease-in-out infinite !important;
}

body.vpl-home .vpl-float-panel-a {
  padding: 26px !important;
}

body.vpl-home .vpl-float-panel-a span {
  font-size: .88rem !important;
}

@keyframes vplHeroCardFloatWow {
  0%, 100% { --hero-float: 0px; }
  50% { --hero-float: -14px; }
}

@keyframes vplAuraPulseWow {
  0%, 100% { opacity: .34; transform: scale(.94); }
  50% { opacity: .98; transform: scale(1.08); }
}

@keyframes vplSpinBorderWow {
  to { transform: rotate(360deg); }
}

@keyframes vplShineSweepWow {
  0%, 38% { transform: translateX(-250%) rotate(18deg); opacity: 0; }
  50% { opacity: 1; }
  72%, 100% { transform: translateX(430%) rotate(18deg); opacity: 0; }
}

@keyframes vplScanLineWow {
  0% { transform: translateY(-120px); opacity: 0; }
  20% { opacity: 1; }
  70% { opacity: .72; }
  100% { transform: translateY(720px); opacity: 0; }
}

@keyframes vplVisualZoomWow {
  0%, 100% { transform: scale(1); filter: saturate(1.06) contrast(1.05) brightness(.88); }
  50% { transform: scale(1.025); filter: saturate(1.16) contrast(1.07) brightness(.94); }
}

@keyframes vplMiniPopWow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes vplParticleRiseWow {
  0% { opacity: 0; transform: translateY(20px) scale(.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-90px) scale(1.25); }
}

@keyframes vplOrbitWow {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(-22px, 18px, 40px) scale(1.08); }
  66% { transform: translate3d(20px, -18px, 20px) scale(.9); }
}

@media (min-width: 1081px) and (max-width: 1260px) {
  body.vpl-home .vpl-hero-grid {
    grid-template-columns: minmax(0, 480px) minmax(500px, 1fr) !important;
    gap: 30px !important;
  }

  body.vpl-home .vpl-hero-copy {
    max-width: 480px !important;
  }

  body.vpl-home .vpl-title {
    font-size: clamp(3.45rem, 6vw, 5.9rem) !important;
  }

  body.vpl-home .vpl-lead {
    max-width: 47ch !important;
  }

  body.vpl-home .vpl-visual {
    max-width: 590px !important;
    grid-template-rows: minmax(260px, 310px) minmax(188px, 218px) minmax(90px, auto) !important;
  }
}

@media (max-width: 1080px) {
  body.vpl-home .vpl-hero-grid {
    grid-template-columns: 1fr !important;
  }

  body.vpl-home .vpl-hero-copy {
    max-width: 720px !important;
  }

  body.vpl-home .vpl-title {
    font-size: clamp(3.8rem, 13vw, 6.6rem) !important;
  }
}

@media (max-width: 760px) {
  body.vpl-home .vpl-card-sweep,
  body.vpl-home .vpl-card-scan,
  body.vpl-home .vpl-card-particle,
  body.vpl-home .vpl-orb-secondary {
    display: none !important;
  }

  body.vpl-home .vpl-visual {
    animation: none !important;
    transform: none !important;
  }

  body.vpl-home .vpl-visual-card-main img,
  body.vpl-home .vpl-visual-card-small {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.vpl-home .vpl-visual,
  body.vpl-home .vpl-card-aura,
  body.vpl-home .vpl-card-sweep,
  body.vpl-home .vpl-card-scan,
  body.vpl-home .vpl-card-particle,
  body.vpl-home .vpl-orb,
  body.vpl-home .vpl-visual-card-main img,
  body.vpl-home .vpl-visual-card-small {
    animation: none !important;
  }
}

/* =========================================================
   V26 — Hero: effet card plus fort + texte qui ne déborde plus
   ========================================================= */

body.vpl-home .vpl-hero > .vpl-container {
  width: min(1320px, calc(100% - 86px)) !important;
}

body.vpl-home .vpl-hero-grid {
  grid-template-columns: minmax(0, 520px) minmax(0, 610px) !important;
  justify-content: space-between !important;
  gap: clamp(34px, 4vw, 58px) !important;
  align-items: center !important;
}

body.vpl-home .vpl-hero-copy {
  max-width: 520px !important;
  width: 100% !important;
  overflow: visible !important;
}

body.vpl-home .vpl-title {
  max-width: 100% !important;
  width: 100% !important;
  font-size: clamp(3.95rem, 6.15vw, 6.75rem) !important;
  line-height: .91 !important;
  letter-spacing: -.078em !important;
}

body.vpl-home .vpl-title-line {
  white-space: nowrap !important;
}

body.vpl-home .vpl-lead {
  max-width: 47ch !important;
  font-size: clamp(.96rem, .96vw, 1.06rem) !important;
  line-height: 1.68 !important;
}

body.vpl-home .vpl-proof-row {
  max-width: 520px !important;
  gap: 10px !important;
}

body.vpl-home .vpl-proof {
  min-height: 66px !important;
  padding: 10px 12px !important;
}

body.vpl-home .vpl-proof span {
  font-size: .82rem !important;
}

body.vpl-home .vpl-visual {
  overflow: visible !important;
  max-width: 610px !important;
  padding: 15px !important;
  grid-template-rows: minmax(285px, 330px) minmax(205px, 235px) minmax(92px, auto) !important;
  gap: 13px !important;
  border-color: rgba(121, 214, 255, .48) !important;
  background:
    radial-gradient(circle at var(--hero-x) var(--hero-y), rgba(93,231,255,.27), transparent 34%),
    linear-gradient(135deg, rgba(7,17,31,.88), rgba(3,10,22,.94) 62%, rgba(4,22,42,.86)) !important;
  box-shadow:
    0 48px 150px rgba(0,0,0,.56),
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 0 58px rgba(93,231,255,.20),
    0 0 128px rgba(19,142,255,.14),
    inset 0 1px 0 rgba(255,255,255,.19),
    inset 0 -1px 0 rgba(93,231,255,.16) !important;
  animation: vplHeroCardFloatWowIntense 4.8s ease-in-out infinite, vplCardGlowWowIntense 3.25s ease-in-out infinite !important;
}

.js body.vpl-home .vpl-hero.vpl-hero-mounted .vpl-visual {
  animation: vplHeroCardFloatWowIntense 4.8s ease-in-out .55s infinite, vplCardGlowWowIntense 3.25s ease-in-out .4s infinite !important;
}

body.vpl-home .vpl-visual::before {
  inset: -2px !important;
  z-index: 9 !important;
  padding: 2px !important;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 58deg,
    rgba(93,231,255,.0) 70deg,
    rgba(93,231,255,1) 104deg,
    rgba(255,255,255,.78) 116deg,
    transparent 144deg,
    transparent 224deg,
    rgba(21,146,255,.86) 252deg,
    rgba(255,255,255,.44) 278deg,
    transparent 314deg,
    transparent 360deg
  ) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 1 !important;
  filter: drop-shadow(0 0 18px rgba(93,231,255,.66)) drop-shadow(0 0 38px rgba(28,151,255,.28)) !important;
  animation: vplSpinBorderWowIntense 3.2s linear infinite !important;
}

body.vpl-home .vpl-card-aura {
  inset: -28px -24px -30px -24px !important;
  z-index: -3 !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(93,231,255,.34), transparent 58%),
    radial-gradient(circle at 92% 18%, rgba(22,145,255,.30), transparent 34%) !important;
  filter: blur(34px) saturate(1.25) !important;
  opacity: .86 !important;
  animation: vplAuraPulseWowIntense 2.7s ease-in-out infinite !important;
}

body.vpl-home .vpl-orb {
  opacity: .72 !important;
  filter: blur(.2px) saturate(1.36) !important;
  mix-blend-mode: screen !important;
  animation: vplOrbitWowIntense 5.4s ease-in-out infinite !important;
}

body.vpl-home .vpl-orb-secondary {
  opacity: .62 !important;
  animation-delay: -1.7s !important;
}

body.vpl-home .vpl-card-sweep {
  z-index: 11 !important;
  inset: 0 auto 0 -8% !important;
  width: 44% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,.62) 50%, rgba(93,231,255,.35) 62%, transparent 100%) !important;
  filter: blur(1.4px) !important;
  mix-blend-mode: screen !important;
  animation: vplShineSweepWowIntense 2.65s cubic-bezier(.16,1,.3,1) infinite !important;
  clip-path: inset(0 round 38px) !important;
}

body.vpl-home .vpl-card-scan {
  z-index: 10 !important;
  left: 0 !important;
  right: 0 !important;
  height: 126px !important;
  border-radius: inherit !important;
  background:
    linear-gradient(to bottom, transparent, rgba(93,231,255,.36), rgba(255,255,255,.12), transparent),
    linear-gradient(90deg, transparent, rgba(93,231,255,.42), transparent) !important;
  filter: blur(.2px) !important;
  mix-blend-mode: screen !important;
  animation: vplScanLineWowIntense 2.9s ease-in-out infinite .25s !important;
  clip-path: inset(0 round 38px) !important;
}

body.vpl-home .vpl-visual-shine::before,
body.vpl-home .vpl-visual-shine::after {
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 16px #fff, 0 0 34px rgba(93,231,255,1), 0 0 84px rgba(93,231,255,.64) !important;
  animation: vplSparkBeatWow 1.9s ease-in-out infinite !important;
}

body.vpl-home .vpl-card-particle {
  width: 7px !important;
  height: 7px !important;
  background: #d7fbff !important;
  box-shadow: 0 0 16px #fff, 0 0 30px #62dfff !important;
  animation: vplParticleRiseWowIntense 2.15s ease-out infinite !important;
}

body.vpl-home .vpl-card-particle:nth-of-type(1) { left: 8%; top: 82%; animation-delay: .05s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(2) { left: 18%; top: 61%; animation-delay: .32s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(3) { left: 34%; top: 78%; animation-delay: .65s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(4) { left: 50%; top: 66%; animation-delay: .18s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(5) { left: 72%; top: 79%; animation-delay: .48s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(6) { left: 88%; top: 58%; animation-delay: .82s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(7) { left: 63%; top: 25%; animation-delay: 1.05s !important; }
body.vpl-home .vpl-card-particle:nth-of-type(8) { left: 15%; top: 29%; animation-delay: 1.28s !important; }

body.vpl-home .vpl-visual-card {
  border-color: rgba(160,223,255,.40) !important;
  box-shadow: 0 26px 78px rgba(0,0,0,.38), 0 0 32px rgba(93,231,255,.08), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

body.vpl-home .vpl-visual-card-main img {
  animation: vplVisualZoomWowIntense 5.8s ease-in-out infinite !important;
}

body.vpl-home .vpl-visual-card-small {
  animation: vplMiniPopWowIntense 3.2s ease-in-out infinite !important;
}

body.vpl-home .vpl-float-panel {
  border-color: rgba(151,218,255,.34) !important;
  box-shadow: 0 26px 84px rgba(0,0,0,.34), 0 0 32px rgba(93,231,255,.09), inset 0 1px 0 rgba(255,255,255,.16) !important;
}

body.vpl-home .vpl-float-panel-a {
  padding: 24px !important;
}

body.vpl-home .vpl-float-panel-a span {
  font-size: .84rem !important;
  line-height: 1.44 !important;
}

body.vpl-home .vpl-float-panel-a strong {
  font-size: clamp(1rem, 1.12vw, 1.16rem) !important;
}

@keyframes vplHeroCardFloatWowIntense {
  0%, 100% { --hero-float: 0px; }
  50% { --hero-float: -24px; }
}

@keyframes vplCardGlowWowIntense {
  0%, 100% {
    filter: saturate(1) brightness(1);
    box-shadow:
      0 48px 150px rgba(0,0,0,.56),
      0 0 0 1px rgba(255,255,255,.055) inset,
      0 0 58px rgba(93,231,255,.20),
      0 0 128px rgba(19,142,255,.14),
      inset 0 1px 0 rgba(255,255,255,.19),
      inset 0 -1px 0 rgba(93,231,255,.16);
  }
  50% {
    filter: saturate(1.08) brightness(1.06);
    box-shadow:
      0 58px 160px rgba(0,0,0,.60),
      0 0 0 1px rgba(255,255,255,.07) inset,
      0 0 84px rgba(93,231,255,.34),
      0 0 170px rgba(19,142,255,.22),
      inset 0 1px 0 rgba(255,255,255,.24),
      inset 0 -1px 0 rgba(93,231,255,.24);
  }
}

@keyframes vplAuraPulseWowIntense {
  0%, 100% { opacity: .58; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.12); }
}

@keyframes vplSpinBorderWowIntense {
  to { transform: rotate(360deg); }
}

@keyframes vplShineSweepWowIntense {
  0%, 30% { transform: translateX(-260%) rotate(18deg); opacity: 0; }
  44% { opacity: 1; }
  66%, 100% { transform: translateX(455%) rotate(18deg); opacity: 0; }
}

@keyframes vplScanLineWowIntense {
  0% { transform: translateY(-150px); opacity: 0; }
  16% { opacity: 1; }
  64% { opacity: .82; }
  100% { transform: translateY(720px); opacity: 0; }
}

@keyframes vplSparkBeatWow {
  0%, 100% { transform: scale(.8); opacity: .74; }
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes vplVisualZoomWowIntense {
  0%, 100% { transform: scale(1); filter: saturate(1.06) contrast(1.05) brightness(.90); }
  50% { transform: scale(1.052); filter: saturate(1.2) contrast(1.08) brightness(.98); }
}

@keyframes vplMiniPopWowIntense {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.018); }
}

@keyframes vplParticleRiseWowIntense {
  0% { opacity: 0; transform: translateY(24px) scale(.42); }
  14% { opacity: 1; }
  72% { opacity: .86; }
  100% { opacity: 0; transform: translateY(-126px) scale(1.34); }
}

@keyframes vplOrbitWowIntense {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  30% { transform: translate3d(-34px, 22px, 40px) scale(1.13); }
  65% { transform: translate3d(28px, -24px, 20px) scale(.9); }
}

@media (min-width: 1081px) and (max-width: 1380px) {
  body.vpl-home .vpl-hero > .vpl-container {
    width: min(1240px, calc(100% - 88px)) !important;
  }
  body.vpl-home .vpl-hero-grid {
    grid-template-columns: minmax(0, 500px) minmax(0, 590px) !important;
    gap: 38px !important;
  }
  body.vpl-home .vpl-title {
    font-size: clamp(3.85rem, 6.05vw, 5.95rem) !important;
    letter-spacing: -.08em !important;
  }
  body.vpl-home .vpl-lead {
    max-width: 45ch !important;
  }
  body.vpl-home .vpl-visual {
    max-width: 590px !important;
    grid-template-rows: minmax(260px, 305px) minmax(188px, 218px) minmax(88px, auto) !important;
  }
  body.vpl-home .vpl-proof-row {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    max-width: 500px !important;
  }
  body.vpl-home .vpl-proof {
    min-height: 62px !important;
    padding: 10px 9px !important;
    gap: 8px !important;
  }
  body.vpl-home .vpl-proof span {
    font-size: .75rem !important;
  }
}

@media (min-width: 1081px) and (max-width: 1220px) {
  body.vpl-home .vpl-hero-grid {
    grid-template-columns: minmax(0, 465px) minmax(0, 540px) !important;
    gap: 30px !important;
  }
  body.vpl-home .vpl-title {
    font-size: clamp(3.55rem, 5.8vw, 5.35rem) !important;
  }
  body.vpl-home .vpl-lead {
    max-width: 42ch !important;
    font-size: .94rem !important;
  }
  body.vpl-home .vpl-actions {
    gap: 12px !important;
  }
  body.vpl-home .vpl-button {
    min-width: 205px !important;
  }
  body.vpl-home .vpl-visual {
    max-width: 540px !important;
    padding: 13px !important;
    grid-template-rows: minmax(238px, 286px) minmax(172px, 204px) minmax(84px, auto) !important;
  }
}

@media (max-width: 1080px) {
  body.vpl-home .vpl-hero-copy {
    max-width: 720px !important;
  }
  body.vpl-home .vpl-title {
    font-size: clamp(3.8rem, 13vw, 6.6rem) !important;
    max-width: 9ch !important;
  }
  body.vpl-home .vpl-visual {
    overflow: hidden !important;
  }
}

@media (max-width: 760px) {
  body.vpl-home .vpl-title-line {
    white-space: normal !important;
  }
  body.vpl-home .vpl-visual {
    overflow: hidden !important;
    animation: none !important;
  }
  body.vpl-home .vpl-card-aura {
    display: none !important;
  }
}

/* =========================================================
   HERO CARD — REFLET LUMIÈRE VISIBLE / FORCE SHINE FIX
   ========================================================= */

body.vpl-home .vpl-visual {
  overflow: hidden !important;
  isolation: isolate !important;
}

body.vpl-home .vpl-card-sweep {
  display: block !important;
  position: absolute !important;
  z-index: 80 !important;
  top: -34% !important;
  bottom: -34% !important;
  left: -48% !important;
  width: 42% !important;
  height: auto !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.00) 18%,
      rgba(160,238,255,.22) 34%,
      rgba(255,255,255,.92) 48%,
      rgba(93,231,255,.72) 56%,
      rgba(255,255,255,.22) 70%,
      transparent 100%
    ) !important;
  filter: blur(.6px) drop-shadow(0 0 22px rgba(93,231,255,.92)) drop-shadow(0 0 54px rgba(93,231,255,.44)) !important;
  mix-blend-mode: screen !important;
  transform: translateX(-135%) rotate(18deg) !important;
  animation: vplUltraVisibleCardSweep 2.85s cubic-bezier(.16,1,.3,1) infinite .35s !important;
  clip-path: inset(0 round 38px) !important;
}

body.vpl-home .vpl-visual::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 79 !important;
  top: -40% !important;
  bottom: -40% !important;
  left: -55% !important;
  width: 52% !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.00) 27%,
      rgba(255,255,255,.34) 42%,
      rgba(255,255,255,.78) 49%,
      rgba(93,231,255,.38) 58%,
      transparent 74%,
      transparent 100%
    ) !important;
  filter: blur(3px) drop-shadow(0 0 36px rgba(93,231,255,.74)) !important;
  mix-blend-mode: screen !important;
  transform: translateX(-125%) rotate(18deg) !important;
  animation: vplUltraVisibleCardSweepSoft 2.85s cubic-bezier(.16,1,.3,1) infinite .35s !important;
}

body.vpl-home .vpl-visual-shine {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 81 !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  mix-blend-mode: screen !important;
}

body.vpl-home .vpl-visual-shine::before {
  content: "" !important;
  position: absolute !important;
  top: -36% !important;
  bottom: -36% !important;
  left: -50% !important;
  width: 20% !important;
  height: auto !important;
  border-radius: 999px !important;
  opacity: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.96), rgba(126,236,255,.54), transparent) !important;
  box-shadow: 0 0 26px rgba(255,255,255,.72), 0 0 62px rgba(93,231,255,.65) !important;
  filter: blur(.2px) !important;
  transform: translateX(-130%) rotate(18deg) !important;
  animation: vplUltraVisibleCardSweepCore 2.85s cubic-bezier(.16,1,.3,1) infinite .35s !important;
}

body.vpl-home .vpl-visual-shine::after {
  content: "" !important;
  position: absolute !important;
  right: 1px !important;
  top: 11% !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 0 18px #fff, 0 0 42px rgba(93,231,255,1), 0 0 92px rgba(93,231,255,.72) !important;
  animation: vplSparkBeatWow 1.55s ease-in-out infinite !important;
}

body.vpl-home .vpl-visual-card::before,
body.vpl-home .vpl-float-panel::after {
  content: "" !important;
  position: absolute !important;
  z-index: 8 !important;
  top: -42% !important;
  bottom: -42% !important;
  left: -52% !important;
  width: 32% !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.52), rgba(93,231,255,.28), transparent) !important;
  filter: blur(1px) !important;
  mix-blend-mode: screen !important;
  transform: translateX(-140%) rotate(18deg) !important;
  animation: vplUltraVisibleCardSweepInside 2.85s cubic-bezier(.16,1,.3,1) infinite .35s !important;
}

body.vpl-home .vpl-visual-card-small::before { animation-delay: .55s !important; }
body.vpl-home .vpl-float-panel-a::after { animation-delay: .72s !important; }
body.vpl-home .vpl-float-panel-b::after { animation-delay: .9s !important; }

@keyframes vplUltraVisibleCardSweep {
  0%, 20% { opacity: 0; transform: translateX(-130%) rotate(18deg); }
  30% { opacity: .98; }
  48% { opacity: .88; }
  68%, 100% { opacity: 0; transform: translateX(460%) rotate(18deg); }
}

@keyframes vplUltraVisibleCardSweepSoft {
  0%, 18% { opacity: 0; transform: translateX(-135%) rotate(18deg); }
  31% { opacity: .82; }
  57% { opacity: .52; }
  72%, 100% { opacity: 0; transform: translateX(390%) rotate(18deg); }
}

@keyframes vplUltraVisibleCardSweepCore {
  0%, 22% { opacity: 0; transform: translateX(-150%) rotate(18deg); }
  33% { opacity: 1; }
  43% { opacity: .92; }
  62%, 100% { opacity: 0; transform: translateX(650%) rotate(18deg); }
}

@keyframes vplUltraVisibleCardSweepInside {
  0%, 24% { opacity: 0; transform: translateX(-150%) rotate(18deg); }
  37% { opacity: .72; }
  52% { opacity: .42; }
  70%, 100% { opacity: 0; transform: translateX(520%) rotate(18deg); }
}

@media (max-width: 760px) {
  body.vpl-home .vpl-card-sweep,
  body.vpl-home .vpl-visual::after,
  body.vpl-home .vpl-visual-shine::before,
  body.vpl-home .vpl-visual-card::before,
  body.vpl-home .vpl-float-panel::after {
    animation-duration: 4.4s !important;
    opacity: .55 !important;
  }
}

/* =========================================================
   Transition inter-pages
   Les styles sont désormais injectés par /page-transition.js.
   Ancien overlay texte supprimé pour éviter une seconde animation entre deux pages.
   ========================================================= */

/* =========================================================
   V25 — optimisation mobile finale
   Override placé en fin de fichier pour gagner sur les versions précédentes.
   ========================================================= */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

.vpl-page,
.vpl-container,
.vpl-hero-grid,
.vpl-section,
.vpl-section-dark,
.vpl-final {
  min-width: 0;
}

@media (max-width: 900px) {
  .vpl-canvas,
  .vpl-scroll-ribbon {
    display: none !important;
  }

  .vpl-container,
  body.vpl-home .vpl-hero > .vpl-container {
    width: min(100% - 28px, 720px) !important;
  }

  .vpl-card-grid,
  .vpl-steps,
  .vpl-image-grid,
  .vpl-premium-grid,
  .vpl-carousel-grid,
  .vpl-hero-grid,
  body.vpl-home .vpl-hero-grid,
  .vpl-inner-grid {
    grid-template-columns: 1fr !important;
  }

  .vpl-sticky {
    position: relative !important;
    top: auto !important;
  }

  .vpl-section-title,
  .vpl-constellation-head h2,
  .vpl-honeycomb-section .vpl-section-title {
    max-width: 12ch !important;
    font-size: clamp(2.15rem, 10vw, 4rem) !important;
    line-height: .94 !important;
  }

  .vpl-section-copy,
  .vpl-lead,
  body.vpl-home .vpl-lead {
    max-width: 62ch !important;
    font-size: 0.98rem !important;
    line-height: 1.62 !important;
  }

  .vpl-card,
  .vpl-sheen-card,
  .vpl-step,
  .vpl-hex,
  .vpl-carousel-card,
  .vpl-final-box,
  .vpl-constellation-stage,
  .vpl-visual {
    max-width: 100% !important;
  }
}

@media (max-width: 760px) {
  :root {
    --vpl-nav-offset: 70px;
  }

  .vpl-nav,
  body.vpl-home .vpl-nav {
    position: fixed !important;
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    min-height: 50px !important;
    max-height: 52px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px !important;
    border-radius: 18px !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .vpl-brand,
  body.vpl-home .vpl-brand {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .vpl-brand img,
  body.vpl-home .vpl-brand img {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 auto !important;
  }

  .vpl-brand b,
  body.vpl-home .vpl-brand b {
    max-width: 46vw !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .84rem !important;
  }

  .vpl-brand span,
  .vpl-menu,
  .vpl-nav-ghost,
  body.vpl-home .vpl-brand span,
  body.vpl-home .vpl-menu,
  body.vpl-home .vpl-nav-ghost {
    display: none !important;
  }

  .vpl-nav-cta,
  body.vpl-home .vpl-nav-cta {
    max-width: 43vw !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    font-size: .76rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .vpl-hero,
  .vpl-inner-hero,
  body.vpl-home .vpl-hero,
  body.vpl-home .vpl-inner-hero {
    min-height: auto !important;
    padding-top: 78px !important;
    padding-bottom: 44px !important;
  }

  .vpl-title,
  body.vpl-home .vpl-title,
  .vpl-inner-title {
    max-width: 10ch !important;
    font-size: clamp(2.75rem, 16vw, 4.85rem) !important;
    line-height: .88 !important;
    letter-spacing: -.08em !important;
  }

  .vpl-actions,
  body.vpl-home .vpl-actions,
  .vpl-final-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .vpl-button,
  body.vpl-home .vpl-button,
  .vpl-final-actions .vpl-button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  .vpl-proof-row,
  body.vpl-home .vpl-proof-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .vpl-proof,
  body.vpl-home .vpl-proof {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 14px !important;
  }

  .vpl-visual,
  body.vpl-home .vpl-visual {
    width: 100% !important;
    max-width: 560px !important;
    margin-inline: auto !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 10px !important;
    overflow: hidden !important;
  }

  .vpl-visual-card,
  .vpl-float-panel,
  body.vpl-home .vpl-visual-card,
  body.vpl-home .vpl-float-panel {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  .vpl-visual-card-main,
  body.vpl-home .vpl-visual-card-main {
    aspect-ratio: 1.08 / 1 !important;
  }

  .vpl-visual-card-small,
  body.vpl-home .vpl-visual-card-small {
    aspect-ratio: 16 / 9 !important;
  }

  .vpl-visual-card img,
  body.vpl-home .vpl-visual-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .vpl-section,
  .vpl-section-dark,
  .vpl-constellation-section,
  .vpl-honeycomb-section,
  .vpl-final {
    padding: 54px 0 !important;
  }

  .vpl-card,
  .vpl-sheen-card,
  .vpl-step,
  .vpl-hex,
  .vpl-carousel-card,
  .vpl-final-box,
  .vpl-constellation-core,
  .vpl-constellation-node {
    padding: 20px !important;
    border-radius: 22px !important;
    min-height: auto !important;
  }
}

@media (max-width: 480px) {
  .vpl-container,
  body.vpl-home .vpl-hero > .vpl-container {
    width: calc(100% - 22px) !important;
  }

  .vpl-nav-cta,
  body.vpl-home .vpl-nav-cta {
    max-width: 42vw !important;
    font-size: 0 !important;
  }

  .vpl-nav-cta::after,
  body.vpl-home .vpl-nav-cta::after {
    content: "Réserver" !important;
    font-size: .76rem !important;
  }

  .vpl-title,
  body.vpl-home .vpl-title,
  .vpl-inner-title {
    max-width: 10.4ch !important;
    font-size: clamp(2.55rem, 15.5vw, 4.15rem) !important;
  }

  .vpl-proof-row,
  body.vpl-home .vpl-proof-row {
    grid-template-columns: 1fr !important;
  }

  .vpl-visual-card-small,
  .vpl-float-panel-a,
  body.vpl-home .vpl-visual-card-small,
  body.vpl-home .vpl-float-panel-a {
    display: none !important;
  }

  .vpl-section,
  .vpl-section-dark,
  .vpl-constellation-section,
  .vpl-honeycomb-section,
  .vpl-final {
    padding: 46px 0 !important;
  }
}

/* =========================================================
   V25 — burger mobile global robuste + brand blanc
   ========================================================= */
.vpl-nav .vpl-brand,
.vpl-nav .vpl-brand b,
.vpl-nav .vpl-brand span,
body .vpl-nav .vpl-brand,
body .vpl-nav .vpl-brand b,
body .vpl-nav .vpl-brand span {
  color: #ffffff !important;
}

.vpl-nav-burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-direction: column;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}
.vpl-nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(93,231,255,.18);
  transition: transform .24s ease, opacity .18s ease;
}
.vpl-nav-burger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.vpl-nav-burger.is-active span:nth-child(2) { opacity: 0; }
.vpl-nav-burger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.vpl-mobile-menu-backdrop,
.vpl-mobile-drawer {
  display: none;
}

@media (max-width: 760px) {
  html.vpl-mobile-menu-open,
  html.vpl-mobile-menu-open body {
    overflow: hidden !important;
  }

  .vpl-nav {
    z-index: 2147482600 !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    overflow: visible !important;
    max-height: none !important;
    contain: none !important;
  }

  .vpl-nav .vpl-brand,
  .vpl-nav .vpl-brand b,
  .vpl-nav .vpl-brand span {
    color: #ffffff !important;
  }

  .vpl-nav .vpl-brand b {
    text-shadow: 0 0 14px rgba(93,231,255,.16) !important;
  }

  .vpl-nav-burger {
    display: inline-flex !important;
    z-index: 2147482700 !important;
  }

  .vpl-nav .vpl-menu,
  .vpl-nav .vpl-nav-cta {
    display: none !important;
  }

  .vpl-nav.is-open {
    background: rgba(5,10,18,.78) !important;
    border-color: rgba(255,255,255,.18) !important;
    box-shadow: 0 18px 44px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .vpl-mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2147482400;
    border: 0;
    background: rgba(3,7,14,.50);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }
  .vpl-mobile-menu-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }

  .vpl-mobile-drawer {
    display: flex;
    position: fixed;
    top: 66px;
    left: 10px;
    right: 10px;
    z-index: 2147482500;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 11px;
    border-radius: 22px;
    background: rgba(5,10,18,.95);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 28px 74px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(.985);
    transform-origin: top center;
    transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    max-height: calc(100dvh - 84px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vpl-mobile-drawer::-webkit-scrollbar { display: none; }

  .vpl-mobile-drawer.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .vpl-mobile-drawer a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 46px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.045) !important;
    border: 1px solid rgba(255,255,255,.07) !important;
    color: rgba(255,255,255,.94) !important;
    text-decoration: none !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
  }

  .vpl-mobile-drawer a.active {
    background: linear-gradient(135deg, rgba(93,231,255,.14), rgba(93,231,255,.05)) !important;
    border-color: rgba(93,231,255,.26) !important;
    color: #ffffff !important;
  }

  .vpl-mobile-drawer .vpl-mobile-drawer-cta {
    justify-content: center !important;
    margin-top: 6px !important;
    background: linear-gradient(135deg, #eef8ff, #d6ecff 55%, #b8defd) !important;
    color: #041320 !important;
    border-color: rgba(255,255,255,.72) !important;
    box-shadow: 0 12px 28px rgba(93,231,255,.13), inset 0 1px 0 rgba(255,255,255,.88) !important;
    font-weight: 800 !important;
  }
  .vpl-mobile-drawer .vpl-mobile-drawer-cta::before {
    display: none !important;
  }
}



/* =========================================================
   V24 — Refonte mobile des alvéoles / honeycomb
   ========================================================= */
@media (max-width: 760px) {
  .vpl-honeycomb-section {
    padding-top: 48px !important;
    padding-bottom: 56px !important;
    overflow: hidden !important;
  }

  .vpl-honeycomb-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .vpl-honeycomb-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: stretch !important;
    gap: 12px !important;
    padding: 4px 0 8px !important;
    max-width: 100% !important;
  }

  .vpl-honeycomb-grid::before,
  .vpl-honeycomb-grid::after {
    display: none !important;
    content: none !important;
  }

  .vpl-hex,
  .vpl-hex:nth-child(2n),
  .vpl-hex.is-visible,
  .vpl-hex.is-visible:nth-child(2n),
  .vpl-hex.is-visible:nth-child(2n+1) {
    width: 100% !important;
    min-width: 0 !important;
    height: 92px !important;
    min-height: 92px !important;
    margin-top: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,.72) !important;
    background:
      radial-gradient(circle at 18% 16%, rgba(255,255,255,.96), rgba(255,255,255,0) 26%),
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(234,241,248,.96) 58%, rgba(188,211,233,.82)) !important;
    box-shadow:
      0 14px 34px rgba(12,22,38,.10),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
  }

  .vpl-hex::before {
    inset: 0 !important;
    clip-path: none !important;
    border-radius: inherit !important;
    opacity: .48 !important;
  }

  .vpl-hex span {
    max-width: 100% !important;
    padding: 0 10px !important;
    text-align: center !important;
    font-size: 1rem !important;
    line-height: 1.08 !important;
    letter-spacing: -.03em !important;
    color: #091521 !important;
  }

  .vpl-honeycomb-copy {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .vpl-honeycomb-copy .vpl-sheen-card {
    border-radius: 24px !important;
    padding: 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(242,247,252,.88)) !important;
    box-shadow: 0 18px 40px rgba(8,18,32,.08) !important;
  }
}

@media (max-width: 480px) {
  .vpl-honeycomb-grid {
    gap: 10px !important;
  }

  .vpl-hex,
  .vpl-hex:nth-child(2n),
  .vpl-hex.is-visible,
  .vpl-hex.is-visible:nth-child(2n),
  .vpl-hex.is-visible:nth-child(2n+1) {
    height: 86px !important;
    min-height: 86px !important;
    border-radius: 20px !important;
  }

  .vpl-hex span {
    font-size: .95rem !important;
  }
}


/* =========================================================
   V25 — Alvéoles mobile : départ de dos + retournement au scroll
   ========================================================= */
@media (max-width: 760px) {
  .vpl-honeycomb-grid {
    perspective: 1200px !important;
    transform-style: preserve-3d !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 12px !important;
    padding: 6px 0 14px !important;
  }

  .vpl-hex,
  .vpl-hex:nth-child(2n) {
    position: relative !important;
    width: 100% !important;
    height: 106px !important;
    min-height: 106px !important;
    margin-top: 0 !important;
    clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0 50%) !important;
    border-radius: 0 !important;
    border: 1px solid rgba(183, 210, 232, .78) !important;
    background:
      radial-gradient(circle at 50% 38%, rgba(255,255,255,.24), rgba(255,255,255,0) 34%),
      linear-gradient(145deg, rgba(199,216,231,.82), rgba(171,194,214,.92) 52%, rgba(141,170,196,.96)) !important;
    box-shadow:
      0 14px 30px rgba(12,22,38,.10),
      inset 0 1px 0 rgba(255,255,255,.55) !important;
    opacity: 1 !important;
    transform-style: preserve-3d !important;
    transform: rotateY(180deg) scale(.94) !important;
    transition:
      transform .72s cubic-bezier(.16,1,.3,1),
      box-shadow .32s ease,
      filter .32s ease,
      background .32s ease !important;
    filter: saturate(.92) brightness(.98) !important;
    overflow: visible !important;
  }

  .vpl-hex:nth-child(2n) {
    transform: translateY(18px) rotateY(180deg) scale(.94) !important;
  }

  .vpl-hex::before {
    inset: 10px !important;
    clip-path: inherit !important;
    border-radius: 0 !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,0) 52%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%) !important;
    opacity: .9 !important;
  }

  .vpl-hex::after {
    content: "" !important;
    position: absolute !important;
    inset: 22px 26px !important;
    clip-path: inherit !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    opacity: .55 !important;
    transform: translateZ(2px) !important;
    pointer-events: none !important;
  }

  .vpl-hex span {
    max-width: 78% !important;
    padding: 0 6px !important;
    opacity: 0 !important;
    transform: translateZ(22px) scale(.92) !important;
    transition: opacity .24s ease .16s, transform .4s ease .12s !important;
    color: #0a1520 !important;
    font-size: .98rem !important;
    line-height: 1.05 !important;
    text-shadow: none !important;
  }

  .vpl-hex.is-visible {
    background:
      radial-gradient(circle at 24% 18%, rgba(255,255,255,.98), rgba(255,255,255,0) 28%),
      linear-gradient(145deg, rgba(255,255,255,.98), rgba(236,243,249,.97) 54%, rgba(186,210,231,.86)) !important;
    box-shadow:
      0 18px 38px rgba(12,22,38,.14),
      inset 0 1px 0 rgba(255,255,255,.92) !important;
    filter: saturate(1.02) brightness(1.02) !important;
  }

  .vpl-hex.is-visible:nth-child(2n) {
    transform: translateY(18px) rotateY(0deg) scale(1) !important;
  }

  .vpl-hex.is-visible:nth-child(2n+1) {
    transform: rotateY(0deg) scale(1) !important;
  }

  .vpl-hex.is-visible span {
    opacity: 1 !important;
    transform: translateZ(26px) scale(1) !important;
  }
}

@media (max-width: 480px) {
  .vpl-honeycomb-grid {
    gap: 8px 10px !important;
  }

  .vpl-hex,
  .vpl-hex:nth-child(2n) {
    height: 94px !important;
    min-height: 94px !important;
  }

  .vpl-hex:nth-child(2n) {
    transform: translateY(14px) rotateY(180deg) scale(.94) !important;
  }

  .vpl-hex.is-visible:nth-child(2n) {
    transform: translateY(14px) rotateY(0deg) scale(1) !important;
  }

  .vpl-hex span {
    font-size: .9rem !important;
  }
}


/* =========================================================
   V26 — Alvéoles mobile premium
   - retournement plus cinématique
   - effet plus premium, une par une
   ========================================================= */
@media (max-width: 760px) {
  .vpl-honeycomb-section {
    background:
      radial-gradient(circle at 20% 12%, rgba(72,156,224,.10), transparent 30%),
      radial-gradient(circle at 80% 10%, rgba(255,255,255,.65), transparent 22%),
      linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
  }

  .vpl-honeycomb-grid {
    perspective: 1400px !important;
    gap: 12px 12px !important;
  }

  .vpl-hex,
  .vpl-hex:nth-child(2n) {
    height: 108px !important;
    min-height: 108px !important;
    transform-origin: 50% 50% !important;
    transform: rotateY(180deg) rotateZ(-1.4deg) scale(.92) !important;
    background:
      radial-gradient(circle at 26% 18%, rgba(255,255,255,.18), rgba(255,255,255,0) 28%),
      linear-gradient(145deg, rgba(188,204,220,.95), rgba(164,184,203,.96) 56%, rgba(138,161,183,.98)) !important;
    border-color: rgba(168,194,216,.92) !important;
    box-shadow:
      0 12px 24px rgba(17,33,51,.10),
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -18px 28px rgba(65,95,124,.10) !important;
    transition:
      transform .85s cubic-bezier(.16,1,.3,1),
      box-shadow .4s ease,
      filter .35s ease,
      background .35s ease !important;
    will-change: transform, filter !important;
  }

  .vpl-hex:nth-child(2n) {
    transform: translateY(18px) rotateY(180deg) rotateZ(1.4deg) scale(.92) !important;
  }

  .vpl-hex::before {
    inset: 11px !important;
    background:
      linear-gradient(145deg, rgba(255,255,255,.22), rgba(255,255,255,0) 58%),
      radial-gradient(circle at 50% 50%, rgba(255,255,255,.08), rgba(255,255,255,0) 72%) !important;
    opacity: .95 !important;
  }

  .vpl-hex::after {
    inset: 22px 24px !important;
    border-color: rgba(255,255,255,.22) !important;
    opacity: .42 !important;
  }

  .vpl-hex span {
    opacity: 0 !important;
    transform: translateZ(22px) translateY(4px) scale(.94) !important;
    transition: opacity .28s ease .18s, transform .55s cubic-bezier(.16,1,.3,1) .12s !important;
    font-size: .98rem !important;
    letter-spacing: -.03em !important;
  }

  .vpl-hex.is-visible {
    background:
      radial-gradient(circle at 22% 16%, rgba(255,255,255,.96), rgba(255,255,255,0) 28%),
      linear-gradient(145deg, rgba(255,255,255,.99), rgba(237,244,250,.98) 54%, rgba(196,218,236,.90)) !important;
    box-shadow:
      0 20px 38px rgba(12,24,40,.16),
      0 0 0 1px rgba(255,255,255,.38) inset,
      inset 0 1px 0 rgba(255,255,255,.90) !important;
    filter: saturate(1.04) brightness(1.02) !important;
  }

  .vpl-hex.is-visible:nth-child(2n) {
    transform: translateY(18px) rotateY(0deg) rotateZ(0deg) scale(1) !important;
  }

  .vpl-hex.is-visible:nth-child(2n+1) {
    transform: rotateY(0deg) rotateZ(0deg) scale(1) !important;
  }

  .vpl-hex.is-visible span {
    opacity: 1 !important;
    transform: translateZ(28px) translateY(0) scale(1) !important;
  }

  .vpl-honeycomb-grid .vpl-hex:nth-child(1) { transition-delay: .02s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(2) { transition-delay: .09s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(3) { transition-delay: .16s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(4) { transition-delay: .23s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(5) { transition-delay: .30s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(6) { transition-delay: .37s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(7) { transition-delay: .44s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(8) { transition-delay: .51s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(9) { transition-delay: .58s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(10) { transition-delay: .65s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(11) { transition-delay: .72s !important; }
  .vpl-honeycomb-grid .vpl-hex:nth-child(12) { transition-delay: .79s !important; }

  .vpl-honeycomb-copy .vpl-sheen-card {
    background:
      radial-gradient(circle at 14% 10%, rgba(255,255,255,.96), rgba(255,255,255,0) 20%),
      linear-gradient(180deg, rgba(255,255,255,.95), rgba(243,248,252,.92)) !important;
    border: 1px solid rgba(255,255,255,.74) !important;
    box-shadow: 0 22px 44px rgba(8,18,32,.10), inset 0 1px 0 rgba(255,255,255,.86) !important;
  }
}

@media (max-width: 480px) {
  .vpl-hex,
  .vpl-hex:nth-child(2n) {
    height: 96px !important;
    min-height: 96px !important;
  }

  .vpl-hex span {
    font-size: .92rem !important;
  }
}


/* =========================================================
   V29 — Audio navbar
   ========================================================= */
.vpl-audio-toggle {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 999px !important;
  color: rgba(255,255,255,.92) !important;
  background: rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  cursor: pointer !important;
  font: inherit !important;
  font-weight: 900 !important;
  font-size: .78rem !important;
  letter-spacing: -.02em !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease !important;
}

.vpl-audio-toggle:hover {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(93,231,255,.28) !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
}

.vpl-audio-toggle__icon {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: rgba(93,231,255,.14) !important;
  color: #dff8ff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  font-size: .95rem !important;
}

.vpl-audio-toggle.is-active {
  color: #041320 !important;
  background: linear-gradient(135deg, #eef8ff, #d6ecff 58%, #b8defd) !important;
  border-color: rgba(255,255,255,.72) !important;
  box-shadow: 0 12px 28px rgba(93,231,255,.14), inset 0 1px 0 rgba(255,255,255,.86) !important;
}

.vpl-audio-toggle.is-active .vpl-audio-toggle__icon {
  color: #041320 !important;
  background: rgba(4,19,32,.08) !important;
}

.vpl-audio-player {
  display: none !important;
}

@media (max-width: 760px) {
  .vpl-nav {
    grid-template-columns: minmax(0, 1fr) auto auto !important;
  }

  .vpl-audio-toggle {
    min-height: 42px !important;
    width: auto !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(93,231,255,.20) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10) !important;
  }

  .vpl-audio-toggle__text {
    display: inline !important;
    font-size: .76rem !important;
  }

  .vpl-audio-toggle__icon {
    width: 22px !important;
    height: 22px !important;
  }
}

@media (max-width: 420px) {
  .vpl-audio-toggle {
    min-width: 42px !important;
    width: 42px !important;
    padding: 0 !important;
  }

  .vpl-audio-toggle__text {
    display: none !important;
  }
}


/* =========================================================
   Page méthode — simplification + sécurisation responsive
   ========================================================= */
body.page-methode .vpl-scroll-ribbon {
  display: none !important;
}

body.page-methode .vpl-inner-hero {
  padding-bottom: 72px !important;
}

body.page-methode .vpl-inner-hero-grid {
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
}

body.page-methode .vpl-inner-title {
  max-width: 9ch;
}

body.page-methode .vpl-inner-lead {
  max-width: 58ch;
}

body.page-methode .vpl-inner-visual {
  min-height: auto !important;
  display: grid;
  justify-items: end;
  align-content: start;
}

body.page-methode .vpl-inner-visual img {
  position: relative !important;
  inset: auto !important;
  width: min(520px, 100%) !important;
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transform: none !important;
  border-radius: 32px;
}

body.page-methode .vpl-inner-stat {
  position: relative !important;
  left: auto !important;
  bottom: auto !important;
  width: min(420px, 100%);
  margin: 18px 0 0 0;
  z-index: 2;
}

body.page-methode .section-head {
  max-width: 860px;
}

body.page-methode .section-head.section-head--center {
  margin-inline: auto;
}

body.page-methode .section-head p,
body.page-methode .pillar-card p,
body.page-methode .timeline-card p,
body.page-methode .standard-card p,
body.page-methode .method-panel p,
body.page-methode .cta-panel p {
  max-width: 62ch;
}

body.page-methode .pillars-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
}

body.page-methode .timeline-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

body.page-methode .standard-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

body.page-methode .method-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body.page-methode .pillar-card,
body.page-methode .timeline-card,
body.page-methode .standard-card,
body.page-methode .method-panel {
  height: 100%;
}

body.page-methode .method-panel {
  padding: 30px;
}

body.page-methode .bullet-item {
  line-height: 1.6;
}

body.page-methode .cta-panel {
  text-align: center;
}

body.page-methode .cta-actions {
  justify-content: center;
}

@media (max-width: 1080px) {
  body.page-methode main {
    margin-top: -110px !important;
  }

  body.page-methode .vpl-inner-hero {
    padding-top: 210px !important;
  }

  body.page-methode .vpl-inner-visual {
    justify-items: stretch;
  }

  body.page-methode .vpl-inner-stat {
    width: min(420px, 100%);
    margin: 16px 0 0;
  }
}

@media (max-width: 820px) {
  body.page-methode .method-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.page-methode main {
    margin-top: -80px !important;
  }

  body.page-methode .vpl-inner-hero {
    padding-top: 190px !important;
    padding-bottom: 52px !important;
  }

  body.page-methode .vpl-inner-title {
    max-width: 7.8ch !important;
  }

  body.page-methode .vpl-inner-stat {
    width: 100%;
    margin: 14px 0 0;
  }

  body.page-methode .pillars-grid,
  body.page-methode .timeline-grid,
  body.page-methode .standard-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Correctif global — bandeaux défilants plus lisibles
   ========================================================= */
.vpl-marquee {
  color: #07111f !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(216,230,243,.86)) !important;
  border-block: 1px solid rgba(7,17,31,.10) !important;
}

.vpl-marquee-track {
  min-width: 100% !important;
  justify-content: space-around !important;
  gap: clamp(28px, 5vw, 72px) !important;
  padding: clamp(22px, 3vw, 36px) 0 !important;
}

.vpl-marquee span,
.vpl-marquee em {
  color: #07111f !important;
  opacity: 1 !important;
  white-space: nowrap !important;
  font-size: clamp(1.65rem, 3.2vw, 3.9rem) !important;
  line-height: .9 !important;
  font-weight: 950 !important;
  letter-spacing: -.055em !important;
}

/* Variante interne : même lisibilité sur les pages fond clair ou fond sombre */
.vpl-inner-page .vpl-marquee {
  color: #07111f !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(224,235,246,.90)) !important;
}

@media (max-width: 768px) {
  .vpl-marquee-track {
    gap: 34px !important;
    padding: 18px 0 !important;
  }

  .vpl-marquee span,
  .vpl-marquee em {
    font-size: clamp(1.35rem, 9vw, 2.65rem) !important;
    line-height: .95 !important;
  }
}

/* =========================================================
   Correctif global — bandeaux bleu foncé + séparateurs
   ========================================================= */
.vpl-marquee,
.vpl-inner-page .vpl-marquee {
  color: #0d2b46 !important;
}

.vpl-marquee-track {
  gap: clamp(18px, 3vw, 42px) !important;
}

.vpl-marquee span,
.vpl-marquee em {
  color: #0d2b46 !important;
  font-size: clamp(1.15rem, 2.25vw, 2.55rem) !important;
  letter-spacing: -.035em !important;
}

.vpl-marquee span::after,
.vpl-marquee em::after {
  content: " —";
  display: inline-block;
  margin-left: clamp(14px, 2.2vw, 34px);
  color: #0d2b46;
  opacity: .85;
}

@media (max-width: 768px) {
  .vpl-marquee-track {
    gap: 20px !important;
  }

  .vpl-marquee span,
  .vpl-marquee em {
    font-size: clamp(1.05rem, 6.8vw, 2rem) !important;
  }

  .vpl-marquee span::after,
  .vpl-marquee em::after {
    margin-left: 18px;
  }
}

/* =========================================================
   Passe éditoriale globale — pages allégées
   ========================================================= */
body.page-editorial-light main > section,
body.page-legal-clean main > section {
  scroll-margin-top: 140px;
}

body.page-editorial-light .section-head,
body.page-editorial-light .vpl-section-head {
  max-width: 850px;
}

body.page-editorial-light .section-head--center,
body.page-editorial-light .vpl-section-head.center {
  margin-inline: auto;
}

body.page-editorial-light .section-head p,
body.page-editorial-light .vpl-section-copy,
body.page-editorial-light .soft-card p,
body.page-editorial-light .info-card p,
body.page-editorial-light .faq-card p,
body.page-editorial-light .benefit-card p,
body.page-editorial-light .problem-card p,
body.page-editorial-light .process-card p,
body.page-editorial-light .standard-card p,
body.page-editorial-light .timeline-card p {
  max-width: 64ch;
}

body.page-editorial-light .vpl-light,
body.page-editorial-light .vpl-internal-effects {
  background: transparent !important;
}

body.page-editorial-light .vpl-image-card,
body.page-editorial-light .vpl-inner-visual img {
  transform: none !important;
}

body.page-editorial-light .vpl-inner-stat {
  margin-top: 18px !important;
}

body.page-legal-clean .vpl-inner-hero-grid {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 980px;
}

body.page-legal-clean .vpl-inner-title,
body.page-legal-clean .vpl-inner-lead {
  max-width: 920px !important;
}

body.page-legal-clean .vpl-inner-hero {
  padding-bottom: 72px !important;
}

@media (max-width: 768px) {
  body.page-editorial-light .vpl-image-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-editorial-light .vpl-image-card,
  body.page-editorial-light .vpl-image-card.small {
    min-height: 340px !important;
  }
}


/* =========================================================
   Page stage — cadres sûrs + ruban vraiment en arrière-plan
   ========================================================= */
body.page-stage .vpl-scroll-ribbon {
  z-index: 0 !important;
  opacity: .16 !important;
  mix-blend-mode: normal !important;
}

body.page-stage .vpl-ribbon-progress {
  stroke-width: 34 !important;
  filter: drop-shadow(0 0 10px rgba(109,183,255,.16)) !important;
}

body.page-stage .vpl-ribbon-dot {
  opacity: .28 !important;
}

body.page-stage main,
body.page-stage .vpl-inner-hero,
body.page-stage main > section,
body.page-stage .vpl-marquee,
body.page-stage footer {
  position: relative;
  z-index: 3 !important;
}

body.page-stage .vpl-inner-hero {
  overflow: hidden;
  padding-bottom: clamp(58px, 8vw, 98px) !important;
}

body.page-stage .vpl-inner-hero-grid {
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}

body.page-stage .vpl-inner-title {
  max-width: 8.7ch;
  overflow-wrap: normal;
}

body.page-stage .vpl-inner-lead {
  max-width: 58ch;
}

body.page-stage .vpl-inner-visual {
  justify-items: end;
}

body.page-stage .vpl-inner-stat {
  width: min(420px, 100%);
  margin-top: 18px !important;
}

body.page-stage .vpl-card-grid,
body.page-stage .card-grid-3,
body.page-stage .faq-grid,
body.page-stage .split-panel,
body.page-stage .booking-layout {
  position: relative;
  z-index: 4;
}

body.page-stage .vpl-card,
body.page-stage .info-card,
body.page-stage .faq-card,
body.page-stage .soft-card,
body.page-stage .card,
body.page-stage .selected-stage-box,
body.page-stage .booking-status,
body.page-stage .bullet-item {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

body.page-stage .vpl-card {
  min-height: auto !important;
  padding: clamp(22px, 2.4vw, 30px) !important;
}

body.page-stage .vpl-card-num {
  width: auto !important;
  min-width: 58px;
  max-width: 100%;
  height: auto !important;
  min-height: 46px;
  margin-bottom: clamp(36px, 5vw, 72px) !important;
  padding: 0 14px;
  white-space: normal;
  text-align: center;
}

body.page-stage .vpl-card h3,
body.page-stage .info-card h3,
body.page-stage .faq-card h3,
body.page-stage .soft-panel h3,
body.page-stage .stage-summary-card h3 {
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 1.12;
}

body.page-stage .vpl-card p,
body.page-stage .info-card p,
body.page-stage .faq-card p,
body.page-stage .soft-panel p,
body.page-stage .stage-summary-card p,
body.page-stage .selected-stage-value,
body.page-stage .booking-total,
body.page-stage .booking-status,
body.page-stage .form-rgpd-note {
  max-width: 100%;
  overflow-wrap: break-word;
  line-height: 1.65;
}

body.page-stage .split-panel,
body.page-stage .booking-layout {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-stage .card-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.page-stage .form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.page-stage input,
body.page-stage textarea,
body.page-stage button,
body.page-stage .btn,
body.page-stage .vpl-button {
  max-width: 100%;
  white-space: normal;
}

body.page-stage .vpl-marquee {
  overflow: hidden;
}

body.page-stage .vpl-marquee-track {
  align-items: center;
}

body.page-stage .vpl-marquee span {
  line-height: 1.05 !important;
}

@media (max-width: 1080px) {
  body.page-stage .split-panel,
  body.page-stage .booking-layout,
  body.page-stage .card-grid-3 {
    grid-template-columns: 1fr;
  }

  body.page-stage .vpl-inner-visual {
    justify-items: stretch;
  }
}

@media (max-width: 720px) {
  body.page-stage .form-grid {
    grid-template-columns: 1fr;
  }

  body.page-stage .vpl-card-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-stage .vpl-inner-title {
    max-width: 7.5ch !important;
  }

  body.page-stage .vpl-inner-stat {
    width: 100%;
  }

  body.page-stage .vpl-scroll-ribbon {
    display: none !important;
  }
}

/* =========================================================
   Correctif global — équilibre des blocs, cartes et textes
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  overflow-x: hidden;
}

/* Aucun texte ne doit sortir de son encart, bouton ou carte. */
.vpl-inner-page h1,
.vpl-inner-page h2,
.vpl-inner-page h3,
.vpl-inner-page p,
.vpl-inner-page a,
.vpl-inner-page span,
.vpl-inner-page li,
.vpl-inner-page strong,
.vpl-home h1,
.vpl-home h2,
.vpl-home h3,
.vpl-home p,
.vpl-home a,
.vpl-home span,
.vpl-home li,
.vpl-home strong,
.card,
.soft-card,
.info-card,
.faq-card,
.proof-card,
.audience-card,
.pillar-card,
.timeline-card,
.standard-card,
.governance-card,
.difference-card,
.vpl-card,
.vpl-step,
.vpl-sheen-card,
.vpl-image-card,
.cta-panel,
.glass-panel,
.surface-panel,
.stage-card,
.booking-card,
.stage-summary-card,
.map-card,
form,
details,
button,
.btn,
.vpl-button,
.vpl-nav-cta {
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  min-width: 0;
}

/* Titres plus maîtrisés dans les sections de contenu : l'effet reste fort,
   mais il ne domine plus les cartes voisines. */
.vpl-inner-page main > section:not(.vpl-inner-hero) h1,
.vpl-inner-page main > section:not(.vpl-inner-hero) h2,
.vpl-home main > section:not(.vpl-hero) h1,
.vpl-home main > section:not(.vpl-hero) h2 {
  font-size: clamp(2.45rem, 5.1vw, 5.25rem) !important;
  line-height: .94 !important;
  letter-spacing: -.065em !important;
  max-width: 13.5ch;
}

.section-head--center h1,
.section-head--center h2,
.vpl-section-head.center h1,
.vpl-section-head.center h2,
.vpl-section-head[style*="center"] h1,
.vpl-section-head[style*="center"] h2 {
  max-width: 15ch !important;
  margin-left: auto;
  margin-right: auto;
}

/* Dans les compositions texte + carte, on réduit les titres pour éviter
   l'effet disproportionné entre une énorme phrase et une petite carte. */
.split-panel h1,
.split-panel h2,
.method-split h1,
.method-split h2,
.pedagogy-block h1,
.pedagogy-block h2,
.booking-layout h1,
.booking-layout h2,
.vpl-steps h1,
.vpl-steps h2,
.vpl-image-grid h1,
.vpl-image-grid h2,
[class*="split"] h1,
[class*="split"] h2,
[class*="two-col"] h1,
[class*="two-col"] h2,
[class*="duo"] h1,
[class*="duo"] h2 {
  font-size: clamp(2.2rem, 4.35vw, 4.55rem) !important;
  line-height: .96 !important;
  max-width: 11.5ch !important;
}

/* Grilles : cartes alignées et de dimensions cohérentes. */
.vpl-card-grid,
.card-grid-2,
.card-grid-3,
.card-grid-4,
.pillars-grid,
.timeline-grid,
.standard-grid,
.governance-grid,
.difference-grid,
.faq-grid,
.proof-grid,
.audience-grid,
.stage-grid,
.path-grid,
.offer-grid,
.module-grid,
.contact-grid,
.vpl-sheen-grid,
[class*="grid"] {
  align-items: stretch !important;
}

.vpl-card-grid,
.card-grid-2,
.card-grid-3,
.card-grid-4,
.pillars-grid,
.timeline-grid,
.standard-grid,
.governance-grid,
.difference-grid,
.faq-grid,
.proof-grid,
.audience-grid,
.stage-grid,
.path-grid,
.offer-grid,
.module-grid {
  grid-auto-rows: 1fr;
}

.vpl-card-grid > *,
.card-grid-2 > *,
.card-grid-3 > *,
.card-grid-4 > *,
.pillars-grid > *,
.timeline-grid > *,
.standard-grid > *,
.governance-grid > *,
.difference-grid > *,
.faq-grid > *,
.proof-grid > *,
.audience-grid > *,
.stage-grid > *,
.path-grid > *,
.offer-grid > *,
.module-grid > * {
  height: 100%;
}

.card,
.soft-card,
.info-card,
.faq-card,
.proof-card,
.audience-card,
.pillar-card,
.timeline-card,
.standard-card,
.governance-card,
.difference-card,
.vpl-card,
.vpl-step,
.vpl-sheen-card,
.stage-card,
.booking-card,
.stage-summary-card,
.glass-panel,
.surface-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: clamp(150px, 16vw, 230px);
  padding: clamp(20px, 2.2vw, 30px) !important;
}

.vpl-card {
  min-height: clamp(210px, 24vw, 320px) !important;
}

.vpl-card-num,
.pillar-number,
.timeline-step,
.vpl-step b,
.eyebrow,
.vpl-eyebrow,
.vpl-tag {
  flex: 0 0 auto;
  max-width: 100%;
  white-space: normal !important;
  text-wrap: balance;
}

.vpl-card-num {
  width: auto !important;
  min-width: 52px;
  max-width: 100%;
  min-height: 52px;
  height: auto !important;
  padding: 10px 14px;
  margin-bottom: clamp(28px, 4vw, 58px) !important;
}

.card h3,
.soft-card h3,
.info-card h3,
.faq-card h3,
.proof-card h3,
.audience-card h3,
.pillar-card h3,
.timeline-card h3,
.standard-card h3,
.governance-card h3,
.difference-card h3,
.vpl-card h3,
.vpl-step h3,
.vpl-sheen-card h3,
.stage-card h3,
.booking-card h3,
.stage-summary-card h3 {
  font-size: clamp(1.05rem, 1.45vw, 1.42rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  max-width: 100% !important;
}

.card p,
.soft-card p,
.info-card p,
.faq-card p,
.proof-card p,
.audience-card p,
.pillar-card p,
.timeline-card p,
.standard-card p,
.governance-card p,
.difference-card p,
.vpl-card p,
.vpl-step p,
.vpl-sheen-card p,
.stage-card p,
.booking-card p,
.stage-summary-card p,
.bullet-item,
li {
  font-size: clamp(.92rem, 1vw, 1.02rem) !important;
  line-height: 1.58 !important;
  max-width: 100% !important;
}

/* Les cartes composées restent proportionnées même lorsqu'un texte est court. */
.card > :last-child,
.soft-card > :last-child,
.info-card > :last-child,
.faq-card > :last-child,
.proof-card > :last-child,
.audience-card > :last-child,
.pillar-card > :last-child,
.timeline-card > :last-child,
.standard-card > :last-child,
.governance-card > :last-child,
.difference-card > :last-child,
.vpl-card > :last-child,
.vpl-sheen-card > :last-child {
  margin-bottom: 0 !important;
}

/* Grandes cartes côte à côte : mêmes proportions et plus d'air. */
.split-panel,
.method-split,
.pedagogy-block,
.booking-layout,
.vpl-steps,
.vpl-image-grid,
[class*="split"],
[class*="two-col"],
[class*="duo"] {
  align-items: stretch !important;
  gap: clamp(22px, 3vw, 44px) !important;
}

.split-panel > *,
.method-split > *,
.pedagogy-block > *,
.booking-layout > *,
.vpl-steps > *,
.vpl-image-grid > * {
  min-width: 0;
}

/* Images : jamais plus hautes que le bloc voisin sans raison. */
.vpl-inner-visual img,
.vpl-image-card img,
.card img,
.soft-card img,
.pedagogy-media img,
.hero-card img {
  max-width: 100%;
}

.vpl-image-grid .vpl-image-card,
.vpl-image-card.small {
  min-height: clamp(220px, 32vw, 430px) !important;
}

/* Formulaires et boutons : textes centrés et sans débordement. */
button,
.btn,
.vpl-button,
.vpl-nav-cta,
input,
select,
textarea {
  max-width: 100%;
}

button,
.btn,
.vpl-button,
.vpl-nav-cta {
  white-space: normal !important;
  text-align: center;
  line-height: 1.15 !important;
}

/* Le ruban décoratif reste derrière les contenus et ne perturbe plus les cartes. */
.vpl-scroll-ribbon {
  z-index: 0 !important;
  opacity: .26 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
}

.vpl-canvas,
.vpl-noise {
  z-index: 0 !important;
}

.vpl-nav,
main,
footer,
.vpl-inner-hero,
.vpl-hero,
.vpl-section,
section,
.container,
.vpl-container {
  position: relative;
  z-index: 2;
}

@media (min-width: 1100px) {
  .card-grid-3,
  .faq-grid,
  .proof-grid,
  .audience-grid,
  .timeline-grid,
  .standard-grid,
  .governance-grid,
  .difference-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .card-grid-2,
  .split-panel,
  .method-split,
  .booking-layout,
  .pedagogy-block,
  .vpl-steps,
  [class*="two-col"],
  [class*="duo"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}

@media (max-width: 980px) {
  .vpl-inner-page main > section:not(.vpl-inner-hero) h1,
  .vpl-inner-page main > section:not(.vpl-inner-hero) h2,
  .vpl-home main > section:not(.vpl-hero) h1,
  .vpl-home main > section:not(.vpl-hero) h2,
  .split-panel h1,
  .split-panel h2,
  .method-split h1,
  .method-split h2,
  .pedagogy-block h1,
  .pedagogy-block h2,
  .booking-layout h1,
  .booking-layout h2,
  .vpl-steps h1,
  .vpl-steps h2,
  .vpl-image-grid h1,
  .vpl-image-grid h2 {
    font-size: clamp(2.2rem, 8.5vw, 4.25rem) !important;
    max-width: 100% !important;
    text-wrap: balance;
  }

  .split-panel,
  .method-split,
  .pedagogy-block,
  .booking-layout,
  .vpl-steps,
  .vpl-image-grid,
  [class*="split"],
  [class*="two-col"],
  [class*="duo"] {
    grid-template-columns: 1fr !important;
  }

  .card,
  .soft-card,
  .info-card,
  .faq-card,
  .proof-card,
  .audience-card,
  .pillar-card,
  .timeline-card,
  .standard-card,
  .governance-card,
  .difference-card,
  .vpl-card,
  .vpl-step,
  .vpl-sheen-card,
  .stage-card,
  .booking-card,
  .stage-summary-card {
    min-height: auto !important;
  }
}

@media (max-width: 640px) {
  .vpl-inner-page main > section:not(.vpl-inner-hero) h1,
  .vpl-inner-page main > section:not(.vpl-inner-hero) h2,
  .vpl-home main > section:not(.vpl-hero) h1,
  .vpl-home main > section:not(.vpl-hero) h2 {
    font-size: clamp(2rem, 11vw, 3.35rem) !important;
    line-height: .98 !important;
    letter-spacing: -.055em !important;
  }

  .card,
  .soft-card,
  .info-card,
  .faq-card,
  .proof-card,
  .audience-card,
  .pillar-card,
  .timeline-card,
  .standard-card,
  .governance-card,
  .difference-card,
  .vpl-card,
  .vpl-step,
  .vpl-sheen-card,
  .stage-card,
  .booking-card,
  .stage-summary-card,
  .cta-panel,
  .glass-panel,
  .surface-panel {
    padding: 20px !important;
    border-radius: 24px !important;
  }

  .vpl-card-grid,
  .card-grid-2,
  .card-grid-3,
  .card-grid-4,
  .pillars-grid,
  .timeline-grid,
  .standard-grid,
  .governance-grid,
  .difference-grid,
  .faq-grid,
  .proof-grid,
  .audience-grid,
  .stage-grid,
  .path-grid,
  .offer-grid,
  .module-grid {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto;
  }

  .vpl-scroll-ribbon {
    display: none !important;
  }
}

/* =========================================================
   Refonte page Stage — architectures variées par section
   ========================================================= */
body.page-stage-redesign {
  background: #eaf1f7 !important;
  color: #07111f;
}

body.page-stage-redesign .vpl-scroll-ribbon {
  z-index: 0 !important;
  opacity: .16 !important;
  pointer-events: none !important;
}

body.page-stage-redesign main {
  margin-top: 0 !important;
  overflow: hidden;
}

body.page-stage-redesign main > section {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 8vw, 128px) 0;
}

body.page-stage-redesign h1,
body.page-stage-redesign h2,
body.page-stage-redesign h3,
body.page-stage-redesign p,
body.page-stage-redesign a,
body.page-stage-redesign li,
body.page-stage-redesign span,
body.page-stage-redesign strong,
body.page-stage-redesign button,
body.page-stage-redesign input,
body.page-stage-redesign textarea,
body.page-stage-redesign select {
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

body.page-stage-redesign h1,
body.page-stage-redesign h2,
body.page-stage-redesign h3 {
  text-wrap: balance;
}

body.page-stage-redesign p,
body.page-stage-redesign li {
  line-height: 1.7;
}

/* Hero */
.stage-hero-redesign {
  padding-top: clamp(160px, 15vw, 220px) !important;
  padding-bottom: clamp(96px, 10vw, 150px) !important;
  color: #fff;
  background:
    radial-gradient(circle at 78% 26%, rgba(62,137,206,.22), transparent 28%),
    radial-gradient(circle at 18% 78%, rgba(255,255,255,.06), transparent 26%),
    linear-gradient(135deg, #050a12 0%, #081522 48%, #0b2135 100%);
}

.stage-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .96fr) minmax(360px, .86fr);
  align-items: center;
  gap: clamp(36px, 7vw, 92px);
}

.stage-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.stage-pill-row span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  font-size: .82rem;
  font-weight: 850;
  line-height: 1.1;
}

.stage-hero-copy h1 {
  max-width: 10.6ch;
  margin: 18px 0 0;
  color: #fff;
  font-size: clamp(3.6rem, 7.1vw, 7.4rem);
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 950;
}

.stage-hero-copy p {
  max-width: 56ch;
  margin: 24px 0 0;
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 1.3vw, 1.14rem);
}

.stage-hero-note {
  max-width: 48ch !important;
  margin-top: 18px !important;
  color: rgba(255,255,255,.68) !important;
  font-size: .9rem !important;
}

.stage-hero-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(87,175,244,.52);
  border-radius: 34px;
  background: rgba(2,9,18,.52);
  box-shadow: 0 34px 110px rgba(29,125,213,.22);
}

.stage-hero-panel img {
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: 24px;
}

.stage-hero-main-img {
  aspect-ratio: 16 / 9;
}

.stage-hero-mini-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 14px;
}

.stage-hero-mini-grid img,
.stage-hero-card-dark {
  min-height: 150px;
}

.stage-hero-card-dark,
.stage-hero-status {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 20px;
  border-radius: 22px;
  border: 1px solid rgba(87,175,244,.34);
  background: linear-gradient(135deg, rgba(9,31,54,.92), rgba(4,12,24,.88));
}

.stage-hero-card-dark strong,
.stage-hero-status strong {
  color: #fff;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.15;
}

.stage-hero-card-dark span,
.stage-hero-status span {
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  line-height: 1.45;
}

.stage-hero-status {
  min-height: 96px;
  text-align: center;
}

/* Section problème : asymétrie contrôlée */
.stage-problem-section {
  background: #edf4fa;
}

.stage-asym-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .78fr);
  align-items: center;
  gap: clamp(36px, 7vw, 96px);
}

.stage-section-copy h2,
.stage-compare-card h2,
.stage-session-card h2,
.stage-final-box h2 {
  margin: 14px 0 0;
  color: #07111f;
  font-weight: 950;
  letter-spacing: -.07em;
  line-height: .94;
}

.stage-section-copy h2 {
  max-width: 10.5ch;
  font-size: clamp(3rem, 5.4vw, 5.65rem);
}

.stage-section-copy p {
  max-width: 58ch;
  margin: 24px 0 0;
  color: #35465d;
  font-size: 1.03rem;
}

.stage-problem-stack {
  display: grid;
  gap: 16px;
}

.stage-problem-stack article {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  column-gap: 18px;
  align-items: center;
  padding: 22px;
  border-radius: 28px;
  border: 1px solid rgba(7,17,31,.10);
  background: rgba(255,255,255,.78);
  box-shadow: 0 24px 70px rgba(8,14,28,.09);
}

.stage-problem-stack article span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: #0b3a6f;
  color: #fff;
  font-weight: 950;
}

.stage-problem-stack article h3 {
  margin: 0 0 4px;
  color: #07111f;
  font-size: 1.25rem;
}

.stage-problem-stack article p {
  grid-column: 2;
  margin: 0;
  color: #526276;
}

/* Section apprentissage : grille compacte */
.stage-learn-section {
  background: #f7fbff;
}

body.page-stage-redesign .section-head--center h2 {
  max-width: 13ch;
  margin-inline: auto;
  font-size: clamp(2.8rem, 5.3vw, 5.6rem);
  line-height: .96;
}

body.page-stage-redesign .section-head--center p {
  max-width: 64ch;
  margin-inline: auto;
}

.stage-learn-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.stage-learn-grid article {
  min-height: 220px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(7,17,31,.10);
  background: #fff;
  box-shadow: 0 22px 60px rgba(8,14,28,.08);
}

.stage-learn-grid b,
.stage-orientation-grid span {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  color: #fff;
  background: #0b3a6f;
  margin-bottom: 18px;
  font-weight: 950;
}

.stage-learn-grid article.accent b {
  background: linear-gradient(135deg, #0b3a6f, #4ab8ff);
}

.stage-learn-grid h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
  color: #07111f;
}

.stage-learn-grid p {
  margin: 0;
  color: #526276;
}

/* Timeline : architecture différente */
.stage-flow-section {
  background: linear-gradient(135deg, #e7eff7, #f8fbff);
}

.stage-flow-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(360px, 1fr);
  align-items: start;
  gap: clamp(36px, 7vw, 92px);
}

.stage-flow-list {
  display: grid;
  gap: 14px;
}

.stage-flow-list article {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 18px;
  padding: 20px 22px;
  border-radius: 24px;
  border: 1px solid rgba(7,17,31,.10);
  background: rgba(255,255,255,.86);
  box-shadow: 0 18px 45px rgba(8,14,28,.07);
}

.stage-flow-list b {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #0b3a6f;
  color: #fff;
}

.stage-flow-list h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}

.stage-flow-list p {
  margin: 0;
  color: #526276;
}

/* Comparatif */
.stage-compare-section {
  background: #edf4fa;
}

.stage-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  align-items: stretch;
}

.stage-compare-card {
  padding: clamp(28px, 4vw, 48px);
  border-radius: 34px;
  border: 1px solid rgba(7,17,31,.10);
  background: #fff;
  box-shadow: 0 26px 80px rgba(8,14,28,.10);
}

.stage-compare-card h2 {
  max-width: 9.2ch;
  font-size: clamp(2.55rem, 4.8vw, 4.75rem);
}

.stage-compare-card p {
  max-width: 58ch;
  margin: 22px 0 0;
  color: #526276;
}

.stage-compare-card ul {
  display: grid;
  gap: 12px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.stage-compare-card li {
  position: relative;
  padding-left: 24px;
  color: #526276;
}

.stage-compare-card li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: #d8683a;
  font-weight: 900;
}

.stage-compare-card.is-yes {
  background: linear-gradient(135deg, #ffffff, #eef8ff);
}

.stage-compare-card.is-yes .vpl-button {
  margin-top: 26px;
}

/* Clarté avant inscription */
.stage-clarity-section {
  background: linear-gradient(135deg, #07111f, #0c2741);
  color: #fff;
}

.stage-clarity-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .82fr);
  gap: clamp(28px, 5vw, 68px);
  align-items: center;
}

.stage-session-card,
.stage-checklist-card,
.stage-booking-summary,
.stage-booking-form-card,
.stage-final-box {
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 90px rgba(8,14,28,.16);
}

.stage-session-card {
  padding: clamp(30px, 5vw, 58px);
  background: rgba(255,255,255,.08);
}

.stage-session-card h2 {
  max-width: 9ch;
  color: #fff;
  font-size: clamp(3rem, 5.8vw, 5.8rem);
}

.stage-session-card p {
  max-width: 54ch;
  color: rgba(255,255,255,.76);
}

.stage-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.stage-meta-grid div {
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
}

.stage-meta-grid span,
.stage-meta-grid small {
  display: block;
  color: rgba(255,255,255,.68);
  font-size: .82rem;
}

.stage-meta-grid strong {
  display: block;
  margin: 8px 0 4px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.25;
}

.stage-checklist-card {
  padding: clamp(26px, 4vw, 38px);
  background: rgba(255,255,255,.96);
  color: #07111f;
}

.stage-checklist-card h3 {
  margin: 0 0 20px;
  font-size: 1.14rem;
}

.stage-checklist-card ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stage-checklist-card li {
  position: relative;
  padding-left: 28px;
  color: #3f5269;
}

.stage-checklist-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #0b6faf;
  font-weight: 950;
}

/* Réservation */
.stage-reservation-section {
  background: #f7fbff;
}

.stage-booking-grid {
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 26px;
  margin-top: 34px;
}

.stage-booking-summary,
.stage-booking-form-card {
  padding: clamp(24px, 3.5vw, 36px);
  border-color: rgba(7,17,31,.10);
  background: #fff;
}

.stage-booking-summary h3,
.stage-booking-form-card h3 {
  margin: 0 0 20px;
  color: #07111f;
}

.stage-detail-list {
  display: grid;
  gap: 10px;
  margin: 18px 0;
}

.stage-detail-list div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(7,17,31,.08);
}

.stage-detail-list strong {
  color: #07111f;
}

.stage-detail-list span {
  color: #526276;
}

.stage-booking-form-card .form-grid {
  gap: 16px;
}

.stage-booking-form-card input,
.stage-booking-form-card textarea,
.stage-booking-form-card select {
  width: 100%;
  min-height: 46px;
  border-radius: 14px;
}

.stage-booking-form-card textarea {
  min-height: 120px;
}

.stage-booking-form-card button {
  width: 100%;
  margin-top: 18px;
}

.form-rgpd-note {
  margin: 14px 0 0;
  color: #64748b;
  font-size: .86rem;
  line-height: 1.55;
}

/* Orientation */
.stage-orientation-section {
  background: #edf4fa;
}

.stage-orientation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin-top: 34px;
}

.stage-orientation-grid a {
  display: grid;
  align-content: start;
  min-height: 250px;
  padding: 28px;
  border-radius: 28px;
  border: 1px solid rgba(7,17,31,.10);
  background: #fff;
  color: #07111f;
  text-decoration: none;
  box-shadow: 0 24px 70px rgba(8,14,28,.09);
}

.stage-orientation-grid h3 {
  margin: 0 0 10px;
  font-size: 1.18rem;
}

.stage-orientation-grid p {
  margin: 0;
  color: #526276;
}

.stage-orientation-grid b {
  margin-top: 22px;
  color: #0b3a6f;
}

.stage-faq-section {
  background: #f7fbff;
}

body.page-stage-redesign .faq-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

body.page-stage-redesign .faq-card {
  min-height: auto !important;
}

.stage-final-cta {
  color: #fff;
  background: #07111f;
}

.stage-final-box {
  padding: clamp(34px, 6vw, 72px);
  background:
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.11), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

.stage-final-box h2 {
  max-width: 12ch;
  color: #fff;
  font-size: clamp(3rem, 5.6vw, 6rem);
}

.stage-final-box p {
  max-width: 58ch;
  color: rgba(255,255,255,.76);
  margin: 24px 0 0;
}

.stage-final-box .vpl-actions {
  margin-top: 30px;
}

@media (max-width: 1100px) {
  .stage-hero-grid,
  .stage-asym-grid,
  .stage-flow-grid,
  .stage-clarity-grid,
  .stage-booking-grid {
    grid-template-columns: 1fr;
  }

  .stage-hero-copy h1,
  .stage-section-copy h2,
  .stage-session-card h2,
  .stage-final-box h2 {
    max-width: 12ch;
  }

  .stage-learn-grid,
  .stage-orientation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.page-stage-redesign main > section {
    padding: 62px 0;
  }

  .stage-hero-redesign {
    padding-top: 190px !important;
  }

  .stage-hero-copy h1 {
    font-size: clamp(3rem, 14vw, 4.75rem);
    line-height: .92;
    max-width: 9.6ch;
  }

  .stage-section-copy h2,
  .stage-compare-card h2,
  .stage-session-card h2,
  .stage-final-box h2,
  body.page-stage-redesign .section-head--center h2 {
    font-size: clamp(2.4rem, 11vw, 3.75rem);
    line-height: .98;
    max-width: 100%;
  }

  .stage-hero-panel {
    border-radius: 26px;
    padding: 10px;
  }

  .stage-hero-mini-grid,
  .stage-compare-grid,
  .stage-learn-grid,
  .stage-meta-grid,
  .stage-orientation-grid,
  body.page-stage-redesign .faq-grid {
    grid-template-columns: 1fr !important;
  }

  .stage-problem-stack article,
  .stage-flow-list article {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px;
  }

  .stage-problem-stack article span,
  .stage-flow-list b {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  .stage-detail-list div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .stage-compare-card,
  .stage-session-card,
  .stage-checklist-card,
  .stage-booking-summary,
  .stage-booking-form-card,
  .stage-orientation-grid a,
  .stage-final-box {
    border-radius: 24px;
    padding: 22px;
  }
}


/* =========================================================
   Accueil — refonte rythme visuel + sections différenciées
   ========================================================= */
body.page-accueil-rythme {
  background: #edf4f9;
  color: #07111f;
}

body.page-accueil-rythme .vpl-page,
body.page-accueil-rythme main {
  position: relative;
  z-index: 2;
  overflow: hidden;
}

body.page-accueil-rythme .vpl-scroll-ribbon {
  opacity: .18 !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

body.page-accueil-rythme h1,
body.page-accueil-rythme h2,
body.page-accueil-rythme h3,
body.page-accueil-rythme strong {
  word-break: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  text-wrap: balance;
}

body.page-accueil-rythme p,
body.page-accueil-rythme li,
body.page-accueil-rythme a,
body.page-accueil-rythme span,
body.page-accueil-rythme em {
  overflow-wrap: anywhere;
}

body.page-accueil-rythme .hp-section {
  padding: clamp(74px, 9vw, 132px) 0;
  position: relative;
}

body.page-accueil-rythme .hp-kicker {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  min-height: 28px;
  padding: 7px 12px;
  border-radius: 999px;
  color: #0a3153;
  background: #f7fbff;
  border: 1px solid rgba(6, 35, 61, .10);
  font-size: .74rem;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .01em;
  box-shadow: 0 12px 34px rgba(10, 49, 83, .08);
}

/* Hero */
body.page-accueil-rythme .hp-hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(124px, 13vw, 176px) 0 clamp(80px, 9vw, 128px);
  color: #fff;
  background:
    radial-gradient(circle at 72% 35%, rgba(75, 168, 235, .20), transparent 22%),
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.07), transparent 20%),
    linear-gradient(145deg, #07111f 0%, #08243a 58%, #06101d 100%);
}

body.page-accueil-rythme .hp-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 90px;
  background: linear-gradient(to bottom, rgba(7,17,31,0), #edf4f9);
  pointer-events: none;
}

body.page-accueil-rythme .hp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(360px, .82fr);
  gap: clamp(38px, 8vw, 96px);
  align-items: center;
}

body.page-accueil-rythme .hp-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

body.page-accueil-rythme .hp-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.22);
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.15;
  backdrop-filter: blur(16px);
}

body.page-accueil-rythme .hp-hero h1 {
  max-width: 10.8ch;
  margin: 0;
  color: #fff;
  font-size: clamp(3.5rem, 7.8vw, 7.75rem);
  line-height: .86;
  letter-spacing: -.085em;
  font-weight: 950;
}

body.page-accueil-rythme .hp-hero p {
  max-width: 61ch;
  color: rgba(255,255,255,.78);
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.75;
}

body.page-accueil-rythme .hp-hero-copy > p {
  margin: 24px 0 0;
}

body.page-accueil-rythme .hp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

body.page-accueil-rythme .hp-microcopy {
  max-width: 55ch !important;
  margin-top: 20px !important;
  font-size: .86rem !important;
  color: rgba(255,255,255,.70) !important;
}

body.page-accueil-rythme .hp-hero-visual {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  justify-self: end;
  padding: 12px;
  border-radius: 34px;
  border: 1px solid rgba(105, 197, 255, .52);
  background: rgba(5, 23, 38, .58);
  box-shadow: 0 34px 110px rgba(0,0,0,.34), 0 0 42px rgba(65, 168, 238, .22);
  backdrop-filter: blur(18px);
}

body.page-accueil-rythme .hp-hero-visual figure {
  margin: 0;
}

body.page-accueil-rythme .hp-hero-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-accueil-rythme .hp-hero-photo {
  overflow: hidden;
  border-radius: 24px;
  aspect-ratio: 16 / 9;
  border: 1px solid rgba(255,255,255,.12);
}

body.page-accueil-rythme .hp-hero-mosaic {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 12px;
}

body.page-accueil-rythme .hp-hero-mosaic figure {
  overflow: hidden;
  min-height: 170px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
}

body.page-accueil-rythme .hp-hero-mosaic article {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
  padding: 18px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 30% 10%, rgba(82, 207, 255, .25), transparent 24%),
    rgba(3, 18, 34, .86);
  border: 1px solid rgba(255,255,255,.16);
}

body.page-accueil-rythme .hp-hero-mosaic article span {
  display: block;
  width: 44px;
  height: 3px;
  border-radius: 999px;
  margin-bottom: 14px;
  background: #66d9ff;
  box-shadow: 0 0 16px rgba(102,217,255,.56);
}

body.page-accueil-rythme .hp-hero-mosaic article strong {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.05;
}

body.page-accueil-rythme .hp-hero-mosaic article p,
body.page-accueil-rythme .hp-hero-note span {
  margin: 10px 0 0;
  color: rgba(255,255,255,.74);
  font-size: .86rem;
  line-height: 1.55;
}

body.page-accueil-rythme .hp-hero-note {
  min-height: 92px;
  padding: 20px;
  text-align: center;
  border-radius: 22px;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(4,16,30,.78);
}

body.page-accueil-rythme .hp-hero-note strong,
body.page-accueil-rythme .hp-hero-note span {
  display: block;
}

/* Band */
body.page-accueil-rythme .hp-band {
  position: relative;
  z-index: 3;
  color: #0a3153;
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(223,236,247,.90));
  border-block: 1px solid rgba(7,17,31,.10);
  overflow: hidden;
}

body.page-accueil-rythme .hp-band div {
  width: min(1300px, calc(100% - 32px));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 54px);
  padding: clamp(22px, 3vw, 34px) 0;
  white-space: nowrap;
}

body.page-accueil-rythme .hp-band span {
  color: #0a3153;
  font-size: clamp(1.05rem, 2vw, 2.2rem);
  line-height: 1;
  font-weight: 950;
  letter-spacing: -.045em;
}

body.page-accueil-rythme .hp-band span:not(:last-child)::after {
  content: " —";
  margin-left: clamp(16px, 3vw, 44px);
  color: rgba(10, 49, 83, .55);
}

/* Problem section */
body.page-accueil-rythme .hp-problem {
  background:
    radial-gradient(circle at 0% 0%, rgba(80,158,220,.12), transparent 24%),
    #edf4f9;
}

body.page-accueil-rythme .hp-asym-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(340px, .78fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: center;
}

body.page-accueil-rythme .hp-section-copy h2,
body.page-accueil-rythme .hp-routes-card-main h2,
body.page-accueil-rythme .hp-session-panel h2,
body.page-accueil-rythme .hp-standard-grid h2 {
  max-width: 11.5ch;
  margin: 18px 0 0;
  color: #07111f;
  font-size: clamp(2.55rem, 5.2vw, 5.65rem);
  line-height: .9;
  letter-spacing: -.075em;
  font-weight: 950;
}

body.page-accueil-rythme .hp-section-copy p,
body.page-accueil-rythme .hp-routes-card-main p,
body.page-accueil-rythme .hp-session-panel p,
body.page-accueil-rythme .hp-standard-grid > div > p {
  max-width: 58ch;
  margin: 22px 0 0;
  color: #314259;
  line-height: 1.75;
}

body.page-accueil-rythme .hp-problem-stack {
  display: grid;
  gap: 16px;
}

body.page-accueil-rythme .hp-problem-stack article {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  min-height: 126px;
  align-items: center;
  padding: 22px;
  border-radius: 28px;
  color: #07111f;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(7,17,31,.10);
  box-shadow: 0 24px 70px rgba(8,14,28,.08);
}

body.page-accueil-rythme .hp-problem-stack b,
body.page-accueil-rythme .hp-learn-grid span,
body.page-accueil-rythme .hp-route-list span,
body.page-accueil-rythme .hp-timeline span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  color: #fff;
  background: #0b4778;
  font-weight: 950;
}

body.page-accueil-rythme .hp-problem-stack h3,
body.page-accueil-rythme .hp-learn-grid h3 {
  margin: 0 0 6px;
  color: #07111f;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.08;
  letter-spacing: -.035em;
}

body.page-accueil-rythme .hp-problem-stack p,
body.page-accueil-rythme .hp-learn-grid p {
  margin: 0;
  color: #516277;
  line-height: 1.55;
}

/* Learn grid */
body.page-accueil-rythme .hp-learn {
  background: #f6f9fc;
}

body.page-accueil-rythme .hp-centered-head {
  max-width: 820px;
  margin: 0 auto 34px;
  text-align: center;
}

body.page-accueil-rythme .hp-centered-head h2 {
  max-width: 14ch;
  margin: 18px auto 0;
  color: #07111f;
  font-size: clamp(2.45rem, 5vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.074em;
  font-weight: 950;
}

body.page-accueil-rythme .hp-centered-head p {
  max-width: 60ch;
  margin: 18px auto 0;
  color: #4d5d72;
  line-height: 1.7;
}

body.page-accueil-rythme .hp-learn-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

body.page-accueil-rythme .hp-learn-grid article {
  min-height: 230px;
  padding: 22px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid rgba(7,17,31,.10);
  box-shadow: 0 22px 60px rgba(8,14,28,.08);
}

body.page-accueil-rythme .hp-learn-grid h3 {
  margin-top: 24px;
}

/* Routes section */
body.page-accueil-rythme .hp-routes {
  background:
    linear-gradient(180deg, #edf4f9, #f7fbff);
}

body.page-accueil-rythme .hp-routes-layout {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1fr);
  gap: clamp(30px, 6vw, 72px);
  align-items: stretch;
}

body.page-accueil-rythme .hp-routes-card {
  border-radius: 34px;
  border: 1px solid rgba(7,17,31,.10);
  background: #fff;
  box-shadow: 0 24px 70px rgba(8,14,28,.09);
}

body.page-accueil-rythme .hp-routes-card-main {
  padding: clamp(30px, 4vw, 52px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.page-accueil-rythme .hp-route-list {
  display: grid;
  gap: 16px;
}

body.page-accueil-rythme .hp-route-list a {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px 18px;
  align-items: start;
  padding: 24px;
  min-height: 155px;
  border-radius: 28px;
  text-decoration: none;
  color: #07111f;
  background: #fff;
  border: 1px solid rgba(7,17,31,.10);
  box-shadow: 0 24px 70px rgba(8,14,28,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}

body.page-accueil-rythme .hp-route-list a:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 80px rgba(8,14,28,.12);
}

body.page-accueil-rythme .hp-route-list strong,
body.page-accueil-rythme .hp-route-list p,
body.page-accueil-rythme .hp-route-list em {
  grid-column: 2;
}

body.page-accueil-rythme .hp-route-list strong {
  display: block;
  margin-top: 2px;
  font-size: 1.12rem;
  line-height: 1.15;
}

body.page-accueil-rythme .hp-route-list p {
  margin: -4px 0 0;
  color: #516277;
  line-height: 1.55;
}

body.page-accueil-rythme .hp-route-list em {
  margin-top: 2px;
  color: #0b4778;
  font-style: normal;
  font-weight: 950;
  font-size: .92rem;
}

/* Session section */
body.page-accueil-rythme .hp-session {
  color: #fff;
  background:
    radial-gradient(circle at 15% 20%, rgba(74, 176, 246, .18), transparent 24%),
    linear-gradient(135deg, #07111f, #0b2c4b);
}

body.page-accueil-rythme .hp-session-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(380px, .85fr);
  gap: clamp(34px, 7vw, 88px);
  align-items: center;
}

body.page-accueil-rythme .hp-session-panel h2,
body.page-accueil-rythme .hp-session-panel p {
  color: #fff;
}

body.page-accueil-rythme .hp-session-panel p {
  color: rgba(255,255,255,.74);
}

body.page-accueil-rythme .hp-checklist {
  padding: clamp(26px, 4vw, 40px);
  border-radius: 32px;
  color: #07111f;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 30px 90px rgba(0,0,0,.20);
}

body.page-accueil-rythme .hp-checklist h3 {
  margin: 0 0 18px;
  color: #07111f;
  font-size: 1.2rem;
}

body.page-accueil-rythme .hp-checklist ul,
body.page-accueil-rythme .hp-compare ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

body.page-accueil-rythme .hp-checklist li,
body.page-accueil-rythme .hp-compare li {
  position: relative;
  padding-left: 26px;
  color: #42536a;
  line-height: 1.55;
}

body.page-accueil-rythme .hp-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #0b78b8;
  font-weight: 950;
}

/* Standard timeline */
body.page-accueil-rythme .hp-standard {
  background: #edf4f9;
}

body.page-accueil-rythme .hp-standard-grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(460px, 1fr);
  gap: clamp(34px, 7vw, 90px);
  align-items: center;
}

body.page-accueil-rythme .hp-timeline {
  counter-reset: item;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

body.page-accueil-rythme .hp-timeline li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 96px;
  padding: 20px;
  border-radius: 24px;
  color: #07111f;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(7,17,31,.10);
  box-shadow: 0 20px 60px rgba(8,14,28,.08);
}

body.page-accueil-rythme .hp-timeline strong {
  display: block;
  color: #07111f;
  margin-bottom: 6px;
  font-size: 1.02rem;
}

body.page-accueil-rythme .hp-timeline p {
  margin: 0;
  color: #516277;
  line-height: 1.48;
}

/* Compare */
body.page-accueil-rythme .hp-contrast {
  color: #fff;
  background:
    radial-gradient(circle at 84% 18%, rgba(102,217,255,.12), transparent 24%),
    #07111f;
}

body.page-accueil-rythme .hp-centered-head-light h2,
body.page-accueil-rythme .hp-centered-head-light p {
  color: #fff;
}

body.page-accueil-rythme .hp-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

body.page-accueil-rythme .hp-compare article {
  min-height: 430px;
  padding: clamp(26px, 4vw, 44px);
  border-radius: 34px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(255,255,255,.55);
  color: #07111f;
  box-shadow: 0 30px 90px rgba(0,0,0,.22);
}

body.page-accueil-rythme .hp-compare article:first-child {
  background: rgba(255,255,255,.90);
}

body.page-accueil-rythme .hp-compare article > span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 20px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0a3153;
  background: #eef7ff;
  font-size: .72rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .03em;
}

body.page-accueil-rythme .hp-compare h3 {
  max-width: 12.5ch;
  margin: 0 0 24px;
  color: #07111f;
  font-size: clamp(2rem, 3.7vw, 4.1rem);
  line-height: .94;
  letter-spacing: -.072em;
  font-weight: 950;
}

body.page-accueil-rythme .hp-compare p {
  max-width: 54ch;
  color: #42536a;
  line-height: 1.7;
}

body.page-accueil-rythme .hp-compare li::before {
  content: "—";
  position: absolute;
  left: 0;
  top: 0;
  color: #d26b40;
  font-weight: 950;
}

body.page-accueil-rythme .hp-compare article:nth-child(2) a {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  margin-top: 24px;
  padding: 12px 18px;
  border-radius: 999px;
  color: #07111f;
  background: #dff8ff;
  text-decoration: none;
  font-weight: 950;
}

/* Final */
body.page-accueil-rythme .hp-final {
  padding: clamp(78px, 10vw, 140px) 0;
  background: #07111f;
  color: #fff;
}

body.page-accueil-rythme .hp-final-panel {
  padding: clamp(34px, 6vw, 72px);
  border-radius: 42px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  box-shadow: 0 35px 100px rgba(0,0,0,.30);
}

body.page-accueil-rythme .hp-final-panel h2 {
  max-width: 14ch;
  margin: 0;
  color: #fff;
  font-size: clamp(2.4rem, 5.6vw, 6rem);
  line-height: .92;
  letter-spacing: -.078em;
  font-weight: 950;
}

body.page-accueil-rythme .hp-final-panel p {
  max-width: 64ch;
  margin: 24px 0 0;
  color: rgba(255,255,255,.76);
  line-height: 1.75;
}

/* Responsive accueil */
@media (max-width: 1180px) {
  body.page-accueil-rythme .hp-learn-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.page-accueil-rythme .hp-learn-grid article {
    min-height: 205px;
  }
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-hero-grid,
  body.page-accueil-rythme .hp-asym-grid,
  body.page-accueil-rythme .hp-routes-layout,
  body.page-accueil-rythme .hp-session-grid,
  body.page-accueil-rythme .hp-standard-grid {
    grid-template-columns: 1fr;
  }

  body.page-accueil-rythme .hp-hero-visual {
    justify-self: start;
  }

  body.page-accueil-rythme .hp-section-copy h2,
  body.page-accueil-rythme .hp-routes-card-main h2,
  body.page-accueil-rythme .hp-session-panel h2,
  body.page-accueil-rythme .hp-standard-grid h2 {
    max-width: 14ch;
  }

  body.page-accueil-rythme .hp-compare {
    grid-template-columns: 1fr;
  }

  body.page-accueil-rythme .hp-compare article {
    min-height: auto;
  }

  body.page-accueil-rythme .hp-band div {
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
  }

  body.page-accueil-rythme .hp-band div::-webkit-scrollbar {
    display: none;
  }
}

@media (max-width: 720px) {
  body.page-accueil-rythme .hp-hero {
    padding-top: 188px;
  }

  body.page-accueil-rythme .hp-hero h1 {
    max-width: 9ch;
    font-size: clamp(3.05rem, 16vw, 5.2rem);
    line-height: .93;
  }

  body.page-accueil-rythme .hp-centered-head h2,
  body.page-accueil-rythme .hp-section-copy h2,
  body.page-accueil-rythme .hp-routes-card-main h2,
  body.page-accueil-rythme .hp-session-panel h2,
  body.page-accueil-rythme .hp-standard-grid h2,
  body.page-accueil-rythme .hp-final-panel h2 {
    font-size: clamp(2.3rem, 12vw, 4rem);
    line-height: .98;
    max-width: 12ch;
  }

  body.page-accueil-rythme .hp-hero-mosaic {
    grid-template-columns: 1fr;
  }

  body.page-accueil-rythme .hp-hero-mosaic figure,
  body.page-accueil-rythme .hp-hero-mosaic article {
    min-height: 138px;
  }

  body.page-accueil-rythme .hp-learn-grid {
    grid-template-columns: 1fr;
  }

  body.page-accueil-rythme .hp-learn-grid article,
  body.page-accueil-rythme .hp-route-list a,
  body.page-accueil-rythme .hp-problem-stack article,
  body.page-accueil-rythme .hp-timeline li {
    min-height: auto;
  }

  body.page-accueil-rythme .hp-route-list a,
  body.page-accueil-rythme .hp-problem-stack article,
  body.page-accueil-rythme .hp-timeline li {
    grid-template-columns: 46px 1fr;
    padding: 18px;
  }

  body.page-accueil-rythme .hp-compare h3 {
    max-width: 13ch;
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

  body.page-accueil-rythme .hp-actions .vpl-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  body.page-accueil-rythme .hp-section {
    padding: 62px 0;
  }

  body.page-accueil-rythme .hp-hero {
    padding-top: 178px;
  }

  body.page-accueil-rythme .hp-hero-visual {
    padding: 8px;
    border-radius: 26px;
  }

  body.page-accueil-rythme .hp-hero-photo {
    border-radius: 20px;
  }

  body.page-accueil-rythme .hp-routes-card-main,
  body.page-accueil-rythme .hp-checklist,
  body.page-accueil-rythme .hp-compare article,
  body.page-accueil-rythme .hp-final-panel {
    border-radius: 26px;
  }
}


/* =========================================================
   Correctif accueil — section inutile supprimée, bandeau continu, ruban scroll remis
   ========================================================= */

/* Ancienne section "Pas de fausse urgence" supprimée du HTML.
   Sécurité si une version en cache la sert encore. */
body.page-accueil-rythme .hp-session {
  display: none !important;
}

/* Bandeau : cinq termes en boucle continue, sans trou. */
body.page-accueil-rythme .hp-band {
  position: relative;
  z-index: 4;
  overflow: hidden !important;
  color: #0a3153 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(220,235,247,.92)) !important;
  border-block: 1px solid rgba(7,17,31,.10) !important;
}

body.page-accueil-rythme .hp-band-track {
  display: flex !important;
  width: max-content !important;
  min-width: 200vw !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  animation: hpBandScroll 22s linear infinite;
  will-change: transform;
}

body.page-accueil-rythme .hp-band-set {
  flex: 0 0 auto !important;
  min-width: 100vw !important;
  width: max-content !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  gap: clamp(22px, 3.5vw, 58px) !important;
  margin: 0 !important;
  padding: clamp(22px, 2.8vw, 34px) clamp(18px, 3vw, 52px) !important;
  overflow: visible !important;
}

body.page-accueil-rythme .hp-band span,
body.page-accueil-rythme .hp-band i {
  flex: 0 0 auto;
  color: #0a3153 !important;
  opacity: 1 !important;
  font-size: clamp(1.25rem, 2.05vw, 2.35rem) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
  font-weight: 950 !important;
  font-style: normal !important;
}

body.page-accueil-rythme .hp-band i {
  color: rgba(10,49,83,.55) !important;
  font-weight: 850 !important;
}

@keyframes hpBandScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* Titre du comparatif : largeur équivalente aux deux cartes, en deux lignes sur desktop. */
body.page-accueil-rythme .hp-contrast .hp-centered-head {
  max-width: min(1180px, 100%) !important;
  margin-inline: auto !important;
}

body.page-accueil-rythme .hp-contrast .hp-centered-head h2 {
  max-width: min(1180px, 100%) !important;
  font-size: clamp(3rem, 4.35vw, 5.35rem) !important;
  line-height: .92 !important;
  letter-spacing: -.07em !important;
}

/* Ruban scroll : visible sur l'accueil, au-dessus des fonds mais derrière les contenus. */
body.page-accueil-rythme .vpl-scroll-ribbon {
  display: block !important;
  position: fixed !important;
  top: var(--vpl-ribbon-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--vpl-ribbon-top, 0px)) !important;
  z-index: 3 !important;
  opacity: .78 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  overflow: hidden !important;
}

body.page-accueil-rythme .vpl-ribbon-base {
  opacity: 0 !important;
  stroke: transparent !important;
}

body.page-accueil-rythme .vpl-ribbon-progress {
  stroke-width: 42 !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
  opacity: .9 !important;
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.25))
    drop-shadow(0 0 26px rgba(69,143,213,.30)) !important;
}

body.page-accueil-rythme .vpl-ribbon-dot {
  opacity: 0;
}

body.page-accueil-rythme .vpl-scroll-ribbon.is-drawing .vpl-ribbon-dot {
  opacity: .9 !important;
}

body.page-accueil-rythme .hp-hero .vpl-container,
body.page-accueil-rythme .hp-section .vpl-container,
body.page-accueil-rythme .hp-final .vpl-container,
body.page-accueil-rythme .hp-band {
  position: relative;
  z-index: 4;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-band-track,
  body.page-accueil-rythme .hp-band-set {
    overflow: visible !important;
    scrollbar-width: none !important;
  }

  body.page-accueil-rythme .hp-band-track::-webkit-scrollbar,
  body.page-accueil-rythme .hp-band-set::-webkit-scrollbar {
    display: none !important;
  }

  body.page-accueil-rythme .hp-contrast .hp-centered-head h2 {
    font-size: clamp(2.7rem, 8vw, 4.6rem) !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vpl-scroll-ribbon {
    display: none !important;
  }

  body.page-accueil-rythme .hp-band-track {
    animation-duration: 18s;
  }

  body.page-accueil-rythme .hp-band-set {
    gap: 24px !important;
    padding-block: 18px !important;
  }

  body.page-accueil-rythme .hp-band span,
  body.page-accueil-rythme .hp-band i {
    font-size: clamp(1.12rem, 6vw, 1.75rem) !important;
  }

  body.page-accueil-rythme .hp-contrast .hp-centered-head h2 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 11vw, 3.7rem) !important;
  }
}


/* =========================================================
   Correctif accueil — tiret unique + ruban sous les contenus
   ========================================================= */

/* Le bandeau contient déjà ses tirets dans le HTML : on neutralise l'ancien tiret ajouté en CSS. */
body.page-accueil-rythme .hp-band span::after,
body.page-accueil-rythme .hp-band span:not(:last-child)::after {
  content: none !important;
  display: none !important;
}

/* Le ruban doit passer au-dessus des fonds de sections, mais jamais au-dessus des textes/cartes/images. */
body.page-accueil-rythme .vpl-page,
body.page-accueil-rythme main {
  position: relative !important;
  z-index: auto !important;
}

body.page-accueil-rythme main > section,
body.page-accueil-rythme .hp-hero,
body.page-accueil-rythme .hp-section,
body.page-accueil-rythme .hp-final {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}

body.page-accueil-rythme .vpl-scroll-ribbon {
  z-index: 1 !important;
  opacity: .58 !important;
  mix-blend-mode: normal !important;
}

body.page-accueil-rythme .vpl-container,
body.page-accueil-rythme .container,
body.page-accueil-rythme .hp-band,
body.page-accueil-rythme .hp-band-track {
  position: relative !important;
  z-index: 3 !important;
}

body.page-accueil-rythme .hp-hero::after {
  z-index: 0 !important;
}

body.page-accueil-rythme .vpl-nav {
  z-index: 100 !important;
}


/* =========================================================
   Correctif global — ruban bleu sous les contenus sur toutes les pages
   ========================================================= */

/* Couche de page : les contenus ne doivent pas créer un contexte qui passe sous le ruban. */
body .vpl-page,
body main {
  position: relative !important;
  z-index: auto !important;
}

/* Le ruban reste décoratif : au-dessus des fonds, sous tout le contenu utile. */
body .vpl-scroll-ribbon {
  display: block !important;
  position: fixed !important;
  top: var(--vpl-ribbon-top, 0px) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: calc(100vh - var(--vpl-ribbon-top, 0px)) !important;
  z-index: 1 !important;
  opacity: .52 !important;
  pointer-events: none !important;
  mix-blend-mode: normal !important;
  overflow: hidden !important;
}

/* On garde uniquement le tracé animé, pas le chemin fantôme. */
body .vpl-ribbon-base {
  opacity: 0 !important;
  stroke: transparent !important;
}

body .vpl-ribbon-progress {
  stroke-width: 40 !important;
  stroke-dasharray: 1 !important;
  stroke-dashoffset: 1;
  opacity: .86 !important;
  filter:
    drop-shadow(0 0 10px rgba(255,255,255,.22))
    drop-shadow(0 0 24px rgba(69,143,213,.28)) !important;
}

body .vpl-ribbon-dot {
  opacity: 0;
}

body .vpl-scroll-ribbon.is-drawing .vpl-ribbon-dot {
  opacity: .86 !important;
}

/* Toutes les zones utiles repassent au-dessus du ruban. */
body .vpl-nav,
body header,
body footer,
body main > section > .container,
body main > section > .vpl-container,
body .vpl-container,
body .container,
body .card,
body .soft-card,
body .info-card,
body .stage-card,
body .faq-card,
body .proof-card,
body .audience-card,
body .pillar-card,
body .surface-panel,
body .glass-panel,
body .cta-panel,
body .hero-card,
body .vpl-card,
body .vpl-image-card,
body .vpl-inner-visual,
body .vpl-inner-stat,
body .stage-hero-panel,
body .stage-booking-summary,
body .stage-booking-form-card,
body .stage-orientation-grid,
body .stage-learn-grid,
body .stage-flow-list,
body .stage-compare-grid,
body .hp-hero-grid,
body .hp-hero-visual,
body .hp-band,
body .hp-band-track,
body .hp-problem-stack,
body .hp-learn-grid,
body .hp-flow-list,
body .hp-compare,
body form,
body details {
  position: relative !important;
  z-index: 3 !important;
}

/* La navbar reste toujours au-dessus. */
body .vpl-nav {
  z-index: 100 !important;
}

/* Les fonds de section restent derrière le ruban. */
body main > section,
body .vpl-hero,
body .vpl-inner-hero,
body .vpl-section,
body .vpl-section-dark,
body .vpl-light,
body .stage-hero-redesign,
body .stage-problem-section,
body .stage-learn-section,
body .stage-flow-section,
body .stage-compare-section,
body .stage-reservation-section,
body .stage-faq-section,
body .stage-final-cta,
body .hp-hero,
body .hp-section,
body .hp-final {
  position: relative !important;
  z-index: auto !important;
  isolation: auto !important;
}

/* Si une page avait explicitement caché le ruban desktop, on le réactive. */
body.page-methode .vpl-scroll-ribbon,
body.page-stage .vpl-scroll-ribbon,
body.page-stage-redesign .vpl-scroll-ribbon,
body.page-accueil-rythme .vpl-scroll-ribbon {
  display: block !important;
}

/* Sur mobile étroit, le ruban gêne plus qu'il n'aide. */
@media (max-width: 760px) {
  body .vpl-scroll-ribbon,
  body.page-methode .vpl-scroll-ribbon,
  body.page-stage .vpl-scroll-ribbon,
  body.page-stage-redesign .vpl-scroll-ribbon,
  body.page-accueil-rythme .vpl-scroll-ribbon {
    display: none !important;
  }
}

/* =========================================================
   Correctif global — bandeaux : tiret unique seulement
   ========================================================= */

/* Les tirets présents dans le HTML suffisent : on neutralise les tirets ajoutés par CSS. */
body .hp-band span::after,
body .hp-band span:not(:last-child)::after,
body .vpl-marquee span::after,
body .vpl-marquee span:not(:last-child)::after {
  content: none !important;
  display: none !important;
}

/* Bandeaux lisibles et sans double séparateur. */
body .hp-band,
body .vpl-marquee {
  color: #0a3153 !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(220,235,247,.92)) !important;
  border-block: 1px solid rgba(7,17,31,.10) !important;
}

body .hp-band span,
body .hp-band i,
body .vpl-marquee span,
body .vpl-marquee em {
  color: #0a3153 !important;
  opacity: 1 !important;
}

/* Séparateurs HTML. */
body .hp-band i,
body .vpl-marquee em {
  color: rgba(10,49,83,.55) !important;
}


/* =========================================================
   Correctif Stage — boutons, ruban et contraste final
   ========================================================= */

/* Le ruban reste derrière les cartes/boutons de la page Stage. */
body.page-stage .vpl-scroll-ribbon,
body.page-stage-redesign .vpl-scroll-ribbon {
  z-index: 1 !important;
  opacity: .46 !important;
  mix-blend-mode: normal !important;
}

body.page-stage .vpl-container,
body.page-stage-redesign .vpl-container,
body.page-stage .container,
body.page-stage-redesign .container,
body.page-stage .stage-flow-section .vpl-actions,
body.page-stage-redesign .stage-flow-section .vpl-actions,
body.page-stage .stage-flow-section .cta-actions,
body.page-stage-redesign .stage-flow-section .cta-actions,
body.page-stage .stage-learn-grid,
body.page-stage-redesign .stage-learn-grid,
body.page-stage .stage-flow-list,
body.page-stage-redesign .stage-flow-list,
body.page-stage .stage-final-box,
body.page-stage-redesign .stage-final-box {
  position: relative !important;
  z-index: 4 !important;
}

/* Dans les sections claires, les boutons ne doivent jamais redevenir des liens bruts. */
body.page-stage .stage-flow-section .vpl-actions,
body.page-stage-redesign .stage-flow-section .vpl-actions,
body.page-stage .stage-flow-section .cta-actions,
body.page-stage-redesign .stage-flow-section .cta-actions,
body.page-stage .stage-learn-section .vpl-actions,
body.page-stage-redesign .stage-learn-section .vpl-actions,
body.page-stage .stage-learn-section .cta-actions,
body.page-stage-redesign .stage-learn-section .cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  margin-top: 34px !important;
}

body.page-stage .stage-flow-section .vpl-actions a,
body.page-stage-redesign .stage-flow-section .vpl-actions a,
body.page-stage .stage-flow-section .cta-actions a,
body.page-stage-redesign .stage-flow-section .cta-actions a,
body.page-stage .stage-learn-section .vpl-actions a,
body.page-stage-redesign .stage-learn-section .vpl-actions a,
body.page-stage .stage-learn-section .cta-actions a,
body.page-stage-redesign .stage-learn-section .cta-actions a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  max-width: 100% !important;
  padding: 13px 22px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.15 !important;
  font-weight: 950 !important;
  border: 1px solid rgba(10,49,83,.18) !important;
  background: rgba(255,255,255,.92) !important;
  color: #0a3153 !important;
  box-shadow: 0 16px 42px rgba(8,14,28,.10) !important;
}

body.page-stage .stage-flow-section .vpl-actions a:first-child,
body.page-stage-redesign .stage-flow-section .vpl-actions a:first-child,
body.page-stage .stage-flow-section .cta-actions a:first-child,
body.page-stage-redesign .stage-flow-section .cta-actions a:first-child,
body.page-stage .stage-learn-section .vpl-actions a:first-child,
body.page-stage-redesign .stage-learn-section .vpl-actions a:first-child,
body.page-stage .stage-learn-section .cta-actions a:first-child,
body.page-stage-redesign .stage-learn-section .cta-actions a:first-child,
body.page-stage .stage-flow-section .vpl-button-primary,
body.page-stage-redesign .stage-flow-section .vpl-button-primary,
body.page-stage .stage-learn-section .vpl-button-primary,
body.page-stage-redesign .stage-learn-section .vpl-button-primary {
  background: #071f39 !important;
  border-color: #071f39 !important;
  color: #ffffff !important;
}

/* Bouton secondaire sur fond clair : lisible, pas blanc sur blanc, pas souligné. */
body.page-stage .stage-flow-section .vpl-button-secondary,
body.page-stage-redesign .stage-flow-section .vpl-button-secondary,
body.page-stage .stage-learn-section .vpl-button-secondary,
body.page-stage-redesign .stage-learn-section .vpl-button-secondary {
  background: rgba(255,255,255,.94) !important;
  color: #0a3153 !important;
  border: 1px solid rgba(10,49,83,.22) !important;
}

/* CTA final Stage : carte sombre, texte lisible. */
body.page-stage .stage-final-cta,
body.page-stage-redesign .stage-final-cta {
  background: #07111f !important;
  color: #ffffff !important;
}

body.page-stage .stage-final-box,
body.page-stage-redesign .stage-final-box,
body.page-stage .stage-final-cta .cta-panel,
body.page-stage-redesign .stage-final-cta .cta-panel {
  background:
    radial-gradient(circle at 76% 18%, rgba(90,165,230,.18), transparent 30%),
    linear-gradient(135deg, rgba(13,31,52,.96), rgba(5,12,24,.98)) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #ffffff !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.28) !important;
}

body.page-stage .stage-final-box h1,
body.page-stage .stage-final-box h2,
body.page-stage .stage-final-box h3,
body.page-stage .stage-final-box p,
body.page-stage .stage-final-box span,
body.page-stage .stage-final-box strong,
body.page-stage-redesign .stage-final-box h1,
body.page-stage-redesign .stage-final-box h2,
body.page-stage-redesign .stage-final-box h3,
body.page-stage-redesign .stage-final-box p,
body.page-stage-redesign .stage-final-box span,
body.page-stage-redesign .stage-final-box strong,
body.page-stage .stage-final-cta .cta-panel h1,
body.page-stage .stage-final-cta .cta-panel h2,
body.page-stage .stage-final-cta .cta-panel h3,
body.page-stage .stage-final-cta .cta-panel p,
body.page-stage-redesign .stage-final-cta .cta-panel h1,
body.page-stage-redesign .stage-final-cta .cta-panel h2,
body.page-stage-redesign .stage-final-cta .cta-panel h3,
body.page-stage-redesign .stage-final-cta .cta-panel p {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.page-stage .stage-final-box .vpl-button-secondary,
body.page-stage-redesign .stage-final-box .vpl-button-secondary,
body.page-stage .stage-final-cta .cta-panel .btn-outline,
body.page-stage-redesign .stage-final-cta .cta-panel .btn-outline {
  color: #ffffff !important;
  border-color: rgba(255,255,255,.35) !important;
  background: rgba(255,255,255,.08) !important;
  text-decoration: none !important;
}

@media (max-width: 760px) {
  body.page-stage .stage-flow-section .vpl-actions,
  body.page-stage-redesign .stage-flow-section .vpl-actions,
  body.page-stage .stage-flow-section .cta-actions,
  body.page-stage-redesign .stage-flow-section .cta-actions,
  body.page-stage .stage-learn-section .vpl-actions,
  body.page-stage-redesign .stage-learn-section .vpl-actions,
  body.page-stage .stage-learn-section .cta-actions,
  body.page-stage-redesign .stage-learn-section .cta-actions {
    justify-content: stretch !important;
  }

  body.page-stage .stage-flow-section .vpl-actions a,
  body.page-stage-redesign .stage-flow-section .vpl-actions a,
  body.page-stage .stage-flow-section .cta-actions a,
  body.page-stage-redesign .stage-flow-section .cta-actions a,
  body.page-stage .stage-learn-section .vpl-actions a,
  body.page-stage-redesign .stage-learn-section .vpl-actions a,
  body.page-stage .stage-learn-section .cta-actions a,
  body.page-stage-redesign .stage-learn-section .cta-actions a {
    width: 100% !important;
  }
}


/* =========================================================
   Correctif Stage V2 — vrais blocs ciblés : numéros doublés + contraste
   ========================================================= */

/* 1) Suppression des grands numéros en filigrane dans les petites cartes.
   On garde le vrai numéro en pastille, mais on retire le second numéro décoratif. */
body.page-stage .timeline-card::before,
body.page-stage .timeline-card::after,
body.page-stage-redesign .timeline-card::before,
body.page-stage-redesign .timeline-card::after,
body.page-stage .stage-learn-grid article::before,
body.page-stage .stage-learn-grid article::after,
body.page-stage-redesign .stage-learn-grid article::before,
body.page-stage-redesign .stage-learn-grid article::after,
body.page-stage .stage-flow-list article::before,
body.page-stage .stage-flow-list article::after,
body.page-stage-redesign .stage-flow-list article::before,
body.page-stage-redesign .stage-flow-list article::after,
body.page-stage .stage-card::before,
body.page-stage .stage-card::after,
body.page-stage-redesign .stage-card::before,
body.page-stage-redesign .stage-card::after {
  content: none !important;
  display: none !important;
}

/* Sécurité si la page stage est encore servie avec l'ancien HTML sans classe page-stage. */
body.vpl-inner-page .timeline-grid .timeline-card::before,
body.vpl-inner-page .timeline-grid .timeline-card::after {
  content: none !important;
  display: none !important;
}

/* 2) Les cartes "déroulé / étapes" restent propres après retrait du filigrane. */
body.page-stage .timeline-card,
body.page-stage-redesign .timeline-card,
body.vpl-inner-page .timeline-grid .timeline-card,
body.page-stage .stage-learn-grid article,
body.page-stage-redesign .stage-learn-grid article,
body.page-stage .stage-flow-list article,
body.page-stage-redesign .stage-flow-list article {
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.94) !important;
  color: #07111f !important;
}

body.page-stage .timeline-card h3,
body.page-stage-redesign .timeline-card h3,
body.vpl-inner-page .timeline-grid .timeline-card h3,
body.page-stage .stage-learn-grid h3,
body.page-stage-redesign .stage-learn-grid h3,
body.page-stage .stage-flow-list h3,
body.page-stage-redesign .stage-flow-list h3 {
  color: #07111f !important;
}

body.page-stage .timeline-card p,
body.page-stage-redesign .timeline-card p,
body.vpl-inner-page .timeline-grid .timeline-card p,
body.page-stage .stage-learn-grid p,
body.page-stage-redesign .stage-learn-grid p,
body.page-stage .stage-flow-list p,
body.page-stage-redesign .stage-flow-list p {
  color: #40536b !important;
}

/* 3) Contraste forcé pour la carte CTA sombre de la page Stage.
   Le texte ne doit jamais être blanc sur une carte claire/translucide. */
body.page-stage .stage-final-cta,
body.page-stage-redesign .stage-final-cta {
  background: #07111f !important;
}

body.page-stage .stage-final-box,
body.page-stage-redesign .stage-final-box,
body.page-stage .stage-final-cta .cta-panel,
body.page-stage-redesign .stage-final-cta .cta-panel,
body.page-stage .cta-stage,
body.page-stage-redesign .cta-stage {
  background:
    radial-gradient(circle at 78% 18%, rgba(74,184,255,.18), transparent 30%),
    linear-gradient(135deg, #10253d 0%, #07111f 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.32) !important;
  opacity: 1 !important;
}

body.page-stage .stage-final-box *,
body.page-stage-redesign .stage-final-box *,
body.page-stage .stage-final-cta .cta-panel *,
body.page-stage-redesign .stage-final-cta .cta-panel *,
body.page-stage .cta-stage *,
body.page-stage-redesign .cta-stage * {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

body.page-stage .stage-final-box p,
body.page-stage-redesign .stage-final-box p,
body.page-stage .stage-final-cta .cta-panel p,
body.page-stage-redesign .stage-final-cta .cta-panel p,
body.page-stage .cta-stage p,
body.page-stage-redesign .cta-stage p {
  color: rgba(255,255,255,.86) !important;
}

/* Les boutons secondaires dans cette carte restent visibles. */
body.page-stage .stage-final-box .vpl-button-secondary,
body.page-stage-redesign .stage-final-box .vpl-button-secondary,
body.page-stage .stage-final-cta .cta-panel .btn-outline,
body.page-stage-redesign .stage-final-cta .cta-panel .btn-outline,
body.page-stage .cta-stage .btn-outline,
body.page-stage-redesign .cta-stage .btn-outline {
  color: #ffffff !important;
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.36) !important;
}

/* 4) Le ruban bleu ne doit pas passer devant ces cartes. */
body.page-stage .timeline-grid,
body.page-stage-redesign .timeline-grid,
body.page-stage .stage-learn-grid,
body.page-stage-redesign .stage-learn-grid,
body.page-stage .stage-flow-list,
body.page-stage-redesign .stage-flow-list,
body.page-stage .stage-final-box,
body.page-stage-redesign .stage-final-box,
body.page-stage .cta-stage,
body.page-stage-redesign .cta-stage {
  position: relative !important;
  z-index: 5 !important;
}

body.page-stage .vpl-scroll-ribbon,
body.page-stage-redesign .vpl-scroll-ribbon {
  z-index: 1 !important;
}


/* =========================================================
   Correctif Stage V3 — bloc "Prévenir d’abord..." vraiment lisible
   ========================================================= */

/* Cible large mais focalisée sur le dernier bloc CTA sombre de la page stage */
body.page-stage .stage-final-cta,
body.page-stage-redesign .stage-final-cta,
body.page-stage .stage-final-cta > .vpl-container,
body.page-stage-redesign .stage-final-cta > .vpl-container,
body.page-stage .stage-final-box,
body.page-stage-redesign .stage-final-box,
body.page-stage .stage-final-cta .cta-panel,
body.page-stage-redesign .stage-final-cta .cta-panel,
body.page-stage .cta-stage,
body.page-stage-redesign .cta-stage {
  background:
    radial-gradient(circle at 78% 18%, rgba(74,184,255,.16), transparent 28%),
    linear-gradient(135deg, #102840 0%, #07111f 100%) !important;
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Force de contraste sur le titre et le paragraphe mentionnés par l'utilisateur */
body.page-stage .stage-final-cta h2,
body.page-stage-redesign .stage-final-cta h2,
body.page-stage .stage-final-cta h3,
body.page-stage-redesign .stage-final-cta h3,
body.page-stage .stage-final-cta p,
body.page-stage-redesign .stage-final-cta p,
body.page-stage .stage-final-box h2,
body.page-stage-redesign .stage-final-box h2,
body.page-stage .stage-final-box h3,
body.page-stage-redesign .stage-final-box h3,
body.page-stage .stage-final-box p,
body.page-stage-redesign .stage-final-box p,
body.page-stage .cta-stage h2,
body.page-stage-redesign .cta-stage h2,
body.page-stage .cta-stage h3,
body.page-stage-redesign .cta-stage h3,
body.page-stage .cta-stage p,
body.page-stage-redesign .cta-stage p {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Si une ancienne opacité ou couleur très claire est injectée sur les descendants */
body.page-stage .stage-final-cta *,
body.page-stage-redesign .stage-final-cta *,
body.page-stage .stage-final-box *,
body.page-stage-redesign .stage-final-box *,
body.page-stage .cta-stage *,
body.page-stage-redesign .cta-stage * {
  opacity: 1 !important;
}

body.page-stage .stage-final-cta p,
body.page-stage-redesign .stage-final-cta p,
body.page-stage .stage-final-box p,
body.page-stage-redesign .stage-final-box p,
body.page-stage .cta-stage p,
body.page-stage-redesign .cta-stage p {
  color: rgba(255,255,255,.90) !important;
}

/* Boutons dans ce bloc : visibles et cohérents */
body.page-stage .stage-final-cta a,
body.page-stage-redesign .stage-final-cta a,
body.page-stage .stage-final-box a,
body.page-stage-redesign .stage-final-box a,
body.page-stage .cta-stage a,
body.page-stage-redesign .cta-stage a {
  position: relative !important;
  z-index: 6 !important;
}

body.page-stage .stage-final-cta .vpl-button-primary,
body.page-stage-redesign .stage-final-cta .vpl-button-primary,
body.page-stage .stage-final-box .vpl-button-primary,
body.page-stage-redesign .stage-final-box .vpl-button-primary,
body.page-stage .cta-stage .vpl-button-primary,
body.page-stage-redesign .cta-stage .vpl-button-primary {
  background: #dff6ff !important;
  color: #07111f !important;
  border-color: rgba(223,246,255,.9) !important;
}

body.page-stage .stage-final-cta .vpl-button-secondary,
body.page-stage-redesign .stage-final-cta .vpl-button-secondary,
body.page-stage .stage-final-box .vpl-button-secondary,
body.page-stage-redesign .stage-final-box .vpl-button-secondary,
body.page-stage .cta-stage .vpl-button-secondary,
body.page-stage-redesign .cta-stage .vpl-button-secondary,
body.page-stage .stage-final-cta .btn-outline,
body.page-stage-redesign .stage-final-cta .btn-outline,
body.page-stage .stage-final-box .btn-outline,
body.page-stage-redesign .stage-final-box .btn-outline,
body.page-stage .cta-stage .btn-outline,
body.page-stage-redesign .cta-stage .btn-outline {
  background: rgba(255,255,255,.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  text-decoration: none !important;
}


/* =========================================================
   Correctif Stage V4 — override final, même sur ancienne structure HTML
   ========================================================= */

/* Bloc CTA final de la page Stage, y compris anciennes versions :
   - .stage-final-box
   - .cta-panel.cta-stage
   - dernier .cta-panel d'une page interne
*/
body.vpl-inner-page main > section:last-of-type .cta-panel,
body.vpl-inner-page main > section:last-of-type .cta-stage,
body.vpl-inner-page main > section:last-of-type .stage-final-box,
body.vpl-inner-page .cta-panel.cta-stage,
body.vpl-inner-page .cta-stage,
body.page-stage .cta-panel,
body.page-stage-redesign .cta-panel,
body.page-stage .stage-final-box,
body.page-stage-redesign .stage-final-box {
  background:
    radial-gradient(circle at 78% 18%, rgba(74,184,255,.18), transparent 30%),
    linear-gradient(135deg, #102840 0%, #07111f 100%) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  box-shadow: 0 28px 90px rgba(0,0,0,.34) !important;
}

/* Texte du bloc CTA final : forçage absolu du contraste. */
body.vpl-inner-page main > section:last-of-type .cta-panel h1,
body.vpl-inner-page main > section:last-of-type .cta-panel h2,
body.vpl-inner-page main > section:last-of-type .cta-panel h3,
body.vpl-inner-page main > section:last-of-type .cta-panel p,
body.vpl-inner-page main > section:last-of-type .cta-panel span,
body.vpl-inner-page main > section:last-of-type .cta-panel strong,
body.vpl-inner-page main > section:last-of-type .stage-final-box h1,
body.vpl-inner-page main > section:last-of-type .stage-final-box h2,
body.vpl-inner-page main > section:last-of-type .stage-final-box h3,
body.vpl-inner-page main > section:last-of-type .stage-final-box p,
body.vpl-inner-page main > section:last-of-type .stage-final-box span,
body.vpl-inner-page main > section:last-of-type .stage-final-box strong,
body.vpl-inner-page .cta-panel.cta-stage h1,
body.vpl-inner-page .cta-panel.cta-stage h2,
body.vpl-inner-page .cta-panel.cta-stage h3,
body.vpl-inner-page .cta-panel.cta-stage p,
body.vpl-inner-page .cta-panel.cta-stage span,
body.vpl-inner-page .cta-panel.cta-stage strong,
body.vpl-inner-page .cta-stage h1,
body.vpl-inner-page .cta-stage h2,
body.vpl-inner-page .cta-stage h3,
body.vpl-inner-page .cta-stage p,
body.vpl-inner-page .cta-stage span,
body.vpl-inner-page .cta-stage strong,
body.page-stage .stage-final-box h1,
body.page-stage .stage-final-box h2,
body.page-stage .stage-final-box h3,
body.page-stage .stage-final-box p,
body.page-stage .stage-final-box span,
body.page-stage .stage-final-box strong,
body.page-stage-redesign .stage-final-box h1,
body.page-stage-redesign .stage-final-box h2,
body.page-stage-redesign .stage-final-box h3,
body.page-stage-redesign .stage-final-box p,
body.page-stage-redesign .stage-final-box span,
body.page-stage-redesign .stage-final-box strong {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

/* Paragraphes du CTA : blanc légèrement adouci, mais toujours lisible. */
body.vpl-inner-page main > section:last-of-type .cta-panel p,
body.vpl-inner-page main > section:last-of-type .stage-final-box p,
body.vpl-inner-page .cta-panel.cta-stage p,
body.vpl-inner-page .cta-stage p,
body.page-stage .stage-final-box p,
body.page-stage-redesign .stage-final-box p {
  color: rgba(255,255,255,.90) !important;
}

/* Boutons du CTA final. */
body.vpl-inner-page main > section:last-of-type .cta-panel a,
body.vpl-inner-page main > section:last-of-type .stage-final-box a,
body.vpl-inner-page .cta-panel.cta-stage a,
body.vpl-inner-page .cta-stage a,
body.page-stage .stage-final-box a,
body.page-stage-redesign .stage-final-box a {
  opacity: 1 !important;
  text-decoration: none !important;
}

/* Suppression du deuxième numéro, y compris en pseudo-élément simple ":" et anciennes structures. */
body.vpl-inner-page .timeline-card:before,
body.vpl-inner-page .timeline-card:after,
body.vpl-inner-page .timeline-card::before,
body.vpl-inner-page .timeline-card::after,
body.vpl-inner-page .stage-learn-grid article:before,
body.vpl-inner-page .stage-learn-grid article:after,
body.vpl-inner-page .stage-learn-grid article::before,
body.vpl-inner-page .stage-learn-grid article::after,
body.vpl-inner-page .stage-flow-list article:before,
body.vpl-inner-page .stage-flow-list article:after,
body.vpl-inner-page .stage-flow-list article::before,
body.vpl-inner-page .stage-flow-list article::after {
  content: none !important;
  display: none !important;
}

/* Si le numéro décoratif est un vrai élément HTML. */
body.vpl-inner-page .timeline-card .ghost-number,
body.vpl-inner-page .timeline-card .bg-number,
body.vpl-inner-page .timeline-card .card-number-bg,
body.vpl-inner-page .timeline-card .number-bg,
body.vpl-inner-page .timeline-card [aria-hidden="true"],
body.vpl-inner-page .stage-learn-grid article .ghost-number,
body.vpl-inner-page .stage-learn-grid article .bg-number,
body.vpl-inner-page .stage-flow-list article .ghost-number,
body.vpl-inner-page .stage-flow-list article .bg-number {
  display: none !important;
}


/* =========================================================
   Correctif HERO — encart sous l'image enfin lisible
   ========================================================= */

/* Ce bloc est celui visible sous l'image du hero :
   "Prévenir d’abord. Réagir seulement si nécessaire." */
body.page-methode .vpl-inner-visual .vpl-inner-stat,
body.page-stage .vpl-inner-visual .vpl-inner-stat,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat {
  background: rgba(255, 255, 255, .96) !important;
  color: #07111f !important;
  opacity: 1 !important;
  border: 1px solid rgba(7, 17, 31, .12) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .24) !important;
  backdrop-filter: blur(14px) !important;
}

/* Forçage du titre et du texte dans l'encart, même si une ancienne règle les met en blanc. */
body.page-methode .vpl-inner-visual .vpl-inner-stat *,
body.page-stage .vpl-inner-visual .vpl-inner-stat *,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat * {
  opacity: 1 !important;
  text-shadow: none !important;
}

body.page-methode .vpl-inner-visual .vpl-inner-stat strong,
body.page-methode .vpl-inner-visual .vpl-inner-stat h1,
body.page-methode .vpl-inner-visual .vpl-inner-stat h2,
body.page-methode .vpl-inner-visual .vpl-inner-stat h3,
body.page-stage .vpl-inner-visual .vpl-inner-stat strong,
body.page-stage .vpl-inner-visual .vpl-inner-stat h1,
body.page-stage .vpl-inner-visual .vpl-inner-stat h2,
body.page-stage .vpl-inner-visual .vpl-inner-stat h3,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat strong,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat h1,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat h2,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat h3 {
  color: #07111f !important;
}

body.page-methode .vpl-inner-visual .vpl-inner-stat span,
body.page-methode .vpl-inner-visual .vpl-inner-stat p,
body.page-stage .vpl-inner-visual .vpl-inner-stat span,
body.page-stage .vpl-inner-visual .vpl-inner-stat p,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat span,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat p {
  color: #34465d !important;
}

/* Variante si le même encart apparaît avec une autre structure dans la page méthode. */
body.page-methode .vpl-inner-stat,
body.page-methode .vpl-inner-stat * {
  opacity: 1 !important;
  text-shadow: none !important;
}

body.page-methode .vpl-inner-stat {
  background: rgba(255, 255, 255, .96) !important;
  color: #07111f !important;
}

body.page-methode .vpl-inner-stat strong,
body.page-methode .vpl-inner-stat h1,
body.page-methode .vpl-inner-stat h2,
body.page-methode .vpl-inner-stat h3 {
  color: #07111f !important;
}

body.page-methode .vpl-inner-stat span,
body.page-methode .vpl-inner-stat p {
  color: #34465d !important;
}


/* =========================================================
   Correctif final — suppression de l'encart sous image hero
   ========================================================= */

/* L'encart sous les images hero est retiré uniquement sur les pages prévues.
   Important : ne pas cibler body.vpl-inner-page, utilisé par presque toutes les pages. */
body.page-methode .vpl-inner-visual .vpl-inner-stat,
body.page-methode .vpl-inner-stat,
body.page-stage .vpl-inner-visual .vpl-inner-stat,
body.page-stage .vpl-inner-stat,
body.page-stage-redesign .vpl-inner-visual .vpl-inner-stat,
body.page-stage-redesign .vpl-inner-stat {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* L'image hero reprend une position propre quand l'encart est retiré. */
body.page-methode .vpl-inner-visual,
body.page-stage .vpl-inner-visual,
body.page-stage-redesign .vpl-inner-visual {
  min-height: auto !important;
  align-content: center !important;
}

body.page-methode .vpl-inner-visual img,
body.page-stage .vpl-inner-visual img,
body.page-stage-redesign .vpl-inner-visual img {
  margin-bottom: 0 !important;
}


/* =========================================================
   Ajout visuels réels — sections image utiles et équilibrage
   ========================================================= */
.vp-visual-story {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 8vw, 126px) 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(73, 159, 225, .10), transparent 28%),
    linear-gradient(180deg, #edf4f9 0%, #f8fbff 100%);
}

.vp-visual-story--home,
.vp-visual-story--method,
.vp-visual-story--trainer {
  background:
    radial-gradient(circle at 80% 16%, rgba(74, 184, 255, .12), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #edf4f9 100%);
}

.vp-visual-story--stage,
.vp-visual-story--enterprise {
  background:
    radial-gradient(circle at 18% 20%, rgba(74, 184, 255, .12), transparent 24%),
    linear-gradient(135deg, #07111f 0%, #0d2943 100%);
  color: #fff;
}

.vp-visual-story-grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(360px, 1fr);
  gap: clamp(28px, 6vw, 78px);
  align-items: center;
}

.vp-visual-story-grid--reverse {
  grid-template-columns: minmax(360px, 1fr) minmax(0, .84fr);
}

.vp-visual-story-grid--reverse .vp-visual-copy {
  order: 2;
}

.vp-visual-story-grid--reverse .vp-visual-mosaic,
.vp-visual-story-grid--reverse > .vp-image-card {
  order: 1;
}

.vp-visual-copy h2 {
  max-width: 11.5ch;
  margin: 14px 0 0;
  color: #07111f;
  font-size: clamp(2.8rem, 5.4vw, 5.8rem);
  line-height: .94;
  letter-spacing: -.075em;
  font-weight: 950;
  text-wrap: balance;
}

.vp-visual-copy p {
  max-width: 58ch;
  margin: 24px 0 0;
  color: #40536b;
  font-size: clamp(1rem, 1.25vw, 1.12rem);
  line-height: 1.78;
}

.vp-visual-story--stage .vp-visual-copy h2,
.vp-visual-story--enterprise .vp-visual-copy h2,
.vp-visual-story--stage .vp-visual-copy p,
.vp-visual-story--enterprise .vp-visual-copy p,
.vp-visual-story--stage .eyebrow,
.vp-visual-story--enterprise .eyebrow {
  color: #fff !important;
}

.vp-visual-story--stage .vp-visual-copy p,
.vp-visual-story--enterprise .vp-visual-copy p {
  color: rgba(255,255,255,.78) !important;
}

.vp-visual-mosaic {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: stretch;
}

.vp-visual-mosaic--wide {
  grid-template-columns: 1fr;
}

.vp-image-card {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 30vw, 460px);
  border-radius: clamp(24px, 3vw, 38px);
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.64);
  box-shadow: 0 28px 90px rgba(8,14,28,.16);
  transform: translateY(0);
  animation: vpVisualReveal .75s ease both;
}

.vp-image-card--tall {
  min-height: clamp(420px, 48vw, 680px);
}

.vp-image-card--wide {
  min-height: clamp(330px, 38vw, 560px);
}

.vp-image-card img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
}

.vp-image-card:hover img {
  transform: scale(1.035);
}

.vp-mini-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.vp-mini-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: 999px;
  color: #0a3153;
  background: #fff;
  border: 1px solid rgba(7,17,31,.10);
  font-weight: 850;
  font-size: .88rem;
  line-height: 1.15;
}

.vp-visual-story--stage .vp-mini-proof span,
.vp-visual-story--enterprise .vp-mini-proof span {
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

@keyframes vpVisualReveal {
  from { opacity: 0; transform: translateY(24px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* L'image hero de la page Standard prend un peu plus de poids visuel après suppression de l'encart. */
body.page-methode .vpl-inner-visual img {
  width: min(620px, 100%) !important;
  max-height: none !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: 82% center !important;
}

/* Hero accueil : la bannière large doit rester lisible dans la carte. */
body.page-accueil-rythme .hp-hero-photo {
  aspect-ratio: 16 / 8.2 !important;
}

body.page-accueil-rythme .hp-hero-photo img {
  object-position: center !important;
}

/* Ruban bleu : derrière les nouvelles images, jamais devant. */
.vp-visual-story .vpl-container,
.vp-visual-story .container,
.vp-visual-story-grid,
.vp-image-card,
.vp-visual-copy {
  position: relative;
  z-index: 4;
}

@media (max-width: 980px) {
  .vp-visual-story-grid,
  .vp-visual-story-grid--reverse {
    grid-template-columns: 1fr;
  }

  .vp-visual-story-grid--reverse .vp-visual-copy,
  .vp-visual-story-grid--reverse .vp-visual-mosaic,
  .vp-visual-story-grid--reverse > .vp-image-card {
    order: initial;
  }

  .vp-visual-copy h2 {
    max-width: 12ch;
  }
}

@media (max-width: 680px) {
  .vp-visual-story {
    padding: 58px 0;
  }

  .vp-visual-mosaic {
    grid-template-columns: 1fr;
  }

  .vp-image-card,
  .vp-image-card--tall,
  .vp-image-card--wide {
    min-height: 260px;
    border-radius: 24px;
  }

  .vp-visual-copy h2 {
    font-size: clamp(2.35rem, 12vw, 3.85rem);
    line-height: .98;
  }
}


/* =========================================================
   Correctif accueil — section visuelle sans capture parasite
   ========================================================= */
body.page-accueil-rythme .vp-home-visual-clean {
  background:
    radial-gradient(circle at 86% 20%, rgba(74,184,255,.12), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #edf4f9 100%) !important;
}

body.page-accueil-rythme .vp-home-visual-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(460px, 1.05fr);
  gap: clamp(32px, 6vw, 86px);
  align-items: center;
  position: relative;
  z-index: 4;
}

body.page-accueil-rythme .vp-home-visual-panel {
  display: grid;
  gap: 16px;
  padding: 14px;
  border-radius: 36px;
  border: 1px solid rgba(7,17,31,.10);
  background: rgba(255,255,255,.70);
  box-shadow: 0 28px 90px rgba(8,14,28,.16);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 4;
}

body.page-accueil-rythme .vp-home-visual-panel figure {
  margin: 0;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(7,17,31,.08);
  background: #dce8f3;
}

body.page-accueil-rythme .vp-home-visual-panel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.page-accueil-rythme .vp-home-visual-main {
  aspect-ratio: 16 / 7.2;
}

body.page-accueil-rythme .vp-home-visual-duo {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
}

body.page-accueil-rythme .vp-home-visual-duo figure {
  aspect-ratio: 4 / 3;
}

body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
  object-position: center center;
}

body.page-accueil-rythme .vp-home-visual-duo figure:last-child img {
  object-position: center center;
}

body.page-accueil-rythme .vp-home-visual-clean .vp-visual-copy h2 {
  max-width: 12ch;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .vp-home-visual-grid {
    grid-template-columns: 1fr;
  }

  body.page-accueil-rythme .vp-home-visual-panel {
    max-width: 760px;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    padding: 10px;
    border-radius: 26px;
  }

  body.page-accueil-rythme .vp-home-visual-main,
  body.page-accueil-rythme .vp-home-visual-duo figure {
    aspect-ratio: 4 / 3;
  }

  body.page-accueil-rythme .vp-home-visual-duo {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}


/* =========================================================
   Correctif accueil — recadrage de l’image hero pour masquer le texte intégré
   ========================================================= */

/* On pousse le cadrage vers la droite pour que la zone texte imprimée dans l’image
   sorte du cadre visible. */
body.page-accueil-rythme .hp-hero-photo {
  overflow: hidden !important;
}

body.page-accueil-rythme .hp-hero-photo img {
  width: 118% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 86% center !important;
  transform: translateX(0) scale(1.02) !important;
  transform-origin: center center !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-hero-photo img {
    width: 124% !important;
    object-position: 88% center !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .hp-hero-photo img {
    width: 132% !important;
    object-position: 90% center !important;
  }
}


/* =========================================================
   Page Standard — effet flip image strictement isolé
   ========================================================= */
body.page-methode .vp-image-flip {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  perspective: 1400px;
}

body.page-methode .vp-image-flip__toggle {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
  pointer-events: none;
}

body.page-methode .vp-image-flip__card {
  position: relative;
  display: block;
  width: 100%;
  min-height: clamp(320px, 44vw, 560px);
  border-radius: clamp(24px, 3vw, 38px);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.16, 1, .3, 1);
}

body.page-methode .vp-image-flip__toggle:focus-visible + .vp-image-flip__card {
  outline: 3px solid rgba(74, 184, 255, .82);
  outline-offset: 6px;
}

body.page-methode .vp-image-flip__toggle:checked + .vp-image-flip__card {
  transform: rotateY(180deg);
}

body.page-methode .vp-image-flip__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.32);
  background: #dce8f3;
  box-shadow: 0 28px 90px rgba(8,14,28,.16);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

body.page-methode .vp-image-flip__face--back {
  transform: rotateY(180deg);
}

body.page-methode .vp-image-flip__face img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: center;
}

body.page-methode .vp-image-flip__badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 9px 14px;
  border-radius: 999px;
  color: #07111f;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(7,17,31,.10);
  box-shadow: 0 16px 36px rgba(0,0,0,.16);
  font-size: .88rem;
  line-height: 1.1;
  font-weight: 900;
}

body.page-methode .vp-image-flip__caption {
  margin: 0;
  color: #40536b;
  font-size: .94rem;
  line-height: 1.5;
  text-align: center;
}

@media (hover: hover) {
  body.page-methode .vp-image-flip__card:hover .vp-image-flip__face img {
    transform: scale(1.025);
  }

  body.page-methode .vp-image-flip__face img {
    transition: transform .75s cubic-bezier(.16, 1, .3, 1);
  }
}

@media (max-width: 680px) {
  body.page-methode .vp-image-flip__card {
    min-height: 280px;
    border-radius: 24px;
  }

  body.page-methode .vp-image-flip__badge {
    left: 12px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-methode .vp-image-flip__card,
  body.page-methode .vp-image-flip__face img {
    transition: none !important;
  }
}


/* =========================================================
   Hotfix accueil — collage visuel stable
   ---------------------------------------------------------
   Le correctif flip de la page Standard ne doit jamais laisser
   la section visuelle d'accueil s'étirer ni créer un vide entre
   l'image principale et les deux images basses.
   ========================================================= */
body.page-accueil-rythme .vp-home-visual-panel {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 720px !important;
  justify-self: end !important;
  align-self: center !important;
  overflow: hidden !important;
}

body.page-accueil-rythme .vp-home-visual-panel figure {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body.page-accueil-rythme .vp-home-visual-panel figure > img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
}

body.page-accueil-rythme .vp-home-visual-main {
  aspect-ratio: 16 / 6.9 !important;
  min-height: 0 !important;
}

body.page-accueil-rythme .vp-home-visual-duo {
  display: grid !important;
  grid-template-columns: .96fr 1.04fr !important;
  gap: 16px !important;
  margin: 0 !important;
  min-height: 0 !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure {
  aspect-ratio: 16 / 10.2 !important;
  min-height: 0 !important;
}

body.page-accueil-rythme .vp-home-visual-main img {
  object-position: 72% center !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
  object-position: center 45% !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:last-child img {
  object-position: center center !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    justify-self: start !important;
    max-width: 760px !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    gap: 10px !important;
  }

  body.page-accueil-rythme .vp-home-visual-main,
  body.page-accueil-rythme .vp-home-visual-duo figure {
    aspect-ratio: 4 / 3 !important;
  }

  body.page-accueil-rythme .vp-home-visual-duo {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}


/* =========================================================
   Hotfix accueil — demande 2 photos uniquement
   ---------------------------------------------------------
   - Supprime la photo de briefing barrée dans le HTML.
   - Agrandit la photo d'exercice en pleine largeur basse.
   - Recadre l'image haute vers la droite pour masquer le texte
     imprimé dans le visuel source.
   ========================================================= */
body.page-accueil-rythme .vp-home-visual-main {
  overflow: hidden !important;
}

body.page-accueil-rythme .vp-home-visual-main img {
  object-position: 100% center !important;
  transform: scale(1.46) !important;
  transform-origin: right center !important;
}

body.page-accueil-rythme .vp-home-visual-duo,
body.page-accueil-rythme .vp-home-visual-duo--single {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

body.page-accueil-rythme .vp-home-visual-duo--single figure,
body.page-accueil-rythme .vp-home-visual-duo figure:only-child {
  aspect-ratio: 16 / 7.3 !important;
  width: 100% !important;
  min-height: 0 !important;
}

body.page-accueil-rythme .vp-home-visual-duo--single figure img,
body.page-accueil-rythme .vp-home-visual-duo figure:only-child img {
  /* Cadrage légèrement abaissé pour garder la tête du formateur visible. */
  object-position: center 34% !important;
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vp-home-visual-main img {
    transform: scale(1.32) !important;
  }

  body.page-accueil-rythme .vp-home-visual-duo--single figure,
  body.page-accueil-rythme .vp-home-visual-duo figure:only-child {
    aspect-ratio: 4 / 3 !important;
  }
}

/* =========================================================
   Hotfix Page Standard — flip photo dos-à-dos, même format
   ---------------------------------------------------------
   Objectif : une seule photo visible à la fois. Au clic, la
   carte se retourne pour afficher la deuxième photo au verso,
   dans exactement le même cadre.
   ========================================================= */
body.page-methode .vp-image-flip {
  max-width: min(760px, 100%) !important;
  perspective: 1600px !important;
  perspective-origin: 50% 50% !important;
}

body.page-methode .vp-image-flip__card {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  min-height: 0 !important;
  height: auto !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  transition: transform .72s cubic-bezier(.16, 1, .3, 1) !important;
  will-change: transform !important;
  cursor: pointer !important;
}

body.page-methode .vp-image-flip__toggle:checked + .vp-image-flip__card {
  transform: rotateY(180deg) !important;
}

body.page-methode .vp-image-flip__face {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: inherit !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
}

body.page-methode .vp-image-flip__face--front {
  transform: rotateY(0deg) translateZ(1px) !important;
}

body.page-methode .vp-image-flip__face--back {
  transform: rotateY(180deg) translateZ(1px) !important;
}

body.page-methode .vp-image-flip__face img {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  object-fit: cover !important;
  transform: translateZ(0) !important;
}

/* Photo briefing verticale : cadrée pour garder le formateur, le tableau et le groupe visibles. */
body.page-methode .vp-image-flip__face--front img {
  object-position: center 36% !important;
}

/* Photo pratique horizontale : même cadre, cadrage naturel. */
body.page-methode .vp-image-flip__face--back img {
  object-position: center center !important;
}

body.page-methode .vp-image-flip__badge {
  transform: translateZ(2px) !important;
  pointer-events: none !important;
}

body.page-methode .vp-image-flip__caption {
  max-width: 46ch !important;
  margin-inline: auto !important;
}

@media (max-width: 680px) {
  body.page-methode .vp-image-flip__card {
    aspect-ratio: 4 / 3 !important;
    min-height: 0 !important;
    border-radius: 24px !important;
  }
}




/* =========================================================
   Hotfix Page Standard — flip déclenché au scroll
   ---------------------------------------------------------
   La carte garde le même format, sans badge ni texte sous
   l'image. En arrivant dans la section, un scroll supplémentaire
   retourne la photo avant de reprendre le défilement normal.
   ========================================================= */
body.page-methode .vp-image-flip__badge,
body.page-methode .vp-image-flip__caption {
  display: none !important;
}

body.page-methode .vp-image-flip__face--front img {
  object-position: center 28% !important;
}

body.page-methode .vp-image-flip__face--back img {
  object-position: center 46% !important;
}

body.page-methode .vp-flip-scroll-section .vp-image-flip__card {
  cursor: pointer !important;
}


/* =========================================================
   Page Standard — animation scroll des 5 piliers
   ---------------------------------------------------------
   Intégration de l'animation fournie, avec classes préfixées
   pour éviter d'impacter les autres grilles de cartes du site.
   ========================================================= */
body.page-methode .vp-scroll-pillars-section {
  --vp-pillars-ink: #0f1f31;
  --vp-pillars-muted: #5f6d7e;
  --vp-pillars-blue-soft: rgba(151, 206, 255, 0.32);
  --vp-pillars-edge: #dce8f3;
  --vp-pillars-shadow: 0 24px 70px rgba(30, 68, 104, 0.16);
  --vp-pillars-ease: cubic-bezier(.18, .9, .2, 1);
  position: relative !important;
  min-height: 315vh !important;
  overflow: clip !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.95), rgba(255,255,255,0) 28%),
    linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%) !important;
  color: var(--vp-pillars-ink) !important;
}

body.page-methode .vp-scroll-pillars-sticky {
  position: sticky !important;
  top: 0 !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(32px, 5vw, 72px) 24px !important;
  isolation: isolate !important;
}

body.page-methode .vp-scroll-pillars-wrap {
  width: min(1320px, 100%) !important;
  margin-inline: auto !important;
  position: relative !important;
  z-index: 2 !important;
}

body.page-methode .vp-scroll-pillars-head {
  margin-bottom: clamp(44px, 7vh, 76px) !important;
}

body.page-methode .vp-scroll-pillars-head h2 {
  margin: 0 !important;
  text-align: center !important;
  font-size: clamp(48px, 7vw, 108px) !important;
  line-height: .9 !important;
  letter-spacing: -0.08em !important;
  font-weight: 900 !important;
}

body.page-methode .vp-scroll-pillars-head p {
  max-width: 600px !important;
  margin: 22px auto 0 !important;
  text-align: center !important;
  color: var(--vp-pillars-muted) !important;
  font-size: clamp(16px, 1.35vw, 20px) !important;
  line-height: 1.7 !important;
}

body.page-methode .vp-scroll-pillars-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
  align-items: end !important;
  gap: clamp(16px, 2vw, 28px) !important;
  perspective: 1200px !important;
}

body.page-methode .vp-scroll-pillar-card {
  --delay: 0ms;
  min-height: clamp(330px, 38vh, 430px) !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  opacity: 0;
  transform: translateY(42vh) scale(.9) rotateX(8deg);
  filter: blur(8px);
  transition:
    opacity 720ms var(--vp-pillars-ease) var(--delay),
    transform 1000ms var(--vp-pillars-ease) var(--delay),
    filter 900ms var(--vp-pillars-ease) var(--delay) !important;
  will-change: transform, opacity, filter !important;
}

body.page-methode .vp-scroll-pillar-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  filter: blur(0);
}

body.page-methode .vp-scroll-pillars-section.vp-scroll-pillars-complete .vp-scroll-pillar-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  transition-duration: .01ms !important;
}

body.page-methode .vp-scroll-pillar-capital,
body.page-methode .vp-scroll-pillar-base {
  width: 86% !important;
  margin-inline: auto !important;
  background: linear-gradient(90deg, #edf5fc 0%, #fff 18%, #fff 50%, #eaf3fb 100%) !important;
  border: 1px solid rgba(201, 218, 232, .9) !important;
  box-shadow: var(--vp-pillars-shadow) !important;
}

body.page-methode .vp-scroll-pillar-capital {
  height: 48px !important;
  border-radius: 24px 24px 10px 10px !important;
  position: relative !important;
  transform-origin: bottom center !important;
}

body.page-methode .vp-scroll-pillar-capital::before,
body.page-methode .vp-scroll-pillar-capital::after,
body.page-methode .vp-scroll-pillar-base::before {
  content: "";
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: inherit !important;
  border: inherit !important;
  box-shadow: 0 12px 30px rgba(30, 68, 104, .08) !important;
}

body.page-methode .vp-scroll-pillar-capital::before {
  width: 118% !important;
  height: 18px !important;
  bottom: -10px !important;
  border-radius: 999px !important;
}

body.page-methode .vp-scroll-pillar-capital::after {
  width: 72% !important;
  height: 13px !important;
  top: 9px !important;
  border-radius: 999px !important;
  opacity: .75 !important;
}

body.page-methode .vp-scroll-pillar-shaft {
  position: relative !important;
  margin: 4px auto 0 !important;
  width: 78% !important;
  padding: 44px 24px 34px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  border: 1px solid var(--vp-pillars-edge) !important;
  border-radius: 999px 999px 34px 34px / 42px 42px 34px 34px !important;
  background:
    linear-gradient(90deg,
      rgba(206, 223, 238, .65) 0 4%,
      rgba(255,255,255,0) 4% 13%,
      rgba(206, 223, 238, .55) 13% 17%,
      rgba(255,255,255,0) 17% 30%,
      rgba(206, 223, 238, .45) 30% 34%,
      rgba(255,255,255,0) 34% 47%,
      rgba(206, 223, 238, .45) 47% 51%,
      rgba(255,255,255,0) 51% 64%,
      rgba(206, 223, 238, .5) 64% 68%,
      rgba(255,255,255,0) 68% 81%,
      rgba(206, 223, 238, .65) 81% 85%,
      rgba(255,255,255,0) 85% 100%),
    linear-gradient(110deg, #edf5fc 0%, #fff 22%, #fff 56%, #edf5fc 100%) !important;
  box-shadow: var(--vp-pillars-shadow) !important;
  overflow: hidden !important;
}

body.page-methode .vp-scroll-pillar-shaft::before {
  content: "";
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 38%, rgba(151,206,255,.10)) !important;
  pointer-events: none !important;
}

body.page-methode .vp-scroll-pillar-medallion {
  position: relative !important;
  z-index: 1 !important;
  width: 46px !important;
  height: 46px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 20px !important;
  border-radius: 999px !important;
  background: var(--vp-pillars-ink) !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(15, 31, 49, .18) !important;
}

body.page-methode .vp-scroll-pillar-card h3 {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 0 14px !important;
  text-align: center !important;
  font-size: clamp(18px, 1.45vw, 24px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em !important;
}

body.page-methode .vp-scroll-pillar-card p {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  color: var(--vp-pillars-muted) !important;
  text-align: center !important;
  font-size: clamp(14px, 1.05vw, 17px) !important;
  line-height: 1.55 !important;
}

body.page-methode .vp-scroll-pillar-base {
  position: relative !important;
  height: 54px !important;
  margin-top: 0 !important;
  border-radius: 12px 12px 28px 28px !important;
}

body.page-methode .vp-scroll-pillar-base::before {
  width: 122% !important;
  height: 18px !important;
  top: -10px !important;
  border-radius: 999px !important;
}

body.page-methode .vp-scroll-pillar-card:nth-child(2) { min-height: clamp(352px, 41vh, 462px) !important; }
body.page-methode .vp-scroll-pillar-card:nth-child(3) { min-height: clamp(374px, 44vh, 492px) !important; }
body.page-methode .vp-scroll-pillar-card:nth-child(4) { min-height: clamp(352px, 41vh, 462px) !important; }
body.page-methode .vp-scroll-pillar-card:nth-child(5) { min-height: clamp(330px, 38vh, 430px) !important; }

body.page-methode .vp-scroll-pillar-card:nth-child(1) { --delay: 0ms; }
body.page-methode .vp-scroll-pillar-card:nth-child(2) { --delay: 80ms; }
body.page-methode .vp-scroll-pillar-card:nth-child(3) { --delay: 160ms; }
body.page-methode .vp-scroll-pillar-card:nth-child(4) { --delay: 240ms; }
body.page-methode .vp-scroll-pillar-card:nth-child(5) { --delay: 320ms; }

body.page-methode .vp-scroll-pillars-decor {
  display: none !important;
}

body.page-methode .vp-scroll-pillars-grain {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  opacity: .35 !important;
  pointer-events: none !important;
  background-image: radial-gradient(circle, rgba(119, 175, 226, .35) 1.4px, transparent 1.6px) !important;
  background-size: 84px 84px !important;
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 86%, transparent) !important;
}

body.page-methode .vp-scroll-pillars-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #748396 !important;
  font-size: 13px !important;
  z-index: 3 !important;
  opacity: .78 !important;
}

body.page-methode .vp-scroll-pillars-hint span {
  width: 18px !important;
  height: 30px !important;
  border: 1.5px solid currentColor !important;
  border-radius: 999px !important;
  position: relative !important;
}

body.page-methode .vp-scroll-pillars-hint span::before {
  content: "";
  position: absolute !important;
  left: 50% !important;
  top: 6px !important;
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  transform: translateX(-50%) !important;
  animation: vp-pillars-wheel 1.5s ease-in-out infinite !important;
}

@keyframes vp-pillars-wheel {
  0% { transform: translate(-50%, 0); opacity: 0; }
  25% { opacity: 1; }
  80% { transform: translate(-50%, 12px); opacity: 0; }
  100% { opacity: 0; }
}

@media (max-width: 1060px) {
  body.page-methode .vp-scroll-pillars-grid {
    grid-template-columns: repeat(3, minmax(190px, 1fr)) !important;
  }

  body.page-methode .vp-scroll-pillars-section {
    min-height: 350vh !important;
  }
}

@media (max-width: 720px) {
  body.page-methode .vp-scroll-pillars-sticky {
    position: relative !important;
    align-items: start !important;
    min-height: auto !important;
  }

  body.page-methode .vp-scroll-pillars-section {
    min-height: auto !important;
  }

  body.page-methode .vp-scroll-pillars-grid {
    grid-template-columns: 1fr !important;
    max-width: 380px !important;
    margin-inline: auto !important;
  }

  body.page-methode .vp-scroll-pillar-card,
  body.page-methode .vp-scroll-pillar-card:nth-child(n) {
    min-height: 380px !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  body.page-methode .vp-scroll-pillars-hint {
    display: none !important;
  }

  body.page-methode .vp-scroll-pillars-head h2 {
    letter-spacing: -0.06em !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.page-methode .vp-scroll-pillar-card,
  body.page-methode .vp-scroll-pillar-card:nth-child(n) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition-duration: .01ms !important;
  }

  body.page-methode .vp-scroll-pillars-hint span::before {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   Hotfix Page Standard — blocage réel de la section piliers
   ---------------------------------------------------------
   La section occupe un écran : le scroll est consommé par le
   JavaScript pour afficher les 5 piliers avant de laisser la
   page repartir vers la section suivante.
   ========================================================= */
@media (min-width: 721px) {
  body.page-methode .vp-scroll-pillars-section {
    min-height: 100vh !important;
  }

  body.page-methode .vp-scroll-pillars-sticky {
    position: relative !important;
    top: auto !important;
    min-height: 100vh !important;
  }

  body.page-methode .vp-scroll-pillars-section.vp-scroll-pillars-locked {
    cursor: ns-resize !important;
  }
}


/* =========================================================
   Hotfix accueil — suppression de l'encart bas + recadrage hero
   ---------------------------------------------------------
   - supprime l'encart "Pas de réservation floue"
   - accentue le recadrage de l'image haute pour ne plus voir
     le texte intégré sur la gauche
   ========================================================= */
body.page-accueil-rythme .hp-hero-note {
  display: none !important;
}

body.page-accueil-rythme .hp-hero-photo {
  aspect-ratio: 16 / 8.1 !important;
}

body.page-accueil-rythme .hp-hero-photo img {
  width: 178% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 100% center !important;
  transform: scale(1.02) !important;
  transform-origin: center center !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-hero-photo img {
    width: 190% !important;
    object-position: 100% center !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .hp-hero-photo img {
    width: 205% !important;
    object-position: 100% center !important;
  }
}


/* =========================================================
   Hotfix accueil — nouvelle image hero fournie par le client
   ---------------------------------------------------------
   Remplace l'ancien visuel et rétablit un cadrage normal,
   car le zoom agressif n'est plus nécessaire.
   ========================================================= */
body.page-accueil-rythme .hp-hero-note {
  display: none !important;
}

body.page-accueil-rythme .hp-hero-photo {
  aspect-ratio: 16 / 8.2 !important;
  overflow: hidden !important;
}

body.page-accueil-rythme .hp-hero-photo img {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
  transform-origin: center center !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-hero-photo img {
    width: 100% !important;
    object-position: center center !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .hp-hero-photo img {
    width: 100% !important;
    object-position: center center !important;
  }
}

/* =========================================================
   Hotfix accueil — suppression encart bas droit + photo pleine largeur
   ---------------------------------------------------------
   Corrige le bloc visuel hero : l'encart texte "Pas un cours de combat"
   est retiré et la photo d'exercice prend toute la largeur du bas.
   ========================================================= */
body.page-accueil-rythme .hp-hero-visual {
  gap: 12px !important;
}

body.page-accueil-rythme .hp-hero-mosaic {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

body.page-accueil-rythme .hp-hero-mosaic article {
  display: none !important;
}

body.page-accueil-rythme .hp-hero-mosaic figure {
  width: 100% !important;
  min-height: 210px !important;
  aspect-ratio: 16 / 7.2 !important;
  border-radius: 18px !important;
}

body.page-accueil-rythme .hp-hero-mosaic figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 46% !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-hero-mosaic figure {
    min-height: 220px !important;
    aspect-ratio: 16 / 8.5 !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .hp-hero-mosaic figure {
    min-height: 220px !important;
    aspect-ratio: 4 / 3 !important;
  }
}


/* =========================================================
   Hotfix accueil — texte encart repositionné
   ---------------------------------------------------------
   Le titre en gras passe entre les deux images. Le petit
   encadré reste présent avec son texte, légèrement agrandi.
   ========================================================= */
body.page-accueil-rythme .hp-hero-note {
  display: none !important;
}

body.page-accueil-rythme .hp-hero-visual {
  gap: 12px !important;
}

body.page-accueil-rythme .hp-hero-claim {
  display: block !important;
  padding: 4px 8px 0 !important;
  color: #fff !important;
}

body.page-accueil-rythme .hp-hero-claim strong {
  display: block !important;
  color: #fff !important;
  font-size: clamp(1.08rem, 1.55vw, 1.34rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.035em !important;
  max-width: 22ch !important;
}

body.page-accueil-rythme .hp-hero-claim::before {
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #66d9ff;
  box-shadow: 0 0 16px rgba(102,217,255,.56);
}

body.page-accueil-rythme .hp-hero-mosaic {
  display: grid !important;
  grid-template-columns: 1.15fr .85fr !important;
  gap: 12px !important;
}

body.page-accueil-rythme .hp-hero-mosaic figure {
  width: auto !important;
  min-height: 170px !important;
  aspect-ratio: auto !important;
  border-radius: 18px !important;
}

body.page-accueil-rythme .hp-hero-mosaic figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 46% !important;
}

body.page-accueil-rythme .hp-hero-mosaic article {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-height: 170px !important;
  padding: 20px !important;
  border-radius: 18px !important;
}

body.page-accueil-rythme .hp-hero-mosaic article span {
  display: block !important;
  width: 44px !important;
  height: 3px !important;
  margin-bottom: 14px !important;
  border-radius: 999px !important;
}

body.page-accueil-rythme .hp-hero-mosaic article p {
  margin: 0 !important;
  font-size: .95rem !important;
  line-height: 1.62 !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .hp-hero-mosaic {
    grid-template-columns: 1fr !important;
  }

  body.page-accueil-rythme .hp-hero-mosaic figure,
  body.page-accueil-rythme .hp-hero-mosaic article {
    min-height: 190px !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .hp-hero-claim strong {
    max-width: none !important;
  }

  body.page-accueil-rythme .hp-hero-mosaic figure,
  body.page-accueil-rythme .hp-hero-mosaic article {
    min-height: 180px !important;
  }
}


/* =========================================================
   Hotfix accueil — 3 visuels terrain de même taille
   ---------------------------------------------------------
   Les trois photos de la section "Sur le terrain" sont
   empilées avec le même format et le même espacement.
   ========================================================= */
body.page-accueil-rythme .vp-home-visual-panel {
  gap: 10px !important;
  padding: 12px !important;
}

body.page-accueil-rythme .vp-home-visual-main,
body.page-accueil-rythme .vp-home-visual-duo figure {
  width: 100% !important;
  aspect-ratio: 16 / 7.6 !important;
  min-height: 0 !important;
  border-radius: 22px !important;
}

body.page-accueil-rythme .vp-home-visual-duo {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

body.page-accueil-rythme .vp-home-visual-panel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.page-accueil-rythme .vp-home-visual-main img {
  object-position: center center !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
  object-position: center 46% !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:last-child img {
  object-position: center 50% !important;
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    gap: 8px !important;
    padding: 10px !important;
  }

  body.page-accueil-rythme .vp-home-visual-main,
  body.page-accueil-rythme .vp-home-visual-duo figure {
    aspect-ratio: 16 / 8.4 !important;
    border-radius: 18px !important;
  }

  body.page-accueil-rythme .vp-home-visual-duo {
    gap: 8px !important;
  }
}


/* =========================================================
   Hotfix accueil — bloc images terrain plus compact
   ---------------------------------------------------------
   Aligne visuellement le bloc des 3 images avec la hauteur du
   texte à gauche, tout en gardant les trois visuels identiques.
   ========================================================= */
body.page-accueil-rythme .vp-home-visual-grid {
  align-items: start !important;
}

body.page-accueil-rythme .vp-home-visual-panel {
  width: min(520px, 100%) !important;
  max-width: 520px !important;
  justify-self: end !important;
  gap: 10px !important;
  padding: 10px !important;
}

body.page-accueil-rythme .vp-home-visual-main,
body.page-accueil-rythme .vp-home-visual-duo figure {
  aspect-ratio: 16 / 5.35 !important;
  min-height: 0 !important;
  border-radius: 20px !important;
}

body.page-accueil-rythme .vp-home-visual-main img {
  object-position: center center !important;
}

/* Image du centre : cadrage remonté pour faire rentrer la tête du formateur. */
body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
  object-position: center 18% !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:last-child img {
  object-position: center 26% !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    justify-self: center !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    gap: 8px !important;
    padding: 10px !important;
  }

  body.page-accueil-rythme .vp-home-visual-main,
  body.page-accueil-rythme .vp-home-visual-duo figure {
    aspect-ratio: 16 / 6.4 !important;
    border-radius: 18px !important;
  }

  body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
    object-position: center 14% !important;
  }
}


/* =========================================================
   Hotfix accueil — bloc images étendu entre les repères rouges
   ---------------------------------------------------------
   Le panneau des 3 images est légèrement remonté et les visuels
   sont plus hauts, pour s’aligner visuellement avec la colonne
   texte à gauche. Le visuel central est recadré vers le haut
   pour bien montrer la tête du formateur.
   ========================================================= */
body.page-accueil-rythme .vp-home-visual-grid {
  align-items: start !important;
}

body.page-accueil-rythme .vp-home-visual-panel {
  width: min(500px, 100%) !important;
  max-width: 500px !important;
  justify-self: end !important;
  gap: 10px !important;
  padding: 10px !important;
  margin-top: -12px !important;
  margin-bottom: -12px !important;
}

body.page-accueil-rythme .vp-home-visual-main,
body.page-accueil-rythme .vp-home-visual-duo figure {
  width: 100% !important;
  aspect-ratio: 16 / 6.45 !important;
  min-height: 0 !important;
  border-radius: 20px !important;
}

body.page-accueil-rythme .vp-home-visual-panel img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body.page-accueil-rythme .vp-home-visual-main img {
  object-position: center center !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
  object-position: center 10% !important;
}

body.page-accueil-rythme .vp-home-visual-duo figure:last-child img {
  object-position: center 8% !important;
}

@media (max-width: 980px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    justify-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

@media (max-width: 640px) {
  body.page-accueil-rythme .vp-home-visual-panel {
    gap: 8px !important;
    padding: 10px !important;
    width: min(100%, 520px) !important;
  }

  body.page-accueil-rythme .vp-home-visual-main,
  body.page-accueil-rythme .vp-home-visual-duo figure {
    aspect-ratio: 16 / 7.2 !important;
    border-radius: 18px !important;
  }

  body.page-accueil-rythme .vp-home-visual-duo figure:first-child img {
    object-position: center 8% !important;
  }
}


/* =========================================================
   Hotfix accueil — animation scroll section "Le standard"
   ---------------------------------------------------------
   Les cartes de progression se déploient une par une pendant
   que la section reste sticky. La page ne passe à la suite
   qu'après avoir scrollé toute l'animation.
   ========================================================= */
@media (min-width: 901px) {
  body.page-accueil-rythme .hp-standard {
    --hp-standard-blue: #0c4c7d;
    position: relative !important;
    min-height: 220vh !important;
    display: block !important;
    padding: 0 !important;
    overflow: clip !important;
    background: #eaf3f8 !important;
  }

  body.page-accueil-rythme .hp-standard::before {
    content: "" !important;
    position: absolute !important;
    right: -22vw !important;
    top: -30vh !important;
    width: 92vw !important;
    height: 72vw !important;
    border-radius: 50% !important;
    border: 82px solid rgba(88, 169, 235, 0.32) !important;
    transform: rotate(18deg) scaleX(1.25) !important;
    filter: blur(1px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.page-accueil-rythme .hp-standard::after {
    content: "" !important;
    position: absolute !important;
    left: 37% !important;
    top: 62% !important;
    width: 50vw !important;
    height: 24px !important;
    background: linear-gradient(90deg, rgba(76, 158, 224, 0.55), rgba(76, 158, 224, 0)) !important;
    border-radius: 999px !important;
    transform: rotate(-5deg) !important;
    filter: blur(2px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
  }

  body.page-accueil-rythme .hp-standard-grid {
    position: sticky !important;
    top: 0 !important;
    min-height: 100vh !important;
    z-index: 3 !important;
    display: grid !important;
    grid-template-columns: 0.95fr 1.05fr !important;
    gap: clamp(48px, 7vw, 110px) !important;
    align-items: center !important;
    padding-top: 70px !important;
    padding-bottom: 70px !important;
  }

  body.page-accueil-rythme .hp-standard-grid > div:first-child {
    transform-origin: left center !important;
    will-change: transform, opacity !important;
  }

  body.page-accueil-rythme .hp-standard-grid h2 {
    max-width: 590px !important;
  }

  body.page-accueil-rythme .hp-standard-grid > div > p {
    max-width: 585px !important;
  }

  body.page-accueil-rythme .hp-standard .hp-timeline {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.page-accueil-rythme .hp-standard.hp-standard-scroll-ready .hp-timeline li {
    height: 0;
    opacity: 0;
    overflow: hidden !important;
    will-change: height, opacity, transform !important;
  }

  body.page-accueil-rythme .hp-standard .hp-timeline li {
    min-height: 104px !important;
    display: grid !important;
    grid-template-columns: 46px 1fr !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 30px 34px 30px 20px !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 22px 70px rgba(8, 30, 50, 0.12) !important;
    backdrop-filter: blur(12px) !important;
    transform-origin: top center !important;
  }

  body.page-accueil-rythme .hp-standard .hp-timeline li > span {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    background: var(--hp-standard-blue) !important;
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    flex: none !important;
  }

  body.page-accueil-rythme .hp-standard .hp-timeline strong {
    display: block !important;
    margin: 0 0 8px !important;
    color: #071224 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
  }

  body.page-accueil-rythme .hp-standard .hp-timeline p {
    margin: 0 !important;
    color: #4a5d75 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  body.page-accueil-rythme .hp-standard-progress {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 5px !important;
    z-index: 4 !important;
    background: rgba(12, 76, 125, 0.10) !important;
    overflow: hidden !important;
  }

  body.page-accueil-rythme .hp-standard-progress span {
    display: block !important;
    width: 0%;
    height: 100% !important;
    background: var(--hp-standard-blue) !important;
  }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  body.page-accueil-rythme .hp-standard {
    min-height: auto !important;
  }

  body.page-accueil-rythme .hp-standard-grid {
    position: relative !important;
    top: auto !important;
  }

  body.page-accueil-rythme .hp-standard .hp-timeline li {
    height: auto !important;
    opacity: 1 !important;
    transform: none !important;
  }

  body.page-accueil-rythme .hp-standard-progress {
    display: none !important;
  }
}


/* =========================================================
   Hotfix accueil — animation premium section "Le standard"
   ---------------------------------------------------------
   Version avec titre masqué ligne par ligne, cartes premium,
   track vertical, orb lumineux et barre de progression.
   ========================================================= */
body.page-accueil-rythme .hp-standard-premium {
  --hp-standard-bg: #eaf3f8;
  --hp-standard-text: #061224;
  --hp-standard-muted: #40566f;
  --hp-standard-blue: #0b4c7f;
  --hp-standard-blue-soft: #82cff7;
  --hp-standard-card: rgba(255, 255, 255, 0.78);
  position: relative !important;
  min-height: 100vh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  display: flex !important;
  align-items: center !important;
  padding: 70px 0 !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(255,255,255,0.82), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(130, 207, 247, 0.18), transparent 28%),
    radial-gradient(circle at 52% 54%, rgba(130, 207, 247, 0.16), transparent 34%),
    linear-gradient(135deg, #edf7fb 0%, #e7f1f7 55%, #eff8fb 100%) !important;
}

body.page-accueil-rythme .hp-standard-premium::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  opacity: 0.24 !important;
  background-image:
    linear-gradient(rgba(12, 76, 125, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 76, 125, 0.08) 1px, transparent 1px) !important;
  background-size: 72px 72px !important;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%) !important;
  mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%) !important;
  pointer-events: none !important;
  transform: none !important;
  border: 0 !important;
  filter: none !important;
}

body.page-accueil-rythme .hp-standard-premium::after {
  content: none !important;
}

body.page-accueil-rythme .hp-standard-orb {
  position: absolute !important;
  z-index: 0 !important;
  width: 380px !important;
  height: 380px !important;
  left: 42% !important;
  top: 42% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(112, 202, 249, 0.36), rgba(112, 202, 249, 0.08) 45%, transparent 70%) !important;
  filter: blur(24px) !important;
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  pointer-events: none !important;
}

body.page-accueil-rythme .hp-standard-noise {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  opacity: 0.04 !important;
  pointer-events: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E") !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-grid {
  position: relative !important;
  top: auto !important;
  z-index: 2 !important;
  width: min(1240px, calc(100% - 80px)) !important;
  min-height: auto !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: .95fr 1.05fr !important;
  gap: clamp(48px, 7vw, 110px) !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.page-accueil-rythme .hp-standard-left {
  transform-origin: left center !important;
}

body.page-accueil-rythme .hp-standard-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 14px !important;
  border-radius: 999px !important;
  background: rgba(248, 252, 255, 0.82) !important;
  color: #0b3b63 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: inset 0 0 0 1px rgba(7, 18, 36, 0.08), 0 18px 44px rgba(8, 30, 50, 0.08) !important;
  backdrop-filter: blur(14px) !important;
}

body.page-accueil-rythme .hp-standard-pill::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--hp-standard-blue-soft) !important;
  box-shadow: 0 0 0 6px rgba(130, 207, 247, 0.16) !important;
}

body.page-accueil-rythme .hp-standard-title {
  max-width: 590px !important;
  margin: 26px 0 24px !important;
  color: var(--hp-standard-text) !important;
  font-size: clamp(54px, 7.2vw, 104px) !important;
  line-height: .95 !important;
  letter-spacing: -.075em !important;
  font-weight: 950 !important;
}

body.page-accueil-rythme .hp-standard-title-mask {
  display: block !important;
  overflow: hidden !important;
}

body.page-accueil-rythme .hp-standard-title-line {
  display: block !important;
  transform-origin: left bottom !important;
  will-change: transform, opacity !important;
}

body.page-accueil-rythme .hp-standard-copy {
  max-width: 585px !important;
  margin: 0 0 12px !important;
  color: #334963 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

body.page-accueil-rythme .hp-standard-button {
  position: relative !important;
  overflow: hidden !important;
  min-width: 230px !important;
  margin-top: 4px !important;
  box-shadow: 0 22px 60px rgba(43, 157, 216, 0.18) !important;
}

body.page-accueil-rythme .hp-standard-button::after {
  content: "" !important;
  position: absolute !important;
  inset: -40% auto -40% -55% !important;
  width: 48% !important;
  transform: rotate(18deg) !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent) !important;
  transition: left .65s ease !important;
}

body.page-accueil-rythme .hp-standard-button:hover::after {
  left: 110% !important;
}

body.page-accueil-rythme .hp-standard-cards-wrap {
  position: relative !important;
}

body.page-accueil-rythme .hp-standard-step-track {
  position: absolute !important;
  top: 24px !important;
  bottom: 24px !important;
  left: -28px !important;
  width: 2px !important;
  border-radius: 999px !important;
  background: rgba(12, 76, 125, .14) !important;
}

body.page-accueil-rythme .hp-standard-step-track span {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 0%;
  border-radius: inherit !important;
  background: linear-gradient(180deg, var(--hp-standard-blue-soft), var(--hp-standard-blue)) !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-timeline {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-card {
  display: block !important;
  height: auto;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  opacity: 1;
  perspective: 900px !important;
  will-change: height, opacity !important;
}

body.page-accueil-rythme .hp-standard-js .hp-standard-card {
  height: 0;
  opacity: 0;
}

body.page-accueil-rythme .hp-standard-card-inner {
  position: relative !important;
  min-height: 104px !important;
  display: grid !important;
  grid-template-columns: 46px 1fr !important;
  gap: 24px !important;
  align-items: center !important;
  padding: 30px 34px 30px 20px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.66)),
    var(--hp-standard-card) !important;
  box-shadow: 0 22px 70px rgba(8, 30, 50, .12) !important;
  backdrop-filter: blur(16px) !important;
  transform-origin: top center !important;
  will-change: transform, box-shadow !important;
}

body.page-accueil-rythme .hp-standard-card-inner::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 1px !important;
  background: linear-gradient(135deg, rgba(130,207,247,.72), rgba(255,255,255,.08), rgba(12,76,125,.18)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity .35s ease !important;
  pointer-events: none !important;
}

body.page-accueil-rythme .hp-standard-card.is-active .hp-standard-card-inner::before {
  opacity: 1 !important;
}

body.page-accueil-rythme .hp-standard-card.is-active .hp-standard-card-inner {
  box-shadow: 0 26px 90px rgba(8, 30, 50, .17), 0 0 0 8px rgba(130,207,247,.08) !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-card span {
  position: relative !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 13px !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(145deg, #0f5d96, var(--hp-standard-blue)) !important;
  color: #fff !important;
  font-size: 19px !important;
  font-weight: 850 !important;
  box-shadow: 0 14px 30px rgba(12,76,125,.28) !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-card span::after {
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(12,76,125,.20) !important;
  opacity: 0;
  transform: scale(.82);
}

body.page-accueil-rythme .hp-standard-card.is-active span::after {
  animation: hp-standard-pulse .8s ease forwards !important;
}

@keyframes hp-standard-pulse {
  0% { opacity: 0; transform: scale(.82); }
  45% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.22); }
}

body.page-accueil-rythme .hp-standard-premium .hp-timeline strong {
  display: block !important;
  margin: 0 0 8px !important;
  color: var(--hp-standard-text) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-timeline p {
  margin: 0 !important;
  color: #4a5d75 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-progress {
  position: absolute !important;
  z-index: 4 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 28px !important;
  width: min(420px, calc(100% - 48px)) !important;
  height: 7px !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
  background: rgba(12, 76, 125, .10) !important;
  overflow: hidden !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.45) !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-progress span {
  display: block !important;
  width: 0%;
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--hp-standard-blue-soft), var(--hp-standard-blue)) !important;
  box-shadow: 0 0 22px rgba(76,158,224,.70) !important;
}

@media (max-width: 900px) {
  body.page-accueil-rythme .hp-standard-premium {
    min-height: auto !important;
    padding: 80px 0 !important;
  }

  body.page-accueil-rythme .hp-standard-premium .hp-standard-grid {
    width: min(100% - 32px, 640px) !important;
    grid-template-columns: 1fr !important;
  }

  body.page-accueil-rythme .hp-standard-title {
    font-size: clamp(44px, 14vw, 72px) !important;
  }

  body.page-accueil-rythme .hp-standard-card-inner {
    grid-template-columns: 42px 1fr !important;
    padding: 24px 22px !important;
  }

  body.page-accueil-rythme .hp-standard-step-track,
  body.page-accueil-rythme .hp-standard-progress {
    display: none !important;
  }
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  body.page-accueil-rythme .hp-standard-premium .hp-standard-card {
    height: auto !important;
    opacity: 1 !important;
  }

  body.page-accueil-rythme .hp-standard-card-inner,
  body.page-accueil-rythme .hp-standard-title-line,
  body.page-accueil-rythme .hp-standard-pill,
  body.page-accueil-rythme .hp-standard-copy,
  body.page-accueil-rythme .hp-standard-button {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  body.page-accueil-rythme .hp-standard-orb {
    opacity: 1 !important;
    transform: translate(-50%, -50%) scale(1) !important;
  }
}




/* =========================================================
   Correctif accueil — ruban derrière le fond Standard
   ---------------------------------------------------------
   Le ruban n'est pas masqué au scroll. La section Standard
   possède un fond opaque au-dessus du ruban, ce qui évite
   l'apparition/disparition brutale avant la section.
   ========================================================= */
body.hp-standard-ribbon-hidden .vpl-scroll-ribbon,
body.hp-standard-ribbon-hidden .vpl-ribbon-base,
body.hp-standard-ribbon-hidden .vpl-ribbon-progress,
body.hp-standard-ribbon-hidden .vpl-ribbon-dot {
  display: block !important;
  visibility: visible !important;
}

body.page-accueil-rythme .hp-standard-premium {
  position: relative !important;
  z-index: 2 !important;
  background: #eef7fb !important;
  isolation: isolate !important;
}

body.page-accueil-rythme .hp-standard-premium::before {
  z-index: 0 !important;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 8% 20%, rgba(255,255,255,1), transparent 28%),
    radial-gradient(circle at 78% 18%, rgba(130, 207, 247, 0.06), transparent 30%),
    radial-gradient(circle at 52% 58%, rgba(130, 207, 247, 0.05), transparent 36%),
    linear-gradient(135deg, #edf7fb 0%, #e7f1f7 55%, #eff8fb 100%) !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-grid,
body.page-accueil-rythme .hp-standard-premium .hp-standard-orb,
body.page-accueil-rythme .hp-standard-premium .hp-standard-noise,
body.page-accueil-rythme .hp-standard-premium .hp-standard-progress {
  position: relative !important;
}

body.page-accueil-rythme .hp-standard-premium .hp-standard-grid,
body.page-accueil-rythme .hp-standard-premium .hp-standard-progress {
  z-index: 3 !important;
}


/* =========================================================
   Correctif propre Formateur — ruban arrière-plan, photo unique,
   cartes conservées
   ========================================================= */

/* Le ruban reste décoratif et passe derrière les zones de contenu, sans modifier les fonds des cards. */
body.page-formateur-redesign {
  position: relative !important;
  isolation: isolate !important;
}

body.page-formateur-redesign > .vpl-scroll-ribbon,
body.page-formateur-redesign .vpl-scroll-ribbon {
  z-index: 0 !important;
  pointer-events: none !important;
  opacity: .26 !important;
  mix-blend-mode: normal !important;
}

body.page-formateur-redesign > main,
body.page-formateur-redesign main > section,
body.page-formateur-redesign > footer,
body.page-formateur-redesign .vpl-marquee,
body.page-formateur-redesign .vptr-background-orbs {
  position: relative !important;
}

body.page-formateur-redesign > main,
body.page-formateur-redesign main > section,
body.page-formateur-redesign > footer,
body.page-formateur-redesign .vpl-marquee {
  z-index: 2 !important;
}

body.page-formateur-redesign .vpl-nav {
  z-index: 100 !important;
}

/* Section Transmission : même mise en page sombre, mais avec une seule photo agrandie. */
body.page-formateur-redesign .vp-visual-story--trainer-dark {
  padding: clamp(84px, 9vw, 136px) 0 !important;
  background:
    radial-gradient(circle at 18% 20%, rgba(74, 184, 255, .12), transparent 24%),
    linear-gradient(135deg, #07111f 0%, #0d2943 100%) !important;
  color: #fff !important;
}

body.page-formateur-redesign .vp-visual-story--trainer-dark .vp-visual-story-grid {
  grid-template-columns: minmax(500px, .92fr) minmax(0, 1fr) !important;
  gap: clamp(44px, 6vw, 88px) !important;
  align-items: center !important;
}

body.page-formateur-redesign .vp-visual-story--trainer-dark .vp-visual-copy h2 {
  max-width: 10.8ch !important;
  color: #fff !important;
}

body.page-formateur-redesign .vp-visual-story--trainer-dark .vp-visual-copy p {
  max-width: 58ch !important;
  color: rgba(255, 255, 255, .78) !important;
}

body.page-formateur-redesign .vp-visual-story--trainer-dark .eyebrow,
body.page-formateur-redesign .vp-visual-story--trainer-dark .vp-mini-proof span {
  color: #fff !important;
}

body.page-formateur-redesign .vp-visual-story--trainer-dark .vp-mini-proof span {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}

body.page-formateur-redesign .vp-visual-mosaic--trainer-single {
  display: grid !important;
  grid-template-columns: 1fr !important;
  width: 100% !important;
  max-width: 650px !important;
  justify-self: center !important;
  align-items: center !important;
}

body.page-formateur-redesign .vp-visual-mosaic--trainer-single .vp-image-card--trainer-large {
  width: 100% !important;
  min-height: clamp(480px, 43vw, 650px) !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  border-color: rgba(255, 255, 255, .22) !important;
  background: rgba(255, 255, 255, .08) !important;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .24) !important;
}

body.page-formateur-redesign .vp-visual-mosaic--trainer-single .vp-image-card--trainer-large img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Formules formateur : on restaure les fonds spécifiques par card. */
body.page-formateur-redesign .vptr-catalogue-section .offer-card {
  position: relative !important;
  overflow: hidden !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: #fff !important;
}

body.page-formateur-redesign .vptr-catalogue-section .offer-card--one {
  background-image:
    linear-gradient(180deg, rgba(11, 20, 32, .18) 0%, rgba(11, 20, 32, .54) 58%, rgba(11, 20, 32, .86) 100%),
    url('/1module.png') !important;
}

body.page-formateur-redesign .vptr-catalogue-section .offer-card--two {
  background-image:
    linear-gradient(180deg, rgba(11, 20, 32, .16) 0%, rgba(11, 20, 32, .52) 58%, rgba(11, 20, 32, .86) 100%),
    url('/2modules.png') !important;
}

body.page-formateur-redesign .vptr-catalogue-section .offer-card--full {
  background-image:
    linear-gradient(180deg, rgba(11, 20, 32, .16) 0%, rgba(11, 20, 32, .52) 58%, rgba(11, 20, 32, .86) 100%),
    url('/packcomplet.png') !important;
}

body.page-formateur-redesign .vptr-catalogue-section .offer-card > * {
  position: relative !important;
  z-index: 1 !important;
}

body.page-formateur-redesign .vptr-catalogue-section .offer-card p,
body.page-formateur-redesign .vptr-catalogue-section .offer-card li,
body.page-formateur-redesign .vptr-catalogue-section .offer-card span,
body.page-formateur-redesign .vptr-catalogue-section .offer-card strong,
body.page-formateur-redesign .vptr-catalogue-section .offer-card h3 {
  color: #fff !important;
}

/* Catalogue : grille régulière, sans grand trou entre les lignes. */
body.page-formateur-redesign .vptr-catalogue-section #modulesContainer.module-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
  margin-top: 34px !important;
}

body.page-formateur-redesign .vptr-catalogue-section #modulesContainer .module-card,
body.page-formateur-redesign .vptr-catalogue-section #modulesContainer .module-flip-inner {
  min-height: 236px !important;
}

body.page-formateur-redesign .vptr-catalogue-section #modulesContainer .module-card {
  align-self: stretch !important;
}

/* FAQ : texte réintégré avec de l'air dans les cartes. */
body.page-formateur-redesign .vptr-faq-section .faq-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
  align-items: stretch !important;
}

body.page-formateur-redesign .vptr-faq-section .faq-grid .faq-card {
  padding: clamp(22px, 2vw, 28px) !important;
  min-height: 176px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

body.page-formateur-redesign .vptr-faq-section .faq-card h3 {
  margin: 0 0 12px !important;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -.04em !important;
}

body.page-formateur-redesign .vptr-faq-section .faq-card p {
  margin: 0 !important;
  line-height: 1.72 !important;
}

@media (max-width: 980px) {
  body.page-formateur-redesign .vp-visual-story--trainer-dark .vp-visual-story-grid,
  body.page-formateur-redesign .vptr-catalogue-section #modulesContainer.module-grid,
  body.page-formateur-redesign .vptr-faq-section .faq-grid {
    grid-template-columns: 1fr !important;
  }

  body.page-formateur-redesign .vp-visual-mosaic--trainer-single {
    max-width: 100% !important;
  }
}

@media (max-width: 680px) {
  body.page-formateur-redesign .vp-visual-mosaic--trainer-single .vp-image-card--trainer-large {
    min-height: 390px !important;
  }
}


/* =========================================================
   Correctif Formateur — formulaire plus lisible
   ========================================================= */
body.page-formateur-redesign #formulaire {
  padding: clamp(86px, 9vw, 124px) 0 clamp(82px, 8vw, 110px) !important;
}

body.page-formateur-redesign #formulaire > .container {
  width: min(980px, calc(100% - 44px)) !important;
}

body.page-formateur-redesign #formulaire .form-card {
  width: 100% !important;
  padding: clamp(34px, 4.8vw, 58px) !important;
  border-radius: 34px !important;
  background: rgba(255, 255, 255, .90) !important;
  box-shadow: 0 34px 90px rgba(7, 24, 44, .16) !important;
}

body.page-formateur-redesign #formulaire .form-head {
  max-width: 780px !important;
  margin-bottom: 26px !important;
}

body.page-formateur-redesign #formulaire .form-head h2 {
  max-width: 740px !important;
  font-size: clamp(3.2rem, 5.8vw, 6.3rem) !important;
  line-height: .88 !important;
  letter-spacing: -.085em !important;
  margin-bottom: 18px !important;
}

body.page-formateur-redesign #formulaire .form-head p {
  max-width: 680px !important;
  font-size: 1rem !important;
  line-height: 1.72 !important;
}

body.page-formateur-redesign #formulaire .form-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 22px !important;
  row-gap: 18px !important;
  align-items: start !important;
}

body.page-formateur-redesign #formulaire input,
body.page-formateur-redesign #formulaire select,
body.page-formateur-redesign #formulaire textarea {
  min-height: 52px !important;
  border-radius: 12px !important;
  font-size: .98rem !important;
}

body.page-formateur-redesign #formulaire select {
  text-overflow: ellipsis !important;
}

body.page-formateur-redesign #formulaire .form-field.full,
body.page-formateur-redesign #formulaire .form-field.full textarea {
  grid-column: 1 / -1 !important;
}

body.page-formateur-redesign #formulaire textarea {
  min-height: 150px !important;
  resize: vertical !important;
}

body.page-formateur-redesign #formulaire .btn[type="submit"] {
  margin-top: 20px !important;
}

body.page-formateur-redesign #formulaire .form-rgpd-note {
  max-width: 820px !important;
  font-size: .82rem !important;
  line-height: 1.7 !important;
}

@media (min-width: 1040px) {
  body.page-formateur-redesign #formulaire .form-card {
    display: grid !important;
    grid-template-columns: .82fr 1.18fr !important;
    gap: clamp(34px, 4vw, 56px) !important;
    align-items: start !important;
  }

  body.page-formateur-redesign #formulaire .form-head,
  body.page-formateur-redesign #checkoutFeedback,
  body.page-formateur-redesign #selectedSessionBox {
    grid-column: 1 !important;
  }

  body.page-formateur-redesign #formulaire form {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
  }

  body.page-formateur-redesign #formulaire .form-head h2 {
    font-size: clamp(4rem, 5.1vw, 5.6rem) !important;
  }
}

@media (max-width: 760px) {
  body.page-formateur-redesign #formulaire > .container {
    width: min(100% - 28px, 620px) !important;
  }

  body.page-formateur-redesign #formulaire .form-card {
    padding: 28px 22px !important;
    border-radius: 26px !important;
  }

  body.page-formateur-redesign #formulaire .form-head h2 {
    font-size: clamp(2.75rem, 14vw, 4.2rem) !important;
    line-height: .92 !important;
    letter-spacing: -.075em !important;
  }

  body.page-formateur-redesign #formulaire .form-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  body.page-formateur-redesign #formulaire .form-field.full,
  body.page-formateur-redesign #formulaire .form-field.full textarea {
    grid-column: auto !important;
  }

  body.page-formateur-redesign #formulaire .btn[type="submit"] {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* =========================================================
   Correctif marge menu / début de page — uniformisation
   =========================================================
   Toutes les pages publiques avec le menu flottant utilisent maintenant
   le même dégagement vertical avant le premier bloc de contenu.
*/
:root {
  --vpl-first-screen-top: clamp(126px, 10vw, 148px);
  --vpl-first-screen-scroll-offset: 92px;
}

html {
  scroll-padding-top: var(--vpl-first-screen-scroll-offset) !important;
}

/* Le menu doit rester au-dessus des sections, quelle que soit la page. */
.vpl-nav {
  z-index: 1000 !important;
}

/* Héros standards / pages éditoriales. */
body.vpl-inner-page main > .vpl-inner-hero:first-child,
body.page-methode main > .vpl-inner-hero:first-child,
body.page-formateur-redesign main > .vpl-inner-hero:first-child,
body.page-legal-clean main > .vpl-inner-hero:first-child,
body.page-legal-clean > .vpl-inner-hero:first-of-type {
  margin-top: 0 !important;
  padding-top: var(--vpl-first-screen-top) !important;
}

/* Héros spécifiques : accueil, stage, entreprise et contact. */
body.vpl-home main > .hp-hero:first-child,
body.page-accueil-rythme main > .hp-hero:first-child,
body.page-stage-redesign main > .stage-hero-redesign:first-child,
body.page-editorial-light main > .vp-visual-story:first-child,
body.page-editorial-light main > .vpw-contact-wow:first-child {
  margin-top: 0 !important;
  padding-top: var(--vpl-first-screen-top) !important;
}

/* Si le premier bloc n'est pas un hero classique, il reçoit quand même le dégagement. */
body.vpl-inner-page main > section:first-child:not(.vpl-inner-hero):not(.stage-hero-redesign):not(.hp-hero):not(.vpw-contact-wow):not(.vp-visual-story) {
  margin-top: 0 !important;
  padding-top: var(--vpl-first-screen-top) !important;
}

@media (max-width: 980px) {
  :root {
    --vpl-first-screen-top: 112px;
    --vpl-first-screen-scroll-offset: 86px;
  }
}

@media (max-width: 640px) {
  :root {
    --vpl-first-screen-top: 88px;
    --vpl-first-screen-scroll-offset: 74px;
  }
}

/* =========================================================
   Correctif Page Standard — ruban derrière les piliers
   ---------------------------------------------------------
   Le ruban décoratif reste en arrière-plan pendant la section
   des 5 piliers : les piliers et leurs éléments passent au-dessus.
   ========================================================= */
body.page-methode .vp-scroll-pillars-sticky,
body.page-methode .vp-scroll-pillars-wrap,
body.page-methode .vp-scroll-pillars-grid,
body.page-methode .vp-scroll-pillar-card,
body.page-methode .vp-scroll-pillar-capital,
body.page-methode .vp-scroll-pillar-shaft,
body.page-methode .vp-scroll-pillar-base {
  position: relative !important;
  z-index: 6 !important;
}

body.page-methode .vp-scroll-pillars-grain,
body.page-methode .vp-scroll-pillars-hint {
  z-index: 1 !important;
}

body.page-methode .vpl-scroll-ribbon {
  z-index: 0 !important;
}


/* =========================================================
   Correctif Contact — suppression du grand vide sous le menu
   ---------------------------------------------------------
   La page Contact possède son propre hero .vpw-contact-wow.
   Elle ne doit pas hériter des espacements génériques de pages internes.
   ========================================================= */
body.page-contact-clean {
  --vpl-first-screen-top: clamp(104px, 8vw, 124px) !important;
  --vpl-contact-top: clamp(112px, 8.5vw, 132px) !important;
}

body.page-contact-clean main,
body.page-contact-clean .vpw-contact-main {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  transform: none !important;
}

body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
body.page-contact-clean main > section.vpw-contact-wow:first-child {
  margin-top: 0 !important;
  padding-top: var(--vpl-contact-top) !important;
  min-height: auto !important;
}

body.page-contact-clean .vpw-contact-wow > .vpw-container,
body.page-contact-clean .vpw-hero,
body.page-contact-clean .vpw-layout,
body.page-contact-clean .vpw-quick-links {
  margin-top: 0 !important;
  padding-top: 0 !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.page-contact-clean .vpw-cinematic-wipe {
  display: none !important;
}

@media (max-width: 1024px) {
  body.page-contact-clean {
    --vpl-contact-top: 112px !important;
  }
}

@media (max-width: 720px) {
  body.page-contact-clean {
    --vpl-contact-top: 96px !important;
  }
}

/* =========================================================
   Correctif Contact V2 — suppression définitive du vide haut
   ========================================================= */
body.page-contact-clean {
  --vpl-first-screen-top: 118px !important;
  --vpl-contact-top: 118px !important;
}

body.page-contact-clean main,
body.page-contact-clean main.vpw-contact-main,
body.page-contact-clean .vpw-contact-main {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  top: auto !important;
  transform: none !important;
}

body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
body.page-contact-clean main > section.vpw-contact-wow:first-child {
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  place-items: initial !important;
  margin: 0 !important;
  padding: var(--vpl-contact-top) 24px 88px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  top: auto !important;
  transform: none !important;
}

body.page-contact-clean .vpw-contact-wow > .vpw-container,
body.page-contact-clean .vpw-hero,
body.page-contact-clean .vpw-layout,
body.page-contact-clean .vpw-quick-links {
  margin-top: 0 !important;
  padding-top: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  top: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

body.page-contact-clean .vpw-hero {
  margin-bottom: 42px !important;
}

@media (max-width: 1024px) {
  body.page-contact-clean {
    --vpl-first-screen-top: 104px !important;
    --vpl-contact-top: 104px !important;
  }

  body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
  body.page-contact-clean main > section.vpw-contact-wow:first-child {
    padding: var(--vpl-contact-top) 20px 76px !important;
  }
}

@media (max-width: 720px) {
  body.page-contact-clean {
    --vpl-first-screen-top: 92px !important;
    --vpl-contact-top: 92px !important;
  }

  body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
  body.page-contact-clean main > section.vpw-contact-wow:first-child {
    padding: var(--vpl-contact-top) 16px 64px !important;
  }
}

/* =========================================================
   Correctif Contact V3 — le SVG de fond ne doit pas pousser le contenu
   ---------------------------------------------------------
   Une règle globale du site applique position: relative aux SVG des pages
   internes. Sur Contact, le SVG décoratif .vpw-mesh redevenait donc un
   élément de layout et créait un grand écran vide avant le titre.
   ========================================================= */
body.page-contact-clean .vpw-contact-wow > svg.vpw-mesh,
body.page-contact-clean svg.vpw-mesh {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: visible !important;
  transform: none !important;
}

body.page-contact-clean .vpw-contact-wow > svg.vpw-mesh path,
body.page-contact-clean svg.vpw-mesh path {
  position: static !important;
  z-index: auto !important;
}



/* =========================================================
   Correctif Contact V4 — distances et marges cohérentes
   ---------------------------------------------------------
   Force un rythme de page propre et bascule la grille en une
   colonne avant que les cartes et le formulaire deviennent trop serrés.
   ========================================================= */
body.page-contact-clean .vpw-contact-main > .vpw-contact-wow:first-child,
body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
body.page-contact-clean main > section.vpw-contact-wow:first-child {
  padding-top: clamp(108px, 7.5vw, 128px) !important;
  padding-right: clamp(22px, 4vw, 56px) !important;
  padding-bottom: clamp(78px, 7vw, 112px) !important;
  padding-left: clamp(22px, 4vw, 56px) !important;
}

body.page-contact-clean .vpw-contact-wow > .vpw-container {
  width: min(1160px, 100%) !important;
  margin: 0 auto !important;
}

body.page-contact-clean .vpw-hero {
  margin: 0 auto clamp(44px, 5vw, 68px) !important;
}

body.page-contact-clean .vpw-layout {
  display: grid !important;
  grid-template-columns: minmax(340px, .92fr) minmax(500px, 1.08fr) !important;
  gap: clamp(38px, 4.6vw, 68px) !important;
  align-items: start !important;
  margin: 0 auto !important;
}

body.page-contact-clean .vpw-stack {
  display: grid !important;
  gap: clamp(28px, 3vw, 38px) !important;
}

body.page-contact-clean .vpw-inside {
  padding: clamp(30px, 3.1vw, 44px) !important;
}

body.page-contact-clean .vpw-form-wrap {
  position: sticky !important;
  top: clamp(92px, 8vw, 118px) !important;
  margin: 0 !important;
}

body.page-contact-clean .vpw-form-card .vpw-inside {
  padding: clamp(30px, 3.3vw, 46px) !important;
}

body.page-contact-clean .vpw-contact-wow form {
  gap: 20px !important;
}

body.page-contact-clean .vpw-field-grid {
  gap: 18px !important;
}

body.page-contact-clean .vpw-info,
body.page-contact-clean .vpw-goals {
  gap: 16px !important;
  margin-top: 26px !important;
}

body.page-contact-clean .vpw-quick-links {
  margin-top: clamp(56px, 6vw, 86px) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(22px, 3vw, 34px) !important;
  align-items: stretch !important;
}

body.page-contact-clean .vpw-quick-link {
  min-height: 170px !important;
  padding: clamp(24px, 3vw, 32px) !important;
}

@media (max-width: 1180px) {
  body.page-contact-clean .vpw-contact-main > .vpw-contact-wow:first-child,
  body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
  body.page-contact-clean main > section.vpw-contact-wow:first-child {
    padding-top: 104px !important;
    padding-right: clamp(20px, 4.5vw, 44px) !important;
    padding-bottom: 86px !important;
    padding-left: clamp(20px, 4.5vw, 44px) !important;
  }

  body.page-contact-clean .vpw-layout {
    grid-template-columns: 1fr !important;
    gap: 42px !important;
    max-width: 780px !important;
  }

  body.page-contact-clean .vpw-stack,
  body.page-contact-clean .vpw-form-wrap,
  body.page-contact-clean .vpw-quick-links {
    width: 100% !important;
    max-width: 780px !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  body.page-contact-clean .vpw-form-wrap {
    position: relative !important;
    top: auto !important;
  }

  body.page-contact-clean .vpw-quick-links {
    grid-template-columns: 1fr !important;
    margin-top: 48px !important;
    gap: 20px !important;
  }

  body.page-contact-clean .vpw-quick-link {
    min-height: 0 !important;
  }
}

@media (max-width: 720px) {
  body.page-contact-clean .vpw-contact-main > .vpw-contact-wow:first-child,
  body.page-contact-clean main.vpw-contact-main > section.vpw-contact-wow:first-child,
  body.page-contact-clean main > section.vpw-contact-wow:first-child {
    padding-top: 92px !important;
    padding-right: 16px !important;
    padding-bottom: 64px !important;
    padding-left: 16px !important;
  }

  body.page-contact-clean .vpw-hero {
    margin-bottom: 34px !important;
  }

  body.page-contact-clean .vpw-layout {
    gap: 30px !important;
  }

  body.page-contact-clean .vpw-stack {
    gap: 22px !important;
  }

  body.page-contact-clean .vpw-inside,
  body.page-contact-clean .vpw-form-card .vpw-inside {
    padding: 22px !important;
  }

  body.page-contact-clean .vpw-field-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  body.page-contact-clean .vpw-quick-links {
    margin-top: 34px !important;
  }
}


/* =========================================================
   Correctif mobile final — drawer burger
   ---------------------------------------------------------
   Mobile uniquement : le CTA du drawer prend toute la largeur
   et ne réutilise pas le style desktop compact de la navbar.
   Aucun impact PC.
   ========================================================= */
@media (max-width: 760px) {
  .vpl-mobile-drawer .vpl-mobile-drawer-cta,
  .vpl-mobile-drawer a.vpl-mobile-drawer-cta.vpl-nav-cta,
  body.vpl-home .vpl-mobile-drawer a.vpl-mobile-drawer-cta.vpl-nav-cta {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    border-radius: 18px !important;
  }

  .vpl-mobile-drawer .vpl-mobile-drawer-cta::after,
  .vpl-mobile-drawer a.vpl-mobile-drawer-cta.vpl-nav-cta::after,
  body.vpl-home .vpl-mobile-drawer a.vpl-mobile-drawer-cta.vpl-nav-cta::after {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   Correctif PC final — menu qui suit le scroll
   ---------------------------------------------------------
   Le menu desktop doit rester attaché au viewport pendant le scroll,
   comme demandé au départ. On corrige uniquement la position du header,
   sans modifier les espacements de sections et sans toucher à Standard.
   ========================================================= */
@media (min-width: 761px) {
  body .vpl-nav,
  body.vpl-home .vpl-nav,
  body.vpl-inner-page .vpl-nav,
  body.page-methode .vpl-nav,
  body.page-stage-redesign .vpl-nav,
  body.page-entreprise-ribbon-back > .vpl-nav,
  body.page-entreprise-ribbon-back > header.vpl-nav,
  body.page-formateur-redesign .vpl-nav,
  body.page-contact-clean .vpl-nav {
    position: fixed !important;
    top: 18px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1280px, calc(100% - 56px)) !important;
    max-width: 1280px !important;
    margin: 0 !important;
    z-index: 1000 !important;
  }

  html.vpl-scrolled body .vpl-nav,
  html.vpl-scrolled body.vpl-home .vpl-nav,
  html.vpl-scrolled body.page-entreprise-ribbon-back > .vpl-nav,
  html.vpl-scrolled body.page-entreprise-ribbon-back > header.vpl-nav {
    top: 10px !important;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  body .vpl-nav,
  body.vpl-home .vpl-nav,
  body.vpl-inner-page .vpl-nav,
  body.page-entreprise-ribbon-back > .vpl-nav,
  body.page-entreprise-ribbon-back > header.vpl-nav {
    width: min(1180px, calc(100% - 24px)) !important;
  }
}

/* =========================================================
   v54 — Pages publiques : barre de menu haute plus lisible
   ---------------------------------------------------------
   Ciblage volontairement limité au header public .vpl-nav.
   Aucun impact cockpit admin / dashboard formateur privé.
   ========================================================= */
@media (min-width: 1081px) {
  body .vpl-nav,
  body.vpl-home .vpl-nav,
  body.vpl-inner-page .vpl-nav,
  body.page-methode .vpl-nav,
  body.page-stage-redesign .vpl-nav,
  body.page-entreprise-ribbon-back > .vpl-nav,
  body.page-entreprise-ribbon-back > header.vpl-nav,
  body.page-formateur-redesign .vpl-nav,
  body.page-contact-clean .vpl-nav {
    min-height: 66px !important;
    padding: 9px 12px !important;
    gap: 12px !important;
  }

  body .vpl-brand img,
  body.vpl-home .vpl-brand img,
  body.vpl-inner-page .vpl-brand img {
    width: 54px !important;
    height: 54px !important;
  }

  body .vpl-brand b,
  body.vpl-home .vpl-brand b,
  body.vpl-inner-page .vpl-brand b {
    font-size: 1.08rem !important;
  }

  body .vpl-brand span,
  body.vpl-home .vpl-brand span,
  body.vpl-inner-page .vpl-brand span {
    font-size: .80rem !important;
  }

  body .vpl-menu a,
  body .vpl-nav-ghost,
  body.vpl-home .vpl-menu a,
  body.vpl-home .vpl-nav-ghost,
  body.vpl-inner-page .vpl-menu a,
  body.vpl-inner-page .vpl-nav-ghost {
    font-size: .96rem !important;
    line-height: 1.1 !important;
    padding: 13px 15px !important;
  }

  body .vpl-nav-cta,
  body.vpl-home .vpl-nav-cta,
  body.vpl-inner-page .vpl-nav-cta {
    min-height: 52px !important;
    padding-inline: 22px !important;
    font-size: .98rem !important;
  }
}

@media (min-width: 761px) and (max-width: 1080px) {
  body .vpl-nav,
  body.vpl-home .vpl-nav,
  body.vpl-inner-page .vpl-nav,
  body.page-entreprise-ribbon-back > .vpl-nav,
  body.page-entreprise-ribbon-back > header.vpl-nav {
    min-height: 62px !important;
    max-height: 68px !important;
    padding: 8px !important;
  }

  body .vpl-brand img,
  body.vpl-home .vpl-brand img,
  body.vpl-inner-page .vpl-brand img {
    width: 50px !important;
    height: 50px !important;
  }

  body .vpl-menu a,
  body .vpl-nav-ghost,
  body.vpl-home .vpl-menu a,
  body.vpl-home .vpl-nav-ghost,
  body.vpl-inner-page .vpl-menu a,
  body.vpl-inner-page .vpl-nav-ghost {
    font-size: .84rem !important;
    padding: 10px 10px !important;
  }

  body .vpl-nav-cta,
  body.vpl-home .vpl-nav-cta,
  body.vpl-inner-page .vpl-nav-cta {
    min-height: 44px !important;
    padding-inline: 15px !important;
    font-size: .88rem !important;
  }
}