:root{
  --bg:#0b0614;
  --card:#130c22;
  --muted:#c7b9ff;
  --text:#e9e4ff;
  --sub:#a99ad6;
  --line:rgba(255,255,255,.1);
  --grad1:#a55bff;
  --grad2:#8b35ff;
  --grad3:#5b76ff;
}

*{ box-sizing: border-box; }
html,body{ height:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family: 'Outfit', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, #160c26 0%, var(--bg) 60%);
  color:var(--text);
}

/* Layout utils */
.container{ width:min(1100px, 92%); margin-inline:auto; }
.section-title{ font-size:2rem; margin:0 0 12px; color:#d9cfff; }
.muted{ color:var(--sub); }
.grad{ background:linear-gradient(90deg, var(--grad1), var(--grad2), var(--grad3)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(20,10,35,.7);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; }
.brand-logo{ height:44px; width:auto; border-radius:8px; }
.brand-name{ font-weight:800; letter-spacing:.3px; }

.site-nav{ display:flex; align-items:center; gap:18px; }
.nav-link{ color:#cbb6ff; text-decoration:none; font-weight:600; }
.nav-link:hover{ color:#b892ff; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; text-decoration:none; cursor:pointer;
  border-radius:10px; padding:10px 16px; border:1px solid transparent;
  transition: transform .15s ease, opacity .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn-primary{
  background: linear-gradient(135deg, var(--grad1), var(--grad2));
  color:white; box-shadow:0 8px 22px rgba(139,53,255,.24);
}

/* Burger (mobile) */
.nav-toggle{
  display:none; width:44px; height:38px; border:1px solid var(--line); border-radius:10px;
  background:transparent; color:var(--text); gap:4px; align-items:center; justify-content:center;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:#d9cfff; }
@media (max-width: 860px){
  .nav-toggle{ display:flex; }
  .site-nav{ position:absolute; right:4%; top:70px; background:rgba(20,10,35,.95); border:1px solid var(--line); border-radius:12px; padding:12px; display:none; flex-direction:column; gap:10px; }
  .site-nav.open{ display:flex; }
}

/* Hero */
.hero{ position:relative; padding:72px 0 36px; text-align:center; }
.hero-inner h1{ font-size: clamp(2.2rem, 3.8vw, 3.4rem); margin:0 0 8px; color:#e9e4ff; }
.subtitle{ color:var(--muted); margin:0 0 22px; }
.cta-row{ display:flex; align-items:center; gap:18px; justify-content:center; flex-wrap:wrap; }
.socials{ display:flex; align-items:center; gap:10px; }
.socials a{ color:#b892ff; text-decoration:none; font-weight:600; }
.socials a:hover{ color:#d1b0ff; }

.halo{
  position:absolute; inset:auto; top:-160px; left:50%; transform:translateX(-50%);
  width:900px; height:520px; filter: blur(64px);
  background: radial-gradient(closest-side, rgba(165,91,255,.35), rgba(91,118,255,.18), transparent 70%);
  pointer-events:none; z-index:-1;
}

/* Profile card (NEW) */
.profile{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:14px auto 12px; padding:10px 14px;
  width:min(780px, 100%);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:14px;
}
.hidden{ display:none !important; }
.profile-left{ display:flex; align-items:center; gap:12px; }
.avatar{ width:40px; height:40px; border-radius:10px; display:grid; place-items:center; font-weight:800;
  background:linear-gradient(135deg, var(--grad3), var(--grad2)); }
.profile-name{ font-weight:800; }
.profile-grade{ font-size:.9rem; color:#cbb6ff; }
.profile-right{ text-align:right; }
.profile-points{ font-size:1.4rem; font-weight:800; }

/* User menu in nav (NEW) */
.user-menu{ position:relative; }
.user-btn{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:999px; padding:6px 10px; background:transparent; color:#e9e4ff; cursor:pointer;
}
.user-btn .circle{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg, var(--grad1), var(--grad2)); font-weight:800; }
.user-label{ font-weight:700; }
.user-dropdown{
  position:absolute; right:0; top:42px; width:220px; display:none;
  background:rgba(20,10,35,.98); border:1px solid var(--line); border-radius:12px; padding:10px;
}
.user-dropdown.open{ display:block; }
.ud-head{ display:flex; flex-direction:column; gap:2px; margin-bottom:8px; }
.ud-item{ display:block; padding:8px 6px; border-radius:8px; color:#e9e4ff; text-decoration:none; }
.ud-item:hover{ background:rgba(255,255,255,.06); }
.ud-item.disabled{ opacity:.65; pointer-events:none; }

/* News */
.news-grid{ display:grid; gap:16px; margin:26px 0 8px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .news-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .news-grid{ grid-template-columns: 1fr; } }

.news-card{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--line);
  border-radius:14px; padding:16px 16px 18px;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.news-card:hover{ transform: translateY(-3px); border-color: rgba(207,170,255,.45); }
.news-meta{ display:flex; align-items:center; justify-content:space-between; color:var(--sub); font-size:.9rem; margin-bottom:6px;}
.tag{ padding:2px 8px; border-radius:999px; font-weight:700; font-size:.75rem; color:white; background: linear-gradient(135deg, var(--grad3), var(--grad2));}
.news-title{ margin:6px 0 6px; font-size:1.15rem; color:#efe8ff; }
.news-body{ margin:0; color:#cbc4e6; }

/* Sections */
.about, .projects, .pricing{ padding: 40px 0; }
.hint{ margin: 16px 0 0; color: var(--sub); }

/* Projects (NEW) */
.cards{ display:grid; gap:16px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px){ .cards{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr;} }
.card{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line); border-radius:14px; padding:16px; }
.card h3{ margin:0 0 6px; color:#e9e4ff; }

/* Footer */
.site-footer{ margin-top: 40px; border-top:1px solid var(--line); padding: 26px 0; color:#b6a7e3; }
.foot-inner{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
@media (max-width: 720px){ .foot-inner{ flex-direction:column; text-align:center; } }
.site-footer .socials a{ margin-right:12px; }

/* Animation secrète du logo (triple clic) */
.brand-logo.secret-anim {
  animation: secretPulse 0.6s ease;
}

@keyframes secretPulse {
  0% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(165,91,255,0));
  }
  50% {
    transform: scale(1.15) rotate(2deg);
    filter: drop-shadow(0 0 14px rgba(165,91,255,0.9));
  }
  100% {
    transform: scale(1) rotate(0deg);
    filter: drop-shadow(0 0 0 rgba(165,91,255,0));
  }
}