:root {
  --bg: #1a1a2e;
  --bg-elevated: #22223a;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --text: #f2f2f5;
  --text-muted: #a0a0b2;
  --danger: #e11d48;
  --success: #22c55e;
  --border: #33334d;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: 64px; /* laisse la place à la barre de nav en bas */
}

a {
  color: var(--accent);
  text-decoration: none;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 24px 16px;
}

/* Tailles sobres par défaut (pas les gros titres façon page d'accueil américaine) —
   toute nouvelle balise h1/h2 ajoutée sur le site en hérite automatiquement, pas besoin
   d'y repenser à chaque nouvelle page. */
h1, h2 {
  margin-top: 0;
  font-weight: 700;
}

h1 {
  font-size: 1.4rem;
}

h2 {
  font-size: 1.1rem;
}

input, textarea, select, button {
  font-family: inherit;
  font-size: 1rem;
}

input, textarea, select {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
}

/* Icône œil ajoutée automatiquement sur tout champ mot de passe (voir initPasswordToggles
   dans api.js) — un futur champ mot de passe en hérite sans rien ajouter de plus. */
.password-field-wrap {
  position: relative;
  margin-bottom: 12px;
}

.password-field-wrap input {
  margin-bottom: 0;
  padding-right: 44px;
}

.password-toggle-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  background: transparent;
  border: none;
  padding: 6px 10px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
}

button {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: white;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 8px;
}

button:hover {
  background: var(--accent-hover);
}

button.secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}

button.danger {
  background: var(--danger);
}

.error {
  color: var(--danger);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.message-close {
  background: none;
  border: none;
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.success {
  color: var(--success);
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

/* Barre de navigation en bas, style app mobile */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  padding: 10px 0;
}

.bottom-nav a {
  color: var(--text-muted);
  font-size: 0.8rem;
  text-align: center;
  position: relative;
}

/* Badge du nombre de messages non lus, sur l'onglet Messages */
.nav-badge {
  position: absolute;
  top: -6px;
  right: -10px;
  background: #e0245e;
  color: white;
  border-radius: 999px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.bottom-nav a.active {
  color: var(--accent);
}

/* Feed vidéo vertical plein écran */
.feed {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
}

.feed-item {
  scroll-snap-align: start;
  height: calc(100vh - 64px);
  height: calc(100dvh - 64px);
  position: relative;
  background: var(--bg);
}

.video-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc((100vh - 64px) * 9 / 16);
  width: calc((100dvh - 64px) * 9 / 16);
  max-width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-height: 800px;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  background: black;
  /* overflow retiré volontairement : sinon la popup auteur est coupée sur les
     écrans où la carte vidéo est moins haute (PC) quand elle contient beaucoup
     de boutons (Supprimer/Bannir) */
}

.video-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 16px;
}

.video-card video {
  cursor: pointer;
}

.play-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
  color: white;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.play-indicator.visible {
  opacity: 0.85;
}

.mute-btn {
  position: absolute;
  left: 12px;
  bottom: 24px;
  font-size: 1.4rem;
  color: white;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  cursor: pointer;
  user-select: none;
}

.video-card .side-actions {
  position: absolute;
  right: 12px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.video-card .action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  font-size: 1.4rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
  user-select: none;
}

.video-card .like-btn,
.video-card .report-btn {
  cursor: pointer;
}

.video-card .action-item span {
  font-size: 0.75rem;
  margin-top: 2px;
}

.progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  touch-action: none;
  border-radius: 0 0 16px 16px;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  pointer-events: none;
}

/* Chat — le fil de discussion occupe tout l'écran (moins la barre de nav) en position
   fixe, indépendamment du padding de .container, pour que le champ de saisie reste
   TOUJOURS visible en bas. Seule la liste des messages défile, dans l'espace restant
   entre l'en-tête (nom du contact / boutons) et le champ de saisie. */
#chat-ui {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  padding: 16px;
  box-sizing: border-box;
  z-index: 5;
  /* Colonne centrée façon vraie app de messagerie, plutôt que des bulles étalées
     sur toute la largeur d'un grand écran. */
  max-width: 760px;
  margin: 0 auto;
}

#chat-ui .chat-header,
#chat-ui .chat-input-row {
  flex-shrink: 0;
}

/* Barre de saisie : icônes (emoji/GIF/photo) + champ texte + bouton Envoyer, tous sur
   une seule ligne sur grand écran. Sous 480px (mobile), les icônes passent sur leur
   propre ligne au-dessus, pour laisser toute la largeur au champ de texte. */
.chat-input-row {
  display: flex;
  gap: 8px;
}

.chat-icons-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.chat-text-row {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.chat-text-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

@media (max-width: 480px) {
  .chat-input-row {
    flex-direction: column;
  }
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-bottom: 12px;
}

.message {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-elevated);
}

/* Message de type GIF : l'image occupe toute la bulle, sans le padding texte */
.message.gif-message {
  padding: 0;
  overflow: hidden;
  line-height: 0;
  background: transparent;
}

.message.gif-message img {
  display: block;
  max-width: 100%;
  width: 180px;
  border-radius: 12px;
}

/* Panneaux "Emoji" et "GIF" au-dessus du champ de saisie — hauteur bornée avec
   défilement interne pour ne jamais déborder de l'écran, y compris sur mobile. */
.picker-panel {
  flex-shrink: 0;
  max-height: 240px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 8px;
  box-sizing: border-box;
}

.picker-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  margin-bottom: 8px;
  padding-bottom: 4px;
}

.picker-tabs button {
  width: auto;
  flex-shrink: 0;
  padding: 4px 8px;
  font-size: 1.1rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}

.picker-tabs button.active {
  background: var(--bg);
  border-color: var(--border);
}

.emoji-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

.emoji-grid button {
  width: auto;
  padding: 4px;
  font-size: 1.4rem;
  line-height: 1;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.emoji-grid button:hover {
  background: var(--bg);
}

.picker-hint {
  color: var(--accent);
  font-size: 0.8rem;
  margin: 0 0 8px;
}

.gif-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.gif-grid img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  display: block;
  background: var(--bg);
}

/* Sur les très petits écrans, deux colonnes suffisent pour garder des GIFs bien lisibles */
@media (max-width: 380px) {
  .gif-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Petit avatar affiché à côté de chaque message (côté opposé aux icônes
   supprimer/signaler), toujours du côté "origine" du message. */
.chat-message-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.chat-message-avatar-placeholder {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--text-muted);
  flex-shrink: 0;
}

.message.mine {
  align-self: flex-end;
  background: var(--accent);
}

.profile-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Avatar de profil */
.avatar-large {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  display: inline-block;
}

.avatar-placeholder {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted);
  margin: 0 auto;
}

.avatar-small {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  flex-shrink: 0;
}

.profile-card {
  display: flex;
  align-items: center;
}/* Avatar de l'auteur sur chaque vidéo du feed */
.author-avatar-wrap {
  position: absolute;
  top: 12px;
  right: 12px;
}

.author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.6);
}/* Popup au clic sur l'avatar (point 2) */
.author-avatar {
  cursor: pointer;
}

.author-popup {
  position: absolute;
  top: 56px;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  width: 200px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  display: none;
  z-index: 10;
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  overflow-y: auto;
}

.author-popup.visible {
  display: block;
}

.author-popup img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 8px;
}

.author-popup .author-name {
  font-weight: 600;
}/* Bouton Contacter dans la popup (point 3) */
.author-popup button {
  margin-top: 4px;
  margin-bottom: 0;
}/* Avatar de l'utilisateur connecté dans la barre de navigation */
.bottom-nav {
  align-items: center;
}

.nav-avatar-wrap {
  display: flex;
  align-items: center;
}

.nav-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
}/* Voyant de présence sur l'avatar du feed : vert disponible, orange occupé, rouge déconnecté */
.presence-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e11d48;
  border: 2px solid var(--bg);
}

.presence-dot.online {
  background: #22c55e;
}

.presence-dot.busy {
  background: #f59e0b;
}/* Animation ludique sur la page Publier une vidéo */
.pointer-hint {
  text-align: center;
  margin-bottom: 8px;
}

.pointer-emoji {
  display: inline-block;
  font-size: 2.5rem;
  animation: pointer-bounce 1.2s ease-in-out infinite;
}

.pointer-text {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 4px 0 0;
}

@keyframes pointer-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}/* Animation téléphone + doigt sur la page Publier une vidéo */
.phone-wrap {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 70px;
}

.phone-emoji {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 2.8rem;
  animation: phone-tilt 2s ease-in-out infinite;
}

.tap-emoji {
  position: absolute;
  bottom: -6px;
  right: -4px;
  font-size: 1.4rem;
  animation: tap-bounce 1s ease-in-out infinite;
}

@keyframes phone-tilt {
  0%, 100% { transform: translateX(-50%) rotate(-8deg); }
  50% { transform: translateX(-50%) rotate(8deg); }
}

@keyframes tap-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}/* Version glamour : téléphone + finger-heart centré en dessous */
.phone-wrap {
  position: relative;
  display: block;
  width: 60px;
  height: 70px;
  margin: 0 auto;
}

.phone-wrap .phone-emoji {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-size: 2.8rem;
  animation: phone-tilt 2s ease-in-out infinite;
}

.heart-finger-emoji {
  display: block;
  text-align: center;
  font-size: 1.8rem;
  margin-top: 4px;
  animation: heart-pulse 1s ease-in-out infinite;
  filter: drop-shadow(0 0 6px var(--accent));
}

@keyframes heart-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}/* Cœur glamour qui rebondit vers le bouton (remplace le finger-heart cassé) */
.heart-finger-emoji {
  font-size: 2rem;
  animation: heart-pulse 1s ease-in-out infinite, heart-bounce-down 1s ease-in-out infinite;
}

@keyframes heart-bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}/* Cartes des demandes de contact / personnes bloquées */
.contact-request-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.contact-request-actions {
  display: flex;
  gap: 8px;
}

.contact-request-actions button {
  width: auto;
  padding: 8px 12px;
  margin-bottom: 0;
}.boosted-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(90deg, #f59e0b, #ef4444);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}
/* Badge du compte officiel wicwoc, visible directement sur la vidéo dans le feed (pas
   besoin d'ouvrir la popup pour savoir que ce n'est pas un vrai profil de rencontre) */
.official-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  z-index: 2;
}
/* Même badge, en plus petit, répété dans la popup auteur */
.official-badge-inline {
  display: inline-block;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  color: white;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.official-notice {
  color: var(--text-muted);
  font-size: 0.78rem;
  margin: 0;
}
/* Sélecteur de langue : globe animé, tourne doucement comme une planète avec un halo de couleurs */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}

.lang-switch-globe {
  display: inline-block;
  font-size: 1.3rem;
  animation: globe-spin 6s linear infinite, globe-glow 4s ease-in-out infinite;
}

.lang-switch-code {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 600;
}

@keyframes globe-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes globe-glow {
  0%, 100% { filter: drop-shadow(0 0 3px #7c3aed); }
  33% { filter: drop-shadow(0 0 5px #22c55e); }
  66% { filter: drop-shadow(0 0 5px #f59e0b); }
}
/* Barre de nav défilante horizontalement sur petit écran, pour éviter l'écrasement.
   Seuil volontairement large (900px, pas 480px) : avec le menu complet (compte admin,
   "Modération" en plus), les éléments s'écrasent déjà les uns contre les autres bien avant
   480px de large — repéré en réduisant la fenêtre Chrome (~520px), pas seulement sur un vrai
   téléphone. Uniquement basé sur la largeur d'écran (@media), jamais sur l'appareil/le
   user-agent, pour un rendu identique qu'il s'agisse d'un vrai téléphone, d'une fenêtre
   Chrome redimensionnée, ou du mode responsive des outils de développement. */
@media (max-width: 900px) {
  .bottom-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 14px;
    padding: 10px 14px;
  }

  .bottom-nav a {
    font-size: 0.72rem;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .nav-avatar-wrap,
  .lang-switch {
    flex-shrink: 0;
  }
}
/* Bouton de sélection de fichier personnalisé (remplace le bouton natif non traduisible) */
.file-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-elevated);
}

.file-input-label {
  background: var(--accent);
  color: white;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.file-input-label:hover {
  background: var(--accent-hover);
}

.file-input-filename {
  font-size: 0.85rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Garde du corps — animation "j'aime" un profil : rose ou bisou qui apparaît sur la vidéo,
   centrée en bas, remonte lentement vers le haut, toujours au-dessus de la popup */
.like-fly-emoji {
  position: absolute;
  top: 75%;
  left: 50%;
  font-size: 4.5rem;
  pointer-events: none;
  z-index: 20;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.6));
  animation: like-fly 3.6s ease-out forwards;
}

@keyframes like-fly {
  0% {
    top: 75%;
    transform: translate(-50%, -50%) scale(0.2) rotate(-18deg);
    opacity: 0;
  }
  15% {
    top: 70%;
    transform: translate(-50%, -50%) scale(1.3) rotate(10deg);
    opacity: 1;
  }
  40% {
    top: 55%;
    transform: translate(-50%, -50%) scale(1.15) rotate(-6deg);
    opacity: 1;
  }
  65% {
    top: 35%;
    transform: translate(-50%, -50%) scale(1.2) rotate(6deg);
    opacity: 1;
  }
  85% {
    top: 18%;
    transform: translate(-50%, -50%) scale(1.05) rotate(-4deg);
    opacity: 0.85;
  }
  100% {
    top: 5%;
    transform: translate(-50%, -50%) scale(0.75) rotate(8deg);
    opacity: 0;
  }
}
/* Garde du corps — animation "je n'aime pas" un profil : coup de poing + verre qui craque */
.dislike-fist-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 4.5rem;
  pointer-events: none;
  z-index: 20;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,0.7));
  animation: fist-punch 0.55s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes fist-punch {
  0% {
    transform: translate(-160%, -50%) scale(0.6) rotate(-25deg);
    opacity: 0;
  }
  55% {
    transform: translate(-50%, -50%) scale(1.5) rotate(8deg);
    opacity: 1;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.2) rotate(-4deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
    opacity: 0;
  }
}

.glass-crack-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 19;
  background-image:
    linear-gradient(105deg, transparent 47%, rgba(255,255,255,0.9) 48%, transparent 50%),
    linear-gradient(60deg, transparent 44%, rgba(255,255,255,0.7) 45%, transparent 47%),
    linear-gradient(150deg, transparent 40%, rgba(255,255,255,0.6) 41%, transparent 43%),
    linear-gradient(20deg, transparent 55%, rgba(255,255,255,0.6) 56%, transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0%, transparent 12%);
  opacity: 0;
  animation: glass-crack 0.55s ease-out forwards;
}

@keyframes glass-crack {
  0% { opacity: 0; }
  10% { opacity: 1; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}

.video-card.shake {
  animation: card-shake 0.4s ease-in-out;
}

@keyframes card-shake {
  0%, 100% { transform: translate(-50%, -50%); }
  20% { transform: translate(calc(-50% - 8px), -50%); }
  40% { transform: translate(calc(-50% + 8px), -50%); }
  60% { transform: translate(calc(-50% - 5px), -50%); }
  80% { transform: translate(calc(-50% + 5px), -50%); }
}
/* Garde du corps — notification reçue en temps réel (bisou/rose ou coup de poing),
   visible peu importe la vidéo affichée à l'écran */
.received-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-40px);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 50;
  opacity: 0;
  animation: toast-in-out 3.2s ease forwards;
  pointer-events: none;
}

.received-toast.punch {
  border-color: var(--danger);
}

.received-toast-emoji {
  font-size: 1.8rem;
}

.received-toast-text {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 600;
}

@keyframes toast-in-out {
  0% { opacity: 0; transform: translateX(-50%) translateY(-40px); }
  10% { opacity: 1; transform: translateX(-50%) translateY(0); }
  85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}
/* Petite notification en bas à gauche (ex: "Ta vidéo est prête !"), visible sur
   n'importe quelle page, disparaît automatiquement après 10 secondes. */
.bottom-toast {
  position: fixed;
  bottom: 76px;
  left: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 70;
  max-width: calc(100vw - 32px);
  animation: bottom-toast-in-out 10.3s ease forwards;
  pointer-events: none;
}

.bottom-toast-emoji {
  font-size: 1.4rem;
}

.bottom-toast-text {
  font-size: 0.85rem;
  color: var(--text);
  font-weight: 600;
}

@keyframes bottom-toast-in-out {
  0% { opacity: 0; transform: translateX(-20px); }
  5% { opacity: 1; transform: translateX(0); }
  92% { opacity: 1; transform: translateX(0); }
  100% { opacity: 0; transform: translateX(-20px); }
}
/* Bandeau permanent (pas d'auto-disparition, contrairement au bottom-toast) tant que la
   vidéo de présentation est en cours de vérification — le compte peut consulter le site
   mais pas encore publier/liker/envoyer de messages (voir backend/accessGate.js). */
.gate-restricted-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  z-index: 80;
}

/* Garde du corps — fenêtre de choix de l'arme (premium uniquement) */
.weapon-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
}

.weapon-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  width: 280px;
  text-align: center;
}

.weapon-modal h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
}

.weapon-modal p {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0 0 16px;
}

.weapon-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.weapon-choice {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 4px;
  cursor: pointer;
  font-size: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--text);
}

.weapon-choice .weapon-label {
  font-size: 0.65rem;
  color: var(--text-muted);
}

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

.weapon-cancel-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Garde du corps — animation de destruction avec l'arme choisie */
.weapon-fly-emoji {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 5.5rem;
  pointer-events: none;
  z-index: 25;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.8));
  animation: weapon-strike 0.9s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}

@keyframes weapon-strike {
  0% {
    transform: translate(-50%, -220%) scale(0.5) rotate(-30deg);
    opacity: 0;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.6) rotate(15deg);
    opacity: 1;
  }
  65% {
    transform: translate(-50%, -50%) scale(1.3) rotate(-8deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 0;
  }
}

.video-card.shake-hard {
  animation: card-shake-hard 0.6s ease-in-out;
}

@keyframes card-shake-hard {
  0%, 100% { transform: translate(-50%, -50%); }
  15% { transform: translate(calc(-50% - 14px), calc(-50% - 6px)) rotate(-2deg); }
  30% { transform: translate(calc(-50% + 14px), calc(-50% + 6px)) rotate(2deg); }
  45% { transform: translate(calc(-50% - 10px), calc(-50% - 4px)) rotate(-1deg); }
  60% { transform: translate(calc(-50% + 10px), calc(-50% + 4px)) rotate(1deg); }
  75% { transform: translate(calc(-50% - 5px), -50%); }
  90% { transform: translate(calc(-50% + 5px), -50%); }
}

.video-card.banned-fadeout {
  animation: banned-fadeout 0.6s ease forwards;
}

@keyframes banned-fadeout {
  0% { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(6px); transform: translate(-50%, -50%) scale(0.85); }
}
/* Garde du corps — armes verrouillées pour les non-premium (aperçu gratuit limité au marteau) */
.weapon-choice.locked {
  position: relative;
}

.weapon-choice.locked::after {
  content: '🔒';
  position: absolute;
  top: 2px;
  right: 6px;
  font-size: 0.8rem;
}

.weapon-locked-hint {
  font-size: 0.72rem;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  margin: -4px 0 12px;
}

/* ==========================================================================
   Dashboard admin (page moderation.html) — mise en page desktop dédiée,
   différente du reste du site (mobile-first, max-width 480px) : cette page
   n'est utilisée que par l'admin, depuis un navigateur desktop. Mêmes
   couleurs/police que le reste du site (voir :root en haut de ce fichier).
   ========================================================================== */

.admin-dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}

.admin-title {
  margin-bottom: 20px;
}

.admin-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.admin-sidebar {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 20px;
}

.admin-nav-item {
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 0;
}

.admin-nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.admin-nav-item.active {
  background: var(--accent);
  color: white;
}

.admin-main {
  flex: 1;
  min-width: 0;
}

.admin-section h2 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}

.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.admin-stat-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.admin-stat-card[data-section] {
  cursor: pointer;
}

.admin-stat-card[data-section]:hover {
  border-color: var(--accent);
}

.admin-stat-value {
  font-size: 1.8rem;
  font-weight: 700;
}

.admin-stat-label {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 4px;
}

.admin-table {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}

.admin-table p {
  padding: 16px;
  margin: 0;
  color: var(--text-muted);
}

.admin-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.admin-row:last-child {
  border-bottom: none;
}

.admin-row-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-row-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text-muted);
  font-size: 0.9rem;
}

.admin-row-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.admin-row-thumb--text {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  font-size: 1.2rem;
}

.admin-row-video-preview {
  width: 68px;
  height: 120px;
  border-radius: 8px;
  object-fit: cover;
  background: black;
  flex-shrink: 0;
}

.admin-row-main {
  flex: 1;
  min-width: 0;
}

.admin-row-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-row-meta {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-row-preview-text {
  color: var(--text-muted);
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.admin-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.admin-badge--success {
  background: rgba(34, 197, 94, 0.15);
  color: var(--success);
}

.admin-badge--danger {
  background: rgba(225, 29, 72, 0.15);
  color: var(--danger);
}

.admin-row-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.admin-row-actions button {
  width: auto;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
}

.admin-gift-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px 58px;
  border-bottom: 1px solid var(--border);
}

.admin-gift-form select,
.admin-gift-form button {
  width: auto;
  margin-bottom: 0;
  padding: 6px 12px;
  font-size: 0.8rem;
}

.admin-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}

.admin-pagination button {
  width: auto;
}

@media (max-width: 860px) {
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    position: static;
    padding-bottom: 4px;
  }
  .admin-nav-item {
    width: auto;
    flex-shrink: 0;
  }
  .admin-row {
    flex-wrap: wrap;
  }
  .admin-row-title,
  .admin-row-meta,
  .admin-row-preview-text {
    white-space: normal;
    max-width: none;
  }
}