/* ==========================================================================  
   Site Interclubs Arras — Thème clair moderne (Rouge & Bleu)
   Police : Poppins
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root{
  /* Palette club */
  --brand-blue: #1D3A61;      /* bleu principal */
  --brand-red:  #B61D3C;      /* rouge principal */
  --brand-red-dark: #8E1A30;  /* rouge hover */
  --dark-blue: #162E6F;

  --bg-light: #F4F6F8;
  --text-main:#222;
  --text-muted:#6b7280;

  --win:#2bb673;
  --loss:#e53935;

  --border:#e5e7eb;
  --shadow:0 2px 6px rgba(0,0,0,.08);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body{
  display:flex; flex-direction:column;
  font-family:'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background:var(--bg-light); color:var(--text-main);
  line-height:1.55;
}
a{ color:var(--brand-blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  width:90%; max-width:1100px; margin:2rem auto 0; padding:0;
  flex:1; display:flex; flex-direction:column;
  margin-bottom: 0;
  padding-bottom: 0;
}

/* ==========================================================================  
   HEADER & NAV — compact + centré
   ========================================================================== */
.site-header{ background:var(--brand-blue); color:#fff; }
.site-header .container{
  padding:12px 0;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
}
.site-title{ font-size:1.25rem; letter-spacing:.2px; color:#fff; text-align:center; font-weight:700; }
.site-nav{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; align-items:center; }
.site-nav a{
  color:#e8f0f7; padding:8px 10px; border-radius:8px; font-weight:700; position:relative;
  transition: background .2s, color .2s;
}
.site-nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.site-nav a.active{ background:rgba(255,255,255,.18); color:#fff; }

/* (compat ancien header si utilisé) */
.header{ background:var(--brand-blue); color:#fff; padding:16px 0; text-align:center; }
.header h1{ font-size:1.5rem; font-weight:600; }
.header nav{ margin-top:6px; }
.header nav a{ color:#fff; margin:0 12px; font-weight:700; font-size:.95rem; text-decoration:none; }
.header nav a:hover{ opacity:.85; }

/* Bar du header : une seule ligne */
.header-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  /* si tu avais un text-align:center sur le header, on annule : */
  text-align: initial;
  padding: 10px 0;             /* réduit la hauteur du bandeau */
}

/* Groupe logo + titre */
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#fff; }
.logo-bca{ height:40px; width:auto; }
.site-title{ font-size:1.1rem; font-weight:700; white-space:nowrap; }

/* Nav */
.main-nav ul{ display:flex; gap:18px; margin:0; padding:0; list-style:none; }
.main-nav a{ text-decoration:none; color:#fff; font-weight:600; }

/* Option mobile : cacher le titre pour gagner de la place */
@media (max-width: 680px){
  .site-title{ display:none; }
}
/* ===== HERO — image entière + overlay centré, anti-rognage ===== */
/* ===== HERO (plein écran horizontal, image entière, texte centré) ===== */
.hero{
  position: relative;
  width: 100%;
  max-width: none;
  height: 40%;   
  margin: 0 auto 1.25rem;                 /* marge sous le hero */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* L’image s’affiche en entier (pas de rognage) */
.hero img{
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
}

/* Overlay unique qui couvre tout le hero et centre le contenu */
.hero-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(48px, 10vh, 96px); /* évite que le titre colle au bord */
  padding-inline: 16px;
}

/* Voile (UN SEUL) pour la lisibilité du texte */
.hero-overlay::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,.18),
    rgba(0,0,0,.45)
  );
}

/* Contenu */
.hero-content{
  position: relative;  /* passe devant le voile */
  z-index: 1;
  text-align: center;
  color: #fff;
  width: min(92%, 880px);
  margin: 0 auto;
}

.hero-content h1{
  font-size: clamp(28px, 4.6vw, 52px);
  font-weight: 800;
  margin: 0 0 12px 0;
  letter-spacing: .2px;
}

.hero-content p{
  font-size: clamp(14px, 1.6vw, 18px);
  color: #f1f1f1;
  margin: 0 0 18px 0;
}

.hero-content .btn{
  font-weight: 700;
  border-radius: 8px;
  padding: 10px 18px;
}

/* CTA */
.cta-button, .btn, .btn-primary, .btn-link, .btn-outline{
  display:inline-block; font-weight:700; border-radius:10px;
  padding:10px 14px; letter-spacing:.2px; transition:transform .15s, box-shadow .2s, background .2s, color .2s;
  box-shadow:0 8px 18px rgba(182,29,60,.22);
}
.btn-lg{ padding:12px 18px; }

.btn-primary, .btn-link, .cta-button{
  background:var(--brand-red); color:#fff !important; border:1px solid transparent;
}
.btn-primary:hover, .btn-link:hover, .cta-button:hover{
  background:var(--brand-red-dark); transform:translateY(-1px);
  box-shadow:0 12px 28px rgba(182,29,60,.30); text-decoration:none;
}
.btn-outline{
  background:#fff; color:var(--brand-blue); border:1px solid #d8e0e8; box-shadow:0 4px 10px rgba(0,0,0,.06);
}
.btn-outline:hover{ background:#f5f7fb; }

/* ==========================================================================  
   TITRES & UTILITAIRES
   ========================================================================== */
.section-title{
  position:relative; text-align:left; font-size:1.35rem; font-weight:700; color:#0f1e30;
   margin: var(--section-gap) 0;
}
.section-title::after{
  content:""; display:block; width:42px; height:3px; margin-top:6px;
  background:var(--brand-red); border-radius:2px;
}
.muted{ color:var(--text-muted); }

/* ==========================================================================  
   CARTES / BLOCS
   ========================================================================== */
.card,.feature-card,.result-card,.info-card{
  background:#fff; border:1px solid #e8ecf1; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.06);
}
.card{
  border:1px solid #e8ecf1; border-radius:14px; background:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.06);
}

.card-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; background:#f6f9fc; border-bottom:1px solid #e8ecf1;
}
.card-body{ padding:16px 18px; }
.card-actions{ display:flex; gap:10px; flex-wrap:wrap; padding:12px 16px 16px; }

/* Cartes accueil (Notre équipe / Détails des matchs) */
.cards-row{ display:flex; flex-wrap:wrap; gap:20px; margin:4px 0 24px; }
.cards-row .info-card{ flex:1; min-width:280px; padding:18px; transition:transform .2s, box-shadow .2s; }
.cards-row .info-card:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.10); }
.cards-row .info-card .btn{ margin-top:10px; }
@media (min-width:900px){
  .cards-row .info-card .btn{ margin-left:auto; display:inline-flex; }
}
/* ===== Dernier résultat – style amélioré ===== */
.result-card .card-body { padding: 22px 24px; }

.result-head {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.result-head .icon {
  font-size: 26px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(0,0,0,.08));
}
.result-head h2 {
  margin: 0; font-size: clamp(18px, 2vw, 20px);
}
.result-head .sub {
  margin-top: 2px; font-size: 13px; color: var(--muted, #6b7280);
}

.result-line {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin: 8px 0 6px;
}
.result-line .team {
  font-weight: 700; letter-spacing: .2px;
}
.result-line .vs {
  font-weight: 600; color: #6b7280; opacity: .8;
}
.score-badge {
  margin-left: auto;
  /* Pas de background ici, il sera défini dynamiquement par les classes .bg-success, etc. */
  color: #fff;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(185,28,28,.25);
  letter-spacing: .2px;
}

/* Couleurs dynamiques selon le résultat */
.score-badge.bg-success {
  background-color: #28a745; /* Vert */
}

.score-badge.bg-danger {
  background-color: #dc3545; /* Rouge */
}

.score-badge.bg-secondary {
  background-color: #6c757d; /* Gris */
}

@media (max-width: 560px) {
  .score-badge {
    margin-left: 0;
  }
}

.meta { display: flex; gap: 14px; margin: 6px 0 2px; color: #4b5563; }
.meta-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.meta-item svg { width: 16px; height: 16px; fill: currentColor; opacity: .8; }

/* Bouton secondaire en outline */
.btn.btn-outline {
  background: transparent; color: #b91c1c; border: 1px solid #b91c1c;
}
.btn.btn-outline:hover { background: rgba(185,28,28,.08); }
/* ==========================================================================  
   INDEX — Bloc central (Dernier résultat / Prochaine rencontre)
   ========================================================================== */
.home-central{
   max-width:1100px; margin:24px auto 36px;
  display:grid; gap:18px;
  grid-template-columns:repeat(2, minmax(260px, 1fr));
}
@media (max-width:900px){ .home-central{ grid-template-columns:1fr; } }

.result-card .section-title{ margin:10px 0 12px; font-size:1.25rem; }
.result-card .meta>div{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.result-card .meta>div>span:first-child{ width:18px; text-align:center; opacity:.8; }
.result-card .card-actions{ justify-content:flex-start; }
@media (min-width:900px){ .result-card .card-actions{ justify-content:flex-end; } }

.match-title{ font-weight:700; font-size:1.1rem; margin-bottom:8px; }
.vs{ color:#6b7280; margin:0 6px; }

/* ==========================================================================  
   TABLEAU ÉQUIPE
   ========================================================================== */
.team-table{ width:100%; border-collapse:collapse; margin:2rem 0; background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
.team-table thead th{ background:var(--brand-blue); color:#fff; padding:12px; text-align:left; }
.team-table th,.team-table td{ padding:12px;text-align: center; border:1px solid #ddd; vertical-align:middle; }
.team-table tbody tr:nth-child(even){ background:#f9f9f9; }
.team-table tbody tr:hover{ background:#f2f7ff; }
.team-table .rank{ width:8%; font-weight:700; color:#0f1e30; text-align:center; }
.team-table .player-cell{ display:flex; align-items:center; gap:.75rem; }
.team-table .player-cell img{
  width:78px; height:78px; border-radius:50%; object-fit:cover;
  padding:4px; border:none; background:transparent; box-shadow:0 0 6px rgba(0,0,0,.25);
}
.team-table .stat{ text-align:center; }

/* Mobile table */
@media (max-width:768px){
  .team-table thead{ display:none; }
  .team-table, .team-table tbody, .team-table tr, .team-table td{ display:block; width:100%; }
  .team-table tr{ margin-bottom:1.5rem; background:#fff; border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }
  .team-table td{ position:relative; padding:12px 1rem 12px 45%;  border:none; border-bottom:1px solid #eee; }
  .team-table td::before{ content:attr(data-label); position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-weight:700; color:var(--brand-blue); }
  .team-table .player-cell img{ width:56px; height:56px; }
}
/* ===== Scroll horizontal doux pour les tableaux larges (mobile) ===== */
.table-scroll{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;   /* inertie iOS/Android */
  scrollbar-width: thin;               /* Firefox */
}
.table-scroll > table{
  min-width: 640px;                    /* force une largeur > écran pour activer le scroll */
  border-collapse: collapse;
}
.table-scroll::-webkit-scrollbar{ height: 8px; }
.table-scroll::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.2); border-radius: 999px;
}
.fab { pointer-events: auto; }
.table-scroll { padding-bottom: 6px; } /* petit espace pour ne pas frotter le FAB */
/* ==========================================================================  
   PAGE JOUEUR
   ========================================================================== */
.photo-profil{
  width:120px; height:120px; border-radius:50%; object-fit:cover;
  display:block; margin:1.25rem auto .8rem; border:3px solid var(--brand-blue);
}
.player-profile{ max-width:700px; margin:1.25rem auto; text-align:center; }
.player-profile h2{ margin-bottom:.75rem; font-size:2rem; }

.classements{ list-style:none; padding:0; margin:1rem 0 1.5rem; }
.classements li{ margin:.3rem 0; font-size:.95rem; }

/* Forme W/L/N */
.player-forme .streak{ display:flex; gap:6px; justify-content:center; }
.player-forme .streak span{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); transition: transform .12s, box-shadow .12s, opacity .12s;
}
.player-forme .streak .w{ background:var(--win); }
.player-forme .streak .l{ background:var(--loss); }
.player-forme .streak .n{ background:#9e9e9e; }
.player-forme .streak .empty{ background:transparent; border:1px dashed #d0d7de; box-shadow:none; }
.player-forme .streak span:hover,.player-forme .streak span:focus-visible{ transform:scale(1.4); box-shadow:0 0 0 2px #fff,0 0 0 4px rgba(0,0,0,.15); }
@media (max-width:768px){ .player-forme .streak span{ width:8px; height:8px; transform:none!important; } }

/* Stats / tableaux joueur */
.player-stats{
  background:#f5f0e6; border:1px solid #ddd; border-radius:8px;
  padding:1rem; margin:0 auto 1.25rem; max-width:260px; text-align:left;
}
.player-stats h3{ margin:.25rem 0 .75rem; font-size:1.1rem; }
.player-stats ul{ list-style:none; padding:0; margin:0; }
.player-stats li{ margin:.45rem 0; }

.stat-charts{ display:flex; justify-content:center; flex-wrap:wrap; gap:1.5rem; margin:1.25rem 0; }
.stat-charts>div{ width:200px; text-align:center; }

.last-matches,.partners-table{
  width:100%; max-width:760px; margin:0 auto 1rem; background:#fff;
  border-radius:8px; overflow:hidden; border-collapse:collapse; box-shadow:var(--shadow);
}
.last-matches thead th,.partners-table thead th{
  background:#f8f9fb; text-transform:uppercase; font-size:.78rem; letter-spacing:.02em;
  padding:.6rem .8rem; text-align:center;
}
.last-matches td,.partners-table td{ padding:.6rem .8rem; border-top:1px solid #f0f2f5; text-align:center; }
.row-win td{ background:#fdfefe; } .row-loss td{ background:#fffdfd; }
.badge-win,.badge-loss{ display:inline-block; min-width:28px; text-align:center; padding:.15rem .45rem; border-radius:999px; font-weight:700; }
.badge-win{ background:#e7f7ef; color:#107441; border:1px solid #bde6cf; }
.badge-loss{ background:#fdebec; color:#b62323; border:1px solid #f5cccc; }

/* =========================================================
   PAGE JOUEUR — HERO, LAYOUT, SIDEBAR STICKY, CHARTS & TABLES
   (bloc autonome et dédoublonné)
   ========================================================= */

/* --- variables de secours (si non définies ailleurs) --- */
:root{
  --brand-blue: #1f3b66;
  --border: #e8ecf1;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

/* ---------- HERO JOUEUR ---------- */
.player-hero{
  position: relative;
  max-width: 1120px;
  margin: 18px auto 8px;
  padding: 22px 18px 14px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.player-hero .photo-profil{
  width: 112px; height: 112px; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--brand-blue);
  margin: 0 auto 10px;
}
.player-hero-text h1{
  font-size: clamp(22px, 3.6vw, 30px);
  margin: 0 0 6px;
}
.player-hero .hero-tags{
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  margin: 6px 0 2px; color: #475569;
}
.player-hero .hero-tags span{
  font-weight: 700; font-size: .9rem; color:#27364b;
  background: #f6f9fc; border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 999px;
}

/* ---------- LAYOUT GLOBAL (2 colonnes) ---------- */
.player-layout{
  position: relative;
  max-width: 1120px;
  margin: 10px auto 24px;
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(1200px 240px at 50% -40px, rgba(29,58,97,.06), transparent 60%),
    linear-gradient(180deg, rgba(29,58,97,.05), rgba(29,58,97,.02));
  border: 1px solid var(--border);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
}

/* ---------- SIDEBAR (cartes, sticky desktop) ---------- */
.player-aside{
   top: 92px;        /* ajuste selon la hauteur du header */
  align-self: start;
  display: flex; flex-direction: column; gap: 1rem;
}
.player-aside .card,
.player-aside .player-stats{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); padding:1rem;
}
.player-aside h3{ margin:0 0 8px; font-size:1rem; }
.player-aside p{ line-height:1.35; }

/* ---------- COLONNE DROITE (grandes cartes) ---------- */
.player-main > *{ margin-bottom: 14px; }
.player-main .card{
  background:#fff; border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow); padding:1rem;
}

/* ---------- CHARTS (camemberts) ---------- */
.stat-charts{
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
.chart-card{ padding:12px; text-align:center; }
.chart-wrap{ position:relative; width:min(240px, 100%); margin:0 auto; }

/* Légende */
.chart-legend{
  display:flex; align-items:center; justify-content:center;
  gap:14px; font-size:.95rem; color:#455468; margin:6px 0 12px;
}
.chart-legend .dot{ width:12px; height:12px; border-radius:50%; display:inline-block; transform: translateY(1px); border:1px solid rgba(0,0,0,.08); }
.dot-win{ background:#5cb85c; }
.dot-loss{ background:#d9534f; }
.dot-space{ width:18px; height:1px; background:transparent; }

/* Sous-titre de section */
.section-subtitle{ margin:-6px 0 10px; color:#64748b; font-size:.95rem; text-align:left; }

/* ---------- TABLES (derniers matchs / partenaires) ---------- */
.player-main table{ width:100%; border-collapse: separate; border-spacing:0; }
.player-main .last-matches,
.player-main .partners-table{ overflow:hidden; }

.player-main .last-matches thead th,
.player-main .partners-table thead th{
  position: sticky; top: 0; z-index: 1;
  background:#f8f9fb; color:#2a2f36;
  font-weight:700; letter-spacing:.2px;
  border-bottom:1px solid var(--border);
  padding:10px 12px;
}
.player-main .last-matches tbody td,
.player-main .partners-table tbody td{
  padding:10px 12px; border-bottom:1px solid #f0f2f6;
}
.player-main .last-matches tbody tr:nth-child(odd),
.player-main .partners-table tbody tr:nth-child(odd){ background:#fcfdff; }
.player-main .last-matches tbody tr:hover,
.player-main .partners-table tbody tr:hover{ background:#f6f9ff; }

/* Lignes cliquables / dates */
.last-matches tbody tr:hover{ background:#f9fbff; }
.date-cell .row-link{ text-decoration:none; border-bottom:1px dashed #8aa4d0; cursor:pointer; }
.date-cell .row-link:hover{ border-bottom-color:transparent; }

/* ---------- BADGES (résultats) ---------- */
.badge-win{
  background:#e7f7ef; color:#0f7a3a; border:1px solid #bde6cf;
  font-weight:800; padding:2px 8px; border-radius:16px; display:inline-block;
}
.badge-loss{
  background:#fdebec; color:#b62323; border:1px solid #f5cccc;
  font-weight:800; padding:2px 8px; border-radius:16px; display:inline-block;
}

/* ---------- Jauge de taux de réussite ---------- */
.winrate-wrap{ margin:10px 0 12px; }
.winrate-bar{
  height:10px; border-radius:999px; background:#eef1f5;
  overflow:hidden; border:1px solid #e4e8ee;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.winrate-fill{
  --p: 0%;
  width: var(--p); height:100%;
  background: linear-gradient(90deg,#2bb673,#1fa968);
  border-right:1px solid rgba(0,0,0,.06);
  transition: width .45s ease;
}
.winrate-label{ margin-top:6px; font-weight:700; color:#114b2d; }

/* ---------- Cartes dernier/prochain match (si utilisées ailleurs) ---------- */
.match-blocks{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:1.25rem; }
.match-card{ flex:1; min-width:280px; min-height:190px; background:#fff; border-radius:10px; box-shadow:var(--shadow); border:1px solid var(--border); padding:1rem; }

/* ---------- Filtres (Tous / Simple / Double / Mixte) ---------- */
.table-tools{ display:flex; justify-content:flex-start; margin:6px 0 10px; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filters .filter-btn{
  display:inline-block; padding:8px 12px; border:1px solid #e5e9f2; border-radius:999px;
  color:#1f2a44; text-decoration:none; font-weight:700; background:#fff;
}
.filters .filter-btn:hover{ border-color:#cfd6e4; background:#f7f9fc; }
.filters .filter-btn.is-active{
  background:#c81e4b; color:#fff; border-color:#c81e4b; box-shadow:0 6px 18px rgba(200,30,75,.18);
}

/* ---------- Etats vides ---------- */
.empty-state{ padding:12px; color:#6b7280; text-align:center; }

/* ---------- Version cartes (mobile) ---------- */
.matches-cards{ display:none; }
.match-card-item{
  border:1px solid #e8ecf1; border-radius:12px; padding:10px; background:#fff; margin:8px 0;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.match-card-item header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.match-card-item .row-link{ display:inline-block; margin-top:6px; font-weight:700; text-decoration:none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px){
  .stat-charts{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}
@media (max-width: 900px){
  .last-matches{ display:none; }     /* on masque le tableau */
  .matches-cards{ display:block; }   /* on montre les cartes */
  .player-layout{ grid-template-columns:1fr; padding:12px; }
  .player-aside{ position: static; } /* sidebar non-sticky sur mobile */
}
@media (max-width: 700px){
  .stat-charts{ grid-template-columns: 1fr; }
}
/* ==========================================================================  
   MATCHES LISTES & RENCONTRES
   ========================================================================== */
.player-link{
  color: var(--brand-blue);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,0,0,.25);
  padding-bottom: 1px;
}
.player-link:hover{
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}
.match-list{ list-style:none; margin:0; padding:0; }
.match-item{
  position:relative;
  display:grid; grid-template-columns:84px 1fr auto; gap:.75rem; align-items:center;
  padding:.75rem 1rem; border-bottom:1px solid #f0f2f5; background:#fff;
}
.match-item:last-child{ border-bottom:0; }
/* liseré win/loss */
.match-item.win::before,
.match-item.loss::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px; border-radius:2px;
}
.match-item.win::before{ background:#2bb673; }
.match-item.loss::before{ background:#e53935; }

.mi-date{ font-weight:600; font-size:.9rem; line-height:1.2; }
.mi-date small{ display:block; color:#6c757d; font-weight:500; }
.mi-body .mi-teams{ font-weight:600; }
.mi-body .mi-lieu{ color:#6c757d; font-size:.92rem; }
.mi-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; }

.badge-soft{ display:inline-block; padding:.25rem .6rem; border-radius:999px; font-weight:700; background:#f5f6f7; color:#5c636a; }
.score-chip{ min-width:52px; text-align:center; padding:.25rem .5rem; border-radius:999px; font-weight:700; font-variant-numeric:tabular-nums; }
.score-win{ background:#e8f7ee; color:#0f7a3a; }
.score-loss{ background:#fdecea; color:#c0342d; }
.score-draw{ background:#eef2ff; color:#3949ab; }
.score-sched{ background:#f5f6f7; color:#6c757d; font-weight:600; }

/* Rencontres : 2 colonnes (À venir / Derniers résultats) */
.rc-grid{
  max-width:1100px; margin:16px auto 24px;
  display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:start;
}
@media (max-width:900px){ .rc-grid{ grid-template-columns:1fr; } }

/* ==========================================================================  
   CLASSEMENT (standings)
   ========================================================================== */
.table-standings-wrap{ border-radius:12px; overflow:hidden; box-shadow:var(--shadow); background:#fff; margin-top:10px; }
.table-standings{ width:100%; border-collapse:collapse; font-size:.95rem; }
.table-standings thead th{
  background:#f7f8fb; text-transform:uppercase; letter-spacing:.02em; font-weight:700;
  font-size:.78rem; padding:.7rem .8rem; position:sticky; top:0; z-index:1;
}
.table-standings tbody td{ padding:.65rem .8rem; border-top:1px solid #eef0f4; vertical-align:middle; }
.table-standings tbody tr:hover{ background:#fafbff; }
.td-rank{ width:44px; text-align:right; }
.rank-pill{ display:inline-block; min-width:28px; text-align:center; padding:.2rem .45rem; border-radius:999px; font-weight:700; font-variant-numeric:tabular-nums; background:#eef1f6; color:#3b4252; }
.highlight-bca td{ background:#eef7ff; }
.td-team{ white-space:normal; font-weight:600; }
.td-points{ font-weight:800; }
.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Classement podium dans les cercles de rang */
.table-standings tbody tr:first-child .td-rank span {
  background-color: gold;       /* Or */
  color: white;
  font-weight: bold;
}

.table-standings tbody tr:nth-child(2) .td-rank span {
  background-color: silver;     /* Argent */
  color: white;
  font-weight: bold;
}

.table-standings tbody tr:nth-child(3) .td-rank span {
  background-color: #cd7f32;    /* Bronze */
  color: white;
  font-weight: bold;
}
/* Différences (fond coloré) */
.diff-pos {
  background-color: rgba(0, 200, 0, 0.15); /* vert clair */
  color: #0f730f;
  font-weight: bold;
}

.diff-neg {
  background-color: rgba(200, 0, 0, 0.15); /* rouge clair */
  color: #a30000;
  font-weight: bold;
}

.diff-zero {
  background-color: rgba(150, 150, 150, 0.15); /* gris clair */
  color: #555;
  font-weight: bold;
}
/* ==========================================================================  
   FOOTER + Réseaux sociaux
   ========================================================================== */
.footer {
  background: var(--brand-blue);
  color: #fff;
  text-align: center;
  padding: 20px 0;
  font-size: 0.9rem;
  margin-top: auto;
}
.footer p {
  margin: 0;
}

.social-links {
  margin-top: 10px;
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
}
body {
  margin-bottom: 0;
}

.container:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
}
/* Ne pas étirer la container sur la home */
.container.no-stretch{ flex:0 0 auto; }

/* Et rapproche un peu la dernière rangée du footer */
.cards-row{ margin-bottom: 8px; } /* au lieu de 24px/36px */

.card:last-child {
  margin-bottom: 0; /* supprime marge inutile sur le dernier élément */
}

/* Ajustement spécifique aux sections avant le footer */
.main-content {
  padding-bottom: 1.5rem; /* au lieu de valeurs plus grandes */
}

/* Boutons ronds plus visibles */
.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;               /* fond blanc net */
  transition: transform 0.2s ease, background 0.2s ease;
}
.social-btn:hover {
  transform: translateY(-2px) scale(1.05);
}

/* Icônes SVG */
.icon {
  width: 22px;
  height: 22px;
  fill: var(--brand-blue);        /* icônes bleues par défaut */
  transition: fill 0.2s ease;
}

/* Hover spécifiques */
.social-btn.fb:hover .icon { fill: #1877F2; }  /* Facebook */
.social-btn.ig:hover .icon { fill: #E4405F; }  /* Instagram */

/* Accessibilité : texte uniquement pour lecteurs d'écran */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.article-cover img {
  max-width: 100%;
  border-radius: 8px;
  margin: 12px 0;
}

/* Liste des actus */
.article-item + .article-item { margin-top: 12px; }
.article-thumb { width: 120px; height: auto; border-radius: 6px; float: left; margin: 0 12px 8px 0; }
.article-thumb-link { display:inline-block; }
.article-excerpt { margin: 8px 0 6px; }

/* Page article */
.article-card { /* ex: max-width: 820px; margin: 0 auto; */ }
.article-cover img { max-width: 100%; border-radius: 8px; display:block; margin: 12px 0; }
.article-content p { margin: .6rem 0; }

/* ==========================================================================  
   BOUTON RETOUR HAUT
   ========================================================================== */
#backToTop{
  display:none; position:fixed; bottom:30px; right:30px; z-index:99;
  background-color:var(--brand-red); color:#fff; border:none; width:58px; height:58px;
  border-radius:50%; cursor:pointer; box-shadow:0 10px 22px rgba(0,0,0,.22);
  transition: background-color .3s ease, transform .2s ease;
  display:flex; align-items:center; justify-content:center;
}
#backToTop svg{ width:24px; height:24px; fill:#fff; }
#backToTop:hover{ background-color:var(--brand-red-dark); transform:scale(1.1); }

/* ==========================================================================  
   RESPONSIVE GLOBAL
   ========================================================================== */
@media (max-width:900px){
  .site-header .container{ padding:14px 0; }
  .hero-banner{ height:340px; }
}
@media (max-width:600px){
  .hero-banner{ height:300px; }
  .cards-row{ gap:14px; }
}

h1 {
  font-size: clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
  line-height: 1.2;
  margin: 0.5em 0 0.6em;
}
.cards-row {
  margin-bottom: 12px; /* avant 24px */
}
/* Empêcher l'étirement de la container quand on le souhaite */
.container.no-stretch{ flex: 0 0 auto; }

/* (optionnel) réduire encore l’espace avant le footer */
.cards-row{ margin-bottom: 8px; }   /* au lieu de 24px */

.article-card { max-width: 800px; margin: 0 auto; }