/* RESET */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* THEME (gris + cyan/rouge) */
:root{
  --bg-1:#1a1a1a; --bg-2:#2a2a2a; --txt:#e0e0e0;
  --cyan:#00b7eb; --red:#ff2e2e; --shadow-cyan:rgba(0,183,235,.7);
}

body{
  font-family:'Fira Code', monospace;
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2));
  color:var(--txt); line-height:1.6; overflow-x:hidden; min-height:100dvh;
}

/* Scan glitch */
body::before{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,183,235,.05), rgba(0,183,235,.05) 1px, transparent 1px, transparent 20px);
  animation:glitch 5s infinite linear;
}
@keyframes glitch{
  0%{transform:translateY(-100%);opacity:.4;}50%{opacity:.6;}100%{transform:translateY(100%);opacity:.4;}
}

/* NAV */
.menu{
  display:flex; align-items:center; justify-content:center; gap:16px;
  background:rgba(26,26,26,.9); padding:16px 12px; position:sticky; top:0; z-index:1000;
  border-bottom:2px solid var(--cyan); backdrop-filter:blur(8px);
}
.menu_bouton{
  display:none; align-items:center; justify-content:center; cursor:pointer; height:40px; width:40px;
  border:1px solid var(--cyan); border-radius:8px; background:#222;
}
.menu_bouton img{height:22px;width:22px;}
.menu_links{display:flex; flex-wrap:wrap; gap:6px 12px; justify-content:center;}
.menu a{
  color:var(--txt); text-decoration:none; padding:10px 18px; font-weight:500; border-radius:8px; transition:.25s;
}
.menu a:hover{color:var(--cyan); text-shadow:0 0 10px var(--shadow-cyan); transform:translateY(-1px); background:rgba(0,0,0,.2);}

/* HEADER */
.header{
  padding:56px 20px 40px; text-align:center; margin-bottom:30px;
  background:linear-gradient(180deg,var(--bg-2),var(--bg-1)); border-bottom:3px solid var(--cyan);
}
.glow-text{
  font-size:clamp(2rem,5vw,3.5rem); margin:0; color:var(--txt);
  text-shadow:0 0 15px var(--cyan), 0 0 30px var(--red);
  animation:glow 3s infinite alternate;
}
@keyframes glow{
  0%{text-shadow:0 0 15px var(--cyan),0 0 30px var(--red);}
  100%{text-shadow:0 0 25px var(--cyan),0 0 40px var(--red);}
}
.intro-text{
  font-size:clamp(1rem,2.3vw,1.3rem); color:var(--red); margin-top:14px;
  text-shadow:0 0 10px rgba(255,46,46,.5);
}

/* SECTIONS */
.theme-section{
  padding:56px 20px 60px; max-width:1200px; margin:0 auto;
  opacity:0; transform:translateY(18px); transition:opacity .6s, transform .6s;
}
.theme-section.visible{opacity:1; transform:translateY(0);}
.section-title{
  font-size:2rem; text-align:center; margin:0 0 24px;
  color:var(--cyan); text-shadow:0 0 10px rgba(0,183,235,.5);
  border-bottom:2px solid var(--red); display:inline-block; padding-bottom:8px;
}

/* PROJECTS */
.project-container{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:32px;}
.project{
  background:rgba(26,26,26,.9); padding:20px; border-radius:16px; border:2px solid var(--cyan);
  box-shadow:0 0 20px rgba(0,183,235,.25); transition:.25s; min-height:220px;
}
.project:hover{transform:translateY(-3px); box-shadow:0 0 26px rgba(0,183,235,.35);}
.project h3{margin:0 0 10px; color:var(--cyan); font-size:1.25rem; text-shadow:0 0 8px rgba(0,183,235,.35);}
.project p{margin:0 0 16px; color:var(--txt);}

.project-links{display:flex; flex-direction:column; gap:10px;}
.download-btn{
  display:inline-block; text-align:center; text-decoration:none; font-weight:700;
  background:linear-gradient(45deg,var(--cyan),var(--red)); color:#111;
  padding:10px 16px; border-radius:999px; transition:.2s;
}
.download-btn:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,183,235,.35);}

/* FOOTER */
.footer{
  background:rgba(26,26,26,.9); padding:36px 20px; text-align:center; border-top:2px solid var(--cyan);
  backdrop-filter:blur(8px); margin-top:40px;
}
.footer-links{display:flex; justify-content:center; gap:16px; margin-bottom:14px; flex-wrap:wrap;}
.footer-links img{width:50px; height:50px; object-fit:contain; transition:.25s;}
.footer-links a:hover img{transform:scale(1.12); filter:brightness(1.25);}
.legal-links{margin-top:10px;}
.legal-links a{color:var(--red); text-decoration:none; margin:0 10px; transition:.25s;}
.legal-links a:hover{color:var(--cyan);}
.footer p{margin-top:16px; color:var(--cyan); font-size:.98rem;}

/* RESPONSIVE */
@media (max-width:860px){
  .menu{justify-content:space-between; padding:12px 14px;}
  .menu_bouton{display:flex;}
  .menu_links{display:none; flex-direction:column; width:100%; gap:0; margin-top:12px;}
  .menu_links a{display:block; padding:12px; border-top:1px solid rgba(255,255,255,.06); border-radius:0;}
  .menu.menu_open .menu_links{display:flex;}
}
@media (max-width:480px){
  .glow-text{font-size:2.4rem;}
  .section-title{font-size:1.4rem;}
}