/* ============================================================
   VADIBE PREMIUM — v1.0
   Style Tinder / Bumble · Mobile-First · Madagascar
   Fichier CSS additionnel — ne modifie pas le code source
   ============================================================ */

/* ── 1. GOOGLE FONTS ─────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ── 2. VARIABLES PREMIUM ────────────────────────────────── */
:root {
  --vp-pink:        #FF4B6E;
  --vp-orange:      #FF8C42;
  --vp-gradient:    linear-gradient(135deg, #FF4B6E 0%, #FF8C42 100%);
  --vp-gradient-v:  linear-gradient(180deg,  #FF4B6E 0%, #FF8C42 100%);
  --vp-purple:      #6C63FF;
  --vp-success:     #00D09E;
  --vp-danger:      #FF4B4B;

  --vp-bg:          #0F0F1A;
  --vp-card:        #1C1C2E;
  --vp-card-2:      #252538;
  --vp-border:      rgba(255,255,255,0.08);

  --vp-text:        #FFFFFF;
  --vp-text-sub:    #A0A0B8;
  --vp-text-muted:  #606075;

  --vp-radius-xl:   24px;
  --vp-radius-lg:   16px;
  --vp-radius-md:   12px;
  --vp-radius-btn:  50px;

  --vp-shadow-pink: 0 8px 32px rgba(255,75,110,0.35);
  --vp-shadow-card: 0 20px 60px rgba(0,0,0,0.5);
  --vp-shadow-soft: 0 4px 20px rgba(0,0,0,0.3);

  --vp-transition:  all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 3. BASE GLOBALE ─────────────────────────────────────── */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  background-color: var(--vp-bg) !important;
  color: var(--vp-text) !important;
}

h1, h2, h3, h4, h5, h6,
.rje-title,
.rje-illustration__title,
.profile-name,
.user-name,
.fullname {
  font-family: 'Poppins', sans-serif !important;
}

a { transition: var(--vp-transition); }

/* ── 4. PAGE D'ACCUEIL (LANDING) ────────────────────────── */

/* Fond global landing */
.rje-body {
  background: var(--vp-bg) !important;
}

/* Panneau gauche — illustration */
.rje-auth__left {
  background: var(--vp-gradient) !important;
  position: relative;
  overflow: hidden;
}

/* Overlay texture légère */
.rje-auth__left::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(0,0,0,0.15) 0%, transparent 60%);
  pointer-events: none;
}

/* Cercles décoratifs de fond */
.rje-auth__left::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  bottom: -100px;
  right: -100px;
  pointer-events: none;
}

.rje-illustration {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.rje-illustration__title {
  font-size: 42px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  margin-bottom: 20px !important;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.2) !important;
}

.rje-illustration__text {
  font-size: 18px !important;
  font-weight: 500 !important;
  opacity: 0.92 !important;
  line-height: 1.7 !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2) !important;
}

/* Badge membres actifs (si présent) */
.vp-members-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  border-radius: 50px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 24px;
  color: #fff;
}
.vp-members-badge::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00D09E;
  box-shadow: 0 0 0 3px rgba(0,208,158,0.3);
  animation: vp-pulse 2s infinite;
}

/* Panneau droit — formulaire */
/* NB : on n'utilise pas le raccourci `background` ici pour ne pas réinitialiser
   background-image défini plus bas (v5+ premium background) */
.rje-auth__right {
  background-color: var(--vp-bg) !important;
}

/* Carte formulaire */
.rje-card {
  background: var(--vp-card) !important;
  border-radius: var(--vp-radius-xl) !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow: var(--vp-shadow-card) !important;
  padding: 40px 36px !important;
}

/* Logo */
.rje-logo {
  background-image: url("/img/logowhite.png?v=3") !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}

/* Titre connexion */
.rje-title {
  color: var(--vp-text) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px;
}

/* Séparateur "ou" */
.rje-divider {
  color: var(--vp-text-muted) !important;
  margin: 20px 0 !important;
}
.rje-divider::before,
.rje-divider::after {
  border-color: var(--vp-border) !important;
}

/* Champs input */
.rje-input,
.rje-input:focus {
  background: var(--vp-card-2) !important;
  border: 1.5px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-md) !important;
  color: var(--vp-text) !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  font-family: 'Inter', sans-serif !important;
  height: auto !important;
  transition: var(--vp-transition) !important;
}
.rje-input:focus {
  border-color: var(--vp-pink) !important;
  box-shadow: 0 0 0 3px rgba(255,75,110,0.15) !important;
  outline: none !important;
}
.rje-input::placeholder {
  color: var(--vp-text-muted) !important;
}

/* Label */
.rje-label {
  color: var(--vp-text-sub) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  margin-bottom: 8px !important;
}

/* Lien "Mot de passe oublié" */
.rje-link {
  color: var(--vp-pink) !important;
  font-size: 13px !important;
}
.rje-link--strong {
  color: var(--vp-pink) !important;
  font-weight: 700 !important;
}

/* Bouton primaire CTA */
.rje-btn.primary,
.rje-btn.button.primary,
button[type="submit"].rje-btn {
  background: var(--vp-gradient) !important;
  border: none !important;
  border-radius: var(--vp-radius-btn) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  letter-spacing: 0.3px;
  box-shadow: var(--vp-shadow-pink) !important;
  height: 54px !important;
  transition: var(--vp-transition) !important;
  margin-top: 8px !important;
}
.rje-btn.primary:hover,
.rje-btn.button.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(255,75,110,0.5) !important;
}
.rje-btn.primary:active {
  transform: translateY(0) !important;
}

/* Bouton social Google */
.btn-social.btn-google,
.gl-icon-btn {
  background: var(--vp-card-2) !important;
  border: 1.5px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-btn) !important;
  color: var(--vp-text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  padding: 14px 24px !important;
  transition: var(--vp-transition) !important;
  width: 100% !important;
  justify-content: center !important;
}
.btn-social.btn-google:hover {
  background: var(--vp-card) !important;
  border-color: rgba(255,255,255,0.2) !important;
  transform: translateY(-1px) !important;
}

/* Footer texte "Pas encore de compte" */
.rje-footer {
  color: var(--vp-text-muted) !important;
  font-size: 14px !important;
}

/* Alertes d'erreur */
.rje-card .alert-danger {
  background: rgba(255,75,75,0.15) !important;
  border: 1px solid rgba(255,75,75,0.3) !important;
  border-radius: var(--vp-radius-md) !important;
  color: #ff8a8a !important;
}

/* ── 5. HEADER CONNECTÉ ──────────────────────────────────── */
.top-header {
  background: rgba(15,15,26,0.95) !important;
  border-bottom: 1px solid var(--vp-border) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  margin-bottom: 0 !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
}

.top-header .nav-item a,
.top-header .nav-link,
.topbar-button {
  color: var(--vp-text-sub) !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--vp-transition) !important;
}
.topbar-button:hover,
.top-header .nav-item a:hover {
  color: var(--vp-pink) !important;
  background: transparent !important;
}

/* Badge notification */
.top-header .nav-unread {
  background: var(--vp-pink) !important;
  width: 8px !important;
  height: 8px !important;
  box-shadow: 0 0 0 2px var(--vp-bg) !important;
  animation: vp-pulse 2s infinite !important;
}

/* Logo header */
.top-header .header-brand-img {
  filter: brightness(0) invert(1);
}

/* ── 6. FOOTER PRINCIPAL ─────────────────────────────────── */
#main-footer {
  background: var(--vp-card) !important;
  border-top: 1px solid var(--vp-border) !important;
}

#main-footer #footer-nav li a {
  color: var(--vp-text-muted) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  transition: var(--vp-transition) !important;
}
#main-footer #footer-nav li a:hover {
  color: var(--vp-pink) !important;
}
#main-footer #footer-copyright {
  color: var(--vp-text-muted) !important;
  font-size: 12px !important;
}

/* ── 7. BOUTONS GLOBAUX ──────────────────────────────────── */
.button.primary,
.submit-button,
input[type="submit"].button.primary {
  background: var(--vp-gradient) !important;
  border: none !important;
  border-radius: var(--vp-radius-btn) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: var(--vp-shadow-pink) !important;
  transition: var(--vp-transition) !important;
}
.button.primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 40px rgba(255,75,110,0.5) !important;
}

.button.green,
.button.blue {
  background: var(--vp-gradient) !important;
  border: none !important;
  border-radius: var(--vp-radius-btn) !important;
  color: #fff !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: var(--vp-shadow-pink) !important;
  transition: var(--vp-transition) !important;
}

/* Bouton secondaire */
.button.secondary,
.button.more {
  background: var(--vp-card-2) !important;
  border: 1.5px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-btn) !important;
  color: var(--vp-text) !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--vp-transition) !important;
}
.button.secondary:hover {
  border-color: var(--vp-pink) !important;
  color: var(--vp-pink) !important;
}

/* ── 8. CARTES PROFIL ────────────────────────────────────── */
.standard-object,
.item-friend,
.user-card,
[class*="user-item"],
.profile-card {
  background: var(--vp-card) !important;
  border-radius: var(--vp-radius-lg) !important;
  border: 1px solid var(--vp-border) !important;
  box-shadow: var(--vp-shadow-soft) !important;
  overflow: hidden !important;
  transition: var(--vp-transition) !important;
}
.standard-object:hover,
.item-friend:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
  border-color: rgba(255,75,110,0.2) !important;
}

/* Avatar / photo de profil sur card */
.item-img,
.user-photo,
.profile-user-photo {
  border-radius: var(--vp-radius-md) !important;
}

/* Nom sur les cartes */
.item-title a,
.user-name a,
.fullname {
  color: var(--vp-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
}

/* Info secondaire (ville, âge) */
.item-info,
.user-info,
.user-location {
  color: var(--vp-text-sub) !important;
  font-size: 13px !important;
}

/* ── 9. HOT GAME — SWIPE CARDS ───────────────────────────── */
.hotgame-card,
.hot-game-item,
[class*="hotgame"] .user-card,
.hotgame-wrap .item {
  border-radius: var(--vp-radius-xl) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Gradient bas sur la photo */
.hotgame-card::after,
.hotgame-item-photo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
  pointer-events: none;
}

/* Boutons LIKE / PASSER */
.hotgame-btn-like,
.hotgame-btn-skip,
.like-btn, .skip-btn,
[class*="hotgame-action"] {
  border-radius: 50% !important;
  width: 64px !important;
  height: 64px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 24px !important;
  transition: var(--vp-transition) !important;
  border: none !important;
  box-shadow: var(--vp-shadow-soft) !important;
}

/* ── 10. PAGES CONTENU (connecté) ────────────────────────── */
.content-page,
.main-column,
.wrap {
  background: transparent !important;
}

.main-content {
  background: var(--vp-card) !important;
  border-radius: var(--vp-radius-lg) !important;
  border: 1px solid var(--vp-border) !important;
}

/* ── COVER PROFIL — fix background-size: contain → cover ── */
/* main.css utilise "contain" ce qui laisse des zones vides   */
/* "cover" remplit toujours toute la zone sans décalage       */
.profile_cover {
  background-size: cover !important;
  background-position: center center;
  background-repeat: no-repeat !important;
  overflow: hidden;
  border-radius: var(--vp-radius-lg) var(--vp-radius-lg) 0 0 !important;
}

/* ── ESPACEMENT HEADER → PREMIÈRE CARD (toutes les pages) ── */
/* Espace entre le header et le premier bloc de contenu       */
#content > .main-content:first-child {
  margin-top: 16px !important;
}

/* Espace entre les blocs .main-content consécutifs           */
#content > .main-content + .main-content {
  margin-top: 12px !important;
}

/* Mobile : espacement légèrement réduit                      */
@media (max-width: 768px) {
  #content > .main-content:first-child {
    margin-top: 12px !important;
  }
  #content > .main-content + .main-content {
    margin-top: 8px !important;
  }
}

/* Fond de page général */
.sn-page,
.remind-page,
.about-page,
.stream-page,
.friends-page,
.messages-page,
.settings-page,
.profile-page,
.search-page {
  background: var(--vp-bg) !important;
}

/* ── 11. FORMULAIRES (pages compte) ──────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
  background: var(--vp-card-2) !important;
  border: 1.5px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-md) !important;
  color: var(--vp-text) !important;
  font-family: 'Inter', sans-serif !important;
  transition: var(--vp-transition) !important;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--vp-pink) !important;
  box-shadow: 0 0 0 3px rgba(255,75,110,0.15) !important;
  outline: none !important;
}

/* ── 12. NOTIFICATIONS BADGE ─────────────────────────────── */
.nav-unread,
.messages_counter,
.messages-counter,
.badge-notification {
  background: var(--vp-pink) !important;
  border-radius: 50px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 5px !important;
}

/* ── 13. MODALES ─────────────────────────────────────────── */
.modal-content {
  background: var(--vp-card) !important;
  border: 1px solid var(--vp-border) !important;
  border-radius: var(--vp-radius-xl) !important;
  color: var(--vp-text) !important;
}
.modal-header {
  border-bottom: 1px solid var(--vp-border) !important;
}
.modal-footer {
  border-top: 1px solid var(--vp-border) !important;
}
.modal-title {
  color: var(--vp-text) !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}
.close, button.close {
  color: var(--vp-text-sub) !important;
  opacity: 1 !important;
}

/* ── 14. ALERTES & MESSAGES ──────────────────────────────── */
.alert-danger {
  background: rgba(255,75,75,0.12) !important;
  border: 1px solid rgba(255,75,75,0.25) !important;
  border-radius: var(--vp-radius-md) !important;
  color: #ff9090 !important;
}
.alert-success {
  background: rgba(0,208,158,0.12) !important;
  border: 1px solid rgba(0,208,158,0.25) !important;
  border-radius: var(--vp-radius-md) !important;
  color: #6effd8 !important;
}
.alert-info {
  background: rgba(108,99,255,0.12) !important;
  border: 1px solid rgba(108,99,255,0.25) !important;
  border-radius: var(--vp-radius-md) !important;
  color: #b0abff !important;
}
.alert-warning {
  background: rgba(255,180,50,0.12) !important;
  border: 1px solid rgba(255,180,50,0.25) !important;
  border-radius: var(--vp-radius-md) !important;
  color: #ffd580 !important;
}

/* ── 15. MESSAGES (chat) ─────────────────────────────────── */
.message-bubble,
.message-in,
.message-out,
[class*="chat-bubble"] {
  border-radius: 18px !important;
}

/* ── 16. BADGE VÉRIFIÉ — bleu Twitter ───────────────────── */

/* Badge inline (profil, liste) */
.user-verified-badge,
.verified {
  background: #1D9BF0 !important;   /* Twitter blue */
  color: #fff !important;
  border: 2px solid var(--vp-bg) !important;  /* anneau sombre pour contraste */
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 9pt !important;
  width: 18px !important;
  height: 18px !important;
  line-height: 1 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}

/* Badge vérifié Spotlight — bas-droit */
.spotlight .verified {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  left: auto !important;
  top: auto !important;
  width: 20px !important;
  height: 20px !important;
  font-size: 10px !important;
  border: 2.5px solid var(--vp-bg) !important;
  z-index: 3 !important;
}

/* Badge "en ligne" Spotlight — haut-droit (ne plus chevaucher le vérifié) */
.spotlight .card-online-icon {
  top: 2px !important;
  right: 2px !important;
  left: auto !important;
  bottom: auto !important;
  width: 12px !important;
  height: 12px !important;
  border: 2px solid var(--vp-bg) !important;
  background-color: #22C55E !important;  /* vert vif */
  z-index: 3 !important;
  transform: none !important;
}

/* Badge dans les cards profil */
.cardview .verified,
.people-item .verified,
[class*="card"] .verified {
  width: 18px !important;
  height: 18px !important;
}

/* Badge dans le header profil (grande taille) */
.user-verified-badge {
  width: 22px !important;
  height: 22px !important;
  font-size: 12px !important;
}

/* ── 17. BARRE DE COOKIE / INFO ──────────────────────────── */
.header-message {
  background: var(--vp-card) !important;
  border-bottom: 1px solid var(--vp-border) !important;
  color: var(--vp-text-sub) !important;
}
.header-message a {
  color: var(--vp-pink) !important;
}

/* ── 18. ANIMATIONS ──────────────────────────────────────── */

/* Pulse pour notifications */
@keyframes vp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,75,110,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(255,75,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,75,110,0); }
}

/* Entrée des cartes */
@keyframes vp-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pop pour match / succès */
@keyframes vp-pop {
  0%   { transform: scale(0.8); opacity: 0; }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1);   opacity: 1; }
}

/* Shimmer loading */
@keyframes vp-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Application des animations */
.rje-card {
  animation: vp-slide-up 0.4s ease both;
}

.standard-object,
.item-friend {
  animation: vp-slide-up 0.35s ease both;
}

.modal.show .modal-content {
  animation: vp-pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* Hover interactif sur les icônes nav */
.top-header .nav-item {
  transition: var(--vp-transition);
}
.top-header .nav-item:hover {
  transform: translateY(-1px);
}

/* ── 19. SCROLLBAR STYLÉE ────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--vp-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--vp-card-2);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--vp-pink);
}

/* ── 20. SÉLECTION TEXTE ─────────────────────────────────── */
::selection {
  background: rgba(255,75,110,0.3);
  color: #fff;
}

/* ── 21. OVERRIDES ROOT.CSS (variables CSS) ──────────────── */
:root {
  --common_body_background:    #0F0F1A !important;
  --common_page_background:    #1C1C2E !important;
  --header_background:         rgba(15,15,26,0.95) !important;
  --button_primary_background: linear-gradient(135deg, #FF4B6E 0%, #FF8C42 100%) !important;
  --button_primary_hover_background: linear-gradient(135deg, #ff3360 0%, #ff7a2e 100%) !important;
  --text_primary:              #FFFFFF !important;
  --text_link:                 #FF4B6E !important;
  --text_link_hover:           #FF8C42 !important;
  --text_title:                #FFFFFF !important;
  --text_sub_title:            #A0A0B8 !important;
  --separator_common:          rgba(255,255,255,0.08) !important;
  --input_text_backgroud:      #252538 !important;
  --input_text_color:          #FFFFFF !important;
  --input_text_border:         1px solid rgba(255,255,255,0.08) !important;
}

/* ── 22. MOBILE FIRST ────────────────────────────────────── */
@media (max-width: 768px) {

  .rje-card {
    padding: 28px 20px !important;
    border-radius: var(--vp-radius-lg) !important;
  }

  .rje-illustration__title {
    font-size: 32px !important;
  }

  .rje-illustration__text {
    font-size: 16px !important;
  }

  /* Bouton CTA plein largeur sur mobile */
  .rje-btn.primary,
  .button.primary {
    width: 100% !important;
  }

  /* Cartes plus compactes */
  .standard-object {
    border-radius: var(--vp-radius-md) !important;
  }
}

@media (max-width: 480px) {
  .rje-card {
    border-radius: var(--vp-radius-md) !important;
    padding: 24px 16px !important;
  }
}

/* ── 23. CORRECTION TYPOGRAPHIE HÉRITÉE ─────────────────── */
.wrap,
.content-page,
.main-content p,
.main-content span,
.item-text,
.post-text {
  color: var(--vp-text) !important;
}

.text-muted,
.text-sub,
[class*="sub-title"],
.item-info small {
  color: var(--vp-text-sub) !important;
}

/* Liens globaux */
a:not(.button):not(.btn):not([class*="topbar"]):not(.rje-btn) {
  color: var(--vp-pink);
}
a:not(.button):not(.btn):not([class*="topbar"]):not(.rje-btn):hover {
  color: var(--vp-orange);
}


/* ═══════════════════════════════════════════════════════════
   HERO SECTION — Mosaïque photos + CTA
   Utilisé dans html/main.inc.php (.rje-auth__left)
══════════════════════════════════════════════════════════ */

.vp-hero {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background: var(--vp-bg);
}

/* Grille de photos en arrière-plan */
.vp-hero__mosaic {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 4px;
}

.vp-hero__tile {
  background-size: cover;
  background-position: center top;
  transition: transform 8s ease;
  will-change: transform;
}

/* Animation subtile de zoom lent sur les photos */
.vp-hero__tile:nth-child(odd) {
  animation: vp-hero-zoom 12s ease-in-out infinite alternate;
}
.vp-hero__tile:nth-child(even) {
  animation: vp-hero-zoom 14s ease-in-out infinite alternate-reverse;
}

@keyframes vp-hero-zoom {
  from { transform: scale(1.00); }
  to   { transform: scale(1.08); }
}

/* Dégradé sombre du bas (pour lisibilité du texte) */
.vp-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 15, 26, 0.97) 0%,
    rgba(15, 15, 26, 0.70) 35%,
    rgba(15, 15, 26, 0.35) 60%,
    rgba(15, 15, 26, 0.08) 100%
  );
  z-index: 1;
}

/* Contenu positionné au bas */
.vp-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 48px;
  box-sizing: border-box;
}

/* Badge "X membres actifs" */
.vp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  padding: 8px 16px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 28px;
  width: fit-content;
  letter-spacing: 0.2px;
}

.vp-hero__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00D09E;
  flex-shrink: 0;
  animation: vp-pulse 1.8s ease-in-out infinite;
}

/* Titre principal */
.vp-hero__title {
  font-size: clamp(2rem, 3.2vw, 2.9rem);
  font-weight: 900;
  line-height: 1.08;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: -0.5px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

/* Sous-titre / description */
.vp-hero__subtitle {
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.65;
  margin: 0 0 30px;
  max-width: 320px;
}

/* Bouton CTA */
.vp-hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--vp-gradient);
  color: #fff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 30px;
  border-radius: var(--vp-radius-btn);
  text-decoration: none !important;
  box-shadow: var(--vp-shadow-pink);
  transition: opacity 0.2s ease, transform 0.2s ease;
  width: fit-content;
  margin-bottom: 36px;
  letter-spacing: 0.2px;
}

.vp-hero__btn:hover {
  opacity: 0.88;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(255,75,110,0.5);
}

.vp-hero__btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.vp-hero__btn:hover svg {
  transform: translateX(3px);
}

/* Avatars stack + texte bas de page */
.vp-hero__stack {
  display: flex;
  align-items: center;
  gap: 12px;
}

.vp-hero__avatars {
  display: flex;
  align-items: center;
}

.vp-hero__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-size: cover;
  background-position: center top;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  margin-left: -11px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.vp-hero__avatars .vp-hero__avatar:first-child {
  margin-left: 0;
}

.vp-hero__stack-text {
  font-size: 0.83rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  letter-spacing: 0.1px;
}

/* Fallback : pas de photos → beau dégradé */
.vp-hero--no-photos {
  background: linear-gradient(160deg, #1a0a2e 0%, #FF4B6E 50%, #FF8C42 100%);
}

/* ═══════════════════════════════════════════════════════════
   CORRECTIFS — Logo + Dropdowns + Cards
   Résout : texte invisible dans panels blancs, logo incorrect
══════════════════════════════════════════════════════════ */

/* ── 1. LOGO TOPBAR (fond sombre → version blanche) ────── */
:root {
  --header_logo: url(/img/logowhite.png?v=2);
}

/* ── 2. DROPDOWNS & MENUS À FOND BLANC ─────────────────── */
/*
   Le problème : `color: #fff !important` sur body cascade dans
   tous les dropdowns Bootstrap qui ont un fond blanc (#fff).
   Fix : on reset la couleur de texte dans ces conteneurs.
*/
.dropdown-menu,
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item i,
.dropdown-menu .dropdown-item span,
.dropdown-menu h5,
.dropdown-menu h6,
.dropdown-menu p,
.dropdown-menu label,
.dropdown-menu .badge {
  color: #1a1a2e !important;
}

.dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid rgba(0,0,0,0.1) !important;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15) !important;
  border-radius: 12px !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #f5f0ff !important;
  color: var(--vp-pink) !important;
}

.dropdown-menu .dropdown-item:hover i,
.dropdown-menu .dropdown-item:focus i {
  color: var(--vp-pink) !important;
}

.dropdown-menu .dropdown-divider {
  border-color: rgba(0,0,0,0.08) !important;
}

/* ── 3. PANEL FILTRES RECHERCHE ─────────────────────────── */
/*
   Le panel ".encounters-filter" est dans un .dropdown-menu.
   Tous les labels radio sont invisibles (blanc sur blanc).
*/
.encounters-filter,
.encounters-filter *,
.search-filter-form-line,
.search-filter-form-line *,
.search-filter-radio-button,
.search-filter-radio-button label,
.encounters-filter__field,
.encounters-filter__control,
.encounters-filter h5,
.encounters-filter h4 {
  color: #1a1a2e !important;
}

.search-filter-radio-button {
  cursor: pointer;
}

/* Titres de sections dans le filtre + tous leurs enfants (span#distance, etc.) */
.search-filter-form-line h5 {
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  color: #666 !important;
  margin-bottom: 8px !important;
}
.dropdown-menu .search-filter-form-line h5,
.dropdown-menu .search-filter-form-line h5 * {
  color: #1a1a2e !important;
}

/* Texte des checkboxes dans le filtre (checkbox-field__text hérite du blanc du body) */
.dropdown-menu .encounters-filter .checkbox-field__text,
.dropdown-menu .encounters-filter .checkbox-field__label span,
.encounters-filter .checkbox-field__text,
.encounters-filter .checkbox-field__label span {
  color: #1a1a2e !important;
}

/* Boutons Appliquer / Annuler du filtre → déjà bien stylés */
.encounters-filter .button,
.encounters-filter button {
  color: #fff !important;
}

/* Slider dans le filtre */
.slider.slider-horizontal .slider-track {
  background: #e0e0e0 !important;
}

/* ── 4. CARDS PROFIL — meilleure lisibilité ─────────────── */
/*
   Les cartes dans /account/find ont un overlay sombre en bas
   avec le nom (rose) et la ville. On renforce le contraste.
*/
.people-item .item-footer,
.people-item .item-info,
.people-card .item-footer,
.user-card .item-footer,
[class*="people"] .item-name,
[class*="people"] .item-location {
  text-shadow: 0 1px 6px rgba(0,0,0,0.7) !important;
}

/* Badge âge (nombre dans le coin des cartes) */
.people-item .age-badge,
.badge-age,
[class*="age-badge"] {
  font-weight: 700 !important;
  font-size: 0.78rem !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
}

/* ── 5. PROFIL HEADER DROPDOWN UTILISATEUR ──────────────── */
/* Menu déroulant avatar en haut à droite */
.header-avatar-dropdown .dropdown-menu,
.user-menu .dropdown-menu,
[class*="header"] .dropdown-menu {
  min-width: 180px !important;
  padding: 8px 0 !important;
}

/* Assurer que les noms dans le header dropdown sont lisibles */
.dropdown-item .user-name,
.dropdown-item .user-login,
.header-user-name,
.header-user-login {
  color: #1a1a2e !important;
}


/* ═══════════════════════════════════════════════════════════
   MESSAGES & CHAT — Lisibilité dark theme
   Problèmes résolus :
   1. Conversation sélectionnée (fond blanc #F2F2F2 → sombre)
   2. Bulle de message (fond clair → sombre, texte lisible)
   3. Sidebar liste discussions
══════════════════════════════════════════════════════════ */

/* ── Élément de conversation sélectionné / hover ────────── */
/*
   Cause : --dropdown_menu_hover_background: #F2F2F2 (blanc)
   apparaît comme tache blanche sur fond sombre.
*/
.card-item .touch-item.active,
.card-item .touch-item:hover {
  background: var(--vp-card-2) !important;
  border-left: 3px solid var(--vp-pink) !important;
  border-radius: 0 !important;
}

/* Nom et preview dans la liste de conversations */
.card-item .touch-item .card-title,
.card-item .touch-item .card-title span,
.card-item .card-title,
.card-item .card-title span {
  color: var(--vp-text) !important;
}

.card-item .touch-item .sub-title,
.card-item .sub-title,
.card-item .card-status-info {
  color: var(--vp-text-sub) !important;
}

/* Titre de section "Discussions" */
.page-title-content .page-title,
.page-title,
[class*="page-title"] h4,
[class*="page-title"] h5 {
  color: var(--vp-text) !important;
}

/* ── Bulles de message ───────────────────────────────────── */
/*
   Cause : --comment_bubble_background: #F2F2F2 (gris clair)
   La bulle gris clair sur fond sombre est incohérente.
*/
.message-item .card-status-text {
  background: var(--vp-card-2) !important;
  color: var(--vp-text) !important;
  border-radius: 16px 16px 16px 4px !important;  /* forme moderne */
  padding: 10px 14px !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  max-width: 75% !important;
  word-break: break-word !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Bulle d'envoi (mes messages, côté droit) */
.message-item-right .card-status-text {
  background: var(--vp-gradient) !important;
  color: #fff !important;
  border-radius: 16px 16px 4px 16px !important;
}

/* ── Horodatage des messages ─────────────────────────────── */
.message-item .time {
  color: var(--vp-text-muted) !important;
  background: transparent !important;
  font-size: 0.75rem !important;
  padding: 0 2px !important;
}

/* ── Zone de saisie du message ───────────────────────────── */
.message-form,
.message-input-wrap,
[class*="message"] input[type="text"],
[class*="message"] textarea,
.chat-input,
input.message-field,
textarea.message-field {
  background: var(--vp-card) !important;
  color: var(--vp-text) !important;
  border-color: var(--vp-border) !important;
}

[class*="message"] input::placeholder,
[class*="message"] textarea::placeholder {
  color: var(--vp-text-muted) !important;
}

/* ── Sidebar liste messages ──────────────────────────────── */
.messages-sidebar,
.conversations-list,
.dialogs-list,
[class*="messages-list"],
[class*="conversation-list"] {
  background: var(--vp-bg) !important;
  border-right: 1px solid var(--vp-border) !important;
}


/* ═══════════════════════════════════════════════════════════
   SIDENAV — Modernisation complète (dark Tinder-style)
   Structure : .sidebar-menu > .sidebar-container > .main-menu
══════════════════════════════════════════════════════════ */

/* ── Variables overrides ────────────────────────────────── */
:root {
  --side_menu_text_color:       #B0B0C8;
  --side_menu_text_color_hover: #FFFFFF;
  --side_menu_icon_tint:        #B0B0C8;
  --side_menu_icon_tint_hover:  #FF4B6E;
  --side_menu_li:               transparent;
  --side_menu_li_hover:         rgba(255,75,110,0.08);
  --side_menu_li_selected:      rgba(255,75,110,0.13);
  --side_menu_border_radius:    10px;
}

/* ── Conteneur ───────────────────────────────────────────── */
.sidebar-menu {
  padding-right: 0 !important;
}

.sidebar-container {
  background: transparent !important;
  padding: 8px 4px !important;
}

.main-menu .item-list {
  background: transparent !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
}

.main-menu .item-list ul {
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Items nav ───────────────────────────────────────────── */
.main-menu .item-li {
  border-bottom: none !important;
  border-radius: var(--side_menu_border_radius) !important;
  margin: 1px 0 !important;
  transition: background 0.18s ease !important;
}

.main-menu .item-li:hover {
  background: var(--side_menu_li_hover) !important;
}

.main-menu .item-li a.custom-item-link {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 42px !important;
  line-height: 1 !important;
  padding: 0 12px !important;
  border-radius: var(--side_menu_border_radius) !important;
  color: var(--side_menu_text_color) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}

.main-menu .item-li a.custom-item-link:hover {
  color: var(--side_menu_text_color_hover) !important;
  background: transparent !important;
}

/* ── Icônes ──────────────────────────────────────────────── */
.main-menu .item-icon {
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
  margin: 0 !important;
  position: static !important;
  flex-shrink: 0 !important;
  color: var(--side_menu_icon_tint) !important;
  transition: color 0.18s ease !important;
}

.main-menu .item-li:hover .item-icon,
.main-menu .item-selected .item-icon {
  color: var(--vp-pink) !important;
}

.main-menu .item-icon i.icon,
.main-menu .iconfont {
  font-size: 17px !important;
  float: none !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Titre ───────────────────────────────────────────────── */
.main-menu .item-title {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
}

/* ── Badge compteur ──────────────────────────────────────── */
.main-menu .item-counter {
  float: none !important;
  margin: 0 !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Compteur vide = invisible → corrige les points orange */
.main-menu .item-counter .counter:empty {
  display: none !important;
}

/* .hidden Bootstrap doit rester caché */
.main-menu .item-counter.hidden {
  display: none !important;
}

/* Parent div.item-counter caché quand counter est vide → corrige l'alignement */
.main-menu .item-counter:has(.counter:empty) {
  display: none !important;
}

/* Fallback : forcer width:0 si :has() non supporté */
.main-menu .item-counter:not(.visible) {
  min-width: 0 !important;
  width: auto !important;
}

.main-menu .item-counter .counter {
  background: var(--vp-gradient) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  height: 18px !important;
  min-width: 18px !important;
  line-height: 18px !important;
  border-radius: 9px !important;
  padding: 0 5px !important;
  display: inline-block !important;
}

/* ── Item actif (page courante) ──────────────────────────── */
.main-menu .item-selected {
  background: var(--side_menu_li_selected) !important;
  border-left: 3px solid var(--vp-pink) !important;
  border-radius: 0 var(--side_menu_border_radius) var(--side_menu_border_radius) 0 !important;
}

.main-menu .item-selected a.custom-item-link {
  color: #fff !important;
  font-weight: 600 !important;
  padding-left: 9px !important;
}

/* ── Profil utilisateur (haut sidenav) ───────────────────── */
.item-li-main {
  position: relative !important;  /* anchor pour l'avatar absolu */
  height: 58px !important;
  padding: 0 8px 0 0 !important;
  border-bottom: 1px solid var(--vp-border) !important;
  margin-bottom: 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.item-li-main:hover {
  background: transparent !important;
}

/* Lien profil — spécificité 4 classes pour battre .main-menu .item-li a.custom-item-link */
.main-menu .item-li.item-li-main a.custom-item-link {
  display: block !important;
  height: 58px !important;
  line-height: 1 !important;
  padding: 10px 4px 10px 56px !important;  /* 56px = avatar(44) + gap(12) */
  color: var(--vp-text) !important;
  text-decoration: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Avatar : position absolute (comme l'original), cercle rose par-dessus */
.item-li-main .item-icon {
  position: absolute !important;
  top: 7px !important;
  left: 4px !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  border: 2.5px solid var(--vp-pink) !important;
  overflow: hidden !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 0 0 3px rgba(255,75,110,0.15) !important;
}

.item-li-main .profile-photo-avatar {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 0 !important;
  border: none !important;
}

.item-li-main .link-container {
  padding-left: 0 !important;
  display: block !important;
}

.item-li-main .item-title {
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--vp-text) !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

.item-li-main .item-sub-title {
  font-size: 0.75rem !important;
  color: var(--vp-text-sub) !important;
  line-height: 1.4 !important;
  display: block !important;
}

/* Bouton engrenage (settings) */
.main-menu-action-button {
  opacity: 0 !important;
  color: var(--vp-text-sub) !important;
  height: 34px !important;
  width: 34px !important;
  padding: 7px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: opacity 0.18s, background 0.18s, color 0.18s !important;
}

.item-li-main:hover .main-menu-action-button {
  opacity: 1 !important;
}

.main-menu-action-button:hover {
  background: var(--vp-card-2) !important;
  color: var(--vp-pink) !important;
}

/* ── Section Spotlight ───────────────────────────────────── */
.item-list.spotlight {
  background: var(--vp-card) !important;
  border-radius: var(--vp-radius-lg) !important;
  padding: 14px 10px !important;
  margin-top: 8px !important;
}

.spotlight .spotlight-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  padding: 0 4px !important;
}

.spotlight .spotlight-title {
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.7px !important;
  color: var(--vp-text-sub) !important;
}

.spotlight .spotlight-link a {
  font-size: 0.75rem !important;
  color: var(--vp-pink) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.spotlight .spotlight-link a:hover {
  color: var(--vp-orange) !important;
  text-decoration: none !important;
}

.spotlight .cardview a.cardview-item-title {
  font-size: 0.72rem !important;
  color: var(--vp-text-sub) !important;
}

/* ═══════════════════════════════════════════════════════════
   VADIBE PREMIUM — v2.0 · Design Upgrades
   Améliorations ciblées : hero, card, mobile, animations
══════════════════════════════════════════════════════════ */

/* ── A. HERO — Titre en dégradé ─────────────────────────── */
.vp-hero__title em,
.vp-hero__title .accent {
  font-style: normal;
  background: var(--vp-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Entrée animée du contenu hero */
.vp-hero__badge  { animation: vp-hero-in 0.6s 0.1s ease both; }
.vp-hero__title  { animation: vp-hero-in 0.6s 0.25s ease both; }
.vp-hero__subtitle { animation: vp-hero-in 0.6s 0.38s ease both; }
.vp-hero__btn    { animation: vp-hero-in 0.6s 0.50s ease both; }
.vp-hero__stack  { animation: vp-hero-in 0.6s 0.62s ease both; }

@keyframes vp-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Badge : glassmorphism renforcé */
.vp-hero__badge {
  background: rgba(255,255,255,0.10) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
}

/* CTA Hero — shimmer au hover */
.vp-hero__btn {
  position: relative;
  overflow: hidden;
}
.vp-hero__btn::after {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.22), transparent);
  transform: skewX(-15deg);
  transition: none;
}
.vp-hero__btn:hover::after {
  animation: vp-shimmer-btn 0.55s ease forwards;
}
@keyframes vp-shimmer-btn {
  to { left: 125%; }
}

/* ── B. MOBILE HERO BANNER ───────────────────────────────── */
/* Sur mobile, on affiche un mini-banner hero au-dessus du form */
@media (max-width: 991px) {

  .rje-auth {
    flex-direction: column !important;
  }

  .rje-auth__left {
    display: block !important;
    flex: none !important;
    width: 100% !important;
    height: 220px !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .vp-hero {
    min-height: 220px !important;
  }

  .vp-hero__mosaic {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: 1fr !important;
  }

  /* Afficher seulement 3 tuiles sur mobile */
  .vp-hero__tile:nth-child(n+4) {
    display: none !important;
  }

  .vp-hero__overlay {
    background: linear-gradient(
      to top,
      rgba(15,15,26,0.92) 0%,
      rgba(15,15,26,0.55) 50%,
      rgba(15,15,26,0.15) 100%
    ) !important;
  }

  .vp-hero__content {
    min-height: 220px !important;
    padding: 16px 20px 20px !important;
    justify-content: flex-end !important;
  }

  .vp-hero__badge { margin-bottom: 10px !important; }

  .vp-hero__title {
    font-size: 1.45rem !important;
    margin-bottom: 0 !important;
  }

  .vp-hero__subtitle,
  .vp-hero__btn,
  .vp-hero__stack { display: none !important; }

  .rje-auth__right {
    flex: none !important;
    width: 100% !important;
    padding: 20px 16px 32px !important;
    align-items: flex-start !important;
  }

  .rje-card {
    max-width: 100% !important;
    padding: 28px 22px !important;
    border-radius: 20px !important;
    border: 1px solid var(--vp-border) !important;
  }
}

@media (max-width: 480px) {
  .rje-auth__left {
    height: 180px !important;
  }
  .vp-hero { min-height: 180px !important; }
  .vp-hero__content { min-height: 180px !important; }
  .vp-hero__title { font-size: 1.25rem !important; }
  .rje-card { padding: 24px 18px !important; }
}

/* ── C. CARD PREMIUM — bordure dégradé top ───────────────── */
.rje-card {
  position: relative !important;
}
.rje-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--vp-gradient);
  border-radius: var(--vp-radius-xl) var(--vp-radius-xl) 0 0;
  opacity: 0.85;
}

/* ── D. LOGO — plus grand, plus aéré ────────────────────── */
.rje-logo {
  height: 44px !important;
  width: 150px !important;
  margin-bottom: 4px !important;
}

/* ── E. TITRE CONNEXION — meilleure hiérarchie ───────────── */
.rje-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.4px !important;
  margin-bottom: 20px !important;
}

/* ── F. INPUTS — meilleure hauteur, focus amélioré ──────── */
.rje-input {
  height: 50px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  letter-spacing: 0.1px !important;
}

.rje-input:focus {
  border-color: var(--vp-pink) !important;
  box-shadow: 0 0 0 3px rgba(255,75,110,0.18), inset 0 1px 3px rgba(0,0,0,0.1) !important;
  background: #2a2a40 !important;
}

/* Password field: masquer les décorations navigateur */
.rje-input[type="password"]::-ms-reveal,
.rje-input[type="password"]::-ms-clear { display: none; }

/* ── G. FORM GAP — meilleur espacement ──────────────────── */
.rje-form { gap: 16px !important; }

/* ── H. BOUTON LOGIN — shimmer + meilleur sizing ─────────── */
button[type="submit"].rje-btn {
  position: relative !important;
  overflow: hidden !important;
  height: 52px !important;
  font-size: 16px !important;
  letter-spacing: 0.4px !important;
  text-transform: none !important;
  width: 100% !important;
}

button[type="submit"].rje-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.18), transparent);
  transform: skewX(-15deg);
}

button[type="submit"].rje-btn:hover::after {
  animation: vp-shimmer-btn 0.6s ease forwards;
}

button[type="submit"].rje-btn:active {
  transform: scale(0.98) translateY(0) !important;
  box-shadow: 0 4px 16px rgba(255,75,110,0.3) !important;
}

/* ── I. DIVIDER "ou" — plus fin, plus élégant ────────────── */
.rje-divider {
  margin: 16px 0 !important;
  font-size: 12px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* ── J. LIEN MOT DE PASSE OUBLIÉ ────────────────────────── */
.rje-row { margin-top: -4px !important; }

.rje-link {
  font-size: 13px !important;
  transition: color 0.15s ease !important;
}

/* ── K. FOOTER CARTE ─────────────────────────────────────── */
.rje-footer {
  margin-top: 20px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}

/* ── L. BOUTON SOCIAL (Google / Phone) ───────────────────── */
.btn-social {
  transition: all 0.2s cubic-bezier(0.4,0,0.2,1) !important;
}
.btn-social:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3) !important;
}
.btn-social:active {
  transform: scale(0.98) !important;
}

/* ── M. BOUTON GOOGLE PLAY ───────────────────────────────── */
.rje-footer a img {
  border-radius: 0px !important;
  opacity: 0.88 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}
.rje-footer a:hover img {
  opacity: 1 !important;
  transform: scale(1.03) translateY(-1px) !important;
}

/* ── N. ALERTE ERREUR — plus compacte et lisible ─────────── */
.rje-card .alert-danger {
  padding: 12px 14px !important;
  border-radius: 10px !important;
  font-size: 13.5px !important;
  margin-bottom: 4px !important;
}
.rje-card .alert-danger .title {
  font-weight: 700 !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.rje-card .alert-danger ul {
  margin: 0 !important;
  padding-left: 16px !important;
}

/* ── O. TRANSITIONS GLOBALES FLUIDES ────────────────────── */
.rje-auth__left,
.rje-auth__right,
.rje-card,
.rje-input,
.rje-btn,
.btn-social {
  will-change: transform;
}

/* ── P. RECAPTCHA BADGE — masqué (texte légal ajouté dans le form) ── */
/* Google autorise de masquer le badge si mention légale présente     */
.grecaptcha-badge {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Q. FOCUS-VISIBLE GLOBAL — accessibilité ─────────────── */
:focus-visible {
  outline: 2px solid var(--vp-pink) !important;
  outline-offset: 2px !important;
}

/* ── R. COOKIE BANNER MODERNISÉ ─────────────────────────── */

/* Masquer l'ancien banner */
.header-message { display: none !important; }

/* Nouveau banner — fixed en bas */
.vp-cookie-banner {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--vp-card);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 580px;
  width: calc(100% - 32px);
  animation: vp-cookie-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes vp-cookie-in {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.vp-cookie-banner.gone {
  animation: vp-cookie-out 0.3s ease forwards !important;
}

@keyframes vp-cookie-out {
  to { opacity: 0; transform: translateX(-50%) translateY(20px); }
}

/* Icône */
.vp-cookie-banner__icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

/* Texte */
.vp-cookie-banner__text {
  flex: 1;
  font-size: 13.5px;
  color: var(--vp-text-sub);
  line-height: 1.45;
  font-family: 'Inter', sans-serif;
}

.vp-cookie-banner__link {
  color: var(--vp-pink) !important;
  text-decoration: none !important;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 4px;
}
.vp-cookie-banner__link:hover {
  text-decoration: underline !important;
}

/* Boutons */
.vp-cookie-banner__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.vp-cookie-banner__btn {
  border: none;
  border-radius: 50px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.vp-cookie-banner__btn--accept {
  background: var(--vp-gradient);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255,75,110,0.35);
}
.vp-cookie-banner__btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,75,110,0.5);
}

.vp-cookie-banner__btn--decline {
  background: transparent;
  color: var(--vp-text-muted);
  border: 1px solid rgba(255,255,255,0.12);
}
.vp-cookie-banner__btn--decline:hover {
  background: rgba(255,255,255,0.06);
  color: var(--vp-text-sub);
}

/* Mobile */
@media (max-width: 560px) {
  .vp-cookie-banner {
    flex-direction: column;
    text-align: center;
    gap: 12px;
    padding: 16px;
    bottom: 12px;
  }
  .vp-cookie-banner__actions {
    width: 100%;
    justify-content: center;
  }
  .vp-cookie-banner__btn {
    flex: 1;
    padding: 10px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════
   BACKGROUND PREMIUM — Panneau login (rje-auth__right)
   Technique : gradient layers + orbes CSS animés + dot grid
   Aucune modification de la card, du backend ou du HTML
══════════════════════════════════════════════════════════ */

/* ── 1. FOND MULTI-COUCHES ───────────────────────────────── */
/*
   4 couches empilées (les dernières = fond):
   • Lueur rose haut-droite
   • Lueur violette bas-gauche
   • Lueur orange centre-haut (très subtile)
   • Grille de points micro (profondeur)
   • Couleur de base #0F0F1A
*/
.rje-auth__right {
  position: relative !important;
  overflow: hidden !important;
  background-color: #0F0F1A !important;
  background-image:
    radial-gradient(ellipse 65% 55% at 92% 8%,  rgba(255, 75,110, 0.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 55% at 8%  92%, rgba(108, 99,255, 0.26) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 50% 50%, rgba(255,140, 66, 0.12) 0%, transparent 55%),
    radial-gradient(circle at 1.5px 1.5px, rgba(255,255,255,0.040) 1.5px, transparent 0) !important;
  background-size: auto, auto, auto, 28px 28px !important;
}

/* ── 2. ORBE ROSE — haut-droite (pseudo :before) ────────── */
.rje-auth__right::before {
  content: '';
  position: absolute;
  top: -220px;
  right: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 75, 110, 0.42) 0%,
    rgba(255, 75, 110, 0.16) 40%,
    transparent 70%
  );
  filter: blur(55px);
  animation: vp-orb-a 11s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ── 3. ORBE VIOLET — bas-gauche (pseudo :after) ─────────── */
.rje-auth__right::after {
  content: '';
  position: absolute;
  bottom: -200px;
  left: -160px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(108, 99, 255, 0.38) 0%,
    rgba(108, 99, 255, 0.14) 40%,
    transparent 70%
  );
  filter: blur(65px);
  animation: vp-orb-b 14s ease-in-out infinite alternate-reverse;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ── 4. ORBE ORANGE — centre (élément injecté via JS) ───── */
/*
  On utilise un 3e orbe via un div.vp-orb-c injecté par JS ci-dessous
  (car CSS n'a que 2 pseudo-éléments).
*/
.vp-orb-c {
  position: absolute;
  top: 38%;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle at center,
    rgba(255, 140, 66, 0.28) 0%,
    rgba(255, 140, 66, 0.10) 45%,
    transparent 70%
  );
  filter: blur(50px);
  animation: vp-orb-c 9s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}

/* ── 5. ANIMATIONS DES ORBES ─────────────────────────────── */
@keyframes vp-orb-a {
  0%   { transform: translate(0,    0)    scale(1.00); }
  30%  { transform: translate(-25px, 30px) scale(1.06); }
  65%  { transform: translate(15px, -20px) scale(0.96); }
  100% { transform: translate(-10px, 15px) scale(1.04); }
}

@keyframes vp-orb-b {
  0%   { transform: translate(0,    0)    scale(1.00); }
  40%  { transform: translate(20px, -25px) scale(1.05); }
  70%  { transform: translate(-15px, 20px) scale(0.97); }
  100% { transform: translate(10px, -10px) scale(1.03); }
}

@keyframes vp-orb-c {
  0%   { transform: translate(0,    0)    scale(1.00); }
  50%  { transform: translate(-20px, -30px) scale(1.08); }
  100% { transform: translate(10px,  20px)  scale(0.95); }
}

/* ── 6. CARD AU-DESSUS DES ORBES ─────────────────────────── */
.rje-auth__right > div {
  position: relative !important;
  z-index: 2 !important;
}

/* ── 7. LIGNE DE LUMIÈRE VERTICALE (séparateur) ──────────── */
/*
  Fine ligne dégradée entre panneau gauche et panneau droit
  sur desktop — renforce le côté "premium tech"
*/
@media (min-width: 992px) {
  .rje-auth__right {
    border-left: 1px solid rgba(255,255,255,0.05) !important;
  }
}

/* ── 8. MOBILE — orbes réduits, pas de dot grid ─────────── */
@media (max-width: 991px) {
  .rje-auth__right {
    background-image:
      radial-gradient(ellipse 80% 50% at 90% 5%,  rgba(255,75,110, 0.22) 0%, transparent 55%),
      radial-gradient(ellipse 70% 50% at 10% 95%, rgba(108,99,255, 0.18) 0%, transparent 55%) !important;
    background-size: auto, auto !important;
  }

  .rje-auth__right::before,
  .rje-auth__right::after {
    width: 300px !important;
    height: 300px !important;
    filter: blur(40px) !important;
  }

  .vp-orb-c { display: none !important; }
}

/* ── FIN vadibe-premium.css v2.0 ────────────────────────── */