/* RESET & BASE */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
body { background:#0d0f1a; color:#fff; overflow-x:hidden; position:relative; line-height:1.6; }
html { scroll-behavior:smooth; }

/* CANVAS BACKGROUND */
#bgCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }

/* GLASS EFFECT */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 40px;
  margin:20px 0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}

/* NAVBAR TRANSPARENTE */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.3); 
  padding: 10px 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 15px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: 0.3s;
}
.navbar:hover { background: rgba(0,0,0,0.5); }

.logo-group { display:flex; align-items:center; gap:12px; cursor:pointer; }
.nav-logo-img { width:45px; height:45px; border-radius:50%; border:2px solid #0d6efd; object-fit:cover; transition:0.3s; }
.nav-logo-img:hover { transform:scale(1.1); }
.logo-name { font-weight:700; font-size:18px; color:#fff; }

.nav-links a {
  margin-left:25px; cursor:pointer; text-decoration:none; font-weight:500; color:#fff; position:relative; transition:0.3s;
}
.nav-links a:hover { color:#0d6efd; }
.nav-links a.active::after, .nav-links a:hover::after {
  content:''; position:absolute; left:0; bottom:-5px; width:100%; height:2px; background:#0d6efd; transition:0.3s;
}

/* DECALLAGE DU CONTENU SOUS LA NAVBAR */
main { padding-top: 80px; }

/* HERO */
.hero { display:flex; justify-content:space-between; align-items:center; gap:40px; }
.hero-text h1 {
  font-size:3rem; font-weight:700;
  background:linear-gradient(45deg,#0d6efd,#6a0dad,#ff6f61);
  -webkit-background-clip:text; color:transparent;
  background-size:300% 300%; animation:textGradient 6s ease infinite;
}
@keyframes textGradient{0%{background-position:0%}50%{background-position:100%}100%{background-position:0%}}
.hero-text .hi-text { color:#fff; -webkit-background-clip:unset; }
.hero-text h2 { margin:10px 0; font-weight:500; color:#eee; }
.hero-text p { margin-top:12px; line-height:1.6; color:#ccc; }
.hero-img img { width:320px; border-radius:50%; box-shadow:0 15px 40px rgba(0,0,0,0.15); transition: transform 0.5s ease; }
.hero-img img:hover { transform:translateY(-10px) scale(1.05); }

/* BUTTON */
.btn-primary {
  margin-top:20px; padding:12px 30px; background:#0d6efd; color:#fff; border:none;
  border-radius:30px; cursor:pointer; transition:0.3s; box-shadow:0 5px 15px rgba(13,110,253,0.3);
}
.btn-primary:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 10px 25px rgba(13,110,253,0.4); }

/* SKILLS */
.skills-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:30px; }
.skill-card { background:rgba(255,255,255,0.1); padding:20px; border-radius:10px; box-shadow:0 6px 20px rgba(0,0,0,0.2); opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease; }
.skill-card.visible { opacity:1; transform:translateY(0); }
.skill-card:hover { transform:translateY(-5px) scale(1.05); box-shadow:0 12px 25px rgba(0,0,0,0.3); }

/* TIMELINE */
.timeline { border-left:3px solid #0d6efd; padding-left:25px; margin-top:30px; }
.timeline-item { opacity:0; transform:translateX(-30px); transition:opacity 0.7s ease, transform 0.7s ease, box-shadow 0.3s ease; margin-bottom:40px; }
.timeline-item.visible { opacity:1; transform:translateX(0); }
.timeline-item:hover { transform:translateX(5px); box-shadow:0 12px 25px rgba(13,110,253,0.2); }
.timeline-item ul { margin-top:10px; padding-left:20px; }
.timeline-item li { margin-bottom:6px; }
.date { color:#0d6efd; font-weight:600; }

/* CONTACT */
.contact-box { margin-top:20px; font-size:1.1rem; }
.contact-box a { color:#0d6efd; text-decoration:none; }

footer { text-align:center; padding:20px; background: rgba(0,0,0,0.3); border-top:1px solid rgba(255,255,255,0.1); }

/* RESPONSIVE */
@media(max-width:900px){ .hero{flex-direction:column;text-align:center;} .hero-img img{width:240px;} }
@media(max-width:768px){
  .navbar { padding: 10px 20px; }
  .logo-name { display: none; }
  .hero-img { transform:translateY(0) !important; }
  .skills-grid { grid-template-columns:1fr; }
  .timeline { padding-left:15px; }
  .timeline-item { margin-bottom:25px; }
  .btn-primary { width:80%; padding:14px; }
}
.page { scroll-margin-top: 120px; }