/* Hub membres (s'ajoute à home.css) */
.hub-main { padding-top: 48px; padding-bottom: 64px; display: grid; gap: 1.5rem; }
.panel { padding: 1.5rem; border: 1px solid var(--line); background: var(--glass); border-radius: var(--radius); }
.hub-main [hidden] { display: none !important; }

.locked { text-align: center; padding: 3rem 1.5rem; }
.locked h1 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: .6rem; }

/* Bienvenue */
.welcome { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; padding: 1.8rem; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 18px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, var(--bg2)), var(--bg2) 70%); }
.welcome h1 { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0; }
.welcome p { margin: .2rem 0 0; }
.welcome-actions { margin-left: auto; display: flex; gap: .6rem; flex-wrap: wrap; }

/* Applications : cartes colorées (teinte --h définie par app) */
.apps-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.apps-head h2 { font-size: 1.3rem; margin: 0; }
.apps-head input { font: .85rem var(--mono); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: .55rem 1rem; width: min(260px, 100%); }
.apps-head input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.app {
  --c: hsl(var(--h) 70% 60%);
  position: relative; display: flex; flex-direction: column; gap: .35rem; min-height: 190px; padding: 1.4rem; overflow: hidden;
  border-radius: 18px; text-decoration: none; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
  background: linear-gradient(150deg, color-mix(in srgb, var(--c) 24%, var(--bg2)), var(--bg2) 75%);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.app::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: color-mix(in srgb, var(--c) 28%, transparent); filter: blur(30px); pointer-events: none; }
.app:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 10px 30px -12px var(--c); }
.app:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.app .ico { font-size: 2.4rem; line-height: 1; margin-bottom: .4rem; }
.app h3 { font-size: 1.1rem; margin: 0; }
.app p { margin: 0; color: var(--muted); font-size: .88rem; flex: 1; }
.app .foot { display: flex; align-items: center; justify-content: space-between; margin-top: .8rem; }
.app .tag { margin: 0; color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.app .go { font-size: 1.2rem; color: var(--c); transition: transform .2s; }
.app:hover .go { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .app, .app .go { transition: none; } .app:hover, .app:hover .go { transform: none; } }
@media (max-width: 640px) { .welcome-actions { margin-left: 0; } }