/* ═══════════════════════════════════════════════════════════════════════════
   DA SYSTEM — pazent.fr
   Inspired by: rauno.me / leerob.io / antfu.me
   Rule: nothing without purpose. Every pixel earns its place.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─── */
:root {
  /* Fond : noir chaud, pas froid */
  --bg:       #0a0a0b;
  --bg-1:     #111113;
  --bg-2:     #18181b;

  /* Borders : très subtils */
  --border:   rgba(255,255,255,0.07);
  --border-2: rgba(255,255,255,0.12);

  /* Texte : hiérarchie nette */
  --t1: #fafafa;
  --t2: rgba(250,250,250,0.55);
  --t3: rgba(250,250,250,0.30);

  /* Accent : vert émeraude — signature dev moderne (vercel, leerob) */
  --accent:      #10b981;
  --accent-dim:  rgba(16,185,129,0.12);
  --accent-glow: rgba(16,185,129,0.20);

  /* Secondaire : bleu électrique pour les liens/highlights */
  --blue:     #3b82f6;
  --blue-dim: rgba(59,130,246,0.10);

  /* Typographie */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;

  --r:    10px;
  --r-sm: 6px;
  --ease: cubic-bezier(.16,1,.3,1);
}

/* ─── Reset & Base ─── */
html { scroll-behavior: smooth; }
body {
  background: var(--bg) !important;
  color: var(--t1) !important;
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased !important;
  text-rendering: optimizeLegibility !important;
}

/* Kill les overlays qui font vieux */
.scanline-overlay { display: none !important; }
.noise-overlay    { opacity: 0.012 !important; }
.bg-glow          { opacity: 0.02 !important; filter: blur(180px) !important; }
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px) !important;
  background-size: 44px 44px !important;
}

/* ─── Navbar ─── */
.navbar {
  background: rgba(10,10,11,0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: none !important;
}
.navbar__logo,
.navbar__logo-text {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--t1) !important;
}
.navbar__link {
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  transition: color 0.2s !important;
  letter-spacing: 0 !important;
}
.navbar__link:hover { color: rgba(250,250,250,0.8) !important; }
.navbar__link.active { color: var(--t1) !important; }

/* ─── Hero — Le moment qui capte ─── */
.hero {
  background: var(--bg) !important;
  min-height: 100vh !important;
}

/* Prénom : propre, puissant, sans chichis */
.hero__title-name,
.hero__title-name::before,
.hero__title-name::after,
.hero__title-name.glitching,
.hero__title-name.colored,
.hero__title-name .char {
  font-size: clamp(3.2rem, 8.5vw, 6.5rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--t1) !important;
  background: none !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--t1) !important;
  animation: none !important;
  text-shadow: none !important;
  transform: none !important;
  clip-path: none !important;
  content: none !important;
  display: none !important;
}
.hero__title-name {
  display: block !important;
}

.hero__greeting {
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  display: block !important;
  margin-bottom: 20px !important;
}
.hero__roles {
  font-size: clamp(0.95rem, 2vw, 1.25rem) !important;
  font-weight: 400 !important;
  color: var(--t3) !important;
  margin-top: 16px !important;
}
.hero__role-cursor { color: var(--accent) !important; }
.hero__description {
  font-size: 0.975rem !important;
  line-height: 1.75 !important;
  color: var(--t2) !important;
  max-width: 440px !important;
  font-weight: 400 !important;
  margin-top: 16px !important;
}

/* Badge disponible */
.hero__badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 4px 11px !important;
  background: rgba(16,185,129,0.06) !important;
  border: 1px solid rgba(16,185,129,0.18) !important;
  border-radius: 100px !important;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  color: rgba(250,250,250,0.5) !important;
  margin-bottom: 32px !important;
  letter-spacing: 0.01em !important;
}
.hero__badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--accent) !important;
  flex-shrink: 0 !important;
  animation: badge-pulse 2.5s ease infinite !important;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.35); }
  50%      { box-shadow: 0 0 0 4px rgba(16,185,129,0); }
}

/* Floaters : code subtil, pro */
.hero__float-code {
  font-family: var(--mono) !important;
  font-size: 0.7rem !important;
  font-weight: 400 !important;
  padding: 4px 10px !important;
  border-radius: 5px !important;
  background: rgba(17,17,19,0.9) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(250,250,250,0.28) !important;
  box-shadow: none !important;
  letter-spacing: -0.01em !important;
}

/* Stats */
.hero__stat-number {
  font-size: 2rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.05em !important;
  color: var(--t1) !important;
  background: none !important;
  -webkit-text-fill-color: var(--t1) !important;
  background-clip: initial !important;
  line-height: 1 !important;
}
.hero__stat-plus { color: var(--accent) !important; font-size: 1.2rem !important; }
.hero__stat-label {
  font-size: 0.68rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
  font-weight: 500 !important;
  display: block !important;
  margin-top: 3px !important;
}
.hero__stat-divider { background: var(--border) !important; }

/* GitHub stats */
.hero__github {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  padding: 8px 14px !important;
}
.hero__github-item {
  font-size: 0.8rem !important;
  color: var(--t2) !important;
  font-family: var(--mono) !important;
}

/* ─── Boutons ─── */
.btn {
  font-size: 0.855rem !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 9px 16px !important;
  letter-spacing: -0.01em !important;
  transition: all 0.2s var(--ease) !important;
}
.btn--primary {
  background: var(--t1) !important;
  color: var(--bg) !important;
  border: none !important;
  box-shadow: none !important;
}
.btn--primary:hover {
  background: rgba(250,250,250,0.88) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
.btn--glass {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  color: var(--t2) !important;
}
.btn--glass:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: var(--border-2) !important;
  color: var(--t1) !important;
  transform: translateY(-1px) !important;
}

/* ─── Sections ─── */
.section     { background: var(--bg) !important; }
.section--alt { background: var(--bg-1) !important; }

.section__tag {
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  display: block !important;
  margin-bottom: 8px !important;
}
.section__title {
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.08 !important;
  color: var(--t1) !important;
}
.section__subtitle,
.section__desc {
  font-size: 0.95rem !important;
  color: var(--t2) !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
  font-weight: 400 !important;
}

/* ─── Cards ─── */
.project-card,
.skill-card,
.about__detail-card,
.web3__card,
.contact__card {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s var(--ease) !important;
}
.project-card:hover {
  border-color: rgba(16,185,129,0.18) !important;
  box-shadow: 0 0 0 1px rgba(16,185,129,0.06), 0 20px 48px rgba(0,0,0,0.3) !important;
}
.skill-card:hover,
.web3__card:hover,
.about__detail-card:hover,
.contact__card:hover {
  border-color: var(--border-2) !important;
}

.project-card__title {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--t1) !important;
}
.project-card__desc {
  font-size: 0.87rem !important;
  color: var(--t2) !important;
  line-height: 1.65 !important;
}
.project-card__tags span {
  font-size: 0.67rem !important;
  font-weight: 500 !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--t3) !important;
  border-radius: 100px !important;
  padding: 1px 8px !important;
  letter-spacing: 0.01em !important;
}
.project-card__status--done {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  background: rgba(16,185,129,0.08) !important;
  border: 1px solid rgba(16,185,129,0.16) !important;
  color: #34d399 !important;
  border-radius: 100px !important;
  padding: 1px 8px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}
.project-card__status--progress {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  background: rgba(59,130,246,0.08) !important;
  border: 1px solid rgba(59,130,246,0.16) !important;
  color: #93c5fd !important;
  border-radius: 100px !important;
  padding: 1px 8px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ─── Skill bars ─── */
.skill-card__title {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--t1) !important;
}
.skill-card__subtitle {
  font-size: 0.68rem !important;
  color: var(--t3) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}
.skill-item__name  { font-size: 0.8rem !important; color: var(--t2) !important; }
.skill-item__value {
  font-size: 0.75rem !important;
  color: var(--t3) !important;
  font-family: var(--mono) !important;
  letter-spacing: -0.02em !important;
}
.skill-item__bar {
  height: 2px !important;
  background: rgba(255,255,255,0.05) !important;
  border-radius: 100px !important;
  overflow: hidden !important;
}
.skill-item__progress { height: 2px !important; border-radius: 100px !important; }
.skill-item__progress--green,
.skill-item__progress--blue  { background: var(--accent) !important; }
.skill-item__progress--gold  { background: #f59e0b !important; }
.skill-item__progress--purple { background: var(--blue) !important; }

/* ─── Tool tags ─── */
.tool-tag {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: var(--t3) !important;
  font-size: 0.77rem !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 4px 10px !important;
  letter-spacing: -0.01em !important;
  transition: all 0.15s !important;
}
.tool-tag:hover {
  color: var(--t2) !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--border-2) !important;
}

/* ─── Filter buttons ─── */
.filter-btn {
  font-size: 0.77rem !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  padding: 5px 13px !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--t3) !important;
  transition: all 0.15s !important;
}
.filter-btn--active {
  background: var(--accent-dim) !important;
  border-color: rgba(16,185,129,0.25) !important;
  color: var(--accent) !important;
}
.filter-btn:not(.filter-btn--active):hover {
  color: var(--t2) !important;
  border-color: var(--border-2) !important;
}

/* ─── About ─── */
.about__text p {
  color: var(--t2) !important;
  font-size: 0.95rem !important;
  line-height: 1.78 !important;
}
.about__text strong { color: rgba(250,250,250,0.82) !important; font-weight: 600 !important; }
a.link--accent {
  color: var(--t2) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  text-decoration: none !important;
  transition: color 0.15s, border-color 0.15s !important;
}
a.link--accent:hover {
  color: var(--t1) !important;
  border-color: rgba(255,255,255,0.4) !important;
}

.about__terminal {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
  overflow: hidden !important;
}
.about__terminal-header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid var(--border) !important;
}
.about__terminal-title {
  font-size: 0.72rem !important;
  color: var(--t3) !important;
  font-family: var(--mono) !important;
}
.about__detail-label {
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--t3) !important;
}
.about__detail-value {
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: rgba(250,250,250,0.72) !important;
}

/* ─── Timeline ─── */
.timeline__title {
  font-size: 0.97rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--t1) !important;
}
.timeline__company { font-size: 0.78rem !important; color: var(--accent) !important; font-weight: 500 !important; }
.timeline__date    { font-size: 0.7rem !important; color: var(--t3) !important; font-family: var(--mono) !important; }
.timeline__desc    { font-size: 0.84rem !important; color: var(--t2) !important; line-height: 1.65 !important; }
.timeline__dot {
  background: var(--accent) !important;
  border: 2px solid rgba(16,185,129,0.2) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.06) !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}
.timeline__item:hover .timeline__dot {
  transform: scale(1.3) !important;
  box-shadow: 0 0 0 4px rgba(16,185,129,0.12), 0 0 10px rgba(16,185,129,0.2) !important;
}
.timeline__line { background: rgba(255,255,255,0.05) !important; }

/* ─── Web3 ─── */
.web3__card-title { font-size: 0.92rem !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: var(--t1) !important; }
.web3__card-desc  { font-size: 0.82rem !important; color: var(--t2) !important; line-height: 1.62 !important; }
.web3__card-link  { font-size: 0.78rem !important; color: var(--accent) !important; font-weight: 500 !important; opacity: 0.7 !important; transition: opacity 0.15s !important; }
.web3__card-link:hover { opacity: 1 !important; }

/* ─── Code editors ─── */
.code-editor {
  background: rgba(0,0,0,0.6) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r) !important;
}
.code-editor__header {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid var(--border) !important;
}
.code-editor__filename { font-size: 0.72rem !important; color: var(--t3) !important; }
.code-editor__lang { font-size: 0.65rem !important; color: rgba(250,250,250,0.18) !important; }

/* ─── Footer ─── */
.footer {
  background: var(--bg) !important;
  border-top: 1px solid var(--border) !important;
}
.footer__copy { font-size: 0.72rem !important; color: var(--t3) !important; }

/* ─── Section watermarks ─── */
.section__header { position: relative !important; overflow: hidden !important; }
.section__header[data-number]::after {
  content: attr(data-number) !important;
  position: absolute !important; top: -8px !important; right: 0 !important;
  font-size: 4.5rem !important; font-weight: 800 !important;
  letter-spacing: -0.05em !important;
  color: rgba(255,255,255,0.018) !important;
  pointer-events: none !important; user-select: none !important;
  line-height: 1 !important;
}

/* ─── Scroll indicator ─── */
.scroll-indicator { color: var(--t3) !important; font-size: 0.62rem !important; letter-spacing: 0.14em !important; }
.scroll-indicator__line { background: rgba(255,255,255,0.12) !important; }

/* ─── Back to top ─── */
.back-to-top {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t2) !important;
  width: 38px !important; height: 38px !important;
}
.back-to-top:hover { border-color: var(--border-2) !important; color: var(--t1) !important; }

/* ─── Selection & focus ─── */
::selection { background: rgba(16,185,129,0.22); color: #fff; }
:focus-visible { outline: 2px solid rgba(16,185,129,0.6); outline-offset: 3px; border-radius: 4px; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

/* ─── Dividers ─── */
.section-divider svg path { fill: var(--bg-1) !important; }

/* ─── Mobile ─── */
@media (max-width: 768px) {
  .hero__title-name { font-size: 2.6rem !important; }
  .section__title   { font-size: 1.7rem !important; }
  .hero__description { font-size: 0.9rem !important; }
}