/* ==========================================================================
   BRIQUE 5 - Navigation " Explorer aussi " (bas des pages d'article)
   --------------------------------------------------------------------------
   Charge uniquement sur les pages d'article. Ces pages sont sur fond noir
   (cf. themes/article-default.css) : textes et bordures sont donc inverses.
   Le conflit Salient `body a { color:#3452ff }` est neutralise par un
   !important CIBLE sur le lien de vignette.
   ========================================================================== */

.subcat-nav {
  max-width: var(--max-width-container, 1600px);
  margin: clamp(2.5rem, 6vw, 5rem) auto 0;
  padding: clamp(2rem, 5vw, 4rem) clamp(16px, 4vw, 56px);
  border-top: 1px solid var(--color-border-invert);
}

.subcat-nav__title {
  margin: 0 0 clamp(1.2rem, 3vw, 2rem);
  font-family: var(--font-accent, Georgia, serif);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  font-weight: 400;
  color: var(--color-text-invert, #fff);
}

.subcat-nav__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.6vw, 22px);
}

.subcat-nav__item {
  display: block;
  color: var(--color-text-invert, #fff) !important; /* contre body a { color:#3452ff } */
  text-decoration: none;
}

.subcat-nav__img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg, 12px);
  background: var(--color-border-invert, rgba(255, 255, 255, 0.14));
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms ease;
}

.subcat-nav__label {
  display: block;
  margin-top: 0.6rem;
  font-size: var(--font-size-md, 1rem);
  font-weight: 600;
  line-height: 1.2;
}

.subcat-nav__item:hover .subcat-nav__img {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg, 0 10px 28px rgba(0, 0, 0, 0.14));
}

@media (max-width: 900px) {
  .subcat-nav__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .subcat-nav__grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subcat-nav__img {
    transition: none;
  }
}