@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&family=Archivo+Black&display=swap');

:root {
  --bg: #0F0E12;
  --surface: #1A1820;
  --surface-2: #221F29;
  --line: rgba(196,201,209,0.12);
  --line-strong: rgba(196,201,209,0.22);
  --accent: #D8203C;
  --accent2: #F0762A;
  --accent-glow: rgba(216,32,60,0.4);
  --orange-glow: rgba(240,150,40,0.32);
  --accent-dim: #7A1626;
  --metal: #C4C9D1;
  --metal-dim: #8B909B;
  --text: #EDEAE4;
  --text-dim: #9C97A6;
  --radius: 16px;
  --glass-bg: rgba(34,31,41,0.5);
  --glass-bg-strong: rgba(34,31,41,0.62);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  padding-bottom: 100px;
  position: relative;
}

a { color: inherit; text-decoration: none; }

.mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- Fond décoratif (halos + facettes bas-poly) ---------- */
/* Fixe, unique pour toute l'appli : reste visible derrière tous les
   onglets (display:none/block) sans avoir à le dupliquer par panneau.
   Les facettes reprennent le motif du lion du logo (rouge -> orange). */

.app-bg-decor {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 520px;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.app-bg-decor .glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
}
.app-bg-decor .orb-red { top: -70px; right: -60px; width: 240px; height: 240px; background: var(--accent-glow); }
.app-bg-decor .orb-orange { top: 160px; left: -90px; width: 220px; height: 220px; background: var(--orange-glow); }
.app-bg-decor svg {
  position: absolute;
  top: 96px; right: -80px;
  width: 320px; height: 340px;
  opacity: 0.85;
}

header.app-header,
main, nav.tabbar { position: relative; z-index: 1; }

/* ---------- Header ---------- */

header.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(15,14,18,0.55);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  padding: max(18px, calc(env(safe-area-inset-top) + 8px)) 18px 12px;
  border-bottom: 1px solid var(--line);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-lockup {
  height: 38px;
  width: auto;
  display: block;
}

/* ---------- Icônes de l'en-tête (console admin + cloche) ---------- */

.header-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* [hidden] doit rester prioritaire sur le display:flex ci-dessous — sinon
   l'attribut HTML "hidden" posé par défaut sur ce bouton (masqué tant que
   checkAdminAccess() n'a pas confirmé des droits admin, voir app.js/
   index.html) est silencieusement ignoré : une règle d'auteur avec la même
   spécificité qu'un attribut passe toujours devant le style par défaut du
   navigateur, bug repéré par Lucas en prévisualisation locale (le bouton
   restait visible même déconnecté). */
.console-link-btn[hidden] { display: none; }

.console-link-btn {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--metal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.console-link-btn svg { width: 19px; height: 19px; }
/* Posé sur console.html pour indiquer "vous êtes déjà ici", plutôt que
   d'activer "Ma carte" dans la barre du bas (demande de Lucas, août 2026,
   ça prêtait à confusion). */
.console-link-btn.active {
  color: var(--accent2);
  border-color: var(--accent2);
}

/* ---------- Signalement bug/suggestion bêta ---------- */
/* Bouton enveloppe, accessible à tout le monde (connecté ou non), placé
   juste avant la cloche. Teinté avec l'accent orange plutôt que rouge pour
   ne pas se lire comme une alerte (demande de Lucas, août 2026). */

.feedback-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(240,150,40,0.45);
  background: rgba(240,118,42,0.12);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.feedback-btn svg { width: 19px; height: 19px; }

/* ---------- Cloche + boîte de réception de notifications ---------- */

.inbox-bell-btn {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--metal);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-bell-btn svg { width: 19px; height: 19px; }
.inbox-bell-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  border: 2px solid var(--bg);
}

.inbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: radial-gradient(120% 90% at 50% 40%, rgba(216,32,60,0.16), rgba(15,14,18,0.78) 60%);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.inbox-overlay[hidden] { display: none; }
.inbox-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  max-height: min(82vh, 640px);
  background: rgba(24,22,29,0.94);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
}
.inbox-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}
.inbox-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 10px;
}
.inbox-panel-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, rgba(216,32,60,0.22), rgba(240,118,42,0.14));
  border: 1px solid rgba(240,150,40,0.3);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.inbox-panel-icon svg { width: 17px; height: 17px; }
.inbox-panel-title {
  flex: 1;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.inbox-close-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.05);
  color: var(--metal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.inbox-close-btn svg { width: 14px; height: 14px; }
.inbox-panel-actions {
  display: flex;
  gap: 18px;
  padding: 4px 18px 12px;
  border-bottom: 1px solid var(--line);
}
.inbox-action-link {
  background: none;
  border: none;
  color: var(--accent2);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 0;
}
.inbox-action-link:disabled {
  color: var(--text-dim);
}
.inbox-list {
  overflow-y: auto;
  padding: 10px 18px 24px;
}
.inbox-item {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.inbox-item:last-child { border-bottom: none; }
.inbox-item-main {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: inherit;
}
.inbox-item-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 6px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 0 8px var(--accent-glow);
}
.inbox-item-main.is-read .inbox-item-dot { background: transparent; box-shadow: none; }
.inbox-item-body { flex: 1; min-width: 0; }
.inbox-item-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}
.inbox-item-main.is-read .inbox-item-title { color: var(--text-dim); font-weight: 500; }
.inbox-item-text {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.35;
}
.inbox-item-date {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 4px;
}
.inbox-item-del {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  padding: 4px 6px;
}

/* ---------- Signalement bug/suggestion bêta : contenu du panneau ---------- */
/* Réutilise .inbox-overlay/.inbox-panel (voir plus haut) pour l'habillage
   général (fond flouté, carte centrée, liseré dégradé) ; ce bloc ne couvre
   que le contenu propre à ce panneau (onglets, formulaire, historique,
   détail). Vue "admin" (nom/pseudo visible + case à cocher résolu) activée
   automatiquement par app.js pour les comptes de la table admins — jamais
   de bouton à activer manuellement en production, contrairement à la
   maquette de démonstration. */

.feedback-panel { max-height: min(84vh, 620px); }
.feedback-body { overflow-y: auto; padding: 4px 0 20px; }
.feedback-hint {
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  padding: 0 18px 14px;
}
.feedback-tabs {
  display: flex; gap: 4px; margin: 0 18px 14px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  border-radius: 11px; padding: 3px;
}
.feedback-tab {
  flex: 1; text-align: center; padding: 8px 6px; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  color: var(--text-dim); cursor: pointer;
}
.feedback-tab.active { color: var(--text); background: var(--surface-2); }

.feedback-type-toggle { display: flex; gap: 8px; padding: 0 18px 12px; }
.feedback-type-chip {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.25);
  color: var(--text-dim);
  font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.feedback-type-chip svg { width: 14px; height: 14px; }
.feedback-type-chip.active {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
}

.feedback-field { padding: 0 18px 10px; }
.feedback-field label { display: block; font-size: 11px; color: var(--text-dim); margin-bottom: 6px; }
.feedback-optional { color: var(--metal-dim); font-weight: 400; }
.feedback-field textarea, .feedback-field input[type="text"] {
  width: 100%; background: rgba(0,0,0,0.3);
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 13px;
}
.feedback-field textarea { min-height: 84px; resize: vertical; }
.feedback-field textarea:focus, .feedback-field input:focus { outline: 1px solid var(--accent2); }

.feedback-shot-upload-zone {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 12px; padding: 14px;
  color: var(--text-dim); font-size: 12.5px; font-weight: 600;
  cursor: pointer; margin-bottom: 9px;
}
.feedback-shot-upload-zone svg { width: 16px; height: 16px; }
.feedback-shot-preview-row { display: flex; gap: 8px; flex-wrap: wrap; }
.feedback-shot-thumb {
  position: relative; width: 52px; height: 52px; border-radius: 9px;
  border: 1px solid var(--line-strong);
  background-size: cover; background-position: center;
  background-color: rgba(255,255,255,0.05);
}
.feedback-shot-thumb.uploading { opacity: 0.5; }
.feedback-shot-thumb .rm {
  position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center; color: var(--metal);
  cursor: pointer;
}
.feedback-shot-thumb .rm svg { width: 8px; height: 8px; }

.feedback-submit-btn {
  margin: 6px 18px 0; display: block; width: calc(100% - 36px); text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05; font-weight: 700; font-size: 13px;
  padding: 12px; border-radius: 10px; border: none;
  font-family: 'Inter', sans-serif; cursor: pointer;
}
.feedback-submit-btn:disabled { opacity: 0.6; }
.feedback-form-result { font-size: 12.5px; margin: 10px 18px 0; text-align: center; }
.feedback-form-result.ok { color: #6FCF7A; }
.feedback-form-result.err { color: var(--accent); }

.feedback-history-list { padding: 0 18px; display: flex; flex-direction: column; gap: 8px; }
.feedback-history-item {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  width: 100%; background: rgba(0,0,0,0.22);
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px;
  font-family: 'Inter', sans-serif; color: inherit; cursor: pointer;
}
.feedback-history-item.is-resolved { opacity: 0.6; }
.feedback-history-item .fh-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240,118,42,0.14); color: var(--accent2); margin-top: 1px;
}
.feedback-history-item.type-idea .fh-icon { background: rgba(216,32,60,0.14); color: var(--accent); }
.feedback-history-item .fh-icon svg { width: 13px; height: 13px; }
.feedback-history-item .fh-body { flex: 1; min-width: 0; }
.feedback-history-item .fh-subject { font-weight: 700; font-size: 13px; margin-bottom: 2px; }
.feedback-history-item.is-resolved .fh-subject { text-decoration: line-through; color: var(--text-dim); }
.feedback-history-item .fh-excerpt {
  font-size: 11.5px; line-height: 1.4; margin-bottom: 5px; color: var(--text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feedback-history-item .fh-meta {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px;
}
.feedback-history-item .fh-author {
  font-family: 'JetBrains Mono', monospace; font-size: 9.5px; color: var(--accent2);
  margin-top: 3px; display: block;
}

.feedback-status-pill {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 2px 6px; border-radius: 5px;
  background: rgba(240,150,40,0.18); color: var(--accent2);
}
.feedback-status-pill.is-resolved { background: rgba(111,207,122,0.16); color: #6FCF7A; }

.feedback-detail-back {
  display: flex; align-items: center; gap: 4px; margin: 0 18px 14px;
  font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
}
.feedback-detail-back svg { width: 13px; height: 13px; }
.feedback-detail-type-row { display: flex; align-items: center; gap: 8px; margin: 0 18px 10px; }
.feedback-type-tag {
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.03em; padding: 3px 8px; border-radius: 6px;
  background: rgba(240,118,42,0.16); color: var(--accent2);
}
.feedback-type-tag.type-idea { background: rgba(216,32,60,0.14); color: var(--accent); }
.feedback-detail-subject {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.25;
  margin: 0 18px 8px;
}
.feedback-detail-author {
  margin: 0 18px 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--accent2);
}
.feedback-detail-text { margin: 0 18px 16px; font-size: 13.5px; line-height: 1.6; white-space: pre-line; }
.feedback-detail-shots { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 18px 18px; }
.feedback-detail-shots img {
  width: 84px; height: 84px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line-strong); cursor: pointer;
}
.feedback-detail-date {
  margin: 0 18px 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text-dim);
}
.feedback-resolve-btn {
  display: block; margin: 0 18px; width: calc(100% - 36px); text-align: center;
  padding: 12px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(111,207,122,0.12); color: #6FCF7A;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 13px; cursor: pointer;
}
.feedback-resolve-btn.is-resolved { background: rgba(255,255,255,0.05); color: var(--text-dim); }

/* ---------- Tuto d'activation des notifications ---------- */
/* Réutilise le même habillage que la boîte de réception (.inbox-overlay /
   .inbox-panel) pour rester cohérent visuellement, avec son propre corps
   de contenu (étapes numérotées, adaptées à l'appareil détecté côté JS) et
   un bouton de poursuite en bas. Voir push.js pour la logique d'ouverture
   (avant la vraie demande de permission navigateur) et le contenu par OS. */

.push-help-link {
  display: inline-block;
  background: none;
  border: none;
  color: var(--accent2);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 0;
  margin-top: 4px;
}
.push-help-body {
  padding: 4px 18px 18px;
  overflow-y: auto;
}
.push-help-group {
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.push-help-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.push-help-group-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Oswald', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 10px;
}
.push-help-group-title::before {
  content: "";
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 8px solid var(--accent2);
}
.push-help-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.push-help-steps li {
  display: flex;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--text);
}
.push-help-steps .step-text {
  flex: 1;
  min-width: 0;
}
.push-help-steps .num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.push-help-actions {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--line);
}
.notif-btn.push-help-continue-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 13px;
  font-size: 13.5px;
  font-weight: 700;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05;
  border: none;
}

/* ---------- Chain divider (élément signature, éclat bas-poly) ---------- */

.chain-divider {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 30px 18px 14px;
  color: var(--metal-dim);
}
.chain-divider .link {
  width: 11px; height: 11px;
  background: linear-gradient(155deg, var(--accent), var(--accent2));
  clip-path: polygon(0% 0%, 100% 30%, 35% 100%);
  flex-shrink: 0;
}
.chain-divider .label {
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-left: 4px;
  white-space: nowrap;
}
.chain-divider .rule {
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px);
}
.admin-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #2E0A05;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-radius: 999px;
  padding: 3px 8px;
  margin-left: 8px;
  vertical-align: 2px;
}

/* ---------- Repère de mois discret dans la liste d'événements ---------- */

.month-label {
  grid-column: span 2;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--text-dim);
  opacity: 0.55;
  margin: 18px 0 -2px;
  padding: 0 2px;
}
.month-label:first-child { margin-top: 4px; }

/* ---------- Sections ---------- */

section { padding: 0 18px; }

/* ---------- Next event hero ---------- */

.hero-card {
  margin: 16px 18px 0;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.hero-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent2);
  font-weight: 600;
}
.hero-title {
  font-family: 'Oswald', sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 6px 0 4px;
  line-height: 1.1;
}
.hero-date {
  color: var(--text-dim);
  font-size: 14px;
  margin-bottom: 14px;
}
.countdown {
  display: flex;
  gap: 10px;
  margin: 14px 0 4px;
}
.countdown .unit {
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 0;
  flex: 1;
  text-align: center;
}
.countdown .num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 600;
  color: var(--metal);
}
.countdown .unit-label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-top: 2px;
}
.hero-cta {
  display: inline-block;
  margin-top: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05;
  font-weight: 700;
  font-size: 14px;
  padding: 11px 18px;
  border-radius: 11px;
}

/* ---------- Event list ---------- */

#event-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.event-card {
  grid-column: span 2;
  display: flex;
  gap: 14px;
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px;
}
.event-date-badge {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  border-radius: 11px;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.event-date-badge .day {
  font-family: 'Oswald', sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  color: var(--metal);
}
.event-date-badge .month {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent2);
  margin-top: 2px;
}
.event-body { flex: 1; min-width: 0; }
.event-title {
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 3px;
}
.event-meta {
  font-size: 12.5px;
  color: var(--text-dim);
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 22px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  grid-column: span 2;
}
.empty-state a { color: var(--accent2); font-weight: 600; }

/* ---------- Notifications / liens (onglet Nos réseaux) ---------- */

.notif-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
}
.notif-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(216,32,60,0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent2);
  font-size: 17px;
}
.notif-icon svg {
  width: 19px;
  height: 19px;
}
.notif-text { flex: 1; }
.notif-text .t { font-weight: 600; font-size: 13.5px; }
.notif-text .d { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.notif-btn {
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--accent2);
  color: var(--accent2);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 9px;
  font-family: inherit;
}
.notif-btn:disabled {
  border-color: var(--line);
  color: var(--text-dim);
}

/* ---------- Carte "Site officiel" mise en avant (onglet Nos réseaux) ---------- */

.site-hero {
  margin: 16px 18px 16px;
  background: linear-gradient(155deg, rgba(216,32,60,0.2), rgba(240,150,40,0.13) 55%, rgba(26,24,32,0.65));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 22px;
}
.site-hero-eyebrow {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--accent2); font-weight: 600;
}
.site-hero-title {
  font-family: 'Oswald', sans-serif; font-size: 23px; font-weight: 700;
  margin: 7px 0 5px; line-height: 1.15;
}
.site-hero-sub {
  font-size: 12.5px; color: var(--text-dim); margin-bottom: 18px; line-height: 1.45;
}
.site-hero-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05; font-weight: 700; font-size: 13px;
  padding: 12px 20px; border-radius: 13px;
}

/* ---------- Map ---------- */

.carte-filters {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  margin: 0 0 14px;
  padding: 0 2px 2px;
}
.filter-chip {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text-dim);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
}
.filter-chip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-color, var(--accent2));
  flex-shrink: 0;
}
.filter-chip.active {
  background: linear-gradient(135deg, var(--chip-color, var(--accent)), var(--accent2));
  border-color: transparent;
  color: #2E0A05;
}
.filter-chip.active::before { background: #2E0A05; }

/* ---------- Menu filtre (Partenaires + Carte) ----------
   Remplace la rangée de puces toujours visible par un bouton "Filtrer"
   + un menu déroulant ancré dessous, coché/décoché en direct sans étape
   de validation séparée. Ferme au clic en dehors (voir bindFilterMenu
   dans app.js) ou en rouvrant un autre menu filtre. */
.filter-menu { position: relative; display: inline-block; }
.filter-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  cursor: pointer;
}
.filter-trigger svg { width: 15px; height: 15px; stroke: var(--text-dim); flex-shrink: 0; }
.filter-trigger-count {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}
.filter-trigger-chev { width: 12px !important; height: 12px !important; margin-left: -2px; transition: transform .2s; }
.filter-trigger.open .filter-trigger-chev { transform: rotate(180deg); }

.filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 250px;
  max-width: 86vw;
  background: #1E1C24;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 8px;
  /* Doit dépasser les panes internes de Leaflet (tuiles/marqueurs/popups,
     jusqu'à 700) ET ses contrôles (.leaflet-top/.leaflet-bottom, zoom +/-,
     eux-mêmes à z-index 1000) pour rester lisible au-dessus de la carte,
     sur l'onglet Carte. */
  z-index: 2000;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
.filter-popover.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
}
.filter-row:hover { background: rgba(255,255,255,0.05); }
.filter-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.filter-row-name { flex: 1; font-size: 13px; font-weight: 500; color: var(--text); }
.filter-row-n { font-size: 11.5px; color: var(--text-dim); }
.filter-check {
  width: 19px;
  height: 19px;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.filter-row.on .filter-check { background: var(--row-color); border-color: var(--row-color); }
.filter-check svg { width: 12px; height: 12px; display: none; }
.filter-row.on .filter-check svg { display: block; }

#map {
  height: 300px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}

.leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
}
.leaflet-popup-tip { background: var(--surface); }
.leaflet-popup-content { margin: 12px 14px; }
.leaflet-popup-close-button { color: var(--text-dim) !important; }
.map-popup-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
}
.map-popup-meta {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}
.map-popup-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.map-popup-actions a {
  color: var(--accent2);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
}
.partner-list { margin-top: 12px; }
.partner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 14px;
  margin-bottom: 8px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
}
.partner-name { font-weight: 600; font-size: 14px; }
.partner-cat { font-size: 12px; color: var(--text-dim); margin-top: 1px; }
.partner-go { font-size: 12px; color: var(--accent2); font-weight: 600; }

.partner-address {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---------- Annuaire partenaires (onglet Partenaires) ---------- */

.partner-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 28px 0 12px;
}
.partner-section-head:first-child { margin-top: 6px; }
.partner-section-head .link {
  width: 11px; height: 11px;
  clip-path: polygon(0% 0%, 100% 30%, 35% 100%);
  flex-shrink: 0;
}
.partner-section-label {
  margin-left: 4px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}
.partner-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  background: rgba(196,201,209,0.1);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.partner-section-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

/* Grille de logos : la couleur de catégorie irrigue un léger halo en haut de
   tuile et un fin trait supérieur, pour distinguer les sections d'un coup
   d'oeil sans surcharger — badge de réduction repositionné en ligne (plus
   de médaillon flottant qui déborde). */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 6px;
}
.partner-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.15s ease;
}
.partner-tile:active { transform: scale(0.97); }
.partner-tile::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--tile-color, var(--accent)), transparent 160%);
}
.partner-tile-logo-wrap {
  width: 100%;
  padding: 16px 16px 8px;
  display: flex; align-items: center; justify-content: center;
}
.partner-tile-logo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
}
.partner-tile-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.partner-tile-info {
  width: 100%;
  padding: 10px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}
.partner-tile-name {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.28;
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.partner-tile-badge {
  font-family: 'Oswald', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  color: #2E0A05;
  background: linear-gradient(135deg, var(--tile-color, var(--accent)), var(--accent2));
  border-radius: 999px;
  padding: 3px 11px;
}

/* ---------- Partenaire du moment (bandeau en tête de l'annuaire) ---------- */
/* Reprend le pattern .site-hero déjà utilisé (onglet Nos réseaux) : fondu
   diagonal rouge/orange en verre dépoli, plutôt qu'un motif emprunté à une
   référence externe. Rotation aléatoire sans répétition gérée côté JS. */

.partner-spotlight-wrap { margin: 4px 0 4px; }
.partner-spotlight-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 22px;
}
.partner-spotlight-track::-webkit-scrollbar { display: none; }
.partner-spotlight {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #1A1820;
  background-size: cover;
  background-position: center;
  border-radius: 22px;
  overflow: hidden;
}
.partner-spotlight-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.88) 15%, rgba(0,0,0,0.15) 65%, transparent);
}
.partner-spotlight-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2;
  background: rgba(0,0,0,0.6);
  padding: 10px 20px;
}
.partner-spotlight-content {
  position: relative; z-index: 1;
  padding: 20px 20px 22px;
}
.partner-spotlight-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--accent2);
  display: flex; align-items: center; gap: 6px;
}
.partner-spotlight-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent2);
  box-shadow: 0 0 0 3px rgba(240,118,42,0.25);
}
.partner-spotlight-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  color: #fff;
  margin: 0 0 4px;
}
.partner-spotlight-note {
  font-size: 12.5px; color: rgba(255,255,255,0.75); line-height: 1.45;
  margin-bottom: 14px;
}
.partner-spotlight-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Oswald', sans-serif; font-size: 12.5px; font-weight: 700; letter-spacing: 0.3px;
  color: #2E0A05;
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  padding: 11px 18px; border-radius: 12px;
}
.partner-spotlight-dots {
  display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px;
}
.partner-spotlight-dots .d { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.18); border: none; padding: 0; cursor: pointer; }
.partner-spotlight-dots .d.on { background: var(--accent2); width: 14px; border-radius: 3px; }

/* ---------- Autres associations fétiches : liste + triangle "prochain événement" ---------- */

.assoc-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.assoc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 4px;
}
.assoc-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
}
.assoc-row-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--row-color, var(--accent2)) 55%, transparent);
}
.assoc-row-logo img { width: 100%; height: 100%; object-fit: cover; }
.assoc-row-body { min-width: 0; }
.assoc-row-name { font-weight: 600; font-size: 13.5px; color: var(--text); }
.assoc-row-note { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.assoc-chevron {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  margin-right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  border-radius: 50%;
  background: transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.assoc-chevron:hover { color: var(--accent2); background: rgba(240,150,40,0.12); }
.assoc-chevron.open { transform: rotate(180deg); color: var(--accent2); }
.assoc-event-detail {
  margin: -4px 6px 6px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--line);
  font-size: 12.5px;
}
.assoc-event-loading, .assoc-event-empty { color: var(--text-dim); }
.assoc-event-found { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.assoc-event-date { font-weight: 700; color: var(--text); text-transform: capitalize; }
.assoc-event-type {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--accent2);
  background: rgba(216,32,60,0.14);
  border-radius: 999px;
  padding: 2px 8px;
}
.assoc-event-city { color: var(--text-dim); }
.assoc-event-source { margin-top: 6px; font-size: 10.5px; color: var(--text-dim); }

/* ---------- Carte membre : blocs repliables "Paramètres" / "Zone sensible" ---------- */

.account-collapse {
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  overflow: hidden;
}
.account-collapse-sensible {
  background: rgba(216,32,60,0.06);
  border-color: rgba(216,32,60,0.28);
}
.account-collapse-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.account-collapse-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--metal);
}
.account-collapse-sensible .account-collapse-title { color: #e0a9a9; }
.account-collapse-icon {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}
.account-collapse-icon svg { width: 15px; height: 15px; display: block; }
.account-collapse-chevron {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.account-collapse-head:hover .account-collapse-chevron {
  color: var(--accent2);
  background: rgba(240,150,40,0.12);
}
.account-collapse.open .account-collapse-chevron {
  transform: rotate(180deg);
  color: var(--accent2);
}
.account-collapse-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
  padding: 0 12px;
}
.account-collapse.open .account-collapse-body {
  max-height: 260px;
  padding: 0 12px 12px;
}
.account-collapse-body-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}
.account-collapse-hint {
  font-size: 10.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 2px;
}

/* ---------- Module admin : consentement associations (accordéon) ---------- */

.consent-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
}
.consent-row:last-child { border-bottom: none; }
.consent-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent2);
  flex-shrink: 0;
}

/* ---------- Ma carte (espace membre) ---------- */

.membre-card {
  background: linear-gradient(155deg, rgba(216,32,60,0.16), rgba(240,150,40,0.1) 60%, rgba(26,24,32,0.6));
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: 22px;
  padding: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.membre-card-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-align: left;
  margin-bottom: 4px;
}
.membre-card-hint {
  font-size: 13px;
  color: var(--text-dim);
  text-align: left;
  margin: 0 0 16px;
  line-height: 1.4;
}
.membre-email-tip {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text);
  text-align: left;
  margin: -6px 0 14px;
}
.membre-email-tip strong { color: var(--accent); }
.membre-remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -4px 0 4px;
  flex-wrap: wrap;
}
.membre-remember-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.membre-remember-label input { margin: 0; }
.passkey-list { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
}
.passkey-row .passkey-delete {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  text-decoration: underline;
  font-family: 'Inter', sans-serif;
}
.manual-event-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.manual-event-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.manual-event-info .t { font-size: 13px; font-weight: 600; }
.manual-event-info .d { font-size: 11.5px; color: var(--text-dim); margin-top: 1px; }
.manual-event-delete {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 12px;
  text-decoration: underline;
  font-family: 'Inter', sans-serif;
}
.membre-remember-row .membre-forgot-link {
  display: inline-block;
  width: auto;
  margin: 0;
  flex-shrink: 0;
}
#membre-auth-form,
#membre-forgot-form,
#membre-newpass-form,
#membre-changepass-form,
#membre-delete-form,
#lookup-search-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#membre-auth-form input:not([type="checkbox"]),
#membre-forgot-form input,
#membre-newpass-form input,
#membre-changepass-form input,
#membre-delete-form input,
#lookup-search-form input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
#membre-auth-form input:focus:not([type="checkbox"]),
#membre-forgot-form input:focus,
#membre-newpass-form input:focus,
#membre-changepass-form input:focus,
#membre-delete-form input:focus,
#lookup-search-form input:focus { outline: 1px solid var(--accent2); }

/* ---------- Sélection d'adhésion (popup multi-comptes / récupération) ---------- */
.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.candidate-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  cursor: pointer;
}
.candidate-row:has(input:checked) {
  border-color: var(--accent2);
  background: rgba(240,118,42,0.08);
}
.candidate-row input[type="radio"] {
  accent-color: var(--accent2);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.candidate-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.candidate-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.candidate-dob {
  font-size: 12px;
  color: var(--text-dim);
}
.candidate-row-confirm { cursor: default; }

.password-field {
  position: relative;
}
.password-field input {
  padding-right: 68px;
}
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11.5px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  padding: 6px 8px;
  cursor: pointer;
}
.password-toggle:hover { color: var(--accent2); }

.membre-error {
  color: var(--accent);
  font-size: 12.5px;
  text-align: left;
}
.membre-link-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 12.5px;
  text-decoration: underline;
  margin-top: 14px;
  font-family: 'Inter', sans-serif;
}
.membre-forgot-link {
  text-align: right;
  margin-top: -2px;
  margin-bottom: 2px;
}
.membre-resend-link {
  font-size: 11.5px;
  margin-top: 2px;
}
.membre-card-name {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  font-weight: 700;
}
.membre-card-name-wrap {
  position: relative;
}
.membre-card-name-placeholder {
  display: inline-block;
  color: var(--text-dim);
  border-bottom: 1px dashed var(--line-strong);
  padding-bottom: 1px;
}
.membre-pseudo-edit-btn {
  position: absolute;
  top: -4px;
  right: 0;
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--metal);
  opacity: 0.6;
  line-height: 0;
}
.membre-pseudo-edit-btn svg { width: 15px; height: 15px; display: block; }
.membre-pseudo-edit-btn:hover { opacity: 1; color: var(--text); }
.membre-card-firstname {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  text-align: center;
}
.membre-pseudo-form {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.membre-pseudo-input {
  flex: 1;
  min-width: 0;
  background: rgba(0,0,0,0.3);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.membre-pseudo-input:focus { outline: 1px solid var(--accent2); }
.membre-pseudo-save-btn,
.membre-pseudo-cancel-btn {
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
  color: var(--text);
}
.membre-card-status {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 4px;
  color: var(--accent2);
}
.membre-card-active .membre-card-status { color: #6FCF7A; }
.membre-card-since {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 8px;
}
.membre-card-expiry {
  font-size: 12.5px;
  color: var(--text-dim);
  margin-top: 4px;
}
.membre-qr-pending {
  margin-top: 16px;
  padding: 18px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-dim);
  background: rgba(255,255,255,0.03);
}

.membre-qr {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding: 12px;
  background: var(--text);
  border-radius: 10px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Barre de progression discrète sous le QR rotatif (TOTP), montrant le
   temps restant avant la prochaine rotation du code. */
.membre-qr-timer {
  width: 160px;
  height: 3px;
  margin: 8px auto 0;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.membre-qr-timer-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* ---------- Codes promo partenaires (carte membre) ---------- */

.promo-list { margin-top: 4px; }
.promo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 10px;
}
.promo-row-logo {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: #fff;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
}
.promo-row-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.promo-row-main { min-width: 0; text-align: left; flex: 1; }
.promo-name { font-weight: 600; font-size: 14px; }
.promo-note {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.35;
}
.promo-code {
  flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--accent2);
  background: transparent;
  border: 1px dashed var(--accent2);
  border-radius: 8px;
  padding: 8px 12px;
  white-space: nowrap;
}
.promo-code-copied {
  color: #6FCF7A;
  border-color: #6FCF7A;
  border-style: solid;
}
.promo-card-badge {
  flex-shrink: 0;
  max-width: 116px;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--text-dim);
  background: transparent;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
}

/* ---------- Statistiques admin (visible uniquement pour les comptes admin) ---------- */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.stat-tile {
  background: var(--glass-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 14px;
}
.stat-tile .num {
  font-family: 'Oswald', sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--metal);
  line-height: 1;
}
.stat-tile .label {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 5px;
  line-height: 1.3;
}
.stats-external-link {
  display: block;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent2);
  margin: -6px 0 16px;
}

/* ---------- Module admin (visible uniquement pour les comptes admin) ---------- */

.form-glass {
  margin: 0 0 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 18px;
  text-align: left;
}
.form-glass-title {
  font-family: 'Oswald', sans-serif; font-weight: 600; font-size: 15px; margin-bottom: 4px;
}
.form-glass-hint {
  font-size: 11.5px; color: var(--text-dim); margin-bottom: 14px; line-height: 1.4;
}
.form-glass textarea,
.form-glass input {
  width: 100%; background: rgba(0,0,0,0.3);
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 12px; color: var(--text); font-family: 'Inter', sans-serif;
  font-size: 13px; margin-bottom: 9px;
}
.form-glass textarea:focus,
.form-glass input:focus { outline: 1px solid var(--accent2); }
.form-glass textarea { min-height: 70px; resize: vertical; }
.form-glass-cta {
  display: block; width: 100%; text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05; font-weight: 700; font-size: 13px;
  padding: 11px; border-radius: 10px; margin-top: 2px;
  border: none; font-family: 'Inter', sans-serif; cursor: pointer;
}
.form-glass-result {
  font-size: 12.5px;
  margin-top: 10px;
  text-align: center;
}
.form-glass-result.ok { color: #6FCF7A; }
.form-glass-result.err { color: var(--accent); }

/* ---------- Journal d'activité admin ---------- */
/* Le tableau utilise table-layout:fixed + colgroup (voir app.js) pour que
   les contenus longs (UUID, détails de notif) se cassent proprement dans
   leur colonne au lieu de déborder de la tuile .form-glass. Ce wrapper en
   scroll horizontal reste un filet de sécurité sur les très petits écrans. */
.audit-log-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.toggle-glass-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.toggle-glass-label .t { font-size: 12.5px; font-weight: 600; }
.toggle-glass-label .d { font-size: 10.5px; color: var(--text-dim); margin-top: 1px; max-width: 190px; line-height: 1.35; }
.toggle-switch {
  width: 40px; height: 23px; border-radius: 999px;
  background: rgba(255,255,255,0.1); position: relative; flex-shrink: 0;
  border: none; padding: 0; cursor: pointer;
}
.toggle-switch.on { background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.toggle-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 19px; height: 19px; border-radius: 50%; background: #fff;
  transition: left 0.15s ease;
}
.toggle-switch.on::after { left: 19px; }

/* ---------- Bottom tab bar (flottante, verre dépoli) ---------- */

nav.tabbar {
  position: fixed;
  bottom: 14px; left: 14px; right: 14px;
  max-width: 452px;
  margin: 0 auto;
  height: 64px;
  background: rgba(20,18,25,0.68);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  display: flex;
  z-index: 30;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
/* Boutons (index.html, navigation par onglets JS) ET liens <a> (console.html,
   navigation classique vers index.html?tab=... — voir console.html) : même
   apparence dans les deux cas. */
nav.tabbar button,
nav.tabbar a {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
nav.tabbar button .ic,
nav.tabbar a .ic {
  display: flex;
  align-items: center;
  justify-content: center;
}
nav.tabbar button .ic svg,
nav.tabbar a .ic svg {
  width: 20px;
  height: 20px;
}
nav.tabbar button.active,
nav.tabbar a.active { color: var(--accent2); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

footer.legal {
  text-align: center;
  font-size: 11px;
  color: var(--text-dim);
  padding: 24px 18px 8px;
}

@media (min-width: 640px) {
  body { max-width: 480px; margin: 0 auto; }
}

/* ---------- Pull-to-refresh manuel (voir ptr.js) ---------- */
/* Les PWA installées en mode "standalone" perdent le geste natif "tirer
   vers le bas pour rafraîchir" du navigateur : on le recrée à la main,
   avec ce petit indicateur rond fixé sous le header. */

#ptr-indicator {
  position: fixed;
  top: 6px;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -15px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--line-strong);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  z-index: 50;
  pointer-events: none;
}
#ptr-indicator svg { width: 16px; height: 16px; }
#ptr-indicator.ptr-loading svg { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ===========================================================
   Écran d'ouverture (badge animé, masque + lion) — voir index.html
   pour le script inline qui décide de le sauter (déjà vu cette
   session / prefers-reduced-motion), et splash.js qui déclenche la
   classe .leaving dès que le contenu principal est prêt (avec un
   minimum et un maximum d'attente) plutôt qu'après une durée fixe.
   =========================================================== */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.85s cubic-bezier(.45,0,.2,1), transform 0.85s cubic-bezier(.45,0,.2,1), filter 0.85s cubic-bezier(.45,0,.2,1);
}
.splash-screen.leaving {
  opacity: 0;
  transform: scale(1.045);
  filter: blur(5px);
  pointer-events: none;
}
.splash-screen.skip {
  display: none;
}

.splash-badge {
  position: relative;
  width: 52vw;
  max-width: 280px;
  min-width: 170px;
  opacity: 0;
  transform: scale(0.88) translateY(8px);
  animation: splash-badge-in 0.85s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes splash-badge-in {
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.splash-badge svg { width: 100%; height: 100%; display: block; }

#splashLionGroup {
  transform-box: view-box;
  transform-origin: 183px 145px;
  animation: splash-lion-roar 3.4s cubic-bezier(.37,0,.24,1) 0.5s 1 both;
}
@keyframes splash-lion-roar {
  0%   { transform: scale(1); }
  12%  { transform: scale(0.985); }
  30%  { transform: scale(1.022); }
  46%  { transform: scale(1.028); }
  54%  { transform: scale(1.018); }
  62%  { transform: scale(1.025); }
  75%  { transform: scale(1.008); }
  100% { transform: scale(1); }
}

#splashLionJaw {
  transform-box: view-box;
  transform-origin: 150px 168px;
  animation: splash-jaw-open 3.4s cubic-bezier(.37,0,.24,1) 0.5s 1 both;
}
@keyframes splash-jaw-open {
  0%   { transform: rotate(0deg); }
  12%  { transform: rotate(-1.5deg); }
  30%  { transform: rotate(12deg); }
  38%  { transform: rotate(9.5deg); }
  46%  { transform: rotate(13deg); }
  54%  { transform: rotate(10deg); }
  62%  { transform: rotate(12deg); }
  75%  { transform: rotate(3.5deg); }
  100% { transform: rotate(0deg); }
}

.splash-teeth-glow {
  filter: drop-shadow(0 0 0 rgba(255,175,90,0));
  animation: splash-roar-flash 3.4s cubic-bezier(.37,0,.24,1) 0.5s 1 both;
}
@keyframes splash-roar-flash {
  0%   { filter: drop-shadow(0 0 0 rgba(255,175,90,0)); }
  12%  { filter: drop-shadow(0 0 0 rgba(255,175,90,0)); }
  30%  { filter: drop-shadow(0 0 9px rgba(255,180,95,1)); }
  62%  { filter: drop-shadow(0 0 10px rgba(255,190,110,1)); }
  85%  { filter: drop-shadow(0 0 2px rgba(255,175,90,0.25)); }
  100% { filter: drop-shadow(0 0 0 rgba(255,175,90,0)); }
}

.sp-puff {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  opacity: 0;
}
.sp-puff.sp-pa { animation: splash-puff-a 2.3s cubic-bezier(.3,.05,.4,1) 0.45s 1 both; }
.sp-puff.sp-pb { animation: splash-puff-b 2.5s cubic-bezier(.3,.05,.4,1) 0.9s  1 both; }
.sp-puff.sp-pc { animation: splash-puff-c 2.1s cubic-bezier(.3,.05,.4,1) 1.35s 1 both; }
.sp-puff.sp-pd { animation: splash-puff-a 2.4s cubic-bezier(.3,.05,.4,1) 1.8s  1 both; }
@keyframes splash-puff-a {
  0%   { opacity: 0;    transform: translate(0,0) scale(0.6); }
  16%  { opacity: 0.95; }
  50%  { opacity: 0.7;  transform: translate(-4px,16px) scale(1.7); }
  100% { opacity: 0;    transform: translate(-8px,34px) scale(2.6); }
}
@keyframes splash-puff-b {
  0%   { opacity: 0;    transform: translate(0,0) scale(0.6); }
  18%  { opacity: 0.9; }
  55%  { opacity: 0.65; transform: translate(5px,17px) scale(1.8); }
  100% { opacity: 0;    transform: translate(10px,36px) scale(2.7); }
}
@keyframes splash-puff-c {
  0%   { opacity: 0;    transform: translate(0,0) scale(0.6); }
  20%  { opacity: 0.85; }
  55%  { opacity: 0.6;  transform: translate(-2px,14px) scale(1.6); }
  100% { opacity: 0;    transform: translate(-3px,30px) scale(2.4); }
}

/* Coupe toute l'animation (sauf la disparition, qui reste pilotée par
   splash.js) si l'appareil demande de réduire les animations — le badge
   reste juste visible, fixe, le temps que le contenu soit prêt, puis
   disparaît instantanément (sans transition de fondu/flou) plutôt qu'en
   s'animant. */
@media (prefers-reduced-motion: reduce) {
  .splash-badge,
  #splashLionGroup,
  #splashLionJaw,
  .splash-teeth-glow,
  .sp-puff {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .splash-screen { transition: none; }
}