/* Patine'N'Rythme — styles des pages applicatives (spots, connexion, admin).
   Bâti sur les tokens de style.css (--magenta, --cyan, --ink, --grey…). */

/* `hidden` doit gagner, partout.
   L'attribut ne vaut qu'un `display: none` de la feuille du navigateur : la
   moindre classe qui pose un `display` le bat, et l'element reste visible.
   C'est arrive deux fois deja — d'ou les rustines `.modal-backdrop[hidden]` et
   `.addr-results[hidden]` plus bas, que cette regle rend inutiles — puis une
   troisieme sur un `.btn` masque. Une regle pour toutes, plutot qu'une par
   composant le jour ou on s'en apercoit. */
[hidden] { display: none !important; }

:root {
  --slalom: #ec008c; --street: #a855f7; --skatepark: #fb8c00;
  --pumptrack: #34c759; --cruising: #00b3d3; --meetingPoint: #f5c518;
  --ink-hi: #241f30;
  --good: #34c759; --warn: #fb8c00; --bad: #ff453a;
}

/* ---------- App nav ---------- */
.app-nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 20px;
  background: rgba(16, 14, 20, 0.9); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.app-nav .logo { display: flex; align-items: center; gap: 10px; font-weight: 800;
  text-decoration: none; color: var(--white); font-size: 1rem; }
.app-nav .logo img { width: 26px; height: 26px; border-radius: 7px; }
.app-nav .tabs { display: flex; gap: 4px; }
.app-nav .tabs a { font-size: 0.9rem; font-weight: 600; color: var(--grey);
  text-decoration: none; padding: 7px 13px; border-radius: 9px; }
.app-nav .tabs a:hover { color: var(--white); }
.app-nav .tabs a.on { color: var(--white); background: var(--ink-hi); }
.app-nav .spacer { flex: 1; }
.avatar { width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: linear-gradient(150deg, var(--magenta), var(--cyan));
  display: grid; place-items: center; font-size: 0.78rem; font-weight: 700;
  color: #fff; border: 0; cursor: pointer; }

/* ---------- Buttons (compléments de style.css) ---------- */
.btn.sm { padding: 8px 14px; font-size: 0.84rem; border-radius: 10px; }
.btn.grad { background: linear-gradient(100deg, var(--magenta), var(--cyan));
  color: #fff; box-shadow: 0 10px 26px -12px rgba(236, 0, 140, 0.6); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 15px; height: 15px; }
.btn.approve { background: rgba(52, 199, 89, 0.16); color: var(--good); }
.btn.reject { background: rgba(255, 69, 58, 0.14); color: var(--bad); }
.google-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 11px; width: 100%; background: #fff; color: #1f1f1f; font-weight: 600;
  font-size: 0.98rem; border: 0; border-radius: 12px; padding: 14px; cursor: pointer;
  font-family: inherit; }

/* Le bouton Apple sur fond sombre : Apple impose le noir ou le blanc, sans
   dégradé ni couleur de marque, et le logo doit rester seul devant le texte. */
.apple-btn { display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; width: 100%; background: #000; color: #fff; font-weight: 600;
  font-size: 0.98rem; border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 12px; padding: 14px; cursor: pointer; font-family: inherit; }
.apple-btn svg { margin-top: -2px; }   /* la pomme porte haut, on la recentre */

/* Deux guichets : une séparation qui dit « ou », plutôt qu'un empilement muet. */
.auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0;
  color: #6f6a7c; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px;
  background: rgba(255, 255, 255, 0.12); }

/* ---------- Chips ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; font-size: 0.82rem; font-weight: 600; color: var(--grey);
  background: var(--ink-card); border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; white-space: nowrap; }
.chip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.chip.on { color: #fff; border-color: transparent; }

/* ---------- Spots layout (Direction A) ---------- */
.spots-shell { display: grid; grid-template-columns: 1fr 380px;
  height: calc(100vh - 108px); min-height: 480px; }
#map { height: 100%; background: #0d1016; }

/* Aucun filtre sur les tuiles : le fond Esri "Dark Gray" est sombre de
   naissance. Assombrir un fond clair au filtre CSS (essayé avec les tuiles
   OpenStreetMap, comme l'app Android) donnait un rendu délavé qui jurait
   avec la charte. */
.sidebar { border-left: 1px solid rgba(255, 255, 255, 0.08); overflow-y: auto;
  background: var(--ink); }
.sidebar-head { padding: 14px 16px 8px; font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey);
  position: sticky; top: 0; background: var(--ink); }
.spotrow { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05); cursor: pointer;
  width: 100%; text-align: left; background: none; border-left: 0; border-right: 0;
  border-top: 0; color: inherit; font: inherit; }
.spotrow:hover { background: var(--ink-soft); }
.kind-ic { width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 0.7rem; font-weight: 800;
  border: 2px solid transparent; }
.kind-ic.mine { border-color: var(--cyan); }
.spotrow .meta { min-width: 0; flex: 1; }
.spotrow .name { font-size: 0.9rem; font-weight: 600; }
.spotrow .sub { font-size: 0.76rem; color: var(--grey); margin-top: 2px;
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.68rem;
  font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.badge.cyan { color: var(--cyan); background: rgba(0, 179, 211, 0.14); }
.badge.grey { color: var(--grey); background: rgba(255, 255, 255, 0.06); }
.badge.good { color: var(--good); background: rgba(52, 199, 89, 0.14); }
.badge.warn { color: var(--warn); background: rgba(251, 140, 0, 0.14); }
.badge.bad  { color: var(--bad);  background: rgba(255, 69, 58, 0.14); }

/* Leaflet pins */
.pin-marker { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); display: grid; place-items: center; }
.pin-marker.mine { border-color: var(--cyan); border-width: 3px; }

/* ---------- Modal ---------- */
/* Au-dessus des contrôles internes de Leaflet (boutons de zoom, attribution),
   qui montent jusqu'à z-index 1000 — une modale à 50 apparaissait dessous. */
.modal-backdrop { position: fixed; inset: 0; background: rgba(8, 6, 12, 0.7);
  backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 2000; padding: 20px; }
.modal-backdrop[hidden] { display: none; }
.modal { background: var(--ink-card); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px; width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8); }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); position: sticky;
  top: 0; background: var(--ink-card); }
.modal-head h2 { margin: 0; font-size: 1.15rem; font-weight: 800; }
.modal-body { padding: 20px 22px; }
.icon-btn { width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--ink-hi); color: var(--grey); display: grid; place-items: center; }

/* ---------- Forms ---------- */
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--grey);
  margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; background: var(--ink); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px; padding: 11px 13px; font-size: 0.9rem; color: var(--white);
  font-family: inherit; }
.field textarea { min-height: 70px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.seg { display: flex; flex-wrap: wrap; gap: 7px; }
.seg .opt { font-size: 0.82rem; font-weight: 600; color: var(--grey); padding: 8px 13px;
  border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.seg .opt .swatch { width: 9px; height: 9px; border-radius: 50%; }
.seg .opt.on { color: #fff; border-color: transparent; }
.toggle-row { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.switch-ui { width: 44px; height: 26px; border-radius: 999px; background: var(--ink-hi);
  position: relative; flex: none; border: 0; cursor: pointer; transition: background 0.15s; }
.switch-ui.on { background: var(--magenta); }
.switch-ui i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; transition: left 0.15s; }
.switch-ui.on i { left: 21px; }
.notice { display: flex; gap: 11px; align-items: flex-start;
  background: rgba(0, 179, 211, 0.12); border: 1px solid rgba(0, 179, 211, 0.25);
  border-radius: 13px; padding: 13px 15px; font-size: 0.85rem; color: var(--white); }
.notice svg { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 1px; }

/* Mini-map with a fixed crosshair for placing a spot */
.pick-map { position: relative; height: 220px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1); }
.pick-map .crosshair { position: absolute; top: 50%; left: 50%; z-index: 500;
  transform: translate(-50%, -100%); color: var(--magenta); pointer-events: none;
  filter: drop-shadow(0 0 3px #fff); }
.coords { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.78rem;
  color: var(--grey); margin-top: 8px; }

/* ---------- Recherche d'adresse ---------- */
.addr-row { display: flex; gap: 8px; }
.addr-row input { flex: 1; min-width: 0; }
.addr-row .btn { flex: none; }
.addr-results { margin-top: 8px; background: var(--ink); border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1); overflow: hidden; max-height: 190px;
  overflow-y: auto; }
.addr-results[hidden] { display: none; }
.addr-result { display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--white);
  font: inherit; font-size: 0.84rem; padding: 10px 13px; cursor: pointer; }
.addr-result:last-child { border-bottom: 0; }
.addr-result:hover { background: var(--ink-hi); }
.addr-empty { padding: 11px 13px; font-size: 0.82rem; color: var(--grey); }

/* L'adresse dans la fiche d'un spot, sous le type et les badges. */
.popup-addr { font-size: 0.79rem; color: var(--cyan); margin-bottom: 8px;
  line-height: 1.35; }

/* Modifier / Supprimer, seulement pour qui en a le droit (auteur ou admin). */
.popup-actions { display: flex; gap: 7px; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.1); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: rgba(255, 69, 58, 0.14); }

/* ---------- Admin ---------- */
.admin-wrap { max-width: 1180px; margin: 0 auto; padding: 24px; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 20px; }
.stat { background: var(--ink-card); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 16px 18px; }
.stat .n { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 0.78rem; color: var(--grey); margin-top: 2px; }
.stat .n.warn { color: var(--warn); } .stat .n.good { color: var(--good); } .stat .n.bad { color: var(--bad); }
.admin-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.panel { background: var(--ink-soft); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px; overflow: hidden; }
.panel-head { padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex; align-items: center; justify-content: space-between; }
.panel-head h2 { margin: 0; font-size: 1rem; font-weight: 800; }
.panel-head .count { font-size: 0.74rem; color: var(--grey); background: var(--ink-hi);
  padding: 3px 9px; border-radius: 999px; }
.mod-item, .user-row { padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.72rem;
  color: var(--grey); }
.status-pill { font-size: 0.68rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.status-pill.active { color: var(--good); background: rgba(52, 199, 89, 0.14); }
.status-pill.temp { color: var(--warn); background: rgba(251, 140, 0, 0.14); }
.status-pill.perma { color: var(--bad); background: rgba(255, 69, 58, 0.14); }
.empty { padding: 40px 20px; text-align: center; color: var(--grey); font-size: 0.9rem; }

/* Masqués seulement sur petit écran — voir plus bas. */
.btn-short { display: none; }

@media (max-width: 820px) {
  .spots-shell { grid-template-columns: 1fr; height: auto; }
  #map { height: 46vh; }
  .sidebar { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); max-height: 50vh; }
  .admin-cols { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .admin-wrap { padding: 16px; }
}

/* ---------- Téléphone ----------
   La barre de navigation est une seule rangée flex : sans ces règles, le
   bouton d'action et l'avatar étaient poussés hors de l'écran, rendant
   « Ajouter un spot » et la connexion inaccessibles au doigt. On récupère
   la place en retirant ce qui est redondant (le nom de marque à côté du
   logo, le libellé d'un bouton déjà porté par son icône) plutôt qu'en
   tassant tout. */
@media (max-width: 640px) {
  .app-nav { gap: 10px; padding: 10px 12px; }
  .app-nav .logo .brand-label { display: none; }
  .app-nav .tabs { gap: 2px; }
  .app-nav .tabs a { padding: 7px 10px; font-size: 0.84rem; }
  /* L'icône « + » suffit pour l'ajout ; « Se déconnecter » se raccourcit en
     « Quitter ». `display:none` retirant aussi le texte de l'arbre
     d'accessibilité, les deux boutons portent un `aria-label` qui, lui,
     ne bouge pas. */
  .app-nav .btn .btn-label { display: none; }
  .app-nav .btn.sm { padding: 9px 12px; }
  .btn-short { display: inline; }

  #map { height: 42vh; }
  .sidebar { max-height: none; }
  .chips { padding: 9px 12px; }

  /* La modale prend l'écran : sur 375 px, une carte centrée avec marges
     laissait trop peu de place au formulaire. */
  .modal-backdrop { padding: 0; place-items: stretch; }
  .modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .pick-map { height: 180px; }

  /* Les lignes d'admin passent en colonne : boutons et pastilles ne se
     chevauchent plus, et les e-mails longs ne débordent pas. */
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat .n { font-size: 1.45rem; }
  .mod-item, .user-row { padding: 13px 14px; }
  .mono { word-break: break-all; }
  .panel-head { padding: 12px 14px; }
}

/* Cibles tactiles : sous le doigt, 44 px est le minimum confortable. */
@media (pointer: coarse) {
  .spotrow { padding-top: 13px; padding-bottom: 13px; }
  .chip { padding: 9px 14px; }
}

/* Le point de la position du visiteur, sur la carte des spots. */
.me-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #00b3d3;
  border: 3px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}