:root{
  --night:#141127;
  --night-2:#231c46;
  --card:rgba(36,30,70,.72);
  --line:rgba(205,195,255,.18);
  --ink:#f3efff;
  --muted:#b9b1dd;
  --lav:#b8a9ff;
  --pink:#f6b9e3;
  --mint:#a8ecd8;
  --sky:#a9d4ff;
  --round:ui-rounded,"Hiragino Maru Gothic ProN","Varela Round",Quicksand,Nunito,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{color-scheme:dark;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  padding:40px 16px 24px;
  font:16px/1.55 var(--round);color:var(--ink);
  background:
    radial-gradient(700px 420px at 12% -5%,rgba(184,169,255,.28),transparent 70%),
    radial-gradient(620px 420px at 95% 20%,rgba(246,185,227,.16),transparent 70%),
    radial-gradient(700px 500px at 50% 110%,rgba(169,212,255,.14),transparent 70%),
    linear-gradient(180deg,var(--night),var(--night-2));
  background-attachment:fixed;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Ciel étoilé */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px,#fff,transparent),
    radial-gradient(1px 1px at 110px 140px,#e4dcff,transparent),
    radial-gradient(1.5px 1.5px at 190px 70px,#ffe3f5,transparent),
    radial-gradient(1px 1px at 250px 210px,#fff,transparent),
    radial-gradient(1px 1px at 60px 240px,#d8ecff,transparent);
  background-size:290px 290px;opacity:.55}
.s{position:absolute;width:14px;height:14px;fill:#fff;opacity:.2;animation:twinkle 4s ease-in-out infinite}
.s1{top:9%;left:8%}
.s2{top:22%;right:10%;width:20px;height:20px;fill:var(--pink);animation-delay:.8s}
.s3{top:58%;left:5%;width:10px;height:10px;fill:var(--sky);animation-delay:1.6s}
.s4{top:74%;right:7%;fill:var(--lav);animation-delay:2.300s}
.s5{top:42%;right:22%;width:9px;height:9px;animation-delay:3s}
.s6{top:88%;left:24%;width:18px;height:18px;fill:var(--mint);animation-delay:1.200s}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.7) rotate(0)}50%{opacity:.9;transform:scale(1.1) rotate(20deg)}}

.wrap,footer{position:relative;z-index:1;width:100%;max-width:460px}

/* Carte */
.card{position:relative;border:1px solid var(--line);border-radius:30px;background:var(--card);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 24px 70px rgba(8,5,30,.55),inset 0 1px 0 rgba(255,255,255,.08);overflow:hidden;
  animation:rise .6s ease-out both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
.banner{height:150px;background:linear-gradient(120deg,#9c95ee,#c7b4f6 45%,#f3c4e4)}
.banner svg{display:block;width:100%;height:100%}
.avatar{position:relative;width:104px;height:104px;margin:-52px auto 0;padding:14px;border-radius:50%;
  background:radial-gradient(circle at 30% 25%,#fff,#e1d9ff 60%,#c9bff5);
  border:4px solid #fff;box-shadow:0 0 0 5px rgba(184,169,255,.35),0 10px 30px rgba(8,5,30,.5)}
.avatar svg{display:block;width:100%;height:100%;animation:sway 7s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}

.avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover;background:#e1d9ff}
.avatar img[hidden],.dot[hidden],.live[hidden]{display:none}
.dot{position:absolute;right:0;bottom:2px;width:24px;height:24px;border-radius:50%;border:4px solid #241e46;background:#8a84a8}
.dot[data-status="online"],.live[data-status="online"]::before{background:#7be3a4}
.dot[data-status="idle"],.live[data-status="idle"]::before{background:#ffd27a}
.dot[data-status="dnd"],.live[data-status="dnd"]::before{background:#ff8fa3}
.live{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin-top:10px;padding:5px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);font-size:.82rem;font-weight:600;color:#e6dfff}
.live::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#8a84a8}
.live[data-status="online"]::before{animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{box-shadow:0 0 0 0 rgba(123,227,164,.6)}to{box-shadow:0 0 0 8px rgba(123,227,164,0)}}

.who{padding:14px 24px 4px;text-align:center}
h1{font-size:clamp(1.9rem,8vw,2.4rem);line-height:1.15;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(90deg,var(--pink),var(--lav) 35%,var(--sky) 65%,var(--mint));
  -webkit-background-clip:text;background-clip:text;color:transparent;overflow-wrap:anywhere}
.handle{color:var(--muted);font-size:.92rem}
.roles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.chip{padding:5px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(184,169,255,.12);font-size:.8rem;font-weight:600;color:#e6dfff}
.bio{margin-top:14px;color:var(--muted);font-size:.95rem}

/* Liens */
.links{display:grid;gap:10px;padding:20px 20px 8px}
.link{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 14px 8px 8px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.045);
  text-decoration:none;transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease}
.link:hover,.link:focus-visible{transform:translateY(-2px);border-color:var(--c);background:rgba(255,255,255,.08);
  box-shadow:0 8px 26px -10px var(--c)}
.ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--c);color:#221c44}
.ico svg{width:21px;height:21px;fill:currentColor}
.txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.txt strong{font-size:1rem}
.txt small{color:var(--muted);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.go{flex:none;width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s ease,stroke .18s ease}
.link:hover .go,.link:focus-visible .go{transform:translateX(3px);stroke:var(--c)}

.projects{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;padding:14px 20px 24px;font-size:.88rem}
.projects a{display:inline-flex;align-items:center;gap:7px;color:var(--muted);text-decoration:none;transition:color .15s}
.projects a:hover,.projects a:focus-visible{color:var(--ink)}
.projects svg{width:11px;height:11px;fill:var(--pink)}

/* Bas de page */
footer{margin-top:20px}
.foot-panel{position:relative;border:1px solid var(--line);border-radius:22px;background:rgba(28,23,56,.7);padding:16px 18px;
  animation:rise .6s .15s ease-out both}
.foot-panel::before{content:"";position:absolute;top:-1px;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg,transparent,var(--pink) 20%,var(--lav) 55%,transparent);pointer-events:none}
.foot-sig{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 16px;font-size:.82rem;color:var(--muted)}
.foot-legal{flex:1 1 100%}
.foot-made{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05)}
.foot-made a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.foot-heart{width:13px;height:13px;fill:var(--pink);animation:foot-heart 2.400s ease-in-out infinite}
@keyframes foot-heart{0%,30%,100%{transform:scale(1)}8%{transform:scale(1.280)}16%{transform:scale(1)}23%{transform:scale(1.180)}}
@keyframes foot-pop{from{opacity:0;transform:translateY(6px)}}
.lang-menu{position:relative}
.lang-menu summary{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);color:var(--ink);font-weight:600;list-style:none;cursor:pointer;user-select:none;transition:border-color .15s}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary:hover,.lang-menu[open] summary{border-color:var(--lav)}
.lang-globe{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;opacity:.75}
.lang-caret{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.lang-menu[open] .lang-caret{transform:rotate(180deg)}
.lang-menu ul{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;min-width:100%;padding:4px;border:1px solid var(--line);border-radius:14px;background:#221c44;box-shadow:0 10px 30px rgba(8,5,30,.6);list-style:none}
.lang-menu[open] ul{animation:foot-pop .16s ease-out}
.lang-menu li button{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:10px;background:none;color:var(--muted);font:inherit;font-weight:600;white-space:nowrap;cursor:pointer}
.lang-menu li button:hover,.lang-menu li button[aria-current]{background:rgba(184,169,255,.16);color:var(--ink)}
.lang-menu li button[aria-current]::after{content:"✓";margin-left:auto;padding-left:8px}

[data-en]{display:none}
html[lang="en-CA"] [data-fr]{display:none}
html[lang="en-CA"] [data-en]{display:revert}

@media(max-width:400px){
  body{padding-top:20px}
  .banner{height:124px}
  .links{padding-inline:14px}
  .lang-menu ul{right:auto;left:0}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .s{opacity:.6}
}