:root{
  --bg:#0b0c10;
  --card:#12131a;
  --text:#f5f7ff;
  --muted:#b7bdd1;
  --line:rgba(255,255,255,.10);
  --accent:#7c5cff;
  --accent2:#2de2e6;
  --shadow: 0 18px 60px rgba(0,0,0,.45);
  --radius: 18px;
}
[data-theme="light"]{
  --bg:#fafafa;
  --card:#ffffff;
  --text:#0f1222;
  --muted:#4b5563;
  --line:rgba(15,18,34,.12);
  --shadow: 0 18px 50px rgba(0,0,0,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0; padding:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); min-height:100%}
body{position:relative; background:var(--bg)}
a{color:inherit; text-decoration:none; transition:color .2s ease}

/* Animations au scroll */
.section{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.section.is-visible{opacity:1; transform:translateY(0)}
.section .project,.section .skillbox,.section .contact__item{opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease}
.section.is-visible .project,.section.is-visible .skillbox,.section.is-visible .contact__item{opacity:1; transform:translateY(0)}
.section .project:nth-child(1){transition-delay:.08s}
.section .project:nth-child(2){transition-delay:.16s}
.section .project:nth-child(3){transition-delay:.24s}
.section .skillbox:nth-child(1){transition-delay:.06s}
.section .skillbox:nth-child(2){transition-delay:.12s}
.section .skillbox:nth-child(3){transition-delay:.18s}
.section .skillbox:nth-child(4){transition-delay:.24s}
.section .contact__item:nth-child(1){transition-delay:.1s}
.section .contact__item:nth-child(2){transition-delay:.2s}
.section .contact__item:nth-child(3){transition-delay:.3s}
.section .about__bullets .bullet{opacity:0; transform:translateY(10px); transition:opacity .4s ease, transform .4s ease}
.section.is-visible .about__bullets .bullet{opacity:1; transform:translateY(0)}
.section .about__bullets .bullet:nth-child(1){transition-delay:.15s}
.section .about__bullets .bullet:nth-child(2){transition-delay:.25s}
.section .about__bullets .bullet:nth-child(3){transition-delay:.35s}
.section .about__bullets .bullet:nth-child(4){transition-delay:.45s}
.section .section__head{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.section.is-visible .section__head{opacity:1; transform:translateY(0)}
.container{max-width:1120px; margin:0 auto; padding:0 18px}

.topbar{
  position:sticky; top:0; z-index:20;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line);
  transition:background .3s ease, box-shadow .3s ease;
}
.topbar.scrolled{background: rgba(0,0,0,.5); box-shadow:0 4px 24px rgba(0,0,0,.2)}
[data-theme="light"] .topbar{background: rgba(255,255,255,.6);}
[data-theme="light"] .topbar.scrolled{background: rgba(255,255,255,.85); box-shadow:0 4px 24px rgba(0,0,0,.08)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; height:68px; gap:16px}

.brand{display:flex; align-items:center; gap:10px}
.brand__dot{
  width:12px; height:12px; border-radius:999px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 0 0 6px rgba(124,92,255,.12);
}
.brand__name{font-weight:700; letter-spacing:.2px}

.nav{display:flex; gap:18px; align-items:center}
.nav a{color:var(--muted); font-weight:600; transition:color .2s ease}
.nav a:hover{color:var(--text)}

.actions{display:flex; gap:10px; align-items:center}
.lang{
  border:1px solid var(--line); padding:8px 10px;
  border-radius:999px; color:var(--muted); font-weight:700;
}
.lang:hover{color:var(--text)}
.lang,.theme{transition:color .2s ease, transform .2s ease}
.lang:active,.theme:active{transform:scale(.96)}
.theme{
  border:1px solid var(--line);
  background:transparent; color:var(--text);
  width:40px; height:40px; border-radius:999px;
  cursor:pointer;
}
.theme:hover{transform:scale(1.05)}

.hero{padding:56px 0 26px}
.hero > .container > div:first-child .pill{animation:heroFadeIn .6s ease forwards}
.hero > .container > div:first-child .hero__title{animation:heroFadeIn .7s ease .1s forwards; opacity:0}
.hero > .container > div:first-child .hero__subtitle{animation:heroFadeIn .7s ease .15s forwards; opacity:0}
.hero > .container > div:first-child .hero__cta{animation:heroFadeIn .7s ease .25s forwards; opacity:0}
.hero > .container > div:first-child .micro{animation:heroFadeIn .7s ease .35s forwards; opacity:0}
.hero__card{animation:heroCardIn 1s cubic-bezier(.22,.61,.36,1) .3s forwards; opacity:0}
@keyframes heroFadeIn{from{opacity:0; transform:translateY(24px)}to{opacity:1; transform:translateY(0)}}
@keyframes heroCardIn{from{opacity:0; transform:translateY(32px) scale(.96)}to{opacity:1; transform:translateY(0) scale(1)}}
.hero__grid{display:grid; grid-template-columns: 1.2fr .8fr; gap:22px; align-items:stretch}
@media (max-width: 920px){
  .hero__grid{grid-template-columns:1fr}
  .nav{display:none}
}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 12px; border:1px solid var(--line);
  border-radius:999px; color:var(--muted); font-weight:700;
  opacity:0;
}
.hero__title{
  margin:14px 0 10px; font-size:46px; line-height:1.05;
  letter-spacing:-.02em;
}
@media (max-width: 520px){ .hero__title{font-size:34px;} }
.hero__subtitle{color:var(--muted); font-size:16px; max-width:58ch}

.hero__cta{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--line);
  font-weight:800; letter-spacing:.2px;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary:hover{box-shadow:0 22px 50px rgba(124,92,255,.28)}
.btn--primary{
  background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(45,226,230,.85));
  border:none;
  box-shadow: 0 18px 40px rgba(124,92,255,.18);
}
.btn--ghost{background:transparent}
.btn--small{padding:10px 12px; border-radius:12px; font-weight:800}

.micro{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
.micro span{
  padding:8px 10px; border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted); font-weight:700; font-size:13px;
}

.hero__card .card{
  background: radial-gradient(1200px 600px at top right, rgba(124,92,255,.22), transparent 60%),
              radial-gradient(900px 520px at bottom left, rgba(45,226,230,.14), transparent 55%),
              var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  height:100%;
}
.card__top{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.card__top--prominent{align-items:center; gap:24px}
.card__identity{flex:1; min-width:0}
.card__top--prominent .card__name{font-size:22px; margin:0 0 6px; line-height:1.2}
.card__top--prominent .card__role{font-size:14px; margin:0; line-height:1.4}
.avatar{
  width:48px; height:48px; border-radius:14px;
  background: linear-gradient(135deg,var(--accent),var(--accent2));
  display:grid; place-items:center; font-weight:900;
}
.avatar--photo{
  width:160px; height:220px;
  min-width:160px; min-height:220px;
  object-fit:cover;
  aspect-ratio:864/1184;
  border:4px solid rgba(124,92,255,.35);
  flex-shrink:0;
  border-radius:12px;
}
@media (max-width: 520px){
  .avatar--photo{width:120px; height:165px; min-width:120px; min-height:165px;}
  .card__top--prominent .card__name{font-size:18px;}
  .card__top--prominent .card__role{font-size:13px;}
}
.card__name{font-weight:900}
.card__role{color:var(--muted); font-weight:700; margin-top:2px}
.card__links{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.chip{
  padding:10px 12px; border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted); font-weight:800;
  transition:color .2s ease, transform .2s ease, border-color .2s ease;
}
.chip:hover{color:var(--text); transform:translateY(-1px)}
.card__note{margin-top:14px; color:var(--muted); font-weight:650}

.section{padding:42px 0}
.section__head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.section__head h2{margin:0; font-size:24px}
.muted{color:var(--muted)}
.grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px}
@media (max-width: 920px){ .grid{grid-template-columns:1fr} }

.project{
  background:var(--card); border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
  transition:transform .25s ease, box-shadow .25s ease;
}
.project:hover{transform:translateY(-4px); box-shadow:0 20px 50px rgba(0,0,0,.22)}
.project__top{display:flex; justify-content:space-between; gap:10px; align-items:center}
.project h3{margin:0; font-size:18px}
.badge{
  padding:7px 10px; border-radius:999px;
  background: rgba(124,92,255,.12);
  border:1px solid rgba(124,92,255,.22);
  font-weight:850; color:var(--text);
}
.stack{margin-top:10px; color:var(--muted); font-weight:700}
.project__actions{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap}

.grid--skills{grid-template-columns: repeat(4, 1fr)}
@media (max-width: 920px){ .grid--skills{grid-template-columns:1fr} }
.skillbox{
  background:var(--card); border:1px solid var(--line);
  border-radius: var(--radius);
  padding:16px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.skillbox:hover{transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.18)}
.skillbox h3{margin:0 0 8px; font-size:16px}
.skillbox ul{margin:0; padding-left:18px; color:var(--muted); font-weight:650}
.skillbox li{margin:6px 0}

.about{display:block}
.about__bullets{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
@media (max-width: 520px){ .about__bullets{grid-template-columns:1fr} }
.bullet{
  border:1px solid var(--line); border-radius:14px;
  padding:10px 12px; color:var(--muted); font-weight:800;
}

.contact{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; margin-top:16px}
@media (max-width: 920px){ .contact{grid-template-columns:1fr} }
.contact__item{
  background:var(--card); border:1px solid var(--line);
  border-radius: var(--radius);
  padding:14px; display:flex; gap:12px; align-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.contact__item:hover{transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.2)}
.contact__icon{
  width:44px; height:44px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(45,226,230,.10);
  border:1px solid rgba(45,226,230,.22);
}
.contact__label{font-weight:900}
.contact__value{color:var(--muted); font-weight:700}

.center{display:flex; justify-content:center; margin-top:18px}

.footer{border-top:1px solid var(--line); padding:18px 0}
.footer__inner{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; color:var(--muted); font-weight:650}