/* polices hébergées sur le site (plus rien n'est chargé depuis Google) — alphabet latin complet, accents français compris */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:500 800;font-display:swap;src:url(../fonts/bricolage-grotesque.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(../fonts/inter.woff2) format('woff2')}

:root{
  --bg:#09060f;
  --bg-2:#130d1e;
  --card:rgba(24,15,40,.74);
  --line:rgba(255,255,255,.08);
  --text:#f5f1ff;
  --muted:#a69bbd;
  --violet:#8f5bff;
  --pink:#ff3d9a;
  --lime:#c6ff3d;
  --grad:linear-gradient(100deg,var(--violet),var(--pink));
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --gutter:clamp(16px,4vw,48px);
  --radius:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.55;overflow-x:clip}
img,video,iframe{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
::selection{background:var(--pink);color:#fff}

/* ===== Fond espace : nébuleuse + étoiles (dessinées dans les deux canvas par le script) ===== */
.space{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;
  background:radial-gradient(130% 85% at 50% -5%,#170d30 0%,#0b0716 45%,#050309 100%)}
.space canvas{position:absolute;left:0;top:0;width:100%}
#nebula{height:135%;will-change:transform}
#stars{height:100%}
.space::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 50%,rgba(5,3,9,.7) 100%)}

/* Texture : grain de film par-dessus tout le site */
.grain{position:fixed;inset:0;z-index:150;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1s steps(5) infinite}
@keyframes grain{0%,100%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:50px -70px}60%{background-position:-30px -20px}80%{background-position:70px 60px}}

/* ===== Curseur : point lumineux + anneau avec un petit satellite en orbite ===== */
.has-cursor,.has-cursor *{cursor:none!important}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:9998;pointer-events:none}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:10000;pointer-events:none;border-radius:50%;opacity:0;transition:opacity .25s}
.cur-on .cur-dot,.cur-on .cur-ring{opacity:1}
.cur-on.cur-big .cur-dot{opacity:0}
.cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;background:#fff;box-shadow:0 0 6px 1px #fff,0 0 14px 4px var(--pink),0 0 30px 8px rgba(143,91,255,.55)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;
  transition:opacity .25s,width .35s cubic-bezier(.2,.7,.2,1),height .35s cubic-bezier(.2,.7,.2,1),margin .35s cubic-bezier(.2,.7,.2,1)}
.cur-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(214,196,255,.55);transition:background .3s,border-color .3s,box-shadow .3s}
.cur-ring .orbit{position:absolute;inset:-6px;border-radius:50%;animation:orbit 3.2s linear infinite}
.cur-ring .orbit::after{content:"";position:absolute;top:0;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px 2px rgba(198,255,61,.7)}
@keyframes orbit{to{transform:rotate(360deg)}}
/* sur une vidéo ou un créateur : une petite planète lumineuse avec un anneau, et un mot court à côté (« Lire » / « Voir ») */
.cur-ring .core,.cur-ring .clbl{position:absolute;opacity:0;transition:opacity .25s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.cur-ring .core{left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;transform:scale(.3);
  background:radial-gradient(circle at 34% 28%,#ffe6f5,#ff7cc4 30%,#8f5bff 68%,#2a1462);
  box-shadow:inset -4px -5px 10px rgba(20,5,50,.65),inset 2px 2px 5px rgba(255,255,255,.45),0 0 16px 3px rgba(255,61,154,.6),0 0 36px 8px rgba(143,91,255,.35)}
.cur-ring .core::after{content:"";border-left:10px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;margin-left:3px;filter:drop-shadow(0 0 3px #fff)}
.cur-ring.view .core::after{border:0;margin:0;width:14px;height:14px;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
/* onde de lumière qui part de la planète en boucle */
.cur-ring .core::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,170,220,.8);animation:pulse 1.6s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
.cur-ring .clbl{left:calc(100% + 6px);top:50%;margin-top:-13px;padding:5px 11px;border-radius:999px;font-family:var(--display);font-weight:800;font-size:13px;line-height:16px;color:#fff;white-space:nowrap;transform:translateX(-8px);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),rgba(14,8,30,.5);border:1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px -8px rgba(0,0,0,.7)}
.cur-ring.link{width:62px;height:62px;margin:-31px 0 0 -31px}
.cur-ring.link::before{border-color:rgba(255,190,230,.8);background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,61,154,.1));
  -webkit-backdrop-filter:blur(4px) saturate(170%);backdrop-filter:blur(4px) saturate(170%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 26px -4px var(--pink)}
.cur-ring.play,.cur-ring.view{width:56px;height:56px;margin:-28px 0 0 -28px}
/* l'anneau devient l'anneau incliné de la planète */
.cur-ring.play::before,.cur-ring.view::before{inset:19px -6px;border:1.5px solid rgba(255,214,240,.85);transform:rotate(-20deg);box-shadow:0 0 10px rgba(255,140,210,.7)}
.cur-ring.play .orbit,.cur-ring.view .orbit{animation-duration:1.8s}
.cur-ring.play .core,.cur-ring.view .core,.cur-ring.play .clbl,.cur-ring.view .clbl{opacity:1;transform:none}
/* le gros bouton play s'efface quand le curseur planète arrive dessus */
.has-cursor .player .ov:hover .bigplay{opacity:0;transform:translate(-50%,-50%) scale(.6)}

/* Reflet de lumière qui suit la souris sur les cartes */
.glow{position:relative}
.glow::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,61,154,.16),rgba(143,91,255,.08) 40%,transparent 65%)}
.glow:hover::after{opacity:1}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--gutter)}
/* dégradé qui scintille doucement sur les mots en couleur */
.grad{background:linear-gradient(100deg,var(--violet),var(--pink),#ffb8e4,var(--pink),var(--violet));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shimmer 7s linear infinite}
@keyframes shimmer{to{background-position:-200% 50%}}
.kicker{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 12px var(--pink)}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:.95;letter-spacing:-.02em}
h2{font-size:clamp(40px,6.4vw,84px)}
.lead{color:var(--muted);font-size:17px;max-width:520px}

/* Nav */
/* ===== Verre liquide façon Apple : flou de ce qu'il y a derrière, reflet en haut, bord lumineux, lumière qui suit la souris ===== */
:root{
  --lg-edge:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 1px rgba(255,255,255,.12),inset 0 0 18px rgba(255,255,255,.06);
  --lg-drop:0 10px 30px -12px rgba(0,0,0,.75);
  /* grain de verre dépoli */
  --frost:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.pill,.chans button,.discord,.discord button,.status,.tools span{position:relative}
.pill,.chans button,.discord,.discord button,.status,.tools span,.burger,.stack .tag,.player .bigplay{isolation:isolate}
/* le reflet brillant sur la moitié haute, comme une bulle de verre */
.pill::after,.chans button::after,.discord::after,.discord button::after,.status::after,.tools span::after,.burger::after,.stack .tag::after,.player .bigplay::before{
  content:"";position:absolute;inset:1px;border-radius:inherit;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.1) 46%,rgba(255,255,255,0) 52%,rgba(255,255,255,0) 82%,rgba(255,255,255,.12) 100%)}

.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(1240px,calc(100% - 2*var(--gutter)));
  display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 10px 10px 18px;border-radius:999px;
  background:var(--frost),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.025)),rgba(16,10,30,.42);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--lg-edge),0 18px 50px -24px rgba(0,0,0,.9)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:20px}
.logo img{width:32px;height:32px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(170,215,255,.75),0 0 14px 1px rgba(80,140,255,.65)}
.links{position:relative;isolation:isolate;display:flex;gap:4px;list-style:none}
.links a{display:block;padding:9px 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .2s}
.links a:hover,.links a.active{color:var(--text)}
/* la petite lentille de verre qui glisse sous le lien actif */
.lens{position:absolute;left:0;top:0;height:100%;width:0;border-radius:999px;z-index:-1;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2);box-shadow:var(--lg-edge),0 6px 18px -8px rgba(0,0,0,.6);
  transition:transform .55s cubic-bezier(.3,1.35,.5,1),width .55s cubic-bezier(.3,1.35,.5,1),opacity .3s}
.pill{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:600;font-size:14px;color:#fff;white-space:nowrap;
  border:1px solid rgba(255,255,255,.3);
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.32),transparent 70%),linear-gradient(100deg,rgba(143,91,255,.88),rgba(255,61,154,.88));
  -webkit-backdrop-filter:blur(12px) saturate(180%);backdrop-filter:blur(12px) saturate(180%);
  box-shadow:var(--lg-edge),0 10px 30px -10px rgba(255,61,154,.7);
  transition:transform .45s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.pill:hover{transform:translateY(-2px) scale(1.03);box-shadow:var(--lg-edge),0 16px 38px -10px rgba(255,61,154,.9)}
.pill:active,.chans button:active,.discord button:active,.burger:active{transform:scale(.94)}
.pill.ghost{border-color:rgba(255,255,255,.2);
  background:radial-gradient(120px 60px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.2),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.04));
  box-shadow:var(--lg-edge),var(--lg-drop)}
.pill.ghost:hover{box-shadow:var(--lg-edge),0 16px 38px -14px rgba(143,91,255,.7)}
.burger{display:none;width:42px;height:42px;border-radius:50%;position:relative;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));box-shadow:var(--lg-edge);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.burger i{position:absolute;left:12px;right:12px;height:2px;background:var(--text);transition:transform .3s,top .3s}
.burger i:nth-child(1){top:16px}.burger i:nth-child(2){top:24px}
.menu-open .burger i:nth-child(1){top:20px;transform:rotate(45deg)}
.menu-open .burger i:nth-child(2){top:20px;transform:rotate(-45deg)}

/* les sections s'arrêtent sous la barre de menu quand on clique un lien */
[data-anchor]{scroll-margin-top:96px}

/* Hero */
.hero{position:relative;z-index:1;min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding-top:110px;padding-bottom:60px}

/* Planète géante dont on voit le bord éclairé en bas de l'accueil */
.hero-zone{position:relative}
/* la zone descend derrière la bande qui défile et s'efface en haut et en bas : aucune coupure nette */
.horizon{position:absolute;left:0;right:0;bottom:-110px;height:430px;overflow:hidden;pointer-events:none;z-index:0;
  -webkit-mask:linear-gradient(to bottom,transparent 0,#000 34%,#000 58%,transparent 100%);mask:linear-gradient(to bottom,transparent 0,#000 34%,#000 58%,transparent 100%)}
/* surface violette avec des bandes comme une planète gazeuse, bord éclairé en lilas (plus de traînée rose) */
.planet{position:absolute;left:50%;top:210px;width:max(1700px,165vw);aspect-ratio:1;border-radius:50%;transform:translateX(-50%);
  background:repeating-radial-gradient(circle at 50% 50%,rgba(255,255,255,.022) 0 3px,transparent 3px 11px),
    repeating-radial-gradient(circle at 50% 50%,rgba(143,91,255,.05) 0 14px,transparent 14px 41px),
    radial-gradient(48% 5% at 50% 0%,rgba(214,170,255,.36),transparent),radial-gradient(85% 12% at 50% 0%,rgba(143,91,255,.42),transparent),
    radial-gradient(120% 26% at 50% 0%,rgba(70,100,255,.22),transparent),#0c0720;
  box-shadow:inset 0 2px 4px -1px rgba(225,210,255,.6),inset 0 22px 50px -18px rgba(168,120,255,.75),inset 0 90px 160px -70px rgba(110,90,255,.5),
    0 -10px 60px -12px rgba(143,91,255,.55),0 -40px 170px 0 rgba(110,80,255,.28)}
.status{display:inline-flex;align-items:center;gap:10px;padding:7px 14px 7px 10px;border-radius:999px;color:var(--lime);font-size:13px;font-weight:600;
  background:linear-gradient(180deg,rgba(198,255,61,.18),rgba(198,255,61,.05));border:1px solid rgba(198,255,61,.32);
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%);box-shadow:var(--lg-edge),0 8px 24px -12px rgba(198,255,61,.5)}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 var(--lime);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero h1{font-size:clamp(64px,10.5vw,150px);margin:22px 0 10px}
.hero .roles{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.4vw,30px);display:flex;flex-wrap:wrap;gap:6px 14px}
/* l'étoile se place devant chaque métier (sauf le premier) : si la ligne se coupe, elle part avec le mot au lieu de rester seule au bout */
.hero .roles span+span::before{content:"✦ ";color:var(--pink);font-size:.7em;vertical-align:.15em}
/* l'étoile rose à droite du dernier métier (aujourd'hui « Monteur vidéo ✦ ») */
.hero .roles span:last-child::after{content:" ✦";color:var(--pink);font-size:.7em;vertical-align:.15em}
.hero .lead{margin:22px 0 30px}
.cta{display:flex;flex-wrap:wrap;gap:10px}
.kpis{display:flex;gap:34px;margin-top:44px;flex-wrap:wrap}
.kpis b{display:block;font-family:var(--display);font-size:clamp(30px,3.4vw,44px);font-weight:800;line-height:1}
.kpis span{font-size:13px;color:var(--muted)}
.stack{position:relative;aspect-ratio:1/1;max-width:560px;width:100%;justify-self:end}
.stack .vc{position:absolute;width:72%;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -20px rgba(0,0,0,.8);background:var(--card);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.stack .vc video{width:100%;height:100%;object-fit:cover}
.stack .vc:nth-child(1){top:4%;left:0;transform:rotate(-7deg)}
.stack .vc:nth-child(2){top:34%;right:0;transform:rotate(5deg);z-index:2}
.stack .vc:nth-child(3){bottom:2%;left:8%;transform:rotate(-2deg);z-index:3}
.stack:hover .vc:nth-child(1){transform:rotate(-10deg) translate(-12px,-10px)}
.stack:hover .vc:nth-child(2){transform:rotate(8deg) translate(12px,-4px)}
.stack:hover .vc:nth-child(3){transform:rotate(-1deg) translateY(10px)}
.stack .tag{position:absolute;left:12px;bottom:10px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06)),rgba(10,6,20,.25);border:1px solid rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);box-shadow:var(--lg-edge)}

/* Marquee */
/* bande en verre fumé qui se fond dans la planète, sans bords durs */
.marquee{position:relative;overflow:hidden;padding:24px 0;white-space:nowrap;
  background:linear-gradient(180deg,rgba(14,9,30,0),rgba(14,9,30,.5) 30%,rgba(14,9,30,.5) 70%,rgba(14,9,30,0));
  -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.marquee::before,.marquee::after{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(214,196,255,.25),transparent)}
.marquee::before{top:0}.marquee::after{bottom:0}
.marquee .track{display:inline-flex;gap:42px;padding-right:42px;animation:slide 28s linear infinite}
.marquee span{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,36px);display:inline-flex;align-items:center;gap:42px}
.marquee span::after{content:"✦";color:var(--pink);font-size:.6em}
@keyframes slide{to{transform:translateX(-100%)}}

section{padding:clamp(80px,11vw,140px) 0}
.head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:40px}
.head h2{margin-top:14px}

/* Clients : sélecteur */
.picker{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.pick{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:2px solid var(--line);opacity:.5;filter:saturate(.6);
  transition:opacity .35s,filter .35s,transform .45s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .45s}
.pick:hover{opacity:.85;filter:none}
.pick.on{opacity:1;filter:none;border-color:rgba(255,255,255,.14);transform:translateY(-8px);box-shadow:0 22px 44px -18px var(--pink)}
/* bord holographique qui tourne autour du créateur choisi */
@property --holo{syntax:'<angle>';inherits:false;initial-value:0deg}
.pick.on::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;z-index:3;pointer-events:none;
  background:conic-gradient(from var(--holo),#8f5bff,#ff3d9a,#79bcff,#c6ff3d,#ffb8e4,#8f5bff);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:holo 4s linear infinite}
@keyframes holo{to{--holo:360deg}}
.pick img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.pick .cap{padding:12px 14px 14px}
.pick h3{font-size:20px}
.pick .subs{font-size:13px;color:var(--lime);font-weight:600}

/* Clients : lecteur + liste de ses vidéos */
.show{display:grid;grid-template-columns:1.65fr 1fr;gap:16px;margin-top:28px}
.player{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:#000;border:1px solid var(--line)}
.player>img{width:100%;height:100%;object-fit:cover;animation:fadeIn .5s ease}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player .ov{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:clamp(16px,2.4vw,28px);background:linear-gradient(transparent 40%,rgba(9,6,15,.92));cursor:pointer}
.player .ov h3{font-size:clamp(20px,2.6vw,34px);line-height:1.05;max-width:90%;animation:fadeUp .5s ease}
.player .ov .chan{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#d6cde8}
.player .ov .chan img{width:26px;height:26px;border-radius:50%;object-fit:cover;border:1.5px solid var(--pink)}
/* gros bouton play en bulle de verre : on voit la miniature floutée à travers */
.player .bigplay{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.45);
  background:radial-gradient(circle at 50% 0%,rgba(255,255,255,.35),transparent 60%),linear-gradient(135deg,rgba(143,91,255,.5),rgba(255,61,154,.5));
  -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
  box-shadow:var(--lg-edge),inset 0 -8px 18px rgba(255,61,154,.3),0 16px 44px -10px rgba(255,61,154,.8);transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.player .ov:hover .bigplay{transform:translate(-50%,-50%) scale(1.1)}
.bigplay::after{content:"";border-left:24px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent;margin-left:6px}
@keyframes fadeIn{from{opacity:0;transform:scale(1.03)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}

.plist{height:0;min-height:100%;display:flex;flex-direction:column;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);overflow:hidden}
.pl-head{padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.pl-who{display:flex;align-items:center;gap:12px}
.pl-who img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--pink)}
.pl-who b{display:block;font-family:var(--display);font-size:22px;font-weight:800;line-height:1}
.pl-who span{font-size:13px;color:var(--lime);font-weight:600}
.chans{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.chans button{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));
  font-size:13px;font-weight:600;color:var(--muted);box-shadow:var(--lg-edge);transition:color .2s,background .3s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.chans button:hover{color:var(--text)}
.chans button.on{background:linear-gradient(180deg,#fff,#e4d9ff);color:var(--bg);border-color:#fff;box-shadow:inset 0 1px 0 #fff,0 8px 22px -10px rgba(214,196,255,.9)}
.items{flex:1;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;scrollbar-width:thin;scrollbar-color:#3a2d52 transparent}
.item{display:grid;grid-template-columns:124px 1fr;gap:12px;align-items:center;padding:8px;border-radius:14px;transition:background .2s;animation:fadeUp .4s ease both}
.item:hover{background:rgba(255,255,255,.05)}
.item.on{background:rgba(255,61,154,.1);box-shadow:inset 0 0 0 1px rgba(255,61,154,.45)}
.item .th{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden}
.item .th img{width:100%;height:100%;object-fit:cover}
.item .dur{position:absolute;right:5px;bottom:5px;padding:1px 6px;border-radius:5px;background:rgba(0,0,0,.8);font-size:11px;font-weight:600}
.item h4{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.item small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.item.on small{color:var(--pink)}

/* Motion */
.mgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.mcard{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--card);border:1px solid var(--line);aspect-ratio:16/9;cursor:pointer}
.mcard video,.mcard img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.mcard:hover video,.mcard:hover img{transform:scale(1.04)}
.mcard .cap{position:absolute;inset:auto 0 0 0;padding:18px 20px;display:flex;justify-content:space-between;align-items:end;gap:10px;background:linear-gradient(transparent,rgba(9,6,15,.9))}
.mcard h3{font-size:22px}
.chip{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(143,91,255,.2);color:#c9b2ff;border:1px solid rgba(143,91,255,.4);white-space:nowrap}
.chip.c3d{background:rgba(198,255,61,.12);color:var(--lime);border-color:rgba(198,255,61,.35)}
.mcard.empty{display:grid;place-items:center;text-align:center;border-style:dashed;background:rgba(255,255,255,.02);cursor:default}
.mcard.empty p{color:var(--muted);font-size:14px;max-width:260px}
.mcard.empty b{display:block;font-family:var(--display);font-size:22px;color:var(--text);margin-bottom:6px}

/* About */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:center}
/* Photo en bulle de verre bleutée, avec une petite planète à anneau qui tourne autour (passe derrière puis devant) */
.me{position:relative;aspect-ratio:1/1;max-width:400px;width:100%;isolation:isolate}
.orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;z-index:2;background:#0b1640;
  box-shadow:0 0 0 1.5px rgba(170,215,255,.55),0 0 34px 4px rgba(80,140,255,.55),0 0 110px 18px rgba(143,91,255,.32),0 34px 70px -24px rgba(0,0,0,.7)}
.orb img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(1.06)}
.orb i{position:absolute;inset:0}
.orb .deep{background:radial-gradient(circle at 50% 55%,#0d2470,#1a0d4a 75%);mix-blend-mode:screen;opacity:.7}
.orb .tint{background:linear-gradient(160deg,#79bcff,#4a6bff 48%,#8f5bff);mix-blend-mode:color}
.orb .shade{background:linear-gradient(160deg,#a6d4ff,#6f8cff 60%,#a98bff);mix-blend-mode:multiply;opacity:.5}
.orb .glass{border-radius:50%;
  background:radial-gradient(circle closest-side,transparent 74%,rgba(90,160,255,.2) 85%,rgba(150,215,255,.7) 95%,rgba(235,248,255,.95) 98.6%,rgba(255,255,255,0) 100%),
    radial-gradient(58% 38% at 32% 16%,rgba(255,255,255,.5),rgba(255,255,255,0) 70%),
    radial-gradient(26% 14% at 70% 88%,rgba(160,215,255,.42),transparent 70%),
    radial-gradient(circle at 50% 125%,rgba(40,90,255,.6),transparent 55%);
  box-shadow:inset 0 0 44px 8px rgba(40,100,255,.55),inset 0 -20px 54px rgba(8,16,80,.7),inset 0 12px 26px rgba(255,255,255,.22)}
.orb .glass::before{content:"";position:absolute;inset:6%;border-radius:50%;border-top:2px solid rgba(255,255,255,.65);border-left:1px solid rgba(255,255,255,.22);transform:rotate(-28deg);filter:blur(.5px)}
/* reflet de lumière qui passe sur le verre de temps en temps */
.orb .glass::after{content:"";position:absolute;inset:-20%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.22) 50%,transparent 58%);transform:translateX(-70%);animation:sweep 7s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-70%)}85%,100%{transform:translateX(70%)}}
.orbit-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 4px rgba(143,91,255,.9))}
.orbit-line path{fill:none;stroke:rgba(205,180,255,.75);stroke-width:1.4;vector-effect:non-scaling-stroke}
.orbit-line.back{z-index:1;opacity:.5}
.orbit-line.front{z-index:3}
/* la planète : une géante gazeuse dessinée en 3D par le script (bandes + grosse tempête) qui tourne sur elle-même */
.moon{position:absolute;left:50%;top:50%;width:19%;aspect-ratio:1;margin:-9.5% 0 0 -9.5%;z-index:1;will-change:transform;pointer-events:none}
.moon .body{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;transform:rotate(-14deg);
  box-shadow:0 0 26px 2px rgba(255,150,200,.45),0 0 60px 6px rgba(143,91,255,.3)}
/* petites étoiles dorées qui scintillent autour de la bulle */
.spark{position:absolute;z-index:5;aspect-ratio:1;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,214,140,.95));animation:twinkle 2.6s ease-in-out infinite}
.spark i{display:block;width:100%;height:100%;background:linear-gradient(135deg,#fff,#ffd98a);clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%)}
.spark.s1{left:4%;top:78%;width:11%;animation-delay:-.4s}
.spark.s2{left:-3%;top:66%;width:5%;animation-delay:-1.2s}
.spark.s3{left:16%;top:92%;width:4%;animation-delay:-2s}
.spark.s4{left:84%;top:5%;width:7%;animation-delay:-.9s}
.spark.s5{left:94%;top:17%;width:3.5%;animation-delay:-1.7s}
.spark.s6{left:76%;top:-2%;width:3%;animation-delay:-2.3s}
@keyframes twinkle{0%,100%{transform:scale(.55) rotate(0);opacity:.6}50%{transform:scale(1.05) rotate(25deg);opacity:1}}
.me .bubble{position:absolute;z-index:6;bottom:4%;right:-8%;padding:10px 16px;border-radius:18px 18px 4px 18px;font-weight:700;font-size:14px;color:var(--bg);transform:rotate(-4deg);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(226,214,255,.88));border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(143,91,255,.25),0 12px 30px -10px rgba(0,0,0,.7)}
.about h2{margin:14px 0 22px}
.about p{color:#d6cde8;font-size:17px;max-width:600px}
.about p+p{margin-top:14px}
.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.tools span{padding:9px 15px;border-radius:999px;font-size:14px;font-weight:500;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--lg-edge)}

/* Process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.step{border-radius:var(--radius);padding:26px 24px;background:var(--card);border:1px solid var(--line)}
/* cartes façon verre : léger reflet en haut, on devine les étoiles derrière */
.pick,.plist,.step,.mcard{background-image:var(--frost),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,0) 45%);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.step b{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--grad);font-family:var(--display);font-size:18px;margin-bottom:18px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px}

/* Contact */
.contact{text-align:center;border-radius:32px;padding:clamp(56px,9vw,110px) var(--gutter);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.1);
  background:radial-gradient(1.5px 1.5px at 8% 22%,#fff,transparent),radial-gradient(1px 1px at 19% 74%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 31% 12%,rgba(255,200,235,.9),transparent),
    radial-gradient(1px 1px at 44% 86%,rgba(255,255,255,.7),transparent),radial-gradient(2px 2px at 63% 18%,#fff,transparent),radial-gradient(1px 1px at 72% 64%,rgba(214,196,255,.9),transparent),
    radial-gradient(1.5px 1.5px at 86% 30%,rgba(255,255,255,.85),transparent),radial-gradient(1px 1px at 93% 80%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 54% 44%,rgba(255,255,255,.5),transparent),
    linear-gradient(140deg,#2a1452,#16081f 55%,#3b0d2d)}
.contact::before{content:"";position:absolute;width:60%;height:120%;left:20%;top:-60%;background:radial-gradient(circle,rgba(255,61,154,.35),transparent 60%);pointer-events:none}
.contact h2{font-size:clamp(48px,9vw,120px);position:relative}
.contact .lead{margin:18px auto 34px;position:relative}
.contact .cta{justify-content:center;position:relative}
.discord{display:inline-flex;align-items:center;gap:14px;padding:10px 10px 10px 20px;border-radius:999px;font-weight:600;border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(160px 70px at var(--mx,50%) var(--my,0%),rgba(255,255,255,.18),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  -webkit-backdrop-filter:blur(12px) saturate(170%);backdrop-filter:blur(12px) saturate(170%);box-shadow:var(--lg-edge),var(--lg-drop)}
.discord svg{width:22px;height:22px;fill:#8c9eff}
.discord button{padding:9px 16px;border-radius:999px;background:linear-gradient(180deg,#fff,#e4d9ff);color:var(--bg);font-weight:700;font-size:13px;
  box-shadow:inset 0 1px 0 #fff,0 6px 16px -8px rgba(214,196,255,.9);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:30px;padding-bottom:40px;color:var(--muted);font-size:14px}

/* Lightbox (anims motion design) */
.lb{position:fixed;inset:0;z-index:200;background:rgba(5,3,9,.94);display:none;place-items:center;padding:var(--gutter)}
.lb.open{display:grid}
.lb .frame{width:min(1200px,100%);aspect-ratio:16/9;background:#000;border-radius:18px;overflow:hidden}
.lb .frame video{width:100%;height:100%}
.lb .close{position:absolute;top:18px;right:var(--gutter)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,40px);opacity:0;z-index:300;padding:12px 20px;border-radius:999px;background:var(--lime);color:#120a1c;font-weight:700;transition:all .35s}
.toast.show{transform:translate(-50%,0);opacity:1}

.rv{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* écrans moyens (petit portable, tablette) : on retire le bouton « Travaillons ensemble » du menu pour que les liens tiennent sur une ligne
   (le même bouton reste dans l'accueil et dans Contact) */
@media (max-width:1100px){
  .nav>.pill{display:none}
}
@media (max-width:1000px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .show{grid-template-columns:1fr}
  .plist{height:auto;min-height:0}
  .items{max-height:340px}
}
@media (max-width:860px){
  .links{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;align-items:center;gap:6px;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .3s}
  .links a{font-family:var(--display);font-weight:800;font-size:38px;color:var(--text)}
  .menu-open .links{opacity:1;pointer-events:auto}
  .nav>.pill{display:none}
  .burger{display:block}
  /* pas de transform ni de flou ici : sinon le menu plein écran (position fixed) reste coincé dans la barre */
  .nav{left:var(--gutter);right:var(--gutter);width:auto;transform:none;backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(19,13,30,.92)}
  .hero{grid-template-columns:1fr;padding-top:120px}
  .horizon{height:340px;bottom:-90px}
  .planet{top:170px}
  .lens{display:none}
  .stack{justify-self:center;max-width:440px}
  /* sélecteur : on fait glisser les clients du doigt */
  .picker{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 2px 6px;margin:-12px -2px 0;scrollbar-width:none}
  .picker::-webkit-scrollbar{display:none}
  .pick{scroll-snap-align:start}
  .mgrid{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .me{max-width:250px;margin:20px auto 10px}
  .me .bubble{right:-4%;font-size:13px}
}
@media (max-width:560px){
  .picker{grid-auto-columns:46%}
  .steps{grid-template-columns:1fr}
  .item{grid-template-columns:108px 1fr}
  .player .bigplay{width:64px;height:64px;top:50%}
  /* sur téléphone le titre est déjà dans la liste juste en dessous */
  .player .ov h3{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}