/* Pages Aide et Contact : panneaux dans le style de l'accueil (voir .hub-* dans styles.css) */
.hub-group {
  --g1: #00e5a0; --g2: #3b82f6;
  position: relative; padding: 1.1rem 1.1rem 1.15rem; border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--g1) 10%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--g1)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--g1) 22%, var(--border));
  box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.03);
}
.hue-green  { --g1: #00e5a0; --g2: #3b82f6; }
.hue-violet { --g1: #a855f7; --g2: #f59e0b; }
.hue-indigo { --g1: #8b5cf6; --g2: #6366f1; }
.hue-cyan   { --g1: #06b6d4; --g2: #3b82f6; }
.hue-pink   { --g1: #ec4899; --g2: #a855f7; }
.hue-blue   { --g1: #3b82f6; --g2: #06b6d4; }
.hue-amber  { --g1: #f59e0b; --g2: #ef4444; }
.hue-discord { --g1: #5865f2; --g2: #a855f7; }
.hub-head { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.9rem; margin-bottom: 0.9rem; position: relative; }
.hub-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, var(--g1), var(--g2) 60%, transparent); opacity: 0.7; }
.hub-head-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 12px; display: grid; place-items: center;
  color: var(--g1); background: color-mix(in srgb, var(--g1) 16%, var(--surface2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g1) 30%, transparent), 0 6px 18px color-mix(in srgb, var(--g1) 18%, transparent);
  font-family: var(--display); font-size: 1.2rem; font-weight: 600; }
.hub-head-ico svg { width: 24px; height: 24px; }
.hub-title { font-family: var(--display); font-size: 1.1rem; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }
.hub-sub { font-size: 0.68rem; color: var(--text2); margin-top: 0.15rem; line-height: 1.5; }
.hub-tile { background: color-mix(in srgb, var(--surface2) 70%, transparent); border: 1px solid var(--border); border-radius: 12px; }
.hub-go { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid currentColor; }
.hub-go svg { width: 12px; height: 12px; }
