/* ╔══════════════════════════════════════════════════════╗
   ║     CROISÉE GPS — Design System                      ║
   ║   Fidèle à l'identité de l'app mobile                ║
   ╚══════════════════════════════════════════════════════╝ */

:root {
  /* Couleurs — identiques à l'app mobile */
  --bg: #0f0f1a;
  --surface: #1a1a2e;
  --surface-2: #15152a;
  --border: #222232;
  --border-soft: #2a2a3e;

  --pink: #e84393;
  --pink-dim: rgba(232, 67, 147, 0.12);
  --violet: #7c3aed;
  --violet-dim: rgba(124, 58, 237, 0.12);
  --green: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.12);
  --amber: #f59e0b;
  --red: #dc2626;
  --red-dim: rgba(220, 38, 38, 0.12);
  --blue: #3b82f6;

  --text: #ffffff;
  --text-soft: #e2e8f0;
  --text-muted: #a0aec0;
  --text-faint: #6b7280;
  --text-ghost: #444455;

  /* Dégradés — doivent rester alignés sur services/Theme.js de l'app Android */
  --grad-entete: linear-gradient(135deg, #231544, #2d1b52, #1a1a2e);
  --grad-barre:  linear-gradient(#161327, #0f0f1a);
  --grad-carte:  linear-gradient(#1e1b34, #16162a);
  --grad-pink:   linear-gradient(135deg, #f857a6, #e84393, #a4318f);
  --grad-violet: linear-gradient(#a78bfa, #7c3aed);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.5);

  --app-max: 520px;
  --nav-h: 64px;
  --header-h: 56px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, .display {
  font-family: 'Sora', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Shell de l'application ─────────────────────────── */
#app {
  max-width: var(--app-max);
  margin: 0 auto;
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 560px) {
  body { background: #07070d; }
  #app {
    box-shadow: 0 0 80px rgba(0,0,0,0.6);
    border-left: 1px solid var(--border);
    border-right: 1px solid var(--border);
  }
}

.screen {
  display: none;
  flex: 1;
  flex-direction: column;
  min-height: 100vh;
  padding-bottom: calc(var(--nav-h) + 12px);
}
.screen.actif { display: flex; }
.screen.sans-nav { padding-bottom: 0; }

/* Écran de chat : hauteur bornée à la fenêtre pour que la liste des messages
   (#chat-messages) défile EN INTERNE plutôt que d'allonger toute la page —
   sinon le saut automatique vers le dernier message à l'ouverture ne peut pas
   fonctionner (le div ne déborde jamais). max-height (et non height) car
   l'écran est un enfant flex de #app : flex:1 dicte sa hauteur et ignore
   height, mais max-height plafonne toujours. Le min-height:0 lève le blocage
   flexbox (min-height:auto par défaut) qui empêcherait l'enfant flex:1 de
   rétrécir et donc de défiler. Vérifié en navigateur : sans max-height,
   l'écran mesurait 3138px pour une fenêtre de 730px. */
#ecran-chat.actif {
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
}
#chat-messages { min-height: 0; }

/* ── Header de section ──────────────────────────────── */
.entete {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--grad-entete);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}
.entete h1 { font-size: 17px; color: var(--text); flex: 1; }

/* Bandeau des compteurs du jour, sous la bannière de chaque onglet.
   Fin et discret : il informe sans manger la place du contenu. Masqué par
   défaut — c'est majQuotasEntete() (js/main.js) qui l'affiche, et seulement
   quand le membre a réellement une limite. */
.entete-quotas {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  font-size: 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.entete-quotas .eq-txt { flex: 1; color: var(--text-muted); }
.entete-quotas .eq-n { color: #ef4444; font-weight: 800; }
.entete-quotas .eq-lien {
  background: none;
  border: none;
  padding: 0;
  color: var(--pink);
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.entete-icone-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: transparent;
  border: none;
  color: var(--text-muted);
}
.entete-icone-btn:active { background: rgba(255,255,255,0.06); }

/* ── Navigation basse (mobile) ──────────────────────── */
.nav-basse {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--app-max);
  height: var(--nav-h);
  background: var(--grad-barre);
  border-top: 1px solid var(--border);
  display: flex;
  z-index: 30;
}
.nav-item {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px;
  background: none; border: none;
  /* Onglet au repos : libellé en bleu (l'onglet actif passe en rose). */
  color: #3b82f6;
  font-size: 10.5px;
  font-weight: 600;
  padding: 6px 0;
}
.nav-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
/* Icônes emoji de la navigation : éteintes (grisées) au repos, pleine
   couleur et légèrement agrandies sur l'onglet actif. */
.nav-item .nav-ico {
  font-size: 24px; line-height: 1;
  filter: grayscale(65%) opacity(.6);
  transition: transform .15s, filter .15s;
}
.nav-item.actif { color: var(--pink); }
.nav-item.actif .nav-ico { filter: none; transform: scale(1.12); }

/* ── Boutons ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: var(--radius-md);
  padding: 14px 20px;
  font-size: 14.5px; font-weight: 700;
  transition: opacity .15s, transform .1s;
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn-primaire { background: var(--grad-pink); color: #fff; width: 100%; }
.btn-violet { background: var(--grad-violet); color: #fff; }
.btn-contour {
  background: transparent; border: 1.5px solid var(--border-soft); color: var(--text-soft);
}
.btn-contour-pink { background: rgba(232,67,147,0.06); border: 1.5px solid var(--pink); color: var(--pink); }
.btn-danger { background: var(--red-dim); border: 1px solid rgba(220,38,38,0.3); color: var(--red); }
.btn-succes { background: var(--green-dim); border: 1px solid rgba(34,197,94,0.3); color: var(--green); }
.btn-texte { background: none; border: none; color: var(--text-faint); font-size: 13px; font-weight: 600; padding: 8px; }
.btn-sm { padding: 9px 14px; font-size: 13px; }
.btn-icone {
  width: 40px; height: 40px; border-radius: var(--radius-pill);
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border-soft); color: var(--text-muted);
}

/* ── Champs de formulaire ───────────────────────────── */
.champ-groupe { margin-bottom: 14px; }
.champ-label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-muted); margin-bottom: 6px;
}
.champ {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-md);
  padding: 13px 14px; color: var(--text); font-size: 14.5px;
  transition: border-color .15s;
}
.champ:focus { outline: none; border-color: var(--pink); }
.champ-ok { border-color: var(--green); }
.champ-err { border-color: var(--red); }
.champ-aide { font-size: 11.5px; color: var(--text-faint); margin-top: 5px; }
.champ-aide-err { color: #fca5a5; }
.champ-aide-ok { color: var(--green); }

.code-input {
  width: 100%; text-align: center; letter-spacing: 8px;
  font-size: 22px; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 14px; color: var(--text);
}

/* Sélecteurs chip (sexe / orientation) */
.choix-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.choix-chip {
  flex: 1; min-width: 90px;
  padding: 10px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--border-soft); background: var(--surface);
  color: var(--text-faint); font-size: 13px; font-weight: 600; text-align: center;
}
.choix-chip.actif { background: var(--pink); border-color: var(--pink); color: #fff; }

/* Menu déroulant custom */
.dropdown-btn {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); padding: 13px 14px; color: var(--text-faint);
}
.dropdown-btn.rempli { color: var(--text-soft); font-weight: 500; }

/* ── Cartes / sections ───────────────────────────────── */
.carte { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
.section-titre {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--text-ghost); padding: 18px 16px 8px;
}

/* ── Badges ──────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--radius-pill); padding: 4px 11px;
  font-size: 11px; font-weight: 700; border: 1px solid transparent;
}
.badge-gratuit { color: var(--text-faint); border-color: var(--border-soft); }
.badge-premium { color: var(--pink); border-color: var(--pink); background: var(--pink-dim); }
.badge-prestige { color: var(--violet); border-color: var(--violet); background: var(--violet-dim); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── Avatars ─────────────────────────────────────────── */
.avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.avatar-init {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; flex-shrink: 0; background: var(--surface-2);
}

/* ── États vides / chargement ────────────────────────── */
.etat-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 30px; text-align: center; }
.etat-vide svg { width: 44px; height: 44px; stroke: var(--text-ghost); }
.etat-vide-txt { color: var(--text-faint); font-size: 13px; line-height: 1.6; }

.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--border-soft); border-top-color: var(--pink);
  animation: rotation 0.8s linear infinite;
}
.spinner-sm { width: 16px; height: 16px; border-width: 2px; }
@keyframes rotation { to { transform: rotate(360deg); } }
.chargement-centre { display: flex; align-items: center; justify-content: center; padding: 50px; flex: 1; }

/* ── Modal / overlay ─────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78);
  display: none; align-items: flex-end; justify-content: center;
  /* Au-dessus de .modal-plein (z-index 200) : une confirmation (ex. purger
     un compte) doit pouvoir s'afficher par-dessus une fiche déjà ouverte en
     plein écran, sinon elle se crée bien mais reste invisible en dessous. */
  z-index: 300; backdrop-filter: blur(2px);
}
.overlay.actif { display: flex; }
.overlay.overlay-centre { align-items: center; padding: 24px; }

.feuille {
  width: 100%; max-width: var(--app-max);
  background: var(--surface); border-radius: 22px 22px 0 0;
  max-height: 88vh; overflow-y: auto;
  animation: montee .25s ease-out;
}
@keyframes montee { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.modal-plein {
  position: fixed; inset: 0; max-width: var(--app-max); margin: 0 auto;
  background: var(--bg); z-index: 200; display: none; flex-direction: column;
}
.modal-plein.actif { display: flex; }

.dialogue {
  width: 100%; max-width: 360px; background: var(--surface);
  border-radius: var(--radius-xl); padding: 22px;
  animation: pop .18s ease-out;
}
@keyframes pop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ── Toast ───────────────────────────────────────────── */
#toast-zone {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%; transform: translateX(-50%);
  z-index: 500; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: calc(100% - 32px); max-width: 460px;
}
.toast {
  background: #20202f; border: 1px solid var(--border-soft); color: var(--text-soft);
  padding: 12px 16px; border-radius: var(--radius-md); font-size: 13.5px;
  box-shadow: var(--shadow-pop); display: flex; align-items: center; gap: 10px;
  animation: toast-in .2s ease-out;
}
.toast-err { border-color: rgba(220,38,38,.4); }
.toast-ok { border-color: rgba(34,197,94,.4); }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Switch toggle ───────────────────────────────────── */
.switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track {
  position: absolute; inset: 0; background: #333; border-radius: var(--radius-pill);
  transition: background .15s; cursor: pointer;
}
.switch-track::before {
  content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.switch input:checked + .switch-track { background: var(--pink); }
.switch input:checked + .switch-track::before { transform: translateX(20px); }

/* ── Utilitaires ─────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; }
.flex-1 { flex: 1; }
.texte-centre { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.px-16 { padding-left: 16px; padding-right: 16px; }
.py-16 { padding-top: 16px; padding-bottom: 16px; }
.txt-muted { color: var(--text-muted); }
.txt-faint { color: var(--text-faint); }
.txt-pink { color: var(--pink); }
.txt-violet { color: var(--violet); }
.txt-green { color: var(--green); }
.txt-red { color: var(--red); }
.txt-sm { font-size: 12.5px; }
.txt-xs { font-size: 11px; }
.fw-600 { font-weight: 600; } .fw-700 { font-weight: 700; } .fw-800 { font-weight: 800; }

a:focus-visible, button:focus-visible, input:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--pink); outline-offset: 2px;
}

/* ── Animation radar GPS (écran connexion) — signature ── */
.radar-wrap { position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; }
.radar-ring {
  position: absolute; border-radius: 50%; border: 1.5px solid var(--pink);
  animation: radar-pulse 2.8s ease-out infinite;
}
.radar-ring.r1 { width: 120px; height: 120px; animation-delay: 0s; }
.radar-ring.r2 { width: 120px; height: 120px; animation-delay: .9s; }
.radar-ring.r3 { width: 120px; height: 120px; animation-delay: 1.8s; }
@keyframes radar-pulse {
  0% { transform: scale(0.35); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: scale(1); opacity: 0; }
}
.radar-coeur {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--pink);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
  box-shadow: 0 0 30px rgba(232,67,147,0.35);
  position: relative; z-index: 2;
}

/* ── Logo animé (écran de connexion) : cœur qui tourne dans l'épingle ── */
.logo-anim {
  width: 150px; height: 142px;
  filter: drop-shadow(0 8px 24px rgba(232,67,147,0.28));
}
.logo-coeur {
  transform-box: fill-box;
  transform-origin: center;
  animation: coeur-tourne 3s linear infinite;
}
@keyframes coeur-tourne { to { transform: rotateY(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .logo-coeur { animation: none; }
}

/* ── Carte : boutons rayon ────────────────────────────── */
.rayon-btn {
  background: rgba(15,15,26,0.9); border: 1px solid #333; color: #aaa;
  font-size: 11px; font-weight: 600; border-radius: 14px; padding: 5px 9px;
}
.rayon-btn.actif { background: var(--pink); border-color: var(--pink); color: #fff; }

/* ── Onglets (Photos) ─────────────────────────────────── */
.tab-btn {
  flex: 1; background: none; border: none; padding: 11px 0;
  color: var(--text-faint); font-size: 12.5px; font-weight: 600;
  border-bottom: 2px solid transparent;
}
.tab-btn.actif { color: var(--pink); border-bottom-color: var(--pink); font-weight: 700; }

/* ── Cartes membre (carrousel carte + photos grille) ──── */
.membre-card {
  width: 122px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px; display: flex; flex-direction: column;
  align-items: center; gap: 5px; position: relative; cursor: pointer;
}
.membre-card.nouveau { border-color: var(--green); border-width: 1.5px; }
.membre-card.ami { border-color: var(--pink); border-width: 2px; background: rgba(232,67,147,0.06); }
.badge-nouveau {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--green); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 8px; padding: 2px 7px; white-space: nowrap; z-index: 2;
}
.badge-ami {
  position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  background: var(--pink); color: #fff; font-size: 9px; font-weight: 700;
  border-radius: 8px; padding: 2px 7px; white-space: nowrap; z-index: 2;
  display: flex; align-items: center; gap: 3px;
}
.membre-card .avatar, .membre-card .avatar-init { width: 48px; height: 48px; font-size: 18px; border-width: 2.5px; border-style: solid; margin-top: 4px; }
.membre-card-pseudo { color: #fff; font-size: 13px; font-weight: 700; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.membre-card-age { color: var(--text-muted); font-size: 12px; }
.membre-card-compat {
  border-radius: 8px; border: 1px solid; padding: 3px 8px; width: 100%; text-align: center;
  font-size: 13px; font-weight: 800;
}

.photo-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.photo-mini { width: 100%; aspect-ratio: 1; border-radius: 8px; object-fit: cover; border: 2px solid var(--red); cursor: pointer; }
.photo-mini-vide { aspect-ratio: 1; border-radius: 8px; border: 1.5px dashed #333; background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--text-ghost); font-size: 22px; cursor: pointer; }

/* ── Bulles de chat ───────────────────────────────────── */
.msg-row { display: flex; }
.msg-row.moi { justify-content: flex-end; }
.bulle { max-width: 78%; border-radius: 16px; padding: 10px 14px; }
.bulle-autre { background: var(--surface); border: 1px solid var(--border); }
.bulle-moi { background: var(--pink); }
.bulle-heure { font-size: 10px; color: rgba(255,255,255,0.55); margin-top: 4px; text-align: right; }

.musique-carte { max-width: 80%; background: var(--surface); border: 1px solid rgba(255,0,0,0.2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.musique-carte.moi { border-color: rgba(124,58,237,0.2); }
.msg-row.en-cours { animation: pulse-envoi 1s ease-in-out infinite; }
@keyframes pulse-envoi { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ── Réactions emoji sous les bulles du tchat ─────────── */
.msg-react-line { display: flex; align-items: center; gap: 6px; margin: -2px 6px 2px; min-height: 16px; }
.msg-react-line.moi { justify-content: flex-end; }
.msg-react-badge { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 1px 8px; font-size: 12px; line-height: 1.6; }
.msg-react-trigger { background: none; border: none; cursor: pointer; font-size: 15px; padding: 0 2px; opacity: 0; transition: opacity .15s; }
.msg-react-line:hover .msg-react-trigger,
.msg-row:hover + .msg-react-line .msg-react-trigger { opacity: .95; }
@media (hover: none) { .msg-react-trigger { opacity: .45; } }

/* ── Jeux dans le chat ────────────────────────────────── */
.jeu-carte { max-width: 88%; background: var(--surface); border: 1.5px solid rgba(232,67,147,0.25); border-radius: 14px; padding: 12px; }
.jeu-carte button { transition: opacity .1s; }
.jeu-carte button:active { opacity: .7; }
.jeu-carte button:disabled { cursor: not-allowed; opacity: .4; }

/* Sélecteur de jeux — hover sur les cartes */
.jeu-selec-card:hover { border-color: var(--pink) !important; background: var(--pink-dim) !important; }


/* ─── Blocs réservés à la version ordinateur ─────────────
   Sur téléphone, la position vient du GPS et l'écran est déjà chargé : ces
   blocs n'y apparaissent pas. Sur ordinateur, la position est déduite de
   l'adresse IP (souvent fausse de plusieurs dizaines de kilomètres, voire de
   ville avec un VPN) : il faut pouvoir la corriger sans chercher un bouton. */
.bloc-ordinateur { display: none; }

@media (min-width: 900px) and (pointer: fine) {
  .bloc-ordinateur { display: block; }
}


/* ═══════════════════════════════════════════════════════
   THÈME CLAIR
   Le sombre reste le thème par défaut (rien à faire pour l'obtenir).
   Le clair ne redéfinit QUE les variables : aucune règle ne dépend d'une
   couleur écrite en dur, donc tout l'écran suit. C'est précisément pour cela
   qu'il fallait des variables — sinon il aurait fallu reprendre chaque règle.
   L'attribut est posé sur <html> par js/theme.js.
   ═══════════════════════════════════════════════════════ */
html[data-theme="clair"] {
  /* Un dégradé sombre sur fond clair jurerait autant que l'inverse. */
  --grad-entete: linear-gradient(135deg, #f3e8ff, #ede9fe, #ffffff);
  --grad-barre:  linear-gradient(#ffffff, #f6f4fb);
  --grad-carte:  linear-gradient(#ffffff, #f7f5fc);
  --grad-pink:   linear-gradient(135deg, #f857a6, #e84393, #c9357c);
  --grad-violet: linear-gradient(#a78bfa, #7c3aed);

  --bg: #f4f4f8;
  --surface: #ffffff;
  --surface-2: #ececf3;
  --border: #dcdce6;
  --border-soft: #c9c9d6;

  --pink-dim: rgba(232, 67, 147, 0.10);
  --violet-dim: rgba(124, 58, 237, 0.10);
  --green-dim: rgba(34, 197, 94, 0.10);
  --red-dim: rgba(220, 38, 38, 0.10);

  --text: #14141f;
  --text-soft: #2c2c3a;
  --text-muted: #55556a;
  --text-faint: #8a8a9c;
  --text-ghost: #b4b4c4;

  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-pop: 0 16px 48px rgba(0, 0, 0, 0.16);
}

/* La carte OpenStreetMap est claire par nature : en thème sombre on l'assombrit
   légèrement pour qu'elle ne brûle pas les yeux. En clair, on la laisse telle
   quelle. */
html[data-theme="clair"] #leaflet-map .leaflet-tile { filter: none; }


/* ─── Fiche membre : la navigation reste accessible ──────
   La fiche est un écran plein, mais elle s'arrête au-dessus de la barre
   d'onglets : on doit pouvoir partir sur Carte, Messages ou Profil sans avoir à
   la refermer d'abord. Un écran qui séquestre l'utilisateur est un écran raté. */
.modal-plein.avec-nav { bottom: var(--nav-h); }


/* ─── Empilement : la fiche doit couvrir la carte ────────
   Leaflet donne à ses calques des z-index de 400 à 800 (et jusqu'à 1000 pour ses
   contrôles). Le modal plein écran n'étant qu'à 200, la CARTE se dessinait
   PAR-DESSUS la fiche : on voyait le plan alors qu'on consultait un profil.
   On repasse donc la fiche et les overlays au-dessus de tout Leaflet.
   La barre d'onglets reste accessible : la fiche s'arrête au-dessus d'elle
   (.modal-plein.avec-nav) et la nav monte juste en dessous. */
/* La barre d'onglets doit passer AU-DESSUS de Leaflet (dont les calques montent
   à 1000), mais EN DESSOUS des écrans pleins — sinon elle recouvre le bas de la
   fiche d'administration, où se trouvent justement les boutons d'action.

   La fiche membre, elle, s'arrête au-dessus d'elle (.modal-plein.avec-nav) :
   la nav reste donc visible et cliquable là où c'est voulu, sans jamais masquer
   le contenu des autres écrans. */
.nav-basse    { z-index: 1050; }
.modal-plein  { z-index: 1100; }
.overlay      { z-index: 1300; }

/* Le toast passe AU-DESSUS DE TOUT, et c'est une correction, pas un réglage.

   Il était déclaré plus haut dans ce fichier à z-index 500 — une valeur juste à
   l'époque où .modal-plein valait 200, mais la surcharge ci-dessus l'a fait
   passer à 1100 sans que le toast suive. Résultat : TOUT message déclenché
   depuis une fenêtre plein écran (fiche membre, formules, sorties…) s'affichait
   DERRIÈRE elle. Le message existait, personne ne le voyait jamais.

   Un toast est le seul retour dont dispose l'utilisateur après une action : il
   doit couvrir même les overlays, sinon il ne sert à rien. */
#toast-zone   { z-index: 1400; }


/* ─── Boutons d'options du tchat ─────────────────────────
   Plus grands et plus doux que les .btn-icone génériques, avec un émoji
   agrandi et un petit rebond au toucher. */
#chat-options { gap: 7px !important; padding: 4px 2px 10px; justify-content: center; }
#chat-options .opt-tchat {
  width: 44px; height: 44px; font-size: 21px; line-height: 1;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
#chat-options .opt-tchat:active { transform: scale(.9); }
@media (hover: hover) {
  #chat-options .opt-tchat:hover {
    background: var(--pink-dim);
    border-color: var(--pink);
  }
}

/* Onglets du panneau de la carte (À proximité / Villes) */
.carte-onglet { border:1px solid var(--border); background:transparent; color:var(--text-muted); cursor:pointer; }
.carte-onglet.actif { background:var(--pink); border-color:var(--pink); color:#fff; }