/* ============================================================
   competition.css — Page Compétition CTT Brunoy v2
   Intro centrée, onglets équipe + bascule phase, tableau de
   classement, colonne latérale résultats filtrable par journée,
   section Tournois Annexes en cartes.
   ============================================================ */

/* ============================================================
   1. INTRODUCTION
   .comp-intro, .comp-titre, .comp-titre::after, .comp-texte :
   voir global.css §10 (composants partagés entre pages)
   ============================================================ */

/* ============================================================
   1.5. FONDS DE SECTION (2 images distinctes sur cette page)
   Chaque zone (tableau+liste / tournois annexes) a sa propre image,
   posée en pleine largeur derrière un fond clair de secours (au cas
   où l'image tarderait à charger ou serait absente). Les cartes
   (tableau, fiche, cartes tournois) restent opaques par-dessus,
   comme sur creneaux.php — pas de calque supplémentaire nécessaire.
   Fichiers attendus (à déposer par vous, même convention que pour
   l'accueil) :
     metadonnee/Image/Fond/Competition_Part_1.png (tableau + liste)
     metadonnee/Image/Fond/Competition_Part_2.png (tournois annexes)
   ============================================================ */
.comp-fond {
  width             : 100%;
  background-color  : var(--gris-clair);
  background-repeat : no-repeat;
  background-size   : cover;
  background-position: center;
  padding           : var(--espace-lg) 0;
}

.comp-fond--principal {
  background-image: url('../Image/Fond/Competition_Part1.png');
}

.comp-fond--tournois {
  background-image: url('../Image/Fond/Competition_Part2.png');
}

/* ============================================================
   2. CORPS : classement (principal) + résultats (aside)
   ============================================================ */
.comp-corps {
  display              : grid;
  grid-template-columns: 1fr 340px;
  gap                  : var(--espace-lg);
  align-items          : start;
}

.comp-barre-haut {
  display        : flex;
  justify-content: center;
  margin-bottom  : var(--espace-md);
}

/* --- Bascule Phase 1 / Phase 2 --- */
.comp-phases {
  display      : inline-flex;
  background   : var(--gris-clair);
  border-radius: var(--rayon-md);
  padding      : 4px;
  gap          : 4px;
}

.comp-phase-btn {
  font-family  : var(--font-sous-titre);
  font-weight  : 700;
  font-size    : 13px;
  padding      : 8px 20px;
  border-radius: var(--rayon-sm);
  color        : var(--noir-texte);
  transition   : background var(--transition), color var(--transition);
}

.comp-phase-btn--actif {
  background: var(--bleu-bouton);
  color     : var(--blanc);
}

.comp-soustitre {
  font-family  : var(--font-section);
  font-size    : var(--taille-h2);
  color        : var(--bleu-titre);
  text-align   : center;
  margin-bottom: var(--espace-md);
}

/* --- Onglets équipe --- */
.comp-onglets {
  display       : flex;
  flex-wrap     : wrap;
  gap           : 2px;
  margin-bottom : 0;
}

.comp-onglet {
  flex         : 1 1 auto;
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : 13px;
  padding      : 12px var(--espace-sm);
  background   : var(--gris-clair);
  color        : var(--noir-texte);
  text-align   : center;
  border-radius: var(--rayon-sm) var(--rayon-sm) 0 0;
  transition   : background var(--transition), color var(--transition);
}

.comp-onglet:hover {
  background: #e3ebf5;
}

.comp-onglet--actif {
  background: var(--bleu-bouton);
  color     : var(--blanc);
}

.comp-vide {
  font-family: var(--font-texte);
  font-size  : 14px;
  color      : var(--gris-texte);
  text-align : center;
  padding    : var(--espace-md);
}

/* ============================================================
   3. TABLEAU DE CLASSEMENT
   ============================================================ */
.comp-tableau-conteneur {
  background   : var(--blanc);
  border-radius: 0 var(--rayon-md) var(--rayon-md) var(--rayon-md);
  box-shadow   : var(--ombre-carte);
  overflow     : hidden;
}

/* .comp-tableau et .comp-tableau thead th (base) : voir global.css §10 (mutualisé avec .creneaux-tableau) */

.comp-tableau tbody td {
  padding       : 12px var(--espace-sm);
  border-bottom : 1px solid var(--gris-bordure);
  vertical-align: middle;
}

.comp-tableau tbody tr:nth-child(even) td { background: #f7f9fc; }
.comp-tableau tbody tr:hover td { background: #eef3fa; }

/* Lignes de complément (poule à moins de 8 clubs) : hauteur identique,
   contenu vide, pas de survol ni de zébrage pour ne pas suggérer une
   donnée manquante. */
.comp-tableau tbody tr.comp-ligne-vide td {
  background: var(--blanc);
}
.comp-tableau tbody tr.comp-ligne-vide:hover td {
  background: var(--blanc);
}

.comp-tableau tbody tr.comp-ligne-club td {
  background : #fef9e7;
  font-weight: 700;
}

.comp-place {
  text-align : center;
  font-family: var(--font-sous-titre);
  font-weight: 700;
  color      : var(--bleu-titre);
  width      : 60px;
}

.comp-nom-club {
  font-family: var(--font-sous-titre);
  font-weight: 600;
  color      : var(--noir-texte);
}

.comp-col-affronte {
  text-align: center;
  width     : 120px;
}

.comp-coche {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  width          : 22px;
  height         : 22px;
  border-radius  : 50%;
  background     : #e3f7ee;
  color          : var(--vert-succes);
  font-weight    : 700;
  font-size      : 13px;
}

/* ============================================================
   4. FICHE LATÉRALE : Résultats ⇄ Commentaires
   ============================================================ */
.comp-fiche {
  background   : var(--blanc);
  border-radius: var(--rayon-md);
  box-shadow   : var(--ombre-carte);
  padding      : var(--espace-md);
  position     : relative;
  /* Hauteur plafonnée, alignée sur celle du tableau de classement :
     les commentaires (plus longs que les résultats) défilent à
     l'intérieur plutôt que d'allonger toute la colonne. */
  max-height   : 620px;
  display      : flex;
  flex-direction: column;
}

.comp-fiche-entete {
  display      : flex;
  align-items  : center;
  gap          : var(--espace-xs);
  margin-bottom: var(--espace-sm);
  flex-shrink  : 0;
}

.comp-select-journee {
  flex         : 1;
  padding      : 8px 10px;
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-sm);
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : 13px;
  color        : var(--noir-texte);
}

.comp-fiche-switch {
  flex-shrink    : 0;
  width          : 32px;
  height         : 32px;
  border-radius  : 50%;
  background     : var(--bleu-bouton);
  color          : var(--blanc);
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : transform var(--transition), background var(--transition);
}

.comp-fiche-switch:hover { background: var(--bleu-bouton-hover); }

.comp-fiche-switch-arrow {
  font-size  : 18px;
  line-height: 1;
  transition : transform var(--transition);
}

.comp-fiche-switch--retour .comp-fiche-switch-arrow {
  transform: rotate(180deg);
}

/* Volet actif : occupe le reste de la hauteur plafonnée du panneau,
   et défile lui-même si son contenu dépasse (scrollbar fine ci-dessous) */
.comp-fiche-volet {
  display   : none;
  flex-direction: column;
  min-height: 0;
}
.comp-fiche-volet.comp-fiche-volet--actif {
  display: flex;
  flex  : 1;
  min-height: 0;
}

.comp-fiche-volet h2 {
  font-family  : var(--font-section);
  font-size    : 18px;
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
  flex-shrink  : 0;
}

/* .comp-sr-only : voir global.css §10 (mutualisé avec .cal-sr-only / .gal-sr-only) */

.comp-resultats-liste,
.comp-commentaires-liste {
  display       : flex;
  flex-direction: column;
  gap           : var(--espace-sm);
  overflow-y    : auto;
  padding-right : 4px; /* évite que la scrollbar ne colle au texte */
}

/* Scrollbar discrète (Chrome/Edge/Safari) */
.comp-resultats-liste::-webkit-scrollbar,
.comp-commentaires-liste::-webkit-scrollbar {
  width: 6px;
}
.comp-resultats-liste::-webkit-scrollbar-thumb,
.comp-commentaires-liste::-webkit-scrollbar-thumb {
  background   : var(--gris-bordure);
  border-radius: 3px;
}
.comp-resultats-liste::-webkit-scrollbar-thumb:hover,
.comp-commentaires-liste::-webkit-scrollbar-thumb:hover {
  background: var(--bleu-nav-clair);
}
/* Scrollbar discrète (Firefox) */
.comp-resultats-liste,
.comp-commentaires-liste {
  scrollbar-width: thin;
  scrollbar-color: var(--gris-bordure) transparent;
}

.comp-resultat-item {
  padding      : var(--espace-sm);
  border-radius: var(--rayon-sm);
  border-left  : 4px solid var(--gris-bordure);
  background   : var(--gris-clair);
}

.comp-resultat-item.comp-resultat--victoire { border-left-color: var(--vert-succes); }
.comp-resultat-item.comp-resultat--defaite  { border-left-color: var(--rouge-erreur); }
.comp-resultat-item.comp-resultat--nul      { border-left-color: var(--orange-avertiss); }

.comp-resultat-titre {
  font-family  : var(--font-sous-titre);
  font-weight  : 600;
  font-size    : 13px;
  color        : var(--noir-texte);
  margin-bottom: 4px;
}

.comp-resultat-score {
  font-family: var(--font-texte);
  font-size  : 13px;
  font-weight: 600;
}

.comp-resultat--victoire .comp-resultat-score { color: var(--vert-succes); }
.comp-resultat--defaite  .comp-resultat-score { color: var(--rouge-erreur); }
.comp-resultat--nul      .comp-resultat-score { color: var(--orange-avertiss); }

.comp-commentaire-item {
  padding      : var(--espace-sm);
  border-radius: var(--rayon-sm);
  background   : var(--gris-clair);
  border-left  : 4px solid var(--bleu-nav-clair);
}

.comp-commentaire-item p {
  font-family: var(--font-texte);
  font-size  : 13px;
  color      : var(--noir-texte);
  line-height: 1.5;
}

.comp-commentaire-equipe {
  font-family: var(--font-sous-titre);
  font-size  : 11px;
  font-weight: 700;
  color      : var(--bleu-titre);
  text-transform: uppercase;
}

/* ============================================================
   5. TOURNOIS ANNEXES
   ============================================================ */
.comp-tournois {
  max-width : 76%;
  margin    : 0 auto;
  padding   : var(--espace-lg) var(--espace-sm) var(--espace-xl);
  text-align: center;
}

.comp-tournois-titre {
  font-family  : var(--font-section);
  font-size    : var(--taille-h2);
  color        : var(--bleu-titre);
  margin-bottom: var(--espace-sm);
}

.comp-tournois-texte {
  font-family  : var(--font-texte);
  font-size    : var(--taille-texte);
  color        : var(--gris-texte);
  line-height  : 1.7;
  margin-bottom: var(--espace-xs);
}

.comp-tournois-grille {
  display              : grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap                  : var(--espace-sm);
  margin               : var(--espace-md) 0;
  text-align           : left;
}

.comp-tournois-carte {
  position     : relative;
  display      : flex;
  flex-direction: column;
  gap          : 4px;
  padding      : var(--espace-sm) var(--espace-md);
  background   : var(--blanc);
  border       : 1px solid var(--gris-bordure);
  border-radius: var(--rayon-md);
  transition   : transform var(--transition), box-shadow var(--transition);
}

/* .comp-tournois-carte:hover : voir global.css §10 (mutualisé avec .carte-encadrant:hover) */

.comp-tournois-carte-label {
  font-family: var(--font-sous-titre);
  font-weight: 700;
  font-size  : 14px;
  color      : var(--bleu-titre);
  padding-right: var(--espace-md);
}

.comp-tournois-carte-desc {
  font-family: var(--font-texte);
  font-size  : 13px;
  color      : var(--gris-texte);
}

.comp-tournois-carte-fleche {
  position : absolute;
  top      : var(--espace-sm);
  right    : var(--espace-sm);
  color    : var(--bleu-bouton);
  font-size: 16px;
}

.comp-tournois-note {
  font-family: var(--font-texte);
  font-size  : 14px;
  color      : var(--noir-texte);
  background : var(--gris-clair);
  display    : inline-block;
  padding    : var(--espace-sm) var(--espace-md);
  border-radius: var(--rayon-md);
  margin-top : var(--espace-sm);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .comp-corps {
    grid-template-columns: 1fr;
  }
  .comp-intro, .comp-tournois {
    max-width: 92%;
  }
  .comp-fiche {
    max-height: 420px;
  }
}

@media (max-width: 600px) {
  .comp-onglet {
    font-size: 11px;
    padding  : 10px 6px;
  }
  .comp-tableau {
    font-size: 12px;
  }
  .comp-col-affronte {
    width: 70px;
  }
}