/* <!-- © KΛZX.dev — Tous droits réservés --> */
:root{--ink:#07070a;--coal:#14141a;--accent:#7c5cff;--line:rgba(255,255,255,.1);--mut:rgba(255,255,255,.62);--ease:cubic-bezier(.22,1,.36,1);--px:clamp(1.25rem,5vw,3rem)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{background:var(--ink);color:#fff;font-family:'Instrument Sans',system-ui,sans-serif;line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body::before{content:'';position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3,.logo{font-family:'Funnel Display',system-ui,sans-serif;letter-spacing:-.045em}
a{color:inherit;text-decoration:none}ul{list-style:none}img{max-width:100%;height:auto}
::selection{background:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.glow{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(520px circle at var(--mx,50%) var(--my,30%),rgba(124,92,255,.13),transparent 60%)}
main,footer,header{position:relative;z-index:1}

/* intro */
#intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;pointer-events:none;--p:0}
/* rideau : 5 panneaux qui se lèvent en cascade depuis le centre */
.panels{position:absolute;inset:0;display:flex}
.panels i{position:relative;flex:1;margin-right:-1px;background:var(--ink);transition:transform .95s cubic-bezier(.76,0,.24,1)}
.panels i::after{content:'';position:absolute;inset:auto 0 0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:opacity .25s}
.panels i:nth-child(1),.panels i:nth-child(5){transition-delay:.16s}
.panels i:nth-child(2),.panels i:nth-child(4){transition-delay:.08s}
#intro.done .panels i{transform:translateY(-101%)}
#intro.done .panels i::after{opacity:1}
/* contenu central */
.intro-c{position:relative;z-index:1;display:grid;justify-items:center;gap:1.25rem;width:min(88vw,26rem);transition:opacity .45s ease,transform .6s var(--ease)}
.intro-c::before{content:'';position:absolute;z-index:-1;left:50%;top:34%;translate:-50% -50%;width:34rem;height:34rem;max-width:150vw;background:radial-gradient(circle,rgba(124,92,255,.3),transparent 62%);animation:pulse 4s ease-in-out infinite}
.intro-c img{width:5.5rem;height:auto;filter:drop-shadow(0 0 28px rgba(124,92,255,.6));opacity:0;transform:scale(.6) rotate(-12deg);animation:logoin .9s var(--ease) .05s forwards,bob 6s ease-in-out 1s infinite}
@keyframes logoin{to{opacity:1;transform:none}}
@keyframes bob{50%{translate:0 -6px}}
.intro-name{display:flex;font:800 clamp(3.5rem,14vw,6.5rem)/1 'Funnel Display',sans-serif;letter-spacing:-.045em}
.intro-name span{display:inline-block;opacity:0;transform:translateY(60px);animation:in .7s var(--ease) forwards}
.intro-name span:nth-child(1){animation-delay:.12s}.intro-name span:nth-child(2){animation-delay:.22s}.intro-name span:nth-child(3){animation-delay:.32s}.intro-name span:nth-child(4){animation-delay:.42s}
/* barre de progression */
.intro-bar{position:relative;width:100%;height:4px;margin-top:.5rem;border-radius:99px;background:rgba(255,255,255,.1);opacity:0;animation:in .6s var(--ease) .5s forwards}
.intro-bar i{position:relative;display:block;height:100%;overflow:hidden;border-radius:inherit;background:linear-gradient(90deg,var(--accent),#38bdf8);box-shadow:0 0 16px rgba(124,92,255,.7);transform:scaleX(0);transform-origin:0 50%}
.intro-bar i::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-100%);animation:shine 1.1s ease-in-out infinite}
@keyframes shine{to{transform:translateX(100%)}}
.intro-bar::after{content:'';position:absolute;top:50%;left:calc(var(--p) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(124,92,255,.35),0 0 22px 6px rgba(124,92,255,.75);transition:scale .3s var(--ease)}
#intro.full .intro-bar::after{scale:1.6}
#intro.full .intro-bar i{filter:brightness(1.3)}
/* étape en cours */
.intro-step{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--mut);opacity:0;animation:in .6s var(--ease) .6s forwards}
.intro-step::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);animation:blink 1s ease-in-out infinite}
.intro-step b{display:inline-block;font-weight:500}
.intro-step b.swap{animation:swap .4s var(--ease)}
@keyframes blink{50%{opacity:.25}}
@keyframes swap{from{opacity:0;transform:translateY(6px)}}
/* compteur géant en contour, comme le bandeau défilant */
.intro-count{position:absolute;z-index:1;left:var(--px);bottom:1.5rem;display:flex;align-items:flex-start;font:800 clamp(5rem,24vw,15rem)/.8 'Funnel Display',sans-serif;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.3);transition:opacity .4s ease,color .4s ease,-webkit-text-stroke-color .4s ease,transform .6s var(--ease)}
.intro-count b{font-weight:inherit}
.intro-count small{margin:.1em 0 0 .08em;font-size:.28em;letter-spacing:0}
#intro.full .intro-count{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
#intro.done .intro-c{opacity:0;transform:translateY(-36px) scale(.96)}
#intro.done .intro-count{opacity:0;transform:translateY(-40px)}
@keyframes in{to{opacity:1;transform:none}}

/* cursor */
#cursor{display:none;position:fixed;top:0;left:0;z-index:90;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;transition:width .25s,height .25s,margin .25s}
.has-cursor #cursor{display:block}
.has-cursor,.has-cursor *{cursor:none!important}
#cursor.hover{width:26px;height:26px;margin:-13px 0 0 -13px}

/* nav */
header{position:fixed;inset:0 0 auto;z-index:50;padding:1.5rem 0;transition:all .5s}
header.scrolled{padding:.75rem 0;background:rgba(7,7,10,.7);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--px)}
.logo{display:flex;align-items:center;gap:.5rem;font-size:1.25rem;font-weight:800}
.links{display:flex;gap:2rem;font-size:.875rem;color:var(--mut)}
.links a{transition:color .3s}.links a:hover{color:#fff}
#burger{display:none;width:44px;height:44px;background:none;border:0;position:relative;color:#fff;z-index:60}
#burger span{position:absolute;left:11px;right:11px;height:2px;background:currentColor;transition:transform .4s var(--ease)}
#burger span:first-child{top:18px}#burger span:last-child{top:26px}
#burger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
#burger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
#mobile{position:fixed;inset:0;z-index:40;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:1.25rem;padding:0 2rem;clip-path:circle(0% at 90% 5%);transition:clip-path .6s cubic-bezier(.76,0,.24,1);visibility:hidden}
#mobile.open{clip-path:circle(150% at 90% 5%);visibility:visible}
#mobile a{font:700 2.25rem 'Funnel Display',sans-serif;letter-spacing:-.045em}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:1rem 1.75rem;border-radius:999px;font:500 1rem 'Instrument Sans',sans-serif;border:1px solid transparent;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease);will-change:transform}
.btn-light{background:#fff;color:var(--ink);padding:.65rem 1.25rem;font-size:.875rem}
.btn-light:hover,.btn-accent:hover{background:var(--accent);color:#fff}
.btn-accent{background:var(--accent);color:#fff}.btn-accent:hover{background:#fff;color:var(--ink)}
.btn-ghost{border-color:rgba(255,255,255,.25)}.btn-ghost:hover{border-color:#fff}
.btn:disabled{opacity:.6}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:7rem var(--px) 6rem;overflow:hidden}
.orb{position:absolute;right:-8rem;top:2.5rem;width:30rem;height:30rem;border-radius:50%;background:rgba(124,92,255,.3);filter:blur(140px);animation:pulse 8s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.15)}}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at center,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000,transparent 75%)}
.hero-logo{position:absolute;right:-18%;top:50%;transform:translateY(-50%);width:300px;opacity:.35;filter:drop-shadow(0 0 80px rgba(124,92,255,.5));animation:float 7s ease-in-out infinite;pointer-events:none}
@keyframes float{50%{translate:0 -22px;rotate:5deg}}
.hero-text{position:relative;max-width:64rem}
h1{font-size:clamp(1.9rem,3.6vw,3.4rem);font-weight:800;line-height:1.05}
h1 span.line{display:block}
.accent{color:var(--accent)}
.lead{margin-top:2rem;max-width:28rem;font-size:1.125rem;color:var(--mut)}
.cta{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}
.scroll{position:absolute;bottom:2rem;left:var(--px);display:flex;align-items:center;gap:.75rem;font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.scroll i{position:relative;width:1px;height:48px;background:rgba(255,255,255,.2);overflow:hidden}
.scroll i::after{content:'';position:absolute;left:0;right:0;height:24px;background:#fff;animation:drop 1.6s ease-in-out infinite}
@keyframes drop{from{top:-24px}to{top:48px}}

/* sections */
.section{padding:8rem var(--px)}
.kicker{font-size:.875rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
h2{margin-top:1rem;font-size:clamp(2.75rem,8vw,4.5rem);font-weight:700;line-height:1}
h2.big{font-size:clamp(2.2rem,9vw,6.5rem);font-weight:800;line-height:.95;max-width:64rem}
[data-split] .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.1em;margin-right:.25em}
[data-split] .w>b{display:inline-block;font-weight:inherit;transform:translateY(110%);transition:transform .9s var(--ease) calc(var(--i)*70ms)}
[data-split].in .w>b{transform:none}
.reveal{opacity:0;transform:translate(var(--x,0),32px);transition:opacity .8s var(--ease) var(--d,0s),transform .8s var(--ease) var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.card{background:var(--coal);border:1px solid var(--line);border-radius:1.5rem;padding:2rem}
.card h3{font-size:1.5rem}
.badges{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}
.badges span{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:.4rem .9rem;font-size:.8rem;color:rgba(255,255,255,.75);transition:transform .3s var(--ease),border-color .3s,background .3s}
.skills .badges span{font-size:.9rem;padding:.5rem 1rem}
.badges span:hover{transform:translateY(-4px) scale(1.05);border-color:var(--accent);background:rgba(124,92,255,.15)}
.about{display:grid;gap:3rem}
.about-text{margin-top:2.5rem;max-width:36rem;display:grid;gap:1.25rem;font-size:1.125rem;color:var(--mut)}
#approach{margin-top:1.5rem;display:grid;gap:1.25rem}
#approach b{display:block;font-weight:500}#approach span{font-size:.875rem;color:rgba(255,255,255,.55)}

/* projects */
.filters{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.filters button{background:none;color:var(--mut);border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:.5rem 1rem;font:inherit;font-size:.875rem;transition:all .3s}
.filters button:hover{border-color:rgba(255,255,255,.4)}
.filters button[aria-selected=true]{background:var(--accent);border-color:var(--accent);color:#fff}
.projects{margin-top:3rem;display:grid;gap:2rem}
.project{overflow:hidden;padding:0;animation:pop .5s var(--ease) both}
@keyframes pop{from{opacity:0;transform:scale(.95)}}
.thumb{position:relative;aspect-ratio:16/10;overflow:hidden}
.thumb .art{position:absolute;inset:0;transition:transform .7s var(--ease)}
.project:hover .art{transform:scale(1.1)}
.thumb strong{position:absolute;inset:0;display:grid;place-items:center;font:800 4.5rem 'Funnel Display',sans-serif;letter-spacing:-.045em}
.tag{position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);border-radius:999px;padding:.25rem .75rem;font-size:.75rem}
.pbody{padding:1.5rem}.pbody p{margin-top:.5rem;color:var(--mut)}
.more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.more>div{overflow:hidden;font-size:.875rem;color:var(--mut)}
.more.open{grid-template-rows:1fr}.more.open>div{padding-top:1rem}
.pactions{margin-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.pactions .btn{padding:.5rem 1rem;font-size:.875rem}
.pactions .toggle{margin-left:auto;background:none;border:0;color:var(--mut);font:inherit;font-size:.875rem;display:flex;gap:.25rem;align-items:center}
.pactions .toggle:hover{color:#fff}
.toggle svg{transition:transform .3s}.toggle[aria-expanded=true] svg{transform:rotate(180deg)}

/* skills & services */
.skills,.services{margin-top:3rem;display:grid;gap:1.5rem}
.service{transition:transform .4s var(--ease),border-color .3s}
.service:hover{transform:translateY(-8px);border-color:rgba(124,92,255,.6)}
.ico{display:grid;place-items:center;width:3rem;height:3rem;border-radius:1rem;background:rgba(124,92,255,.15);color:var(--accent);transition:transform .5s var(--ease)}
.service:hover .ico{transform:rotate(12deg) scale(1.1)}
.service h3{margin-top:1.5rem;font-size:1.25rem}.service p{margin-top:.5rem;font-size:.875rem;color:var(--mut)}

/* contact */
.contact{margin-top:3.5rem;display:grid;gap:3rem}
form{display:grid;gap:1rem;align-content:start}
form input,form textarea{width:100%;background:var(--coal);border:1px solid var(--line);border-radius:1rem;padding:1rem 1.25rem;color:#fff;font:inherit;outline:none;transition:border-color .3s}
form input::placeholder,form textarea::placeholder{color:rgba(255,255,255,.45)}
form input:focus,form textarea:focus{border-color:var(--accent)}
form [aria-invalid=true]{border-color:#f87171}
.hp{display:none}
.err{min-height:0;margin-top:.25rem;font-size:.875rem;color:#f87171}
.swrap{justify-self:start}
#status{font-size:.875rem}#status.ok{color:#34d399}#status.bad{color:#f87171}
.contact-side{display:grid;gap:1.5rem;align-content:start}
#mail{font-size:1.25rem;color:rgba(255,255,255,.8);transition:color .3s}#mail:hover,.contact-side a:hover{color:var(--accent)}
.contact-side li a{display:inline-flex;align-items:center;gap:.75rem;color:var(--mut);transition:color .3s}
.contact-side li{margin-bottom:.75rem}

/* footer */
footer{border-top:1px solid var(--line);padding:3.5rem var(--px)}
.foot{display:flex;flex-direction:column;gap:2.5rem;justify-content:space-between}
.foot p{margin-top:1rem;max-width:20rem;font-size:.875rem;color:rgba(255,255,255,.5)}
.foot .links{flex-wrap:wrap;gap:.5rem 1.5rem}
.foot-r{display:flex;align-items:center;gap:1rem}.foot-r ul{display:flex;gap:1rem}
.foot-r a{color:var(--mut);transition:color .3s}.foot-r a:hover{color:var(--accent)}
#top{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:none;color:#fff;border:1px solid rgba(255,255,255,.2);transition:background .3s,color .3s}
#top:hover{background:#fff;color:var(--ink)}
footer small{display:block;margin-top:3rem;color:rgba(255,255,255,.55)}

@media(min-width:768px){
  .about{grid-template-columns:7fr 5fr}.about aside{margin-top:6rem}
  .projects{grid-template-columns:1fr 1fr}.skills{grid-template-columns:1fr 1fr}.services{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:7fr 4fr;gap:5rem}.foot{flex-direction:row}
  .hero-logo{right:3%;width:460px;opacity:.6}
}
@media(min-width:1024px){.services{grid-template-columns:repeat(3,1fr)}}
@media(max-width:767px){.links,.talk{display:none}#burger{display:block}.foot .links{display:flex}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,[data-split] .w>b{opacity:1;transform:none}#intro{display:none}
}

/* animations au défilement */
#progress{position:fixed;top:0;left:0;z-index:70;width:100%;height:3px;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,var(--accent),#38bdf8)}
header.hide{transform:translateY(-100%)}
.hero-text{will-change:transform,opacity}
.marquee{overflow:hidden;border-block:1px solid var(--line);padding:1.25rem 0;white-space:nowrap}
#marquee{display:inline-block;will-change:transform;font:800 clamp(2.5rem,8vw,6rem) 'Funnel Display',sans-serif;letter-spacing:-.045em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.28)}
#marquee span{display:inline-block}
.skills .reveal:nth-child(odd),.services .reveal:nth-child(3n+1){--x:-48px}
.skills .reveal:nth-child(even),.services .reveal:nth-child(3n){--x:48px}
.about-text p:first-child{font:700 1.75rem 'Funnel Display',sans-serif;letter-spacing:-.045em;color:#fff}
.about-text p:last-child{color:#fff}
#wall{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:2rem;background:var(--ink);text-align:center;font:700 1.5rem 'Funnel Display',sans-serif;letter-spacing:-.045em}
#wall[hidden]{display:none}
@media(prefers-reduced-motion:reduce){#progress{transition:none}}

@media(min-width:1280px){.hero-text{max-width:56rem}.hero-logo{opacity:1}}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .7s var(--ease)}
.project:hover .thumb img{transform:scale(1.08)}

/* accessibilité & navigation */
.skip{position:fixed;top:.75rem;left:.75rem;z-index:300;padding:.6rem 1rem;border-radius:999px;background:#fff;color:var(--ink);font-size:.875rem;transform:translateY(-200%)}
.skip:focus{transform:none}
.links a{position:relative}
.links a.active{color:#fff}
#header .links a::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
#header .links a.active::after{transform:none}

/* appel à l'action des services + contact */
.svc-cta{margin-top:3rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;padding:2rem;border:1px dashed rgba(124,92,255,.5);border-radius:1.5rem}
.svc-cta p{max-width:32rem;font-size:1.125rem;color:var(--mut)}
.resp{font-size:.95rem;color:var(--mut)}

/* page 404 (même habillage que le site) */
.nf{position:relative;min-height:100vh;display:flex;align-items:center;padding:7rem var(--px) 5rem;overflow:hidden}
.nf-num{position:absolute;right:2vw;top:50%;translate:0 -50%;font:800 clamp(8rem,30vw,26rem)/.8 'Funnel Display',sans-serif;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.12);pointer-events:none;user-select:none}
.nf-text{position:relative;max-width:40rem}
.nf-text h1{margin-top:1rem;font-size:clamp(2.4rem,6vw,4.5rem)}
.nf-in{opacity:0;transform:translateY(28px);animation:nfin .9s var(--ease) calc(var(--i) * 90ms + 150ms) forwards}
@keyframes nfin{to{opacity:1;transform:none}}
.nf-links{margin-top:3rem;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.5rem 1.5rem;font-size:.875rem;color:var(--mut)}
.nf-links a{transition:color .3s}.nf-links a:hover{color:#fff}
.nf-foot small{margin-top:0}

/* ---------- Bouton « Envoyer » animé ---------- */
.swrap{--ok:#30c25a;--err:#ff3b30;position:relative;width:min(100%,240px);height:56px;display:grid;place-items:center}
.sb{position:relative;width:100%;height:56px;border:0;border-radius:28px;background:var(--accent);color:#fff;font:500 1rem/1 'Instrument Sans',system-ui,sans-serif;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:10px;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:width .42s cubic-bezier(.7,0,.2,1),background-color .3s ease,transform .15s ease,box-shadow .3s ease;box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.sb:focus-visible{outline-color:#fff}
.sb[data-state=idle]:active{transform:scale(.97)}
.sb-label,.sb-icon{transition:opacity .22s ease .28s,transform .22s ease .28s}
.sb-icon{display:inline-flex;width:30px;height:22px}
.sb-icon svg,.sb-rush svg{width:100%;height:100%;display:block;overflow:visible}
.sb-plane{fill:none;stroke:currentColor;stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.sb[data-state=idle]:hover .sb-icon{transform:translateX(4px);transition-delay:0s}
.sb:not([data-state=idle]) .sb-label{opacity:0;transform:translateX(-14px);transition-delay:0s}
.sb:not([data-state=idle]) .sb-icon{opacity:0;transition:none}

/* chevrons lancés à toute vitesse (créés par le JS) */
.sb-rush{position:absolute;display:block;pointer-events:none}
.sb-streak{position:absolute;right:100%;top:50%;width:74px;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(to left,rgba(255,255,255,.9),rgba(255,255,255,0));transform-origin:right center;transform:scaleX(0)}

/* transformation en rond : vert si succès, rouge si erreur */
.sb[data-state=morph],.sb[data-state=done]{width:56px;background:var(--ok);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--ok) 70%,transparent)}
.sb.is-error[data-state=morph],.sb.is-error[data-state=done]{background:var(--err);box-shadow:0 8px 22px -8px color-mix(in srgb,var(--err) 70%,transparent)}
.sb.hop{animation:sb-hop .65s cubic-bezier(.3,.7,.4,1)}
@keyframes sb-hop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-18px) scale(.94,1.08)}70%{transform:translateY(0) scale(1.1,.9)}85%{transform:translateY(-4px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
.sb.shake{animation:sb-shake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes sb-shake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-10px)}40%,60%{transform:translateX(10px)}}

/* cercle, coche et croix dessinés au trait */
.sb-check,.sb-cross{position:absolute;inset:0;margin:auto;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sb-ring{position:absolute;inset:0;margin:auto;width:56px;height:56px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;transform:rotate(-90deg);pointer-events:none}
.sb-ring circle,.sb-check path,.sb-cross path{stroke-dasharray:1;stroke-dashoffset:1}
.sb:not([data-state=done]) .sb-ring,.sb:not([data-state=done]) .sb-check,.sb:not([data-state=done]) .sb-cross{visibility:hidden}
.sb.is-error .sb-check,.sb:not(.is-error) .sb-cross{visibility:hidden}
.sb[data-state=done] .sb-ring circle{animation:sb-draw .5s cubic-bezier(.65,0,.35,1) forwards}
.sb[data-state=done] .sb-check path{animation:sb-draw .38s cubic-bezier(.65,0,.35,1) .4s forwards}
.sb[data-state=done] .sb-cross path{animation:sb-draw .22s cubic-bezier(.65,0,.35,1) .4s forwards}
.sb[data-state=done] .sb-cross path:nth-child(2){animation-delay:.6s}
@keyframes sb-draw{to{stroke-dashoffset:0}}

/* onde qui s'échappe du rond */
.sb-ripple{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:2px solid var(--ok);opacity:0;pointer-events:none}
.swrap.err .sb-ripple{border-color:var(--err)}
.swrap.ping .sb-ripple{animation:sb-ping .8s ease-out}
@keyframes sb-ping{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.1);opacity:0}}

@media(prefers-reduced-motion:reduce){
  .sb[data-state=done] .sb-ring circle,.sb[data-state=done] .sb-check path,.sb[data-state=done] .sb-cross path{stroke-dashoffset:0}
}

@media(prefers-reduced-motion:reduce){.nf-in{opacity:1;transform:none}}
/* ===== Boutons animés (hors bouton « Envoyer » .sb) ===== */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease),translate .35s var(--ease),scale .2s var(--ease),box-shadow .35s}
/* reflet qui traverse le bouton */
.btn::after{content:'';position:absolute;z-index:-1;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-20deg);transition:left .8s var(--ease);pointer-events:none}
.btn:hover::after{left:140%}
/* légère élévation + ombre */
.btn:hover{translate:0 -3px;box-shadow:0 10px 28px -8px rgba(124,92,255,.65)}
.btn:active{translate:0 0;scale:.96;box-shadow:none}
/* pulsation douce du bouton principal */
.btn-accent{animation:btnGlow 2.8s ease-in-out infinite}
.btn-accent:hover{animation:none}
@keyframes btnGlow{0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.5)}50%{box-shadow:0 0 0 12px rgba(124,92,255,0)}}
/* contour fantôme qui se remplit */
.btn-ghost:hover{background:rgba(255,255,255,.08)}
/* ondulation au clic (créée en JS) */
.btn .ripple{position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:btnRipple .6s ease-out forwards;pointer-events:none}
@keyframes btnRipple{to{transform:scale(1);opacity:0}}

/* filtres des projets */
.filters button{position:relative;overflow:hidden;transition:all .3s,translate .3s var(--ease),scale .2s var(--ease)}
.filters button:hover{translate:0 -2px}
.filters button:active{scale:.94}
.filters button[aria-selected=true]{animation:chipPop .45s var(--ease)}
@keyframes chipPop{0%{scale:.88}60%{scale:1.07}100%{scale:1}}

/* « Détails », réseaux, retour en haut */
.pactions .toggle{transition:color .3s,translate .3s var(--ease),scale .2s var(--ease)}
.pactions .toggle:hover{translate:3px 0}
.pactions .toggle:active{scale:.94}
.foot-r a{display:inline-flex;transition:color .3s,translate .3s var(--ease)}
.foot-r a:hover{translate:0 -3px}
#top{position:relative;overflow:hidden;transition:background .3s,color .3s,translate .35s var(--ease),scale .2s var(--ease),box-shadow .35s}
#top:hover{translate:0 -5px;box-shadow:0 10px 24px -8px rgba(255,255,255,.45)}
#top:hover svg{animation:topBounce .8s var(--ease) infinite}
#top:active{scale:.9}
@keyframes topBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
#burger:active span{transform-origin:center}
#burger:hover span:first-child{left:8px}#burger:hover span:last-child{right:8px}
#burger[aria-expanded=true]:hover span{left:11px;right:11px}

@media(prefers-reduced-motion:reduce){
  .btn-accent,#top:hover svg,.filters button[aria-selected=true]{animation:none}
  .btn::after,.btn .ripple{display:none}
  .btn:hover,#top:hover,.foot-r a:hover,.filters button:hover,.pactions .toggle:hover{translate:none}
}

/* Logos de marque intégrés (ex. Discord) : même taille que les icônes Lucide */
svg.brand{width:24px;height:24px;flex:none}
.contact-side li a:hover svg.brand,.foot-r a:hover svg.brand{color:var(--accent)}

/* ===== Devis (section Services) ===== */
.services.devis{max-width:62rem;margin-inline:auto}
@media(min-width:1024px){.services.devis{grid-template-columns:1fr 1fr}}
.devis-card{display:flex;flex-direction:column}
.devis-card:hover{transform:translateY(-8px)}
.devis-kicker{font-size:.8rem;letter-spacing:.3em;color:var(--accent)!important;margin:0!important}
.devis-card h3{margin-top:.75rem;font-size:1.5rem}
.devis-price{margin-top:1rem!important;font:800 clamp(2rem,5vw,2.75rem)/1 'Funnel Display',sans-serif;color:#fff!important;letter-spacing:-.03em}
.devis-desc{margin-top:1rem!important;font-size:1rem!important}
.devis-incl{margin-top:1.5rem!important;font-weight:600;color:#fff!important;font-size:.9rem!important}
.devis-list{margin:.75rem 0 2rem;display:grid;gap:.6rem}
.devis-list li{position:relative;padding-left:1.75rem;color:var(--mut);font-size:.95rem}
.devis-list li::before{content:'';position:absolute;left:0;top:.35em;width:1rem;height:1rem;border-radius:50%;background:rgba(124,92,255,.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.5l2.5 2.5 4.5-5' fill='none' stroke='%237c5cff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.devis-sw{margin-top:auto;justify-self:start;width:min(100%,260px)}
.devis-sb{text-decoration:none}


/* ===== Bouton thème clair / sombre (Uiverse.io par Galahhad) ===== */
/* From Uiverse.io by Galahhad */ 
.theme-switch {
  --toggle-size: 30px;
  /* the size is adjusted using font-size,
     this is not transform scale,
     so you can choose any size */
  --container-width: 5.625em;
  --container-height: 2.5em;
  --container-radius: 6.25em;
  /* radius 0 - minecraft mode :) */
  --container-light-bg: #3D7EAE;
  --container-night-bg: #1D1F2C;
  --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em;
  --sun-bg: #ECCA2F;
  --moon-bg: #C4C9D1;
  --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff;
  --clouds-color: #F3FDFF;
  --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
  --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
}

.theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: var(--toggle-size);
}

.theme-switch__container {
  width: var(--container-width);
  height: var(--container-height);
  background-color: var(--container-light-bg);
  border-radius: var(--container-radius);
  overflow: hidden;
  cursor: pointer;
  -webkit-box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__container::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  -webkit-box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
  border-radius: var(--container-radius)
}

.theme-switch__checkbox {
  display: none;
}

.theme-switch__circle-container {
  width: var(--circle-container-diameter);
  height: var(--circle-container-diameter);
  background-color: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: var(--circle-container-offset);
  top: var(--circle-container-offset);
  border-radius: var(--container-radius);
  -webkit-box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-transition: var(--circle-transition);
  -o-transition: var(--circle-transition);
  transition: var(--circle-transition);
  pointer-events: none;
}

.theme-switch__sun-moon-container {
  pointer-events: auto;
  position: relative;
  z-index: 2;
  width: var(--sun-moon-diameter);
  height: var(--sun-moon-diameter);
  margin: auto;
  border-radius: var(--container-radius);
  background-color: var(--sun-bg);
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
  -webkit-filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.theme-switch__moon {
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  width: 100%;
  height: 100%;
  background-color: var(--moon-bg);
  border-radius: inherit;
  -webkit-box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  position: relative;
}

.theme-switch__spot {
  position: absolute;
  top: 0.75em;
  left: 0.312em;
  width: 0.75em;
  height: 0.75em;
  border-radius: var(--container-radius);
  background-color: var(--spot-color);
  -webkit-box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
  box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
}

.theme-switch__spot:nth-of-type(2) {
  width: 0.375em;
  height: 0.375em;
  top: 0.937em;
  left: 1.375em;
}

.theme-switch__spot:nth-last-of-type(3) {
  width: 0.25em;
  height: 0.25em;
  top: 0.312em;
  left: 0.812em;
}

.theme-switch__clouds {
  width: 1.25em;
  height: 1.25em;
  background-color: var(--clouds-color);
  border-radius: var(--container-radius);
  position: absolute;
  bottom: -0.625em;
  left: 0.312em;
  -webkit-box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
  -webkit-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  -o-transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
  transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
}

.theme-switch__stars-container {
  position: absolute;
  color: var(--stars-color);
  top: -100%;
  left: 0.312em;
  width: 2.75em;
  height: auto;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

/* actions */

.theme-switch__checkbox:checked + .theme-switch__container {
  background-color: var(--container-night-bg);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
  left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em)
}

.theme-switch__circle-container:hover {
  left: calc(var(--circle-container-offset) + 0.187em);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
  bottom: -4.062em;
}

.theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
/* --- intégration au site --- */
.theme-wrap{display:flex;justify-content:center;padding:2rem 0 2.5rem}
.theme-switch{--toggle-size:18px;display:inline-block}
.theme-switch__checkbox{display:block;position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.theme-switch__checkbox:focus-visible + .theme-switch__container{outline:2px solid var(--accent);outline-offset:4px}

/* Thème clair : inversion douce des couleurs du site, sans toucher aux images ni au bouton lui-même */
html{transition:filter .5s ease,background-color .5s ease}
html[data-theme=light]{filter:invert(1) hue-rotate(180deg);background:#07070a}
html[data-theme=light] img,html[data-theme=light] .thumb,html[data-theme=light] .theme-switch{filter:invert(1) hue-rotate(180deg)}

/* ===== Cartes de devis en « fenêtre » (inspiré de Uiverse.io par EmmaxPlay) ===== */
.devis-card{padding:0;overflow:hidden;border-radius:12px}
.win-tools{display:flex;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.04)}
.win-circle{padding:0 4px}
.win-box{display:inline-block;width:11px;height:11px;border-radius:50%;transition:transform .3s var(--ease),filter .3s}
.devis-card:hover .win-box{transform:scale(1.2)}
.win-box.red{background-color:#ff605c}
.win-box.yellow{background-color:#ffbd44}
.win-box.green{background-color:#00ca4e}
.win-content{display:flex;flex-direction:column;flex:1;padding:2rem}

/* ===== Créations : éditeur de code + aperçu en direct ===== */
.svc-tabs{margin-bottom:2rem}
.cta-sw{width:min(100%,260px)}
.lab-pick{margin-bottom:1.5rem}
.lab-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media(max-width:860px){.lab-grid{grid-template-columns:1fr}}
.lab-win{display:flex;flex-direction:column;min-height:26rem;background:var(--coal);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lab-files{display:flex;gap:.25rem;margin-left:.75rem}
.lab-files button{padding:.3rem .7rem;border-radius:6px;font-size:.8rem;color:var(--mut);transition:background .25s,color .25s}
.lab-files button:hover{color:#fff}
.lab-files button[aria-selected=true]{background:rgba(124,92,255,.25);color:#fff}
.lab-label{margin-left:.75rem;font-size:.8rem;color:var(--mut)}
.lab-code{flex:1;width:100%;min-height:22rem;box-sizing:border-box;padding:1rem 1.25rem;border:0;outline:0;resize:none;background:#0b0b10;color:#e6e6f0;font:13px/1.65 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;tab-size:2;white-space:pre;overflow:auto}
.lab-code:focus-visible{box-shadow:inset 0 0 0 2px rgba(124,92,255,.6)}
.lab-frame{flex:1;width:100%;min-height:22rem;border:0;background:#0d0d14}
html[data-theme=light] .lab-frame{filter:invert(1) hue-rotate(180deg)}
.services[hidden],.lab[hidden]{display:none!important}

/* ===== Bouton « Copy Code » animé (base Uiverse par fabiodevbr) ===== */
.cc-wrap{position:relative;width:100px;height:30px;display:grid;place-items:center;margin-left:auto;flex:none}
.cc{position:relative;width:100px;height:30px;padding:0;border:none;border-radius:10px;background-color:#f2f7fa;color:#0e418f;font:600 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:width .42s cubic-bezier(.7,0,.2,1),border-radius .42s cubic-bezier(.7,0,.2,1),background-color .3s ease,transform .15s ease}
.cc:focus-visible{outline:3px solid #7c5cff;outline-offset:3px}
.cc[data-state=idle]:active{transform:scale(.96)}
.cc-label,.cc-copied{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:opacity .22s ease .28s,transform .22s ease .28s}
.cc-label svg{width:12px;height:12px;fill:currentColor;flex:none}
.cc:not([data-state=idle]) .cc-label{opacity:0;transform:translateY(-10px);transition-delay:0s}
.cc[data-state=morph],.cc[data-state=done]{width:30px;border-radius:15px;background-color:#30c25a}
.cc-copied{color:#b5ccf3;opacity:0;transform:translateY(10px);transition-delay:0s}
.cc[data-state=copied]{width:100px;border-radius:10px;background-color:#0e418f}
.cc[data-state=copied] .cc-copied{opacity:1;transform:translateY(0);transition-delay:.28s}
.cc.hop{animation:ccHop .65s cubic-bezier(.3,.7,.4,1)}
@keyframes ccHop{0%{transform:translateY(0) scale(1,1)}18%{transform:translateY(0) scale(1.08,.92)}45%{transform:translateY(-12px) scale(.94,1.08)}70%{transform:translateY(0) scale(1.1,.9)}85%{transform:translateY(-3px) scale(.98,1.02)}100%{transform:translateY(0) scale(1,1)}}
.cc-ring,.cc-check{position:absolute;inset:0;margin:auto;fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.cc-ring{width:30px;height:30px;stroke-width:2;transform:rotate(-90deg)}
.cc-check{width:16px;height:16px;stroke-width:4}
.cc-ring circle,.cc-check path{stroke-dasharray:1;stroke-dashoffset:1}
.cc:not([data-state=done]) .cc-ring,.cc:not([data-state=done]) .cc-check{visibility:hidden}
.cc[data-state=done] .cc-ring circle{animation:ccDraw .5s cubic-bezier(.65,0,.35,1) forwards}
.cc[data-state=done] .cc-check path{animation:ccDraw .38s cubic-bezier(.65,0,.35,1) .4s forwards}
@keyframes ccDraw{to{stroke-dashoffset:0}}
.cc-ripple{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:2px solid #30c25a;opacity:0;pointer-events:none}
.cc-wrap.ping .cc-ripple{animation:ccPing .8s ease-out}
@keyframes ccPing{0%{transform:scale(1);opacity:.65}100%{transform:scale(2.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.cc,.cc-label,.cc-copied{transition-duration:.01s;transition-delay:0s}.cc.hop{animation:none}.cc[data-state=done] .cc-ring circle,.cc[data-state=done] .cc-check path{animation:none;stroke-dashoffset:0}.cc-wrap.ping .cc-ripple{animation:none}}

/* ===== Protection : pas de sélection du texte (sauf champs de saisie), pas d'impression ===== */
html.protect body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html.protect input,html.protect textarea:not(.lab-code){-webkit-user-select:text;user-select:text}
html.protect img{-webkit-user-drag:none}
@media print{html.protect body{display:none!important}}

/* ===== Projets : catégories + onglets de langage toujours visibles ===== */
.lab-cats{margin-bottom:1rem}
.lab-pick{margin-bottom:1.5rem}
.lab-pick[hidden],.lab-grid[hidden],.lab-empty[hidden]{display:none!important}
.lab-empty{padding:3rem 1rem;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px}
/* Onglets HTML / CSS / JS : fond et couleurs explicites (sans reset global, le bouton natif gris rendait le texte blanc invisible) + barre collée en haut de la fenêtre */
.lab-win .win-tools{flex-wrap:wrap;row-gap:.5rem}
.lab-label{flex:1 1 8rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lab-langs{position:sticky;top:0;z-index:5;display:flex!important;flex-wrap:wrap;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--line);background:var(--coal);opacity:1;visibility:visible}
.lab-langs button{display:inline-flex!important;align-items:center;gap:.5rem;min-height:2.25rem;padding:.45rem 1rem;border:1px solid rgba(255,255,255,.28);border-radius:8px;background:#1d1d27;color:#fff;cursor:pointer;opacity:1;visibility:visible;font:600 .85rem 'Instrument Sans',sans-serif;transition:background .25s,border-color .25s,translate .25s var(--ease)}
.lab-langs button i{width:9px;height:9px;border-radius:50%;flex:none}
.lab-langs button:hover{translate:0 -2px;background:#272736;border-color:rgba(255,255,255,.55)}
.lab-langs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lab-langs button[aria-selected=true]{background:rgba(124,92,255,.5);border-color:#9b82ff}

/* ===== Anti-devtools : mur de blocage renforcé ===== */
#wall:not([hidden]){display:grid!important}
html.locked{overflow:hidden}
html.locked body>*:not(#wall){visibility:hidden!important}  

/* ===== Page 404 : visage animé (Animation page 404) ===== */
.nf .my-custom-404{position:absolute;left:50%;bottom:4.5rem;translate:-50% 0;z-index:1;display:flex;justify-content:center;align-items:center;color:#fff;pointer-events:none}
.nf .my-custom-404 .face{width:clamp(110px,14vw,180px);overflow:visible}
@media(max-width:860px){.nf .my-custom-404{opacity:.4}.nf .my-custom-404 .face{width:110px}}
@media(prefers-reduced-motion:reduce){.my-custom-404 .face *{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important}}
/* From Uiverse.io by preet_7613 */
.my-custom-404 .face {
  width: 200px;
}

.my-custom-404 .face__eyes,
.my-custom-404 .face__eye-lid,
.my-custom-404 .face__mouth-left,
.my-custom-404 .face__mouth-right,
.my-custom-404 .face__nose,
.my-custom-404 .face__pupil {
  animation: eyes 1s 0.3s forwards;
}

.my-custom-404 .face__eye-lid,
.my-custom-404 .face__pupil {
  animation-duration: 4s;
  animation-delay: 1.3s;
  animation-iteration-count: infinite;
}

.my-custom-404 .face__eye-lid {
  animation-name: eye-lid;
}
.my-custom-404 .face__mouth-left {
  animation-name: mouth-left;
}
.my-custom-404 .face__mouth-right {
  animation-name: mouth-right;
}
.my-custom-404 .face__nose {
  animation-name: nose;
}
.my-custom-404 .face__pupil {
  animation-name: pupil;
}

@keyframes eye-lid {
  0%,
  40%,
  45%,
  100% {
    transform: translateY(0);
  }
  42.5% {
    transform: translateY(17.5px);
  }
}

@keyframes eyes {
  from {
    transform: translateY(112.5px);
  }
  to {
    transform: translateY(15px);
  }
}

@keyframes pupil {
  0%,
  37.5%,
  40%,
  45%,
  87.5%,
  100% {
    stroke-dashoffset: 0;
    transform: translate(0, 0);
  }
  12.5%,
  25%,
  62.5%,
  75% {
    transform: translate(-35px, 0);
  }
  42.5% {
    stroke-dashoffset: 35;
    transform: translate(0, 17.5px);
  }
}

@keyframes mouth-left {
  from,
  50% {
    stroke-dashoffset: -102;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes mouth-right {
  from,
  50% {
    stroke-dashoffset: 102;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes nose {
  from {
    transform: translate(0, 0);
  }
   to {
    transform: translate(0, 22.5px);
  }
}