/* ===== Équipe : décor régional (Raphaël : Nice / Côte d'Azur ; Mikaël : Bretagne) ===== */
.member[data-member="raphael"],.member[data-member="mikael"]{isolation:isolate}
.member[data-member="raphael"]::before,.member[data-member="mikael"]::before{display:none}
.mb-scene{position:absolute;inset:0 0 auto;height:118px;z-index:-1;overflow:hidden;pointer-events:none}
.mb-scene svg{display:block;width:100%;height:100%}
.mb-scene::after{content:"";position:absolute;inset:auto 0 0;height:30px;background:linear-gradient(transparent,var(--surface))}
.mb-chip{position:absolute;left:10px;top:9px;z-index:1;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:12px;max-width:calc(50% - 82px);line-height:1.25;background:rgba(255,255,255,.88);color:#14151a;box-shadow:0 6px 14px -8px rgba(0,0,0,.45)}
.member[data-member="mikael"] .mb-chip{background:#14151a;color:#fff}
.mb-chip b{display:block;font-size:.78rem;line-height:1.15}.mb-chip small{display:block;font-size:.64rem;font-weight:700;opacity:.8;line-height:1.2;margin-top:1px}
.mb-chip{padding:5px 10px 6px;text-align:left}
.mb-scene .sc-sun{transform-box:fill-box;transform-origin:center;animation:scSun 18s linear infinite}
@keyframes scSun{to{transform:rotate(360deg)}}
.mb-scene .sc-wave{animation:scWave 6s ease-in-out infinite alternate}
@keyframes scWave{to{transform:translateX(14px)}}
.mb-scene .sc-boat{animation:scBoat 4s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom center}
@keyframes scBoat{50%{transform:translateY(2px) rotate(-3deg)}}
.mb-scene .sc-palm{transform-box:fill-box;transform-origin:bottom center;animation:scPalm 5s ease-in-out infinite}
.mb-scene .sc-p2{animation-delay:-2s}
@keyframes scPalm{50%{transform:rotate(2.5deg)}}
.mb-scene .sc-flag>g{transform-box:fill-box;transform-origin:left center;animation:scFlag 1.6s ease-in-out infinite}
@keyframes scFlag{50%{transform:skewY(-4deg) scaleX(.96)}}
.mb-scene .sc-beam{transform-box:fill-box;transform-origin:right center;animation:scBeam 3.2s ease-in-out infinite}
@keyframes scBeam{0%,100%{opacity:.2;transform:rotate(-6deg)}50%{opacity:1;transform:rotate(8deg)}}
.mb-scene .sc-cloud{animation:scCloud 20s ease-in-out infinite alternate}
@keyframes scCloud{to{transform:translateX(30px)}}
/* animations supplémentaires : mouettes, voilier qui traverse, reflets, embruns, feu du phare */
.mb-scene .sc-gull{animation:scGull 16s linear infinite;animation-delay:var(--d)}
.mb-scene .sc-gull path{transform-box:fill-box;transform-origin:center;animation:scFlap .5s ease-in-out infinite alternate}
@keyframes scGull{from{transform:translate(-130px,var(--y))}50%{transform:translate(200px,calc(var(--y) - 8px))}to{transform:translate(540px,var(--y))}}
@keyframes scFlap{to{transform:scaleY(.35)}}
.mb-scene .sc-sailer{animation:scSail 24s linear infinite}
@keyframes scSail{from{transform:translate(-130px,0)}50%{transform:translate(180px,2px)}to{transform:translate(520px,0)}}
.mb-scene .sk{opacity:0;transform-box:fill-box;transform-origin:center;animation:scSpark 2.4s ease-in-out infinite;animation-delay:var(--d)}
@keyframes scSpark{50%{opacity:1;transform:scale(1.3) rotate(45deg)}}
.mb-scene .sp{opacity:0;transform-box:fill-box;transform-origin:center;animation:scSplash 2.2s ease-out infinite;animation-delay:var(--d)}
@keyframes scSplash{0%{opacity:.9;transform:translateY(4px) scale(.3)}60%{opacity:.7}100%{opacity:0;transform:translateY(-10px) scale(1.4)}}
.mb-scene .sc-lamp{transform-box:fill-box;transform-origin:center;animation:scLamp 3.2s ease-in-out infinite}
@keyframes scLamp{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.95;transform:scale(1.3)}}
.mb-scene .sc-wave{animation-duration:3.5s}
.mb-scene .sc-sun{animation:scSun 18s linear infinite,scPulse 3s ease-in-out infinite}
@keyframes scPulse{50%{opacity:.85}}
.mb-scene .sc-beam{animation-duration:3.2s}
.mb-scene .sc-palm{animation-duration:3.6s}
@keyframes scPalm{50%{transform:rotate(4deg)}}
@keyframes scFlag{50%{transform:skewY(-7deg) scaleX(.93)}}
html[data-mode="dark"] .mb-scene svg,html[data-theme="dark"] .mb-scene svg{filter:brightness(.82) saturate(1.05)}

/* fond animé en continu */
.mb-scene .sc-roll{animation:scRoll 3.2s linear infinite}
.mb-scene .sc-r2{animation-duration:4.6s;animation-direction:reverse}
.mb-scene .sc-r3{animation-duration:2.6s}
@keyframes scRoll{to{transform:translateX(32px)}}
.mb-scene .sc-r2{animation-name:scRoll2}@keyframes scRoll2{to{transform:translateX(44px)}}
.mb-scene .cx{animation:scCx 38s linear infinite;animation-delay:var(--d)}
.mb-scene .cx path{transform:scale(var(--sc,1))}
@keyframes scCx{from{transform:translate(-150px,var(--yy))}to{transform:translate(520px,var(--yy))}}
.mb-scene .sc-para{animation:scPara 30s linear infinite}
@keyframes scPara{0%{transform:translate(520px,14px) rotate(-4deg)}25%{transform:translate(360px,4px) rotate(3deg)}50%{transform:translate(200px,16px) rotate(-3deg)}75%{transform:translate(40px,6px) rotate(4deg)}100%{transform:translate(-140px,14px) rotate(-4deg)}}
.mb-scene .sc-ball{transform-box:fill-box;transform-origin:center bottom;animation:scBall 1.4s cubic-bezier(.3,0,.5,1) infinite alternate}
@keyframes scBall{to{transform:translateY(-10px) rotate(180deg)}}
.mb-scene .sc-umb path:nth-child(n+2){transform-box:fill-box;transform-origin:center bottom;animation:scUmb 2.8s ease-in-out infinite}
@keyframes scUmb{50%{transform:rotate(-5deg)}}
.mb-scene .sc-fish{transform-box:fill-box;transform-origin:center bottom;animation:scFish 2.6s ease-in-out infinite}
@keyframes scFish{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(2px) rotate(4deg)}70%{transform:translateY(-1px) rotate(-4deg)}}
.mb-scene .sc-rays{transform-box:view-box;transform-origin:318px 17px;animation:scRays 5s linear infinite}
@keyframes scRays{to{transform:rotate(360deg)}}
.mb-scene .sc-sailer{animation-duration:16s}
.mb-scene .sc-gull{animation-duration:11s}
/* ===== Point relais : petites illustrations des étapes (sans changer la taille des cartes) ===== */
.rlx-st li{position:relative}
.rlx-st li .rlx-ill{position:absolute;top:12px;right:12px;width:74px;height:46px;pointer-events:none;color:inherit;font-size:0;line-height:0}
.rlx-ill svg{width:100%;height:100%;overflow:visible}
.rlx-st.on li .rlx-ill svg{animation:rlxIll .6s .25s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes rlxIll{from{opacity:0;transform:translateY(8px) scale(.85)}}
.rlx-ill .fl{animation:rlxFl 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rlxFl{50%{transform:translateY(-3px)}}
.rlx-ill .bl{animation:rlxBl 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes rlxBl{50%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.rlx-ill svg,.rlx-ill .fl,.rlx-ill .bl{animation:none!important}}

/* ===== Boutique : badge « recommandé pour les pros » ===== */
.sb-pro{white-space:nowrap;font-size:.66rem;background:#14151a;color:#fff;box-shadow:0 6px 14px -8px rgba(20,21,26,.9)}
html[data-theme="dark"] .sb-pro,html[data-mode="dark"] .sb-pro{background:#fff;color:#14151a}

/* ===== Boutique : rayons en liste compacte, faciles à parcourir ===== */
#shopCats.shop-cats{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-top:16px}
#shopCats .shop-cat{grid-template-rows:none;grid-template-columns:64px minmax(0,1fr) 14px;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:16px;min-height:86px}
#shopCats .shop-cat:hover{transform:translateY(-2px)}
#shopCats .shop-cat>.sc-img{grid-column:1;grid-row:1;aspect-ratio:1;width:64px;height:64px;min-height:0;max-height:none;border-radius:14px}
#shopCats .shop-cat .sc-img svg{width:auto;height:82%;max-width:88%}
#shopCats .shop-cat .sc-img::after{display:none}
#shopCats .shop-cat>.sc-b{grid-column:2;grid-row:1;padding:0;gap:3px;align-content:center}
#shopCats .shop-cat b{font-size:1rem;line-height:1.15}
#shopCats .shop-cat small{font-size:.78rem;line-height:1.3;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#shopCats .shop-cat .sc-go{display:none}
#shopCats .shop-cat .sc-badge{position:static;justify-self:start;align-self:start;margin-top:2px;box-shadow:none;background:color-mix(in srgb,var(--sc) 14%,transparent);color:color-mix(in srgb,var(--sc) 80%,var(--ink));font-size:.68rem;padding:2px 8px;white-space:nowrap;animation:none}
#shopCats .shop-cat>.sc-badge{display:none}
#shopCats .shop-cat::after{content:"›";grid-column:3;grid-row:1;font:900 1.4rem/1 var(--f-display,system-ui);color:var(--sc);transition:transform .2s}
#shopCats .shop-cat:hover::after{transform:translateX(3px)}
#shopCats .shop-cat.big{grid-column:1/-1;order:20;background:linear-gradient(110deg,color-mix(in srgb,#e0137a 10%,var(--surface)),var(--surface) 70%)}
#shopCats .shop-cat.big b{font-size:1.08rem}#shopCats .shop-cat.big small{font-size:.84rem}
#shopCats .shop-cat.big .sc-go{display:inline-block;margin-top:2px;font-size:.84rem}
#shopCats .shop-cat.is-soon{order:21;min-height:72px;grid-template-columns:52px minmax(0,1fr) 0;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,#ff9a1f 70%,transparent)}
#shopCats .shop-cat.is-soon>.sc-img{width:52px;height:52px}
#shopCats .shop-cat.is-soon small{display:none}
#shopCats .shop-cat.is-soon .sc-badge{background:#e8790c;color:#fff}
#shopCats .shop-cat.is-soon::after{content:none}
@media (max-width:560px){#shopCats.shop-cats{grid-template-columns:1fr;gap:8px}#shopCats .shop-cat{min-height:74px;grid-template-columns:56px minmax(0,1fr) 14px}#shopCats .shop-cat>.sc-img{width:56px;height:56px}#shopCats .shop-cat.big .sc-go{display:none}}

/* ===== Accueil : tutoriel interactif (remplace la vidéo) ===== */
.tu .tu-steps{display:grid;gap:8px;margin-top:6px}
.tu-st{all:unset;box-sizing:border-box;cursor:pointer;position:relative;overflow:hidden;display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center;padding:10px 12px;border-radius:15px;background:var(--surface);border:1.5px solid var(--line);transition:border-color .2s,transform .2s,box-shadow .2s}
.tu-st:hover{transform:translateX(3px)}
.tu-st:focus-visible{outline:3px solid #8a4fe0;outline-offset:2px}
.tu-st[aria-selected=true]{border-color:#e0137a;box-shadow:0 14px 28px -20px #e0137a}
.tu-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.25rem;background:color-mix(in srgb,var(--ink) 6%,transparent);transition:transform .3s}
.tu-st[aria-selected=true] .tu-ic{background:linear-gradient(135deg,#e0137a,#8a4fe0);transform:rotate(-6deg) scale(1.05)}
.tu-st b{display:block;font-size:.98rem}.tu-st small{display:block;color:var(--muted);font-size:.8rem;margin-top:1px}
.tu-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:transparent}
.tu-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#1fa6dc,#e0137a,#ffd400)}
.tu-st[aria-selected=true] .tu-bar i{animation:tuBar var(--dur,6.5s) linear forwards}
.tu.paused .tu-st .tu-bar i{animation:none;width:0}
@keyframes tuBar{to{width:100%}}
.tu-dev{transform:perspective(1200px) rotateY(-4deg)}
.tu-scr{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#fff 0%,#f7f3fb 100%);color:#14151a;overflow:hidden}
html[data-theme="dark"] .tu-scr,html[data-mode="dark"] .tu-scr{background:linear-gradient(160deg,#1d1e24,#24202c);color:#f1f2f5}
.tu-sc{position:absolute;inset:0;padding:6% 7%;display:none;flex-direction:column;gap:3.2%;font-size:clamp(.72rem,1.15vw,.95rem)}
.tu-sc.on{display:flex;animation:tuIn .25s ease}
@keyframes tuIn{from{opacity:0;transform:translateY(10px)}}
.tu-h{display:flex;align-items:center;gap:8px;font:900 1.3em/1.1 var(--f-display,system-ui)}
.tu-search{display:flex;align-items:center;gap:6px;padding:.75em .9em;border-radius:12px;background:#fff;border:2px solid #e0137a;box-shadow:0 10px 24px -18px #e0137a;color:#14151a;font-weight:700}
.tu-typed{white-space:nowrap}
.tu-caret{width:2px;height:1.1em;background:#e0137a;animation:tuCar 1s steps(1) infinite}@keyframes tuCar{50%{opacity:0}}
.tu-btn{margin-left:auto;background:#e0137a;color:#fff;padding:.35em .8em;border-radius:9px;font-size:.9em}
.tu-res{display:flex;align-items:center;gap:10px;padding:.8em;border-radius:14px;background:#fff;color:#14151a;box-shadow:0 12px 26px -18px rgba(0,0,0,.4)}
.tu-res b{display:block}.tu-res small{display:block;color:#61656f;font-size:.85em}.tu-res em{margin-left:auto;font-style:normal;width:1.8em;height:1.8em;border-radius:50%;display:grid;place-items:center;background:#178a4c;color:#fff;font-weight:900}
.tu-ink{width:1.4em;height:2em;border-radius:5px;background:var(--c);flex:none;box-shadow:inset 0 -6px 0 rgba(255,255,255,.25)}
.tu-row{display:flex;flex-wrap:wrap;gap:6px}
.tu-chip{padding:.35em .75em;border-radius:99px;background:color-mix(in srgb,#8a4fe0 14%,transparent);font-weight:800;font-size:.85em}.tu-chip.tu-y{background:#ffd400;color:#14151a}
.tu-cta{align-self:flex-start;padding:.6em 1em;border-radius:11px;background:#14151a;color:#fff;font-weight:800}
.tu-in{opacity:0;transform:translateY(8px)}
.tu-sc.on .tu-in{animation:tuPop .3s calc(var(--d,0s)*.45) cubic-bezier(.2,.9,.3,1.25) forwards}
@keyframes tuPop{to{opacity:1;transform:none}}
.tu-cart{margin-left:auto;position:relative;font-size:.9em}
.tu-pop{position:absolute;top:-.6em;right:-.8em;font-style:normal;width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;background:#e0137a;color:#fff;font-size:.75em;font-weight:900;transform:scale(0)}
.tu-sc.on .tu-pop{animation:tuBadge .3s calc(var(--d,0s)*.45) cubic-bezier(.2,.9,.3,1.6) forwards}@keyframes tuBadge{to{transform:scale(1)}}
.tu-prod{display:flex;gap:12px;align-items:center;padding:.8em;border-radius:14px;background:#fff;color:#14151a;box-shadow:0 12px 26px -18px rgba(0,0,0,.4)}
.tu-prod b{display:block}.tu-prod small{display:block;color:#61656f}.tu-prod strong{display:block;font:900 1.15em var(--f-display,system-ui);margin-top:2px}
.tu-ream{position:relative;width:3.6em;height:3em;flex:none}.tu-ream i{position:absolute;left:0;right:0;height:.9em;border-radius:3px;background:#e9f6fd;border:1px solid #b9dcef}
.tu-ream i:nth-child(1){bottom:0}.tu-ream i:nth-child(2){bottom:.8em;background:#1fa6dc}.tu-ream i:nth-child(3){bottom:1.6em}
.tu-add{align-self:flex-start;padding:.6em 1.1em;border-radius:11px;background:#14151a;color:#fff;font-weight:800}
.tu-sc.on .tu-add{animation:tuPress .2s .65s}@keyframes tuPress{50%{transform:scale(.92);background:#e0137a}}
.tu-ok{display:grid;grid-template-columns:1fr auto;align-items:center;padding:.8em 1em;border-radius:14px;background:color-mix(in srgb,#178a4c 14%,#fff);color:#14151a;border:1.5px solid #178a4c}
.tu-ok small{grid-column:1;color:#3a3d45}.tu-ok .tu-clock{grid-column:2;grid-row:1/3}
.tu-clock{width:2.4em;height:2.4em;border-radius:50%;border:3px solid #178a4c;position:relative}
.tu-clock i{position:absolute;left:50%;top:50%;width:2px;height:.9em;background:#14151a;transform-origin:bottom;transform:translate(-50%,-100%) rotate(0)}
.tu-sc.on .tu-clock i{animation:tuSpin .6s 1.1s ease-out forwards}@keyframes tuSpin{to{transform:translate(-50%,-100%) rotate(390deg)}}
.tu-cur{position:absolute;left:85%;top:90%;width:1.4em;height:1.4em;pointer-events:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9-6.5 1.5L9 19z' fill='%2314151a' stroke='%23fff' stroke-width='1.5'/%3E%3C/svg%3E")}
.tu-sc.on .tu-cur{animation:tuCur .6s .1s ease-in-out forwards}@keyframes tuCur{to{left:var(--x1);top:var(--y1)}}
.tu-drop{display:grid;place-items:center;gap:6px;padding:1.2em;border-radius:14px;border:2.5px dashed #8a4fe0;background:color-mix(in srgb,#8a4fe0 7%,transparent)}
.tu-drop small{color:#61656f;font-weight:700}
.tu-file{padding:.5em .9em;border-radius:10px;background:#fff;color:#14151a;font-weight:800;box-shadow:0 10px 20px -12px rgba(0,0,0,.5);transform:translate(40%,-120%) rotate(8deg);opacity:0}
.tu-sc.on .tu-file{animation:tuDrop .5s .1s cubic-bezier(.2,.9,.3,1.2) forwards}@keyframes tuDrop{to{transform:none;opacity:1}}
.tu-prog{height:.7em;border-radius:9px;background:color-mix(in srgb,#14151a 10%,transparent);overflow:hidden}
.tu-prog i{display:block;height:100%;width:0;border-radius:9px;background:linear-gradient(90deg,#1fa6dc,#e0137a)}
.tu-sc.on .tu-prog i{animation:tuFill .5s .7s ease forwards}@keyframes tuFill{to{width:100%}}
.tu-mail{display:flex;gap:10px;align-items:center;padding:.7em .9em;border-radius:14px;background:#fff;color:#14151a;box-shadow:0 14px 28px -18px rgba(0,0,0,.5);border-left:4px solid #e0137a}
.tu-mail>span:first-child{font-size:1.5em}.tu-mail b{display:block}.tu-mail small{color:#61656f}
.tu-pin{display:flex;gap:2%;justify-content:center}.tu-sc[data-sc="3"]{gap:2.6%}
.tu-pin i{font-style:normal;width:11%;max-width:2.2em;aspect-ratio:3/4;display:grid;place-items:center;border-radius:10px;border:2px solid #e0137a;background:#fff0f7;color:#14151a;font:900 1.45em var(--f-display,system-ui);opacity:0;transform:translateY(-12px) rotateX(80deg)}
.tu-sc.on .tu-pin i{animation:tuDig .3s calc(var(--d,0s)*.45) cubic-bezier(.2,.9,.3,1.4) forwards}@keyframes tuDig{to{opacity:1;transform:none}}
.tu-dash{display:grid;gap:6px;padding:.8em;border-radius:14px;background:linear-gradient(120deg,#14151a,#3a1d4f 60%,#7a1048);color:#fff}
.tu-li{display:flex;justify-content:space-between;align-items:center;padding:.4em .6em;border-radius:9px;background:rgba(255,255,255,.1);font-weight:700}
.tu-li em{font-style:normal;font-size:.8em;padding:.2em .6em;border-radius:99px;background:rgba(255,255,255,.18)}.tu-li em.ok{background:#178a4c}
.tu-try{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;font-weight:800;padding:11px 16px;border-radius:13px;background:linear-gradient(135deg,#e0137a,#8a4fe0);color:#fff;text-decoration:none;box-shadow:0 14px 28px -14px #8a4fe0;transition:transform .2s}
.tu-try:hover{transform:translateY(-2px)}
@media (max-width:960px){.tu-dev{transform:none}.tu .nvx-col{order:0}.tu .tu-steps{grid-template-columns:1fr 1fr}.tu-st{grid-template-columns:34px 1fr;gap:8px;padding:8px 10px}.tu-ic{width:34px;height:34px;font-size:1.05rem}.tu-st small{display:none}}
@media (max-width:520px){.tu-sc{font-size:.72rem;padding:5% 5%}}
@media (prefers-reduced-motion:reduce){.tu-sc.on .tu-in,.tu-sc.on .tu-pin i,.tu-sc.on .tu-file,.tu-sc.on .tu-pop{animation:none;opacity:1;transform:none}.tu-st[aria-selected=true] .tu-bar i{animation:none}}

/* ===== Vitesse : animations en pause quand elles sont hors de l'écran (rien ne change à l'œil) ===== */
.cw-anoff,.cw-anoff::before,.cw-anoff::after,.cw-anoff *{animation-play-state:paused!important}

/* ===== Accueil : photo de la boutique mise en valeur ===== */
section[data-view="accueil"] .home .photo{border-radius:24px;isolation:isolate;box-shadow:-14px 14px 0 -4px #1fa6dc,14px -14px 0 -4px #e0137a,0 40px 70px -34px rgba(20,21,26,.6);margin:14px 14px 14px 14px}
section[data-view="accueil"] .home .photo img{border-radius:24px;animation:heroKB 22s ease-in-out infinite alternate}
@keyframes heroKB{from{scale:1;translate:0 0}to{scale:1.07;translate:-1.6% -1.2%}}
section[data-view="accueil"] .home .photo::after{content:"";position:absolute;inset:0;z-index:1;border-radius:24px;pointer-events:none;
  background:linear-gradient(180deg,rgba(12,13,17,.30) 0%,rgba(12,13,17,0) 26%,rgba(12,13,17,0) 64%,rgba(12,13,17,.42) 100%),radial-gradient(120% 90% at 50% 45%,transparent 60%,rgba(12,13,17,.28) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
section[data-view="accueil"] .home .photo::before{content:"";position:absolute;z-index:2;inset:0;border-radius:24px;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);transform:translateX(-120%);animation:heroShine 1.4s .6s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes heroShine{to{transform:translateX(120%)}}
section[data-view="accueil"] .home .photo .hmx-fl{z-index:3}
section[data-view="accueil"] .home .photo .hmx-fl>span{border-radius:999px;padding:9px 15px;box-shadow:0 16px 34px -14px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
section[data-view="accueil"] .home .photo .hmx-fl .f1{background:#14151a;color:#fff;border-color:#14151a}
section[data-view="accueil"] .home .photo .hmx-fl .f1 b{color:#ffd400}
section[data-view="accueil"] .home .photo .hmx-fl .f2{background:linear-gradient(135deg,#e0137a,#8a4fe0);color:#fff;border-color:transparent}
section[data-view="accueil"] .home .photo .hmx-fl .f3{background:#178a4c;color:#fff;border-color:transparent}
@media (max-width:760px){section[data-view="accueil"] .home .photo{margin:10px 10px 14px;box-shadow:-9px 9px 0 -3px #1fa6dc,9px -9px 0 -3px #e0137a,0 30px 50px -30px rgba(20,21,26,.6)}}
@media (prefers-reduced-motion:reduce){section[data-view="accueil"] .home .photo img,section[data-view="accueil"] .home .photo::before{animation:none}}

/* tutoriel : numéros d'étape, liste Mon espace complète */
.tu-ic{position:relative}
.tu-num{position:absolute;top:-6px;left:-6px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font:900 .68rem/1 var(--f-display,system-ui);font-style:normal;background:var(--ink,#14151a);color:var(--bg,#fff);box-shadow:0 0 0 2px var(--surface,#fff)}
.tu-st[aria-selected=true] .tu-num{background:#ffd400;color:#14151a}
.tu-st{overflow:visible}.tu-bar{border-radius:0 0 15px 15px;overflow:hidden}
.tu-sc[data-sc="3"] .tu-mail{padding:.45em .8em}.tu-sc[data-sc="3"] .tu-mail>span:first-child{font-size:1.2em}
.tu-sc[data-sc="3"] .tu-pin i{max-width:1.7em;font-size:1.15em;border-radius:8px}
.tu-dash{gap:5px;padding:.6em .7em}
.tu-lis{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.tu-li{padding:.3em .5em;font-size:.88em;opacity:0;transform:translateY(6px)}
.tu-sc.on .tu-li{animation:tuPop .3s calc(var(--d,0s)*.45) cubic-bezier(.2,.9,.3,1.25) forwards}
.tu-li em.wa{background:#ffd400;color:#14151a}
@media (max-width:520px){.tu-sc[data-sc="3"] .tu-mail{display:none}.tu-sc[data-sc="3"]{justify-content:center}.tu-li{font-size:.82em;padding:.28em .4em;gap:3px}.tu-li em{font-size:.72em;padding:.15em .4em}.tu-lis{gap:3px}}
@media (prefers-reduced-motion:reduce){.tu-sc.on .tu-li{animation:none;opacity:1;transform:none}}

/* tutoriel accéléré */
.tu-sc.on{animation-duration:.3s}
.tu-sc.on .tu-in{animation-duration:.35s}
.tu-sc.on .tu-add{animation:tuPress .25s .7s}
.tu-sc.on .tu-clock i{animation:tuSpin .9s 1.5s ease-out forwards}
.tu-sc.on .tu-prog i{animation:tuFill .6s .8s ease forwards}
.tu-sc.on .tu-file{animation:tuDrop .6s .1s cubic-bezier(.2,.9,.3,1.2) forwards}
.tu-sc.on .tu-cur{animation:tuCur .7s .1s ease-in-out forwards}
.tu-sc.on .tu-pin i{animation-duration:.3s}
.tu-sc.on .tu-li{animation-duration:.3s}