/* ================================================================
   FIFB — RESPONSIVE + LIGHT ADMIN PATCH
   Colle ce fichier dans public/css/responsive.css
   Puis ajoute dans header.php :
     <link rel="stylesheet" href="<?= SITE_URL ?>/public/css/responsive.css">
   ================================================================ */

/* ── Reset ────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
img, video { max-width: 100%; height: auto; }
table { width: 100%; }

/* ── Container ───────────────────────────────────────────────── */
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
@media (max-width: 600px) { .container { padding: 0 16px; } }

/* ================================================================
   NAVBAR
================================================================ */
#navbar { padding: 0 20px; }
.nav-inner { height: 70px; gap: 16px; }
.nav-logo-text .sub { display: none; }

@media (max-width: 1100px) {
  .nav-link { padding: 8px 10px; font-size: 13px; }
}
@media (max-width: 900px) {
  .nav-menu { display: none !important; }
  .hamburger { display: flex !important; }
  .nav-btn-label { display: none; }
  .nav-btn-primary { padding: 8px 12px; font-size: 13px; }
  .nav-actions .nav-btn-ghost { display: none; }
}
@media (max-width: 480px) {
  .nav-inner { height: 60px; }
  .nav-logo-text .title { font-size: 16px; }
  .nav-logo-icon { width: 36px; height: 36px; font-size: 13px; }
}

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 9999;
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  display: flex; flex-direction: column;
  background: #fff;
}
.mobile-menu.open { transform: translateX(0); }

/* ================================================================
   HERO SLIDER
================================================================ */
.hero { height: 100svh; min-height: 480px; max-height: 900px; position: relative; overflow: hidden; }

@media (max-width: 900px) {
  .hero { height: 80svh; min-height: 420px; }
  .slide-content { padding: 0 28px 80px; align-items: flex-end; }
  .slide-title   { font-size: clamp(2rem, 8vw, 3.5rem); }
  .slide-subtitle { font-size: .95rem; margin: 12px 0 22px; }
  .slide-actions .btn { padding: 10px 20px; font-size: 14px; }
}
@media (max-width: 600px) {
  .hero { height: 90svh; min-height: 360px; }
  .slide-content { padding: 0 18px 64px; }
  .slide-title   { font-size: clamp(1.7rem, 9vw, 2.8rem); }
  .slide-subtitle { display: none; }
  .slide-actions { flex-direction: column; gap: 10px; }
  .slide-actions .btn { width: 100%; justify-content: center; }
  .slider-nav, .slider-arrows { display: none !important; }
}

/* ================================================================
   STATS BAR
================================================================ */
.stats-section { padding: 36px 0; }
@media (max-width: 700px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-item  { border-right: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); padding: 20px 16px; }
  .stat-item:nth-child(2n)   { border-right: none; }
  .stat-item:nth-child(n+3)  { border-bottom: none; }
  .stat-number { font-size: 2.5rem; }
  .stat-label  { font-size: 11px; }
}

/* ================================================================
   SECTIONS
================================================================ */
.section { padding: 64px 0; }
@media (max-width: 900px) { .section { padding: 48px 0; } }
@media (max-width: 600px) { .section { padding: 36px 0; } }
.section-title    { font-size: clamp(1.8rem, 5vw, 3rem); }
.section-subtitle { font-size: .95rem; }

/* ================================================================
   HOMEPAGE — INLINE GRID OVERRIDES
   (index.php uses inline style="grid-template-columns:Xfr Yfr")
================================================================ */
@media (max-width: 768px) {
  [style*="grid-template-columns:5fr 4fr"],
  [style*="grid-template-columns: 5fr 4fr"] {
    display: flex !important; flex-direction: column !important; gap: 32px !important;
  }
  [style*="grid-template-columns:1fr 2fr"],
  [style*="grid-template-columns: 1fr 2fr"] {
    display: flex !important; flex-direction: column !important; gap: 28px !important;
  }
}

/* ================================================================
   GRIDS
================================================================ */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (max-width: 560px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 16px; }
}

/* ================================================================
   MATCH CARDS
================================================================ */
.match-card { padding: 14px 16px; gap: 12px; }
@media (max-width: 600px) {
  .match-card      { padding: 12px; gap: 8px; }
  .match-team-logo { width: 28px; height: 28px; font-size: 10px; }
  .match-team-name { font-size: 12px; }
  .match-team-city { display: none; }
  .match-score-num { font-size: 1.6rem; min-width: 30px; }
  .match-competition { font-size: 10px; }
}

/* ================================================================
   STANDINGS TABLE
================================================================ */
.standings-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .standings-table thead th,
  .standings-table tbody td { padding: 8px; font-size: 12px; }
  /* Hide drawn/goals columns on small screens */
  .standings-table thead th:nth-child(4),
  .standings-table thead th:nth-child(6),
  .standings-table thead th:nth-child(7),
  .standings-table tbody td:nth-child(4),
  .standings-table tbody td:nth-child(6),
  .standings-table tbody td:nth-child(7) { display: none; }
  .standings-club-city { display: none; }
  .standings-club-logo { width: 24px; height: 24px; }
}

/* ================================================================
   CALENDRIER
================================================================ */
.match-row-full {
  display: grid;
  grid-template-columns: 70px 120px 1fr 150px;
  gap: 16px; align-items: center; padding: 14px 16px;
}
@media (max-width: 900px) {
  .match-row-full { grid-template-columns: 55px 1fr; gap: 10px; }
  .mrf-comp, .mrf-status { display: none; }
}
@media (max-width: 600px) {
  .match-row-full { grid-template-columns: 46px 1fr; padding: 10px 12px; gap: 8px; }
  .mrf-day        { font-size: 18px; }
  .mrf-weekday    { font-size: 10px; }
  .mrf-time       { font-size: 11px; }
  .mrf-team       { font-size: 12px; }
  .mrf-logo       { width: 18px; height: 18px; }
  .mrf-score      { font-size: 16px; }
  .mrf-score-box  { min-width: 60px; }
}
.cal-filters { flex-wrap: wrap; gap: 10px; }
.view-tabs   { flex-wrap: wrap; }
.view-tab    { padding: 8px 14px; font-size: 13px; }

/* ================================================================
   CLASSEMENT
================================================================ */
.classement-selectors { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.classement-selectors .form-control { flex: 1; min-width: 160px; }
.scorers-section { margin-top: 48px; }

/* ================================================================
   BUTEURS — PODIUM
================================================================ */
.buteurs-podium { max-width: 600px; margin: 0 auto 48px; }
.buteurs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.buteurs-filters    { flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }

@media (max-width: 500px) {
  .podium-photo    { width: 60px; height: 60px; }
  .podium-photo-lg { width: 76px; height: 76px; }
  .podium-goals    { font-size: 22px; }
  .podium-goals-lg { font-size: 30px; }
  .podium-name     { font-size: 11px; }
  .podium-bar-1    { height: 56px; }
  .podium-bar-2    { height: 38px; }
  .podium-bar-3    { height: 28px; }
}
@media (max-width: 640px) {
  .buteurs-table thead th:nth-child(4),
  .buteurs-table thead th:nth-child(6),
  .buteurs-table thead th:nth-child(7),
  .buteurs-table tbody td:nth-child(4),
  .buteurs-table tbody td:nth-child(6),
  .buteurs-table tbody td:nth-child(7) { display: none; }
}

/* ================================================================
   ACTUALITÉS
================================================================ */
.news-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px; align-items: start;
}
@media (max-width: 1000px) { .news-layout { grid-template-columns: 1fr 240px; gap: 24px; } }
@media (max-width: 768px)  { .news-layout { grid-template-columns: 1fr; } .news-sidebar { display: none; } }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
@media (max-width: 600px) { .news-grid { grid-template-columns: 1fr; gap: 16px; } }

.cat-filter-tabs { gap: 6px; }
.cat-tab { padding: 5px 12px; font-size: 12px; }

/* ================================================================
   ARTICLE
================================================================ */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px; align-items: start;
}
@media (max-width: 1000px) { .article-layout { grid-template-columns: 1fr 240px; gap: 24px; } }
@media (max-width: 768px)  { .article-layout { grid-template-columns: 1fr; } }

.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
@media (max-width: 640px) { .related-grid { grid-template-columns: 1fr; gap: 12px; } }

.article-share { flex-wrap: wrap; gap: 10px; }

/* ================================================================
   CLUBS LIST
================================================================ */
.clubs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 24px; }
@media (max-width: 600px) { .clubs-grid { grid-template-columns: repeat(2,1fr); gap: 14px; } }
@media (max-width: 360px) { .clubs-grid { grid-template-columns: 1fr; } }
.division-tabs { gap: 6px; flex-wrap: wrap; }

/* ================================================================
   CLUB DÉTAIL
================================================================ */
.club-detail-layout {
  display: grid; grid-template-columns: 1fr 280px;
  gap: 40px; align-items: start;
}
@media (max-width: 1000px) { .club-detail-layout { grid-template-columns: 1fr 240px; gap: 24px; } }
@media (max-width: 768px)  { .club-detail-layout { grid-template-columns: 1fr; } .club-sidebar { display: none; } }

.club-hero-content { flex-wrap: wrap; gap: 16px; }
@media (max-width: 600px) {
  .club-hero-cover  { height: 200px; }
  .club-hero-logo   { width: 72px; height: 72px; }
  .club-hero-name   { font-size: clamp(1.6rem, 7vw, 2.5rem); }
  .club-stats-grid  { grid-template-columns: repeat(2,1fr) !important; }
}
.players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px,1fr));
  gap: 16px;
}
@media (max-width: 480px) { .players-grid { grid-template-columns: repeat(4,1fr); gap: 10px; } }

/* ================================================================
   COMPÉTITIONS
================================================================ */
.comp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px,1fr));
  gap: 24px;
}
@media (max-width: 600px) { .comp-cards { grid-template-columns: 1fr; gap: 16px; } }

/* ================================================================
   CONTACT
================================================================ */
.contact-layout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; align-items: start;
}
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; gap: 36px; } }
.contact-form-card { padding: 28px; }
@media (max-width: 600px) {
  .contact-form-card { padding: 20px; }
  .form-row .form-group.col-6 { flex: 1 1 100% !important; }
}

/* ================================================================
   SÉLECTION NATIONALE
================================================================ */
.selection-players-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
  gap: 20px;
}
@media (max-width: 600px) { .selection-players-grid { grid-template-columns: repeat(3,1fr); gap: 12px; } }
@media (max-width: 400px) { .selection-players-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } }

.sel-stats-row { grid-template-columns: repeat(4,1fr) !important; }
@media (max-width: 600px) { .sel-stats-row { grid-template-columns: repeat(2,1fr) !important; } }

.sel-matches-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(230px,1fr)); gap: 16px; }
@media (max-width: 600px) { .sel-matches-grid { grid-template-columns: 1fr; gap: 12px; } }

/* ================================================================
   GALERIE
================================================================ */
.albums-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px,1fr));
  gap: 24px;
}
@media (max-width: 600px) { .albums-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }

.gallery-masonry { columns: 4; column-gap: 12px; }
@media (max-width: 900px) { .gallery-masonry { columns: 3; } }
@media (max-width: 600px) { .gallery-masonry { columns: 2; column-gap: 8px; } }

/* ================================================================
   À PROPOS
================================================================ */
.about-layout { display: grid; grid-template-columns: 1fr 400px; gap: 56px; align-items: center; }
@media (max-width: 1000px) { .about-layout { grid-template-columns: 1fr 320px; gap: 40px; } }
@media (max-width: 768px)  { .about-layout { grid-template-columns: 1fr; } .about-image-col { display: none; } }

.mission-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
@media (max-width: 700px) { .mission-cards { grid-template-columns: 1fr; gap: 20px; } }

.about-clubs-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(100px,1fr)); gap: 16px; }
@media (max-width: 600px) { .about-clubs-grid { grid-template-columns: repeat(4,1fr); gap: 10px; } }

.about-cta-box { padding: 56px 40px; }
.about-cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 600px) {
  .about-cta-box { padding: 36px 20px; }
  .about-cta-buttons { flex-direction: column; align-items: center; }
  .about-cta-buttons .btn { width: 100%; max-width: 280px; text-align: center; justify-content: center; }
}

/* ================================================================
   FOOTER
================================================================ */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 600px)  { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

.footer-bottom { flex-wrap: wrap; gap: 12px; font-size: 13px; }
@media (max-width: 600px) { .footer-bottom { flex-direction: column; text-align: center; } }

/* Newsletter strip */
@media (max-width: 700px) {
  .footer-newsletter-inner { flex-direction: column !important; gap: 20px !important; }
  .footer-newsletter-inner form { max-width: 100% !important; }
  .footer-newsletter-inner input { min-width: 0 !important; }
}

/* ================================================================
   PAGE HERO (pages intérieures)
================================================================ */
.page-hero-sm  { padding: 100px 0 56px; }
.page-hero-md  { padding: 120px 0 80px; }
@media (max-width: 900px) {
  .page-hero-sm { padding: 88px 0 44px; }
  .page-hero-md { padding: 100px 0 60px; }
}
@media (max-width: 600px) {
  .page-hero-sm { padding: 76px 0 36px; }
  .page-hero-title { font-size: clamp(2rem, 8vw, 3.5rem); }
  .page-hero-sub   { font-size: .9rem; }
}

/* ================================================================
   FORMS (public)
================================================================ */
.form-control {
  width: 100%; padding: 11px 14px; font-size: 15px;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text); font-family: var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.form-control:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(242,101,34,.12);
}
.search-form { display: flex; gap: 8px; }
.search-input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-size: 14px; }

/* ================================================================
   SIDEBAR WIDGETS
================================================================ */
.sidebar-widget { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.sidebar-next-match .sidebar-match-card { text-align: center; }

/* ================================================================
   PAGINATION
================================================================ */
.pagination-bar { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 36px; }
.page-btn { padding: 8px 12px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; text-decoration: none; color: var(--text); background: var(--bg-card); transition: .2s; }
.page-btn:hover, .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ================================================================
   SCROLL TO TOP
================================================================ */
#scrollTop {
  position: fixed; bottom: 24px; right: 24px;
  width: 42px; height: 42px;
  background: var(--primary); color: #fff; border: none;
  border-radius: 50%; font-size: 18px; cursor: pointer;
  z-index: 800; box-shadow: var(--shadow-orange);
  display: flex; align-items: center; justify-content: center;
}
@media (max-width: 600px) { #scrollTop { bottom: 16px; right: 16px; } }