/* ══════════════════════════════════════════════════════════════════════════
   L'ESPACE CTS — LA FEUILLE COMMUNE DE SES ÉCRANS (13/09/2026)

   ⚠ UNE SEULE COPIE. Quatre écrans la partagent : l'accueil, les stages,
   l'équipe de ligue et la formation. Écrire le style dans chaque page, c'était
   quatre versions du même bleu et quatre façons de dessiner une carte.

   ⚠ CES ÉCRANS NE CHARGENT PAS milon-theme.css — comme Dashboard_Ligue, et pour
   la même raison : ils n'appartiennent à aucun club, donc ils n'ont pas de
   couleur de club à porter. Les valeurs sont donc écrites ici, en clair, et
   c'est le seul endroit où elles le sont.
   ══════════════════════════════════════════════════════════════════════════ */

body {
  font-family: 'Rajdhani', -apple-system, BlinkMacSystemFont, sans-serif;
  background: linear-gradient(180deg, #f7f9fc, #dbe3ee);
  color: #1a2332;
  padding: 24px;
  max-width: 1000px;
  margin: auto;
  min-height: 100vh;
}
h1 { color: #1565c0; margin: 0 0 4px; letter-spacing: .5px }
.sub { color: #546e7a; font-size: 14px; margin-bottom: 18px }

.card {
  background: #fff;
  border: 1px solid rgba(84, 110, 122, .15);
  border-radius: 12px;
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(30, 60, 100, .06);
}
.card h2 { margin: 0 0 10px; font-size: 17px; letter-spacing: .5px; color: #1a2332 }

/* Le bandeau de règle, repris de l'écran de détection : même forme, même sens. */
.regle {
  background: #f7f9fc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #1e88e5;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #546e7a;
  margin-bottom: 14px;
}
.regle b { color: #1a2332 }

/* Les chiffres — même gabarit que ceux de la détection. */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px }
.chiffre { background: #f7f9fc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 12px 14px }
.chiffre b { display: block; font-size: 26px; line-height: 1.1; color: #1565c0 }
.chiffre span { font-size: 12.5px; color: #546e7a }

/* ⚠ LES RUBRIQUES DE L'ACCUEIL. Trois états, et ils ne se ressemblent pas :
   OUVERTE (on peut y aller), EN CHANTIER (elle existe, elle est vide et elle le
   dit), FERMÉE (elle ne vous est pas ouverte). Un menu qui montre les trois de
   la même façon promet ce qu'il ne tient pas. */
.rubriques { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px }
.rubrique {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(84, 110, 122, .15);
  border-left: 4px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px 16px;
}
.rubrique .titre { font-size: 16px; font-weight: 700; color: #1a2332; margin-bottom: 4px }
.rubrique .quoi { font-size: 13px; line-height: 1.5; color: #546e7a }
.rubrique .etat {
  display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding: 2px 9px; border-radius: 10px;
  background: #e2e8f0; color: #475569;
}
a.rubrique.ouverte { border-left-color: #1565c0 }
a.rubrique.ouverte:hover { box-shadow: 0 4px 16px rgba(30, 60, 100, .12) }
a.rubrique.ouverte .etat { background: #e3f2fd; color: #1565c0 }
.rubrique.chantier { border-left-color: #ef6c00; background: #fffdf8 }
.rubrique.chantier .etat { background: #fef3c7; color: #92400e }
.rubrique.fermee { opacity: .55 }

/* Les écrans encore vides : ce qui est prévu, et ce qui reste à trancher. */
.prevu { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.75; color: #37474f }
.prevu li { margin-bottom: 4px }
.attente { background: #fffdf8; border: 1px solid #fde4c0; border-left: 4px solid #ef6c00;
           border-radius: 9px; padding: 14px 16px; font-size: 14px; line-height: 1.65; color: #6b4b1a }
.attente b { color: #7c3a00 }

/* ══ LES LISTES D'ATHLÈTES (13/09/2026) ═══════════════════════════════════
   ⚠ DEUX ORIGINES, DEUX ASPECTS. Ceux que le club a poussés portent un liseré
   vert et une étiquette ; ceux que la ligue a écrits portent le liseré bleu et
   un bouton. On doit voir d'un coup d'œil ce qui vient d'ailleurs et ce qu'on
   peut défaire soi-même. */
.tiroir { margin: 16px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
          text-transform: uppercase; color: #546e7a; display: flex; align-items: center; gap: 9px }
.tiroir:first-child { margin-top: 2px }
.tiroir::after { content: ""; flex: 1; height: 1px; background: rgba(84, 110, 122, .18) }
.tiroir b { color: #1565c0 }
.athlete { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           border: 1px solid rgba(84, 110, 122, .15); border-left: 4px solid #1565c0;
           border-radius: 10px; padding: 10px 14px; margin: 8px 0; background: #f7f9fc }
.athlete.pousse { border-left-color: #2e7d32; background: #f6fbf6 }
.athlete .corps { flex: 1; min-width: 170px }
.athlete .nom { font-size: 15px; font-weight: 700; color: #1a2332 }
.athlete .qui { font-size: 12.5px; color: #546e7a; margin-top: 2px }
.athlete .etiq { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
                 padding: 3px 9px; border-radius: 10px; background: #e2e8f0; color: #475569 }
.athlete .etiq.ok { background: #dcfce7; color: #166534 }
.athlete .etiq.niveau { background: #e3f2fd; color: #1565c0 }
/* D'où vient la ligne : reprise de l'annuaire, ou écrite à la main. */
.athlete .etiq.source { background: #ede9fe; color: #5b21b6 }
.athlete .barres { font-size: 13px; color: #37474f; white-space: nowrap }
.athlete .barres b { color: #1a2332 }

/* ⚠ LA RECHERCHE. Les résultats sont des BOUTONS, pas des lignes cliquables :
   un lecteur d'écran doit savoir que ça se presse, et le clavier doit y aller. */
.trouves { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px }
.trouve { display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
          font-family: inherit; font-size: 14px; font-weight: 700; color: #1a2332;
          background: #fff; border: 1px solid rgba(84, 110, 122, .3); border-radius: 9px;
          padding: 7px 12px; cursor: pointer; text-align: left }
.trouve:hover { border-color: #1565c0; background: #e3f2fd }
.trouve span { font-size: 12px; font-weight: 600; color: #546e7a }

.refus { max-width: 640px; margin: 60px auto; padding: 24px; background: #fff;
         border: 1px solid #e2e8f0; border-radius: 10px }
.refus strong { font-size: 17px }
.refus div { color: #64748b; margin-top: 8px; line-height: 1.6 }