@font-face{font-family:'Inter';src:url('/assets/fonts/inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Sora';src:url('/assets/fonts/sora.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('/assets/fonts/space-grotesk.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins.woff2') format('woff2');font-weight:400 800;font-display:swap}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--text-color,#111);
    min-height:100vh;
    display:flex;align-items:flex-start;justify-content:center;
    padding:3rem 1rem 4rem
}
/* --- Fonds --- */
body.bg-solid{background:var(--bg-color)}
body.bg-gradient{background:linear-gradient(var(--bg-dir),var(--bg-color),var(--bg-color2)) fixed}
body.bg-image{background:var(--bg-image) center/cover no-repeat fixed}
body.bg-image::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,var(--overlay));pointer-events:none}
.profile{position:relative;text-align:center;width:100%;max-width:680px}

/* --- Avatar + anneau --- */
.avatar-wrap{width:104px;height:104px;margin:0 auto 1rem;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center}
.ring-solid .avatar-wrap{padding:3px;background:var(--btn-color)}
.ring-gradient .avatar-wrap{padding:3px;background:linear-gradient(135deg,var(--btn-color),color-mix(in srgb,var(--btn-color) 15%,transparent))}
.avatar,.avatar-placeholder{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.avatar-placeholder{background:color-mix(in srgb,var(--text-color) 20%,transparent)}

/* --- Textes --- */
.site-name{font-family:var(--display-font),system-ui,sans-serif;font-weight:700;margin-bottom:.3rem}
.name-s .site-name{font-size:1.1rem}
.name-m .site-name{font-size:1.5rem}
.name-l .site-name{font-size:2rem}
.tagline{font-size:.95rem;opacity:.75;margin-bottom:2rem}

/* --- Liens --- */
.links{display:flex;flex-direction:column;gap:.8rem}
.link-btn{
    font-family:var(--display-font),system-ui,sans-serif;
    display:flex;align-items:center;justify-content:center;gap:.6rem;
    padding:.9rem 1.1rem;font-size:1rem;font-weight:600;
    text-decoration:none;color:var(--btn-text-color);
    transition:transform .15s ease,box-shadow .15s ease,opacity .15s ease
}
.link-icon{flex:none}
/* Styles de remplissage */
.btn-solid .link-btn{background:var(--btn-color)}
.btn-outline .link-btn{background:transparent;border:2px solid var(--btn-color)}
.btn-glass .link-btn{
    background:color-mix(in srgb,var(--btn-color) 14%,transparent);
    border:1px solid color-mix(in srgb,var(--btn-color) 28%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .btn-glass .link-btn{background:color-mix(in srgb,var(--btn-color) 25%,rgba(0,0,0,.4))}
}
/* Formes */
.shape-square .link-btn{border-radius:4px}
.shape-rounded .link-btn{border-radius:12px}
.shape-pill .link-btn{border-radius:999px}
/* Ombre */
.btn-shadow .link-btn{box-shadow:0 4px 16px rgba(0,0,0,.25)}
/* Hover */
.hover-scale .link-btn:hover{transform:translateY(-2px) scale(1.02)}
.hover-glow .link-btn:hover{box-shadow:0 0 22px color-mix(in srgb,var(--btn-color) 55%,transparent)}
.hover-none .link-btn:hover{opacity:.85}

/* --- Animation d'apparition --- */
.fx-intro .link-btn{opacity:0;animation:ml-rise .3s ease-out forwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes ml-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
    .fx-intro .link-btn{animation:none;opacity:1}
    .link-btn{transition:none}
}