/* Fil de pronos (07/10/2026) : ticker de la home D repris en haut des pages
   compétition. Rendu : inc/its-tpl-pronos-fil.php. Charte teal + vanilla.
   ⚠️ Les couleurs des liens sont sur les <span> enfants : la règle
   « .its-v2 a[class]:not(…) { color: inherit } » de common.css gagne sur le <a>. */

.ipf {
  --ipf-teal: #1C3D34;
  --ipf-vanilla: #F2E5D2;
  --ipf-doux: rgba(28, 61, 52, .66);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 24px 0 8px;
  padding: 18px clamp(16px, 2.4vw, 28px);
  background: var(--ipf-vanilla);
  color: var(--ipf-teal);
}
.ipf[hidden] { display: none; }
.ipf-j { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ipf-j[hidden] { display: none; }

.ipf-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid rgba(28, 61, 52, .16); }
.ipf-titre { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: clamp(18px, 1.6vw, 22px); font-weight: 800; color: var(--ipf-teal); }
.ipf-sur { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--ipf-doux); }
.ipf-actes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ipf-joueurs { font-size: 13px; font-weight: 700; color: var(--ipf-doux); }
.ipf-reste { font-size: 12px; font-weight: 800; white-space: nowrap; padding: 2px 8px; border: 1px solid rgba(28, 61, 52, .4); color: var(--ipf-teal); }
.ipf-cta { display: inline-block; padding: 9px 16px; background: var(--ipf-teal); font-size: 12px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; text-decoration: none; transition: opacity .15s ease; }
.ipf-cta:hover { opacity: .88; }
.ipf-cta:focus-visible { outline: 2px solid var(--ipf-teal); outline-offset: 3px; }
.ipf-cta-t { color: var(--ipf-vanilla); }

/* Ligne de matchs qui défile en boucle (deux copies de la liste, -50 %). */
.ipf-fil { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%); }
.ipf-piste { display: flex; width: max-content; animation: ipf-defile 45s linear infinite; }
.ipf-fil:hover .ipf-piste, .ipf-fil:focus-within .ipf-piste { animation-play-state: paused; }
@keyframes ipf-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ipf-matchs { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; list-style: none; }
.ipf-m { display: flex; align-items: center; gap: 6px; margin: 0 12px 0 0; padding: 6px 12px; background: rgba(28, 61, 52, .06); white-space: nowrap; }
.ipf-eq { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ipf-nom { font-size: 14px; font-weight: 700; color: var(--ipf-teal); }
.ipf-vs { margin: 0 2px; color: var(--ipf-doux); }
.ipf-logo { flex: 0 0 24px; display: flex; justify-content: center; }
.ipf-logo picture { display: contents; }
.ipf-logo img.ipf-logo-img { width: 24px; height: 24px; object-fit: contain; }
.ipf-init { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 9px; font-weight: 800; background: var(--ipf-teal); color: var(--ipf-vanilla); }

/* Home D : le fil vit dans la rubrique « Pronos », qui porte déjà fond et marges. */
.hd-pronos .ipf { margin: 0; padding: 0; background: none; }

@media (prefers-reduced-motion: reduce) {
  .ipf-piste { animation: none; }
  .ipf-fil { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ipf-matchs[aria-hidden="true"] { display: none; }
}
@media (max-width: 800px) {
  .ipf { margin-top: 16px; }
  .ipf-tete { align-items: flex-start; }
  .ipf-actes { width: 100%; justify-content: space-between; }
  .ipf-nom { font-size: 13px; }
}