/*
 * fixes.css — Corrections complètes pour parité Production / Dev local
 * Corrige : Bootstrap 5 compat, grille Smart City 4 colonnes,
 *           barre de recherche centrée, catégories complètes, bouton Où
 */

/* ============================================
   1. BOOTSTRAP 5 COMPAT — classe .hidden manquante
   ============================================ */
.hidden {
    display: none !important;
}

/* ============================================
   2. HEADER — masquer les inputs parasites
   ============================================ */
input.hidden_input,
input[type="text"].hidden_input {
    display: none !important;
}

/* ============================================
   3. HERO — calque identique à www.zelift.com
   Ne PAS passer header-centralizer en flex :
   ça clippe le bouton ville (onglet « Où » / ville).
   ============================================ */

#home_zelift .header-centralizer,
#home_zelift .content-centralized,
#home_zelift .hero-search,
#home_zelift .hero-search form {
    overflow: visible !important;
}

/* Barre : fond transparent, 60% centré — le thème recharge un fond blanc après coup */
#home_zelift .hero-search {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    width: 60% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    height: auto !important;
    min-height: 78px !important;
    padding: 15px !important;
    position: relative !important;
    margin-top: 125px !important;
    margin-left: 0 !important;
}

@media (max-width: 1200px) {
    #home_zelift .hero-search {
        width: 80% !important;
        margin-top: 115px !important;
    }
}
@media (max-width: 991px) {
    #home_zelift .hero-search {
        width: 90% !important;
        margin-top: 100px !important;
    }
}

/* Slogan sous la barre de recherche */
#home_zelift #proposition {
    text-align: center !important;
    position: relative !important;
    z-index: 5 !important;
    margin-top: 18px !important;
    margin-bottom: 8px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Formulaire en table comme le thème prod (Bootstrap 5 casse display:table) */
#home_zelift .hero-search form {
    position: relative !important;
    display: table !important;
    width: 100% !important;
    height: auto !important;
    text-align: center !important;
    white-space: nowrap !important;
}

#home_zelift .hero-search form fieldset {
    position: relative !important;
    display: table-cell !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* Barre blanche : pilule, ancre la loupe à cheval sur le bord gauche */
#home_zelift #open_moteur {
    position: relative !important;
    width: 100% !important;
    margin-left: 0 !important;
    left: 0 !important;
    transform: none !important;
    height: 57px !important;
    overflow: visible !important;
    background: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
}

/* Suppression uniquement de l'ancienne icône dépréciée du thème */
#home_zelift .typingEffect:before {
    display: none !important;
    content: none !important;
}

/* Texte d'aide grisé / Placeholder d'origine dans le bloc blanc */
#home_zelift #text_typing {
    display: inline-block !important;
    visibility: visible !important;
    position: absolute !important;
    left: 58px !important;
    right: 170px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #8c8c9e !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    z-index: 4 !important;
    font-family: inherit !important;
}

/* Animation de frappe dactylographique (typing effect) */
#home_zelift .typingEffect {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 58px !important;
    right: 170px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    line-height: normal !important;
    background: transparent !important;
    color: #8c8c9e !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

#home_zelift .typed-cursor {
    display: inline-block !important;
    position: relative !important;
    top: 0 !important;
    font-size: 18px !important;
    color: #652e71 !important;
    font-weight: 300 !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
    animation: blink 0.7s infinite !important;
    z-index: 6 !important;
}

/* Cercle violet à cheval : dépasse à gauche et un peu en haut/bas */
#home_zelift .hero-search-icon.searchIcon {
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    top: 50% !important;
    transform: translate(-46%, -50%) !important;
    width: 68px !important;
    height: 68px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #652e71 !important;
    border-radius: 50% !important;
    color: #fff !important;
    z-index: 8 !important;
    pointer-events: none !important;
    box-shadow: none !important;
}

#home_zelift .hero-search-icon.searchIcon:before,
#home_zelift .hero-search-icon.searchIcon:after {
    content: none !important;
    display: none !important;
}

#home_zelift .hero-search-icon.searchIcon .hero-search-loupe {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    #home_zelift #open_moteur {
        height: 47px !important;
    }
    #home_zelift .hero-search-icon.searchIcon {
        width: 56px !important;
        height: 56px !important;
    }
    #home_zelift .hero-search-icon.searchIcon .hero-search-loupe {
        width: 22px !important;
        height: 22px !important;
    }
    #home_zelift #text_typing,
    #home_zelift .typingEffect {
        left: 45px !important;
        right: 120px !important;
        font-size: 14px !important;
    }
}

/* ========================================================
   ONGLETS ZELIFT HERO (Z-Recherche, Z-Stories, Z-Croisés)
   ======================================================== */
.hero-z-tabs-container {
    position: relative !important;
    width: 100% !important;
    padding-right: 125px !important;
    box-sizing: border-box !important;
    margin-bottom: 2px !important;
    z-index: 25 !important;
}

@media (max-width: 1024px) {
    .hero-z-tabs-container {
        padding-right: 120px !important;
    }
}

.hero-z-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    margin: 0 !important;
    padding: 2px 0 6px 0 !important;
}

.hero-z-tabs::-webkit-scrollbar {
    display: none !important;
}

.hero-z-tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 9px !important;
    height: 35px !important;
    flex-shrink: 0 !important;
    background: rgba(30, 16, 42, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22) !important;
    outline: none !important;
}

/* Helpers textes badges courts vs longs */
.badge-text-short {
    display: inline !important;
}
.badge-text-full {
    display: none !important;
}

@media (min-width: 1400px) {
    .badge-text-full {
        display: inline !important;
    }
    .badge-text-short {
        display: none !important;
    }
}

.hero-z-tab:hover {
    background: rgba(101, 46, 113, 0.92) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(101, 46, 113, 0.4) !important;
}

.hero-z-tab.active {
    background: #ffffff !important;
    color: #652e71 !important;
    border-color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(-1px) !important;
}

.hero-z-tab .z-tab-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.hero-z-tab.active .z-tab-icon {
    color: #652e71 !important;
}

.hero-z-tab .z-tab-title {
    letter-spacing: 0.2px !important;
}

/* Pastille En direct (Live pulse) */
.hero-z-tab .z-tab-badge-pulse {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    background: #e11d48 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
    animation: livePulseAnim 2s infinite !important;
}

@keyframes livePulseAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.7);
    }
    70% {
        box-shadow: 0 0 0 7px rgba(225, 29, 72, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(225, 29, 72, 0);
    }
}

/* Pastille Compteur habitués */
.hero-z-tab .z-tab-badge-count {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: rgba(101, 46, 113, 0.25) !important;
    color: #652e71 !important;
    border-radius: 999px !important;
    line-height: 1.2 !important;
}

.hero-z-tab:not(.active) .z-tab-badge-count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

/* Cercle Pastille Alarme Z en haut de Z Croisés */
/* Cercle Pastille Alarme Z en haut de Z Croisés */
.hero-z-tab#z-tab-croises {
    position: relative !important;
}

.z-alarm-dot {
    position: absolute !important;
    top: -7px !important;
    right: -6px !important;
    min-width: 17px !important;
    height: 17px !important;
    padding: 0 4px !important;
    box-sizing: border-box !important;
    background: #a855f7 !important;
    border: 1.5px solid #1a0f26 !important;
    border-radius: 999px !important;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.7), 0 0 10px rgba(236, 72, 153, 0.5) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 15 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    user-select: none !important;
}

.z-alarm-dot:not(.has-unread) {
    background: rgba(168, 85, 247, 0.8) !important;
    box-shadow: 0 0 4px rgba(168, 85, 247, 0.5) !important;
}

.z-alarm-dot.has-unread,
.z-alarm-dot.active-alert {
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    box-shadow: 0 0 10px #f43f5e, 0 0 18px rgba(236, 72, 153, 0.8) !important;
    animation: zDotAlertPulse 1.2s infinite !important;
}

.z-alarm-dot.sound-muted {
    background: #64748b !important;
    box-shadow: none !important;
    animation: none !important;
}

@keyframes zDotAlertPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.8), 0 0 8px #f43f5e;
    }
    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 5px rgba(244, 63, 94, 0), 0 0 16px #f43f5e;
    }
}

/* Vibration de l'onglet lorsqu'un Z arrive (Gen Z Electric Haptic) */
.hero-z-tab.z-vibrating {
    animation: zHapticVibrate 0.6s ease-in-out 3 !important;
    border-color: #f43f5e !important;
}

@keyframes zHapticVibrate {
    0%, 100% { transform: translateY(-1px) rotate(0deg); }
    20% { transform: translateY(-3px) rotate(-2deg); }
    40% { transform: translateY(0px) rotate(2deg); }
    60% { transform: translateY(-2px) rotate(-1deg); }
    80% { transform: translateY(-1px) rotate(1deg); }
}

/* ========================================================
   TOAST FLOTTANT ALARME Z (Concept Gen Z : Événements Live Zzzz)
   ======================================================== */
.z-alarm-toast-container {
    position: fixed !important;
    top: 24px !important;
    right: 24px !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    max-width: 400px !important;
    width: calc(100vw - 32px) !important;
}

.z-alarm-toast:not(.show) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.z-alarm-toast:not(.show) * {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.z-alarm-toast {
    pointer-events: auto !important;
    position: relative !important;
    background: rgba(22, 13, 33, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1.5px solid transparent !important;
    background-clip: padding-box !important;
    border-radius: 18px !important;
    padding: 16px 18px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.45), 0 0 25px rgba(168, 85, 247, 0.35) !important;
    color: #ffffff !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
    transform: translateY(-20px) scale(0.95);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.z-alarm-toast::before {
    content: '' !important;
    position: absolute !important;
    inset: -1.5px !important;
    border-radius: 19px !important;
    padding: 1.5px !important;
    background: linear-gradient(135deg, #a855f7, #ec4899, #06b6d4) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
}

.z-alarm-toast.show {
    transform: translateY(0) scale(1) !important;
    opacity: 1 !important;
}

.z-alarm-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.z-alarm-badge-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-alarm-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4) !important;
}

/* Onde sonore animée pour l'alarme Z */
.z-alarm-sound-wave {
    display: inline-flex !important;
    align-items: flex-end !important;
    gap: 2.5px !important;
    height: 14px !important;
}

.z-alarm-sound-wave .z-bar {
    width: 3px !important;
    background: #06b6d4 !important;
    border-radius: 3px !important;
    animation: zBarWave 0.8s ease-in-out infinite alternate !important;
}

.z-alarm-sound-wave .z-bar1 { height: 6px !important; animation-delay: 0s !important; }
.z-alarm-sound-wave .z-bar2 { height: 14px !important; animation-delay: 0.2s !important; }
.z-alarm-sound-wave .z-bar3 { height: 9px !important; animation-delay: 0.4s !important; }

@keyframes zBarWave {
    from { height: 4px; }
    to { height: 14px; }
}

.z-alarm-close {
    background: rgba(255, 255, 255, 0.15) !important;
    border: none !important;
    color: #ffffff !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.z-alarm-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

.z-alarm-body {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.z-alarm-avatar-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
}

.z-alarm-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid #ec4899 !important;
    object-fit: cover !important;
}

.z-alarm-spark {
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    font-size: 13px !important;
    background: #1e112a !important;
    border-radius: 50% !important;
    line-height: 1 !important;
}

.z-alarm-content {
    flex: 1 !important;
    min-width: 0 !important;
}

.z-alarm-title {
    margin: 0 0 3px 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
}

.z-alarm-text {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.z-alarm-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.btn-z-alarm-action {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 7px 15px !important;
    border-radius: 999px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
    transition: all 0.2s ease !important;
}

.btn-z-alarm-action:hover {
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.55) !important;
}

@media (max-width: 576px) {
    .z-alarm-toast-container {
        top: 12px !important;
        right: 16px !important;
        left: 16px !important;
        width: auto !important;
    }
}

/* Masquer le prompt application mobile sur écran Desktop */
@media (min-width: 992px) {
    #zelift-app-prompt-overlay {
        display: none !important;
    }
}

/* ========================================================
   ORGANISATION HARMONIEUSE BOUTONS BARRE & MOBILE / DESKTOP
   ======================================================== */

/* Textes Pro courts vs longs */
.pro-text-short {
    display: none !important;
}
.pro-text-full {
    display: inline !important;
}

/* Onglet ville Desktop : aligné sur la même hauteur que la barre d'onglets Z */
#home_zelift .search-cities-toggle {
    display: inline-flex !important;
    align-items: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: absolute !important;
    top: 0 !important;
    margin-top: -38px !important;
    right: 15px !important;
    width: auto !important;
    height: 38px !important;
    padding: 0 18px !important;
    background: #652e71 !important;
    color: #ffffff !important;
    border-radius: 8px 8px 0 0 !important;
    cursor: pointer !important;
    z-index: 9999 !important;
    pointer-events: auto !important;
    transform: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 -2px 10px rgba(101, 46, 113, 0.3) !important;
    transition: all 0.2s ease !important;
}

#home_zelift .search-cities-toggle:hover {
    background: #7a3689 !important;
    margin-top: -42px !important;
    height: 42px !important;
}

#home_zelift .search-cities-toggle:before {
    content: "" !important;
}

#home_zelift #chosen_city_name {
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

#home_zelift .icon_marker {
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1 !important;
    margin: 0 0 0 6px !important;
}

/* ========================================================
   SÉCURISATION ICÔNE UNIQUE DE CONNEXION / PROFIL
   (Élimine l'empilement du vieux bonhomme :before)
   ======================================================== */
#header-profile-hub button:before,
#header-profile-hub button:after,
.header-user-avatar-btn:before,
.header-user-avatar-btn:after,
#header-user-btn:before,
#header-user-btn:after,
.header-profile-hub .user-login:before {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

header .login_btn_menu,
.header .login_btn_menu,
header .icon-user-minus,
.header .icon-user-minus,
#login_mobile,
.user-logged-mobile {
    display: none !important;
}

/* Logo ZeLift Desktop : toujours à sa vraie place avec sa taille élégante */
header .logo,
.header .logo {
    position: absolute !important;
    left: 20px !important;
    top: 8px !important;
    height: 48px !important;
    z-index: 100 !important;
    display: block !important;
    width: auto !important;
}

header .logo img,
.header .logo img {
    max-height: 46px !important;
    width: auto !important;
    display: block !important;
}

/* ========================================================
   VERSION MOBILE & PETITS ÉCRANS (< 768px)
   ======================================================== */
@media (max-width: 767px) {
    /* 1. Header supérieur compact */
    header,
    .header {
        height: 52px !important;
        position: relative !important;
    }

    /* Le logo ZeLift Mobile : sanctuarisé à gauche, visible à 100% */
    header .logo,
    .header .logo {
        position: absolute !important;
        left: 10px !important;
        top: 10px !important;
        height: 32px !important;
        width: 100px !important;
        max-width: 100px !important;
        z-index: 100 !important;
        display: block !important;
    }

    header .logo img,
    .header .logo img {
        max-height: 32px !important;
        height: 32px !important;
        width: auto !important;
        max-width: 100px !important;
        object-fit: contain !important;
    }

    /* Boutons utilisateur mobiles : ruban tactile swipeable avec le doigt */
    header .user-buttons,
    .header .user-buttons {
        position: absolute !important;
        right: 8px !important;
        top: 7px !important;
        height: 38px !important;
        max-width: calc(100% - 95px) !important;
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        overflow: visible !important;
        z-index: 9999 !important;
        padding-left: 4px !important;
    }

    header .user-buttons::-webkit-scrollbar,
    .header .user-buttons::-webkit-scrollbar {
        display: none !important;
    }

    #nav-bar-user-buttons .dropdown-devenir-pro {
        height: 28px !important;
        line-height: 28px !important;
        padding: 0 9px !important;
        font-size: 11.5px !important;
        flex-shrink: 0 !important;
    }

    .header-lang-picker,
    .header-country-picker,
    .header-profile-hub {
        flex-shrink: 0 !important;
    }

    .pro-text-full {
        display: none !important;
    }
    .pro-text-short {
        display: inline !important;
        font-weight: 700 !important;
    }

    /* 2. Barre d'onglets Hero ZELIFT : Ruban tactile horizontal fluide (scroll) */
    .hero-z-tabs-container {
        width: 100% !important;
        padding-right: 0 !important;
        margin-bottom: 48px !important; /* Espace réservé pour que l'onglet ville respire en dessous sans chevauchement ! */
    }

    .hero-z-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        justify-content: flex-start !important;
        padding: 4px 6px !important;
        gap: 6px !important;
    }

    .hero-z-tab {
        flex-shrink: 0 !important;
        height: 32px !important;
        padding: 5px 12px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
    }

    .hero-z-tab .z-tab-badge-count,
    .hero-z-tab .z-tab-badge-pulse {
        display: none !important;
    }

    /* 3. Onglet Ville Dijon 📍 posé au-dessus de la barre de recherche à droite */
    #home_zelift .search-cities-toggle {
        position: absolute !important;
        top: 0 !important;
        margin-top: -36px !important;
        right: 12px !important;
        height: 36px !important;
        padding: 0 15px !important;
        border-radius: 7px 7px 0 0 !important;
        z-index: 9999 !important;
    }

    #home_zelift .search-cities-toggle:hover {
        margin-top: -36px !important;
        height: 36px !important;
    }

    #home_zelift #chosen_city_name {
        font-size: 14px !important;
    }

    #home_zelift .icon_marker {
        font-size: 15px !important;
    }

    /* 4. Barre de recherche blanche compacte et responsive */
    #home_zelift #open_moteur {
        height: 48px !important;
    }

    #home_zelift .hero-search-icon.searchIcon {
        width: 52px !important;
        height: 52px !important;
    }

    #home_zelift .hero-search-icon.searchIcon .hero-search-loupe {
        width: 20px !important;
        height: 20px !important;
    }

    #home_zelift #text_typing,
    #home_zelift .typingEffect {
        left: 42px !important;
        right: 20px !important;
        font-size: 13px !important;
    }
}


/* ============================================
   4. CATÉGORIES — centrées, afficher toutes les 16
   ============================================ */
#home_zelift .hero-header {
    height: auto !important;
    min-height: calc(100vh - 10px) !important;
    padding-bottom: 30px !important;
}

#home_zelift .search-categories {
    width: 85% !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    padding: 10px 15px !important;
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    overflow: visible !important;
    font-size: 0 !important;
    max-height: none !important;
    color: #fff !important;
    z-index: 4 !important;
}

#home_zelift .search-categories .categories {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 8px 15px !important;
    overflow: visible !important;
}

#home_zelift .search-categories .categories a {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-decoration: none !important;
    font-size: 11px !important;
    color: #fff !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    min-width: 70px !important;
}

#home_zelift .search-categories .categories a.link-model-adultes:before,
.search-categories .categories a.link-model-adultes:before {
    content: none !important;
    display: none !important;
}

#home_zelift .search-categories .categories a.link-model-adultes .vignette-adultes-icon,
.search-categories .categories a.link-model-adultes .vignette-adultes-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    margin-bottom: 6px !important;
    border: 1.5px solid #e11d48 !important;
    box-shadow: 0 0 10px rgba(225, 29, 72, 0.5) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #000 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

#home_zelift .search-categories .categories a.link-model-adultes:hover .vignette-adultes-icon,
.search-categories .categories a.link-model-adultes:hover .vignette-adultes-icon {
    transform: scale(1.15) !important;
    box-shadow: 0 0 16px rgba(225, 29, 72, 0.8) !important;
    border-color: #fda4af !important;
}

#home_zelift .search-categories .categories a.link-model-adultes .vignette-adultes-icon img,
.search-categories .categories a.link-model-adultes .vignette-adultes-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

/* ============================================
   5. SMART CITY — grille 4 colonnes avec images
   ============================================ */
.front-categories .cat-itens {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 15px;
}

.front-categories .cat-item {
    width: 23% !important;
    min-width: 200px;
    height: 280px;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    float: none !important;
    display: inline-block;
}

.front-categories .cat-item .cat-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-color: #333;
}

.front-categories .cat-item .cat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.20);
    z-index: 2;
}

.front-categories .cat-item .cat-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    z-index: 3;
    text-align: center;
    width: 90%;
}

.front-categories .cat-text .cat-pole {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.92);
}

#vue_choose_city .city-pole,
.city-pole {
    display: block;
    margin-top: 2px;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #9b6aad;
}

#vue_choose_city .city-pole-megapole,
.city-pole-megapole {
    color: #c9a227;
}

#vue_choose_city .city-pole-metropole,
.city-pole-metropole {
    color: #8e4aa3;
}

.front-categories .cat-item a {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.front-categories .cat-item .cat-counter {
    position: absolute;
    bottom: 8px;
    right: 12px;
    color: #fff;
    font-size: 14px;
    z-index: 3;
    background: rgba(101, 46, 113, 0.7);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.front-categories .cat-item .cat-icon {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    color: #fff;
}

/* Smart City titre */
.title-smart-city {
    text-align: center;
    padding: 40px 0 20px;
}

.title-smart-city h2 {
    color: #652e71;
    font-size: 32px;
}

/* ============================================
   6. BULLES (Urbain, Dynamique, Premium, Innovant)
   ============================================ */
.row.listing.bulles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 40px 0;
}

.row.listing.bulles .bulle {
    flex: 0 0 25%;
    max-width: 25%;
}

/* ============================================
   7. SELLZONE PILLS — masquer l'overflow dans le header
   ============================================ */
.open-cities-list .search-categories {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
    margin-top: 0;
}

.open-cities-list .search-categories.shown {
    max-height: 500px;
}

/* ============================================
   8. RESPONSIVE
   ============================================ */
@media (max-width: 992px) {
    .front-categories .cat-item {
        width: 45% !important;
    }
    
    .row.listing.bulles .bulle {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .content-centralized {
        width: 90%;
    }
}

/* Menu Professionnels — espaces et typo comme www.zelift.com */
header .dropdown-menu {
    font-family: "Roboto", sans-serif !important;
    font-size: 15px !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    min-width: 220px;
}
header .dropdown-menu > li > a {
    display: block !important;
    padding: 8px 20px !important;
    color: #404040 !important;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
    white-space: nowrap !important;
    text-decoration: none !important;
}
header .dropdown-menu > li > a:hover,
header .dropdown-menu > li > a:focus {
    color: #652e71 !important;
    background: #f5f5f5 !important;
}

/* Popup connexion / inscription — parité www.zelift.com */
.login-popup,
.login-popup .panel-form,
.login-popup .panel-login,
.login-popup .panel-heading,
.login-popup .panel-body,
.login-popup .card-header,
.login-popup .card-body,
.login-popup span,
.login-popup p,
.login-popup a,
.login-popup label,
.login-popup input,
.login-popup .form-control,
.login-popup .form-control::placeholder {
    word-spacing: normal !important;
    letter-spacing: normal !important;
}
.login-popup,
.login-popup #message_login_pro,
.login-popup #message_inscrire_societe,
.login-popup #message_login_pro span,
.login-popup #message_inscrire_societe span,
.login-popup .login-forgot-password,
.login-popup .form-control,
.login-popup .form-control::placeholder {
    font-family: Arial, Helvetica, sans-serif !important;
}
.login-popup.container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
.login-popup .toMargin0 {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    padding-top: 12vh !important;
    margin-top: 0 !important;
    height: auto !important;
}
.login-popup .panel-form.panel-login {
    width: 500px !important;
    max-width: 92vw !important;
    margin: 0 auto !important;
    top: 0 !important;
    float: none !important;
    left: auto !important;
}
.login-popup .col-xs-6,
.login-popup .col-link-login,
.login-popup .col-link-register {
    width: 50% !important;
    float: left !important;
    padding: 0 !important;
}
.login-popup .panel-heading a,
.login-popup .card-header a {
    white-space: nowrap !important;
}
.login-popup .login-social-hidden,
.login-popup .btn-facebook,
.login-popup .btn-google {
    display: none !important;
}
.login-popup .panel-form > .card-header,
.login-popup .panel-form > .panel-heading {
    color: rgb(101, 46, 113);
    background-color: #fff;
    border-color: #fff;
    text-align: center;
}
.login-popup .panel-form > .card-header a,
.login-popup .panel-form > .panel-heading a {
    font-family: "Capriola", sans-serif;
    text-decoration: none;
    color: #aaa;
    font-size: 15px;
    display: inline-block;
    height: 50px;
    line-height: 50px;
}
.login-popup .panel-form > .card-header a.active,
.login-popup .panel-form > .panel-heading a.active {
    color: rgb(101, 46, 113);
    font-size: 18px;
}
.login-popup #fos_user_registration_form::after {
    content: "";
    display: table;
    clear: both;
}
.login-popup #btn_register {
    background-color: rgb(101, 46, 113);
    color: #fff;
    text-transform: uppercase;
    border-color: rgb(101, 46, 113);
    padding: 14px 20px;
    width: auto;
    margin: 10px auto 0;
    display: inline-block;
}

@media (max-width: 576px) {
    .front-categories .cat-item {
        width: 100% !important;
    }
    
    .row.listing.bulles .bulle {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .search-categories .categories {
        gap: 5px 10px;
    }
}

/* Page Mes informations — espaces, onglets, formulaire */
.header_compte .pg-title,
.header_compte .pg-subtitle,
.header_compte .breadcrumbs,
.content_compte,
.content_compte *,
.tabs nav a,
.tabs nav a span,
.profile-form-wrap h3 {
    word-spacing: normal !important;
    letter-spacing: normal !important;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}
.header_compte .pg-title {
    font-size: 42px !important;
    font-weight: 700;
}
.header_compte .pg-subtitle {
    font-size: 20px !important;
}
.tabs {
    position: relative;
}
.tabs nav ul {
    display: inline-flex !important;
    float: none !important;
}
.tabs nav ul li {
    float: none !important;
    display: inline-block !important;
}
.tabs .logout.btn-empty,
a.logout.btn-empty {
    position: absolute;
    right: 0;
    top: 8px;
    display: inline-block !important;
    width: auto !important;
    max-width: none !important;
    padding: 6px 18px;
    border: 1px solid #652e71;
    color: #652e71;
    background: #fff;
    text-transform: none;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}
.profile-form-wrap {
    max-width: 720px;
    margin: 0 auto;
}
.profile-form-wrap .form-control,
#tabs input.form-control,
#tabs select.form-control {
    width: 100%;
    height: 43px;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
}
.profile-form-wrap .register_btn,
.profile-form-wrap .change_password_btn,
#mdp_modify {
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    word-spacing: normal !important;
}
#mdp_modify {
    display: inline-block;
    margin: 20px auto 0;
    padding: 8px 22px;
    border: 1px solid #652e71;
    color: #652e71;
    cursor: pointer;
}

.autocomplete-suggestions .autocomplete-suggestion a.firstApproximativeResult:before {
    content: "Pourraient aussi exister" !important;
}

/* Bouton select_home : placeholder propre sans dédoublement */
#help_zone button.dropdown-toggle.nothing-selected:before {
    content: "Ou découvrir les phrases les plus recherchées" !important;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-size: 14px !important;
    color: #495057 !important;
    position: static !important;
    font-weight: 500 !important;
    display: inline-block !important;
}

#help_zone button.dropdown-toggle.nothing-selected .filter-option {
    display: none !important;
}

#help_zone button.dropdown-toggle:not(.nothing-selected):before {
    content: none !important;
}

#help_zone button.dropdown-toggle:not(.nothing-selected) .filter-option {
    display: inline-block !important;
    font-weight: 600 !important;
    color: #333333 !important;
}

#contentChallenge #help_zone .nothing-selected:before {
    content: "Ou découvrir tous les filtres" !important;
}

/* Badge & Filigrane Demo Pro */
.demo_pro_badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, rgba(101, 46, 113, 0.92) 0%, rgba(142, 68, 173, 0.88) 100%) !important;
    color: #ffffff !important;
    padding: 3px 9px !important;
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    z-index: 12 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    backdrop-filter: blur(2px) !important;
    pointer-events: none !important;
    display: block !important;
}
.demo_pro_badge i {
    margin-right: 3px !important;
    color: #ffd700 !important;
}

.demo_pro_watermark {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(-25deg) !important;
    color: rgba(255, 255, 255, 0.42) !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55), 0 0 10px rgba(0, 0, 0, 0.3) !important;
    border: 2px dashed rgba(255, 255, 255, 0.42) !important;
    padding: 3px 16px !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    z-index: 11 !important;
    white-space: nowrap !important;
    user-select: none !important;
    display: block !important;
}

.badge-demo-pro {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #652e71 !important;
    padding: 2px 7px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    line-height: 1.2 !important;
}

/* Bouton Cookies : pastille ronde et discrète/transparente */
#zl-cmp-reopen {
    position: fixed !important;
    left: 14px !important;
    bottom: 14px !important;
    z-index: 2147483645 !important;
    background: rgba(80, 30, 90, 0.45) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 20px !important;
    padding: 5px 13px !important;
    font-size: 11px !important;
    font-family: 'Capriola', sans-serif !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    opacity: 0.55 !important;
    transition: all 0.25s ease !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#zl-cmp-reopen:hover {
    background: rgba(101, 46, 113, 0.85) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    opacity: 1 !important;
    box-shadow: 0 4px 12px rgba(101, 46, 113, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Fix Bootstrap 5: tab-pane, fade, and listing-item-solution-detail */
.listing-item-solution-detail.show,
.CC19 .listing-item-solution-detail.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.tab-pane.fade.in,
.tab-pane.fade.active,
.tab-pane.active {
    opacity: 1 !important;
    display: block !important;
    visibility: visible !important;
}

.tab-pane.fade:not(.active):not(.show) {
    display: none !important;
}

/* ==========================================================================
   Cassure d'angle haut gauche "Mock" (Parité Desktop & Mobile)
   ========================================================================== */
.contentImg {
    position: relative !important;
    overflow: hidden !important;
}

.detail_photos .gallery-photo .gallery-photo-content,
.gallery-photo-content {
    position: relative !important;
    overflow: hidden !important;
}

.corner-mock-ribbon {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    width: 78px !important;
    height: 78px !important;
    overflow: hidden !important;
    z-index: 25 !important;
    pointer-events: none !important;
    direction: ltr !important;
}

.corner-mock-ribbon span {
    position: absolute !important;
    display: block !important;
    width: 110px !important;
    padding: 3.5px 0 !important;
    background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%) !important;
    color: #ffffff !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    text-align: center !important;
    left: -26px !important;
    top: 17px !important;
    transform: rotate(-45deg) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* ==========================================================================
   Hub International Header (Langues & Pays séparés - Concept ZeLift)
   ========================================================================== */
/* ==========================================================================
   Header User-Buttons & International Hub Alignment
   ========================================================================== */
header .user-buttons,
.header .user-buttons {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    position: absolute !important;
    top: 0 !important;
    right: 20px !important;
    height: 65px !important;
    z-index: 5000 !important;
    float: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

header .user-buttons > *,
.header .user-buttons > * {
    float: none !important;
    position: static !important;
}

/* Hub international (Langue + Drapeau) */
.header-i18n-hub {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    order: 1 !important;
    vertical-align: middle !important;
}

/* Navbar "Professionnels" */
header #nav-bar-user-buttons,
.header #nav-bar-user-buttons {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    min-height: auto !important;
    order: 2 !important;
    box-shadow: none !important;
    position: relative !important;
}

#nav-bar-user-buttons .container,
#nav-bar-user-buttons .navbar-nav,
#nav-bar-user-buttons .navbar-nav > li {
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float: none !important;
    position: relative !important;
}

#nav-bar-user-buttons .navbar-nav {
    display: flex !important;
    align-items: center !important;
}

#nav-bar-user-buttons .dropdown-devenir-pro {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 30px !important;
    line-height: 1 !important;
    padding: 3px 10px !important;
    margin: 0 !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Suppression absolue de l'icône de localisation superposée sur le mot Professionnels */
#nav-bar-user-buttons .dropdown-devenir-pro:before,
.header #nav-bar-user-buttons .dropdown-devenir-pro:before,
.dropdown-devenir-pro.add-listing:before,
.add-listing.dropdown-devenir-pro:before,
#nav-bar-user-buttons .add-listing:before,
.header .add-listing:before {
    display: none !important;
    content: none !important;
    visibility: hidden !important;
}

#nav-bar-user-buttons .dropdown-devenir-pro:hover {
    background: #ffffff !important;
    color: #652e71 !important;
}

/* Dropdown menu "Professionnels" : positionnement absolu propre sous le bouton */
header #nav-bar-user-buttons .dropdown-menu,
.header #nav-bar-user-buttons .dropdown-menu,
#nav-bar-user-buttons .navbar-nav .dropdown-menu,
#nav-bar-user-buttons .dropdown-menu {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    float: none !important;
    margin: 0 !important;
    z-index: 10000 !important;
    min-width: 220px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important;
    padding: 8px 0 !important;
}

/* Gestion affichage hover et click */
#nav-bar-user-buttons .dropdown-menu:not(.show) {
    display: none;
}
#nav-bar-user-buttons .dropdown:hover > .dropdown-menu,
#nav-bar-user-buttons .dropdown.show > .dropdown-menu,
#nav-bar-user-buttons .dropdown.open > .dropdown-menu,
#nav-bar-user-buttons .dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#nav-bar-user-buttons .dropdown-menu > li > a {
    display: block !important;
    padding: 9px 20px !important;
    color: #333333 !important;
    font-family: "Roboto", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

#nav-bar-user-buttons .dropdown-menu > li > a:hover,
#nav-bar-user-buttons .dropdown-menu > li > a:focus {
    color: #652e71 !important;
    background: rgba(101, 46, 113, 0.08) !important;
}

[dir="rtl"] #nav-bar-user-buttons .dropdown-menu {
    right: auto !important;
    left: 0 !important;
    text-align: right !important;
}

/* Bouton connexion utilisateur */
/* Hub Profil Utilisateur & Z-Privé (Bouton Homme Header) */
.header-profile-hub {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    order: 3 !important;
    z-index: 6000 !important;
}

header .user-login,
.header .user-login,
.header-user-avatar-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    color: #652e71 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    outline: none !important;
    text-decoration: none !important;
}

.header-user-avatar-btn:hover,
header .user-login:hover {
    transform: translateY(-1px) scale(1.06) !important;
    box-shadow: 0 6px 20px rgba(101, 46, 113, 0.35) !important;
    border-color: #f59e0b !important;
}

/* ==========================================================================
   Bouton Compte Connecté Formaté dans le Menu (Desktop & Mobile)
   ========================================================================== */
header .header-user-avatar-btn.user-is-logged,
.header .header-user-avatar-btn.user-is-logged {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 30px !important;
    line-height: 1 !important;
    padding: 2px 12px 2px 5px !important;
    margin: 0 !important;
    border-radius: 15px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: none !important;
    width: auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

header .header-user-avatar-btn.user-is-logged:hover,
.header .header-user-avatar-btn.user-is-logged:hover {
    background: #ffffff !important;
    color: #652e71 !important;
    border-color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(101, 46, 113, 0.35) !important;
}

header .header-user-avatar-btn.user-is-logged .user-avatar-circle-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    position: relative !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

header .header-user-avatar-btn.user-is-logged .user-profile-svg-icon svg {
    fill: #652e71 !important;
    width: 13px !important;
    height: 13px !important;
}

header .header-user-avatar-btn.user-is-logged .zprive-pill-mini-badge {
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    width: 12px !important;
    height: 12px !important;
    font-size: 7px !important;
    border: 1px solid #ffffff !important;
    line-height: 1 !important;
}

header .header-user-avatar-btn.user-is-logged .header-user-logged-name {
    color: #ffffff !important;
    font-family: "Roboto", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    letter-spacing: 0.3px !important;
    line-height: 1 !important;
    text-transform: capitalize !important;
}

header .header-user-avatar-btn.user-is-logged:hover .header-user-logged-name {
    color: #652e71 !important;
}

header .header-user-avatar-btn.user-is-logged .header-user-caret {
    display: inline-block !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 2px !important;
    vertical-align: middle !important;
    border-top: 4px dashed #ffffff !important;
    border-top: 4px solid #ffffff \9 !important;
    border-right: 4px solid transparent !important;
    border-left: 4px solid transparent !important;
}

header .header-user-avatar-btn.user-is-logged:hover .header-user-caret {
    border-top-color: #652e71 !important;
}

/* Masquage de l'ancien élément ghost dans slide-nav */
#slide-nav .dropdown.hideMobile,
#slide-nav a.user-logged {
    display: none !important;
}

@media (max-width: 767px) {
    header .header-user-avatar-btn.user-is-logged {
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border-radius: 50% !important;
    }
    header .header-user-avatar-btn.user-is-logged .header-user-logged-name,
    header .header-user-avatar-btn.user-is-logged .header-user-caret {
        display: none !important;
    }
}

.user-profile-svg-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #652e71 !important;
}

.user-profile-svg-icon svg {
    fill: #652e71 !important;
}

.zprive-pill-mini-badge {
    position: absolute !important;
    bottom: -3px !important;
    right: -3px !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25) !important;
    line-height: 1 !important;
    pointer-events: none !important;
    z-index: 10 !important;
}

/* Dropdown Menu Header Profil & Z-Privé */
.header-profile-dropdown {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: 310px !important;
    max-width: 92vw !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(101, 46, 113, 0.12) !important;
    box-shadow: 0 16px 40px rgba(35, 10, 45, 0.22), 0 0 1px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    font-family: "Outfit", "Inter", "Segoe UI", sans-serif !important;
    display: none;
}

.header-profile-hub.show .header-profile-dropdown,
.header-profile-dropdown.show {
    display: block !important;
    animation: profileDropIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes profileDropIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.profile-dropdown-header {
    background: linear-gradient(135deg, #4a154b 0%, #652e71 100%) !important;
    color: #ffffff !important;
    padding: 16px 18px !important;
}

.profile-dropdown-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}

.profile-dropdown-email,
.profile-dropdown-sub {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.profile-badge-status {
    display: inline-block !important;
    margin-top: 6px !important;
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: rgba(16, 185, 129, 0.25) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #10b981 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

.profile-dropdown-body {
    padding: 10px 8px !important;
    background: #ffffff !important;
}

/* Item Spécial Z-Privé */
.profile-dropdown-item.item-zprive {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 14px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%) !important;
    border: 1.5px solid #d8b4fe !important;
    text-decoration: none !important;
    margin-bottom: 4px !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.profile-dropdown-item.item-zprive:hover {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%) !important;
    border-color: #a855f7 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.22) !important;
}

.zprive-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7e22ce, #652e71) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 10px rgba(101, 46, 113, 0.3) !important;
}

.profile-dropdown-item.item-zprive .item-text-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.profile-dropdown-item.item-zprive .item-title {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #4a154b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.zprive-tag-badge {
    display: none !important;
}

.profile-dropdown-item.item-zprive .item-desc {
    display: block !important;
    font-size: 11px !important;
    color: #6b21a8 !important;
    margin-top: 2px !important;
    line-height: 1.25 !important;
}

.profile-dropdown-item.item-zprive .item-chevron {
    color: #a855f7 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

/* Autres Items du Profil */
.profile-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: background 0.15s ease !important;
    cursor: pointer !important;
}

.profile-dropdown-item:hover {
    background: #f8fafc !important;
    color: #652e71 !important;
}

.profile-dropdown-item .item-icon {
    font-size: 16px !important;
    width: 22px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.profile-dropdown-item .item-text-wrap {
    flex: 1 !important;
    min-width: 0 !important;
}

.profile-dropdown-item .item-title {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
}

.profile-dropdown-item .item-desc {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
}

.profile-dropdown-divider {
    height: 1px !important;
    background: #f1f5f9 !important;
    margin: 6px 4px !important;
}

.profile-dropdown-item.item-logout {
    color: #ef4444 !important;
}

.profile-dropdown-item.item-logout:hover {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

/* Empêcher uniquement le bouton hamburger mobile d'apparaître sur desktop, mais préserver slide-nav/slidemenu */
@media (min-width: 768px) {
    header .navbar-toggle,
    .header .navbar-toggle,
    #nav-bar-user-buttons .navbar-header,
    #nav-bar-user-buttons .navbar-toggle,
    .menu-mobile,
    .dropdown-menu-mobile {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* Suppression absolue de la 2ème flèche (pseudo-élément ::after de Bootstrap) et du cadenas */
.header .dropdown-toggle::after,
header .dropdown-toggle::after,
.header-lang-picker .dropdown-toggle::after,
.header-country-picker .dropdown-toggle::after,
#nav-bar-user-buttons .dropdown-toggle::after,
.dropdown-devenir-pro::after,
.lang-btn::after,
.country-flag-btn::after {
    display: none !important;
    content: none !important;
    border: none !important;
}

.zprive-pill-mini-badge {
    display: none !important;
}

/* 1. Sélecteur de Langue */
.header-lang-picker {
    position: relative !important;
    display: inline-block !important;
}

.header-lang-picker .lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    color: #ffffff !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 30px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.header-lang-picker .lang-btn:hover,
.header-lang-picker.show .lang-btn,
.header-lang-picker:hover .lang-btn {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #ffffff !important;
}

.header-lang-picker .lang-caret,
.header-country-picker .country-caret {
    font-size: 9px !important;
    opacity: 0.85 !important;
    margin-left: 2px !important;
}

.lang-dropdown-menu {
    min-width: 140px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    right: 0 !important;
    left: auto !important;
}

.header-lang-picker:hover > .lang-dropdown-menu,
.header-country-picker:hover > .country-dropdown-menu,
.header-lang-picker.show > .lang-dropdown-menu,
.header-country-picker.show > .country-dropdown-menu,
.header-lang-picker.open > .lang-dropdown-menu,
.header-country-picker.open > .country-dropdown-menu,
.header-lang-picker .lang-dropdown-menu.show,
.header-country-picker .country-dropdown-menu.show,
.lang-dropdown-menu.show,
.country-dropdown-menu.show {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

[dir="rtl"] .lang-dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

.lang-dropdown-menu .lang-opt {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    color: #2c1a35 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
}

.lang-dropdown-menu .lang-opt:hover {
    background: rgba(107, 45, 139, 0.08) !important;
    color: #542562 !important;
}

.lang-dropdown-menu .lang-opt.active {
    background: rgba(107, 45, 139, 0.12) !important;
    color: #542562 !important;
    font-weight: 700 !important;
}

.lang-opt-code {
    font-size: 10px !important;
    color: #666666 !important;
    font-weight: 700 !important;
    padding: 2px 5px !important;
    background: rgba(0, 0, 0, 0.06) !important;
    border-radius: 4px !important;
}

.lang-opt.active .lang-opt-code {
    background: rgba(107, 45, 139, 0.2) !important;
    color: #542562 !important;
}

/* 2. Sélecteur de Pays avec Drapeau Flottant */
.header-country-picker {
    position: relative !important;
    display: inline-block !important;
}

.country-flag-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.18) !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: 12px !important;
    padding: 2px 7px !important;
    height: 30px !important;
    text-decoration: none !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.country-flag-btn:hover,
.header-country-picker.show .country-flag-btn,
.header-country-picker:hover .country-flag-btn {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.05) !important;
    color: #ffffff !important;
}

.country-flag-floating {
    display: inline-block !important;
    font-size: 19px !important;
    line-height: 1 !important;
    animation: flag-wave 2.6s ease-in-out infinite alternate !important;
    transform-origin: left center !important;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)) !important;
}

@keyframes flag-wave {
    0% { transform: rotate(0deg) translateY(0) scale(1); }
    35% { transform: rotate(-3deg) translateY(-1px) scale(1.04); }
    70% { transform: rotate(3deg) translateY(-0.5px) scale(1.02); }
    100% { transform: rotate(-1.5deg) translateY(-1.5px) scale(1.06); }
}

.country-dropdown-menu {
    min-width: 220px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    right: 0 !important;
    left: auto !important;
}

[dir="rtl"] .country-dropdown-menu {
    right: auto !important;
    left: 0 !important;
}

.country-dropdown-menu .country-opt {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    color: #2c1a35 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.country-dropdown-menu .country-opt:hover {
    background: rgba(107, 45, 139, 0.08) !important;
}

.country-dropdown-menu .country-opt.active {
    background: rgba(107, 45, 139, 0.12) !important;
    border-left: 3px solid #6b2d8b !important;
}

.country-opt-flag {
    font-size: 24px !important;
    line-height: 1 !important;
}

.country-opt-info {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.country-opt-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.country-opt-desc {
    font-size: 11px !important;
    color: #666666 !important;
}

.country-opt-check {
    color: #6b2d8b !important;
    font-weight: 700 !important;
    font-size: 16px !important;
}

/* ==========================================================================
   Support RTL et Arabe
   ========================================================================== */
html[dir="rtl"],
body[dir="rtl"] {
    direction: rtl !important;
    text-align: right !important;
}

html[dir="rtl"] .header .logo img {
    margin-left: 0 !important;
    margin-right: 30px !important;
}

html[dir="rtl"] .user-buttons {
    float: left !important;
}

html[dir="rtl"] .contentInfos {
    text-align: right !important;
}

[dir="auto"] {
    unicode-bidi: plaintext !important;
}

/* Footer social network icons clean circular presentation */
.footer-col.social-networks .fa {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 4px 6px !important;
    text-indent: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    color: #652e71 !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    transition: transform 0.2s ease, background 0.2s ease !important;
}

.footer-col.social-networks .fa:hover {
    transform: scale(1.1) !important;
    background: #f3e5f5 !important;
}

/* Popup & Modal close button (X) visibility improvements */
.white-popup-block .mfp-close,
.whitePopupClose .mfp-close,
.mfp-wrap .mfp-close {
    color: #333 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    line-height: 32px !important;
    text-align: center !important;
    font-size: 24px !important;
    font-weight: bold !important;
    top: 10px !important;
    right: 12px !important;
    opacity: 0.85 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 100050 !important;
    transition: opacity 0.2s ease, transform 0.2s ease !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
}

.white-popup-block .mfp-close:hover,
.whitePopupClose .mfp-close:hover,
.mfp-wrap .mfp-close:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
    color: #000 !important;
    background: #fff !important;
}

.modal-header .close,
.modal .close {
    font-size: 28px !important;
    line-height: 1 !important;
    color: #444 !important;
    opacity: 0.75 !important;
    cursor: pointer !important;
    text-shadow: none !important;
}

.modal-header .close:hover,
.modal .close:hover {
    opacity: 1 !important;
    color: #000 !important;
}

/* ========================================================
   Compatibilité Bootstrap 5 : bootstrap-select & help_zone
   ======================================================== */
.bootstrap-select.open > .dropdown-menu,
.open > .dropdown-menu,
.bootstrap-select.show > .dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#help_zone .bootstrap-select {
    width: 100% !important;
    max-width: 460px !important;
    position: relative !important;
}

#help_zone .bootstrap-select button.dropdown-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid #652e71 !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 6px 4px !important;
    font-size: 14px !important;
    color: #495057 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
}

#help_zone .bootstrap-select button.dropdown-toggle .filter-option {
    text-align: left !important;
    font-weight: 500 !important;
    color: #333333 !important;
    font-size: 14px !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#help_zone .bootstrap-select button.dropdown-toggle .caret,
#help_zone .bootstrap-select button.dropdown-toggle .bs-caret {
    margin-left: 8px !important;
    border-top-color: #652e71 !important;
}

#help_zone .bootstrap-select.open > div.dropdown-menu,
#help_zone .bootstrap-select.show > div.dropdown-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 100000 !important;
    float: left !important;
    min-width: 280px !important;
    max-height: 320px !important;
    overflow-y: auto !important;
    padding: 6px 0 !important;
    margin: 4px 0 0 !important;
    font-size: 13px !important;
    background-color: #ffffff !important;
    border: 1px solid rgba(101, 46, 113, 0.25) !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(101, 46, 113, 0.15) !important;
}

#help_zone .bootstrap-select div.dropdown-menu ul.inner,
#help_zone .dropdown-menu ul.inner {
    position: static !important;
    float: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    background: transparent !important;
    display: block !important;
}

#help_zone .dropdown-menu li {
    list-style: none !important;
}

#help_zone .dropdown-menu li a {
    display: block !important;
    padding: 8px 16px !important;
    clear: both !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #333333 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

#help_zone .dropdown-menu li:hover a,
#help_zone .dropdown-menu li.selected a {
    background-color: #f7f0f8 !important;
    color: #652e71 !important;
    font-weight: 700 !important;
}

#help_zone .dropdown-menu li a span.check-mark {
    display: none !important;
}

/* Zone d'affichage des phrases rapides */
.zone_html_help {
    padding: 12px 6px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}
.zone_html_help .firstLine {
    padding: 7px 10px !important;
    margin-bottom: 4px !important;
    border-radius: 4px !important;
    transition: background 0.15s ease !important;
}
.zone_html_help .firstLine:hover {
    background: #f7f0f8 !important;
}
.zone_html_help .firstLine a {
    color: #333333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    display: block !important;
}
.zone_html_help .firstLine a b {
    color: #652e71 !important;
    font-weight: 600 !important;
}
.zone_html_help .firstLine a:hover {
    color: #652e71 !important;
}

/* Grille d'icônes catégories métiers dans la modale de recherche */
.moteur-categories-container {
    padding: 10px 4px 6px 4px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px dashed #e3d5e6 !important;
}

.moteur-categories-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #652e71 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    letter-spacing: 0.2px !important;
}

.moteur-categories-title i {
    font-size: 14px !important;
    color: #652e71 !important;
}

.moteur-categories-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.btn-moteur-category {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 15px !important;
    border-radius: 20px !important;
    background: #ffffff !important;
    border: 1.5px solid #d5bcd9 !important;
    color: #4a2254 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(101, 46, 113, 0.08) !important;
    outline: none !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.btn-moteur-category span {
    color: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.btn-moteur-category i {
    font-size: 16px !important;
    color: #652e71 !important;
    transition: color 0.2s ease !important;
    vertical-align: middle !important;
}

.btn-moteur-category:hover {
    background: #f8eff9 !important;
    border-color: #652e71 !important;
    color: #652e71 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(101, 46, 113, 0.18) !important;
}

.btn-moteur-category:hover span {
    color: #652e71 !important;
}

.btn-moteur-category.active {
    background: #652e71 !important;
    border-color: #652e71 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(101, 46, 113, 0.35) !important;
    transform: translateY(-1px) !important;
}

.btn-moteur-category.active span {
    color: #ffffff !important;
}

.btn-moteur-category.active i {
    color: #ffffff !important;
}

/* On masque l'ancien sélecteur déroulant au profit de la barre visuelle */
#help_zone .bootstrap-select {
    display: none !important;
}

/* ============================================
   22. PHOTOS DES FICHES COMMERÇANTS
   ============================================ */
.contentImg,
.contentImg .img_zc,
.contentImg .openPhotos,
.listing-item-link > img,
.openZcPhotos,
.openPhotos,
.camera_icon {
    cursor: pointer !important;
}

.contentImg .img_zc {
    width: 150px !important;
    height: 125px !important;
    min-width: 150px !important;
    min-height: 125px !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
    display: block !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.contentImg:hover .img_zc {
    transform: scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}


/* ============================================
   23. LES COULISSES DU QUARTIER (STORIES)
   ============================================ */
.coulisses-quartier-wrapper {
    background: #ffffff;
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(101, 46, 113, 0.08);
    border: 1px solid rgba(101, 46, 113, 0.12);
    text-align: left;
}

.coulisses-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.coulisses-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coulisses-sparkle {
    font-size: 18px;
}

.coulisses-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2d1a33 !important;
    margin: 0 !important;
    letter-spacing: -0.3px;
}

.coulisses-live-pill {
    background: linear-gradient(135deg, #ef4444, #f97316);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    animation: pulse 2s infinite;
}

.btn-open-story-compose {
    background: rgba(101, 46, 113, 0.08);
    color: #652e71;
    border: none;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-open-story-compose:hover {
    background: #652e71;
    color: #fff;
}

.coulisses-stories-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 6px;
    scrollbar-width: thin;
}

.coulisses-story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 78px;
    text-align: center;
    transition: transform 0.2s ease;
}

.coulisses-story-item:hover {
    transform: translateY(-2px);
}

.story-avatar-ring {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    padding: 3px;
    background: linear-gradient(45deg, #652e71, #a855f7, #ec4899);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(101, 46, 113, 0.2);
    position: relative;
}

.story-avatar-ring.ring-add {
    background: #f3e8f8;
    border: 2px dashed #652e71;
    box-shadow: none;
}

.story-add-plus {
    font-size: 26px;
    font-weight: 700;
    color: #652e71;
    line-height: 1;
}

.story-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
}

.story-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-top: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.story-time {
    font-size: 11px;
    color: #9ca3af;
}

/* Story Modal */
.coulisses-story-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.story-modal-card {
    position: relative;
    z-index: 10;
    width: 90%;
    max-width: 440px;
    height: 80vh;
    max-height: 720px;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
}

.story-modal-progress {
    position: absolute;
    top: 10px;
    left: 12px;
    right: 12px;
    height: 3px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    overflow: hidden;
    z-index: 20;
}

.story-progress-bar {
    height: 100%;
    width: 0%;
    background: #ffffff;
}

.story-modal-header {
    position: absolute;
    top: 22px;
    left: 16px;
    right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
}

.story-author-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-modal-author-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
}

.story-modal-author-name {
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.story-modal-time {
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
}

.story-modal-close {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    color: #fff;
    font-size: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
}

.story-modal-body {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-modal-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-modal-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 24px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    color: #fff;
}

.story-modal-text {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 12px;
}

.story-modal-actions {
    display: flex;
    gap: 8px;
}

.btn-story-react, .btn-story-chat {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: none;
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-story-react:hover {
    background: rgba(255, 255, 255, 0.35);
}

.btn-story-chat {
    background: #652e71;
    margin-left: auto;
}

/* ============================================
   24. BOUTON "ON S'EST CROISÉS ?" SUR LA CARTE
   ============================================ */
.listing-item-croises {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    cursor: pointer;
}

.croises_span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdf4ff !important;
    border: 1px solid #d946ef !important;
    color: #86198f !important;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(217, 70, 239, 0.15);
    transition: all 0.2s ease;
}

.croises_span:hover {
    background: #86198f !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(134, 25, 143, 0.3);
}

.croises_icon {
    font-size: 14px;
}

/* ============================================
   25. DRAWER TCHAT & ON S'EST CROISÉS
   ============================================ */
.tchat-quartier-drawer {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.tchat-quartier-drawer.open {
    pointer-events: auto;
    visibility: visible;
}

.tchat-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(45, 26, 51, 0.35);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tchat-quartier-drawer.open .tchat-drawer-backdrop {
    opacity: 1;
}

.tchat-drawer-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tchat-quartier-drawer.open .tchat-drawer-panel {
    transform: translateX(0);
}

/* En-tête */
.tchat-drawer-header {
    background: linear-gradient(135deg, #4a154b, #652e71);
    color: #ffffff;
    padding: 20px;
    position: relative;
}

.tchat-header-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.tchat-header-title {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    margin: 0 0 4px 0 !important;
}

.tchat-header-venue {
    color: #fce7f3;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

.tchat-header-address {
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    margin: 2px 0 0 0;
}

.tchat-drawer-close {
    position: absolute;
    top: 18px;
    right: 18px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.tchat-drawer-close:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Check-in Card */
.tchat-checkin-card {
    background: #faf5ff;
    border-bottom: 1px solid #f3e8ff;
    padding: 16px 20px;
}

.tchat-habitues-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.tchat-avatars-stack {
    display: flex;
}

.avatar-stack-item {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    margin-left: -8px;
    object-fit: cover;
}

.avatar-stack-item:first-child {
    margin-left: 0;
}

.tchat-habitues-text {
    font-size: 13px;
    color: #4b5563;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tchat-live-pulse {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    animation: pulse 1.5s infinite;
}

.btn-tchat-checkin {
    width: 100%;
    background: linear-gradient(135deg, #652e71, #86198f);
    color: #ffffff !important;
    border: none;
    padding: 12px 18px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(101, 46, 113, 0.35);
    transition: all 0.2s ease;
}

.btn-tchat-checkin span,
.btn-tchat-checkin * {
    color: #ffffff !important;
}

.btn-tchat-checkin:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(101, 46, 113, 0.45);
}

.btn-tchat-checkin.checked-in {
    background: #16a34a !important;
}

.tchat-checkin-alert {
    background: #dcfce7;
    color: #15803d;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 10px;
    text-align: center;
}

/* Flux de messages */
.tchat-messages-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    background: #f9fafb;
    display: flex;
    flex-direction: column;
}

.tchat-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #9ca3af;
    font-size: 13px;
    padding: 30px 0;
}

.tchat-spinner {
    width: 24px;
    height: 24px;
    border: 3px solid rgba(101, 46, 113, 0.2);
    border-top-color: #652e71;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.tchat-msg-row {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.tchat-msg-row.msg-me {
    flex-direction: row-reverse;
}

.tchat-msg-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tchat-msg-bubble {
    max-width: 80%;
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
}

.msg-me .tchat-msg-bubble {
    background: #652e71;
    color: #ffffff;
    border-color: #652e71;
}

.tchat-msg-meta {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 11px;
}

.tchat-msg-author {
    font-weight: 700;
    color: #374151;
}

.msg-me .tchat-msg-author {
    color: #f3e8ff;
}

.tchat-msg-time {
    color: #9ca3af;
}

.msg-me .tchat-msg-time {
    color: rgba(255, 255, 255, 0.7);
}

.tchat-msg-content {
    font-size: 13px;
    line-height: 1.4;
    word-break: break-word;
}

.tchat-msg-emoji {
    font-size: 16px;
}

/* Réactions rapides */
.tchat-quick-reactions {
    display: flex;
    gap: 8px;
    padding: 8px 20px;
    background: #ffffff;
    border-top: 1px solid #f3f4f6;
    overflow-x: auto;
}

.btn-emoji-react {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 16px;
    padding: 4px 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-emoji-react:hover {
    background: #fdf4ff;
    border-color: #d946ef;
    transform: scale(1.1);
}

/* Input Form */
.tchat-input-form {
    padding: 12px 20px 16px;
    background: #ffffff;
}

.tchat-input-wrap {
    display: flex;
    gap: 8px;
    background: #f3f4f6;
    border-radius: 24px;
    padding: 4px 6px 4px 16px;
    border: 1px solid #e5e7eb;
    transition: border-color 0.2s ease;
}

.tchat-input-wrap:focus-within {
    border-color: #652e71;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(101, 46, 113, 0.15);
}

.tchat-message-input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: #1f2937;
}

.btn-tchat-send {
    background: #652e71;
    color: #ffffff;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-tchat-send:hover {
    background: #4a154b;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 576px) {
    .tchat-drawer-panel {
        max-width: 100%;
    }
}

/* ========================================================
   HABITUDES Z & RADAR PRÉSENCE POTES (Concept Gen Z)
   ======================================================== */
.z-habitudes-card {
    background: linear-gradient(180deg, #fdf4ff 0%, #fae8ff 100%) !important;
    border-bottom: 1px solid #f0abfc !important;
    padding: 14px 18px !important;
    transition: all 0.25s ease !important;
}

.z-habitudes-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 10px !important;
}

.z-habitudes-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.z-habitudes-title-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

.z-habitudes-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.z-habitudes-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #4a044e !important;
    letter-spacing: -0.2px !important;
}

.z-badge-genz {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%) !important;
    color: #ffffff !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(168, 85, 247, 0.35) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
}

.z-habitudes-tagline {
    margin: 0 !important;
    font-size: 11.5px !important;
    color: #701a75 !important;
    font-weight: 500 !important;
}

.z-radar-pulse {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    background: #a855f7 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7) !important;
    animation: livePulseAnim 1.8s infinite !important;
}

/* Profil Zder Connecté */
.z-user-logged-badge {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    border: 1px solid #f0abfc !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.08) !important;
}

.z-logged-avatar-wrap {
    position: relative !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #8b5cf6, #ec4899) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 14px !important;
}

.z-user-online-dot {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    width: 10px !important;
    height: 10px !important;
    background: #10b981 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50% !important;
}

.z-logged-info {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    font-size: 12px !important;
    color: #334155 !important;
}

.z-logged-status {
    color: #64748b !important;
}

.z-logged-name {
    color: #1e1b4b !important;
}

.z-logged-pill {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #047857 !important;
    background: #d1fae5 !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
}

/* ========================================================
   CARTE D'ADHÉSION CRÉATIVE ZDER (Pass Profil Zder)
   ======================================================== */
.z-auth-gate-banner {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(253, 244, 255, 0.95) 100%) !important;
    border: 1.5px solid #e9d5ff !important;
    border-radius: 16px !important;
    padding: 14px 14px 12px 14px !important;
    margin: 10px 0 12px 0 !important;
    box-shadow: 0 8px 24px -4px rgba(168, 85, 247, 0.15), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.z-auth-gate-banner::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, #8b5cf6, #d946ef, #f43f5e, #8b5cf6) !important;
    background-size: 200% 100% !important;
    animation: gradientShift 6s linear infinite !important;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.zder-creative-badge-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.zder-hologram-avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #7c3aed 0%, #db2777 50%, #f59e0b 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    box-shadow: 0 4px 14px rgba(219, 39, 119, 0.35) !important;
    animation: zderFloat 3s ease-in-out infinite !important;
}

@keyframes zderFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-3px); }
}

.zder-icon-symbol {
    font-size: 24px !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) !important;
}

.zder-mini-badge {
    position: absolute !important;
    bottom: -4px !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    background: #1e1b4b !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    border: 1px solid #c084fc !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.zder-badge-copy {
    flex: 1 !important;
    min-width: 0 !important;
}

.zder-badge-headline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.zder-badge-headline strong {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #1e1b4b !important;
    letter-spacing: -0.2px !important;
}

.zder-pill-hot {
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #db2777 !important;
    background: #fdf2f8 !important;
    border: 1px solid #fbcfe8 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.zder-badge-pitch {
    margin: 4px 0 0 0 !important;
    font-size: 11.5px !important;
    color: #64748b !important;
    line-height: 1.4 !important;
}

.zder-badge-pitch strong {
    color: #4c1d95 !important;
}

/* Boutons d'action Zder */
.z-auth-gate-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
}

/* Bouton principal Créer mon profil Z */
.btn-z-register-now {
    width: 100% !important;
    background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 55%, #ec4899 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: 0.2px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.42), 0 2px 4px rgba(139, 92, 246, 0.25) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-z-register-now:hover {
    transform: translateY(-1.5px) !important;
    box-shadow: 0 6px 22px rgba(217, 70, 239, 0.58), 0 3px 6px rgba(139, 92, 246, 0.35) !important;
    background: linear-gradient(135deg, #7c3aed 0%, #c026d3 55%, #db2777 100%) !important;
}

.btn-z-register-now:active {
    transform: translateY(0.5px) !important;
    box-shadow: 0 2px 8px rgba(217, 70, 239, 0.35) !important;
}

.btn-z-icon-circle {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.28) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
}

.btn-z-label {
    flex: 1 !important;
    text-align: center !important;
    margin: 0 8px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.btn-z-speed-pill {
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
}

/* Bouton secondaire Déjà un compte */
.btn-z-login-link {
    width: 100% !important;
    background: #ffffff !important;
    border: 1.5px solid #e9d5ff !important;
    border-radius: 999px !important;
    padding: 8px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #6b21a8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.2s ease !important;
}

.btn-z-login-link:hover {
    background: #fae8ff !important;
    border-color: #c084fc !important;
    color: #4a044e !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(168, 85, 247, 0.15) !important;
}

.btn-login-key-icon {
    font-size: 13px !important;
}

.btn-login-label strong {
    font-weight: 800 !important;
    color: #7c3aed !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

/* Tags de réassurance Zder */
.zder-tags-strip {
    display: flex !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding-top: 2px !important;
}

.zder-micro-chip {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #7e22ce !important;
    background: rgba(243, 232, 255, 0.8) !important;
    border: 1px solid #f0abfc !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
}

/* Switch toggle moderne */
.z-toggle-switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    height: 24px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.z-toggle-switch input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

.z-toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #cbd5e1 !important;
    border-radius: 24px !important;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.z-toggle-slider::before {
    position: absolute !important;
    content: "" !important;
    height: 18px !important;
    width: 18px !important;
    left: 3px !important;
    bottom: 3px !important;
    background-color: white !important;
    border-radius: 50% !important;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.z-toggle-switch input:checked + .z-toggle-slider {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
}

.z-toggle-switch input:checked + .z-toggle-slider::before {
    transform: translateX(20px) !important;
}

/* Zone Signaler à vos potes */
.z-radar-body {
    margin-top: 10px !important;
}

.z-radar-subtitle-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
}

.z-radar-live-icon {
    font-size: 14px !important;
}

.z-radar-subtitle {
    margin: 0 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

.z-live-pulse-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    background: #10b981 !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5) !important;
    animation: livePulseAnim 1.5s infinite !important;
}

.z-status-selector {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
}

.btn-z-status {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.btn-z-status:hover {
    background: #fae8ff !important;
    border-color: #d946ef !important;
    color: #701a75 !important;
}

.btn-z-status.active {
    background: linear-gradient(135deg, #86198f, #c026d3) !important;
    border-color: #86198f !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(134, 25, 143, 0.35) !important;
}

.btn-z-status.active span {
    color: #ffffff !important;
}

/* Liste des habitués présents en direct */
.z-live-presence-list-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding-top: 4px !important;
}

.z-presence-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #9333ea !important;
    letter-spacing: 0.4px !important;
}

.z-presence-chips {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.z-presence-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #f0abfc !important;
    border-radius: 999px !important;
    padding: 3px 9px 3px 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #581c87 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05) !important;
}

.z-presence-chip img {
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1.5px solid #a855f7 !important;
}

/* ========================================================
   LA CARTE DU BAR & SUGGESTIONS ENVOYÉES AUX POTES
   ======================================================== */
.z-bar-menu-section {
    background: #faf5ff !important;
    border-top: 1px solid #f3e8ff !important;
    border-bottom: 1px solid #f3e8ff !important;
    padding: 10px 16px !important;
}

.z-bar-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #652e71 !important;
    margin-bottom: 8px !important;
}

.z-bar-menu-hint {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: #a855f7 !important;
}

.z-bar-menu-scroll {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    scrollbar-width: none !important;
}

.z-bar-menu-scroll::-webkit-scrollbar {
    display: none !important;
}

.btn-menu-share {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    border: 1px solid #e9d5ff !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(101, 46, 113, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-menu-share:hover {
    border-color: #a855f7 !important;
    background: #f3e8ff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.25) !important;
}

.btn-menu-share .menu-icon {
    font-size: 15px !important;
}

.btn-menu-share .menu-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #3b0764 !important;
    white-space: nowrap !important;
}

.btn-menu-share .menu-price {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ec4899 !important;
    background: #fdf2f8 !important;
    padding: 1px 6px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

/* Bulle spéciale article partagé dans le tchat */
.tchat-msg-bubble.bubble-menu-invite {
    background: linear-gradient(135deg, #fdf4ff, #fae8ff) !important;
    border: 1.5px solid #d946ef !important;
    box-shadow: 0 4px 14px rgba(217, 70, 239, 0.18) !important;
}

.menu-invite-card {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    border: 1px solid #f0abfc !important;
}

.menu-invite-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

.menu-invite-info {
    flex: 1 !important;
}

.menu-invite-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #4a044e !important;
}

.menu-invite-price {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #c026d3 !important;
}

.btn-join-pot {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 5px 11px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

.btn-join-pot:hover {
    transform: scale(1.05) !important;
}

/* ========================================================
   MODAL INSCRIPTION EXPRESS Z (DESK & MOBILE REACT 1-CLIC)
   ======================================================== */
.z-express-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 100050 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}

.z-express-modal.is-open {
    display: flex !important;
}

.z-express-modal-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 10, 25, 0.45) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.z-express-modal-card {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 460px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    background: linear-gradient(145deg, #181126, #241438) !important;
    border: 1.5px solid rgba(217, 70, 239, 0.45) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 35px rgba(217, 70, 239, 0.3) !important;
    color: #ffffff !important;
    padding: 22px 20px !important;
}

.z-express-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.z-express-badge-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-express-badge {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
}

.z-express-live-dot {
    width: 8px !important;
    height: 8px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #22c55e !important;
    animation: zPulse 1.5s infinite !important;
}

.z-express-modal-close {
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    color: #ffffff !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.z-express-modal-close:hover {
    background: rgba(255, 255, 255, 0.25) !important;
}

.z-express-title {
    margin: 0 0 4px 0 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: -0.3px !important;
}

.z-express-subtitle {
    margin: 0 0 16px 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #cbd5e1 !important;
}

/* Fast-track Mobile */
.z-mobile-auth-box {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(236, 72, 153, 0.2)) !important;
    border: 1.5px solid rgba(217, 70, 239, 0.5) !important;
    border-radius: 14px !important;
    padding: 12px 14px !important;
    margin-bottom: 16px !important;
}

.z-mobile-auth-header {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.z-mobile-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

.z-mobile-auth-header-text strong {
    display: block !important;
    font-size: 13.5px !important;
    color: #fdf4ff !important;
    font-weight: 800 !important;
}

.z-mobile-auth-header-text p {
    margin: 2px 0 0 0 !important;
    font-size: 11.5px !important;
    color: #e2e8f0 !important;
    line-height: 1.3 !important;
}

.z-mobile-perm-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
}

.z-perm-chip {
    font-size: 11px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    color: #f1f5f9 !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.btn-z-mobile-auto-register {
    width: 100% !important;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6, #ec4899) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
    transition: transform 0.2s ease !important;
}

.btn-z-mobile-auto-register:hover {
    transform: translateY(-1px) !important;
}

.z-or-separator {
    text-align: center !important;
    margin: 14px 0 0 0 !important;
    position: relative !important;
}

.z-or-separator span {
    background: #181126 !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    color: #94a3b8 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Formulaire Desk */
.z-express-form {
    margin-top: 12px !important;
}

.z-form-group {
    margin-bottom: 12px !important;
}

.z-form-group label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #e2e8f0 !important;
    margin-bottom: 4px !important;
}

.z-form-group label .req {
    color: #ec4899 !important;
}

.z-form-group label .opt {
    font-weight: 400 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.z-input {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
    box-sizing: border-box !important;
}

.z-input:focus {
    border-color: #d946ef !important;
    box-shadow: 0 0 10px rgba(217, 70, 239, 0.3) !important;
}

.z-form-row {
    display: flex !important;
    gap: 10px !important;
}

.z-form-group.half {
    flex: 1 !important;
}

.z-tag-input-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.z-tag-prefix {
    position: absolute !important;
    left: 12px !important;
    font-weight: 800 !important;
    color: #d946ef !important;
    font-size: 14px !important;
}

.z-input-tag {
    padding-left: 28px !important;
    font-weight: 700 !important;
    color: #fdf4ff !important;
}

.z-checkbox-group {
    margin: 14px 0 !important;
}

.z-switch-label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    font-size: 12px !important;
    color: #e2e8f0 !important;
    user-select: none !important;
}

.z-switch-label input {
    accent-color: #d946ef !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

.z-form-error {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid #ef4444 !important;
    color: #fca5a5 !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
}

.btn-z-submit-register {
    width: 100% !important;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 11px 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(217, 70, 239, 0.4) !important;
    transition: transform 0.2s ease !important;
}

.btn-z-submit-register:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(217, 70, 239, 0.5) !important;
}

.z-express-footer {
    text-align: center !important;
    margin-top: 14px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
}

.z-express-footer a {
    color: #f472b6 !important;
    text-decoration: underline !important;
    font-weight: 700 !important;
}

/* ========================================================
   Z-RECHERCHE HUB : Dernières recherches, Commerces & Coups de cœur
   ======================================================== */
.z-recherche-hub {
    margin-top: 18px !important;
    padding: 0 4px 16px 4px !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
    animation: zFadeIn 0.3s ease-out !important;
}

.z-recherche-hub.hidden-hub {
    display: none !important;
}

.autocomplete-suggestions {
    z-index: 100025 !important;
    position: absolute !important;
}

@keyframes zFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

.z-hub-section {
    margin-bottom: 22px !important;
}

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

.z-hub-title-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-hub-icon {
    font-size: 16px !important;
    line-height: 1 !important;
}

.z-hub-title {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #3b0764 !important;
    letter-spacing: -0.2px !important;
    text-transform: uppercase !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #3b0764 !important;
}

.z-hub-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: #ede9fe !important;
    color: #6d28d9 !important;
    border: 1px solid #c4b5fd !important;
}

.z-hub-badge.z-badge-hot {
    background: #ffe4e6 !important;
    color: #e11d48 !important;
    border-color: #fda4af !important;
    box-shadow: 0 0 8px rgba(225, 29, 72, 0.2) !important;
}

.btn-clear-recent-searches {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    transition: color 0.2s ease !important;
}

.btn-clear-recent-searches:hover {
    color: #e11d48 !important;
}

/* Chips Dernières recherches avec split de déroulement pour jusqu'à 40 tags */
.z-recent-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-height: 145px !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
    padding-bottom: 4px !important;
    scrollbar-width: thin !important;
    scrollbar-color: #a855f7 rgba(255, 255, 255, 0.05) !important;
}

.z-recent-chips::-webkit-scrollbar {
    width: 5px !important;
}

.z-recent-chips::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 999px !important;
}

.z-recent-chips::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ec4899, #a855f7) !important;
    border-radius: 999px !important;
}

/* Bouton pour tagger soi-même */
.btn-add-tag-z {
    background: rgba(168, 85, 247, 0.2) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    color: #d8b4fe !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-add-tag-z:hover {
    background: #a855f7 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Formulaire d'ajout express de tag */
.hub-add-tag-form {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(26, 17, 43, 0.95) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    border-radius: 999px !important;
    padding: 4px 6px 4px 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

.hub-add-tag-icon {
    font-size: 13px !important;
}

.hub-add-tag-input {
    flex: 1 !important;
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    outline: none !important;
    font-family: inherit !important;
}

.hub-add-tag-input::placeholder {
    color: #94a3b8 !important;
    font-size: 12px !important;
}

.hub-add-tag-submit {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.hub-add-tag-submit:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4) !important;
}

.z-search-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 999px !important;
    padding: 5px 12px 5px 12px !important;
    color: #262626 !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    user-select: none !important;
}

.z-search-chip .chip-text {
    color: #262626 !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px !important;
}

.z-search-chip:hover {
    background: #f1f5f9 !important;
    border-color: #652e71 !important;
    color: #111827 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(101, 46, 113, 0.15) !important;
}

.z-search-chip:hover .chip-text {
    color: #111827 !important;
}

/* Tag scotché (punaise active, fond et lueur dorés doux) */
.z-search-chip.is-scotched {
    background: #fffbeb !important;
    border-color: #f59e0b !important;
    box-shadow: 0 1px 6px rgba(245, 158, 11, 0.2) !important;
}

.z-search-chip.is-scotched .chip-text {
    color: #262626 !important;
    font-weight: 700 !important;
}

.z-search-chip.is-scotched:hover {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3) !important;
}

.z-search-chip .chip-clock {
    font-size: 11px !important;
    opacity: 0.75 !important;
    color: #64748b !important;
}

/* Punaise de fixation "Scotch" */
.z-search-chip .chip-pin-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    margin-left: 2px !important;
    color: #94a3b8 !important;
    opacity: 0.55 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.z-search-chip .chip-pin-btn:hover {
    opacity: 1 !important;
    color: #f59e0b !important;
    transform: scale(1.15) !important;
}

.z-search-chip .chip-pin-btn.pinned {
    opacity: 1 !important;
    color: #f59e0b !important;
    filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.6)) !important;
}

/* Toute petite poubelle */
.z-search-chip .chip-trash-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 17px !important;
    height: 17px !important;
    border-radius: 50% !important;
    margin-left: 1px !important;
    color: #94a3b8 !important;
    opacity: 0.55 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.z-search-chip .chip-trash-btn:hover {
    opacity: 1 !important;
    background: #ef4444 !important;
    color: #ffffff !important;
    transform: scale(1.15) !important;
}

/* Scroll Derniers Commerces : rail de défilement bien visible */
.z-commerces-scroll {
    display: flex !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 12px !important;
    scrollbar-width: auto !important;
    scrollbar-color: #652e71 #e2e8f0 !important;
}

.z-commerces-scroll::-webkit-scrollbar {
    height: 8px !important;
    background: #e2e8f0 !important;
    border-radius: 999px !important;
}

.z-commerces-scroll::-webkit-scrollbar-track {
    background: #e2e8f0 !important;
    border-radius: 999px !important;
}

.z-commerces-scroll::-webkit-scrollbar-thumb {
    background: #652e71 !important;
    border-radius: 999px !important;
}

.z-commerce-card {
    flex: 0 0 200px !important;
    background: rgba(26, 17, 43, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.z-commerce-card:hover {
    border-color: rgba(168, 85, 247, 0.6) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.25) !important;
}

.z-commerce-thumb {
    height: 95px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
}

.z-commerce-status {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    background: rgba(15, 23, 42, 0.8) !important;
    backdrop-filter: blur(4px) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #4ade80 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

.z-commerce-info {
    padding: 9px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
}

.z-commerce-name {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 3px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.z-commerce-meta {
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin: 0 0 8px 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.z-commerce-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
}

.z-commerce-footer .z-rating {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #facc15 !important;
}

.z-commerce-footer .z-btn-view {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    padding: 3px 9px !important;
    border-radius: 999px !important;
}

/* Grille Coups de cœur */
.z-coeur-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 12px !important;
}

.z-coeur-card {
    background: rgba(26, 17, 43, 0.85) !important;
    border: 1px solid rgba(244, 63, 94, 0.35) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.z-coeur-card:hover {
    border-color: #f43f5e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(244, 63, 94, 0.3) !important;
}

.z-coeur-banner {
    height: 100px !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative !important;
    padding: 8px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

.z-coeur-pill {
    background: rgba(244, 63, 94, 0.9) !important;
    backdrop-filter: blur(4px) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

.z-coeur-badge-tag {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #facc15 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
}

.z-coeur-details {
    padding: 10px 12px !important;
}

.z-coeur-details h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
}

.z-coeur-details p {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.35 !important;
}

.z-coeur-tags {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.z-coeur-tags span {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #d8b4fe !important;
    background: rgba(168, 85, 247, 0.18) !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
}

/* ========================================================
   BOUTONS D'ACCÈS Z-DATE DANS LE VOLET TCHAT
   ======================================================== */
.tchat-zdate-cta-bar {
    display: flex !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    background: rgba(30, 20, 50, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.btn-tchat-zdate,
.btn-tchat-cam {
    flex: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: none !important;
    position: relative !important;
}

.btn-tchat-zdate {
    background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.35) !important;
}

.btn-tchat-zdate:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(6, 182, 212, 0.5) !important;
}

.btn-tchat-cam {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(217, 70, 239, 0.35) !important;
}

.btn-tchat-cam:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(217, 70, 239, 0.5) !important;
}

.cta-ping {
    width: 7px !important;
    height: 7px !important;
    background: #4ade80 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #4ade80 !important;
    animation: zPingLive 1.4s infinite !important;
}

@keyframes zPingLive {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

/* ========================================================
   MODAL Z-DATE : AGENDA & SALON CAM VISIO (PLEIN ÉCRAN / IMMERSIF)
   ======================================================== */
.z-date-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    filter: none !important;
    backdrop-filter: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
}

.z-date-modal.open,
.z-date-modal.is-open {
    display: flex !important;
}


.z-date-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(8, 4, 16, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.z-date-container {
    position: relative !important;
    z-index: 2 !important;
    width: 95% !important;
    max-width: 1100px !important;
    max-height: 92vh !important;
    background: #120a21 !important;
    background: radial-gradient(circle at 15% 15%, rgba(168, 85, 247, 0.18), transparent 45%),
                radial-gradient(circle at 85% 85%, rgba(6, 182, 212, 0.15), transparent 45%),
                #120a21 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 20px !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7), 0 0 40px rgba(168, 85, 247, 0.25) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: zModalScale 0.3s ease-out !important;
}

@keyframes zModalScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* En-tête Z-Date */
.z-date-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    background: rgba(24, 14, 42, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.z-date-header-left {
    display: flex !important;
    flex-direction: column !important;
}

.z-date-logo-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-date-brand {
    font-size: 20px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    background: linear-gradient(135deg, #38bdf8, #c084fc, #f43f5e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.z-date-live-pill {
    font-size: 10px !important;
    font-weight: 800 !important;
    background: rgba(6, 182, 212, 0.25) !important;
    border: 1px solid rgba(6, 182, 212, 0.5) !important;
    color: #67e8f9 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}

.z-live-dot {
    width: 6px !important;
    height: 6px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #22c55e !important;
}

.z-date-tagline {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 3px 0 0 0 !important;
}

/* Nav tabs Agenda / Cam */
.z-date-nav-tabs {
    display: inline-flex !important;
    background: rgba(30, 20, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    padding: 4px !important;
    gap: 4px !important;
}

.z-date-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: none !important;
    border: none !important;
    color: #cbd5e1 !important;
    padding: 7px 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.z-date-nav-btn.active {
    background: linear-gradient(135deg, #a855f7, #6366f1) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4) !important;
}

.z-date-nav-btn .nav-badge {
    background: #ec4899 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
}

.nav-live-ping {
    width: 8px !important;
    height: 8px !important;
    background: #ef4444 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #ef4444 !important;
    animation: zPingLive 1.2s infinite !important;
}

.z-date-close {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.z-date-close:hover {
    background: #f43f5e !important;
    transform: rotate(90deg) !important;
}

/* Corps Z-Date */
.z-date-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 20px 24px !important;
}

.z-date-pane {
    display: none !important;
}

.z-date-pane.active {
    display: block !important;
    animation: zFadeIn 0.25s ease !important;
}

/* ========================================================
   VOLET 1 : AGENDA & PROPOSER UN RENDEZ-VOUS
   ======================================================== */
.z-agenda-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 24px !important;
}

@media (max-width: 850px) {
    .z-agenda-layout {
        grid-template-columns: 1fr !important;
    }
}

.z-card-box {
    background: rgba(26, 17, 43, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 20px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3) !important;
}

.z-box-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 12px !important;
}

.z-box-title .box-icon {
    font-size: 24px !important;
    line-height: 1 !important;
}

.z-box-title h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.z-box-title p {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 0 !important;
}

.z-form-group {
    margin-bottom: 15px !important;
}

.z-form-label {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    margin-bottom: 6px !important;
}

.z-activity-selector {
    display: flex !important;
    gap: 8px !important;
}

.btn-activity {
    flex: 1 !important;
    background: rgba(30, 20, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 8px 4px !important;
    color: #cbd5e1 !important;
    cursor: pointer !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.2s ease !important;
}

.btn-activity span {
    font-size: 18px !important;
    line-height: 1 !important;
}

.btn-activity small {
    font-size: 10.5px !important;
    font-weight: 700 !important;
}

.btn-activity.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(6, 182, 212, 0.35)) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.35) !important;
    transform: translateY(-2px) !important;
}

.z-input-field {
    width: 100% !important;
    box-sizing: border-box !important;
    background: rgba(18, 11, 31, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-family: inherit !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.z-input-field:focus {
    border-color: #a855f7 !important;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.4) !important;
    outline: none !important;
}

.z-input-hint {
    display: block !important;
    font-size: 11px !important;
    color: #38bdf8 !important;
    margin-top: 4px !important;
}

.z-quick-time-buttons {
    display: flex !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.btn-quick-time {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-quick-time.active {
    background: #a855f7 !important;
    color: #ffffff !important;
    border-color: #d946ef !important;
}

.z-guest-picker {
    display: flex !important;
    gap: 8px !important;
}

.btn-z-open-call {
    background: rgba(6, 182, 212, 0.2) !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
    color: #67e8f9 !important;
    border-radius: 10px !important;
    padding: 8px 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.btn-submit-zdate {
    width: 100% !important;
    background: linear-gradient(135deg, #06b6d4, #8b5cf6, #ec4899) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.45) !important;
    transition: all 0.2s ease !important;
    margin-top: 10px !important;
}

.btn-submit-zdate:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 26px rgba(139, 92, 246, 0.6) !important;
}

/* Liste Agenda */
.z-agenda-items-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

.z-agenda-item {
    background: rgba(18, 11, 31, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    position: relative !important;
    transition: all 0.2s ease !important;
}

.z-agenda-item:hover {
    border-color: rgba(168, 85, 247, 0.5) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

.z-agenda-badge-status {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

.status-confirmed {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
}

.status-pending {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
    border: 1px solid rgba(234, 179, 8, 0.4) !important;
}

.z-agenda-item-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.z-agenda-avatar-group {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.z-agenda-avatar {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: 1.5px solid #a855f7 !important;
}

.z-agenda-tag {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #d8b4fe !important;
}

.z-agenda-timing {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
}

.z-agenda-item-body h5 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 3px 0 !important;
}

.z-agenda-venue-address {
    font-size: 11px !important;
    color: #38bdf8 !important;
    margin: 0 0 6px 0 !important;
}

.z-agenda-note {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    font-style: italic !important;
    margin: 0 0 10px 0 !important;
}

.z-agenda-item-actions {
    display: flex !important;
    gap: 8px !important;
}

.btn-action-pre-cam {
    flex: 1 !important;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 7px 12px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.btn-action-chat {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* ========================================================
   VOLET 2 : LA CAM Z (SALON PRIVÉ & GROUPES) AVEC LIVE TCHAT
   ======================================================== */
.z-cam-layout {
    display: grid !important;
    grid-template-columns: 1fr 320px !important;
    gap: 20px !important;
    height: 580px !important;
}

@media (max-width: 900px) {
    .z-cam-layout {
        grid-template-columns: 1fr !important;
        height: auto !important;
    }
}

.z-cam-video-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.z-cam-room-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.z-cam-room-types {
    display: inline-flex !important;
    gap: 8px !important;
}

.btn-room-type {
    background: rgba(30, 20, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-room-type.active {
    background: linear-gradient(135deg, #06b6d4, #3b82f6) !important;
    border-color: #38bdf8 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(6, 182, 212, 0.4) !important;
}

.badge-live-peers {
    background: #ec4899 !important;
    color: #ffffff !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
}

.room-indicator {
    font-size: 11px !important;
    color: #4ade80 !important;
    font-weight: 700 !important;
}

/* Container d'écran vidéo */
.z-video-screen-container {
    flex: 1 !important;
    background: #090511 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8) !important;
}

/* Grille 2 personnes (Salon Privé) */
.z-grid-prive {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    height: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
}

/* Grille 4 personnes (Salon Groupe) */
.z-grid-groupe {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 10px !important;
    height: 100% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}

.z-video-feed {
    position: relative !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: #181028 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.z-video-feed video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: scaleX(-1) !important; /* miroir pour la cam locale */
}

.z-remote-stream-mock,
.z-remote-video-mock {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.z-feed-fallback {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.z-feed-avatar {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    border: 3px solid #a855f7 !important;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5) !important;
}

.z-audio-waves {
    display: flex !important;
    gap: 4px !important;
    height: 18px !important;
    align-items: center !important;
}

.z-audio-waves i {
    width: 3px !important;
    height: 8px !important;
    background: #22c55e !important;
    border-radius: 2px !important;
    animation: zAudioPulse 0.8s infinite alternate !important;
}

.z-audio-waves i:nth-child(2) { animation-delay: 0.2s; height: 16px; }
.z-audio-waves i:nth-child(3) { animation-delay: 0.4s; height: 12px; }
.z-audio-waves i:nth-child(4) { animation-delay: 0.1s; height: 18px; }

@keyframes zAudioPulse {
    0% { transform: scaleY(0.4); opacity: 0.5; }
    100% { transform: scaleY(1.2); opacity: 1; }
}

.z-feed-badge-name {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    background: rgba(10, 5, 20, 0.75) !important;
    backdrop-filter: blur(4px) !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 5 !important;
}

.z-feed-dot {
    width: 6px !important;
    height: 6px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
}

.z-remote-sound-indicator {
    color: #38bdf8 !important;
    margin-left: 4px !important;
}

.z-glass-toast-cheers {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: linear-gradient(135deg, rgba(244, 63, 94, 0.9), rgba(217, 70, 239, 0.9)) !important;
    color: #ffffff !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    box-shadow: 0 8px 30px rgba(244, 63, 94, 0.6) !important;
    z-index: 20 !important;
    animation: zToastPop 0.4s ease !important;
}

@keyframes zToastPop {
    from { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Filtre d'ambiance visio */
.z-feed-filter-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    transition: background 0.3s ease !important;
}

.z-feed-filter-overlay.neon {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(236, 72, 153, 0.2) 100%) !important;
    mix-blend-mode: screen !important;
}

/* Stage des Emojis Volants (TikTok / FaceTime style) */
.z-flying-reactions-stage {
    position: absolute !important;
    bottom: 0 !important;
    right: 20px !important;
    width: 80px !important;
    height: 250px !important;
    pointer-events: none !important;
    overflow: hidden !important;
    z-index: 15 !important;
}

.z-floating-emoji {
    position: absolute !important;
    bottom: 0 !important;
    font-size: 26px !important;
    animation: zFlyUp 2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}

@keyframes zFlyUp {
    0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 1; }
    50% { transform: translateY(-120px) scale(1.2) rotate(15deg); opacity: 0.9; }
    100% { transform: translateY(-240px) scale(0.9) rotate(-15deg); opacity: 0; }
}

/* Barre des contrôles visio */
.z-cam-controls-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    padding: 10px 16px !important;
    background: rgba(24, 14, 42, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    gap: 10px !important;
}

.z-controls-left {
    display: flex !important;
    gap: 8px !important;
}

.btn-cam-control {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    padding: 7px 12px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-cam-control.muted {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

.btn-cam-cheers {
    background: linear-gradient(135deg, #f59e0b, #ec4899) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 8px 18px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4) !important;
    transition: all 0.2s ease !important;
}

.btn-cam-cheers:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.6) !important;
}

.btn-cam-leave {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important;
    border-radius: 10px !important;
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-cam-leave:hover {
    background: #ef4444 !important;
    color: #ffffff !important;
}

/* Zone Live Tchat Cam */
.z-cam-chat-col {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.z-livechat-box {
    background: rgba(26, 17, 43, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.z-livechat-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    background: rgba(18, 11, 31, 0.5) !important;
}

.z-livechat-title {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-size: 13px !important;
    color: #ffffff !important;
}

.livechat-dot {
    width: 7px !important;
    height: 7px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
}

.livechat-users-count {
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.z-livechat-messages {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    font-size: 12px !important;
}

.livechat-msg {
    display: flex !important;
    gap: 8px !important;
    align-items: flex-start !important;
}

.livechat-msg.msg-system {
    justify-content: center !important;
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    font-style: italic !important;
    text-align: center !important;
}

.livechat-msg.msg-cheers {
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
    color: #fde047 !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.livechat-msg-avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
}

.livechat-msg-bubble {
    background: rgba(30, 20, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    padding: 6px 10px !important;
    color: #f1f5f9 !important;
}

.livechat-msg-author {
    font-weight: 800 !important;
    color: #d8b4fe !important;
    display: block !important;
    font-size: 11px !important;
}

.livechat-msg-bubble p {
    margin: 2px 0 0 0 !important;
    line-height: 1.3 !important;
}

.z-livechat-reactions-bar {
    display: flex !important;
    justify-content: space-around !important;
    padding: 6px 8px !important;
    background: rgba(18, 11, 31, 0.6) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.btn-fly-reaction {
    background: none !important;
    border: none !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 4px !important;
    transition: transform 0.15s ease !important;
}

.btn-fly-reaction:hover {
    transform: scale(1.3) !important;
}

.btn-fly-reaction:active {
    transform: scale(0.9) !important;
}

.z-livechat-input-wrap {
    display: flex !important;
    padding: 8px !important;
    background: rgba(18, 11, 31, 0.9) !important;
    gap: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.livechat-cam-input {
    flex: 1 !important;
    background: rgba(30, 20, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 8px !important;
    padding: 7px 10px !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-family: inherit !important;
}

.livechat-cam-input:focus {
    outline: none !important;
    border-color: #a855f7 !important;
}

.btn-livechat-send {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* ========================================================
   CLIGNOTANT VERT ÉVÉNEMENT EN DIRECT (RADAR EX / POTES LIVE)
   ======================================================== */
.z-event-beacon-green {
    position: absolute !important;
    top: -7px !important;
    right: 14px !important;
    width: 14px !important;
    height: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 16 !important;
    cursor: pointer !important;
}

.beacon-core {
    width: 8px !important;
    height: 8px !important;
    background: #22c55e !important;
    border-radius: 50% !important;
    box-shadow: 0 0 8px #22c55e, 0 0 14px #4ade80 !important;
    animation: zBeaconCoreBlink 1s infinite alternate !important;
}

.beacon-ring {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border: 2px solid #22c55e !important;
    border-radius: 50% !important;
    animation: zBeaconWave 1.4s infinite cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

@keyframes zBeaconCoreBlink {
    0% { transform: scale(0.85); opacity: 0.7; }
    100% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px #22c55e, 0 0 20px #86efac; }
}

@keyframes zBeaconWave {
    0% { transform: scale(0.5); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

/* ========================================================
   GROUPES DE CLASSEMENT RAPIDES DES Z-CROISÉS (TAF, BÂTIMENT, VILLES, GARE...)
   ======================================================== */
.z-croises-groups-card {
    background: rgba(26, 17, 43, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    margin: 12px 16px !important;
    padding: 14px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
}

.z-groups-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    gap: 8px !important;
}

.z-groups-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-groups-icon {
    font-size: 18px !important;
    line-height: 1 !important;
}

.z-groups-title-wrap strong {
    font-size: 13px !important;
    color: #ffffff !important;
    display: block !important;
}

.z-groups-subtitle {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    margin: 1px 0 0 0 !important;
}

.btn-toggle-create-group {
    background: linear-gradient(135deg, #a855f7, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.btn-toggle-create-group:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.5) !important;
}

/* Formulaire de création à la volée */
.z-create-group-form {
    background: rgba(18, 11, 31, 0.85) !important;
    border: 1px solid rgba(168, 85, 247, 0.35) !important;
    border-radius: 10px !important;
    padding: 8px !important;
    margin-bottom: 12px !important;
    animation: zFadeIn 0.2s ease !important;
}

.z-create-group-row {
    display: flex !important;
    gap: 6px !important;
}

.input-new-group-name {
    flex: 1 !important;
    background: rgba(30, 20, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    font-size: 11.5px !important;
    color: #ffffff !important;
    font-family: inherit !important;
}

.input-new-group-name:focus {
    outline: none !important;
    border-color: #a855f7 !important;
}

.select-new-group-icon {
    background: rgba(30, 20, 50, 0.8) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 6px !important;
    padding: 6px 4px !important;
    font-size: 11px !important;
    color: #cbd5e1 !important;
}

.btn-save-new-group {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 0 10px !important;
    cursor: pointer !important;
}

/* Filtres de groupes */
.z-groups-filter-bar {
    display: flex !important;
    gap: 6px !important;
    overflow-x: auto !important;
    padding-bottom: 6px !important;
    margin-bottom: 12px !important;
    scrollbar-width: none !important;
}

.z-groups-filter-bar::-webkit-scrollbar {
    display: none !important;
}

.btn-group-filter {
    background: rgba(30, 20, 50, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    padding: 4px 10px !important;
    color: #cbd5e1 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: all 0.2s ease !important;
}

.btn-group-filter.active {
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    border-color: #d946ef !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(217, 70, 239, 0.35) !important;
}

.filter-count {
    font-size: 9.5px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    padding: 1px 5px !important;
    border-radius: 999px !important;
}

/* Liste des Z-Croisés classés */
.z-croises-people-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.z-croise-person-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(18, 11, 31, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 8px 10px !important;
    transition: all 0.2s ease !important;
}

.z-croise-person-row:hover {
    border-color: rgba(168, 85, 247, 0.4) !important;
    background: rgba(18, 11, 31, 0.85) !important;
}

.person-main-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.person-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #a855f7 !important;
}

.person-text {
    display: flex !important;
    flex-direction: column !important;
}

.person-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.person-link {
    font-size: 10px !important;
    color: #38bdf8 !important;
}

.person-tags-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    flex-wrap: wrap !important;
}

.person-tag {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    background: rgba(168, 85, 247, 0.2) !important;
    color: #d8b4fe !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

.person-tag.tag-taf {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.35) !important;
}

.person-tag.tag-batiment {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #fde047 !important;
    border-color: rgba(234, 179, 8, 0.35) !important;
}

.person-tag.tag-gare {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #fda4af !important;
    border-color: rgba(244, 63, 94, 0.35) !important;
}

.person-tag.tag-villes {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #6ee7b7 !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
}

.btn-add-tag-to-person {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px dashed rgba(255, 255, 255, 0.25) !important;
    color: #cbd5e1 !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-add-tag-to-person:hover {
    background: #a855f7 !important;
    color: #ffffff !important;
    border-style: solid !important;
}

/* ========================================================
   CARTE INVITATION Z-DATE DANS LE TCHAT
   ======================================================== */
.bubble-zdate-invite {
    background: linear-gradient(145deg, rgba(26, 15, 38, 0.95), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(168, 85, 247, 0.15) !important;
    max-width: 380px !important;
}

.tchat-msg-row.msg-me .bubble-zdate-invite {
    border-color: rgba(236, 72, 153, 0.4) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 15px rgba(236, 72, 153, 0.15) !important;
}

.zdate-tchat-card {
    margin-top: 8px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.zdate-tchat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(to bottom, #ec4899, #8b5cf6, #06b6d4);
}

.zdate-tchat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.zdate-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.25));
    border: 1px solid rgba(236, 72, 153, 0.5);
    color: #f472b6;
}

.zdate-tchat-time {
    font-size: 11px;
    font-weight: 600;
    color: #cbd5e1;
}

.zdate-tchat-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.zdate-tchat-title {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.zdate-tchat-venue {
    font-size: 11px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 4px;
}

.zdate-tchat-quote {
    font-size: 11.5px;
    font-style: italic;
    color: #e2e8f0;
    margin-top: 3px;
    line-height: 1.35;
    background: rgba(0, 0, 0, 0.2);
    padding: 5px 8px;
    border-radius: 8px;
}

.zdate-tchat-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.btn-zdate-accept {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35);
    transition: all 0.2s ease;
}

.btn-zdate-accept:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5);
    background: linear-gradient(135deg, #16a34a, #15803d);
}

.btn-zdate-cam {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ec4899, #a855f7);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.35);
    transition: all 0.2s ease;
}

.btn-zdate-cam:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.5);
}

.btn-zdate-reply,
.btn-zdate-agenda {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-zdate-reply:hover,
.btn-zdate-agenda:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.zdate-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.zdate-status-badge.accepted {
    background: rgba(34, 197, 94, 0.2);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.zdate-status-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* ========================================================
   BOUTON Z-QR DANS LA CARTE DU BAR (TCHAT DRAWER)
   ======================================================== */
.z-bar-menu-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.btn-open-z-qr-hub {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.2), rgba(168, 85, 247, 0.25)) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
    color: #e9d5ff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.2) !important;
}

.btn-open-z-qr-hub:hover {
    background: linear-gradient(135deg, #ec4899, #a855f7) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.4) !important;
}

/* ========================================================
   MODAL Z-QR HUB (SCRAPING & GÉNÉRATEUR)
   ======================================================== */
.z-qr-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(8, 3, 14, 0.8) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 9998 !important;
}

.z-qr-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 94% !important;
    max-width: 920px !important;
    max-height: 90vh !important;
    background: linear-gradient(145deg, #180d26, #0e0717) !important;
    border: 1.5px solid rgba(168, 85, 247, 0.35) !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.65), 0 0 35px rgba(168, 85, 247, 0.2) !important;
    border-radius: 24px !important;
    z-index: 9999 !important;
    overflow: hidden !important;
    display: none !important;
    flex-direction: column !important;
    font-family: "Outfit", -apple-system, sans-serif !important;
}

.z-qr-modal.open,
.z-qr-modal.is-open {
    display: flex !important;
}


.z-qr-modal-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
}

.z-qr-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 18px 24px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.z-qr-header-badge {
    display: inline-block !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    color: #f472b6 !important;
    background: rgba(236, 72, 153, 0.15) !important;
    border: 1px solid rgba(236, 72, 153, 0.4) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    text-transform: uppercase !important;
    margin-bottom: 4px !important;
}

.z-qr-header-title-wrap h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.z-qr-header-sub {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 3px 0 0 0 !important;
}

.z-qr-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #cbd5e1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.z-qr-close:hover {
    background: rgba(244, 63, 94, 0.3) !important;
    color: #ffffff !important;
    border-color: #f43f5e !important;
}

/* Onglets */
.z-qr-tabs-nav {
    display: flex !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 8px 16px !important;
    gap: 8px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.btn-z-qr-tab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: #94a3b8 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-z-qr-tab:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.btn-z-qr-tab.active {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.25), rgba(168, 85, 247, 0.3)) !important;
    border-color: rgba(168, 85, 247, 0.5) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.2) !important;
}

/* Contenu des onglets */
.z-qr-modal-body {
    padding: 20px 24px !important;
    overflow-y: auto !important;
    flex: 1 !important;
}

.z-qr-pane {
    display: none !important;
}

.z-qr-pane.active {
    display: block !important;
    animation: fadeIn 0.25s ease !important;
}

/* Layout Grille Onglet 1 */
.z-qr-grid-layout {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

@media (max-width: 768px) {
    .z-qr-grid-layout {
        grid-template-columns: 1fr !important;
    }
}

.z-qr-box, .z-qr-preview-box {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 18px !important;
    padding: 18px !important;
}

.z-qr-box h4, .z-qr-preview-box h4 {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 4px !important;
}

.box-desc {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-bottom: 16px !important;
}

.input-with-action {
    display: flex !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.btn-launch-scrap {
    white-space: nowrap !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35) !important;
}

.btn-launch-scrap:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.5) !important;
}

.qr-demo-shortcuts {
    margin-top: 18px !important;
    padding-top: 14px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.shortcuts-label {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.shortcut-pills {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.btn-qr-demo-preset {
    text-align: left !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-qr-demo-preset:hover {
    background: rgba(168, 85, 247, 0.15) !important;
    border-color: rgba(168, 85, 247, 0.4) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

/* Carte de synchronisation live */
.z-sync-status-card {
    margin-top: 16px !important;
    padding: 12px 14px !important;
    background: rgba(34, 197, 94, 0.1) !important;
    border: 1px solid rgba(34, 197, 94, 0.35) !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.status-indicator.live {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 10px #22c55e !important;
    animation: beaconPulse 1.4s infinite !important;
}

.status-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    font-size: 11px !important;
}

.status-text strong {
    color: #4ade80 !important;
}

.status-text span {
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    margin-top: 2px !important;
}

.btn-refresh-tarifs {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-refresh-tarifs:hover {
    background: #22c55e !important;
    border-color: #22c55e !important;
}

/* Prévisualisation de la carte */
.preview-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-bottom: 12px !important;
    margin-bottom: 14px !important;
}

.preview-badge-status {
    font-size: 11px !important;
    color: #94a3b8 !important;
    font-style: italic !important;
}

.btn-save-scraped-carte {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    color: #ffffff !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35) !important;
    transition: all 0.2s ease !important;
}

.btn-save-scraped-carte:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.5) !important;
}

.scraped-items-container {
    max-height: 380px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}

.empty-preview-hint {
    text-align: center !important;
    padding: 40px 20px !important;
    color: #64748b !important;
}

.hint-icon {
    font-size: 36px !important;
    margin-bottom: 10px !important;
}

.empty-preview-hint h5 {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    margin-bottom: 6px !important;
}

.scraped-cat-card {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-radius: 12px !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
}

.scraped-cat-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #c084fc !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-bottom: 6px !important;
}

.scraped-item-row {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 6px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}

.scraped-item-info {
    flex: 1 !important;
}

.scraped-item-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.scraped-item-desc {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    margin-top: 2px !important;
}

.scraped-item-price {
    font-size: 12.5px !important;
    font-weight: 800 !important;
    color: #4ade80 !important;
    white-space: nowrap !important;
}

/* Onglet 2 : Chevalet de table */
.z-qr-chevalet-preview-wrap {
    display: flex !important;
    gap: 28px !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .z-qr-chevalet-preview-wrap {
        flex-direction: column !important;
    }
}

.chevalet-preview-left {
    flex-shrink: 0 !important;
}

.chevalet-mockup {
    width: 290px !important;
    background: linear-gradient(160deg, #1b0f2a, #0f0719) !important;
    border: 2px solid rgba(168, 85, 247, 0.45) !important;
    border-radius: 24px !important;
    padding: 24px 18px !important;
    text-align: center !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 25px rgba(168, 85, 247, 0.2) !important;
}

.mockup-header-tag {
    display: inline-block !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #c084fc !important;
    background: rgba(168, 85, 247, 0.15) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    margin-bottom: 10px !important;
}

.mockup-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 4px 0 !important;
}

.mockup-sub {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    margin-bottom: 14px !important;
}

.mockup-qr-box {
    background: #ffffff !important;
    padding: 12px !important;
    border-radius: 16px !important;
    display: inline-block !important;
    position: relative !important;
    margin-bottom: 14px !important;
}

.mockup-qr-img {
    width: 170px !important;
    height: 170px !important;
    display: block !important;
}

.mockup-center-badge {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 40px !important;
    height: 40px !important;
    background: #1a0f26 !important;
    border: 2px solid #ffffff !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
}

.mockup-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
}

.chevalet-controls-right {
    flex: 1 !important;
}

.chevalet-controls-right h4 {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 6px !important;
}

.controls-sub {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin-bottom: 16px !important;
}

.control-group {
    margin-bottom: 12px !important;
}

.download-actions-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 18px !important;
}

.btn-print-chevalet {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #ec4899, #8b5cf6) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.4) !important;
    transition: all 0.2s ease !important;
}

.btn-print-chevalet:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(236, 72, 153, 0.55) !important;
}

.btn-download-qr-png {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-download-qr-png:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* Onglet 3 : Widget Site Web */
.z-widget-intro-card {
    background: rgba(168, 85, 247, 0.1) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    border-radius: 14px !important;
    padding: 14px 18px !important;
    margin-bottom: 16px !important;
}

.z-widget-intro-card h4 {
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #e9d5ff !important;
    margin-bottom: 4px !important;
}

.z-widget-intro-card p {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

.widget-snippet-box {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
    margin-bottom: 18px !important;
}

.snippet-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
}

.btn-copy-snippet {
    background: rgba(168, 85, 247, 0.2) !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    color: #e9d5ff !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-copy-snippet:hover {
    background: #a855f7 !important;
    color: #ffffff !important;
}

.snippet-code {
    background: #09040e !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 10px !important;
    padding: 12px !important;
    font-family: monospace !important;
    font-size: 11px !important;
    color: #67e8f9 !important;
    overflow-x: auto !important;
    white-space: pre-wrap !important;
}

.widget-live-preview-box {
    text-align: center !important;
    padding: 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.preview-label {
    display: block !important;
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin-bottom: 12px !important;
}

/* ========================================================
   Z-QUARTIER : SERVICES PUBLICS, MAIRIE, URGENCES & MARCHÉ
   ======================================================== */
.z-quartier-drawer {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10400 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: visibility 0.3s ease !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
}

.z-quartier-drawer.open {
    visibility: visible !important;
    pointer-events: auto !important;
}

.z-drawer-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(5, 2, 10, 0.4) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.z-quartier-drawer.open .z-drawer-backdrop {
    opacity: 1 !important;
}

.z-drawer-panel {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 520px !important;
    height: 100% !important;
    background: #0f081c !important;
    background: linear-gradient(180deg, #150b28 0%, #0c0617 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.7) !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow: hidden !important;
}

.z-quartier-drawer.open .z-drawer-panel {
    transform: translateX(0) !important;
}

/* En-tête drawer */
.z-drawer-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: 18px 20px 14px 20px !important;
    background: rgba(26, 14, 46, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.z-header-badge {
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #34d399 !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    margin-bottom: 4px !important;
}

.z-drawer-title {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 2px 0 6px 0 !important;
}

.z-drawer-city-meta {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    color: #94a3b8 !important;
}

.z-live-status-pill {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
}

.z-drawer-close {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

.z-drawer-close:hover {
    background: #f43f5e !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

/* Barre d'urgences 1-clic */
.z-emergency-quickbar {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    padding: 12px 18px !important;
    background: rgba(18, 9, 32, 0.9) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.emergency-quick-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 4px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.emergency-quick-btn .eq-icon {
    font-size: 18px !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
}

.emergency-quick-btn .eq-num {
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

.emergency-quick-btn .eq-label {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    margin-top: 3px !important;
    opacity: 0.9 !important;
}

.btn-fire {
    background: linear-gradient(135deg, #ef4444, #b91c1c) !important;
    color: #ffffff !important;
    border: 1px solid #f87171 !important;
}

.btn-samu {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border: 1px solid #fbbf24 !important;
}

.btn-police {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    border: 1px solid #60a5fa !important;
}

.btn-pharma {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    color: #ffffff !important;
    border: 1px solid #34d399 !important;
}

.emergency-quick-btn:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5) !important;
}

/* 4 Onglets City Desktop (Infos, Actus, Fil, Pratique - miroir version mobile) */
.z-city-mobile-tabs-desk {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.z-popover-city-tabs {
    background: rgba(101, 46, 113, 0.06) !important;
    border: 1px solid rgba(101, 46, 113, 0.15) !important;
    margin: 4px 0 10px 0 !important;
}

.city-desk-tab-pill {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 4px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    transition: all 0.2s ease !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.z-popover-city-tabs .city-desk-tab-pill {
    background: #ffffff !important;
    color: #4a154b !important;
    border: 1px solid rgba(101, 46, 113, 0.15) !important;
}

.city-desk-tab-pill:hover,
.city-desk-tab-pill.active {
    background: linear-gradient(135deg, #652e71, #8b5cf6) !important;
    color: #ffffff !important;
    border-color: #a855f7 !important;
    box-shadow: 0 4px 12px rgba(101, 46, 113, 0.35) !important;
    transform: translateY(-1px) !important;
}

.city-desk-tab-pill .cd-icon {
    font-size: 15px !important;
    line-height: 1 !important;
    margin-bottom: 2px !important;
}

.city-desk-tab-pill .cd-txt {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.3px !important;
}


/* Barre de recherche de services */
.z-services-search-wrap {
    padding: 12px 18px 8px 18px !important;
}

.z-search-input-box {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.z-search-icon {
    position: absolute !important;
    left: 14px !important;
    font-size: 14px !important;
    opacity: 0.6 !important;
    pointer-events: none !important;
}

.z-services-search-input {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 10px 36px 10px 38px !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    outline: none !important;
    transition: all 0.2s ease !important;
}

.z-services-search-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.3) !important;
}

.btn-clear-services-search {
    position: absolute !important;
    right: 12px !important;
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

/* Onglets de filtrage */
.z-services-nav-tabs {
    display: flex !important;
    gap: 6px !important;
    padding: 4px 18px 10px 18px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

.btn-service-tab {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.btn-service-tab.active {
    background: linear-gradient(135deg, #10b981, #0284c7) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Corps défilant */
.z-services-content-body {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 6px 18px 24px 18px !important;
}

.z-services-loading {
    text-align: center !important;
    padding: 30px 10px !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.z-service-spinner {
    width: 28px !important;
    height: 28px !important;
    border: 3px solid rgba(255, 255, 255, 0.1) !important;
    border-top-color: #34d399 !important;
    border-radius: 50% !important;
    animation: zSpinnerRotate 0.8s linear infinite !important;
    margin: 0 auto 10px auto !important;
}

@keyframes zSpinnerRotate {
    to { transform: rotate(360deg); }
}

.z-service-category-block {
    margin-bottom: 22px !important;
}

.z-cat-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.z-cat-icon {
    font-size: 20px !important;
}

.z-cat-header-text h4 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #f1f5f9 !important;
}

.z-cat-header-text p {
    margin: 2px 0 0 0 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.z-cat-badge {
    margin-left: auto !important;
    font-size: 9.5px !important;
    font-weight: 700 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #cbd5e1 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
}

/* Grille et cartes */
.z-service-items-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.z-service-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 14px !important;
    padding: 14px !important;
    transition: all 0.2s ease !important;
}

.z-service-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
    transform: translateY(-1px) !important;
}

.z-service-card.is-emergency-card {
    border-left: 3px solid #ef4444 !important;
    background: rgba(239, 68, 68, 0.05) !important;
}

.z-service-card-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 8px !important;
}

.z-service-title-wrap {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.z-service-emoji {
    font-size: 22px !important;
    line-height: 1 !important;
}

.z-service-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 2px 0 !important;
}

.z-service-subtitle {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.z-service-pill {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
}

.badge-red {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
}

.badge-blue {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.4) !important;
}

.badge-green, .badge-emerald {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
}

.badge-amber {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
}

.badge-purple, .badge-indigo {
    background: rgba(168, 85, 247, 0.2) !important;
    color: #c084fc !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
}

.badge-cyan {
    background: rgba(6, 182, 212, 0.2) !important;
    color: #67e8f9 !important;
    border: 1px solid rgba(6, 182, 212, 0.4) !important;
}

.badge-rose {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #fb7185 !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
}

.z-service-meta-row {
    font-size: 11px !important;
    color: #cbd5e1 !important;
    margin-bottom: 4px !important;
}

.meta-label {
    color: #94a3b8 !important;
    font-weight: 600 !important;
}

.z-service-desc {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin: 6px 0 8px 0 !important;
    line-height: 1.4 !important;
}

.z-service-actions-row {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin-top: 10px !important;
}

.btn-service-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-call-service {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
}

.btn-map-service {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-booking-service {
    background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
    color: #ffffff !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
}

.btn-service-action:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
}

/* Pied de tiroir */
.z-drawer-footer {
    padding: 12px 18px !important;
    background: rgba(15, 8, 28, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
}

/* Bouton dans le tchat drawer */
.btn-tchat-services {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(16, 185, 129, 0.15) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    color: #34d399 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-tchat-services:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* ========================================================
   Z-PRIVÉ : COFFRE-FORT INTIME, PROCHES & CHOSES DE LA VIE
   ======================================================== */
.z-prive-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    filter: none !important;
    backdrop-filter: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Outfit", "Inter", "Roboto", sans-serif !important;
}

.z-prive-modal.open,
.z-prive-modal.is-open {
    display: flex !important;
}

.z-prive-backdrop {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(8, 4, 16, 0.55) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.z-prive-container {
    position: relative !important;
    z-index: 2 !important;
    width: 95% !important;
    max-width: 1050px !important;
    max-height: 92vh !important;
    background: linear-gradient(145deg, #160a26 0%, #0d0517 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.85), 0 0 30px rgba(101, 46, 113, 0.25) !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    animation: zModalScale 0.28s ease-out !important;
}

/* Écran 1 : Lockscreen */
.z-prive-lockscreen {
    padding: 60px 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.z-prive-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    font-size: 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.z-prive-close:hover {
    background: #f43f5e !important;
    color: #ffffff !important;
    transform: rotate(90deg) !important;
}

.z-lock-shield {
    position: relative !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(101, 46, 113, 0.35), transparent 70%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 16px auto !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
}

.shield-icon {
    font-size: 38px !important;
}

.z-lock-title {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: 0.5px !important;
    margin: 0 0 6px 0 !important;
    background: linear-gradient(135deg, #ffffff, #c084fc) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.z-lock-sub {
    font-size: 13.5px !important;
    color: #94a3b8 !important;
    margin: 0 0 28px 0 !important;
}

.z-lock-form {
    width: 100% !important;
    max-width: 360px !important;
}

.z-lock-label {
    display: block !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    margin-bottom: 8px !important;
    text-align: left !important;
}

.z-pin-input-wrap {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 14px !important;
    padding: 0 12px !important;
    margin-bottom: 12px !important;
    transition: all 0.2s ease !important;
}

.z-pin-input-wrap:focus-within {
    border-color: #a855f7 !important;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.35) !important;
}

.zprive-passwd-input {
    flex: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 12px 6px !important;
    font-size: 16px !important;
    letter-spacing: 3px !important;
    outline: none !important;
    -webkit-text-security: disc !important;
    caret-color: #ffffff !important;
}

/* Neutralisation totale et agressive du pavé jaune d'autofill navigateur */
.zprive-passwd-input:-webkit-autofill,
.zprive-passwd-input:-webkit-autofill:hover,
.zprive-passwd-input:-webkit-autofill:focus,
.zprive-passwd-input:-webkit-autofill:active,
.zprive-passwd-input:-moz-autofill,
.zprive-passwd-input:autofill {
    -webkit-box-shadow: 0 0 0 1000px #1a0f2b inset !important;
    box-shadow: 0 0 0 1000px #1a0f2b inset !important;
    -webkit-text-fill-color: #ffffff !important;
    caret-color: #ffffff !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 50000s ease-in-out 0s !important;
}

.btn-toggle-show-passwd {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    font-size: 16px !important;
}

.z-lock-error {
    color: #f87171 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}

.btn-unlock-zprive {
    width: 100% !important;
    padding: 12px 20px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #652e71, #8b5cf6) !important;
    border: 1px solid #a855f7 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    box-shadow: 0 6px 20px rgba(101, 46, 113, 0.4) !important;
    transition: all 0.2s ease !important;
}

.btn-unlock-zprive:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.6) !important;
}

.z-pin-hint {
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 14px !important;
}

/* Écran 2 : Vault Déverrouillé - Masquage absolu tant que le conteneur n'a pas la classe unlocked */
.z-prive-vault {
    display: none !important;
    flex-direction: column !important;
    height: 100% !important;
    max-height: 92vh !important;
}

.z-prive-container.unlocked .z-prive-vault {
    display: flex !important;
}

.z-prive-container.unlocked .z-prive-lockscreen {
    display: none !important;
}

.z-prive-container:not(.unlocked) .z-prive-lockscreen {
    display: flex !important;
}

.z-prive-container:not(.unlocked) .z-prive-vault {
    display: none !important;
}

.z-prive-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 22px !important;
    background: rgba(22, 10, 38, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.z-prive-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-prive-brand h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    color: #fbbf24 !important;
}

.zp-secure-pill {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}

.zp-tagline {
    font-size: 11.5px !important;
    color: #94a3b8 !important;
    margin: 2px 0 0 0 !important;
}

.z-prive-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.btn-zp-action {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-zp-add-card {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    border: 1px solid #fbbf24 !important;
}

.btn-zp-invite-peer {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    color: #ffffff !important;
    border: 1px solid #a78bfa !important;
}

.btn-zp-lock {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #e2e8f0 !important;
    padding: 7px 12px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.btn-zp-action:hover, .btn-zp-lock:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
}

/* Catégories de vie intime */
.zp-categories-scroll {
    display: flex !important;
    gap: 6px !important;
    padding: 10px 22px !important;
    background: rgba(14, 6, 25, 0.8) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
}

.zp-cat-chip {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-shrink: 0 !important;
}

.zp-cat-chip.active {
    background: linear-gradient(135deg, #f59e0b, #ec4899) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.zp-cat-count {
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 1px 6px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
}

/* Formulaires rétractables */
.zp-empty-form-drawer, .zp-invite-drawer {
    padding: 16px 22px !important;
    background: rgba(20, 8, 35, 0.98) !important;
    border-bottom: 1.5px solid rgba(245, 158, 11, 0.3) !important;
    animation: zFadeIn 0.25s ease !important;
}

.zp-form-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 16px !important;
}

.zp-form-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.zp-form-badge {
    display: inline-block !important;
    font-size: 9.5px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    margin-bottom: 4px !important;
}

.badge-reciprocal {
    background: rgba(139, 92, 246, 0.2) !important;
    color: #c084fc !important;
    border-color: rgba(139, 92, 246, 0.4) !important;
}

.zp-form-title-wrap h4 {
    margin: 0 !important;
    font-size: 15px !important;
    color: #ffffff !important;
}

.zp-form-strict-note {
    font-size: 11.5px !important;
    color: #fbbf24 !important;
    margin: 4px 0 0 0 !important;
}

.zp-close-form {
    background: none !important;
    border: none !important;
    color: #94a3b8 !important;
    font-size: 16px !important;
    cursor: pointer !important;
}

.zp-form-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.zp-field-group label {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    margin-bottom: 5px !important;
}

.zp-input, .zp-select, .zp-textarea {
    width: 100% !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    outline: none !important;
}

.zp-input:focus, .zp-select:focus, .zp-textarea:focus {
    border-color: #fbbf24 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.25) !important;
}

.zp-tag-input-wrap {
    display: flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 10px !important;
    padding: 0 10px !important;
}

.zp-tag-prefix {
    color: #fbbf24 !important;
    font-weight: 800 !important;
}

.zp-tag-input-wrap .zp-input {
    background: none !important;
    border: none !important;
    padding-left: 4px !important;
}

.zp-form-footer {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

.btn-zp-cancel {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: #94a3b8 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

.btn-zp-save {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

.btn-zp-send-invite {
    background: linear-gradient(135deg, #8b5cf6, #6366f1) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

/* Grille des cartes intimes */
.zp-cards-container {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 16px 22px 24px 22px !important;
}

.zp-cards-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important;
    gap: 14px !important;
}

.zp-entry-card {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 14px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}

.zp-entry-card:hover {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
    transform: translateY(-2px) !important;
}

.zp-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 10px !important;
}

.zp-card-avatar {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    background: rgba(245, 158, 11, 0.15) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.zp-card-title-group h5 {
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.zp-card-category-tag {
    font-size: 10.5px !important;
    color: #fbbf24 !important;
    font-weight: 700 !important;
}

.zp-card-body {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    line-height: 1.4 !important;
}

.zp-card-date {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    margin-bottom: 4px !important;
}

.zp-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.zp-pill-private {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.zp-pill-reciprocal {
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #4ade80 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.btn-zp-delete-entry {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    cursor: pointer !important;
    font-size: 12px !important;
    transition: color 0.2s ease !important;
}

.btn-zp-delete-entry:hover {
    color: #f43f5e !important;
}

/* ========================================================
   POPOVER SERVICES PUBLICS & SECOURS (SOUS L'ONGLET Z-QUARTIER)
   ======================================================== */
.z-quartier-dropdown-wrapper {
    position: relative !important;
    display: inline-block !important;
}

.z-quartier-services-popover {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 320px !important;
    max-width: 90vw !important;
    background: #ffffff !important;
    border-radius: 18px !important;
    border: 1px solid rgba(101, 46, 113, 0.15) !important;
    box-shadow: 0 20px 50px rgba(45, 15, 55, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    font-family: "Outfit", "Inter", "Segoe UI", sans-serif !important;
    animation: popoverFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes popoverFadeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.popover-services-header {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    padding: 12px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    position: relative !important;
}

.popover-services-header .pop-icon {
    font-size: 20px !important;
}

.pop-header-text strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.pop-header-text small {
    display: block !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-top: 2px !important;
}

.pop-close-btn {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: #ffffff !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background 0.15s ease !important;
}

.pop-close-btn:hover {
    background: rgba(255, 255, 255, 0.4) !important;
}

.popover-services-list {
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    max-height: 380px !important;
    overflow-y: auto !important;
}

.popover-service-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    background: #f8fafc !important;
    border: 1px solid rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

.popover-service-item:hover {
    background: #f1f5f9 !important;
    transform: translateY(-1px) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.srv-badge-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.srv-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.srv-name {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.2 !important;
}

.srv-desc {
    display: block !important;
    font-size: 11px !important;
    color: #64748b !important;
    margin-top: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.srv-action-btn {
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.srv-action-call {
    padding: 4px 10px !important;
    border-radius: 8px !important;
    background: #fee2e2 !important;
    color: #dc2626 !important;
    border: 1px solid #fca5a5 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    flex-shrink: 0 !important;
}

.popover-service-item.item-urgences .srv-action-call {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #ffffff !important;
    border: none !important;
}

.popover-service-item.item-police .srv-action-call {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
    color: #ffffff !important;
    border: none !important;
}

.popover-service-item.item-sante .srv-action-call {
    background: linear-gradient(135deg, #10b981, #047857) !important;
    color: #ffffff !important;
    border: none !important;
}

.popover-services-footer {
    padding: 8px 12px 10px !important;
    background: #f8fafc !important;
    border-top: 1px solid #f1f5f9 !important;
    text-align: center !important;
}

.btn-popover-open-drawer {
    width: 100% !important;
    padding: 8px !important;
    border-radius: 10px !important;
    background: transparent !important;
    border: 1px dashed rgba(16, 185, 129, 0.6) !important;
    color: #059669 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.btn-popover-open-drawer:hover {
    background: #ecfdf5 !important;
    border-color: #059669 !important;
}

/* ========================================================
   MODAL Z-SHORT QUARTIER : PLAYER VERTICAL 9:16 & STUDIO
   ======================================================== */
.z-short-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 2147483647 !important;
    filter: none !important;
    backdrop-filter: none !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: "Outfit", "Inter", sans-serif !important;
}

.z-short-modal.open,
.z-short-modal.is-open {
    display: flex !important;
}

.z-short-backdrop {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(8, 4, 15, 0.6) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.z-short-wrapper {
    position: relative !important;
    z-index: 2 !important;
    width: 95% !important;
    max-width: 950px !important;
    height: 92vh !important;
    max-height: 860px !important;
    background: #0f071d !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.75), 0 0 50px rgba(236, 72, 153, 0.2) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Top bar Z-Short */
.z-short-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    background: rgba(18, 10, 33, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    flex-shrink: 0 !important;
    gap: 12px !important;
}

.z-short-brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-short-logo-text {
    font-size: 18px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.z-short-city-badge {
    padding: 2px 8px !important;
    border-radius: 10px !important;
    background: rgba(236, 72, 153, 0.18) !important;
    color: #f472b6 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.z-short-nav-filters {
    display: flex !important;
    gap: 6px !important;
}

.z-short-filter-btn {
    padding: 6px 14px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.z-short-filter-btn.active,
.z-short-filter-btn:hover {
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    color: #ffffff !important;
    border-color: transparent !important;
}

.z-short-top-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.btn-zshort-compose {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 16px !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
    transition: transform 0.15s ease !important;
}

.btn-zshort-compose:hover {
    transform: translateY(-1px) scale(1.02) !important;
}

.btn-zshort-close {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}

.btn-zshort-close:hover {
    background: rgba(239, 68, 68, 0.8) !important;
}

/* Stage Player Vertical */
.z-short-main-stage {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 16px !important;
    gap: 24px !important;
}

.z-short-card-container {
    position: relative !important;
    width: 380px !important;
    height: 100% !important;
    max-height: 720px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #000000 !important;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
}

.z-short-video-wrapper {
    position: absolute !important;
    inset: 0 !important;
    background: #000000 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.z-short-native-video,
.z-short-embed-iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border: none !important;
}

.z-short-play-trigger {
    position: absolute !important;
    inset: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    background: rgba(0, 0, 0, 0.2) !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
}

.z-short-play-trigger.paused {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

.play-symbol {
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    background: rgba(236, 72, 153, 0.9) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 26px !important;
    padding-left: 4px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5) !important;
}

.z-short-platform-badge {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(6px) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.z-short-mute-btn {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Sidebar d'actions sur la vidéo */
.z-short-sidebar-actions {
    position: absolute !important;
    bottom: 24px !important;
    right: 12px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    z-index: 10 !important;
}

.z-short-author-bubble {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid #ec4899 !important;
    overflow: visible !important;
}

.author-avatar-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.author-verified-star {
    position: absolute !important;
    bottom: -4px !important;
    right: -4px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #10b981 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid #000000 !important;
}

.z-short-act-btn {
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(6px) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    color: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.15s ease !important;
}

.z-short-act-btn:hover {
    transform: scale(1.1) !important;
}

.z-short-act-btn .act-icon {
    font-size: 18px !important;
}

.z-short-act-btn .act-count,
.z-short-act-btn .act-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    margin-top: 1px !important;
}

.z-short-act-btn.btn-date {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6) !important;
    border-radius: 12px !important;
    height: auto !important;
    padding: 6px 4px !important;
}

/* Infos en bas du Short */
.z-short-bottom-info {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 68px !important;
    padding: 20px 16px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%) !important;
    color: #ffffff !important;
    z-index: 9 !important;
}

.author-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 6px !important;
}

.author-row .author-name {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.author-row .author-ztag {
    font-size: 12px !important;
    color: #f472b6 !important;
}

.author-owner-badge {
    padding: 2px 6px !important;
    border-radius: 6px !important;
    background: rgba(16, 185, 129, 0.25) !important;
    border: 1px solid rgba(16, 185, 129, 0.5) !important;
    color: #10b981 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
}

.z-short-title {
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    margin: 0 0 8px 0 !important;
    color: #ffffff !important;
}

.z-short-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
}

.short-tag {
    font-size: 11px !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

.z-short-venue-cta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    backdrop-filter: blur(6px) !important;
}

.venue-name {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    flex: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.btn-venue-action {
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Contrôles verticaux Suivant / Précédent */
.z-short-controls-vertical {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.btn-zshort-nav {
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-zshort-nav:hover {
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    transform: scale(1.1) !important;
}

.z-short-pagination {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* Studio de composition Z-Short */
.z-short-compose-stage {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 24px !important;
    display: flex !important;
    justify-content: center !important;
}

.z-short-compose-card {
    width: 100% !important;
    max-width: 620px !important;
    background: #180d2e !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 20px !important;
    padding: 24px !important;
}

.compose-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
}

.compose-badge {
    display: inline-block !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
}

.compose-title-group h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.compose-title-group p {
    font-size: 12px !important;
    color: #94a3b8 !important;
    margin: 4px 0 0 0 !important;
}

.btn-compose-back {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: #cbd5e1 !important;
    padding: 6px 12px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
}

.compose-type-tabs {
    display: flex !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
}

.compose-type-option {
    flex: 1 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s ease !important;
}

.compose-type-option.active,
.compose-type-option:has(input:checked) {
    background: rgba(236, 72, 153, 0.15) !important;
    border-color: #ec4899 !important;
    color: #ffffff !important;
}

.platform-chips-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 8px 0 16px 0 !important;
}

.platform-chip {
    padding: 6px 12px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.platform-chip:has(input:checked) {
    background: #ffffff !important;
    color: #0f172a !important;
    border-color: #ffffff !important;
    font-weight: 700 !important;
}

.form-group-styled {
    margin-bottom: 16px !important;
}

.form-label-styled {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #cbd5e1 !important;
    margin-bottom: 6px !important;
}

.input-styled {
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    outline: none !important;
}

.input-styled:focus {
    border-color: #ec4899 !important;
    box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.2) !important;
}

.input-hint {
    display: block !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
}

.form-row-2col {
    display: flex !important;
    gap: 12px !important;
}

.form-row-2col .form-group-styled {
    flex: 1 !important;
}

/* Bloc Dropzone Upload Vidéo */
.file-dropzone-styled {
    padding: 24px !important;
    border: 2px dashed rgba(236, 72, 153, 0.5) !important;
    border-radius: 16px !important;
    text-align: center !important;
    background: rgba(236, 72, 153, 0.05) !important;
    margin-bottom: 16px !important;
}

.dropzone-icon {
    font-size: 32px !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.file-dropzone-styled strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 13px !important;
}

.file-dropzone-styled p {
    color: #94a3b8 !important;
    font-size: 11px !important;
    margin: 4px 0 12px 0 !important;
}

.btn-styled-outline {
    background: transparent !important;
    border: 1px solid #ec4899 !important;
    color: #f472b6 !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

/* Certification Paternité de l'Auteur Obligatoire */
.ownership-certificate-box {
    padding: 12px 14px !important;
    border-radius: 12px !important;
    background: rgba(16, 185, 129, 0.1) !important;
    border: 1.5px solid rgba(16, 185, 129, 0.4) !important;
    margin: 16px 0 !important;
}

.certificate-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
}

.certificate-checkbox-label input {
    margin-top: 3px !important;
    accent-color: #10b981 !important;
    width: 16px !important;
    height: 16px !important;
}

.certif-text {
    font-size: 12px !important;
    color: #d1fae5 !important;
    line-height: 1.4 !important;
}

.certif-text strong {
    color: #34d399 !important;
    display: block !important;
    margin-bottom: 2px !important;
}

.compose-footer-actions {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: 20px !important;
}

.compose-footer-actions .btn-cancel {
    padding: 10px 18px !important;
    border-radius: 12px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: none !important;
    color: #cbd5e1 !important;
    font-size: 13px !important;
    cursor: pointer !important;
}

.compose-footer-actions .btn-submit-publish {
    padding: 10px 24px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #ec4899, #f43f5e) !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(236, 72, 153, 0.4) !important;
    transition: transform 0.15s ease !important;
}

.compose-footer-actions .btn-submit-publish:hover {
    transform: translateY(-1px) scale(1.02) !important;
}

/* Bannière Infos & Vie Pratique de la Ville dans le tiroir Z-Quartier */
.z-infos-pratique-card-banner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 16px !important;
    margin: 12px 18px 8px 18px !important;
    background: linear-gradient(135deg, rgba(101, 46, 113, 0.25) 0%, rgba(139, 92, 246, 0.2) 100%) !important;
    border: 1.5px solid rgba(192, 132, 252, 0.45) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(101, 46, 113, 0.2) !important;
}

.z-infos-banner-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #652e71, #8b5cf6) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    color: #ffffff !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(101, 46, 113, 0.35) !important;
}

.z-infos-banner-text {
    flex: 1 !important;
    min-width: 0 !important;
}

.z-infos-banner-text strong {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

.z-infos-banner-text p {
    font-size: 11px !important;
    color: #cbd5e1 !important;
    margin: 3px 0 0 0 !important;
    line-height: 1.35 !important;
}

.btn-goto-city-pratique {
    padding: 8px 14px !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #652e71, #8b5cf6) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(101, 46, 113, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.btn-goto-city-pratique:hover {
    transform: translateY(-1px) scale(1.03) !important;
    box-shadow: 0 5px 15px rgba(139, 92, 246, 0.45) !important;
    color: #ffffff !important;
}

/* ========================================================
   CORRECTION MAJEURE SUPERPOSITION DESKTOP & CHOIX VILLE
   ======================================================== */

/* 1. Sécurité absolue : les popups Choix Ville et Moteur ne doivent JAMAIS apparaître dans le flux normal de la page */
body > #vue_choose_city:not(.ui-dialog-content),
body > #vue_moteur:not(.ui-dialog-content),
#vue_choose_city:not(.ui-dialog-content),
#vue_moteur:not(.ui-dialog-content) {
    display: none !important;
}



/* 2. Empilement propre de la section Smart City */
#smart_city {
    clear: both !important;
    position: relative !important;
    display: block !important;
    margin-top: 40px !important;
    z-index: 2 !important;
    width: 100% !important;
}

.front-categories.horizontal {
    clear: both !important;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 20px !important;
}

.front-categories .cat-itens {
    clear: both !important;
    position: relative !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 15px !important;
}

/* 3. Bouton choix ville Casablanca : clic direct et priorité absolue */
.search-cities-toggle {
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.search-cities-toggle * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ==========================================================================
   POPUP CHOIX DE LA VILLE (#vue_choose_city / .ui_vue_choose_city)
   FONCTIONNEMENT UNIVERSEL : DESKTOP & MOBILE (F12 SIMULATION INCLUSE)
   ========================================================================== */

.ui_vue_choose_city,
.ui-dialog.ui_vue_choose_city,
div.ui-dialog.ui_vue_choose_city {
    position: fixed !important;
    top: 245px !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
    -webkit-transform: translateX(-50%) !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 2px solid #652e71 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 92vw !important;
    max-width: 580px !important;
    min-height: 440px !important;
    height: auto !important;
    max-height: calc(100vh - 265px) !important;
    overflow-y: auto !important;
    padding: 16px 20px !important;
}

@media (max-width: 767px) {
    .ui_vue_choose_city,
    .ui-dialog.ui_vue_choose_city,
    div.ui-dialog.ui_vue_choose_city {
        top: 75px !important;
        max-height: calc(100vh - 90px) !important;
        width: 95vw !important;
        padding: 12px 10px !important;
    }
}

.ui_vue_choose_city #vue_choose_city,
#vue_choose_city.ui-dialog-content {
    display: block !important;
    width: 100% !important;
    min-height: 380px !important;
    height: auto !important;
    max-height: calc(100vh - 280px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

#fond_vue {
    z-index: 999990 !important;
}

.ui_vue_moteur,
.ui-dialog.ui_vue_moteur,
div.ui-dialog.ui_vue_moteur {
    z-index: 999995 !important;
}

.ui_vue_moteur .search_area,
.ui_vue_moteur #search_home,
.ui_vue_moteur #search_home_qui {
    position: relative !important;
    z-index: 999996 !important;
    pointer-events: auto !important;
}

#close_vue_moteur,
#back_vue_moteur {
    z-index: 999998 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.autocomplete-suggestions {
    z-index: 999997 !important;
    pointer-events: auto !important;
}

.autocomplete-suggestions .autocomplete-suggestion {
    pointer-events: auto !important;
    cursor: pointer !important;
}

.autocomplete-suggestions .autocomplete-suggestion * {
    pointer-events: auto !important;
}

/* Fallback si non initialisé comme ui-dialog */
body > #vue_choose_city.open-fallback,
#vue_choose_city.open-fallback {
    display: block !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    width: 95vw !important;
    max-width: 580px !important;
    min-height: 480px !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    z-index: 100050 !important;
    padding: 16px 20px !important;
    border: 2px solid #652e71 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

#vue_choose_city .cities-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 15px !important;
    width: 100% !important;
    clear: both !important;
}

/* ==========================================================================
   STYLE MODALE VOYAGE / FILTRE DE RECHERCHE VILLES & QUARTIERS (SOTRANSACT)
   ========================================================================== */

.travel-modal-accent-bar {
    height: 4px;
    background: linear-gradient(90deg, #10b981 0%, #652e71 50%, #8e44ad 100%);
    border-radius: 4px 4px 0 0;
    margin: -16px -20px 14px -20px;
}

.travel-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.travel-modal-title-wrap {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.travel-modal-tag {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: #10b981;
}

.travel-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin: 0;
    line-height: 1.25;
}

.travel-modal-close {
    background: transparent;
    border: none;
    font-size: 26px;
    line-height: 1;
    color: #95a5a6;
    cursor: pointer;
    padding: 0 4px;
    transition: color 0.2s;
}

.travel-modal-close:hover {
    color: #e74c3c;
}

.travel-active-city-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fdf7fe;
    border: 1px solid #ebd3f2;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #4a235a;
}

.travel-active-city-icon {
    font-size: 16px;
}

.travel-field-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #576574;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.travel-country-section {
    margin-bottom: 14px;
}

.travel-country-dropdown-wrap {
    position: relative;
    width: 100%;
}

.travel-country-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    background: #ffffff;
    border: 1.5px solid #dcdde1;
    border-radius: 8px;
    padding: 10px 36px 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #2f3542;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.travel-country-select:focus {
    border-color: #652e71;
    outline: none;
    box-shadow: 0 0 0 3px rgba(101, 46, 113, 0.15);
}

.travel-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #747d8c;
    font-size: 12px;
}

.travel-input-section {
    margin-bottom: 14px;
}

.travel-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.travel-search-icon {
    position: absolute;
    left: 14px;
    color: #a4b0be;
    font-size: 15px;
    pointer-events: none;
}

.travel-search-input {
    width: 100%;
    padding: 11px 40px 11px 38px;
    font-size: 14px;
    border: 2px solid #652e71;
    border-radius: 8px;
    background: #ffffff;
    color: #2f3542;
    transition: box-shadow 0.2s;
    box-sizing: border-box;
}

.travel-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(101, 46, 113, 0.2);
}

.travel-clear-btn {
    position: absolute;
    right: 12px;
    background: #dfe4ea;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    color: #57606f;
    cursor: pointer;
}

.travel-clear-btn:hover {
    background: #ced6e0;
    color: #2f3542;
}

.travel-spinner {
    position: absolute;
    right: 12px;
    width: 18px;
    height: 18px;
    border: 2px solid #e2bee8;
    border-top: 2px solid #652e71;
    border-radius: 50%;
    animation: travelSpin 0.7s linear infinite;
}

@keyframes travelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Suggestions Autocomplete Liste (Style Sotransact) */
.travel-results-container {
    margin-bottom: 16px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.travel-results-header {
    background: #ebf5fb;
    color: #1b6ca8;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 14px;
    border: 1px solid #d4e6f1;
    border-bottom: 2px solid #2980b9;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.travel-results-list {
    max-height: 260px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dcdde1;
    border-top: none;
}

.travel-result-row {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f2f6;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.4;
    color: #2c3e50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s ease, color 0.15s ease;
}

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

.travel-result-row:hover,
.travel-result-row.selected {
    background: #f8f1fb;
    color: #652e71;
}

.travel-result-row:hover .travel-row-arrow {
    transform: translateX(3px);
    color: #652e71;
}

.travel-row-main {
    flex: 1;
    padding-right: 10px;
}

.travel-row-name {
    font-weight: 700;
    color: #2f3542;
}

.travel-result-row:hover .travel-row-name {
    color: #652e71;
}

.travel-row-meta {
    color: #747d8c;
    font-size: 12px;
}

.travel-row-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    background: #f0e4f5;
    color: #652e71;
    margin-left: 6px;
    text-transform: uppercase;
}

.travel-row-arrow {
    font-size: 14px;
    color: #ced6e0;
    transition: transform 0.15s, color 0.15s;
}

.travel-no-results {
    padding: 18px 14px;
    text-align: center;
    color: #747d8c;
    font-size: 13px;
    background: #ffffff;
    border: 1px solid #dcdde1;
    border-top: none;
}

/* Quick Hubs */
.travel-quick-hubs {
    margin-bottom: 16px;
}

.travel-quick-title {
    font-size: 12px;
    font-weight: 700;
    color: #747d8c;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.travel-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media (max-width: 600px) {
    .travel-quick-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.travel-quick-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    background: #f8f9fa;
    border: 1.5px solid #e9ecef;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.travel-quick-btn strong {
    font-size: 13px;
    color: #2f3542;
}

.travel-quick-btn span {
    font-size: 10px;
    color: #8395a7;
    margin-top: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.travel-quick-btn:hover {
    border-color: #652e71;
    background: #fdf8fe;
    transform: translateY(-1px);
}

.travel-quick-btn.active {
    border-color: #652e71;
    background: #652e71;
}

.travel-quick-btn.active strong,
.travel-quick-btn.active span {
    color: #ffffff;
}

/* Footer Sotransact Style */
.travel-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #edf0f2;
}

.travel-footer-btn {
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.travel-footer-gps {
    background: #652e71;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 6px;
}

.travel-footer-gps:hover {
    background: #4a1d56;
}

.travel-footer-reset {
    background: #10b981;
    color: #ffffff;
}

.travel-footer-reset:hover {
    background: #059669;
}

.travel-footer-close {
    background: #f1f2f6;
    color: #57606f;
}

.travel-footer-close:hover {
    background: #dfe4ea;
    color: #2f3542;
}


/* En affichage mobile (<= 767px ou simulation F12) */
@media (max-width: 767px) {
    .ui_vue_choose_city,
    .ui-dialog.ui_vue_choose_city,
    div.ui-dialog.ui_vue_choose_city {
        width: 95vw !important;
        max-width: 440px !important;
        height: auto !important;
        max-height: 90vh !important;
        padding: 12px 8px 16px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #vue_choose_city {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(90vh - 40px) !important;
        padding: 0 4px !important;
        margin: 0 auto !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
    }

    #vue_choose_city .sellzone_vue {
        margin: 4px 0 8px !important;
    }

    #vue_choose_city .cities-list {
        margin-top: 10px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    #vue_choose_city .select_city {
        width: 48% !important;
        margin: 2px 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    #vue_choose_city .cities-list a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 160px !important;
        margin: 2px !important;
        font-size: 11px !important;
        box-sizing: border-box !important;
    }

    #vue_choose_city .cities-list a span {
        width: 100% !important;
        max-width: 160px !important;
        padding: 6px 4px !important;
        font-size: 11px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* ==========================================================================
       RESPONSIVE MOBILE HOME (DESKTOP EN ÉMULATION / FORMAT SMARTPHONE < 768px)
       ========================================================================== */

    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    #home_zelift,
    .container-fluid,
    .hero-header,
    .header-centralizer,
    .content-centralized {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Recadrage net et stable de l'image de fond sur mobile (neutralise le zoom 400%) */
    #home_zelift .hero-header,
    .hero-header {
        height: auto !important;
        min-height: 100vh !important;
        background-size: cover !important;
        background-position: center 20% !important;
        background-repeat: no-repeat !important;
        padding-top: 10px !important;
        padding-bottom: 40px !important;
        box-sizing: border-box !important;
    }

    .hero-slideshow,
    .hero-slideshow .hero-slide,
    .h-slideshow .hero-image,
    .hero-image,
    .current-slide {
        background-size: cover !important;
        background-position: center 20% !important;
        background-repeat: no-repeat !important;
        -webkit-transform: none !important;
        transform: none !important;
        animation: none !important;
    }

    /* Voile dégradé violet profond : assure un contraste parfait sans zoom agressif */
    .hero-header .overlay,
    .hero-header.transparent .overlay {
        background: linear-gradient(180deg, rgba(25, 10, 32, 0.72) 0%, rgba(55, 18, 70, 0.82) 45%, rgba(20, 8, 28, 0.92) 100%) !important;
        display: block !important;
        opacity: 1 !important;
        z-index: 1 !important;
    }

    .header-centralizer {
        margin-top: 20px !important;
        padding-top: 0 !important;
        width: 100% !important;
        position: relative !important;
        z-index: 5 !important;
    }

    /* Conteneur de recherche compact et parfaitement centré */
    #home_zelift .hero-search {
        width: 94% !important;
        max-width: 440px !important;
        margin: 60px auto 0 !important;
        padding: 0 !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        min-height: auto !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    #home_zelift .hero-search form {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        position: relative !important;
    }

    #home_zelift .hero-search form fieldset {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Onglets Z-Recherche / Z-Shorts / Croisés */
    .hero-z-tabs-container {
        width: 100% !important;
        margin-bottom: 46px !important; /* Laisse l'espace pour l'onglet ville */
        padding: 0 !important;
    }

    .hero-z-tabs {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
        padding: 2px !important;
    }

    .hero-z-tab {
        flex-shrink: 0 !important;
        height: 32px !important;
        padding: 0 12px !important;
        font-size: 12px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    /* Bouton Choix de la ville (Paris 📍 / Dijon 📍) */
    #home_zelift .search-cities-toggle {
        position: absolute !important;
        top: 0 !important;
        margin-top: -38px !important;
        right: 6px !important;
        height: 38px !important;
        padding: 0 14px !important;
        border-radius: 8px 8px 0 0 !important;
        background: #652e71 !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        z-index: 25 !important;
        cursor: pointer !important;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2) !important;
    }

    #home_zelift .search-cities-toggle:hover {
        margin-top: -38px !important;
        height: 38px !important;
    }

    #home_zelift #chosen_city_name {
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        margin-top: 0 !important;
        float: none !important;
    }

    #home_zelift .icon_marker {
        font-size: 15px !important;
        color: #ffffff !important;
        margin-top: 0 !important;
        float: none !important;
    }

    /* Barre de recherche blanche en forme de pilule */
    #home_zelift #open_moteur {
        width: 100% !important;
        height: 50px !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        position: relative !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16) !important;
        box-sizing: border-box !important;
    }

    #home_zelift .hero-search-icon.searchIcon {
        width: 50px !important;
        height: 50px !important;
        left: 0 !important;
        top: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #652e71 !important;
        position: absolute !important;
    }

    #home_zelift .hero-search-icon.searchIcon:before {
        display: none !important;
    }

    #home_zelift .hero-search-icon.searchIcon .hero-search-loupe {
        width: 20px !important;
        height: 20px !important;
        color: #ffffff !important;
        stroke: #ffffff !important;
    }

    #home_zelift #text_typing,
    #home_zelift .typingEffect {
        left: 56px !important;
        right: 14px !important;
        font-size: 13.5px !important;
        color: #71717a !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Slogan #RECHERCHER AUTREMENT... */
    #home_zelift #proposition {
        font-size: 22px !important;
        line-height: 1.3 !important;
        margin: 20px auto 10px !important;
        padding: 0 10px !important;
        white-space: normal !important;
        text-align: center !important;
        word-break: break-word !important;
        color: #ffffff !important;
    }

    #home_zelift #proposition span {
        font-size: 22px !important;
        color: #ffffff !important;
    }

    /* Train de chameaux : confiné sans débordement horizontal */
    .camel-run {
        width: 100% !important;
        left: 0 !important;
        margin: 10px 0 0 0 !important;
        overflow: hidden !important;
        height: 140px !important;
        position: relative !important;
        pointer-events: none !important;
    }

    .camel-svg {
        width: 520px !important;
        max-width: none !important;
        height: auto !important;
    }

    .camel-card {
        min-width: 130px !important;
        max-width: 175px !important;
        padding: 6px 10px !important;
        bottom: 75px !important;
        font-size: 11px !important;
        border-radius: 10px !important;
    }

    /* Grille des 16 catégories sous le train */
    #home_zelift .search-categories {
        width: 96% !important;
        margin: 10px auto 20px !important;
        padding: 0 !important;
        left: auto !important;
        transform: none !important;
        position: relative !important;
    }

    #home_zelift .search-categories .categories {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 10px !important;
    }

    #home_zelift .search-categories .categories a {
        width: 66px !important;
        font-size: 9.5px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }
}

/* 4. Grille des arrondissements de Paris (page ville) */
.paris-arrondissements-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
    max-width: 1100px !important;
    margin: 0 auto 35px !important;
    padding: 0 15px !important;
}

.arrondissement-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: #232227 !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
}

.arrondissement-badge .arr-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #652e71 !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
}

.arrondissement-badge:hover {
    background: #652e71 !important;
    color: #ffffff !important;
    border-color: #8a3c9b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(101, 46, 113, 0.35) !important;
}

.arrondissement-badge:hover .arr-num {
    background: #ffffff !important;
    color: #652e71 !important;
}

/* ========================================================
   EXPÉRIENCE ANDROID : NOUVEL ESPACE MOBILE (ESPACE 2)
   Accessible par balayage tactile gauche/droite au doigt
   ======================================================== */
.android-space-2-screen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #110817 !important;
    background: linear-gradient(180deg, #180c22 0%, #0d0614 100%) !important;
    color: #ffffff !important;
    z-index: 99999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.6) !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: none !important;
}

.android-space-2-screen.active {
    transform: translateX(0) !important;
    pointer-events: auto !important;
}

/* Header Espace 2 */
.space2-header {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 56px !important;
    background: rgba(24, 12, 34, 0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    z-index: 10 !important;
}

.btn-space2-back {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
}

.space2-header-title {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

.space2-badge {
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    color: #ec4899 !important;
    text-transform: uppercase !important;
}

.space2-header-title strong {
    font-size: 13px !important;
    color: #ffffff !important;
}

.space2-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    color: #10b981 !important;
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.space2-status-pill .status-dot {
    width: 6px !important;
    height: 6px !important;
    background: #10b981 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px #10b981 !important;
}

/* Contenu Espace 2 */
.space2-content {
    padding: 16px 14px 90px 14px !important;
    flex: 1 !important;
}

.space2-hero-card {
    background: linear-gradient(135deg, rgba(101, 46, 113, 0.4) 0%, rgba(30, 16, 42, 0.7) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 18px !important;
    padding: 18px !important;
    margin-bottom: 18px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

.space2-hero-text h3 {
    margin: 0 0 6px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.space2-hero-text p {
    margin: 0 !important;
    font-size: 13px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.4 !important;
}

.space2-swipe-tip {
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 11px !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-align: center !important;
}

/* Grille des Tuiles */
.space2-tiles-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

.space2-tile {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: rgba(30, 16, 42, 0.75) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2) !important;
    text-align: left !important;
}

.space2-tile:active {
    transform: scale(0.98) !important;
    background: rgba(101, 46, 113, 0.6) !important;
}

.tile-icon-box {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.tile-info {
    flex: 1 !important;
    min-width: 0 !important;
}

.tile-info h4 {
    margin: 0 0 3px 0 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.tile-info p {
    margin: 0 0 6px 0 !important;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.3 !important;
}

.tile-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.tile-badge-live,
.tile-badge-count,
.tile-badge-pulse,
.tile-badge-safe,
.tile-badge-lock {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
}

.tile-badge-live {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #34d399 !important;
}

.tile-badge-count {
    background: rgba(236, 72, 153, 0.25) !important;
    color: #f472b6 !important;
}

.tile-badge-pulse {
    background: rgba(6, 182, 212, 0.25) !important;
    color: #38bdf8 !important;
}

.tile-badge-safe {
    background: rgba(16, 185, 129, 0.25) !important;
    color: #6ee7b7 !important;
}

.tile-badge-lock {
    background: rgba(245, 158, 11, 0.25) !important;
    color: #fbbf24 !important;
}

.tile-action-link {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.space2-back-home-wrap {
    margin-top: 24px !important;
    text-align: center !important;
}

.btn-space2-big-back {
    width: 100% !important;
    padding: 14px 20px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
}

/* ========================================================
   DOCK FLOTTANT INDICATEUR ANDROID
   ======================================================== */
.android-workspace-indicator {
    position: fixed !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: rgba(20, 10, 28, 0.88) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 999px !important;
    padding: 4px 6px !important;
    display: none !important; /* Visible uniquement sur mobile */
    align-items: center !important;
    gap: 4px !important;
    z-index: 100000 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

@media (max-width: 767px) {
    .android-workspace-indicator {
        display: flex !important;
    }
}

.android-dot {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.android-dot .dot-circle {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    transition: all 0.2s ease !important;
}

.android-dot.active {
    background: #652e71 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(101, 46, 113, 0.4) !important;
}

.android-dot.active .dot-circle {
    background: #ffffff !important;
    transform: scale(1.3) !important;
}

/* ========================================================
   MODULE COUPONS PROMO & BONS PLANS DESK (QUARTIER, VILLE, DÉPARTEMENT)
   ======================================================== */

.hub-coupons-promo-banner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 50% !important;
    max-width: 50% !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    background: linear-gradient(135deg, #581c87 0%, #701a75 100%) !important;
    border: 1px solid #d946ef !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 15px rgba(88, 28, 135, 0.4) !important;
}

@media (max-width: 768px) {
    .hub-coupons-promo-banner {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
}

.hub-coupons-promo-banner:hover {
    background: linear-gradient(135deg, #6b21a8 0%, #86198f 100%) !important;
    border-color: #f472b6 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(134, 25, 143, 0.5) !important;
}

.hub-coupons-promo-banner .banner-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.hub-coupons-promo-banner .banner-icon-ticket {
    font-size: 22px !important;
    filter: drop-shadow(0 0 6px rgba(244, 114, 182, 0.8)) !important;
}

.hub-coupons-promo-banner .banner-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.hub-coupons-promo-banner .banner-badge-live {
    background: #ec4899 !important;
    color: #ffffff !important;
    font-size: 8.5px !important;
    font-weight: 900 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    letter-spacing: 0.5px !important;
}

.hub-coupons-promo-banner .banner-sub {
    font-size: 11px !important;
    color: #fdf4ff !important;
    opacity: 0.95 !important;
    margin-top: 1px !important;
}

.hub-coupons-promo-banner .banner-arrow {
    font-size: 11.5px !important;
    font-weight: 700 !important;
    color: #fbcfe8 !important;
    white-space: nowrap !important;
}

/* Modale Z-Coupons Backdrop */
.z-coupons-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8, 4, 15, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 20px;
}

.z-coupons-modal-container {
    background: #140d21;
    border: 1px solid rgba(168, 85, 247, 0.35);
    border-radius: 20px;
    width: 100%;
    max-width: 620px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
}

.z-coupons-close-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #cbd5e1;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.z-coupons-close-btn:hover {
    background: rgba(236, 72, 153, 0.4);
    color: #ffffff;
    transform: rotate(90deg);
}

.z-coupons-hero {
    background: linear-gradient(180deg, rgba(35, 20, 55, 0.95) 0%, rgba(20, 13, 33, 0.95) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 20px 20px 14px 20px;
}

.z-coupons-hero-badge {
    display: inline-block;
    background: rgba(236, 72, 153, 0.15);
    border: 1px solid rgba(236, 72, 153, 0.4);
    color: #f472b6;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    margin-bottom: 6px;
}

.z-coupons-hero-title {
    font-size: 19px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 2px 0;
    letter-spacing: -0.3px;
}

.z-coupons-hero-sub {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0 0 12px 0;
}

.z-coupons-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 6, 18, 0.95);
    border: 1.5px solid rgba(168, 85, 247, 0.5);
    border-radius: 999px;
    padding: 8px 14px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
    transition: all 0.2s ease;
}

.z-coupons-search-bar:focus-within {
    border-color: #ec4899;
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.35);
}

.z-coupons-search-icon {
    font-size: 15px;
    color: #a855f7;
}

.z-coupons-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    outline: none;
    font-family: inherit;
}

.z-coupons-search-input::placeholder {
    color: #64748b;
    font-size: 12px;
}

.z-coupons-search-clear {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
}

.z-coupons-quick-chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.quick-chip-label {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 700;
}

.z-quick-coupon-tag {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.z-quick-coupon-tag:hover {
    background: rgba(168, 85, 247, 0.25);
    border-color: #a855f7;
    color: #ffffff;
}

.z-coupons-status-bar {
    padding: 8px 20px;
    font-size: 12px;
    color: #cbd5e1;
    background: rgba(20, 13, 33, 0.5);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.z-coupons-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px 24px 20px;
}

.z-coupons-group {
    margin-bottom: 22px;
}

.z-scope-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    background: rgba(26, 17, 43, 0.8);
    border-left: 4px solid #a855f7;
}

.z-scope-header.quartier {
    border-left-color: #ec4899;
    background: linear-gradient(90deg, rgba(236, 72, 153, 0.15) 0%, rgba(26, 17, 43, 0.8) 100%);
}

.z-scope-header.ville {
    border-left-color: #06b6d4;
    background: linear-gradient(90deg, rgba(6, 182, 212, 0.15) 0%, rgba(26, 17, 43, 0.8) 100%);
}

.z-scope-header.departement {
    border-left-color: #8b5cf6;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.15) 0%, rgba(26, 17, 43, 0.8) 100%);
}

.z-scope-header .scope-icon {
    font-size: 20px;
}

.z-scope-header .scope-text {
    flex: 1;
}

.z-scope-header h3 {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.z-scope-header p {
    font-size: 10.5px;
    color: #94a3b8;
    margin: 1px 0 0 0;
}

.z-scope-header .scope-count {
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 999px;
}

.z-coupons-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.z-coupon-card-desk {
    display: flex;
    background: rgba(26, 17, 43, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
}

.z-coupon-card-desk:hover {
    border-color: rgba(168, 85, 247, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.25);
}

.z-coupon-card-desk .card-media {
    flex: 0 0 110px;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 110px;
}

.z-coupon-card-desk .badge-discount {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    padding: 3px 7px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.z-coupon-card-desk .badge-scope {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: rgba(15, 23, 42, 0.85);
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
}

.z-coupon-card-desk .card-content {
    flex: 1;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.z-coupon-card-desk .card-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.z-coupon-card-desk .card-commerce {
    font-size: 11px;
    color: #cbd5e1;
    margin: 0 0 2px 0;
}

.z-coupon-card-desk .card-commerce strong {
    color: #a855f7;
}

.z-coupon-card-desk .card-loc {
    font-size: 10px;
    color: #94a3b8;
    margin: 0 0 4px 0;
}

.z-coupon-card-desk .card-desc {
    font-size: 10.5px;
    color: #64748b;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.z-coupon-card-desk .card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 6px;
    margin-top: auto;
}

.z-coupon-card-desk .validity {
    font-size: 9.5px;
    color: #94a3b8;
}

.btn-grab-coupon {
    background: linear-gradient(135deg, #a855f7, #ec4899);
    border: none;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-grab-coupon:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.4);
}

.z-coupons-empty-box {
    text-align: center;
    padding: 30px 16px;
    background: rgba(26, 17, 43, 0.6);
    border-radius: 14px;
    border: 1px dashed rgba(168, 85, 247, 0.3);
}

.z-coupons-empty-box .empty-emoji {
    font-size: 32px;
    margin-bottom: 6px;
}

.z-coupons-empty-box h4 {
    font-size: 15px;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.z-coupons-empty-box p {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0 0 12px 0;
}

.btn-reset-coupons-search {
    background: #a855f7;
    border: none;
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
}

/* Micro-modal Détail Coupon */
.z-coupon-detail-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 16px;
}

.z-coupon-detail-card {
    background: #1a102a;
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 20px;
    padding: 22px 18px;
    max-width: 380px;
    width: 100%;
    position: relative;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}

.btn-close-coupon-detail {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #94a3b8;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
}

.detail-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.detail-scope-pill {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
}

.detail-badge-val {
    color: #ffffff;
    font-size: 11.5px;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 6px;
}

.detail-coupon-title {
    font-size: 15px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.detail-coupon-commerce {
    font-size: 12px;
    color: #a855f7;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.detail-coupon-desc {
    font-size: 11.5px;
    color: #94a3b8;
    margin: 0 0 16px 0;
    line-height: 1.4;
}

.detail-code-box {
    background: rgba(10, 6, 18, 0.9);
    border: 1.5px dashed rgba(236, 72, 153, 0.5);
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    margin-bottom: 14px;
}

.code-lbl {
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
}

.code-val {
    font-family: monospace;
    font-size: 18px;
    font-weight: 900;
    color: #f472b6;
    letter-spacing: 2px;
    margin-bottom: 8px;
}

.btn-copy-coupon-code {
    background: rgba(236, 72, 153, 0.2);
    border: 1px solid #ec4899;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-copy-coupon-code:hover {
    background: #ec4899;
}

.detail-validity {
    font-size: 11px;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 16px;
}

.btn-done-coupon-detail {
    width: 100%;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border: none;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-done-coupon-detail:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.4);
}

/* Lien rapide vers Mes Z-Commerces coup de cœur */
.z-coupons-coeur-bar {
    margin-top: 14px;
    display: flex;
    justify-content: center;
}

.btn-coupons-goto-coeur {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(236, 72, 153, 0.12);
    border: 1px solid rgba(236, 72, 153, 0.4);
    padding: 7px 16px;
    border-radius: 999px;
    color: #fce7f3;
    font-size: 12.5px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.btn-coupons-goto-coeur:hover {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(168, 85, 247, 0.3));
    border-color: #ec4899;
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(236, 72, 153, 0.35);
}

.btn-coupons-goto-coeur .coeur-emoji {
    font-size: 15px;
    animation: pulseHeart 1.8s infinite ease-in-out;
}

.btn-coupons-goto-coeur .coeur-title {
    font-weight: 800;
    color: #f472b6;
}

.btn-coupons-goto-coeur .coeur-subtitle {
    font-size: 11px;
    color: #cbd5e1;
}

.btn-coupons-goto-coeur .coeur-action {
    font-size: 11px;
    font-weight: 700;
    color: #a855f7;
    margin-left: 4px;
}

@keyframes pulseHeart {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.18); }
}

/* ==========================================================================
   Fixes Listing / Challenge (Subtitles, Counter & Search description)
   ========================================================================== */
.rowSubtitle {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-bottom: 15px !important;
}

.rowSubtitle #nb_solutions,
#nb_solutions.col-sm-12,
#sidebarFilters #nb_solutions {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    position: relative !important;
    text-align: left !important;
    padding: 0 15px !important;
}

.rowSubtitle .rowFlex {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: flex-start !important;
    width: 100% !important;
    gap: 15px !important;
}

.rowSubtitle .rowFlex .col {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    display: block !important;
}

.rowSubtitle h2,
#nb_solutions h2.value,
.rowSubtitle #nb_solutions .value {
    position: static !important;
    display: inline-flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 10px 0 !important;
    font-size: 20px !important;
    color: #652e71 !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    top: auto !important;
    left: auto !important;
    text-align: left !important;
}

.subtitle_nb_solutions {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #652e71 !important;
    margin-right: 8px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

.subtitle_nb_solutions_suffix {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #444444 !important;
    display: inline !important;
    white-space: normal !important;
}

/* Hide mobile-only duplicates on desktop */
@media (min-width: 768px) {
    .description_market_container_mobile,
    #see_map_ipad,
    #see_map_mobile {
        display: none !important;
    }

    .description_market_container_pc {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .description_market_container_pc {
        display: none !important;
    }

    .description_market_container_mobile {
        display: block !important;
    }
}

.description_market_container {
    width: 100% !important;
    margin: 10px 0 15px 0 !important;
    padding: 0 15px !important;
}

.description_market_container .description_market {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #555555 !important;
    margin: 0 !important;
}

/* ==========================================================================
   Fixes Challenge Listing Grid Layout (Sidebar & Main content side-by-side)
   ========================================================================== */
.row.listing,
.row.listing.white,
.row.listing.grid3,
#sidebarFilters .row.listing {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (min-width: 992px) {
    .row.listing,
    .row.listing.white,
    .row.listing.grid3,
    #sidebarFilters .row.listing {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 24px !important;
    }

    .row.listing > .sidebar-right,
    .col-lg-3.sidebar-right,
    .col-md-3.sidebar-right {
        display: block !important;
        flex: 0 0 320px !important;
        max-width: 320px !important;
        width: 320px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        float: none !important;
    }

    .row.listing > .sites_myzelift,
    .col-lg-9.sites_myzelift,
    .col-md-9.sites_myzelift {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        flex: 1 1 auto !important;
        max-width: calc(100% - 344px) !important;
        width: calc(100% - 344px) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 0 !important;
        float: none !important;
    }

    .sites_myzelift > .coulisses-quartier-wrapper,
    .sites_myzelift > #coulisses-quartier-wrapper {
        width: 100% !important;
        margin-top: 0 !important;
    }

    .sites_myzelift .listing-item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 991px) {
    .row.listing > .sidebar-right,
    .col-lg-3.sidebar-right,
    .col-md-3.sidebar-right,
    .row.listing > .sites_myzelift,
    .col-lg-9.sites_myzelift,
    .col-md-9.sites_myzelift {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
    }
}

/* ========================================================
   PAGINATION SUITES DE PAGES (espacements et design moderne)
   ======================================================== */
.navigation {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 35px 0 45px 0 !important;
    padding: 0 !important;
    clear: both !important;
    text-align: center !important;
}

.navigation .pagination {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    list-style: none !important;
}

.navigation .pagination > span,
.navigation .pagination > li {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 4px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.navigation .pagination > span > a,
.navigation .pagination > span > span,
.navigation .pagination > li > a,
.navigation .pagination > li > span,
.navigation .pagination span.current,
.navigation .pagination span.page a,
.navigation .pagination span.first a,
.navigation .pagination span.previous a,
.navigation .pagination span.next a,
.navigation .pagination span.last a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    border: 1.5px solid #dfd3dc !important;
    background-color: #ffffff !important;
    color: #60235b !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 5px rgba(96, 35, 91, 0.06) !important;
    cursor: pointer !important;
    user-select: none !important;
}

.navigation .pagination span.current,
.navigation .pagination li.current > a,
.navigation .pagination li.current > span,
.navigation .pagination li.active > a,
.navigation .pagination li.active > span {
    background: #60235b !important;
    border-color: #60235b !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 10px rgba(96, 35, 91, 0.3) !important;
    cursor: default !important;
}

.navigation .pagination span.page a:hover,
.navigation .pagination span.first a:hover,
.navigation .pagination span.previous a:hover,
.navigation .pagination span.next a:hover,
.navigation .pagination span.last a:hover,
.navigation .pagination > li > a:hover {
    background-color: #f7eef5 !important;
    border-color: #60235b !important;
    color: #60235b !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(96, 35, 91, 0.15) !important;
}

.navigation .pagination span.previous a,
.navigation .pagination span.next a,
.navigation .pagination span.first a,
.navigation .pagination span.last a {
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: -1px !important;
}

/* ========================================================
   PRE-FOOTER CHALLENGE : MOBILE + TEXTE CENTRÉ À CÔTÉ
   ======================================================== */
#zl--prefooter_challenge {
    margin: 50px auto 40px auto !important;
    padding: 0 20px !important;
    max-width: 1200px !important;
    width: 100% !important;
    clear: both !important;
}

#zl--prefooter_challenge .zl--pf-title {
    text-align: center !important;
    padding: 0 !important;
    margin: 0 auto 35px auto !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #60235b !important;
}

#zl--prefooter_challenge .zl--pf_unified_row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 40px !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 1100px !important;
}

/* Conteneur iPhone mockup */
#zl--prefooter_challenge .zl--prefooter_container-img {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 260px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#zl--prefooter_challenge .zl--prefooter-iphone,
#zl--prefooter_challenge .zl--prefooter_container-img img {
    position: static !important;
    top: auto !important;
    left: auto !important;
    max-height: 290px !important;
    max-width: 220px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.15)) !important;
    display: block !important;
}

/* Colonne de texte : centrée à côté du mobile */
#zl--prefooter_challenge .zl--prefooter_content_col {
    flex: 1 1 auto !important;
    max-width: 800px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* Bloc : Tous les autres commerçants (en dessus) & Bloc 1 */
#zl--prefooter_challenge .zl--pf_block {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 22px !important;
}

#zl--prefooter_challenge .zl--pf_block:last-child {
    margin-bottom: 0 !important;
}

/* Sous-titres : violet, gras, centrés */
#zl--prefooter_challenge .zl--pf-subtitle {
    font-family: inherit !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #60235b !important;
    text-align: center !important;
    margin: 0 0 12px 0 !important;
}

#zl--prefooter_challenge .zl--prefooter_col {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    display: block !important;
}

#zl--prefooter_challenge .zl--pf_links_flow {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 2 !important;
}

#zl--prefooter_challenge .zl--pf-link {
    display: inline-flex !important;
    align-items: center !important;
    color: #60235b !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    margin: 4px 8px !important;
    transition: color 0.15s ease !important;
}

#zl--prefooter_challenge .zl--pf-link:hover {
    color: #a43888 !important;
    text-decoration: underline !important;
}

#zl--prefooter_challenge .zl--pf-puce {
    font-size: 7px !important;
    color: #60235b !important;
    margin-right: 6px !important;
    position: static !important;
    padding-left: 0 !important;
}

@media (max-width: 767px) {
    #zl--prefooter_challenge .zl--pf_unified_row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }
    #zl--prefooter_challenge .zl--prefooter-iphone {
        max-height: 220px !important;
    }
}

/* ========================================================
   TRAIN TCHOU TCHOU DANS LE TITRE & BOUTON 'J'EN VEUX PLUS' EN BAS À DROITE
   ======================================================== */
.coucou-trigger--title,
#coucou-trigger.coucou-trigger--title {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Le train tchou tchou reste propre à sa place à côté du titre */
.coucou-rail {
    display: inline-block !important;
    vertical-align: middle !important;
}

.coucou-loco {
    display: inline-block !important;
}

/* Alignement titre, icône cloche et train tchoutchou :
   Monte le titre et l'icône cloche plus haut pour ne plus masquer le tchoutchou */
.breadcrumbs {
    top: 6px !important;
}
.current-category {
    margin-top: 14px !important;
    position: relative !important;
}
.current-category .current-page-icon {
    float: left !important;
    position: relative !important;
    top: 0px !important;
    font-size: 26px !important;
    height: 28px !important;
    line-height: 28px !important;
    width: 28px !important;
    margin-right: 8px !important;
    color: #333 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}
.current-category .urlLinkSEO {
    top: 0px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
}
.current-category .urlLinkSEO > h1 {
    position: relative !important;
    top: 0px !important;
    z-index: 5 !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: nowrap !important;
    background: transparent !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    color: #222 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-indent: 0 !important;
}
.current-category .urlLinkSEO > .coucou-rail {
    margin-top: 0 !important;
}

@media (max-width: 767px) {
    .current-category {
        margin-top: 18px !important;
    }
    .current-category .current-page-icon {
        font-size: 20px !important;
        height: 22px !important;
        line-height: 22px !important;
        width: 22px !important;
        top: 0px !important;
        margin-right: 6px !important;
    }
    .current-category .urlLinkSEO {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .current-category .urlLinkSEO > h1 {
        font-size: 15px !important;
        line-height: 22px !important;
        white-space: normal !important;
        max-width: calc(100vw - 75px) !important;
    }
    .current-category .urlLinkSEO > .coucou-rail {
        margin-top: 8px !important;
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* Bouton 'J'en veux plus' flottant en bas à droite bien présenté */
.coucou-trigger.coucou-trigger--listing {
    position: fixed !important;
    right: 28px !important;
    bottom: 28px !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 8px 18px 8px 10px !important;
    height: 48px !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    border: 2px solid #60235b !important;
    color: #60235b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(96, 35, 91, 0.35) !important;
    z-index: 99999 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
}

.coucou-trigger.coucou-trigger--listing:hover {
    background: #60235b !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 22px rgba(96, 35, 91, 0.45) !important;
}

.coucou-trigger.coucou-trigger--listing:hover .coucou-trigger-tip {
    color: #ffffff !important;
}

.coucou-trigger.coucou-trigger--listing .coucou-trigger-tip {
    color: #60235b !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

.coucou-trigger.coucou-trigger--listing .coucou-trigger-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.coucou-trigger.coucou-trigger--listing .coucou-trigger-icon svg {
    width: 32px !important;
    height: 32px !important;
}

/* Supprimer définitivement le lien crédits d'auteurs public */
#credits,
a#credits,
.footer-logo a#credits,
.footer-logo #credits {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Supprimer la loupe de recherche dupliquée sur desktop */
@media (min-width: 768px) {
    .searchIconHeaderMobile,
    .user-buttons .searchIconHeaderMobile,
    header .searchIconHeaderMobile,
    header .user-buttons > a.searchIconHeaderMobile {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ==========================================================================
   PAGE VILLE (/city/{id}) — En-tête, marchés, suggestions et blogs
   ========================================================================== */
.pg-header.pg-header-city {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    min-height: 280px !important;
    position: relative !important;
}

.container-markets {
    clear: both !important;
}

.row.cat-itens {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    clear: both !important;
    margin: 20px auto 35px auto !important;
}

.row.cat-itens .cat-item {
    float: none !important;
    display: inline-block !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.sugg_recherche {
    clear: both !important;
    width: 100% !important;
    text-align: center !important;
    margin: 40px auto 30px auto !important;
    padding: 10px 0 !important;
}

.sugg_recherche h4 {
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #60235b !important;
    margin-bottom: 16px !important;
}

.sugg_recherche .sugg_buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
}

.sugg_recherche .button.sugg_btn,
.sugg_recherche a.sugg_btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 20px !important;
    border-radius: 999px !important;
    background: #60235b !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(96, 35, 91, 0.25) !important;
    transition: all 0.2s ease !important;
}

.sugg_recherche .button.sugg_btn:hover,
.sugg_recherche a.sugg_btn:hover {
    background: #4a1946 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 14px rgba(96, 35, 91, 0.4) !important;
    color: #ffffff !important;
}

.widget-container.advs-boxes {
    clear: both !important;
    width: 100% !important;
    margin-top: 20px !important;
}

/* ==========================================================================
   POPUP CLIC DROIT ZELIFT (Tchoutchou 🚂 & Caravane 🐪 Alternés)
   ========================================================================== */
.zelift-rc-overlay {
    position: fixed !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(22, 10, 32, 0.7) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999999 !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0 !important;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.zelift-rc-overlay.z-active {
    display: flex !important;
    opacity: 1 !important;
}

.zelift-rc-container {
    width: 90% !important;
    max-width: 480px !important;
    transform: scale(0.92) translateY(12px) !important;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.zelift-rc-overlay.z-active .zelift-rc-container {
    transform: scale(1) translateY(0) !important;
}

.zelift-rc-card {
    position: relative !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 28px 24px 24px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(96, 35, 91, 0.15) !important;
    overflow: hidden !important;
    text-align: center !important;
}

.zelift-rc-close {
    position: absolute !important;
    top: 14px !important;
    right: 16px !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(0, 0, 0, 0.06) !important;
    color: #4b5563 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    z-index: 10 !important;
}

.zelift-rc-close:hover {
    background: rgba(96, 35, 91, 0.15) !important;
    color: #60235b !important;
    transform: rotate(90deg) !important;
}

.zelift-rc-anim-wrap {
    height: 100px !important;
    margin-bottom: 16px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Thème 1 : Train Tchou-tchou */
.z-theme-train {
    border-top: 5px solid #60235b !important;
}

.z-train-scene {
    background: linear-gradient(180deg, #fbf7fc 0%, #f0e2f3 100%) !important;
}

.z-loco-unit {
    position: relative !important;
    animation: zTrainBounce 0.5s ease-in-out infinite alternate !important;
}

@keyframes zTrainBounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

.z-wheels {
    display: flex !important;
    gap: 3px !important;
    justify-content: center !important;
    margin-top: -6px !important;
}

.z-wheel.z-spin {
    animation: zWheelSpin 0.7s linear infinite !important;
    transform-origin: center center !important;
}

@keyframes zWheelSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.z-smoke {
    position: absolute !important;
    left: 45% !important;
    top: 6px !important;
}

.z-smoke i {
    position: absolute !important;
    width: 8px !important;
    height: 8px !important;
    background: rgba(101, 46, 113, 0.4) !important;
    border-radius: 50% !important;
    animation: zSmokeRise 1.6s ease-out infinite !important;
}

.z-smoke i:nth-child(2) {
    animation-delay: 0.5s !important;
    left: -6px !important;
}

.z-smoke i:nth-child(3) {
    animation-delay: 1s !important;
    left: -12px !important;
}

@keyframes zSmokeRise {
    0% { transform: translateY(0) scale(0.6); opacity: 0.8; }
    100% { transform: translateY(-24px) scale(2); opacity: 0; }
}

.z-track-line {
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: repeating-linear-gradient(90deg, #60235b 0, #60235b 10px, transparent 10px, transparent 15px) !important;
    opacity: 0.4 !important;
}

/* Thème 2 : Caravane */
.z-theme-caravan {
    border-top: 5px solid #d4a359 !important;
}

.z-caravan-scene {
    background: linear-gradient(180deg, #fefbf4 0%, #faebd0 100%) !important;
}

.z-caravan-svg {
    width: 100% !important;
    height: 100% !important;
}

.z-camel-herd {
    animation: zCaravanStride 3s ease-in-out infinite alternate !important;
}

@keyframes zCaravanStride {
    0% { transform: translateX(0); }
    100% { transform: translateX(12px); }
}

.zelift-rc-badge {
    display: inline-block !important;
    padding: 4px 14px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.z-badge-train {
    background: rgba(96, 35, 91, 0.12) !important;
    color: #60235b !important;
    border: 1px solid rgba(96, 35, 91, 0.25) !important;
}

.z-badge-caravan {
    background: rgba(212, 163, 89, 0.2) !important;
    color: #9c6c22 !important;
    border: 1px solid rgba(212, 163, 89, 0.4) !important;
}

.zelift-rc-title {
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #1f2937 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
}

.zelift-rc-desc {
    font-size: 13.5px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
    margin: 0 0 20px 0 !important;
}

.zelift-rc-btn {
    border: none !important;
    padding: 10px 24px !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-btn-train {
    background: linear-gradient(135deg, #60235b, #8b4a9a) !important;
    box-shadow: 0 4px 14px rgba(96, 35, 91, 0.35) !important;
}

.z-btn-train:hover {
    background: linear-gradient(135deg, #4a1946, #60235b) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(96, 35, 91, 0.5) !important;
}

.z-btn-caravan {
    background: linear-gradient(135deg, #c99342, #dfb164) !important;
    box-shadow: 0 4px 14px rgba(201, 147, 66, 0.35) !important;
}

.z-btn-caravan:hover {
    background: linear-gradient(135deg, #b07d2f, #c99342) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(201, 147, 66, 0.5) !important;
}

/* ========================================================
   OPTION ZSSSS : DÉTECTION ULTRA-PROXIMITÉ 5M (RADAR HUD)
   ======================================================== */
.zssss-card {
    background: linear-gradient(145deg, #1b0f2e 0%, #291147 60%, #3d1466 100%) !important;
    border: 1.5px solid rgba(236, 72, 153, 0.4) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin: 12px 14px !important;
    box-shadow: 0 8px 24px rgba(41, 17, 71, 0.4) !important;
    color: #ffffff !important;
}

.zssss-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
}

.zssss-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.zssss-radar-pulse {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: #22c55e !important;
    box-shadow: 0 0 10px #22c55e, 0 0 20px rgba(34, 197, 94, 0.6) !important;
    animation: livePulseAnim 1.6s infinite !important;
}

.zssss-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.zssss-title {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    letter-spacing: -0.02em !important;
}

.zssss-badge-tag {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    background: rgba(34, 197, 94, 0.25) !important;
    color: #4ade80 !important;
    border: 1.5px solid #4ade80 !important;
    letter-spacing: 0.04em !important;
}

.zssss-subtitle {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    color: #e9d5ff !important;
}

.zssss-connivence-banner {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(236, 72, 153, 0.3) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin-bottom: 12px !important;
}

.zssss-connivence-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

.zssss-connivence-text strong {
    font-size: 12px !important;
    color: #fbcfe8 !important;
    display: block !important;
    line-height: 1.35 !important;
}

.zssss-connivence-desc {
    margin: 3px 0 0 !important;
    font-size: 11px !important;
    color: #e2e8f0 !important;
    line-height: 1.35 !important;
}

.zssss-hud-wrap {
    margin-bottom: 12px !important;
}

.zssss-radar-display {
    position: relative !important;
    width: 100% !important;
    height: 190px !important;
    background: radial-gradient(circle, #25123d 0%, #150a24 100%) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.zssss-ring {
    position: absolute !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
}

.zssss-ring-5m {
    width: 170px !important;
    height: 170px !important;
    border: 1.5px dashed rgba(236, 72, 153, 0.45) !important;
    padding-top: 4px !important;
}

.zssss-ring-3m {
    width: 110px !important;
    height: 110px !important;
    border: 1px solid rgba(168, 85, 247, 0.4) !important;
    padding-top: 2px !important;
}

.zssss-ring-1m {
    width: 58px !important;
    height: 58px !important;
    border: 1px solid rgba(34, 197, 94, 0.5) !important;
}

.zssss-ring-label {
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #f472b6 !important;
    background: #150a24 !important;
    padding: 0 4px !important;
    border-radius: 4px !important;
}

.zssss-radar-center {
    position: absolute !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #a855f7, #ec4899) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 14px !important;
    box-shadow: 0 0 12px rgba(236, 72, 153, 0.7) !important;
    z-index: 4 !important;
}

.zssss-radar-blip {
    position: absolute !important;
    cursor: pointer !important;
    z-index: 5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.zssss-radar-blip .blip-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #4ade80 !important;
    box-shadow: 0 0 8px #4ade80 !important;
    display: inline-block !important;
}

.zssss-radar-blip .blip-label {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    color: #4ade80 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    padding: 1px 5px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}

.zssss-proximity-gauge-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.zssss-gauge-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.zssss-gauge-title {
    font-size: 11.5px !important;
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

.zssss-current-dist {
    font-size: 15px !important;
    font-weight: 900 !important;
    color: #4ade80 !important;
}

.zssss-gauge-bar-track {
    width: 100% !important;
    height: 6px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    margin-bottom: 8px !important;
}

.zssss-gauge-bar-fill {
    height: 100% !important;
    background: linear-gradient(90deg, #ec4899, #a855f7, #10b981) !important;
    border-radius: 999px !important;
    transition: width 0.3s ease !important;
}

.zssss-proximity-status-desc {
    font-size: 11px !important;
    color: #e2e8f0 !important;
    margin-bottom: 8px !important;
}

.zssss-proximity-test-bar {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.zssss-proximity-test-bar .test-label {
    font-size: 10.5px !important;
    color: #94a3b8 !important;
    white-space: nowrap !important;
}

.test-btn-group {
    display: flex !important;
    gap: 6px !important;
    flex: 1 !important;
}

.btn-zssss-step {
    flex: 1 !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.btn-zssss-step.active,
.btn-zssss-step:hover {
    border-color: #4ade80 !important;
    background: rgba(34, 197, 94, 0.25) !important;
    color: #4ade80 !important;
}

.zssss-tag-consent-box {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 12px !important;
}

.tag-consent-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}

.tag-consent-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.tag-consent-left strong {
    font-size: 12px !important;
    color: #ffffff !important;
    display: block !important;
}

.consent-desc {
    margin: 0 !important;
    font-size: 10.5px !important;
    color: #cbd5e1 !important;
}

.btn-zssss-toggle-tag-consent {
    background: rgba(34, 197, 94, 0.2) !important;
    border: 1px solid #4ade80 !important;
    color: #4ade80 !important;
    padding: 3px 8px !important;
    border-radius: 8px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
}

.tags-chips-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

.tags-chips-list .tag-chip {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: #94a3b8 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.tags-chips-list .tag-chip.active {
    border-color: #ec4899 !important;
    background: rgba(236, 72, 153, 0.25) !important;
    color: #fbcfe8 !important;
}

.zssss-crossed-list-section {
    margin-top: 10px !important;
}

.zssss-list-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}

.zssss-online-count {
    font-size: 10.5px !important;
    color: #4ade80 !important;
}

.zssss-person-card {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
}

.person-top-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 6px !important;
}

.person-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.zssss-avatar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1.5px solid #a855f7 !important;
}

.person-name-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.zssss-name {
    font-size: 13px !important;
    color: #ffffff !important;
}

.dist-pill {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    background: rgba(74, 222, 128, 0.2) !important;
    color: #4ade80 !important;
}

.crossed-context {
    font-size: 10.5px !important;
    color: #cbd5e1 !important;
    display: block !important;
}

.tag-accepted-badge {
    font-size: 9.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 6px !important;
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

.instant-emoji-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.emoji-bar-label {
    font-size: 10px !important;
    color: #94a3b8 !important;
}

.instant-emoji-bar .btn-emoji-share {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease !important;
}

.instant-emoji-bar .btn-emoji-share:hover {
    transform: scale(1.15) !important;
    background: rgba(236, 72, 153, 0.3) !important;
}

/* ZSSSS HISTORIQUE DES ÉCHANGES REÇUS / ENVOYÉS */
.zssss-history-card {
    background: linear-gradient(135deg, #180928 0%, #200a35 100%) !important;
    border: 1.5px solid rgba(217, 70, 239, 0.35) !important;
    border-radius: 16px !important;
    padding: 14px 16px !important;
    margin: 14px 0 !important;
    box-shadow: 0 8px 24px rgba(24, 9, 40, 0.5) !important;
}

.zssss-history-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.zssss-history-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.zssss-history-icon {
    font-size: 20px !important;
}

.z-history-title-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-history-title-row strong {
    font-size: 13.5px !important;
    color: #ffffff !important;
    font-weight: 800 !important;
}

.z-sub-badge {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    background: rgba(217, 70, 239, 0.25) !important;
    color: #e879f9 !important;
    border: 1px solid rgba(217, 70, 239, 0.4) !important;
}

.z-history-subtitle {
    margin: 2px 0 0 !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
}

.z-history-filter-pills {
    display: flex !important;
    gap: 4px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    padding: 3px !important;
    border-radius: 10px !important;
}

.btn-history-filter {
    background: transparent !important;
    color: #94a3b8 !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 3px 8px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.btn-history-filter.active {
    background: rgba(168, 85, 247, 0.4) !important;
    color: #ffffff !important;
}

.zssss-history-tabs {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
    background: rgba(0, 0, 0, 0.3) !important;
    padding: 4px !important;
    border-radius: 12px !important;
}

.btn-z-history-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 9px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

.btn-z-history-tab.active[data-tab="received"] {
    border-color: #22c55e !important;
    background: rgba(34, 197, 94, 0.2) !important;
    color: #4ade80 !important;
}

.btn-z-history-tab.active[data-tab="sent"] {
    border-color: #d946ef !important;
    background: rgba(217, 70, 239, 0.2) !important;
    color: #f0abfc !important;
}

.btn-z-history-tab .z-count-pill {
    font-size: 10.5px !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #cbd5e1 !important;
    font-weight: 900 !important;
}

.btn-z-history-tab.active[data-tab="received"] .z-count-pill {
    background: #22c55e !important;
    color: #000000 !important;
}

.btn-z-history-tab.active[data-tab="sent"] .z-count-pill {
    background: #d946ef !important;
    color: #ffffff !important;
}

.zssss-history-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.zssss-history-item {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    padding: 10px 12px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.z-item-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.z-item-person {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-item-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1.5px solid #c084fc !important;
    object-fit: cover !important;
}

.z-item-name {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    display: block !important;
}

.z-ztag {
    font-size: 10px !important;
    color: #c084fc !important;
    font-weight: 500 !important;
}

.z-item-time {
    font-size: 10px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.z-dist-pill {
    font-size: 10px !important;
    font-weight: 800 !important;
    padding: 2px 6px !important;
    border-radius: 999px !important;
    background: rgba(74, 222, 128, 0.15) !important;
    color: #4ade80 !important;
    border: 1px solid rgba(74, 222, 128, 0.3) !important;
}

.z-item-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: rgba(0, 0, 0, 0.25) !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.z-item-bubble {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.z-bubble-emoji {
    font-size: 18px !important;
}

.z-bubble-val {
    font-size: 11.5px !important;
    color: #f8fafc !important;
    display: block !important;
}

.z-bubble-type {
    font-size: 9.5px !important;
    color: #94a3b8 !important;
    display: block !important;
}

.z-quick-replies {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-size: 9.5px !important;
    color: #94a3b8 !important;
}

.btn-quick-reply {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    font-size: 11px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.15s ease !important;
}

.btn-quick-reply:hover {
    transform: scale(1.15) !important;
    background: rgba(236, 72, 153, 0.3) !important;
}

.z-tag-actions {
    display: flex !important;
    gap: 4px !important;
}

.btn-accept-rec-tag {
    background: rgba(34, 197, 94, 0.25) !important;
    border: 1px solid #4ade80 !important;
    color: #4ade80 !important;
    border-radius: 6px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.btn-reject-rec-tag {
    background: rgba(239, 68, 68, 0.2) !important;
    border: 1px solid #f87171 !important;
    color: #f87171 !important;
    border-radius: 6px !important;
    padding: 3px 7px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
}

.z-sent-status {
    font-size: 10px !important;
    color: #4ade80 !important;
    font-weight: 800 !important;
}