/* --- Design tokens --- */
:root{
  --bg: #0b0c10;
  --panel: #0f1117;
  --text: #e8ecf1;
  --muted: #a9b1bd;
  --accent: #7aa2f7;          /* sakura-neon blue */
  --accent-2: #ff7ac6;        /* cherry pink */
  --ring: color-mix(in oklab, var(--accent), white 20%);
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f7fb; --panel:#ffffff; --text:#121417; --muted:#4b5563;
    --shadow: 0 10px 20px rgba(0,0,0,.08);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: var(--bg);
  color: var(--text);
  display:grid;
  place-items:center;
  padding: 24px;
}

/* Subtle anime-ish backdrop: soft gradient + star specks (no heavy images) */
.backdrop{
  position: fixed; inset: 0; z-index:-1;
  background:
    radial-gradient(1200px 800px at 10% -10%, color-mix(in oklab, var(--accent) 25%, transparent) 0%, transparent 60%),
    radial-gradient(900px 700px at 110% 110%, color-mix(in oklab, var(--accent-2) 18%, transparent) 0%, transparent 60%),
    linear-gradient(to bottom, color-mix(in oklab, var(--bg), black 4%), var(--bg));
}
.specks{
  position: fixed; inset:0; pointer-events:none; z-index:-1; opacity:.35;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 60%, transparent),
    radial-gradient(1px 1px at 80% 30%, #fff 60%, transparent),
    radial-gradient(1px 1px at 50% 80%, #fff 60%, transparent),
    radial-gradient(1px 1px at 20% 60%, #fff 60%, transparent),
    radial-gradient(1px 1px at 60% 10%, #fff 60%, transparent);
  animation: twinkle 9s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce){ .specks{animation:none} }
@keyframes twinkle{
  from{ filter: drop-shadow(0 0 0px var(--accent)); opacity:.20 }
  to  { filter: drop-shadow(0 0 3px var(--accent)); opacity:.45 }
}

/* Card */
.card{
  width:min(680px, 100%);
  background: color-mix(in oklab, var(--panel), transparent 4%);
  border: 1px solid color-mix(in oklab, var(--accent), var(--panel) 85%);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(18px, 4vw, 28px);
  backdrop-filter: saturate(120%) blur(6px);
}
.header{
  display:flex; gap:18px; align-items:center;
}
.avatar{
  width:68px; height:68px; border-radius: 18px; flex:none;
/* background:
    linear-gradient(135deg, var(--accent), var(--accent-2)) padding-box;
    linear-gradient(135deg, color-mix(in oklab, var(--accent), #fff 25%), transparent) border-box; */
  border: 2px solid transparent;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent), black 50%);
  display:grid; place-items:center; color:white; font-weight:800; letter-spacing:.5px;
  overflow:hidden;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.title{ font-size: clamp(22px, 4.2vw, 32px); font-weight:800; letter-spacing:.3px; }
.tag{ color: var(--muted); font-size: 14px; margin-top: -4px }
.bio{ margin: 16px 0 6px; color: var(--text) }

/* Links */
.links{ display:grid; gap:10px; margin-top:16px }
.btn{
  display:flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--text); text-decoration:none;
  background: color-mix(in oklab, var(--panel), black 6%);
  border: 1px solid color-mix(in oklab, var(--panel), var(--accent) 80%);
  transition: border-color .2s ease, transform .06s ease;
}
.btn:hover{ border-color: var(--ring) }
.btn:active{ transform: translateY(1px) }
.btn svg{ width:18px; height:18px; flex:none }
.btn .meta{ margin-left:auto; color: var(--muted); font-size: 12px }

/* Footer */
.foot{
  margin-top: 18px; display:flex; justify-content:space-between; gap:10px; color: var(--muted); font-size:12px;
}
.foot a{ color: inherit; text-decoration: underline dotted }
.badges{ display:flex; gap:6px; flex-wrap:wrap }
.chip{
  font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid color-mix(in oklab, var(--panel), var(--accent) 80%);
  background: color-mix(in oklab, var(--panel), black 4%);
}

/* Accessibility tweaks */
@media (max-width:480px){
  .header{ gap:12px }
  .avatar{ width:56px; height:56px; border-radius:14px }
}

/* Section media cohérente */
.media{ margin-top:18px }
.media .h{ margin:0 0 8px; font-size:14px; color:var(--muted) }
.video{
  position: relative; width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--panel), var(--accent) 80%);
  background: color-mix(in oklab, var(--panel), black 6%);
  box-shadow: var(--shadow);
}
.video iframe{ width:100%; height:100%; display:block; }

/* Variante “lite” */
.video.lite{ display:block; position:relative; }
.video-cover{
  all: unset; cursor: pointer; display:block; width:100%; height:100%;
  position:absolute; inset:0; border-radius:var(--radius); overflow:hidden;
}
.video.lite img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(.9) contrast(1.03) brightness(.95);
  transition: transform .3s ease, filter .3s ease;
}
.video.lite .play{
  position:absolute; inset:auto auto 14px 14px;
  background: color-mix(in oklab, var(--accent), black 10%);
  color: white; font-weight:700; font-size:14px; line-height:1;
  padding:10px 12px; border-radius:999px; box-shadow: 0 8px 20px rgba(0,0,0,.25);
  border: 1px solid color-mix(in oklab, var(--accent), white 20%);
}
.video.lite .video-cover:hover img{ transform: scale(1.02); filter: saturate(1) }
.video.lite .video-cover:focus-visible{ outline: 2px solid var(--ring); outline-offset: 3px; }

/* Boutons fantômes pour la nav secondaire */
.btn.ghost{
  background: transparent;
  border: 1px solid color-mix(in oklab, var(--panel), var(--accent) 65%);
  color: var(--text);
}
.btn.ghost:hover{ background: color-mix(in oklab, var(--panel), black 8%); }

.footer-actions{
  margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap;
}
.lead{ margin: 8px 0 4px; color: var(--muted) }