/* Style minimal PetMatch */
/* Thème moderne type app */
:root{ --bg:#ffffff; --card:#ffffff; --muted:#4b5563; --primary:#ec4899; --accent:#ec4899; --danger:#ef4444; --like:#16a34a; --nope:#dc2626; }
html[data-theme="dark"]{ --bg:#0b1220; --card:#141a2b; --muted:#9aa4b2; --primary:#ec4899; --accent:#ec4899; --danger:#f87171; --like:#22c55e; --nope:#ef4444; }
body { background: var(--bg); color: #0b1220; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }
.standalone html[data-theme="dark"] body, html[data-theme="dark"] body { background: var(--bg); color: #e5e7eb; }
.standalone html[data-theme="dark"] body, html[data-theme="dark"] body { color: #e5e7eb; }
.standalone body, body { padding-bottom: env(safe-area-inset-bottom); }

/* ===== MODAL D'ÉDITION DU PROFIL ===== */
.profile-image-section, .banner-image-section {
  background: #f8f9fa;
  border: 2px dashed #dee2e6;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s ease;
}

.profile-image-section:hover, .banner-image-section:hover {
  border-color: var(--primary);
  background: #f0f8ff;
}

.current-image-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.current-image-preview img {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.current-image-preview img:hover {
  transform: scale(1.05);
}

.profile-image-section .d-flex, .banner-image-section .d-flex {
  margin-top: 15px;
}

#delete_profile_photo, #delete_banner {
  min-width: 40px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#delete_profile_photo:hover, #delete_banner:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(220, 53, 69, 0.3);
}

/* Thème sombre pour la modal */
html[data-theme="dark"] .profile-image-section,
html[data-theme="dark"] .banner-image-section {
  background: rgba(255, 255, 255, 0.05);
  border-color: #374151;
}

html[data-theme="dark"] .profile-image-section:hover,
html[data-theme="dark"] .banner-image-section:hover {
  border-color: var(--primary);
  background: rgba(236, 72, 153, 0.1);
}

/* Amélioration de la modal */
.modal-content {
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border: none;
}

.modal-header {
  border-bottom: 1px solid #e9ecef;
  padding: 20px 24px;
}

.modal-body {
  padding: 24px;
}

.modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 20px 24px;
}

/* Labels de la modal */
.modal-body .form-label.fw-semibold {
  color: #495057;
  margin-bottom: 12px;
  font-size: 0.95rem;
}

html[data-theme="dark"] .modal-body .form-label.fw-semibold {
  color: #e5e7eb;
}

/* Séparateur */
.modal-body hr {
  border-color: #e9ecef;
  margin: 24px 0;
}

html[data-theme="dark"] .modal-body hr {
  border-color: #374151;
}

/* ===== BIO DU PROFIL ===== */
.bio-text {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  padding: 12px;
  border-left: 3px solid var(--primary);
  max-width: 100%;
  width: 100%;
}

/* Responsive pour la bio */
@media (min-width: 576px) {
  .bio-text {
    max-width: 500px;
  }
}

@media (min-width: 768px) {
  .bio-text {
    max-width: 609px;
  }
}

@media (min-width: 992px) {
  .bio-text {
    max-width: 700px;
  }
}

/* Layout mobile pour le profil */
@media (max-width: 575.98px) {
  /* Masquer la bio et les boutons dans la section principale sur mobile */
  .bio-mobile {
    display: none !important;
  }
  
  .profile-actions {
    display: none !important;
  }
  
  /* Style pour la bio mobile */
  .bio-text-mobile {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    padding: 12px;
    border-left: 3px solid var(--primary);
    margin: 16px 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  .bio-text-mobile p {
    color: #374151;
    line-height: 1.5;
    margin: 0;
  }

  /* Thème sombre: bio mobile lisible */
  html[data-theme="dark"] .bio-text-mobile {
    background: rgba(255, 255, 255, 0.06);
  }
  html[data-theme="dark"] .bio-text-mobile p {
    color: #e5e7eb;
  }
  
  /* Style pour les boutons mobile */
  .profile-actions-mobile {
    margin: 16px 0;
    padding: 0 15px;
  }
  
  .profile-mobile-content {
    padding: 0 15px;
  }
}

/* Layout desktop/tablette - masquer le contenu mobile */
@media (min-width: 576px) {
  .profile-mobile-content {
    display: none !important;
  }
}

.bio-text p {
  color: #374151;
  line-height: 1.5;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Thème sombre: bio lisible (texte clair + fond adapté) */
html[data-theme="dark"] .bio-text {
  background: rgba(255, 255, 255, 0.06);
}
html[data-theme="dark"] .bio-text p {
  color: #e5e7eb;
}

/* ===== BANDEAU D'AVERTISSEMENTS ===== */
.warning-banner-container {
  position: sticky;
  top: 0;
  z-index: 1055;
  margin-bottom: 0;
}

.warning-banner {
  margin-bottom: 0 !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  padding: 12px 0 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.warning-banner .container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

.warning-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.warning-content {
  flex-grow: 1;
  min-width: 0;
}

.warning-content strong {
  font-weight: 600;
  margin-right: 8px;
}

.warning-banner .btn-close {
  flex-shrink: 0;
  margin-left: 12px;
  padding: 0;
  background: none;
  border: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.warning-banner .btn-close:hover {
  opacity: 1;
}

/* Styles spécifiques par type d'avertissement */
.warning-banner.alert-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-bottom: 2px solid #3b82f6;
  color: #1e40af;
}

.warning-banner.alert-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 2px solid #f59e0b;
  color: #92400e;
}

.warning-banner.alert-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-bottom: 2px solid #ef4444;
  color: #991b1b;
}

.warning-banner.alert-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-bottom: 2px solid #10b981;
  color: #065f46;
}

/* Ne pas modifier les couleurs des avertissements en mode sombre */
html[data-theme="dark"] .warning-banner.alert-info {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  border-bottom: 2px solid #3b82f6;
  color: #1e40af;
}
html[data-theme="dark"] .warning-banner.alert-warning {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-bottom: 2px solid #f59e0b;
  color: #92400e;
}
html[data-theme="dark"] .warning-banner.alert-danger {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-bottom: 2px solid #ef4444;
  color: #991b1b;
}
html[data-theme="dark"] .warning-banner.alert-success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-bottom: 2px solid #10b981;
  color: #065f46;
}

/* Responsive pour les bandeaux */
@media (max-width: 768px) {
  .warning-banner {
    padding: 10px 0 !important;
  }
  
  .warning-banner .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }
  
  .warning-content {
    font-size: 0.9rem;
  }
  
  .warning-content strong {
    display: block;
    margin-bottom: 4px;
    margin-right: 0;
  }
  
  .warning-icon {
    margin-right: 8px;
  }
  
  .warning-icon svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 576px) {
  .warning-banner {
    padding: 8px 0 !important;
  }
  
  .warning-content {
    font-size: 0.85rem;
  }
  
  .warning-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* ===== HEADER MODERNE STYLE RÉSEAUX SOCIAUX ===== */
.modern-navbar {
  position: sticky;
  top: 0;
  z-index: 1040;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 0.75rem 0;
  transition: all 0.3s ease;
}
html[data-theme="dark"] .modern-navbar { background: linear-gradient(135deg, #0f1629 0%, #0b1220 100%) !important; border-bottom-color: rgba(255,255,255,0.08); box-shadow: 0 4px 20px rgba(0,0,0,0.5); }

/* Ajustement du header quand il y a des announcements */
.modern-navbar.has-warnings {
  top: var(--warning-height, 0px);
}

.modern-navbar:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Logo modernisé */
.modern-brand {
  text-decoration: none !important;
  transition: transform 0.3s ease;
}

.modern-brand:hover {
  transform: scale(1.05);
}

.brand-container {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-logo {
  height: 48px;
  width: auto;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(236, 72, 153, 0.2));
}

.brand-text {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary) 0%, #be185d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

/* Bouton hamburger modernisé */
.modern-toggler {
  border: none !important;
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  transition: all 0.3s ease;
}

.modern-toggler:hover {
  background: rgba(236, 72, 153, 0.1);
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 3px;
  background: linear-gradient(135deg, var(--primary) 0%, #be185d 100%);
  margin: 4px 0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.modern-toggler[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.modern-toggler[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
}

.modern-toggler[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Navigation moderne */
.modern-nav {
  gap: 8px;
}

.modern-nav-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 12px 16px !important;
  border-radius: 12px;
  color: #64748b !important;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.modern-nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, var(--primary) 0%, #be185d 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 12px;
}

.modern-nav-link:hover::before {
  opacity: 0.1;
}

.modern-nav-link:hover {
  color: var(--primary) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.15);
}

.modern-nav-link.active {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(190, 24, 93, 0.1) 100%);
  color: var(--primary) !important;
}

.nav-icon {
  width: 20px;
  height: 20px;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.modern-nav-link:hover .nav-icon {
  transform: scale(1.1);
}

.nav-text {
  position: relative;
  z-index: 1;
  font-size: 0.95rem;
}

/* Lien admin spécial */
.admin-link {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #111827 !important;
}

.admin-link::before {
  background: rgba(255, 255, 255, 0.2) !important;
}

.admin-link:hover {
  color: #0b1220 !important;
  transform: translateY(-2px) scale(1.02);
}

/* ===== TABLES ADMIN ===== */
.admin-table-wrap {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  background: transparent;
}
html[data-theme="dark"] .admin-table-wrap {
  border-color: rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}

.admin-table {
  margin: 0;
  --row-hover: rgba(0,0,0,0.03);
  background-color: transparent;
}
html[data-theme="dark"] .admin-table { --row-hover: rgba(255,255,255,0.06); }

.admin-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.0));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}
html[data-theme="dark"] .admin-table thead th {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.0));
  color: #e5e7eb;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

.admin-table tbody tr {
  transition: background-color 0.15s ease;
}

.admin-table tbody tr:hover {
  background-color: var(--row-hover);
}

.admin-table tbody tr:nth-child(odd) {
  background-color: rgba(0,0,0,0.01);
}
html[data-theme="dark"] .admin-table tbody tr:nth-child(odd) {
  background-color: rgba(255,255,255,0.03);
}

.admin-table td, .admin-table th {
  vertical-align: middle;
}

.admin-table td img {
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
html[data-theme="dark"] .admin-table td img {
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.admin-table .badge-role {
  font-weight: 600;
  letter-spacing: .2px;
}

/* Section utilisateur moderne */
.modern-user-nav {
  gap: 12px;
  align-items: center;
}

.user-profile-container {
  position: relative;
}

.user-profile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  border-radius: 25px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  text-decoration: none !important;
  color: #374151 !important;
  font-weight: 500;
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}
html[data-theme="dark"] .user-profile-link { background: linear-gradient(135deg, #121a2c 0%, #0f172a 100%); color: #e5e7eb !important; border-color: rgba(255,255,255,0.06); }

.user-profile-link:hover {
  background: linear-gradient(135deg, var(--primary) 0%, #be185d 100%);
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
}

/* Chevron dans le bouton profil */
.user-profile-link .chevron { opacity: .7; margin-left: 2px; transition: transform .2s ease, opacity .2s ease; }
.user-profile-link[aria-expanded="true"] .chevron { transform: rotate(180deg); opacity: 1; }

.user-avatar-container {
  position: relative;
  width: 40px;
  height: 40px;
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.user-profile-link:hover .user-avatar {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.online-indicator {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border: 2px solid white;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
}

/* ===== Menu rapide profil (style réseaux sociaux) ===== */
.profile-quick-menu { position: absolute; right: 0; top: calc(100% + 8px); width: 320px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.12); overflow: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
html[data-theme="dark"] .profile-quick-menu { background: #0f172a; border-color: rgba(255,255,255,0.08); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.profile-quick-menu[aria-hidden="false"] { opacity: 1; transform: translateY(0); pointer-events: auto; }
.profile-quick-menu::before { content: ""; position: absolute; right: 24px; top: -8px; width: 14px; height: 14px; transform: rotate(45deg); background: #ffffff; border-left: 1px solid #e5e7eb; border-top: 1px solid #e5e7eb; }
.user-profile-container { position: relative; }

.pqm-header { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 12px; background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%); border-bottom: 1px solid #e5e7eb; }
html[data-theme="dark"] .pqm-header { background: linear-gradient(135deg, #0b1220 0%, #121a2c 100%); border-bottom-color: rgba(255,255,255,0.06); }
.pqm-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); background: #f3f4f6; }
.pqm-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pqm-info { display: grid; align-content: center; gap: 2px; }
.pqm-name { font-weight: 700; color: #0b1220; font-size: 0.95rem; }
html[data-theme="dark"] .pqm-name { color: #e5e7eb; }
.pqm-profile-link { font-size: .85rem; color: var(--primary); text-decoration: none; }
.pqm-profile-link:hover { text-decoration: underline; }

.pqm-actions { display: grid; padding: 6px; }
.pqm-item { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 10px; color: #374151; text-decoration: none; transition: background .15s ease, transform .15s ease; }
.pqm-item:hover { background: #f9fafb; transform: translateY(-1px); }
html[data-theme="dark"] .pqm-item { color: #cbd5e1; }
html[data-theme="dark"] .pqm-item:hover { background: rgba(255,255,255,0.06); }
.pqm-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; background: #f3f4f6; border: 1px solid #e5e7eb; border-radius: 8px; }

.pqm-footer { padding: 10px; border-top: 1px solid #e5e7eb; background: #fafafa; }
.logout-btn.w-100 { width: 100%; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; }

/* Boutons modernes */
.modern-btn {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 20px !important;
  border-radius: 25px !important;
  font-weight: 600;
  text-decoration: none !important;
  transition: all 0.3s ease;
  border: 2px solid transparent !important;
  position: relative;
  overflow: hidden;
}

.modern-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.modern-btn:hover::before {
  left: 100%;
}

.modern-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-icon {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.modern-btn:hover .btn-icon {
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 991.98px) {
  .modern-nav {
    margin-top: 1rem;
    gap: 4px;
  }
  
  .modern-nav-link {
    padding: 10px 12px !important;
    font-size: 0.9rem;
  }
  
  .nav-text {
    font-size: 0.85rem;
  }
  
  .brand-text {
    font-size: 1.25rem;
  }
  
  .brand-logo {
    height: 40px;
  }
  
  .user-profile-link {
    padding: 6px 12px;
  }
  
  .user-avatar-container {
    width: 32px;
    height: 32px;
  }
  
  .modern-btn {
    padding: 8px 16px !important;
    font-size: 0.9rem;
  }
}

@media (max-width: 575.98px) {
  .modern-navbar {
    padding: 0.5rem 0;
  }
  
  .brand-container {
    gap: 8px;
  }
  
  .brand-text {
    font-size: 1.1rem;
  }
  
  .brand-logo {
    height: 36px;
  }
  
  .modern-nav-link {
    padding: 8px 10px !important;
  }
  
  .nav-icon {
    width: 18px;
    height: 18px;
  }
}

/* Anciens styles navbar pour compatibilité */
.navbar.bg-dark{ background: #ffffff !important; border-bottom: 1px solid #e5e7eb; }
.navbar .nav-link{ color:#1f2937 !important; }
.navbar .nav-link:hover{ color:#111827 !important; }
html[data-theme="dark"] .navbar.bg-dark{ background: #0b1220 !important; border-bottom-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .navbar .nav-link{ color:#cbd5e1 !important; }
html[data-theme="dark"] .navbar .nav-link:hover{ color:#e5e7eb !important; }
.btn-primary{ background: var(--primary); border: none; }
.btn{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn:hover, .btn:focus{ background:#be185d; border-color:#be185d; color:#fff; }
.btn-light{ background: var(--primary); border-color: var(--primary); color:#fff; }
.btn-light:hover{ background:#be185d; border-color:#be185d; color:#fff; }
.btn-outline-primary{ border-color: var(--primary); color: white; }
.btn-outline-primary:hover{ background: var(--primary); color: white; }
.card, .swipe-card{ background: var(--card); color:#0b1220; border: 1px solid #e5e7eb; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .swipe-card { color:#e5e7eb; border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .card .card-text,
html[data-theme="dark"] .card .list-group-item,
html[data-theme="dark"] .card .btn-link,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card h5,
html[data-theme="dark"] .card h6 { color:#e5e7eb !important; }
html[data-theme="dark"] .card .list-group-item { background: transparent; border-color: rgba(255,255,255,0.06); }
html[data-theme="dark"] .card, html[data-theme="dark"] .swipe-card { color:#e5e7eb; border-color: rgba(255,255,255,0.06); }
.bg-light{ background:#f7f9fc !important; }
html[data-theme="dark"] .bg-light{ background:#0f1629 !important; }
.bg-white{ background:#ffffff !important; }
html[data-theme="dark"] .bg-white{ background:#0f1629 !important; }
.form-control, .form-select{ background:#ffffff; color:#0b1220; border:1px solid #e5e7eb; }
html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select { background:#0b1220; color:#e5e7eb; border-color: rgba(255,255,255,0.08); }
.form-control:focus, .form-select:focus{ border-color: #d94690; box-shadow: 0 0 0 .25rem rgba(236,72,153,.15); }
.form-label{ font-weight:600; color:#111827; }
html[data-theme="dark"] .form-label{ color:#e5e7eb; }
.nav-tabs .nav-link{ color:#4b5563; }
.nav-tabs .nav-link.active{ color:#111827; }
html[data-theme="dark"] .nav-tabs .nav-link{ color:#94a3b8; }
html[data-theme="dark"] .nav-tabs .nav-link.active{ color:#e5e7eb; }
.form-control::placeholder{ color:#6b7280; }
html[data-theme="dark"] .form-control::placeholder { color:#6b7280; }
.input-group .btn{ border-color:#e5e7eb; }
.card-animal { 
  max-width: 520px; 
  margin: 0 auto; 
  position: relative;
  padding: 0 140px; /* Espace pour les zones latérales */
}

.swipe-card { 
  position: relative; 
  width: 100%; 
  aspect-ratio: 4/5; /* Ratio plus moderne et équilibré */
  max-height: 600px; /* Hauteur maximale pour éviter que ce soit trop grand */
  border-radius: 22px; 
  overflow: hidden; 
  background: var(--card); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.swipe-card img { 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
}

/* Responsive pour les zones latérales et la carte */
@media (max-width: 768px) {
  .card-animal {
    padding: 0 100px;
  }
  
  .swipe-card {
    aspect-ratio: 3/4; /* Ratio légèrement plus carré sur tablette */
    max-height: 500px;
  }
}

@media (max-width: 480px) {
  .card-animal {
    padding: 0 80px;
  }
  
  .swipe-card {
    aspect-ratio: 3/4; /* Ratio plus carré sur mobile */
    max-height: 450px;
  }
}
.swipe-actions { display: flex; gap: 12px; justify-content: center; margin-top: 16px; }
.btn-like { background: var(--primary); border: none; }
.btn-pass { background: var(--nope); border: none; }
.badge-role { text-transform: capitalize; }

/* Badge vérifié (icône à côté du pseudo) */
.verified-badge { display:inline-flex; align-items:center; gap:6px; }
.verified-badge .v-icon { width:16px; height:16px; display:inline-block; vertical-align:middle; }
.verified-badge .v-icon img { width:16px; height:16px; display:block; }

/* Zones de swipe latérales alignées avec la pile de cartes */
.cards-stack-container .swipe-zone {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 80px;
  height: 80px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.cards-stack-container .swipe-zone-left {
  left: -40px; /* Aligné avec le conteneur de cartes */
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.15) 0%, 
    rgba(220, 38, 38, 0.25) 50%, 
    rgba(185, 28, 28, 0.2) 100%);
  border-right: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 50%;
}

.cards-stack-container .swipe-zone-right {
  right: -40px; /* Aligné avec le conteneur de cartes */
  background: linear-gradient(135deg, 
    rgba(236, 72, 153, 0.15) 0%, 
    rgba(219, 39, 119, 0.25) 50%, 
    rgba(190, 24, 93, 0.2) 100%);
  border-left: 1px solid rgba(236, 72, 153, 0.3);
  border-radius: 50%;
}

.cards-stack-container .swipe-zone-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  width: 100%;
  height: 100%;
  justify-content: center;
}

.cards-stack-container .swipe-icon {
  font-size: 2rem;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
}

.cards-stack-container .swipe-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* États hover et active pour les boutons de la pile */
.cards-stack-container .swipe-zone:hover {
  width: 90px;
  height: 90px;
}

.cards-stack-container .swipe-zone-left:hover {
  background: linear-gradient(135deg, 
    rgba(239, 68, 68, 0.25) 0%, 
    rgba(220, 38, 38, 0.35) 50%, 
    rgba(185, 28, 28, 0.3) 100%);
}

.cards-stack-container .swipe-zone-right:hover {
  background: linear-gradient(135deg, 
    rgba(236, 72, 153, 0.25) 0%, 
    rgba(219, 39, 119, 0.35) 50%, 
    rgba(190, 24, 93, 0.3) 100%);
}

.cards-stack-container .swipe-zone:hover .swipe-zone-content {
  transform: scale(1.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.cards-stack-container .swipe-zone:hover .swipe-icon {
  transform: scale(1.2);
}

.cards-stack-container .swipe-zone-left:hover .swipe-icon {
  filter: drop-shadow(0 4px 12px rgba(239, 68, 68, 0.4));
}

.cards-stack-container .swipe-zone-right:hover .swipe-icon {
  filter: drop-shadow(0 4px 12px rgba(236, 72, 153, 0.4));
}

.cards-stack-container .swipe-zone:hover .swipe-label {
  color: #111827;
  font-weight: 700;
}

/* Animation de clic */
.cards-stack-container .swipe-zone:active .swipe-zone-content {
  transform: scale(0.95);
}

/* Responsive pour mobile - boutons de la pile */
@media (max-width: 768px) {
  .cards-stack-container .swipe-zone {
    width: 60px;
    height: 60px;
  }
  
  .cards-stack-container .swipe-zone-left {
    left: -30px;
  }
  
  .cards-stack-container .swipe-zone-right {
    right: -30px;
  }
  
  .cards-stack-container .swipe-zone:hover {
    width: 70px;
    height: 70px;
  }
  
  .cards-stack-container .swipe-icon {
    font-size: 1.5rem;
  }
  
  .cards-stack-container .swipe-label {
    font-size: 0.6rem;
  }
  
  .cards-stack-container .swipe-zone-content {
    padding: 8px;
    gap: 2px;
  }
}

@media (max-width: 480px) {
  .cards-stack-container .swipe-zone {
    width: 50px;
    height: 50px;
  }
  
  .cards-stack-container .swipe-zone-left {
    left: -25px;
  }
  
  .cards-stack-container .swipe-zone-right {
    right: -25px;
  }
  
  .cards-stack-container .swipe-zone:hover {
    width: 60px;
    height: 60px;
  }
  
  .cards-stack-container .swipe-icon {
    font-size: 1.3rem;
  }
  
  .cards-stack-container .swipe-label {
    font-size: 0.5rem;
  }
  
  .cards-stack-container .swipe-zone-content {
    padding: 6px;
    gap: 1px;
  }
}

/* Overlays Like/Nope améliorés */
.swipe-card::before, .swipe-card::after { 
  content: ''; 
  position: absolute; 
  top: 20px; 
  padding: 12px 20px; 
  font-size: 24px; 
  font-weight: 800; 
  border: 4px solid; 
  border-radius: 12px; 
  opacity: 0; 
  transform: rotate(-15deg); 
  transition: all .2s ease; 
  text-shadow: 0 2px 4px rgba(0,0,0,.6);
  z-index: 10;
  letter-spacing: 1px;
}
.swipe-card.like::before { 
  content: 'LIKE'; 
  left: 20px; 
  color: var(--like); 
  border-color: var(--like); 
  opacity: .95; 
  background: rgba(22, 163, 74, 0.1);
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.3);
}
.swipe-card.pass::after { 
  content: 'PASS'; 
  right: 20px; 
  color: var(--nope); 
  border-color: var(--nope); 
  opacity: .95; 
  transform: rotate(15deg); 
  background: rgba(220, 38, 38, 0.1);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

/* Animations de cartes */
.swipe-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swipe-card.swiped-right {
  animation: swipeRight 0.4s ease-out forwards;
}

.swipe-card.swiped-left {
  animation: swipeLeft 0.4s ease-out forwards;
}

@keyframes swipeRight {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  100% { transform: translateX(120vw) rotate(25deg) scale(0.8); }
}

@keyframes swipeLeft {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  100% { transform: translateX(-120vw) rotate(-25deg) scale(0.8); }
}

/* Effet de rebond pour le retour */
.swipe-card.bounce-back {
  animation: bounceBack 0.3s ease-out;
}

@keyframes bounceBack {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  50% { transform: translateX(10px) rotate(2deg) scale(1.02); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* Effet particules discret lors d'un like (sans cœur) */
.like-burst { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 20; }
.like-burst .spark { position: absolute; left: 0; top: 0; width: 6px; height: 6px; border-radius: 2px; opacity: 0; transform: translate(0,0) scale(1); animation: sparkFly .45s ease-out forwards; animation-delay: var(--delay, 0ms); background: hsl(var(--h, 340) 85% 55%); box-shadow: 0 1px 4px rgba(0,0,0,.12); }

@keyframes sparkFly { from { opacity: .9; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(.6); } }

/* Micro-pop + hover léger sur les boutons like/fav */
#btnLike.pop, .btn.pop, .icon-btn.pop, .swipe-zone.pop { animation: btnPop .22s ease-out; }
.icon-btn, .btn-like { transition: transform .15s ease, box-shadow .15s ease; }
.icon-btn:hover, .btn-like:hover { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
@keyframes btnPop { 0% { transform: scale(1); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* Animation pop spécifique pour les zones de swipe */
.swipe-zone.pop .swipe-zone-content {
  animation: swipeZonePop .3s ease-out;
}

@keyframes swipeZonePop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* Cartes animaux modernisées */
.card .card-img-top{ border-bottom: 1px solid #2a3350; }
.card .btn{ border-radius: 10px; }

/* Cartes animaux (profil) plus compactes */
.profile-animals .card-img-top {
  width: 100%;
  aspect-ratio: 1 / 1; /* carré 1:1 */
  object-fit: cover;
  display: block;
}

/* Réduction visuelle des miniatures sur le profil */
.profile-animals .card .card-img-top {
  width: 100%;
  margin: 0;
  border-radius: 12px;
}
.profile-animals .card { border-radius: 14px; }
.profile-animals .card-body { padding: 10px 12px; }
.profile-animals .card-title { font-size: 1rem; }
.profile-animals .card-text { font-size: .85rem; }

/* Bouton like dans les cartes du profil */
.profile-animals .like-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 6px; 
  background: rgba(255,255,255,.95); 
  border: 1px solid #e5e7eb; 
  border-radius: 999px; 
  padding: 4px 8px; 
  box-shadow: 0 2px 4px rgba(0,0,0,.1);
}
.profile-animals .like-badge .icon-btn { 
  padding: 4px 6px; 
  line-height: 1; 
  background: transparent; 
  border: none;
}
.profile-animals .like-badge .icon-btn:hover { 
  background: rgba(0,0,0,.05); 
}
.profile-animals .like-badge .icon-btn.is-liked { 
  color: #ef4444; 
}
.profile-animals .like-badge .icon-btn.is-liked:hover { 
  background: rgba(239,68,68,.1); 
}
.profile-animals .like-badge .likes-count { 
  color: #374151; 
  font-weight: 500;
}

/* État privé (propriétaire seulement) */
.profile-animals .animal-private { position: relative; filter: grayscale(1); opacity: .6; }
.profile-animals .animal-private .card-img-top { filter: grayscale(1); }
.profile-animals .badge-private { position: absolute; top: 80px; left: 50%; transform: translateX(-50%); z-index: 2; background: #111827; color: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; border: 1px solid #e5e7eb; opacity: .92; box-shadow: 0 6px 16px rgba(0,0,0,.2); }

/* Footer */
footer.bg-dark{ background:#ffffff !important; border-top:1px solid #e5e7eb; }
.footer-links { margin: 0; padding: 0; }
.footer-link { color: #1f2937; text-decoration: none; }
html[data-theme="dark"] .footer-link { color: #cbd5e1; }
.footer-link:hover { color:#111827; text-decoration: underline; }
html[data-theme="dark"] footer.bg-dark{ background:#0b1220 !important; border-top-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] footer.bg-dark .small { color: #94a3b8; }
html[data-theme="dark"] footer.bg-dark .nav .nav-link { color: #cbd5e1 !important; }
html[data-theme="dark"] footer.bg-dark .nav .nav-link:hover { color: #e5e7eb !important; }

/* Barre d’onglets mobile fixe */
.mobile-tabbar { position: sticky; bottom: 0; left: 0; right: 0; height: 64px; background: #ffffff; border-top: 1px solid #e5e7eb; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; padding-bottom: max(0px, env(safe-area-inset-bottom)); z-index: 1030; }
html[data-theme="dark"] .mobile-tabbar { background: #0f1629; border-top-color: rgba(255,255,255,0.08); }
.mobile-tabbar .tab-item { display: grid; place-items: center; color: #1f2937; text-decoration: none; height: 100%; }
html[data-theme="dark"] .mobile-tabbar .tab-item { color: #cbd5e1; }
.mobile-tabbar .tab-item.main { background: rgba(236,72,153,.12); color:#111827; font-weight: 600; }
html[data-theme="dark"] .mobile-tabbar .tab-item.main { background: rgba(236,72,153,.18); color:#e5e7eb; }
.mobile-tabbar .tab-item:active { background: rgba(17,24,39,.06); }
html[data-theme="dark"] .mobile-tabbar .tab-item:active { background: rgba(255,255,255,.06); }
.mobile-tabbar .tab-label { font-size: 12px; }

/* Ajuster le contenu principal pour ne pas être masqué par la tabbar */
main.container { padding-bottom: 80px; }

/* Profil - style réseau social */
.profile-header { position: relative; }
.profile-cover { height: 140px; background: linear-gradient(180deg, #eef2ff 0%, #ffffff 100%); border-bottom: 1px solid #e5e7eb; position: relative; overflow: hidden; }
.banner-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-image[src*="default_banner"] { 
    object-fit: cover; 
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.9;
}

/* Style spécifique pour les bannières SVG */
.banner-image[src*=".svg"] {
    object-fit: cover;
    background: transparent;
}
.profile-info { 
  display: flex; 
  align-items: end; 
  gap: 16px; 
  transform: translateY(-28px); 
  background: rgba(255, 255, 255, 0.95); 
  border-radius: 20px; 
  padding: 16px 20px; 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
html[data-theme="dark"] .profile-info { 
  background: rgba(15, 22, 41, 0.95); 
  border-color: rgba(255, 255, 255, 0.1);
}
.profile-meta { 
  flex: 1;
}
.profile-avatar-wrap { width: 96px; height: 96px; border-radius: 50%; border: none; overflow: hidden; background: #f3f4f6; }
.profile-avatar { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-avatar.placeholder { display: grid; place-items: center; color: #8b93a7; font-weight: 700; }
.profile-actions .btn { border-radius: 999px; padding: 6px 14px; }
.profile-stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; padding: 8px 12px 0 12px; }
.profile-stats .stat { text-align: center; background: #f7f9fc; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 8px; }
html[data-theme="dark"] .profile-stats .stat { background: #0f1629; border-color: rgba(255,255,255,0.08); color: #e5e7eb; }
.profile-stats .num { font-weight: 700; }
.profile-stats .label { font-size: 12px; color: #6b7280; }

/* Bouton de déconnexion subtil et élégant */
.logout-btn {
  background: transparent !important;
  border: 1px solid #e5e7eb !important;
  color: #6b7280 !important;
  transition: all 0.2s ease;
  font-size: 0.875rem;
  font-weight: 500;
}

.logout-btn:hover {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.15);
}

.logout-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(220, 38, 38, 0.1);
}

.logout-btn svg {
  transition: transform 0.2s ease;
}

.logout-btn:hover svg {
  transform: translateX(2px);
}

/* Contraste titres et zones claires */
h1, h2, h3, h4, h5, h6 { color: #0b1220; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: #e5e7eb; }
.bg-light, .bg-white { color: #0b1220 !important; }

/* Marque navbar en thème clair */
.navbar .navbar-brand { color: #111827 !important; }

/* Footer en thème clair: liens et petits textes */
footer.bg-dark .small { color: #4b5563; }
footer.bg-dark .nav .nav-link { color: #1f2937 !important; }
footer.bg-dark .nav .nav-link:hover { color: #111827 !important; }

/* Feed - cartes style réseau social */
.feed-card .card-img-top { border-bottom: 1px solid #e5e7eb; }
.feed-header .feed-avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; background: #f3f4f6; border: 1px solid #e5e7eb; }
.feed-header .feed-avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }
.feed-header .feed-avatar .placeholder { width: 100%; height: 100%; }
.icon-btn { background: transparent; border-color: #d1d5db; color: #6b7280; }
.icon-btn:hover { background: #f9fafb; border-color: #9ca3af; color: #374151; }
.icon-btn.is-liked { color: #ef4444; border-color: #ef4444; background: transparent; }
.icon-btn.is-liked:hover { background: #fef2f2; border-color: #dc2626; color: #dc2626; }
.icon-btn.is-favorited { color:#fff; border-color: #f59e0b; background: #f59e0b; }
.icon-btn.is-favorited:hover { background: #d97706; border-color: #d97706; }

/* Mini grid cards */
.mini-card { overflow: hidden; }
.mini-card .mini-card-top { position: relative; }
.mini-card .mini-thumb { display: block; aspect-ratio: 4 / 3; background: #f3f4f6; }
.mini-card .mini-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-card .owner-avatar { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.15); background: #f3f4f6; display: grid; place-items: center; }
.mini-card .owner-avatar img { width: 100%; height: 100%; object-fit: cover; display:block; }
.mini-card .owner-avatar.btn { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: #f3f4f6; border: 2px solid #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.mini-card .owner-avatar.btn:hover { background: #e5e7eb; }
.mini-card .owner-avatar.btn.is-favorited { background: #f59e0b; color: white; }
.mini-card .owner-avatar.btn.is-favorited:hover { background: #d97706; }

/* Avatar du propriétaire dans la liste */
.owner-avatar-small {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  background: #f3f4f6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.owner-avatar-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mini-card .like-badge { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.95); border: 1px solid #e5e7eb; border-radius: 999px; padding: 4px 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.mini-card .like-badge .icon-btn { padding: 4px 6px; line-height: 1; background: transparent; border: none; }
.mini-card .like-badge .icon-btn:hover { background: rgba(0,0,0,.05); }
.mini-card .like-badge .icon-btn.is-liked { color: #ef4444; }
.mini-card .like-badge .icon-btn.is-liked:hover { background: rgba(239,68,68,.1); }
.mini-card .likes-count { color: #374151; font-weight: 500; }
.mini-card .mini-desc { color: #4b5563; }
.text-truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.report-link { text-decoration: none; }
.report-link:hover { text-decoration: underline; }

/* Animations & micro-interactions */
.hover-rise { 
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease;
  will-change: transform, box-shadow;
}
.hover-rise:hover { 
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
  border-color: rgba(236,72,153,.35) !important; /* var(--primary) adoucie */
}

/* Halo subtil au survol pour les cartes */
.hover-rise:hover::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(236,72,153,.08);
}

/* Variante thème sombre */
html[data-theme="dark"] .hover-rise:hover {
  box-shadow: 0 16px 36px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
  border-color: rgba(236,72,153,.45) !important;
}
html[data-theme="dark"] .hover-rise:hover::after {
  box-shadow: 0 0 0 4px rgba(236,72,153,.12);
}
.fade-in { animation: fadeIn .4s ease both; }
@keyframes fadeIn { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* Reveal au scroll */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease; }
.reveal.reveal-visible { opacity: 1; transform: translateY(0); }

/* Liaisons avec composants existants */
.card, .mini-card, .swipe-card, .list-group-item, .navbar { transition: background-color .2s ease, border-color .2s ease, color .2s ease; }

/* Modal animal: mise en page large */
.modal .ratio.ratio-4x3 { background:#f7f9fc; }
.modal-xl { --bs-modal-width: 1080px; }

/* Motif de fond subtil avec l'icône pets (moins dense, plus lent, positions variées) */
body {
  /* Trois calques à faible densité pour un rendu plus "aléatoire" */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='%23FF0073' fill-opacity='0.06'><g transform='translate(40 60) scale(5)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(260 120) scale(4.5)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(150 300) scale(3.8)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='%23FF0073' fill-opacity='0.055'><g transform='translate(480 80) scale(4.2)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(120 420) scale(3.6)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'><g fill='%23FF0073' fill-opacity='0.05'><g transform='translate(60 360) scale(4.8)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(360 260) scale(3.9)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g></g></svg>");
  background-repeat: repeat, repeat, repeat;
  background-size: 960px 960px, 1280px 1280px, 800px 800px; /* grandes tuiles => moins d'éléments */
  background-attachment: fixed, fixed, fixed;
  animation: petsDrift 240s linear infinite; /* plus lent */
}

/* Version thème sombre des SVG animés */
html[data-theme="dark"] body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'><g fill='%23ec4899' fill-opacity='0.08'><g transform='translate(40 60) scale(5)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(260 120) scale(4.5)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(150 300) scale(3.8)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><g fill='%23ec4899' fill-opacity='0.07'><g transform='translate(480 80) scale(4.2)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(120 420) scale(3.6)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g></g></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'><g fill='%23ec4899' fill-opacity='0.06'><g transform='translate(60 360) scale(4.8)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g><g transform='translate(360 260) scale(3.9)'><path d='M11.9 8.4c1.3 0 2.1-1.9 2.1-3.1 0-1-.5-2.2-1.5-2.2-1.3 0-2.1 1.9-2.1 3.1 0 1 .5 2.2 1.5 2.2zm-3.8 0c1 0 1.5-1.2 1.5-2.2C9.6 4.9 8.8 3 7.5 3 6.5 3 6 4.2 6 5.2c-.1 1.3.7 3.2 2.1 3.2zm7.4-1c-1.3 0-2.2 1.8-2.2 3.1 0 .9.4 1.8 1.3 1.8 1.3 0 2.2-1.8 2.2-3.1 0-.9-.5-1.8-1.3-1.8zm-8.7 3.1c0-1.3-1-3.1-2.2-3.1-.9 0-1.3.9-1.3 1.8 0 1.3 1 3.1 2.2 3.1.9 0 1.3-.9 1.3-1.8zm3.2-.2c-2 0-4.7 3.2-4.7 5.4 0 1 .7 1.3 1.5 1.3 1.2 0 2.1-.8 3.2-.8 1 0 1.9.8 3 .8.8 0 1.7-.2 1.7-1.3 0-2.2-2.7-5.4-4.7-5.4z'/></g></g></svg>");
  background-repeat: repeat, repeat, repeat;
  background-size: 960px 960px, 1280px 1280px, 800px 800px;
  background-attachment: fixed, fixed, fixed;
  animation: petsDrift 240s linear infinite;
}

@keyframes petsDrift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 1400px 700px, -1200px 500px, 900px -900px; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
}

@media (min-width: 992px) {
  .swipe-side .btn { width: 64px; height: 64px; }
}

/* ===== SYSTÈME DE SWIPE AMÉLIORÉ ===== */

/* Conteneur de pile de cartes */
.cards-stack-container {
  position: relative;
  max-width: 400px;
  margin: 0 auto;
  min-height: 600px;
  perspective: 1000px;
}

/* Éléments de la pile de cartes */
.card-stack-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: center bottom;
}

/* Carte active (première) */
.card-stack-item.active {
  z-index: 3;
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Cartes suivantes (visibles par-dessous) */
.card-stack-item.next {
  z-index: 2;
  transform: translateY(20px) scale(0.95);
  opacity: 0.7;
}

.card-stack-item.next:nth-child(3) {
  z-index: 1;
  transform: translateY(40px) scale(0.9);
  opacity: 0.5;
}

/* Carte de swipe */
.swipe-card {
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.swipe-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay avec informations */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 20px;
  color: white;
}

.card-info h3 {
  color: white;
  margin-bottom: 8px;
  font-size: 1.4rem;
}

.card-info p {
  color: rgba(255,255,255,0.9);
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* Animation de sortie */
.card-stack-item.swiped-right {
  animation: swipeRight 0.4s ease-out forwards;
}

.card-stack-item.swiped-left {
  animation: swipeLeft 0.4s ease-out forwards;
}

@keyframes swipeRight {
  0% { 
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% { 
    transform: translateX(120vw) scale(0.8) rotate(25deg);
    opacity: 0;
  }
}

@keyframes swipeLeft {
  0% { 
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% { 
    transform: translateX(-120vw) scale(0.8) rotate(-25deg);
    opacity: 0;
  }
}

/* Indicateur de chargement */
#loading-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}

#loading-indicator .spinner-border {
  width: 3rem;
  height: 3rem;
}

/* Animations de transition pour les cartes */
.card-animal {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-animal.fade-out {
  opacity: 0;
  transform: scale(0.95);
}

.card-animal.fade-in {
  opacity: 1;
  transform: scale(1);
}

/* Amélioration des zones de swipe */
.swipe-zone {
  transition: all 0.2s ease;
}

.swipe-zone.pop {
  transform: scale(1.1);
  animation: popEffect 0.3s ease;
}

@keyframes popEffect {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1.1); }
}

/* Effet de burst pour les likes */
.like-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100;
}

.spark {
  position: absolute;
  width: 4px;
  height: 4px;
  background: hsl(var(--h), 70%, 60%);
  border-radius: 50%;
  animation: sparkle 0.6s ease-out forwards;
  animation-delay: var(--delay);
}

@keyframes sparkle {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0);
  }
}

/* Amélioration des animations de cartes */
.swipe-card {
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* États visuels pendant le swipe */
.swipe-card.like {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.swipe-card.pass {
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

/* Animation de sortie */
.swipe-card.swiped-right,
.swipe-card.swiped-left {
  pointer-events: none;
}

/* Messages d'erreur */
.alert.position-fixed {
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Responsive pour mobile */
@media (max-width: 768px) {
  .swipe-card {
    touch-action: pan-y;
  }
  
  .swipe-zone {
    padding: 12px;
  }
  
  .swipe-zone-content {
    font-size: 0.9rem;
  }
}

/* ===== ZONE DE DRAG AND DROP POUR IMAGES ===== */
.drag-drop-zone {
  position: relative;
  width: 100%;
  height: 200px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  background: #f9fafb;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
}

.drag-drop-zone:hover {
  border-color: var(--primary);
  background: rgba(236, 72, 153, 0.05);
}

.drag-drop-zone.dragover {
  border-color: var(--primary);
  background: rgba(236, 72, 153, 0.1);
  transform: scale(1.02);
}

.drag-drop-zone.has-image {
  border-style: solid;
  border-color: var(--primary);
  background: #ffffff;
}

.drag-drop-icon {
  font-size: 3rem;
  color: #9ca3af;
  margin-bottom: 1rem;
  transition: color 0.3s ease;
}

.drag-drop-zone:hover .drag-drop-icon {
  color: var(--primary);
}

.drag-drop-text {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  transition: color 0.3s ease;
}

.drag-drop-zone:hover .drag-drop-text {
  color: var(--primary);
}

.drag-drop-subtext {
  color: #9ca3af;
  font-size: 0.875rem;
  text-align: center;
}

.drag-drop-zone.has-image .drag-drop-icon,
.drag-drop-zone.has-image .drag-drop-text,
.drag-drop-zone.has-image .drag-drop-subtext {
  display: none;
}

.drag-drop-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: none;
}

.drag-drop-zone.has-image .drag-drop-preview {
  display: block;
}

.drag-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.drag-drop-zone.has-image:hover .drag-drop-overlay {
  display: flex;
  opacity: 1;
}

.drag-drop-overlay-text {
  color: white;
  font-weight: 600;
  text-align: center;
  font-size: 0.9rem;
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.drag-drop-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.drag-drop-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(239, 68, 68, 0.9);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.drag-drop-zone.has-image .drag-drop-remove {
  display: flex;
}

.drag-drop-remove:hover {
  background: #dc2626;
  transform: scale(1.1);
}

/* Responsive */
@media (max-width: 768px) {
  .drag-drop-zone {
    height: 160px;
  }
  
  .drag-drop-icon {
    font-size: 2.5rem;
  }
  
  .drag-drop-text {
    font-size: 0.9rem;
  }
  
  .drag-drop-subtext {
    font-size: 0.8rem;
  }
}


/* ===== Overrides additionnels DARK (global) ===== */
html[data-theme="dark"] .text-muted { color: #94a3b8 !important; }
html[data-theme="dark"] .text-dark { color: #e5e7eb !important; }
html[data-theme="dark"] .text-secondary { color: #94a3b8 !important; }
html[data-theme="dark"] .text-body { color: #e5e7eb !important; }
html[data-theme="dark"] .text-primary { color: #93c5fd !important; }
html[data-theme="dark"] a { color: #93c5fd; }
html[data-theme="dark"] a:hover { color: #bfdbfe; }
html[data-theme="dark"] .swipe-label { color: #cbd5e1; }

/* Footer complet */
html[data-theme="dark"] footer, 
html[data-theme="dark"] footer.bg-dark,
html[data-theme="dark"] footer.bg-dark p,
html[data-theme="dark"] footer.bg-dark li,
html[data-theme="dark"] footer.bg-dark a,
html[data-theme="dark"] footer.bg-dark .nav-link,
html[data-theme="dark"] footer.bg-dark .footer-links { color: #e5e7eb !important; }
html[data-theme="dark"] footer.bg-dark a:hover, 
html[data-theme="dark"] footer.bg-dark .nav-link:hover { color: #ffffff !important; }

/* Modals Bootstrap génériques */
html[data-theme="dark"] .modal-content { background: #0f172a; color: #e5e7eb; border: 1px solid rgba(255,255,255,0.08); }
html[data-theme="dark"] .modal-header, 
html[data-theme="dark"] .modal-footer { border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .modal-body { color: #e5e7eb; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%); }
html[data-theme="dark"] .list-group-item { background: #0b1220; color: #e5e7eb; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .modal .ratio.ratio-4x3 { background:#0b1220; }
/* Alerts (notamment pages légales) */
html[data-theme="dark"] .alert { background: #0f172a; color: #e5e7eb; border-color: rgba(255,255,255,0.08); }
html[data-theme="dark"] .alert .mb-0 { color: #e5e7eb !important; }