* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
a { color: inherit; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 238px; display: flex; flex-direction: column;
  padding: 24px 14px 18px; border-right: 1px solid var(--helio-line);
  background: rgba(9, 11, 13, .94); backdrop-filter: blur(16px); z-index: 5;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 24px; text-decoration: none; font-weight: 800; letter-spacing: .16em; font-size: 15px; }
.brand-mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--helio-accent); color: var(--helio-accent); font-family: var(--helio-mono);
  clip-path: polygon(15% 0, 100% 0, 100% 75%, 83% 100%, 0 100%, 0 18%);
}
#menu { display: grid; gap: 2px; overflow-y: auto; padding-right: 2px; }
#menu .group { margin: 16px 10px 6px; font: 500 10px var(--helio-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--helio-muted); }
#menu .group:first-child { margin-top: 0; }
#menu a {
  display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 7px;
  text-decoration: none; color: #c7cec9; font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
}
#menu a span { width: 16px; text-align: center; color: var(--helio-muted); font-family: var(--helio-mono); }
#menu a:hover { background: var(--helio-panel); color: var(--helio-text); }
#menu a.active { background: var(--helio-panel-2); border-color: var(--helio-line); color: var(--helio-accent); }
#menu a.active span { color: var(--helio-accent); }

.sidebar-foot { margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--helio-line); display: grid; gap: 10px; }
.status-line { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--helio-muted); }
.status-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--helio-amber); flex: none; }
.status-line i.on { background: var(--helio-green); box-shadow: 0 0 10px rgba(117, 240, 170, .5); }
.status-line i.off { background: var(--helio-red); }
.legal-line { margin-top: 6px; font-size: 10px; color: var(--helio-muted); }
.legal-line a, .login-card small a { color: var(--helio-muted); text-decoration: underline; }

main#frames { position: fixed; inset: 0 0 0 238px; }
main#frames iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--helio-bg); }
main#frames iframe[hidden] { display: none; }


@media (max-width: 760px) {
  .sidebar { inset: 0 0 auto 0; width: auto; height: auto; max-height: 52vh; padding: 12px; border-right: 0; border-bottom: 1px solid var(--helio-line); }
  .brand { padding-bottom: 10px; }
  #menu { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  #menu .group { grid-column: 1 / -1; margin: 8px 6px 2px; }
  .sidebar-foot { display: none; }
  main#frames { inset: 0; top: var(--sidebar-height, 52vh); }
}

/* Connexion et niveaux d'abonnement */
#menu a.locked { opacity: .5; }
#menu a.locked::after { content: "🔒"; margin-left: auto; font-size: 11px; }
#menu [hidden] { display: none !important; }
.user-line { display: flex; align-items: center; gap: 8px; font: 11px var(--helio-mono); color: var(--helio-muted); }
.user-line b { color: var(--helio-accent); font-weight: 500; }
.user-line button { margin-left: auto; border: 1px solid var(--helio-line); background: transparent; color: var(--helio-muted); border-radius: 5px; cursor: pointer; padding: 2px 6px; }
/* display: grid annulerait l'attribut hidden : l'écran ne s'affiche que pour un visiteur non connecté. */
.login[hidden] { display: none; }
.login { position: fixed; inset: 0; z-index: 20; display: flex; overflow-y: auto; padding: 16px; background: radial-gradient(circle at 70% 0%, rgba(184, 255, 61, .08), transparent 40%), var(--helio-bg); }
.login-wrap { margin: auto; width: min(560px, 100%); display: grid; gap: 16px; justify-items: center; }
.login-card { width: min(420px, 100%); display: grid; gap: 14px; justify-items: center; text-align: center; padding: 34px 28px; border: 1px solid var(--helio-line); border-radius: 14px; background: var(--helio-panel); }
.login-card h1 { margin: 0; letter-spacing: .16em; font-size: 22px; }
.login-card p { margin: 0; color: var(--helio-muted); font-size: 13px; }
.login-card small { color: var(--helio-muted); font: 10px/1.6 var(--helio-mono); }
.wallet-buttons { display: grid; gap: 8px; width: 100%; }
.wallet-buttons button, .wallet-buttons a { display: block; height: 42px; line-height: 40px; border: 1px solid var(--helio-line); border-radius: 8px; background: #0c0f12; color: var(--helio-text); font: 600 13px var(--helio-sans); cursor: pointer; text-decoration: none; }
.wallet-buttons button:hover { border-color: var(--helio-accent); }
.login-error { color: var(--helio-red) !important; }

#menu #enrichment-toggle{display:flex;align-items:center;gap:11px;padding:8px 10px;border:1px solid transparent;border-radius:7px;background:transparent;color:#c7cec9;font:600 13.5px var(--helio-sans,sans-serif);text-align:left;cursor:pointer;width:100%}#menu #enrichment-toggle:hover{background:var(--helio-panel);color:var(--helio-text)}#menu #enrichment-toggle>span{width:16px;text-align:center;color:var(--helio-muted);font-family:var(--helio-mono)}#enrichment-unread{margin-left:auto}#menu #enrichment-toggle[hidden],#enrichment-unread[hidden]{display:none}#enrichment-unread{display:grid;place-items:center;min-width:19px;height:19px;padding:0 5px;border-radius:20px;background:var(--helio-accent,#d4ff00);color:#090b0d;font-size:11px}
#enrichment-panel{position:fixed;inset:0 0 0 auto;margin:0;width:min(480px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;border:0;border-left:1px solid var(--helio-line);padding:22px;background:var(--helio-bg,#090b0d);color:var(--helio-text,#fff);overflow-y:auto;font:13px/1.6 var(--helio-font,sans-serif)}#enrichment-panel::backdrop{background:#0007}#enrichment-panel header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}#enrichment-panel h2{margin:0;font-size:20px}#enrichment-panel header p,#enrichment-next,#enrichment-panel small{color:var(--helio-muted,#9aa5a5);font-size:11px}#enrichment-close{border:1px solid var(--helio-line);border-radius:6px;background:transparent;color:inherit;font-size:22px;padding:0 9px;cursor:pointer}#enrichment-error{color:var(--helio-red,#ffab97)}#enrichment-list{display:grid;gap:7px;max-height:240px;overflow:auto;margin:18px 0}#enrichment-list button{display:grid;gap:3px;text-align:left;border:1px solid var(--helio-line);border-radius:7px;padding:10px;background:var(--helio-panel,#121819);color:inherit;cursor:pointer}#enrichment-list button.unread{border-left:3px solid var(--helio-accent,#d4ff00)}#enrichment-detail{border-top:1px solid var(--helio-line);padding-top:12px}#enrichment-detail details{border-block-end:1px solid var(--helio-line);padding:10px 0}#enrichment-detail summary{cursor:pointer;display:flex;justify-content:space-between;gap:8px}#enrichment-detail summary b{color:var(--helio-accent,#d4ff00)}#enrichment-detail ul{padding-left:16px;max-height:350px;overflow:auto}#enrichment-detail li{margin-bottom:12px;overflow-wrap:anywhere}#enrichment-detail a{color:var(--helio-accent,#d4ff00)}#enrichment-detail li small{display:block}.enrichment-queues{margin-top:18px}

/* Guide de bienvenue (onboarding.js) */
.tour { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(5, 7, 9, .72); backdrop-filter: blur(3px); animation: tour-fade .2s ease-out; }
.tour.tour-out { opacity: 0; transition: opacity .25s; }
.tour-card { position: relative; overflow: hidden; width: min(420px, 100%); padding: 28px 24px 20px; border: 1px solid var(--helio-line); border-radius: 18px; background: var(--helio-panel); color: var(--helio-text); font-family: var(--helio-sans); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
.tour-pop { animation: tour-pop .35s cubic-bezier(.2, 1.4, .4, 1); }
.tour-icon { font-size: 44px; line-height: 1; margin-bottom: 10px; animation: tour-bob 2.4s ease-in-out infinite; }
.tour-card h2 { margin: 0 0 8px; font-size: 20px; }
.tour-text { margin: 0 0 18px; color: var(--helio-muted); line-height: 1.55; }
.tour-text b { color: var(--helio-text); }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.tour-dots i { width: 7px; height: 7px; border-radius: 99px; background: var(--helio-line); transition: all .2s; }
.tour-dots i.done { background: var(--helio-green); }
.tour-dots i.on { width: 22px; background: var(--helio-accent); }
.tour-actions { display: flex; align-items: center; gap: 8px; }
.tour-actions span { flex: 1; }
.tour-actions button { padding: 9px 14px; border: 1px solid var(--helio-line); border-radius: 10px; background: transparent; color: var(--helio-text); font: 600 14px var(--helio-sans); cursor: pointer; }
.tour-actions .tour-skip { border-color: transparent; color: var(--helio-muted); }
.tour-actions .tour-next { border-color: var(--helio-accent); background: var(--helio-accent); color: #0b0d0f; }
.tour-confetti { position: absolute; top: -10px; width: 7px; height: 11px; border-radius: 2px; animation: tour-fall 1.4s ease-in forwards; }
/* Pendant le guide, la barre latérale passe devant le voile : seule l'entrée commentée ressort. */
body.tour-open .sidebar { z-index: 51; }
body.tour-open #menu > *:not(.tour-glow) { opacity: .3; transition: opacity .2s; }
#menu a.tour-glow { position: relative; border-color: var(--helio-accent); color: var(--helio-accent); box-shadow: 0 0 0 3px rgba(184, 255, 61, .18), 0 0 18px rgba(184, 255, 61, .35); animation: tour-glow 1.4s ease-in-out infinite; }
@keyframes tour-fade { from { opacity: 0; } }
@keyframes tour-pop { from { transform: scale(.92) translateY(8px); opacity: 0; } }
@keyframes tour-bob { 50% { transform: translateY(-5px) rotate(-4deg); } }
@keyframes tour-glow { 50% { box-shadow: 0 0 0 5px rgba(184, 255, 61, .1), 0 0 26px rgba(184, 255, 61, .5); } }
@keyframes tour-fall { to { transform: translate(var(--drift), 420px) rotate(540deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tour, .tour-pop, .tour-icon, #menu a.tour-glow { animation: none; } }

/* Achat d'un accès (écran de connexion) */
.login-code { width: 100%; padding: 9px 10px; border: 1px solid var(--helio-line); border-radius: 8px; background: var(--helio-bg); color: inherit; font: 12px var(--helio-mono); text-align: center; letter-spacing: .06em; }
.buy-access { border: 1px dashed var(--helio-line); background: none; color: var(--helio-muted); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 12px; }
.buy-access:hover { color: inherit; border-color: var(--helio-accent, #b8ff3d); }
.checkout[hidden] { display: none; }
.checkout { width: 100%; text-align: left; display: grid; gap: 10px; font-size: 12px; }
.checkout h3 { margin: 0 0 2px; font-size: 13px; }
.checkout p { margin: 0; }
.checkout-plans { display: grid; gap: 12px; }
.plan-row { display: flex; gap: 8px; margin-top: 6px; }
.plan { flex: 1; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--helio-line); border-radius: 8px; background: var(--helio-bg); color: inherit; cursor: pointer; }
.plan:hover { border-color: var(--helio-accent, #b8ff3d); }
.plan span { color: var(--helio-muted); font: 11px var(--helio-mono); }
.checkout input { width: 100%; padding: 8px; border: 1px solid var(--helio-line); border-radius: 8px; background: var(--helio-bg); color: inherit; font: 12px var(--helio-mono); }
.checkout-order { display: grid; gap: 8px; }
.checkout-amount { font: 600 24px var(--helio-mono); text-align: center; }
.checkout-copy { display: flex; gap: 6px; }
.checkout-copy button { padding: 0 10px; border: 1px solid var(--helio-line); border-radius: 8px; background: none; color: inherit; cursor: pointer; }
.checkout-copy.code input { font-size: 15px; text-align: center; letter-spacing: .08em; }
.checkout-rules { margin: 0; padding-left: 16px; color: var(--helio-muted); display: grid; gap: 4px; }
.checkout-pay { text-align: center; padding: 8px; border: 1px solid var(--helio-line); border-radius: 8px; color: inherit; text-decoration: none; }
.checkout-ok { color: var(--helio-green, #3ddc84) !important; }
.checkout .link { background: none; border: none; color: var(--helio-muted); text-decoration: underline; cursor: pointer; padding: 0; justify-self: start; }
.checkout .primary { padding: 9px; border-radius: 8px; border: none; background: var(--helio-accent, #b8ff3d); color: #0b0d0a; font-weight: 600; cursor: pointer; }
.wallet-buttons button img { width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; border-radius: 4px; }
.link-button { border: 0; background: none; color: var(--helio-muted); font: 12px var(--helio-sans); text-decoration: underline; cursor: pointer; padding: 0; }
.link-button:hover { color: var(--helio-text); }
.preview { width: 100%; padding: 18px 20px; border: 1px solid var(--helio-line); border-radius: 14px; background: var(--helio-panel); display: grid; gap: 14px; }
.preview header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.preview h2 { margin: 0; font-size: 14px; letter-spacing: .04em; }
.preview header span, .preview p { color: var(--helio-muted); font: 11px var(--helio-mono); margin: 0; }
.preview h3 { margin: 0 0 6px; font-size: 12px; color: var(--helio-muted); font-weight: 600; }
.preview table { width: 100%; border-collapse: collapse; font: 12px var(--helio-mono); }
.preview th { text-align: left; color: var(--helio-muted); font-weight: 400; padding: 4px 6px; border-bottom: 1px solid var(--helio-line); }
.preview td { padding: 5px 6px; border-bottom: 1px solid var(--helio-line); white-space: nowrap; }
.preview td img { width: 16px; height: 16px; border-radius: 50%; vertical-align: -3px; margin-right: 6px; }
.preview .up { color: var(--helio-accent); } .preview .down { color: var(--helio-red); }
.preview .masked { color: var(--helio-muted); letter-spacing: .1em; }
@media (max-width: 460px) { .preview th:nth-child(4), .preview td:nth-child(4) { display: none; } }