/* zenvy-motion.css — styles des animations de l'accueil (zenvy-motion.js, GSAP 3.15).
   Retour Walid du 02/10/2026 : « un site beaucoup plus animé ». Règle : rien n'est caché sans JavaScript ; le haut
   de page n'est masqué qu'en attendant l'entrée en scène (html.js:not(.no-motion)) ; html.no-motion (GSAP absent ou
   trop lent) retombe sur les apparitions CSS d'avant ; « moins d'animations » montre tout, immobile. */

/* ─── HAUT DE PAGE ───────────────────────────────────────────────────── */
html.js:not(.no-motion) .hero .e,html.js:not(.no-motion) .hero .phone{opacity:0}
@keyframes entree{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
html.no-motion .hero .e{animation:entree .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
html.motion .phone{animation:none}
/* GSAP pilote leur entrée : pas de transition CSS sur transform pendant ce temps (elle fige le mouvement) */
html.motion .hero .dl-btn{transition:background .25s ease}
.lead b{position:relative;white-space:nowrap}
.lead b::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--a1),var(--a2));transform:scaleX(var(--trait,0));transform-origin:left center}
/* Écran du grand téléphone : il s'allume, un reflet le traverse, des notifications de l'appli arrivent. */
.phone .ecran-eteint{position:absolute;inset:0;background:#000;z-index:4;opacity:0;pointer-events:none}
html.motion .phone .ecran-eteint{opacity:1}
.phone .ecran-flash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;background:radial-gradient(120% 80% at 50% 30%,rgba(190,150,255,.55),rgba(95,24,208,.15) 60%,transparent)}
.phone .reflet{position:absolute;top:-30%;bottom:-30%;left:-60%;right:-60%;z-index:6;pointer-events:none;opacity:0;background:radial-gradient(30% 50% at 50% 50%,rgba(255,255,255,.17),rgba(235,220,255,.07) 45%,rgba(255,255,255,0) 72%)}
.notif-pile{position:absolute;left:3.5%;right:3.5%;top:5.2%;z-index:3;pointer-events:none}
.notif{position:absolute;left:0;right:0;top:0;display:flex;gap:9px;align-items:center;padding:9px 11px 10px;border-radius:19px;background:rgba(30,23,48,.9);border:1px solid rgba(255,255,255,.13);box-shadow:0 12px 26px rgba(0,0,0,.4);color:#fff;opacity:0;text-align:left;font-family:-apple-system,'SF Pro Text','Inter',sans-serif}
.notif img{width:31px;height:31px;border-radius:7px;flex:none;display:block}
.notif .nt{flex:1;min-width:0}
.notif .l1{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;line-height:1.2}
.notif .l1 b{font-weight:700}
.notif .l1 span{color:rgba(255,255,255,.5);font-size:11px;font-weight:500}
.notif p{font-size:12.5px;line-height:1.3;margin:2px 0 0;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ─── RUBAN DES ACTIVITÉS (vraies activités de l'appli) ──────────────── */
.ruban{position:relative;z-index:2;width:100vw;margin:4px 0 0 calc(50% - 50vw);overflow:hidden;padding:6px 0 10px;-webkit-mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);pointer-events:none;user-select:none}
.ruban-ligne{display:flex;width:max-content;align-items:center;white-space:nowrap;will-change:transform}
.ruban-ligne span{font-weight:900;letter-spacing:-.035em;line-height:1.08;padding:0 .32em;color:#F4F0FF}
.ruban-ligne i{display:inline-block;width:.26em;height:.26em;border-radius:50%;background:linear-gradient(180deg,var(--a1),var(--a2));flex:none}
.ruban-ligne.l1 span{font-size:clamp(30px,5.4vw,66px)}
.ruban-ligne.l1 span:nth-of-type(3n+2){color:transparent;-webkit-text-stroke:1.4px rgba(244,240,255,.42)}
.ruban-ligne.l2{margin-top:2px;opacity:.55}
.ruban-ligne.l2 span{font-size:clamp(16px,2.2vw,26px);font-weight:800;letter-spacing:-.01em}

/* ─── COMMENT ÇA MARCHE : les trois écrans prennent vie ─────────────── */
.mini .ecran-mini{position:relative;overflow:hidden;border-radius:clamp(14px,4vw,23px);aspect-ratio:1290/2796;background:#12081f;isolation:isolate}
.mini .ecran-mini>img{border-radius:0}
.mini .live{position:absolute;left:0;top:0;width:484px;height:1046px;transform-origin:0 0;transform:scale(var(--k,.4));pointer-events:none;z-index:2;display:none} /* 4-6 px de plus : le fond du 3e écran couvre toujours la capture */
html.motion .mini .live{display:block}
.mini .live img{position:absolute;display:block;max-width:none;width:auto;height:auto;aspect-ratio:auto;border-radius:0;background:none;object-fit:fill}
.mini .voile{position:absolute;inset:0;z-index:7;background:rgba(6,2,22,.6);opacity:0;pointer-events:none}
.mini .live svg{position:absolute;left:0;top:0;overflow:visible}
.l1-chiffres{position:absolute;left:0;top:431px;width:480px;transform:translateY(-50%);text-align:center;color:#fff;font:700 63px/1 'Inter',-apple-system,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:2px}
.l1-btn{position:absolute;left:48px;top:817px;width:384px;height:62px;border-radius:31px;opacity:0;background:radial-gradient(70% 140% at 50% 50%,rgba(255,255,255,.5),rgba(190,150,255,.18) 55%,transparent 80%);box-shadow:0 0 28px 6px rgba(168,85,247,.85)}
.l2-tuile{position:absolute;left:247.5px;top:150px;width:212.5px;height:147.5px;border-radius:27px;border:3px solid #fff;opacity:0;background:rgba(168,85,247,.14);box-shadow:0 0 0 1px rgba(255,255,255,.55),0 0 24px 6px rgba(168,85,247,.85),0 0 64px 12px rgba(124,58,237,.5),inset 0 0 28px rgba(168,85,247,.55)}
.l2-anneau{position:absolute;opacity:0;overflow:visible;transform-origin:50% 50%}
.l2-valider{position:absolute;left:248.5px;top:981px;width:210.5px;height:44px;border-radius:22px;background:#fff;color:#1A1A1A;display:flex;align-items:center;justify-content:center;font:800 17px/1 'Inter',-apple-system,sans-serif;opacity:0}
.mini .live-3{background:#1A0936}
.l3-scene{position:absolute;left:0;top:0;width:480px;height:1040px;transform-origin:240px 520px}
.l3-flash{position:absolute;left:-60px;top:250px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(224,200,255,.55) 22%,rgba(155,88,255,.18) 48%,transparent 70%);opacity:0;pointer-events:none}
.l3-etoile{position:absolute;left:0;top:0;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0}
.l3-etoile svg{display:block;width:100%;height:100%}

/* ─── TON BILLET : le QR dynamique de l'appli + le billet à composter ── */
/* Le téléphone en haut à droite, le billet papier SOUS lui, sans jamais le toucher (Walid 02/10) */
.billet-scene{position:relative;width:min(470px,100%);margin:0 auto;aspect-ratio:1/1.34}
.tel-billet{position:absolute;right:6%;top:0;width:46%;padding:clamp(5px,1.3vw,7px);border-radius:clamp(26px,6vw,36px);background:linear-gradient(180deg,#1c1c24,#0f0f14);border:1px solid rgba(255,255,255,.14);box-shadow:0 34px 70px rgba(0,0,0,.6),0 0 60px rgba(95,24,208,.25);transform:rotate(4deg)}
.tel-billet .btn{position:absolute;width:3px;border-radius:2px;background:linear-gradient(180deg,#3a3a44,#1a1a20)}
.tel-billet .btn.vup{right:-3px;top:22%;height:8%}.tel-billet .btn.vdown{right:-3px;top:32%;height:8%}.tel-billet .btn.power{left:-3px;top:25%;height:13%}
.ecran-billet{position:relative;overflow:hidden;border-radius:clamp(20px,5vw,29px);aspect-ratio:390/844;background:#000;isolation:isolate}
.eb{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;transform:scale(var(--k,.6));color:#fff;font-family:-apple-system,'SF Pro Text','Inter',sans-serif;text-align:center}
.eb-statut{position:absolute;left:0;right:0;top:16px;display:flex;justify-content:space-between;padding:0 30px;font:600 15px/1 -apple-system,'Inter',sans-serif}
.eb-statut .ic{display:flex;gap:6px;align-items:center}
.eb-ilot{position:absolute;left:50%;top:11px;width:112px;height:32px;margin-left:-56px;border-radius:18px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
.eb-marque{position:absolute;left:0;right:0;top:74px;font:900 24px/1 'Inter',-apple-system,sans-serif;letter-spacing:-.5px}
.eb-marque .z{background:linear-gradient(180deg,#FFE44D 0%,#FFE44D 40%,#fe5010 85%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.eb-titre{position:absolute;left:0;right:0;top:146px;font:800 24px/1.2 -apple-system,'Inter',sans-serif}
.eb-evt{position:absolute;left:0;right:0;top:184px;font:600 16px/1.2 -apple-system,'Inter',sans-serif;color:rgba(255,255,255,.42)}
.eb-meta{position:absolute;left:0;right:0;top:214px;font:500 13px/1.6 -apple-system,'Inter',sans-serif;color:rgba(255,255,255,.52)}
.eb-qr{position:absolute;left:3px;top:262px;width:384px;height:384px}
/* Halo du QR calé sur l'appli (ombres iOS 45/45 autour d'un cadre de 274 pt, mesurées au simulateur 14 Pro Max le 02/10) : à taille égale, un flou CSS vaut ~2 fois le rayon iOS ; orange au-dessus comme dans l'appli. */
.eb-halo{position:absolute;left:70px;top:70px;width:244px;height:244px;border-radius:40px;background:#000;box-shadow:40px 0 78px rgba(255,138,61,.55),-40px 0 78px rgba(168,85,247,.55)}
.eb-qr svg.eb-cadre{position:absolute;left:0;top:0;width:384px;height:384px;overflow:visible}
.eb-zone{position:absolute;left:70px;top:70px;width:244px;height:244px;border-radius:42px;overflow:hidden}
.eb-zone canvas{position:absolute;left:22px;top:22px;width:200px;height:200px}
.eb-impr{position:absolute;left:50%;top:684px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:13px 22px;border-radius:99px;background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.35);font:600 15px/1 -apple-system,'Inter',sans-serif;color:#fff;white-space:nowrap}
.billet-scene .ticket-wrap{position:absolute;left:1%;bottom:1%;width:62%;z-index:3;transform:rotate(3deg)}
.billet-scene .ticket{width:100%}
/* Avec les animations : téléphone et billet empilés au même endroit, la rotation passe de l'un à l'autre.
   Posé dès le premier rendu (html.js, classe ajoutée dans le <head>) et non à l'arrivée du script : changer la mise
   en page après l'affichage comptait comme un décalage (CLS 0,03 mesuré). Le billet attend caché (visibility, sans
   effet sur la mise en page) ; « moins d'animations » garde la disposition côte à côte, immobile. */
@media (prefers-reduced-motion:no-preference){
  html.js .billet-scene{display:grid;place-items:center;aspect-ratio:1/1.08;perspective:1100px}
  html.js .tel-billet{position:relative;grid-area:1/1;right:auto;top:auto;width:48%}
  html.js .billet-scene .ticket-wrap{position:relative;grid-area:1/1;left:auto;bottom:auto;width:86%;transform:none;visibility:hidden}
  html.no-motion .tel-billet{display:none}
  html.no-motion .billet-scene .ticket-wrap{visibility:visible}
}
.lueur-tour{grid-area:1/1;width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(157,92,255,.6),rgba(255,77,203,.22) 42%,rgba(255,138,61,.12) 58%,transparent 72%);filter:blur(12px);opacity:0;pointer-events:none}
html:not(.motion) .lueur-tour{display:none}
html:not(.js) .tel-billet{display:none}
html:not(.js) .billet-scene{aspect-ratio:auto}
html:not(.js) .billet-scene .ticket-wrap{position:relative;width:min(400px,100%);transform:none;left:auto;bottom:auto;margin:0 auto}
.ticket .stub{overflow:hidden}
.ticket .stub::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.34) 50%,transparent 75%);transform:translateX(-110%);pointer-events:none}

/* ─── AVIS, FONCTIONNALITÉS, PARTENAIRES ─────────────────────────────── */
.avis-card .stars span{display:inline-block}
.note-chiffre{display:inline-block;font-variant-numeric:tabular-nums}
.feature .ic{position:relative}
.partner-item h5{position:relative;padding-top:10px}
.partner-item h5::before{content:"";position:absolute;left:0;top:0;width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--a1),var(--a2));transform:scaleX(var(--trait,1));transform-origin:left center}
.chip{position:relative;overflow:hidden}
.chip .onde-chip{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none}

/* ─── PROGRESSION DE LECTURE (sous la barre du haut) ─────────────────── */
/* Couleur d'accent du thème actif, comme les jauges de l'appli, éclaircie vers la tête et soulignée d'un halo pour
   ressortir sur le fond violet (Walid 02/10 : « adapté au thème de l'appli, pas fondu ») ; pas de pastille en tête. */
.nav-progres{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--a1),#fff);background:linear-gradient(90deg,var(--a1),color-mix(in srgb,var(--a1) 50%,#fff));box-shadow:0 0 6px rgba(var(--accent-rgb),.9),0 0 16px rgba(var(--accent-rgb),.5);transform:scaleX(0);transform-origin:left center;pointer-events:none}

/* ─── MOINS D'ANIMATIONS : tout est là, rien ne bouge ────────────────── */
@media (prefers-reduced-motion:reduce){
  html.js .hero .e,html.js .hero .phone{opacity:1!important;animation:none!important}
  .ruban-ligne{will-change:auto}
}

/* Ajouts : lueur des pastilles d'étape (animée par --halo) et lumière qui traverse la souche du billet */
.steps .step .n{box-shadow:0 0 calc(var(--halo,0) * 18px) var(--glow),0 0 0 calc(var(--clic,0) * 10px) rgba(255,255,255,calc(var(--clic,0) * .35));position:relative}
/* Pastilles cliquables : zone de toucher de 46 px sans changer leur taille, survol et focus visibles */
html.motion .steps .step .n{cursor:pointer;-webkit-tap-highlight-color:transparent}
html.motion .steps .step .mini{cursor:pointer;-webkit-tap-highlight-color:transparent}
html.motion .steps .step .n::before{content:"";position:absolute;inset:-10px;border-radius:50%}
html.motion .steps .step .n:focus-visible{outline:2px solid var(--a1);outline-offset:6px}
@media (hover:hover){html.motion .steps .step .n:hover{filter:brightness(1.25)}}
/* Jauge des trois écrans : rail discret, remplissage au dégradé de l'accent, tête lumineuse qui file */
html.motion .trait-etape{background:rgba(255,255,255,.16);opacity:1}
html.motion .trait-etape::before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--a1),var(--a2));clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.anneau-etape{position:absolute;left:-7px;top:-7px;right:-7px;bottom:-7px;pointer-events:none}
.anneau-etape svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.anneau-etape circle{fill:none;stroke-width:2.2}
.anneau-etape .rail{stroke:rgba(255,255,255,.16)}
.anneau-etape .prog{stroke:var(--a1);stroke-linecap:round;filter:drop-shadow(0 0 3px var(--glow))}
.ticket .stub.balaye::after{animation:balayage 1s cubic-bezier(.4,0,.6,1) both}
@keyframes balayage{from{transform:translateX(-110%)}to{transform:translateX(110%)}}