@font-face{font-family:'Archivo Exp';src:url(/fonts/archivo-exp700.woff2) format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-400.woff2) format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-600.woff2) format('woff2');
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/fonts/plexmono-500.woff2) format('woff2');
  font-weight:500;font-style:normal;font-display:swap}

/* ============================================================================
   Palworld Live Map, refonte visuelle (PC + mobile)
   Tous les sélecteurs fonctionnels sont conservés : seul le style change.
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* Les fontes de la vitrine, auto-hébergées (la CSP interdit les CDN). La
     carte les partage : un joueur qui passe de la carte à un guide ou à
     l'accueil ne doit pas voir le lettrage changer. */
  --d: 'Archivo Exp', Impact, 'Arial Narrow', sans-serif;
  --m: 'Plex Mono', ui-monospace, Consolas, monospace;

  --bg: #061118;
  --bg2: #08161e;
  --panel: #0b1f27;
  --panel2: #123c46;
  --panel3: #2d5f66;
  --line: rgba(147, 166, 173, 0.14);
  --text: #e4edf0;
  --muted: #93a6ad;
  --accent: #f0a23c;
  --accent2: #f0a23c;
  --accent-soft: var(--accent-15);
  --gold: #f0a23c;
  --green: #55d97a;
  --red: #f06868;
  /* Alignés sur la vitrine et les guides (plaques à 5 px) : un rayon de
     14 px donnait à la carte un air de produit différent du reste. */
  --radius: 5px;
  --radius-s: 4px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* ---- SOCLE COMMUN ---------------------------------------------------
     Le site utilisait 62 durées, 30 rayons et 41 ombres différents pour les
     mêmes intentions : c'est cette dispersion, plus que la palette, qui lui
     donnait un air irrégulier. Les échelles ci-dessous sont volontairement
     COURTES. Une valeur qui n'y figure pas est presque toujours une valeur
     qu'on peut ramener à sa voisine.

     Mouvement. Une seule règle : plus un élément est gros et lointain, plus
     il prend son temps. Les courbes décélèrent toutes fortement en fin de
     course, c'est ce qui donne la sensation de « se poser » plutôt que de
     s'arrêter net. Ne pas utiliser linear ni ease pour du mouvement visible :
     l'un est mécanique, l'autre démarre trop sec. */
  --t-instant: .12s;   /* appui, bascule d'état : doit suivre le doigt */
  --t-court:   .2s;    /* survol, couleur, petite translation */
  --t-moyen:   .45s;   /* ouverture d'un panneau, changement de vue */
  --t-long:    .9s;    /* apparition d'un bloc au défilement */
  --e-doux:    cubic-bezier(.16, 1, .3, 1);      /* décélération marquée */
  --e-sortie:  cubic-bezier(.22, .61, .36, 1);   /* plus sobre, pour l'interface */

  /* Rayons : 5 marches au lieu de 30. --r-m vaut 16px et non 14px, parce que
     16px est le rayon de carte réellement majoritaire sur le site (33 emplois
     dans les pages) : le socle s'aligne sur l'existant, pas l'inverse.
     --radius (14px) reste pour la carte, qui l'utilise déjà partout. */
  --r-xs: 6px;
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 20px;
  --r-pill: 999px;

  /* Élévations : 3 niveaux, du posé au flottant. La lueur est réservée à
     l'accent (focus, élément actif), jamais décorative. */
  --e-1: 0 2px 8px rgba(0, 0, 0, .28);
  --e-2: 0 10px 30px rgba(0, 0, 0, .45);
  --e-3: 0 18px 48px rgba(0, 0, 0, .55);
  --lueur: 0 0 0 3px var(--accent-15);

  /* Rythme vertical, multiples de 4. RÉSERVÉ AUX COMPOSANTS NEUFS : les
     espacements actuels du site valent 9, 11, 14, 18, 22px. Les y ramener de
     force déplacerait visiblement des blocs d'un site en production, pour un
     gain purement théorique. On aligne au fil des refontes, jamais en masse. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --police: 'Archivo', system-ui, 'Segoe UI', sans-serif;

  /* Plans de superposition. Les valeurs sont INCHANGÉES, elles sont juste
     nommées : lire « z-index: 899 » n'apprend rien, lire « sous les contrôles
     flottants » évite d'inventer un 901 au prochain ajout. Ordre du fond vers
     l'avant : contenu collant, contrôles de la carte, panneau latéral mobile,
     voile, dialogue, message temporaire. */
  --z-collant: 2;
  --z-sous-flottant: 899;
  --z-flottant: 900;
  --z-panneau: 1000;
  --z-voile: 2000;
  --z-dialogue: 2500;
  --z-toast: 3000;
}

/* Apparition au défilement, disponible sur TOUTES les pages qui chargent
   style.css. L'état masqué n'est posé que si un script ajoute .js-reveal sur
   <html> : sans JavaScript, la page reste entièrement lisible. */
.js-reveal .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:opacity var(--t-long) var(--e-doux), transform var(--t-long) var(--e-doux);
  will-change: opacity, transform;
}
.js-reveal .reveal.vu { opacity: 1; transform: none; will-change: auto; }

/* Un visiteur qui demande moins d'animations ne doit rien subir, et surtout
   ne jamais se retrouver devant du contenu resté invisible. */
@media (prefers-reduced-motion: reduce) {
  .js-reveal .reveal { opacity: 1; transform: none; transition:none; }
}

/* Cohérence du focus clavier sur tout le site : un seul anneau, visible sur
   fond sombre, sans supprimer l'accessibilité au profit de l'esthétique. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

body {
  font-family: 'Archivo', system-ui, 'Segoe UI', sans-serif;
  background: radial-gradient(1200px 800px at 85% -10%, #14203a 0%, var(--bg) 55%) fixed;
  color: var(--text);
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ascenseurs discrets partout */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--panel3);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--panel3); }

/* ============================== SIDEBAR ================================== */

#sidebar {
  transition:margin-left var(--t-court) cubic-bezier(0.25, 1, 0.4, 1);
  width: 352px;
  min-width: 352px;
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  gap: 11px;
  padding-bottom: 8px;
}

#sidebar header {
  padding: 18px 16px 10px;
  position: relative;
}

#sidebar h1 {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.4px;
  font-family: var(--d);
  text-transform: uppercase;
  letter-spacing: -.004em;
}
#sidebar h1 span {
  font-weight: 300;
  background: var(--accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.status {
  margin-top: 9px;
  font-family: var(--m);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  padding: 5px 11px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-transform: uppercase;
}
.status::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.status.online { background: var(--accent-10); color: var(--accent); }
.status.offline { background: rgba(240, 104, 104, 0.12); color: var(--red); }

#whoami {
  width: 100%;
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  border: 1px solid rgba(147, 166, 173, 0.30);
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  outline: none;
  cursor: pointer;
  transition:border-color var(--t-court);
}
#whoami:hover, #whoami:focus { border-color: var(--accent); }

/* Sections = cartes flottantes */
#sidebar section {
  /* Même surface que les plaques de la vitrine : un dégradé sourd, pas un
     verre dépoli. Le backdrop-filter était aussi le vrai coût GPU du mode
     léger, il disparaît ici sans rien perdre de lisible. */
  background: linear-gradient(180deg, var(--panel), #08161d);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 12px;
  padding: 16px 18px;
}

#sidebar h2 {
  font-family: var(--m);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 500;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 2px 0;
  transition:color var(--t-court);
}
.sec-head:hover { color: var(--accent); }
.sec-head .chev {
  margin-left: auto;
  transition:transform var(--t-court) var(--e-sortie);
  font-size: 10px;
  color: var(--accent);
}
section.closed .chev { transform: rotate(-90deg); }
section.closed > *:not(h2) { display: none; }
section.closed h2 { margin-bottom: 0; }

.badge {
  background: var(--accent);
  color: #160c00;          /* l'encre sur ambre de la vitrine (--balise-encre) */
  border-radius: 3px;
  padding: 1px 9px;
  font-size: 11px;
  font-weight: 800;
  vertical-align: middle;
  letter-spacing: 0;
}

.details { font-size: 13.5px; line-height: 1.85; }
.details .k { color: var(--muted); }
.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; padding: 8px 2px; }

/* ---- Mon profil ---- */
/* Le sélecteur porte deux ids À DESSEIN : « #me-section » seul perd contre
   « #sidebar section » (id + type) et cette carte a passé toute la refonte
   sans son dégradé ni son liseré ambre, silencieusement. */
#sidebar #me-section {
  /* #17233a était un bleu marine de l'ancienne palette : le relief passe par
     le sarcelle du site (--panel2), le liseré ambre continue de le signer. */
  background: linear-gradient(160deg, var(--panel2), var(--panel));
  border-color: var(--accent-22);
}
.me-online { color: var(--green); font-weight: 700; }
#me-content a { color: var(--accent); text-decoration: none; }
#me-content a:hover { text-decoration: underline; }

.prog-block { margin-top: 8px; }

/* Détail des tours dans le profil */
.tower-details { margin: 4px 0; font-size: 12px; }
.tower-details summary {
  cursor: pointer;
  padding: 2.5px 0;
  color: var(--text);
  list-style: none;
}
.tower-details summary::-webkit-details-marker { display: none; }
.tower-details summary::after { content: ' ▾'; color: var(--muted); }
.tower-details[open] summary::after { content: ' ▴'; }
.tower-row {
  padding: 2px 0 2px 14px;
  color: var(--muted);
  font-size: 11.5px;
}
.tower-row.ok { color: var(--text); }
.prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2.5px 0;
  font-size: 12px;
}
.prog-label { flex-shrink: 0; width: 112px; }
.prog-bar {
  flex: 1;
  height: 7px;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  overflow: hidden;
}
.prog-bar div {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--green));
  border-radius: 4px;
  transition:width var(--t-moyen) var(--e-sortie);
  box-shadow: 0 0 6px var(--accent-45);
}
.prog-val { color: var(--muted); flex-shrink: 0; font-size: 11px; }

#me-chart, #history-chart {
  width: 100%;
  height: 64px;
  margin-top: 10px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
}

/* ---- Joueurs ---- */
.player-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: var(--radius-s);
  cursor: pointer;
  font-size: 13px;
  transition:background var(--t-instant), transform var(--t-instant);
}
.player-row:hover { background: var(--panel2); transform: translateX(2px); }
.player-row.following {
  background: var(--accent-soft);
  outline: 1px solid var(--accent-45);
}

.player-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 8px currentColor;
}
.row-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(147, 166, 173, 0.45);
  flex-shrink: 0;
  object-fit: cover;
  background: #222;
}
.player-meta { flex: 1; min-width: 0; }
.player-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-sub { color: var(--muted); font-size: 11px; line-height: 1.5; }

.follow-btn {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 4px;
  font-family: var(--m);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 5px 10px;
  cursor: pointer;
  /* Propriétés explicites plutôt que « all » : ce bouton vit dans une liste
     redessinée à chaque rafraîchissement, et « all » animait aussi la position
     et la taille recalculées, d'où des micro-saccades. */
  transition: border-color var(--t-court), color var(--t-court), background var(--t-court);
}
.follow-btn:hover, .player-row.following .follow-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

/* ---- Classements ---- */
.rank-block {
  border-radius: var(--radius-s);
  transition:background var(--t-court);
}
.rank-block[open] { background: rgba(0, 0, 0, 0.22); }
.rank-block summary {
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  padding: 6px 7px;
  list-style: none;
  user-select: none;
  border-radius: var(--radius-s);
  -webkit-tap-highlight-color: transparent;
  transition:background var(--t-instant);
}
.rank-block summary::-webkit-details-marker { display: none; }
.rank-block summary::before { content: '▸ '; color: var(--muted); }
.rank-block[open] summary::before { content: '▾ '; }
.rank-block summary:hover { background: var(--panel2); }
.rank-body { padding: 0 8px 8px 20px; }

.today-title { font-size: 12px; color: var(--gold); margin-bottom: 3px; font-weight: 700; }
.today-row { font-size: 12px; padding: 1.5px 0; }
#today-list:not(:empty) { margin-bottom: 10px; }

#compare-open { color: var(--accent); text-decoration: none; font-size: 12px; font-weight: 600; }
#compare-open:hover { text-decoration: underline; }

/* ---- Collectables ---- */
#search, #hunt {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 7px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition:border-color var(--t-court), box-shadow var(--t-court);
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#hunt { margin-top: 4px; margin-bottom: 0; }
#hunt:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-15); }

.search-hit {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  font-size: 12px;
  border-radius: var(--radius-s);
  cursor: pointer;
}
.search-hit:hover { background: var(--panel2); }

#hunt-row, #nearby-row { margin: 8px 0; font-size: 12px; color: var(--muted); }
#nearby-row select, #replay-bar select {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 5px 7px;
  font-size: 12px;
  outline: none;
}

.cat-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 7px;
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  border-radius: var(--radius-s);
  transition:background var(--t-instant);
}
.cat-row:hover { background: var(--panel2); }
.cat-row input { accent-color: var(--accent); }

/* « Où poser ma base » : cases de ressources + emplacements proposés */
#bs-res input, #bs-ft { accent-color: var(--accent); }
#bs-run {
  padding: 8px 12px;
  /* --border n'existe pas dans ce fichier : le bouton se retrouvait SANS
     bordure. La variable de trait du site est --line. */
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--panel2);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:border-color var(--t-instant), filter var(--t-instant);
}
#bs-run:hover { border-color: var(--accent); }
#bs-run:disabled { opacity: 0.6; cursor: default; }
.bs-spot {
  padding: 6px 8px;
  margin-top: 4px;
  border-radius: var(--radius-s);
  background: var(--panel2);
  cursor: pointer;
  transition:background var(--t-instant), transform var(--t-instant);
}
.bs-spot:hover { background: rgba(85, 217, 122, 0.16); transform: translateX(2px); }
.cat-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.4);
  flex-shrink: 0;
}
.cat-icon { width: 19px; height: 19px; flex-shrink: 0; }
.cat-label { flex: 1; }
.cat-count { color: var(--muted); font-size: 11px; }

/* ---- Zones PVP : étiquette au centre du cercle d'avertissement ---- */
.pvp-zone-label {
  background: none;
  border: none;
  box-shadow: none;
  color: #f0685f;
  font-weight: 800;
  font-size: 11px;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}
.pvp-zone-label::before { display: none; }
/* Zone du roi : même famille d'étiquette, en doré */
.koth-label {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--gold, #f0a23c);
  font-weight: 800;
  font-size: 11px;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}
.koth-label::before { display: none; }

/* ---- Mission d'événement : points de passage numérotés sur la carte ---- */
.mission-pt .num {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(6, 17, 24, 0.85);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

/* ---- Chasse au champion : cible pulsante sur le joueur révélé ---- */
.chase-cible { pointer-events: none; }
.chase-cible .cercle {
  position: absolute;
  left: -19px;
  top: -19px;
  width: 38px;
  height: 38px;
  border: 2px solid #f0685f;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(240, 104, 95, 0.55);
  animation: chasse-pulse 1.3s ease-out infinite;
}
.chase-cible .pointe {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0685f;
  box-shadow: 0 0 6px #f0685f;
}
.chase-cible .nom {
  position: absolute;
  top: 22px;
  left: 0;
  transform: translateX(-50%);
  color: #ffd7d3;
  font-weight: 800;
  font-size: 11px;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
}
@keyframes chasse-pulse {
  0% { transform: scale(0.7); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0.15; }
}

/* ---- Chat ---- */
.chat-warning {
  background: linear-gradient(160deg, #3a2d10, #2e2410);
  border: 1px solid rgba(240, 162, 60, 0.35);
  border-radius: var(--radius-s);
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.55;
  margin-bottom: 9px;
  color: #ecd58c;
}
#chat-auth input, #chat-text {
  width: 100%;
  padding: 9px 11px;
  margin-bottom: 7px;
  border-radius: var(--radius-s);
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  font-size: 13px;
  outline: none;
  transition:border-color var(--t-court);
}
#chat-auth input:focus, #chat-text:focus { border-color: var(--accent); }
.chat-btns { display: flex; gap: 7px; }
.chat-btns button, #chat-send {
  padding: 9px 13px;
  border: none;
  border-radius: var(--radius-s);
  background: linear-gradient(160deg, var(--accent), #e08a24);   /* le dégradé de la vitrine */
  color: #160c00;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  transition:filter var(--t-court), transform var(--t-instant);
}
.chat-btns button:hover, #chat-send:hover { filter: brightness(1.12); }
.chat-btns button:active, #chat-send:active { transform: scale(0.97); }
#chat-register { background: linear-gradient(160deg, var(--green), #37b25e); }
#chat-auth-msg { font-size: 12px; margin-top: 6px; min-height: 15px; }

#chat-messages {
  max-height: 230px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 9px 10px;
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.55;
}
.chat-msg { padding: 1.5px 0; word-wrap: break-word; }
.chat-msg .chat-author { font-weight: 700; }
.chat-msg .chat-time { color: var(--muted); font-size: 10px; margin-right: 4px; }
.chat-input-row { display: flex; gap: 7px; }
.chat-input-row input { margin-bottom: 0; flex: 1; }
#chat-section a { color: var(--accent); }
#chat-channels { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.chpill { position: relative; padding: 3px 10px; border-radius: 3px; background: var(--panel2);
  border: 1px solid var(--line); font-size: 11.5px; cursor: pointer; user-select: none;
  transition: border-color var(--t-court), color var(--t-court), background var(--t-court); }
.chpill:hover { border-color: var(--accent); }
.chpill.on { border-color: var(--accent); background: var(--accent-15); }
.chpill.off { opacity: 0.45; cursor: not-allowed; }
.chpill .dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 6px var(--gold); }
#chat-to-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
#chat-to { flex: 1; padding: 5px 8px; background: var(--panel2); border: 1px solid var(--line);
  border-radius: var(--radius-s); color: inherit; font-size: 12px; margin-bottom: 0; }
.chat-msg.whisp { color: #c9a7f5; }
.chat-msg .chat-chan { opacity: 0.75; margin-right: 3px; }

/* ---- Activité ---- */
.act-row { font-size: 12px; padding: 2.5px 0; }
.act-time { color: var(--muted); font-size: 10px; }
.act-join { color: var(--green); }
.act-leave { color: var(--red); }
.act-record { color: var(--gold); }

/* ---- Pied de la barre ---- */
#sidebar footer {
  padding: 4px 18px 12px;
  font-size: 12.5px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  color: var(--muted);
  transition:color var(--t-instant);
}
.toggle:hover { color: var(--text); }
.toggle input { accent-color: var(--accent); }
#last-update { color: var(--muted); font-size: 11px; margin-top: 3px; }

/* ================================ CARTE ================================== */

#map { flex: 1; background: #061118; }
.leaflet-container { background: #061118; font-family: inherit; }

.leaflet-control-zoom { border: none !important; box-shadow: var(--shadow) !important; }
.leaflet-control-zoom a {
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid var(--line) !important;
  width: 34px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 16px !important;
}
.leaflet-control-zoom a:first-child { border-radius: var(--radius) var(--radius) 0 0 !important; }
.leaflet-control-zoom a:last-child { border-radius: 0 0 var(--radius) var(--radius) !important; }
.leaflet-control-zoom a:hover { background: var(--panel2) !important; color: var(--accent) !important; }

/* Marqueurs joueurs */
.player-icon .heading {
  position: absolute;
  width: 54px; height: 54px;
  pointer-events: none;
  transition:transform var(--t-moyen) var(--e-sortie);
}
.player-icon .heading .tip {
  position: absolute;
  left: 50%; top: 2px;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 11px solid #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.player-icon .face {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 12px 3px rgba(0, 0, 0, 0.6);
  object-fit: cover;
  background: #222;
}
.player-icon .dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.6);
  transform: translate(-50%, -50%);
  position: absolute;
}
.player-icon .label {
  position: absolute;
  transform: translate(-50%, 18px);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
  pointer-events: none;
}

.offline-icon .dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #666;
  background: #444;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.offline-icon .label {
  position: absolute;
  transform: translate(-50%, 10px);
  white-space: nowrap;
  font-size: 11px;
  color: #999;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

.guild-icon .flag {
  position: absolute;
  transform: translate(-50%, -60%);
  /* l'icône OFFICIELLE du Palbox du jeu (base-icon.webp, og:image de sa page
     paldb) a remplacé l'emoji drapeau retiré avec tous les autres */
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}
.guild-icon .label {
  position: absolute;
  transform: translate(-50%, 8px);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
  pointer-events: none;
}

.admin-marker .pin {
  position: absolute;
  transform: translate(-50%, -80%);
  font-size: 26px;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.85));
  animation: pin-bounce 2.2s ease-in-out infinite;
}

/* Boss alphas apparus en direct */
.alpha-marker .pin {
  position: absolute;
  transform: translate(-50%, -60%);
  font-size: 24px;
  filter: drop-shadow(0 0 6px rgba(240, 104, 104, 0.9)) drop-shadow(0 1px 4px rgba(0, 0, 0, 0.8));
}
.alpha-marker .label {
  position: absolute;
  transform: translate(-50%, 10px);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  color: #ef6a6a;
  text-shadow: 0 1px 3px #000, 0 0 7px #000;
  pointer-events: none;
}
@keyframes pin-bounce {
  0%, 100% { transform: translate(-50%, -80%); }
  50% { transform: translate(-50%, -95%); }
}
.admin-marker .label {
  position: absolute;
  transform: translate(-50%, 6px);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 8px;
  border-radius: 3px;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

.replay-ghost .dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 2px solid #fff;
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.replay-ghost .label {
  position: absolute;
  transform: translate(-50%, 9px);
  white-space: nowrap;
  font-size: 11px;
  color: #ddd;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}

.collectible-icon { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8)); }
.grid-label { color: rgba(255, 255, 255, 0.35); font-size: 11px; white-space: nowrap; }

/* Popups Leaflet */
.leaflet-popup-content-wrapper {
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.leaflet-popup-tip { background: var(--panel); }
.leaflet-popup-content { font-size: 13px; line-height: 1.65; margin: 12px 16px; }
.leaflet-popup-content b { color: var(--accent); }
.palbox-link { color: var(--accent); text-decoration: none; }
.palbox-link:hover { text-decoration: underline; }
a.leaflet-popup-close-button { color: var(--muted) !important; }

/* Horloge du monde */
.world-clock {
  background: rgba(6, 17, 24, 0.82);
  backdrop-filter: blur(6px);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius);
  /* une lecture d'instrument : le mono du site (une seule graisse embarquée, 500) */
  font-family: var(--m);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  pointer-events: none;
}

/* Mini-toast */
#mini-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  color: var(--text);
  padding: 11px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  font-size: 13px;
  z-index: var(--z-toast);
  box-shadow: var(--shadow);
  animation: toast-in 0.25s ease;
  max-width: 90vw;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

/* Barre de replay */
#replay-bar {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(6, 17, 24, 0.82);
  backdrop-filter: blur(8px);
  padding: 11px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  z-index: var(--z-dialogue);
  box-shadow: var(--shadow);
}
#replay-bar[hidden] { display: none; }
#replay-play {
  background: linear-gradient(160deg, var(--accent), #e08a24);
  border: none;
  border-radius: var(--radius-s);
  width: 36px; height: 32px;
  font-size: 14px;
  cursor: pointer;
  color: #160c00;
}
#replay-slider { width: 220px; accent-color: var(--accent); }
#replay-time { font-size: 13px; font-weight: 700; min-width: 44px; }

/* ============================ SUPERPOSITIONS ============================= */

#palbox-overlay, #compare-overlay {
  position: fixed;
  inset: 0;
  background: rgba(4, 12, 17, 0.72);
  backdrop-filter: blur(3px);
  z-index: var(--z-voile);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
#palbox-overlay[hidden], #compare-overlay[hidden] { display: none; }

.pb-card {
  background: var(--panel);
  border: 1px solid var(--line);
  /* grand panneau : la marche --r-s du socle, comme le tiroir mobile */
  border-radius: var(--r-s);
  width: 100%;
  max-width: 430px;
  max-height: 82vh;
  max-height: 82dvh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65);
  animation: card-in 0.22s ease;
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.pb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
}
.pb-head h3 { font-size: 16px; font-weight: 800; }
#pb-close, #compare-close {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  width: 30px; height: 30px;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  transition: color var(--t-court), border-color var(--t-court);
}
#pb-close:hover, #compare-close:hover { color: var(--text); border-color: var(--accent); }
#pb-content { overflow-y: auto; padding: 10px 18px; }
#pb-content h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--accent);
  margin: 12px 0 6px;
  font-weight: 800;
}
.pb-pal {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5.5px 9px;
  font-size: 13px;
  border-radius: var(--radius-s);
}
.pb-pal:nth-child(odd) { background: rgba(0, 0, 0, 0.25); }
.pb-lvl { color: var(--muted); white-space: nowrap; }
#pb-footer { padding: 10px 18px; font-size: 11px; border-top: 1px solid var(--line); color: var(--muted); }

#compare-overlay select {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: 8px;
  font-size: 13px;
  outline: none;
}
#compare-content { padding: 12px 18px 18px; overflow-y: auto; }
.cmp-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  padding: 7px 4px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}
.cmp-row span:first-child { text-align: right; }
.cmp-label { color: var(--muted); font-size: 12px; min-width: 112px; text-align: center; }
.cmp-win { color: var(--green); font-weight: 800; text-shadow: 0 0 12px rgba(85, 217, 122, 0.35); }

/* ============================== ANIMATIONS =============================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Entrée en cascade des sections au chargement */
#sidebar header { animation: fadeUp 0.4s ease backwards; }
#sidebar section { animation: fadeUp 0.45s ease backwards; }
#sidebar section:nth-of-type(1) { animation-delay: 0.05s; }
#sidebar section:nth-of-type(2) { animation-delay: 0.1s; }
#sidebar section:nth-of-type(3) { animation-delay: 0.15s; }
#sidebar section:nth-of-type(4) { animation-delay: 0.2s; }
#sidebar section:nth-of-type(5) { animation-delay: 0.25s; }
#sidebar section:nth-of-type(6) { animation-delay: 0.3s; }
#sidebar section:nth-of-type(7) { animation-delay: 0.35s; }
/* Depuis le réagencement de la barre, les positions 8 et 9 (serveur, activité)
   sont des sections visibles : sans délai elles surgiraient avant celles du
   dessus et inverseraient le sens de lecture de la cascade. Le footer reste
   le dernier à apparaître pour la même raison. */
#sidebar section:nth-of-type(8) { animation-delay: 0.4s; }
#sidebar section:nth-of-type(9) { animation-delay: 0.45s; }
#sidebar footer { animation: fadeUp 0.45s ease 0.5s backwards; }

/* Sections qui se soulèvent légèrement au survol */
#sidebar section { transition:transform var(--t-court) var(--e-sortie), box-shadow var(--t-court) var(--e-sortie); }
#sidebar section:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }

/* ---- Animations en boucle : mise en pause hors écran --------------------
   Cinq animations tournent en permanence sur la carte (marqueur épinglé, point
   de statut, onde radar autour de CHAQUE joueur connecté, scintillement,
   drapeaux de guilde). Une carte reste ouverte pendant toute une session de
   jeu, souvent dans un onglet d'arrière-plan : elles consommaient alors de la
   batterie pour une animation que personne ne regarde. La classe est posée par
   app.js sur visibilitychange.
   On PAUSE (animation-play-state) au lieu de couper : l'animation reprend
   exactement où elle en était, sans saut visible au retour. */
html.hors-vue *, html.hors-vue *::before, html.hors-vue *::after {
  animation-play-state: paused !important;
}

/* Point de statut qui pulse */
.status.online::before { animation: dot-pulse 2.2s ease-out infinite; }
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(85, 217, 122, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(85, 217, 122, 0); }
  100% { box-shadow: 0 0 0 0 rgba(85, 217, 122, 0); }
}

/* Onde radar autour des joueurs EN LIGNE sur la carte */
.player-icon:not(.offline-icon):not(.replay-ghost)::after {
  content: '';
  position: absolute;
  left: -22px; top: -22px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--accent-45);
  animation: radar 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes radar {
  0% { transform: scale(0.45); opacity: 0.9; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* GLISSEMENT des marqueurs : les joueurs se déplacent en douceur entre deux
   mises à jour au lieu de se téléporter (suspendu pendant les zooms) */
.leaflet-marker-icon.player-icon { transition:transform var(--t-long) var(--e-sortie); }
.leaflet-marker-icon.replay-ghost { transition:transform var(--t-court) var(--e-sortie), opacity var(--t-court); }
.leaflet-zoom-anim .leaflet-marker-icon,
.no-marker-anim .leaflet-marker-icon { transition:none !important; }

/* Nouveaux messages et événements qui apparaissent en fondu */
.chat-msg { animation: fadeUp 0.25s ease backwards; }
.act-row { animation: fadeUp 0.3s ease backwards; }
.search-hit { animation: fadeUp 0.2s ease backwards; }

/* Reflet qui balaie les barres de progression */
.prog-bar div { position: relative; overflow: hidden; }
.prog-bar div::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }

/* Drapeaux de guilde qui flottent doucement */
.guild-icon .flag { animation: flag-float 3.4s ease-in-out infinite; }
@keyframes flag-float {
  0%, 100% { transform: translate(-50%, -60%); }
  50% { transform: translate(-50%, -70%); }
}

/* Accessibilité : si l'utilisateur demande moins de mouvement, on coupe
   uniquement les boucles décoratives, les fondus et glissements restent */
@media (prefers-reduced-motion: reduce) {
  .player-icon::after,
  .status.online::before,
  .prog-bar div::after,
  .guild-icon .flag,
  .admin-marker .pin {
    animation: none !important;
  }
}

/* Poignée du tiroir (mobile uniquement) */
#drawer-handle { display: none; }

/* ====================== NAVIGATION & BOUTONS CARTE ======================= */

.navrow { display: flex; gap: 6px; margin: 8px 0 2px; }
.navpill {
  display: inline-block;
  padding: 7px 13px;
  border-radius: 3px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--m);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 500;
  text-decoration: none;
  transition:border-color var(--t-court), color var(--t-court);
}
.navpill:hover { border-color: var(--accent); color: var(--accent); }
.navpill-gold {
  color: var(--gold);
  border-color: rgba(240, 162, 60, 0.4);
}
.navpill-gold:hover { border-color: var(--gold); background: rgba(240, 162, 60, 0.1); }
.navpill-mini {
  padding: 4px 8px;
  font-size: 11px;
  opacity: 0.55;
  margin-left: auto;   /* poussé à droite, discret */
}
.navpill-mini:hover { opacity: 1; }

/* Repli du panneau latéral (bureau) : languette au bord gauche de la carte */
#sb-toggle {
  position: fixed;
  left: 352px;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-flottant);
  width: 20px;
  height: 64px;
  border: 1px solid rgba(147, 166, 173, 0.22);
  border-left: none;
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
  background: rgba(6, 17, 24, 0.82);
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
  padding: 0;
  transition:left var(--t-court) var(--e-sortie), background var(--t-court);
}
#sb-toggle:hover { background: var(--panel); }
body.nosb #sidebar { margin-left: -352px; }
body.nosb #sb-toggle { left: 0; border-radius: 0 var(--radius-s) var(--radius-s) 0; }

/* Barre de navigation horizontale flottante en haut de la carte.
   Même langage que la vitrine et les guides : UNE plaque carrée (--radius),
   liens mono discrets sans bordure propre, survol ambre. La capsule arrondie
   à 24 px et son fond d'avant-refonte dataient de l'ancienne identité. */
#topbar {
  position: fixed;
  top: 12px;
  left: calc(50% + 176px);      /* centré sur la zone carte (barre latérale = 352px) */
  transform: translateX(-50%);
  z-index: var(--z-flottant);
  display: flex;
  gap: 2px;
  align-items: center;
  background: rgba(6, 17, 24, 0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(147, 166, 173, 0.22);
  border-radius: var(--radius);
  padding: 4px;
  transition:top var(--t-court) var(--e-sortie), left var(--t-court) var(--e-sortie);
}
body.nosb #topbar { left: 50%; }
body.notb #topbar { top: -60px; }
/* Fenêtre étroite avec barre latérale ouverte (701-970 px environ) : la barre
   dépassait la zone carte, chevauchait la barre latérale ET sortait de
   l'écran, surtout sur une carte cliente où « Changer de carte » l'élargit.
   Plafonnée à la zone carte, elle défile en dedans comme en mobile. */
#topbar {
  max-width: calc(100vw - 368px);   /* 352 de barre latérale + 8 px de marge par côté */
  overflow-x: auto;
  scrollbar-width: none;
}
#topbar::-webkit-scrollbar { display: none; }
body.nosb #topbar { max-width: calc(100vw - 16px); }
/* dans la plaque, les liens perdent leur bordure/fond propres : c'est la
   plaque qui porte le cadre, comme les onglets de la vitrine */
#topbar .navpill {
  background: none;
  border: none;
  padding: 8px 13px;
  border-radius: var(--radius-s);
  transition:color var(--t-court), background var(--t-court);
}
#topbar .navpill:hover { color: var(--accent); background: var(--accent-10); }
/* l'engrenage admin : séparé du reste par un filet, toujours discret */
#topbar .navpill-mini {
  margin-left: 4px;
  padding: 8px 10px;
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}

/* Languette de repli de la barre du haut (même esprit que #sb-toggle) */
#tb-toggle {
  position: fixed;
  top: 48px;
  left: calc(50% + 176px);
  transform: translateX(-50%);
  z-index: var(--z-sous-flottant);
  width: 46px;
  height: 17px;
  border: 1px solid rgba(147, 166, 173, 0.22);
  border-top: none;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  background: rgba(6, 17, 24, 0.82);
  color: var(--text);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition:top var(--t-court) var(--e-sortie), left var(--t-court) var(--e-sortie), background var(--t-court);
}
#tb-toggle:hover { background: var(--panel); }
body.nosb #tb-toggle { left: 50%; }
body.notb #tb-toggle { top: 0; }

/* Recentrer sur les joueurs : bouton flottant en bas à droite de la carte */
#center-players {
  position: fixed;
  right: 14px;
  bottom: 18px;
  z-index: var(--z-flottant);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(147, 166, 173, 0.22);
  background: rgba(6, 17, 24, 0.82);
  color: var(--accent);   /* teinte l'icône SVG de visée (currentColor) */
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition:transform var(--t-court), border-color var(--t-court);
}
#center-players:hover { transform: scale(1.08); border-color: var(--accent); }

/* Bandeau de la carte d'ESSAI (2026-09-18) : temps restant et lien d'abonnement,
   construit par app.js (majBandeauEssai) quand /api/state porte `essai`. En bas
   à gauche de la zone carte, le seul coin libre : le zoom est en haut à gauche,
   l'horloge en haut à droite, la barre de navigation en haut au centre, le
   recentrage en bas à droite. Discret par défaut (plaque sombre, texte
   secondaire), AMBRE sous 12 h : c'est le moment où il faut le voir. */
#essai-bandeau {
  position: fixed;
  left: calc(352px + 14px);          /* barre latérale = 352px */
  bottom: 18px;
  z-index: var(--z-sous-flottant);
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 352px - 14px - 74px);   /* s'arrête avant #center-players */
  padding: 6px 6px 6px 12px;
  background: rgba(6, 17, 24, 0.82);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(147, 166, 173, 0.22);
  border-radius: var(--radius);
  box-shadow: var(--e-1);
  color: var(--muted);
  font-family: var(--m);
  font-size: 12px;
  letter-spacing: .04em;
  line-height: 1.35;
  transition:left var(--t-court) var(--e-sortie), border-color var(--t-court), color var(--t-court);
}
#essai-bandeau[hidden] { display: none; }
/* barre latérale repliée : le bouton « Cookies » (consent.js) occupe déjà le
   coin bas gauche de la fenêtre, le bandeau se pose juste au-dessus */
body.nosb #essai-bandeau { left: 14px; bottom: 42px; max-width: calc(100vw - 14px - 74px); }
#essai-bandeau .essai-texte { min-width: 0; }
#essai-bandeau .essai-sep { color: var(--panel3); }
#essai-bandeau .essai-lien { color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
#essai-bandeau .essai-lien:hover { color: var(--accent); }
#essai-bandeau .essai-fermer {
  flex: none;
  width: 26px;
  height: 26px;
  margin-left: 2px;
  border: none;
  border-radius: var(--radius-s);
  background: none;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
#essai-bandeau .essai-fermer:hover { background: var(--accent-10); color: var(--accent); }
#essai-bandeau .essai-lu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#essai-bandeau.urgent { border-color: var(--accent); color: var(--accent); background: rgba(28, 18, 4, 0.9); }
#essai-bandeau.urgent .essai-lien { color: var(--accent); }
#essai-bandeau.urgent .essai-sep { color: var(--accent); opacity: .5; }
/* la barre de replay occupe le bas de la carte (et, sur mobile, exactement la
   place du bandeau) : pendant un replay, le bandeau s'efface */
#replay-bar:not([hidden]) ~ #essai-bandeau { display: none; }

/* ================================ MOBILE ================================= */

@media (max-width: 700px) {
  #sb-toggle { display: none; }        /* le tiroir mobile remplace le repli */
  #topbar, #tb-toggle { left: 50%; }   /* pas de barre latérale : vrai centre */
  /* barre du haut compacte et défilable : jamais de débordement d'écran */
  #topbar {
    top: calc(env(safe-area-inset-top) + 8px);
    max-width: calc(100vw - 16px);
    overflow-x: auto;
    flex-wrap: nowrap;
    padding: 5px 8px;
    gap: 4px;
    scrollbar-width: none;
  }
  #topbar::-webkit-scrollbar { display: none; }
  #topbar .navpill { padding: 5px 8px; font-size: 10px; letter-spacing: .04em;
    white-space: nowrap; }
  #tb-toggle { top: calc(env(safe-area-inset-top) + 40px); }
  body.notb #tb-toggle { top: 0; }
  #center-players { bottom: 74px; }    /* au-dessus de la poignée du tiroir */
  /* bandeau d'essai : au-dessus de la poignée du tiroir, et il s'arrête avant
     le bouton de recentrage (14 + 46 px à droite) : aucun contrôle recouvert.
     Le tiroir ouvert (z-panneau) passe devant lui. */
  #essai-bandeau, body.nosb #essai-bandeau {
    left: 8px; right: 68px; bottom: 66px; max-width: none;
    font-size: 11.5px; padding: 5px 4px 5px 10px;
  }

  #map {
    position: fixed;
    inset: 0;
    height: 100vh;
    height: 100dvh;
  }

  #sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-panneau);
    width: 100%;
    min-width: 0;
    max-height: 80vh;
    max-height: 80dvh;
    border-right: none;
    border-top: 1px solid var(--line);
    /* 22 px datait de l'ancienne identité : --r-s est la marche du socle
       prévue pour les grands panneaux, l'affordance de feuille reste lisible */
    border-radius: var(--r-s) var(--r-s) 0 0;
    background: rgba(6, 17, 24, 0.97);
    backdrop-filter: blur(10px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.55);
    transform: translateY(calc(100% - 58px));
    transition:transform var(--t-court) cubic-bezier(0.25, 1, 0.4, 1);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
    gap: 8px;
  }
  #sidebar.open { transform: translateY(0); }

  #drawer-handle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 16px 11px;
    height: 58px;
    cursor: pointer;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: var(--z-collant);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  #drawer-handle .grip {
    width: 44px; height: 5px;
    border-radius: 3px;
    background: var(--panel3);
  }
  #drawer-summary { font-size: 14px; font-weight: 700; }

  #sidebar header { padding: 2px 16px 10px; }
  #sidebar section { margin: 0 10px; }

  /* Cibles tactiles généreuses */
  .sec-head { padding: 9px 0; font-size: 13px; }
  .sec-head .chev { font-size: 12px; }
  .player-row { padding: 11px 10px; font-size: 14px; }
  .follow-btn { padding: 7px 13px; font-size: 13px; }
  .cat-row { padding: 10px 7px; font-size: 14px; }
  .cat-row input { width: 18px; height: 18px; }
  .rank-block summary { padding: 9px 8px; font-size: 13px; }
  .toggle { padding: 3px 0; }
  #players-section { flex: none; overflow-y: visible; }

  .world-clock { font-size: 13px; padding: 7px 11px; }
  #replay-slider { width: 130px; }
  #replay-bar { bottom: 66px; }

  .leaflet-control-zoom a {
    width: 40px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 19px !important;
  }
}


/* ======================= ANIMATIONS FLUIDITE ============================ */
/* Les joueurs GLISSENT entre deux mises à jour au lieu de se téléporter.
   Coupé pendant le zoom/le drag, sinon Leaflet animerait deux fois. */
.leaflet-marker-icon { transition:transform var(--t-long) var(--e-sortie); }
.leaflet-zoom-anim .leaflet-marker-icon,
.leaflet-dragging .leaflet-marker-icon { transition:none; }

/* Barre du haut : entrée en glissade au chargement */
#topbar { animation: tb-in 0.45s ease backwards; }
@keyframes tb-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-16px); }
  to { opacity: 1; transform: translateX(-50%); }
}
#tb-toggle { animation: fadeUp 0.4s 0.2s ease backwards; }

/* Micro-réactions : pilules et boutons répondent au doigt */
.navpill:active { transform: scale(0.94); }
#center-players { transition:transform var(--t-court), background var(--t-court); }
#center-players:hover { transform: scale(1.1); }
#center-players:active { transform: scale(0.9); }
#sb-toggle, #tb-toggle { transition:left var(--t-court) var(--e-sortie), top var(--t-court) var(--e-sortie), background var(--t-court), transform var(--t-instant); }
#sb-toggle:active, #tb-toggle:active { transform: translateY(-50%) scale(0.9); }
#tb-toggle:active { transform: translateX(-50%) scale(0.9); }

/* Fenêtres palbox / comparateur : apparition en douceur */
.pb-card { animation: pop-in 0.22s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } }

/* Toast et barre de replay */
#mini-toast:not([hidden]) { animation: toast-in var(--t-court) var(--e-sortie); }
/* Une SECONDE définition de l'animation du toast vivait ici : elle écrasait
   l'originale (plus haut dans ce fichier) et oubliait le translate(-50%) du
   centrage, ce qui faisait glisser le message sur le côté à chaque apparition.
   Supprimée. Ne pas la réintroduire : une animation doit être définie une fois. */
#replay-bar:not([hidden]) { animation: fadeUp 0.3s ease; }

@keyframes fadeInBg { from { opacity: 0; } }
#palbox-overlay:not([hidden]), #compare-overlay:not([hidden]) { animation: fadeInBg 0.2s ease; }

/* Lignes de collectables : cascade a la creation + reaction au survol */
.cat-row { animation: fadeUp 0.3s ease backwards; transition:background var(--t-instant), transform var(--t-instant); }
.cat-row:nth-child(-n+9) { animation-delay: calc(0.02s * var(--n, 1)); }
.cat-row:hover { transform: translateX(3px); }

/* Chevrons des sections repliables */
.sec-head .chev { transition:transform var(--t-court) var(--e-sortie); }

/* Champs et boutons du panneau : reponse au focus et au clic */
#sidebar input, #sidebar select { transition:border-color var(--t-court), box-shadow var(--t-court); }
#sidebar input:focus, #sidebar select:focus { box-shadow: 0 0 0 3px var(--accent-15); }
#sidebar button { transition:transform var(--t-instant), filter var(--t-court), background var(--t-court); }
#sidebar button:hover { filter: brightness(1.1); }
#sidebar button:active { transform: scale(0.96); }

/* Bascules de sections : connexion chat <-> chat, profil qui apparaît */
#chat-box:not([hidden]), #chat-auth:not([hidden]),
#me-section:not([hidden]), #chat-passform:not([hidden]) { animation: fadeUp 0.3s ease; }

/* Popups Leaflet : apparition en douceur */
.leaflet-popup { animation: pop-in 0.2s ease; }

/* Menus natifs (Je suis..., rayons, vitesse replay) : halo au focus */
select { transition:border-color var(--t-court), box-shadow var(--t-court); }
select:focus { box-shadow: 0 0 0 3px var(--accent-15); }

/* Résultats de recherche : chaque ligne glisse en place */
#search-results > * { animation: fadeUp 0.2s ease backwards; }

/* Interrupteurs du pied de barre : petit décalage au survol */
.toggle { transition:transform var(--t-instant); }
.toggle:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  .leaflet-marker-icon { transition:none !important; }
  #topbar, #tb-toggle, .pb-card, #mini-toast, #replay-bar { animation: none !important; }
}

/* ======================= MODE STREAM (?stream) =========================== */
/* Vue plein écran sans interface, pour overlay OBS ou écran secondaire.
   /?stream = suit tous les joueurs ; /?stream&follow=Pseudo = suit un joueur. */
body.stream #sidebar,
body.stream #topbar,
body.stream #tb-toggle,
body.stream #sb-toggle,
body.stream #center-players,
body.stream #lang-toggle,
body.stream #replay-bar,
body.stream #essai-bandeau,
body.stream #drawer-handle { display: none !important; }
body.stream #map { position: fixed; inset: 0; }
body.stream::after {
  content: 'palmaplive.com';
  position: fixed;
  right: 14px;
  bottom: 12px;
  z-index: var(--z-flottant);
  font: 600 13px 'Archivo', system-ui, sans-serif;
  color: rgba(228, 237, 240, 0.55);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
/* étiquettes de joueurs plus lisibles à distance de canapé/stream */
body.stream .leaflet-marker-icon .label { font-size: 15px; }

/* Timers de reapparition (popup) + evenements du serveur (barre laterale) */
.hv-btn{display:inline-block;margin-top:4px;font-weight:600}
#events-list .ev-row{margin-bottom:7px;line-height:1.35}