/* ============================================================
   HOME (accueil / hub d'outils) — styles de composition.
   Couleurs, type et espacements proviennent des tokens du DS.
   Adapté de ui_kits/portal/portal.css du design system.
   ============================================================ */

/* ---- Hero (compact : laisse voir la grille d'outils) ---- */
.hub-hero {
  background:
    radial-gradient(120% 120% at 100% 0%, var(--blue-50) 0%, transparent 55%),
    var(--surface-page);
  padding: clamp(1.5rem, 3.5vw, 2.75rem) 0 clamp(1.25rem, 2.5vw, 2rem);
  border-bottom: 1px solid var(--border-subtle);
}
.hub-hero__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
  margin: 10px 0 0;
  color: var(--text-strong);
}
.hub-hero__lead {
  max-width: 54ch;
  margin: 12px 0 0;
  font-size: var(--text-body-lg);
  color: var(--text-muted);
}

/* ---- Tool grid ---- */
.hub-tools { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
/* la flèche de ToolCard hérite déjà du hover via components.css */
.phla-toolcard { text-decoration: none; }
.phla-toolcard:hover { text-decoration: none; }

/* ---- Sponsors ---- */
.hub-sponsors {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.hub-sponsors__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hub-sponsors__logos { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; }
.hub-sponsors__logos img {
  height: 52px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .7;
  transition: opacity var(--dur-base) var(--ease-out), filter var(--dur-base) var(--ease-out);
}
.hub-sponsors__logos img:hover { filter: none; opacity: 1; }

/* ---- Disclaimer (research use only) ---- */
.hub-foot { padding-bottom: clamp(2rem, 5vw, 3.5rem); max-width: 860px; }