/* ═══════════════════════════════════════
   HSR by HackSecu'R — 2026
   Feuille de style commune
═══════════════════════════════════════ */

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

body {
  background:#000;
  height:100vh;
  width:100vw;
  font-family:'Courier New', monospace;
  overflow:hidden;
}

/* ── TERMINAL BACKGROUND ── */
#terminal {
  position:fixed;
  inset:0;
  z-index:1;
  font-size:13px;
  line-height:1.8;
  color:rgba(0,255,100,0.45);
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  white-space:pre-wrap;
  overflow:hidden;
  pointer-events:none;
}

/* Atténué sur les sous-pages */
body.subpage #terminal {
  color:rgba(0,255,100,0.22);
}

/* ── NAV ── */
#nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 28px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
  border-bottom:1px solid rgba(255,23,68,0.25);
}

#nav-brand {
  font-size:0.85rem;
  font-weight:bold;
  color:#ff1e3c;
  letter-spacing:0.2em;
  text-transform:uppercase;
  text-shadow:0 0 12px rgba(255,23,68,0.7);
}

#nav-links {
  display:flex;
  gap:28px;
  list-style:none;
}

#nav-links a {
  text-decoration:none;
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:rgba(0,255,100,0.7);
  transition:color 0.2s, text-shadow 0.2s;
  padding:4px 0;
  border-bottom:1px solid transparent;
}

#nav-links a:hover,
#nav-links a.active {
  color:#00ff64;
  text-shadow:0 0 10px rgba(0,255,100,0.8);
  border-bottom-color:rgba(0,255,100,0.5);
}

#nav-links .cta a {
  color:#ff1e3c;
  text-shadow:0 0 8px rgba(255,23,68,0.6);
  border:1px solid rgba(255,23,68,0.4);
  padding:4px 12px;
  border-radius:2px;
}

#nav-links .cta a:hover {
  background:rgba(255,23,68,0.12);
  border-color:rgba(255,23,68,0.8);
  color:#ff1e3c;
  text-shadow:0 0 14px rgba(255,23,68,0.9);
}

/* ── SPONSORS ── */
#sponsors {
  position:fixed;
  bottom:0; left:0; right:0;
  z-index:10;
  padding:14px 28px;
  background:linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0) 100%);
  border-top:1px solid rgba(255,23,68,0.2);
  display:flex;
  align-items:center;
  gap:20px;
}

#sponsors-label {
  font-size:1rem;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:rgba(255, 0, 0, 0.6);
  white-space:nowrap;
  flex-shrink:0;
}

#sponsors-logos {
  display:flex;
  align-items:center;
  gap:24px;
  overflow:hidden;
}

.sponsor-slot {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100px;
  min-width:80px;
  border:1px dashed rgba(0,255,100,0.25);
  border-radius:2px;
  padding:0 10px;
  font-size:0.62rem;
  letter-spacing:0.12em;
  color:rgba(0,255,100,0.35);
  text-transform:uppercase;
  transition:border-color 0.2s, color 0.2s;
}

.sponsor-slot:hover {
  border-color:rgba(0,255,100,0.55);
  color:rgba(0,255,100,0.7);
}

/* Logos images dans les slots :
.sponsor-slot img {
  height:28px; width:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.8);
  opacity:0.6; transition:opacity 0.2s;
}
.sponsor-slot img:hover { opacity:1; } */

/* ══════════════════════════════════════
   PAGE ACCUEIL
══════════════════════════════════════ */
#center {
  position:fixed;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  flex-direction:column;
}

#titre {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  margin-bottom:18px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}

#num {
  font-size:clamp(1.2rem,3vw,2rem);
  font-weight:bold;
  color:#ff1e3c;
  text-shadow:0 0 18px rgba(255,23,68,0.8);
}

#date {
  font-size:clamp(0.85rem,1.8vw,1rem);
  color:rgba(0,255,100,1);
  letter-spacing:0.15em;
}

#logo {
  width:min(600px,78vw);
  animation:glow 3s ease-in-out infinite;
}

@keyframes glow {
  0%,100% { filter:drop-shadow(0 0 25px rgba(255,23,68,0.7)) drop-shadow(0 0 60px rgba(255,23,68,0.3)); }
  50%      { filter:drop-shadow(0 0 50px rgba(255,23,68,1))   drop-shadow(0 0 100px rgba(255,23,68,0.5)); }
}

/* ══════════════════════════════════════
   PAGE INSCRIPTION
══════════════════════════════════════ */
#page-inscription {
  position:fixed;
  inset:0;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:center;
}

#panel {
  width:min(520px, 90vw);
  border:1px solid rgba(255,23,68,0.35);
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(4px);
  padding:40px 44px 36px;
  position:relative;
  text-align:center;
}

#panel::before {
  content:'';
  position:absolute;
  top:-1px; left:-1px;
  width:28px; height:28px;
  border-top:2px solid #ff1e3c;
  border-left:2px solid #ff1e3c;
}

#panel::after {
  content:'';
  position:absolute;
  bottom:-1px; right:-1px;
  width:28px; height:28px;
  border-bottom:2px solid #ff1e3c;
  border-right:2px solid #ff1e3c;
}

.prompt {
  font-size:0.68rem;
  color:rgba(0,255,100,0.45);
  letter-spacing:0.15em;
  margin-bottom:14px;
}

#panel h1 {
  font-size:clamp(1.2rem,3vw,1.7rem);
  font-weight:bold;
  color:#ff1e3c;
  text-shadow:0 0 20px rgba(255,23,68,0.7);
  letter-spacing:0.12em;
  text-transform:uppercase;
  line-height:1.2;
  margin-bottom:8px;
}

.meta {
  font-size:0.75rem;
  color:rgba(0,255,100,0.7);
  letter-spacing:0.12em;
  margin-bottom:28px;
}

.sep {
  border:none;
  border-top:1px solid rgba(255,23,68,0.2);
  margin:0 0 26px;
}

.description {
  font-size:1rem;
  color:rgb(0, 255, 102);
  letter-spacing:0.07em;
  line-height:1.8;
  margin-bottom:32px;
}

#cta-btn {
  display:inline-block;
  padding:15px 36px;
  background:transparent;
  border:1px solid rgba(255,23,68,0.65);
  color:#ff1e3c;
  font-family:'Courier New', monospace;
  font-size:0.85rem;
  font-weight:bold;
  letter-spacing:0.22em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background 0.2s, box-shadow 0.2s, border-color 0.2s;
  animation:pulse-btn 2.5s ease-in-out infinite;
}

#cta-btn:hover {
  background:rgba(255,23,68,0.14);
  border-color:#ff1e3c;
  box-shadow:0 0 24px rgba(255,23,68,0.4), inset 0 0 24px rgba(255,23,68,0.06);
  animation:none;
}

@keyframes pulse-btn {
  0%,100% { box-shadow:0 0 8px rgba(255,23,68,0.2); }
  50%      { box-shadow:0 0 22px rgba(255,23,68,0.5); }
}

.note {
  margin-top:18px;
  font-size:0.62rem;
  color:rgba(0,255,100,0.3);
  letter-spacing:0.1em;
}