/*
 * D139 : bandeau des partenaires de Forumys — tous les partenaires de la plateforme (quel que soit leur secteur), dans une
 * colonne à droite des pages du site qui défile de bas en haut ; sur un écran étroit, une bande horizontale avant le pied
 * de page. Arrêté au survol ; immobile si l'appareil demande moins d'animations.
 */
.fp-rail { position: fixed; top: var(--fp-top, 0px); right: 0; bottom: 0; width: 150px; z-index: 15; display: flex; flex-direction: column; background: #fff; border-left: 1.5px solid var(--trait, #E3E2DD); }
.fp-titre { margin: 0; padding: 14px 10px 10px; font: 800 11px/1.3 var(--texte, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase; color: var(--bleu, #2148A8); text-align: center; border-bottom: 1.5px solid var(--trait, #E3E2DD); }
.fp-piste { flex: 1; min-height: 0; overflow: hidden; }
.fp-lane { display: grid; justify-items: center; animation: fp-monte var(--fp-duree, 30s) linear infinite; }
/* F5-R2 : arrêt au survol des logos seulement avec une souris (sur un écran tactile, le survol reste « collé » après un
   toucher : la bande ne repartait pas après « Reprendre ») et quand un logo a le focus du clavier (:focus-visible, que le
   toucher ne déclenche pas). Le bouton « Pause » décide seul quand on l'utilise. Deux règles : un navigateur sans :has()
   n'ignore que la seconde. */
@media (hover: hover) { .fp-piste:hover .fp-lane { animation-play-state: paused; } .fp-pause:hover { color: var(--encre, #13233F); background: var(--mur, #F3F3F0); } }
.fp-piste:has(.fp-item:focus-visible) .fp-lane { animation-play-state: paused; }
/* WCAG 2.2.2 : arrêt au bouton « Pause » (mémorisé le temps de la visite) et pendant qu'un doigt touche la bande. */
.fp-rail.fp-arret .fp-lane, .fp-rail.fp-touche .fp-lane { animation-play-state: paused; }
.fp-dup { display: contents; }
@keyframes fp-monte { to { transform: translateY(-50%); } }
@keyframes fp-defile { to { transform: translateX(-50%); } }
.fp-item { display: grid; place-items: center; width: 128px; min-height: 60px; margin: 11px 0; padding: 6px; border-radius: 6px; background: #fff; color: var(--encre, #13233F); text-decoration: none; }
.fp-item:focus-visible { outline: 3px solid var(--bleu, #2148A8); outline-offset: 2px; }
.fp-item img { display: block; width: 118px; height: auto; max-height: 76px; object-fit: contain; }
.fp-nom { font: 700 14px/1.2 var(--texte, system-ui, sans-serif); text-align: center; overflow-wrap: anywhere; }
/* UX-BANDE-PROD-1 : un visuel carré (icône d'app, initiale) ne dit pas qui est le partenaire : son nom s'affiche avec lui. */
.fp-legende { display: none; font: 700 13px/1.2 var(--texte, system-ui, sans-serif); text-align: center; overflow-wrap: anywhere; }
.fp-item.fp-icone { gap: 6px; }
.fp-item.fp-icone img { width: 56px; max-height: 56px; }
.fp-item.fp-icone .fp-legende { display: block; }
.fp-note { margin: 0; padding: 8px 10px 12px; font: 400 11px/1.3 var(--texte, system-ui, sans-serif); color: var(--encre-3, #5b6474); text-align: center; border-top: 1.5px solid var(--trait, #E3E2DD); }
.fp-pause { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: none; min-height: 32px; margin: 0; padding: 0 12px; border: 0; border-top: 1.5px solid var(--trait, #E3E2DD);
  background: #fff; color: var(--encre-2, #3E4B61); font: 700 13px/1 var(--texte, system-ui, sans-serif); cursor: pointer; }
.fp-pause:focus-visible { outline: 3px solid var(--bleu, #2148A8); outline-offset: -3px; }
/* Deux barres (pause) ; un triangle (reprendre) quand le défilement est arrêté. */
.fp-pause i { width: 10px; height: 12px; border: solid currentColor; border-width: 0 3px; box-sizing: border-box; }
.fp-pause[aria-pressed="true"] i { width: 0; height: 0; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
body.avec-fp { padding-right: 150px; }
/* D151 : la colonne commence sous le menu, qui garde toute la largeur (ses onglets restent visibles, « Nos partenaires » compris). */
@media (min-width: 1101px) { body.avec-fp > header.haut { margin-right: -150px; } }
/* D150 (demande de l'utilisateur) : sur téléphone et tablette, une bande fine en haut, juste sous le menu, qui reste visible
   quand on fait défiler la page (--fp-top : hauteur du menu collé, posée par le script ; 0 sur les pages des clubs). */
@media (max-width: 1100px) {
  .fp-rail { position: sticky; top: var(--fp-top, 0px); width: auto; height: 52px; flex-direction: row; flex-wrap: nowrap; align-items: center;
    border-left: 0; border-bottom: 1.5px solid var(--trait, #E3E2DD); box-shadow: 0 8px 14px -12px rgba(19, 35, 63, .45);
    /* APPW-REJ-1 : dans une page en grille ou en flex (/rejoindre/), la bande ne doit jamais élargir la page à la largeur de sa piste. */
    min-width: 0; max-width: 100%; box-sizing: border-box; }
  .fp-titre { flex: none; width: 104px; padding: 0 8px 0 12px; border: 0; text-align: left; font-size: 11px; line-height: 1.25; }
  .fp-piste { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; }
  .fp-lane { display: flex; width: max-content; align-items: center; animation-name: fp-defile; }
  /* UI-BANDE-1 : jamais une lettre par ligne pour un partenaire sans logo. */
  .fp-item { flex: none; width: auto; min-height: 0; margin: 0 10px; padding: 3px 4px; }
  .fp-item img { width: auto; height: 38px; max-width: 130px; }
  .fp-nom, .fp-legende { white-space: nowrap; overflow-wrap: normal; }
  .fp-item.fp-icone { display: flex; align-items: center; gap: 8px; }
  .fp-item.fp-icone img { width: auto; height: 34px; max-height: none; }
  .fp-legende { font-size: 14px; text-align: left; }
  .fp-note { display: none; }
  .fp-pause { order: 3; width: 44px; height: 100%; min-height: 0; padding: 0; border-top: 0; border-left: 1.5px solid var(--trait, #E3E2DD); }
  .fp-pause span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.avec-fp { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .fp-lane { animation: none; } .fp-dup { display: none; } .fp-piste { overflow: auto; } .fp-pause { display: none; } }