/**
 * @file
 * Partenaires défilants — marquee CSS infini.
 *
 * Style V7 :
 *   - Section fond crème sunken (.home-partners-wrap)
 *   - Kicker Caveat framboise + h2 mono uppercase muted (cf. v7 home cible)
 *   - Track horizontal qui défile en boucle (animation linear 40s)
 *   - Chaque .ocdm-partner = pill blanche bordée (déjà stylé par ocdm-v7.css)
 *   - Logos centrés en max-height 40px, opacity 0.7 (pleine au hover)
 *   - Masque dégradé gauche/droite pour fondu propre aux bords
 *   - Pause au hover (UX)
 *   - Respect prefers-reduced-motion (pause permanente)
 */

/* Section globale */
.home-partners-wrap {
  padding: 3.5rem 0;
  background: var(--ocdm-bg-sunken, #f6ebe0);
  border-top: 1px solid var(--ocdm-border-soft);
  border-bottom: 1px solid var(--ocdm-border-soft);
  overflow: hidden;
}

/* Header centré */
.home-partners-wrap__head {
  text-align: center;
  margin-bottom: 1.5rem;
}
.home-partners-wrap__head .ocdm-section-head__kicker {
  margin: 0 0 0.25rem;
}
.home-partners-wrap__title {
  font-family: var(--ocdm-font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ocdm-text-muted);
  margin: 0;
  letter-spacing: 0.12em !important;
}

/* Wrapper marquee — masque dégradé gauche/droite + overflow hidden */
.ocdm-partners-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, black 6%, black 94%, transparent 100%);
}

/* Track — flex horizontal, 2× la liste, animation infinite */
.ocdm-partners-marquee__track {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: max-content;
  padding: 0.5rem 0;
  animation: ocdm-marquee 40s linear infinite;
  will-change: transform;
}

/* Pause au hover (UX : permet de cliquer / lire) */
.ocdm-partners-marquee:hover .ocdm-partners-marquee__track,
.ocdm-partners-marquee:focus-within .ocdm-partners-marquee__track {
  animation-play-state: paused;
}

/* Respect des préférences accessibilité — pause définitive */
@media (prefers-reduced-motion: reduce) {
  .ocdm-partners-marquee__track {
    animation: none;
    /* Center le contenu si pas d'animation */
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* L'animation : translate -50% (= une copie de la liste) puis boucle.
   Le 2× du markup garantit qu'il y a toujours du contenu visible. */
@keyframes ocdm-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Override .ocdm-partner pour le marquee — pill avec logo centré.
   v7.css définit déjà : background blanc, border, font Nunito, height 48,
   couleur muted, hover ink. On complète juste pour le logo image et on
   neutralise le wrapper Drupal field qui pourrait ajouter du markup. */
.ocdm-partners-marquee .ocdm-partner {
  flex-shrink: 0;
  height: 96px !important;
  min-width: 180px;
  max-width: 280px;
  padding: 0.75rem 1.5rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none !important;
}

/* L'image partner peut sortir wrappée par Drupal field (.field, .field-content,
   .field__item). On rend ces wrappers transparents pour que l'image soit
   directement positionnée par le flex du .ocdm-partner. */
.ocdm-partners-marquee .ocdm-partner .field,
.ocdm-partners-marquee .ocdm-partner .field-content,
.ocdm-partners-marquee .ocdm-partner .field__item {
  display: contents;
}

.ocdm-partners-marquee .ocdm-partner img {
  max-height: 72px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  opacity: 0.78;
  filter: grayscale(0.1);
  transition: opacity 0.2s ease, filter 0.2s ease, transform 0.15s ease;
  display: block;
}

.ocdm-partners-marquee .ocdm-partner:hover img,
.ocdm-partners-marquee .ocdm-partner:focus-visible img {
  opacity: 1;
  filter: grayscale(0);
}

.ocdm-partners-marquee .ocdm-partner:hover {
  transform: translateY(-1px);
}

/* Responsive — sur petits écrans le track ralentit légèrement (moins de
   partenaires visibles à la fois → vitesse perçue plus rapide sinon). */
@media (max-width: 768px) {
  .home-partners-wrap { padding: 2.5rem 0; }
  .ocdm-partners-marquee__track {
    gap: 1.25rem;
    animation-duration: 30s;
  }
  .ocdm-partners-marquee .ocdm-partner {
    height: 80px !important;
    min-width: 150px;
    padding: 0.5rem 1.2rem !important;
  }
  .ocdm-partners-marquee .ocdm-partner img { max-height: 56px; }
}