/* =========================================
= COMPOSANT — TUILE DE FIN DE SLIDER (.nl-slider-sug)
= Dernier élément de la piste d'un carrousel produits : photo + titre.
= Markup : wc-product-slider-sug.php · lecteur + enqueue : inc-wc-product-slider-sug.php
= Même rendu que la card du méga-menu (.nl-mega--card-*) : zoom doux de l'image,
= fondu noir de l'overlay et soulignement animé du titre au survol.
= Chargement : shimmer puis fondu de la photo, comme les tuiles de la grille
= catégorie (.nl-product-sug) — classe .is-loaded posée par wc-product-slider-sug.js.
= ⚠️ Doublon assumé de mega-menu-card.css : les 2 composants n'ont rien à voir
=    (un dans le menu, un dans un carrousel produits). Répercuter toute évolution
=    de l'un sur l'autre.
= NB : la LARGEUR vient du slider (.nl-product-slider--track > li), pas d'ici.
= Les règles de survol ne portent plus le préfixe « a. » (1.2.343) : la tuile
=    est toujours un <a>, la variante décorative <div> n'existe plus.
========================================= */
/* Le <li> ne porte PAS de ratio : il s'étire comme les autres éléments de la
   piste (une carte produit = photo + titre/prix, donc plus haute qu'un simple
   0.65). C'est l'intérieur qui porte le ratio, pour que la photo de la tuile
   s'aligne sur celles des cartes. */
.nl-slider-sug {
  list-style: none;
  scroll-snap-align: start;
}

.nl-slider-sug--inner {
  display: block;
  width: 100%;
  aspect-ratio: 0.65 / 1;   /* même proportion que la photo d'une carte */
  position: relative;
  overflow: hidden;
  text-decoration: none;
  /* Skeleton shimmer pendant le chargement de la photo (recouverte par l'img).
     Keyframe propre → composant autonome. */
  background: linear-gradient(100deg,
    var(--secondary-c) 25%,
    var(--secondary) 50%,
    var(--secondary-c) 75%
  );
  background-size: 300% 100%;
  animation: nl-slider-sug-shimmer 1.5s ease-in-out infinite;
}
/* Photo prête → shimmer coupé (classe posée par wc-product-slider-sug.js) */
.nl-slider-sug--inner.is-loaded {
  animation: none;
  background: var(--secondary-c);
}
@keyframes nl-slider-sug-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-slider-sug--inner { animation: none; background: var(--secondary-c); }
}

/* Image : zoom doux au survol (l'overlay et le titre restent nets) */
.nl-slider-sug--media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
}
/* Fondu de la photo à son arrivée. L'état masqué est gated « scripting: enabled » :
   sans JS, aucune classe .is-loaded ne serait posée et la photo resterait invisible. */
@media (scripting: enabled) {
  .nl-slider-sug--media { opacity: 0; }
  .nl-slider-sug--inner.is-loaded .nl-slider-sug--media { opacity: 1; }
}
.nl-slider-sug--inner:hover .nl-slider-sug--media,
.nl-slider-sug--inner:focus-visible .nl-slider-sug--media {
  transform: scale(1.05);
}

/* Overlay : transparent au repos, légèrement assombri au survol */
.nl-slider-sug--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color .35s ease;
}
.nl-slider-sug--inner:hover .nl-slider-sug--overlay,
.nl-slider-sug--inner:focus-visible .nl-slider-sug--overlay {
  background-color: rgba(0, 0, 0, 0.15);
}

.nl-slider-sug--title {
  position: relative;
  display: inline-block; /* le soulignement épouse la largeur du texte */
  margin: 0;
  color: var(--secondary);
  font-size: var(--text-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: var(--ls-normal);
  line-height: 1;
}
/* Soulignement animé au survol (même principe que .nl-mega--card-title). */
.nl-slider-sug--title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.125em;
  width: 100%;
  height: 0.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.nl-slider-sug--inner:hover .nl-slider-sug--title::after,
.nl-slider-sug--inner:focus-visible .nl-slider-sug--title::after {
  transform: scaleX(1);
}

/* Reduce-motion : zoom, assombrissement et soulignement sans animation. */
@media (prefers-reduced-motion: reduce) {
  .nl-slider-sug--media,
  .nl-slider-sug--overlay,
  .nl-slider-sug--title::after { transition: none; }
  .nl-slider-sug--media { opacity: 1; }   /* photo visible tout de suite */
  .nl-slider-sug--inner:hover .nl-slider-sug--media,
  .nl-slider-sug--inner:focus-visible .nl-slider-sug--media { transform: none; }
}