/* =============================================================================
   Tigre Bois — css/pages/tournois.css
   Feuille propre à la page « Les tournois ». Elle ne style QUE ce que la page
   ajoute au design system : le hero compact, la barre de filtres, la grande
   carte de tournoi, les cartes d'équipe, les encarts de récompense, les
   vignettes de palmarès et l'état vide de saison.

   Tout le reste (tableaux, podium, pastilles, badges, boutons, avatars) vient
   de css/components.css et n'est jamais redéfini ici.
   Aucune couleur en dur : uniquement les variables de css/tokens.css.
   ============================================================================= */

/* ─────────────────────────────────────────────────────────────────────────────
   1. HERO COMPACT
   ───────────────────────────────────────────────────────────────────────────── */

.tb-hero-t {
  position: relative;
  isolation: isolate;
  background-color: var(--tb-vert-profond);
  color: var(--tb-creme);
  padding-block: var(--tb-e9) var(--tb-e10);
  overflow: hidden;
}

/* Tapis de green très diffus, pour que l'aplat vert ne soit pas plat. */
.tb-hero-t::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tb-degrade-tapis);
  pointer-events: none;
}

.tb-hero-t__inner {
  display: grid;
  gap: var(--tb-e7);
  align-items: center;
}

.tb-hero-t__texte { min-width: 0; }

.tb-hero-t .tb-surtitre { color: var(--tb-or-clair); }

.tb-hero-t__titre {
  margin: var(--tb-e3) 0 var(--tb-e4);
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h1);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--tb-creme);
}

.tb-hero-t__chapo {
  max-width: 58ch;
  color: var(--tb-creme-70);
}

.tb-hero-t__majeur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-e3);
  margin-top: var(--tb-e6);
  padding-top: var(--tb-e5);
  border-top: 1px solid var(--tb-ligne-claire);
  max-width: 62ch;
  font-size: var(--tb-t-petit);
  color: var(--tb-creme-70);
}

.tb-hero-t__photo {
  position: relative;
  margin: 0;
  border-radius: var(--tb-r4);
  overflow: hidden;
  border: 1px solid var(--tb-ligne-claire);
  box-shadow: var(--tb-ombre3);
}

.tb-hero-t__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  aspect-ratio: 5 / 4;
}

/* Voile discret : la photo reste une illustration, pas une vedette. */
.tb-hero-t__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tb-voile-vert-doux);
  opacity: .5;
  pointer-events: none;
}

@media (min-width: 900px) {
  .tb-hero-t { padding-block: var(--tb-e10) var(--tb-e11); }

  .tb-hero-t__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--tb-e10);
  }

  .tb-hero-t__photo img { aspect-ratio: 4 / 5; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   2. BARRE DE FILTRES
   Collante sous l'en-tête. Quand l'en-tête se densifie (attribut posé par
   app.js), la barre remonte d'autant : aucun interstice ne se crée.
   ───────────────────────────────────────────────────────────────────────────── */

.tb-filtres {
  position: sticky;
  top: var(--tb-header-h);
  z-index: var(--tb-z-collant);
  background-color: var(--tb-ivoire);
  border-bottom: 1px solid var(--tb-ligne);
  box-shadow: var(--tb-ombre1);
}

.tb-entete[data-defile] ~ #contenu .tb-filtres { top: var(--tb-header-h-dense); }

.tb-filtres__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-e4) var(--tb-e7);
  padding-block: var(--tb-e4);
}

.tb-filtres__groupe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-e4) var(--tb-e7);
  flex: 1 1 auto;
  min-width: 0;
}

.tb-filtres__champ {
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

.tb-filtres__compte {
  flex: 0 0 auto;
  margin: 0;
  font-size: var(--tb-t-petit);
  font-variant-numeric: tabular-nums;
  color: var(--tb-encre-70);
}

@media (min-width: 1024px) {
  .tb-filtres__groupe { flex: 0 1 auto; }
  .tb-filtres__champ { flex: 0 1 auto; }
  .tb-filtres__compte { margin-left: auto; }
}

/* --- Contrôle segmenté « quel classement afficher » ----------------------- */

.tb-segments {
  display: flex;
  align-items: center;
  gap: var(--tb-e4);
  flex-wrap: wrap;
}

.tb-segments__libelle {
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tb-encre-45);
}

.tb-segments__piste {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  max-width: 100%;
  border-radius: var(--tb-rond);
  border: 1px solid var(--tb-ligne);
  background: color-mix(in srgb, var(--tb-ivoire-alt) 80%, var(--tb-blanc));
  box-shadow: inset 0 1px 2px rgba(var(--tb-encre-rvb) / .05);
  overflow-x: auto;                /* défilement contenu, jamais celui de la page */
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tb-segments__piste::-webkit-scrollbar { display: none; }

.tb-segments__option {
  flex: 0 0 auto;
  min-height: 44px;                /* cible tactile confortable */
  padding: 0 var(--tb-e4);
  border: 0;
  border-radius: var(--tb-rond);
  background: transparent;
  color: var(--tb-encre-70);
  font-family: var(--tb-font-texte);
  font-size: var(--tb-t-petit);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--tb-d1) var(--tb-ease),
    color var(--tb-d1) var(--tb-ease);
}

.tb-segments__option:hover { color: var(--tb-vert); }

.tb-segments__option[data-actif] {
  background: var(--tb-vert);
  color: var(--tb-creme);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--tb-vert) 32%, transparent);
}
.tb-segments__option[data-actif]:hover { color: var(--tb-creme); }

.tb-segments :focus-visible,
.tb-filtres :focus-visible {
  outline: var(--tb-focus-trait) solid var(--tb-focus-couleur);
  outline-offset: var(--tb-focus-ecart);
  border-radius: var(--tb-rond);
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. LISTE DES TOURNOIS
   ───────────────────────────────────────────────────────────────────────────── */

.tb-tournois__liste {
  display: grid;
  gap: var(--tb-e9);
}

.tb-tournoi {
  position: relative;
  overflow: hidden;
  background-color: var(--tb-blanc);
  border: 1px solid var(--tb-ligne);
  border-radius: var(--tb-r5);
  box-shadow: var(--tb-ombre2);
  padding: clamp(var(--tb-e5), 3.4vw, var(--tb-e9));
}

/* Filet or en tête de carte — la signature des pièces de palmarès. */
.tb-tournoi::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background-image: var(--tb-lisere-or);
}

/* --- En-tête -------------------------------------------------------------- */

.tb-tournoi__entete { min-width: 0; }

.tb-tournoi__rubans {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tb-e2);
}

.tb-tournoi__nom {
  margin: var(--tb-e4) 0 var(--tb-e2);
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h2);
  line-height: 1.06;
  letter-spacing: -.01em;
  color: var(--tb-vert);
  overflow-wrap: anywhere;
}

.tb-tournoi__date {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--tb-e2);
  font-size: var(--tb-t-corps);
  font-weight: 600;
  color: var(--tb-encre-70);
}

.tb-tournoi__date::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tb-orange);
  flex: 0 0 auto;
}

.tb-tournoi__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-e4) var(--tb-e7);
  margin: var(--tb-e5) 0 0;
  padding-top: var(--tb-e5);
  border-top: 1px solid var(--tb-ligne);
}

.tb-tournoi__meta-item { min-width: 0; }

.tb-tournoi__meta-terme {
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tb-encre-45);
}

.tb-tournoi__meta-valeur {
  margin: 2px 0 0;
  font-size: var(--tb-t-corps);
  font-weight: 500;
  color: var(--tb-encre);
  overflow-wrap: anywhere;
}

/* --- Corps et volets ------------------------------------------------------ */

.tb-tournoi__corps {
  display: grid;
  gap: var(--tb-e9);
  margin-top: var(--tb-e7);
}

.tb-tournoi__volet { min-width: 0; }

.tb-tournoi__soustitre {
  display: flex;
  align-items: center;
  gap: var(--tb-e4);
  margin: 0 0 var(--tb-e6);
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h3);
  color: var(--tb-vert);
}

.tb-tournoi__soustitre::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-image: var(--tb-lisere-encre);
}

/* Podium et tableau côte à côte quand la place le permet. */
.tb-tournoi__duo {
  display: grid;
  gap: var(--tb-e7);
  align-items: start;
}

.tb-tournoi__podium,
.tb-tournoi__table { min-width: 0; }

@media (min-width: 1280px) {
  .tb-tournoi__duo {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: var(--tb-e8);
  }
}

/* --- Volet sans données : un mot d'explication, jamais un tableau nu ------ */

.tb-tournoi__vide {
  padding: var(--tb-e6);
  border: 1px dashed var(--tb-ligne-forte);
  border-radius: var(--tb-r3);
  background-color: var(--tb-ivoire);
}

.tb-tournoi__vide-texte {
  margin: 0;
  max-width: 62ch;
  font-size: var(--tb-t-petit);
  color: var(--tb-encre-70);
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. ENCARTS DE RÉCOMPENSE — casquette verte, coupe FIAT MULTICUP
   ───────────────────────────────────────────────────────────────────────────── */

.tb-prix {
  display: flex;
  align-items: center;
  gap: var(--tb-e4);
  margin-top: var(--tb-e6);
  padding: var(--tb-e4) var(--tb-e5);
  border: 1px solid var(--tb-ligne);
  border-left: 3px solid var(--tb-vert);
  border-radius: var(--tb-r3);
  background-color: var(--tb-vert-pale);
}

.tb-prix--coupe {
  border-left-color: var(--tb-or);
  background-color: color-mix(in srgb, var(--tb-or-clair) 20%, var(--tb-blanc));
  margin-top: 0;
  margin-bottom: var(--tb-e6);
}

.tb-prix__icone {
  font-size: 1.75rem;
  line-height: 1;
  flex: 0 0 auto;
}

.tb-prix__textes { min-width: 0; }

.tb-prix__titre {
  margin: 0;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h3);
  line-height: 1.2;
  color: var(--tb-vert);
}

.tb-prix--coupe .tb-prix__titre { color: color-mix(in srgb, var(--tb-or) 70%, var(--tb-encre)); }

.tb-prix__detail {
  margin: 2px 0 0;
  font-size: var(--tb-t-petit);
  color: var(--tb-encre-70);
  overflow-wrap: anywhere;
}

/* ─────────────────────────────────────────────────────────────────────────────
   5. CARTES D'ÉQUIPE
   ───────────────────────────────────────────────────────────────────────────── */

.tb-equipes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tb-e5);
}

@media (min-width: 860px) {
  .tb-equipes { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
}

.tb-equipe {
  display: flex;
  flex-direction: column;
  gap: var(--tb-e5);
  min-width: 0;
  padding: var(--tb-e5);
  border: 1px solid var(--tb-ligne);
  border-radius: var(--tb-r4);
  background-color: var(--tb-ivoire);
}

/* L'équipe gagnante remporte LA coupe : on la pose sur un fond doré discret. */
.tb-equipe--gagnante {
  border-color: color-mix(in srgb, var(--tb-or) 45%, transparent);
  background-color: color-mix(in srgb, var(--tb-or-clair) 14%, var(--tb-blanc));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tb-or) 18%, transparent), var(--tb-ombre1);
}

.tb-equipe__entete {
  display: flex;
  align-items: center;
  gap: var(--tb-e4);
  min-width: 0;
}

.tb-equipe__identite {
  flex: 1 1 auto;
  min-width: 0;
}

.tb-equipe__nom {
  margin: 0;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: 1.25rem;
  line-height: 1.15;
  color: var(--tb-vert);
  overflow-wrap: anywhere;
}

.tb-equipe__place {
  margin: 2px 0 0;
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tb-encre-45);
}

.tb-equipe__points {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.tb-equipe__valeur {
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tb-vert);
}

.tb-equipe--gagnante .tb-equipe__valeur { color: color-mix(in srgb, var(--tb-or) 76%, var(--tb-encre)); }

.tb-equipe__unite {
  margin-top: 3px;
  font-size: var(--tb-t-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tb-encre-45);
}

.tb-equipe__composition {
  padding-top: var(--tb-e4);
  border-top: 1px solid var(--tb-ligne);
}

.tb-equipe__legende {
  margin: 0 0 var(--tb-e3);
  font-size: var(--tb-t-micro);
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tb-encre-45);
}

.tb-equipe__joueurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-e3) var(--tb-e5);
}

.tb-equipe__joueur { min-width: 0; }
.tb-equipe__joueur .tb-joueur__nom { font-size: 1rem; }

/* ─────────────────────────────────────────────────────────────────────────────
   6. PALMARÈS ILLUSTRÉ
   CONFIDENTIALITÉ : ces vignettes montrent des visages. Leur largeur d'affichage
   est plafonnée à --tb-photo-restreinte (520 px), ici et nulle part ailleurs.
   ───────────────────────────────────────────────────────────────────────────── */

.tb-palmares {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-e7);
}

.tb-palmares__figure {
  margin: 0;
  flex: 1 1 280px;
  min-width: 0;
  max-width: min(100%, var(--tb-photo-restreinte));
}

/* Verrou explicite pour toute photo classée « restreinte » dans content.js. */
.tb-palmares__figure--restreinte { max-width: min(100%, var(--tb-photo-restreinte)); }

.tb-palmares__figure picture {
  display: block;
  border-radius: var(--tb-r3);
  overflow: hidden;
  border: 1px solid var(--tb-ligne-forte);
  box-shadow: var(--tb-ombre2);
  background-color: var(--tb-ivoire-alt);
}

.tb-palmares__figure img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.tb-palmares__legende {
  margin: var(--tb-e3) 0 0;
  max-width: 46ch;
  font-size: var(--tb-t-petit);
  line-height: 1.5;
  color: var(--tb-encre-70);
}

/* ─────────────────────────────────────────────────────────────────────────────
   7. ÉTAT VIDE DE SAISON — la saison en cours n'a encore aucun tournoi
   ───────────────────────────────────────────────────────────────────────────── */

.tb-vide-saison {
  display: grid;
  gap: var(--tb-e7);
  align-items: center;
  max-width: 1040px;
  margin-inline: auto;
  padding: clamp(var(--tb-e5), 3.4vw, var(--tb-e9));
  border: 1px solid var(--tb-ligne);
  border-radius: var(--tb-r5);
  background-color: var(--tb-blanc);
  box-shadow: var(--tb-ombre2);
}

@media (min-width: 900px) {
  .tb-vide-saison {
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: var(--tb-e9);
  }
}

.tb-vide-saison__photo {
  margin: 0;
  border-radius: var(--tb-r4);
  overflow: hidden;
  border: 1px solid var(--tb-ligne);
}

.tb-vide-saison__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

.tb-vide-saison__textes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--tb-e4);
  min-width: 0;
}

.tb-vide-saison__titre {
  margin: 0;
  font-family: var(--tb-font-titre);
  font-variation-settings: 'wght' 600;
  font-size: var(--tb-t-h3);
  line-height: 1.15;
  color: var(--tb-vert);
}

.tb-vide-saison__texte {
  margin: 0;
  max-width: 62ch;
  color: var(--tb-encre-70);
}

.tb-vide-saison__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tb-e3);
  margin-top: var(--tb-e2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   8. MOUVEMENT RÉDUIT
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tb-segments__option,
  .tb-tournoi,
  .tb-equipe {
    transition: none !important;
  }
}