/* =============================================================================
   HackerLab — DESIGN SYSTEM COMMUN  (chargé globalement dans base.html)
   Style adapté du site vitrine HackerLab 2026.
   ============================================================================= */

:root{
  --red:#ef121b; --red-dim:#c00f16; --red-dark:#660a0e;
  --bg:#0a0b14; --bg2:#0e0f1a; --panel:rgba(10,11,20,.62); --panel2:rgba(18,19,30,.7);
  --line:rgba(255,255,255,.13); --ink:#eef1fb; --muted:#a7add0; --dim:#6874a0;
  --gold:#ffd700; --silver:#c0c0c0; --bronze:#cd7f32;
  --tervalis:#ff5a2b;
  --fd:"Orbitron",sans-serif; --fm:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace; --fb:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}

/* ---------- fond global immersif (Three.js canvas) ---------- */
html{ background:var(--bg) !important; }
body{ background:transparent !important; color:var(--ink); font-family:var(--fb); line-height:1.7; }
#bg-canvas{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; opacity:0.4; }
main{ position:relative; min-height:calc(100vh - 7rem); }
.hlb-mute{position:fixed;bottom:16px;left:16px;z-index:1060;width:36px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:50%;background:rgba(10,11,20,.7);backdrop-filter:blur(4px);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;line-height:1;padding:0}
.hlb-mute:hover{border-color:var(--red,#ef121b);background:rgba(10,11,20,.9)}
.hlb-mute.off{opacity:.5}
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ margin:0; font-family:var(--fd); font-weight:800; }
:focus-visible{ outline:2px solid var(--red); outline-offset:3px; }

/* =========================== NAVBAR (CTFd) ============================ */
.navbar.bg-dark, nav.navbar{
  background:rgba(8,9,16,.92) !important;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); box-shadow:none;
  min-height:3.5rem; padding-top:.3rem; padding-bottom:.3rem;
}
.navbar .navbar-brand{
  font-family:var(--fd) !important; font-weight:900; letter-spacing:.14em;
  text-transform:uppercase; color:#fff !important; text-shadow:0 0 12px rgba(239,18,27,.4);
}
.navbar .navbar-brand::before{ content:none; }
.navbar .nav-link{
  font-family:var(--fm) !important; font-weight:400; font-size:.84rem;
  letter-spacing:.05em; color:var(--muted) !important; transition:color .2s, text-shadow .2s;
}
.navbar .nav-link:hover, .navbar .nav-link:focus, .navbar .nav-link.active{
  color:#fff !important; text-shadow:0 0 8px var(--red);
}
.navbar-dark .navbar-toggler{ border-color:var(--line); }
.navbar .dropdown-menu{ background:rgba(10,11,20,.95); border:1px solid var(--line); border-radius:8px; backdrop-filter:blur(10px); }
.navbar .dropdown-item{ font-family:var(--fm); font-size:.84rem; letter-spacing:.04em; color:var(--muted); }
.navbar .dropdown-item:hover, .navbar .dropdown-item:focus{ background:rgba(239,18,27,.08); color:#fff; }
.navbar .dropdown-divider{ border-color:var(--line); }
.theme-switch{ display:none !important; }

/* =========================== FOOTER (CTFd) ============================ */
.footer{
  background:rgba(8,9,16,.82) !important;
  border-top:1px solid var(--line); box-shadow:none; padding:16px 0; position:relative; z-index:1;
}
.footer .text-muted{ color:#8890b0 !important; font-family:var(--fm) !important; letter-spacing:.05em; font-size:.72rem; }
.footer .text-muted::before{ content:none; }

/* ==================================================================== */
/*  BRIQUES PARTAGÉES                                                    */
/* ==================================================================== */

/* en-tête de page : eyebrow + titre */
.eyebrow{ font-family:var(--fm); font-size:.68rem; letter-spacing:.2em; color:var(--red); text-transform:uppercase; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.eyebrow::before{ content:""; width:56px; height:2px; background:var(--red); box-shadow:0 0 10px var(--red); }
.hl-title{ font-family:var(--fd); font-weight:800; font-size:clamp(1.5rem,4vw,2.1rem); letter-spacing:.005em; margin-bottom:26px; color:#fff; text-shadow:0 0 10px rgba(239,18,27,.5); }
.hl-title::after{ content:""; display:block; width:56px; height:2px; margin-top:.55rem; background:var(--red); box-shadow:0 0 10px var(--red); }
.hl-title .accent{ color:var(--red); }

/* panneau (card style) */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:clamp(1.3rem,3vw,1.9rem); position:relative; backdrop-filter:blur(2px); }
.brk::before,.brk::after,.brk>.bi::before,.brk>.bi::after{ content:none; }

/* tampon "classified" */
.stamp{ font-family:var(--fd); font-size:.7rem; font-weight:700; color:var(--red); border:2px solid var(--red); display:inline-block; padding:.25rem .8rem; letter-spacing:.25em; transform:rotate(-3deg); opacity:.85; border-radius:4px; }

/* bouton + champ de recherche */
.hl-btn{ font-family:var(--fd); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:transparent; border:1px solid rgba(239,18,27,.4); border-radius:8px; padding:.7rem 1.4rem; cursor:pointer; position:relative; overflow:hidden; clip-path:none; transition:box-shadow .25s, border-color .25s, transform .25s; box-shadow:0 0 20px rgba(239,18,27,.15); }
.hl-btn:hover{ box-shadow:0 0 24px rgba(239,18,27,.32); border-color:var(--red); transform:translateY(-2px); }
.search{ font-family:var(--fm); font-size:.84rem; color:var(--ink); background:rgba(0,0,0,.5); border:1px solid var(--line); border-radius:8px; padding:.7rem 1rem; width:260px; max-width:70vw; clip-path:none; }
.search:focus{ outline:none; border-color:var(--red); box-shadow:0 0 14px rgba(239,18,27,.25); }
.search::placeholder{ color:var(--dim); }

/* table mono */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--fm); }
.tbl thead th{ font-size:.62rem; letter-spacing:.16em; color:var(--red); text-transform:uppercase; text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); white-space:nowrap; }
.tbl tbody td{ font-size:.82rem; color:var(--ink); padding:13px 14px; border-bottom:1px solid rgba(255,255,255,.05); }
.tbl tbody tr{ transition:background .2s, border-color .25s; }
.tbl tbody tr:hover{ background:rgba(239,18,27,.06); }
.tbl .rk{ font-family:var(--fd); font-weight:700; color:var(--muted); }
.tbl tr.me{ background:rgba(239,18,27,.08); }
.tbl tr.me td:first-child{ color:var(--red); box-shadow:inset 2px 0 0 var(--red); }
.rk.g{ color:var(--gold); } .rk.s{ color:var(--silver); } .rk.b{ color:var(--bronze); }
.pts{ color:#fff; }
.tbl a, .hl-page a{ color:#fff !important; text-decoration:none; } .tbl a:hover{ color:var(--red) !important; }
.tag-nat{ font-family:var(--fm); font-size:.62rem; letter-spacing:.12em; padding:2px 8px; border:1px solid currentColor; border-radius:4px; text-transform:uppercase; }
.n-terv{ color:var(--tervalis); } .n-norv{ color:#8B7CF6; } .n-vald{ color:var(--gold); } .n-varel{ color:var(--silver); }

/* podium */
.podium{ display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:1.1rem; align-items:end; margin-bottom:26px; }
@media(max-width:760px){ .podium{ grid-template-columns:1fr; align-items:stretch; } }
.pod{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:1.7rem 1.3rem; text-align:center; position:relative; overflow:hidden; backdrop-filter:blur(2px); }
.pod::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,currentColor,transparent); }
.pod.p1{ color:var(--gold); border-color:rgba(239,18,27,.55); box-shadow:0 0 34px rgba(239,18,27,.2); padding-top:2.2rem; padding-bottom:2.2rem; }
.pod.p2{ color:var(--silver); } .pod.p3{ color:var(--bronze); }
.pod .rank{ font-family:var(--fd); font-weight:900; font-size:2.4rem; line-height:1; text-shadow:0 0 24px currentColor; }
.pod.p1 .rank{ color:var(--red); text-shadow:0 0 14px rgba(239,18,27,.6); }
.pod .tm{ font-family:var(--fd); font-weight:700; font-size:1rem; color:#fff; margin:8px 0 4px; letter-spacing:.03em; }
.pod .sc{ font-family:var(--fm); font-size:.85rem; color:#fff; }
.pod .pl{ font-family:var(--fm); font-size:.58rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; margin-top:6px; }

/* chart */
.chartbox{ margin-bottom:26px; }
.hl-chart{ width:100%; height:200px; display:block; }
.hl-legend{ display:flex; gap:16px; flex-wrap:wrap; margin-top:10px; }
.hl-legend span{ font-family:var(--fm); font-size:.62rem; color:var(--muted); display:flex; align-items:center; gap:6px; letter-spacing:.08em; }
.hl-legend i{ width:14px; height:2px; }

/* profil / équipe : header + stats + membres */
.prof-head{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; }
.avatar{ width:92px; height:92px; flex:none; display:grid; place-items:center; border:2px solid var(--red); background:rgba(10,11,20,.62); position:relative; border-radius:8px; clip-path:none; }
.avatar svg{ width:52px; height:52px; }
.avatar.team{ border-color:var(--red); border-radius:50%; font-family:var(--fd); font-weight:900; font-size:1.6rem; color:var(--red); text-shadow:0 0 10px rgba(239,18,27,.5); }
.prof-id .h{ font-family:var(--fd); font-weight:700; font-size:1.6rem; letter-spacing:.03em; color:#fff; }
.prof-id .sub{ font-family:var(--fm); font-size:.8rem; color:var(--red); letter-spacing:.1em; margin-top:5px; }
.prof-id .sub b{ color:#fff; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px; margin-bottom:26px; }
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:16px 18px; backdrop-filter:blur(2px); }
.stat b{ font-family:var(--fd); font-weight:700; font-size:1.7rem; display:block; line-height:1; color:#fff; }
.stat.acc b{ color:#fff; }
.stat span{ font-family:var(--fm); font-size:.58rem; letter-spacing:.16em; color:var(--muted); text-transform:uppercase; margin-top:8px; display:block; }
.members{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-bottom:26px; }
.member{ background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:12px; backdrop-filter:blur(2px); transition:border-color .25s, box-shadow .25s; }
.member:hover{ border-color:var(--red); box-shadow:0 0 20px rgba(239,18,27,.15); }
.member .ma{ width:40px; height:40px; border-radius:50%; flex:none; background:rgba(239,18,27,.08); border:1px solid rgba(239,18,27,.4); display:grid; place-items:center; font-family:var(--fd); font-weight:700; font-size:.8rem; color:var(--red); }
.member .mn{ font-family:var(--fd); font-weight:600; font-size:.95rem; }
.member .mr{ font-family:var(--fm); font-size:.62rem; color:var(--muted); letter-spacing:.1em; margin-top:2px; }
.member .ms{ margin-left:auto; font-family:var(--fm); font-size:.8rem; color:#fff; }

/* notifications */
.notes{ display:flex; flex-direction:column; gap:14px; }
.note{ background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--red); border-radius:0 8px 8px 0; padding:16px 18px; position:relative; backdrop-filter:blur(2px); }
.note .nh{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.note .nt{ font-family:var(--fd); font-weight:700; font-size:1rem; letter-spacing:.02em; }
.note .beacon{ font-family:var(--fm); font-size:.55rem; letter-spacing:.2em; color:var(--red); border:1px solid var(--red); padding:2px 7px; border-radius:4px; text-transform:uppercase; }
.note .ntime{ margin-left:auto; font-family:var(--fm); font-size:.65rem; color:var(--muted); }
.note .nb{ font-family:var(--fm); font-size:.82rem; color:#c9c7e0; line-height:1.7; }
.note.unread::after{ content:""; position:absolute; top:14px; right:14px; width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 8px var(--red); }

/* utilitaires de section */
.section-sub{ font-family:var(--fm); font-size:.68rem; letter-spacing:.2em; color:var(--red); text-transform:uppercase; margin:2rem 0 .2rem; }
.toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.toolbar .count{ font-family:var(--fm); font-size:.66rem; color:var(--muted); letter-spacing:.1em; margin-left:auto; }
.hl-page{ max-width:1160px; margin:0 auto; padding:34px clamp(1.1rem,4vw,2rem) 70px; }
.hl-empty{ font-family:var(--fm); color:var(--muted); text-align:center; padding:40px; }

/* inline code */
code{ background:rgba(0,0,0,.5); padding:.15rem .5rem; border-radius:4px; color:#fff; border:1px solid rgba(239,18,27,.35); font-size:.9em; }

/* ==================================================================== */
/*  OVERLAY BOOTSTRAP (pages pas encore refaites : settings, etc.)       */
/* ==================================================================== */
main h1, main h2, main h3, .jumbotron h1{ font-family:var(--fd); letter-spacing:1px; }
main h2::after{ content:""; display:block; width:56px; height:2px; margin-top:.55rem; background:var(--red); box-shadow:0 0 10px var(--red); }
.jumbotron{ background:var(--panel) !important; border:1px solid var(--line); border-radius:8px; color:var(--ink) !important; }
.jumbotron h1{ color:#fff !important; text-shadow:0 0 10px rgba(239,18,27,.5); }
.table{ --bs-table-color:var(--ink); --bs-table-bg:transparent; --bs-table-border-color:var(--line); }
.table thead th{ font-family:var(--fd); text-transform:uppercase; letter-spacing:1px; font-size:.8rem; color:var(--red) !important; border-bottom:1px solid var(--line) !important; }
.table-striped>tbody>tr:nth-of-type(odd)>*{ --bs-table-bg-type:rgba(255,255,255,.02); }
.table-hover>tbody>tr:hover>*{ --bs-table-bg-state:rgba(239,18,27,.06); }
.nav-pills .nav-link{ color:var(--muted); font-family:var(--fm); letter-spacing:.05em; }
.nav-pills .nav-link.active{ background:var(--red) !important; color:#fff !important; }
.badge.bg-primary,.badge.text-bg-primary{ background:var(--red) !important; color:#fff !important; }
.badge.bg-secondary,.badge.text-bg-secondary{ background:rgba(255,255,255,.06) !important; color:var(--muted) !important; border:1px solid var(--line); }
.badge.text-bg-light{ background:rgba(255,255,255,.06) !important; color:var(--ink) !important; }
.progress{ background:rgba(255,255,255,.06) !important; border:1px solid var(--line); border-radius:6px; }
.progress-bar{ background:var(--red) !important; color:#fff; }
.form-control,.form-select,.form-control.bg-white{ background:rgba(0,0,0,.5) !important; border-color:var(--line) !important; color:var(--ink) !important; border-radius:6px !important; }
.form-control:focus,.form-select:focus{ border-color:var(--red) !important; box-shadow:0 0 0 .2rem rgba(239,18,27,.18) !important; }
.form-label{ color:var(--muted); font-family:var(--fm); text-transform:uppercase; letter-spacing:.05em; font-size:.82rem; }
.btn-primary{ background:transparent !important; border-color:rgba(239,18,27,.4) !important; color:#fff !important; font-family:var(--fm); letter-spacing:.05em; border-radius:8px !important; box-shadow:0 0 20px rgba(239,18,27,.15); transition:box-shadow .25s, border-color .25s, transform .25s; }
.btn-primary:hover,.btn-primary:focus{ background:rgba(239,18,27,.1) !important; border-color:var(--red) !important; color:#fff !important; box-shadow:0 0 24px rgba(239,18,27,.32); transform:translateY(-2px); }
.btn-danger{ background:transparent !important; border-color:var(--red) !important; color:var(--red) !important; border-radius:8px !important; }
.btn-danger:hover{ background:var(--red) !important; color:#fff !important; }
.btn-outline-secondary{ border-color:var(--line) !important; color:var(--muted) !important; border-radius:8px !important; }
main a:not(.btn):not(.nav-link):not(.navbar-brand){ color:var(--red); }
main a:not(.btn):not(.nav-link):not(.navbar-brand):hover{ color:#fff; text-shadow:0 0 8px var(--red); }
/* modales */
.modal-content{ background:rgba(10,11,20,.95) !important; border:1px solid var(--line) !important; border-radius:8px !important; backdrop-filter:blur(10px); }
.modal-header, .modal-footer{ border-color:var(--line) !important; }
.modal-header h2, .modal-title{ font-family:var(--fd); font-weight:700; font-size:1.1rem; letter-spacing:.04em; }
.btn-close{ filter:invert(1) grayscale(1); opacity:.6; }

/* scroll-reveal animation */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){ .reveal{ opacity:1 !important; transform:none !important; } }

/* =========================== PAGES D'ERREUR ============================ */
.ops-gate{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:70vh; text-align:center; padding:2rem;
}
.ops-gate .stamp{
  display:inline-block; border:2px solid var(--red); color:var(--red);
  font-family:var(--fd); font-weight:900; text-transform:uppercase;
  letter-spacing:.18em; padding:.4em 1.6em; font-size:clamp(.7rem,1.6vw,.95rem);
  transform:rotate(-3deg); opacity:.85; margin-bottom:2rem;
}
.ops-gate h1{
  font-family:var(--fd); font-weight:900; font-size:clamp(1.5rem,4vw,2.6rem);
  color:var(--ink); line-height:1.2; margin-bottom:1rem;
  text-shadow:0 0 30px rgba(239,18,27,.25);
}
.ops-gate .brief{
  font-family:var(--fm); color:var(--muted); font-size:clamp(.85rem,1.4vw,1rem);
  max-width:520px; line-height:1.7;
}
.ops-gate .sep{
  width:60px; height:2px; background:var(--red); margin:1.5rem auto; opacity:.5;
}
.ops-gate .code{
  font-family:var(--fm); font-size:.75rem; color:var(--dim);
  letter-spacing:.1em; margin-top:1.5rem;
}