/* Polices hébergées sur le site (plus de requête vers Google Fonts : l'adresse IP
   des visiteurs n'est plus transmise à Google). Sous-ensembles latin et latin-ext. */
/* latin-ext */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/HTxqL289NzCGg4MzN6KJ7eW6CYKF_jzx13HOvQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/HTxqL289NzCGg4MzN6KJ7eW6CYyF_jzx13E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjMdZwlou4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(vendor/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjMdZwlou4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(vendor/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlYHYjMdZwlou4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(vendor/fonts/TK3IWkUHHAIjg75cFRf3bXL8LICs1_Fv40pKlN4NNSeSASz7FmlWHYjMdZwl.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

: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;
}

/* Badge de la version de test (voir app.js) — [hidden] reste prioritaire. */
.beta-badge {
  margin-right: auto;
  padding: 2px 7px;
  border: 1px solid var(--accent2);
  border-radius: 6px;
  color: var(--accent2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}
.beta-badge[hidden] { display: none; }

/* Le formulaire « Un avis, un bug ? » n'existe que dans la version bêta (classe posée dans index.html). */
.is-public .feedback-btn,
.is-public #feedback-overlay { display: none !important; }

/* ---------- 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; }
.planning-hdr-btn[hidden] { display: none; }
.planning-hdr-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;
}
.planning-hdr-btn svg { width: 19px; height: 19px; }

.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; }

/* Carte "Notifications push" en tête du panneau (voir index.html/push.js) :
   reprend .notif-card telle quelle (onglet Réseaux), juste avec le padding
   horizontal du panneau cloche (18px, cohérent avec .inbox-list ci-dessous). */
.inbox-push-card-wrap {
  padding: 6px 18px 4px;
}
.inbox-push-card-wrap[hidden] { display: none; }

.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;
}
/* Sélecteur de marque (Xiaomi/Huawei/OnePlus...) dans le tuto Android — un
   <details> natif par marque plutôt qu'une détection automatique : depuis la
   réduction du User-Agent par Chrome (2024+), le modèle exact de l'appareil
   n'est plus lisible en JS sans l'API Client Hints (peu fiable, table de
   correspondance modèle→marque à maintenir) — plus simple de laisser
   l'utilisateur cliquer sur sa propre marque. */
.push-help-brand {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-dim);
}
.push-help-brand + .push-help-brand { margin-top: 6px; }
.push-help-brand summary {
  cursor: pointer;
  color: var(--accent2);
  font-weight: 600;
}
.push-help-brand[open] summary { margin-bottom: 6px; }
.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;
}

/* ---------- Bandeau flottant générique (installation, notifications) ---------- */
/* Composant réutilisé par le bandeau d'installation (#install-banner, voir
   install.js) et le bandeau notifications (#notif-banner, voir push.js) :
   même emplacement, posé juste au-dessus de la tab bar flottante (voir
   nav.tabbar plus haut), un seul affiché à la fois (voir la logique de
   priorité dans push.js). Leurs tutos respectifs réutilisent entièrement
   .inbox-overlay / .inbox-panel / .push-help-steps ci-dessus, sans classes
   propres. */

.app-banner {
  position: fixed;
  left: 14px; right: 14px;
  bottom: 92px;
  max-width: 452px;
  margin: 0 auto;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px 12px 13px;
  background: rgba(24,22,29,0.94);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.app-banner[hidden] { display: none; }
.app-banner::before {
  content: "";
  position: absolute;
  top: 0; left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}
.app-banner-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
}
/* Variante icône = glyphe SVG (bandeau notifications) plutôt qu'image
   (icône de l'app, bandeau d'installation) : même gabarit, habillage
   repris de .notif-icon (carte notifications de l'onglet Réseaux). */
.app-banner-icon-glyph {
  background: rgba(216,32,60,0.14);
  color: var(--accent2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-banner-icon-glyph svg { width: 18px; height: 18px; }
.app-banner-copy { flex: 1; min-width: 0; }
.app-banner-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.app-banner-text {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
}
.app-banner-cta {
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11.5px;
  padding: 9px 13px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05;
}
.app-banner-close {
  position: absolute;
  top: -8px; right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--text-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.app-banner-close svg { width: 11px; height: 11px; }

/* ---------- 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);
}

/* ---------- 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;
}

/* ---------- 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;
  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 affiche désormais un simple iframe (la vraie carte Google My Maps,
   voir initMap() dans app.js) — plus de tuiles/marqueurs/popups à styler
   ici, Google gère l'intérieur de la carte lui-même. */
#map {
  height: 300px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}

/* Carte maison (MapLibre) : pastilles, fiche au clic, boutons de zoom et
   copyright (voir initMap / addMapMarkers dans app.js). */
.map-pin { width: 30px; height: 30px; cursor: pointer; }
.map-pin img { width: 100%; height: 100%; display: block; }
.map-pin-dot { border-radius: 50%; border: 2px solid rgba(255,255,255,0.85); box-sizing: border-box; }
.maplibregl-popup-content {
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 10px 14px; font-family: 'Inter', sans-serif;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: var(--surface); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.map-popup-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.map-popup-link { display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--accent2); }
#map .maplibregl-ctrl-group { background: rgba(26,24,32,0.85); border: 1px solid var(--line-strong); box-shadow: none; }
#map .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line-strong); }
#map .maplibregl-ctrl-icon { filter: invert(1); opacity: 0.8; }
/* Copyright discret : replié derrière le petit "i", quasi transparent. */
#map .maplibregl-ctrl-attrib { background: rgba(20,18,22,0.55); color: var(--text-dim); font-size: 9px; opacity: 0.6; }
#map .maplibregl-ctrl-attrib a { color: var(--text-dim); }
#map .maplibregl-ctrl-attrib-button { filter: invert(1); opacity: 0.6; }
#map { background: #141216; }

/* Passage en mode sombre par inversion + rotation de teinte, appliqué à
   l'iframe entière (fond de carte ET pictos/interface Google, tout est
   inversé ensemble — pas de calque séparé possible avec un simple embed).
   Les couleurs exactes choisies dans l'éditeur My Maps se décalent un peu
   (le rouge devient plus saumon, par ex.) mais restent bien distinctes
   d'une catégorie à l'autre, et la forme des pictos ne change pas
   (demande de Lucas, 3 septembre 2026, testé et validé avant application). */
#map iframe {
  filter: invert(1) hue-rotate(180deg);
  /* Le bandeau Google (titre, "À propos", partage...) fait 67px de haut,
     mesuré de 320 à 480px de large : l'iframe est agrandie vers le haut de
     72px (marge de sécurité) et remontée d'autant, le #map (overflow:hidden)
     coupe ce qui dépasse — le cadre garde sa taille de 300px. Si Google
     change la hauteur de son bandeau, ajuster les deux valeurs 72px. */
  display: block;
  height: calc(100% + 72px);
  margin-top: -72px;
}

.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-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: 800px; /* assez haut pour la carte Notifications avec ses boutons de test et leur message */
  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 select,
.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; }
}

/* ---------- Onglet provisoire "Tombola" ---------- */
.tab-btn.tab-hidden { display: none !important; }
nav.tabbar.tabbar-six button { font-size: 9.5px; }
.tab-btn.tab-new .ic { position: relative; }
.tab-btn.tab-new .ic::after {
  content: ""; position: absolute; top: -2px; right: -6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 2px rgba(20,18,25,0.9);
}
.tb-hero {
  margin: 4px 0 10px; padding: 20px; border-radius: 22px;
  background: linear-gradient(155deg, rgba(216,32,60,0.26), rgba(240,150,40,0.16) 55%, rgba(26,24,32,0.7));
  border: 1px solid var(--line-strong);
}
.tb-eyebrow {
  font-family: 'Oswald', sans-serif; font-size: 11px; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--accent2); font-weight: 600;
  display: flex; align-items: center; gap: 7px;
}
.tb-eyebrow svg { width: 15px; height: 15px; }
.tb-title { font-family: 'Oswald', sans-serif; font-size: 26px; font-weight: 700; margin: 6px 0 4px; }
.tb-sub { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.tb-info {
  display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 600;
  color: var(--accent2); border: 1px solid rgba(240,150,40,0.5);
  background: rgba(15,14,18,0.4); padding: 6px 12px; border-radius: 20px;
}
.tb-cta {
  display: inline-flex; align-items: center; margin-top: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #2E0A05; font-weight: 700; font-size: 13.5px;
  padding: 12px 20px; border-radius: 13px; text-decoration: none;
}
.tb-sec {
  display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px;
  font-family: 'Oswald', sans-serif; font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim);
}
.tb-sec::after { content: ""; flex: 1; border-top: 1px dashed var(--line-strong); }
.tb-prog { display: flex; align-items: center; gap: 10px; margin: 6px 2px 14px; }
.tb-prog span { font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 600; white-space: nowrap; }
.tb-prog .pb { flex: 1; height: 8px; border-radius: 6px; background: rgba(255,255,255,0.09); overflow: hidden; }
.tb-prog .pb i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 6px; transition: width .4s; }
/* Ticket de lot : talon (numéro) + corps (nom, contenu avec logos partenaires). */
.tk { position: relative; display: flex; margin-bottom: 18px; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--line-strong); }
.tk .stub { width: 74px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 4px; border-right: 2px dashed var(--line-strong); }
.tk .lt { font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 2px; color: var(--text-dim); }
.tk .ln { font-family: 'Oswald', sans-serif; font-size: 36px; font-weight: 700; line-height: 1.05; }
.tk .nt, .tk .nb { position: absolute; left: 63px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); }
.tk .nt { top: -11px; } .tk .nb { bottom: -11px; }
.tk .mn { flex: 1; min-width: 0; padding: 12px 14px 6px; }
.tk .nm { font-family: 'Oswald', sans-serif; font-size: 18px; font-weight: 700; line-height: 1.2; margin: 4px 0 8px; overflow-wrap: anywhere; }
.tk .flag { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #2E0A05; padding: 2px 9px; border-radius: 20px; }
.tk .flag.gold { background: linear-gradient(135deg, #F2C14E, var(--accent2)); }
.tk .flag.pulse::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #2E0A05; margin-right: 6px; vertical-align: 1px; }
.tk .il { list-style: none; margin: 0; padding: 0; }
.tk .il li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.tk .il .lab { flex: 1; min-width: 0; line-height: 1.3; font-weight: 500; }
.tk .il .lab b { color: var(--accent2); }
.tk .il .by { font-size: 11px; color: var(--text-dim); text-align: right; flex-shrink: 0; max-width: 96px; }
.tk .lg { width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0; object-fit: contain; background: #fff; display: block; }
.tk .lg.ini { display: flex; align-items: center; justify-content: center; font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 9.5px; color: #fff; background: linear-gradient(135deg, #7A1626, var(--accent)); }
.tk.next { border-color: var(--accent2); box-shadow: 0 0 0 1px var(--accent2), 0 0 26px rgba(240,118,42,0.3); background: linear-gradient(150deg, rgba(216,32,60,0.22), rgba(240,150,40,0.12) 55%, rgba(26,24,32,0.7)); }
.tk.next .ln { font-size: 44px; }
.tk.next .nm { font-size: 23px; }
.tk.next .il li { padding: 8px 0; font-size: 13.5px; }
.tk.next .lg { width: 32px; height: 32px; }
.tk.next .by { font-size: 12px; }
.tk.jackpot { background: linear-gradient(135deg, rgba(242,193,78,0.2), rgba(216,32,60,0.22) 60%, rgba(26,24,32,0.7)); border-color: rgba(242,193,78,0.65); }
.tk.drawn { background: rgba(111,207,122,0.05); border-color: rgba(111,207,122,0.28); }
.tk.drawn .ln { color: var(--text-dim); }
.tk.drawn .il { opacity: 0.7; }
.tk .won { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: -2px 0 8px; }
.tk .won b { font-family: 'Oswald', sans-serif; font-size: 19px; font-weight: 700; color: #6FCF7A; overflow-wrap: anywhere; }
.tk .won .fn { color: var(--text-dim); }
.tk .won .ck { color: #6FCF7A; font-weight: 700; }
.tk .stamp { margin-left: auto; transform: rotate(-6deg); flex-shrink: 0; border: 2px solid #6FCF7A; color: #6FCF7A; font-family: 'Oswald', sans-serif; font-weight: 700; letter-spacing: 2px; font-size: 13px; padding: 1px 8px; border-radius: 6px; }
/* Pop-up « nouveau gagnant » plein écran, fermée d'un tap. */
.tb-pop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8,7,10,0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: tbPopIn .25s ease-out; }
.tb-pop .box { position: relative; width: 100%; max-width: 340px; text-align: center; padding: 28px 20px 22px; border-radius: 24px; border: 1px solid var(--accent2); background: linear-gradient(155deg, rgba(216,32,60,0.34), rgba(240,150,40,0.2) 55%, rgba(26,24,32,0.92)); box-shadow: 0 0 60px rgba(240,118,42,0.35); animation: tbPopBox .45s cubic-bezier(.2,1.3,.4,1); }
.tb-pop .eyebrow { font-family: 'Oswald', sans-serif; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--accent2); }
.tb-pop .congrats { font-family: 'Oswald', sans-serif; font-size: 20px; font-weight: 600; margin-top: 10px; color: #F2C14E; }
.tb-pop .pseudo { font-family: 'Oswald', sans-serif; font-size: 40px; font-weight: 700; line-height: 1.1; margin-top: 8px; overflow-wrap: anywhere; }
.tb-pop .first { font-size: 16px; color: var(--text-dim); margin-top: 4px; }
.tb-pop .lotname { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.2; }
.tb-pop .lotname span { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--text-dim); margin-bottom: 4px; }
.tb-pop .close { margin-top: 22px; border: 1px solid var(--line-strong); background: rgba(255,255,255,0.06); color: var(--text); font: inherit; font-size: 13px; padding: 10px 26px; border-radius: 12px; cursor: pointer; }
.tb-pop .confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tb-pop .confetti i { position: absolute; top: -14px; width: 8px; height: 14px; border-radius: 2px; animation: tbFall 3.2s linear infinite; }
.tb-pop .box > * { animation: tbUp .5s ease-out both; }
.tb-pop .congrats { animation-delay: .15s; }
.tb-pop .pseudo { animation: tbUp .6s cubic-bezier(.2,1.4,.4,1) .3s both, tbGlow 2.2s ease-in-out 1s infinite; }
.tb-pop .first { animation-delay: .45s; }
.tb-pop .lotname { animation-delay: .65s; }
.tb-pop .close { animation-delay: .9s; }
@keyframes tbUp { from { opacity: 0; transform: translateY(14px) scale(.96); } }
@keyframes tbGlow { 50% { text-shadow: 0 0 18px rgba(240,150,40,0.8); } }
@keyframes tbFall { to { transform: translateY(110vh) rotate(540deg); } }
@keyframes tbPopIn { from { opacity: 0; } }
@keyframes tbPopBox { from { transform: scale(.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tb-pop, .tb-pop .box, .tb-pop .box > * { animation: none !important; } .tb-pop .confetti { display: none; } }
.tb-suggest-wrap { position: relative; }
.tb-suggest { position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px; z-index: 20; background: #1B1822; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
.tb-suggest-item { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; padding: 10px 12px; background: none; border: none; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.tb-suggest-item:last-child { border-bottom: none; }
.tb-suggest-item:hover, .tb-suggest-item:focus { background: rgba(240,118,42,0.15); }
.tb-suggest-item b { font-family: 'Oswald', sans-serif; font-size: 15px; }
.tb-suggest-item i { color: var(--text-dim); font-weight: 400; font-style: italic; font-family: 'Inter', sans-serif; font-size: 12px; }
.tb-suggest-item span { color: var(--text-dim); font-size: 12px; }
.tb-pushcta { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line-strong); background: var(--glass-bg); font-size: 12.5px; line-height: 1.4; }
.tb-pushcta span { flex: 1; color: var(--text-dim); }
.tb-pushcta button { flex-shrink: 0; border: none; border-radius: 11px; padding: 9px 16px; font: inherit; font-size: 12.5px; font-weight: 700; color: #2E0A05; background: linear-gradient(135deg, var(--accent), var(--accent2)); cursor: pointer; }
/* Carte Notifications des Paramètres : ligne du haut (icône, état, Activer/Désactiver),
   puis un bloc d'actions pleine largeur séparé par un filet (test, aide). */
#settings-push-card { flex-wrap: wrap; row-gap: 12px; }
#settings-push-card .notif-extra {
  flex-basis: 100%; display: flex; flex-direction: column; align-items: stretch; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.push-test-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 10px 16px; border-radius: 12px; border: 1px solid var(--accent2);
  background: rgba(240,118,42,0.14); color: var(--accent2);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.push-test-btn::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 4.2 1.2 6 2 7H4c.8-1 2-2.8 2-7z'/%3E%3Cpath d='M9.5 19a2.5 2.5 0 0 0 5 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 4.2 1.2 6 2 7H4c.8-1 2-2.8 2-7z'/%3E%3Cpath d='M9.5 19a2.5 2.5 0 0 0 5 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.push-test-explain { border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); display: flex; flex-direction: column; gap: 8px; }
.push-test-explain[hidden] { display: none; }
.push-test-explain .t { font-weight: 700; font-size: 13px; }
.push-test-explain .d { font-size: 12px; color: var(--text-dim); line-height: 1.45; margin: 0; }
.push-test-explain ol { margin: 0; padding-left: 20px; font-size: 12px; line-height: 1.5; color: var(--text-dim); display: flex; flex-direction: column; gap: 5px; }
.push-test-explain ol strong, .push-test-explain .d strong { color: var(--text); }
.push-test-btn-alt { background: transparent; }
.push-test-btn-alt::before { display: none; }
.push-test-btn:disabled { opacity: 0.6; cursor: default; }
#settings-push-card .push-help-link { align-self: center; margin-top: 0; padding: 2px 0; font-size: 11.5px; }
#settings-push-card .push-test-last { font-size: 11.5px; line-height: 1.4; text-align: center; color: var(--text-dim); }
.push-test-last:empty { display: none; }
.push-test-last.ok { color: #6FCF7A; }
.push-test-last.err { color: #F0762A; }
.push-test-status { text-align: center; margin-top: 0; }
.push-test-status { text-align: center; margin-top: 0; padding: 0 6px; }
.push-test-status { font-size: 11.5px; line-height: 1.4; margin-top: 4px; color: var(--text-dim); }
.push-test-status:empty { display: none; }
.push-test-status.ok { color: #6FCF7A; }
.push-test-status.err { color: #F0762A; }
.planning-overlay { position: fixed; inset: 0; z-index: 1500; display: flex; flex-direction: column; background: var(--bg); }
.planning-overlay[hidden] { display: none; }
.planning-bar { display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; border-bottom: 1px solid var(--line); background: rgba(15,14,18,0.96); }
.planning-back, .planning-ext { background: none; border: none; color: var(--accent2); font: inherit; font-size: 14px; font-weight: 700; padding: 6px 4px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.planning-ext { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-left: auto; }
.planning-title { font-family: 'Oswald', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: 0.3px; }
.planning-overlay iframe { flex: 1; width: 100%; border: 0; background: var(--bg); }