/* RF Motion v6 — écrit à la main, sans image ajoutée. Tout est sous html.rfx (posé en tête seulement si
   le mouvement est permis) : sans JS ou en mouvement réduit, la page reste exactement la page normale. */

/* Fil d'or de progression */
.rfx-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:100000;pointer-events:none;
transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#8a6a35,#d4ab63 40%,#f0d9a8);
box-shadow:0 0 12px rgba(240,217,168,.55)}

/* ---------- Titres : les mots montent d'un masque ---------- */
.rfx .rf .rw{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.rfx .rf .rw>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.16,1,.3,1);
transition-delay:calc(var(--i,0) * 55ms)}
.rfx .rf .rw-on .rw>span{transform:none}
.rfx .rf h2.rv{opacity:1;transform:none}

/* ---------- Héros ---------- */
.rfx .rf .hero .eyebrow,.rfx .rf .hero .lead,.rfx .rf .hero .btns{animation:rfxUp 1s cubic-bezier(.16,1,.3,1) both}
.rfx .rf .hero .eyebrow{animation-delay:.05s}
.rfx .rf .hero .lead{animation-delay:.55s}
.rfx .rf .hero .btns{animation-delay:.7s}
@keyframes rfxUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rfx .rf .hero .shine{background-size:220% 100%;animation:rfxShine 2.4s cubic-bezier(.3,.7,.2,1) .9s both}
@keyframes rfxShine{from{background-position:100% 0}to{background-position:0 0}}
.rfx .rf .hero-grid>div:first-child{will-change:transform,opacity}

/* Produit : allumage, reflet sur le verre, éclat d'or qui suit la souris (ou le défilement) */
.rfx .rf .hero-media{will-change:transform}
.rfx .rf .rfx-prod{position:relative;display:block;transform-style:preserve-3d;
transition:transform .6s cubic-bezier(.16,1,.3,1);animation:rfxWake 1.8s cubic-bezier(.2,.7,.2,1) .15s both}
@keyframes rfxWake{0%{opacity:0;transform:translateY(40px) scale(.94);filter:brightness(.15) contrast(1.2)}
45%{opacity:1;filter:brightness(.55)}100%{opacity:1;transform:none;filter:none}}
.rfx .rf .hero .rfx-prod img{animation:none;transform:none!important;transition:none}
.rfx .rf .rfx-sheen{position:absolute;inset:0;pointer-events:none;opacity:.85;will-change:background-position;
background:linear-gradient(105deg,transparent calc(var(--sx,50%) - 16%),rgba(255,236,190,.0) calc(var(--sx,50%) - 10%),
rgba(255,240,205,.62) var(--sx,50%),rgba(255,236,190,0) calc(var(--sx,50%) + 10%),transparent calc(var(--sx,50%) + 16%));
-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.rfx .rf .rfx-refl{position:absolute;left:0;right:0;top:94%;height:42%;pointer-events:none;overflow:hidden;opacity:.16;
-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 65%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 65%)}
.rfx .rf .rfx-refl img{width:100%;height:auto;display:block;position:absolute;top:0;transform:scaleY(-1)!important;box-shadow:none!important;filter:blur(1px)}
.rfx .rf .hero .rfx-prod>img{box-shadow:none;border-radius:0;position:relative;z-index:1}
.rfx .rf .rfx-prod::after{content:"";position:absolute;left:8%;right:4%;bottom:-4%;height:22%;border-radius:50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(0,0,0,.6),transparent)}
.rfx .rf .hero .rfx-sheen{z-index:2}
.rfx .rf .rfx-halo{position:absolute;left:50%;top:48%;width:120%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
border-radius:50%;background:radial-gradient(closest-side,rgba(240,217,168,.22),rgba(212,171,99,.08) 45%,transparent 70%);
opacity:var(--halo,.8);animation:rfxHalo 2.2s ease .3s both}
@keyframes rfxHalo{from{opacity:0;scale:.6}to{scale:1}}

/* ---------- Vidéo : la télé s'allume (ligne de lumière, puis l'image) ---------- */
.rfx .rf .vidbox{clip-path:inset(var(--ct,0%) var(--cl,0%) var(--ct,0%) var(--cl,0%) round 16px);will-change:clip-path}
.rfx .rf .vidbox::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:radial-gradient(60% 50% at 50% 50%,#fff8e6,rgba(240,217,168,.6) 40%,rgba(13,11,9,0) 80%);
opacity:var(--flash,0);mix-blend-mode:screen}
.rfx .rf .vid{position:relative;overflow:hidden}
.rfx .rf .vid::before{content:"";position:absolute;left:50%;top:62%;width:90vw;height:60%;translate:-50% -50%;pointer-events:none;
background:radial-gradient(closest-side,rgba(212,171,99,.2),transparent);opacity:var(--vglow,0);filter:blur(20px)}
.rfx .rf .vid .w{position:relative}

/* ---------- Matériel : le boîtier pivote au défilement ---------- */
.rfx .rf .rfx-turn{position:relative;display:block;max-width:700px;margin:0 auto 12px;perspective:1100px}
.rfx .rf .rfx-turn>.rfx-tin{position:relative;display:block;transform-origin:50% 60%;will-change:transform}
.rfx .rf .rfx-turn img{margin:0!important}
.rfx .rf .cards .card{transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s,box-shadow .25s,opacity .8s}
.rfx .rf .cards.rfx-pre .card{opacity:0;transform:perspective(900px) rotateX(18deg) translateY(40px)}
.rfx .rf .cards .card{transition-delay:calc(var(--i,0) * 110ms)}
.rfx .rf .cards.rfx-go .card{opacity:1;transform:none;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s,border-color .25s,box-shadow .25s;transition-delay:calc(var(--i,0) * 110ms)}
.rfx .rf .cards.rfx-go .card:hover{transform:translateY(-5px);transition-delay:0s}

/* ---------- Photo qui se dévoile + douze mois à 0 $ ---------- */
.rfx .rf .rfx-frame{position:relative;display:block;overflow:hidden;border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.4);
clip-path:inset(0 var(--wr,0%) 0 0 round 14px)}
.rfx .rf .rfx-frame img{border-radius:0!important;box-shadow:none!important;transform:scale(var(--zs,1));will-change:transform;margin:0!important}
.rfx .rf .rfx-months{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:26px 0 6px;max-width:520px}
.rfx .rf .rfx-mo{border:1px solid var(--line);border-radius:10px;padding:9px 4px 8px;text-align:center;background:#141110;
opacity:.28;transform:translateY(8px);transition:opacity .45s,transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,background .45s}
.rfx .rf .rfx-mo small{display:block;font-size:10.5px;letter-spacing:.14em;font-weight:700;color:var(--mid)}
.rfx .rf .rfx-mo b{display:block;font-size:19px;letter-spacing:-.02em;color:var(--ink);line-height:1.2}
.rfx .rf .rfx-mo.on{opacity:1;transform:none;border-color:rgba(212,171,99,.55);background:#1a1611}
.rfx .rf .rfx-mo.on b{color:var(--gold2)}
.rfx .rf .rfx-mcap{font-size:13px;color:var(--mid);margin:0 0 22px}
.rfx .rf .rfx-mcap b{color:var(--gold2)}

/* ---------- Tuiles : la lumière suit le curseur sur les bordures ---------- */
.rfx .rf .tiles{position:relative;background:radial-gradient(420px circle at var(--mx,-999px) var(--my,-999px),rgba(240,217,168,.75),var(--line) 60%)}
.rfx .rf .tile{position:relative;background:#1a1611}
.rfx .rf .tile::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
background:radial-gradient(260px circle at var(--tx,50%) var(--ty,50%),rgba(212,171,99,.13),transparent 70%)}
.rfx .rf .tile:hover::before,.rfx .rf .tile.lit::before{opacity:1}
.rfx .rf .tile.lit h3{color:var(--gold2)}

/* ---------- Installation : chronomètre et rail d'or ---------- */
.rfx .rf .rfx-clock{display:flex;width:max-content;align-items:baseline;gap:10px;margin:2px 0 4px;padding:8px 16px 8px 14px;border:1px solid var(--line);
border-radius:999px;background:#141110;font-size:13px;color:var(--mid);font-weight:600}
.rfx .rf .rfx-clock b{font:700 22px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--gold2);letter-spacing:.02em;font-variant-numeric:tabular-nums}
.rfx .rf .rfx-clock i{width:8px;height:8px;border-radius:50%;background:var(--gold);align-self:center;box-shadow:0 0 10px var(--gold);animation:rfxBlink 1.2s steps(2) infinite paused}
.rfx .rf .rfx-clock.rfx-vis i{animation-play-state:running}
.rfx .rf .rfx-clock.done i{animation:none;background:#7bd88f;box-shadow:0 0 10px #7bd88f}
@keyframes rfxBlink{50%{opacity:.25}}
.rfx .rf .steps{position:relative}
.rfx .rf .rfx-rail{position:absolute;left:21px;right:calc(20% - 3px);top:20px;height:2px;background:var(--line);pointer-events:none}
.rfx .rf .rfx-rail::after{content:"";position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(var(--rp,0));
background:linear-gradient(90deg,var(--gold),var(--gold2));box-shadow:0 0 10px rgba(240,217,168,.6)}
.rfx .rf .step{position:relative;transition:opacity .5s}
.rfx .rf .step::before{position:relative;z-index:1;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s,filter .5s}
.rfx .rf .steps.rfx-live .step{opacity:.38}
.rfx .rf .steps.rfx-live .step::before{filter:grayscale(1) brightness(.6);transform:scale(.86)}
.rfx .rf .steps.rfx-live .step.on{opacity:1}
.rfx .rf .steps.rfx-live .step.on::before{filter:none;transform:none;box-shadow:0 0 0 6px rgba(212,171,99,.14),0 6px 18px rgba(212,171,99,.35)}
@media(max-width:900px){
.rfx .rf .rfx-rail{left:20px;right:auto;top:20px;bottom:20px;width:2px;height:auto}
.rfx .rf .rfx-rail::after{transform-origin:50% 0;transform:scaleY(var(--rp,0))}
.rfx .rf .steps{grid-template-columns:1fr!important;gap:22px}
.rfx .rf .step{padding-left:62px;min-height:42px}
.rfx .rf .step::before{position:absolute;left:0;top:0;margin:0}
}

/* ---------- Tarifs : bordure d'or vivante sur le plus populaire ---------- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.rfx .rf .price.best{border-color:transparent;
background:linear-gradient(#1a1611,#1a1611) padding-box,conic-gradient(from var(--ang),#5c4524,#d4ab63,#fff1cf,#d4ab63,#5c4524 50%,#d4ab63 75%,#5c4524) border-box;
animation:rfxSpin 6s linear infinite paused}
.rfx .rf .price.best.rfx-vis{animation-play-state:running}
@keyframes rfxSpin{to{--ang:360deg}}
.rfx .rf .prices .price{transition:transform .25s cubic-bezier(.2,.8,.3,1),border-color .25s,box-shadow .25s,opacity .6s}
.rfx .rf .prices.rfx-pre .price{opacity:0;transform:translateY(30px)}
.rfx .rf .prices.rfx-go .price{opacity:1;transform:none;transition:transform .8s cubic-bezier(.16,1,.3,1),opacity .6s,box-shadow .25s;transition-delay:calc(var(--i,0) * 90ms)}
.rfx .rf .prices.rfx-go .price:hover{transform:translateY(-6px);transition-delay:0s}

/* ---------- Boutons aimantés, fin de page ---------- */
.rfx .rf .btn{will-change:transform}
.rfx .rf .close::before{transform:translateY(var(--cy,0px)) scale(var(--cs,1));transition:none}
.rfx .rf .close .btn{overflow:visible}
.rfx .rf .close .btn::before{content:"";position:absolute;inset:-2px;border-radius:999px;border:2px solid rgba(240,217,168,.55);pointer-events:none;
opacity:0;animation:rfxPulse 2.6s ease-out infinite paused}
.rfx .rf .close.rfx-vis .btn::before{animation-play-state:running}
@keyframes rfxPulse{0%{opacity:.8;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.18,1.5)}}

@media(prefers-reduced-motion:reduce){.rfx-prog{display:none}}