/* Accueil du joueur connecté — règles propres à cet écran.
 *
 * Complète /commun/base.css (jetons, bandeau, menu de compte, boutons,
 * messages). Rien ici ne sert à un autre écran.
 *
 * Contrainte de conception, pas de finition (CLAUDE.md) : rien ne déborde
 * horizontalement à 360 px, et toute cible cliquable fait au moins 44 px.
 */

.espace {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--espace-5) var(--espace-4) var(--espace-6);
}

.entete-espace {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-4);
  margin-bottom: var(--espace-5);
}

.entete-espace h1 {
  margin: 0 0 var(--espace-1);
  font-size: clamp(1.5rem, 4vw, 2rem);
}

/* Le solde est un LIEN vers le calendrier : c'est la seule action qu'il
   appelle, et un joueur qui regarde son solde va y chercher quoi en faire. */
.carte-solde {
  display: flex;
  align-items: baseline;
  gap: var(--espace-2);
  min-height: var(--cible-tactile);
  padding: var(--espace-2) var(--espace-4);
  background: var(--fond-info);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  color: var(--accent);
  text-decoration: none;
}
.carte-solde:hover { border-color: var(--accent); }
.carte-solde-valeur {
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.carte-solde-libelle { font-size: 0.85rem; color: var(--texte-att); }

.colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--espace-5);
  align-items: start;
}

/* minmax(0, 1fr) ci-dessus : sans le 0, une carte large pousse la colonne
   au-delà de la fenêtre et ramène le défilement horizontal. */
@media (max-width: 900px) {
  .colonnes { grid-template-columns: minmax(0, 1fr); }
}

.espace h2 {
  font-size: 1rem;
  color: var(--texte-att);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--espace-3);
}
.colonne-principale h2:not(:first-child),
.colonne-laterale h2:not(:first-child) {
  margin-top: var(--espace-5);
}

/* ── Blocs ───────────────────────────────────────────────────────────────── */

.bloc {
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-5);
}
/* Bordure d'accent sur la prochaine session : c'est l'information qui décide
   de ce que le joueur fait dans les minutes qui suivent. */
.bloc--accent { border-left: 3px solid var(--accent); }
/* État vide ou dégradé : ton neutre, jamais une alerte — ne rien avoir
   réservé n'est pas un problème. */
.bloc--vide { color: var(--texte-att); }

.bloc-surtitre {
  margin: 0 0 var(--espace-1);
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bloc-titre {
  margin: 0 0 var(--espace-2);
  font-size: 1.15rem;
  font-weight: 600;
  /* La date longue en français est un mot très long à 360 px. */
  overflow-wrap: break-word;
}
.bloc .bouton,
.bloc .bouton-discret {
  display: inline-flex;
  align-items: center;
  margin-top: var(--espace-4);
  text-decoration: none;
}

/* ── Arènes (#137) ────────────────────────────────────────────────────────────
 * Un bandeau par ARÈNE, empilés en colonne — jamais une grille de vignettes :
 * avec une seule arène aujourd'hui, une pile a l'air d'un choix assumé, une
 * grille aurait l'air d'un début de catalogue vide (cf. l'issue). Photo à
 * gauche sur un écran large, empilée au-dessus du texte à 360 px — même
 * bascule que les autres cartes de ce portail. Noms de classes conservés en
 * `.terrain*` (#149, Lot 2 à venir) : « arène » n'est pour l'instant qu'un
 * mot de vocabulaire, pas encore un identifiant de code. */

.terrains {
  display: flex;
  flex-direction: column;
  gap: var(--espace-4);
}

.terrain {
  display: flex;
  gap: var(--espace-4);
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-4);
}

/* Carte cliquable vers l'écran de l'arène (#137) — cf. rendreCarteNavigable().
 * Un léger changement de fond au survol/focus suffit à dire « ceci mène
 * quelque part », sans dupliquer l'apparence des boutons qu'elle contient. */
.terrain--navigable { cursor: pointer; }
.terrain--navigable:hover, .terrain--navigable:focus-visible {
  background: var(--fond-eleve);
  outline: none;
}

.terrain-photo {
  width: 9rem;
  height: 9rem;
  flex: none;
  object-fit: cover;
  border-radius: var(--rayon-md);
  background: var(--fond-eleve);
}
/* Dégradation d'une photo absente (#137) : un aplat avec l'initiale de
 * l'arène, jamais un trou dans la mise en page. */
.terrain-photo--aplat {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--texte-att);
}

.terrain-corps { flex: 1; min-width: 0; }
.terrain-nom { margin: 0 0 var(--espace-1); font-size: 1.15rem; }
/* Le nom mène à l'écran de l'arène : un lien, pas une décoration. Couleur du
 * titre au repos, soulignement au survol/focus — la carte porte déjà le reste. */
.terrain-nom-lien { color: inherit; text-decoration: none; }
.terrain-nom-lien:hover, .terrain-nom-lien:focus-visible {
  color: var(--accent-vif);
  text-decoration: underline;
}
.terrain-localite { margin: 0; color: var(--texte-att); font-size: 0.85rem; }
.terrain-activite {
  margin: var(--espace-2) 0 0;
  font-size: 0.9rem;
  color: var(--marque);
  overflow-wrap: break-word;
}
.terrain-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
  margin-top: var(--espace-4);
}
.terrain-actions .bouton,
.terrain-actions .bouton-discret {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* À 360 px, une photo de 9rem à côté du texte ne laisse presque plus de
 * place au texte (CLAUDE.md : jamais de défilement horizontal à cette
 * largeur) — la photo passe donc au-dessus. */
@media (max-width: 480px) {
  .terrain { flex-direction: column; }
  .terrain-photo { width: 100%; height: 10rem; }
}

/* ── Liste des réservations ──────────────────────────────────────────────── */

.liste-reservations {
  display: flex;
  flex-direction: column;
  gap: var(--espace-2);
}
.reservation-ligne {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--espace-3);
  background: var(--fond-panneau);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-md);
}
.reservation-quand { font-weight: 600; overflow-wrap: break-word; }
.reservation-detail { color: var(--texte-att); font-size: 0.85rem; }

/* ── Rappel du déroulé ───────────────────────────────────────────────────── */

.rappel {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--texte-att);
  line-height: 1.7;
}