/* ==========================================================================
   FC St-Aubin/Vallon — club.css
   Charte couleur du club + composants utilitaires.
   Chargé APRÈS style.css et start-matches.css : ce fichier surcharge le
   thème « Trunk » (vert d'origine #5eb34e) sans jamais l'éditer.
   ========================================================================== */

:root {
  /* Palette brand validée (design system 2026-08-11) :
     vert dominant #2F6B34 · jaune accent #E8A300 (blason St-Aubin) */
  --clr-club: #2f6b34;        /* vert brand dominant */
  --clr-club-dark: #234f27;   /* vert foncé (hover, fonds appuyés, dégradés) */
  --clr-club-light: #61a94f;  /* vert éclairci : lisibilité sur fonds sombres (navbar, ticker) */
  --clr-accent: #e8a300;      /* jaune du blason St-Aubin (touches ponctuelles) */
  --clr-ink: #151515;         /* texte principal */
  --clr-muted: #666;          /* texte secondaire */
  --clr-paper: #fff;
}

/* Barre verte des titres de section : couleur brand (le thème la peint en #5eb34e) */
.heading-component-title::before { border-left-color: var(--clr-club); }

/* ==========================================================================
   Surcharges thème (bascule des accents #5eb34e -> vert club)
   ========================================================================== */

/* --- Boutons du thème --- */
html .button-primary,
html .button-primary:focus {
  background-color: var(--clr-club);
  border-color: var(--clr-club);
}
html .button-primary:hover,
html .button-primary:active {
  color: var(--clr-ink);
  background-color: var(--clr-accent);
  border-color: var(--clr-accent);
}
html .button-primary.button-ujarak::before {
  background: var(--clr-accent);
}
html .button-primary-outline,
html .button-primary-outline:focus {
  color: var(--clr-club);
  border-color: var(--clr-club);
}
html .button-primary-outline:hover,
html .button-primary-outline:active {
  background-color: var(--clr-club);
  border-color: var(--clr-club);
}
html .button-primary-outline.button-ujarak::before {
  background: var(--clr-club);
}

/* --- Boutons Bootstrap (.btn-primary, utilisés par le viewer PDF) --- */
.btn-primary {
  --bs-btn-bg: var(--clr-club);
  --bs-btn-border-color: var(--clr-club);
  --bs-btn-hover-bg: var(--clr-club-dark);
  --bs-btn-hover-border-color: var(--clr-club-dark);
  --bs-btn-active-bg: var(--clr-club-dark);
  --bs-btn-active-border-color: var(--clr-club-dark);
}
.btn-primary,
.btn-primary:focus {
  color: #fff;
  background: var(--clr-club);
  border-color: var(--clr-club);
}
.btn-primary:hover,
.btn-primary:active {
  color: #fff;
  background: var(--clr-club-dark);
  border-color: var(--clr-club-dark);
}
/* --- Header compact (desktop) --- */
/* La fine barre du haut (rd-navbar-panel) ne contient que Facebook en desktop :
   on la masque et on affiche l'icône dans le bandeau du logo. En mobile (fixed),
   le panel reste : il porte le bouton hamburger. */
.fcsa-header-social { display: none; margin: 0; }
@media (min-width: 1200px) {
  .rd-navbar-classic.rd-navbar-static .rd-navbar-panel { display: none; }
  /* Bandeau du logo en BLANC (le noir faisait vide et lourd) : le nouveau logo
     noir/vert y ressort, la barre de menu en dessous reste sombre. */
  .rd-navbar-classic.rd-navbar-static .rd-navbar-main-top {
    padding: 10px 0;
    background: #fff;
    border-bottom: 1px solid #e8e9e4;
  }
  .rd-navbar-classic.rd-navbar-static .fcsa-header-social .icon.icon-light {
    color: #4a4f47; /* icône Facebook lisible sur fond blanc */
  }
  .rd-navbar-classic.rd-navbar-static .fcsa-header-social .icon.icon-light:hover {
    color: var(--clr-club);
  }
  /* Le thème pose la brand en order:1 + margin-top:-50px (elle trônait entre les
     sponsors, aujourd'hui retirés) : logo CENTRÉ, contenu dans le bandeau. */
  .rd-navbar-classic.rd-navbar-static .rd-navbar-main-container {
    position: relative;
    justify-content: center;
  }
  .rd-navbar-classic.rd-navbar-static .rd-navbar-brand {
    order: 0;
    margin-top: 0;
    margin-left: 0;
    text-align: center;
  }
  .rd-navbar-classic.rd-navbar-static .rd-navbar-brand img {
    max-height: 118px; /* agrandi (demande comité 17.08) */
    max-width: none;
  }
  /* Facebook + Instagram à droite du bandeau, sans influencer le centrage du
     logo : alignés sur le bord droit du menu centré (max(...) = jamais hors
     écran sur les fenêtres plus étroites), icônes agrandies. */
  .rd-navbar-classic.rd-navbar-static .fcsa-header-social {
    display: block;
    position: absolute;
    right: max(15px, calc(50% - 585px));
    top: 50%;
    transform: translateY(-50%);
  }
  .rd-navbar-classic.rd-navbar-static .fcsa-header-social .icon {
    font-size: 26px;
    line-height: 1;
  }
  .rd-navbar-classic.rd-navbar-static .fcsa-header-social li + li {
    margin-left: 18px;
  }
}

/* --- Menu mobile : flèche d'ouverture des sous-menus --- */
/* Le thème référence la police FA4 (« FontAwesome »), non chargée → glyphe cassé.
   On la remplace par un chevron FA5 bien visible, qui pivote à l'ouverture. */
.rd-navbar-fixed .rd-navbar-submenu-toggle::after {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 16px;
  content: "\f078"; /* chevron vers le bas */
  color: var(--clr-club-light);
}

/* --- Footer : grille de liens --- */
.fcsa-footer-grid { padding-top: 10px; }
.fcsa-footer-grid .heading-6 {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .82rem;
  margin-bottom: 14px;
}
.fcsa-footer-grid ul { list-style: none; margin: 0; padding: 0; }
.fcsa-footer-grid ul li { margin: 7px 0; }
.fcsa-footer-grid a { color: rgba(255, 255, 255, .68); }
.fcsa-footer-grid a:hover { color: var(--clr-club-light); }
.fcsa-footer-grid p { color: rgba(255, 255, 255, .68); }
.fcsa-footer-logo { max-height: 76px; width: auto; margin-bottom: 14px; }
.fcsa-footer-addr i { color: var(--clr-club-light); margin-right: 6px; }
/* Icônes Facebook/Instagram du footer : agrandies, mêmes proportions que le header */
.fcsa-footer-social .icon { font-size: 26px; line-height: 1; }
.fcsa-footer-social li + li { margin-left: 18px; }
.footer-classic .customer-logos { margin-bottom: 6px; }

/* .btn-default n'existe plus en Bootstrap 5 : bouton neutre maison (viewer PDF) */
.btn-default {
  color: var(--clr-ink);
  background: #fff;
  border: 1px solid #cfd4cc;
}
.btn-default:hover,
.btn-default:focus {
  color: var(--clr-club);
  background: #f4f6f3;
  border-color: var(--clr-club);
}
.btn-default:disabled {
  color: var(--clr-muted);
  opacity: .55;
}

/* --- Liens --- */
a:hover,
a:focus,
a:active {
  color: var(--clr-club);
}
/* Sur fonds sombres (footer, navbar), version éclaircie pour rester lisible */
.context-dark a:hover,
.context-dark a:focus {
  color: var(--clr-club-light);
}
.nav-minimal-list li.active {
  color: var(--clr-club-light);
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover,
h6 a:hover,
[class*="heading-"] a:hover {
  color: var(--clr-club);
}
.nav-link {
  color: var(--clr-club) !important; /* onglets (le thème force #5eb34e !important) */
}

/* --- Titres de section (barre verticale du heading-component) --- */
.heading-component-title::before {
  border-left-color: var(--clr-club);
}

/* --- Navbar (rd-navbar) : états actif / survol --- */
.rd-navbar-static .rd-nav-item.focus .rd-nav-link,
.rd-navbar-static .rd-nav-item.opened .rd-nav-link,
.rd-navbar-static .rd-nav-item.active .rd-nav-link,
.rd-navbar-static .rd-nav-link:hover {
  color: var(--clr-club-light);
}
.rd-navbar-static .rd-nav-link:hover {
  color: var(--clr-club-light) !important; /* neutralise le hover #438038 !important du thème */
}
.rd-navbar-static .rd-dropdown-link:hover,
.rd-navbar-static .rd-megamenu-list-link:hover {
  color: var(--clr-club-light);
}
/* Menu mobile (layout fixed) : fond vert club, texte blanc lisible */
.rd-navbar-fixed .rd-nav-item:hover .rd-nav-link,
.rd-navbar-fixed .rd-nav-item.focus .rd-nav-link,
.rd-navbar-fixed .rd-nav-item.active .rd-nav-link,
.rd-navbar-fixed .rd-nav-item.opened .rd-nav-link {
  color: #fff;
  background: var(--clr-club);
}
.rd-navbar-fixed .rd-nav-link:hover {
  color: #fff !important; /* corrige le texte vert-sur-vert hérité du thème */
}
.rd-navbar-sidebar .rd-nav-item.active .rd-nav-link,
.rd-navbar-sidebar .rd-nav-link:hover {
  color: var(--clr-club-light);
}
/* Barre du haut épurée : l'icône Facebook reste calée à droite */
.rd-navbar-classic.rd-navbar-static .rd-navbar-panel-inner {
  justify-content: flex-end;
}

/* --- Breaking news (ticker) --- */
.breaking-news__label {
  color: var(--clr-club);
}
.bn-win {
  color: var(--clr-club-light);
}

/* --- Accents divers du thème visibles sur la home --- */
.statistik-modern {
  background: var(--clr-club) !important;
}
.statistik-modern::before {
  border-color: var(--clr-club) transparent transparent transparent !important;
}
.table-standings th div {
  color: var(--clr-club);
}
.result_winner {
  color: var(--clr-club);
}
.icon-primary {
  color: var(--clr-club);
}

/* ==========================================================================
   Alternance de fonds des sections
   ui_section_open() n'émet plus bg-gray-100 : les sections directes de .page
   alternent automatiquement blanc / gris très léger, et s'enchaînent bord à
   bord (aucune marge — c'est le changement de fond qui fait la séparation).
   Le hero de la home (section.fcsa-hero, fond blanc + bordure verte) compte
   comme 1re section : l'alternance repart proprement juste après lui.
   Les pages qui portent encore bg-gray-100 en dur gardent leur fond gris
   thème (#edeff4) quand elles tombent sur un rang impair (non peint ici).
   ========================================================================== */
.page > section.section {
  margin: 0;
}
.page > section.section:nth-of-type(even) {
  background-color: #f4f5f1;
}

/* ==========================================================================
   Utilitaires club (réutilisables par toutes les pages)
   ========================================================================== */

/* Couleurs */
.bg-club { background-color: var(--clr-club) !important; }
.text-club { color: var(--clr-club) !important; }
.border-club { border-color: var(--clr-club) !important; }

/* Logos sponsors (remplacent les styles inline historiques) */
.sponsor-logo {
  height: 50px;
  width: auto;
  background: var(--clr-paper);
  padding: 6px 11px;
  border-radius: 6px;
}
.sponsor-logo--lg {
  max-height: 110px;
  height: auto;
  width: auto;
  background: var(--clr-paper);
  padding: 14px;
  border-radius: 10px;
}

/* Bloc « Nos partenaires » (include/partenaires.php) : cartes homogènes */
.fcsa-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 172px;
  padding: 20px 16px;
  background: var(--clr-paper);
  border: 1px solid #e3e4da;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(21, 21, 21, 0.06);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
a.fcsa-partner-card:hover,
a.fcsa-partner-card:focus {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(21, 21, 21, 0.12);
  border-color: var(--clr-club);
}
.fcsa-partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 110px;
}
.fcsa-partner-logo img {
  max-height: 110px;
  max-width: 100%;
  width: auto;
  height: auto;
}
.fcsa-partner-name {
  color: var(--clr-muted);
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
}
a.fcsa-partner-card:hover .fcsa-partner-name,
a.fcsa-partner-card:focus .fcsa-partner-name {
  color: var(--clr-club);
}
.fcsa-partner-cta {
  margin-top: 30px;
  margin-bottom: 0;
}

/* Carte avec léger soulèvement au survol */
.fcsa-card-hover {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fcsa-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(21, 21, 21, 0.12);
}

/* Listes à puces (le thème neutralise les li ; remplace style="display:revert") */
.list-clean {
  padding-left: 1.4em;
}
.list-clean li {
  display: list-item;
  list-style: disc;
  padding-left: 0.15em;
  margin-top: 0.35em;
}

/* Iframe responsive (Google Maps, embeds) — ratio 4/3 */
.iframe-responsive {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
  overflow: hidden;
  border-radius: 6px;
}
.iframe-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Classements (site/resultats.php) — widget officiel football.ch par équipe, hauteur fixe + scroll interne */
.fcsa-classement-frame {
  width: 100%;
  height: 1100px;
  max-height: 80vh;
  margin-top: 8px;
  border: 1px solid #e9ebe4;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.fcsa-classement-iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
@media (max-width: 575.98px) {
  .fcsa-classement-frame { height: 900px; }
}

/* Viewer PDF (include/ui.php : ui_pdf_viewer) */
.pdf-frame {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  background: #eee;
}
.pdf-frame canvas {
  display: block;
  width: 100%;
  height: auto;
}
.pdf-select {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
  margin: 10px auto 0;
}
.pdf-toolbar .pdf-page-info {
  font-size: 14px;
}

/* Séparateur du footer (remplace le hr avec style inline) */
.footer-sep {
  margin-top: 20px;
  margin-bottom: 20px;
}

/* Citation du footer juniors (remplace le style inline) */
.quote-default-text-footer p {
  color: #fff;
  font-size: 20px;
}

/* Bascule logo header : grand logo dès 1195px, petit en dessous
   (corrigé : plus de chevauchement au pixel 1195) */
@media (max-width: 1194.98px) {
  .logo-big { display: none; }
}
@media (min-width: 1195px) {
  .logo-small { display: none; }
}