/* Foliocast — couche « mouvement » (m1).
   Profondeur, apparitions et relief, ajoutés par-dessus site.css sans toucher au HTML.
   Règles : transform / opacity seulement, rien n'est caché tant que site-motion.js n'a pas
   posé html.fm-on, tout est coupé sous prefers-reduced-motion. */

:root {
  --fm-ease: cubic-bezier(.2, .7, .2, 1);
  --fm-shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 24px -10px rgba(0, 0, 0, .55), 0 34px 70px -28px rgba(0, 0, 0, .75);
  --fm-shadow-2: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 36px -14px rgba(0, 0, 0, .65), 0 50px 100px -36px rgba(0, 0, 0, .9);
}

/* ---------- relief : ombres douces superposées ---------- */
.browser { box-shadow: inset 0 1px 0 rgba(237, 230, 214, .06), var(--fm-shadow-2); }
.phone { box-shadow: inset 0 1px 0 rgba(237, 230, 214, .10), 0 0 0 1px rgba(0, 0, 0, .6), var(--fm-shadow-2); }
.shot img, .player { box-shadow: var(--fm-shadow-1); }
.reel-row .rl-screen { box-shadow: 0 2px 4px rgba(0, 0, 0, .25), 0 22px 40px -18px rgba(0, 0, 0, .55); }
.offer { box-shadow: 0 18px 40px -26px rgba(224, 122, 63, .45); }
.join > .wrap {
  background: radial-gradient(70% 60% at 100% 0%, rgba(224, 122, 63, .09), transparent 70%), var(--ink-2);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, .05), var(--fm-shadow-2);
}
.top { transition: box-shadow .3s ease; }
.top.fm-sc { box-shadow: 0 12px 30px -16px rgba(0, 0, 0, .8); }

/* cartes de tarifs : élévation au survol (l'ombre large vit sur ::after, seule son opacité change) */
.tier { position: relative; box-shadow: inset 0 1px 0 rgba(237, 230, 214, .04), 0 16px 36px -24px rgba(0, 0, 0, .85); }
.tier.hl { box-shadow: inset 0 1px 0 rgba(237, 230, 214, .06), 0 24px 60px -30px rgba(224, 122, 63, .5); }
.tier::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .7), 0 40px 70px -34px rgba(0, 0, 0, 1);
  opacity: 0; transition: opacity .35s var(--fm-ease);
}
.tier.hl::after { box-shadow: 0 10px 22px -12px rgba(0, 0, 0, .6), 0 40px 80px -30px rgba(224, 122, 63, .55); }

@media (hover: hover) and (pointer: fine) {
  .tier { transition: transform .35s var(--fm-ease), border-color .35s; }
  .tier:hover { transform: translateY(-4px); }
  .tier:not(.hl):hover { border-color: #3d3a34; }
  .tier:hover::after { opacity: 1; }
  .btn:not(.ghost):not(.off) { transition: background .15s, border-color .15s, color .15s, transform .25s var(--fm-ease), box-shadow .25s; }
  .btn:not(.ghost):not(.off):hover { transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(224, 122, 63, .7); }
  .play-ic { transition: border-color .15s, transform .3s var(--fm-ease); }
  .play-link:hover .play-ic { transform: scale(1.06); }
}

/* ---------- héros : entrée en CSS pur (visible même sans JS, aucun flash) ---------- */
@keyframes fm-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes fm-rise-sm { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@keyframes fm-rise-x { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes fm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fm-float { 0% { transform: translate3d(0, -5px, 0) rotate(-.4deg); } 100% { transform: translate3d(0, 6px, 0) rotate(.5deg); } }
@keyframes fm-float-b { 0% { transform: translate3d(0, 5px, 0); } 100% { transform: translate3d(0, -7px, 0); } }
@keyframes fm-pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fm-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes fm-draw { to { stroke-dashoffset: 0; } }

.hero-copy > * { animation: fm-rise .8s var(--fm-ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .07s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(n+5) { animation-delay: .32s; }
.hero-visual > .browser { animation: fm-rise 1s var(--fm-ease) .3s both; }
.hero-visual > .phone-fig { animation: fm-rise 1s var(--fm-ease) .45s both; }

/* couche de fond du héros (ajoutée par JS) */
.hero { position: relative; }
.hero > .wrap { position: relative; z-index: 1; }
.fm-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; animation: fm-fade 1.6s ease .2s both; }
.fm-glow { position: absolute; border-radius: 50%; will-change: transform; }
.fm-glow.a { width: 980px; height: 760px; right: -220px; bottom: -260px; background: radial-gradient(closest-side, rgba(224, 122, 63, .16), rgba(224, 122, 63, .05) 55%, transparent); }
.fm-glow.b { width: 700px; height: 520px; left: -260px; top: -200px; background: radial-gradient(closest-side, rgba(237, 230, 214, .05), transparent); }
.fm-shape { position: absolute; will-change: transform; }
.fm-shape i { display: block; border-radius: 9px; animation: fm-float 9s ease-in-out infinite alternate; }
/* le « F » du logo, éclaté en trois pièces qui flottent chacune à leur rythme */
.fm-shape.s1 { right: calc(6% + 66px); top: 150px; }
.fm-shape.s1 i { width: 34px; height: 123px; border: 1.5px solid rgba(237, 230, 214, .17); }
.fm-shape.s2 { right: 6%; top: 150px; }
.fm-shape.s2 i { width: 58px; height: 34px; border: 1.5px solid rgba(237, 230, 214, .13); animation-duration: 10s; animation-delay: -3s; }
.fm-shape.s3 { right: calc(6% + 17px); top: 192px; }
.fm-shape.s3 i { width: 41px; height: 34px; background: var(--accent); opacity: .85; animation: fm-float-b 7.5s ease-in-out infinite alternate; }
@media (max-width: 1180px) { .fm-shape { display: none; } }

/* visuels du héros : la profondeur est écrite par JS dans transform */
.hero-visual { position: relative; }
.hero-visual > .browser, .hero-visual > .phone-fig { will-change: transform; transform-origin: 50% 60%; }
.browser { position: relative; }
.fm-glare {
  position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 3;
  background: radial-gradient(closest-side, rgba(255, 248, 235, .075), transparent 62%);
  opacity: 0; transition: opacity .6s ease; will-change: transform;
}
.hero.fm-hover .fm-glare { opacity: 1; }

/* cartes flottantes (ajoutées par JS, aria-hidden) */
.fm-float { position: absolute; z-index: 4; pointer-events: none; will-change: transform; }
.fm-float > div { animation: fm-float 8s ease-in-out infinite alternate; }
.fm-float.f2 > div { animation: fm-float-b 9.5s ease-in-out -2s infinite alternate; }
.fm-card {
  display: flex; align-items: center; gap: 10px; padding: 9px 13px 9px 10px; border-radius: 12px;
  background: rgba(29, 27, 25, .92); border: 1px solid #3a3731; color: var(--cream);
  box-shadow: inset 0 1px 0 rgba(237, 230, 214, .07), 0 2px 4px rgba(0, 0, 0, .3), 0 18px 34px -12px rgba(0, 0, 0, .8);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap;
}
.fm-card b { display: block; font: 600 13px/1.2 var(--body); }
.fm-card small { display: block; margin-top: 3px; font: 400 11.5px/1.2 var(--mono); color: var(--cream-dim); letter-spacing: .02em; }
.fm-card .fm-ok { flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; }
.fm-card .fm-ok svg { width: 14px; height: 14px; fill: none; stroke: var(--accent-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fm-card img { flex: none; width: 40px; height: 50px; object-fit: cover; border-radius: 6px; display: block; }
.fm-float.f1 { left: 52%; top: 36%; animation: fm-rise-sm .9s var(--fm-ease) .9s both; }
.fm-float.f2 { left: -30px; bottom: 96px; animation: fm-rise-sm .9s var(--fm-ease) 1.1s both; }
@media (max-width: 1040px) { .fm-float.f1 { left: 40%; top: 40%; } .fm-float.f2 { display: none; } }
@media (max-width: 640px) {
  .fm-float.f1 { left: 10px; top: 56%; }
  .fm-card { padding: 6px 10px 6px 7px; gap: 7px; border-radius: 10px; }
  .fm-card b { font-size: 11.5px; }
  .fm-card small { font-size: 10px; }
  .fm-card .fm-ok { width: 20px; height: 20px; border-radius: 6px; }
  .fm-card .fm-ok svg { width: 11px; height: 11px; }
  .fm-glow.a { width: 520px; height: 520px; right: -200px; bottom: -120px; }
}

/* ---------- apparitions au défilement (seulement une fois html.fm-on posé par JS) ---------- */
.fm-on .fm-r:not(.fm-in) { opacity: 0; translate: 0 24px; }
.fm-on .fm-r.fm-sm:not(.fm-in) { translate: 0 12px; }
.fm-r.fm-in { animation: fm-rise .75s var(--fm-ease) var(--fm-d, 0s) both; }
.fm-r.fm-sm.fm-in { animation-name: fm-rise-sm; animation-duration: .6s; }

/* parallaxe des visuels de section : écrite par JS dans transform */
.fm-px { will-change: transform; }

/* étapes : rail qui se dessine, cartes qui arrivent l'une après l'autre */
.steps { position: relative; isolation: isolate; }
.steps li { position: relative; z-index: 1; }
.steps .n { position: relative; z-index: 1; background: var(--ink); }
.steps li:first-child .n { background: var(--accent); }
.steps .n::after { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; border: 1.5px solid var(--accent); opacity: 0; pointer-events: none; }
.fm-rail { position: absolute; z-index: 0; left: 21px; width: 2px; background: linear-gradient(var(--accent), rgba(224, 122, 63, .35)); transform-origin: 50% 0; pointer-events: none; }
.fm-on .steps:not(.fm-go) .fm-rail { transform: scaleY(0); }
.steps.fm-go .fm-rail { transform: scaleY(1); transition: transform 1.15s cubic-bezier(.6, 0, .25, 1) .2s; }
.fm-on .steps:not(.fm-go) li { opacity: 0; translate: -14px 0; }
.steps.fm-go li { animation: fm-rise-x .7s var(--fm-ease) both; }
.steps.fm-go .n { animation: fm-pop .55s var(--fm-ease) both; }
.steps.fm-go .n::after { animation: fm-ring .9s ease-out both; }
.steps.fm-go li:nth-child(2), .steps.fm-go li:nth-child(2) .n { animation-delay: .42s; }
.steps.fm-go li:nth-child(3), .steps.fm-go li:nth-child(3) .n { animation-delay: .84s; }
.steps.fm-go li:nth-child(1) .n::after { animation-delay: .25s; }
.steps.fm-go li:nth-child(2) .n::after { animation-delay: .67s; }
.steps.fm-go li:nth-child(3) .n::after { animation-delay: 1.09s; }

/* icônes des fonctions : le trait se dessine */
.fm-on .feat.fm-r svg > * { stroke-dasharray: 1; stroke-dashoffset: 1; }
.feat.fm-r.fm-in svg > * { animation: fm-draw 1.1s ease-out calc(var(--fm-d, 0s) + .25s) forwards; }

/* chiffre clé : largeur stable pendant le comptage */
.reels .big { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------- mouvement réduit : tout est statique et visible ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-visual > *, .fm-hero-bg, .fm-float, .fm-float > div, .fm-shape i,
  .fm-r.fm-in, .steps.fm-go li, .steps.fm-go .n, .steps.fm-go .n::after, .feat.fm-r.fm-in svg > * { animation: none !important; }
  .fm-on .fm-r:not(.fm-in), .fm-on .steps:not(.fm-go) li { opacity: 1; translate: none; }
  .fm-on .steps .fm-rail { transform: none; transition: none; }
  .fm-on .feat.fm-r svg > * { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fm-glare { display: none; }
  .tier, .tier:hover, .btn:hover, .play-link:hover .play-ic { transform: none !important; }
  .hero-visual > .browser, .hero-visual > .phone-fig, .fm-px { transform: none !important; }
}

/* Reels expliqués : chaque téléphone joue un vrai montage (vidéo muette en boucle, textes incrustés) */
.reel-row .rl { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.reel-row .rl:nth-child(odd) { transform: translateY(24px); }
.rl-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; border: 6px solid var(--ink); border-radius: 20px; overflow: hidden; background: var(--ink); }
.rl-screen .rl-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; max-width: none; background: var(--ink); }
.rl-vid::-webkit-media-controls, .rl-vid::-webkit-media-controls-enclosure, .rl-vid::-webkit-media-controls-overlay-play-button, .rl-vid::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } /* sans JS, Chrome affiche sinon ses commandes */
.rl-screen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,12,11,.3) 0, rgba(12,12,11,0) 16%, rgba(12,12,11,0) 88%, rgba(12,12,11,.35) 100%); pointer-events: none; }
.rl-badge { position: absolute; z-index: 2; top: 10px; left: 10px; font: 500 10px/1 var(--mono, "IBM Plex Mono", monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); background: rgba(12,12,11,.55); padding: 5px 8px; border-radius: 20px; }
.rl-bar { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 8px; height: 3px; border-radius: 3px; background: rgba(237,230,214,.3); overflow: hidden; }
.rl-bar i { display: block; height: 100%; width: 100%; background: var(--cream); border-radius: inherit; transform-origin: 0 50%; transform: scaleX(0); }
.rl-zoom { position: absolute; z-index: 2; top: 10px; right: 10px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink); font: 600 13px/1 var(--body); }
.reel-row figcaption { display: flex; align-items: center; gap: 7px; font: 600 clamp(12px, 1.1vw, 15px)/1.2 var(--body); color: var(--accent-ink, var(--ink)); white-space: nowrap; }
.reel-row figcaption b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); font: 600 12px/1 var(--body); }
@media (max-width: 900px) { .rl-screen { border-width: 4px; border-radius: 14px; } }
@media (max-width: 560px) { .rl-badge { font-size: 8px; padding: 4px 6px; top: 7px; left: 7px; } .rl-zoom { width: 18px; height: 18px; top: 7px; right: 7px; font-size: 10px; } .rl-bar { left: 7px; right: 7px; bottom: 6px; height: 2px; } .reel-row figcaption { font-size: 11px; white-space: normal; text-align: center; justify-content: center; } }

/* héros : le Reel du téléphone est une vraie vidéo du moteur (même rendu que la section Reels) */
.phone .screen .hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #111; }

/* formulaires sur petit téléphone : la colonne ne s'élargit jamais au-delà de la carte
   (le contrôle anti-robot de Cloudflare mesure 300 px de large) */
form.signup, .field { grid-template-columns: minmax(0, 1fr); }
.field input, .field select { min-width: 0; max-width: 100%; }
@media (max-width: 400px) { .join > .wrap { width: calc(100% - 20px); padding: 24px 12px; } }
@media (max-width: 339px) { .turnstile { transform: scale(.86); transform-origin: 0 0; height: 56px; } }

/* page d'accès : aide sous le champ Instagram, infos facultatives repliées */
.field .hint { font: 400 13px/1.45 var(--body); color: var(--cream-dim); }
details.opt { border: 1px solid var(--line-2); border-radius: 10px; padding: 0 14px; }
details.opt > summary { cursor: pointer; padding: 13px 0; font: 500 15px/1.2 var(--body); color: var(--cream-2); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
details.opt > summary::-webkit-details-marker { display: none; }
details.opt > summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--cream-dim); }
details.opt[open] > summary::after { content: '\2212'; }
details.opt > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.opt-body { display: grid; gap: 16px; padding: 4px 0 16px; }

/* page d'accès des pubs : Reel d'exemple + « ce que vous recevez » */
.access-get { display: flex; gap: 18px; align-items: flex-start; margin: 22px 0 18px; }
.access-reel { margin: 0; flex: 0 0 136px; display: flex; flex-direction: column; gap: 8px; }
.access-reel .rl-screen { border-width: 4px; border-radius: 16px; box-shadow: 0 18px 34px -18px rgba(0, 0, 0, .6); }
.access-reel figcaption { font-size: 11px; line-height: 1.35; color: var(--cream-dim); }
.access-get-txt { flex: 1; min-width: 0; }
.access-get-txt .eyebrow { margin: 0 0 8px; }
.access-get .access-list { margin: 0; }
@media (max-width: 400px) { .access-get { gap: 14px; } .access-reel { flex-basis: 104px; } }

/* tarifs : prix réellement payé par un bêta-testeur */
.beta-price { margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: var(--cream-dim); }
.beta-price b { color: var(--cream); font-weight: 600; }

/* page d'accès : les faits de la bêta (sans compteur tant qu'il est faible) */
.access-facts { margin: 14px 0 0; font-size: 12px; letter-spacing: .04em; line-height: 1.6; color: var(--cream-dim); }