/* Thème commun des applications — reprend l'identité de la page d'accueil */
* { box-sizing: border-box; margin: 0; }
:root {
  --asphalte: #14181c;
  --asphalte-2: #1b2127;
  --asphalte-3: #232a31;
  --craie: #f2efe9;
  --craie-douce: #c8c4ba;
  --bleu: #2f7fd1;
  --sodium: #f5a623;
  --coeur: #e34d68;
  --vert: #4caf50;
  --ligne: #313a43;
  --accent: var(--bleu);        /* surchargé par chaque app */
  --accent-fonce: #1f5fa0;
}
html, body, #app { height: 100%; }
body {
  font-family: "Cormorant Garamond", Georgia, serif;
  background: var(--asphalte); color: var(--craie);
  font-size: 18px; line-height: 1.55;
}
.sans { font-family: "Saira Condensed", "Arial Narrow", sans-serif; }
#app { display: flex; }
#map { flex: 0 0 50%; max-width: 50%; min-width: 0; background: var(--asphalte-2); }
/* la carte OSM est claire : on l'assombrit pour rester dans le ton */
.leaflet-tile-pane { filter: brightness(.72) saturate(.75) contrast(1.05); }
.leaflet-container { background: #0f1316; }

#sidebar {
  flex: 1 1 50%; min-width: 0; height: 100%; overflow-y: auto;
  background: var(--asphalte); border-right: 1px solid var(--ligne);
  display: flex; flex-direction: column;
}
/* sur très grand écran, le contenu reste à une largeur lisible */
#sidebar > * { width: 100%; max-width: 780px; margin-inline: auto; }
#sidebar header { padding: 14px 20px 16px; border-bottom: 1px solid var(--ligne); }
.gamesnav { font-family: "Saira Condensed", sans-serif; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; margin-bottom: 12px; }
.gamesnav a { color: var(--craie-douce); text-decoration: none; }
.gamesnav a:hover { color: var(--sodium); }
.logo { display: flex; gap: 14px; align-items: center; }
.logo h1 { font-family: "Saira Condensed", sans-serif; font-weight: 800;
  font-size: 27px; line-height: 1; letter-spacing: .5px; text-transform: uppercase; }
.logo h1 span { color: var(--accent); }
.tagline { font-size: 15px; color: var(--craie-douce); font-style: italic; margin-top: 3px; }

.panel { padding: 16px 20px 26px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.hint { font-size: 15px; color: var(--craie-douce); }
h3 { font-family: "Saira Condensed", sans-serif; font-weight: 600; font-size: 16px;
  letter-spacing: 1px; text-transform: uppercase; color: var(--accent); }

input, textarea, button, select { font-family: inherit; font-size: 16px; }
input[type=text], input[type=search], input:not([type]), textarea {
  width: 100%; background: var(--asphalte-2); color: var(--craie);
  border: 1px solid var(--ligne); border-radius: 9px; padding: 10px 12px;
}
input::placeholder, textarea::placeholder { color: #7f8792; }
input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
label { display: flex; flex-direction: column; gap: 5px; font-size: 15px; color: var(--craie-douce); }

.btn {
  border: none; border-radius: 999px; padding: 12px 22px; cursor: pointer;
  font-family: "Saira Condensed", sans-serif; font-weight: 800; font-size: 16px;
  letter-spacing: 1.1px; text-transform: uppercase;
  background: var(--accent); color: #fff; transition: transform .15s, filter .15s;
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn:disabled { opacity: .45; cursor: wait; transform: none; }
.btn-ghost { background: transparent; border: 1px solid var(--ligne); color: var(--craie-douce); }
.btn-coeur { background: var(--coeur); }
.btn-jaune { background: var(--sodium); color: #241d00; }

.board { width: 100%; border-collapse: collapse; font-size: 15px; }
.board th, .board td { padding: 7px 8px; border-bottom: 1px solid var(--ligne); text-align: left; }
.board th { font-family: "Saira Condensed", sans-serif; font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--craie-douce); font-weight: 600; }
.board tr:last-child td { border-bottom: none; }
.muted { color: #7f8792; font-style: italic; }
.hidden { display: none !important; }

footer { margin-top: auto; padding: 14px 20px 18px; font-size: 12.5px; color: #6d757f;
  border-top: 1px solid var(--ligne); }
:focus-visible { outline: 2px solid var(--sodium); outline-offset: 2px; }

@media (max-width: 760px) {
  #app { flex-direction: column; }
  #sidebar { height: auto; flex: 1; border-right: none; }
  #map { height: 34vh; flex: none; max-width: none; border-top: 1px solid var(--ligne); }
}

/* ligne du joueur courant dans un classement */
.board tr.moi td { color: var(--accent); font-weight: 600; }

/* Sélecteur de vue (au sol / du ciel), posé sur une image — partagé par les jeux */
.visuel { position: relative; }
.vues {
  position: absolute; top: 12px; right: 12px; z-index: 2; display: flex; gap: 6px;
  background: #14181cd0; border-radius: 999px; padding: 4px; backdrop-filter: blur(3px);
}
.vues .vue {
  border: none; background: none; color: var(--craie-douce); cursor: pointer;
  font-family: "Saira Condensed", sans-serif; font-size: 13px; letter-spacing: .5px;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
}
.vues .vue.on { background: var(--accent); color: #fff; }
.vues .vue:hover { color: var(--craie); }
.vues .vue.vide { opacity: .42; cursor: not-allowed; text-decoration: line-through; }
.vues .vue.vide:hover { color: var(--craie-douce); }

.vues .vue:disabled { pointer-events: auto; }