/* Stations en commun */

:root {
  color-scheme: light dark;
  --fond: #f7f5f0;
  --papier: #fffdf8;
  --champ: #ffffff;
  --encre: #25211b;
  --doux: #6f6656;
  --pale: #a39a88;
  --trait: #e2dccf;
  --trait-leger: #efe9dd;
  --survol: #f5f1e8;
  --eclair: #fff1c2;
  --barre: #eee8dc;
  --accent: #1c5d99;
  --ok: #2b8a3e;
  --erreur: #c92a2a;
  --erreur-fond: #fbe9e9;
  --bouton: #25211b;
  --bouton-texte: #ffffff;
  --ombre: rgba(60, 50, 30, 0.12);
  --flottant: rgba(255, 253, 248, 0.95);
  --colonne: 400px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: var(--encre);
  background: var(--fond);
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #161512;
    --papier: #1d1b18;
    --champ: #26231f;
    --encre: #f1ece2;
    --doux: #ada490;
    --pale: #7f7766;
    --trait: #38342d;
    --trait-leger: #2c2924;
    --survol: #29261f;
    --eclair: #4a3f1c;
    --barre: #34302a;
    --accent: #7db3e8;
    --ok: #69c27a;
    --erreur: #ff8a80;
    --erreur-fond: #3b2221;
    --bouton: #f1ece2;
    --bouton-texte: #1d1b18;
    --ombre: rgba(0, 0, 0, 0.45);
    --flottant: rgba(33, 31, 27, 0.95);
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select { background: var(--champ); color: var(--encre); }
[hidden] { display: none !important; }
a { color: var(--accent); }
.petit { font-size: 0.82rem; color: var(--doux); }

.langue {
  border: 1px solid var(--trait); background: none; border-radius: 999px; padding: 1px 9px;
  font-size: 0.78rem; color: var(--doux);
}
.langue:hover { color: var(--encre); border-color: var(--doux); }
.entete-haut { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ---------------------------------------------------------------- accueil */

body.accueil { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.accueil-carte {
  max-width: 34rem; background: var(--papier); border: 1px solid var(--trait); border-radius: 14px;
  padding: 28px 30px; box-shadow: 0 10px 30px var(--ombre);
}
.accueil-carte h1 { margin: 0 0 12px; font-size: 1.8rem; letter-spacing: -0.01em; }
.erreur { color: var(--erreur); font-weight: 600; }
.bouton-principal {
  background: var(--bouton); color: var(--bouton-texte); border: 0; border-radius: 10px; padding: 12px 22px;
  font-size: 1.05rem; font-weight: 600;
}
.bouton-principal:hover { opacity: 0.9; }

/* ---------------------------------------------------------------- partie */

body.partie { height: 100vh; height: 100dvh; overflow: hidden; }
/* menu à gauche, carte à droite */
.cadre {
  display: grid; grid-template-columns: var(--colonne) minmax(0, 1fr); grid-template-areas: "colonne carte";
  height: 100%;
}

.zone-carte { grid-area: carte; position: relative; min-height: 0; overflow: hidden; background: var(--fond); }
#carte { display: block; touch-action: none; cursor: grab; }
#carte.glisse { cursor: grabbing; }
#carte.sur-gare { cursor: pointer; }

.carte-boutons {
  position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px;
}
.carte-boutons button {
  width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--trait);
  background: var(--flottant); font-size: 17px; line-height: 1; color: var(--encre);
  box-shadow: 0 1px 3px var(--ombre);
}
.carte-boutons button:hover { background: var(--papier); }

.pastille-filtre {
  position: absolute; top: 10px; left: 10px; display: flex; align-items: center; gap: 7px;
  background: var(--flottant); border: 1px solid var(--trait); border-radius: 999px;
  padding: 4px 6px 4px 10px; font-size: 0.88rem; box-shadow: 0 1px 3px var(--ombre);
}
.pastille-filtre button { border: 0; background: none; font-size: 1.1rem; line-height: 1; padding: 0 4px; }
.pastille-rejeu {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: var(--bouton); color: var(--bouton-texte); border-radius: 999px; padding: 4px 12px;
  font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.9;
}
.barre-rejeu { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--barre); }
#barre-rejeu-avance { height: 100%; width: 0; background: var(--encre); }
.infobulle {
  position: absolute; z-index: 5; pointer-events: none; display: flex; flex-direction: column; gap: 3px;
  background: var(--flottant); border: 1px solid var(--trait); border-radius: 8px;
  padding: 6px 9px; box-shadow: 0 4px 14px var(--ombre); max-width: 260px; font-size: 0.88rem;
}
.chargement {
  position: absolute; inset: 0; display: grid; place-items: center; color: var(--doux); font-size: 0.95rem;
}

/* ---------------------------------------------------------------- colonne */

.colonne {
  grid-area: colonne; overflow-y: auto; border-right: 1px solid var(--trait); background: var(--papier);
  padding: 14px 16px 24px; display: flex; flex-direction: column; gap: 10px;
}
.entete { display: flex; flex-direction: column; gap: 4px; }
.entete .site { font-size: 0.8rem; color: var(--doux); text-decoration: none; letter-spacing: 0.02em; }
.entete h1 {
  margin: 0; font-size: 1.35rem; line-height: 1.2; cursor: text; border-radius: 6px; overflow-wrap: anywhere;
}
.entete h1:hover { background: var(--survol); }
.entete h1.sans-titre { color: var(--pale); font-weight: 600; }
#titre-champ { width: 100%; font-size: 1.2rem; font-weight: 700; padding: 3px 6px; border: 1px solid var(--trait); border-radius: 6px; }

/* pseudo, couleur et « Autre appareil », à côté du nom de la partie */
.moi-barre { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.ma-couleur {
  flex: none; width: 24px; height: 24px; border-radius: 50%; border: 0; padding: 0;
  box-shadow: 0 0 0 2px var(--papier), 0 0 0 3px var(--trait);
}
.ma-couleur.vide { background: repeating-conic-gradient(var(--trait) 0 25%, var(--papier) 0 50%) 50% / 8px 8px !important; }
.ma-couleur[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--encre); }
#pseudo {
  flex: 1; min-width: 0; padding: 5px 8px; border: 1px solid var(--trait); border-radius: 8px; font-size: 0.95rem;
}
.bouton-appareil {
  flex: none; border: 1px solid var(--trait); background: var(--champ); border-radius: 8px; padding: 5px 9px;
  font-size: 0.85rem; color: var(--doux);
}
.bouton-appareil[aria-expanded="true"] { color: var(--encre); border-color: var(--doux); }
.nuancier { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; padding: 6px 0 2px; }
.nuance { aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12) inset; }
.nuance[aria-checked="true"] { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--encre); }
.nuance:disabled { opacity: 0.18; cursor: not-allowed; }
.appareil { border: 1px solid var(--trait); border-radius: 10px; padding: 4px 10px 10px; margin-top: 4px; }
.appareil p { margin: 6px 0; font-size: 0.88rem; }
.appareil .code { font-size: 1.35rem; font-weight: 750; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; }
#mon-lien { overflow-wrap: anywhere; }
.code-form { display: flex; gap: 6px; }
.code-form input { flex: 1; min-width: 0; padding: 6px 8px; border: 1px solid var(--trait); border-radius: 8px; text-transform: uppercase; }
.code-form input::placeholder { text-transform: none; }
.code-form button { border: 1px solid var(--trait); background: var(--champ); border-radius: 8px; padding: 6px 10px; }

.compteur-principal { font-size: 2rem; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.compteur-principal .sur { font-size: 1rem; font-weight: 500; color: var(--doux); letter-spacing: 0; }
.compteur-second { color: var(--doux); font-variant-numeric: tabular-nums; }

.saisie { display: flex; gap: 6px; }
.saisie input {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 1.05rem; border: 1.5px solid var(--trait);
  border-radius: 10px;
}
.saisie input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28, 93, 153, 0.18); }
.saisie button { width: 46px; border: 0; border-radius: 10px; background: var(--bouton); color: var(--bouton-texte); font-size: 1.1rem; }
.saisie.secoue { animation: secoue 0.32s; }
@keyframes secoue {
  20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .saisie.secoue { animation: none; } }
.message { min-height: 1.3em; font-size: 0.92rem; }
.message.ok { color: var(--ok); }
.message.erreur { color: var(--erreur); }
.message.info { color: var(--encre); }
.quota { font-size: 0.82rem; color: var(--doux); margin-top: -6px; }
.quota.atteint { color: var(--erreur); }

.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--trait); }
.onglets button {
  border: 0; background: none; padding: 7px 10px; border-bottom: 2.5px solid transparent; color: var(--doux);
  font-weight: 600;
}
.onglets button[aria-selected="true"] { color: var(--encre); border-bottom-color: var(--encre); }

.outils-liste { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.outils-liste select {
  flex: 1 1 30%; min-width: 0; padding: 5px 6px; border: 1px solid var(--trait); border-radius: 7px; font-size: 0.85rem;
}

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nom droite" "badges droite";
  gap: 2px 8px; padding: 6px 6px; border-bottom: 1px solid var(--trait-leger); cursor: pointer; border-radius: 6px;
}
.liste li:hover, .liste li:focus { background: var(--survol); outline: none; }
.liste li.eclair { background: var(--eclair); }
.liste .nom { grid-area: nom; font-weight: 600; overflow-wrap: anywhere; }
.liste .badges { grid-area: badges; }
.liste .droite {
  grid-area: droite; display: flex; align-items: center; gap: 6px; color: var(--doux); font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.liste .qui { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.liste .qui-nom { max-width: 8.5em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--encre); }
.retirer { border: 0; background: none; color: var(--doux); font-size: 1.1rem; line-height: 1; padding: 0 3px; border-radius: 4px; }
.retirer:hover { color: var(--erreur); background: var(--erreur-fond); }
.vide { color: var(--doux); font-size: 0.9rem; }

.badges { display: flex; flex-wrap: wrap; gap: 3px; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 1.55em; height: 1.55em;
  padding: 0 0.32em; border: 1.5px solid; border-radius: 999px; font-size: 10.5px; font-weight: 800;
  line-height: 1; letter-spacing: -0.01em; white-space: nowrap;
}
.badge-rer { border-radius: 4px; }
.badge-train { border-radius: 5px; }
.badge-tram { border-radius: 3px; }
.badge-val, .badge-funiculaire, .badge-cable { border-radius: 4px; font-weight: 700; }
.badge-futur { border-style: dashed; }
.puce {
  display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 1.5px var(--papier), 0 0 0 2.2px var(--pale);
}

/* classement */
.classement { width: 100%; border-collapse: collapse; margin-top: 4px; font-size: 0.92rem; }
.classement th { text-align: left; font-weight: 600; color: var(--doux); font-size: 0.8rem; padding: 4px; }
.classement th button { border: 0; background: none; padding: 0; color: var(--doux); font-weight: 600; }
.classement th button.actif { color: var(--encre); text-decoration: underline; }
.classement td { padding: 6px 4px; border-bottom: 1px solid var(--trait-leger); vertical-align: middle; }
.classement tbody tr { cursor: pointer; }
.classement tbody tr:hover td, .classement tbody tr:focus td { background: var(--survol); }
.classement tbody tr:focus { outline: none; }
.classement tr.connecte td { font-weight: 650; }
.classement tr.filtre td { background: var(--eclair); }
.classement .rang { color: var(--doux); width: 1.8em; }
.classement .joueur-contenu { display: inline-flex; align-items: center; gap: 8px; }
.classement .nb, .classement th:nth-child(n+3) { text-align: right; font-variant-numeric: tabular-nums; }

/* quêtes */
.sous-onglets { display: flex; gap: 6px; margin: 8px 0; }
.sous-onglets button { border: 1px solid var(--trait); background: var(--champ); border-radius: 999px; padding: 3px 12px; font-size: 0.88rem; }
.sous-onglets button.actif { background: var(--bouton); border-color: var(--bouton); color: var(--bouton-texte); }
#quetes h3, #palmares h3 { font-size: 0.95rem; margin: 14px 0 6px; }
.quetes { list-style: none; margin: 0; padding: 0; }
.quetes li { border-bottom: 1px solid var(--trait-leger); }
.quete-tete {
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "b t c" "r r r";
  align-items: center; gap: 4px 8px; padding: 6px 4px; border: 0; background: none; text-align: left;
}
.quete-tete > .badge { grid-area: b; }
.quete-tete .quete-titre { grid-area: t; font-weight: 600; font-size: 0.9rem; }
.quete-tete .quete-compte { grid-area: c; font-size: 0.82rem; color: var(--doux); font-variant-numeric: tabular-nums; }
.quete-tete .barre { grid-area: r; height: 4px; background: var(--barre); border-radius: 2px; overflow: hidden; }
.quete-tete .avance { display: block; height: 100%; background: var(--encre); border-radius: 2px; }
.quetes li.faite .quete-compte { color: var(--ok); font-weight: 700; }
.quete-noms { display: flex; flex-wrap: wrap; gap: 4px; padding: 2px 4px 10px; }
.quete-noms p { width: 100%; margin: 0 0 4px; }
.quete-nom {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--trait); background: var(--champ);
  border-radius: 999px; padding: 2px 8px 2px 5px; font-size: 0.82rem;
}

.categorie { border-bottom: 1px solid var(--trait-leger); padding-bottom: 6px; }
.categorie p { margin: 0 0 4px; }
.podium { margin: 0; padding-left: 1.4em; }
.podium li { padding: 2px 0; }
.podium li > * { vertical-align: middle; }
.podium .joueur { margin: 0 6px; }
.podium .valeur { color: var(--doux); font-variant-numeric: tabular-nums; }

.sources { margin-top: auto; font-size: 0.82rem; color: var(--doux); padding-top: 10px; }
.sources summary { cursor: pointer; }
.sources ul { padding-left: 1.2em; }

.notifications {
  position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 20; display: flex;
  flex-direction: column; gap: 6px; pointer-events: none;
}
.notification {
  background: var(--bouton); color: var(--bouton-texte); padding: 8px 14px; border-radius: 10px; font-weight: 600;
  font-size: 0.92rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); transition: opacity 0.5s, transform 0.5s;
}
.notification.sort { opacity: 0; transform: translateY(-8px); }

/* plein écran : seulement la carte */
body.plein-ecran .colonne { display: none; }
body.plein-ecran .cadre { grid-template-columns: 1fr; grid-template-areas: "carte"; }

/* ---------------------------------------------------------------- téléphone */

@media (max-width: 820px) {
  body.partie { height: auto; overflow: auto; }
  .cadre { display: block; height: auto; }
  .zone-carte { height: min(62vh, 112vw); height: min(62svh, 112vw); }
  .colonne { border-right: 0; border-top: 1px solid var(--trait); }
  body.plein-ecran .zone-carte { position: fixed; inset: 0; height: auto; z-index: 10; }
  .carte-boutons { top: 8px; right: 8px; }
  .nuancier { grid-template-columns: repeat(8, 1fr); }
}