/**
 * Style des boutons du plugin Admin Management (Club de Judo).
 * Créé le 2026-09-16 pour unifier l'apparence de tous les boutons du
 * plugin (auparavant définie au cas par cas, en style inline, tantôt
 * absente) sous une seule classe .admin-button.
 */
.admin-button {
  /* !important sur les 3 : sans ça, une règle externe (thème ou
     Customizer, origine jamais retrouvée) gagnait par endroits selon
     le contexte de la page, d'où un rouge tantôt "red", tantôt
     #e22658 selon les écrans. Les quelques boutons volontairement
     verts (ex: "Sauvegarder et me Ré-inscrire") passent leur propre
     style inline en !important pour continuer à prendre le dessus
     ici : inline + !important bat toujours feuille de style +
     !important, quelle que soit la spécificité. */
  background-color: red !important;
  color: white !important;
  border-radius: 10px !important;
  padding: 6px 14px;
}

.admin-button:hover {
  text-decoration: none !important;
  color: #000 !important;
}

/**
 * Bandeaux de boutons multi-lignes/colonnes (ex: liste des membres,
 * filtres par club/tri) - 2026-09-16. Remplace une mise en page en
 * <table> (colonnes figées, largeurs incohérentes d'une ligne à
 * l'autre) par une disposition souple : les boutons s'alignent
 * naturellement les uns à côté des autres et passent à la ligne
 * suivante dès que la largeur disponible ne suffit plus, chacun gardant
 * la largeur adaptée à son propre texte.
 */
.admin-groupe-boutons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.admin-label-groupe {
  font-weight: 900;
  color: green;
  margin-right: 6px;
}

/**
 * Liste de cases à cocher sur 3 colonnes (ex: choix des professeurs
 * dans la Liste d'émargement) - 2026-09-16. Une liste linéaire (1 par
 * ligne) prend inutilement de la place en hauteur dès qu'il y a
 * plusieurs professeurs.
 */
.admin-grille-3-colonnes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 12px;
}

/**
 * Groupe de choix radio/checkbox sur une seule ligne (ex : "Comment
 * avez vous connu le Club de Judo ?") - 2026-09-16. Passe à la ligne
 * suivante si la largeur ne suffit plus (mobile), sinon les 4 choix
 * restent côte à côte.
 */
.admin-choix-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 20px;
}

/**
 * Alignement radio/checkbox + libellé sur une même ligne dans le
 * formulaire d'inscription - 2026-09-16. Une règle externe (même
 * origine non identifiée que pour .admin-button ci-dessus) fait
 * passer les <input type="radio"/"checkbox"> en display:block, ce qui
 * les envoie sur leur propre ligne, la phrase du <label> associé
 * atterrissant sur la ligne suivante (ex : "Pratique de la
 * compétition"). !important pour reprendre la main, comme pour les
 * boutons.
 */
#ajouter-membre input[type="radio"],
#ajouter-membre input[type="checkbox"] {
  display: inline-block !important;
  vertical-align: middle;
  margin-right: 4px;
}

/**
 * Validation en direct du formulaire d'inscription (voir
 * js/validation-formulaire.js) - 2026-09-16.
 */
.admin-champ-invalide {
  border: 1px solid red !important;
}

.admin-erreur-champ {
  display: block;
  color: red;
  font-size: 0.85em;
  margin-top: 2px;
}

/**
 * Écran "Gérer les infos des Clubs" (Liste des Clubs) - 2026-09-16.
 * Avant : chaque club affichait ses 2 lignes d'en-tête + 2 lignes de
 * données en permanence (un <table> complet par club), ce qui rendait
 * la page illisible dès qu'il y avait plusieurs clubs (en-têtes
 * répétés à chaque club). Passage à un <details>/<summary> par club :
 * une seule ligne d'en-tête (Super Club / Club) reste visible en haut,
 * puis chaque club se déplie/replie individuellement au clic pour
 * révéler son tableau de détail (inchangé par ailleurs).
 */
.admin-entete-clubs {
  display: flex;
  font-weight: bold;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 8px 12px;
}

.admin-entete-clubs span {
  flex: 1;
}

.admin-details-club {
  border: 1px solid #ccc;
  border-radius: 6px;
  margin-top: 24px !important;
}

.admin-summary-club {
  display: flex;
  cursor: pointer;
  padding: 8px 12px;
}

.admin-summary-club span {
  flex: 1;
}

.admin-details-club[open] > .admin-summary-club {
  background-color: #f9f9f9;
  border-bottom: 1px solid #ccc;
}