/* ============================================
   RESET & CSS VARIABLES
============================================ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0b0914;
  --bg2:#0f0d1a;
  --violet:rgba(138,43,226,1);
  --violet-glow:rgba(138,43,226,0.4);
  --violet-dim:rgba(138,43,226,0.12);
  --cyan:#00f5ff;
  --cyan-glow:rgba(0,245,255,0.25);
  --green:#00ff88;
  --red:#ff3860;
  --text:#e8e0f0;
  --text-dim:#7a6a90;
  --glass:rgba(255,255,255,0.025);
  --glass-border:rgba(138,43,226,0.2);
  --mono:'JetBrains Mono',monospace;
  --sans:'Inter',sans-serif;
}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--sans);cursor:none;overflow-x:hidden;}
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:var(--bg);}
::-webkit-scrollbar-thumb{background:var(--violet);border-radius:2px;}
::selection{background:rgba(138,43,226,0.4);color:#fff;}

/* ============================================
   CUSTOM CURSOR
============================================ */
#cursor{
  position:fixed;width:10px;height:10px;
  background:var(--violet);border-radius:50%;
  pointer-events:none;z-index:99999;
  transform:translate(-50%,-50%);
  box-shadow:0 0 15px var(--violet),0 0 30px var(--violet-glow);
  transition:width 0.15s,height 0.15s;
  mix-blend-mode:screen;
}
#cursor-ring{
  position:fixed;width:32px;height:32px;
  border:1px solid rgba(138,43,226,0.6);
  border-radius:50%;pointer-events:none;z-index:99998;
  transform:translate(-50%,-50%);
  transition:width 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
             height 0.25s cubic-bezier(0.25,0.46,0.45,0.94),
             border-color 0.25s, background 0.25s;
}
#cursor-ring.hovering{
  width:52px;height:52px;
  border-color:var(--violet);
  background:rgba(138,43,226,0.07);
}
.cursor-trail{
  position:fixed;border-radius:50%;
  pointer-events:none;z-index:99990;
  transform:translate(-50%,-50%);
  background:var(--violet);
  animation:trailFade 0.5s ease forwards;
}
@keyframes trailFade{
  0%{opacity:0.6;width:8px;height:8px;}
  100%{opacity:0;width:2px;height:2px;}
}

/* ============================================
   BOOT SCREEN
============================================ */
#boot-screen{
  position:fixed;inset:0;background:var(--bg);
  z-index:9999;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-family:var(--mono);padding:2rem;
}
#boot-screen.exit{
  animation:bootOut 1s cubic-bezier(0.76,0,0.24,1) 0.3s forwards;
}
@keyframes bootOut{
  0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);opacity:1;}
  100%{clip-path:polygon(0 0,100% 0,100% 0%,0 0%);opacity:0;pointer-events:none;}
}
.boot-ascii{
  font-size:clamp(0.4rem,1.5vw,0.75rem);
  color:var(--violet);line-height:1.2;
  text-shadow:0 0 20px var(--violet);
  margin-bottom:1.5rem;text-align:center;
  animation:asciiPulse 2s ease-in-out infinite;
  white-space:pre;
}
@keyframes asciiPulse{
  0%,100%{opacity:1;text-shadow:0 0 20px var(--violet),0 0 40px var(--violet-glow);}
  50%{opacity:0.7;text-shadow:0 0 40px var(--violet),0 0 80px var(--violet-glow);}
}
.boot-title{
  font-size:clamp(1.2rem,4vw,2rem);
  font-weight:700;letter-spacing:0.4em;
  color:var(--violet);margin-bottom:2.5rem;
  text-shadow:0 0 30px var(--violet),0 0 60px var(--violet-glow);
}
#boot-log{
  width:min(580px,90vw);
  font-size:clamp(0.6rem,1.8vw,0.78rem);
  line-height:2;color:var(--text-dim);
}
.boot-line{opacity:0;animation:lineIn 0.05s forwards;}
.boot-line .ok{color:var(--green);}
.boot-line .warn{color:#ffaa00;}
.boot-line .err{color:var(--red);}
@keyframes lineIn{to{opacity:1;}}
#boot-bar-wrap{
  margin-top:1.5rem;
  width:min(580px,90vw);
  height:2px;background:rgba(138,43,226,0.15);
  border-radius:2px;overflow:hidden;
}
#boot-bar{
  height:100%;width:0;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  border-radius:2px;
  transition:width 0.1s linear;
  box-shadow:0 0 10px var(--violet);
}
#boot-pct{
  margin-top:0.5rem;
  font-size:0.7rem;color:var(--violet);
  font-family:var(--mono);letter-spacing:0.2em;
}

/* ============================================
   SCANLINES & NOISE OVERLAY
============================================ */
#scanlines{
  position:fixed;inset:0;z-index:9990;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
  animation:scanMove 8s linear infinite;
}
@keyframes scanMove{
  0%{background-position:0 0;}
  100%{background-position:0 200px;}
}
#noise{
  position:fixed;inset:0;z-index:9989;
  pointer-events:none;opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================
   AMBIENT ORBS
============================================ */
.orb{
  position:fixed;border-radius:50%;
  filter:blur(80px);pointer-events:none;
  animation:orbFloat 8s ease-in-out infinite;
  z-index:0;
}
.orb-1{
  width:400px;height:400px;
  background:rgba(138,43,226,0.12);
  top:-100px;left:-100px;
  animation-duration:10s;
}
.orb-2{
  width:300px;height:300px;
  background:rgba(0,245,255,0.06);
  top:40%;right:-80px;
  animation-duration:12s;animation-delay:-4s;
}
.orb-3{
  width:250px;height:250px;
  background:rgba(138,43,226,0.08);
  bottom:10%;left:20%;
  animation-duration:9s;animation-delay:-2s;
}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-20px) scale(1.05);}
  66%{transform:translate(-20px,30px) scale(0.95);}
}

/* ============================================
   OS STATUS BAR (TOP NAV)
============================================ */
#os-bar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:44px;
  background:rgba(11,9,20,0.8);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--glass-border);
  display:flex;align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
  font-family:var(--mono);
  font-size:0.7rem;
  color:var(--text-dim);
}
.os-bar-left{display:flex;align-items:center;gap:1rem;}
.os-signal{display:flex;align-items:flex-end;gap:2px;height:14px;}
.os-signal span{
  display:block;width:3px;
  background:var(--violet);border-radius:1px;
  animation:signalPulse 1.5s ease-in-out infinite;
}
.os-signal span:nth-child(1){height:4px;animation-delay:0s;}
.os-signal span:nth-child(2){height:7px;animation-delay:0.15s;}
.os-signal span:nth-child(3){height:10px;animation-delay:0.3s;}
.os-signal span:nth-child(4){height:13px;animation-delay:0.45s;}
@keyframes signalPulse{
  0%,100%{opacity:1;}50%{opacity:0.3;}
}
.os-sys-name{color:var(--violet);font-weight:700;letter-spacing:0.15em;}
.os-bar-nav{display:flex;gap:0.25rem;}
.os-nav-link{
  padding:0.3rem 0.8rem;
  color:var(--text-dim);
  text-decoration:none;
  border-radius:4px;
  transition:all 0.2s;
  font-size:0.68rem;
  letter-spacing:0.05em;
  position:relative;
}
.os-nav-link::before{
  content:'';position:absolute;inset:0;
  border-radius:4px;
  background:var(--violet-dim);
  opacity:0;transition:opacity 0.2s;
}
.os-nav-link:hover{color:var(--text);}
.os-nav-link:hover::before{opacity:1;}
.os-nav-link.active{color:var(--violet);}
.os-nav-link.active::after{
  content:'';position:absolute;
  bottom:2px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;
  background:var(--violet);
  box-shadow:0 0 6px var(--violet);
}
.os-bar-right{display:flex;align-items:center;gap:1rem;}
#os-clock{color:var(--text);letter-spacing:0.1em;}
.os-battery{
  display:flex;align-items:center;gap:3px;
  font-size:0.65rem;
}
.bat-body{
  width:20px;height:10px;
  border:1px solid var(--text-dim);
  border-radius:2px;position:relative;
  overflow:hidden;
}
.bat-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:72%;background:var(--green);
  border-radius:1px;
}
.bat-tip{
  width:2px;height:5px;
  background:var(--text-dim);
  border-radius:0 1px 1px 0;
}

/* ============================================
   MAIN CONTENT WRAPPER
============================================ */
main{padding-top:44px;position:relative;z-index:1;}

/* ============================================
   HERO SECTION
============================================ */
#accueil{
  min-height:100vh;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  padding:2rem;text-align:center;
}
.hero-grid-bg{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(138,43,226,0.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(138,43,226,0.07) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 30%,transparent 100%);
  animation:gridPan 20s linear infinite;
}
@keyframes gridPan{
  0%{background-position:0 0;}
  100%{background-position:60px 60px;}
}
.hero-eyebrow{
  font-family:var(--mono);
  font-size:clamp(0.65rem,2vw,0.8rem);
  color:var(--violet);letter-spacing:0.4em;
  text-transform:uppercase;margin-bottom:1.5rem;
  animation:fadeSlideUp 0.8s 0.2s both;
}
.hero-eyebrow::before{content:'> ';opacity:0.6;}
.hero-name{
  font-size:clamp(3rem,10vw,8rem);
  font-weight:900;line-height:0.95;
  letter-spacing:-0.03em;
  background:linear-gradient(135deg,#fff 0%,rgba(138,43,226,0.9) 50%,var(--cyan) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:fadeSlideUp 0.8s 0.4s both;
  position:relative;
}
.hero-name::after{
  content:attr(data-text);
  position:absolute;inset:0;
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  filter:blur(20px);opacity:0.4;
  z-index:-1;
}
.hero-role{
  font-family:var(--mono);
  font-size:clamp(0.75rem,2.5vw,1rem);
  color:var(--text-dim);margin-top:1rem;
  line-height:1.8;
  animation:fadeSlideUp 0.8s 0.6s both;
}
.hero-role .hl{color:var(--cyan);}
.hero-role .hl2{color:var(--violet);}
.hero-badges{
  display:flex;flex-wrap:wrap;gap:0.6rem;
  justify-content:center;margin-top:2rem;
  animation:fadeSlideUp 0.8s 0.8s both;
}
.badge{
  font-family:var(--mono);
  font-size:0.7rem;
  padding:0.4rem 0.9rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:4px;color:var(--text-dim);
  letter-spacing:0.1em;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;overflow:hidden;
}
.badge::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,var(--violet-dim),transparent);
  opacity:0;transition:opacity 0.3s;
}
.badge:hover{
  color:var(--violet);
  border-color:var(--violet);
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 8px 25px rgba(138,43,226,0.3);
}
.badge:hover::before{opacity:1;}
.hero-cta{
  margin-top:2.5rem;
  animation:fadeSlideUp 0.8s 1s both;
  display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
}
.btn-primary{
  font-family:var(--mono);font-size:0.78rem;
  padding:0.75rem 1.8rem;
  background:var(--violet);color:#fff;
  border:none;border-radius:4px;
  text-decoration:none;letter-spacing:0.1em;
  cursor:none;
  transition:all 0.3s;
  position:relative;overflow:hidden;
  box-shadow:0 0 20px rgba(138,43,226,0.4);
}
.btn-primary::before{
  content:'';position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  background:rgba(255,255,255,0.15);
  border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width 0.5s,height 0.5s;
}
.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 40px rgba(138,43,226,0.6),0 10px 30px rgba(138,43,226,0.3);
}
.btn-primary:hover::before{width:300px;height:300px;}
.btn-ghost{
  font-family:var(--mono);font-size:0.78rem;
  padding:0.75rem 1.8rem;
  background:transparent;
  color:var(--text-dim);
  border:1px solid var(--glass-border);
  border-radius:4px;text-decoration:none;
  letter-spacing:0.1em;cursor:none;
  transition:all 0.3s;
}
.btn-ghost:hover{
  color:var(--violet);
  border-color:var(--violet);
  box-shadow:0 0 20px rgba(138,43,226,0.2);
}
.scroll-hint{
  position:absolute;bottom:2rem;left:50%;
  transform:translateX(-50%);
  font-family:var(--mono);font-size:0.6rem;
  color:var(--text-dim);letter-spacing:0.2em;
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  animation:fadeSlideUp 1s 1.5s both;
}
.scroll-line{
  width:1px;height:40px;
  background:linear-gradient(to bottom,var(--violet),transparent);
  animation:scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{transform:scaleY(1);opacity:1;}
  50%{transform:scaleY(0.5);opacity:0.3;}
}
@keyframes fadeSlideUp{
  from{opacity:0;transform:translateY(30px);}
  to{opacity:1;transform:translateY(0);}
}

/* ============================================
   SECTION COMMONS
============================================ */
.section{
  padding:6rem 2rem;
  max-width:1200px;
  margin:0 auto;
  position:relative;z-index:1;
}
.section-header{
  margin-bottom:3.5rem;
}
.section-tag{
  font-family:var(--mono);
  font-size:0.7rem;letter-spacing:0.4em;
  color:var(--violet);text-transform:uppercase;
  display:block;margin-bottom:0.75rem;
}
.section-tag::before{content:'// ';}
.section-title{
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:900;letter-spacing:-0.02em;
  color:var(--text);line-height:1;
}
.section-title span{
  background:linear-gradient(135deg,var(--violet),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}

/* Reveal animation */
.reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1),
             transform 0.8s cubic-bezier(0.16,1,0.3,1);
}
.reveal.visible{opacity:1;transform:none;}
.reveal-delay-1{transition-delay:0.1s;}
.reveal-delay-2{transition-delay:0.2s;}
.reveal-delay-3{transition-delay:0.3s;}
.reveal-delay-4{transition-delay:0.4s;}
.reveal-delay-5{transition-delay:0.5s;}

/* ============================================
   PARCOURS - METRO TIMELINE
============================================ */
#parcours-inner{padding:0 1rem;}
.metro-line{
  position:relative;
  padding-left:3rem;
}
.metro-line::before{
  content:'';
  position:absolute;left:0.85rem;top:0;bottom:0;
  width:2px;
  background:linear-gradient(to bottom,
    transparent 0%,
    var(--violet) 10%,
    var(--violet) 90%,
    transparent 100%);
}
.metro-station{
  position:relative;
  margin-bottom:2.5rem;
  padding:1.5rem 1.5rem 1.5rem 2rem;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:8px;
  backdrop-filter:blur(10px);
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  overflow:hidden;
}
.metro-station::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(138,43,226,0.08),transparent);
  opacity:0;transition:opacity 0.3s;
}
.metro-station:hover{
  transform:translateX(8px);
  border-color:rgba(138,43,226,0.5);
  box-shadow:0 10px 40px rgba(138,43,226,0.2);
}
.metro-station:hover::before{opacity:1;}
.metro-dot{
  position:absolute;
  left:-2.65rem;
  top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--bg);
  border:2px solid var(--violet);
  box-shadow:0 0 10px var(--violet),0 0 20px var(--violet-glow);
  transition:all 0.3s;
  z-index:2;
}
.metro-station:hover .metro-dot{
  background:var(--violet);
  transform:translateY(-50%) scale(1.3);
}
.metro-date{
  font-family:var(--mono);
  font-size:0.65rem;color:var(--violet);
  letter-spacing:0.2em;margin-bottom:0.4rem;
}
.metro-title{
  font-size:1rem;font-weight:700;
  color:var(--text);margin-bottom:0.3rem;
}
.metro-sub{
  font-family:var(--mono);
  font-size:0.72rem;color:var(--cyan);
  margin-bottom:0.5rem;
}
.metro-desc{
  font-size:0.82rem;color:var(--text-dim);
  line-height:1.7;
}
.metro-badge{
  display:inline-block;margin-top:0.5rem;
  font-family:var(--mono);font-size:0.6rem;
  padding:0.2rem 0.6rem;
  border-radius:2px;
  border:1px solid rgba(138,43,226,0.3);
  color:var(--text-dim);
}
.metro-badge.mention{
  border-color:rgba(255,170,0,0.4);
  color:#ffaa00;
}

/* ============================================
   PROJETS - FILE EXPLORER
============================================ */
.file-explorer{
  background:rgba(15,13,26,0.9);
  border:1px solid var(--glass-border);
  border-radius:12px;
  overflow:hidden;
  backdrop-filter:blur(20px);
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(138,43,226,0.1);
}
.fe-titlebar{
  background:rgba(138,43,226,0.08);
  border-bottom:1px solid var(--glass-border);
  padding:0.75rem 1rem;
  display:flex;align-items:center;gap:0.6rem;
}
.fe-dot{width:10px;height:10px;border-radius:50%;}
.fe-dot.r{background:#ff5f57;}
.fe-dot.y{background:#ffbd2e;}
.fe-dot.g{background:#28c941;}
.fe-titlebar-name{
  margin-left:auto;margin-right:auto;
  font-family:var(--mono);font-size:0.7rem;
  color:var(--text-dim);letter-spacing:0.1em;
}
.fe-body{display:flex;min-height:500px;}
.fe-sidebar{
  width:180px;flex-shrink:0;
  border-right:1px solid var(--glass-border);
  padding:1rem 0;
  font-family:var(--mono);font-size:0.72rem;
}
.fe-sidebar-section{
  padding:0.3rem 1rem;
  color:var(--text-dim);
  font-size:0.6rem;letter-spacing:0.2em;
  text-transform:uppercase;margin-bottom:0.3rem;
}
.fe-filter{
  display:flex;align-items:center;gap:0.5rem;
  padding:0.45rem 1rem;
  color:var(--text-dim);cursor:none;
  transition:all 0.2s;border-left:2px solid transparent;
  position:relative;
}
.fe-filter::before{content:'📁 ';}
.fe-filter.active{
  color:var(--violet);
  background:var(--violet-dim);
  border-left-color:var(--violet);
}
.fe-filter.active::before{content:'📂 ';}
.fe-filter:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.fe-main{flex:1;padding:1.5rem;overflow:hidden;}
.fe-path{
  font-family:var(--mono);font-size:0.65rem;
  color:var(--text-dim);margin-bottom:1.2rem;
  padding-bottom:0.75rem;
  border-bottom:1px solid var(--glass-border);
}
.fe-path span{color:var(--violet);}
.projects-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1rem;
}
.project-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:8px;padding:1.2rem;
  cursor:none;
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;overflow:hidden;
}
.project-card::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(138,43,226,0.1),transparent);
  opacity:0;transition:opacity 0.3s;
}
.project-card.hidden{
  opacity:0;transform:scale(0.85) translateY(20px);
  pointer-events:none;position:absolute;
}
.project-card.visible{
  opacity:1;transform:none;
  pointer-events:all;position:relative;
}
.project-card:hover{
  transform:translateY(-6px) scale(1.02);
  border-color:rgba(138,43,226,0.5);
  box-shadow:0 15px 40px rgba(138,43,226,0.25);
}
.project-card:hover::before{opacity:1;}
.pc-icon{
  font-size:1.8rem;margin-bottom:0.8rem;
  display:block;
}
.pc-cat{
  font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.2em;color:var(--violet);
  text-transform:uppercase;margin-bottom:0.4rem;
}
.pc-title{
  font-size:0.95rem;font-weight:700;
  color:var(--text);margin-bottom:0.4rem;
}
.pc-desc{
  font-size:0.78rem;color:var(--text-dim);
  line-height:1.6;margin-bottom:0.8rem;
}
.pc-tags{display:flex;flex-wrap:wrap;gap:0.3rem;}
.pc-tag{
  font-family:var(--mono);font-size:0.58rem;
  padding:0.18rem 0.5rem;
  background:rgba(138,43,226,0.1);
  border:1px solid rgba(138,43,226,0.2);
  border-radius:2px;color:var(--text-dim);
}

/* Easter egg overlay */
.pc-easter{
  position:absolute;inset:0;
  background:rgba(11,9,20,0.97);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  opacity:0;transition:opacity 0.8s ease;
  pointer-events:none;border-radius:8px;
  z-index:5;
}
.pc-easter.show{opacity:1;pointer-events:all;}
.easter-trophy{font-size:3rem;animation:tropheeSpin 2s ease infinite;}
@keyframes tropheeSpin{
  0%,100%{transform:scale(1) rotate(-5deg);}
  50%{transform:scale(1.1) rotate(5deg);}
}
.easter-text{
  font-family:var(--mono);font-size:0.7rem;
  color:#ffd700;text-align:center;margin-top:0.5rem;
  letter-spacing:0.1em;
  animation:glowGold 1.5s ease-in-out infinite;
}
@keyframes glowGold{
  0%,100%{text-shadow:0 0 10px #ffd700;}
  50%{text-shadow:0 0 25px #ffd700,0 0 50px rgba(255,215,0,0.5);}
}

/* ============================================
   VEILLE TECH - TERMINAL FEED (FLUX REEL)
============================================ */
.terminal-wrap{
  background:rgba(5,4,10,0.95);
  border:1px solid var(--glass-border);
  border-radius:12px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(138,43,226,0.08);
}
.terminal-bar{
  background:rgba(138,43,226,0.08);
  border-bottom:1px solid var(--glass-border);
  padding:0.75rem 1rem;
  display:flex;align-items:center;gap:0.6rem;
}
.terminal-bar .fe-dot.r{background:#ff5f57;}
.terminal-bar .fe-dot.y{background:#ffbd2e;}
.terminal-bar .fe-dot.g{background:#28c941;}
.terminal-title{
  margin-left:0.5rem;
  font-family:var(--mono);font-size:0.7rem;
  color:var(--text-dim);
}
.terminal-title .blink{
  color:var(--green);
  animation:blink 1s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.terminal-status{
  margin-left:auto;
  font-family:var(--mono);font-size:0.62rem;
  color:var(--green);
  display:flex;align-items:center;gap:0.4rem;
}
.status-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--green);
  animation:statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse{
  0%,100%{opacity:1;box-shadow:0 0 6px var(--green);}
  50%{opacity:0.4;box-shadow:none;}
}
.terminal-body{padding:1.5rem;}
.feed-header{
  font-family:var(--mono);font-size:0.7rem;
  color:var(--violet);margin-bottom:1.2rem;
  padding-bottom:0.75rem;
  border-bottom:1px solid var(--glass-border);
}
.feed-header::before{content:'$ feed --live --sources=zataz,lebigdata ';color:var(--green);}
.rss-loading{
  font-family:var(--mono);font-size:0.75rem;
  color:var(--text-dim);text-align:center;
  padding:3rem;
}
.rss-loading .spinner{
  display:inline-block;
  width:24px;height:24px;
  border:2px solid var(--violet-dim);
  border-top-color:var(--violet);
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  margin-bottom:1rem;
}
@keyframes spin{to{transform:rotate(360deg);}}
#rss-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1rem;
}
.rss-card{
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:6px;padding:1rem;
  cursor:none;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;overflow:hidden;
  animation:cardSlideIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes cardSlideIn{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:none;}
}
.rss-card::before{
  content:'';position:absolute;
  left:0;top:0;bottom:0;width:2px;
  background:var(--violet);
  transform:scaleY(0);transform-origin:top;
  transition:transform 0.3s;
}
.rss-card:hover::before{transform:scaleY(1);}
.rss-card:hover{
  transform:translateY(-4px);
  border-color:rgba(138,43,226,0.4);
  box-shadow:0 10px 30px rgba(138,43,226,0.2);
}
.rss-source{
  font-family:var(--mono);font-size:0.58rem;
  letter-spacing:0.2em;
  padding:0.18rem 0.5rem;border-radius:2px;
  display:inline-block;margin-bottom:0.6rem;
  text-transform:uppercase;
}
.rss-source.zataz{
  background:rgba(255,56,96,0.12);
  border:1px solid rgba(255,56,96,0.3);
  color:var(--red);
}
.rss-source.lebigdata{
  background:rgba(0,245,255,0.08);
  border:1px solid rgba(0,245,255,0.25);
  color:var(--cyan);
}
.rss-title{
  font-size:0.82rem;font-weight:600;
  color:var(--text);margin-bottom:0.5rem;
  line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;
}
.rss-meta{
  display:flex;align-items:center;
  justify-content:space-between;margin-top:0.75rem;
}
.rss-date{
  font-family:var(--mono);font-size:0.6rem;
  color:var(--text-dim);
}
.rss-link{
  font-family:var(--mono);font-size:0.62rem;
  color:var(--violet);text-decoration:none;
  display:flex;align-items:center;gap:0.3rem;
  transition:color 0.2s;
  padding:0.2rem 0.5rem;
  border:1px solid rgba(138,43,226,0.3);
  border-radius:3px;
}
.rss-link:hover{
  color:var(--cyan);
  border-color:var(--cyan);
}
.rss-error{
  font-family:var(--mono);font-size:0.75rem;
  color:var(--red);text-align:center;padding:2rem;
}
.feed-refresh{
  font-family:var(--mono);font-size:0.65rem;
  color:var(--text-dim);margin-top:1rem;
  text-align:right;
}

/* ============================================
   CONTACT SECTION
============================================ */
#contact{
  padding:6rem 2rem;
  position:relative;z-index:1;
}
.contact-inner{
  max-width:700px;margin:0 auto;
  text-align:center;
}
.contact-glitch{
  font-size:clamp(2rem,6vw,4rem);
  font-weight:900;letter-spacing:-0.02em;
  color:var(--text);
  position:relative;margin-bottom:1rem;
}
.contact-glitch::before,
.contact-glitch::after{
  content:attr(data-text);
  position:absolute;inset:0;
}
.contact-glitch::before{
  color:var(--cyan);clip-path:polygon(0 0,100% 0,100% 35%,0 35%);
  transform:translateX(-2px);opacity:0;
  animation:glitchTop 4s infinite;
}
.contact-glitch::after{
  color:var(--red);clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%);
  transform:translateX(2px);opacity:0;
  animation:glitchBot 4s infinite;
}
@keyframes glitchTop{
  0%,90%,100%{opacity:0;transform:translateX(0);}
  91%{opacity:1;transform:translateX(-4px);}
  93%{opacity:0;transform:translateX(4px);}
  95%{opacity:1;transform:translateX(-2px);}
  97%{opacity:0;}
}
@keyframes glitchBot{
  0%,90%,100%{opacity:0;transform:translateX(0);}
  92%{opacity:1;transform:translateX(4px);}
  94%{opacity:0;transform:translateX(-4px);}
  96%{opacity:1;transform:translateX(2px);}
  98%{opacity:0;}
}
.contact-sub{
  font-size:1rem;color:var(--text-dim);
  line-height:1.8;margin-bottom:2.5rem;
  font-family:var(--mono);font-size:0.85rem;
}
.contact-email-btn{
  display:inline-flex;align-items:center;gap:0.75rem;
  font-family:var(--mono);font-size:0.9rem;
  padding:1rem 2.5rem;
  background:transparent;
  color:var(--text);
  border:1px solid var(--glass-border);
  border-radius:6px;
  text-decoration:none;cursor:none;
  position:relative;overflow:hidden;
  transition:all 0.4s;
  letter-spacing:0.05em;
}
.contact-email-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(138,43,226,0.2),rgba(0,245,255,0.1));
  opacity:0;transition:opacity 0.4s;
}
.contact-email-btn:hover{
  border-color:var(--violet);
  color:var(--violet);
  box-shadow:0 0 30px rgba(138,43,226,0.3),0 10px 40px rgba(138,43,226,0.2);
  transform:translateY(-3px);
}
.contact-email-btn:hover::before{opacity:1;}
.email-icon{font-size:1.1rem;}

/* ============================================
   FOOTER
============================================ */
footer{
  border-top:1px solid var(--glass-border);
  padding:2rem;
  text-align:center;
  font-family:var(--mono);
  font-size:0.68rem;
  color:var(--text-dim);
  position:relative;z-index:1;
}
footer .footer-logo{
  color:var(--violet);font-weight:700;
  letter-spacing:0.2em;
}
footer .footer-copy{margin-top:0.5rem;opacity:0.5;}

#scroll-progress-bar {
  position: fixed;
  top: 44px; 
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  box-shadow:
    0 0 6px var(--violet),
    0 0 12px var(--violet-glow),
    0 0 24px rgba(0, 245, 255, 0.3);
  z-index: 1001;
  transition: width 0.08s linear;
  border-radius: 0 2px 2px 0;
}

.hero-name-cursor::after {
  content: '|';
  color: var(--violet);
  animation: cursorBlink 0.7s step-end infinite;
  margin-left: 2px;
  font-weight: 300;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.hero-lastname {
  position: relative;
  display: inline-block;
}

.hero-lastname::before,
.hero-lastname::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #fff 0%, rgba(138,43,226,0.9) 50%, var(--cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  pointer-events: none;
}

.hero-lastname::before {
  color: var(--cyan);
  -webkit-text-fill-color: var(--cyan);
  background: none;
  clip-path: polygon(0 0, 100% 0, 100% 40%, 0 40%);
  transform: translateX(-3px);
}

.hero-lastname::after {
  color: #ff00c8; /* magenta */
  -webkit-text-fill-color: #ff00c8;
  background: none;
  clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%);
  transform: translateX(3px);
}

.hero-lastname.glitch-active::before,
.hero-lastname.glitch-active::after {
  animation: heroGlitchLayers 0.45s steps(1) forwards;
}

@keyframes heroGlitchLayers {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; transform: translateX(-4px) skewX(-2deg); }
  20%  { opacity: 0; }
  30%  { opacity: 1; transform: translateX(4px)  skewX(2deg); }
  45%  { opacity: 1; transform: translateX(-2px); }
  60%  { opacity: 0; transform: translateX(2px); }
  75%  { opacity: 1; transform: translateX(-1px); }
  90%  { opacity: 0; }
  100% { opacity: 0; transform: translateX(0); }
}

.project-card,
.metro-station {
  transition:
    transform 0.12s ease-out,
    box-shadow 0.12s ease-out,
    border-color 0.3s;
  will-change: transform;
  transform-style: preserve-3d;
}

.project-card:hover,
.metro-station:hover {
  transform: none; 
}

.project-card.tilt-active {
  border-color: rgba(138, 43, 226, 0.55);
}

.metro-station.tilt-active {
  border-color: rgba(138, 43, 226, 0.5);
}

/* ============================================
   NOUVEAUX AJOUTS : CV & PARCOURS GRID
============================================ */

/* Boutons d'en haut (CV / Compétences) */
.btn-cv {
  font-family: var(--mono); 
  font-size: 0.78rem;
  padding: 0.75rem 1.8rem;
  background: rgba(0, 245, 255, 0.05);
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  text-decoration: none; 
  letter-spacing: 0.1em;
  cursor: none; 
  transition: all 0.3s;
  box-shadow: 0 0 15px rgba(0, 245, 255, 0.1);
}
.btn-cv:hover {
  background: rgba(0, 245, 255, 0.15);
  box-shadow: 0 0 25px rgba(0, 245, 255, 0.4);
  transform: translateY(-2px);
}

.btn-skills {
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.75rem 1.8rem;
  background: rgba(0, 255, 136, 0.05); 
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.1em;
  cursor: none;
  transition: all 0.3s;
  box-shadow: 0 0 15px rgba(0, 255, 136, 0.1);
}

.btn-skills:hover {
  background: rgba(0, 255, 136, 0.15);
  box-shadow: 0 0 25px rgba(0, 255, 136, 0.4);
  transform: translateY(-2px);
}

/* Grille Parcours (Formations / Expériences) */
.parcours-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}
.parcours-col-title {
  font-family: var(--mono);
  font-size: 1.1rem;
  color: var(--cyan);
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--glass-border);
  letter-spacing: 0.05em;
}

@media(max-width: 850px) {
  .parcours-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ============================================
   STYLE DES TERMINAUX (SUJETS FIXES & SCROLL)
============================================ */

/* Hauteur fixe et scroll pour l'intérieur des terminaux pour qu'ils s'alignent bien */
.terminal-scrollable {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
}

/* Scrollbar personnalisée pour les terminaux */
.terminal-scrollable::-webkit-scrollbar { width: 4px; }
.terminal-scrollable::-webkit-scrollbar-track { background: transparent; }
.terminal-scrollable::-webkit-scrollbar-thumb { background: var(--violet-dim); border-radius: 2px; }

/* Style des encadrés pour tes sujets fixes */
.static-topic {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: rgba(138,43,226,0.05);
  border: 1px solid rgba(138,43,226,0.2);
  border-radius: 6px;
  transition: all 0.3s;
}
.static-topic:hover {
  background: rgba(138,43,226,0.1);
  border-color: var(--violet);
  transform: translateX(5px);
}

.topic-tag {
  font-family: var(--mono);
  font-size: 0.65rem;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  font-weight: bold;
  display: inline-block;
  margin-bottom: 0.6rem;
  letter-spacing: 0.1em;
}

.topic-tag.cyber { background: rgba(0, 245, 255, 0.1); color: var(--cyan); border: 1px solid var(--cyan-glow); }
.topic-tag.cyberdefense { background: rgba(255, 56, 96, 0.1); color: var(--red); border: 1px solid rgba(255, 56, 96, 0.3); }
.topic-tag.tech { background: rgba(0, 255, 136, 0.1); color: var(--green); border: 1px solid rgba(0, 255, 136, 0.3); }

.topic-title {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
}

/* RESPONSIVE DESKTOP & MOBILE */
@media(max-width:768px){
  .os-bar-nav{display:none;}
  .fe-sidebar{display:none;}
  .fe-body{flex-direction:column;}
  .fe-filters-mobile{
    display:flex;gap:0.5rem;
    flex-wrap:wrap;padding:1rem;
    border-bottom:1px solid var(--glass-border);
  }
  .metro-station{padding:1rem 1rem 1rem 1.5rem;}
}
.fe-filters-mobile{display:none;}
@media(max-width:768px){.fe-filters-mobile{display:flex;}}