/* ═══════════════════════════════════════
   VOZ MOTION SYSTEM — GLOBAL
   v1.0 — virtual-office-zug.com
   GPU-only · subtil · professionnel
═══════════════════════════════════════ */

/* ── KEYFRAMES ── */
@keyframes voz-fade-up {
  from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes voz-fade-in {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes voz-slide-right {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes voz-slide-left {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes voz-scale-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes voz-counter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes voz-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ── CLASSES D'ANIMATION ── */
.voz-anim {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1),
    filter .4s ease;
  will-change: opacity, transform;
}
.voz-anim.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Délais stagger */
.voz-anim-d1 { transition-delay: .1s; }
.voz-anim-d2 { transition-delay: .18s; }
.voz-anim-d3 { transition-delay: .26s; }
.voz-anim-d4 { transition-delay: .34s; }
.voz-anim-d5 { transition-delay: .42s; }
.voz-anim-d6 { transition-delay: .50s; }

/* Slide depuis la gauche */
.voz-anim-left {
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.voz-anim-left.is-visible { opacity: 1; transform: translateX(0); }

/* Slide depuis la droite */
.voz-anim-right {
  opacity: 0;
  transform: translateX(20px);
  transition:
    opacity .55s cubic-bezier(.16,1,.3,1),
    transform .55s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
.voz-anim-right.is-visible { opacity: 1; transform: translateX(0); }

/* Scale in */
.voz-anim-scale {
  opacity: 0;
  transform: scale(.96);
  transition:
    opacity .5s ease,
    transform .5s cubic-bezier(.34,1.56,.64,1);
  will-change: opacity, transform;
}
.voz-anim-scale.is-visible { opacity: 1; transform: scale(1); }

/* ── CARDS HOVER ── */
.voz-card-hover {
  transition:
    transform .3s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s ease,
    border-color .25s ease !important;
  will-change: transform, box-shadow;
  cursor: default;
}
.voz-card-hover:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 12px 40px rgba(26,43,94,.12),
    0 4px 12px rgba(26,43,94,.06) !important;
  border-color: rgba(26,43,94,.2) !important;
}

/* ── BOUTONS ── */
.voz-btn-primary {
  position: relative;
  overflow: hidden;
  transition:
    transform .22s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s ease,
    background .2s ease !important;
  will-change: transform;
}
.voz-btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
.voz-btn-primary:hover::before { left: 150%; }
.voz-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(26,43,94,.3) !important;
}

/* ── STAT COUNTERS ── */
.voz-stat-number {
  display: inline-block;
  animation: voz-counter .6s cubic-bezier(.16,1,.3,1) both;
}

/* ── SCROLL PROGRESS LINE ── */
.voz-scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: #1a2b5e;
  z-index: 99999;
  width: 0%;
  transition: width .1s linear;
  pointer-events: none;
}

/* ── DIVIDERS ── */
.voz-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,43,94,.12), rgba(26,43,94,.12), transparent);
  margin: 3rem 0;
  border: none;
}

/* ═══════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   Breakpoints : 480 · 640 · 768 · 900 · 1024
═══════════════════════════════════════ */

/* ── TABLEAUX RESPONSIVE ── */
.voz-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  background:
    linear-gradient(90deg,white 30%,rgba(255,255,255,0)) center left,
    linear-gradient(90deg,rgba(255,255,255,0),white 70%) center right,
    radial-gradient(farthest-side at 0 50%,rgba(26,43,94,.12),rgba(26,43,94,0)) center left,
    radial-gradient(farthest-side at 100% 50%,rgba(26,43,94,.12),rgba(26,43,94,0)) center right;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.voz-table-wrap table { min-width: 480px; }

@media (max-width: 768px) {
  table:not(.voz-no-wrap) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
    font-size: .78rem !important;
  }
  table:not(.voz-no-wrap) th,
  table:not(.voz-no-wrap) td {
    padding: .5rem .65rem !important;
    white-space: normal;
    min-width: 90px;
  }
}

/* ── GRILLES RESPONSIVE ── */
@media (max-width: 580px) {
  .pp-rights-grid,
  .ln-office-grid,
  .ln-tech-grid,
  .tos-term-grid,
  .rf-timeline,
  .ps-stripe-grid,
  .s-cards-grid,
  .s-rights-grid,
  .s-encrypt-grid,
  .wn-we-are-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {
  .rf-timeline,
  .ps-stripe-grid,
  .ln-tech-grid,
  .s-cards-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 900px) {
  .pp-rights-grid,
  .s-rights-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── LAYOUT LEGAL ── */
@media (max-width: 768px) {
  .pp-layout { grid-template-columns: 1fr !important; }
  .pp-toc {
    position: static !important;
    top: auto !important;
    max-height: 220px;
    overflow-y: auto;
    border-radius: 12px;
    margin-bottom: 1.5rem;
  }
}

/* ── HERO SECTIONS ── */
@media (max-width: 640px) {
  .s-hero h1,
  .ps-hero h1,
  .wn-hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
  }
  .s-badges, .ps-chips, .wn-hero .s-badges { gap: .35rem !important; }
  .s-badge, .ps-chip { font-size: .68rem !important; padding: .25rem .65rem !important; }
}

/* ── TOUCH TARGETS 44px ── */
@media (max-width: 768px) {
  a, button, [role=button] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .voz-footer-list a {
    min-height: 36px !important;
    padding: .4rem 0 !important;
  }
}

/* ── MOBILE CARDS ── */
@media (max-width: 640px) {
  .voz-card-hover { transform: none !important; }
  .voz-card-hover:hover { transform: translateY(-2px) !important; }
}

/* ── BASE ── */
img { max-width: 100%; height: auto; }
body { overflow-x: hidden; }
* { box-sizing: border-box; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .voz-anim,
  .voz-anim-left,
  .voz-anim-right,
  .voz-anim-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ── PAGES QUIZ / ADVISOR (voz-lfa-body) ── */
/* Header Kadence masqué sur les pages fullscreen */
body.voz-lfa-body #masthead,
body.voz-lfa-body .site-top-header-wrap,
body.voz-lfa-body .site-header-row,
body.voz-lfa-body .entry-hero {
  display: none !important;
}
body.voz-lfa-body .content-area {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
body.voz-lfa-body .site {
  padding-top: 0 !important;
}