/* ============================================================================
   LeDirectLive.be — Habillage de Bootstrap 5.3 via ses variables CSS natives.
   Le thème "journal sportif vintage / tampon encreur" est obtenu en
   surchargeant --bs-* plutôt qu'en écrivant des classes personnalisées :
   les composants Bootstrap (btn, card, table, badge, navbar...) héritent
   donc automatiquement de l'identité visuelle du site.
   ============================================================================ */
:root {
  /* Palette (convertie depuis les valeurs OKLCH d'origine) */
  --bs-body-bg: #E7E1D3;        /* paper */
  --bs-body-color: #080200;     /* ink */
  --bs-secondary-color: #4B4130; /* muted */
  --bs-primary: #9B0000;        /* stamp (rouge tampon) */
  --bs-primary-rgb: 155, 0, 0;
  --bs-secondary: #4B4130;
  --bs-secondary-rgb: 75, 65, 48;
  --bs-success: #005F0E;        /* badge (vert) */
  --bs-success-rgb: 0, 95, 14;
  --bs-border-color: #BBAC92;
  --bs-link-color: #9B0000;
  --bs-link-hover-color: #8D0000;
  --bs-dark: #080200;
  --bs-dark-rgb: 8, 2, 0;
  --bs-light: #F0EBE0;          /* paper 2 */
  --bs-light-rgb: 240, 235, 224;

  /* Typographie */
  --bs-body-font-family: 'DM Serif Text', Georgia, serif;
  --bs-font-monospace: 'JetBrains Mono', ui-monospace, monospace;
  --font-display: 'Anton', Impact, 'Arial Black', sans-serif;
  --font-serif: 'DM Serif Display', Georgia, serif;

  /* Coins nets (esthétique "tampon"), pas d'arrondi Bootstrap par défaut */
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-width: 2px;

  /* Alias de compatibilité (pages/CSS pas encore migrées vers les classes Bootstrap natives) */
  --color-primary: var(--bs-primary);
  --color-primary-dark: var(--bs-dark);
  --color-accent: var(--bs-primary);
  --color-text: var(--bs-body-color);
  --color-text-muted: var(--bs-secondary-color);
  --color-bg: var(--bs-body-bg);
  --color-surface: var(--bs-light);
  --color-border: var(--bs-border-color);
  --color-win: var(--bs-success);
  --color-loss: var(--bs-primary);
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --shadow-card: none;
  --shadow-hover: 0 10px 30px rgba(0,0,0,.2);

  --gutter: 32px;
}

body {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(0,0,0,0.025) 28px, rgba(0,0,0,0.025) 29px);
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.navbar { background-color: var(--bs-light); border-bottom: 3px solid var(--bs-dark);}
.navbar > .container { padding-inline: var(--gutter); }
.navbar-brand span { font-family: var(--font-display); font-size: 1.375rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bs-dark); vertical-align: bottom; }
.navbar-brand .stamp { color: var(--bs-primary); }
.navbar-brand .stamp2 { font-family: var(--bs-font-monospace); font-size: 0.6875rem; color: var(--bs-secondary-color); vertical-align: baseline; }
.nav-item-ldl { font-family: var(--bs-font-monospace); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.nav-item-ldl:hover, .nav-item-ldl.active { color: var(--bs-primary) !important; }
.nav-item a { font-family: var(--bs-font-monospace); font-size: .75rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 12px; color: var(--bs-secondary-color); border: 2px solid transparent; white-space: nowrap; transition: border-color 0.2s; }
  
.stamp { color: var(--bs-primary); }
.stamp2 { font-family: var(--bs-font-monospace); font-size: 1.875rem; color: var(--bs-secondary-color); }

.hero, .line { padding-block: clamp(48px, 8vw, 80px); border-bottom: 4px double var(--bs-body-color); }
.hero-inner { max-width: 760px; }
.hero h1 { font-size: clamp(56px, 10vw, 110px); line-height: 0.92; letter-spacing: -0.02em; }
.hero h1 .stamp { display: block; }
.hero .tagline { font-family: var(--font-serif); font-style: italic; font-size: clamp(19px, 3vw, 30px); color: var(--bs-secondary-color); }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.hero-province { position: relative; display: inline-flex; align-items: center; }
.hero-province select { appearance: none; -webkit-appearance: none; font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 10px 44px 10px 16px; border: 3px solid var(--bs-body-color); background: var(--bs-light); color: var(--bs-body-color); border-radius: 0; cursor: pointer; transition: background 0.15s,color 0.15s; min-width: 14rem;}

.hero-province select:hover { background: var(--bs-body-color); color: var(--bs-light); }
.hero-province select:focus { outline: 3px solid var(--bs-primary); outline-offset: 2px; border-color: var(--bs-body-color); box-shadow: none; }
.hero-province::after { content: '▼'; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 10px; pointer-events: none; color: var(--bs-body-color); }

/* Boutons de navigation (jour/semaine précédent-suivant) : même apparence que .hero-province select. */
.nav-date-btn { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; padding: 10px 16px; border: 3px solid var(--bs-body-color); background: var(--bs-light); color: var(--bs-body-color); border-radius: 0; transition: background 0.15s,color 0.15s; text-decoration: none; white-space: nowrap; }
.nav-date-btn:hover { background: var(--bs-body-color); color: var(--bs-light); }
.nav-date-btn.disabled { visibility: hidden; }
.nav-date-label { font-family: var(--bs-font-monospace); font-size: 1.1rem; letter-spacing: .03em; min-width: 0; }

@media (max-width: 575.98px) {
  .nav-date-btn { padding: 8px 10px; font-size: 13px; }
  .nav-date-label { font-size: .8rem; letter-spacing: .01em; }
  .live-club-logo { width: 22px !important; height: 22px !important; }
}

.button { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.875rem 2rem; border: 3px solid var(--bs-body-color); background: var(--bs-light); color: var(--bs-body-color); transition: background 0.15s, color 0.15s, transform 0.1s; text-decoration: none; }
.button-stamp { background: var(--bs-primary); border-color: var(--bs-primary); color: var(--bs-light); }

.headline-block { border-bottom: 2px solid var(--bs-body-color); display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.headline-block h2 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); line-height: 0                                                                            .94; text-transform: uppercase; }
.headline-block .sub { font-family: var(--font-serif); font-size: .8125rem; font-style: italic; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bs-secondary-color); }

.match-stamp { background: var(--bs-light); border: 3px solid var(--bs-body-color); padding: 18px 15px; position: relative; }
.match-stamp .teams { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; display: flex; justify-content: space-between; }
.match-stamp .score { font-family: var(--font-display); font-size: 42px; text-align: center; display: flex; justify-content: center; gap: 8px; }

.name { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.02em; }

.division-header { display: flex; align-items: baseline; gap: 14px; position: relative; padding-block: 10px; color: var(--division-color, var(--bs-primary)); }

/* Onglets de classement (Général/Domicile/Extérieur/Tranche) : police
   d'affichage sur tous les onglets, fond rouge tampon uniquement sur l'actif. */
.nav-pills .nav-link {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.nav-pills .nav-link.active {
  background-color: var(--bs-primary);
}
.div-meta { font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); }

.kickoff { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); white-space: nowrap; }
.day-name { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bs-body-color); }

.tab-btn { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; }
.info-card { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; border-bottom: 2px solid var(--bs-body-color); padding-bottom: 6px; margin-bottom: 12px; }
.info-row { display: flex; justify-content: space-between; font-family: var(--bs-font-monospace); font-size: 14px; padding: 6px 0; }

.ranking-header { font-family: var(--bs-font-monospace); font-size: 15px; font-weight: 600; text-align: center; border-bottom: 3px solid var(--bs-dark); margin: 0 auto; padding-bottom: .25rem;}
.ranking-row { font-family: var(--bs-font-monospace); font-size: 15px; text-align: center; border-bottom: 1px solid var(--bs-border-color); margin: 0 auto; padding: .4375rem 0; }
.ranking-row2 { font-family: var(--bs-font-monospace); font-size: 14px; text-align: center; border-bottom: 1px solid var(--bs-border-color); margin: 0 auto; padding: .32rem 0; letter-spacing: -1px;}

/* Équipes promues (place <= promotion) ou reléguées (place > total - relegation),
   selon les champs promotion/relegation de ldl_competition. Bordure gauche
   discrète plutôt qu'un fond franc, cohérent avec le reste du thème. */
.promotion-row { border-left: 4px solid var(--bs-success); background: color-mix(in srgb, var(--bs-success) 6%, transparent); }
.relegation-row { border-left: 4px solid var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 6%, transparent); }

/* Page /classements : un cadre par championnat, 3 colonnes sur grand écran,
   2 sur tablette, 1 sur smartphone — chaque division s'enchaîne naturellement
   (flux de lecture gauche à droite, haut en bas). */
.classements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; }
.classement-card { height: 100%; }
.classement-height { min-height: 250px;}
@media (max-width: 991.98px) {
  .classements-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767.98px) {
  .classements-grid { grid-template-columns: 1fr; }
}

/* Noms de club dans le classement compact (page /classements) : jamais le nom
   complet ni la version la plus courte (n9), qui débordent ou tronquent trop
   dans un cadre étroit. n20 par défaut (grand écran), n12 dès que le cadre
   passe sur une seule colonne (smartphone). */
.classement-compact-name .rname .full,
.classement-compact-name .rname .n9 { display: none; }
.classement-compact-name .rname .n20 { display: inline; }
.classement-compact-name .rname .n12 { display: none; }
@media (max-width: 767.98px) {
  .classement-compact-name .rname .n20 { display: none; }
  .classement-compact-name .rname .n12 { display: inline; }
}

/* Tableau de coupe (bracket) : colonnes défilables horizontalement, une
   carte par match, avec une distinction visuelle claire entre équipe
   connue et "vainqueur du match précédent" pas encore joué. */
.bracket-scroll { overflow-x: auto; padding-bottom: 1rem; }
.bracket-tours { display: flex; gap: 32px; align-items: flex-start; min-width: max-content; position: relative; }
.bracket-svg { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; }
.bracket-lien { fill: none; stroke: var(--bs-secondary-color); stroke-width: 2px; }
.bracket-lien-vide { stroke-dasharray: 4 3; opacity: 0.5; }
.bracket-tour { display: flex; flex-direction: column; gap: 24px; flex: 0 0 245px; width: 245px; position: relative; z-index: 1; }
.bracket-tour.bracket-tour-cascade { display: block; }
.bracket-tour.bracket-tour-cascade .bracket-match { position: absolute; left: 0; right: 0; }
.bracket-tour-titre { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 14px; text-align: center; border-bottom: 2px solid var(--bs-dark); padding-bottom: 6px; margin-bottom: 4px; }
.bracket-match { border: 2px solid var(--bs-dark); background: var(--bs-light); padding: 8px 10px; position: relative; }
.bracket-match.bracket-bye { opacity: 0.6; }
.bracket-match.bracket-vide { border-style: dashed; border-color: var(--bs-border-color); background: transparent; min-height: 40px; }
.bracket-num { position: absolute; top: -10px; right: 6px; background: var(--bs-primary); color: #fff; font-family: var(--bs-font-monospace); font-size: 10px; padding: 1px 6px; text-decoration: none; }
.bracket-equipe { font-family: var(--bs-font-monospace); font-size: 13px; padding: 4px 2px; border-bottom: 1px solid var(--bs-border-color); display: flex; justify-content: space-between; gap: 6px; }
.bracket-equipe:last-child { border-bottom: none; }
.bracket-equipe.bracket-en-attente { color: var(--bs-secondary-color); font-style: italic; }
.bracket-score { font-weight: 700; color: var(--bs-primary); white-space: nowrap; }

/* Vue "mon parcours" : chaîne horizontale simple, une case par tour reliée
   par des flèches — volontairement distincte de l'arbre complet, puisqu'il
   n'y a ici qu'un seul chemin à suivre, pas de structure binaire à tracer. */
.bracket-parcours-container { max-width: 900px; }
.bracket-parcours { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.bracket-parcours-etape { display: flex; flex-direction: column; align-items: center; width: 220px; }
.bracket-parcours-tour { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; margin-bottom: 6px; color: var(--bs-secondary-color); }
.bracket-parcours-etape .bracket-match { width: 100%; }
.bracket-parcours-fleche { font-size: 22px; color: var(--bs-secondary-color); align-self: center; margin-top: 18px; }
.bracket-equipe.bracket-parcours-club { font-weight: 700; color: var(--bs-dark); background: color-mix(in srgb, var(--bs-primary) 12%, transparent); }

.stamp-row { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; width: 400px; margin: 0 auto; }
.stamp-tag { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 2px solid var(--bs-body-color); padding: 4px 14px; display: inline-block; background: var(--bs-light); color: var(--bs-secondary-color); transition: background 0.15s, color 0.15s; }
.stamp-tag:hover { background: var(--bs-body-color); color: var(--bs-light); }
.cta-section h2 { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); text-transform: uppercase; line-height: 0.94; }
.cta-sub { font-family: var(--font-serif); font-size: 1.25rem; font-style: italic; color: var(--bs-secondary-color); }
.game-rank { font-family: var(--bs-font-monospace); font-size: .825rem; font-weight: 700; letter-spacing: -1px; }

.site-footer { font-family: var(--bs-font-monospace); font-size: .8rem; }

/* ============================================================================
   Tampons de match — le "KICK OFF" / "● LIVE" ne peuvent pas venir de
   Bootstrap (ce sont des pseudo-éléments décoratifs propres au site).
   position:relative déjà posé plus haut (bloc .match-stamp initial).
   ============================================================================ */
/*
.match-stamp::before {
  content: 'KICK OFF';
  position: absolute; top: -10px; right: -10px;
  font-family: var(--bs-font-monospace); font-size: 10px; font-weight: 700;
  background: var(--bs-secondary-color); color: var(--bs-light);
  padding: 2px 8px; transform: rotate(6deg); z-index: 1;
}
*/
.match-stamp.live::before { background: var(--bs-primary); }
.match-stamp.live::after {
  content: '● LIVE';
  position: absolute; bottom: -8px; left: -8px;
  font-family: var(--bs-font-monospace); font-size: 10px; font-weight: 700;
  background: var(--bs-body-color); color: var(--bs-light);
  padding: 2px 8px; z-index: 1;
  animation: pulse-stamp 1.4s ease-in-out infinite;
}
@keyframes pulse-stamp { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .match-stamp.live::after { animation: none; } }

.newspaper-rule { border: 0; border-top: 1px solid var(--bs-body-color); position: relative; text-align: center; margin: 2.5rem 0; }
.newspaper-rule::after {
  content: '◆'; position: relative; top: -0.7em;
  background: var(--bs-body-bg); padding: 0 1rem;
}

/* ============================================================================
   Noms de club responsives (Ldl\Core\ClubName) — bascule vers un nom plus
   court sur petit écran : logique fonctionnelle, pas juste décorative.
   ============================================================================ */
.rname .n20, .rname .n12, .rname .n9 { display: none; }
/* Mobile (< 768px, sous le breakpoint Bootstrap md) : nom sur 9 caractères */
@media (max-width: 767.98px) { .rname .full { display: none; } .rname .n9 { display: inline; } }
/* Tablette (768px à 991px, breakpoint Bootstrap md) : nom sur 12 caractères */
@media (min-width: 768px) and (max-width: 991.98px) { .rname .full { display: none; } .rname .n12 { display: inline; } }

/* Pages de classement complet (/stats/{rubrique}) : le nom sur 9 caractères
   est trop court pour rester lisible dans ces lignes plus denses — on garde
   le nom sur 20 caractères dès le mobile (pas seulement à partir de la
   tablette), en lieu et place de la bascule générique ci-dessus. */
@media (max-width: 767.98px) { .ranking-name .rname .n9, .ranking-club .rname .n9 { display: none; } .ranking-name .rname .n20, .ranking-club .rname .n20 { display: inline; } }

/* Ligne de match en direct (page /live) : léger fond pour se distinguer. */
.live-row.live-row { background: color-mix(in srgb, var(--bs-primary) 6%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   Pages "classement complet + spotlight" (/stats/{rubrique})
   Générique : sert aux buteurs (joueurs) ET aux attaques/défenses (clubs).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── bandeau hero de la page ────────────────────────────────────────── */
.division-hero { padding-block: clamp(28px, 5vw, 56px); border-bottom: 4px double var(--bs-body-color); text-align: center; }
.division-hero-meta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.division-hero-meta .stamp-tag { font-size: 11px; }
.division-title { font-family: var(--font-display); font-size: clamp(48px, 10vw, 96px); line-height: 0.92; text-transform: uppercase; letter-spacing: 0.01em; color: var(--bs-success); }
.division-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(16px, 2.4vw, 22px); color: var(--bs-secondary-color); margin-top: 8px; }
.division-week { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; flex-wrap: wrap; }
.division-week .week-arrow { font-family: var(--bs-font-monospace); color: var(--bs-secondary-color); font-size: 14px; }

/* ─── cadre encadré (spotlight, liste de classement) ─────────────────── */
.match-frame { background: var(--bs-light); overflow: hidden; }
.hb-badge { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border: 2px solid var(--bs-success); background: var(--bs-light); color: var(--bs-success); white-space: nowrap; }

/* ─── spotlight (n°1 mis en avant) ────────────────────────────────────── */
.spotlight-block { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(20px, 4vw, 36px); }
.spotlight-num { font-family: var(--font-display); font-size: clamp(80px, 14vw, 140px); line-height: 0.82; color: var(--bs-primary); -webkit-text-stroke: 2px var(--bs-body-color); min-width: 0; }
.spotlight-info .stamp-tag { margin-bottom: 12px; }
.spotlight-name { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 48px); line-height: 0.92; text-transform: uppercase; letter-spacing: 0.01em; }
.spotlight-club { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--bs-font-monospace); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); }
.spotlight-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.spotlight-stats .chip { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; border: 2px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); }
.spotlight-stats .chip strong { color: var(--bs-primary); }
@media (max-width: 640px) { .spotlight-block { grid-template-columns: 1fr; text-align: center; } .spotlight-club { justify-content: center; } .spotlight-stats { justify-content: center; } }

/* ─── liste de classement (joueurs ou clubs) ──────────────────────────── */
.ranking-head { display: none; font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); background: var(--bs-body-bg); border-bottom: 2px solid var(--bs-body-color); padding: 10px 18px; }
.ranking-head > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 992px) { .ranking-head { display: flex; } }

.ranking-item { padding: 8px 18px; border-bottom: 1px solid var(--bs-border-color); transition: background .12s ease; }
.ranking-item:last-child { border-bottom: none; }
.ranking-item:hover { background: rgba(0,0,0,.03); }
.ranking-item.leader { border-top: 3px solid var(--bs-body-color); }

.ranking-rank { font-family: var(--font-display); font-size: 28px; line-height: .95; color: var(--bs-secondary-color); }
.ranking-rank.first { color: var(--bs-primary); }
.ranking-name { display: flex; align-items: center; font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.ranking-club { display: inline-flex; align-items: center; gap: 8px; font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--bs-secondary-color); margin-top: 8px; }

.ranking-stat { font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.ranking-stat .stat-label { display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-right: 6px; }
.ranking-stat.stat-muted { color: var(--bs-secondary-color); }

.ranking-value { display: flex; align-items: center; gap: 14px; }
.ranking-value .num { font-family: var(--font-display); font-size: 32px; line-height: .9; min-width: 34px; text-align: right; }
.value-bar { height: 5px; background: var(--bs-border-color); flex: 1; max-width: 140px; }
.value-bar span { display: block; height: 100%; background: var(--bs-primary); }
.value-bar span.variant-badge { background: var(--bs-success); }
.value-bar span.variant-ink { background: var(--bs-body-color); }

@media (max-width: 991.98px) { .ranking-item { padding-top: 12px; padding-bottom: 12px; } .ranking-value { margin-top: 12px; } .ranking-value .num { text-align: left; } .ranking-stat { margin-top: 8px; } }

/* ─── recherche instantanée (filtre client) ───────────────────────────── */
.list-filter { position: relative; }
.list-filter input { font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--bs-body-color); background: var(--bs-light); border: 2px solid var(--bs-body-color); padding: 8px 12px 8px 34px; width: 220px; max-width: calc(100vw - 48px); }
.list-filter input::placeholder { color: var(--bs-secondary-color); }
.list-filter input:focus-visible { outline: none; border-color: var(--bs-primary); }
.list-filter::before { content: '⌕'; position: absolute; left: 11px; top: 50%; transform: translateY(-52%); font-family: var(--bs-font-monospace); font-size: 16px; color: var(--bs-primary); pointer-events: none; }
.list-filter .clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-family: var(--bs-font-monospace); font-size: 12px; color: var(--bs-secondary-color); background: none; border: none; cursor: pointer; padding: 2px 4px; }
.list-filter .clear:hover { color: var(--bs-body-color); }
@media (max-width: 700px) { .list-filter { width: 100%; } .list-filter input { width: 100%; } }

.empty-state { display: none; padding: 40px 24px; text-align: center; font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); }
.empty-state.show { display: block; }

/* ─── bandeau de statistiques globales (bas de page) ──────────────────── */
.stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.stat-cell { border: 2px solid var(--bs-border-color); background: var(--bs-light); padding: 16px; text-align: center; }
.stat-cell .num { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1; color: var(--bs-primary); }
.stat-cell .lbl { font-family: var(--bs-font-monospace); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--bs-secondary-color); margin-top: 6px; }
@media (max-width: 700px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }


/* ═══════════════════════════════════════════════════════════════════════
   Page équipe (/equipe/{matricule}[-{suffixe}])
   Reproduction fidèle de la maquette "club-bercheux" — classes propres à
   cette page (ne réutilise pas les classes génériques .ranking-item /
   .spotlight-block des pages /stats, pour ne pas risquer de régression
   ailleurs sur le site).
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── hero équipe ──────────────────────────────────────────────────────── */
.team-hero { padding-block: clamp(36px, 6vw, 64px); border-bottom: 4px double var(--bs-body-color); text-align: center; }
.team-crest { display: inline-flex; align-items: center; justify-content: center; width: clamp(72px, 10vw, 104px); height: clamp(72px, 10vw, 104px); overflow: hidden; margin-bottom: 18px; }
.team-crest img { width: 100%; height: 100%; object-fit: contain; }
.team-crest span { font-family: var(--font-display); font-size: clamp(30px, 4.5vw, 46px); color: var(--bs-primary); -webkit-text-stroke: 1px var(--bs-body-color); }
.team-kicker { font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--bs-secondary-color); margin-bottom: 6px; }
.team-title { font-family: var(--font-display); font-size: clamp(56px, 11vw, 110px); line-height: 0.92; text-transform: uppercase; letter-spacing: 0.01em; color: var(--bs-body-color); }
.team-title .stamp { color: var(--bs-primary); }
.team-sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 2.6vw, 24px); color: var(--bs-secondary-color); margin-top: 10px; }
.team-stats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 24px; }
.team-stats .chip { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 12px; border: 2px solid var(--bs-border-color); background: var(--bs-light); color: var(--bs-body-color); }
.team-stats .chip strong { color: var(--bs-primary); }
.team-stats .chip .sw { display: inline-block; width: 8px; height: 8px; border: 1px solid var(--bs-body-color); vertical-align: 0; margin-right: 3px; }
.team-stats .chip .sw.v { background: var(--bs-success); }
.team-stats .chip .sw.n { background: var(--bs-secondary-color); }
.team-stats .chip .sw.d { background: var(--bs-primary); }
.team-stats .chip .sw.cy { width: 7px; height: 10px; background: #E8B800; border-color: var(--bs-body-color); }
.team-hero-meta { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.team-hero-meta .stamp-tag { font-size: 11px; }

/* ─── tabs (JS autonome, sans dépendance Bootstrap) — cantonné à
   .tabs-nav/.tabs-section (page équipe) pour ne jamais affecter les onglets
   Bootstrap nav-tabs d'autres pages (ex: match.php) qui réutilisent aussi
   le nom de classe .tab-btn dans un contexte différent. ────────────────── */
.tabs-section { padding-block: clamp(32px, 5vw, 64px); }
.tabs-nav { display: flex; gap: 0; border-bottom: 3px solid var(--bs-body-color); margin-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.tabs-nav::-webkit-scrollbar { display: none; }
.tabs-nav .tab-btn { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; padding: 14px 22px; border: 2px solid var(--bs-body-color); border-bottom: none; background: var(--bs-body-bg); color: var(--bs-secondary-color); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; position: relative; top: 3px; }
.tabs-nav .tab-btn:hover { color: var(--bs-body-color); background: var(--bs-light); }
.tabs-nav .tab-btn.active { background: var(--bs-light); color: var(--bs-body-color); border-bottom: 3px solid var(--bs-light); z-index: 2; }
.tab-panel { display: none; border: 3px solid var(--bs-body-color); border-top: none; background: var(--bs-light); padding: clamp(12px, 4vw, 40px); }
.tab-panel.active { display: block; }

/* ─── position au classement (spotlight) ───────────────────────────────── */
.club-position { display: grid; grid-template-columns: auto 1fr; gap: clamp(20px, 4vw, 40px); align-items: center; padding: clamp(24px, 4vw, 36px); border: 3px solid var(--bs-body-color); background: var(--bs-body-bg); margin-bottom: 24px; }
.club-position-num { font-family: var(--font-display); font-size: clamp(72px, 12vw, 128px); line-height: 0.82; color: var(--bs-success); -webkit-text-stroke: 2px var(--bs-body-color); min-width: 0; }
.club-position-info .stamp-tag { margin-bottom: 12px; }
.club-position-title { font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 40px); line-height: 0.95; text-transform: uppercase; }
.club-position-stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.club-position-stats .chip { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; border: 2px solid var(--bs-border-color); background: var(--bs-light); color: var(--bs-body-color); }
.club-position-stats .chip strong { color: var(--bs-success); }
@media (max-width: 640px) { .club-position { grid-template-columns: 1fr; text-align: center; } .club-position-stats { justify-content: center; } }

/* ─── classement · liste responsive row/col (comme les autres onglets) ─── */
.rank-head { display: flex; font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); font-weight: 500; background: var(--bs-body-bg); padding: 10px 18px; }
.rank-head > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 992px) { .rank-head { display: flex; } }
.rank-item { padding: 14px 0; border-bottom: 1px solid var(--bs-border-color); transition: background 0.12s ease; }
.rank-item:last-child { border-bottom: none; }
.rank-item:hover { background: rgba(0,0,0,.04); }
.rank-item.leader { border-top: 3px solid var(--bs-body-color); }
.rank-item.zone-top { border-top: 2px solid var(--bs-success); }
.rank-item.zone-bottom { border-bottom: 2px solid var(--bs-primary); }
.rank-item .pl-rank { color: var(--bs-secondary-color); }
.rank-item .pl-rank.promo { color: var(--bs-success); }
.rank-item .pl-rank.rel { color: var(--bs-primary); }
.rank-item .pl-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 8px; }
.rank-item .pl-stat.pts { color: var(--bs-primary); }
.rank-item.team-item { background: color-mix(in srgb, var(--bs-primary) 7%, transparent); }
.rank-item.team-item .pl-rank, .rank-item.team-item .pl-name { color: var(--bs-primary); }
.rank-item.team-item .pl-name { font-size: 17px; }
@media (max-width: 991.98px) { .rank-item { padding-top: 16px; padding-bottom: 16px; } }
.rank-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); }
.rank-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.rank-legend .sw { width: 10px; height: 10px; display: inline-block; }
.rank-legend .sw.promo { background: var(--bs-success); }
.rank-legend .sw.rel { background: var(--bs-primary); }

/* ─── lignes de match (matchs joués / à venir) ─────────────────────────── */
.team-match-row { padding: 12px 16px; border-bottom: 1px solid var(--bs-border-color); transition: background 0.12s ease; column-gap: 12px; row-gap: 6px; text-decoration: none; color: inherit; }
.team-match-row:last-child { border-bottom: none; }
.team-match-row:hover { background: rgba(0,0,0,.03); color: inherit; }
.team-match-row .jday { font-family: var(--bs-font-monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid var(--bs-body-color); background: var(--bs-body-bg); padding: 2px 8px; white-space: nowrap; color: var(--bs-body-color); min-width: 40px; }
.team-match-row .jday.upcoming { border-style: dashed; color: var(--bs-secondary-color); }
.team-match-row .mdate { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bs-secondary-color); white-space: nowrap; min-width: 92px;}
.team-match-row .team-name { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.team-match-row .team-name.home { justify-content: flex-end; text-align: right; }
.team-match-row .team-name.bx { color: var(--bs-primary); }
.team-match-row .score-cell { display: flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 24px; justify-content: center; }
.team-match-row .score-cell .dash { color: var(--bs-secondary-color); font-size: 16px; }
.team-match-row .score-cell .win { color: var(--bs-primary); }
.team-match-row .score-cell .draw { color: var(--bs-secondary-color); }
.team-match-row .score-cell.pending { color: var(--bs-secondary-color); }
.result-chip { font-family: var(--bs-font-monospace); font-size: 12px; font-weight: 700; width: 20px; height: 23px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-secondary-color); }
.result-chip.v { border-color: var(--bs-success); color: var(--bs-success); }
.result-chip.n { border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); }
.result-chip.d { border-color: var(--bs-primary); color: var(--bs-primary); }
.result-chip.pending { border-style: dashed; color: var(--bs-secondary-color); }
.club-badge { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; overflow: hidden; flex-shrink: 0; }
.club-badge img { width: 100%; height: 100%; object-fit: contain; }
.team-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); }
.team-legend .lg { display: inline-flex; align-items: center; gap: 6px; }
.team-legend .sw { width: 10px; height: 10px; display: inline-block; }
.team-legend .sw.v { background: var(--bs-success); }
.team-legend .sw.n { background: var(--bs-secondary-color); }
.team-legend .sw.d { background: var(--bs-primary); }

/* Smartphones + tablettes : ligne de match en carte.
   Meta (journée · date · résultat) en première ligne, les deux
   équipes empilées à gauche et le score en colonne à droite,
   centré verticalement entre les deux noms. */
@media (max-width: 991.98px) {
    .team-match-row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        column-gap: 14px;
        row-gap: 8px;
        padding: 14px;
    }
    .team-match-row .jday { grid-column: 1; grid-row: 1; }
    .team-match-row .mdate { grid-column: 2; grid-row: 1; }
    .team-match-row .result-chip { grid-column: 3; grid-row: 1; justify-self: end; }
    .team-match-row .team-name.home { grid-column: 1 / 3; grid-row: 2; justify-content: flex-start; text-align: left; }
    .team-match-row .team-name.away { grid-column: 1 / 3; grid-row: 3; justify-content: flex-start; }
    .team-match-row .score-cell { grid-column: 3; grid-row: 2 / 4; justify-content: center; align-self: center; min-width: 76px; }
    .team-match-row .score-cell.pending { justify-content: center; }
}

/* ─── listes de joueurs (temps de jeu / buteurs / cartons) ─────────────── */
.list-head { display: none; font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); font-weight: 500; background: var(--bs-body-bg); border-bottom: 2px solid var(--bs-body-color); padding: 10px 18px; }
.list-head > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 992px) { .list-head { display: flex; } }
.list-item { padding: 14px 18px; border-bottom: 1px solid var(--bs-border-color); transition: background 0.12s ease; }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: rgba(0,0,0,.04); }
/* .list-item.leader { border-top: 3px solid var(--bs-body-color); }  */
.pl-rank { font-family: var(--font-display); font-size: 28px; line-height: 0.95; color: var(--bs-secondary-color); }
.pl-rank.first { color: var(--bs-primary); }
.pl-name { font-family: var(--font-display); font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.pl-pos { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); padding: 1px 6px; margin-left: 8px; white-space: nowrap; }
.pl-stat { font-family: var(--bs-font-monospace); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.pl-stat .stat-label { display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); margin-right: 6px; }
.pl-stat.stat-muted { color: var(--bs-secondary-color); }
.bar-wrap { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.bar-num { font-family: var(--font-display); font-size: 30px; line-height: 0.9; min-width: 46px; text-align: right; color: var(--bs-body-color); }
.bar-num.accent { color: var(--bs-primary); }
.bar-num.green { color: var(--bs-success); }
.bar { height: 5px; background: var(--bs-border-color); flex: 1; max-width: 150px; }
.bar span { display: block; height: 100%; background: var(--bs-body-color); }
.bar span.green { background: var(--bs-success); }
.bar span.stamp { background: var(--bs-primary); }
.bar span.leader { background: var(--bs-body-color); }
.card-swatch { display: inline-block; width: 11px; height: 15px; margin-right: 6px; vertical-align: -1px; }
.card-swatch.yellow { background: #E8B800; }
.card-swatch.red { background: var(--bs-primary); }
.card-swatch.dbl { position: relative; background: #E8B800; }
.card-swatch.dbl::after { content: '2'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; line-height: 1; color: var(--bs-body-color); }
@media (max-width: 991.98px) {
    .list-item { padding-top: 16px; padding-bottom: 16px; }
    .bar-wrap .bar-num { text-align: left; }
}

/* ─── mini-ligne de stats groupées sous le nom (mobile/tablette) ───────── */
.pl-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bs-border-color); }
.pl-note .pl-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; font-size: 15px; }
.pl-note .pl-stat .stat-label { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); margin-right: 0; }

/* ─── temps de jeu : cartes smartphones + tablettes (<992px) ───────────── */
@media (max-width: 991.98px) {
    #tab-temps-jeu .pl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tab-temps-jeu .pl-pos:not(.gk) { display: none; }
    #tab-temps-jeu .pl-stat { margin-top: 10px; }
}

/* ─── buteurs : cartes smartphones + tablettes (<992px) ─────────────────── */
@media (max-width: 991.98px) {
    #tab-buteurs .pl-rank { font-size: 22px; line-height: 1; margin-right: 18px; }
    #tab-buteurs .pl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tab-buteurs .pl-pos:not(.gk) { display: none; }
}

/* ─── cartons : cartes smartphones + tablettes (<992px) ─────────────────── */
@media (max-width: 991.98px) {
    #tab-cartons .pl-rank { font-size: 22px; line-height: 1; margin-right: 18px; }
    #tab-cartons .pl-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #tab-cartons .pl-pos:not(.gk) { display: none; }
    #tab-cartons .pl-note .card-swatch { width: 7px; height: 10px; margin-right: 4px; vertical-align: -1px; }
    #tab-cartons .pl-note .card-swatch.dbl::after { font-size: 5px; }
}

/* ─── petits smartphones (< 400px) : resserrage supplémentaire ─────────── */
@media (max-width: 400px) {
    .tabs-nav .tab-btn { font-size: 14px; padding: 12px 16px; }
    .team-match-row { gap: 6px 8px; padding: 12px; }
    .pl-name { font-size: 16px; }
    .bar-num { font-size: 26px; min-width: 40px; }
    .club-badge { width: 24px; height: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Page arbitres (/stats/arbitres) — bilan disciplinaire des officiels.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── panneaux de rôle (arbitres / assistants) ─────────────────────────── */
.role-panel { border: 3px solid var(--bs-body-color); background: var(--bs-light); overflow: hidden; }
.role-panel + .role-panel { margin-top: 44px; }
.role-panel[hidden] { display: none; }

.panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 18px 20px 14px; border-bottom: 3px solid var(--bs-body-color); background: var(--bs-body-bg); }
.panel-head .panel-kicker { font-family: var(--bs-font-monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bs-primary); display: block; margin-bottom: 3px; }
.panel-head .panel-title { font-family: var(--font-display); font-size: 26px; line-height: 0.95; text-transform: uppercase; letter-spacing: 0.04em; }
.panel-head .panel-count { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; border: 2px solid var(--bs-body-color); padding: 4px 12px; background: var(--bs-light); color: var(--bs-secondary-color); white-space: nowrap; }
.panel-head .panel-count strong { color: var(--bs-body-color); }

/* panneau assistants : accent secondaire (vert) pour bien distinguer les 2 tableaux */
.panel-assistant .panel-head { border-bottom-color: var(--bs-success); }
.panel-assistant .panel-kicker { color: var(--bs-success); }
.panel-assistant .panel-count { border-color: var(--bs-success); }
.panel-assistant .panel-count strong { color: var(--bs-success); }
.panel-assistant .ref-head { border-bottom-color: var(--bs-success); }

/* ─── liste des officiels ────────────────────────────────────────────────── */
.ref-head { display: none; font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); font-weight: 500; background: var(--bs-body-bg); border-bottom: 2px solid var(--bs-body-color); padding: 10px 18px; }
.ref-head > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-head .sortable { cursor: pointer; user-select: none; transition: color 0.12s ease; }
.ref-head .sortable:hover { color: var(--bs-body-color); }
.ref-head .sortable::after { content: ''; display: inline-block; width: 8px; margin-left: 3px; opacity: 0.4; }
.ref-head .sortable.sort-desc::after { content: '▾'; opacity: 1; color: var(--bs-primary); }
.ref-head .sortable.sort-asc::after { content: '▴'; opacity: 1; color: var(--bs-primary); }
@media (min-width: 992px) { .ref-head { display: flex; } }

.ref-item { padding: 14px 18px; border-bottom: 1px solid var(--bs-border-color); transition: background 0.12s ease; }
.ref-item:last-child { border-bottom: none; }
.ref-item:hover { background: rgba(0,0,0,.04); }

.ref-name { font-family: var(--font-display); font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.05; }
.ref-name .init { font-family: var(--bs-font-monospace); font-size: 12px; letter-spacing: 0.08em; color: var(--bs-secondary-color); }

.ref-stat { font-family: var(--bs-font-monospace); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.ref-stat .stat-label { display: inline-block; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); margin-right: 6px; }
.ref-stat.stat-muted { color: var(--bs-secondary-color); }
.ref-stat.warn { color: #E8B800; }
.ref-stat.dang { color: var(--bs-primary); }

.ref-moy { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.ref-moy .num { font-family: var(--font-display); font-size: 26px; line-height: 0.9; color: var(--bs-primary); }
.ref-moy .unit { font-family: var(--bs-font-monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color); line-height: 1.1; }
.ref-bar { height: 5px; background: var(--bs-border-color); flex: 1; max-width: 80px; }
.ref-bar span { display: block; height: 100%; background: var(--bs-primary); }
.ref-bar span.best { background: var(--bs-body-color); }

@media (max-width: 991.98px) {
    .ref-item { padding-top: 18px; padding-bottom: 18px; }
    .ref-moy { margin-top: 14px; justify-content: flex-start; }
    .ref-moy .num { font-size: 30px; }
    .ref-bar { max-width: none; }
    .ref-stat { margin-top: 10px; }
}

/* ─── lien club sur match.php (logo + nom cliquables vers la page équipe) ── */
.match-team-link { display: block; text-decoration: none; color: inherit; border-radius: 6px; transition: background 0.12s ease; }
.match-team-link:hover { background: rgba(0,0,0,.04); color: inherit; }

/* ─── fiche joueur (/joueur/{id}) ─────────────────────────────────── */
.min-badge { font-family: var(--bs-font-monospace); font-size: 12px; font-weight: 700; border: 2px solid var(--bs-primary); color: var(--bs-primary); background: var(--bs-light); padding: 2px 9px; white-space: nowrap; display: inline-block; }
.pen-note { font-family: var(--bs-font-monospace); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); }
.mult-label { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: var(--bs-secondary-color); white-space: nowrap; }
.venue-tag { font-family: var(--bs-font-monospace); font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); padding: 1px 6px; white-space: nowrap; flex-shrink: 0; }
.empty-note { border: 2px dashed var(--bs-border-color); background: var(--bs-light); padding: 14px 18px; margin-top: 16px; font-family: var(--bs-font-monospace); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); text-align: center; }
.goal-dots { display: inline-flex; gap: 4px; align-items: center; }
.goal-dots i { width: 9px; height: 9px; display: inline-block; background: var(--bs-primary); border: 1px solid var(--bs-body-color); }
.log-row { display: flex; flex-wrap: wrap; align-items: center; }
.log-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-name { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.list-item .jday, .cell-jday .jday { font-family: var(--bs-font-monospace); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border: 2px solid var(--bs-body-color); background: var(--bs-body-bg); padding: 2px 8px; white-space: nowrap; color: var(--bs-body-color); display: inline-block; }
.list-item .mdate { font-family: var(--bs-font-monospace); font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--bs-secondary-color); white-space: nowrap; }
.list-item .score-cell { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 24px; }
.list-item .score-cell.sm { font-size: 18px; }
.list-item .score-cell .dash { color: var(--bs-secondary-color); font-size: 16px; }
.list-item .score-cell .win { color: var(--bs-primary); }
.list-item .score-cell .draw { color: var(--bs-secondary-color); }

/* ─── icônes de nature (but normal/penalty, type de carton) ─────────── */
.goal-type-icon, .card-type-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 2px solid var(--bs-body-color); font-family: var(--bs-font-monospace); font-size: 8px; font-weight: 700; text-transform: uppercase; color: var(--bs-body-color); background: var(--bs-light); flex-shrink: 0; vertical-align: -4px; margin-right: 2px; }
.goal-type-icon.pen { border-color: var(--orange, #c85a28); color: var(--orange, #c85a28); }
.goal-type-icon.csc { border-color: var(--bs-secondary-color); color: var(--bs-secondary-color); font-size: 6px; }
.card-type-icon.cj { border-color: #E8B800; background: #E8B800; color: var(--bs-body-color); }
.card-type-icon.cr { border-color: var(--bs-primary); background: var(--bs-primary); color: var(--bs-light); }

/* ─── en-tête de regroupement club+rôle sur la fiche joueur ──────────────── */
.club-role-header { padding-bottom: 10px; border-bottom: 3px solid var(--bs-body-color); }
.club-role-header .club-badge { width: 28px; height: 28px; }
.club-role-header .t-name { font-size: 20px; }