/* Styles propres à certains écrans : répartition, actions rapides, fiche */

/* ------------------------------------------------ Répartition (dashboard) */
.repartition {
  display: flex;
  align-items: center;
  gap: var(--espace-xl);
  flex-wrap: wrap;
}

.legende {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
  flex: 1;
  min-width: 220px;
}

.legende li {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legende__nom {
  color: var(--texte);
}

.legende strong {
  color: var(--bleu-nuit);
}

.legende__part {
  color: var(--texte-doux);
  font-size: 13px;
  min-width: 44px;
  text-align: right;
}

/* ------------------------------------------------------- Actions rapides */
.actions-rapides {
  display: grid;
  gap: 6px;
}

.action-rapide {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--rayon-petit);
  color: var(--texte);
  transition: background 0.15s ease;
}

.action-rapide:hover {
  background: var(--bleu-pale);
  text-decoration: none;
}

.action-rapide__pastille {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bleu-pale);
  color: var(--bleu-nuit);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.action-rapide strong {
  display: block;
  font-size: 14px;
  color: var(--bleu-nuit);
}

.action-rapide span span,
.action-rapide > span > span {
  font-size: 12.5px;
  color: var(--texte-doux);
}

.action-rapide svg:last-child {
  margin-left: auto;
  color: var(--texte-faible);
}

/* --------------------------------------------------------- Résumé d'import */
.import-resume {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.import-resume + .import-resume {
  border-top: 1px dashed var(--bordure);
}

.import-resume__pastille {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--or-clair);
  color: #a97600;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.import-resume strong {
  display: block;
  font-size: 14px;
  color: var(--bleu-nuit);
}

.import-resume span span {
  font-size: 12.5px;
  color: var(--texte-doux);
}

/* -------------------------------------------------------- Fiche adhérent */
.fiche-entete {
  display: flex;
  gap: var(--espace-l);
  align-items: flex-start;
  flex-wrap: wrap;
}

.fiche-entete__nom {
  font-size: 26px;
  margin: 2px 0 10px;
}

/* Photo de l'adhérent et ses actions d'édition */
.bloc-photo {
  display: grid;
  gap: var(--espace-s);
  justify-items: center;
}

.bloc-photo__actions {
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 128px;
}

.bloc-photo__actions .bouton {
  width: 100%;
  justify-content: center;
}

.bloc-photo__actions .champ__aide {
  text-align: center;
  line-height: 1.35;
}

/* ------------------------------------------------------------ Chronologie */
.chronologie {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.chronologie li {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--bordure);
}

.chronologie li:last-child {
  border-bottom: 0;
}

.chronologie__pastille {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bleu-pale);
  color: var(--bleu-nuit);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.chronologie strong {
  display: block;
  font-size: 14px;
  color: var(--texte);
}

/* ------------------------------------------------------------ Connexion */
.page-connexion {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--bleu-nuit), #061b45);
  padding: var(--espace-m);
}

.connexion {
  background: var(--blanc);
  border-radius: var(--rayon);
  box-shadow: var(--ombre-forte);
  padding: var(--espace-xl);
  width: 100%;
  max-width: 430px;
}

.connexion__banniere {
  width: 100%;
  border-radius: var(--rayon-petit);
  margin-bottom: var(--espace-l);
}

.connexion h1 {
  font-size: 24px;
  text-align: center;
}

.connexion__sous-titre {
  text-align: center;
  color: var(--texte-doux);
  font-size: 13.5px;
  margin: 6px 0 var(--espace-l);
}

.connexion form {
  display: grid;
  gap: var(--espace-m);
}

.connexion .bouton {
  justify-content: center;
  width: 100%;
}

.connexion__message {
  padding: 11px var(--espace-m);
  border-radius: var(--rayon-petit);
  font-size: 13.5px;
  background: var(--rouge-fond);
  color: var(--rouge-alerte);
  font-weight: 600;
}

.connexion__pied {
  margin-top: var(--espace-l);
  text-align: center;
  font-size: 12.5px;
  color: var(--texte-faible);
}

/* --------------------------------------------------- Groupes d'entraînement */
.carte-groupe {
  display: grid;
  gap: var(--espace-m);
  align-content: start;
}

.carte-groupe--inactif {
  opacity: 0.6;
  border-style: dashed;
}

.carte-groupe__entete {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--espace-s);
  padding-bottom: var(--espace-s);
  border-bottom: 2px solid var(--or);
}

.carte-groupe__entete h3 {
  font-size: 16px;
  margin: 0 0 2px;
  color: var(--bleu-nuit);
}

.carte-groupe__actions {
  display: flex;
  gap: var(--espace-s);
  flex-wrap: wrap;
  border-top: 1px solid var(--bordure);
  padding-top: var(--espace-s);
}

/* Trois groupes par ligne sur grand écran, un seul sur tablette et mobile. */
.grille--tiers {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--espace-m);
}