/* =========================================
= COMPOSANT — SELECT CARD (.nl-select-card) — composant PARTAGÉ
= Photo + nom en surimpression (en bas à gauche), zoom doux et soulignement
= animé au survol. Titre, image et lien en arguments (select-card.php).
= Markup : select-card.php · JS : select-card.js (shimmer + fondu au chargement)
= · enqueue : inc-select-card.php. Le survol, lui, est 100 % CSS ;
= l'apparition au scroll vient de la section hôte.
= ⚠️ Aucune largeur ici : c'est la grille hôte qui place la card.
= NB : volontairement distinct de mega-menu-card/ (markup nl-mega--*, propre au
=      méga-menu) et de wc-product-slider-sug/ (tuile de fin de carrousel),
=      dont le chargement (shimmer puis fondu) est en revanche repris ici.
========================================= */
.nl-select-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  /* 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-select-card-shimmer 1.5s ease-in-out infinite;
}
/* Photo prête → shimmer coupé (classe posée par select-card.js) */
.nl-select-card.is-loaded {
  animation: none;
  background: var(--secondary-c);
}
@keyframes nl-select-card-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nl-select-card { animation: none; background: var(--secondary-c); }
}

.nl-select-card--link {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--secondary-c);
}

/* Conteneur du média : porte le PARALLAX, l'image porte le zoom au survol.
   Au repos (sans JS) il est neutre et ne change rien au cadrage. */
.nl-select-card--media {
  display: block;
  width: 100%;
  height: 100%;
}
/* Parallax (classe posée par select-card.js, jamais en « réduire les animations ») :
   le média est agrandi de 20 % et le JS le fait glisser de ±10 % de la hauteur de
   la card selon sa position dans l'écran. Le débord est rogné par la card
   (overflow: hidden). Sans JS : cadrage normal, aucune mise à l'échelle.
   ⚠️ Différence assumée avec wc-card-sug, qui obtient les 20 % avec
   « position: absolute; top: -10%; height: 120% » : ici la card n'a pas de
   hauteur imposée en desktop (c'est la photo qui la donne), sortir le média du
   flux la ferait s'effondrer. Le rendu, lui, est identique.
   Le translate est écrit AVANT le scale : il reste donc exprimé en pixels
   d'écran, non multipliés par l'agrandissement. */
.nl-select-card.is-parallax .nl-select-card--media {
  transform: scale(1.2);
  will-change: transform;
}

.nl-select-card--img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s 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-select-card--img { opacity: 0; }
  .nl-select-card.is-loaded .nl-select-card--img { opacity: 1; }
}
.nl-select-card--link:hover .nl-select-card--img,
.nl-select-card--link:focus-visible .nl-select-card--img {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .nl-select-card--img,
  .nl-select-card--title::after { transition: none; }
  .nl-select-card--img { opacity: 1; }   /* photo visible tout de suite */
  .nl-select-card--link:hover .nl-select-card--img { transform: none; }
  /* Le JS ne pose pas .is-parallax dans ce mode ; filet de sécurité au cas où
     la préférence changerait après le chargement. */
  .nl-select-card.is-parallax .nl-select-card--media { transform: none; }
}

/* Voile léger : garantit la lisibilité du titre quelle que soit la photo. */
.nl-select-card--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;       /* titre en bas… */
  justify-content: flex-start; /* …à gauche */
  padding: 1.25rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0) 45%);
}

.nl-select-card--title {
  position: relative;
  display: inline-block; /* le soulignement épouse la largeur du texte */
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-xl);
  line-height: 1;
}
/* Soulignement animé au survol (même principe que .nl-mega--card-title) */
.nl-select-card--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);
}
.nl-select-card--link:hover .nl-select-card--title::after,
.nl-select-card--link:focus-visible .nl-select-card--title::after {
  transform: scaleX(1);
}

/* Empilée (1 colonne) : plus de voisine pour donner la hauteur → ratio 4/5.
   La grille hôte peut le surcharger si besoin. */
@media (max-width: 64rem) {
  .nl-select-card { aspect-ratio: 4 / 5; }
}