:root{
  --bg:#000000;
  --card:#0c0c0c;
  --text:#ffffff;
  --sub:#9CA3AF;
  --primary:#3B82F6;
  --border:#1a1a1a;

  /* Anim tokens */
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:500 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  overflow-x:hidden;
}

/* Fond blobs animés */
.bg-blobs{position:fixed;inset:-10% -10% auto -10%;pointer-events:none;z-index:-1;filter: blur(50px)}
.blob{
  position:absolute; width:36vmax; height:36vmax; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #3b82f688 0%, #1d4ed866 35%, transparent 60%);
  animation: float 22s ease-in-out infinite;
  mix-blend-mode: screen;
}
.blob.b1{left:-10%; top:-10%}
.blob.b2{right:-15%; top:10%; animation-duration:26s; animation-delay:-6s}
.blob.b3{left:25%; top:35%; animation-duration:28s; animation-delay:-12s}

@keyframes float{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(2rem,-1rem,0) scale(1.05)}
  100%{transform:translate3d(0,0,0) scale(1)}
}

/* Layout */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.section{padding:72px 0}
.section-head{position:relative}
.section-head h2{margin:0 0 4px;font-size:28px;font-weight:900}
.sub{color:var(--sub);margin:0 0 8px}

/* Header */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(0,0,0,0.6);backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex;align-items:center;gap:12px;height:56px;
}
.brand{
  font-weight:900;letter-spacing:.5px;
  margin-right:auto;           /* ✅ reste à gauche */
}

/* Bouton Retour (à droite) */
.back-btn.right{
  margin-left:12px;            /* espace avec la nav */
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:10px;
  background: rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;text-decoration:none;font-size:14px;font-weight:500;
  transition: all 0.2s ease;
}
.back-btn.right:hover{
  background: rgba(0,0,0,0.65);
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.25);
}
.back-btn.right:active{ transform: translateY(0) scale(0.98); }
.back-btn.right .icon{ width:18px; height:18px; display:block; }
.back-btn.right:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

@media (max-width:420px){
  .back-btn.right span{ display:none; } /* icône seule sur mini écran */
}

/* Nav */
.nav{position:relative;display:flex;gap:18px;align-items:center}
.nav a{color:var(--sub);text-decoration:none;font-weight:800;position:relative;padding:4px 2px}
.nav a:hover{color:var(--text)}
.nav a.is-active{color:var(--text)}
.nav-indicator{
  position:absolute;left:0;bottom:-6px;height:2px;width:0;background:linear-gradient(90deg,#60a5fa,#3b82f6);
  border-radius:999px;transition:transform .35s ease,width .35s ease,opacity .35s ease;opacity:.6
}
.burger{display:none;background:transparent;border:0;color:var(--text);font-size:22px}

/* Hero */
.hero{padding:84px 0 36px}
.hero h1{font-size:42px;line-height:1.2;margin:0 0 12px;font-weight:900}
.fx-gradient{
  background-image: linear-gradient(90deg,#fff 0%,#9ecbff 40%,#3b82f6 60%,#fff 100%);
  background-size: 200% auto;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation: shine 6s linear infinite;
  text-shadow: 0 0 24px rgba(59,130,246,.15);
}
@keyframes shine{to{background-position: -200% center}}
.lead{color:var(--sub);max-width:720px;margin:0 0 18px}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--border);
  font-weight:900;text-decoration:none;color:var(--text);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  will-change: transform;
}
.btn-primary{background:var(--primary);border-color:var(--primary);box-shadow:0 6px 20px rgba(59,130,246,.25)}
.btn-ghost{background:var(--card)}
.btn:hover{transform: translateY(-1px)}
.btn-mini{height:34px;padding:0 12px;border-radius:10px;font-size:14px}

/* Cards & grid */
.card{
  background:linear-gradient(180deg, rgba(12,12,12,1) 0%, rgba(10,10,10,1) 100%);
  border:1px solid var(--border);
  border-radius:var(--radius);padding:16px; box-shadow: var(--shadow);
}
.card.mini{padding:12px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

/* About */
.about-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr}
@media (max-width:960px){.about-grid{grid-template-columns:1fr}}
.bullets{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.p{margin:0 0 10px}

/* Chips & bars */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{
  background:var(--card);border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-weight:800;font-size:14px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.chip:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.3)}

.bars{display:grid;gap:12px}
.bar{display:grid;gap:6px}
.bar-track{height:10px;background:#111;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.bar-fill{
  height:100%;background:linear-gradient(90deg,#1e3a8a,#3b82f6,#93c5fd);
  width:0%;
  transition: width 1.1s cubic-bezier(.2,.65,.25,1);
}

/* Timeline */
.timeline{position:relative;margin-left:10px}
.timeline:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--border)}
.t-item{position:relative;margin-left:16px;margin-bottom:16px}
.t-dot{position:absolute;left:-11px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 12px rgba(59,130,246,.6)}
.t-content h3{margin:0 0 4px;font-size:18px}
.t-meta{color:var(--sub);margin:0 0 8px}

/* Projects */
.project{position:relative;overflow:hidden}
.project:after{
  content:""; position:absolute; inset:0; background: radial-gradient(600px 120px at var(--mx,50%) var(--my,50%), rgba(59,130,246,.12), transparent 60%);
  opacity:0; transition: opacity .25s ease;
}
.project:hover:after{opacity:1}
.project .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.project .tags span{background:#0f1220;border:1px solid var(--border);border-radius:999px;padding:4px 8px;font-size:12px}

/* ✅ Image responsive qui ne déforme pas la page */
.project-img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
  margin-bottom:12px;
  display:block;
  transform: scale(1); transition: transform .4s ease;
}
.project:hover .project-img{transform: scale(1.03)}

/* Contact */
.contact-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){.contact-grid{grid-template-columns:1fr}}
.contact-card{
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);
  border-radius:12px;height:56px;text-decoration:none;color:var(--text);font-weight:800;
  transition: transform .15s ease, box-shadow .2s ease;
}
.contact-card:hover{outline:2px solid var(--primary); transform: translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.35)}

/* Footer */
.site-footer{border-top:1px solid var(--border);margin-top:36px}
.footer-inner{height:56px;display:flex;align-items:center;justify-content:space-between}
.mini{color:var(--sub);text-decoration:none}
.mini:hover{color:var(--text)}

/* Mobile nav */
@media (max-width:840px){
  .burger{display:inline-flex}
  .nav{
    position:absolute;inset:56px 0 auto 0;background:rgba(0,0,0,0.95);
    border-bottom:1px solid var(--border);display:none;flex-direction:column;padding:12px 16px; z-index:60;
  }
  .nav a{padding:10px 0}
  .nav.open{display:flex}
}

/* ---- Effets d’apparition (scroll) ---- */
[data-animate]{opacity:0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease}
[data-animate].in-view{opacity:1; transform: translateY(0)}
[data-animate="stagger"] > *{opacity:0; transform: translateY(16px)}
[data-animate="stagger"].in-view > *{opacity:1; transform: translateY(0)}
[data-animate="stagger"].in-view > *:nth-child(1){transition:all .5s .05s ease}
[data-animate="stagger"].in-view > *:nth-child(2){transition:all .5s .15s ease}
[data-animate="stagger"].in-view > *:nth-child(3){transition:all .5s .25s ease}

/* Effet tilt léger */
.fx-tilt{transform-style: preserve-3d; perspective: 600px; will-change: transform}
.fx-tilt:hover{transform: rotateX(var(--rx,0)) rotateY(var(--ry,0))}

/* Magnetic (hover avec légère translation) */
.fx-magnetic{position:relative; display:inline-flex; overflow:hidden}
.fx-magnetic:hover{transform: translateY(-1px)}
.fx-magnetic:after{
  content:""; position:absolute; inset:-30%; background: radial-gradient(200px 80px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.18), transparent 60%);
  transition: opacity .25s ease; opacity:0; pointer-events:none;
}
.fx-magnetic:hover:after{opacity:1}

/* Accessibilité : réduire les animations si demandé */
@media (prefers-reduced-motion: reduce){
  .blob,.fx-gradient,.project-img,.btn,.chip,.contact-card,.nav-indicator{animation:none !important; transition:none !important}
  [data-animate],[data-animate="stagger"] > *{transform:none !important; opacity:1 !important}
}