/* lofigangs.store — feuille de style commune */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=JetBrains+Mono:wght@500;700&family=Inter:wght@400;600&display=swap');

:root{
  --ink:#0F171C;
  --ink-soft:#16222A;
  --line:#26363F;
  --text:#E9EDEF;
  --muted:#9FB0BA;
  --accent:#FF3DA1;
  --maxw:760px;
}

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

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation:none !important; transition:none !important; } }

body{
  background:var(--ink);
  color:var(--text);
  font-family:"Inter", system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

/* ---- En-tête : icône de l'app + nom de l'app, sur toutes les pages ---- */
.topbar{
  border-bottom:1px solid var(--line);
  background:var(--ink-soft);
  position:sticky; top:0; z-index:10;
}
.topbar .wrap{
  display:flex; align-items:center; gap:14px;
  height:72px;
}
.appicon{
  width:40px; height:40px; border-radius:10px; flex:none;
  display:block; background:var(--ink);
}
.wordmark{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:800; font-size:26px; letter-spacing:-.02em;
  color:var(--text); text-decoration:none;
}
.topbar nav{ margin-left:auto; display:flex; gap:22px; }
.topbar nav a{
  font-family:"JetBrains Mono", monospace;
  font-weight:500; font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); text-decoration:none;
}
.topbar nav a:hover, .topbar nav a[aria-current="page"]{ color:var(--accent); }

/* ---- Bandeau de titre de page ---- */
.pagehead{ padding:64px 0 40px; border-bottom:1px solid var(--line); }
.pagehead .slug{
  font-family:"JetBrains Mono", monospace;
  font-weight:700; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px;
}
.pagehead .slug span{ color:var(--accent); margin:0 .6em; }

.pagehead .titleblock{ display:flex; align-items:flex-start; gap:18px; }
.pagehead .titleicon{ width:56px; height:56px; border-radius:14px; flex:none; margin-top:6px; }

h1{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:800; font-size:clamp(34px, 6vw, 54px);
  line-height:1.02; letter-spacing:-.03em;
}
.pagehead p.lede{ color:var(--muted); margin-top:20px; font-size:18px; }

/* ---- Corps ---- */
main{ padding:48px 0 96px; }

h2{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:800; font-size:24px; letter-spacing:-.015em;
  margin:52px 0 14px; padding-top:8px;
}
h2 .num{
  font-family:"JetBrains Mono", monospace;
  font-weight:700; font-size:14px; color:var(--accent);
  display:block; margin-bottom:8px; letter-spacing:.1em;
}
h3{
  font-family:"Inter", sans-serif; font-weight:600; font-size:18px;
  margin:26px 0 8px;
}
p{ margin-bottom:14px; }
ul{ margin:0 0 16px 22px; }
li{ margin-bottom:8px; }
a{ color:var(--accent); }
strong{ font-weight:600; color:#fff; }

.meta{
  font-family:"JetBrains Mono", monospace;
  font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:16px 18px; margin:32px 0;
}
.meta div{ margin-bottom:4px; }
.meta div:last-child{ margin-bottom:0; }

table{ width:100%; border-collapse:collapse; margin:16px 0 22px; font-size:15px; }
th, td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{
  font-family:"JetBrains Mono", monospace; font-weight:700;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}

/* ---- Accueil ---- */
.hero{ padding:88px 0 72px; }
.hero h1{ font-size:clamp(42px, 9vw, 82px); text-transform:uppercase; }
.hero .accentrule{ width:180px; height:6px; background:var(--accent); margin-bottom:28px; }
.hero p{ color:var(--muted); font-size:19px; max-width:56ch; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:16px; margin:44px 0; }
.card{ border:1px solid var(--line); padding:22px; background:var(--ink-soft); }
.card h3{ margin:0 0 8px; }
.card p{ color:var(--muted); font-size:15px; margin:0; }

footer{
  border-top:1px solid var(--line); padding:32px 0 56px;
  font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--muted);
}
footer a{ color:var(--muted); text-decoration:none; margin-right:20px; }
footer a:hover{ color:var(--accent); }
footer .brand{ color:var(--text); }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

@media (max-width:520px){
  .topbar nav{ gap:14px; }
  .topbar nav a{ font-size:11px; }
  .pagehead .titleicon{ width:40px; height:40px; }
}

/* ---- Connexion de compte ---- */
.connect{ padding:8px 0 24px; }
.connectbox{
  border:1px solid var(--line); background:var(--ink-soft);
  border-left:3px solid var(--accent);
  padding:34px 34px 30px;
}
.eyebrow{
  font-family:"JetBrains Mono", monospace;
  font-weight:700; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px;
}
.connecth{
  font-family:"Bricolage Grotesque", sans-serif;
  font-weight:800; font-size:30px; letter-spacing:-.02em; margin:0 0 12px;
}
.connectbox p{ color:var(--muted); max-width:60ch; }
.btn{
  display:inline-block; margin:18px 0 0;
  background:var(--accent); color:#0F171C; text-decoration:none;
  font-family:"Bricolage Grotesque", sans-serif; font-weight:800; font-size:18px;
  letter-spacing:-.01em; padding:15px 30px; border:0; cursor:pointer;
}
.btn:hover{ background:#ff5fb2; }
.btn.ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line); font-size:15px; padding:12px 22px;
}
.btn.ghost:hover{ color:var(--accent); border-color:var(--accent); background:transparent; }
.fineprint{
  font-family:"JetBrains Mono", monospace;
  font-size:12px; line-height:1.7; color:var(--muted);
  margin:20px 0 0 !important;
}

/* ---- Page de retour ---- */
.status{ display:flex; align-items:center; gap:18px; margin:8px 0 26px; }
.status .avatar{
  width:64px; height:64px; border-radius:50%; flex:none;
  background:var(--line); object-fit:cover;
}
.status .who{ font-family:"Bricolage Grotesque", sans-serif; font-weight:800; font-size:26px; letter-spacing:-.02em; }
.status .handle{ font-family:"JetBrains Mono", monospace; font-size:13px; color:var(--muted); }
.badge{
  display:inline-block; font-family:"JetBrains Mono", monospace;
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  padding:5px 11px; border:1px solid var(--accent); color:var(--accent);
}
.badge.err{ border-color:#FF6B4A; color:#FF6B4A; }
.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:8px; }