/* hoku.be — mise en page propre au hub */

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 80px); align-items: center;
  padding-top: clamp(56px, 10vh, 120px); padding-bottom: clamp(40px, 7vh, 80px);
}
.hero-logo {
  width: clamp(150px, 22vw, 260px); aspect-ratio: 1; border-radius: calc(var(--radius) * 1.6);
  background: var(--surface); box-shadow: var(--shadow-hover); border: 1px solid var(--card-border);
  display: grid; place-items: center; padding: 14%; position: relative;
}
.hero-logo::after {
  content: ""; position: absolute; inset: -14px; z-index: -1; border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-2), var(--accent-3));
  opacity: .22; filter: blur(22px);
}
.hero-logo img { width: 100%; height: 100%; object-fit: contain; }
.hero h1 { font-size: clamp(3rem, 8vw, 5.6rem); }
.hero h1 .dot { color: var(--accent); }
.tagline { font-family: var(--font-display); font-size: clamp(1.2rem, 2.4vw, 1.6rem); color: var(--ink-soft); margin: .35em 0 0; line-height: 1.3; }
.description { color: var(--ink-soft); max-width: 58ch; margin-top: 1.1em; }
.description p { margin: 0 0 .6em; }
.stats { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 1.6em; }
.stat {
  display: flex; align-items: baseline; gap: .45em; padding: .55em 1em;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill);
  text-decoration: none; transition: border-color .2s, transform .2s;
}
.stat:hover { border-color: var(--accent); transform: translateY(-2px); }
.stat strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--accent); }
.stat span { color: var(--ink-soft); font-size: .92rem; font-weight: 600; }

/* ---------- Barre d'outils ---------- */
.toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px;
  padding: 14px 0; margin-bottom: 8px;
  background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px);
}
.search {
  display: flex; align-items: center; gap: 8px; min-width: min(280px, 100%);
  padding: 0 14px; border-radius: var(--radius-pill);
  background: var(--surface); border: 1.5px solid var(--line); transition: border-color .2s;
}
.search:focus-within { border-color: var(--accent); }
.search svg { width: 18px; height: 18px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; flex: none; }
.search input { border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); padding: .65em 0; width: 100%; }

/* ---------- Groupes par catégorie ---------- */
.group { padding: 40px 0 8px; scroll-margin-top: 80px; }
.group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.group-icon {
  width: 46px; height: 46px; flex: none; display: grid; place-items: center; font-size: 1.4rem;
  border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tone) 15%, var(--surface));
}
.group-head h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.group-head p { margin: .15em 0 0; color: var(--ink-soft); font-size: .95rem; }
.group-head .n { color: var(--ink-faint); font-weight: 500; font-size: .7em; margin-left: .3em; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }

/* ---------- Carte d'application ---------- */
.app {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 22px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--card-border); box-shadow: var(--shadow);
  transition: transform .25s, box-shadow .25s, border-color .25s;
  overflow: hidden;
}
.app::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--tone); transform: scaleX(0); transform-origin: left; transition: transform .35s;
}
a.app:hover, a.app:focus-visible { transform: translateY(-5px); box-shadow: var(--shadow-hover); border-color: color-mix(in srgb, var(--tone) 45%, var(--card-border)); }
a.app:hover::before, a.app:focus-visible::before { transform: scaleX(1); }
.app-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.app-icon {
  width: 58px; height: 58px; border-radius: calc(var(--radius-sm) + 4px); overflow: hidden; flex: none;
  box-shadow: 0 6px 16px -8px var(--tone);
}
.app-icon img { width: 100%; height: 100%; object-fit: cover; }
.app h3 { font-size: 1.3rem; margin-top: 4px; }
.app p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.app-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line);
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: .85rem; color: var(--ink-faint); font-weight: 600;
}
.app-foot .go { color: color-mix(in srgb, var(--tone) 80%, var(--ink)); transition: transform .2s; }
a.app:hover .go { transform: translateX(4px); }
.app.disabled { opacity: .62; }
.app .tags { margin-top: 2px; }

.status-online { --tone: #16a34a; }
.status-beta   { --tone: #d97706; }
.status-soon   { --tone: var(--ink-faint); }

.empty { text-align: center; color: var(--ink-soft); padding: 48px 0; }
.hidden { display: none !important; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .description { margin-left: auto; margin-right: auto; }
  .stats { justify-content: center; }
  .toolbar { position: static; }
  .search { width: 100%; }
}

/* ---------- Constellation décorative du hero ---------- */
.hero { position: relative; }
.hero > :not(.sky-lines) { position: relative; z-index: 1; }
.sky-lines {
  position: absolute; z-index: 0; right: 0; top: 24px; width: min(620px, 60%); height: auto;
  pointer-events: none; opacity: .55;
}
.sky-lines .links path {
  fill: none; stroke: var(--accent-2); stroke-width: 1; stroke-opacity: .45;
  stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 3.5s ease-out .3s forwards;
}
.sky-lines .stars circle { fill: var(--ink); filter: drop-shadow(0 0 4px var(--accent-2)); }
.sky-lines .stars circle.big { fill: var(--accent); filter: drop-shadow(0 0 8px var(--accent)); }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Le motif n'apparaît que sur les thèmes sombres */
:root:not([data-theme="constellation"]):not([data-theme="minuit"]) .sky-lines { display: none; }

/* Cartes en verre dépoli sur le ciel */
[data-theme="constellation"] .app,
[data-theme="constellation"] .stat,
[data-theme="constellation"] .search,
[data-theme="constellation"] .filters button,
[data-theme="constellation"] .hero-logo { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
[data-theme="constellation"] .hero h1 { font-weight: 400; letter-spacing: -0.02em; }
[data-theme="constellation"] .hero h1 .dot { color: var(--accent); text-shadow: 0 0 24px rgba(243,217,139,.45); }
[data-theme="constellation"] .eyebrow { color: var(--accent-2); letter-spacing: .22em; }
[data-theme="constellation"] .hero-logo::after { background: radial-gradient(circle, var(--accent-2), transparent 70%); opacity: .25; }
[data-theme="constellation"] .app-icon { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 22px -6px var(--tone); }
[data-theme="constellation"] .app-icon .placeholder {
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--tone) 55%, transparent), transparent 70%), #121838;
}
[data-theme="constellation"] .group-icon { background: rgba(255,255,255,.04); border: 1px solid var(--line); }
[data-theme="constellation"] .app::before { box-shadow: 0 0 14px var(--tone); }
[data-theme="constellation"] .toolbar { background: color-mix(in srgb, var(--bg) 82%, transparent); }

@media (max-width: 720px) {
  .sky-lines { width: 100%; top: 0; opacity: .35; }
}
@media (prefers-reduced-motion: reduce) { .sky-lines .links path { stroke-dashoffset: 0; } }

/* Correctifs : logo plein cadre, barre d'outils pleine largeur */
.hero-logo { padding: 0; }
.hero-logo img { width: 72%; height: 72%; }
.toolbar { box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--bg) 82%, transparent); clip-path: inset(0 -100vmax); }
@media (max-width: 720px) { [data-theme] .toolbar { background: none; box-shadow: none; clip-path: none; backdrop-filter: none; } }