:root {
  --bg: #0f172a;
  --card: #1e293b;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #38bdf8;
  --accent-dark: #0ea5e9;
  --error: #f87171;
  --success: #4ade80;
  --gold: #fbbf24;
  --border: #334155;
  --nav-bg: rgba(15, 23, 42, 0.92);
  --input-bg: #0f172a;
  --hover-bg: #1e293b;
  --body-grad: linear-gradient(160deg, #0f172a, #1e1b4b);
  --skel: #334155;
  --skel-hi: #3d4f6b;
}

/* ---------- Thème clair ---------- */
[data-theme="light"] {
  --bg: #f1f5f9;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --nav-bg: rgba(255, 255, 255, 0.92);
  --input-bg: #f8fafc;
  --hover-bg: #eef2f7;
  --body-grad: linear-gradient(160deg, #f8fafc, #e0f2fe);
  --skel: #e2e8f0;
  --skel-hi: #f1f5f9;
}
[data-theme="light"] .card { box-shadow: 0 6px 24px rgba(15, 23, 42, 0.08); }
[data-theme="light"] .message.error { color: #991b1b; }
[data-theme="light"] .message.success { color: #166534; }
[data-theme="light"] .message.info { color: #075985; }
[data-theme="light"] .star { color: #cbd5e1; }
[data-theme="light"] .settings-menu { box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15); }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--body-grad);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
}

/* ---------- Barre de navigation ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0.7rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 0.4rem;
}

.nav-links a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.45rem 0.9rem;
  border-radius: 10px;
  font-weight: 600;
}

.nav-links a:hover { color: var(--text); background: var(--hover-bg); }
.nav-links a.active { color: #082f49; background: var(--accent); }

/* Zone connexion : toujours en haut à droite */
.auth-area {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.auth-area .user-email {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.9rem;
  white-space: nowrap;
}

.btn:hover { border-color: var(--accent); }

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #082f49;
}

.btn.primary:hover { background: var(--accent-dark); }

/* ---------- Contenu ---------- */
main {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  min-height: 70vh;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
  margin-bottom: 1.2rem;
}

.hidden { display: none; }
[hidden] { display: none !important; } /* l'attribut hidden gagne toujours sur le display des composants (lot n° 33) */
.small { font-size: 0.8rem; color: var(--muted); }

/* ---------- Page d'accueil ---------- */
.hero {
  text-align: center;
  padding: 3rem 1.5rem;
  margin-bottom: 1.5rem;
}

.hero h1 {
  font-size: 2.6rem;
  margin: 0 0 0.6rem;
}

.hero h1 .accent { color: var(--accent); }

.hero p { color: var(--muted); font-size: 1.1rem; margin: 0 0 1.6rem; }

.hero-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-actions .btn { padding: 0.75rem 1.6rem; font-size: 1rem; }

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.feature h3 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.feature p { color: var(--muted); margin: 0; font-size: 0.92rem; }

.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps li {
  counter-increment: step;
  padding: 0.9rem 0 0.9rem 3rem;
  position: relative;
  border-bottom: 1px solid var(--border);
}
.steps li:last-child { border-bottom: none; }
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--accent);
  color: #082f49;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps p { margin: 0.3rem 0 0; color: var(--muted); font-size: 0.92rem; }

/* ---------- Formulaires ---------- */
.form h2 { margin: 0 0 1rem; font-size: 1.25rem; }
.form label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.8rem 0 0.3rem;
}
.form input, .form textarea {
  width: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  resize: vertical;
}
.form input:focus, .form textarea:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}
/* Bouton plein largeur des formulaires UNIQUEMENT (lot n° 9 : la règle
   générique .primary polluait tous les boutons « btn primary » — marge de
   1.2rem et police 1rem — d'où les boutons décalés/plus gros). */
.form .primary, .msg-form .primary {
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.8rem;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #082f49;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.form .primary:hover, .msg-form .primary:hover { background: var(--accent-dark); }

.tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.tab {
  flex: 1;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.95rem;
}
.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #082f49;
  font-weight: 600;
}

.message {
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
}
.message.error { background: rgba(248, 113, 113, 0.12); border: 1px solid var(--error); color: #fecaca; }
.message.success { background: rgba(74, 222, 128, 0.12); border: 1px solid var(--success); color: #bbf7d0; }
.message.info { background: rgba(56, 189, 248, 0.12); border: 1px solid var(--accent); color: #bae6fd; }

/* ---------- Fenêtre modale de connexion ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(2, 6, 23, 0.75);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 5vh 1rem 1rem;
}
.modal-overlay.hidden { display: none; }

.modal-card {
  width: 100%;
  max-width: 420px;
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
}

.modal-close {
  position: absolute;
  top: 0.7rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { color: var(--text); }

/* ---------- Blog ---------- */
.blog-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.blog-header h1 { margin: 0; }

.post-card { cursor: pointer; transition: border-color 0.15s; }
.post-card:hover { border-color: var(--accent); }
.post-card h2 { margin: 0 0 0.4rem; font-size: 1.3rem; }
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a:hover { color: var(--accent); }

.post-meta { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.7rem; }
.post-excerpt { color: var(--text); margin: 0 0 0.9rem; line-height: 1.5; }

.post-stats {
  display: flex;
  gap: 1rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.88rem;
  flex-wrap: wrap;
}
.post-stats .avg { color: var(--gold); font-weight: 700; }

.post-full p { line-height: 1.65; white-space: pre-wrap; }
.back-link { color: var(--accent); text-decoration: none; font-weight: 600; display: inline-block; margin-bottom: 0.6rem; }
.back-link:hover { text-decoration: underline; }

/* Réactions */
.reactions { display: flex; gap: 0.6rem; margin: 1.2rem 0; flex-wrap: wrap; }
.reaction {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.reaction .count { font-size: 0.85rem; color: var(--muted); }
.reaction.active { border-color: var(--accent); background: rgba(56, 189, 248, 0.15); }
.reaction.active .count { color: var(--accent); }
.reaction:disabled { opacity: 0.55; cursor: not-allowed; }

/* Notes étoiles */
.rating-block { margin: 1.2rem 0; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.rating-block .label { color: var(--muted); font-size: 0.88rem; margin-bottom: 0.5rem; }
.star-row { display: inline-flex; gap: 0.15rem; }
.star {
  background: none;
  border: none;
  font-size: 1.7rem;
  cursor: pointer;
  color: #475569;
  padding: 0 0.1rem;
}
.star.filled { color: var(--gold); }
.star:disabled { cursor: default; }
.rating-summary { color: var(--muted); font-size: 0.88rem; margin-top: 0.4rem; }
.rating-summary strong { color: var(--gold); }

/* Commentaires */
.comments h3 { margin: 0 0 0.8rem; }
.comment {
  border-top: 1px solid var(--border);
  padding: 0.8rem 0;
}
.comment:first-of-type { border-top: none; }
.comment-head { display: flex; gap: 0.6rem; align-items: baseline; margin-bottom: 0.3rem; }
.comment-author { font-weight: 700; font-size: 0.88rem; }
.comment-date { color: var(--muted); font-size: 0.78rem; }
.comment p { margin: 0; line-height: 1.5; }
.empty { color: var(--muted); font-style: italic; }

footer { padding: 1.5rem; text-align: center; }

/* Grille des articles du blog (2 colonnes sur ordinateur) */
.posts-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
.posts-grid .post-card { margin-bottom: 0; }

/* Mise en page d'un article : contenu + barre latérale (ordinateur) */
.post-layout {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}
.post-side { display: flex; flex-direction: column; gap: 1.2rem; }
.side-card h3 { margin: 0 0 0.6rem; font-size: 1rem; }
.side-card p { margin: 0.2rem 0; }
.stat-list { list-style: none; padding: 0; margin: 0; }
.stat-list li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.stat-list li:last-child { border-bottom: none; }
.stat-list strong { color: var(--gold); }

/* ---------- Page personnelle ---------- */
.author-link { color: var(--accent); text-decoration: none; font-weight: 600; }
.author-link:hover { text-decoration: underline; }
.profile-head { display: flex; gap: 1.2rem; align-items: center; }
.avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  color: #0f172a;
  flex-shrink: 0;
}
.profile-info h1 { margin: 0 0 0.3rem; font-size: 1.6rem; }
.profile-info p { margin: 0; }
.profile-posts-title { margin: 1.6rem 0 1rem; font-size: 1.3rem; }

/* ---------- Connexion sociale (Google / Facebook) ---------- */
.oauth-block { margin-top: 1.1rem; }
.oauth-sep {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: var(--muted);
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}
.oauth-sep::before, .oauth-sep::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
}
.oauth-icon {
  font-weight: 800;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #0f172a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.oauth-icon img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.oauth-google {
  background: transparent;
}
.oauth-github {
  background: #fff;
}
.oauth-apple {
  background: #000;
}
.oauth-twitter,
.oauth-discord,
.oauth-spotify {
  background: transparent;
}
.oauth-facebook {
  background: transparent;
}

/* ---------- Photos ---------- */
.mini-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: -4px;
  margin-right: 0.35rem;
}
.mini-letter { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-size: 0.62rem; font-weight: 800; }
.post-image {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  margin: 0.4rem 0 0.8rem;
}
.post-image-full {
  max-width: 100%;
  border-radius: 10px;
  margin: 0.8rem 0;
}
.avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-edit { margin-top: 0.6rem; }
.avatar-edit summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.avatar-edit .form { margin-top: 0.6rem; }

/* ---------- Paramètres (langue) ---------- */
.icon-btn { font-size: 1.05rem; padding: 0.45rem 0.55rem; line-height: 1; }
.settings-wrap { position: relative; }
.settings-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem;
  min-width: 190px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 100;
}
.settings-title {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.5rem 0.35rem;
}
.settings-label { font-size: 0.85rem; color: var(--muted); padding: 0 0.5rem 0.35rem; }
.settings-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  padding: 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.92rem;
}
.settings-item:hover { background: rgba(56, 189, 248, 0.12); }
.settings-item.active { background: rgba(251, 191, 36, 0.15); color: var(--gold); font-weight: 600; }

/* ---------- Améliorations ordinateur ---------- */
@media (min-width: 900px) {
  .hero { padding: 4.5rem 2rem; }
  .hero h1 { font-size: 3.2rem; }
  .hero p { font-size: 1.2rem; }

  .home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
  }
  .home-grid .card { margin-bottom: 0; }

  .features { grid-template-columns: repeat(3, 1fr); }

  .posts-grid { grid-template-columns: repeat(2, 1fr); }

  .post-layout {
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    align-items: start;
  }
  .post-side { position: sticky; top: 90px; }
}

/* ---------- Relooking : animations, squelettes, toasts, fil, badges ---------- */
@media (prefers-reduced-motion: no-preference) {
  main > * { animation: viewFade 0.25s ease; }
  @keyframes viewFade {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
  }
  .modal-card { animation: modalIn 0.2s ease-out; }
  @keyframes modalIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  .card { transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; }
  .post-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  }
  .btn, .reaction, .star { transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease; }
  .btn:active { transform: scale(0.97); }
  .reaction:active { transform: scale(1.18); }
  .star:active { transform: scale(1.3); }
}

/* Squelettes de chargement */
.skel {
  background: linear-gradient(90deg, var(--skel) 25%, var(--skel-hi) 50%, var(--skel) 75%);
  background-size: 200% 100%;
  border-radius: 8px;
}
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: shimmer 1.3s infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }
}
.skel-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skel-title { height: 20px; width: 60%; margin: 0.8rem 0; }
.skel-line { height: 12px; margin: 0.5rem 0; }
.skel-line.short { width: 75%; }

/* Notifications toast */
#toasts {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
  max-width: 90vw;
  animation: toastIn 0.25s ease;
  transition: opacity 0.3s, transform 0.3s;
}
.toast.success { border-color: var(--success); }
.toast.error { border-color: var(--error); }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
}
.toast.out { opacity: 0; transform: translateY(10px); }

/* Fil social */
.post-head { display: flex; gap: 0.7rem; align-items: center; margin-bottom: 0.5rem; }
.feed-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.feed-avatar-letter {
  background: linear-gradient(135deg, var(--gold), var(--accent));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #0f172a;
}
.post-head-info { display: flex; flex-direction: column; }
.post-head-name { font-weight: 700; font-size: 0.92rem; }
.post-head-date { color: var(--muted); font-size: 0.78rem; }
.composer-head { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 0.8rem; }
.composer-head h2 { margin: 0; font-size: 1.15rem; }

/* Bannière de profil */
.profile-top { padding: 0 1.5rem 1.5rem; overflow: hidden; }
.profile-banner {
  height: 150px;
  margin: 0 -1.5rem 1.2rem;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(120deg, var(--accent-dark), var(--accent));
  background-size: cover;
  background-position: center;
}
.banner-edit { margin-top: 0.6rem; }
.banner-edit summary { cursor: pointer; color: var(--accent); font-size: 0.9rem; }
.banner-edit .form { margin-top: 0.6rem; }

/* Refonte page membre (2026-10-29, approuvée par l'utilisateur,
   style Facebook) : fini les cartes-bulles empilées. En-tête à plat
   pleine largeur (même traitement que le blog : la route « user »
   rejoint wide-page), bannière bord à bord avec avatar qui
   chevauche, chiffres en bande horizontale avec Abonnés /
   Abonnements cliquables, puis deux colonnes sur ordinateur
   (infos / photos / outils du personnel à gauche, publications à
   droite en une seule colonne) et une seule colonne sur mobile. */
.profile-header { margin-bottom: 1.25rem; }
.profile-header .profile-banner { height: 170px; margin: -2rem -1.5rem 0; border-radius: 0; }
.profile-header .profile-head { padding: 0 0.25rem; align-items: flex-start; }
.profile-header .avatar, .profile-header .avatar-img { width: 92px; height: 92px; font-size: 2.3rem; border: 3px solid var(--bg); background-color: var(--card); margin-top: -46px; }
/* Chevauchement avatar (corrigé après le test visiteur v78) : la première version décalait tout le bloc tête de -36 px, mais quand la colonne infos (nom + badges sur 3 lignes) est plus haute que l'avatar, l'alignement en bas repoussait l'avatar SOUS la bannière avec un espace, sans aucun chevauchement. Maintenant le décalage négatif est sur l'avatar lui-même (-46 px) : il embarque toujours sur la bannière de moitié, peu importe la hauteur des badges, et le nom commence juste sous la bannière. */
.profile-edit-all { margin-top: 0.6rem; }
.profile-edit-all > summary { cursor: pointer; color: var(--accent); font-size: 0.95rem; font-weight: 600; }
.profile-stats { display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 1rem; }
.profile-stat { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.55rem 0.15rem; min-width: 0; }
.profile-stat strong { color: var(--gold); font-size: 1.05rem; }
.profile-stat span { color: var(--muted); font-size: 0.72rem; text-align: center; }
.profile-stat-btn { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
.profile-stat-btn:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.profile-follow-panel { border-bottom: 1px solid var(--border); padding: 0.5rem 0.25rem; max-height: 260px; overflow-y: auto; }
.profile-follow-panel.hidden { display: none; }
.profile-follow-row { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.25rem; color: var(--text); text-decoration: none; border-radius: 8px; }
.profile-follow-row:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.profile-cols { display: grid; grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
.profile-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.profile-side-box { padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.profile-side-box h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.profile-side-box p { margin: 0.25rem 0; }
.profile-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.profile-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.profile-posts-grid { grid-template-columns: 1fr; }
.profile-main { min-width: 0; }
.profile-main .profile-posts-title { margin-top: 0; }
@media (min-width: 900px) {
  .profile-cols { grid-template-columns: 320px minmax(0, 1fr); gap: 1.75rem; }
  .profile-side { position: sticky; top: 84px; }
  .profile-header .profile-banner { height: auto; aspect-ratio: 3 / 1; }
}
@media (max-width: 860px) {
  .profile-header .profile-banner { margin-top: -2rem; }
  .profile-stat span { font-size: 0.66rem; }
}

/* Badges de membres */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.4);
  margin-left: 0.4rem;
  vertical-align: 1px;
  white-space: nowrap;
}
.badge-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.badge-row .badge { margin-left: 0; }

@media (max-width: 560px) {
  .auth-area .user-email { display: none; }
  .hero h1 { font-size: 2rem; }
}

/* ---------- Navigation mobile : 2 lignes, aucun débordement horizontal ---------- */
@media (max-width: 860px) {
  body { overflow-x: hidden; }
  .nav-inner {
    flex-wrap: wrap;
    gap: 0.45rem 0.7rem;
    padding: 0.55rem 0.9rem;
  }
  .brand { order: 1; }
  .auth-area {
    order: 2;
    margin-left: auto;
    gap: 0.45rem;
    flex-wrap: nowrap;
  }
  .auth-area .user-email { display: none; }
  .auth-area .btn { padding: 0.45rem 0.6rem; }
  .settings-wrap { order: 3; }
  .nav-links {
    order: 4;
    flex: 1 1 100%;
    justify-content: space-between;
    gap: 0.25rem;
  }
  .nav-links a { padding: 0.4rem 0.55rem; font-size: 0.95rem; }
  /* Le panneau de notifications devient plein largeur utile, bien cadré */
}

/* ---------- Pack social : onglets, recherche, notifications, messages ---------- */
.seg-tabs { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.seg-tab {
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.seg-tab.active { background: var(--accent); border-color: var(--accent); color: #082f49; }

.search-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 1rem;
}
.search-input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* Boutons icônes avec compteur (notifications, messages) */
.icon-wrap { position: relative; display: inline-flex; }
.badge-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--error);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.badge-count.hidden { display: none; }

/* Panneau de notifications */
.notif-wrap { position: relative; }
.notif-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  width: min(340px, 88vw);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 100;
  padding: 0.5rem;
  max-height: 60vh;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.55rem 0.5rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.notif-item:hover { background: rgba(56, 189, 248, 0.12); }
.notif-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 0.4rem;
  flex-shrink: 0;
}
.notif-item .dot.read { background: transparent; }
.notif-item .when { color: var(--muted); font-size: 0.75rem; }
.notif-actions { padding: 0.3rem 0.5rem; }
.notif-actions button {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0;
}

/* Actions du propriétaire (modifier / supprimer) */
.owner-actions { display: flex; gap: 0.5rem; margin: 0.8rem 0; flex-wrap: wrap; }
.btn.danger { border-color: var(--error); color: var(--error); }
.btn.danger:hover { background: rgba(248, 113, 113, 0.12); }
.btn.small { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
.comment-actions { display: flex; gap: 0.4rem; margin-top: 0.3rem; }
.comment-actions button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
}
.comment-actions button:hover { color: var(--accent); }
/* Bouton d'envoi du formulaire de modification de commentaire :
   un VRAI bouton visible — retour utilisateur 2026-10-29 : le
   bouton d'envoi en petit texte gris (règle .comment-actions
   button : fond aucun, gris, padding 0) ne se voyait pas, « je
   n'ai pas le bouton pour envoyer le message ». (Pour les
   réponses, la barre ancrée .reply-dock plus bas a remplacé
   l'ancien formulaire en ligne.) */
.comment-edit-form .comment-actions { align-items: center; gap: 0.7rem; margin-top: 0.5rem; }
.comment-edit-form .comment-actions button[type="submit"] {
  background: var(--accent-dark);
  color: #082f49;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.45rem 1.15rem;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.comment-edit-form .comment-actions button[type="submit"]:hover { filter: brightness(1.12); }

/* Barre de réponse ancrée en bas, façon Facebook (2026-10-29) :
   « Réponse à @pseudo · Annuler », zone d'écriture ronde, bouton
   d'envoi avion en papier à droite, aucun bouton caméra ni plus.
   Le décalage au-dessus du clavier est ajusté en JS
   (visualViewport, voir renderPostDetail). */
.reply-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: var(--card); border-top: 1px solid var(--border); box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.35); padding: 0.55rem 0.7rem calc(0.55rem + env(safe-area-inset-bottom)); }
.reply-dock.hidden { display: none; }
.reply-dock-inner { max-width: 1100px; margin: 0 auto; }
.reply-dock-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.45rem; }
.reply-dock-head strong { color: var(--accent); }
.reply-dock-head button { margin-left: auto; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.85rem; padding: 0; }
.reply-dock-form { display: flex; gap: 0.5rem; align-items: flex-end; }
.reply-dock-form textarea { flex: 1; border-radius: 20px; background: var(--input-bg); border: 1px solid var(--border); color: var(--text); font: inherit; padding: 0.6rem 0.95rem; resize: none; max-height: 120px; min-height: 42px; overflow-y: auto; scrollbar-width: none; }
.reply-dock-form textarea::-webkit-scrollbar { display: none; width: 0; height: 0; }
.reply-dock-form textarea:focus { border-color: var(--accent); outline: none; }
.cropper-overlay { position: fixed; inset: 0; z-index: 130; background: rgba(2, 6, 17, 0.78); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.cropper-card { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; width: min(94vw, 460px); max-height: 92vh; overflow-y: auto; }
.cropper-card h3 { margin: 0 0 0.7rem; }
.cropper-stage { position: relative; overflow: hidden; background: #000; border-radius: 12px; touch-action: none; cursor: grab; width: 100%; }
.cropper-stage.circle { border-radius: 50%; }
.cropper-stage img { position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cropper-zoom { width: 100%; margin-top: 0.7rem; }
.cropper-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 0.7rem; }
.reply-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: none; background: var(--accent-dark); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.reply-send svg { width: 20px; height: 20px; fill: #082f49; display: block; }
.reply-send:hover { filter: brightness(1.12); }
.link-danger:hover { color: var(--error) !important; }

/* Bouton Suivre */
.follow-btn.following { background: rgba(74, 222, 128, 0.15); border-color: var(--success); color: var(--success); }

/* Annuaire des membres */
.member-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.member-card { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; margin-bottom: 0; }
.member-top { display: flex; gap: 0.7rem; align-items: center; }
.member-card .small { margin: 0; }

/* Messagerie */
.convo-item {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  padding: 0.9rem 0;
  border-top: 1px solid var(--border);
  cursor: pointer;
}
.convo-item:first-of-type { border-top: none; }
.convo-item:hover { background: var(--hover-bg); }
.convo-main { flex: 1; min-width: 0; }
.convo-last {
  color: var(--muted);
  font-size: 0.86rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.convo-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #082f49;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ---------- Messagerie refondue (lot n° 11) ---------- */
.convo-card { padding: 0; overflow: hidden; }
.convo-card .empty { padding: 1.2rem 1rem; }
.convo-item { padding: 0.8rem 1rem; gap: 0.8rem; cursor: pointer; }
.convo-item .feed-avatar { width: 48px; height: 48px; font-size: 1.1rem; }
.convo-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; }
.convo-time { font-size: 0.72rem; color: var(--muted); flex: none; }
.convo-item.unread .convo-last { color: var(--text); font-weight: 600; }
main.thread-mode { max-width: 940px; padding: 0 0 5.4rem; }
.thread-screen { display: flex; flex-direction: column; }
.thread-back {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--text); text-decoration: none;
}
.thread-back:hover { background: var(--hover-bg); }
.thread-back svg { width: 22px; height: 22px; display: block; }
.thread-head {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border);
  background: var(--card);
}
.thread-head .feed-avatar { width: 40px; height: 40px; }
.thread-head h2 { font-size: 1.05rem; margin: 0; }
.thread-list { display: flex; flex-direction: column; gap: 0.55rem; padding: 1rem; scroll-margin-bottom: 5.4rem; }
.msg-day { text-align: center; margin: 0.5rem 0 0.2rem; }
.msg-day span {
  background: var(--hover-bg); color: var(--muted);
  font-size: 0.72rem; font-weight: 700;
  padding: 0.22rem 0.7rem; border-radius: 999px;
}
.msg-row { display: flex; gap: 0.45rem; align-items: flex-end; }
.msg-row.grp { margin-top: -0.3rem; }
.msg-row.mine { justify-content: flex-end; }
.msg-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.msg-avatar-letter {
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #082f49; font-weight: 800; font-size: 0.8rem;
}
.msg-avatar-spacer { background: transparent; }
.msg-col { display: flex; flex-direction: column; max-width: 78%; }
.msg-row.mine .msg-col { align-items: flex-end; }
.msg-bubble {
  padding: 0.6rem 0.9rem;
  border-radius: 18px;
  background: var(--hover-bg);
  font-size: 0.98rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg-row.mine .msg-bubble { background: var(--accent); color: #082f49; border-bottom-right-radius: 4px; }
.msg-row:not(.mine) .msg-bubble { border-bottom-left-radius: 4px; }
.msg-when { font-size: 0.7rem; color: var(--muted); margin-top: 0.2rem; }
.msg-row.mine .msg-when { text-align: right; }
.msg-form {
  display: flex; gap: 0.55rem; align-items: flex-end;
  border-top: 1px solid var(--border); padding: 0.65rem 0.7rem;
}
.msg-form textarea {
  flex: 1;
  padding: 0.6rem 0.95rem;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  resize: none;
  max-height: 120px;
}
.msg-send {
  width: 42px; height: 42px; flex: none;
  border: 1px solid transparent; border-radius: 50%;
  background: var(--accent); color: #082f49;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.msg-send svg { width: 20px; height: 20px; display: block; }
.msg-send:hover { filter: brightness(1.1); }
main.thread-mode .msg-form {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: 0; width: 100%; max-width: 940px;
  background: var(--card);
  padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
  z-index: 40;
}
@media (max-width: 860px) {
  .thread-list { padding: 0.8rem 0.6rem; }
  .msg-col { max-width: 86%; }
}

/* ---------- Polissage esthétique 2 ---------- */
.navbar { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.brand {
  color: var(--accent);
}
.btn.primary, .primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35);
}
.btn.primary:hover, .primary:hover {
  background: linear-gradient(135deg, var(--accent-dark), var(--accent));
}
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(251, 191, 36, 0.14), transparent 45%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero h1 .accent {
  color: var(--accent);
  -webkit-text-fill-color: var(--accent);
}
.reaction.active[data-reaction="like"] { border-color: var(--accent); background: rgba(56, 189, 248, 0.15); }
.reaction.active[data-reaction="star"] { border-color: var(--gold); background: rgba(251, 191, 36, 0.15); }
.reaction.active[data-reaction="star"] .count { color: var(--gold); }
.reaction.active[data-reaction="heart"] { border-color: #f472b6; background: rgba(244, 114, 182, 0.15); }
.reaction.active[data-reaction="heart"] .count { color: #f472b6; }
.post-card .post-image { transition: transform 0.3s ease; }
.post-card:hover .post-image { transform: scale(1.02); }
.seg-tab.active { box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3); }
.badge { box-shadow: 0 2px 8px rgba(251, 191, 36, 0.22); }
footer {
  border-top: 1px solid var(--border);
  background: var(--nav-bg);
  margin-top: 2rem;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #475569; border-radius: 8px; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
::selection { background: rgba(56, 189, 248, 0.35); }

/* ---------- Administration ---------- */
.featured-chip { display: inline-block; margin: 0.35rem 0; padding: 0.12rem 0.6rem; border-radius: 999px; background: linear-gradient(135deg, #ffe9a8, #f5b921); color: #6b4e00; font-size: 0.75rem; font-weight: 800; }

.banned-chip { display: inline-block; margin-left: 0.45rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: #d43a2f; color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.report-row { border-top: 1px solid var(--border); padding: 0.65rem 0; }
.admin-btns { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; align-items: center; }
.admin-actions { margin-top: 0.5rem; }

/* ---------- Pastille administrateur ---------- */
.admin-chip { display: inline-block; margin-left: 0.45rem; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }

/* ---------- Médailles des badges (dessinées, paliers métal) ---------- */
.medal {
  --m1: #f4f6f8;
  --m2: #9aa7b4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 52%),
    linear-gradient(145deg, var(--m1), var(--m2));
  box-shadow: inset 0 0 0 2px rgba(15, 23, 42, 0.22), inset 0 -3px 6px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(0, 0, 0, 0.35);
  color: #263445;
  flex: none;
}
.medal svg { width: 62%; height: 62%; }
.medal-bronze { --m1: #f3bc85; --m2: #a96a2e; color: #4d2c0d; }
.medal-silver { --m1: #fbfdff; --m2: #93a5b5; color: #2e3d4d; }
.medal-gold { --m1: #ffedb0; --m2: #dfa00c; color: #5c3d05; }
.medal-diamond { --m1: #e3f7ff; --m2: #57b9dd; color: #0c4356; }
.medal-sm { width: 22px; height: 22px; }
.medal-md { width: 34px; height: 34px; }
.medal-lg { width: 76px; height: 76px; }
.badge-ico { display: inline-flex; margin-left: 0.3rem; vertical-align: -5px; }
.badge-more {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.15);
  color: var(--gold);
  border: 1px solid rgba(251, 191, 36, 0.4);
  margin-left: 0.3rem;
  vertical-align: 1px;
}
.badge-row .badge { padding-left: 0.3rem; }
.blog-header h1 .medal { vertical-align: -7px; }

/* ---------- Page Récompenses (badges) ---------- */
.badges-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: 1.2rem;
}
.badge-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 0.8rem 0.9rem;
  text-align: center;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.badge-card:hover { transform: translateY(-3px); }
.badge-card.earned {
  border-color: var(--gold);
  box-shadow: 0 6px 20px rgba(251, 191, 36, 0.18);
}
.badge-card.locked .badge-card-medal {
  filter: grayscale(1);
  opacity: 0.45;
}
.badge-card-medal {
  margin-bottom: 0.5rem;
  line-height: 1;
}
.badge-card-lock svg { width: 16px; height: 16px; display: block; }
.badge-card-name {
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.badge-card-lock {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 0.85rem;
  opacity: 0.6;
}
.progress-wrap {
  height: 10px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
  margin: 0.9rem 0 0.4rem;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  transition: width 0.4s ease;
}

/* ---------- Pack 2 (étape A) : tags, tendances, réponses ---------- */
.tag-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}
.tag-link:hover { text-decoration: underline; }
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--card);
  border: 1px solid var(--gold);
  color: var(--text);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
  margin: 0.8rem 0 0;
  font-weight: 600;
}
.tag-chip button {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
}
.tag-chip button:hover { color: var(--text); }
.replies {
  margin-left: 1.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--border);
}
/* Niveaux plus profonds (répondre à une réponse, 2026-10-29) :
   retrait réduit pour garder de la largeur sur téléphone. */
.replies .replies {
  margin-left: 0.7rem;
  padding-left: 0.6rem;
}
/* Plafond de retrait (2026-10-29) : à partir du 5e niveau de
   réponses, le retrait cesse de grandir — les lignes de fil
   restent visibles (bordure conservée), mais la colonne ne
   s'écrase plus contre le bord droit sur téléphone quand on
   répond à une réponse à une réponse… (captures ONIX, 14 niveaux). */
.replies .replies .replies .replies .replies {
  margin-left: 0;
}
.comment.reply { margin-top: 0.7rem; }
.reply-form { margin-top: 0.6rem; }
.reaction.active[data-reaction="laugh"] { border-color: #f59e0b; background: rgba(245, 158, 11, 0.15); }
.reaction.active[data-reaction="laugh"] .count { color: #f59e0b; }
.reaction.active[data-reaction="wow"] { border-color: #a78bfa; background: rgba(167, 139, 250, 0.15); }
.reaction.active[data-reaction="wow"] .count { color: #a78bfa; }
.reaction.active[data-reaction="sad"] { border-color: #60a5fa; background: rgba(96, 165, 250, 0.15); }
.reaction.active[data-reaction="sad"] .count { color: #60a5fa; }

/* ---------- Pack 2 (étape B) : sondages, favoris, épingles ---------- */
.poll { margin: 0.8rem 0 0.4rem; display: flex; flex-direction: column; gap: 0.45rem; }
.poll-opt-btn {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
  font: inherit;
}
.poll-opt-btn:hover { border-color: var(--accent); }
.poll-opt-btn.mine { border-color: var(--gold); }
.poll-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: rgba(56, 189, 248, 0.16);
  z-index: 0;
}
.poll-label, .poll-pct { position: relative; z-index: 1; }
.poll-pct { color: var(--muted); font-size: 0.85rem; white-space: nowrap; }
.poll-toggle { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; cursor: pointer; }
.form label.poll-toggle { display: flex; }
.poll-toggle input[type="checkbox"] { width: auto; flex: none; margin: 0; padding: 0; }
.confirm-actions { display: flex; gap: 0.8rem; justify-content: flex-end; margin-top: 1.2rem; }
#confirm-text { font-size: 1.05rem; margin: 0.2rem 0 0; }
.poll-opts { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.bm-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  opacity: 0.45;
  padding: 0.1rem 0.3rem;
  margin-left: auto;
  filter: grayscale(1);
}
.bm-btn.active { opacity: 1; filter: none; }
.bm-detail.active { border-color: var(--gold); color: var(--gold); }
.post-tools { display: flex; gap: 0.6rem; margin: 0.9rem 0 0.2rem; flex-wrap: wrap; }
.pin-row { margin-top: 0.5rem; }

/* ---------- Pack 2 (étape C) : vérifié, partage, blocage, masquage ---------- */
.verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-left: 0.35rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.verified.model-circle {
  border-radius: 50%;
  background: var(--vc);
  color: #fff;
  font-size: 0.72em;
}
.verified.model-seal {
  background: transparent;
}
.verified .v-seal {
  width: 100%;
  height: 100%;
  display: block;
}
.settings-accent {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.settings-accent input[type="color"] {
  width: 3rem;
  height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  cursor: pointer;
  padding: 0.2rem;
}
.hidden-chip {
  display: inline-block;
  background: rgba(244, 114, 182, 0.12);
  border: 1px solid rgba(244, 114, 182, 0.5);
  color: var(--text);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  font-size: 0.8rem;
  margin: 0.4rem 0;
}

/* ---------- Fenêtre de confirmation (refonte lot n° 7) ---------- */
#confirm-modal { align-items: center; padding: 1rem; }
.confirm-card {
  max-width: 340px;
  text-align: center;
  padding: 1.7rem 1.4rem 1.3rem;
  border-radius: 20px;
}
.confirm-icon {
  width: 58px;
  height: 58px;
  margin: 0 auto 0.95rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--accent);
  background: rgba(56, 189, 248, 0.13);
  border: 1px solid rgba(56, 189, 248, 0.25);
}
.confirm-icon svg { width: 28px; height: 28px; display: block; }
.confirm-icon.danger {
  color: var(--error);
  background: rgba(248, 113, 113, 0.12);
  border-color: rgba(248, 113, 113, 0.3);
}
#confirm-text { font-size: 1.08rem; font-weight: 600; line-height: 1.45; margin: 0; }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: stretch; margin-top: 1.35rem; }
.confirm-actions .confirm-btn {
  flex: 1;
  padding: 0.72rem 0;
  border-radius: 12px;
  font-size: 0.95rem;
}
#confirm-no { background: rgba(148, 163, 184, 0.12); }
#confirm-no:hover { border-color: var(--muted); }
#confirm-yes.danger {
  background: linear-gradient(135deg, #f87171, #dc2626);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(248, 113, 113, 0.35);
}
#confirm-yes.danger:hover { background: linear-gradient(135deg, #dc2626, #f87171); }

/* Boutons de confirmation : hauteur strictement égale (lot n° 8) */
.confirm-actions { align-items: stretch; }
.confirm-actions .confirm-btn {
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---------- Panneau de notifications centré sur mobile (lot n° 13) ---------- */
@media (max-width: 860px) {
  .notif-panel {
    position: fixed;
    top: 7rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(94vw, 380px);
    max-height: 70vh;
  }
}

/* ---------- Chat plein écran total (lot n° 14) ---------- */
body.chat-mode .navbar, body.chat-mode footer { display: none; }
.thread-head { position: sticky; top: 0; z-index: 45; }
@media (max-width: 860px) {
  .thread-list { padding: 0.8rem 0.5rem; }
  .msg-col { max-width: 88%; }
}

/* ---------- Lot n° 17 : compositeur du blog replié ---------- */
.composer-open { width: 100%; padding: 0.85rem; font-size: 1rem; margin-bottom: 1rem; }
#composer-card.hidden, #composer-open.hidden { display: none; }
.composer-close { margin-left: auto; }

/* ---------- Lot n° 18 : bouton publication dans l'en-tête, filtres sur une ligne ---------- */
.blog-header { align-items: center; }
.blog-header .composer-open { width: auto; margin: 0; padding: 0.6rem 1.1rem; font-size: 0.95rem; white-space: nowrap; }
.seg-tabs { flex-wrap: nowrap; gap: 0.4rem; }
.seg-tab { flex: 1 1 0; padding: 0.45rem 0.25rem; font-size: 0.85rem; white-space: nowrap; text-align: center; }

/* ---------- Lot n° 20 : sous-menu Style (palette de couleurs) ---------- */
.settings-style-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.style-chev { transition: transform 0.2s ease; font-size: 0.8rem; opacity: 0.8; }
.style-chev.open { transform: rotate(180deg); }
.style-panel { padding: 0.2rem 0 0.35rem; }
.style-panel .settings-label { margin-top: 0.35rem; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.32rem 0.1rem; font-size: 0.92rem; }
.color-row input[type="color"] { width: 46px; height: 30px; border: 1px solid var(--border); border-radius: 999px; background: none; padding: 2px; cursor: pointer; flex-shrink: 0; }
.color-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.color-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 999px; }
.color-row input[type="color"]::-moz-color-swatch { border: none; border-radius: 999px; }
.color-reset { margin-top: 0.45rem; }

/* ---------- Lot n° 21 : kit Style complet (police, taille, coins, animations, densité) ---------- */
.settings-menu { max-height: 80vh; overflow-y: auto; }
.style-choices { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.15rem 0 0.35rem; }
.style-choices .settings-item { width: auto; padding: 0.35rem 0.6rem; font-size: 0.88rem; border: 1px solid var(--border); border-radius: 999px; }
html[data-font="classic"] body, html[data-font="classic"] button, html[data-font="classic"] input, html[data-font="classic"] textarea, html[data-font="classic"] select { font-family: Georgia, "Times New Roman", serif; }
html[data-font="rounded"] body, html[data-font="rounded"] button, html[data-font="rounded"] input, html[data-font="rounded"] textarea, html[data-font="rounded"] select { font-family: ui-rounded, "SF Pro Rounded", "Trebuchet MS", "Comic Sans MS", sans-serif; }
html[data-textsize="small"] { font-size: 93.75%; }
html[data-textsize="large"] { font-size: 112.5%; }
html[data-corners="soft"] .card, html[data-corners="soft"] .btn, html[data-corners="soft"] .settings-menu, html[data-corners="soft"] .notif-panel, html[data-corners="soft"] .seg-tab, html[data-corners="soft"] input, html[data-corners="soft"] textarea, html[data-corners="soft"] select { border-radius: 8px; }
html[data-corners="square"] .card, html[data-corners="square"] .btn, html[data-corners="square"] .settings-menu, html[data-corners="square"] .notif-panel, html[data-corners="square"] .seg-tab, html[data-corners="square"] input, html[data-corners="square"] textarea, html[data-corners="square"] select { border-radius: 2px; }
html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
html[data-density="compact"] .card { padding: 0.95rem 1.05rem; margin-bottom: 0.7rem; }
html[data-density="compact"] .settings-item { padding-top: 0.35rem; padding-bottom: 0.35rem; }

/* ---------- Lot n° 22 : options enrichies + palettes prêtes à l'emploi ---------- */
.palette-list { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.15rem 0 0.2rem; }
.palette-chip { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.38rem 0.55rem; background: none; border: 1px solid var(--border); border-radius: 10px; color: var(--text); cursor: pointer; font-size: 0.92rem; text-align: left; }
.palette-chip:hover { background: var(--hover-bg); }
.palette-dots { display: inline-flex; }
.palette-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); margin-left: -5px; }
.palette-dots i:first-child { margin-left: 0; }
html[data-font="typewriter"] body, html[data-font="typewriter"] button, html[data-font="typewriter"] input, html[data-font="typewriter"] textarea, html[data-font="typewriter"] select { font-family: ui-monospace, "Courier New", Courier, monospace; }
html[data-font="handwriting"] body, html[data-font="handwriting"] button, html[data-font="handwriting"] input, html[data-font="handwriting"] textarea, html[data-font="handwriting"] select { font-family: "Segoe Script", "Bradley Hand", "Apple Chancery", cursive; }
html[data-font="condensed"] body, html[data-font="condensed"] button, html[data-font="condensed"] input, html[data-font="condensed"] textarea, html[data-font="condensed"] select { font-family: "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif; letter-spacing: 0.02em; }
html[data-textsize="tiny"] { font-size: 87.5%; }
html[data-textsize="huge"] { font-size: 125%; }
html[data-corners="pill"] .card, html[data-corners="pill"] .btn, html[data-corners="pill"] .settings-menu, html[data-corners="pill"] .notif-panel, html[data-corners="pill"] .seg-tab, html[data-corners="pill"] input, html[data-corners="pill"] textarea, html[data-corners="pill"] select { border-radius: 28px; }
html[data-corners="sharp"] .card, html[data-corners="sharp"] .btn, html[data-corners="sharp"] .settings-menu, html[data-corners="sharp"] .notif-panel, html[data-corners="sharp"] .seg-tab, html[data-corners="sharp"] input, html[data-corners="sharp"] textarea, html[data-corners="sharp"] select { border-radius: 0; }
html[data-anim="soft"] *, html[data-anim="soft"] *::before, html[data-anim="soft"] *::after { transition-duration: 0.5s !important; animation-duration: 1.4s !important; }
html[data-anim="none"] *, html[data-anim="none"] *::before, html[data-anim="none"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-density="airy"] .card { padding: 1.9rem 2rem; margin-bottom: 1.6rem; }
html[data-density="ultra"] .card { padding: 0.6rem 0.75rem; margin-bottom: 0.45rem; }
html[data-density="ultra"] .settings-item { padding-top: 0.2rem; padding-bottom: 0.2rem; }

/* ---------- Lot n° 23 : polices supplémentaires ---------- */
html[data-font="calligraphy"] body, html[data-font="calligraphy"] button, html[data-font="calligraphy"] input, html[data-font="calligraphy"] textarea, html[data-font="calligraphy"] select { font-family: "Brush Script MT", "Segoe Script", "Apple Chancery", cursive; }
html[data-font="elegant"] body, html[data-font="elegant"] button, html[data-font="elegant"] input, html[data-font="elegant"] textarea, html[data-font="elegant"] select { font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; }
html[data-font="poster"] body, html[data-font="poster"] button, html[data-font="poster"] input, html[data-font="poster"] textarea, html[data-font="poster"] select { font-family: Impact, "Arial Black", "Franklin Gothic Heavy", sans-serif; letter-spacing: 0.01em; }

/* ---------- Lot n° 24 : styles découplés des couleurs ---------- */
.style-preview { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 22px; border: 1px solid var(--border); border-radius: 6px; background: var(--hover-bg); font-size: 0.85rem; font-weight: 700; flex-shrink: 0; }

/* ---------- Lot n° 26 : la densité compacte serre TOUTE la page ---------- */
html[data-density="compact"] main { padding-top: 1.1rem; padding-bottom: 1.6rem; }
html[data-density="compact"] .card { margin-bottom: 0.55rem; }
html[data-density="compact"] .hero { padding: 1.5rem 1rem; margin-bottom: 0.8rem; }
html[data-density="compact"] .nav-inner { padding-top: 0.45rem; padding-bottom: 0.45rem; }
html[data-density="compact"] footer { padding: 0.9rem; }
html[data-density="compact"] .features, html[data-density="compact"] .posts-grid, html[data-density="compact"] .member-grid, html[data-density="compact"] .badges-grid { gap: 0.55rem; }
html[data-density="compact"] .post-layout, html[data-density="compact"] .post-side { gap: 0.6rem; }
html[data-density="compact"] .blog-header { margin-bottom: 0.55rem; }
html[data-density="compact"] .seg-tabs, html[data-density="compact"] .tabs { margin-bottom: 0.55rem; }
html[data-density="compact"] .reactions { margin: 0.6rem 0; }
html[data-density="compact"] .modal-card { padding: 1.1rem; }
html[data-density="ultra"] main { padding-top: 0.6rem; padding-bottom: 1rem; }
html[data-density="ultra"] .card { margin-bottom: 0.32rem; }
html[data-density="ultra"] .hero { padding: 0.8rem; margin-bottom: 0.45rem; }
html[data-density="ultra"] .nav-inner { padding-top: 0.28rem; padding-bottom: 0.28rem; }
html[data-density="ultra"] footer { padding: 0.55rem; }
html[data-density="ultra"] .features, html[data-density="ultra"] .posts-grid, html[data-density="ultra"] .member-grid, html[data-density="ultra"] .badges-grid { gap: 0.32rem; }
html[data-density="ultra"] .post-layout, html[data-density="ultra"] .post-side { gap: 0.35rem; }
html[data-density="ultra"] .blog-header { margin-bottom: 0.32rem; }
html[data-density="ultra"] .seg-tabs, html[data-density="ultra"] .tabs { margin-bottom: 0.32rem; }
html[data-density="ultra"] .reactions { margin: 0.35rem 0; }
html[data-density="ultra"] .modal-card { padding: 0.8rem; }
html[data-density="airy"] .features, html[data-density="airy"] .posts-grid, html[data-density="airy"] .member-grid, html[data-density="airy"] .badges-grid { gap: 1.5rem; }
html[data-density="airy"] .post-layout, html[data-density="airy"] .post-side { gap: 1.8rem; }
html[data-density="airy"] .hero { margin-bottom: 2.2rem; }

/* ---------- Lots n° 27-28 : équipe de modération, messages privés admin, reset total ---------- */
.mod-chip { background: #7c3aed; color: #fff; font-size: 0.68rem; font-weight: 700; padding: 0.12rem 0.45rem; border-radius: 999px; margin-left: 0.35rem; vertical-align: middle; }
.dms-row { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0.4rem; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); }
.dms-row:last-child { border-bottom: none; }
.dms-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dms-top { display: flex; justify-content: space-between; gap: 0.6rem; }
.dms-note { background: var(--hover-bg); border: 1px solid var(--border); border-radius: 0.6rem; padding: 0.5rem 0.7rem; }

/* ---------- Lot n° 29 : conversation protégée ---------- */
.thread-screen { position: relative; }
.thread-protect { margin-left: auto; background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: 1rem; line-height: 1; }
.thread-protect.on { border-color: var(--gold); }
.protect-banner { background: var(--hover-bg); border-bottom: 1px solid var(--border); color: var(--muted); font-size: 0.82rem; padding: 0.45rem 0.8rem; text-align: center; }
.protect-watermark { position: absolute; inset: 0; pointer-events: none; z-index: 4; display: none; background-repeat: repeat; }
.thread-screen.protected .thread-list { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.protect-shield-note { position: absolute; inset: 0; z-index: 6; display: none; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 700; color: var(--text); pointer-events: none; }
body.protect-shield .thread-head, body.protect-shield .thread-list, body.protect-shield .msg-form { filter: blur(14px); }
body.protect-shield .protect-shield-note { display: flex; }

/* Lot n° 31 — langues : espagnol natif + Google Traduction */
.gt-offscreen{position:absolute;left:-9999px;top:0;width:1px;height:1px;overflow:hidden}
.goog-te-banner-frame.skiptranslate{display:none!important}
body{top:0!important}
.settings-select{width:100%;padding:0.45rem 0.5rem;margin:0.15rem 0 0.3rem;border-radius:0.5rem;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit}
.settings-note{font-size:0.78rem;color:var(--muted);margin:0.1rem 0 0.4rem;line-height:1.35}

/* Lot n° 32 — catégories du blog */
.form select{width:100%;padding:0.55rem 0.6rem;border-radius:0.5rem;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit}
.cat-chip{display:inline-block;margin:0.35rem 0 0.1rem;padding:0.18rem 0.6rem;border-radius:999px;border:1px solid var(--cat,#94a3b8);color:var(--cat,#94a3b8);font-size:0.78rem;font-weight:600;text-decoration:none}
.cat-chips{display:flex;gap:0.4rem;flex-wrap:wrap;margin:0.6rem 0}
.cat-filter-chip{padding:0.3rem 0.7rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:0.85rem}
.cat-filter-chip.active{border-color:var(--accent);color:var(--accent);font-weight:700}
.sections-title{margin:0.8rem 0 0.4rem}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0.6rem;margin-bottom:1rem}
.cat-card{position:relative;display:flex;flex-direction:column;gap:0.15rem;padding:0.8rem;border:1px solid var(--border);border-top:3px solid var(--cat);border-radius:0.7rem;background:var(--card);cursor:pointer}
.cat-card-icon{font-size:1.5rem}
.cat-card-name{font-weight:700}
.cat-card-desc{font-size:0.78rem;color:var(--muted);line-height:1.3}
.cat-card-count{font-size:0.75rem;color:var(--muted)}
.fav-star{position:absolute;top:0.4rem;right:0.4rem;background:none;border:none;font-size:1.05rem;cursor:pointer;color:var(--muted)}
.fav-star.active{color:#fbbf24}
.fav-star.big{position:static;font-size:1.6rem}
.cat-hero{display:flex;gap:1rem;align-items:center;border-top:4px solid var(--cat)}
.cat-hero-icon{font-size:2.6rem}
.cat-hero-main{flex:1}
.cat-hero-main h1{margin:0.1rem 0}
.fav-cats{display:flex;flex-wrap:wrap;gap:0.35rem;padding:0.2rem 0 0.5rem}
.fav-cat-chip{padding:0.28rem 0.6rem;border-radius:999px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;font-size:0.82rem}
.fav-cat-chip.active{border-color:#fbbf24;color:#fbbf24;font-weight:700}

/* Lot n° 34 : rangées et interrupteurs des notifications push */
.push-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0.5rem; }
.switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-track { position: absolute; inset: 0; border-radius: 999px; background: var(--border); transition: background 0.2s; cursor: pointer; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(20px); }
.switch input:disabled + .switch-track { opacity: 0.45; cursor: default; }

/* ---------- Paramètres du chat (panneau ⚙️ au-dessus de la conversation) ---------- */
.chat-settings-wrap { margin-left: auto; position: relative; }
.chat-settings-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem;
  min-width: 250px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  z-index: 100;
}
.chat-settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  font-size: 0.92rem;
}
.wm-size-choices { display: flex; gap: 0.3rem; }
.wm-size-choices .settings-item { text-align: center; padding: 0.4rem 0.3rem; }

/* v45 — cryptage des messages */
.enc-divider{height:1px;background:var(--border);margin:0.55rem 0.1rem}
.enc-choices{flex-wrap:wrap}
.enc-choices .settings-item{flex:1 1 30%}
.enc-key-input{width:100%;padding:0.5rem 0.6rem;border-radius:0.5rem;border:1px solid var(--border);background:var(--card);color:var(--text);font:inherit;margin:0.2rem 0 0.4rem;box-sizing:border-box}
.msg-bubble.enc-locked{font-style:italic;opacity:0.85}
.enc-key-btn{margin-left:0.4rem;background:none;border:1px solid var(--border);border-radius:999px;padding:0.1rem 0.6rem;color:var(--accent);cursor:pointer;font:inherit;font-size:0.85rem;font-style:normal}

/* v46 — bouton voir la phrase (panneau cryptage) */
.enc-key-wrap{display:flex;gap:0.3rem;align-items:center;margin:0.2rem 0 0.4rem}
.enc-key-wrap .enc-key-input{margin:0;flex:1}
.enc-key-show{position:relative;flex:none;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:0.5rem;background:var(--card);color:var(--text);cursor:pointer}
.enc-key-show svg{width:20px;height:20px}
.enc-key-show.showing::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:var(--text);transform:rotate(-45deg);border-radius:2px}

/* v46 — indicateurs de cryptage dans les bulles */
.msg-enc-mark{margin-left:0.3rem;font-size:0.8rem;opacity:0.7}
.msg-enc-mark.warn{opacity:1}

/* v46 — suppression d'un message pour les deux côtés */
.msg-del{background:none;border:none;cursor:pointer;padding:0.15rem 0.3rem;opacity:0.55;color:inherit;align-self:flex-start}
.msg-del:hover{opacity:1}
.msg-del svg{width:14px;height:14px;display:block}

/* v46 — poussière magique à la suppression d'un message */
.msg-row.dusting{transition:opacity .3s, transform .3s;opacity:0;transform:scale(.96)}
.msg-dust-layer{position:fixed;z-index:200;pointer-events:none;overflow:visible}
.msg-dust{position:absolute;border-radius:50%;opacity:1;animation:msg-dust-fly .75s ease-out forwards}
@keyframes msg-dust-fly{to{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0}}

/* v47 : poubelle de message cachée — révélée par appui long seulement */
.msg-del{display:none}
.msg-row.show-del .msg-del{display:inline-block}
.msg-row{-webkit-touch-callout:none}
.settings-item.danger{color:#f87171;border-color:rgba(248,113,113,.4)}
.conv-del-btn{display:flex;align-items:center;gap:.4rem;width:100%;justify-content:center}
.conv-del-btn svg{width:14px;height:14px;flex:none}

/* v47 (secours) : très petite poubelle à droite de l'heure dans la liste */
.convo-top-right{display:inline-flex;align-items:center;gap:.35rem;flex:none}
.convo-del{background:none;border:none;cursor:pointer;padding:.1rem;color:var(--muted);opacity:.5;flex:none}
.convo-del:hover{opacity:1;color:#f87171}
.convo-del svg{width:12px;height:12px;display:block}

/* v47 : menus déroulants Fil / Catégorie du blog */
.blog-dd-row{display:flex;gap:.5rem;margin-bottom:.6rem}
.blog-dd-wrap{flex:1;min-width:0}
.blog-dd-toggle{display:flex;justify-content:space-between;align-items:center;gap:.3rem;width:100%;padding:.55rem .65rem;border:1px solid var(--border);border-radius:.6rem;background:var(--card);color:var(--text);font-size:.9rem;cursor:pointer}
.blog-dd-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.blog-dd-panel{display:flex;flex-direction:column;gap:.15rem;margin-bottom:.6rem}
.blog-dd-opt{display:block;width:100%;text-align:left;padding:.5rem .65rem;border:1px solid transparent;border-radius:.5rem;background:var(--card);color:var(--text);font-size:.9rem;cursor:pointer}
.blog-dd-opt:hover{background:var(--hover-bg)}
.blog-dd-opt.active{border-color:var(--accent);color:var(--accent);font-weight:700}
/* v47 correctif local (non déployé) : un panneau masqué doit le rester —
   .blog-dd-panel (display:flex, fin de fichier) gagnait contre .hidden
   à spécificité égale, les deux panneaux restaient donc toujours ouverts. */
.blog-dd-panel.hidden{display:none}

/* Correctif fil adaptatif (local, non déployé) : le fil occupe exactement
   la hauteur visible de l'écran (dvh suit la barre du navigateur mobile,
   contrairement à vh), la liste défile dans l'espace restant et le champ
   reste en flux — fini le dégagement fixe de 5.4rem deviné, qui masquait
   le bas du fil sur les téléphones où le champ est plus haut. */
main.thread-mode { padding: 0; height: 100vh; height: 100dvh; }
.thread-screen { height: 100%; }
.thread-head { flex: none; }
.thread-list { flex: 1; overflow-y: auto; min-height: 0; }
main.thread-mode .msg-form { position: static; transform: none; flex: none; }

/* Correctif bouton Save key (local, non déployé) : il utilisait
   .settings-item (fond transparent, sans bordure) donc il ressemblait
   à du simple texte, et serré dans sa rangée il se coupait. Il devient
   un vrai bouton accent pleine largeur, comme les boutons d'action du
   site, avec retour à la ligne si le texte est long. */
#enc-key-save{flex:1 1 100%;background:var(--accent);color:#082f49;font-weight:700;border-radius:999px;padding:.55rem .8rem;text-align:center;white-space:normal}
#enc-key-save:hover{filter:brightness(1.1)}

/* Pastilles principales : couleur foncée uniforme d'un bout à l'autre.
   Le dégradé accent→accent-dark laissait une zone pâle/blanchâtre à
   une extrémité quand l'accent personnalisé est clair (Log in / Sign
   up, Sign up, Yes). Le halo lumineux est conservé.
   --accent-dark suit désormais l'accent (darkenHex dans applyAccent) :
   les boutons suivent donc le thème et l'accent personnalisé, au lieu
   de rester figés sur le bleu #0ea5e9 du :root. */
.form .primary, .btn.primary, .primary {
  background: var(--accent-dark);
  border-color: transparent;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
.form .primary:hover, .btn.primary:hover, .primary:hover {
  background: var(--accent-dark);
  filter: brightness(1.12);
}

/* Abonnement vérifié (Bitcoin) */
.verified-benefits{margin:.2rem 0 .6rem 1.1rem;padding:0}
.verified-benefits li{margin:.15rem 0}
.verified-price{font-weight:700;color:var(--accent)}
.verified-addr-row{display:flex;gap:.5rem;align-items:flex-start}
.verified-addr-row code{word-break:break-all;flex:1}
.verified-qr{width:160px;height:160px;cursor:zoom-in;border-radius:12px}
.verified-qr-wrap{text-align:center;margin:.6rem 0}
.qr-modal-card{text-align:center}
.qr-modal-card img{width:min(80vw,320px);height:auto;border-radius:12px}
.qr-modal-card code{word-break:break-all}

/* Correctif bande sous le champ du fil (2026-10-27, local, non déployé) :
   en scrollant au-delà du fil (haut ou bas) ou à l'ouverture du clavier,
   le défilement « débordait » sur la page et révélait la zone sous le
   fil (fond de base blanc, ou bas du dégradé bleu foncé, selon le
   moment). Le fil verrouille désormais la page, le scroll du fil ne se
   propage plus, et le fond de base suit le thème. */
html { background: var(--bg); }
body.chat-mode { min-height: 100dvh; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.thread-list { overscroll-behavior: contain; }

/* Badge vérifié v52 : choix du modèle (admin) et de la couleur (membre) */
.vbtn-icon { display: inline-flex; vertical-align: middle; }
.vbtn-icon .verified { margin: 0 0.35rem 0 0; }
.badge-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.25rem 0 0.5rem; }
.badge-swatch { border: 2px solid transparent; border-radius: 50%; padding: 2px; background: transparent; cursor: pointer; }
.badge-swatch .verified { width: 2em; height: 2em; margin: 0; }
.badge-swatch .verified.model-circle { font-size: 1.1em; }
.badge-swatch.active { border-color: var(--accent); }
.badge-options { display: flex; gap: 1rem; padding: 0.25rem 0; }
.badge-option { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem 1rem; border: 2px solid var(--border, #334155); border-radius: 0.75rem; background: transparent; color: inherit; cursor: pointer; }
.badge-option .verified { width: 2.4em; height: 2.4em; margin: 0; }
.badge-option .verified.model-circle { font-size: 1.5em; }
.badge-option.active { border-color: var(--accent); }

/* Page #/verified v53 : titre sceau + boutons évidents + étapes */
.verified-title .verified { margin: 0 0.35rem 0 0; }
.verified-btn { border: 2px solid var(--accent); }
.verified-steps { border: 2px solid var(--accent); border-radius: 0.75rem; padding: 0.75rem 1rem; margin: 0.75rem 0; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.verified-steps-title { font-weight: 700; margin-bottom: 0.25rem; }
.verified-steps ol { margin: 0.25rem 0 0.25rem 1.25rem; padding: 0; }
.verified-steps li { margin: 0.4rem 0; }
.verified-steps li:last-child { font-weight: 700; }
.verified-pay-btn { display: block; width: 100%; padding: 1rem; font-size: 1.2rem; font-weight: 800; border-radius: 0.75rem; }

/* Bouton natif des champs « fichier » : le navigateur le rend blanc par
   défaut, il ignore le thème. Il reprend désormais la couleur des
   boutons du thème (fond accent, comme l'onglet actif) avec une
   écriture noire : il est vert dans le thème Hacker, bleu par défaut,
   et suit chaque thème et chaque accent personnalisé. S'applique aux
   4 champs fichier du site (photo d'article, édition, avatar,
   bannière). */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  background: var(--accent);
  color: #000;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
  filter: brightness(1.12);
}

/* Lecteur YouTube intégré (publication : fil + détail) */
.yt-embed { margin: 0.4rem 0 0.8rem; }
.tiktok-embed iframe { aspect-ratio: 9 / 16; max-width: 360px; margin: 0 auto; }
.yt-embed iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; }

/* Refonte page d'article (2026-10-29, approuvée par l'utilisateur
   d'après sa capture Facebook) : architecture Facebook — auteur en
   premier, titre raisonnable, média bord à bord, barre d'engagement
   entre filets, note en rangée fine, commentaires à plat. La route
   « post » rejoint wide-page (à plat, pleine largeur) et la colonne
   latérale (À propos + Statistiques en cartes) disparaît : l'auteur
   est dans l'en-tête, les compteurs dans les boutons de réaction
   eux-mêmes et la moyenne dans le résumé de la note — les mises à
   jour [data-stat] étaient déjà protégées par des gardes nulles. */
.post-detail-author { font-size: 1.02rem; }
.post-detail-author .mini-avatar { width: 42px; height: 42px; vertical-align: -13px; margin-right: 0.55rem; }
.post-detail-sub { color: var(--muted); font-size: 0.82rem; margin: 0.05rem 0 0 calc(42px + 0.55rem); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.post-detail-title { font-size: 1.45rem; line-height: 1.3; margin: 0.45rem 0 0.2rem; }
.post-detail-body { line-height: 1.65; white-space: pre-wrap; margin: 0.35rem 0 0; }
.post-detail-media { margin: 0.55rem -1.5rem 0; }
.post-detail-media .yt-embed { margin: 0; }
.post-detail-media .yt-embed iframe { border-radius: 0; }
.post-detail-media .post-image-full { border-radius: 0; margin: 0; width: 100%; display: block; }
.post-engage { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-top: 0.8rem; padding: 0.3rem 0; }
.post-engage .reactions { margin: 0; gap: 0.45rem; }
.post-engage .post-tools { margin: 0; }
/* Compacité page d'article (retours utilisateur 2026-10-29) :
   en-tête au-dessus du média resserré et boutons du bas moins
   épais — réactions et outils de la barre d'engagement plus
   minces, rangée d'actions du propriétaire plus serrée. */
.post-detail .owner-actions { margin: 0.45rem 0 0.15rem; gap: 0.4rem; }
.post-detail .owner-actions .btn.small { padding: 0.22rem 0.6rem; font-size: 0.8rem; }
.post-engage .reaction { padding: 0.26rem 0.62rem; font-size: 0.92rem; gap: 0.3rem; }
.post-engage .post-tools .btn.small { padding: 0.22rem 0.6rem; font-size: 0.8rem; }
.post-detail .rating-block { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0; padding: 0.55rem 0 0; border-top: none; }
.post-detail .rating-block .label { margin: 0; }
.post-detail .rating-summary { color: var(--muted); font-size: 0.85rem; }
.post-detail-comments { margin-top: 1.5rem; }
.post-detail-comments .comment .mini-avatar { width: 32px; height: 32px; vertical-align: -9px; }

/* Points de chiffrement à côté des messages + bouclier en haut du fil */
.msg-enc-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:0.35rem;vertical-align:0.1em}
.msg-enc-dot.blue{background:#38bdf8}
.msg-enc-dot.red{background:#e53935}
.msg-enc-dot.off{background:#22c55e}
.enc-shield{display:inline-flex;align-items:center;vertical-align:middle;margin-right:6px}
.enc-shield-img{width:22px;height:22px;display:block;border-radius:6px}
.enc-help-card{max-width:560px;max-height:88vh;overflow-y:auto}
.enc-help-card p{margin:0.55rem 0;line-height:1.45}
.enc-help-card h3{margin:0 1.5rem 0.5rem 0}

/* v57 — traduction des messages reçus (bouton sur appui long, comme la poubelle) */
.msg-translate{background:none;border:none;cursor:pointer;padding:0.15rem 0.3rem;opacity:0.55;color:inherit;align-self:flex-start}
.msg-translate:hover{opacity:1}
.msg-translate svg{width:14px;height:14px;display:block}
.msg-translate:disabled{opacity:0.3}
.msg-translate{display:none}
.msg-row.show-del .msg-translate{display:inline-block}
.msg-translation{font-size:0.85rem;font-style:italic;opacity:0.85;margin-top:0.2rem}
.msg-translation-label{font-style:normal;font-weight:600;opacity:0.7}

/* v58 — bulle d'aide discrète à droite du titre de section chiffrement */
.enc-help-bubble{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-left:6px;padding:0;border:1px solid currentColor;border-radius:50%;background:none;color:inherit;font-size:13px;line-height:1;cursor:pointer;opacity:0.7;vertical-align:middle}
.enc-help-bubble:hover{opacity:1}
.auth-link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 0.9rem; padding: 0.25rem 0; text-decoration: underline; align-self: flex-start; }
#oauth-apple.hidden, #oauth-github.hidden, #oauth-twitter.hidden, #oauth-spotify.hidden { display: none; }
.brand { display: inline-flex; align-items: center; gap: 0.45rem; }
.brand-logo { width: 28px; height: 28px; border-radius: 7px; flex: none; }
.level-chip { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.1rem 0.5rem; margin-left: 0.35rem; vertical-align: middle; }
.rank-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.rank-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid #334155; }
.rank-pos { font-weight: 800; width: 2rem; color: var(--accent); }
.rank-points { margin-left: auto; font-weight: 700; }
.invite-box { margin-top: 1rem; padding: 1rem; border: 1px solid #334155; border-radius: 12px; }
.invite-row { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.invite-row input { flex: 1; min-width: 0; }
.level-bar { height: 10px; border-radius: 999px; background: #334155; overflow: hidden; margin-top: 0.5rem; }
.level-bar > div { height: 100%; background: var(--accent); }
.autodel-chip { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; color: #fbbf24; border: 1px solid #fbbf24; border-radius: 999px; padding: 0.1rem 0.5rem; vertical-align: middle; }
.autodel-chip svg { width: 14px; height: 14px; }
.autodel-inputs { display: inline-flex; gap: 0.4rem; align-items: center; }
.autodel-num { width: 4.5rem; }
.autodel-unit { min-width: 6rem; }
.rank-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 0.5rem; padding: 0.35rem 0; padding-left: 0; }
.rank-pos { width: auto; text-align: left; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.rank-row.rank-row-me { background: rgba(245, 197, 24, 0.12); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.45); margin-left: -0.75rem; margin-right: -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; }
.rank-card { padding-top: 0.75rem; }
.rank-card h1 { margin-top: 0; margin-bottom: 0.75rem; }
.rank-show-more-wrap { margin-top: 0.75rem; text-align: center; }
.rank-name { display: flex; align-items: center; gap: 0.3rem; min-width: 0; }
.rank-name .author-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name img, .rank-name .verified { flex-shrink: 0; }
.rank-row .level-chip { margin-left: 0; justify-self: end; }
.rank-row .level-chip-1 { background: #475569; opacity: 0.8; }
.rank-row .level-chip-2 { background: var(--accent); }
.rank-row .level-chip-high { background: #f5c518; color: #111827; }
.rank-points { margin-left: 0; text-align: right; font-variant-numeric: tabular-nums; min-width: 6.2rem; white-space: nowrap; }
.rank-row .small { line-height: 1.25; text-align: right; }
@media (max-width: 860px) {
  body.wide-page .card { border-radius: 0; border-left: none; border-right: none; margin-left: -1.5rem; margin-right: -1.5rem; padding: 1rem; }
}
@media (max-width: 860px) {
  body.wide-page .rewards-card, body.wide-page .rank-card { background: transparent; border: none; box-shadow: none; margin-left: -1.5rem; margin-right: -1.5rem; padding: 1rem; border-radius: 0; }
  body.wide-page .rewards-card .invite-box { background: transparent; border: none; box-shadow: none; padding: 0; margin-bottom: 1.5rem; }
  body.wide-page .rewards-card .invite-box:last-child { margin-bottom: 0; }
}
.leader-sep { height: 1px; background: var(--border); margin: 0 0 1.2rem; }
@media (max-width: 860px) {
  body.wide-page .leader-sep { margin-left: -1.5rem; margin-right: -1.5rem; }
}
.rank-invites { color: #22c55e; font-weight: 700; text-align: right; }

/* Bank (#/bank) : solde en grand, historique, formulaires — réutilise
   .card / .form / .btn / .small ; seules les mises en page propres
   à la page sont définies ici. */
.bank-balance { text-align: center; padding: 1rem 0 0.5rem; }
.bank-balance-amount { font-size: 2rem; font-weight: 700; margin: 0.25rem 0 0; }
.bank-history { list-style: none; padding: 0; margin: 0; }
.bank-history li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.bank-history li:last-child { border-bottom: none; }
.bank-bolt { width: 1em; height: 1em; vertical-align: -0.15em; }
.bank-amount-row { display: flex; gap: 0.5rem; align-items: stretch; }
.bank-amount-row input { flex: 1 1 auto; min-width: 0; }
.bank-filters { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.5rem 0; }
.bank-filters .btn { margin-left: auto; }

/* Portail Bank : total, actions, cartes de comptes, sous-menus.
   Réutilise .card / .btn / .small ; seules les mises en page propres
   au portail sont définies ici, dans le style actuel du site. */
.bank-actions-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
/* .hidden seul ne suffit pas ici : .bank-actions-row (display:flex)
   battrait .hidden à spécificité égale — règle renforcée, comme
   pour .bank-view.hidden et .blog-dd-panel.hidden. */
.bank-actions-row.hidden { display: none; }
.bank-action-btn { flex: 1 1 auto; }
.bank-portal-cards { display: grid; gap: 0.75rem; margin: 0.75rem 0; }
@media (min-width: 640px) { .bank-portal-cards { grid-template-columns: 1fr 1fr; } }
.bank-account-card, .bank-submenu-card { display: flex; flex-direction: column; gap: 0.25rem; align-items: flex-start; text-align: left; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
.bank-account-name { font-weight: 700; font-size: 1.05rem; }
.bank-account-amount { font-weight: 700; font-size: 1.4rem; }
.bank-view.hidden { display: none; }
/* Icône Interac des cartes de sous-menu Bank : logo fourni par l'utilisateur, affiché tel quel en petite tuile arrondie. Coins transparents (2026-10-28 : l'image d'origine avait des coins noirs qui coupaient le logo sur fond sombre) et object-fit contain pour ne jamais découper le logo. */
.bank-submenu-icon { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; display: block; }
/* Montant saisi par l'admin pour créditer un dépôt (liste admin Bank). */
.admin-dep-amount { width: 11rem; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--text); }
/* QR de dépôt Bitcoin (vue Ajouter Bitcoin) : image fournie par l'utilisateur, affichée seulement si une adresse de dépôt est configurée. */
.bank-deposit-qr { width: 190px; height: 190px; border-radius: 12px; object-fit: cover; display: block; margin: 0.75rem 0; }
/* Annonce Bitcoin d'accueil : bannière fournie par l'utilisateur, fond noir rendu transparent (version lettres claires affichée ; la version lettres d'origine est conservée dans le dépôt). */
.btc-banner { width: 100%; height: auto; border-radius: 12px; display: block; margin-bottom: 0.75rem; }
.btc-banner.btc-banner-light { display: none; }
[data-theme="light"] .btc-banner.btc-banner-dark { display: none; }
[data-theme="light"] .btc-banner.btc-banner-light { display: block; }
.home-btc-card { margin-bottom: 1rem; }

/* Polish tableau de bord Bank (local, non déployé) : boutons d'action
   égaux, total et montants des cartes en accent, cartes cliquables
   signalées (icône + chevron), section demandes vide discrète. */
.bank-balance-amount { color: var(--accent); }
.bank-action-btn { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; font-weight: 700; }
.bank-action-icon { display: inline-flex; }
.bank-action-icon svg { width: 1.1em; height: 1.1em; }
.bank-account-card { padding: .85rem; }
.bank-account-top { display: flex; align-items: center; gap: .5rem; width: 100%; }
.bank-account-icon { color: var(--accent); display: inline-flex; }
.bank-account-icon svg { width: 1.25rem; height: 1.25rem; }
.bank-account-amount { color: var(--accent); }
.bank-card-chev { margin-left: auto; color: var(--muted); font-size: 1.25rem; line-height: 1; }
.bank-formula { margin-bottom: .25rem; }
.bank-pending-empty { margin: .25rem 0 1rem; }
.bank-submenu-icon.bank-icon-svg { display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: var(--accent); }
.bank-submenu-icon.bank-icon-svg svg { width: 24px; height: 24px; }

/* 4 petites améliorations Bank (local, non déployé) : couleurs de
   l'historique selon le signe, adresse de dépôt sans débordement. */
.bank-hist-in { color: var(--success); font-weight: 700; }
.bank-hist-out { color: var(--error); font-weight: 700; }
.bank-deposit-addr { word-break: break-all; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
[data-theme="light"] .bank-hist-in { color: #15803d; }
[data-theme="light"] .bank-hist-out { color: #dc2626; }

/* Embellissement Bank (local, non déployé, 2026-10-28) : solde
   en panneau mis en valeur, boutons en pilules, cartes avec
   survol, montants de l'historique en pastilles. Que des
   variables de thème (accent / succès / erreur), donc ça
   suit les 17 palettes et le thème clair. */
.bank-balance { border: 1px solid var(--accent); border-radius: 16px; padding: 0.5rem 0.75rem 0.6rem; margin-bottom: 0.25rem; box-shadow: 0 4px 14px rgba(56, 189, 248, 0.15); }
.bank-balance p { margin: 0.2rem 0; }
.bank-balance-amount { font-size: 1.9rem; }
/* Total compact (2026-10-29, demande de l'utilisateur d'après sa capture du tableau de bord Bank : « l'espace dédié au total est beaucoup trop grand ») : rembourrage divisé par deux, marges des paragraphes internes presque nulles (le navigateur mettait 1em au-dessus et en dessous de chaque ligne : Total, montant, équivalent) et montant réduit de 2,4 à 1,9 rem. Hauteur du panneau : ~180 px CSS avant, ~90 px après, à contenu égal. */
.bank-balance-unit { font-size: 1rem; font-weight: 700; color: var(--muted); margin-left: 0.25rem; }
.bank-hint-bottom { margin-top: 1rem; }
.bank-deposit-done { border: 1px solid var(--accent); border-radius: 16px; padding: 1rem 1.1rem; margin-top: 1rem; box-shadow: 0 4px 14px rgba(56, 189, 248, 0.15); }
.bank-deposit-done p { margin: 0.45rem 0; }
/* Panneau fixe après « Déclarer le dépôt » Interac (2026-10-29, demande de l'utilisateur : le membre doit recevoir un vrai message — attente de notre confirmation et vérification du mot de passe affiché à l'écran — pas seulement un toast de quelques secondes). */
/* Texte de présentation Bank déplacé en bas (2026-10-29, demande de l'utilisateur : le texte « Send sats to other members… » qui était sous le titre Bank et poussait le Total et les boutons vers le bas est maintenant tout en bas de la carte Bank, en note de bas de page discrète, sur toutes les vues Bank). */
.bank-action-btn { border-radius: 999px; padding: 0.8rem 0.5rem; font-size: 1.05rem; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border-color: transparent; color: #082f49; box-shadow: 0 4px 14px rgba(56, 189, 248, 0.35); }
.bank-action-btn:hover { border-color: transparent; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2); filter: brightness(1.1); }
/* Boutons Add / Send / Withdraw bien visibles (2026-10-29, demande de l'utilisateur : « pas assez visibles ») : avant, fond sombre comme la carte et simple bordure fine, ils se perdaient dans le fond. Maintenant même traitement que les boutons principaux du site : dégradé de la couleur d'accent du thème, texte foncé gras, ombre colorée. Suit donc les 17 palettes du menu Style. */
.bank-account-card, .bank-submenu-card { transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.bank-account-card:hover, .bank-submenu-card:hover { border-color: var(--accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transform: translateY(-1px); }
.bank-submenu-card { position: relative; padding-right: 2.25rem; }
.bank-submenu-card .bank-card-chev { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }
.bank-hist-in, .bank-hist-out { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; }
.bank-hist-in { background: rgba(74, 222, 128, 0.12); }
.bank-hist-out { background: rgba(248, 113, 113, 0.12); }
/* Calculateur en direct des envois : prix + conversion, en accent
   pour se distinguer du petit texte d'aide ordinaire. */
.bank-calc { color: var(--accent); font-weight: 700; }

/* Propositions Bank 1/3/4 (local, non déployé, 2026-10-28) :
   pastilles de statut des demandes (jaune = en attente,
   vert = approuvé/payé, rouge = refusé) et suggestions de
   pseudos en direct dans l'envoi à un membre. */
.bank-status { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-weight: 700; font-size: 0.8rem; }
.bank-status-pending { color: var(--gold); background: rgba(251, 191, 36, 0.12); }
.bank-status-ok { color: var(--success); background: rgba(74, 222, 128, 0.12); }
.bank-status-bad { color: var(--error); background: rgba(248, 113, 113, 0.12); }
[data-theme="light"] .bank-status-pending { color: #b45309; }
[data-theme="light"] .bank-status-ok { color: #15803d; }
[data-theme="light"] .bank-status-bad { color: #dc2626; }
.bank-suggestions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.25rem 0 0.5rem; }
.bank-suggestion { padding: 0.3rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); cursor: pointer; font-size: 0.85rem; }
.bank-suggestion:hover { border-color: var(--accent); color: var(--accent); }

/* Guide dépôt Bitcoin par pays (local, non déployé, 2026-10-28). */
.bank-guide { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.bank-guide-select { margin-left: 0.5rem; padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--card); color: var(--text); }

/* Bank pro — lot 2026-10-28 : icônes historique, graphique mensuel, QR agrandi. */
.bank-hist-icon { display: inline-flex; width: 18px; height: 18px; vertical-align: -3px; margin-right: 2px; }
.bank-hist-icon svg { width: 18px; height: 18px; }
.bank-month-bars { margin: 0.5rem 0; }
.bank-month-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0; font-size: 0.85rem; }
.bank-month-label { width: 5.5rem; flex: none; }
.bank-month-track { flex: 1; height: 10px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bank-month-fill { display: block; height: 100%; border-radius: 999px; }
.bank-month-in { background: var(--success); }
.bank-month-out { background: var(--error); }
.bank-qr-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.85); display: flex; align-items: center; justify-content: center; z-index: 9999; }
.bank-qr-overlay img { width: 90vw; max-width: 420px; height: auto; background: #fff; padding: 16px; border-radius: 16px; }

/* Bank pro — lot 2026-10-28 (2e vague) : recherche historique, détail mouvement, œil solde. */
.bank-search { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--border); border-radius: 0.5rem; background: var(--input-bg); color: var(--text); box-sizing: border-box; margin: 0.5rem 0; }
.bank-detail-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 1rem; }
.bank-detail-card { background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: 1rem; padding: 1.25rem; max-width: 420px; width: 100%; position: relative; }
.bank-detail-close { position: absolute; top: 0.75rem; right: 0.75rem; }
.bank-history li[data-bank-hist] { cursor: pointer; }

/* En-tête Bank (2026-10-28) : titre à gauche, bouton Retour en haut à droite. */
.bank-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.bank-header-row h1 { margin: 0; }
.bank-header-row .btn { flex: none; }

/* Alerte solde insuffisant dans le calculateur (2026-10-28). */
.bank-calc-warn { color: var(--error); font-weight: 700; }

/* Icône Interac (2026-10-28) : coins carrés, jamais arrondis — à la demande de l'utilisateur. */
.bank-submenu-icon.bank-icon-square { border-radius: 0; }

/* Logos Bank sans fond noir (2026-10-29, correctif après retour de l'utilisateur sur la v74 : « on aurait vu seulement le logo et pas les contours noirs ») : le fond noir des deux images fournies a été rendu transparent (remplissage depuis les bords seulement, le texte noir intérieur de l'Interac reste intact) et l'Interac a été recadrée sur son logo jaune (918×917). Originaux avec fond noir gardés dans meta-muse-private (interac-original-black-bg.png, btc-logo-original-black-bg.png). Les deux logos sont maintenant des images carrées qui remplissent la même boîte 40×40 : carré jaune Interac 40 px, cercle Bitcoin diamètre 40 px — même taille, aucune correction de proportion nécessaire. */
.bank-submenu-icon.bank-logo-interac, .bank-submenu-icon.bank-logo-btc { width: 36px; height: 36px; padding: 0; }
/* Tailles unifiées v76 (2026-10-29, demande de l'utilisateur d'après sa capture du menu Ajouter) : Bitcoin un peu plus gros, Interac légèrement plus petit, les deux à la même taille à peu près (36 px), et logos collés à gauche, alignés avec le titre de la carte (sur sa capture, rendue avec l'ancien CSS en cache, les logos étaient décalés vers le centre : boîte Interac 60 px avec image centrée, Bitcoin réduit à 28 px par le padding). Les deux images étant carrées et sans fond, une boîte carrée égale les rend exactement alignés à gauche et de même taille. */
.bank-submenu-icon.bank-logo-btc.hidden, .bank-submenu-icon.bank-logo-interac.hidden { display: none; }

/* Titre avec logo (2026-10-28) : logo Interac à droite du titre, hauteur ≈ hauteur du texte, coins carrés. */
.bank-title-logo { display: flex; align-items: center; gap: 0.5rem; }
.bank-title-icon { height: 1.2em; width: auto; border-radius: 0; display: block; }

/* Espacement des cases Bank (2026-10-28, réduit à la demande de l'utilisateur) : les champs étaient collés, l'effet néon du focus (contour accent 2 px) empiétait sur la case voisine. Séparation mini : 2 px, exactement l'épaisseur du néon, pas plus. */
.bank-card .form > input, .bank-card .form > textarea, .bank-card .form > select, .bank-card .form > .bank-amount-row { margin-bottom: 2px; }

/* Panneau admin Interac sur la page Dépôt (2026-10-28, admins seulement). */
.bank-admin-panel { border: 1px dashed var(--border); border-radius: 12px; padding: 0.75rem; margin-top: 1rem; }
.bank-admin-panel h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.bank-admin-panel label { display: block; margin-top: 0.5rem; }
.bank-admin-panel input[type="text"] { width: 100%; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--text); font-size: 1rem; font-family: inherit; margin: 0.25rem 0 0.25rem; }
.bank-interac-pwd { font-weight: 700; }

/* V87 YouTube : icône d'ouverture + contrôle de volume intégré */
.yt-open{display:inline-flex;align-items:center;margin:0 3px;vertical-align:middle}
.yt-open svg{display:block}
.post-tools .yt-open{margin:0 2px}
.yt-vol{display:flex;align-items:center;gap:8px;margin:2px 0 10px}
.yt-vol-btn{background:none;border:0;color:#9db2ce;cursor:pointer;padding:2px;display:inline-flex}
.yt-vol-btn:hover{color:#e8eefb}
.yt-vol-range{flex:0 1 170px;accent-color:#4da3ff;height:4px;cursor:pointer}
.yt-vol-label{font-size:.75rem;color:#9db2ce}
.yt-vol.muted .yt-vol-waves{display:none}

/* V88 : GIF / images dans les commentaires */
.comment-media{display:block;max-width:min(300px,100%);height:auto;border-radius:10px;margin-top:6px}
.comment-attach-row{margin-top:.45rem;display:flex;align-items:center}
.gif-preview{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;margin-left:.55rem;max-width:70%}
.gif-preview span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gif-remove{background:none;border:1px solid currentColor;border-radius:999px;width:20px;height:20px;line-height:1;cursor:pointer;color:inherit;flex:0 0 auto}
#reply-dock-gif-preview{margin:0 0 .35rem}
.reply-gif-btn{flex:0 0 auto;border:1px solid rgba(255,255,255,.35);background:transparent;color:inherit;border-radius:999px;font-size:.72rem;font-weight:700;padding:.3rem .5rem;cursor:pointer;margin-right:.45rem}

/* v98 - correction affichage TikTok : vertical 9/16, centre, max 360px.
   Placé en fin de fichier pour l'emporter sur .yt-embed iframe (16/9). */
.yt-embed.tiktok-embed { max-width: 360px; margin: 0.4rem auto 0.8rem; }
.yt-embed.tiktok-embed iframe { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; margin: 0 auto; display: block; border-radius: 10px; }
.yt-embed.tiktok-embed .tiktok-play { width: 100%; max-width: 360px; aspect-ratio: 9 / 16; margin: 0 auto; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; border: 0; border-radius: 10px; font-size: 1rem; cursor: pointer; }

/* ---------- v99 : le feed ne doit jamais dépasser l'en-tête ---------- */
/* La grille 1fr laissait un élément large (TikTok, longue URL) élargir toute la colonne. */
.posts-grid { grid-template-columns: minmax(0, 1fr); }
.post-card { min-width: 0; overflow: hidden; }
.post-card h2, .post-card .post-excerpt, .post-card .post-meta { overflow-wrap: anywhere; word-break: break-word; }
.post-card a { overflow-wrap: anywhere; }
.post-card .post-image { max-width: 100%; height: auto; }
/* Embeds dans le feed et dans le détail : jamais plus larges que la carte, jamais de min-width forcé. */
.yt-embed { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; overflow: hidden; }
.yt-embed.tiktok-embed, .tiktok-short, blockquote.tiktok-embed {
  width: 100% !important; max-width: min(360px, 100%) !important; min-width: 0 !important;
  margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; overflow: hidden;
}
.yt-embed iframe, .yt-embed.tiktok-embed iframe, blockquote.tiktok-embed iframe {
  width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box;
}
.yt-embed.tiktok-embed .tiktok-play, button.tiktok-play {
  width: 100% !important; max-width: min(360px, 100%) !important; min-width: 0 !important; box-sizing: border-box;
}

/* ---------- v100 : vignette TikTok plus belle + petit icône TikTok comme YouTube ---------- */
.yt-embed.tiktok-embed .tiktok-play {
  flex-direction: column; gap: 0.55rem;
  background: linear-gradient(160deg, #000000 0%, #111827 55%, #2a0a1e 100%);
  background-size: cover; background-position: center;
}
.yt-embed.tiktok-embed .tiktok-play span { position: relative; z-index: 1; }
.yt-embed.tiktok-embed .tiktok-play-icon {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255,255,255,0.95); color: #000;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; line-height: 1; padding-left: 4px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
.yt-embed.tiktok-embed .tiktok-play-brand { font-weight: 800; letter-spacing: 0.02em; color: #fff; font-size: 1.05rem; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.yt-embed.tiktok-embed .tiktok-play-label { color: #e5e7eb; font-size: 0.9rem; text-shadow: 0 2px 8px rgba(0,0,0,0.8); }
.yt-embed.tiktok-embed .tiktok-play.has-thumb::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(0,0,0,0.35); z-index: 0;
}
.yt-embed.tiktok-embed .tiktok-play { position: relative; overflow: hidden; }
.tt-open { display: inline-flex; align-items: center; vertical-align: middle; }
.tt-icon {
  width: 19px; height: 19px; border-radius: 5px; background: #000; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1;
  border: 1px solid rgba(255,255,255,0.25);
}

/* v106 : lecteur générique (Porntrex, fichiers vidéo directs) — nouveau, ne touche pas YouTube/TikTok. */
.yt-embed.generic-embed video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 10px; display: block; background: #000; }

/* v109 : tableau détaillé des multiplicateurs sats dans le Leaderboard. */
.sats-levels-table { width: 100%; border-collapse: collapse; margin: 0.75rem 0; font-size: 0.92rem; }
.sats-levels-table th, .sats-levels-table td { border: 1px solid rgba(255,255,255,0.18); padding: 0.35rem 0.5rem; text-align: center; }
.sats-levels-table th:first-child, .sats-levels-table td:first-child { text-align: left; }
.sats-levels-table thead th { font-weight: 700; }

/* v110 : tableau sats Leaderboard, professionnel et sans débordement mobile.
   Le tableau ne dépasse plus de l'écran : il défile horizontalement
   DANS sa carte, avec la première colonne fixée, et un style digne
   d'un vrai site : en-tête doré, lignes alternées, chiffres alignés. */
#rank-bonus-card { min-width: 0; overflow: hidden; }
.sats-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0.75rem 0;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
}
.sats-levels-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; margin: 0; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.sats-levels-table th, .sats-levels-table td { border: none; border-bottom: 1px solid rgba(255,255,255,0.08); padding: 0.5rem 0.6rem; }
.sats-levels-table th { background: #f5c518; color: #111827; font-weight: 800; text-align: right; white-space: nowrap; }
.sats-levels-table th:first-child, .sats-levels-table td:first-child { text-align: left; }
.sats-levels-table td { text-align: right; }
.sats-levels-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.04); }
.sats-levels-table tbody tr:last-child td { border-bottom: none; font-weight: 800; background: rgba(245,197,24,0.14); }
.sats-levels-table tbody tr td:first-child { position: sticky; left: 0; background: inherit; font-weight: 700; }
@media (max-width: 640px) {
  .sats-levels-table { font-size: 0.85rem; }
  .sats-levels-table th, .sats-levels-table td { padding: 0.4rem 0.45rem; }
}

/* v111 : Leaderboard professionnel — carte personnelle, podium, recherche, tops par type, répartition. */
.rank-my-card { border: 1px solid rgba(245,197,24,0.45); border-radius: 14px; padding: 1rem; margin-bottom: 1rem; background: rgba(245,197,24,0.08); }
.rank-my-card h2 { margin: 0 0 0.5rem; }
.rank-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin: 0.5rem 0; }
.rank-podium-item { border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 0.5rem 0.4rem 0.6rem; text-align: center; min-width: 0; }
.rank-podium-item.rank-1 { border-color: #f5c518; background: rgba(245,197,24,0.12); order: 2; }
.rank-podium-item.rank-2 { border-color: #c0c0c0; order: 1; }
.rank-podium-item.rank-3 { border-color: #cd7f32; order: 3; }
.rank-podium-medal { font-size: 1.4rem; line-height: 1; position: relative; z-index: 1; }
.rank-podium-avatar + .rank-podium-medal { margin-top: 0; margin-bottom: 0.2rem; }
.rank-podium-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-podium-name a { color: inherit; }
.rank-podium-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto; }
.rank-search-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin: 1rem 0 0; }
.rank-search-row input { flex: 1; min-width: 12rem; }
.rank-tops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; }
.rank-tops h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.rank-tops ol { list-style: none; padding: 0; margin: 0; }
.rank-tops li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.rank-dist-row { display: grid; grid-template-columns: 6.5rem 1fr 3rem; gap: 0.5rem; align-items: center; margin: 0.3rem 0; }
.rank-dist-bar { height: 10px; border-radius: 999px; background: #334155; overflow: hidden; }
.rank-dist-bar > div { height: 100%; background: var(--accent); }
@media (max-width: 640px) {
  .rank-tops { grid-template-columns: 1fr; }
  .rank-podium-item.rank-1, .rank-podium-item.rank-2, .rank-podium-item.rank-3 { order: unset; }
  .rank-podium { gap: 0.4rem; }
  .rank-podium-item { padding: 0.4rem 0.2rem 0.5rem; }
  .rank-podium-avatar { width: 40px; height: 40px; }
  .rank-podium-medal { font-size: 1.2rem; }
  .rank-podium-name { font-size: 0.9rem; }
}

/* v113 : correction du chevauchement du tableau sats sur mobile.
   Cause : la colonne Niveau, fixée au défilement horizontal, avait
   un fond transparent (background: inherit), donc les colonnes qui
   défilaient dessous transparaissaient et les chiffres s'empiétaient
   sur "Niveau 1", "Niveau 2", etc.
   Correctif : colonne Niveau opaque dans les deux thèmes, avec son
   petit fond couleur, sans retour à la ligne, et en-tête Niveau
   lui aussi fixé, avec le même fond doré que le reste de l'en-tête. */
.sats-levels-table thead th:first-child {
  position: sticky; left: 0; z-index: 3;
  background: #f5c518; color: #111827;
  white-space: nowrap; min-width: 5.5rem;
}
.sats-levels-table tbody td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: #3b2f0b; color: #fde68a;
  white-space: nowrap; min-width: 5.5rem;
  box-shadow: 2px 0 0 rgba(0,0,0,0.25);
  font-weight: 700;
}
.sats-levels-table tbody tr:nth-child(even) td:first-child { background: #4a3a0d; }
.sats-levels-table tbody tr:last-child td:first-child { background: #854d0e; color: #fef3c7; }
[data-theme="light"] .sats-levels-table tbody td:first-child {
  background: #fff7d6; color: #0f172a;
  box-shadow: 2px 0 0 rgba(15,23,42,0.12);
}
[data-theme="light"] .sats-levels-table tbody tr:nth-child(even) td:first-child { background: #ffedb0; }
[data-theme="light"] .sats-levels-table tbody tr:last-child td:first-child { background: #fde68a; color: #111827; }

/* v114 : tableau des points du haut — il n'a que 2 colonnes, il ne
   doit pas imposer la largeur minimale de 560 px du tableau sats
   à 7 colonnes, ni son défilement horizontal, ni sa colonne fixée.
   Il s'adapte simplement à la largeur de l'écran, sans barre de
   défilement, et sa dernière ligne n'est pas surlignée comme un
   niveau maximum. */
.rank-points-wrap { overflow-x: visible; }
.rank-points-table { min-width: 0; width: 100%; }
.rank-points-table thead th:first-child,
.rank-points-table tbody td:first-child {
  position: static; left: auto; min-width: 0;
  white-space: normal; box-shadow: none;
  background: transparent; color: inherit;
}
[data-theme="light"] .rank-points-table tbody td:first-child { background: transparent; color: inherit; }
.rank-points-table tbody tr:nth-child(even) td:first-child { background: transparent; }
.rank-points-table tbody tr:last-child td { font-weight: 400; background: transparent; }
.rank-points-table tbody tr:last-child td:first-child { background: transparent; color: inherit; }
[data-theme="light"] .rank-points-table tbody tr:last-child td:first-child { background: transparent; color: inherit; }

/* v115 : carte personnelle compacte et jolie, SOUS le titre Leaderboard.
   Avant : une carte séparée, au-dessus du titre, avec de grands paragraphes
   empilés. Maintenant : un bandeau compact dans la carte Classement,
   juste sous le titre, rang #1 doré, pseudo, pastille de niveau, stats
   sur une ligne, barre de progression fine seulement si niveau suivant. */
.rank-my-card {
  border: 1px solid rgba(245,197,24,0.5);
  border-left: 4px solid #f5c518;
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
  margin: 0.75rem 0 1rem;
  background: rgba(245,197,24,0.08);
  font-size: 0.92rem;
}
.rank-my-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.rank-my-pos { font-size: 1.25rem; font-weight: 900; color: #f5c518; line-height: 1; }
.rank-my-head .level-chip { margin-left: 0; }
.rank-my-max { font-size: 0.82rem; font-weight: 700; color: #f5c518; }
.rank-my-stats { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.35rem; color: var(--muted); }
.rank-my-stats strong { color: var(--text); }
.rank-my-next { margin-top: 0.4rem; font-size: 0.82rem; color: var(--muted); }
.rank-my-next .level-bar { height: 6px; margin-top: 0.3rem; }

/* v116 : correction de la correction v113 — l'ancienne règle
   ".sats-levels-table tbody tr td:first-child" (plus spécifique)
   imposait encore background: inherit aux lignes impaires, donc
   Niveau 1, 3, 5, 7, 9 restaient transparents au défilement.
   Ici la même spécificité, plus tard dans le fichier, avec des
   fonds opaques pour TOUTES les lignes, dans les deux thèmes. */
.sats-levels-table thead tr th:first-child {
  position: sticky; left: 0; z-index: 3;
  background: #f5c518; color: #111827;
  white-space: nowrap; min-width: 5.5rem;
}
.sats-levels-table tbody tr td:first-child {
  position: sticky; left: 0; z-index: 1;
  background: #3b2f0b; color: #fde68a;
  white-space: nowrap; min-width: 5.5rem;
  box-shadow: 2px 0 0 rgba(0,0,0,0.25);
  font-weight: 700;
}
.sats-levels-table tbody tr:nth-child(even) td:first-child { background: #4a3a0d; }
.sats-levels-table tbody tr:last-child td:first-child { background: #854d0e; color: #fef3c7; }
[data-theme="light"] .sats-levels-table tbody tr td:first-child {
  background: #fff7d6; color: #0f172a;
  box-shadow: 2px 0 0 rgba(15,23,42,0.12);
}
[data-theme="light"] .sats-levels-table tbody tr:nth-child(even) td:first-child { background: #ffedb0; }
[data-theme="light"] .sats-levels-table tbody tr:last-child td:first-child { background: #fde68a; color: #111827; }
/* Le tableau des points (2 colonnes) garde ses propres règles :
   pas de colonne fixée, pas de fond couleur, pas de surlignage. */
.rank-points-table thead tr th:first-child,
.rank-points-table tbody tr td:first-child {
  position: static; left: auto; min-width: 0;
  white-space: normal; box-shadow: none;
  background: transparent; color: inherit;
}
[data-theme="light"] .rank-points-table tbody tr td:first-child { background: transparent; color: inherit; }
.rank-points-table tbody tr:nth-child(even) td:first-child { background: transparent; }
.rank-points-table tbody tr:last-child td { font-weight: 400; background: transparent; }
.rank-points-table tbody tr:last-child td:first-child { background: transparent; color: inherit; }
[data-theme="light"] .rank-points-table tbody tr:last-child td:first-child { background: transparent; color: inherit; }

/* v117 : en-tête du tableau des points entièrement dorée.
   La règle v114 annulait le fond de la première cellule, y compris
   l'en-tête Action, qui restait sombre alors que Points était doré.
   Ici seule la cellule de corps Action reste neutre ; l'en-tête
   Action redevient dorée, comme le reste de l'en-tête. */
.rank-points-table thead tr th:first-child { background: #f5c518; color: #111827; }

/* v118 : bloc de partage en bannière publicitaire, CSS seulement, sans photo.
   Dégradé bleu, grande coche bleue en cercle blanc, titre accrocheur,
   barre de progression dorée 0/20, gros bouton Copier doré. */
.share-ad {
  display: flex; gap: 1rem; align-items: flex-start;
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8 55%, #7c3aed);
  color: #ffffff; border: none; border-radius: 18px;
  padding: 1.2rem; margin: 1rem 0;
  box-shadow: 0 10px 30px rgba(29,78,216,0.35);
}
.share-ad-badge {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: #ffffff; color: #1d9bf0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; font-weight: 900; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.share-ad-main { flex: 1; min-width: 0; }
.share-ad-main h2 { margin: 0 0 0.5rem; font-size: 1.35rem; line-height: 1.25; color: #ffffff; }
.share-ad-main p { margin: 0 0 0.6rem; color: rgba(255,255,255,0.92); }
.share-ad-progress { height: 12px; border-radius: 999px; background: rgba(255,255,255,0.25); overflow: hidden; margin: 0.2rem 0 0.5rem; }
.share-ad-progress > div { height: 100%; background: #f5c518; border-radius: 999px; }
.share-ad-count { font-weight: 800; color: #ffffff !important; }
.share-ad-main .invite-row input { background: #ffffff; color: #111827; border: none; border-radius: 10px; padding: 0.6rem 0.8rem; }
.share-ad-main .invite-row .btn { background: #f5c518; color: #111827; border: none; font-weight: 800; border-radius: 10px; padding: 0.6rem 1rem; }
.share-ad-main .small { color: rgba(255,255,255,0.85) !important; }
@media (max-width: 480px) {
  .share-ad { padding: 1rem; gap: 0.75rem; }
  .share-ad-badge { width: 48px; height: 48px; font-size: 1.7rem; }
  .share-ad-main h2 { font-size: 1.15rem; }
}

/* v119 : carte Bonus prime du Leaderboard, plus fade.
   Avant : un long paragraphe qui se perdait. Maintenant : un en-tête
   avec grosse icône Bitcoin, une grille de pastilles par action avec
   le montant en doré bien visible, et un encadré multiplicateur. */
.bonus-ad { border: 1px solid rgba(245,197,24,0.5); }
.bonus-ad-head { display: flex; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.9rem; }
.bonus-ad-icon {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  background: #f5c518; color: #111827;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 900; line-height: 1;
}
.bonus-ad-head h2 { margin: 0 0 0.25rem; }
.bonus-ad-sub { margin: 0; font-weight: 700; }
.bonus-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; margin-bottom: 0.9rem; }
@media (min-width: 640px) { .bonus-grid { grid-template-columns: repeat(5, 1fr); } }
.bonus-chip {
  border: 1px solid rgba(255,255,255,0.14); border-radius: 12px;
  padding: 0.6rem 0.5rem; text-align: center;
  background: rgba(255,255,255,0.03);
}
.bonus-chip-label { display: block; font-size: 0.82rem; color: var(--muted); line-height: 1.25; }
.bonus-chip-amt { display: block; font-size: 1.15rem; font-weight: 900; color: #f5c518; margin-top: 0.15rem; }
.bonus-mult {
  display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; align-items: center;
  border-left: 4px solid #f5c518; border-radius: 8px;
  background: rgba(245,197,24,0.12); padding: 0.7rem 0.9rem; margin-bottom: 0.9rem;
  font-weight: 700;
}
.bonus-mult-big { font-size: 1.25rem; font-weight: 900; color: #f5c518; white-space: nowrap; }
.bonus-balance { font-weight: 800; font-size: 1.05rem; }

/* v123 : Home ordinateur à deux colonnes, explicitement rétablie.
   La grille d'origine existait déjà en v122, mais pour être sûr
   qu'elle ne soit pas écrasée ou mise en cache avec la v121,
   elle est répétée ici en fin de fichier : sur ordinateur
   (à partir de 900 px), fonctionnalités à gauche, étapes à droite. */
@media (min-width: 900px) {
  .home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    align-items: start;
  }
  .home-grid .card { margin-bottom: 0; }
}

/* v124 : deux colonnes Home sur ordinateur, seuil abaissé.
   Avant, la grille à deux colonnes ne s'activait qu'à partir de
   900 px de large : une fenêtre d'ordinateur plus étroite, un zoom,
   ou une fenêtre partagée restait donc en une colonne, même avec
   un rechargement forcé. Désormais la grille est à deux colonnes
   par défaut, et ne repasse en une colonne que sur petit écran
   (640 px et moins, mobile). */
.home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-items: start;
}
.home-grid .card { margin-bottom: 0; }
@media (max-width: 640px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* v125 : Blog à deux colonnes sur ordinateur — correction de la v99.
   La v99, pour empêcher le feed de dépasser l'en-tête, avait ajouté
   en fin de fichier ".posts-grid { grid-template-columns: minmax(0, 1fr); }".
   Placée après la règle ordinateur à 900 px, elle écrasait les deux
   colonnes du blog sur tous les écrans, même avec un rechargement forcé.
   Ici les deux colonnes reviennent, mais avec minmax(0, 1fr) pour garder
   la protection anti-débordement de la v99 : une carte ne peut plus
   être élargie par un contenu large (TikTok, longue URL).
   Une seule colonne reste sur mobile (640 px et moins).
   Les publications d'un profil restent en une colonne, comme avant. */
@media (min-width: 641px) {
  .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .posts-grid.profile-posts-grid { grid-template-columns: 1fr; }
}

/* v126 : Blog style Pinterest (maçonnerie).
   Avant, .posts-grid était une grille : chaque rangée prenait la hauteur
   de sa carte la plus haute, et la carte courte de la rangée était étirée
   en hauteur, d'où les grands vides verticaux vus sur la capture.
   Ici le feed passe en colonnes CSS : chaque colonne est indépendante,
   chaque carte garde sa hauteur naturelle (son contenu, ni plus ni moins),
   et la carte suivante de la même colonne commence tout de suite en dessous,
   sans attendre l'autre colonne — comme Pinterest.
   Conséquence à connaître : l'ordre devient colonne par colonne
   (de haut en bas dans la colonne de gauche, puis dans celle de droite),
   et non plus ligne par ligne de gauche à droite, comme Pinterest aussi.
   Mobile (640 px et moins) : une seule colonne, ordre inchangé.
   Profils : une seule colonne, comme avant. */
.posts-grid {
  display: block;
  columns: 2;
  column-gap: 1rem;
}
.posts-grid .post-card {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.posts-grid.profile-posts-grid { columns: 1; }
@media (max-width: 640px) {
  .posts-grid { columns: 1; }
}

/* v127 : photos du feed affichées en entier, sans recadrage.
   Avant, .post-image limitait la hauteur à 320 px avec object-fit: cover :
   une photo haute, verticale, était donc coupée en haut et en bas dans
   la carte du Blog. Ici la hauteur maximale est levée et l'image garde
   ses proportions naturelles (hauteur automatique, largeur de la carte) :
   elle s'ajuste à la carte et s'affiche au complet, surtout les verticales,
   qui font donc des cartes plus hautes, comme sur Pinterest.
   La page détail utilisait déjà une image pleine, elle ne change pas. */
.post-card .post-image {
  max-height: none;
  height: auto;
  object-fit: contain;
  width: 100%;
  display: block;
}

/* v128 : lecteur TikTok toute la largeur de la carte.
   Avant, le lecteur était plafonné à 360 px et centré, même dans une
   carte de Blog plus large sur ordinateur, d'où des marges sur les côtés.
   Ici le plafond est levé, dans le feed comme dans la page détail :
   lecteur et bouton de lecture prennent 100 % de la largeur de la carte,
   format vertical 9/16 conservé — sur ordinateur la vidéo est donc aussi
   beaucoup plus haute, c'est inhérent à un 9/16 en pleine largeur. */
.yt-embed.tiktok-embed, .tiktok-short, blockquote.tiktok-embed {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.yt-embed.tiktok-embed iframe, .tiktok-embed iframe {
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 9 / 16;
  margin: 0 !important;
}
.yt-embed.tiktok-embed .tiktok-play, button.tiktok-play {
  width: 100% !important;
  max-width: 100% !important;
}

/* v129 : bouton de lecture YouTube dans le feed quand l'autoplay au
   défilement est activé (remplacé par le lecteur en autoplay muet dès
   que la carte apparaît, comme TikTok). */
.yt-play {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
  border: 0;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
}
.yt-play-icon { font-size: 2rem; }
.yt-play-brand { font-weight: 800; }
.yt-play-label { color: #e5e7eb; font-size: 0.9rem; }

/* v134 : défilement tactile par-dessus les vidéos du feed. La couche
   transparente fait partie de la page (pas de l'iframe), donc un glissement
   vertical dessus fait défiler le Blog, alors qu'un glissement commencé sur
   l'iframe elle-même était avalé par le lecteur. Un toucher simple (sans
   glissement) ne déclenche pas de clic après défilement : il sert à
   mettre en pause / reprendre la vidéo. */
.post-card .yt-embed { position: relative; }
.post-card .video-touch-overlay { position: absolute; inset: 0; z-index: 3; touch-action: pan-y; background: transparent; }

.rank-row.rank-top-1, .rank-row.rank-top-2, .rank-row.rank-top-3 { position: relative; overflow: hidden; }
.rank-row.rank-top-1 .rank-pos, .rank-row.rank-top-2 .rank-pos, .rank-row.rank-top-3 .rank-pos { background-clip: text; -webkit-background-clip: text; color: transparent; font-weight: 900; }
.rank-row.rank-top-1 .rank-pos { background-image: linear-gradient(110deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); }
.rank-row.rank-top-2 .rank-pos { background-image: linear-gradient(110deg, #a0a0a0, #f5f5f5, #d7d7d7, #e8e8e8, #9a9a9a); }
.rank-row.rank-top-3 .rank-pos { background-image: linear-gradient(110deg, #8c4a1f, #f0c27a, #cd7f32, #e8a87c, #7a3f18); }
.rank-row.rank-top-1::after, .rank-row.rank-top-2::after, .rank-row.rank-top-3::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: translateX(-120%) skewX(-15deg); animation: rank-medal-shine 4s ease-in-out infinite; pointer-events: none; }
@keyframes rank-medal-shine { 0%, 55% { transform: translateX(-120%) skewX(-15deg); } 100% { transform: translateX(320%) skewX(-15deg); } }
@media (prefers-reduced-motion: reduce) { .rank-row.rank-top-1::after, .rank-row.rank-top-2::after, .rank-row.rank-top-3::after { animation: none; } }

.rank-row.rank-top-1 .level-chip { background-image: linear-gradient(110deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); background-color: transparent; color: #111827; opacity: 1; }
.rank-row.rank-top-2 .level-chip { background-image: linear-gradient(110deg, #a0a0a0, #f5f5f5, #d7d7d7, #e8e8e8, #9a9a9a); background-color: transparent; color: #111827; opacity: 1; }
.rank-row.rank-top-3 .level-chip { background-image: linear-gradient(110deg, #8c4a1f, #f0c27a, #cd7f32, #e8a87c, #7a3f18); background-color: transparent; color: #111827; opacity: 1; }

/* Editeur photo de publication */
.composer-options-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.composer-options-row .poll-toggle { margin: 0; }
#photo-editor { margin-top: 0.75rem; }
#photo-editor-canvas { width: 100%; height: auto; display: block; border-radius: 12px; background: #000; touch-action: none; cursor: move; }
.photo-editor-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.75rem 0; }

.planned-chip { display: inline-block; font-size: 0.8rem; font-weight: 700; color: #f5c518; border: 1px solid #f5c518; border-radius: 999px; padding: 0.1rem 0.5rem; margin-top: 0.25rem; }

/* Correctifs editeur photo v2 */
.photo-watermark-row { margin: 0.5rem 0; }
.photo-watermark-options { display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }
.photo-watermark-options label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
#photo-editor input[type="color"] { width: 2.2rem !important; height: 1.6rem !important; padding: 0 !important; flex: none; }
#photo-text-options { margin-top: 0.5rem; }
#photo-editor input[type="number"] { width: 4rem !important; flex: none; }

/* Groupes (v142 ; refonte visuelle style profil au lot v143) */
/* Pastille groupe dans les cartes : même pilule que la pastille
   catégorie, couleur accent claire — TOUJOURS lisible, fond sombre
   comme clair (correctif v143 : elle héritait du bleu lien foncé). */
.grp-chip { display: inline-block; margin: 0.35rem 0 0.1rem 0.4rem; padding: 0.18rem 0.6rem; border-radius: 999px; border: 1px solid var(--accent); color: var(--accent); font-size: 0.78rem; font-weight: 600; text-decoration: none; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin: 0.6rem 0 1.2rem; }
.grp-h2 { margin: 1.1rem 0 0.6rem; font-size: 1.05rem; }
#grp-search { width: 100%; margin: 0.4rem 0 0.8rem; }
/* Cartes de l'annuaire : mini-bannière + avatar rond qui chevauche */
.grp-card { background: var(--card); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden; }
.grp-card-top { display: block; position: relative; }
.grp-card-banner { display: block; height: 84px; overflow: hidden; background: linear-gradient(135deg, var(--accent-dark), #7c3aed); }
.grp-card-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-card-grad { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; font-weight: 800; color: rgba(255, 255, 255, 0.85); }
.grp-card-av { position: absolute; left: 0.9rem; bottom: -27px; width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 3px solid var(--card); background: linear-gradient(135deg, var(--accent), #7c3aed); }
.grp-card-letter { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 1.3rem; }
.grp-card-body { padding: 2rem 1rem 0.9rem; }
.grp-card-body h3 { margin: 0 0 0.25rem; font-size: 1.02rem; }
.grp-card-body h3 a { color: var(--text); text-decoration: none; }
.grp-card-meta { color: var(--muted); font-size: 0.8rem; margin: 0 0 0.4rem; }
.grp-card-desc { font-size: 0.88rem; margin: 0 0 0.6rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.grp-card-foot { display: flex; align-items: center; gap: 0.5rem; }
.grp-card-btn { margin-left: auto; }
.grp-state { font-size: 0.68rem; font-weight: 700; border-radius: 999px; padding: 0.08rem 0.5rem; vertical-align: middle; }
.grp-state.member { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }
.grp-state.invited { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.grp-state.pending { background: rgba(127, 127, 127, 0.25); color: var(--muted); }
/* Pile d'avatars de membres (cartes + en-tête) */
.grp-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.grp-avatar-letter { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 0.8rem; }
.grp-stack { display: inline-flex; align-items: center; }
.grp-stack a { display: inline-block; margin-left: -8px; }
.grp-stack a:first-child { margin-left: 0; }
.grp-stack .avatar, .grp-stack .avatar-img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); font-size: 0.8rem; }
.grp-stackrow { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.grp-stack-more { color: var(--muted); font-size: 0.8rem; }
/* En-tête de la page de groupe : même géométrie que l'en-tête de profil */
.grp-banner { height: 170px; margin: -2rem -1.5rem 0; overflow: hidden; background: linear-gradient(135deg, var(--accent-dark), #7c3aed); }
.grp-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grp-head { display: flex; align-items: flex-start; gap: 1rem; }
.grp-avatar { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 3px solid var(--bg); margin-top: -46px; background: linear-gradient(135deg, var(--accent), #7c3aed); flex: none; position: relative; }
.grp-avatar-letter { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 2rem; }
.grp-info { flex: 1; min-width: 0; padding-top: 0.6rem; }
.grp-info h1 { margin: 0 0 0.2rem; font-size: 1.45rem; }
.grp-vis { font-size: 0.72rem; font-weight: 700; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: 999px; padding: 0.12rem 0.55rem; vertical-align: middle; white-space: nowrap; }
.grp-meta { color: var(--muted); font-size: 0.85rem; margin: 0; }
.grp-meta a { color: var(--accent); text-decoration: none; font-weight: 600; }
.grp-desc { margin: 0.45rem 0 0; }
.grp-actions { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; padding-top: 0.6rem; }
.grp-invited-note { width: 100%; margin: 0 0 0.3rem; font-size: 0.9rem; }
.grp-pending-note { color: var(--muted); font-weight: 600; }
/* Onglets soulignés, comme l'aperçu validé */
.grp-tabs { display: flex; gap: 0.4rem; border-bottom: 1px solid var(--border); margin-top: 0.9rem; }
.grp-tab { background: none; border: none; color: var(--muted); font: inherit; font-weight: 700; padding: 0.55rem 0.9rem; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.grp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Lignes membres / demandes */
.grp-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.2rem; border-bottom: 1px solid rgba(127, 127, 127, 0.25); flex-wrap: wrap; }
.grp-row > span { margin-left: auto; display: flex; gap: 0.4rem; align-items: center; }
.grp-row .avatar, .grp-row .avatar-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.grp-invite-row { display: flex; gap: 0.5rem; }
.grp-invite-row input, .grp-invite-row select { flex: 1; min-width: 0; }
.grp-cardadmin { display: flex; gap: 0.5rem; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--border); }
.grp-danger { margin-top: 1.2rem; }
.grp-transfer { margin-top: 1.2rem; }
@media (min-width: 900px) {
  .grp-banner { height: auto; aspect-ratio: 3 / 1; }
}
@media (max-width: 860px) {
  .grp-banner { margin-top: -2rem; }
  .grp-head { flex-wrap: wrap; }
  .grp-actions { width: 100%; padding-top: 0; }
}

/* ---------- v147 : galeries, visionneuse, NSFW, marketplace ---------- */
.post-gallery { position: relative; margin: 0.4rem 0; }
.gal-cell { display: block; width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; background: rgba(127, 127, 127, 0.15); }
.gal-single { max-height: 560px; border-radius: 12px; }
.gal-row { display: flex; gap: 4px; height: 280px; }
.gal-row .gal-cell { flex: 1; min-width: 0; }
.gal-row-3 .gal-big { flex: 1.35; }
.gal-col { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gal-col .gal-cell { flex: 1; min-height: 0; }
.gal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.gal-grid .gal-cell { height: 180px; }
.gal-more-wrap { position: relative; display: block; }
.gal-more { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.6rem; font-weight: 700; pointer-events: none; }
.post-gallery.is-blurred .gal-cell { filter: blur(30px) brightness(0.65); pointer-events: none; }
.nsfw-veil { position: absolute; inset: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: rgba(8, 8, 12, 0.35); border: 0; cursor: pointer; z-index: 2; }
.nsfw-veil-box { display: flex; flex-direction: column; gap: 0.55rem; align-items: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); font-size: 1.02rem; }
.lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.94); z-index: 9999; display: flex; align-items: center; justify-content: center; }
.lb-img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.lb-btn { position: absolute; background: rgba(255, 255, 255, 0.14); color: #fff; border: 0; width: 44px; height: 44px; border-radius: 50%; font-size: 1.35rem; cursor: pointer; z-index: 2; }
.lb-close { top: 14px; right: 14px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #ddd; font-size: 0.95rem; }
.post-thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0.5rem 0; }
.post-thumbs.hidden { display: none; }
.post-thumb { position: relative; display: block; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; }
.post-thumb.is-cover { border-color: #e8a33d; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-cover { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 0.62rem; text-align: center; padding: 1px 0; }
.thumb-x { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.72rem; cursor: pointer; line-height: 1; }
.thumb-edit { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.72rem; cursor: pointer; line-height: 1; }
.thumb-edit.is-edited { background: #e8a33d; color: #1a1a1a; }
.thumb-focus { position: absolute; top: 24px; left: 2px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 0.72rem; cursor: pointer; line-height: 1; }
.thumb-focus.is-focused { background: #38bdf8; color: #082f49; }
.focus-stage { position: relative; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 12px; background: #000; cursor: grab; touch-action: none; margin: 0.4rem 0; }
.focus-stage img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.focus-stage:active { cursor: grabbing; }
/* Bureau : les cases des mosaïques gardent des proportions proches
   du mobile au lieu de devenir des tranches minces sur les cartes
   larges (groupes, profils). Le mobile ne change pas. */
@media (min-width: 761px) {
  .gal-grid .gal-cell { height: auto; aspect-ratio: 1 / 1; max-height: 380px; }
  .gal-row { height: auto; aspect-ratio: 2.2 / 1; max-height: 440px; }
  .gal-row-tall { aspect-ratio: 2.6 / 1; max-height: 440px; }
}

.layout-picker { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; margin: 0.4rem 0; }
.layout-picker.hidden { display: none; }
.layout-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.photo-access-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.4rem 0; }
.photo-access-row label { margin: 0; }
#post-form.sale-mode #layout-picker, #post-form.sale-mode #photo-access-row { display: none; }
.gal-stack { display: flex; flex-direction: column; gap: 6px; }
.gal-stack-img { width: 100%; height: auto; max-height: 420px; object-fit: contain; background: rgba(127, 127, 127, 0.12); border-radius: 10px; }
.gal-full-img { width: 100%; height: auto; max-height: 88vh; object-fit: contain; background: rgba(127, 127, 127, 0.10); border-radius: 10px; }
.gal-row-tall { height: 300px; }
.gal-grid-sub { margin-top: 4px; }
.lock-veil { cursor: default; background: rgba(8, 8, 12, 0.45); }

.composer-mode-row { display: flex; gap: 0.5rem; margin-bottom: 0.7rem; }
.nsfw-door { text-align: center; padding: 2.2rem 1rem; }
.mkt-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.mkt-tools { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; margin: 0.8rem 0; }
.mkt-tools .search-input { flex: 1; min-width: 150px; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.listing-card { overflow: hidden; padding: 0; }
.listing-cover { position: relative; display: block; aspect-ratio: 4 / 3; background: rgba(127, 127, 127, 0.18); }
.listing-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing-nophoto { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; }
.sold-badge { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); background: rgba(198, 40, 40, 0.92); color: #fff; text-align: center; font-weight: 800; letter-spacing: 0.08em; font-size: 1.05rem; padding: 0.35rem 0; }
.sold-badge-inline { position: static; transform: none; display: inline-block; border-radius: 0.4rem; font-size: 0.82rem; padding: 0.15rem 0.55rem; vertical-align: middle; }
.listing-body { padding: 0.7rem 0.9rem 0.9rem; }
.listing-price { font-size: 1.15rem; font-weight: 800; }
.listing-price-lg { font-size: 1.5rem; margin: 0.6rem 0 0.2rem; }
.listing-title { margin: 0.2rem 0; font-size: 1.02rem; }
.listing-meta { margin: 0.15rem 0 0; }
.mkt-chip { display: inline-block; background: rgba(232, 163, 61, 0.2); color: inherit; border: 1px solid rgba(232, 163, 61, 0.55); border-radius: 999px; padding: 0 0.5rem; font-size: 0.78rem; }
.mkt-black-chip { display: inline-block; background: #17171c; color: #f0f0f0; border: 1px solid #000; border-radius: 999px; padding: 0 0.5rem; font-size: 0.78rem; }
.mkt-black-link { text-align: right; margin-top: 1rem; opacity: 0.8; }
.seller-card { display: flex; gap: 0.8rem; align-items: center; margin: 1rem 0; }
.annonce-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem; }
.annonce-title { margin: 0.3rem 0; }
.annonce-desc { white-space: pre-wrap; }

/* ---------- v150 : Marketplace — en-tête hors carte, filtres au thème, vue 2 colonnes ---------- */
.mkt-head-actions { display: flex; align-items: center; gap: 0.6rem; }
.mkt-view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mkt-view-btn { background: transparent; border: 0; color: var(--muted); padding: 0.45rem 0.65rem; font-size: 1rem; line-height: 1; cursor: pointer; }
.mkt-view-btn.active { background: var(--accent); color: #082f49; }
.mkt-tools { margin: 0 0 0.8rem; }
.mkt-tools select { background: var(--input-bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 0.5rem 0.55rem; font-size: 0.92rem; }
.listing-title a { color: var(--text); text-decoration: none; }
.listing-title a:visited { color: var(--text); }
.mkt-grid.cols2 { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
@media (min-width: 900px) { .mkt-grid.cols2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } }
.mkt-grid.cols2 .listing-body { padding: 0.5rem 0.6rem 0.65rem; }
.mkt-grid.cols2 .listing-price { font-size: 1rem; }
.mkt-grid.cols2 .listing-title { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-grid.cols2 .listing-meta { font-size: 0.74rem; }
.mkt-grid.cols2 .listing-nophoto { font-size: 1.7rem; }

/* ---------- v151 : Marketplace à plat (plus de bulle) + filtres alignés ---------- */
.mkt-tools { display: block; margin: 0 0 0.9rem; }
.mkt-tools .search-input { width: 100%; }
.mkt-selects { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.5rem; }
.mkt-selects select { width: 100%; min-height: 44px; margin: 0; }
.mkt-selects .mkt-active-toggle { display: flex; align-items: center; gap: 0.45rem; background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px; padding: 0 0.6rem; min-height: 44px; margin: 0; cursor: pointer; }
@media (min-width: 760px) { .mkt-selects { grid-template-columns: repeat(4, 1fr); } }

/* ---------- v152 : Marketplace — vendeur en pastille, badges photo/catégorie, compteur, bouton flottant, contact vérifiés ---------- */
.mkt-seller-chip { display: inline-block; background: rgba(56, 189, 248, 0.16); border: 1px solid rgba(56, 189, 248, 0.5); color: var(--accent); border-radius: 999px; padding: 0.05rem 0.55rem; font-weight: 700; text-decoration: none; }
.mkt-seller-chip:visited { color: var(--accent); }
.listing-cat { position: absolute; top: 0.45rem; left: 0.45rem; background: rgba(2, 6, 17, 0.72); color: #fff; font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 999px; }
.listing-count { position: absolute; right: 0.45rem; bottom: 0.45rem; background: rgba(2, 6, 17, 0.72); color: #fff; font-size: 0.72rem; padding: 0.12rem 0.5rem; border-radius: 999px; }
.mkt-lock-chip { display: inline-block; background: rgba(56, 189, 248, 0.18); color: inherit; border: 1px solid rgba(56, 189, 248, 0.55); border-radius: 999px; padding: 0 0.5rem; font-size: 0.78rem; }
.mkt-count { margin: 0 0 0.6rem; opacity: 0.85; }
.mkt-verified-note { margin: 0.4rem 0 0; }
.mkt-fab { position: fixed; right: 1rem; bottom: 1.1rem; z-index: 60; display: none; background: var(--accent); color: #082f49; font-weight: 700; font-size: 1rem; border: 0; border-radius: 999px; padding: 0.8rem 1.15rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); cursor: pointer; }
@media (max-width: 760px) { .mkt-fab { display: block; } }