/* Reset et body */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Raleway', sans-serif; background:#000; color:#fff; overflow-x:hidden; cursor:none; }

/* Canvas 3D */
#balloonCanvas { position:fixed; top:0; left:0; width:100%; height:100%; z-index:-1; }

/* Navbar */
.navbar {
  position: fixed;
  top: 0; left:0; width:100%;
  background: rgba(0,0,0,0.8); backdrop-filter: blur(6px);
  z-index:1000; padding:10px 0;
}
.navbar ul { display:flex; justify-content:center; list-style:none; gap:20px; }
.navbar ul li a { color:#fadf11; text-decoration:none; font-weight:500; position:relative; transition: color 0.3s; }
.navbar ul li a:hover { color:#fff; }

/* Étincelles navbar */
.nav-sparkles {
  position: absolute;
  width: 6px; height: 6px;
  background: #fadf11;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  animation: navSparkle 0.6s forwards;
}
@keyframes navSparkle {
  0% { opacity:1; transform: scale(1) translate(0,0); }
  100% { opacity:0; transform: scale(0.5) translate(var(--x), var(--y)); }
}

/* Hero */
.hero { height:100vh; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; position:relative; }
.hero h1 { font-family:'Press Start 2P', monospace; font-size:3rem; color:#fadf11; text-shadow: 2px 2px 12px rgba(250,223,17,0.6); margin-bottom:20px; animation:glow 2s infinite alternate; }
.hero h2 { font-size:1.5rem; color:#fadf11; letter-spacing:2px; text-shadow: 0 0 10px #fadf11, 0 0 20px #fadf11; opacity:0; animation:fadeUp 1s forwards; animation-delay:0.5s; }
.scroll { position:absolute; bottom:20px; font-size:0.8rem; color:#fff; letter-spacing:2px; animation: bounce 1.5s infinite; }


/* Sections */
section { width:90%; margin:70px auto 50px auto; padding:20px; background:rgba(255,255,255,0.05); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.2); border-radius:15px; opacity:0; transform:translateY(30px); animation:fadeUp 1s forwards; }
section h2 { color:#fadf11; margin-bottom:15px; text-shadow: 0 0 10px #fadf11; }
section p, section ul { margin-bottom:10px; font-size:0.95rem; }
section ul li { margin-bottom:8px; }

/* Titres */
section h2 { color:#fadf11; margin-bottom:15px; text-shadow: 0 0 10px #fadf11; }

/* Skills */
.skill-container { display:flex; flex-direction:column; gap:15px; margin-top:10px; }
.skill span { display:block; margin-bottom:5px; font-weight:500; color:#fadf11; }
.bar { width:100%; height:20px; background:rgba(255,255,255,0.1); border-radius:10px; overflow:hidden; }
.progress { height:100%; background:#fadf11; width:0; border-radius:10px; transition: width 2s ease-in-out; }

/* Cards */
.cards { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:20px; }
.card {
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:15px;
  padding:20px;
  width:280px;
  position:relative;
  cursor:pointer;
  overflow:hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-15px) rotateZ(-1deg);
  box-shadow:0 20px 40px rgba(250,223,17,0.5);
}
.sparkles { position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.sparkle { position:absolute; width:4px; height:4px; background:#fadf11; border-radius:50%; opacity:0; transform: scale(0); animation: sparkleAnim 0.6s linear forwards; }
@keyframes sparkleAnim { 0% {opacity:1; transform: scale(1) translate(0,0);} 100% {opacity:0; transform: scale(0.5) translate(var(--x), var(--y));} }

/* Curseur étoile */
#custom-cursor {
  width: 25px; height: 25px;
  background: #fadf11;
  clip-path: polygon(
    50% 0%, 61% 35%, 98% 35%, 68% 57%, 
    79% 91%, 50% 70%, 21% 91%, 32% 57%, 
    2% 35%, 39% 35%
  );
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease;
  z-index: 10000;
}
#custom-cursor.hover { transform: translate(-50%, -50%) scale(1.5); }

/* Animations */

@keyframes fadeUp { to {opacity:1; transform:translateY(0);} }
@keyframes bounce { 0%,100% {transform:translateY(0);} 50% {transform:translateY(-10px);} }
@keyframes glow { from {text-shadow: 0 0 10px #fadf11;} to {text-shadow: 0 0 25px #fadf11, 0 0 50px #fadf11;} }

@keyframes glow { from {text-shadow: 0 0 10px #fadf11;} to {text-shadow: 0 0 25px #fadf11, 0 0 50px #fadf11;} }

/* Form */
form { display:flex; flex-direction:column; gap:15px; margin-top:10px; }
input, textarea, button { padding:10px; border-radius:10px; border:none; font-size:0.95rem; }
input, textarea { background:rgba(255,255,255,0.1); color:#fff; resize:none; }
button { background:#fadf11; color:#000; font-weight:bold; cursor:pointer; transition:transform 0.3s; }
button:hover { transform:scale(1.05); }

/* Personality */
.personality h3 { color:#fadf11; margin-top:15px; text-shadow: 0 0 8px #fadf11; }
.category { opacity:0; transform:translateY(30px); transition:all 0.8s ease-out; }
.category.show { opacity:1; transform:translateY(0); }

.cursor-star {
  position: fixed;
  width: 6px;
  height: 6px;
  background: #fadf11;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  animation: starFade 0.6s forwards;
  z-index: 9999;
}

@keyframes starFade {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1001;
}
.hamburger div {
  width: 100%;
  height: 3px;
  background: #fadf11;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Responsive menu à droite */
@media screen and (max-width: 900px) {
  .navbar ul {
    display: none;
    flex-direction: column;
    background: rgba(0,0,0,0.9);
    position: absolute;
    top: 60px;
    right: 10px;
    width: 220px;
    border-radius: 8px;
    padding: 10px;
    text-align: right;
  }

  .navbar ul.show {
    display: flex;
  }

  .hamburger {
    display: flex;
  }
}

/* Étincelles navbar */
.nav-sparkles {
  position: absolute;
  width: 6px; height: 6px;
  background: #fadf11;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0);
  pointer-events: none;
  animation: navSparkle 0.6s forwards;
}
@keyframes navSparkle {
  0% { opacity:1; transform: scale(1) translate(0,0); }
  100% { opacity:0; transform: scale(0.5) translate(var(--x), var(--y)); }
}

.competences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.competence-card {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 2rem;
  text-align: center;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.competence-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}

.competences-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 50vh; 

#cv {
  text-align: center;
  padding: 3rem 1rem;
}

.btn-cv {
  display: inline-block;
  padding: 1rem 2rem;
  background: #FFD700; 
  color: #333; 
  font-size: 1.2rem;
  font-weight: bold;
  border: none;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-cv:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}