/* ============================================================
   Phab Protect — habillage 3D « cinématique » de la page d'accueil
   Tout est piloté par js/cine.js (variables CSS --p, --mx, --d…).
   Sans JavaScript ou avec « réduire les animations » : mise en page
   classique, rien ne reste caché.
   ============================================================ */
:root {
  --pink: #ff3d9a; --orange: #ff8a3d; --sand: #ffd36b;
  --sun-grad: linear-gradient(100deg, #ff4fa0 0%, #ff8a3d 58%, #ffd36b 100%);
  --nav-h: 68px;
}

/* barre de progression de la page */
.cine-bar { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 200; transform-origin: 0 50%; transform: scaleX(var(--sy, 0)); background: linear-gradient(90deg, #7c3aed, var(--pink), var(--orange)); pointer-events: none; }
html[dir="rtl"] .cine-bar { transform-origin: 100% 50%; }

/* titres façon affiche : Syne ExtraBold en capitales */
.section-title, .feat-title, .cta-box h2 { font-family: 'Syne', var(--sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.04; text-wrap: balance; overflow-wrap: break-word; }
.section-title { font-size: clamp(24px, 3.7vw, 50px); max-width: 100%; }
.feat-title { font-size: clamp(22px, 2.3vw, 33px); overflow-wrap: normal; hyphens: auto; }
.cine .feat { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.cta-box h2 { font-size: clamp(28px, 4vw, 52px); }
.section-label { color: var(--orange); }
html[lang="ar"] .section-title, html[lang="ar"] .feat-title, html[lang="ar"] .cta-box h2, html[lang="ar"] .cine-copy h1 { font-family: var(--sans); letter-spacing: 0; text-transform: none; }

/* ───────────── HÉROS : scène 3D épinglée ───────────── */
.cine-hero { position: relative; z-index: 1; height: calc(100vh + 110vh); height: calc(100svh + 110svh); direction: ltr; }
.cine-stage { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 540px; overflow: hidden; isolation: isolate; --p: 0; --mx: 0; --my: 0; }
.cine-stage > * { position: absolute; pointer-events: none; }
.cine-sky { inset: 0; z-index: -5; background:
  radial-gradient(120% 75% at 50% 112%, rgba(255,106,61,.9) 0%, rgba(255,45,140,.55) 26%, rgba(124,58,237,.38) 52%, transparent 76%),
  linear-gradient(180deg, #04020a 0%, #0b061f 38%, #170a38 70%, #260d4d 100%); }
.cine-stars { inset: 0 0 40% 0; z-index: -4; opacity: calc(1 - var(--p) * 1.2);
  background-image:
    radial-gradient(1.4px 1.4px at 8% 14%, #fff, transparent 60%), radial-gradient(1px 1px at 17% 33%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 26% 9%, #ffd9ec, transparent 60%), radial-gradient(1px 1px at 34% 27%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 43% 16%, #fff, transparent 60%), radial-gradient(1.5px 1.5px at 55% 7%, #ffe6c9, transparent 60%),
    radial-gradient(1px 1px at 63% 24%, #fff, transparent 60%), radial-gradient(1.4px 1.4px at 72% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 81% 30%, #fff, transparent 60%), radial-gradient(1.6px 1.6px at 90% 10%, #d9c2ff, transparent 60%),
    radial-gradient(1px 1px at 95% 22%, #fff, transparent 60%), radial-gradient(1.2px 1.2px at 4% 38%, #fff, transparent 60%),
    radial-gradient(1px 1px at 49% 36%, #fff, transparent 60%), radial-gradient(1.3px 1.3px at 76% 40%, #fff, transparent 60%);
  animation: cineTwinkle 5s ease-in-out infinite alternate; }
@keyframes cineTwinkle { from { filter: brightness(.7); } to { filter: brightness(1.25); } }
.cine-sun { left: 50%; top: 54%; width: min(86vh, 700px); aspect-ratio: 1; z-index: -3; border-radius: 50%;
  background: radial-gradient(circle, #fff3d0 0%, #ffc067 14%, #ff6a7a 34%, rgba(255,61,154,.55) 50%, rgba(124,58,237,0) 72%);
  transform: translate3d(-50%, calc(-50% + var(--p) * 34vh), 0) scale(calc(1 + var(--p) * .3)); opacity: calc(.95 - var(--p) * .5); }
.cine-grid { left: -40%; right: -40%; bottom: 0; height: 40%; z-index: -2; overflow: hidden; transform: perspective(420px) rotateX(63deg); transform-origin: 50% 0; opacity: calc(.95 - var(--p) * .6);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
.cine-grid::before { content: ''; position: absolute; left: 0; right: 0; top: -64px; bottom: 0;
  background: linear-gradient(rgba(255,70,170,.55) 1.5px, transparent 1.5px) 0 0 / 100% 64px, linear-gradient(90deg, rgba(255,70,170,.45) 1.5px, transparent 1.5px) 0 0 / 88px 100%;
  animation: cineGrid 1.8s linear infinite; }
@keyframes cineGrid { to { transform: translate3d(0, 64px, 0); } }

/* les cartes (vraies captures du dashboard) en perspective */
.cine-world { inset: 0; z-index: 1; perspective: 1500px; perspective-origin: 50% 36%; }
.cine-cards { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(calc(var(--mx) * 5deg)) rotateX(calc(var(--my) * -3deg)); }
.cc.far { --top: 50%; --w: min(30vw, 440px); }
.cc.side { --top: 56%; --w: min(34vw, 520px); }
.cc.mid { --top: 60%; --w: min(46vw, 680px); }
.cc { position: absolute; left: 50%; top: var(--top, 60%); width: var(--w, min(46vw, 680px)); margin: 0; transform-style: preserve-3d;
  transform: translate3d(-50%, 0, 0) translate3d(calc(var(--x, 0) * 1vw + var(--mx) * var(--k, 1) * 28px + var(--e, 0) * var(--fx, 0) * 1vw), calc(var(--y, 0) * 1vh + var(--my) * var(--k, 1) * 16px + var(--e, 0) * var(--fy, 0) * 1vh), calc(var(--z, 0) * 1px + var(--l, 0) * var(--fz, 300) * 1px)) rotateY(calc(var(--ry, 0) * 1deg + var(--e, 0) * var(--fry, 0) * 1deg)) rotateX(calc(var(--rx, 0) * 1deg));
  opacity: calc(1 - (var(--p) - .45) * 2.2); }
.cc-in { border-radius: 14px; overflow: hidden; background: #0a0a0f; border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 40px 110px rgba(0,0,0,.65), 0 0 70px rgba(255,61,154,.2), 0 0 0 1px rgba(124,58,237,.25) inset; animation: ccFloat 7s ease-in-out infinite alternate; animation-delay: calc(var(--k, 1) * -3s); }
/* quand la caméra avance, on coupe le flottement : sinon le navigateur garde la capture en basse définition (flou) */
.cine-stage.flying .cc-in { animation: none; }
@keyframes ccFloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -12px, 0); } }
.cc-bar { display: flex; gap: 6px; padding: 9px 12px; background: #14131c; border-bottom: 1px solid rgba(255,255,255,.08); }
.cc-bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; display: block; } .cc-bar i:nth-child(2) { background: #febc2e; } .cc-bar i:nth-child(3) { background: #28c840; }
.cc img { display: block; width: 100%; height: auto; aspect-ratio: 1360 / 820; }
/* un voile pour que le texte reste lisible quand une carte passe derrière */
.cine-veil { inset: 0; z-index: 2; background: linear-gradient(180deg, rgba(4,2,10,.78) 0%, rgba(4,2,10,.38) 34%, transparent 58%); }
.cine-fade { inset: 0; z-index: 6; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, #000 100%); opacity: calc((var(--p) - .55) * 2.4); }

.cine-copy { z-index: 5; left: 50%; top: clamp(14px, 4.5vh, 52px); width: min(1100px, 92vw); text-align: center; display: flex; flex-direction: column; align-items: center; pointer-events: auto;
  transform: translate3d(-50%, calc(var(--p) * -14vh), 0) scale(calc(1 + var(--p) * .2)); transform-origin: 50% 0; opacity: calc(1 - var(--p) * 3.2); }
.cine-stage.p-gone .cine-copy { pointer-events: none; visibility: hidden; }
html[dir="rtl"] .cine-copy { direction: rtl; }
.cine-copy .hero-tag { margin-bottom: 18px; background: rgba(255,61,154,.12); border-color: rgba(255,61,154,.45); color: #ffd0e6; }
.cine-copy h1 { font-family: 'Syne', var(--sans); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4.3vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 18px; text-wrap: balance; color: #fff; text-shadow: 0 6px 44px rgba(0,0,0,.6); }
.cine-copy h1 .grad { background: var(--sun-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-weight: 800; display: inline-block; text-shadow: none; filter: drop-shadow(0 4px 28px rgba(255,80,140,.35)); }
.cine-copy .hero-sub { margin: 0 auto 24px; max-width: 760px; font-size: clamp(15px, 1.35vw, 18px); color: #cfc8e6; }
.cine-copy .hero-sub strong { color: #fff; }
.cine-copy .hero-actions { justify-content: center; margin: 0 0 18px; }
.cine-copy .hero-btn.primary { background: linear-gradient(135deg, #ff3d9a, #ff7a3d); box-shadow: 0 12px 40px rgba(255,80,120,.45), 0 0 0 1px rgba(255,255,255,.12) inset; }
.cine-copy .hero-btn.primary:hover { box-shadow: 0 18px 54px rgba(255,80,120,.6), 0 0 0 1px rgba(255,255,255,.2) inset; }
.cine-copy .hero-link { color: #fff; }
.cine-stage .scroll-cue { z-index: 5; bottom: 16px; left: 28px; transform: none; pointer-events: auto; opacity: calc(1 - var(--p) * 9); color: #e9d9ff; }

@media (min-width: 821px) and (max-height: 820px) {
  .cine-copy h1 { font-size: clamp(28px, 3.7vw, 54px); margin-bottom: 12px; }
  .cine-copy .hero-sub { font-size: 14.5px; margin-bottom: 16px; max-width: 700px; }
  .cine-copy .hero-tag { margin-bottom: 12px; }
  .cine-copy .hero-actions { margin-bottom: 8px; }
  .cc.mid { --top: 63%; --w: min(40vw, 600px); }
  .cc.side { --top: 60%; --w: min(30vw, 460px); }
}
@media (max-width: 820px) {
  .cine-hero { height: calc(100vh + 80vh); height: calc(100svh + 80svh); }
  .cine-stage { min-height: 600px; }
  .cc.mid { --w: 84vw; --top: 62%; }
  .cc.far { display: none; }
  .cc.side { --w: 56vw; --top: 70%; --x: 44 !important; }
  .cc.side.l { --x: -44 !important; }
  .cine-copy { top: 10px; }
  .cine-copy h1 { font-size: clamp(30px, 9vw, 46px); margin-bottom: 12px; }
  .cine-copy .hero-sub { margin-bottom: 18px; }
  .cine-copy .hero-tag { margin-bottom: 12px; }
  .cine-sun { top: 62%; }
  .cine-grid { height: 30%; }
}

/* ───────────── DIAPOSITIVES : le dashboard glisse en 3D ───────────── */
.slides { position: relative; z-index: 1; overflow-x: clip; height: calc(100vh + var(--n, 8) * 34vh); height: calc(100svh + var(--n, 8) * 34svh); direction: ltr; --sw: min(68vw, 940px, calc((100vh - var(--nav-h) - 370px) * 1.66)); --sw: min(68vw, 940px, calc((100svh - var(--nav-h) - 370px) * 1.66)); }
.slides-pin { position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); height: calc(100svh - var(--nav-h)); min-height: 520px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 2.2vh, 26px); }
.slides-pin::before { content: ''; position: absolute; left: 50%; top: 56%; width: min(120vw, 1500px); height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(124,58,237,.34), rgba(255,61,154,.12) 55%, transparent 75%); pointer-events: none; z-index: -1; }
.slides-head { text-align: center; padding: 0 20px; direction: ltr; }
html[dir="rtl"] .slides-head { direction: rtl; }
.slides-head .section-header { margin: 0; }
.slides-head .section-title { font-size: clamp(24px, 3.2vw, 44px); }
@media (max-height: 780px) { .slides-head .section-desc { display: none; } .slides-head .section-label { margin-bottom: 8px; } }
.slides-head .section-desc { margin-top: 10px; }
.slides-track { display: flex; align-items: flex-start; gap: 5vw; padding-inline: calc((100vw - var(--sw)) / 2); transform: translate3d(var(--tx, 0px), 0, 0); will-change: transform; }
.slide { flex: 0 0 var(--sw); width: var(--sw); margin: 0; --d: 0; --ad: 0;
  transform: perspective(1500px) translate3d(0, 0, calc(var(--ad) * -190px)) rotateY(calc(var(--d) * -36deg)) scale(calc(1 - var(--ad) * .06));
  opacity: calc(1 - var(--ad) * .55); will-change: transform, opacity; }
.slide .win { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); background: #0a0a0f; box-shadow: 0 50px 120px rgba(0,0,0,.6), 0 0 90px rgba(255,61,154,calc(.28 - var(--ad) * .2)), 0 0 0 1px rgba(124,58,237,.3) inset; }
.slide .win-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: #14131c; border-bottom: 1px solid var(--border); }
.slide .win-bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; display: block; } .slide .win-bar i:nth-child(2) { background: #febc2e; } .slide .win-bar i:nth-child(3) { background: #28c840; }
.slide .win-url { margin-left: 10px; flex: 1; max-width: 340px; font: 12px 'DM Mono', monospace; color: var(--muted); background: rgba(255,255,255,.05); border-radius: 8px; padding: 4px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slide img { display: block; width: 100%; height: auto; aspect-ratio: 1360 / 820; }
.slide figcaption { margin-top: 14px; text-align: center; opacity: calc(1 - var(--ad) * 2.2); padding: 0 10px; }
html[dir="rtl"] .slide figcaption { direction: rtl; }
.slide figcaption b { display: block; font: 800 clamp(15px, 1.6vw, 20px) 'Syne', var(--sans); color: #fff; margin-bottom: 4px; }
.slide figcaption span { display: block; color: var(--muted); font-size: clamp(13px, 1.2vw, 15px); line-height: 1.5; max-width: 620px; margin: 0 auto; }
.slides-dots { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 0 16px; }
.slides-dots button { width: 9px; height: 9px; padding: 0; border-radius: 99px; border: 0; background: rgba(255,255,255,.22); cursor: pointer; transition: width .25s, background .25s; }
.slides-dots button:hover { background: rgba(255,255,255,.5); }
.slides-dots button.on { width: 30px; background: linear-gradient(90deg, var(--pink), var(--orange)); }

@media (max-width: 820px), (prefers-reduced-motion: reduce) {
  .slides { height: auto; --sw: min(84vw, 520px); padding: 40px 0 20px; }
  .slides-pin { position: static; height: auto; min-height: 0; overflow: visible; }
  .slides-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; transform: none; will-change: auto; gap: 4vw; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .slides-track::-webkit-scrollbar { display: none; }
  .slide { scroll-snap-align: center; }
}

/* ───────────── BANDE D'IMAGES QUI DÉFILE ───────────── */
.belt { position: relative; z-index: 1; overflow: hidden; padding: clamp(40px, 7vw, 96px) 0; perspective: 1300px; direction: ltr; }
.belt-in { transform: rotateX(16deg) rotateZ(-3deg) scale(1.1); transform-origin: 50% 50%; display: flex; flex-direction: column; gap: 18px; }
.belt-row { display: flex; width: max-content; gap: 18px; animation: beltL 70s linear infinite; will-change: transform; }
.belt-row.rev { animation-name: beltR; animation-duration: 85s; }
.belt:hover .belt-row { animation-play-state: paused; }
@keyframes beltL { to { transform: translate3d(-50%, 0, 0); } }
@keyframes beltR { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.belt-row img { width: clamp(260px, 26vw, 400px); height: auto; aspect-ratio: 1360 / 820; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 20px 50px rgba(0,0,0,.5); display: block; background: #0a0a0f; }
.belt::before, .belt::after { content: ''; position: absolute; top: 0; bottom: 0; width: 14vw; z-index: 2; pointer-events: none; }
.belt::before { left: 0; background: linear-gradient(90deg, #000, transparent); } .belt::after { right: 0; background: linear-gradient(270deg, #000, transparent); }

/* ───────────── RÉVÉLATION EN PROFONDEUR + INCLINAISON AU POINTEUR ───────────── */
.cine .reveal { opacity: 0; transform: perspective(1100px) translate3d(0, 52px, -140px) rotateX(-14deg); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .95s cubic-bezier(.2,.7,.2,1), border-color .2s, background .2s, box-shadow .25s; }
.cine .reveal.visible { opacity: 1; transform: perspective(1100px) translate3d(0, 0, var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cine .reveal.visible.tilting { transition: transform .12s linear, opacity .6s, border-color .2s, background .2s, box-shadow .25s; }
.cine .reveal.visible.tilting { box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 40px rgba(255,61,154,.14); }
.cine .feat-item:hover, .cine .feature-card:hover, .cine .review-item:hover { transform: perspective(1100px) translate3d(0, 0, var(--tz, 0px)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.cine .feat-item:hover { border-color: rgba(255,61,154,.45); }
.cine .feat-ic { background: rgba(255,61,154,.12); border-color: rgba(255,61,154,.35); }
.cine .feat-ic svg { stroke: #ffc2dd; }
.cine .feat-tag { color: #ffd9a8; background: rgba(255,138,61,.1); border-color: rgba(255,138,61,.3); }
.cine .feature-icon { background: rgba(255,61,154,.12); border-color: rgba(255,61,154,.3); }
.cine .feature-icon svg { stroke: #ffc2dd; }
.cine .step-num { background: linear-gradient(135deg, var(--pink), var(--orange)); border: 0; color: #fff; }
.cine .stat-num { font-family: 'Syne', var(--sans); font-weight: 800; background: var(--sun-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }

/* le faux salon Discord se redresse en arrivant à l'écran */
.cine .dc { transform: perspective(1200px) rotateX(calc(var(--ap, 0) * 24deg + var(--rx, 0deg))) rotateY(var(--ry, 0deg)) scale(calc(1 - var(--ap, 0) * .06)); transition: transform .12s linear; will-change: transform; }

/* sections plus aérées pour laisser respirer la 3D */
.cine section { padding: clamp(56px, 8vw, 110px) 0; }
.cine .cmd-cat, .cine .review-item, .cine .step-card { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .cine-hero { height: auto; }
  .cine-stage { position: relative; top: 0; height: auto; min-height: 0; padding: 56px 0 48px; }
  .cine-stage > .cine-copy { position: relative; left: auto; top: auto; margin: 0 auto; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }
  .cine-stars, .cine-sun, .cine-grid, .cine-world, .cine-veil, .cine-fade, .cine-stage .scroll-cue { display: none; }
  .cine-grid::before, .cine-stars, .belt-row { animation: none !important; }
  .cine-bar { display: none; }
  .cine .reveal { opacity: 1; transform: none; transition: none; }
  .cine .dc { transform: none !important; }
}
@media (hover: none) { .cine .reveal.visible { --rx: 0deg; --ry: 0deg; } }

/* sous-titre du héros : lignes équilibrées (pas de « 12 mois). » seul sur la dernière ligne) */
.cine-hero .hero-sub{text-wrap:balance}