/* =============== BASE =============== */
:root{
  --purple:#a855f7;
  --pink:#ec4899;
  --cyan:#22d3ee;
}
html{scroll-behavior:smooth; overflow-x:hidden; max-width:100vw;}
body{background:#000; overflow-x:hidden; max-width:100vw;}

/* Compense la navbar fixe lors d'un scroll vers une ancre (#nav-link, diaporama exit, etc.) */
section[id]{ scroll-margin-top:96px; }

::selection{background:var(--pink); color:#000;}

/* Scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#0a0a0a;}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--purple),var(--pink)); border-radius:10px;}

/* =============== TEXT / GRADIENTS =============== */
.gradient-text{
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink),var(--purple),var(--cyan));
  background-size:300% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientShift 6s ease infinite;
}
.gradient-text-cyan{
  background:linear-gradient(90deg,var(--cyan),var(--purple));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes gradientShift{ 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }

.section-tag{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--cyan); letter-spacing:.2em; text-transform:uppercase; font-size:.75rem; font-weight:600; margin-bottom:.5rem;
}
.section-tag::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:pulseDot 1.6s infinite;
}
.section-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.8rem,4vw,2.8rem); }
.section-head{ text-align:center; max-width:640px; margin:0 auto; }

/* =============== NAVBAR =============== */
#navbar{ background:rgba(0,0,0,0); backdrop-filter: blur(0px); }
#navbar.scrolled{ background:rgba(5,5,10,.75); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,.08); }
.nav-link{ position:relative; transition:.25s; }
.nav-link:hover{ color:#fff; }
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-6px; width:0; height:2px;
  background:linear-gradient(90deg,var(--purple),var(--pink)); transition:.3s;
}
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:#fff; }
.nav-link.active::after{ width:100%; }
.mobile-link.active{ color:var(--cyan); }

.mobile-menu{
  position:fixed; top:0; right:-100%; width:75%; max-width:320px; height:100vh; z-index:60;
  background:rgba(8,8,14,.98); backdrop-filter:blur(20px); padding:6rem 2rem; transition:.35s ease;
  border-left:1px solid rgba(255,255,255,.08); display:flex; flex-direction:column; gap:1.5rem;
}
.mobile-menu.open{ right:0; }
.mobile-link{ font-size:1.1rem; color:#e5e7eb; }

/* =============== BUTTONS =============== */
.btn-neon{
  display:inline-flex; align-items:center; padding:.85rem 1.8rem; border-radius:999px; font-weight:600; font-size:.9rem;
  background:linear-gradient(90deg,var(--purple),var(--pink)); color:#fff;
  box-shadow:0 0 25px rgba(168,85,247,.45); transition:.3s; position:relative; overflow:hidden;
}
.btn-neon:hover{ transform:translateY(-3px); box-shadow:0 0 40px rgba(236,72,153,.65); }
.btn-neon-sm{
  padding:.55rem 1.4rem; border-radius:999px; font-size:.85rem; font-weight:600;
  background:linear-gradient(90deg,var(--purple),var(--pink)); box-shadow:0 0 18px rgba(168,85,247,.4); transition:.3s;
  position:relative; overflow:hidden;
}
.btn-neon-sm:hover{ box-shadow:0 0 28px rgba(236,72,153,.6); transform:translateY(-2px); }
.btn-outline{
  display:inline-flex; align-items:center; padding:.85rem 1.8rem; border-radius:999px; font-weight:600; font-size:.9rem;
  border:1px solid rgba(255,255,255,.25); color:#fff; transition:.3s; position:relative; overflow:hidden;
}
.btn-outline:hover{ border-color:var(--pink); background:rgba(236,72,153,.08); transform:translateY(-3px); }

/* Shine sweep effect on hover for CTA buttons */
.btn-neon::before, .btn-neon-sm::before, .btn-outline::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-20deg); transition:left .6s ease;
}
.btn-neon:hover::before, .btn-neon-sm:hover::before, .btn-outline:hover::before{ left:130%; }

/* =============== HERO =============== */
.tag-pill{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; padding:.4rem .9rem; border-radius:999px;
  border:1px solid rgba(34,211,238,.35); color:#a5f3fc; background:rgba(34,211,238,.06);
}
.tag-pill .dot{ width:7px; height:7px; border-radius:50%; background:#22d3ee; box-shadow:0 0 8px #22d3ee; animation:pulseDot 1.6s infinite; }
@keyframes pulseDot{0%,100%{opacity:1;} 50%{opacity:.3;}}

.typed-cursor{ color:var(--cyan); animation:blink 1s infinite; }
@keyframes blink{50%{opacity:0;}}

.hero-blob{
  position:absolute; width:420px; height:420px; border-radius:50%;
  background:radial-gradient(circle, rgba(168,85,247,.45), rgba(236,72,153,.25) 45%, transparent 70%);
  filter:blur(40px); animation:blobMove 8s ease-in-out infinite alternate; z-index:0;
}
@keyframes blobMove{ 0%{transform:translate(-10px,-10px) scale(1);} 100%{transform:translate(15px,20px) scale(1.1);} }

.avatar-3d-wrap{ position:relative; z-index:1; width:min(420px,80vw); }
.avatar-3d{ width:100%; filter:drop-shadow(0 20px 40px rgba(168,85,247,.35)); }
.floaty{ animation:floaty 4s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{transform:translateY(0px);} 50%{transform:translateY(-18px);} }

.float-icon{
  position:absolute; width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:rgba(15,15,25,.6); border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px); font-size:1.3rem; box-shadow:0 8px 24px rgba(0,0,0,.5);
  animation:iconFloat 5s ease-in-out infinite;
}
.fi-1{ top:5%; left:-8%; color:var(--cyan); animation-delay:0s; }
.fi-2{ top:65%; left:-12%; color:var(--pink); animation-delay:1s; }
.fi-3{ top:80%; left:60%; color:var(--purple); animation-delay:2s; }
.fi-4{ top:0%; left:70%; color:var(--pink); animation-delay:1.5s; }
.fi-5{ top:40%; left:100%; color:var(--cyan); animation-delay:.7s; }
@keyframes iconFloat{ 0%,100%{transform:translateY(0) rotate(0deg);} 50%{transform:translateY(-14px) rotate(8deg);} }

.scroll-down{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:5;
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.2);
  align-items:center; justify-content:center; color:#9ca3af; animation:bounce 2s infinite;
}
@keyframes bounce{ 0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,8px);} }

/* =============== GLASS CARD =============== */
.glass-card{
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:1.25rem; backdrop-filter:blur(10px);
  transition:.35s;
}
.glass-card:hover{ border-color:rgba(168,85,247,.4); }

.info-item{ display:flex; align-items:flex-start; gap:.6rem; font-size:.88rem; color:#d1d5db; }
.info-item i{ margin-top:.2rem; flex-shrink:0; }

/* =============== LANG CARDS =============== */
.lang-card{
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:1rem; padding:1.3rem; transition:.3s;
}
.lang-card:hover{ transform:translateY(-6px); border-color:rgba(236,72,153,.4); box-shadow:0 12px 30px rgba(168,85,247,.15); }
.bar{ width:100%; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.bar span{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink)); border-radius:999px; transition:width 1.4s cubic-bezier(.16,1,.3,1); }

/* =============== SKILLS =============== */
.skills-flex{ display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem; }
.skill-card{
  flex:1 1 300px; max-width:360px;
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); border-radius:1.25rem; padding:1.8rem; transition:.35s;
}
.skill-card{ position:relative; }
.skill-card::before{
  content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; z-index:1; pointer-events:none;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
  transform:skewX(-20deg); transition:left .7s ease;
}
.skill-card:hover::before{ left:130%; }
.skill-card:hover{ transform:translateY(-8px); border-color:rgba(168,85,247,.45); box-shadow:0 16px 40px rgba(168,85,247,.2); }
.skill-icon{
  width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:1rem;
  background:linear-gradient(135deg, rgba(168,85,247,.25), rgba(236,72,153,.2)); color:#f0abfc; font-size:1.4rem;
  border:1px solid rgba(255,255,255,.1); transition:transform .4s ease;
}
.skill-card:hover .skill-icon{ transform:scale(1.12) rotate(-6deg); }
.skill-level{ display:flex; align-items:center; gap:.7rem; }
.skill-level-bar{ flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.skill-level-bar span{
  display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  transition:width 1.4s cubic-bezier(.16,1,.3,1);
}
.skill-level-pct{ font-size:.72rem; font-weight:700; color:var(--cyan); min-width:2.6ch; text-align:right; }

/* =============== TIMELINE =============== */
.timeline{ position:relative; max-width:900px; margin:0 auto; }
.timeline::before{
  content:''; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--cyan),var(--purple),var(--pink));
  opacity:.5;
}
.timeline-item{ position:relative; width:100%; margin-bottom:3rem; display:flex; }
.timeline-item.left{ justify-content:flex-start; }
.timeline-item.right{ justify-content:flex-end; }
.timeline-card{ width:calc(50% - 2.5rem); padding:1.5rem; transition:.35s; }
.timeline-card:hover{ transform:translateY(-4px); border-color:rgba(236,72,153,.4); box-shadow:0 16px 36px rgba(168,85,247,.2); }
.timeline-dot{
  position:absolute; left:50%; top:1.5rem; transform:translateX(-50%); width:16px; height:16px; border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--pink)); box-shadow:0 0 0 4px rgba(0,0,0,1), 0 0 16px rgba(236,72,153,.7);
  z-index:2;
}
.timeline-dot.pulse::after{
  content:''; position:absolute; inset:-6px; border-radius:50%; border:2px solid var(--cyan); animation:ripple 1.8s infinite;
}
@keyframes ripple{ 0%{transform:scale(.6); opacity:1;} 100%{transform:scale(1.8); opacity:0;} }
.timeline-date{ font-size:.75rem; color:var(--cyan); font-weight:600; letter-spacing:.05em; }

@media (max-width: 768px){
  .timeline::before{ left:12px; }
  .timeline-item.left, .timeline-item.right{ justify-content:flex-start; padding-left:2.5rem; }
  .timeline-card{ width:100%; }
  .timeline-dot{ left:12px; }
}

/* =============== EDUCATION =============== */
.edu-item{ padding:1.2rem 1.4rem; transition:.3s; }
.edu-item:hover{ transform:translateX(6px); border-color:rgba(34,211,238,.4); box-shadow:0 10px 26px rgba(34,211,238,.15); }
.year-pill{
  font-size:.72rem; font-weight:700; padding:.25rem .7rem; border-radius:999px; white-space:nowrap;
  background:rgba(34,211,238,.12); color:#67e8f9; border:1px solid rgba(34,211,238,.3);
}

/* =============== CONTACT =============== */
.contact-row{ display:flex; align-items:center; gap:.9rem; color:#e5e7eb; transition:.25s; }
.contact-row i{
  width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(168,85,247,.25), rgba(236,72,153,.2)); color:#f0abfc; flex-shrink:0;
}
.contact-row:hover{ color:var(--cyan); transform:translateX(4px); }

.form-input{
  width:100%; padding:.85rem 1rem; border-radius:.75rem; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12); color:#fff; outline:none; transition:.25s; font-family:'Sora',sans-serif;
}
.form-input::placeholder{ color:#6b7280; }
.form-input:focus{ border-color:var(--purple); box-shadow:0 0 0 3px rgba(168,85,247,.2); }

/* =============== BACK TO TOP =============== */
.back-to-top{
  position:fixed; bottom:24px; right:24px; width:46px; height:46px; border-radius:50%; z-index:40;
  display:flex; align-items:center; justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 8px 24px rgba(168,85,247,.5);
  opacity:0; pointer-events:none; transition:.3s;
}
.back-to-top.show{ opacity:1; pointer-events:auto; }

/* =============== LOADER (moncy.dev style) =============== */
.loader-screen{
  position:fixed; inset:0; background:#000; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.loader-pill{
  display:flex; align-items:center; gap:1.2rem; padding:1rem 1.8rem; border-radius:999px;
  background:rgba(15,15,20,.9); border:1px solid rgba(255,255,255,.1);
  box-shadow:0 0 0 1px rgba(168,85,247,.3), 0 0 40px rgba(168,85,247,.35);
  position:relative; overflow:hidden;
}
.loader-pill::before{
  content:''; position:absolute; inset:-2px; border-radius:999px; z-index:-1;
  background:conic-gradient(from 0deg, var(--purple), var(--pink), var(--cyan), var(--purple));
  animation:loaderSpin 1.4s linear infinite;
}
.loader-pill::after{ content:''; position:absolute; inset:2px; border-radius:999px; background:#0a0a0d; z-index:-1; }
@keyframes loaderSpin{ to{ transform:rotate(360deg); } }
.loader-label{ font-family:'Space Grotesk',sans-serif; font-weight:600; letter-spacing:.05em; text-transform:uppercase; font-size:.8rem; color:#e5e7eb; }
.loader-percent{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:.95rem; color:var(--cyan); min-width:3ch; text-align:right; }

/* legacy ring (unused now but kept for safety) */
.loader-ring{
  width:60px; height:60px; border-radius:50%; border:4px solid rgba(255,255,255,.08);
  border-top-color:var(--pink); border-right-color:var(--purple); animation:spin 0.9s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =============== SCROLL PROGRESS BAR =============== */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:70;
  background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
  box-shadow:0 0 12px rgba(236,72,153,.6); transition:width .1s linear;
}

/* =============== CUSTOM CURSOR (desktop) =============== */
.cursor-dot{
  position:fixed; top:0; left:0; width:8px; height:8px; border-radius:50%; background:var(--cyan);
  pointer-events:none; z-index:9998; transform:translate(-50%,-50%); transition:opacity .2s;
  box-shadow:0 0 8px var(--cyan); opacity:0;
}
.cursor-ring{
  position:fixed; top:0; left:0; width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.5);
  pointer-events:none; z-index:9997; transform:translate(-50%,-50%); transition:width .25s,height .25s,opacity .2s,border-color .25s,background .25s;
  opacity:0;
}
.cursor-ring.hover{ width:64px; height:64px; border-color:var(--pink); background:rgba(236,72,153,.08); }
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }

/* =============== CURSOR GLOW =============== */
.cursor-glow{
  position:fixed; top:0; left:0; width:380px; height:380px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(168,85,247,.12), transparent 70%);
  transform:translate(-50%,-50%); transition:opacity .3s; opacity:0; will-change:transform;
}

/* =============== TILT (3D hover) =============== */
.tilt-el{ transform-style:preserve-3d; will-change:transform; transition:transform .15s ease-out; }

/* =============== MAGNETIC BUTTONS =============== */
.magnetic-btn{ display:inline-flex; will-change:transform; transition:transform .2s ease-out; }
.magnetic-btn span{ display:inline-flex; align-items:center; pointer-events:none; }

/* =============== KINETIC MARQUEE =============== */
.marquee-wrap{
  width:100%; overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; white-space:nowrap; width:max-content;
  font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(1.1rem,2.6vw,1.7rem);
  letter-spacing:.03em; color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.35);
  animation:marqueeScroll 26s linear infinite;
}
.marquee-track span{ display:inline-flex; align-items:center; padding:0 1rem; flex-shrink:0; }
@keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

/* =============== REVEAL TITLE (split text mask) =============== */
.reveal-title{ overflow:hidden; display:inline-block; }
.reveal-title .rt-line{
  display:inline-block; transform:translateY(110%); opacity:0;
  transition:transform .7s cubic-bezier(.16,1,.3,1), opacity .7s ease;
}
.reveal-title.rt-animate .rt-line{ transform:translateY(0); opacity:1; }

/* =============== AMBIENT SECTION GLOWS (continuité visuelle premium) =============== */
#skills, #projects, #experience, #contact, #education, #why{ position:relative; overflow:hidden; }
#skills::before, #projects::before, #experience::before, #contact::before, #education::before, #why::before{
  content:''; position:absolute; width:460px; height:460px; border-radius:50%; z-index:-1;
  filter:blur(70px); pointer-events:none; animation:blobMove 10s ease-in-out infinite alternate;
}
#why::before{ top:-10%; left:-10%; background:radial-gradient(circle, rgba(34,211,238,.16), transparent 70%); }
#skills::before{ top:-5%; right:-8%; background:radial-gradient(circle, rgba(168,85,247,.16), transparent 70%); }
#projects::before{ bottom:-10%; left:-8%; background:radial-gradient(circle, rgba(236,72,153,.14), transparent 70%); animation-delay:1.5s; }
#experience::before{ top:20%; right:-10%; background:radial-gradient(circle, rgba(34,211,238,.14), transparent 70%); animation-delay:.8s; }
#education::before{ bottom:-8%; right:-8%; background:radial-gradient(circle, rgba(168,85,247,.14), transparent 70%); animation-delay:2s; }
#contact::before{ top:-8%; left:50%; transform:translateX(-50%); background:radial-gradient(circle, rgba(236,72,153,.16), transparent 70%); }

/* =============== WHY CHOOSE ME =============== */
.why-card{
  text-align:center; padding:2rem 1.5rem; border-radius:1.25rem; transition:.35s;
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
}
.why-card:hover{ transform:translateY(-8px); border-color:rgba(34,211,238,.4); box-shadow:0 16px 40px rgba(34,211,238,.18); }
.why-icon{
  width:60px; height:60px; margin:0 auto 1.1rem; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(168,85,247,.3), rgba(34,211,238,.2)); color:#67e8f9; font-size:1.5rem;
  border:1px solid rgba(255,255,255,.12); transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.why-card:hover .why-icon{ transform:rotate(360deg) scale(1.1); }

/* =============== STACK PILLS =============== */
.stack-grid{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }
.stack-pill{
  display:inline-flex; align-items:center; gap:.6rem; padding:.7rem 1.2rem; border-radius:999px; font-size:.85rem; font-weight:500;
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); color:#e5e7eb; transition:.3s;
}
.stack-pill i{ color:var(--cyan); font-size:1rem; transition:transform .4s ease; }
.stack-pill:hover{ transform:translateY(-4px); border-color:rgba(236,72,153,.4); box-shadow:0 10px 26px rgba(168,85,247,.2); }
.stack-pill:hover i{ transform:rotate(18deg) scale(1.15); }

/* =============== PROJECTS =============== */
.project-card{
  display:block; border-radius:1.25rem; overflow:hidden;
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08); transition:.35s; text-decoration:none;
}
.project-card:hover{
  transform:translateY(-8px); border-color:rgba(34,211,238,.45);
  box-shadow:0 20px 45px rgba(168,85,247,.25);
}
.project-img-wrap{ position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; background:#0a0a0f; }
.project-img-wrap img{
  width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease;
}
.project-card:hover .project-img-wrap img{ transform:scale(1.08); }
.project-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(5,5,10,.1), rgba(5,5,10,.9));
  opacity:0; transition:.3s;
}
.project-card:hover .project-overlay{ opacity:1; }
.project-overlay span{
  display:inline-flex; align-items:center; padding:.6rem 1.3rem; border-radius:999px; font-size:.85rem; font-weight:600;
  color:#fff; background:linear-gradient(90deg,var(--purple),var(--pink));
  box-shadow:0 0 22px rgba(168,85,247,.55); transform:translateY(10px); transition:.3s;
}
.project-card:hover .project-overlay span{ transform:translateY(0); }
.tech-pill{
  font-size:.72rem; font-weight:600; padding:.3rem .75rem; border-radius:999px;
  background:rgba(34,211,238,.1); color:#67e8f9; border:1px solid rgba(34,211,238,.25);
}

/* =============== DESIGN GRAPHIQUE — FILTRES =============== */
.filter-pill{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.3rem; border-radius:999px;
  font-size:.82rem; font-weight:600; color:#cbd5e1; cursor:pointer;
  background:linear-gradient(145deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); transition:.3s;
}
.filter-pill:hover{ transform:translateY(-3px); border-color:rgba(34,211,238,.35); color:#fff; }
.filter-pill.active{
  color:#fff; border-color:transparent;
  background:linear-gradient(90deg,var(--purple),var(--pink));
  box-shadow:0 8px 24px rgba(168,85,247,.4);
}

/* =============== DESIGN GRAPHIQUE — MASONRY GALLERY =============== */
.masonry-grid{
  column-count:1; column-gap:1.25rem;
}
@media (min-width:640px){ .masonry-grid{ column-count:2; } }
@media (min-width:1024px){ .masonry-grid{ column-count:3; } }
.masonry-item{
  break-inside:avoid; margin-bottom:1.25rem; position:relative; border-radius:1rem; overflow:hidden;
  background:#0a0a0f; border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:border-color .3s, box-shadow .3s;
}
.masonry-item:hover{ border-color:rgba(236,72,153,.4); box-shadow:0 16px 36px rgba(168,85,247,.22); }
.masonry-item img{ width:100%; display:block; transition:transform .5s ease; }
.masonry-item:hover img{ transform:scale(1.06); }
.masonry-item.filtered-out{ display:none; }
.design-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.4rem; padding:1rem;
  background:linear-gradient(180deg, rgba(5,5,10,.15), rgba(5,5,10,.92));
  opacity:0; transition:.3s;
}
.masonry-item:hover .design-overlay{ opacity:1; }
.design-overlay p{ color:#fff; transform:translateY(10px); transition:transform .3s; }
.design-overlay span{ transform:translateY(10px); transition:transform .3s .05s; }
.masonry-item:hover .design-overlay p,
.masonry-item:hover .design-overlay span{ transform:translateY(0); }

/* =============== LIGHTBOX =============== */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:1.2rem;
  background:rgba(5,5,10,.95); backdrop-filter:blur(6px);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s;
  padding:2rem 1.5rem;
}
.lightbox.open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox img{
  max-width:min(880px, 90vw); max-height:70vh; border-radius:1rem; object-fit:contain;
  box-shadow:0 25px 60px rgba(168,85,247,.35); border:1px solid rgba(255,255,255,.1);
}
.lightbox-caption{ text-align:center; max-width:640px; }
.lightbox-caption p:first-child{ color:#fff; font-size:1.05rem; margin-bottom:.35rem; }
.lightbox-close{
  position:absolute; top:1.5rem; right:1.5rem; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.lightbox-close:hover{ background:rgba(236,72,153,.3); border-color:rgba(236,72,153,.5); transform:rotate(90deg); }
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; transition:.3s;
}
.lightbox-nav:hover{ background:linear-gradient(90deg,var(--purple),var(--pink)); border-color:transparent; box-shadow:0 8px 24px rgba(168,85,247,.45); }
.lightbox-prev{ left:1.5rem; }
.lightbox-next{ right:1.5rem; }
@media (max-width:640px){
  .lightbox-nav{ width:42px; height:42px; font-size:1rem; }
  .lightbox-prev{ left:.6rem; }
  .lightbox-next{ right:.6rem; }
}

/* Fade-in defaults for AOS fallback */
[data-aos]{ opacity:0; transition-property:opacity, transform; }
[data-aos].aos-animate{ opacity:1; }

/* =============== MODE DIAPORAMA — toggle button =============== */
.btn-slideshow{
  display:inline-flex; align-items:center; padding:.55rem 1.3rem; border-radius:999px; font-size:.85rem; font-weight:600;
  color:#e5e7eb; border:1px solid rgba(34,211,238,.35); background:rgba(34,211,238,.06); transition:.3s;
  position:relative; overflow:hidden;
}
.btn-slideshow:hover{ border-color:var(--cyan); color:#fff; background:rgba(34,211,238,.15); box-shadow:0 0 22px rgba(34,211,238,.35); transform:translateY(-2px); }
.btn-slideshow i{ transition:.3s; }

/* =============== MODE DIAPORAMA — full experience =============== */
body.diaporama-active{ overflow:hidden; height:100vh; }
body.diaporama-active #navbar,
body.diaporama-active .back-to-top,
body.diaporama-active .scroll-down,
body.diaporama-active #scroll-progress,
body.diaporama-active footer{ opacity:0; pointer-events:none; }
body.diaporama-active footer{ position:fixed; visibility:hidden; }

body.diaporama-active section{
  position:fixed; inset:0; width:100%; height:100vh; overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.04);
  transition:opacity .7s cubic-bezier(.4,0,.2,1), transform .9s cubic-bezier(.16,1,.3,1), visibility .7s;
  z-index:1;
}
body.diaporama-active section.dp-current{
  opacity:1; visibility:visible; pointer-events:auto; transform:scale(1); z-index:2;
}
body.diaporama-active section.dp-current .max-w-6xl,
body.diaporama-active section.dp-current .max-w-5xl{ margin-top:auto; margin-bottom:auto; }
/* Les sections #skills/#projects/etc. ont position:relative (glow ambiant) via un sélecteur ID,
   plus spécifique qu'un simple "section" — on force le fixed avec !important pour ne pas casser
   le plein-écran du diaporama. */
body.diaporama-active section{ position:fixed !important; }
/* Hide sections without a nav id (design lightbox etc stay untouched) */
body.diaporama-active #lightbox{ z-index:250; }

/* Force-reveal AOS / reveal-title content inside the active slide,
   since AOS only triggers on real scroll and diaporama jumps sections directly.
   (bars/[data-level] are forced via JS width; this handles opacity/transform reveal) */
body.diaporama-active section.dp-current [data-aos]{
  opacity:1 !important; transform:none !important;
}
body.diaporama-active section.dp-current .reveal-title .rt-line{
  transform:translateY(0) !important; opacity:1 !important;
}

/* Control bar */
.diaporama-bar{
  position:fixed; left:50%; bottom:-100px; transform:translateX(-50%);
  display:flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem; border-radius:999px; z-index:300;
  background:rgba(8,8,14,.9); backdrop-filter:blur(18px); border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 50px rgba(0,0,0,.6); transition:bottom .5s cubic-bezier(.16,1,.3,1), opacity .3s;
  opacity:0; pointer-events:none;
}
body.diaporama-active .diaporama-bar{ bottom:28px; opacity:1; pointer-events:auto; }
.dp-btn{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:.25s; flex-shrink:0;
}
.dp-btn:hover{ background:rgba(168,85,247,.25); border-color:rgba(168,85,247,.5); transform:translateY(-2px); }
.dp-btn-main{ background:linear-gradient(135deg,var(--purple),var(--pink)); box-shadow:0 0 20px rgba(168,85,247,.5); }
.dp-btn-main:hover{ box-shadow:0 0 28px rgba(236,72,153,.7); }
.dp-exit:hover{ background:rgba(236,72,153,.3); border-color:rgba(236,72,153,.55); transform:rotate(90deg); }
.dp-dots{ display:flex; align-items:center; gap:.4rem; padding:0 .3rem; }
.dp-dot{
  width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25); cursor:pointer; transition:.3s; flex-shrink:0;
}
.dp-dot:hover{ background:rgba(255,255,255,.55); }
.dp-dot.dp-dot-active{ width:22px; border-radius:999px; background:linear-gradient(90deg,var(--cyan),var(--pink)); }
.dp-label{
  font-size:.78rem; font-weight:600; color:#cbd5e1; white-space:nowrap; padding:0 .5rem;
  max-width:140px; overflow:hidden; text-overflow:ellipsis;
}
.dp-progress{
  position:absolute; top:-1px; left:8%; right:8%; height:2px; border-radius:999px; overflow:hidden;
  background:rgba(255,255,255,.1);
}
#diaporama-progress-fill{
  display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--purple),var(--pink));
}
@media (max-width:640px){
  .diaporama-bar{ gap:.4rem; padding:.55rem .7rem; max-width:94vw; }
  .dp-label{ display:none; }
  .dp-dots{ max-width:90px; overflow:hidden; }
}

/* Entry hint pulsing icon while not yet activated */
#diaporama-toggle.dp-armed i, #diaporama-toggle-mobile.dp-armed i{ animation:pulseDot 1.4s infinite; }