/* ======================================================
   🧿 Home Categories Hero – Tyshara (v1.0 refactor 2025)
   Design mystique premium connecté à la palette globale
   ====================================================== */

.tyshara-categories-hero {
  padding-block: var(--space-4xl);
  padding-inline: var(--space-md);
  background-color: var(--ty-lin-brume-pastel);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-soft);
  text-align: center;
  max-width: 1000px;
  margin-inline: auto;
  box-shadow: var(--shadow-soft);
}

.hero-categories-head {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.hero-categories-head h2 {
  font-family: var(--font-deco);
  font-size: clamp(2rem, 4vw, 2.8rem);
  color: var(--ty-corail-alchimie);
  margin-bottom: var(--space-md);
}

.hero-categories-head p {
  font-family: var(--font-main);
  color: var(--ty-anthracite-velours);
  font-size: clamp(1rem, 2vw, 1.1rem);
  margin-top: var(--space-xxs);
}

.hero-categories-scroll {
  display: flex;
  justify-content: center; /* ⬅️ ajout clé pour centrage horizontal */
  align-items: stretch;
  flex-wrap: wrap;
  gap: var(--space-lg);
  padding-block: var(--space-md);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hero-categories-scroll::-webkit-scrollbar {
  display: none;
  align-items: center;
}

.hero-category-card {
  flex: 0 0 auto;
  width: 240px;
  border-radius: var(--radius-lg);
  text-decoration: none;
  border: 1px solid var(--ty-lin-brume);
  color: var(--ty-anthracite-velours);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
  overflow: hidden;
}

.hero-category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-medium);
}

.hero-category-thumb {
  height: 180px;
  background-size: cover;
  background-position: center;
  filter: brightness(0.85);
  transition: filter var(--dur-fast) ease;
}

.hero-category-card:hover .hero-category-thumb {
  filter: brightness(1);
}

.hero-category-name {
  display: block;
  font-family: var(--font-main);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: var(--space-md);
  text-align: center;
  color: var(--ty-corail-alchimie);
}