/* LetsFrame — styles communs aux pages FR et EN */
:root {
  --noir: #131417; --noir-2: #1B1D21; --noir-3: #262930;
  --blanc: #ECEDEF; --print: #1F2125; --lime: #C8FF2E; --orange: #FF5A1F; --bleu: #6B8AFF;
  --gris: #9096A0; --ligne: #2D3037; --dim: #A6ABB3; --panel: #1B1D21;
  --clip1: #6B8AFF; --clip2: #7FD6C2; --clip3: #E9C46A; --clip4: #FF7A45; --clip5: #B497FF; --clip6: #F49AB8; /* les couleurs des clips */
  --maxw: 1280px; --r: 6px;
  --h1k: 12.2; /* largeur de la plus longue ligne du titre, en em : ajustée par langue */
}
html[lang="en"] { --h1k: 11.8; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { font-family: 'Archivo', system-ui, sans-serif; font-size: 17px; line-height: 1.55; color: var(--blanc); background: var(--noir); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.display { font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 100%; letter-spacing: -.032em; line-height: .95; }
.mono { font-family: 'JetBrains Mono', monospace; font-weight: 500; }
.dark { background: var(--noir); color: var(--blanc); }
.lime-t { color: var(--lime); }
section { padding: 112px 0; }
h2.display { font-size: clamp(36px, 5.4vw, 66px); margin: 0 0 20px; }
.lead { font-size: clamp(17px, 1.6vw, 20px); max-width: 640px; color: var(--dim); }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; text-decoration: none; padding: 15px 22px; border-radius: 4px; border: 2px solid transparent; transition: transform .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
.btn-lime { background: var(--lime); color: var(--noir); }
.btn-ghost { border-color: #3A3D44; color: var(--blanc); }
.btn-ghost:hover { border-color: var(--blanc); }
.btn-noir { background: #2A2D33; color: var(--blanc); }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 50; background: var(--noir); border-bottom: 1px solid transparent; transition: border-color .2s; }
.nav.scrolled { border-bottom-color: var(--ligne); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }
/* Le logo (piste 4d, choisie le 07/11/2026) : « lets », puis « frame » sélectionné comme un rush, la tête de lecture entrée dans le clip */
.wm { display: inline-flex; align-items: center; gap: .14em; font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; letter-spacing: -0.04em; line-height: 1; color: var(--blanc); text-decoration: none; white-space: nowrap; }
.wm-clip { position: relative; display: inline-flex; align-items: center; gap: .07em; padding: .05em .19em .1em .17em; border-radius: .07em; background: var(--lime); color: #0B0C0E; }
.wm-clip::before, .wm-clip::after { content: ''; position: absolute; top: 0; bottom: 0; width: .085em; background: rgba(0,0,0,.32); }
.wm-clip::before { left: 0; border-radius: .07em 0 0 .07em; }
.wm-clip::after { right: 0; border-radius: 0 .07em .07em 0; }
.wm-clip svg { height: .92em; width: auto; fill: currentColor; }
.nav .logo { font-size: 24px; }
.nav ul { display: flex; gap: 30px; list-style: none; }
.nav ul a { font-size: 15px; font-weight: 500; text-decoration: none; color: #b9b9b4; }
.nav ul a:hover { color: var(--blanc); }
.nav .right { display: flex; align-items: center; gap: 14px; }
.nav .btn { padding: 10px 16px; font-size: 14px; gap: 0; }
.lang { display: flex; gap: 2px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.lang a { padding: 6px 8px; border-radius: 3px; text-decoration: none; color: var(--gris); }
.lang a:hover { color: var(--blanc); }
.lang a[aria-current="page"] { color: var(--blanc); background: var(--noir-3); }

/* Haut de page */
/* Sur ordinateur, le haut de page remplit l'écran et son contenu est centré en hauteur */
.hero { padding: 40px 0; overflow: hidden; min-height: calc(100svh - 68px); display: flex; align-items: center; }
.hero > .wrap { width: 100%; }
.hero .wrap { display: grid; grid-template-columns: minmax(380px, 1fr) minmax(0, 600px); grid-template-areas: "title stage" "copy stage"; grid-template-rows: auto auto; column-gap: 48px; }
.hero .ttl { grid-area: title; container-type: inline-size; }
.hero .copy { grid-area: copy; padding-top: 8px; }
/* Le titre, en largeur normale, tient toujours sur 2 lignes : sa taille suit la largeur de sa colonne */
.hero h1 { font-stretch: 100%; font-size: clamp(15px, calc(100cqw / var(--h1k)), 76px); margin: 0 0 24px; }
/* Le haut de page tient dans la hauteur de l'écran : la scène occupe la place laissée par le titre */
.hero h1 .l2 { display: inline-block; }
/* Sous le titre : une phrase simple */
.hero .sub { max-width: 560px; font-family: 'Archivo', sans-serif; font-weight: 700; font-stretch: 100%; font-size: clamp(15px, 1.45vw, 19px); line-height: 1.45; letter-spacing: -0.01em; color: rgba(244,242,236,.85); }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }
.hero .ctas .btn { padding: 15px 20px; }
.stage { grid-area: stage; align-self: stretch; position: relative; width: 100%; min-height: 0; container-type: size; display: grid; place-items: center; }
/* La planche : rush en haut, 3 flèches, 3 vidéos en dessous ; elle grandit autant que la scène le permet */
/* La planche : rush en haut, 3 flèches, 3 vidéos en dessous. Sur ordinateur, elle ne dépasse jamais la hauteur du texte de gauche */
.board { position: relative; margin: 0 auto; width: min(100cqw, 90.9cqh); aspect-ratio: 100 / 110; container-type: inline-size; }
.board .phone { width: 30cqw; }
.board .p0 { width: 24cqw; }
.arrows.v { display: none; }
.board .ver { font-size: 8.6cqw; left: 7cqw; }
.board .ver .m-no { display: none; }
/* Les 3 écrans : 3 vidéos différentes repérées dans le même tournage.
   Chaque écran est son propre conteneur : à l'intérieur, 1cqw = 1 % de la largeur de l'écran. */
.phone { position: absolute; width: 28cqw; aspect-ratio: 9 / 16; border-radius: 1px; overflow: hidden; container-type: inline-size; box-shadow: 0 14px 28px rgba(0,0,0,.55); border: .8cqw solid var(--print); background: #1d130d; color: #fff; }
.p1 { --c: var(--orange); left: 2cqw; top: 56.5cqw; }
.p2 { --c: var(--bleu); left: 35cqw; top: 56.5cqw; z-index: 2; }
.p3 { --c: var(--lime); right: 2cqw; top: 56.5cqw; }
/* Les scènes filmées. Avec de vraies vidéos : remplacer .scene par <video autoplay muted loop playsinline> */
.scene, .phone video, .pv video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scene { overflow: hidden; }
/* Face caméra : la fondatrice raconte, dans une pièce claire */
.s-face { background: radial-gradient(55% 35% at 85% 12%, #fff7e8, transparent 70%), linear-gradient(#ece2d2, #cbb699); }
.s-face::before { content: ''; position: absolute; left: -14%; top: 14%; width: 44%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #87a46e, #4f6d3f 70%); }
.person { position: absolute; left: 14%; right: 14%; bottom: 0; height: 60%; transform-origin: 50% 100%; animation: talk 1.4s ease-in-out infinite; }
.person::before { content: ''; position: absolute; z-index: 1; left: 30%; width: 40%; top: 0; aspect-ratio: 1 / 1.18; border-radius: 50%; background: #d6a07b; box-shadow: inset 0 9cqw 0 #2b1d16; }
.person::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72%; border-radius: 48% 48% 0 0 / 30% 30% 0 0; background: #2f3b4a; }
@keyframes talk { 50% { transform: translateY(-1%) rotate(1deg); } }
/* Déballage : gros plan produit, coupes en zoom sur la musique */
.s-prod { background: radial-gradient(110% 65% at 72% 18%, #f1c597 0%, #c27f50 34%, #6a3d27 66%, #2b1a11 100%); animation: punch 4s steps(1) infinite; }
.s-prod::before { content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 33%; background: linear-gradient(#4a2c1d, #1c110b); }
.s-prod::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 29%; height: 4%; border-radius: 50%; background: rgba(0,0,0,.45); filter: blur(4cqw); }
@keyframes punch { 0% { transform: none; } 50% { transform: scale(1.3) translateY(6%); } }
.prod { position: absolute; left: 36%; width: 28%; bottom: 31%; height: 34%; border-radius: 26% 26% 12% 12% / 14% 14% 6% 6%; background: linear-gradient(90deg, #cfcabd, #fbfaf6 28%, #e6e2d8 62%, #a9a499); z-index: 1; }
.prod::before { content: ''; position: absolute; left: 20%; right: 20%; top: -13%; height: 15%; border-radius: 12% 12% 0 0; background: linear-gradient(90deg, #050505, #3a3a3a 35%, #0e0e0e); }
.prod::after { content: ''; position: absolute; left: 0; right: 0; top: 40%; height: 28%; background: linear-gradient(90deg, #9fcc1f, var(--lime) 30%, #b5e826); }
/* L'interface du reel (tailles en % de la largeur de l'écran) */
.prog { position: absolute; top: 7.9cqw; left: 9cqw; right: 9cqw; height: 1.8cqw; border-radius: 2cqw; background: rgba(255,255,255,.35); overflow: hidden; z-index: 2; }
.prog i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: 0 50%; animation: prog 6s linear infinite; animation-delay: var(--t, 0s); }
@keyframes prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ver { position: absolute; top: 14.6cqw; left: 9cqw; z-index: 2; display: flex; align-items: center; gap: 2.4cqw; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 5.8cqw; background: rgba(14,14,14,.78); color: var(--blanc); padding: 1.6cqw 4cqw 1.6cqw 3cqw; border-radius: 8cqw; white-space: nowrap; }
.ver::before { content: ''; flex: none; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; background: var(--c); }
.hook { position: absolute; left: 5cqw; right: 5cqw; top: 26%; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 1.3cqw; text-align: center; }
.hook span { background: var(--hb, #fff); color: var(--hc, #000); font-weight: 800; font-size: 9.4cqw; line-height: 1.2; padding: 1cqw 4cqw; border-radius: 3cqw; white-space: nowrap; }
.pv .hook { top: 21%; --hb: var(--noir); --hc: #fff; }
.subs { position: absolute; left: 0; right: 0; bottom: 21%; z-index: 2; display: flex; justify-content: center; gap: 2.4cqw; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 8.6cqw; text-shadow: 0 .8cqw 3cqw rgba(0,0,0,.6); }
.subs span { animation: word 1.8s steps(1) infinite; animation-delay: calc(var(--i) * .6s); }
@keyframes word { 0% { color: var(--lime); } 33.3% { color: #fff; } }
.music { position: absolute; left: 9cqw; bottom: 25%; z-index: 2; display: flex; align-items: flex-end; gap: 1.2cqw; height: 9cqw; padding: 1.6cqw 3.6cqw; border-radius: 3cqw; background: rgba(14,14,14,.75); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 5.4cqw; line-height: 1; }
.music i { width: 1.6cqw; height: 40%; border-radius: 1cqw; background: var(--lime); animation: eq .8s ease-in-out infinite alternate; }
.music i:nth-child(2) { animation-duration: .6s; }
@keyframes eq { from { height: 18%; } to { height: 88%; } }
.music i:nth-child(3) { animation-duration: 1s; margin-right: 1.4cqw; }
.side { position: absolute; right: 6cqw; bottom: 30%; z-index: 2; display: grid; gap: 5.8cqw; }
.side i { width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(255,255,255,.88); box-shadow: 0 .8cqw 2.6cqw rgba(0,0,0,.3); }
.side i:first-child { background: var(--orange); }
.handle { position: absolute; left: 9cqw; right: 26cqw; bottom: 10.5cqw; z-index: 2; font-weight: 700; font-size: 6.8cqw; }
.handle::after { content: ''; display: block; height: 2.9cqw; width: 80%; border-radius: 2cqw; background: rgba(255,255,255,.5); margin-top: 3.2cqw; }

/* Sous les écrans : le tournage, avec les 3 moments d'où viennent les vidéos */

/* Problème */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 52px; }
.card { position: relative; border: 11px solid var(--print); border-radius: var(--r); padding: 17px 15px; }
.card h3 { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0 0 8px; }
.card p { color: #55554f; font-size: 16px; }

/* Étiquettes */
.pill { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11.5px; letter-spacing: .02em; padding: 5px 11px; border-radius: 999px; color: var(--noir); white-space: nowrap; }


/* Offres */
.offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; }
.offer { position: relative; background-color: var(--print); border-radius: var(--r); box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 16px 24px -16px rgba(0,0,0,.5); padding: 28px 26px; display: flex; flex-direction: column; }
.offer .tag { align-self: flex-start; margin-bottom: 10px; padding: 3px 8px; border-radius: 3px; background: var(--lime); color: #0B0C0E; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; line-height: 1.3; }
.offer h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: 26px; }
.offer .price { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: 34px; margin: 10px 0 2px; letter-spacing: -0.02em; }
.offer .price small { font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 15px; color: #68645B; font-stretch: 100%; letter-spacing: 0; }
.offer ul { list-style: none; margin: 18px 0 24px; flex: 1; }
.offer li { padding: 7px 0 7px 26px; position: relative; font-size: 15.5px; border-top: 1px solid #DAD5C7; }
.offer li::before { content: ''; position: absolute; left: 2px; top: 15px; width: 12px; height: 7px; border-left: 2.5px solid var(--noir); border-bottom: 2.5px solid var(--noir); transform: rotate(-45deg); }
.offer .btn { justify-content: center; }
.rushtest { display: grid; grid-template-columns: 1.3fr .7fr; gap: 28px; align-items: center; position: relative; background-color: var(--noir); color: var(--blanc); border: 11px solid var(--print); border-radius: var(--r); box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 20px 28px -16px rgba(0,0,0,.55); padding: 23px; margin-top: 48px; }
.rushtest h3 { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: clamp(26px, 3vw, 36px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 12px; }
.rushtest p { color: #c2c2bd; }
.rushtest .right { text-align: right; }
.rushtest .price { font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: 44px; color: var(--lime); line-height: 1; letter-spacing: -0.02em; margin-bottom: 16px; }
.rushtest .price small { display: block; font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 14px; color: var(--gris); font-stretch: 100%; letter-spacing: 0; margin-top: 6px; }
.fine { font-size: 14.5px; color: #5C5A52; margin-top: 22px; }

/* FAQ */
.faq { max-width: 820px; margin-top: 40px; }
.faq details { border-top: 1px solid #2a2a2a; }
.faq details:last-child { border-bottom: 1px solid #2a2a2a; }
.faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 19px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 26px; color: var(--orange); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: #b9b9b4; max-width: 680px; }

/* Appel final */
.final { background: var(--lime); color: var(--noir); text-align: center; }
.final h2 { font-size: clamp(40px, 7vw, 92px); margin: 0 auto 18px; max-width: 980px; }
.final p { font-size: 19px; max-width: 560px; margin: 0 auto 30px; }
.final .ctas { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.final .btn-out { border-color: var(--noir); color: var(--noir); }

/* Pied de page */
footer { padding: 54px 0 40px; }
footer .wrap { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
footer .wm { font-size: 30px; }
footer .d { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11.5px; letter-spacing: .04em; color: var(--blanc); margin-top: 10px; }
footer .links { display: flex; gap: 22px; font-size: 14px; color: var(--gris); }
footer .links a { text-decoration: none; }
footer .c { width: 100%; font-size: 13px; color: var(--gris); border-top: 1px solid var(--ligne); padding-top: 22px; margin-top: 18px; }

/* Apparition au défilement */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Entrée du titre : la deuxième ligne descend, comme CUT dans le logo */
@keyframes drop { from { transform: translateY(-.25em); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hero h1 .l2 { animation: drop .6s .2s cubic-bezier(.2,.8,.2,1) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1 .l2, .bande { animation: none; }
}

/* Tablette */
@media (max-width: 980px) {
  .nav ul { display: none; }
  .hero { min-height: 0; display: block; }
  .hero .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "copy" "stage"; grid-template-rows: none; height: auto; }
  .stage { max-width: 560px; margin: 32px auto 0; height: auto; container-type: inline-size; display: block; }
  .board { width: 100%; }
  .offers { grid-template-columns: 1fr; max-width: 560px; }
  .rushtest { grid-template-columns: 1fr; }
  .rushtest .right { text-align: left; }
}
/* Téléphone */
@media (max-width: 620px) {
  body { font-size: 16px; }
  section { padding: 76px 0; }
  .wrap { padding: 0 16px; }
  .nav .wrap { height: 60px; gap: 10px; }
  .nav .logo { font-size: 20px; }
  .nav .right { gap: 6px; }
  .nav .btn { padding: 9px 12px; font-size: 13px; }
  .nav .hide-s { display: none; }
  .hero { padding: 44px 0 64px; }
  
  
  .rushtest { padding: 18px 14px; }
}

/* ---------- Titre : badge Reels & TikTok ---------- */
.hero h1 .kick { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 12px; font-family: 'Archivo', sans-serif; font-weight: 600; font-stretch: 100%; font-size: 15px; letter-spacing: 0; line-height: 1.25; color: var(--blanc); border: 1.5px solid #333; border-radius: 4px; padding: 6px 16px 6px 8px; margin-bottom: 30px; }
/* Les 3 applis, serrées les unes contre les autres : chacune son tour sort plus grosse, en gélatine */
.apps { display: flex; flex: none; padding: 0 2px; }
.apps i { position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 0 0 2px var(--noir); rotate: var(--r); transform-origin: 50% 70%; animation: chew 4.5s cubic-bezier(.3,1.5,.5,1) infinite; animation-delay: calc(var(--d) * 1.5s); }
.apps i + i { margin-left: -6px; }
.apps svg { width: 64%; height: 64%; }
.apps .ig { --r: -9deg; --d: 0; background: radial-gradient(circle at 30% 107%, #fdf497 0 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.apps .tk { --r: 3deg; --d: -2; background: #000; z-index: 1; }
.apps .yt { --r: 10deg; --d: -1; background: #fff; }
@keyframes chew {
  0% { scale: 1; z-index: 1; }
  5% { scale: 1.38 1.08; z-index: 3; }
  10% { scale: 1.12 1.36; }
  15% { scale: 1.3 1.2; }
  20% { scale: 1.24; }
  27% { scale: 1.24; z-index: 3; }
  33.3% { scale: 1; z-index: 1; }
  37% { scale: .8 1.1; }
  42% { scale: 1.06 .95; }
  47%, 66.6% { scale: 1; }
  70% { scale: .8 1.1; }
  75% { scale: 1.06 .95; }
  80%, 100% { scale: 1; }
}

/* ---------- Section 2 : illustrations du problème ---------- */
.ill { height: 128px; border-radius: var(--r); background: var(--blanc); border: 1px solid var(--ligne); position: relative; overflow: hidden; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; }
.ill .cap { position: absolute; right: 12px; bottom: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gris); opacity: 0; transition: opacity .4s 1.8s; }
.card.in .ill .cap { opacity: 1; }
/* La galerie : 24 rush, 2 publiés */
.roll { display: grid; grid-template-columns: repeat(8, 16px); gap: 5px; margin-top: -14px; }
.roll i { width: 16px; height: 24px; border-radius: 4px; background: #d9d6cc; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .3s; transition-delay: calc(var(--i) * 25ms); }
.card.in .roll i { opacity: 1; transform: none; }
.card.in .roll i.pub { animation: pub .5s 1.3s forwards; }
@keyframes pub { 60% { transform: scale(1.3); } 100% { background: var(--lime); box-shadow: 0 0 0 2px var(--noir) inset; transform: scale(1.1); } }


@media (prefers-reduced-motion: reduce) {
  .ill *, .ill *::after { animation: none !important; transition: none !important; }
  .card.in .roll i.pub { background: var(--lime); }
}
@media (max-width: 620px) {
  .hero h1 .kick { font-size: 13.5px; margin-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .person, .prog i, .subs span, .music i, .apps i { animation: none !important; }
  .v { transition: none !important; }
}

/* ==================== Version mobile ==================== */
.dots, .sticky-cta { display: none; }
.idle *, .idle *::before, .idle *::after { animation-play-state: paused !important; }

@media (max-width: 620px) {
  .m-no { display: none; }
  section { padding: 60px 0; }
  h2.display { font-size: 30px; }
  .lang a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 9px; }

  /* Haut de page : les 3 écrans juste sous le titre, en grand, d'un bord à l'autre */
  .hero { padding: 12px 0; }
  .hero .wrap { grid-template-areas: "title" "stage" "copy"; grid-template-rows: auto minmax(0, 1fr) auto; height: min(max(440px, calc(100svh - 60px - 24px)), calc(285px + 90vw)); }
  .hero h1 { margin-bottom: 6px; }
  .hero h1 .kick { margin-bottom: 10px; padding: 4px 14px 4px 6px; }
  .apps i { width: 22px; height: 22px; }
  .stage { width: calc(100% + 32px); max-width: none; margin: 6px -16px 0; align-self: stretch; min-height: 0; container-type: size; display: grid; place-items: center; }
  .board { width: min(100cqw, 111cqh); aspect-ratio: 100 / 90; }
  .board .phone { width: 24.3cqw; }
  .board .p0 { width: 20cqw; left: 40cqw; top: 0; }
  .p1 { left: 5.85cqw; top: 46.5cqw; }
  .p2 { left: 37.85cqw; top: 46.5cqw; }
  .p3 { right: 5.85cqw; top: 46.5cqw; }
  .arrows.h { display: none; }
  .arrows.v { display: block; }
  .side, .handle { display: none; }
  .ver { font-size: 8.6cqw; left: 7cqw; }
  .hero .copy { padding-top: 10px; }
  .hero .sub { font-size: 13.5px; }
  .hero .ctas { margin: 12px 0 0; }
  .hero .ctas .btn { padding: 13px 22px; }
  .hero .ctas .btn { flex: 1; justify-content: center; }
  .hero .btn-ghost { display: none; }

  /* Les cartes se font glisser à l'horizontale, la suivante dépasse un peu */
  .cards3, .offers { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 6px 16px 10px; }
  .cards3::-webkit-scrollbar, .offers::-webkit-scrollbar { display: none; }
  .cards3 > *, .offers > * { scroll-snap-align: start; }
  .cards3, .offers { margin-top: 32px; }
  .dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
  .dots i { width: 6px; height: 6px; border-radius: 3px; background: #cfccc2; transition: width .25s, background .25s; }
  .dots i.on { width: 18px; background: var(--noir); }
  .dark .dots i { background: #3a3a3a; }
  .dark .dots i.on { background: var(--lime); }


  /* Offres : le prix et « / mois » restent ensemble */
  .offer { padding: 24px 20px; }
  .offer .price { font-size: 25px; white-space: nowrap; }
  .offer .price small { white-space: nowrap; }
  .rushtest .price { font-size: 36px; }

  /* Le bouton de réservation reste à portée de pouce une fois le haut de page passé */
  .sticky-cta { display: flex; justify-content: center; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60; box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .35s cubic-bezier(.2,.8,.2,1), visibility .35s; }
  .sticky-cta:not(.show) { transform: translateY(160%); visibility: hidden; }
  .nav .btn { transition: opacity .25s; }
  .cta-on .nav .btn { opacity: 0; pointer-events: none; }
}

/* ---------- Haut de page : le rush brut et les 3 vidéos montées à partir de cette prise. site.js donne le tempo ---------- */
.p0 { left: 38cqw; top: 0; z-index: 3; }
.p0 .ver::before { background: var(--orange); animation: rec 1s steps(1) infinite; }
@keyframes rec { 50% { opacity: .2; } }
.scrub { position: absolute; left: 9cqw; right: 9cqw; bottom: 10cqw; height: 7cqw; border-radius: 2cqw; z-index: 2; background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 8cqw, rgba(255,255,255,.12) 8cqw 9cqw); }
.scrub i { position: absolute; top: -2.5cqw; bottom: -2.5cqw; left: 0; width: 1.4cqw; border-radius: 1cqw; background: var(--orange); }
/* La vidéo du moment se lève et joue ; les 2 autres attendent en pause sur leur hook, un peu atténuées */
.stage .p1, .stage .p2, .stage .p3 { transition: translate .45s ease, scale .45s ease, box-shadow .45s ease; }
.stage .phone.up { translate: 0 -2.4cqw; scale: 1.07; box-shadow: 0 30px 50px rgba(0,0,0,.7); z-index: 3; }
.stage .p1 video, .stage .p2 video, .stage .p3 video { transition: filter .45s ease; }
.stage.run .phone:not(.up):not(.p0) video { filter: brightness(.72); }
/* 3 lignes animées partent du rush : une vers chaque vidéo montée */
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arrows path { fill: none; stroke: var(--lime); stroke-width: .42; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: .02 .014; animation: flow 1.5s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -.068; } }
@media (prefers-reduced-motion: reduce) {
  .arrows path, .hero-tl div { animation: none; }
}

/* ---------- Ordinateur : un haut de page plus grand, qui occupe la hauteur de l'écran ---------- */
@media (min-width: 981px) {
  .hero { padding: 32px 0; }
  .hero .wrap { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 56px; }
  .hero h1 { margin-bottom: clamp(24px, 6svh, 60px); }
  .hero h1 .kick { font-size: 18px; gap: 14px; padding: 10px 22px 10px 12px; margin-bottom: clamp(24px, 6svh, 60px); }
  .hero h1 .kick .apps i { width: 36px; height: 36px; border-radius: 10px; }
  .hero .sub { font-size: clamp(16px, 2.5svh, 22.5px); }
  .hero .ctas { margin-top: clamp(30px, 7svh, 72px); gap: 16px; }
  .hero .ctas .btn { font-size: 19px; padding: clamp(17px, 3svh, 28px) 32px; }
}

/* ---------- Bandeau de chiffres, juste sous le haut de page ---------- */
.proof { background: #141414; color: var(--blanc); border-top: 1px solid #222; border-bottom: 1px solid #222; }
.proof .wrap { display: grid; grid-template-columns: auto repeat(3, 1fr); align-items: center; gap: 32px; padding-top: 26px; padding-bottom: 26px; }
.pf-who { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--gris); padding-right: 32px; border-right: 1px solid #2a2a2a; }
.pf b { display: block; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 44px; line-height: 1; color: var(--lime); letter-spacing: -0.02em; white-space: nowrap; }
.pf span { display: block; margin-top: 6px; font-size: 15px; color: #b9b9b4; }

/* ---------- Section problème : des tirages noirs scotchés sur le papier, chacun un peu de travers ---------- */
.card { background-color: var(--noir); color: var(--blanc); box-shadow: 0 1px 2px rgba(0,0,0,.28), 0 20px 28px -16px rgba(0,0,0,.55); }
.card p { color: #b3b3ae; }
.card .ill { background: #1b1b1b; border-color: #262626; height: 150px; }
.card .roll i { background: #333; }
.card .ill .cap { color: #8c8c88; }
@media (max-width: 980px) {
  .proof .wrap { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .pf-who { grid-column: 1 / -1; border-right: 0; padding-right: 0; }
}
@media (max-width: 620px) {
  .proof .wrap { gap: 10px 8px; padding-top: 18px; padding-bottom: 20px; }
  .pf b { font-size: 25px; }
  .pf span { font-size: 12px; margin-top: 4px; }
  .pf-who { font-size: 11.5px; }
  .card .ill { height: 128px; }
  .card { box-shadow: none; }
}

/* Carte 1 : une pellicule de téléphone ; les miniatures s'éteignent, sauf les 2 vidéos publiées (coche verte) */
.card .roll { grid-template-columns: repeat(8, 26px); gap: 3px; margin-top: -10px; }
.card .roll i { position: relative; width: 26px; height: 26px; border-radius: 3px; background: linear-gradient(160deg, color-mix(in srgb, var(--t) 78%, #fff), var(--t)); }
.card .roll i::after { content: ''; position: absolute; left: 3px; bottom: 3px; width: 9px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.55); }
.card.in .roll i:not(.pub) { animation: asleep .6s 1.5s forwards; }
@keyframes asleep { to { opacity: .28; filter: grayscale(.7); } }
.card.in .roll i.pub { animation: posted .5s 1.3s forwards; }
@keyframes posted { 60% { transform: scale(1.3); } 100% { transform: scale(1.14); box-shadow: 0 0 0 2px var(--lime); } }
.card .roll i.pub::before { content: ''; position: absolute; z-index: 1; top: -6px; right: -6px; width: 13px; height: 13px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%230e0e0e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 72% no-repeat; transform: scale(0); transition: transform .3s cubic-bezier(.2,1.6,.4,1) 1.7s; }
.card.in .roll i.pub::before { transform: scale(1); }
.card .ill .cap { color: var(--lime); }
@media (prefers-reduced-motion: reduce) {
  .card .roll i:not(.pub) { opacity: .28; filter: grayscale(.7); }
  .card .roll i.pub { box-shadow: 0 0 0 2px var(--lime); }
  .card .roll i.pub::before { transform: scale(1); transition: none; }
}

/* Carte 2 : l'agenda de la semaine, le montage repoussé d'un jour à l'autre jusqu'au lundi suivant */
.card .ill { container-type: inline-size; }
.cal { --g: 5px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: 12px 20px 13px 13px; gap: 4px var(--g); width: calc(100% - 28px); margin-top: -16px; }
.cal b { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; color: #8c8c88; text-align: center; line-height: 12px; }
.cal b.nx { color: var(--orange); }
.cal i { position: relative; font-style: normal; border-radius: 4px; background: #2e2e2e; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cal i.nx { background: none; border: 1px dashed #4a4a4a; }
.cal i span { display: none; font-family: 'JetBrains Mono', monospace; font-size: 8px; color: #BDBDB8; white-space: nowrap; }
.cal .bz { background: #3a3a3a; opacity: 0; }
.card.in .cal .bz { animation: booked .3s forwards; animation-delay: calc(.86s + var(--k) * .6s); }
@keyframes booked { from { opacity: 0; translate: 0 -7px; } to { opacity: 1; translate: 0 0; } }
.cal .ed { z-index: 1; background: var(--lime); box-shadow: inset 0 0 0 1.5px var(--noir); }
.cal .ed svg { width: 12px; height: 12px; fill: none; stroke: var(--noir); stroke-width: 2.6; stroke-linecap: round; }
.cal .ed span { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 9px; color: var(--noir); }
.card.in .cal .ed { animation: pushed 3s .5s both; }
@keyframes pushed {
  0%, 12% { translate: 0 0; }
  16% { translate: calc(.5 * (100% + var(--g))) -6px; }
  20%, 32% { translate: calc(1 * (100% + var(--g))) 0; }
  36% { translate: calc(1.5 * (100% + var(--g))) -6px; }
  40%, 52% { translate: calc(2 * (100% + var(--g))) 0; }
  56% { translate: calc(2.5 * (100% + var(--g))) -6px; }
  60%, 72% { translate: calc(3 * (100% + var(--g))) 0; }
  76% { translate: calc(3.5 * (100% + var(--g))) -6px; }
  80%, 92% { translate: calc(4 * (100% + var(--g))) 0; }
  96% { translate: calc(4.5 * (100% + var(--g))) -6px; }
  100% { translate: calc(5 * (100% + var(--g))) 0; }
}
.card .cal + .cap { transition-delay: 3.4s; }
/* Assez de place : les tâches écrites en toutes lettres, sinon une paire de ciseaux */
@container (min-width: 300px) {
  .cal i span { display: inline; }
  .cal .ed svg { display: none; }
}

/* Carte 3 : une vidéo TikTok tient 1 s avant d'être swipée, la courbe de rétention plonge à côté */
.swipe { position: relative; align-self: stretch; width: 100%; }
.swipe .tel { position: absolute; left: 9%; top: 16px; width: 58px; aspect-ratio: 9 / 16; padding: 3px; border-radius: 10px; background: var(--noir); border: 1.5px solid #3a3a3a; }
.swipe .scr { position: relative; height: 100%; border-radius: 7px; overflow: hidden; }
.swipe .st { height: 200%; display: grid; grid-template-rows: 1fr 1fr; }
.swipe .st i { position: relative; background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.2) 0 7px, transparent 7.5px), radial-gradient(ellipse 15px 12px at 50% 64%, rgba(255,255,255,.14) 0 100%, transparent), linear-gradient(160deg, #7a6650, #3e4b58); }
.swipe .st i + i { background: radial-gradient(circle at 46% 40%, rgba(255,255,255,.16) 0 9px, transparent 9.5px), linear-gradient(160deg, #4a5664, #33443a); }
/* Les icônes à droite et la légende en bas, comme sur TikTok */
.swipe .st i::before { content: ''; position: absolute; right: 4px; bottom: 30%; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.6); box-shadow: 0 -9px 0 rgba(255,255,255,.6), 0 -18px 0 rgba(255,255,255,.6); }
.swipe .st i::after { content: ''; position: absolute; left: 5px; bottom: 9px; width: 52%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.55); box-shadow: 0 -5px 0 rgba(255,255,255,.35); }
.swipe .st s { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: #fff; }
.card.in .swipe .st s { animation: watched 1s .4s linear forwards; }
@keyframes watched { to { width: 7%; } }
.card.in .swipe .st { animation: swiped .4s 1.55s cubic-bezier(.5,0,.2,1) forwards; }
@keyframes swiped { to { translate: 0 -50%; } }
.swipe .fg { position: absolute; left: 58%; top: 74%; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: rgba(255,255,255,.85); box-shadow: 0 0 0 4px rgba(255,255,255,.25); opacity: 0; }
.card.in .swipe .fg { animation: finger .6s 1.4s forwards; }
@keyframes finger { 0% { opacity: 0; top: 74%; } 20% { opacity: 1; top: 74%; } 80% { opacity: 1; top: 26%; } 100% { opacity: 0; top: 22%; } }
.swipe .ret { position: absolute; left: calc(9% + 80px); top: 22px; width: calc(91% - 94px); height: 64px; overflow: visible; }
.swipe .ret path { fill: none; vector-effect: non-scaling-stroke; }
.swipe .lb { position: absolute; right: 14px; top: 8px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: #8c8c88; }
.swipe .ret .base { stroke: #3a3a3a; stroke-width: 1; stroke-dasharray: 3 3; }
.swipe .ret .ln { stroke: var(--orange); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; }
.card.in .swipe .ret .ln { transition: stroke-dashoffset 1.2s .5s ease-out; stroke-dashoffset: 0; }
.card .swipe + .cap { transition-delay: 2s; }
@media (max-width: 620px) {
  .swipe .tel { width: 52px; top: 14px; }
  .swipe .ret { left: calc(9% + 70px); top: 20px; width: calc(91% - 84px); height: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal .bz { opacity: 1; }
  .cal .ed { translate: calc(5 * (100% + var(--g))) 0; }
  .swipe .st { translate: 0 -50%; }
  .swipe .ret .ln { stroke-dashoffset: 0; }
}

/* ---------- Rush Map : le tournage en pellicule, puis toutes les vidéos qu'on peut en créer, rangées par format ---------- */
.rmw { margin-top: 48px; }
.film-l { display: flex; justify-content: space-between; margin-bottom: 10px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--gris); }
.film { position: relative; display: flex; gap: 2px; padding: 8px; border: 1px solid var(--ligne); border-radius: 4px; background-color: #0F1013; }
.film i { position: relative; flex: 1; height: 58px; }
.film i::before { content: ''; position: absolute; inset: 0; border-radius: 2px; background: var(--g); filter: grayscale(.55) brightness(.72); }
.film .keep::before { filter: none; }
/* Comme dans une timeline : les images gardées sont sélectionnées, les autres sont désactivées, au passage de la ligne */
.film .keep::after, .film .drop::after { content: ''; position: absolute; }
.film .keep::after { inset: -3px; border: 2px solid var(--lime); border-radius: 3px; }
.film .drop::before { opacity: .35; }
.film .drop::after { inset: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.62) 0 3px, transparent 3px 7px); }
.film .scan { position: absolute; top: 6px; bottom: 6px; left: 0; width: 2px; background: var(--lime); opacity: 0; }
.rmw.in .film .scan { animation: filmscan 1.4s .4s linear both; }
@keyframes filmscan { 0% { left: 0; opacity: 1; } 95% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.rmw.in .film i::before { animation: filmseen .4s both; animation-delay: calc(.4s + var(--f) * 1.4s); }
.rmw.in .film i::after { animation: filmmark .2s both; animation-delay: calc(.4s + var(--f) * 1.4s); }
@keyframes filmmark { from { opacity: 0; scale: 1.25; } }
@keyframes filmseen { 50% { filter: grayscale(0) brightness(1.1); } }
.rm-down { display: flex; align-items: center; gap: 14px; margin: 22px 0; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; }
.rm-down svg { flex: none; width: 26px; height: 34px; fill: none; stroke: var(--lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.rm-down b { color: var(--lime); font-variant-numeric: tabular-nums; }
/* Teintes des images du tournage et des vignettes (exemple fictif) */
.tn1 { --g: radial-gradient(120% 70% at 70% 20%, #f1c597, #c27f50 35%, #6a3d27 70%, #2b1a11); }
.tn2 { --g: linear-gradient(160deg, #9fb1cf, #3e4b58); }
.tn3 { --g: linear-gradient(160deg, #b5cfa4, #33443a); }
.tn4 { --g: linear-gradient(160deg, #e2c49a, #6a5c47); }
.tn5 { --g: linear-gradient(160deg, #cfa3a9, #5a4541); }
.fwall { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.fcol { position: relative; padding: 16px; border: 1px solid var(--ligne); border-radius: var(--r); background-color: var(--panel); }
.fcol h3 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0 0 14px; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 17px; }
.fcol h3 span { padding: 3px 7px; border-radius: 3px; background: var(--cc); color: #0B0C0E; font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12.5px; line-height: 1; }
.fcol:nth-child(1) { --cc: var(--clip4); }
.fcol:nth-child(2) { --cc: var(--clip1); }
.fcol:nth-child(3) { --cc: var(--clip2); }
.fcol:nth-child(4) { --cc: var(--clip3); }
.fcol:nth-child(5) { --cc: var(--clip5); }
.fth { display: block; flex: none; position: relative; aspect-ratio: 9 / 16; border-radius: 2px; overflow: hidden; background: var(--g); }
.fth::after { content: ''; position: absolute; left: 50%; top: 50%; margin: -5px 0 0 -3px; border: 5px solid transparent; border-left: 8px solid rgba(255,255,255,.9); border-right: 0; }
.fv { display: flex; gap: 11px; align-items: center; padding: 8px 0; border-top: 1px solid var(--ligne); }
.fv .fth { width: 30px; }
.fv b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.fv small { display: block; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--gris); }
.fmore { margin: 0; padding-top: 10px; border-top: 1px solid var(--ligne); font-size: 13px; color: var(--gris); }
.fstrip, .fex, .fall { display: none; }
.rmw.in .fv, .rmw.in .fstrip .fth { animation: fpop .35s both; animation-delay: calc(1.9s + var(--i) * .06s); }
@keyframes fpop { from { opacity: 0; scale: .7; } }
/* Tablette : les 5 formats restent côte à côte, chacun avec ses vignettes et deux titres en exemple */
@media (max-width: 980px) {
  .fwall { gap: 10px; }
  .fcol { padding: 12px; }
  .fcol h3 { font-size: 15px; margin-bottom: 10px; }
  .fvs, .fmore { display: none; }
  .fstrip { display: flex; flex-wrap: wrap; gap: 3px; }
  .fstrip .fth { width: 16px; border-radius: 3px; }
  .fstrip .fth::after { margin: -3px 0 0 -2px; border-width: 3px 0 3px 4px; }
  .fex { display: block; margin: 9px 0 0; font-size: 12px; line-height: 1.4; color: var(--gris); }
}
/* Mobile : un format par ligne, de plus en plus estompés ; le 4e se fond dans un flou et la liste s'arrête là */
@media (max-width: 620px) {
  .rmw { margin-top: 28px; }
  .film { padding: 6px; }
  .film i { height: 40px; }
  .film i:nth-child(n+11) { display: none; }
  .rm-down { font-size: 17px; gap: 10px; margin: 18px 0 14px; }
  .rm-down svg { width: 20px; height: 26px; }
  .fwall { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .fcol { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h th" "ex ex"; align-items: center; column-gap: 12px; padding: 12px 14px; }
  .fcol h3 { grid-area: h; justify-content: flex-start; margin: 0; font-size: 16px; }
  .fcol .fstrip { grid-area: th; flex-wrap: nowrap; }
  .fcol .fstrip .fth { width: 20px; }
  .fcol .fex { grid-area: ex; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fcol:nth-child(2) { opacity: .6; }
  .fcol:nth-child(3) { opacity: .35; }
  .fcol:nth-child(4) { opacity: .3; filter: blur(2px); -webkit-mask-image: linear-gradient(#000, transparent 90%); mask-image: linear-gradient(#000, transparent 90%); }
  .fcol:nth-child(n+5) { display: none; }
  .fall { display: block; position: relative; width: fit-content; margin: -30px auto 0; padding: 8px 14px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--ligne); font-size: 13px; color: var(--blanc); }
}
@media (prefers-reduced-motion: reduce) {
  .rmw.in .film .scan, .rmw.in .film i::before, .rmw.in .film i::after, .rmw.in .fv, .rmw.in .fstrip .fth { animation: none; }
}

/* ---------- Section Montage : un écran de montage. La timeline se joue seule, l'aperçu suit le curseur ---------- */
.nle { position: relative; display: grid; grid-template-columns: clamp(250px, 24vw, 304px) minmax(0, 1fr); gap: 40px; margin-top: 48px; padding: 17px; border: 1px solid var(--ligne); border-radius: var(--r); background-color: var(--panel); }
.nle-r { display: flex; flex-direction: column; min-width: 0; }
.now-c { display: flex; align-items: center; gap: 12px; }
/* Le bouton de lecture : il attire l'œil quand la vidéo est arrêtée */
.pp { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--lime); cursor: pointer; transition: transform .15s; animation: pp 1.6s ease-out infinite; }
.pp:hover { transform: scale(1.06); }
.pp:focus-visible { outline: 3px solid var(--blanc); outline-offset: 3px; }
.pp::before { content: ''; width: 16px; height: 18px; margin-left: 3px; background: var(--noir); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pp.on { animation: none; }
.pp.on::before { width: 14px; height: 16px; margin-left: 0; background: linear-gradient(90deg, var(--noir) 36%, transparent 36% 64%, var(--noir) 64%); clip-path: none; }
@keyframes pp { from { box-shadow: 0 0 0 0 rgba(200,255,46,.5); } to { box-shadow: 0 0 0 14px rgba(200,255,46,0); } }
.now .tc { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 15px; color: var(--lime); }
.now b { display: block; margin: 8px 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: clamp(34px, 3.2vw, 46px); line-height: 1; letter-spacing: -0.02em; }
.now p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.4; color: #c9c9c4; }
.now.pop b, .now.pop p { animation: nowin .25s both; }
@keyframes nowin { from { opacity: 0; transform: translateY(8px); } }
.tl { display: grid; grid-template-columns: 96px minmax(0, 1fr); --rh: clamp(26px, 2.2vw, 32px); margin-top: auto; padding-top: 20px; }
.tl-n { padding-top: 28px; display: grid; grid-auto-rows: var(--rh); }
.tl-n span { align-self: center; font-size: 14px; font-weight: 600; color: #8f8f8a; transition: color .15s; }
.tl-n span.on { color: var(--blanc); }
.tl-l { position: relative; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tl-l:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.ruler { position: relative; height: 28px; border-bottom: 1px solid #333; background: repeating-linear-gradient(90deg, #444 0 1px, transparent 1px calc(100% / 30)) 0 100% / 100% 6px no-repeat; }
.ruler span { position: absolute; top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.5; color: #8f8f8a; translate: -50% 0; }
.ruler span:first-child { translate: 0 0; }
.ruler span:last-child { translate: -100% 0; }
.lane { position: relative; height: var(--rh); border-bottom: 1px solid var(--ligne); opacity: .72; transition: opacity .15s, background .15s; }
.lane.on { opacity: 1; background: var(--noir-3); }
.clip { position: absolute; top: 4px; bottom: 4px; left: calc(var(--a) / 30 * 100%); width: calc((var(--b) - var(--a)) / 30 * 100%); display: flex; align-items: center; padding-left: 7px; overflow: hidden; border-radius: 3px; background: var(--c); color: var(--noir); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; line-height: 1; }
.clip.hit { box-shadow: 0 0 0 2px #fff; }
/* Un zoom : une rampe posée sur l'image. Un SFX : un repère bref */
/* Les couleurs : la bande se colore à mesure que la tête de lecture avance */
.clip.cg { padding: 0; background: linear-gradient(90deg, #F1C597, #E0844F 30%, #87A46E 62%, #4E7FA8); }
.clip.cg::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--pos, 0) / .9 * 100%); background: #6d6d69; }
.clip.cg.hit { box-shadow: none; }
.clip.zm { z-index: 1; padding: 0; border-radius: 0; background: rgba(255,255,255,.8); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.clip.zm.hit { background: #fff; }
.clip.pip { top: 28%; bottom: 28%; min-width: 4px; padding: 0; border-radius: 3px; }
.wv { position: absolute; inset: 4px 0; display: flex; align-items: center; gap: 1px; }
.wv i { flex: 1; min-width: 0; border-radius: 1px; background: var(--c); }
.phd { position: absolute; top: 0; bottom: 0; left: calc(var(--pos, 0) * 100%); width: 2px; margin-left: -1px; background: var(--lime); z-index: 3; pointer-events: none; }
.phd b { position: absolute; top: 1px; left: 1px; translate: -50% 0; padding: 2px 6px; border-radius: 5px; background: var(--lime); color: var(--noir); font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 12px; line-height: 1.2; }
.hint { margin: 10px 0 0 96px; font-size: 13.5px; color: #8f8f8a; }
.after { margin-top: 24px; font-family: 'Archivo', sans-serif; font-weight: 800; font-stretch: 100%; font-size: 24px; letter-spacing: -0.01em; text-wrap: balance; }
/* Le texte des étapes reste dans la page pour les lecteurs d'écran et les moteurs de recherche */
.steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* L'aperçu : ce qu'il montre dépend de l'étape en cours */
.pv { position: relative; align-self: start; aspect-ratio: 9 / 16; border-radius: var(--r); overflow: hidden; container-type: inline-size; background: #1d130d; color: #fff; }
.pv-main, .pv-raw { transform-origin: 50% 35%; scale: var(--z, 1.05); }
.pv-main, .pv-bro { filter: saturate(1.15) contrast(1.05); }
.pv .s-prod { animation: none; }
.pv .prog i { animation: none; transform: scaleX(var(--pos, 0)); }
.pv .subs { white-space: nowrap; }
.pv .subs span { animation: none; }
.pv .subs .w { color: var(--lime); }
.pv .music { bottom: 30%; white-space: nowrap; }
.pv .hook, .pv .music, .pv .endc, .pv-bro, .pv-raw, .pv-line, .sfxp, .inc { display: none; }
.pv[data-fx="hook"] .hook, .pv[data-fx="mus"] .mus, .pv[data-fx="voi"] .voi, .pv[data-fx="end"] .endc, .pv[data-fx="inc"] .inc { display: flex; }
.pv.bro .pv-bro, .pv[data-fx="wipe"] .pv-raw, .pv[data-fx="wipe"] .pv-line, .pv[data-fx="sfx"] .sfxp { display: block; }
.pv[data-fx="sub"] .subs { scale: 1.12; }
/* La lumière : l'image passe du rush terne à l'image corrigée */
.pv-raw { filter: saturate(.2) brightness(.82) contrast(.85); animation: wipe 2s .3s ease-in-out both; }
.pv-line { position: absolute; top: 0; bottom: 0; width: 1cqw; background: var(--lime); z-index: 1; animation: wipel 2s .3s ease-in-out both; }
@keyframes wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 100% 0 0); } }
@keyframes wipel { from { left: 100%; } to { left: 0; } }
/* Les SFX : le son s'affiche à l'écran le temps de l'étape */
.sfxp { position: absolute; left: 50%; top: 34%; z-index: 2; padding: 1.6cqw 5cqw; border-radius: 3cqw; background: var(--lime); color: var(--noir); font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: 11cqw; line-height: 1.15; white-space: nowrap; translate: -50% 0; rotate: -6deg; }
.sfxp.pop { animation: sfxin .22s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes sfxin { from { opacity: 0; scale: .6; } }
/* Les incrustations : le prix et l'avis sur le plan du produit (exemple fictif) */
.inc { position: absolute; left: 7cqw; top: 15cqw; z-index: 2; flex-direction: column; align-items: flex-start; gap: 2cqw; animation: sfxin .22s cubic-bezier(.2, 1.6, .4, 1) both; }
.inc .tag { padding: 1cqw 4cqw; border-radius: 3cqw; background: var(--lime); color: var(--noir); font-family: 'Archivo', sans-serif; font-weight: 900; font-stretch: 100%; font-size: 11cqw; line-height: 1.2; white-space: nowrap; }
.inc .rev { padding: 1.2cqw 3cqw; border-radius: 3cqw; background: rgba(14,14,14,.78); font-weight: 700; font-size: 5.4cqw; line-height: 1.3; white-space: nowrap; }
.inc .rev i { font-style: normal; color: #F2C14E; }
/* Votre charte : la fin de vidéo, aux couleurs d'une marque d'exemple */
.endc { position: absolute; inset: 0; z-index: 3; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; background: #23483C; color: #F7EFDC; font-weight: 800; font-size: 8cqw; }
.endc .aa { font-family: Georgia, 'Times New Roman', serif; font-size: 34cqw; line-height: 1; }
.endc .sw { display: flex; gap: 2.4cqw; }
.endc .sw i { width: 8cqw; height: 8cqw; border-radius: 50%; background: #F2C14E; }
.endc .sw i:nth-child(2) { background: #F7EFDC; }
.endc .sw i:nth-child(3) { background: #D9694A; }
.endc .bio { margin-top: 2cqw; padding: 2.2cqw 6cqw; border-radius: 8cqw; background: #F2C14E; color: #23483C; font-size: 7.4cqw; line-height: 1.2; }
@media (prefers-reduced-motion: reduce) {
  .pv-raw, .pv-line, .pv[data-fx="wipe"] .pv-raw, .pv[data-fx="wipe"] .pv-line { display: none; }
  .pp { animation: none; }
}
@media (max-width: 980px) {
  .nle { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 13px; }
  .pp { width: 40px; height: 40px; }
  .now b { font-size: 28px; }
  .now p { font-size: 16px; }
  .tl { grid-template-columns: 84px minmax(0, 1fr); --rh: 22px; padding-top: 12px; }
  .clip { top: 3px; bottom: 3px; padding: 0; border-radius: 3px; font-size: 0; }
  .wv { inset: 3px 0; }
  .hint { margin-left: 84px; }
}
@media (max-width: 620px) {
  .nle { grid-template-columns: 38% minmax(0, 1fr); gap: 14px 12px; margin-top: 28px; padding: 5px; }
  .nle-r { display: contents; }
  .now { align-self: center; min-width: 0; }
  .now .tc { font-size: 13px; }
  .now-c { gap: 10px; }
  .now b { margin: 4px 0 6px; font-size: clamp(19px, 6.1vw, 25px); }
  .now p { font-size: clamp(13px, 3.7vw, 14.5px); line-height: 1.35; }
  .tl { grid-column: 1 / -1; grid-template-columns: 70px minmax(0, 1fr); --rh: 24px; padding-top: 0; }
  .tl-n { padding-top: 24px; }
  .tl-n span { font-size: 11.5px; }
  .ruler { height: 24px; }
  .ruler span { font-size: 10.5px; }
  .phd b { padding: 1px 4px; font-size: 10.5px; }
  .hint { grid-column: 1 / -1; margin: -4px 0 0; font-size: 12.5px; text-align: center; }
  .after { margin-top: 18px; font-size: 18px; }
}

/* ---------- Style logiciel : le site ressemble à une suite de montage. Du graphite, des panneaux, des clips de couleur ---------- */
.nav { background-color: #0F1013; border-bottom: 1px solid var(--ligne); }
/* Le fond : les divisions de la timeline, très légères, et une règle graduée en tête de chaque section */
.dark, section:not(.dark):not(.final) { background-image: linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px); background-size: calc(100% / 24) 100%; }
section:not(.dark):not(.final) { background-color: #17191D; }
footer.dark { background-image: none; }
section { position: relative; }
section::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 9px; pointer-events: none; background: repeating-linear-gradient(90deg, #3A3D44 0 1px, transparent 1px 12px); }
section.final::before { background: repeating-linear-gradient(90deg, rgba(0,0,0,.45) 0 1px, transparent 1px 12px); }
/* Le mot fort : un clip sélectionné, avec ses poignées */
section:nth-of-type(1) { --sel: var(--clip4); }
section:nth-of-type(2) { --sel: var(--clip1); }
section:nth-of-type(3) { --sel: var(--clip2); }
section:nth-of-type(4) { --sel: var(--clip6); }
section:nth-of-type(6) { --sel: var(--clip3); }
.final { --sel: var(--noir); }
.gp { position: relative; display: inline-block; white-space: nowrap; padding: 0 .16em; margin: 0 -.02em; border-radius: .07em; background: color-mix(in srgb, var(--sel) 20%, transparent); box-shadow: inset 0 0 0 .028em var(--sel); }
.gp::before, .gp::after { content: ''; position: absolute; top: 0; bottom: 0; width: .085em; background: var(--sel); }
.gp::before { left: 0; border-radius: .07em 0 0 .07em; }
.gp::after { right: 0; border-radius: 0 .07em .07em 0; }
.hero h1 .l1 { position: relative; z-index: 1; }
.bande { position: relative; display: inline-block; margin-inline: .1em; white-space: nowrap; isolation: isolate; color: #0B0C0E; animation: bande .45s .5s cubic-bezier(.2,.8,.2,1) both; }
.bande::before, .bande::after { content: ''; position: absolute; z-index: -1; inset: .06em -.1em -.05em; border-radius: .07em; }
.bande::before { background: var(--lime); }
.bande::after { border-inline: .085em solid rgba(0,0,0,.32); }
@keyframes bande { from { opacity: 0; scale: 1.08; } }
/* Le haut de page */
.hero { position: relative; }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 .kick { border-color: var(--ligne); background: var(--panel); }
.apps i { box-shadow: 0 0 0 2px var(--panel); }
.hero .sub { color: var(--dim); }
.phone { border: 1px solid #3F434B; border-radius: 3px; }
.ver { border-radius: 2cqw; }
/* Les pistes qui défilent en bas du haut de page */
.hero-tl { position: absolute; left: 0; right: 0; bottom: 0; height: 62px; overflow: hidden; border-top: 1px solid var(--ligne); background: #0F1013; pointer-events: none; }
.hero-tl div { display: flex; gap: 2px; width: max-content; height: 18px; margin-top: 2px; animation: rail 70s linear infinite; }
.hero-tl div:nth-child(2) { animation-duration: 95s; }
.hero-tl div:nth-child(3) { animation-duration: 120s; }
.hero-tl i { flex: none; width: var(--w); border-radius: 2px; background: var(--c); opacity: .62; }
.hero-tl::after { content: ''; position: absolute; top: 0; bottom: 0; left: 38%; width: 2px; background: var(--lime); }
@keyframes rail { to { transform: translateX(-50%); } }
@media (min-width: 981px) { .hero { min-height: calc(100svh - 97px); } }
@media (min-width: 981px) and (min-height: 781px) { .hero { padding-bottom: 94px; } }
@media (max-width: 980px), (max-height: 780px) { .hero-tl { display: none; } }
/* La séquence sous le menu : toute la page, clip par clip, avec la tête de lecture qui suit le défilement */
.seq { display: grid; grid-template-columns: auto minmax(0, 1fr); height: 29px; border-top: 1px solid var(--ligne); background: var(--noir); font: 500 11.5px/1 'JetBrains Mono', monospace; }
.seq-tc { display: flex; align-items: center; padding: 0 12px; border-right: 1px solid var(--ligne); color: var(--lime); font-weight: 700; font-variant-numeric: tabular-nums; }
.seq-l { position: relative; display: flex; overflow: hidden; }
.seq-l a { flex: var(--w) 1 0; min-width: 0; display: flex; align-items: center; margin: 4px 1px; padding: 0 6px; overflow: hidden; border-radius: 2px; background: var(--c); color: #0B0C0E; font-weight: 700; text-decoration: none; white-space: nowrap; }
.seq-l a:nth-child(1), .seq-l a:nth-child(8) { --c: #8A8F98; }
.seq-l a:nth-child(2) { --c: var(--clip4); }
.seq-l a:nth-child(3) { --c: var(--clip1); }
.seq-l a:nth-child(4) { --c: var(--clip2); }
.seq-l a:nth-child(5) { --c: var(--clip6); }
.seq-l a:nth-child(6) { --c: var(--clip5); }
.seq-l a:nth-child(7) { --c: var(--clip3); }
.seq-l a:nth-child(9) { --c: var(--lime); }
.seq-ph { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 100%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
/* Les panneaux */
.card { padding: 0 0 18px; overflow: hidden; border: 1px solid var(--ligne); background-color: var(--panel); box-shadow: none; }
.card .ill { margin: 0 0 16px; border: 0; border-bottom: 1px solid var(--ligne); border-radius: 0; background: var(--noir); }
.card h3, .card p { padding-inline: 16px; }
.card p { color: var(--dim); }
@media (min-width: 981px) {
  .fcol { padding: 0 0 12px; overflow: hidden; }
  .fcol h3 { margin: 0; padding: 10px 12px; border-bottom: 1px solid var(--ligne); background: var(--noir-3); font-size: 15px; }
  .fvs { padding: 0 12px; }
  .fv:first-child { border-top: 0; }
  .fmore { margin: 0 12px; }
}
.rushtest { border: 1px solid var(--lime); background-color: var(--panel); box-shadow: none; }
.rushtest p { color: var(--dim); }
.offer { border: 1px solid var(--ligne); background-color: var(--panel); box-shadow: none; }
.offer.reco { border-color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); }
.offer li { border-top-color: var(--ligne); }
.offer li::before { border-color: var(--lime); }
.offer .price small, .fine { color: var(--gris); }
.faq details, .faq details:last-child { border-color: var(--ligne); }
.faq summary::after { color: var(--lime); }
.faq details p { color: var(--dim); }
.final .btn-noir { background: var(--noir); }
.dots i { background: #3A3D44; }
.dots i.on { background: var(--lime); }
.dark .dots i { background: #3A3D44; }
@media (max-width: 620px) {
  .hero .wrap { height: min(max(440px, calc(100svh - 84px - 24px)), calc(285px + 90vw)); }
  .seq { height: 24px; font-size: 10.5px; }
  .seq-tc { padding: 0 8px; }
  .seq-l a { padding: 0; font-size: 0; }
  section::before { height: 6px; }
}

/* ---------- La preuve sociale : une pile de captures d'écran ---------- */
/* Toute la pile suit la largeur de sa colonne : --u vaut 1 px quand la colonne fait 1232 px */
.preuve { overflow: hidden; }
.preuve h2 { text-wrap: balance; }
.pile-w { container-type: inline-size; margin-top: 44px; }
.pile { --u: calc(100cqw / 1232); position: relative; height: calc(690 * var(--u)); }
/* Le logo Petzyo, à la place de son nom : il suit la taille du texte autour de lui */
.pz { display: inline-block; width: auto; height: 1.25em; vertical-align: -.3em; }
.sc { position: absolute; font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; border-radius: calc(6 * var(--u)); overflow: hidden; box-shadow: 0 2px 3px rgba(0,0,0,.5), 0 calc(18 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.55); }
img.sc { display: block; height: auto; padding: 0; border: 0; }
.s-an { --i: 0; left: 0; top: calc(18 * var(--u)); width: calc(372 * var(--u)); z-index: 2; padding: calc(16 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u)); background: #121212; color: #fff; border: 1px solid #2b2b2b; }
.s-an h4 { display: flex; justify-content: space-between; font-size: calc(15 * var(--u)); font-weight: 600; }
.s-an h4 span { color: #8a8a8a; font-weight: 400; font-size: calc(13 * var(--u)); }
.s-an .big { font-size: calc(40 * var(--u)); font-weight: 700; margin: calc(10 * var(--u)) 0 calc(2 * var(--u)); letter-spacing: -.02em; }
.s-an small { color: #fe2c55; font-size: calc(13 * var(--u)); font-weight: 600; }
.s-an svg { display: block; width: 100%; height: calc(118 * var(--u)); margin-top: calc(12 * var(--u)); }
.s-an .tb { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); margin-top: calc(12 * var(--u)); font-size: calc(12 * var(--u)); color: #8a8a8a; }
.s-an .tb b { display: block; color: #fff; font-size: calc(15 * var(--u)); font-weight: 600; }
.s-wa { --i: 2; left: calc(322 * var(--u)); top: calc(150 * var(--u)); width: calc(330 * var(--u)); z-index: 4; background: #E7DED3; color: #111; }
.s-wa .hd { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); background: #075E54; color: #fff; font-size: calc(14 * var(--u)); font-weight: 600; }
.s-wa .hd i { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: #FF3D5E url(petzyo-logo-blanc.svg) center / 78% no-repeat; }
.s-wa .hd small { display: block; font-weight: 400; font-size: calc(11.5 * var(--u)); opacity: .8; }
.s-wa .bd { display: grid; gap: calc(7 * var(--u)); padding: calc(14 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: 1.32; }
.s-wa p { width: fit-content; max-width: 88%; padding: calc(7 * var(--u)) calc(10 * var(--u)); background: #fff; border-radius: calc(8 * var(--u)); box-shadow: 0 1px 1px rgba(0,0,0,.14); }
.s-wa p.me { background: #D9FDD3; justify-self: end; }
.s-wa time { margin-left: calc(8 * var(--u)); font-size: calc(10.5 * var(--u)); color: #667; }
.s-ig { --i: 1; left: calc(644 * var(--u)); top: calc(24 * var(--u)); width: calc(270 * var(--u)); z-index: 3; padding: calc(16 * var(--u)) calc(18 * var(--u)); background: #fff; color: #111; }
.s-ig h4 { padding-bottom: calc(12 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; text-align: center; border-bottom: 1px solid #eee; }
.s-ig .big { margin-top: calc(12 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 700; letter-spacing: -.02em; text-align: center; }
.s-ig .lb { margin-bottom: calc(12 * var(--u)); color: #737373; font-size: calc(13 * var(--u)); text-align: center; }
.s-ig .br { display: grid; gap: calc(6 * var(--u)); font-size: calc(13 * var(--u)); }
.s-ig .br div { display: flex; justify-content: space-between; padding: calc(5 * var(--u)) 0; border-top: 1px solid #f1f1f1; }
.s-ig .br b { font-weight: 600; }
.s-cm { --i: 4; left: calc(640 * var(--u)); top: calc(322 * var(--u)); width: calc(282 * var(--u)); z-index: 2; padding: calc(14 * var(--u)); background: #fff; color: #111; font-size: calc(13 * var(--u)); }
.s-cm h4 { margin-bottom: calc(10 * var(--u)); font-size: calc(13 * var(--u)); font-weight: 700; text-align: center; }
.s-cm .c { display: grid; grid-template-columns: calc(26 * var(--u)) 1fr auto; gap: calc(8 * var(--u)); padding: calc(7 * var(--u)) 0; }
.s-cm .c i { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #b5cfa4; }
.s-cm .c:nth-child(3) i { background: #cfa3a9; }
.s-cm .c:nth-child(4) i { background: #9fb1cf; }
.s-cm b { display: block; color: #888; font-weight: 500; font-size: calc(11.5 * var(--u)); }
.s-cm .c > span { color: #999; font-size: calc(11.5 * var(--u)); }
.s-dr { --i: 3; left: calc(88 * var(--u)); top: calc(420 * var(--u)); width: calc(340 * var(--u)); z-index: 3; background: #fff; color: #1f1f1f; font-size: calc(13 * var(--u)); }
.s-dr h4 { padding: calc(12 * var(--u)) calc(14 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 500; border-bottom: 1px solid #eee; }
.s-dr div { display: flex; justify-content: space-between; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)); border-bottom: 1px solid #f2f2f2; }
.s-dr div::before { content: ''; flex: none; width: calc(15 * var(--u)); height: calc(15 * var(--u)); border-radius: calc(3 * var(--u)); background: #d93025; }
.s-dr span { flex: 1; }
.s-dr em { font-style: normal; color: #777; }
.s-pf { --i: 5; left: calc(914 * var(--u)); top: calc(70 * var(--u)); width: calc(318 * var(--u)); z-index: 5; padding: calc(14 * var(--u)); background: #121212; color: #fff; border: 1px solid #2b2b2b; }
.s-pf .pt { display: flex; gap: calc(12 * var(--u)); align-items: center; font-size: calc(15 * var(--u)); }
.s-pf .pt i { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%; background: #FF3D5E url(petzyo-logo-blanc.svg) center / 78% no-repeat; }
.s-pf .pt .pz { height: 1.7em; vertical-align: middle; }
.s-pf .bio { margin-bottom: calc(12 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.42; color: #EDEDED; }
.s-pf .bio b { font-weight: 600; }
.s-pf .pt b { font-weight: 600; }
.s-pf .nb { display: grid; grid-template-columns: repeat(3, 1fr); margin: calc(12 * var(--u)) 0; font-size: calc(11.5 * var(--u)); color: #8a8a8a; text-align: center; }
.s-pf .nb b { display: block; color: #fff; font-size: calc(17 * var(--u)); font-weight: 700; }
/* La grille va d'un bord à l'autre de la carte, comme sur un vrai profil */
.s-pf .gr { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2 * var(--u)); margin: 0 calc(-14 * var(--u)) calc(-14 * var(--u)); }
.s-pf .gr u { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #222; text-decoration: none; }
.s-pf .gr img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-pf .gr u::after { content: ''; position: absolute; inset: 62% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.55)); }
.s-pf .gr span { position: absolute; left: calc(6 * var(--u)); bottom: calc(5 * var(--u)); z-index: 1; display: flex; align-items: center; gap: calc(4 * var(--u)); color: #fff; font-size: calc(11.5 * var(--u)); font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.s-pf .gr span::before { content: ''; width: calc(8 * var(--u)); height: calc(9 * var(--u)); background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* Les captures tombent une à une sur la pile */
.pile .sc { opacity: 0; }
.pile.in .sc { opacity: 1; animation: tombe .5s calc(var(--i) * .13s) cubic-bezier(.2,.9,.3,1) backwards; }
@keyframes tombe { from { opacity: 0; translate: 0 calc(-46 * var(--u)); scale: 1.08; } }
@media (max-width: 980px) {
  .pile { --u: calc(100cqw / 820); height: calc(1120 * var(--u)); }
  .s-an { left: 0; top: calc(10 * var(--u)); }
  .s-ig { left: calc(510 * var(--u)); top: 0; width: calc(300 * var(--u)); }
  .s-wa { left: calc(220 * var(--u)); top: calc(330 * var(--u)); }
  .s-cm { left: calc(538 * var(--u)); top: calc(296 * var(--u)); }
  .s-dr { left: calc(50 * var(--u)); top: calc(680 * var(--u)); }
  .s-pf { left: calc(450 * var(--u)); top: calc(600 * var(--u)); }
}
@media (max-width: 620px) {
  .pile-w { max-width: 430px; margin: 24px auto 0; }
  .pile { --u: calc(100cqw / 430); height: calc(1080 * var(--u)); }
  .s-an { left: calc(-2 * var(--u)); top: calc(6 * var(--u)); }
  .s-dr { left: calc(90 * var(--u)); top: calc(310 * var(--u)); }
  .s-pf { left: 0; top: calc(570 * var(--u)); }
  .s-wa, .s-cm, .s-ig { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pile .sc, .pile.in .sc { opacity: 1; animation: none; }
}

/* Le choix du volume dans l'offre recommandée */
.offer .price .n { font-variant-numeric: tabular-nums; }
.vol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 5px; margin-top: 14px; }
.vol button { min-width: 50px; min-height: 42px; padding: 0 12px; border: 1px solid var(--ligne); border-radius: 4px; background: var(--noir); color: var(--dim); font: 800 16px/1 'Archivo', sans-serif; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.vol button:hover { border-color: var(--lime); color: var(--blanc); }
.vol button[aria-pressed="true"] { border-color: var(--lime); background: var(--lime); color: #0B0C0E; }
.vol span { color: var(--dim); font-size: 14px; }
/* Ce qui justifie le prix de chaque offre : ponctuelle ou sur la durée */
.offer .why { margin-top: 14px; color: var(--dim); font-size: 14.5px; line-height: 1.42; }

/* Le tournage, sous les offres (page anglaise) : la durée à gauche, le tournage seul et le pack à droite */
.shoot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 48px; align-items: center; margin-top: 18px; padding: 26px 28px; border: 1px solid var(--ligne); border-radius: var(--r); background-color: var(--panel); }
.shoot h3 { font-weight: 900; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.05; letter-spacing: -0.02em; }
.shoot p { margin-top: 8px; max-width: 46ch; color: var(--dim); font-size: 15px; line-height: 1.45; }
.shoot .vol button { padding: 0 16px; }
.shoot-p { display: flex; align-items: flex-end; gap: 30px; }
.shoot-p > div { display: grid; gap: 6px; }
.shoot-p small { color: var(--gris); font-size: 14px; line-height: 1.2; white-space: nowrap; }
.shoot-p b { font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shoot-p .pk b { color: var(--lime); }
.shoot-p .btn { white-space: nowrap; }
.faq details p a { color: var(--blanc); }
@media (max-width: 980px) {
  .shoot { grid-template-columns: 1fr; }
  .shoot-p { flex-wrap: wrap; }
}
@media (max-width: 620px) {
  .shoot { padding: 20px 16px; }
  .shoot-p { gap: 18px 24px; }
  .shoot-p b { font-size: 26px; }
  .shoot-p .btn { flex: 1 1 100%; justify-content: center; }
}

/* L'Asset Library : les plans classés à gauche, et la vidéo qu'on en tire à droite */
.lib { display: grid; grid-template-columns: minmax(0, 1fr) clamp(250px, 25vw, 320px); gap: 24px; margin-top: 44px; padding: 17px; border: 1px solid var(--ligne); border-radius: var(--r); background-color: var(--panel); }
.lib-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; font: 500 13px/1.2 'JetBrains Mono', monospace; color: var(--gris); }
.lib-h b { color: var(--blanc); font-weight: 700; }
.lib-g { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.lib-g figure { position: relative; aspect-ratio: 9 / 16; margin: 0; overflow: hidden; border-radius: 4px; background: #0F1013; transition: opacity .3s, filter .3s; }
.lib.run .lib-g figure { opacity: .42; filter: saturate(.65); }
.lib-g img { display: block; width: 100%; height: 100%; object-fit: cover; }
.lib-g figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 6px 6px; background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; font: 500 11px/1.1 'JetBrains Mono', monospace; }
.lib.run .lib-g figure.on { opacity: 1; filter: none; outline: 2px solid var(--lime); outline-offset: -2px; }
.lib-g figure.on::before { content: attr(data-n); position: absolute; left: 6px; top: 6px; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; background: var(--lime); color: #0B0C0E; font: 700 12px/1 'JetBrains Mono', monospace; }
.lib-g figure.now::before { background: #fff; }
.lib-b { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lib-tabs { display: grid; gap: 6px; }
.lib-tabs .lib-h { margin-bottom: 6px; }
.lib-tabs button { padding: 9px 12px; border: 1px solid var(--ligne); border-radius: 4px; background: var(--noir); color: var(--dim); font: 700 14px/1.2 'Archivo', sans-serif; text-align: left; cursor: pointer; transition: color .2s, border-color .2s; }
.lib-tabs button:hover { color: var(--blanc); }
.lib-tabs button[aria-pressed="true"] { border-color: var(--lime); color: var(--blanc); }
.lib-v { display: flex; flex-direction: column; gap: 10px; }
.lib-s { position: relative; width: 54%; aspect-ratio: 9 / 16; margin: 0 auto; overflow: hidden; border: 1px solid var(--ligne); border-radius: 8px; background: #0F1013; }
.lib-s img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .22s; }
.lib-s img.on { opacity: 1; animation: libzoom 1.5s linear both; }
@keyframes libzoom { from { scale: 1; } to { scale: 1.07; } }
.lib-k { position: absolute; left: 7%; right: 7%; top: 11%; z-index: 1; text-align: center; line-height: 1.4; }
.lib-k span { padding: .16em .42em; border-radius: 3px; background: #FF3D5E; color: #fff; font: 800 15px/1.4 'Archivo', sans-serif; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lib-t { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; height: 46px; padding: 3px; border: 1px solid var(--ligne); border-radius: 4px; background: #0F1013; }
.lib-t i { position: relative; overflow: hidden; border-radius: 2px; background-position: center; background-size: cover; opacity: .6; }
.lib-t i.on { opacity: 1; }
.lib-t i.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--lime); transform-origin: left; animation: libprog 1.3s linear both; }
@keyframes libprog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 980px) {
  .lib { grid-template-columns: minmax(0, 1fr); }
  .lib-b { display: grid; grid-template-columns: minmax(0, min(42%, 190px)) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 12px; }
  .lib-v { display: contents; }
  .lib-s { grid-column: 1; grid-row: 1 / span 2; width: 100%; }
  .lib-tabs { grid-column: 2; grid-row: 1; }
  .lib-t { grid-column: 2; grid-row: 2; align-self: start; height: 64px; }
}
@media (max-width: 620px) {
  .lib { gap: 12px; margin-top: 28px; padding: 8px; }
  .lib-g { gap: 3px; }
  .lib-g figcaption { display: none; }
  .lib-g figure.on::before { left: 3px; top: 3px; width: 15px; height: 15px; font-size: 10px; }
  .lib-h { margin-bottom: 8px; font-size: 12px; }
  .lib-tabs button { padding: 8px 9px; font-size: 13px; }
  .lib-k span { font-size: 12.5px; }
  .lib-t { height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .lib-s img, .lib-s img.on, .lib-t i.on::after { transition: none; animation: none; }
  .lib-t i.on::after { transform: none; }
}