/* « À surveiller » — le panneau porte les classes de « Mouvements récents »
   (.fzd-off-*, accueil-dash.css) : même châssis, mêmes cartes, mêmes jetons
   de couleur dans les deux thèmes et sur les quatre accueils. Il ne reste
   ici que ce qui lui appartient en propre — le filtre par équipe, la
   pastille de surveillance, l'étoile des favoris et le pied de carte qui
   porte une phrase plutôt qu'un nombre. */
[data-watch-panel] { min-width: 0; overflow: hidden; }

/* Filtre par équipe — 32 clubs : un menu déroulant, là où les mouvements
   tiennent en quatre pastilles. Le compte des joueurs affichés le suit,
   comme le compteur suit chaque onglet d'à côté. */
.fzh-watch-filter { display: flex; align-items: center; gap: 10px; min-width: 0; margin-bottom: 9px; }
.fzh-watch-filter select {
    flex: 1 1 auto; min-width: 0; max-width: 260px;
    padding: 7px 12px;
    background: var(--fzd-bg-alt); color: var(--fzd-ink);
    border: 1px solid var(--fzd-border); border-radius: 999px;
    font: 500 12px/1.2 'Barlow Condensed', sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
}
/* Un menu est un contrôle : au survol, le contour de contrôle d'Apple. */
.fzh-watch-filter select:hover { border-color: var(--border-gray); }
.fzh-watch-count {
    flex: 0 0 auto; white-space: nowrap;
    font: 500 11px/1 'Barlow Condensed', sans-serif;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--fzd-text-faint);
}

/* Carte — tout vient de .fzd-off-card. Seule la pastille est à inventer :
   « Échange » et « Blessé » annoncent un fait daté, « À surveiller » annonce
   une attente, et se pose donc en voile plutôt qu'en aplat. La mise en
   favori la remplit : c'est le seul moment où la carte porte une date. */
.fzd-off-tag.is-watch { background: var(--fzd-accent-tint); color: var(--fzd-accent); }
.fzd-off-card.is-saved .fzd-off-tag.is-watch { background: var(--fzd-accent-fill); color: var(--fzd-on-accent); }
[data-watch-panel] .fzh-watch-row[role=button] { cursor: pointer; }
/* Carte cliquable : le filet passe au rouge à 40 % au survol (DESIGN.md,
   Cards) — le séparateur et le contour fort sont désormais la même valeur. */
[data-watch-panel] .fzh-watch-row:hover { border-color: rgba(var(--primary-rgb), .4); }
[data-watch-panel] .fzh-watch-row.is-saved { border-color: var(--fzd-accent); }
/* La raison de suivre est une phrase, pas un chiffre : elle s'étale sur trois
   lignes et s'arrête là, sinon une fiche bavarde étirerait toute la rangée. */
[data-watch-panel] .fzh-watch-status {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    font: 400 13px/1.35 'Helvetica Neue', Helvetica, sans-serif;
    color: var(--fzd-text);
}

/* Étoile des favoris — dans le coin que les cartes de mouvement laissent
   libre. Sans fond ni cadre : la pastille tient déjà ce bord, deux boîtes
   s'y disputeraient l'œil. */
[data-watch-panel] .fzh-watch-star {
    flex: none; width: 24px; height: 24px; margin-right: -2px;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 6px;
    background: transparent; color: var(--fzd-text-muted); cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
[data-watch-panel] .fzh-watch-star:hover { background: var(--fzd-bg-alt); color: var(--fzd-accent); }
[data-watch-panel] .fzh-watch-star.is-saved { color: var(--fzd-accent); }
[data-watch-panel] .fzh-watch-star.is-saved svg { fill: var(--fzd-accent-tint); }
[data-watch-panel] .fzh-watch-star .fzh-icon { display: inline-flex; }

/* La fiche ouverte depuis une carte garde la note longue de la trousse en
   tête ; un buteur du calendrier n'en a pas, et la barre se retire. */
.fzh-career-note { margin: 0 0 16px; padding: 12px; border-left: 3px solid var(--position-def); color: var(--text-main); line-height: 1.5; }
.fzh-career-note[hidden] { display: none; }

[data-watch-panel] :focus-visible { outline: 2px solid var(--fzd-accent); outline-offset: 2px; }

/* Points en barres fines sur l'accueil repêchage, comme la maquette : l'actif
   s'allonge. La règle vaut pour les deux carrousels du même écran — les
   mouvements et les joueurs à surveiller défilent côte à côte, ils ne peuvent
   pas se paginer de deux façons. */
.fzh .fzd-off-dots { gap: 5px; }
.fzh .fzd-off-dot { width: 6px; height: 12px; }
.fzh .fzd-off-dot::after { height: 3px; background: #38383A; }
.fzh .fzd-off-dot.is-active { width: 16px; }
.fzh .fzd-off-dot.is-active::after { background: var(--primary); }

@media (max-width: 768px) {
    .fzh-watch-filter select { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fzh-watch-track { scroll-behavior: auto !important; }
}

/* ---- Après le repêchage : activité de la ligue ----
   Même châssis que « À surveiller » : ce panneau EST le même nœud, qui
   change de contenu une fois les choix faits (fzdRendreSurveiller). */
.fzd-off-tag.is-sale { background: var(--fzd-accent-tint); color: var(--fzd-accent); }
a.fzh-ligue-card { color: inherit; text-decoration: none; }
a.fzh-ligue-card:hover { border-color: rgba(var(--primary-rgb), .4); }
a.fzh-ligue-card:focus-visible { outline: 2px solid var(--fzd-accent); outline-offset: 2px; }
.fzh-ligue-card.is-sale .fzd-off-stat-val { color: var(--fzd-accent); }
.fzh-ligue-text {
    margin: 4px 0 0;
    font: 500 13px/1.45 'Barlow', system-ui, sans-serif;
    color: var(--fzd-ink);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fzh-ligue-link {
    flex: 1 1 auto;
    font: 600 12px/1.2 'Barlow Condensed', sans-serif;
    letter-spacing: .04em;
    color: var(--fzd-accent);
    text-decoration: none;
}
.fzh-ligue-link:hover { text-decoration: underline; }