/* ============================================================
   AVENUE BELMONT — NOUS RENCONTRER (composant partagé)
   Utilisé par woocommerce/archive-product.php (/montres/) et
   page-vendre.php (/vendre/), voir template-parts/shared/nous-rencontrer.php.
   Chargé sur les deux pages via ab_enqueue_assets() dans functions.php.
   ============================================================ */
.ab-shop-meet {
  background: var(--color-off-white, #f9f7f7);
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 5vw, 3rem);
  text-align: center;
}

.ab-shop-meet__title {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-primary, #290B0B);
  line-height: 1.3;
  margin: 0 auto var(--space-3, 0.75rem);
  font-size: 1.3rem;
}
@media (min-width: 400px) { .ab-shop-meet__title { font-size: 1.5rem; } }
@media (min-width: 600px) { .ab-shop-meet__title { font-size: 1.7rem; } }
@media (min-width: 900px) { .ab-shop-meet__title { font-size: 1.9rem; } }

.ab-shop-meet__intro {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted, #666);
  max-width: 560px;
  margin: 0 auto clamp(2rem, 4vw, 2.75rem);
}

/* Desktop/tablette (> 560px) : rangée statique et centrée. Scopé en
   min-width pour ne JAMAIS s'appliquer en dessous de 560px : le défilement
   mobile (plus bas) a besoin que .ab-shop-meet__slider garde son
   comportement par défaut (bloc plein largeur, sans display:flex dessus),
   sans quoi le track (2 jeux de photos) se retrouve centré/rétréci au lieu
   de défiler normalement — c'est ce qui avait rendu les photos minuscules
   la dernière fois. */
@media (min-width: 561px) {
  .ab-shop-meet__slider {
    display: flex;
    justify-content: center;
  }
}

.ab-shop-meet__track {
  display: flex;
}

.ab-shop-meet__cities {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}

/* Deuxième jeu de photos, dupliqué pour la boucle mobile : invisible tant
   qu'on n'est pas en mode défilement (voir media query plus bas). */
.ab-shop-meet__cities--dup {
  display: none;
}

.ab-shop-meet__city {
  display: flex;
}

.ab-shop-meet__photo {
  width: clamp(140px, 16vw, 220px);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.ab-shop-meet__photo--empty {
  display: inline-block;
  background: var(--color-grey-100, #f5f5f5);
  border: 1px solid var(--color-border, #e0d8d8);
  box-shadow: none;
}

/* Mobile (≤ 560px) : bandeau en défilement automatique continu, gauche →
   droite. Photos volumineuses (jusqu'à 320px) pour bien les mettre en
   valeur — sur un petit écran, une seule à la fois est presque
   entièrement visible, la suivante apparaît en partie sur le bord. Le
   deuxième jeu de photos (identique, aria-hidden) suit immédiatement le
   premier dans le track ; l'animation translate le track de -50% à 0,
   donc d'exactement une largeur de jeu — boucle parfaitement continue. */
@media (max-width: 560px) {
  /* Sort du `.container` (qui a du padding latéral) pour occuper toute la
     largeur de l'écran : technique classique de "full-bleed" indépendante
     du padding du parent. */
  .ab-shop-meet__slider {
    overflow: hidden;
    position: relative;
    left: 50%;
    right: 50%;
    width: 100vw;
    margin-left: -50vw;
    margin-right: -50vw;
  }

  .ab-shop-meet__track {
    width: max-content;
    animation: ab-meet-scroll 22s linear infinite;
  }

  .ab-shop-meet__cities,
  .ab-shop-meet__cities--dup {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    padding-inline: 0.625rem;
  }

  .ab-shop-meet__photo {
    width: clamp(180px, 58vw, 240px);
  }

  /* Pause au survol/focus : confort de lecture, pas une exigence mais une
     bonne pratique pour un contenu qui bouge tout seul. */
  .ab-shop-meet__slider:hover .ab-shop-meet__track,
  .ab-shop-meet__slider:focus-within .ab-shop-meet__track {
    animation-play-state: paused;
  }
}

@keyframes ab-meet-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* Respect du confort utilisateur : pas de mouvement automatique imposé. */
@media (prefers-reduced-motion: reduce) {
  .ab-shop-meet__track { animation: none; }
  @media (max-width: 560px) {
    .ab-shop-meet__slider { overflow-x: auto; }
    .ab-shop-meet__cities--dup { display: none; }
  }
}