/*
 Theme Name: Astra Child
 Template: astra
 Version: 1.0
 Description: Thème enfant pour Astra
 Author: PSG Passion
*/

/* ---------------------------------
   VARIABLES GLOBALES
--------------------------------- */
:root {
  --bleu: #004170;
  --rouge: #c8102e;
  --blanc: #ffffff;
  --vert: #35B548;
  --orange: #ffa500;
  --noir:  #000000;
  --jaune: #ffcd57;
  --gris:  #67768e;
  --rose: #ff4141;
  --marron: #6a3a1e;
  --abricot: #fcb957;
  --violet: #800080;

  --fond-conteneur: var(--bleu);
  --fond-score: var(--rouge);
  --police-score: var(--blanc);

  --conteneur-max-width: 900px;
  --padding-global: 30px;
  --padding-conteneur: 20px;

  --border-radius-base: 10px;
  --box-shadow-base: 0 0 10px rgba(0,0,0,0.2);

  --font-family-base: Arial, sans-serif;
  --line-height-base: 1.8;

  /* Couleurs Astra */
  --ast-global-color-0: var(--bleu) !important;
  --ast-global-color-1: var(--rouge) !important;
  --ast-global-color-2: #1e293b !important;
  --ast-global-color-3: #67768e !important;
  --ast-global-color-4: #f9f6fe !important;
  --ast-global-color-5: var(--blanc) !important;
  --ast-global-color-6: #F2F5F7 !important;
  --ast-global-color-7: #ffcd57 !important;
  --ast-global-color-8: #000000 !important;
}

/* ---------------------------------
   RESET DE BASE
--------------------------------- */
html, body {
  margin: 0;
  padding: 0;
}

 body {
  background-color: var(--bleu);
  color: var(--rouge);
  font-family: var(--font-family-base);
} 

/* ---------------------------------
   STRUCTURE GLOBALE
--------------------------------- */
.conteneur-global {
  padding: var(--padding-global);
  background-color: var(--bleu);
  color: var(--blanc);
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  box-sizing: border-box;
}

.conteneur-interne {
  max-width: var(--conteneur-max-width);
  margin: auto;
  background: var(--fond-conteneur);
  padding: 0 var(--padding-conteneur) var(--padding-conteneur);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-base);
}

/* ---------------------------------
   TEXTE ET TITRES
--------------------------------- */
.texte-formatte {
  white-space: pre-wrap;
  line-height: var(--line-height-base);
}
.texte-formatte p {
  margin: 0;
}
.titre-section {
  background: var(--blanc);
  color: var(--bleu);
  margin-top: 30px;
}
.titre-section:first-child {
  margin-top: 0;
}
.fond-score {
  background-color: var(--fond-score);
  color: var(--police-score);
  padding: 0 6px;
  border-radius: 4px;
}

/* ---------------------------------
   HEADER / FOOTER
--------------------------------- */
.ast-above-header.ast-above-header-bar,
header, footer {
  background-color: var(--bleu);
  color: var(--blanc);
}
.site-title, h1, h2, h3, h4, h5 {
  color: var(--blanc);
}
.site-logo-img img {
  max-height: 80px;
  width: auto;
}


/* ---------------------------------
   MENUS
--------------------------------- */
.main-header-menu .menu-item-has-children {
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
}
.main-header-menu .sub-menu {
  display: none !important;
  background-color: var(--bleu) !important;
  border: 2px solid var(--blanc) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  z-index: 10000 !important;
  min-width: 150px !important;
  box-shadow: none !important;
}
.main-header-menu .menu-item-has-children:hover > .sub-menu {
  display: block !important;
}
.main-header-menu .sub-menu li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}
.main-header-menu .sub-menu a {
  color: var(--blanc) !important;
  padding: 5px 10px !important;
  display: block !important;
  text-decoration: none !important;
}
.main-header-menu .sub-menu a:hover {
  background-color: var(--blanc) !important;
  color: var(--bleu) !important;
}
.main-header-menu .menu-item-has-children::after {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  width: 10px !important;
  height: 100% !important;
  background: transparent !important;
  z-index: 9999 !important;
}
.sub-menu .sub-menu {
  left: auto !important;
  right: 100% !important;
  top: 0;
  transform: translateX(-10px);
}
.main-header-menu,
.ast-header-break-point .main-header-bar-navigation {
  overflow-x: visible;
}

.ast-below-header-bar {
  background-color: var(--bleu);

  background-image: none;
}

/* ---------------------------------
   FEEDZY RSS
--------------------------------- */
.feedzy-rss {
  background-color: var(--bleu);
  padding: 10px 15px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.3;
  font-family: var(--font-family-base);
  color: var(--blanc) !important;
  max-width: 50vw;
  box-sizing: border-box;
}
.feedzy-rss > li {
  background-color: var(--bleu);
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  list-style: none;
}
.feedzy-rss > li:hover {
  background-color: var(--blanc);
}
.feedzy-rss a {
  color: var(--blanc) !important;
  text-decoration: none;
  font-weight: 600;
}
.feedzy-rss a:hover {
  text-decoration: none;
  color: var(--blanc) !important;
}
.rss_title,
.rss_description {
  display: none !important;
}

/* ---------------------------------
   IMAGES
--------------------------------- */
td img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  display: block;
  margin: auto;
}

/* ---------------------------------
   PAGE JOUEUR - STYLES DÉTAILLÉS
--------------------------------- */
body.page-template-page_joueur,
body.page-template-page_joueur #page,
body.page-template-page_joueur .site,
body.page-template-page_joueur .content-area,
body.page-template-page_joueur .site-content,
body.page-template-page_joueur .entry-content {
  background-color: var(--bleu) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}
body.page-template-page_joueur .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

.site-content {
  background-color: var(--bleu);
}

.fiche-joueur-wrapper {
  width: 100vw;
  min-height: 100vh;
  padding: 40px 16px;
  background-color: var(--bleu);
  box-sizing: border-box;
}

.fiche-joueur {
  max-width: 960px;
  margin: 0 auto;
  background-color: var(--blanc);
  border-radius: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  padding: 2rem;
  color: var(--bleu);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.fiche-photo {
  flex: 0 0 auto;
  width: 300px; /* Grande taille pour PC */
  height: 400px; /* Hauteur généreuse */
  border-radius: 1rem;
  overflow: hidden;
  background-color: #e8ecef; /* Fond neutre si pas de photo */
  display: flex;
  align-items: center;
  justify-content: center;
}

.fiche-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Affiche l'image entière */
  object-position: center; /* Centrage */
}

.fiche-photo span {
  color: var(--bleu);
  font-size: 0.9rem;
  text-align: center;
}

.fiche-infos {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fiche-infos h2 {
  color: var(--rouge);
  font-size: 1.8rem;
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.fiche-infos p {
  margin: 0;
  line-height: 1.4;
  font-size: 1rem;
}

.fiche-infos span.label {
  color: var(--orange);
  font-weight: bold;
}

.stats-pictos {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.stats-pictos span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
}

.stats-pictos span[title] {
  cursor: help;
}

/* Styles pour les statistiques */
.stats-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.stats-table {
  width: 100%;
  margin-bottom: 16px;
  font-family: sans-serif;
  font-size: 14px;
  color: var(--rouge);
}

.stats-container {
  display: flex;
  flex-wrap: nowrap;
  border-bottom: 1px solid rgba(77, 85, 105, 0.2);
}

.stats-container > div {
  padding: 8px 12px;
  text-align: left;
  vertical-align: middle;
  border-right: 1px solid rgba(77, 85, 105, 0.2);
  flex: 1;
  min-width: 100px;
}

.stats-container > div:last-child {
  border-right: none;
}

.stats-container > .stats-label {
  flex: 0 0 200px;
  font-weight: bold;
}

/* Styles pour chaque carte de match */
.match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 30px;
}
.match-card {
    background: var(--blanc);
    color: var(--bleu);
    border-radius: 8px;
    padding: 16px;
    font-family: sans-serif;
}

.match-card .score {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
}

.match-card .details {
    font-size: 13px;
    margin-bottom: 4px;
}

.match-card .commentaire {
    font-size: 12px;
    font-style: italic;
    color: var(--orange);
    margin-top: 8px;
}

/* Section stats déplacée du inline */
.stats-section {
  margin: 20px 0;
  padding: 16px;
  background: #f2f5f7;
  border-radius: 8px;
}

.stats-section h4 {
  color: var(--bleu);
  margin-top: 0;
}

/* Responsive pour page joueur */
@media (max-width: 768px) {
  .fiche-joueur-wrapper {
    padding: 20px 12px;
  }

  .fiche-joueur {
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
  }

  .fiche-photo {
    width: 100%;
    max-width: 280px; /* Réduit pour tablettes */
    height: 373px; /* Proportion adaptée */
    margin: 0 auto;
  }

  .fiche-infos h2 {
    font-size: 1.5rem;
  }

  .fiche-infos p {
    font-size: 0.9rem;
  }

  .stats-pictos span {
    font-size: 0.8rem;
  }

  .stats-table {
    font-size: 12px;
  }

  .stats-container {
    flex-wrap: wrap;
  }

  .stats-container > div {
    flex: 0 0 100%;
    border-right: none;
    border-bottom: 1px solid rgba(77, 85, 105, 0.2);
    padding: 6px 8px;
  }

  .stats-container > .stats-label {
    flex: 0 0 100%;
    background: #e8ecef;
    font-weight: bold;
  }

  .stats-container > div:last-child {
    border-bottom: none;
  }
}

/* -----------------------------
   FORMULAIRE "resultat-tri"
-----------------------------*/
form[action*="resultat-tri"] {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 100%;
  background-color: var(--blanc); /* fond blanc */
  padding: 15px;
  border-radius: 6px;
  box-sizing: border-box;
  color: var(--bleu); /* titres en bleu */
}

form[action*="resultat-tri"] h1,
form[action*="resultat-tri"] h2,
form[action*="resultat-tri"] h3,
form[action*="resultat-tri"] h4,
form[action*="resultat-tri"] h5,
form[action*="resultat-tri"] h6,
form[action*="resultat-tri"] label {
  color: var(--bleu) !important; /* titres et labels en bleu */
}

form[action*="resultat-tri"] input[type="text"],
form[action*="resultat-tri"] select,
form[action*="resultat-tri"] input[type="checkbox"] {
  color: #000000 !important; /* police noire pour inputs */
  font-family: var(--font-family-base);
}

form[action*="resultat-tri"] input[type="text"],
form[action*="resultat-tri"] select {
  background-color: var(--blanc);
  border: 1px solid #ccc;
  padding: 5px;
  border-radius: 4px;
  width: fit-content; /* largeur adaptée au contenu (label) */
  flex: 0 0 auto; /* ne pas étendre, largeur fixe selon contenu */
  min-width: 0; /* permettre le shrink si besoin */
}

form[action*="resultat-tri"] > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  margin: 0; /* pas de marges inutiles */
}

form[action*="resultat-tri"] label {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0; /* pas de marges inutiles */
}

/* Supprimer les hr et sauts de ligne inutiles */
form[action*="resultat-tri"] hr {
  display: none !important;
}

form[action*="resultat-tri"] br {
  display: none !important;
}

/* --- Desktop (PC) : Grille 4 colonnes, checkboxes horizontales à côté des champs --- */
@media (min-width: 769px) {
  form[action*="resultat-tri"] > div:has(input[type="checkbox"]) {
    flex-direction: row !important; /* disposition horizontale pour checkboxes */
    gap: 12px !important;
    align-items: center !important;
  }
  
  form[action*="resultat-tri"] > div:has(input[type="checkbox"]) label {
    flex-direction: row !important;
    gap: 6px !important;
    width: auto !important;
  }
}
/* --- Mobile : 3 colonnes, regroupées par similitude, checkboxes côte à côte --- */
@media (max-width: 768px) {
  form[action*="resultat-tri"] {
    grid-template-columns: repeat(3, 1fr) !important; /* 3 colonnes sur mobile */
    gap: 8px !important;
  }
  
  /* Ligne 1 : Premiers 3 divs (Nom, Né en, Ville naissance) - colonnes 1-3 */
  form[action*="resultat-tri"] > div:nth-child(1),
  form[action*="resultat-tri"] > div:nth-child(2),
  form[action*="resultat-tri"] > div:nth-child(3) {
    grid-column: auto !important; /* Placement naturel */
  }
  
  /* Ligne 2 : Divs 4 et 5 (Décédé en, Ville décès) - colonnes 1-2 */
  form[action*="resultat-tri"] > div:nth-child(4),
  form[action*="resultat-tri"] > div:nth-child(5) {
    grid-column: 1 / 3 !important; /* Span colonnes 1-2 pour équilibre */
  }
  
  /* Ligne 3 : Divs 6-8 (Taille, Poste, Année au club) - colonnes 1-3 */
  form[action*="resultat-tri"] > div:nth-child(6),
  form[action*="resultat-tri"] > div:nth-child(7),
  form[action*="resultat-tri"] > div:nth-child(8) {
    grid-column: auto !important; /* Placement naturel */
  }
  
  /* Ligne 4 : Divs avec checkboxes (derniers, ex. nth-child(9+) ) - span 3 colonnes, côte à côte */
  form[action*="resultat-tri"] > div:has(input[type="checkbox"]) {
    grid-column: 1 / -1 !important; /* Span sur les 3 colonnes */
    flex-direction: row !important; /* Côte à côte */
    justify-content: flex-start !important;
    gap: 12px !important; /* Espace entre les deux checkboxes */
    flex-wrap: nowrap !important; /* Pas de wrap */
  }
  
  form[action*="resultat-tri"] > div:has(input[type="checkbox"]) label {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
  }
  
  /* Tous les champs réduits sur mobile */
  form[action*="resultat-tri"] input[type="text"],
  form[action*="resultat-tri"] select {
    width: 100px !important; /* Largeur compacte */
    flex: 0 0 auto !important;
  }
  
  form[action*="resultat-tri"] > div {
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  
  form[action*="resultat-tri"] label {
    flex: 0 0 auto !important;
    color: var(--bleu) !important;
  }
}

@media (max-width: 480px) {
  .fiche-joueur-wrapper {
    padding: 16px 8px;
  }

  .fiche-joueur {
    padding: 1rem;
  }

  .fiche-photo {
    max-width: 240px; /* Plus petit pour mobiles */
    height: 320px; /* Proportion adaptée */
    margin: 0 auto;
  }

  .fiche-infos h2 {
    font-size: 1.3rem;
  }

  .fiche-infos p {
    font-size: 0.85rem;
  }

  .stats-pictos span {
    font-size: 0.75rem;
  }

  .stats-table {
    font-size: 11px;
  }

  .stats-container > div {
    padding: 4px 6px;
  }
}

@media (max-width: 768px) {
    div[style*="justify-content: space-between"] {
        flex-direction: column;
        align-items: flex-start;
    }
    div[style*="justify-content: space-between"] > div {
        width: 100%;
        justify-content: center;
    }
    div[style*="justify-content: space-between"] > div > button,
    div[style*="justify-content: space-between"] > div > input {
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
}

/* ---------------------------------
   TABLEAU ENTRAINEURS
--------------------------------- */
.entraineurs-table {
  max-width: 1200px;
  margin: 30px auto;
  font-family: Arial, sans-serif;
  font-weight: bold !important;
}
.entraineurs-table h1 {
  color: var(--bleu) !important;
  font-size: 18px !important;
  text-align: center;
  font-weight: bold !important;
}
.psg-entraineurs {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px !important;
  color: var(--bleu) !important;
  background: #fff !important;
  font-weight: bold !important;
}
.psg-entraineurs th,
.psg-entraineurs td {
  padding: 8px !important;
  border: 1px solid #ccc !important;
  text-align: center !important;
  vertical-align: middle !important;
}
.psg-entraineurs th {
  background: var(--bleu) !important;
  color: #fff !important;
  font-size: 10px !important;
}
.entraineur-box {
  border: 1px solid #ccc !important;
  border-radius: 5px;
  background: #fff !important;
}
.entraineur-box + .entraineur-box {
  margin-top: 20px;
}
.psg-entraineurs tr:hover:not(.bilan) {
  background:  #e6e6fa !important;
}
.psg-entraineurs img {
  max-width: 60px !important;
  height: auto !important;
}
.periode-cell {
  line-height: 1.4 !important;
  text-align: left !important;
  min-width: 180px !important;
}
.bilan {
  background: #f0f0f0 !important;
  color: var(--bleu) !important;
  text-align: left !important;
  padding-left: 12px !important;
}

/* Table responsive */
@media (max-width: 600px) {
  .psg-entraineurs {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
  .psg-entraineurs th,
  .psg-entraineurs td {
    min-width: 70px !important;
  }
  .periode-cell {
    min-width: 150px !important;
  }
  .bilan {
    min-width: 300px !important;
  }
}

/* ---------------------------------
   ASTRA HEADER - FORCER AFFICHAGE SUR MOBILE
--------------------------------- */
@media (max-width: 921.9px) {
  /* Forcer l'affichage du header desktop même sur mobile */
  #ast-desktop-header {
    display: block !important;
  }

  /* Cacher complètement le menu mobile Astra */
  .main-header-bar-navigation {
    display: none !important;
  }

  /* Supprimer le bouton hamburger et ses icônes */
  .menu-toggle,
  .ast-mobile-menu-buttons {
    display: none !important;
  }

/* Supprimer le fond gris sur le formulaire */
.ast-below-header-bar {
  background-color: var(--bleu);
  background-image: none;

}

  /* Adapter le conteneur global sur mobile */
  .conteneur-global {
    padding: var(--padding-global);
    background-color: var(--bleu);
    color: var(--blanc);
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    box-sizing: border-box;
  }

  /* Adapter le conteneur interne sur mobile */
  .conteneur-interne {
    max-width: var(--conteneur-max-width);
    margin: auto;
    background: var(--fond-conteneur);
    padding: var(--padding-conteneur);
    border-radius: var(--border-radius-base);
    box-shadow: var(--box-shadow-base);
  }
}