/* Composant : logos des partenaires. Utilise les variables de style.css (couleurs, polices, jaune du logo).

   Un seul composant, deux présentations, construit par partenaires-bandeau.js à partir de PARTENAIRES (data.js) :
   - le bandeau défilant de l'accueil (data-mode="bandeau") : rail horizontal infini, lent, en pur CSS (translateX) ;
   - la grille de la page Partenaires (data-mode="grille").
   Au repos, les logos sont en niveaux de gris et atténués ; au survol de la souris et au focus clavier, ils reprennent leurs couleurs.
   Le rail contient deux groupes identiques : le premier se déplace d'une largeur de groupe (-50 % du rail) puis la boucle repart,
   sans saut visible. Les copies (deuxième groupe et répétitions qui remplissent l'écran) sont aria-hidden, inert et hors tabulation.
   Le défilement s'arrête au survol, au focus clavier et hors écran.
   Avec « réduire les animations » : aucun défilement, les logos s'affichent en grille (les copies sont masquées, le bouton aussi). */

/* ===== Logos : cellule de taille fixe, logo contenu dans sa boîte (object-fit: contain) ===== */
.logos { --logo-w: 144px; --logo-h: 72px; --logo-gap: 16px; list-style: none; margin: 0; padding: 0; display: flex; }
@media (min-width: 720px) { .logos { --logo-w: 184px; --logo-h: 88px; --logo-gap: 24px; } }
.logos__cell { flex: none; width: var(--logo-w); margin: 0 var(--logo-gap) 0 0; }
.logos__item {
  position: relative; display: flex; flex-direction: column; align-items: stretch; height: 100%;
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none;
}
.logos__logo { display: block; height: var(--logo-h); padding: 12px 16px; }
.logos__logo img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; filter: grayscale(1); opacity: .62; transition: filter .25s var(--ease), opacity .25s var(--ease); }
/* Bande jaune inclinée comme celles du logo : elle apparaît sous la cellule survolée ou ciblée au clavier */
.logos__item::after { content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 4px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.logos__item:hover img, .logos__item:focus-visible img { filter: none; opacity: 1; }
.logos__item:hover::after, .logos__item:focus-visible::after { transform: scaleX(1); }
a.logos__item:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
a.logos__item:hover { border-color: var(--navy); }
/* Écran tactile : pas de survol, donc le logo reste lisible (désaturé sans être gris) */
@media (hover: none) { .logos__logo img { filter: grayscale(.4); opacity: .9; } }

/* Nom et présentation (grille) ou nom seul quand le partenaire n'a pas de logo */
.logos__nom { display: block; padding: 10px 16px 14px; font: 700 1.25rem/1.1 var(--font-title); letter-spacing: .03em; text-transform: uppercase; text-align: center; }
.logos__logo + .logos__nom { padding-top: 0; font-size: 1.125rem; color: var(--muted); }
.logos__item:hover .logos__nom, .logos__item:focus-visible .logos__nom { color: var(--text); }
.logos__item--texte { justify-content: center; min-height: var(--logo-h); }
.logos__texte { display: block; margin: 0; padding: 0 16px 16px; font-size: .9375rem; line-height: 1.4; color: var(--muted); text-align: center; }

/* ===== Grille (page Partenaires) ===== */
.logos--grille { --logo-h: 104px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (min-width: 720px) { .logos--grille { --logo-h: 120px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; } }
.logos--grille .logos__cell { width: auto; margin: 0; min-width: 0; }

/* ===== Bandeau défilant (accueil) : classes « defile » (« bandeau » est pris par le message de la boutique) ===== */
.defile { position: relative; }
.defile__vue { overflow: hidden; overflow: clip; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.defile__rail { display: flex; width: max-content; }
.defile .logos__item:focus-visible { outline-offset: -5px; }   /* le contour reste dans la vue, qui masque ce qui dépasse */

/* Défilement : la durée (--duree) est calculée par le script pour garder une vitesse lente et constante, quel que soit le nombre de logos */
@media (prefers-reduced-motion: no-preference) {
  @keyframes defile-rail { to { transform: translateX(-50%); } }
  .defile__rail { animation: defile-rail var(--duree, 60s) linear infinite; will-change: transform; }
  .defile__vue:hover .defile__rail,
  .defile__vue:focus-within .defile__rail,
  .defile.is-paused .defile__rail,
  .defile.is-hors-ecran .defile__rail { animation-play-state: paused; }
}

/* Moins d'animations : pas de défilement, ni de copies ; les vrais logos sont en grille centrée */
@media (prefers-reduced-motion: reduce) {
  .defile__vue { -webkit-mask-image: none; mask-image: none; }
  .defile__rail { display: block; width: auto; animation: none; }
  .defile__rail .logos { flex-wrap: wrap; justify-content: center; gap: var(--logo-gap); }
  .defile__rail .logos__cell { margin: 0; }
  .defile__rail .logos__copie, .defile__rail .logos[aria-hidden="true"] { display: none; }
}

/* Section d'accueil : titre à gauche, lien à droite, bandeau pleine largeur dessous */
.section--partenaires { padding-block: clamp(40px, 6vw, 64px); }
.partenaires__tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 32px; margin-bottom: 24px; }
.partenaires__tete h2 { margin: 0; }
[data-partenaires] + .prose { margin-top: 48px; }   /* page Partenaires : espace entre la grille (ou le message) et « Soutenir le club » */