/* ════════════════════════════════════════════════════════════════
   IT'S RUGBY — STADE PAGE CSS
   Design hérite de itsrugby-player.css (chargé en amont).
   Ce fichier contient les overrides + classes propres stade.
   ════════════════════════════════════════════════════════════════ */

/* ── Layout 2-colonnes (gauche : map + matchs / droite : infos + équipes) ──
   Largeur 90% alignée sur .section-title et le reste du site. */
.bar-body {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:24px;
  padding-top:24px;
  padding-bottom:32px;
  max-width:90%;
  margin:0 auto;
}
@media(max-width:900px){ .bar-body { grid-template-columns:1fr; } }

/* Section Statistiques intégrée dans .bar-body : occupe les 2 colonnes du grid pour
   prendre toute la largeur. Hérite ainsi automatiquement du même padding/largeur que
   les blocs map + sidebar en dessous. */
.bar-col-full { grid-column: 1 / -1; }
.bar-col-full .section { padding-top:0; }

/* Crédit par image dans la galerie (CC BY-SA). */
.stade-gallery-item { position:relative; }
.stade-gallery-credit {
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  color:#fff; font-size:9px; line-height:1.3; letter-spacing:.2px;
  padding:14px 6px 4px; pointer-events:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bar-col-left, .bar-col-right { display:flex; flex-direction:column; gap:20px; }
.bar-block { background:var(--white); border:1px solid var(--border); padding:18px 22px; }
.bar-block .section-title-sm { margin-top:0; margin-bottom:14px; }

/* ── Hero stade : photo principale ou placeholder initiales (pattern comp-photo-ini) ── */
.comp-sub {
  font-size:13px;
  color:rgba(242,229,210,.7);
  margin-top:4px;
  margin-bottom:10px;
  letter-spacing:.5px;
}

.hero-info-date {
  color:rgba(242,229,210,.6);
  font-weight:400;
  margin-left:4px;
}

/* ── Galerie photos ── */
.stade-gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:8px;
}
.stade-gallery-item {
  position:relative;
  display:block;
  aspect-ratio:4/3;
  overflow:hidden;
  background:rgba(0,0,0,.05);
  border:1px solid var(--border);
  text-decoration:none;
}
.stade-gallery-item img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .25s ease, opacity .15s;
}
.stade-gallery-item:hover img {
  transform:scale(1.04);
  opacity:.92;
}

/* ── Infos pratiques (sidebar droite) ── */
.stade-infos-grid { display:flex; flex-direction:column; gap:0; }
.stade-info-row {
  display:grid;
  grid-template-columns:130px 1fr;
  align-items:start;
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid rgba(196,196,196,.3);
  font-size:13px;
}
.stade-info-row:last-child { border-bottom:none; }
.stade-info-lbl {
  font-size:10px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  color:var(--muted);
}
.stade-info-val { color:var(--teal); font-weight:600; word-break:break-word; }
.stade-info-val a { color:var(--teal); text-decoration:none; border-bottom:1px solid rgba(28,61,52,.2); }
.stade-info-val a:hover { border-bottom-color:var(--teal); }

/* ── Équipes résidentes ── */
.stade-teams-list { display:flex; flex-direction:column; gap:6px; }
.stade-team-row {
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:10px 14px;
  background:var(--sage-lt);
  border:1px solid var(--border);
  font-size:13px;
}
.stade-team-row--current { border-left:3px solid var(--g-bright); }
.stade-team-name { font-weight:700; color:var(--teal); flex:1; min-width:0; }
.stade-team-name a { color:inherit; text-decoration:none; }
.stade-team-name a:hover { text-decoration:underline; }
.stade-team-tag {
  font-size:9px; font-weight:800;
  letter-spacing:1px; text-transform:uppercase;
  padding:2px 8px; border:1px solid currentColor;
}
/* Contraste suffisant sur fond .sage-lt : badge plein teal + texte vanilla. */
.stade-team-tag--current {
  background:var(--teal); color:var(--vanilla); border-color:var(--teal);
}
.stade-team-period { font-size:11px; color:var(--muted); white-space:nowrap; }

/* ── KPI grid 4 colonnes (statistiques stade) — base aussi dans common.css .stat-kpi-grid.stat-kpi-grid--4cols ── */
.stat-kpi-grid--4cols { grid-template-columns:repeat(4,1fr); }

/* ── Carte Leaflet ── */
.stade-map { width:100%; height:320px; border:1px solid var(--border); }
/* !important justifié : la lib Leaflet pose son propre width sur .leaflet-popup-content
   via styles externes (leaflet.css), pas accessibles par specificity simple. */
.leaflet-popup-content { width:240px !important; margin:10px; }
.leaflet-popup-content strong { color:var(--teal); }
.leaflet-popup-content em { color:var(--muted); }

/* ── Match row simple (pas de détail dépliable) ── */
.mh-row--simple { cursor:default; }
.mh-row--simple:hover { background:var(--sage-lt); }

/* ── Responsive ── */
/* On garde la double-selector pour qu'un éventuel élément sans #id reste géré ; le #id
   force la specificity (1,1,0) au-dessus de la base common.css (0,2,0), pas besoin de !important */
@media(max-width:1024px){
  #stade-stats-grid.stat-kpi-grid--4cols,
  .stat-kpi-grid--4cols { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
  body { overflow-x:hidden; }
  .container { padding-left:14px; padding-right:14px; }
  .bar-block { padding:14px 16px; }
  .stade-info-row { grid-template-columns:100px 1fr; gap:8px; font-size:12px; }
  .stade-info-lbl { font-size:9px; letter-spacing:.5px; }
  #stade-stats-grid.stat-kpi-grid--4cols,
  .stat-kpi-grid--4cols { grid-template-columns:repeat(2,1fr); }
  .mobile-hidden { display:none; }
  .stade-map { height:240px; }
}