/* uxqt.site — style simple, monospace, scanlines */

:root {
  --bg: #000000;
  --text: #ffffff;
  --muted: #a5a5a5;
  --accent: #dee142;
  --gold: #deaf2c;
  --border: rgba(255, 255, 255, 0.85);
  --border-soft: rgba(255, 255, 255, 0.25);
  --box: rgba(255, 255, 255, 0.02);
  --box-hover: rgba(255, 255, 255, 0.06);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); scroll-behavior: smooth; }

/* scanlines CRT */
html::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.20) 0 1px,
    transparent 1px 4px
  );
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: ui-monospace, "Cascadia Mono", Consolas, "JetBrains Mono", monospace;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px;
}

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

a { color: var(--accent); }
a:hover { color: var(--text); }

#page {
  width: 100%;
  max-width: 760px;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* autocollant "éclaté" façon couverture de BD : pointes irrégulières,
   contour noir épais et copie noire décalée derrière pour le relief */
.burst {
  --star: polygon(
    48.5% 2.3%, 56.4% 12.8%, 69.5% 4.8%, 70.5% 21.9%, 83.8% 19.2%, 79.5% 31.5%,
    96.5% 36.4%, 84.8% 45.5%, 99.4% 57.2%, 85.7% 61.2%, 96.4% 74.3%, 79.3% 75.4%,
    78.6% 86.7%, 63.7% 83.3%, 59.4% 95.8%, 50.4% 87.7%, 41.6% 98.6%, 36.7% 82.2%,
    20.7% 90.9%, 23.0% 73.9%, 8.3% 75.1%, 13.2% 61.2%, 3.0% 54.6%, 13.2% 44.9%,
    1.6% 35.3%, 15.2% 31.5%, 14.8% 16.8%, 29.2% 21.5%, 32.0% 7.9%, 42.3% 12.5%
  );
  position: absolute;
  top: 2px;
  left: -6px;
  z-index: 5;
  width: 124px;
  height: 124px;
  text-decoration: none;
  animation: burst-sway 3.6s ease-in-out infinite alternate;
}
/* la copie noire décalée = l'ombre dure d'un autocollant posé sur la page */
.burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: var(--star);
  transform: translate(4px, 5px);
  transition: transform 0.18s ease;
}
/* face visible : fond noir = contour, le jaune est posé 3px à l'intérieur */
.burst .face {
  position: absolute;
  inset: 0;
  background: #000;
  clip-path: var(--star);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  color: #000;
  transition: transform 0.18s ease;
}
.burst .face::before {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--accent);
  clip-path: var(--star);
}
.burst .b1,
.burst .b2,
.burst .b3 { position: relative; }
.burst .b1 { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; }
.burst .b2 { font-size: 15px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.burst .b3 { font-size: 9px; letter-spacing: 0.03em; opacity: 0.7; }

/* au survol : l'autocollant se soulève (ombre plus loin) et grossit un peu */
.burst:hover { animation-play-state: paused; }
.burst:hover .face { transform: scale(1.07); }
.burst:hover::before { transform: translate(7px, 9px); }

/* le va-et-vient gauche/droite, avec l'inclinaison qui suit */
@keyframes burst-sway {
  from { transform: translateX(-11px) rotate(-12deg); }
  to   { transform: translateX(11px) rotate(-3deg); }
}

@media (max-width: 900px) {
  .burst { width: 96px; height: 96px; top: 0; left: -2px; }
  .burst .b1 { font-size: 8px; }
  .burst .b2 { font-size: 12px; }
  .burst .b3 { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .burst { animation: none; transform: rotate(-8deg); }
}

/* header */
header {
  text-align: center;
  padding: 36px 0 24px;
}
header .logo {
  color: var(--accent);
  font-size: 34px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
}
header .logo:hover { color: var(--text); }
header nav {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 22px;
}
header nav a {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}
header nav a:hover { color: var(--accent); }
#musicBtn {
  background: transparent;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  padding: 1px 9px;
  cursor: pointer;
}
#musicBtn:hover { border-color: var(--accent); color: var(--accent); }
#musicBtn.off { color: var(--muted); text-decoration: line-through; }

/* boîtes */
.box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--box);
  padding: 20px;
  margin-bottom: 24px;
}

.section-title {
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  margin: 28px 0 14px;
}

h1 { font-size: 26px; margin-bottom: 6px; }
.sub { color: var(--muted); margin-bottom: 24px; }

/* hero */
.hero { display: flex; gap: 18px; align-items: center; }
.hero img {
  width: 92px;
  height: 92px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  flex-shrink: 0;
  image-rendering: auto;
}
.hero p { color: var(--muted); font-size: 14px; }
.hero p strong { color: var(--text); }

/* stats github */
.gstats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 24px;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 16px;
}
.gstats b { color: var(--accent); }

/* grille projets */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.proj {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--box);
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s;
}
.proj:hover { background: var(--box-hover); border-color: var(--accent); color: var(--text); }
.proj-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.proj-name { color: var(--accent); font-weight: 700; font-size: 15px; }
.proj-stars { color: var(--gold); font-size: 13px; flex-shrink: 0; }
.proj p { color: var(--muted); font-size: 13px; flex: 1; }
.proj-lang { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.proj-lang img, .proj-lang svg { width: 14px; height: 14px; }

/* boutons */
.btn {
  display: inline-block;
  background: var(--accent);
  color: #000;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 8px;
  border-bottom: 3px solid #7c7e26;
  font-size: 14px;
}
.btn:hover { color: #000; filter: brightness(1.08); }

/* pilules stats projet */
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pill {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--muted);
}
.pill b { color: var(--text); }
.pill.gold b { color: var(--gold); }

/* readme */
#readme { font-size: 14px; overflow-wrap: break-word; }
#readme h1, #readme h2, #readme h3 { color: var(--accent); margin: 20px 0 8px; line-height: 1.3; }
#readme h1 { font-size: 20px; border-bottom: 1px solid var(--border-soft); padding-bottom: 8px; }
#readme h2 { font-size: 17px; }
#readme h3 { font-size: 15px; }
#readme p, #readme li { color: var(--muted); margin: 8px 0; }
#readme li { margin-left: 22px; }
#readme code {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 13px;
}
#readme pre {
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 12px 0;
}
#readme pre code { background: none; padding: 0; }
#readme img { max-width: 100%; border-radius: 8px; }
#readme hr { border: none; border-top: 1px solid var(--border-soft); margin: 16px 0; }
.err { color: var(--muted); text-align: center; padding: 30px 0; }

/* pages texte (légal, à propos) */
.prose h2 {
  color: var(--accent);
  font-size: 17px;
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-soft);
}
.prose p, .prose li { color: var(--muted); font-size: 14px; }
.prose ul { padding-left: 22px; }

/* contact — carte discord */
.dc-banner {
  height: 110px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(120deg, #1c1c26, #2a2a1c);
  margin: -20px -20px 0;
}
.dc-head { display: flex; align-items: flex-end; gap: 14px; margin-top: -36px; }
.avatar-wrap { position: relative; }
.avatar-wrap .avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 4px solid var(--bg);
  display: block;
}
.avatar-wrap .deco { position: absolute; inset: -8px; width: 100px; height: 100px; pointer-events: none; }
.status-dot {
  position: absolute;
  right: 2px;
  bottom: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid var(--bg);
  background: #a5a5a5;
}
.st-online { background: #65e928; }
.st-idle { background: #dcdf41; }
.st-dnd { background: #e92828; }
.st-offline { background: #a5a5a5; }
.dc-bubble {
  display: none;
  position: relative;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 30px;
}
.dc-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
}
.dc-bubble::after {
  content: "";
  position: absolute;
  left: -14px;
  bottom: -8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-soft);
}
.dc-bubble img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.dc-name { font-size: 24px; font-weight: 800; margin-top: 10px; }
.dc-idrow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; margin-top: 2px; }
.dc-tagbadge {
  font-size: 11px;
  color: var(--text);
  border: 1px solid var(--border-soft);
  border-radius: 5px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.dc-tagbadge img { width: 12px; height: 12px; }
.dc-badges { display: inline-flex; align-items: center; gap: 4px; }
.dc-badges img { width: 18px; height: 18px; object-fit: contain; }
.dc-badges a, .dc-badges span { display: inline-flex; line-height: 0; }
.dc-links {
  border-left: 3px solid var(--border-soft);
  padding: 4px 14px;
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dc-links a { color: #00a8fc; font-size: 13px; font-weight: 600; }
.dc-links a:hover { color: #4cc3ff; }
.dc-section { margin-top: 16px; }
.dc-label { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.dc-value { color: var(--muted); font-size: 14px; }
.dc-conn { display: flex; align-items: center; gap: 8px; color: var(--text); }
.dc-conn a { color: var(--text); text-decoration: none; }
.dc-conn a:hover { text-decoration: underline; }

/* activité / RPC */
#activity { display: none; margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
#activity.on { display: block; }
.act-head { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
#actList { display: flex; flex-direction: column; gap: 14px; }
.act-body { display: flex; gap: 14px; align-items: center; }
.act-img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; display: none; }
.act-img.on { display: block; }
.act-meta { flex: 1; min-width: 0; }
.act-verb { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.act-name { font-weight: 700; font-size: 14px; }
.act-details, .act-state { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-time { color: #65e928; font-size: 12px; margin-top: 2px; }

/* spotify */
#spotify { display: none; margin-top: 16px; border-top: 1px solid var(--border-soft); padding-top: 14px; }
#spotify.on { display: block; }
.sp-head { display: flex; align-items: center; gap: 8px; color: #65e928; font-size: 13px; margin-bottom: 10px; }
.sp-head a { color: var(--muted); text-decoration: none; margin-left: auto; }
.sp-head a:hover { color: var(--accent); }
.sp-body { display: flex; gap: 14px; align-items: center; }
.sp-body .cover { width: 72px; height: 72px; border-radius: 8px; cursor: pointer; }
.sp-body .meta { flex: 1; min-width: 0; }
.sp-body .song { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-body .artist { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); margin-top: 6px; }
.progress .bar { flex: 1; height: 4px; border-radius: 99px; background: rgba(255,255,255,0.12); overflow: hidden; }
.progress .fill { height: 100%; width: 0; background: #65e928; border-radius: 99px; }

/* serveurs discord */
.srv {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--box);
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background 0.15s, border-color 0.15s;
}
.srv:hover { background: var(--box-hover); border-color: var(--accent); color: var(--text); }
.srv-head { display: flex; align-items: center; gap: 12px; }
.srv-head img { width: 44px; height: 44px; border-radius: 8px; }
.srv-name { color: var(--accent); font-weight: 700; }
.srv-members { color: var(--muted); font-size: 12px; display: flex; gap: 14px; }
.srv-members .on::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #65e928;
  margin-right: 5px;
}
.srv-desc { color: var(--muted); font-size: 13px; flex: 1; }
.srv-join { color: var(--accent); font-size: 13px; }
.srv:hover .srv-join { text-decoration: underline; }

/* liens "ailleurs" */
.other { display: flex; flex-wrap: wrap; gap: 14px; }
.other a {
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--box);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
.other a:hover { background: var(--box-hover); border-color: var(--accent); color: var(--text); }
.other img { width: 38px; height: 38px; border-radius: 8px; }
.other .lbl { color: var(--accent); font-weight: 700; }
.other .sub2 { color: var(--muted); font-size: 12px; }

/* footer */
footer {
  text-align: center;
  padding: 40px 0 30px;
  margin-top: auto;
  font-size: 13px;
  color: var(--muted);
}
.foot-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-bottom: 10px;
}
.foot-links a { color: var(--muted); text-decoration: none; }
.foot-links a:hover { color: var(--accent); }

/* 404 */
.err-page { text-align: center; padding: 70px 0; }
.err-page h1 { font-size: 96px; color: var(--accent); line-height: 1; margin-bottom: 12px; }
.err-page p { color: var(--muted); margin-bottom: 26px; }

@media (max-width: 560px) {
  .hero { flex-direction: column; text-align: center; }
  header .logo { font-size: 28px; }
  .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}