/* Fenêtre Discord (bas à droite) — aux couleurs du site : noir, rouge, verre */
.xsd{position:fixed;right:22px;bottom:22px;z-index:9000;width:300px;padding:22px 20px 18px;border:1px solid #ff4d5844;border-radius:26px;text-align:center;color:#f6eeef;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,#241016f2,#0b0709f7 62%);
  box-shadow:0 34px 90px #000d,0 0 70px #e5303c33,inset 0 1px 0 #ffffff1c;
  opacity:0;transform:translateY(60px) scale(.88) rotate(2deg);transition:opacity .5s ease,transform .85s cubic-bezier(.2,1.4,.35,1);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
.xsd.in{opacity:1;transform:none;animation:xsd-float 5.5s ease-in-out 1.4s infinite}
.xsd.out{opacity:0;transform:translateY(34px) scale(.94);transition:opacity .4s ease,transform .45s ease;animation:none}
@keyframes xsd-float{50%{transform:translateY(-7px)}}

/* liseré rouge qui tourne */
.xsd::before{content:"";position:absolute;inset:0;z-index:2;border-radius:26px;padding:1.5px;background:conic-gradient(from var(--xsd-a,0deg),transparent 0 58%,#ff4d58 78%,#ffb3b9 86%,transparent);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:xsd-spin 4.2s linear infinite;pointer-events:none}
@property --xsd-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes xsd-spin{to{--xsd-a:360deg}}

/* fond : grille qui défile + halo rouge qui respire */
.xsd-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#ff4d5812 1px,transparent 1px),linear-gradient(90deg,#ff4d5812 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 75%);animation:xsd-grid 8s linear infinite}
@keyframes xsd-grid{to{background-position:26px 26px}}
.xsd-glow{position:absolute;left:50%;top:-40px;z-index:-1;width:240px;height:200px;margin-left:-120px;border-radius:50%;background:radial-gradient(circle,#ff2d3a66,transparent 68%);animation:xsd-breathe 3.6s ease-in-out infinite}
@keyframes xsd-breathe{50%{transform:scale(1.25);opacity:.65}}

.xsd-x{position:absolute;right:10px;top:9px;z-index:3;width:30px;height:30px;padding:0;border:0;border-radius:10px;background:none;color:#9a8a90;font-size:20px;line-height:1;cursor:pointer;transition:background .18s,color .18s,transform .25s}
.xsd-x:hover{background:#ff4d5822;color:#fff;transform:rotate(90deg)}

/* icône Discord */
.xsd-hero{position:relative;display:grid;place-items:center;width:100%;height:92px;margin:0 0 6px}
.xsd-logo{position:relative;z-index:2;display:grid;place-items:center;width:66px;height:66px;border-radius:22px;background:linear-gradient(145deg,#ff6b76,#c2152b);color:#fff;box-shadow:0 14px 34px #e5303c88,inset 0 1px 0 #ffffff66;animation:xsd-pop .9s .55s cubic-bezier(.2,1.7,.4,1) both,xsd-wiggle 6.5s 3.2s ease-in-out infinite}
.xsd-logo svg{width:38px;height:38px;filter:drop-shadow(0 2px 6px #0006)}
@keyframes xsd-pop{from{transform:scale(0) rotate(-35deg)}}
@keyframes xsd-wiggle{0%,84%,100%{transform:rotate(0) scale(1)}88%{transform:rotate(-10deg) scale(1.06)}92%{transform:rotate(9deg) scale(1.06)}96%{transform:rotate(-4deg)}}
.xsd-ring{position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:22px;border:2px solid #ff5a66;opacity:0;animation:xsd-ping 2.8s 1.1s ease-out infinite}
.xsd-ring.r2{animation-delay:2s}
@keyframes xsd-ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(2.1);opacity:0}}
/* points qui orbitent */
.xsd-orbit{position:absolute;left:50%;top:50%;width:104px;height:104px;margin:-52px 0 0 -52px;border:1px dashed #ff4d5855;border-radius:50%;animation:xsd-rot 9s linear infinite}
.xsd-orbit b{position:absolute;width:8px;height:8px;border-radius:50%;background:#ff7a86;box-shadow:0 0 12px #ff4d58}
.xsd-orbit b:nth-child(1){left:50%;top:-4px;margin-left:-4px}
.xsd-orbit b:nth-child(2){right:-4px;top:50%;margin-top:-4px;width:5px;height:5px;opacity:.7}
.xsd-orbit b:nth-child(3){left:12%;bottom:6%;width:6px;height:6px;opacity:.85}
@keyframes xsd-rot{to{transform:rotate(360deg)}}
/* étincelles : jaillissent à l'ouverture */
.xsd-sparks i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:#ff8e96;box-shadow:0 0 10px #ff4d58;opacity:0;transform:rotate(var(--a)) translateX(0) scale(0)}
.xsd.in .xsd-sparks i{animation:xsd-burst 1.1s var(--t) .65s cubic-bezier(.1,.7,.3,1) both}
@keyframes xsd-burst{0%{opacity:1;transform:rotate(var(--a)) translateX(14px) scale(var(--s))}100%{opacity:0;transform:rotate(var(--a)) translateX(var(--d)) scale(0)}}

/* textes */
.xsd-kicker{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 7px;font-size:11px;font-weight:800;letter-spacing:.16em;color:#ff9aa5}
.xsd-live{position:relative;width:8px;height:8px;border-radius:50%;background:#2ee66b;box-shadow:0 0 10px #2ee66b}
.xsd-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #2ee66b;opacity:0;animation:xsd-live 2s ease-out infinite}
@keyframes xsd-live{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.6);opacity:0}}
.xsd-name{position:relative;display:block;margin:0 0 5px;font-size:29px;font-weight:800;letter-spacing:-.035em;line-height:1.1;background:linear-gradient(100deg,#fff 0,#ffd0d4 30%,#ff5a66 52%,#ffd0d4 74%,#fff 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:xsd-text 4.5s linear infinite}
@keyframes xsd-text{to{background-position:-220% 0}}
.xsd-sub{margin:0 0 16px;font-size:12.5px;color:#a89aa0}

/* bouton rouge du site */
.xsd-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:48px;overflow:hidden;border-radius:15px;background:linear-gradient(180deg,#ff5560,#cf1c2a);color:#fff;font-size:15.5px;font-weight:780;text-decoration:none;box-shadow:0 12px 30px #e5303c77,inset 0 1px 0 #ffffff66;transition:transform .2s,box-shadow .25s;animation:xsd-glowbtn 2.4s ease-in-out 1.6s infinite}
.xsd-btn i{font-style:normal;display:inline-block;transition:transform .25s;animation:xsd-nudge 1.8s ease-in-out 1.6s infinite}
.xsd-btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,#ffffff77,transparent);transform:skewX(-20deg);animation:xsd-shine 3s 1.6s ease-in-out infinite}
@keyframes xsd-shine{55%,100%{left:140%}}
@keyframes xsd-nudge{50%{transform:translate(3px,-3px)}}
@keyframes xsd-glowbtn{50%{box-shadow:0 14px 40px #e5303ccc,inset 0 1px 0 #ffffff66}}
.xsd-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 44px #e5303ccc,inset 0 1px 0 #ffffff66}
.xsd-btn:hover i{transform:translate(4px,-4px)}
.xsd-btn:active{transform:scale(.97)}
.xsd-btn:focus-visible,.xsd-x:focus-visible{outline:2px solid #ffb3b9;outline-offset:3px}

/* le bouton « retour en haut » de l'accueil passe à gauche pour ne pas être caché */
html.xsd-open .fx-top{right:auto;left:20px}

@media(max-width:520px){
  .xsd{right:12px;left:12px;bottom:12px;width:auto;padding:16px 16px 14px;border-radius:22px;display:grid;grid-template-columns:96px 1fr;column-gap:12px;text-align:left;align-items:center}
  .xsd::before{border-radius:22px}
  .xsd-hero{grid-row:1/4;height:86px;margin:0}
  .xsd-logo{width:56px;height:56px;border-radius:18px}.xsd-ring{width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:18px}
  .xsd-logo svg{width:32px;height:32px}
  .xsd-orbit{width:88px;height:88px;margin:-44px 0 0 -44px}
  .xsd-kicker{justify-content:flex-start;margin:0 0 3px;font-size:9.5px;letter-spacing:.12em;padding-right:24px}
  .xsd-name{font-size:23px;margin:0}
  .xsd-sub{display:none}
  .xsd-btn{grid-column:1/-1;margin-top:12px;height:46px}
}