:root {
  --bg: #070a12;
  --bg-soft: #0d1220;
  --card: rgba(255,255,255,.055);
  --card-hover: rgba(255,255,255,.085);
  --border: rgba(255,255,255,.10);
  --text: #f7f8fb;
  --muted: #9aa6bd;
  --accent: #6f8cff;
  --accent-2: #35d3c7;
  --shadow: 0 20px 60px rgba(0,0,0,.35);
  --radius: 22px;
}

body.light {
  --bg: #f5f7fb;
  --bg-soft: #ffffff;
  --card: rgba(255,255,255,.78);
  --card-hover: rgba(255,255,255,.96);
  --border: rgba(20,35,70,.10);
  --text: #101522;
  --muted: #657087;
  --shadow: 0 18px 50px rgba(26,45,90,.10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  transition: background .25s ease, color .25s ease;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.page-glow {
  position: fixed;
  border-radius: 999px;
  filter: blur(110px);
  opacity: .16;
  pointer-events: none;
  z-index: -2;
}
.page-glow-1 { width: 500px; height: 500px; background:#4c6fff; top:-160px; right:-120px; }
.page-glow-2 { width: 420px; height: 420px; background:#1ed7c6; bottom:5%; left:-180px; }

.header {
  position: sticky;
  top: 16px;
  width: min(1180px, calc(100% - 32px));
  margin: 16px auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg-soft) 78%, transparent);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}
.brand {
  display: flex; align-items:center; gap:10px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
}
.brand-mark { color: var(--accent-2); }
.nav { display:flex; gap:24px; }
.nav a { color:var(--muted); font-size:.94rem; transition:.2s; }
.nav a:hover { color:var(--text); }
.header-actions { display:flex; gap:8px; }
.icon-btn {
  width: 40px; height:40px; border-radius:12px;
  border:1px solid var(--border);
  color:var(--text); background:var(--card); cursor:pointer;
}
.menu-btn { display:none; }

.section { width:min(1180px, calc(100% - 36px)); margin:0 auto; padding:100px 0; }
.hero {
  min-height: calc(100vh - 90px);
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  align-items:center;
  gap:60px;
  padding-top:70px;
}
.eyebrow {
  display:inline-flex;
  padding:7px 12px;
  border:1px solid rgba(111,140,255,.28);
  background:rgba(111,140,255,.08);
  border-radius:999px;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#9fb1ff;
}
h1,h2,h3 { font-family:"Space Grotesk", sans-serif; line-height:1.12; }
h1 { font-size:clamp(3rem, 7vw, 5.7rem); margin:22px 0; letter-spacing:-.045em; }
h2 { font-size:clamp(2rem, 4vw, 3.1rem); margin:14px 0; letter-spacing:-.035em; }
h3 { font-size:1.2rem; }
.gradient-text {
  display:block;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;
  color:transparent;
}
.hero-copy { color:var(--muted); max-width:720px; font-size:1.08rem; }
.hero-tags,.chips { display:flex; flex-wrap:wrap; gap:9px; }
.hero-tags { margin:24px 0; }
.hero-tags span,.chips span {
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--muted);
  font-size:.82rem;
}
.hero-actions,.contact-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px; border-radius:14px;
  border:1px solid var(--border); font-weight:700;
  transition:transform .2s ease, background .2s ease;
}
.btn:hover { transform:translateY(-2px); }
.btn-primary { color:white; border:none; background:linear-gradient(135deg,var(--accent),#7667ff); }
.btn-secondary { background:var(--card); }
.hero-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:38px; }
.hero-stats div {
  padding:16px; border:1px solid var(--border); background:var(--card); border-radius:16px;
}
.hero-stats strong { display:block; font:700 1.3rem "Space Grotesk"; }
.hero-stats span { color:var(--muted); font-size:.78rem; }

.terminal-card {
  border:1px solid var(--border); background:#090d16; border-radius:24px; overflow:hidden;
  box-shadow:0 35px 90px rgba(0,0,0,.45); transform:rotate(1deg);
}
.terminal-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.08); color:#8893a8;
}
.dots { display:flex; gap:7px; }
.dots span { width:9px;height:9px;border-radius:50%;background:#485167; }
pre { margin:0; padding:28px; overflow:auto; font-size:.92rem; line-height:1.8; color:#d8e0ef; }
.kw {color:#ca8cff}.type{color:#5ed9d0}.str{color:#9fda8f}.bool{color:#ffbc70}

.section-heading { max-width:760px; margin-bottom:42px; }
.section-heading p {color:var(--muted);}
.glass-card,.skill-card,.project-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); backdrop-filter:blur(14px);
}
.glass-card { padding:28px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.glass-card p,.skill-card p,.project-card p,.muted { color:var(--muted); }
.check-list { display:grid; gap:12px; color:var(--muted); }
.check-list span::first-letter { color:var(--accent-2); }

.skills-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.skill-card,.project-card { padding:26px; transition:.25s ease; }
.skill-card:hover,.project-card:hover { transform:translateY(-5px); background:var(--card-hover); }
.skill-icon {
  width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(111,140,255,.12);color:#9fb1ff;font-size:1.2rem;
}

.timeline { position:relative; margin-left:10px; }
.timeline::before { content:""; position:absolute; left:6px; top:0; bottom:0; width:1px; background:var(--border); }
.timeline-item { position:relative; padding-left:44px; margin-bottom:28px; }
.timeline-dot {
  position:absolute; left:0; top:8px; width:13px;height:13px;border-radius:50%;
  background:var(--accent-2); box-shadow:0 0 0 7px rgba(53,211,199,.10);
}
.timeline-date { color:#9fb1ff; font-size:.86rem; margin-bottom:8px; }
.timeline-card ul { color:var(--muted); padding-left:20px; }
.timeline-card li { margin:7px 0; }

.projects-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.project-index { font:700 2rem "Space Grotesk"; color:rgba(111,140,255,.38); }
.education-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.year { color:#9fb1ff; font-weight:700; }

.contact-section { padding-bottom:70px; }
.contact-card {
  text-align:center; padding:60px 24px;
  border-radius:30px;
  border:1px solid var(--border);
  background:
    radial-gradient(circle at 20% 20%, rgba(111,140,255,.16), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(53,211,199,.14), transparent 35%),
    var(--card);
}
.contact-card p { max-width:700px; margin:0 auto; color:var(--muted); }
.contact-actions { justify-content:center; }
.contact-card small { display:block; margin-top:20px; color:var(--muted); }

footer {
  width:min(1180px, calc(100% - 36px)); margin:0 auto; padding:28px 0 40px;
  display:flex; justify-content:space-between; color:var(--muted); font-size:.86rem;
  border-top:1px solid var(--border);
}

.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.10s; }
.delay-2 { transition-delay:.18s; }

@media (max-width: 900px) {
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-visual { order:-1; }
  .skills-grid,.education-grid { grid-template-columns:1fr 1fr; }
  .nav {
    position:absolute; top:62px; left:0; right:0; margin:auto;
    width:100%; display:none; flex-direction:column; gap:0;
    padding:12px; background:var(--bg-soft); border:1px solid var(--border); border-radius:16px;
  }
  .nav.open {display:flex;}
  .nav a {padding:11px;}
  .menu-btn {display:inline-block;}
}
@media (max-width: 640px) {
  .section { padding:72px 0; }
  .header { top:8px; width:calc(100% - 16px); margin-top:8px; }
  .about-grid,.skills-grid,.projects-grid,.education-grid { grid-template-columns:1fr; }
  .hero {padding-top:50px; gap:34px;}
  h1 {font-size:2.8rem;}
  pre {font-size:.74rem; padding:18px;}
  .hero-stats {grid-template-columns:1fr;}
  footer {flex-direction:column; gap:10px;}
}


/* Informations personnelles ajoutées depuis le CV — design existant conservé */
.hero-name {
  margin: 18px 0 0;
  font: 700 clamp(1.25rem, 2vw, 1.6rem) "Space Grotesk", sans-serif;
  letter-spacing: .08em;
}
.current-role {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: .96rem;
}
.contact-meta {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--muted);
  font-size: .9rem;
}