html {
  scroll-behavior: smooth;
}

:root{
  --bg:#07101a;    /*0f1720*/ 
  --card:#0f1728;
  --muted:#9aa4b2;
  --text:#e6eef6;
  --accent:#6ee7b7; 
  --glass: rgba(255,255,255,0.04);
  --radius:14px;
  --container:1100px;
}

/* Thème clair */
.light-theme {
  --bg: #f5f5f5;
  --card: #ffffff;
  --muted: #555555;
  --text: #111111;
  --accent: #0077ff;
  --glass: rgba(0,0,0,0.05);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  background: var(--bg);
}
.container{max-width:var(--container);margin:0 auto;padding:2rem}

/* Header */
.site-header{
  position:sticky;
  top:0;
  backdrop-filter: blur(6px);
  background:linear-gradient(180deg, rgba(10,12,18,0.6), rgba(10,12,18,0.25));
  border-bottom:1px solid rgba(255,255,255,0.03);
  z-index:40;
  display:flex;
  align-items:center;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.8rem 1rem;
  width:100%;
}
.brand{font-weight:700;}
.nav{display:flex;gap:1rem;}
.nav a{color:var(--muted);text-decoration:none;font-size:0.95rem;}
.nav a:hover{color:var(--text);}
#theme-toggle{background:none;border:none;color:var(--text);font-size:1.2rem;cursor:pointer;margin-left:1rem;}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.3rem;cursor:pointer;}

/* HERO */
.hero{padding:4rem 0;background: var(--bg);}
.hero-inner{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:center;}
.hero-text h1{font-size:2.2rem;margin:0;}
.lead{color:var(--muted);margin-top:0.6rem;}
.accent{color:var(--accent);}
.btn{
  display:inline-block;
  padding:0.6rem 1rem;
  border-radius:10px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .2s ease, background .2s ease;
}
.btn:hover{transform:scale(1.05);}
.btn.primary{background:linear-gradient(90deg,var(--accent), #4fd7c3);color:#042226;font-weight:600;}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);}
.btn.download{background:#1a2a33;border:1px solid var(--accent);color:var(--accent);font-weight:600;}
.cta-row{margin-top:1.2rem;display:flex;gap:0.8rem;}
.profile-card{background:var(--glass);padding:1rem;border-radius:12px;display:flex;gap:1rem;align-items:center;transition:transform .3s ease;}
.profile-card:hover{transform:translateY(-5px);}
.avatar{width:72px;height:72px;border-radius:10px;object-fit:cover;}
.profile-meta .name{font-weight:600;}
.profile-meta .role{font-size:0.85rem;color:var(--muted);}

/* ABOUT */
.about{padding:3rem 0;background: var(--bg);}
.about-grid{display:grid;grid-template-columns:1fr 320px;gap:2rem;align-items:start;}
.about-list{margin-top:1rem;}
.badge{display:inline-block;padding:0.4rem 0.6rem;border-radius:8px;background:rgba(255,255,255,0.03);margin:0.2rem;}
.lien{text-decoration:none;color:var(--accent);}

/* PROJECTS */
.projects{padding:3rem 0;background: var(--bg);}
.projects-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem;margin-top:1rem;}
.project-card{
  background:var(--card);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 6px 18px rgba(2,6,12,0.6);
  transition:transform .3s ease, box-shadow .3s ease;
}
.project-card:hover{
  transform:scale(1.05);
  box-shadow:0 18px 36px rgba(2,6,12,0.7);
}
.project-card img{width:100%;height:350px;object-fit:cover;display:block;}
.project-body{padding:1rem;}
.project-links{display:flex;gap:0.6rem;margin-top:0.6rem;}
.link{font-size:0.9rem;color:var(--accent);text-decoration:none;transition:color 0.2s;}
.link:hover{color:#4fd7c3;}

/* SKILLS */
.skills{padding:3rem 0;background: var(--bg);}
.skills-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}
.skill h4{margin:0 0 0.4rem 0;}
.bar{background:rgba(255,255,255,0.03);height:12px;border-radius:8px;overflow:hidden;}
.bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent), #4fd7c3);}

/* TIMELINE */
.timeline{padding:3rem 0;background: var(--bg);}
.timeline-line{position:relative;margin-left:2rem;border-left:2px solid var(--accent);}
.timeline-item{margin:1.5rem 0;padding-left:1rem;position:relative;opacity:0;transform:translateY(20px);transition:opacity 0.8s ease, transform 0.8s ease;}
.timeline-item::before{content:"";position:absolute;left:-10px;top:5px;width:12px;height:12px;background:var(--accent);border-radius:50%;}
.timeline-date{font-weight:600;color:var(--accent);margin-bottom:0.3rem;}
.timeline-content{color:var(--muted);}

/* CONTACT */
.contact{padding:3rem 0;background: var(--bg);}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start;}
.contact-form label{display:block;margin-top:1rem;margin-bottom:0.4rem;color:var(--text);}
.contact-form input,
.contact-form textarea{width:100%;padding:0.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.1);background:var(--card);color:var(--text);}
.contact-form button{margin-top:1rem;}
.contact-info h3{margin-bottom:0.8rem;}
.contact-info p{margin-bottom:0.4rem;}
.socials a{display:inline-block;margin-top:0.6rem;margin-right:1rem;color:var(--accent);text-decoration:none;transition:color 0.2s;}
.socials a:hover{color:#4fd7c3;}

/* FOOTER */
.site-footer{padding:1.5rem 0;text-align:center;background: var(--bg);;color:var(--muted);font-size:0.85rem;}

/* ANIMATIONS */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.8s ease, transform 0.8s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}

/* MEDIA QUERIES */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
  .about-grid{grid-template-columns:1fr;}
  .skills-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .nav{display:none;position:absolute;top:60px;right:0;background:var(--card);flex-direction:column;width:100%;padding:2rem 1rem;border-radius:0 0 12px 12px;box-shadow:0 6px 18px rgba(2,6,12,0.4);}
  .nav.active{display:flex;}
  .nav a{padding:0.8rem 0;font-size:1.1rem;}
  .nav-toggle{display:block;}

#formStatus {
  margin-top: 10px;
  font-weight: 500;
  transition: color 0.3s ease;
}
}