/* ===== Link in Bio — Muhcin.dev (même charte que style.css) ===== */
:root{--bg:#0d0d0d;--bg2:#161616;--fg:#f1f1ef;--muted:#8d8d8a;--line:#2a2a28;--accent:#918d8c;--red:#ff1a1a;--gold:#f5b942;--head:"Big Shoulders Display",sans-serif;--body:"Poppins",sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 70% 0%,#2b2b29,var(--bg) 60%) no-repeat,var(--bg);color:var(--fg);font:400 16px/1.7 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.06;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='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}ul{list-style:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.hub{flex:1;width:100%;max-width:560px;margin-inline:auto;padding:clamp(40px,9vw,80px) 20px 40px}

/* hero */
.hero{text-align:center}
.avatar{position:relative;display:grid;place-items:center;width:132px;height:132px;margin:0 auto 26px;border-radius:50%;border:1px solid var(--line);background:var(--bg2);overflow:hidden;box-shadow:0 0 0 6px rgba(255,255,255,.03);transition:transform .4s,border-color .4s,box-shadow .4s}
.avatar:hover{transform:scale(1.05);border-color:var(--red);box-shadow:0 0 0 6px rgba(255,26,26,.12),0 10px 40px rgba(255,26,26,.18)}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-fallback{display:none;font:900 64px/1 var(--head)}
.avatar-fallback b{color:var(--red)}
.avatar.no-img .avatar-fallback{display:block}
h1{font:900 clamp(54px,16vw,88px)/.92 var(--head);text-transform:uppercase;letter-spacing:-.005em}
h1 span{color:var(--accent)}
.intro{margin-top:22px;color:#cfcfcb;font-size:clamp(14px,3.6vw,16px);line-height:1.75}

/* cards */
.links{display:grid;gap:12px;margin-top:38px}
.card{position:relative;display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 65%),var(--bg2);overflow:hidden;transition:transform .35s,border-color .35s,background-color .35s,box-shadow .35s}
.card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,26,26,.14),transparent 55%);opacity:0;transition:opacity .35s;pointer-events:none}
.card:hover,.card:focus-visible{transform:translateY(-4px);border-color:var(--red);box-shadow:0 14px 40px rgba(0,0,0,.5)}
.card:hover::before{opacity:1}
.card:active{transform:translateY(-1px) scale(.99)}
.ico{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:12px;background:#242423;transition:background .35s,color .35s,transform .35s}
.ico svg,.arrow{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ico svg{width:24px;height:24px}
.card:hover .ico{background:var(--red);color:#fff;transform:rotate(-6deg) scale(1.05)}
.txt{display:grid;min-width:0;flex:1;line-height:1.3}
.txt strong{font:600 16px var(--body);transition:color .25s}
.txt small{margin-top:3px;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card:hover .txt strong{color:var(--red)}
.arrow{flex:none;width:20px;height:20px;color:var(--muted);transition:transform .35s,color .35s}
.card:hover .arrow{transform:translate(3px,-3px);color:var(--red)}

/* carte principale */
.card-main{padding:22px 20px;border-color:#55514f;background:linear-gradient(145deg,rgba(255,255,255,.07),transparent 65%),var(--bg2)}
.card-main .ico{width:56px;height:56px;background:var(--fg);color:var(--bg)}
.card-main .txt strong{font-size:18px}

/* footer */
.foot{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 20px;border-top:1px solid var(--line);text-align:center;color:var(--muted);font-size:13px}
.logo{font:900 26px/1 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--fg);transition:color .25s}
.logo span{color:var(--accent)}
.logo:hover,.logo:hover span{color:var(--red)}
.rating{display:grid;justify-items:center;gap:6px}
.stars{display:flex;gap:3px}
.stars svg{width:20px;height:20px;fill:var(--gold);filter:drop-shadow(0 0 6px rgba(245,185,66,.55));animation:twinkle 3s ease-in-out infinite}
.stars svg:nth-child(2){animation-delay:.15s}.stars svg:nth-child(3){animation-delay:.3s}.stars svg:nth-child(4){animation-delay:.45s}.stars svg:nth-child(5){animation-delay:.6s}
.score b{color:var(--fg);font-weight:600}
@keyframes twinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* curseur lumineux (desktop) */
.cursor-glow{position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;z-index:98;opacity:0;background:radial-gradient(circle,rgba(255,40,40,.32) 0%,rgba(255,40,40,.12) 35%,transparent 70%);mix-blend-mode:screen;will-change:transform;transition:opacity .4s}
.cursor-glow.on{opacity:1}
@media(hover:none),(pointer:coarse){.cursor-glow{display:none}}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.js .reveal.in{opacity:1;transform:none}
.js .links li:nth-child(2).reveal{transition-delay:.08s}.js .links li:nth-child(3).reveal{transition-delay:.16s}.js .links li:nth-child(4).reveal{transition-delay:.24s}

@media(max-width:380px){.txt small{white-space:normal}.card{padding:14px}.card-main{padding:18px 16px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .reveal{opacity:1;transform:none}}