/* ============================================================================
   BADMINTON MANAGER - FEUILLE DE STYLE PRINCIPALE
   ============================================================================

   VERSION : 1.2 (avec sauvegarde automatique et modales d'historique)
   DATE : 7 janvier 2026
   AUTEUR : Claude Sonnet 4.5

   ORGANISATION DU FICHIER :
   1. Reset et base
   2. En-tête et sauvegarde automatique
   3. Boutons globaux
   4. Ligne Classe + Date
   5. Système d'onglets
   6. Gestion des élèves
   7. Classement
   8. Gestion des défis
   9. Gestion des avantages/handicaps
   10. Matchs
   11. Tableaux
   12. Modales (générique, détails, historiques)
   13. Emojis et couleurs
   14. Onglet Aide
   15. Accessibilité (lecteurs d'écran)

   PRINCIPES DE CONCEPTION :
   - Accessibilité : États :focus visibles, tailles rem, contraste WCAG 2.2
   - Responsive : Flexbox et Grid pour adaptation automatique
   - Performance : Transitions CSS (pas de JavaScript), sélecteurs optimisés
   - Maintenabilité : Noms de classe sémantiques, structure claire

   COMPATIBILITÉ :
   - Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
   - Internet Explorer : NON SUPPORTÉ (sticky positioning, CSS Grid)

   ============================================================================ */


/* ============================================================================
   1. RESET ET BASE
   ============================================================================

   Normalisation du box-model et des marges pour une cohérence cross-browser.
   La police "Segoe UI" est choisie pour sa lisibilité et sa disponibilité.

   ============================================================================ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* Facilite le calcul des dimensions (padding inclus) */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
  background-color: #f0f8ff; /* Bleu très pâle, rappel du thème badminton */
  color: #333; /* Gris foncé pour contraste suffisant (WCAG AA) */
  line-height: 1.6; /* Espacement vertical pour meilleure lisibilité */
  padding: 20px; /* Marge extérieure pour éviter le bord de l'écran */
}


/* ============================================================================
   2. EN-TÊTE ET SAUVEGARDE AUTOMATIQUE
   ============================================================================

   L'en-tête contient :
   - Bouton "Exporter JSON" (gauche)
   - Titre + Indicateur de sauvegarde automatique (centre)
   - Bouton "Charger" (droite)

   INDICATEUR DE SAUVEGARDE :
   - État "saving" (jaune) : Sauvegarde en cours
   - État "saved" (vert) : Dernière sauvegarde réussie
   - Animation "pulse" : Attire l'attention lors de l'enregistrement

   ============================================================================ */

.header {
  display: flex;
  justify-content: space-between; /* Boutons aux extrémités, titre au centre */
  align-items: center;
  margin-bottom: 20px;
  background-color: #3498db; /* Bleu primaire (identité visuelle) */
  padding: 15px;
  border-radius: 10px; /* Coins arrondis pour esthétique moderne */
  color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère pour profondeur */
}

.header-center {
  display: flex;
  flex-direction: column; /* Titre au-dessus, indicateur en dessous */
  align-items: center;
  flex-grow: 1; /* Prend l'espace restant entre les boutons */
  gap: 4px; /* Espacement entre titre et indicateur */
}

.header h1 {
  text-align: center;
  font-size: 24px; /* Taille lisible sans dominer l'interface */
  margin: 0;
}

/* Indicateur de sauvegarde automatique */
.auto-save-indicator {
  display: flex;
  align-items: center;
  gap: 4px; /* Espace entre icône et texte */
  font-size: 11px; /* Petit car information secondaire */
  color: rgba(255, 255, 255, 0.9); /* Blanc légèrement transparent */
  background-color: rgba(255, 255, 255, 0.1); /* Fond translucide par défaut */
  padding: 3px 8px;
  border-radius: 4px;
  transition: all 0.3s; /* Transition douce lors changement d'état */
}

/* État "saved" : Dernière sauvegarde réussie */
.auto-save-indicator.saved {
  background-color: rgba(46, 204, 113, 0.2); /* Fond vert translucide */
}

/* État "saving" : Sauvegarde en cours */
.auto-save-indicator.saving {
  background-color: rgba(241, 196, 15, 0.2); /* Fond jaune translucide */
}

/* Animation de l'icône de sauvegarde (pulse continu) */
.auto-save-indicator .save-icon {
  font-size: 12px;
  animation: pulse 2s ease-in-out infinite; /* Pulse infini pour attirer l'œil */
}

/* Arrêt de l'animation quand la sauvegarde est terminée */
.auto-save-indicator.saved .save-icon {
  animation: none;
}

/* Définition de l'animation pulse (apparition/disparition) */
@keyframes pulse {
  0%, 100% {
    opacity: 1; /* Opacité complète */
  }
  50% {
    opacity: 0.5; /* Semi-transparent au milieu du cycle */
  }
}

.auto-save-indicator .save-text {
  font-weight: 500; /* Légèrement gras pour lisibilité */
}


/* ============================================================================
   3. BOUTONS GLOBAUX
   ============================================================================

   Style par défaut pour tous les boutons de l'application.

   ÉTATS :
   - Normal : Vert avec ombre
   - Hover : Plus foncé + translation vers le haut (effet 3D)
   - Active : Retour à la position normale (clic visuel)
   - Focus : Bordure bleue pour navigation clavier (accessibilité)

   ANIMATION "SHAKE" :
   Utilisée pour indiquer une erreur (ex: champs vides)

   ============================================================================ */

.btn {
  background-color: #2ecc71; /* Vert (couleur d'action positive) */
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer; /* Indique que l'élément est cliquable */
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s; /* Transition fluide pour tous les changements */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* État survol : Assombrir et lever */
.btn:hover {
  background-color: #27ae60; /* Vert plus foncé */
  transform: translateY(-2px); /* Déplacement vers le haut */
}

/* État actif (clic) : Retour position normale */
.btn:active {
  transform: translateY(0);
}

/* État focus : Bordure bleue pour accessibilité clavier */
.btn:focus {
  outline: 2px solid #27ae60; /* Contour vert */
  outline-offset: 2px; /* Espacement du contour */
}

/* Bouton secondaire : Pour actions d'annulation/suppression */
.btn-secondary {
  background-color: #95a5a6; /* Gris (action secondaire/neutre) */
  font-size: 13px; /* Légèrement plus petit */
  padding: 8px 12px; /* Légèrement plus petit */
}

/* État survol bouton secondaire */
.btn-secondary:hover {
  background-color: #7f8c8d; /* Gris plus foncé */
}

/* État focus bouton secondaire */
.btn-secondary:focus {
  outline: 2px solid #7f8c8d; /* Contour gris */
}

/* Bouton danger : Pour actions de réinitialisation/suppression */
.btn-danger {
  background-color: #e74c3c; /* Rouge (action potentiellement destructrice) */
  font-size: 13px; /* Légèrement plus petit */
  padding: 8px 12px; /* Légèrement plus petit */
}

/* État survol bouton danger */
.btn-danger:hover {
  background-color: #c0392b; /* Rouge plus foncé */
}

/* État focus bouton danger */
.btn-danger:focus {
  outline: 2px solid #c0392b; /* Contour rouge */
}

/* Animation shake pour indiquer une erreur */
.shake {
  animation: shake 0.5s; /* Durée courte pour effet rapide */
}

/* Définition de l'animation shake (oscillation gauche-droite) */
@keyframes shake {
  0%, 100% { transform: translateX(0); } /* Position normale */
  20%, 60% { transform: translateX(-5px); } /* Décalage gauche */
  40%, 80% { transform: translateX(5px); } /* Décalage droite */
}


/* ============================================================================
   4. LIGNE CLASSE + DATE
   ============================================================================

   Formulaire en haut de l'onglet "Élèves" pour saisir la classe et la date.

   STRUCTURE :
   - Flexbox pour aligner les deux champs côte à côte
   - Champs à largeur égale (flex: 1)
   - Labels en gras pour hiérarchie visuelle

   ACCESSIBILITÉ :
   - Labels associés aux inputs via for/id (cf. HTML)
   - État :focus visible avec contour bleu

   ============================================================================ */

.class-date-line {
  display: flex;
  gap: 20px; /* Espacement entre les deux champs */
  margin-bottom: 20px;
  background-color: white;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.class-date-line .input-group {
  flex: 1; /* Prend la moitié de l'espace disponible */
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold; /* Hiérarchie visuelle */
  color: #2c3e50; /* Gris foncé */
}

.input-group input {
  width: 100%; /* Occupe toute la largeur du conteneur */
  padding: 10px;
  border: 1px solid #ddd; /* Bordure gris clair */
  border-radius: 5px;
  font-size: 14px;
}

/* État focus : Contour bleu pour accessibilité */
.input-group input:focus {
  outline: 2px solid #3498db; /* Bleu primaire */
  outline-offset: 2px;
}


/* ============================================================================
   5. SYSTÈME D'ONGLETS
   ============================================================================

   Navigation par onglets entre les différentes sections :
   - Élèves, Défis, Avantages, Tournois, Classement, Aide

   FONCTIONNEMENT :
   - .tab-btn.active : Onglet actuellement visible (bordure bleue en bas)
   - .tab-content.active : Contenu affiché (display: block)
   - Autres : Masqués (display: none)

   ACCESSIBILITÉ :
   - role="tablist" et role="tab" définis en HTML
   - Navigation clavier avec Tab et Enter
   - États :hover et :focus visibles

   ============================================================================ */

.tabs {
  display: flex;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd; /* Séparateur visuel */
  justify-content: center; /* Centrage des onglets */
}

.tab-btn {
  padding: 10px 20px;
  background: none; /* Pas de fond par défaut */
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #555; /* Gris moyen pour texte inactif */
  border-bottom: 3px solid transparent; /* Bordure invisible par défaut */
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px; /* Espacement entre emoji et texte */
}

/* Onglet actif : Bordure bleue et texte en gras */
.tab-btn.active {
  border-bottom-color: #3498db; /* Indicateur visuel de l'onglet actif */
  color: #3498db;
  font-weight: bold;
}

/* État survol : Texte bleu */
.tab-btn:hover {
  color: #3498db;
}

/* État focus : Contour bleu pour accessibilité clavier */
.tab-btn:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Conteneurs de contenu des onglets */
.tab-content {
  display: none; /* Masqué par défaut */
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Contenu actif : Affiché */
.tab-content.active {
  display: block;
}


/* ============================================================================
   6. GESTION DES ÉLÈVES
   ============================================================================

   Affichage des élèves sous forme de cartes dans une grille.

   GRILLE :
   - 4 colonnes sur grand écran (grid-template-columns: repeat(4, 1fr))
   - Responsive : S'adapte automatiquement (CSS Grid)

   CARTE ÉLÈVE :
   - Nom + points en haut
   - Boutons d'action en bas (modifier, dispense, supprimer)
   - État "dispensed" : Carte grisée et semi-transparente

   BOUTONS D'ACTION :
   - ✏️ Modifier (edit-btn)
   - 🏥 Dispenser/Rétablir (dispense-btn, change de couleur selon l'état)
   - 🗑️ Supprimer (delete-btn)

   ACCESSIBILITÉ :
   - Tous les boutons ont des aria-label explicites (cf. HTML)
   - États :focus visibles
   - Hover pour feedback visuel

   ============================================================================ */

.student-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes de largeur égale */
  gap: 15px; /* Espacement entre les cartes */
  margin-top: 15px;
}

.student-card {
  background-color: white;
  border: 1px solid #e0e0e0; /* Bordure gris clair */
  border-radius: 10px;
  padding: 12px;
  text-align: left;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s; /* Animation de survol */
}

/* Effet survol : Légère élévation */
.student-card:hover {
  transform: translateY(-3px); /* Monte légèrement */
}

/* Carte d'élève dispensé : Grisée et semi-transparente */
.student-card.dispensed {
  background-color: #f8f8f8; /* Gris très clair */
  opacity: 0.7; /* Semi-transparente */
  border: 3px solid #e74c3c; /* Bordure rouge épaisse */
  border-left: 6px solid #e74c3c; /* Bordure gauche encore plus épaisse pour accent */
}

.student-info {
  display: flex;
  justify-content: space-between; /* Nom à gauche, points à droite */
  align-items: center;
  margin-bottom: 5px;
}

.student-name {
  font-weight: bold;
  color: #2c3e50; /* Gris foncé */
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px; /* Espacement entre le nom et le badge */
}

/* Badge "ABSENT" pour les élèves dispensés */
.absent-badge {
  background-color: #e74c3c; /* Rouge vif */
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3); /* Ombre rouge légère */
}

/* Statistiques des matchs par élève */
.student-stats {
  display: flex;
  gap: 8px;
  margin: 6px 0;
  flex-wrap: wrap;
}

.stat-badge {
  background-color: #f0f4f8;
  color: #2c3e50;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #e0e0e0;
}

.stat-badge:hover {
  background-color: #e8eef4;
}

.student-points {
  color: #e74c3c; /* Rouge pour les points (accent visuel) */
  font-weight: bold;
  font-size: 14px;
}

.student-actions {
  display: flex;
  justify-content: flex-end; /* Alignement à droite */
  gap: 8px; /* Espacement entre les boutons */
}

/* Boutons d'action (modifier, dispenser, supprimer) */
.edit-btn, .dispense-btn, .delete-btn {
  background: none; /* Pas de fond */
  border: none;
  cursor: pointer;
  font-size: 18px; /* Taille des emojis */
  padding: 2px 5px;
  border-radius: 3px;
  transition: background-color 0.2s;
}

/* État survol : Fond gris clair */
.edit-btn:hover, .dispense-btn:hover, .delete-btn:hover {
  background-color: #f0f0f0;
}

/* État focus : Contour bleu pour accessibilité */
.edit-btn:focus, .dispense-btn:focus, .delete-btn:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Bouton dispenser : Vert par défaut (activer dispense) */
.dispense-btn {
  color: #27ae60;
}

/* Bouton dispenser (élève déjà dispensé) : Rouge (rétablir) */
.dispense-btn.dispensed {
  color: #e74c3c;
}

/* Bouton supprimer : Rouge */
.delete-btn {
  color: #e74c3c;
}


/* ============================================================================
   7. CLASSEMENT
   ============================================================================

   Boutons de sélection du type de classement :
   - Individuel (matchs 1v1)
   - Duo (matchs en équipe)
   - Combiné (total des deux)

   FONCTIONNEMENT :
   - Bouton actif : Fond bleu, texte blanc
   - Boutons inactifs : Fond gris clair
   - Clic → Change le classement affiché (géré en JavaScript)

   ============================================================================ */

.ranking-selector {
  display: flex;
  justify-content: flex-end; /* Alignement à droite */
  gap: 10px;
  margin-bottom: 15px;
  align-items: center;
  flex-wrap: wrap; /* Passage à la ligne si nécessaire (responsive) */
}

.ranking-type-btn {
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 20px; /* Pilules arrondies */
  background-color: #f9f9f9; /* Fond gris clair par défaut */
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 5px; /* Espacement entre emoji et texte */
}

/* Bouton actif : Fond bleu */
.ranking-type-btn.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
}

/* État survol : Fond bleu très clair */
.ranking-type-btn:hover {
  background-color: #eaf2f8;
}

/* État focus : Contour bleu pour accessibilité */
.ranking-type-btn:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}


/* ============================================================================
   8. GESTION DES DÉFIS
   ============================================================================

   Section de configuration des défis techniques proposés aux joueurs.

   STRUCTURE :
   - 2 sections : Défis Individuels (3 niveaux) + Défis Duo
   - Chaque défi : Nom + boutons modifier/supprimer

   INTERACTION :
   - Hover : Fond gris clair pour feedback visuel
   - Boutons icônes (✏️, 🗑️) avec hover et focus

   ============================================================================ */

.challenge-section {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.challenge-section h4 {
  margin-bottom: 10px;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px; /* Espacement entre emoji et titre */
}

.challenge-list {
  margin-bottom: 10px;
}

.challenge-item {
  display: flex;
  justify-content: space-between; /* Texte à gauche, boutons à droite */
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0; /* Séparateur entre défis */
  background-color: #fafafa; /* Fond très clair */
  border-radius: 5px;
  margin-bottom: 5px;
}

/* État survol : Fond gris */
.challenge-item:hover {
  background-color: #f0f0f0;
}

/* Boutons modifier et supprimer */
.edit-challenge-btn, .delete-challenge-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
  border-radius: 3px;
}

/* État survol : Fond gris foncé */
.edit-challenge-btn:hover, .delete-challenge-btn:hover {
  background-color: #e0e0e0;
}

/* État focus : Contour bleu pour accessibilité */
.edit-challenge-btn:focus, .delete-challenge-btn:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}


/* ============================================================================
   9. GESTION DES AVANTAGES/HANDICAPS
   ============================================================================

   Section de configuration des avantages (jaunes) et handicaps (oranges).

   DISTINCTION VISUELLE :
   - Bordure gauche jaune (#f1c40f) pour avantages
   - Bordure gauche orange (#e67e22) pour handicaps

   STRUCTURE :
   Similaire aux défis (liste d'items avec boutons d'action)

   ============================================================================ */

.advantage-section {
  margin-bottom: 20px;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Bordure gauche jaune pour avantages */
.advantage-section.yellow {
  border-left: 5px solid #f1c40f;
}

/* Bordure gauche orange pour handicaps */
.advantage-section.orange {
  border-left: 5px solid #e67e22;
}

.advantage-section h4 {
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}

.advantage-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
  background-color: #fafafa;
  border-radius: 5px;
  margin-bottom: 5px;
}

/* État survol : Fond gris */
.advantage-item:hover {
  background-color: #f0f0f0;
}


/* ============================================================================
   10. MATCHS
   ============================================================================

   Affichage des matchs en cours (individuels et duo tournants).

   STRUCTURE DE CARTE DE MATCH :
   - Joueur 1 (gauche) | Arbitre (centre) | Joueur 2 (droite)
   - Scores en grands chiffres rouges
   - Choix de défis en listes déroulantes
   - Bouton "Terminer le match" en bas

   CHAMPS DE SCORE :
   - Largeur fixe 50px pour alignement
   - Centrage du texte
   - État :focus visible

   ============================================================================ */

.match-card {
  background-color: white;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between; /* Répartition égale des 3 colonnes */
  align-items: flex-start;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.match-player {
  flex: 1; /* Prend 1/3 de l'espace */
  text-align: center;
  padding: 0 10px;
}

/* En-tête du joueur avec nom et points */
.player-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.player-points {
  background-color: #e74c3c;
  color: white;
  font-size: 11px;
  font-weight: bold;
  padding: 2px 8px;
  border-radius: 10px;
}

/* Liste des avantages disponibles */
.advantage-list {
  background: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
  border: 2px solid #f0c36d;
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
  text-align: left;
}

.advantage-header {
  font-weight: bold;
  color: #856404;
  font-size: 12px;
  margin-bottom: 6px;
}

.advantage-list ul {
  margin: 0;
  padding-left: 18px;
  font-size: 11px;
  color: #856404;
}

.advantage-list li {
  margin-bottom: 4px;
  line-height: 1.3;
}

/* Sélecteur d'avantage choisi */
.advantage-select {
  margin: 8px 0;
  text-align: left;
}

.advantage-select label {
  display: block;
  font-size: 11px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 4px;
}

.advantage-select select {
  width: 100%;
  padding: 6px;
  border: 2px solid #f0c36d;
  border-radius: 5px;
  font-size: 12px;
  background-color: #fffef5;
}

.advantage-select select:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Message pour joueurs sans avantage */
.no-advantage {
  font-size: 11px;
  color: #95a5a6;
  font-style: italic;
  margin: 8px 0;
  padding: 6px;
  background-color: #f8f9fa;
  border-radius: 5px;
}

.match-referee {
  flex: 1;
  text-align: center;
  font-weight: bold;
  padding: 0 10px;
  color: #2c3e50; /* Gris foncé pour distinguer l'arbitre */
}

.match-score {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px; /* Espacement entre les deux scores */
  color: #e74c3c; /* Rouge pour accent visuel */
}

/* Champs de saisie de score */
.score-input {
  width: 50px; /* Largeur fixe pour alignement */
  text-align: center;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
}

/* État focus : Contour bleu */
.score-input:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Section de choix de défi */
.challenge-choice {
  margin-top: 10px;
  font-size: 12px; /* Plus petit car information secondaire */
  text-align: left;
}

/* Liste déroulante de défis */
.challenge-choice select {
  padding: 5px;
  font-size: 12px;
  width: 100%; /* Occupe toute la largeur du conteneur */
  border: 1px solid #ddd;
  border-radius: 5px;
}

/* État focus : Contour bleu */
.challenge-choice select:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Bouton "Terminer le match" */
.end-match-btn {
  margin-top: 15px;
  width: 100%; /* Pleine largeur pour faciliter le clic */
  background-color: #e74c3c; /* Rouge (action destructive/finale) */
}

/* État survol : Rouge plus foncé */
.end-match-btn:hover {
  background-color: #c0392b;
}


/* ============================================================================
   11. TABLEAUX
   ============================================================================

   Style par défaut pour tous les tableaux de l'application :
   - Classement
   - Historique des matchs (dans les modales)

   CARACTÉRISTIQUES :
   - En-têtes bleus avec texte blanc
   - Lignes alternées (zebra striping) pour lisibilité
   - Hover sur les lignes pour feedback visuel
   - Boutons d'action (détails, historique) en bleu

   ACCESSIBILITÉ :
   - Attribut scope="col" sur les <th> (cf. HTML)
   - États :focus visibles sur les boutons

   ============================================================================ */

table {
  width: 100%;
  border-collapse: collapse; /* Suppression des espaces entre cellules */
  margin-top: 15px;
  background-color: white;
  border-radius: 10px;
  overflow: hidden; /* Masquage des dépassements (coins arrondis) */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0; /* Séparateur horizontal */
}

/* En-têtes de colonnes */
th {
  background-color: #3498db; /* Bleu primaire */
  color: white;
  font-weight: bold;
}

/* Lignes alternées (zebra striping) */
tr:nth-child(even) {
  background-color: #f9f9f9; /* Gris très clair */
}

/* État survol : Fond gris */
tr:hover {
  background-color: #f0f0f0;
}

/* Boutons détails et historique dans les tableaux */
.detail-btn, .history-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px; /* Taille des icônes */
  color: #3498db; /* Bleu primaire */
}

/* État survol : Bleu plus foncé */
.detail-btn:hover, .history-btn:hover {
  color: #2980b9;
}

/* État focus : Contour bleu pour accessibilité */
.detail-btn:focus, .history-btn:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}


/* ============================================================================
   12. HISTORIQUE (Zone inline, désormais remplacée par modales)
   ============================================================================

   HISTORIQUE : Anciennement affiché en bas de page, maintenant en modale.
   Cette classe est conservée pour compatibilité avec d'éventuelles extensions.

   ============================================================================ */

.history-table {
  margin-top: 20px;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* ============================================================================
   13. MODALES
   ============================================================================

   Système de modales pour :
   1. Modification d'élève
   2. Détails d'un match (historique des défis)
   3. Historique des matchs individuels
   4. Historique des matchs duo

   FONCTIONNEMENT :
   - display: none par défaut
   - display: flex quand ouverte (centrage vertical/horizontal)
   - Fond noir semi-transparent (rgba(0, 0, 0, 0.7))
   - z-index: 1000 pour apparaître au-dessus de tout

   FERMETURE :
   - Bouton X en haut à droite
   - Touche Échap (géré en JavaScript)
   - Clic en dehors du contenu (géré en JavaScript)

   ACCESSIBILITÉ :
   - role="dialog", aria-modal="true" (cf. HTML)
   - Focus piégé dans la modale (géré en JavaScript)
   - Contour :focus visible sur le bouton X

   ============================================================================ */

.modal {
  display: none; /* Masquée par défaut */
  position: fixed; /* Position fixe par rapport à la fenêtre */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7); /* Fond noir semi-transparent */
  z-index: 1000; /* Au-dessus de tout le contenu */
  justify-content: center; /* Centrage horizontal */
  align-items: center; /* Centrage vertical */
  overflow: auto; /* Scroll si contenu trop grand */
}

/* Contenu de la modale */
.modal-content {
  background-color: white;
  padding: 25px;
  border-radius: 12px;
  width: 90%; /* Largeur adaptative */
  max-width: 800px; /* Largeur maximale sur grand écran */
  max-height: 90vh; /* Hauteur maximale (90% de la fenêtre) */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Ombre forte pour profondeur */
  position: relative;
  overflow-y: auto; /* Scroll vertical si contenu trop long */
  margin: 20px; /* Marge pour éviter le bord de l'écran */
}

/* Groupe de champs dans la modale */
.modal-input-group {
  margin-bottom: 15px;
}

.modal-input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #2c3e50;
}

.modal-input-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 14px;
}

/* État focus : Contour bleu */
.modal-input-group input:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

/* Boutons en bas de la modale (OK, Annuler) */
.modal-buttons {
  display: flex;
  justify-content: flex-end; /* Alignement à droite */
  gap: 10px;
  margin-top: 15px;
}

/* Bouton de fermeture (X) en haut à droite */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px; /* Grande taille pour faciliter le clic */
  cursor: pointer;
  color: #777; /* Gris moyen */
}

/* État survol : Gris foncé */
.close-btn:hover {
  color: #333;
}

/* État focus : Contour bleu pour accessibilité */
.close-btn:focus {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}


/* ============================================================================
   14. MODALE DE DÉTAILS DES DÉFIS
   ============================================================================

   Modale spécifique affichant l'historique des défis d'un joueur.

   STRUCTURE :
   - Tableau avec colonnes : Date, Adversaire, Défi, Réussite
   - En-têtes centrés et gris clair
   - Hover sur les lignes (bleu très clair)

   ============================================================================ */

#matchDetailModal table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

#matchDetailModal th,
#matchDetailModal td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

#matchDetailModal th {
  background-color: #f8f9fa; /* Gris très clair (plus doux que le bleu) */
  font-weight: 600;
  text-align: center;
}

#matchDetailModal tr:nth-child(even) {
  background-color: #f9f9f9;
}

#matchDetailModal tr:hover {
  background-color: #f1f5ff; /* Bleu très clair */
}


/* ============================================================================
   15. MODALES D'HISTORIQUE (INDIVIDUEL ET DUO)
   ============================================================================

   Modales spécifiques pour afficher l'historique des matchs.

   DIFFÉRENCES PAR RAPPORT AUX MODALES STANDARD :
   - Plus larges (1200px au lieu de 800px) pour afficher plus de colonnes
   - En-têtes sticky (position: sticky) pour rester visibles lors du scroll
   - Scroll horizontal si nécessaire (overflow-x: auto)

   AMÉLIORATION UX (v1.2) :
   - Anciennement : Historique en bas de page (nécessitait de scroller)
   - Maintenant : Modale qui s'ouvre au centre de l'écran (accès instantané)
   - Voir AMELIORATION_HISTORIQUE_MODALE.md pour détails

   ============================================================================ */

#individualHistoryModal .modal-content,
#duoHistoryModal .modal-content {
  max-width: 95%; /* Largeur adaptative sur petits écrans */
  width: 1200px; /* Largeur fixe sur grand écran */
}

.history-modal-content {
  margin-top: 20px;
  overflow-x: auto; /* Scroll horizontal si tableau trop large */
}

.history-modal-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
}

/* En-têtes de colonnes : Sticky pour rester visibles lors du scroll */
.history-modal-content th {
  background-color: #3498db; /* Bleu primaire */
  color: white;
  font-weight: bold;
  padding: 12px;
  text-align: center;
  position: sticky; /* Reste visible lors du scroll vertical */
  top: 0;
  z-index: 10; /* Au-dessus du contenu */
}

.history-modal-content td {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #e0e0e0;
}

/* Lignes alternées */
.history-modal-content tr:nth-child(even) {
  background-color: #f9f9f9;
}

/* État survol : Bleu très clair */
.history-modal-content tr:hover {
  background-color: #e8f4f8;
}

/* Message "Aucun match dans l'historique" (colspan sur toute la largeur) */
.history-modal-content td[colspan] {
  padding: 30px;
  font-style: italic;
  color: #999; /* Gris moyen */
}


/* ============================================================================
   16. EN-TÊTES DE SECTION ET SÉPARATEURS
   ============================================================================

   Style pour les lignes d'en-tête dans les tableaux (ex: "Défis réussis").

   ============================================================================ */

.section-header {
  background-color: #e7f5ff !important; /* Bleu très clair, force la couleur */
  font-weight: bold;
  text-align: center;
  color: #2c3e50;
}

/* Séparateur visuel (ligne vide colorée) */
.separator {
  height: 8px; /* Hauteur du séparateur */
  background-color: #f0f4ff; /* Bleu très pâle */
}

/* Message "Aucune donnée" */
.no-data {
  text-align: center;
  color: #999;
  font-style: italic;
}


/* ============================================================================
   17. BOUTONS DANS LES TABLEAUX
   ============================================================================

   Boutons d'action dans les colonnes de tableaux (ex: détails du match).

   ============================================================================ */

.detail-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #3498db;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.2s;
}

/* État survol : Fond bleu clair + agrandissement */
.detail-btn:hover {
  background-color: rgba(52, 152, 219, 0.1); /* Bleu translucide */
  transform: scale(1.1); /* Agrandissement de 10% */
}


/* ============================================================================
   18. EMOJIS ET COULEURS
   ============================================================================

   Styles pour les emojis et les niveaux de défis.

   COULEURS DES NIVEAUX :
   - Vert (green) : Débutant (facile)
   - Bleu (blue) : Débrouillé (moyen)
   - Rouge (red) : Expert (difficile)
   - Jaune (yellow) : Avantages
   - Orange (orange) : Handicaps

   ============================================================================ */

.emoji {
  font-size: 18px; /* Taille standard pour les emojis */
}

/* Couleurs des niveaux de défis et avantages/handicaps */
.level.green { color: #27ae60; } /* Vert */
.level.blue { color: #3498db; } /* Bleu */
.level.red { color: #e74c3c; } /* Rouge */
.level.yellow { color: #f1c40f; } /* Jaune */
.level.orange { color: #e67e22; } /* Orange */


/* ============================================================================
   19. ONGLET AIDE
   ============================================================================

   Style de l'onglet "Aide" qui explique le fonctionnement de l'application.

   STRUCTURE :
   - Sections d'aide avec fond blanc
   - Liste de fonctionnalités en grille responsive
   - Items avec bordure gauche bleue
   - Liste "Comment faire" avec étapes numérotées

   ============================================================================ */

.help-section {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.help-section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 20px;
}

/* Grille responsive des fonctionnalités */
.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Colonnes adaptatives */
  gap: 15px;
  margin-top: 15px;
}

/* Item de fonctionnalité */
.feature-item {
  background-color: #f9f9f9; /* Gris très clair */
  padding: 15px;
  border-radius: 8px;
  border-left: 4px solid #3498db; /* Bordure gauche bleue */
}

.feature-item h4 {
  color: #3498db;
  margin-bottom: 8px;
  font-size: 16px;
}

.feature-item ul {
  margin-left: 20px; /* Indentation des puces */
  line-height: 1.5;
}

.feature-item li {
  margin-bottom: 5px;
}

/* Liste "Comment faire" */
.howto-list {
  margin-top: 15px;
  line-height: 1.6;
}

.howto-list li {
  margin-bottom: 15px;
}

/* Titre des étapes en rouge */
.howto-list strong {
  color: #e74c3c; /* Rouge pour accent visuel */
  display: block;
  margin-bottom: 5px;
}


/* ============================================================================
   20. ACCESSIBILITÉ - CLASSE SR-ONLY
   ============================================================================

   Classe pour masquer visuellement du contenu tout en le gardant accessible
   aux lecteurs d'écran.

   UTILISATION :
   - Ajouter des descriptions textuelles pour les emojis
   - Fournir des labels supplémentaires pour les technologies d'assistance

   EXEMPLE :
   <button aria-label="Modifier l'élève">
     <span class="sr-only">Modifier l'élève</span>
     ✏️
   </button>

   TECHNIQUE :
   - Position absolue hors de l'écran
   - Taille 1x1px (pas 0x0 car certains lecteurs ignorent)
   - Clip pour masquer visuellement
   - Pas de display: none (sinon ignoré par lecteurs d'écran)

   CONFORMITÉ : WCAG 2.2 Level AA

   ============================================================================ */

.sr-only {
  position: absolute;
  width: 1px; /* 1px au lieu de 0 pour compatibilité lecteurs d'écran */
  height: 1px;
  padding: 0;
  margin: -1px; /* Décalage négatif pour cacher complètement */
  overflow: hidden;
  clip: rect(0, 0, 0, 0); /* Clip pour masquer visuellement */
  white-space: nowrap; /* Pas de retour à la ligne */
  border-width: 0;
}


/* ============================================================================
   16. TOURNOI ATP (LIBRE)
   ============================================================================

   Styles pour le formulaire de création manuelle de matchs ATP.
   Le formulaire permet de sélectionner deux joueurs dans des listes déroulantes.

   ============================================================================ */

/* Conteneur du formulaire de création */
.atp-form {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.atp-form h3 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 1.1rem;
}

/* Conteneur des sélecteurs de joueurs */
.atp-players {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

/* Sélecteur individuel de joueur */
.atp-player-select {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.atp-player-select label {
  font-weight: bold;
  color: #34495e;
  font-size: 0.9rem;
}

.atp-player-select select {
  padding: 10px 15px;
  border-radius: 5px;
  border: 2px solid #3498db;
  font-size: 1rem;
  min-width: 180px;
  background: white;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.atp-player-select select:focus {
  outline: none;
  border-color: #2980b9;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.3);
}

/* Label VS entre les deux joueurs */
.vs-label {
  font-size: 1.5rem;
  font-weight: bold;
  color: #e74c3c;
  padding: 10px;
}

/* Bouton de création centré */
.atp-form .btn {
  display: block;
  margin: 0 auto;
  font-size: 1rem;
  padding: 12px 25px;
}

/* Style pour les selects génériques du formulaire */
.form-select {
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid #bdc3c7;
  font-size: 0.95rem;
  background: white;
}

.form-select:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}


/* ============================================================================
   FIN DE LA FEUILLE DE STYLE
   ============================================================================

   MAINTENANCE :
   - Pour modifier les couleurs : Chercher les codes hexadécimaux (#3498db, etc.)
   - Pour modifier les espacements : Chercher les valeurs padding/margin
   - Pour modifier les tailles de police : Chercher font-size
   - Pour ajouter un nouvel élément : Suivre la structure en sections

   RESSOURCES :
   - Documentation CSS : https://developer.mozilla.org/fr/docs/Web/CSS
   - Accessibilité WCAG 2.2 : https://www.w3.org/WAI/WCAG22/quickref/
   - Guide Flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
   - Guide Grid : https://css-tricks.com/snippets/css/complete-guide-grid/

   ============================================================================ */