:root {
  --bg: #0d1117;         /* couleur de base du fond */
  --tone-1: #1a2233;     /* première teinte pour le gradient */
  --tone-2: #142030;     /* deuxième teinte */
  --text: #e6e6e6;       /* texte principal */
  --muted: #43444a;      /* texte secondaire */
  --card: #161b22;
  --card-2: #1c2128;
  --ring: #3b82f6;
  --shadow: 0 6px 24px rgba(0,0,0,.45);
  --container: 980px;   /* <<< aligne topbar & contenu */
}
*{box-sizing:border-box}
html, body { height: 100%; }
body{
  margin:0;
  background-color: #000;              /* fond noir demandé */
  color:var(--text);
  font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale
}
/* background FIXE plein écran qui s’adapte */

.bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: #000;          /* garde un noir de base */
    background-size: cover;
  	background-position: 50% 70%; /* centré horizontal + vertical */
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: blur(18px) brightness(0.45);
    transform: translateY(var(--bg-shift, 0px)) scale(1.1);
    will-change: transform;
}


body.scrolled .bg { filter: blur(18px) brightness(0.40); }

.page{max-width:var(--container);margin:0 auto;padding:24px}

/* TOPBAR sticky, calée à la largeur du contenu */
/* 3) S'assurer que le contenu passe AU-DESSUS du fond */
.topbar, .page {
  position: relative;
  z-index: 2;                       /* contenu au-dessus de .bg */
}


.topbar{
  position:sticky;
  top:0;
  z-index:100;
  pointer-events:none;
}

/* Contenu centré et calé sur la même largeur que .page */
.topbar .topbar-inner{
  box-sizing:border-box;
  width:100%;
  max-width:var(--container);
  margin:0 auto;

  /* 5px autour + prise en compte encoche iOS */
  padding:calc(8px + env(safe-area-inset-top)) 16px 6px;

  display:flex;
  align-items:center;
  gap:12px;

  transform:translateY(-100%);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
  background:rgba(12,14,18,0);
  backdrop-filter:blur(0px);
  pointer-events:auto;
}
.topbar.show .topbar-inner{
  transform:translateY(0);
  background:rgba(12,14,18,.55);
  border-color:rgba(255,255,255,.08);
  backdrop-filter:blur(6px);
}

/* petit ajustement visuel pour l’avatar */
.topbar-avatar{
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: invert(1);
    margin-left: 14px;
}

/* Utilise cette classe si tu dois inverser un SVG clair/sombre */
.topbar-avatar.invert{ filter: invert(1) hue-rotate(180deg) }

.topbar-handle{
    font-weight: 600;
    color: #fff;
    line-height: 1;
    margin-top: -4px;
}
/* Header */
.header{border-radius:18px;overflow:hidden;background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0));box-shadow:var(--shadow)
position: relative;padding: 0;}

/* BANNIÈRE : image qui remplit + dégradé sombre en bas */
.banner{
  position: relative;
  height: clamp(220px, 30vw, 360px);
  overflow: hidden;
  border-radius: 18px;
}
.banner img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
}
.banner::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 42%;                         /* intensité du dégradé */
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(5,6,8,0.72) 100%);
  pointer-events: none;
  z-index: 1;
}



/* Le profil vient chevaucher légèrement la bannière */
.profile{
  position: absolute;                 /* <<< clé */
  left: 18px; right: 18px; bottom: 14px;
  margin: 0;                          /* supprime l’ancien -32px */
  display: flex; align-items: center; gap: 16px;
  z-index: 2;                         /* au-dessus du dégradé */
}
.profile .bio{ margin-top: 4px; }

/* Si ton header doit être un “card” complet, force lui l'overflow */
.header{
  position: relative;
  overflow: visible;    /* on laisse la bannière et le profil respirer */
}

/* Améliore visibilité du logo SVG inversé */
.avatar-frame{
  flex-shrink: 0;             /* évite que l'avatar se réduise */	
  width:116px;height:116px;border-radius:50%;
  background:#111; display:grid; place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.45)
}
.avatar {
  border-radius: 50%;
  display: block;
  width: 96px;
  height: 96px;
}
.invert {
  filter: invert(1);
}
.topbar-avatar.invert{ filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
}
.title h1 {
    margin-top: 0;
    margin-left: -2px;
    margin-bottom: 0;
    font-size: 1.8rem;
}
.title .handle {
    color: #9D9D9D;
    font-size: 1rem;
    margin-top: -2px;
}
.title .bio {
    color: #636363;
    font-size: 0.80rem;
    margin-top: 0px;
    margin-left: -6px;
}
.badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#3ba55d}
.badge svg{width:14px;height:14px;fill:#fff}
.handle{color:var(--muted)}
.bio{margin:2px 0 0}

/* Grid 2x2 */
.media-grid{margin-top:14px;display:grid;gap:12px}
.grid-2x2{grid-template-columns:repeat(2,1fr)}
@media (max-width:640px){.grid-2x2{grid-template-columns:1fr}}

.media-card{
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 16/9;
    min-height: 190px;
    background-color: #0d1117;
    box-shadow: var(--shadow);
    background-size: cover;
    background-position: center top;
    text-decoration: none;
    color: var(--text)
}
/* aligner l’image IG par le haut */
.media-card.align-ig{ background-position:50% 20% }
/* Forcer un léger décalage vertical spécifique à Behance */
.media-card.behance {
  background-position: center 30% !important;
}

/* icône seule sur le thumb */
.thumb-icon{position:absolute;top:10px;left:10px;display:inline-flex;padding:6px;border-radius:12px;background:rgba(0,0,0,.45)}
.thumb-icon img{width:20px;height:20px;display:block}

/* Links */
.links{margin-top:18px;display:grid;gap:12px}
.link-card{
  display:grid;grid-template-columns:40px 1fr 24px;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;background:linear-gradient(180deg, var(--card), var(--card-2));
  box-shadow:var(--shadow);text-decoration:none;color:var(--text);
  outline:2px solid transparent;transition:transform .15s ease, outline-color .15s ease
}
.link-card:hover{transform:translateY(-1px)}
.link-card:focus-visible{outline-color:var(--ring)}
.icon img{width:24px;height:24px;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.text{display:flex;flex-direction:column;gap:2px}
.platform{font-weight:600}
.sub{color:var(--muted);font-size:14px}
.chevron svg{width:22px;height:22px;fill:#9ba3b0}
.behance-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:10px 16px }
.behance-thumb { display:block; aspect-ratio:1/1; background-size:cover; background-position:center; border-radius:10px }
@media (max-width:700px){ .behance-strip{ grid-template-columns:repeat(2,minmax(0,1fr)) } }

/* barres latérales désaturées */
.platform-flickr{border-left:4px solid rgba(255,0,132,.65)}
.platform-behance{border-left:4px solid rgba(23,105,255,.6)}
.platform-bluesky{border-left:4px solid rgba(17,133,254,.6)}
.platform-youtube{border-left:4px solid rgba(255,0,51,.7)}
.platform-threads{border-left:4px solid rgba(255,255,255,.55)}
.platform-instagram{border-left:4px solid rgba(225,48,108,.6)}
.platform-twitter{border-left:4px solid rgba(85,172,238,.6)}
.platform-tiktok{border-left:4px solid rgba(255,255,255,.55)}
.platform-twitch{border-left:4px solid rgba(145,70,255,.6)}
.platform-facebook{border-left:4px solid rgba(59,89,152,.6)}

.footer{display:flex;gap:10px;align-items:center;justify-content:center;margin:24px 0 8px 0;color:var(--muted)}
.footer .small{color:var(--muted);text-decoration:none}
.footer .small:hover{color:var(--text)}

@media (max-width:640px){
  .profile{grid-template-columns:1fr;}
  .avatar-frame{width:104px;height:104px}
  .avatar{width:84px;height:84px}
.title h1 {
    margin-left: -6px;
    margin-bottom: 0;
}
.handle {
    margin-top: -6px;
	margin-left: -4px;
	    margin-bottom: 0;
}
.bio {
    margin-top: -8px;
    margin-left: -12px;
	    margin-bottom: 0;
}
}
@media (prefers-reduced-motion: reduce){
  .topbar{ transition: none }
}