/* ═══════════════════════════════════════════════════════════════════
   Vadibe Redesign — Phase 1 + 2 — Landing & UI Premium
   Chargé après vadibe-ios.css — override final, priorité max
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Import Google Font Inter ─────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ─── Tokens de design ────────────────────────────────────────── */
:root {
    --vd-primary:       #FD5068;
    --vd-primary-end:   #FF7240;
    --vd-gradient:      linear-gradient(135deg, #FD5068 0%, #FF7240 100%);
    --vd-gradient-v:    linear-gradient(180deg, #FD5068 0%, #FF7240 100%);
    --vd-glow:          0 6px 24px rgba(253, 80, 104, 0.38);
    --vd-glow-lg:       0 10px 40px rgba(253, 80, 104, 0.48);
    --vd-purple:        #7B61FF;
    --vd-green:         #00C96A;
    --vd-gold:          #FFD700;
    --vd-font:          'Inter', -apple-system, 'SF Pro Display', system-ui, sans-serif;
    --vd-radius-pill:   999px;
    --vd-radius-card:   20px;
    --vd-radius-input:  14px;
}

/* ─── Typographie globale ──────────────────────────────────────── */
body {
    font-family: var(--vd-font) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PHASE 1 — LANDING PAGE (rje-landing)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout mobile : colonne (hero en haut, form en bas) ─── */
@media (max-width: 991px) {
    .rje-auth {
        flex-direction: column !important;
        min-height: 100vh !important;
    }

    /* Hero compact sur mobile */
    .rje-auth__left {
        display: block !important;
        flex: 0 0 auto !important;
        min-height: 200px !important;
    }

    .rje-illustration {
        min-height: 200px !important;
        background: var(--vd-gradient) !important;
        position: relative !important;
        overflow: hidden !important;
        padding: 32px 24px 28px !important;
        align-items: flex-start !important;
    }

    /* Cercles décoratifs en arrière-plan */
    .rje-illustration::before {
        content: '';
        position: absolute;
        top: -60px; right: -60px;
        width: 220px; height: 220px;
        border-radius: 50%;
        background: rgba(255,255,255,0.10);
        pointer-events: none;
    }
    .rje-illustration::after {
        content: '';
        position: absolute;
        bottom: -40px; left: -40px;
        width: 160px; height: 160px;
        border-radius: 50%;
        background: rgba(255,255,255,0.07);
        pointer-events: none;
    }

    .rje-illustration__content {
        position: relative;
        z-index: 2 !important;
    }

    .rje-illustration__title {
        font-size: 26px !important;
        font-weight: 900 !important;
        letter-spacing: -0.5px !important;
        line-height: 1.2 !important;
        margin-bottom: 8px !important;
        text-shadow: none !important;
    }

    .rje-illustration__text {
        font-size: 14px !important;
        font-weight: 500 !important;
        opacity: 0.88 !important;
        text-shadow: none !important;
    }

    /* Compteur "membres actifs" — affiché via pseudo si JS l'injecte */
    .rje-illustration__content::after {
        content: '🔥 12 340 membres actifs à Madagascar';
        display: block;
        margin-top: 14px;
        background: rgba(255,255,255,0.18);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 20px;
        padding: 5px 14px;
        font-size: 11px;
        font-weight: 700;
        color: #fff;
        width: fit-content;
        letter-spacing: 0.2px;
    }

    /* Panel droit : padding réduit */
    .rje-auth__right {
        flex: 1 !important;
        padding: 20px 16px 32px !important;
        align-items: flex-start !important;
    }

    .rje-card {
        padding: 20px 16px !important;
        border-radius: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Desktop : panneau gauche pleine hauteur ─── */
@media (min-width: 992px) {
    .rje-illustration {
        background: var(--vd-gradient) !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .rje-illustration::before {
        content: '';
        position: absolute;
        top: -80px; right: -80px;
        width: 400px; height: 400px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        pointer-events: none;
    }
    .rje-illustration::after {
        content: '';
        position: absolute;
        bottom: -100px; left: -60px;
        width: 300px; height: 300px;
        border-radius: 50%;
        background: rgba(255,255,255,0.06);
        pointer-events: none;
    }

    .rje-illustration__content {
        position: relative;
        z-index: 2 !important;
        text-shadow: none !important;
    }

    .rje-illustration__title {
        font-size: 44px !important;
        font-weight: 900 !important;
        letter-spacing: -1px !important;
        line-height: 1.1 !important;
        text-shadow: none !important;
    }

    .rje-illustration__text {
        font-size: 18px !important;
        font-weight: 500 !important;
        line-height: 1.6 !important;
        text-shadow: none !important;
    }

    .rje-illustration__content::after {
        content: '🔥 12 340 membres actifs à Madagascar';
        display: block;
        margin-top: 24px;
        background: rgba(255,255,255,0.18);
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255,255,255,0.25);
        border-radius: 20px;
        padding: 7px 18px;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        width: fit-content;
    }

    .rje-card {
        padding: 44px 36px !important;
    }
}

/* ── Logo centré ─── */
.rje-logo {
    display: block !important;
    margin: 0 auto 20px !important;
    background-size: contain !important;
    background-position: center !important;
}

/* ── Titre de page ─── */
.rje-title {
    font-family: var(--vd-font) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    text-align: center !important;
    margin-bottom: 20px !important;
    color: var(--text_title) !important;
}

/* ── Bouton primaire — gradient Vadibe ─── */
.rje-btn,
.rje-btn--primary,
button.rje-btn.primary.button,
.rje-form button[type="submit"] {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: var(--vd-radius-pill) !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    box-shadow: var(--vd-glow) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.15s ease !important;
    font-family: var(--vd-font) !important;
    letter-spacing: 0.2px !important;
    width: 100% !important;
    margin-top: 8px !important;
}

.rje-btn:hover,
.rje-btn--primary:hover,
.rje-form button[type="submit"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--vd-glow-lg) !important;
    opacity: 0.96 !important;
}

.rje-btn:active,
.rje-btn--primary:active,
.rje-form button[type="submit"]:active {
    transform: scale(0.97) !important;
}

/* ── Inputs — focus rose ─── */
.rje-input,
.rje-form input[type="text"],
.rje-form input[type="email"],
.rje-form input[type="password"] {
    border-radius: var(--vd-radius-input) !important;
    height: 50px !important;
    font-size: 15px !important;
    font-family: var(--vd-font) !important;
    padding: 0 16px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    border: 1.5px solid rgba(255,255,255,0.1) !important;
    background: var(--input_text_backgroud) !important;
    color: var(--input_text_color) !important;
}

.rje-input:focus,
.rje-form input[type="text"]:focus,
.rje-form input[type="email"]:focus,
.rje-form input[type="password"]:focus {
    outline: none !important;
    border-color: var(--vd-primary) !important;
    box-shadow: 0 0 0 3px rgba(253, 80, 104, 0.18) !important;
}

/* ── Labels ─── */
.rje-label {
    font-family: var(--vd-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--text_sub_title) !important;
    margin-bottom: 6px !important;
}

/* ── Séparateur ─── */
.rje-divider {
    color: var(--text_sub_title) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    margin: 20px 0 !important;
}
.rje-divider::before,
.rje-divider::after {
    border-bottom: 1px solid rgba(255,255,255,0.10) !important;
}

/* ── Boutons sociaux (Google, Téléphone) ─── */
.gl-icon-btn,
.phone-icon-btn,
.btn-social {
    border-radius: var(--vd-radius-pill) !important;
    height: 50px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--vd-font) !important;
    border: 1.5px solid rgba(255,255,255,0.12) !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--text_title) !important;
    transition: background 0.2s, border-color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    width: 100% !important;
}
.gl-icon-btn:hover,
.phone-icon-btn:hover,
.btn-social:hover {
    background: rgba(255,255,255,0.10) !important;
    border-color: rgba(255,255,255,0.22) !important;
    color: var(--text_title) !important;
    text-decoration: none !important;
}

/* ── Lien mot de passe oublié ─── */
.rje-link {
    color: var(--vd-primary) !important;
    font-weight: 600 !important;
    font-family: var(--vd-font) !important;
}

/* ── Footer inscription ─── */
.rje-footer {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    color: var(--text_sub_title) !important;
    text-align: center !important;
    margin-top: 20px !important;
}
.rje-footer .rje-link--strong {
    color: var(--vd-primary) !important;
    font-weight: 700 !important;
}

/* ── Formulaire : espacement ─── */
.rje-form {
    gap: 14px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 2 — PROFILS CARDS (page Find / Rechercher)
   Classes réelles : .cardview-item, .cardview-img-container, etc.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Titre de section ─── */
.page-title-content-inner {
    font-family: var(--vd-font) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* ── Card body — coins arrondis + overflow ─── */
.cardview .card-body {
    border-radius: var(--vd-radius-card) !important;
    overflow: hidden !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.30) !important;
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.22s ease !important;
    position: relative !important;
}

@media (hover: hover) {
    .cardview .card-body:hover {
        transform: translateY(-5px) scale(1.02) !important;
        box-shadow: 0 18px 48px rgba(0,0,0,0.45) !important;
    }
}

/* ── Image — ratio portrait style Tinder ─── */
.cardview .cardview-img-container {
    padding-top: 140% !important;
    border-radius: var(--vd-radius-card) !important;
    background: #1a1a2e !important;
}

/* ── Image couvre tout ─── */
span.cardview-img {
    border-radius: var(--vd-radius-card) !important;
    background-size: cover !important;
    background-position: center top !important;
}

/* ── Footer en overlay au bas de la photo ─── */
.cardview .cardview-item-footer {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 40px 12px 12px !important;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.88) 0%,
        rgba(0,0,0,0.35) 55%,
        transparent 100%
    ) !important;
    border-radius: 0 0 var(--vd-radius-card) var(--vd-radius-card) !important;
    flex-direction: column !important;
    display: flex !important;
}

/* ── Nom — blanc, gras ─── */
.cardview a.cardview-item-title {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--vd-font) !important;
    text-decoration: none !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important;
}

.cardview a.cardview-item-title:hover {
    text-decoration: none !important;
    color: #ffffff !important;
}

/* ── Localisation sous le nom ─── */
.cardview .gray-text {
    color: rgba(255,255,255,0.80) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 2px !important;
}

/* ── Badge âge — gradient Vadibe ─── */
.cardview .card-counter {
    background: var(--vd-gradient) !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 4px 10px !important;
    border: none !important;
    top: 10px !important;
    left: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* Surcharge couleurs originales ─── */
.cardview .card-counter.red,
.cardview .card-counter.black,
.cardview .card-counter.green {
    background: var(--vd-gradient) !important;
    color: #ffffff !important;
}

/* ── Point "en ligne" — pulse vert ─── */
.cardview .online-label {
    width: 12px !important;
    height: 12px !important;
    background: #00E676 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    animation: vd-online-pulse 2.5s ease infinite !important;
    box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5) !important;
}

@keyframes vd-online-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 230, 118, 0.5); }
    50%       { box-shadow: 0 0 0 5px rgba(0, 230, 118, 0); }
}

/* ── Badge vérifié ─── */
.cardview .verified {
    color: var(--vd-primary) !important;
    font-size: 12px !important;
    margin-left: 3px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 3 — BOUTONS GLOBAUX PREMIUM
   ═══════════════════════════════════════════════════════════════════ */

/* Tous les .button.primary ─── */
.button.primary,
button.primary,
a.button.primary,
input[type="submit"].button.primary {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: var(--vd-radius-pill) !important;
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
    letter-spacing: 0.2px !important;
    box-shadow: var(--vd-glow) !important;
    transition: transform 0.15s ease, box-shadow 0.18s ease !important;
}
.button.primary:hover,
button.primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: var(--vd-glow-lg) !important;
}
.button.primary:active,
button.primary:active {
    transform: scale(0.97) !important;
}

/* Bouton secondaire ─── */
.button.secondary,
button.secondary,
a.button.secondary {
    border-radius: var(--vd-radius-pill) !important;
    font-family: var(--vd-font) !important;
    font-weight: 600 !important;
    border: 1.5px solid rgba(255,255,255,0.15) !important;
    transition: background 0.2s, border-color 0.2s !important;
}

/* Bouton "Plus" (load more) ─── */
.button.more,
.loading-button {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: var(--vd-radius-pill) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: var(--vd-font) !important;
    box-shadow: var(--vd-glow) !important;
    padding: 14px 40px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 4 — CHAT PREMIUM
   ═══════════════════════════════════════════════════════════════════ */

/* ── Bulles de chat ─── */
.message-bubble,
.dialog-message .message-text,
.chat-bubble-text,
.message-item .message-content {
    border-radius: 18px 18px 18px 4px !important;
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

/* Bulles envoyées par l'utilisateur ─── */
.message-item.message-out .message-content,
.message-out .message-bubble,
.message-out .message-text,
.dialog-message.out .message-text {
    background: var(--vd-gradient) !important;
    color: #fff !important;
    border-radius: 18px 18px 4px 18px !important;
    box-shadow: 0 2px 12px rgba(253,80,104,0.25) !important;
}

/* Bulles reçues ─── */
.message-item.message-in .message-content,
.message-in .message-bubble,
.message-in .message-text,
.dialog-message.in .message-text {
    background: var(--ios-bg-elevated, #38383F) !important;
    color: var(--text_primary, #fff) !important;
}

/* ── En-tête conversation ─── */
.page-messages .dialog-header,
.chat-header,
.conversation-header {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: rgba(18,18,20,0.95) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
}

/* ── Nom du contact ─── */
.dialog-header .dialog-name,
.chat-contact-name {
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* ── "En ligne" / statut ─── */
.dialog-status-online,
.online-status-text {
    color: var(--vd-green) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

/* ── Zone de saisie ─── */
.message-input,
.chat-textarea,
.textarea-message {
    border-radius: 22px !important;
    border: 1.5px solid rgba(255,255,255,0.10) !important;
    font-family: var(--vd-font) !important;
    font-size: 15px !important;
    padding: 10px 16px !important;
    background: var(--input_text_backgroud) !important;
    resize: none !important;
    transition: border-color 0.2s !important;
}
.message-input:focus,
.chat-textarea:focus {
    border-color: var(--vd-primary) !important;
    box-shadow: 0 0 0 3px rgba(253, 80, 104, 0.15) !important;
    outline: none !important;
}

/* ── Bouton envoyer ─── */
.send-button,
.btn-send,
.message-send-btn {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    box-shadow: var(--vd-glow) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.15s !important;
}
.send-button:hover,
.btn-send:hover {
    transform: scale(1.08) !important;
}
.send-button:active,
.btn-send:active {
    transform: scale(0.93) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PHASE 5 — HOTGAME / SWIPE (cartes stack)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Conteneur carte swipe ─── */
.hotgame-wrap,
.game-card-wrap {
    border-radius: var(--vd-radius-card) !important;
    overflow: hidden !important;
    box-shadow: 0 16px 56px rgba(0,0,0,0.55) !important;
}

/* ── Bouton Like / Dislike ─── */
.game-btn-like,
.hotgame-btn-like,
.btn-swipe-like {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: var(--vd-glow) !important;
    color: #fff !important;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.game-btn-like:hover,
.hotgame-btn-like:hover {
    transform: scale(1.12) !important;
}

.game-btn-dislike,
.hotgame-btn-dislike,
.btn-swipe-dislike {
    border: 2px solid rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important;
    transition: transform 0.15s ease !important;
}
.game-btn-dislike:hover,
.hotgame-btn-dislike:hover {
    transform: scale(1.08) !important;
    background: rgba(253,80,104,0.12) !important;
    border-color: rgba(253,80,104,0.5) !important;
}

/* ── Badge "MATCH" ─── */
.match-badge,
.hotgame-match-label,
.game-match-overlay {
    background: var(--vd-gradient) !important;
    border-radius: 14px !important;
    color: #fff !important;
    font-family: var(--vd-font) !important;
    font-weight: 900 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    padding: 10px 24px !important;
    box-shadow: var(--vd-glow-lg) !important;
    animation: vd-match-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

@keyframes vd-match-pop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}


/* ═══════════════════════════════════════════════════════════════════
   MICRO-INTERACTIONS & ANIMATIONS GLOBALES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Skeleton loader shimmer ─── */
.skeleton,
.loading-skeleton,
.placeholder-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0.04) 0%,
        rgba(255,255,255,0.10) 50%,
        rgba(255,255,255,0.04) 100%
    ) !important;
    background-size: 200% 100% !important;
    animation: vd-shimmer 1.6s infinite !important;
    border-radius: 8px !important;
}

@keyframes vd-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Notification toast entrée ─── */
.toast-notification,
.notification-popup,
.alert-toast {
    animation: vd-slide-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes vd-slide-in {
    0%   { transform: translateY(-16px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* ── Pulse subtil sur le bouton principal si inactif 10s ─── */
@keyframes vd-cta-pulse {
    0%, 90%, 100% { box-shadow: var(--vd-glow); }
    95%            { box-shadow: var(--vd-glow-lg); }
}

/* ── Réduire les animations si accessibilité activée ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   POLICES & TITRES — COHÉRENCE
   ═══════════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--vd-font) !important;
}

/* ── Badge "Vérifié" ─── */
.verified-badge,
.badge-verified {
    background: var(--vd-gradient) !important;
    border-radius: var(--vd-radius-pill) !important;
}

/* ── Liens primaires ─── */
a.primary-link,
a.link-primary,
.text-primary-color {
    color: var(--vd-primary) !important;
}

/* ── Scrollbar — fil rose ─── */
::-webkit-scrollbar-thumb {
    background: rgba(253, 80, 104, 0.35) !important;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(253, 80, 104, 0.60) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE D'INSCRIPTION — réduction friction
   ═══════════════════════════════════════════════════════════════════ */

/* ── Barre de progression inscription ─── */
.signup-progress,
.progress-signup,
.registration-steps .progress-bar {
    background: var(--vd-gradient) !important;
    border-radius: var(--vd-radius-pill) !important;
    height: 4px !important;
}

/* ── Formulaire d'inscription — même style que login ─── */
#signup-page .rje-btn,
#signup-page button[type="submit"],
.signup-page .button.primary {
    background: var(--vd-gradient) !important;
    border-radius: var(--vd-radius-pill) !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    box-shadow: var(--vd-glow) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE FIND — corrections spécifiques
   ═══════════════════════════════════════════════════════════════════ */

/* ── Supprimer la zone vide sous "Rechercher" ─── */
.page-title-content-bottom-inner {
    display: none !important;
}

/* ── Header "Rechercher" compact ─── */
.standard-page.page-title-content {
    padding: 14px 20px !important;
    margin-bottom: 0 !important;
    background: var(--common_page_background) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: none !important;
}

.page-title-content-inner {
    font-family: var(--vd-font) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: var(--text_title) !important;
}

/* ── Zone de recherche — masquée ─── */
.standard-page:has(.search-editbox-line),
.search-editbox-line {
    display: none !important;
}

/* ── Input de recherche — style premium ─── */
.search-field {
    border-radius: 14px 0 0 14px !important;
    height: 48px !important;
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    border: 1.5px solid rgba(255,255,255,0.08) !important;
    border-right: none !important;
    background: var(--input_text_backgroud) !important;
    color: var(--input_text_color) !important;
    padding: 0 16px !important;
    transition: border-color 0.2s !important;
}
.search-field:focus {
    outline: none !important;
    border-color: var(--vd-primary) !important;
}

/* ── Boutons recherche & filtres ─── */
.btn-main.red.search-submit,
.btn-main.red.search-settings {
    background: var(--vd-gradient) !important;
    border: none !important;
    height: 48px !important;
    color: #fff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
}
.btn-main.red.search-submit {
    border-radius: 0 !important;
}
.btn-main.red.search-settings {
    border-radius: 0 14px 14px 0 !important;
}
.btn-main.red:hover {
    opacity: 0.88 !important;
}

/* ═══ GRILLE CSS GRID — remplace le flex de main.css ══════════════ */

/* Réinitialise le flex hérité sur chaque item */
.cardview .cardview-item {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 1px !important;
}

/* Grille par défaut : 2 colonnes (mobile-first) */
.content-list-page .cardview,
.cardview {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tablette : 3 colonnes */
@media (min-width: 600px) {
    .content-list-page .cardview,
    .cardview {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Desktop : 3 colonnes (sidebar prend de la place) */
@media (min-width: 992px) {
    .content-list-page .cardview,
    .cardview {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 14px !important;
        padding: 16px !important;
    }
}

/* Grand écran : 4 colonnes */
@media (min-width: 1400px) {
    .content-list-page .cardview,
    .cardview {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* ── Container principal ─── */
.main-content.search-page-content {
    background: var(--common_page_background) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* ── Placeholder sans photo : fond dégradé sombre ─── */
.cardview .cardview-img-container {
    background: linear-gradient(160deg, #2d1b40 0%, #1a1a2e 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOTGAME / SWIPE — Style Tinder plein écran
   ═══════════════════════════════════════════════════════════════════ */

/* ── Carte principale : référence de positionnement ─── */
#hotgame-card.hotgame-card {
    position: relative !important;
    height: min(78vh, 620px) !important;
    border: none !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.32) !important;
    background: #1a1a2e !important;
    max-width: 480px !important;
    margin: 0 auto 16px !important;
}

/* ── Card-body : remplit la carte entière ─── */
#hotgame-card .card-body {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* ── Conteneur photo : remplit le card-body ─── */
.hotagame-container {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    right: 0 !important; bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: #1a1a2e !important;
    border-radius: 0 !important;
    overflow: hidden !important;
}

/* ── Photo plein format ─── */
.hotagame-container img#hotgame-profile-photo {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    display: block !important;
}

/* ── Gradient bas de photo ─── */
.hotagame-container::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.45) 50%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}

/* ── Overlay match (LIKE/NOPE) ─── */
.hotagame-container img.hotgame-status-image {
    position: absolute !important;
    left: 50% !important; top: 40% !important;
    transform: translate(-50%, -50%) !important;
    height: 120px !important; width: auto !important;
    z-index: 5 !important;
}

/* ── Card-header : overlay au BAS de la photo ─── */
#hotgame-card .card-header {
    position: absolute !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    top: auto !important;
    z-index: 10 !important;
    background: transparent !important;
    border: none !important;
    padding: 16px 20px 24px !important;
}

/* ── Layout flex pour la ligne boutons + nom ─── */
#hotgame-card .card-header .row,
#hotgame-card .card-header .col-12,
#hotgame-card .card-header .col-md-8 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ── Reset marges Bootstrap dans le header ─── */
#hotgame-card .card-header .d-block,
#hotgame-card .card-header .mt-2,
#hotgame-card .card-header .my-4 {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ── Nom de la personne ─── */
a#hotgame-profile-fullname,
a.hotgame-link {
    font-family: var(--vd-font) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.6) !important;
    letter-spacing: -0.3px !important;
    flex: 1 !important;
}

/* ── Bouton Like — grand cercle gradient ─── */
#hotgame-like-button.btn-hotgame-like {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    background: var(--vd-gradient) !important;
    border: 3px solid rgba(255,255,255,0.25) !important;
    color: #fff !important;
    font-size: 28px !important;
    box-shadow: 0 6px 24px rgba(253,80,104,0.55) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}

#hotgame-like-button:hover,
#hotgame-like-button:active {
    transform: scale(1.10) !important;
    background: var(--vd-gradient) !important;
    color: #fff !important;
}

/* ── Bouton Skip — cercle blanc semi-transparent VISIBLE ─── */
#hotgame-skip-button.btn-hotgame-skip {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.18) !important;
    border: 2.5px solid rgba(255,255,255,0.70) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    font-size: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    transition: transform 0.18s ease, background 0.18s !important;
}

#hotgame-skip-button:hover,
#hotgame-skip-button:active {
    background: rgba(255,255,255,0.28) !important;
    border-color: #fff !important;
    transform: scale(1.06) !important;
    color: #fff !important;
}

/* ── Bouton Profil (desktop) ─── */
.btn-hotgame-action {
    border: 2px solid rgba(255,255,255,0.25) !important;
    color: rgba(255,255,255,0.8) !important;
    background: rgba(255,255,255,0.10) !important;
    font-size: 22px !important;
    transition: background 0.18s !important;
}

/* ── Bouton filtre (engrenage) — style cercle rose ─── */
#hotgame-settings-button .extra-button.button.red,
a#settings-button.extra-button {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 16px rgba(253,80,104,0.45) !important;
    margin-top: 2px !important;
    line-height: 1 !important;
}

#hotgame-settings-button .extra-button i {
    font-size: 18px !important;
    color: #fff !important;
    line-height: 1 !important;
    float: none !important;
}

/* ── Bouton filtre : position fixe sur mobile (toujours visible) ─── */
@media (max-width: 991px) {
    /* Le parent est display:none dans vadibe-ios.css — on le réactive
       sans espace (height:0 overflow:visible) pour que le bouton fixed
       puisse s'afficher */
    .standard-page.page-title-content:has(#hotgame-settings-button) {
        display: block !important;
        height: 0 !important;
        overflow: visible !important;
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    /* Cacher le texte titre mais pas le bouton */
    .standard-page.page-title-content:has(#hotgame-settings-button) .page-title-content-inner,
    .standard-page.page-title-content:has(#hotgame-settings-button) .page-title-content-bottom-inner {
        display: none !important;
    }

    #hotgame-settings-button {
        position: fixed !important;
        top: 68px !important;
        right: 14px !important;
        z-index: 200 !important;
        width: auto !important;
        height: auto !important;
    }
}

.btn-hotgame-action:hover {
    background: rgba(255,255,255,0.12) !important;
    border-color: rgba(255,255,255,0.30) !important;
    color: var(--text_title) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TOPBAR — Barre supérieure premium
   ═══════════════════════════════════════════════════════════════════ */

/* ── Header principal ─── */
#topbar.top-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 999 !important;
    background: var(--vd-topbar-bg) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
    border-bottom: 1px solid var(--vd-topbar-border) !important;
    margin-bottom: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    box-shadow: var(--vd-topbar-shadow) !important;
}

/* ── Icônes de nav desktop (messages, notifs, amis) — cachées sur mobile par vadibe-ios.css ─── */
@media (min-width: 992px) {
    #topbar .nav-link.icon:not(.balance-icon) {
        width: 38px !important;
        height: 38px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: var(--vd-topbar-icon-bg) !important;
        transition: background 0.18s, transform 0.15s !important;
        padding: 0 !important;
        margin: 0 3px !important;
    }

    #topbar .nav-link.icon:not(.balance-icon):hover {
        background: var(--vd-topbar-icon-bg) !important;
        transform: scale(1.08) !important;
    }
}

/* ── Sur mobile : s'assurer que seul .balance-icon reste visible ─── */
@media (max-width: 991px) {
    #topbar a.nav-link.icon:not(.balance-icon) {
        display: none !important;
    }
}

/* ── Icônes couleur (exclut balance) ─── */
#topbar .icon:not(.balance-icon) i {
    font-size: 18px !important;
    color: var(--vd-topbar-icon-color) !important;
}

/* ── Badge non-lu ─── */
#topbar .nav-unread {
    width: 8px !important;
    height: 8px !important;
    background: var(--vd-primary) !important;
    border: 1.5px solid rgba(18,18,20,0.9) !important;
    top: 4px !important;
    right: 4px !important;
}

/* ── Avatar topbar ─── */
#topbar .avatar {
    width: 36px !important;
    height: 36px !important;
    border: 2px solid var(--vd-primary) !important;
    box-shadow: 0 0 0 2px rgba(253,80,104,0.25) !important;
}

/* ── Nom utilisateur topbar ─── */
#topbar .profile-menu-nav-link .text-default {
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.90) !important;
}

#topbar .profile-menu-nav-link small.text-muted {
    font-family: var(--vd-font) !important;
    color: rgba(255,255,255,0.45) !important;
    font-size: 11px !important;
}

/* ── Dropdown menu ─── */
#topbar .dropdown-menu {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.40) !important;
    overflow: hidden !important;
    animation: vd-slide-in 0.2s ease !important;
}

#topbar .dropdown-item {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 10px 16px !important;
    transition: background 0.15s !important;
}


/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION — Style moderne
   ═══════════════════════════════════════════════════════════════════ */

/* ── Container sidebar ─── */
.sidebar-container {
    border-radius: var(--vd-radius-card) !important;
    overflow: hidden !important;
}

/* ── Avatar profil en haut ─── */
.item-li-main img.profile-photo-avatar {
    width: 46px !important;
    height: 46px !important;
    border: 2.5px solid var(--vd-primary) !important;
    box-shadow: 0 0 0 3px rgba(253,80,104,0.20) !important;
    transition: box-shadow 0.2s !important;
}

.item-li-main img.profile-photo-avatar:hover {
    box-shadow: 0 0 0 4px rgba(253,80,104,0.35) !important;
}

/* ── Nom & @username ─── */
.item-li-main .item-title {
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

.item-li-main .item-sub-title {
    font-family: var(--vd-font) !important;
    font-size: 12px !important;
    color: var(--text_sub_title) !important;
}

/* ── Bouton settings ─── */
a.main-menu-action-button {
    width: 34px !important;
    height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.06) !important;
    transition: background 0.18s !important;
}

a.main-menu-action-button:hover {
    background: rgba(253,80,104,0.15) !important;
    color: var(--vd-primary) !important;
}

/* ── Liens de navigation — flex reset (exclut item-li-main) ─── */
.main-menu .item-li:not(.item-li-main) a.custom-item-link {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
    transition: background 0.15s, color 0.15s !important;
    padding: 9px 12px !important;
    margin: 1px 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.main-menu .item-li:not(.item-li-main) a.custom-item-link:hover {
    background: rgba(253,80,104,0.08) !important;
    color: var(--vd-primary) !important;
}

/* ── Reset float + marge négative sur l'icône (hors item-li-main) ─── */
.main-menu .item-li:not(.item-li-main) .item-icon {
    float: none !important;
    margin: 0 !important;
    order: 1 !important;
    min-width: 22px !important;
    width: 22px !important;
    height: auto !important;
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 17px !important;
}

/* Reset float interne */
.main-menu .item-li:not(.item-li-main) .item-icon i.icon {
    float: none !important;
    display: block !important;
    line-height: 1 !important;
}

/* ── Titre ─── */
.main-menu .item-li:not(.item-li-main) .item-title {
    display: block !important;
    margin-left: 0 !important;
    flex: 1 !important;
    order: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* ── Badge compteur — à droite ─── */
.main-menu .item-li:not(.item-li-main) .item-counter {
    float: none !important;
    order: 3 !important;
    margin-left: auto !important;
}

/* ── Item actif ─── */
.main-menu .item-li:not(.item-li-main).item-selected a.custom-item-link {
    background: rgba(253,80,104,0.12) !important;
    color: var(--vd-primary) !important;
    font-weight: 700 !important;
}

.main-menu .item-li.item-selected .item-title,
.main-menu .item-li:not(.item-li-main).item-selected .item-icon {
    color: var(--vd-primary) !important;
}

/* ── Préserver le layout absolu de l'avatar profil (item-li-main) ─── */
.main-menu .item-li-main {
    height: 56px !important;
}

.main-menu .item-li-main a.custom-item-link {
    display: block !important;
    position: relative !important;
    height: 56px !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.main-menu .item-li-main .item-icon {
    position: absolute !important;
    top: 8px !important;
    left: 4px !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    float: none !important;
}

/* Espace entre l'avatar et le texte */
.main-menu .item-li-main .link-container {
    padding-left: 54px !important;
    padding-top: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR SPOTLIGHT — Photos "Mise en avant" en cercles
   ═══════════════════════════════════════════════════════════════════ */

/* Reset le grid forcé par notre CSS cards — spotlight = flex row */
.item-list.spotlight .cardview,
.item-list.spotlight .cardview-container {
    display: flex !important;
    flex-wrap: wrap !important;
    grid-template-columns: unset !important;
    gap: 6px !important;
    padding: 4px !important;
    justify-content: flex-start !important;
}

/* Taille fixe des items — 68px × 68px */
.item-list.spotlight .cardview-item {
    width: 68px !important;
    max-width: 68px !important;
    min-width: 68px !important;
    flex: none !important;
    margin: 0 !important;
}

/* Card-body carré et circulaire */
.item-list.spotlight .cardview-item .card-body {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Container image — carré (pas portrait 140%) */
.item-list.spotlight .cardview-img-container {
    padding-top: 0 !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: var(--common_page_background) !important;
}

/* Image background */
.item-list.spotlight span.cardview-img {
    border-radius: 50% !important;
}

/* Cacher le footer texte dans les cards spotlight sidebar */
.item-list.spotlight .cardview-item-footer {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MATCHES & LIKES — cartes utilisateurs
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stream / galerie items ─── */
.cardview.items-view {
    gap: 10px !important;
    padding: 12px !important;
}

/* ── Topbar (barre haute) — backdrop blur ─── */
.top-header {
    -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
    backdrop-filter: saturate(180%) blur(20px) !important;
}

/* ── "Plus" bouton chargement ─── */
.button.more.loading-button {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: var(--vd-radius-pill) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: var(--vd-font) !important;
    padding: 14px 48px !important;
    box-shadow: var(--vd-glow) !important;
    display: block !important;
    margin: 20px auto !important;
    font-size: 15px !important;
    letter-spacing: 0.2px !important;
    transition: transform 0.15s, box-shadow 0.18s !important;
}

.button.more.loading-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--vd-glow-lg) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MESSAGES — liste des conversations (structure réelle)
   Structure : li.card-item > .card-body > span.card-header
                 > img.card-icon + .card-content
                   > .card-title + .card-date + .card-status-text
                     + .card-counter + .card-action > a.card-act
   ═══════════════════════════════════════════════════════════════════ */

/* ── Conteneur liste ─── */
ul.cards-list.content-list {
    padding: 6px 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

/* ── Item de conversation ─── */
li.card-item.classic-item.chat-item {
    border-bottom: none !important;
    border-radius: 14px !important;
    margin: 2px 8px !important;
    padding: 0 !important;
    transition: background 0.15s !important;
    background: transparent !important;
}

li.card-item.classic-item.chat-item:hover {
    background: rgba(255,255,255,0.05) !important;
    border-radius: 14px !important;
}

/* ── .card-body (wrapper interne) ─── */
li.card-item.classic-item.chat-item .card-body {
    padding: 10px 12px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* ── span.card-header = ligne avatar + contenu ─── */
li.card-item.classic-item.chat-item span.card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
}

/* ── Avatar image ─── */
li.card-item.classic-item.chat-item img.card-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(253,80,104,0.30) !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
}

/* ── Point "en ligne" ─── */
li.card-item.classic-item.chat-item .card-online-icon {
    position: absolute !important;
    left: 43px !important;
    top: 38px !important;
    width: 13px !important;
    height: 13px !important;
    background: #00E676 !important;
    border: 2.5px solid var(--common_page_background, #1a1a1e) !important;
    border-radius: 50% !important;
    animation: vd-online-pulse 2.5s ease infinite !important;
    z-index: 2 !important;
}

/* ── Contenu texte — flex colonne ─── */
li.card-item.classic-item.chat-item .card-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

/* ── Nom ─── */
li.card-item.classic-item.chat-item .card-title {
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: var(--text_title) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

li.card-item.classic-item.chat-item .card-title a {
    color: var(--text_title) !important;
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* ── Badge vérifié ─── */
li.card-item.classic-item.chat-item .verified {
    color: #3B82F6 !important;
    font-size: 13px !important;
    margin-left: 3px !important;
}

/* ── Heure ─── */
li.card-item.classic-item.chat-item .card-date {
    font-family: var(--vd-font) !important;
    font-size: 11px !important;
    color: var(--text_sub_title) !important;
    white-space: nowrap !important;
}

/* ── Aperçu message ─── */
li.card-item.classic-item.chat-item .card-status-text {
    font-family: var(--vd-font) !important;
    font-size: 13px !important;
    color: var(--text_sub_title) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

/* ── Badge non-lus ─── */
li.card-item.classic-item.chat-item .card-counter.red {
    background: var(--vd-gradient) !important;
    border-radius: 20px !important;
    color: #fff !important;
    font-family: var(--vd-font) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    min-width: 20px !important;
    height: 20px !important;
    padding: 0 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(253,80,104,0.40) !important;
    position: absolute !important;
    right: 0 !important;
    top: 8px !important;
}

/* ── Actions (Supprimer / Aller à la conversation) ─── */
li.card-item.classic-item.chat-item .card-action {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
    flex-wrap: wrap !important;
}

li.card-item.classic-item.chat-item a.card-act {
    font-family: var(--vd-font) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 5px 14px !important;
    border-radius: var(--vd-radius-pill) !important;
    text-decoration: none !important;
    transition: opacity 0.15s, transform 0.12s !important;
    display: inline-block !important;
}

li.card-item.classic-item.chat-item a.card-act.active {
    background: var(--vd-gradient) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(253,80,104,0.35) !important;
}

li.card-item.classic-item.chat-item a.card-act.active:hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
}

li.card-item.classic-item.chat-item a.card-act.negative {
    background: rgba(255,255,255,0.07) !important;
    color: var(--text_sub_title) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
}

li.card-item.classic-item.chat-item a.card-act.negative:hover {
    background: rgba(255,50,50,0.12) !important;
    color: #ff6b6b !important;
    border-color: rgba(255,50,50,0.25) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   TOPBAR — identité Vadibe (logo + crédits)
   ═══════════════════════════════════════════════════════════════════ */

/* Logo */
.top-header .logo img.header-brand-img {
    filter: none !important;
    max-height: 32px !important;
}

/* Compteur crédits en haut à droite — gradient pill */
.top-header .balance-block,
.top-header .balance-pill,
.top-header [class*="credit"] {
    background: var(--vd-gradient) !important;
    border-radius: var(--vd-radius-pill) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-family: var(--vd-font) !important;
    padding: 3px 12px !important;
    font-size: 13px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOTGAME — Bouton filtre + popup
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fix position: relative manquant — le bouton absolu se positionne correctement ─── */
.standard-page.page-title-content {
    position: relative !important;
}

/* ── Bouton filtre — gradient + cercle visible ─── */
#hotgame-settings-button .extra-button {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: var(--vd-glow) !important;
    margin-top: 4px !important;
}

#hotgame-settings-button .extra-button i {
    font-size: 18px !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* ── Popup filtre — padding + titre "Filtres" ─── */
#hotgame-settings-button .dropdown__content {
    padding: 16px !important;
    max-height: calc(100vh - 140px) !important;
    overflow-y: auto !important;
}

#hotgame-settings-button .encounters-filter::before {
    content: 'Filtres';
    display: block !important;
    font-family: var(--vd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
    border-bottom: 1px solid rgba(0,0,0,0.08) !important;
}

/* ── Dropdown menu — toujours vers le BAS, jamais flip/dropup ─── */
#hotgame-settings-button .dropdown-menu,
#hotgame-settings-button .dropdown-menu.show {
    top: 100% !important;
    bottom: auto !important;
    transform: none !important;
    margin-top: 6px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18) !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* ── Mobile : dropdown pleine largeur, ancré à droite de l'écran ─── */
@media (max-width: 991px) {
    #hotgame-settings-button .dropdown-menu,
    #hotgame-settings-button .dropdown-menu.show {
        position: fixed !important;
        top: 120px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        max-height: calc(100svh - 200px) !important;
        border-radius: 20px !important;
        z-index: 1050 !important;
    }

    #hotgame-settings-button .dropdown__content {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ── Bouton Appliquer ─── */
#apply-button.button.primary {
    background: var(--vd-gradient) !important;
    border: none !important;
    border-radius: var(--vd-radius-pill) !important;
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
}

/* ── Bouton Annuler ─── */
#close-button.button.secondary {
    border-radius: var(--vd-radius-pill) !important;
    font-family: var(--vd-font) !important;
    font-weight: 600 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOPBAR — BALANCE CRÉDITS (affichage temps réel)
   ═══════════════════════════════════════════════════════════════════ */

#topbar a.nav-link.balance-icon {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: var(--vd-gradient) !important;
    border-radius: var(--vd-radius-pill) !important;
    padding: 6px 14px 6px 10px !important;
    height: auto !important;
    min-height: 34px !important;
    width: auto !important;
    margin: 0 4px !important;
    box-shadow: 0 2px 10px rgba(253,80,104,0.35) !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

#topbar a.nav-link.balance-icon:hover {
    transform: scale(1.05) !important;
    box-shadow: var(--vd-glow) !important;
    background: var(--vd-gradient) !important;
    text-decoration: none !important;
}

#topbar a.nav-link.balance-icon i {
    font-size: 16px !important;
    color: #fff !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

#topbar a.nav-link.balance-icon .user-balance,
#topbar-balance {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #fff !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

/* Animation flash quand le solde change */
@keyframes vd-balance-flash {
    0%   { transform: scale(1.15); box-shadow: 0 0 0 4px rgba(253,80,104,0.45); }
    100% { transform: scale(1);    box-shadow: 0 2px 10px rgba(253,80,104,0.35); }
}

#topbar a.nav-link.balance-icon.balance-updated {
    animation: vd-balance-flash 0.5s cubic-bezier(0.34,1.56,0.64,1) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV — Améliorations premium
   ═══════════════════════════════════════════════════════════════════ */

.bottomnav-tab a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    text-decoration: none !important;
    padding: 6px 0 !important;
    gap: 3px !important;
    position: relative !important;
}

.bottomnav-icon {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 32px !important;
    border-radius: 16px !important;
    transition: background 0.2s, transform 0.15s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.bottomnav-tab a i {
    font-size: 22px !important;
    color: var(--ios-text-secondary) !important;
    transition: color 0.15s, transform 0.15s !important;
    line-height: 1 !important;
}

.bottomnav-label {
    font-family: var(--vd-font) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--ios-text-secondary) !important;
    letter-spacing: 0.1px !important;
    transition: color 0.15s !important;
}

/* État actif */
.bottomnav-tab.active .bottomnav-icon {
    background: rgba(253,80,104,0.12) !important;
    transform: scale(1.05) !important;
}

.bottomnav-tab.active a i {
    color: var(--vd-primary) !important;
}

.bottomnav-tab.active .bottomnav-label {
    color: var(--vd-primary) !important;
    font-weight: 700 !important;
}

/* Bouton Swipe central — sélecteur spécifique pour battre ios.css */
#vadibe-bottomnav .bottomnav-swipe-btn {
    position: relative !important;
    top: 0 !important;             /* neutralise le top:-6px de ios.css */
    margin: 0 !important;
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    background: var(--vd-gradient) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 18px rgba(253,80,104,0.55) !important;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.18s !important;
    flex-shrink: 0 !important;
}

/* Empêche tout débordement au-dessus de la nav */
#vadibe-bottomnav {
    overflow: hidden !important;
}

#vadibe-bottomnav .bottomnav-swipe-btn i {
    font-size: 26px !important;
    color: #fff !important;
    line-height: 1 !important;
}

/* Pas de label Swipe — supprimé du PHP, masqué en CSS aussi */
.bottomnav-swipe-label {
    display: none !important;
}

#vadibe-bottomnav .bottomnav-tab.bottomnav-swipe > a {
    padding: 4px 0 !important;
    justify-content: center !important;
    gap: 0 !important;
}

#vadibe-bottomnav .bottomnav-tab.bottomnav-swipe.active .bottomnav-swipe-btn,
#vadibe-bottomnav .bottomnav-tab.bottomnav-swipe > a:active .bottomnav-swipe-btn {
    transform: scale(1.06) !important;
    box-shadow: var(--vd-glow-lg) !important;
}

/* Badge bottomnav */
.bottomnav-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 9px !important;
    max-width: 9px !important;
    padding: 0 !important;
    background: var(--vd-primary) !important;
    border: 2px solid var(--vd-bottomnav-bg) !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* ── Bottomnav — fond et texte theme-aware ─── */
#vadibe-bottomnav {
    background: var(--vd-bottomnav-bg) !important;
    border-top: 1px solid var(--vd-bottomnav-border) !important;
}

.bottomnav-tab > a {
    color: var(--vd-nav-text-inactive) !important;
}

.bottomnav-tab.active > a {
    color: var(--vd-primary) !important;
}

.bottomnav-label {
    color: inherit !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE NOTIFICATIONS — Premium list items
   ═══════════════════════════════════════════════════════════════════ */

/* Item notif */
.notification-item,
.notify-item,
.card-item.notification {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    margin: 2px 8px !important;
    border: none !important;
    transition: background 0.15s !important;
}

.notification-item:hover,
.notify-item:hover {
    background: rgba(255,255,255,0.05) !important;
}

/* Avatar notif */
.notification-item .card-icon,
.notify-item .card-icon {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 2px solid rgba(253,80,104,0.25) !important;
}

/* Texte notif */
.notification-item .card-title,
.notify-item .notify-text {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.notification-item .card-status-text,
.notify-item .notify-time {
    font-family: var(--vd-font) !important;
    font-size: 12px !important;
    color: var(--text_sub_title) !important;
    margin-top: 2px !important;
}

/* Icône d'action notif */
.notification-item .notify-icon,
.notify-item .notify-type-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(253,80,104,0.15) !important;
    color: var(--vd-primary) !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
}

/* Item "non lu" — léger fond rose */
.notification-item.unread,
.notify-item.unread {
    background: rgba(253,80,104,0.06) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE UPGRADES / PREMIUM — Cartes abonnement
   ═══════════════════════════════════════════════════════════════════ */

/* Conteneur des options */
.upgrade-items,
.package-list,
.credits-pack-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 16px !important;
}

/* Carte upgrade */
.upgrade-item,
.package-item,
.credits-pack-item {
    border-radius: 18px !important;
    border: 1.5px solid rgba(255,255,255,0.10) !important;
    background: rgba(255,255,255,0.05) !important;
    padding: 16px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    transition: border-color 0.2s, background 0.2s, transform 0.15s !important;
    cursor: pointer !important;
}

.upgrade-item:hover,
.package-item:hover {
    border-color: rgba(253,80,104,0.45) !important;
    background: rgba(253,80,104,0.06) !important;
    transform: translateY(-1px) !important;
}

/* Titre + description */
.upgrade-item-title,
.package-name {
    font-family: var(--vd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.upgrade-item-desc,
.package-desc {
    font-family: var(--vd-font) !important;
    font-size: 13px !important;
    color: var(--text_sub_title) !important;
    margin-top: 2px !important;
}

/* Badge "POPULAIRE" */
.upgrade-item .badge-popular,
.badge-best-value {
    background: var(--vd-gradient) !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 3px 10px !important;
    border-radius: var(--vd-radius-pill) !important;
}

/* Prix */
.upgrade-item-price,
.package-price {
    font-family: var(--vd-font) !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: var(--vd-primary) !important;
    white-space: nowrap !important;
}

/* Carte feature (ghost mode, badge vérifié etc.) */
.feature-card,
.upgrade-feature-item {
    border-radius: 18px !important;
    border: 1.5px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.04) !important;
    padding: 20px !important;
    margin-bottom: 10px !important;
}

.feature-card:hover,
.upgrade-feature-item:hover {
    border-color: rgba(253,80,104,0.30) !important;
}

/* Icône feature */
.feature-icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px !important;
    background: rgba(253,80,104,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    color: var(--vd-primary) !important;
    margin-bottom: 12px !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE CHAT — Interface conversation premium
   ═══════════════════════════════════════════════════════════════════ */

/* Header conversation */
.chat-page .card-header,
.page-messages .card-header {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

/* Titre conversation */
.chat-page .card-header .card-title,
.page-messages .card-header h3 {
    font-family: var(--vd-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Messages container */
.chat-page ul.content-list,
.page-messages ul.content-list {
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Items messages */
.message-item {
    list-style: none !important;
    display: flex !important;
    align-items: flex-end !important;
    gap: 8px !important;
    max-width: 100% !important;
}

/* Avatar expediteur */
.message-item .message-avatar {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 1.5px solid rgba(253,80,104,0.25) !important;
}

/* Bulle message entrant */
.message-item .message-text,
.dialog-message .message-text {
    border-radius: 18px 18px 18px 4px !important;
    padding: 10px 14px !important;
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 75% !important;
    word-break: break-word !important;
    background: var(--ios-bg-elevated, #38383F) !important;
    color: var(--ios-text-primary, #fff) !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2) !important;
}

/* Bulle sortante */
.dialog-message.out .message-text {
    border-radius: 18px 18px 4px 18px !important;
    background: var(--vd-gradient) !important;
    color: #fff !important;
    box-shadow: 0 2px 12px rgba(253,80,104,0.30) !important;
    margin-left: auto !important;
}

/* Heure message */
.message-item .message-time,
.dialog-message .message-time {
    font-family: var(--vd-font) !important;
    font-size: 10px !important;
    color: var(--text_sub_title) !important;
    margin-top: 3px !important;
    text-align: right !important;
}

/* Zone de saisie */
.chat-page .form-group,
.message-form {
    padding: 8px 12px !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Input message */
.chat-page input[name="message_text"],
textarea[name="message_text"],
.message-textarea {
    border-radius: 22px !important;
    border: 1.5px solid rgba(255,255,255,0.10) !important;
    padding: 10px 16px !important;
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    resize: none !important;
    transition: border-color 0.2s !important;
    flex: 1 !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--text_title) !important;
}

.chat-page input[name="message_text"]:focus,
textarea[name="message_text"]:focus {
    outline: none !important;
    border-color: var(--vd-primary) !important;
    box-shadow: 0 0 0 3px rgba(253,80,104,0.12) !important;
}

/* Bouton envoi */
.chat-page .send-button,
.btn-send-message {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: var(--vd-gradient) !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    font-size: 17px !important;
    flex-shrink: 0 !important;
    box-shadow: var(--vd-glow) !important;
    cursor: pointer !important;
    transition: transform 0.15s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.chat-page .send-button:hover,
.btn-send-message:hover {
    transform: scale(1.10) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   ÉTATS VIDES — Empty states premium
   ═══════════════════════════════════════════════════════════════════ */

.warning-container,
.empty-list-banner,
.no-content-banner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 24px !important;
    text-align: center !important;
    border-radius: 20px !important;
    margin: 16px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1.5px dashed rgba(255,255,255,0.10) !important;
}

.warning-container b,
.empty-list-banner b,
.no-content-banner b {
    font-family: var(--vd-font) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text_title) !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.warning-container p,
.empty-list-banner p,
.no-content-banner p {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    color: var(--text_sub_title) !important;
    line-height: 1.5 !important;
}

/* Icône état vide */
.empty-icon {
    font-size: 48px !important;
    opacity: 0.35 !important;
    margin-bottom: 16px !important;
    display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MODALES — Style premium
   ═══════════════════════════════════════════════════════════════════ */

.modal-content {
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
    overflow: hidden !important;
}

.modal-header {
    padding: 18px 20px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}

.modal-title {
    font-family: var(--vd-font) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
}

.modal-body {
    padding: 16px 20px !important;
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.modal-footer {
    padding: 14px 20px !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    gap: 8px !important;
}

.modal-footer .button {
    border-radius: var(--vd-radius-pill) !important;
    padding: 10px 24px !important;
    font-family: var(--vd-font) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}

/* Backdrop */
.modal-backdrop.show {
    opacity: 0.65 !important;
}

/* Animation modale */
.modal.fade .modal-dialog {
    transition: transform 0.25s cubic-bezier(0.34,1.20,0.64,1), opacity 0.25s ease !important;
    transform: translateY(16px) scale(0.97) !important;
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE SETTINGS — Formulaire paramètres
   ═══════════════════════════════════════════════════════════════════ */

/* Section settings */
.settings-section,
.settings-group {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.07) !important;
    overflow: hidden !important;
    margin-bottom: 12px !important;
}

/* Ligne settings */
.settings-item,
.settings-row {
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    transition: background 0.15s !important;
}

.settings-item:last-child,
.settings-row:last-child {
    border-bottom: none !important;
}

.settings-item:hover,
.settings-row:hover {
    background: rgba(255,255,255,0.04) !important;
}

/* Labels settings */
.settings-label,
.settings-item label {
    font-family: var(--vd-font) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text_title) !important;
}

.settings-sublabel,
.settings-item .hint {
    font-family: var(--vd-font) !important;
    font-size: 12px !important;
    color: var(--text_sub_title) !important;
    margin-top: 2px !important;
}

/* Inputs settings */
.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="password"],
.settings-page select,
.settings-page textarea {
    border-radius: var(--vd-radius-input) !important;
    border: 1.5px solid rgba(255,255,255,0.10) !important;
    padding: 10px 14px !important;
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--text_title) !important;
    width: 100% !important;
    transition: border-color 0.2s !important;
}

.settings-page input:focus,
.settings-page select:focus,
.settings-page textarea:focus {
    outline: none !important;
    border-color: var(--vd-primary) !important;
    box-shadow: 0 0 0 3px rgba(253,80,104,0.12) !important;
}

/* Toggle switch settings */
.switch .sw-slider {
    border-radius: var(--vd-radius-pill) !important;
    transition: background 0.2s !important;
}

.switch input:checked + .sw-slider {
    background: var(--vd-gradient) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   PROFIL UTILISATEUR — Page profil premium
   ═══════════════════════════════════════════════════════════════════ */

/* Photo principale */
.profile-user-photo,
.profile-photo-main {
    border-radius: 20px !important;
    border: 3px solid rgba(253,80,104,0.35) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45) !important;
    overflow: hidden !important;
}

/* Avatar petit */
.profile-photo-avatar {
    border-radius: 50% !important;
    border: 2.5px solid var(--vd-primary) !important;
    box-shadow: 0 0 0 3px rgba(253,80,104,0.18) !important;
}

/* Nom sur le profil */
.profile-fullname,
h1.profile-name {
    font-family: var(--vd-font) !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: var(--text_title) !important;
    margin-bottom: 4px !important;
}

/* Ligne action (like, message, amis) */
.profile-actions,
.profile-action-buttons {
    display: flex !important;
    gap: 10px !important;
    margin: 16px 0 !important;
}

/* Boutons d'action profil */
.profile-actions .button,
.profile-action-buttons .button {
    border-radius: var(--vd-radius-pill) !important;
    font-family: var(--vd-font) !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 !important;
    justify-content: center !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
}

.profile-actions .button:hover,
.profile-action-buttons .button:hover {
    transform: translateY(-1px) !important;
}

/* Infos (âge, ville, distance) */
.profile-info-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 10px 0 !important;
}

.profile-info-chip {
    background: rgba(255,255,255,0.08) !important;
    border-radius: var(--vd-radius-pill) !important;
    padding: 5px 12px !important;
    font-family: var(--vd-font) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    color: var(--text_title) !important;
}

/* Section "À propos" */
.profile-about {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text_sub_title) !important;
    padding: 14px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   CARDS — Améliorations mobile-first
   ═══════════════════════════════════════════════════════════════════ */

/* Conteneur principal */
.card.main-content {
    border-radius: 16px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    overflow: hidden !important;
}

/* Header card */
.card-header {
    padding: 14px 16px !important;
    font-family: var(--vd-font) !important;
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

.card-header .card-title,
.card-title {
    font-family: var(--vd-font) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--text_title) !important;
}

/* On-hover action sur card */
.card-item {
    transition: background 0.15s !important;
}

.card-item:hover {
    background: rgba(255,255,255,0.04) !important;
}

/* ── Galerie photos profil ─── */
.gallery-item,
.gallery-photo-item {
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30) !important;
    transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.gallery-item:hover,
.gallery-photo-item:hover {
    transform: scale(1.02) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   STREAM — Cards premium (gallery-advanced-item)
   ═══════════════════════════════════════════════════════════════════ */

/* Grille : gap plus généreux */
.cardview.items-view {
    gap: 10px !important;
    padding: 4px 0 !important;
}

/* ── Card container ─── */
.gallery-advanced-item .item-inner {
    border-radius: 22px !important;
    box-shadow: 0 8px 28px rgba(0,0,0,0.38) !important;
}

/* ── Gradient bas — plus dramatique ─── */
.gallery-advanced-item .gallery-item-preview::after {
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.90) 0%,
        rgba(0,0,0,0.45) 35%,
        rgba(0,0,0,0.10) 58%,
        transparent 75%
    ) !important;
}

/* ── Infos utilisateur : plus d'espace en bas ─── */
.gallery-advanced-item .item-inner > .p-0 {
    padding: 10px 10px 12px !important;
}

/* ── Avatar — plus grand, glow Vadibe ─── */
.gallery-advanced-item .card-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: 2px solid rgba(253,80,104,0.85) !important;
    box-shadow: 0 0 0 1.5px rgba(253,80,104,0.35), 0 2px 8px rgba(0,0,0,0.50) !important;
}

/* ── Nom — plus grand, plus lisible ─── */
.gallery-advanced-item .card-title a {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: -0.2px !important;
    max-width: 120px !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.70) !important;
}

/* ── Username — 11px, plus visible ─── */
.gallery-advanced-item .card-username {
    font-family: var(--vd-font) !important;
    font-size: 11px !important;
    color: rgba(255,255,255,0.78) !important;
    letter-spacing: 0.1px !important;
}

/* ── Badge timestamp — police Vadibe, micro pill ─── */
.gallery-advanced-item .info-badge {
    font-family: var(--vd-font) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 4px 9px !important;
    border-radius: 12px !important;
    background: rgba(0,0,0,0.52) !important;
    letter-spacing: 0.2px !important;
    color: rgba(255,255,255,0.95) !important;
}

/* ── Bouton flag — légèrement plus visible ─── */
.gallery-advanced-item .action {
    background: rgba(0,0,0,0.38) !important;
    width: 28px !important;
    height: 28px !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ── Bouton play vidéo — remplace l'image verte par un cercle CSS ─── */
.gallery-item-preview span.video-play {
    background-image: none !important;
    background-color: rgba(255,255,255,0.18) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    border: 2px solid rgba(255,255,255,0.65) !important;
    border-radius: 50% !important;
    width: 52px !important;
    height: 52px !important;
    margin: -26px 0 0 -26px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.gallery-item-preview span.video-play::after {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 9px 0 9px 16px !important;
    border-color: transparent transparent transparent rgba(255,255,255,0.95) !important;
    margin-left: 3px !important;
}

/* ── Hover desktop ─── */
@media (min-width: 601px) {
    .gallery-advanced-item {
        transition: transform 0.20s cubic-bezier(0.34,1.30,0.64,1) !important;
    }
    .gallery-advanced-item:hover {
        transform: translateY(-4px) scale(1.01) !important;
        z-index: 2 !important;
    }
    .gallery-advanced-item:hover .item-inner {
        box-shadow: 0 16px 40px rgba(0,0,0,0.55) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PAGE-LEVEL HEADERS — Titres de section premium
   ═══════════════════════════════════════════════════════════════════ */

/* Header de section standard */
.standard-page .page-title-content-inner,
h1.page-title,
.content-title {
    font-family: var(--vd-font) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: var(--text_title) !important;
}

/* Fil d'ariane */
.breadcrumb-item {
    font-family: var(--vd-font) !important;
    font-size: 13px !important;
}

/* Onglets (tabs) */
.nav-tabs .nav-link {
    font-family: var(--vd-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 10px 10px 0 0 !important;
    transition: color 0.15s, border-color 0.15s !important;
    padding: 10px 16px !important;
}

.nav-tabs .nav-link.active {
    color: var(--vd-primary) !important;
    border-color: var(--vd-primary) !important;
    border-bottom-color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════════
   FOOTER — Compact et propre
   ═══════════════════════════════════════════════════════════════════ */

#main-footer {
    margin-top: 32px !important;
    padding: 24px 0 !important;
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}

#footer-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 16px !important;
    justify-content: center !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#footer-nav li a {
    font-family: var(--vd-font) !important;
    font-size: 13px !important;
    color: var(--text_sub_title) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

#footer-nav li a:hover {
    color: var(--vd-primary) !important;
}

#footer-copyright {
    font-family: var(--vd-font) !important;
    font-size: 12px !important;
    color: var(--text_sub_title) !important;
    opacity: 0.6 !important;
}


/* ═══════════════════════════════════════════════════════════════════
   MOBILE-FIRST — Améliorations spécifiques mobile (≤ 991px)
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 991px) {

    /* ─ Réduction marges globales sur mobile ─ */
    .wrap.content-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .main-column > .row {
        margin: 0 !important;
    }

    .col-12 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* ─ Cards plein-largeur sur mobile ─ */
    .card.main-content {
        border-radius: 0 !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* ─ Cartes profils : 2 colonnes serrées ─ */
    .content-list-page .cardview,
    .cardview {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        padding: 8px !important;
    }

    /* ─ Topbar balance — visible sur mobile (ios.css cache tous les .nav-link.icon) ─ */
    #topbar a.nav-link.balance-icon {
        display: inline-flex !important;
        padding: 5px 10px 5px 8px !important;
        margin: 0 2px !important;
    }

    #topbar a.nav-link.balance-icon .user-balance {
        font-size: 12px !important;
    }

    /* ─ Hotgame : conteneur centré verticalement ─ */
    .content-list-page:has(#hotgame-card) {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: calc(100svh - 130px) !important;
        padding: 0 8px !important;
    }

    #hotgame-card.hotgame-card {
        height: calc(100svh - 190px) !important;
        max-width: 100% !important;
        width: 100% !important;
        border-radius: 20px !important;
        margin: 0 !important;
    }

    /* ─ Layout card-header mobile : COLONNE (nom en haut, boutons en bas) ─ */
    #hotgame-card .card-header .row {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
    }

    #hotgame-card .card-header .col-12,
    #hotgame-card .card-header .col-md-8 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ─ Garder CACHÉ le col-md-4 (bouton profil) sur mobile ─ */
    #hotgame-card .card-header .col-12.d-none,
    #hotgame-card .card-header [class*="col-"].d-none {
        display: none !important;
    }

    /* ─ Div nom (2e enfant) → en premier visuellement ─ */
    #hotgame-card .card-header .col-md-8 > div.my-4,
    #hotgame-card .card-header .col-md-8 > div:nth-child(2) {
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ─ Div boutons (1er enfant) → en second, centré ─ */
    #hotgame-card .card-header .col-md-8 > div.mt-2,
    #hotgame-card .card-header .col-md-8 > div:nth-child(1) {
        order: 2 !important;
        display: flex !important;
        justify-content: center !important;
        gap: 28px !important;
        width: 100% !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
    }

    /* ─ Nom plus grand ─ */
    a#hotgame-profile-fullname,
    a.hotgame-link {
        font-size: 28px !important;
        font-weight: 900 !important;
        line-height: 1.1 !important;
        letter-spacing: -0.5px !important;
    }

    /* ─ Boutons Like/Skip agrandis et bien visibles ─ */
    #hotgame-like-button.btn-hotgame-like {
        width: 70px !important;
        height: 70px !important;
        font-size: 32px !important;
        flex-shrink: 0 !important;
    }

    #hotgame-skip-button.btn-hotgame-skip {
        width: 62px !important;
        height: 62px !important;
        font-size: 26px !important;
        flex-shrink: 0 !important;
    }

    /* ─ Padding du card-header ajusté ─ */
    #hotgame-card .card-header {
        padding: 14px 20px 22px !important;
    }

    /* ─ Messages : zone de saisie collée en bas ─ */
    .chat-page .card-body.standard-page {
        padding-bottom: 72px !important;
    }

    /* ─ Nom de profil hotgame plus grand ─ */
    a#hotgame-profile-fullname,
    a.hotgame-link {
        font-size: 26px !important;
    }

    /* ─ Header compact ─ */
    #topbar.top-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    /* ─ Sidebar masquée — plus de col marge ─ */
    .main-column > .row > .col-3 {
        display: none !important;
    }

    /* ─ Topbar icônes espacement serré ─ */
    #topbar .nav-link.icon {
        width: 34px !important;
        height: 34px !important;
        margin: 0 2px !important;
    }

    /* ─ Page header compact mobile ─ */
    .standard-page.page-title-content {
        padding: 10px 14px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   DESKTOP — Améliorations spécifiques desktop (≥ 992px)
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 992px) {

    /* ─ Sidebar : largeur fixe ─ */
    .sidebar-container {
        position: sticky !important;
        top: 70px !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
        scrollbar-width: thin !important;
    }

    /* ─ Layout principal ─ */
    .main-column > .row {
        flex-wrap: nowrap !important;
    }

    /* ─ Cards profils : 3 colonnes desktop ─ */
    .content-list-page .cardview,
    .cardview {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* ─ Chat : list conversations fixe gauche ─ */
    .chat-page .col-4 .card {
        position: sticky !important;
        top: 70px !important;
        max-height: calc(100vh - 80px) !important;
        overflow-y: auto !important;
    }

    /* ─ Hotgame : centré avec max-width ─ */
    #hotgame-card.hotgame-card {
        max-width: 440px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   PERFORMANCES — Optimisations rendering
   ═══════════════════════════════════════════════════════════════════ */

/* Accélération GPU sur éléments animés */
#hotgame-card,
.card-body,
.cardview .card-body,
#vadibe-bottomnav,
#topbar,
.modal-dialog {
    will-change: transform !important;
}

/* Optimisation images */
img {
    content-visibility: auto !important;
}

/* Lazy loading natif */
img[loading="lazy"] {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* Désactiver hover sur touch */
@media (hover: none) {
    .cardview .card-body:hover {
        transform: none !important;
        box-shadow: 0 8px 28px rgba(0,0,0,0.30) !important;
    }

    .gallery-item:hover,
    .gallery-photo-item:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   BOUTON "ACHETER DES CRÉDITS" — style premium dans topbar & pages
   ═══════════════════════════════════════════════════════════════════ */

/* Dans toutes les pages, lien vers balance */
a[href="/account/balance"],
a[href*="balance"] .balance-text {
    font-family: var(--vd-font) !important;
    font-weight: 700 !important;
}

/* Mise en avant solde bas (< 20 crédits) via CSS */
#topbar-balance:empty::before {
    content: '0';
}


/* ═══════════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS premium
   ═══════════════════════════════════════════════════════════════════ */

/* Tap feedback sur mobile */
@media (hover: none) {
    .button.primary:active,
    .rje-btn:active {
        opacity: 0.80 !important;
        transform: scale(0.96) !important;
    }

    .bottomnav-tab:active .bottomnav-icon {
        transform: scale(0.90) !important;
    }

    .bottomnav-tab.bottomnav-swipe:active .bottomnav-swipe-btn {
        transform: scale(0.92) !important;
    }
}

/* Entrée douce des listes */
.card-item.chat-item,
.notification-item,
.notify-item {
    animation: vd-fade-in 0.25s ease both !important;
}

@keyframes vd-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger sur les cartes profil */
.cardview-item:nth-child(1) { animation-delay: 0ms !important; }
.cardview-item:nth-child(2) { animation-delay: 40ms !important; }
.cardview-item:nth-child(3) { animation-delay: 80ms !important; }
.cardview-item:nth-child(4) { animation-delay: 120ms !important; }
.cardview-item:nth-child(5) { animation-delay: 160ms !important; }
.cardview-item:nth-child(6) { animation-delay: 200ms !important; }

.cardview-item {
    animation: vd-card-appear 0.3s cubic-bezier(0.34,1.10,0.64,1) both !important;
}

@keyframes vd-card-appear {
    from { opacity: 0; transform: scale(0.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Spinner de chargement Vadibe */
.loader i.icon-spin {
    color: var(--vd-primary) !important;
}


/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV — Icônes PNG
   ═══════════════════════════════════════════════════════════════════ */

/* Taille et rendu de base */
.bottomnav-png-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
    object-fit: contain !important;
    /* Inactive : filtré selon le thème */
    filter: var(--vd-icon-inactive-filter) !important;
    opacity: var(--vd-icon-inactive-opacity) !important;
    transition: filter 0.2s, opacity 0.2s !important;
}

/* Tab actif → rose Vadibe */
.bottomnav-tab.active .bottomnav-png-icon {
    filter: invert(36%) sepia(85%) saturate(700%) hue-rotate(315deg) brightness(1.05) !important;
    opacity: 1 !important;
}

/* Bouton swipe central : toujours blanc (fond dégradé) */
.bottomnav-png-swipe {
    width: 28px !important;
    height: 28px !important;
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Pas de changement de filtre sur le swipe actif */
.bottomnav-tab.active .bottomnav-png-swipe {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* ─── End vadibe-redesign.css ──────────────────────────────────── */