/* ===== OPTIMISATION MOBILE - DESIGN PRINCIPALEMENT MOBILE ===== */

/* Variables CSS optimisées mobile */
:root {
    --primary-black: #000000;
    --secondary-black: #111111;
    --accent-gold: #Cba248;
    --accent-gold-hover: #d4b55a;
    --text-white: #ffffff;
    --text-gray: #cccccc;
    --text-dark-gray: #888888;
    --border-color: #333333;
    --shadow-color: rgba(203, 162, 72, 0.1);
    --gradient-gold: linear-gradient(135deg, #Cba248 0%, #d4b55a 100%);
    --gradient-dark: linear-gradient(135deg, #000000 0%, #111111 100%);
    
    /* Tailles optimisées mobile */
    --header-height: 70px;
    --button-height: 50px;
    --input-height: 48px;
    --border-radius: 12px;
    --spacing-unit: 16px;
}

/* Reset mobile-first */
* {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--primary-black);
    color: var(--text-white);
    line-height: 1.5;
    font-weight: 400;
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    font-size: 16px; /* Évite le zoom sur iOS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}

html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

/* Typographie mobile */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

p {
    margin-bottom: 0.75rem;
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* Header mobile optimisé */
.main_haeder {
    background: rgba(0, 0, 0, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
    padding: 0.6rem 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.em_brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.main_haeder::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}

.em_brand img {
    max-width: 70px;
    height: auto;
}

.em_side_left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.em_side_right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.profile-badge {
    display: flex;
    align-items: center;
}

.profile-avatar-small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #cba248 0%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-avatar-small.has-photo {
    border: 1px solid var(--accent-gold, #Cba248);
    padding: 1px;
    box-sizing: border-box;
    background: transparent;
}

.profile-avatar-small.has-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile-avatar-small:hover {
    transform: scale(1.1);
}

.avatar-text-small {
    color: #000;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}



/* Badge de message */
.message-badge {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--text-white);
    transition: all 0.3s ease;
    cursor: pointer;
}

.message-badge:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: scale(1.05);
}

.message-badge i {
    font-size: 0.8rem;
    color: var(--text-white);
}

.badge-count {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--accent-gold);
    color: var(--primary-black);
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    border: 2px solid var(--primary-black);
    line-height: 1;
    padding: 0 3px;
    box-sizing: border-box;
}

.link__forgot {
    color: var(--text-gray) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    background: rgba(203, 162, 72, 0.1);
    border: 1px solid transparent;
    white-space: nowrap;
}

.link__forgot:hover,
.link__forgot:active {
    color: var(--accent-gold) !important;
    background: rgba(203, 162, 72, 0.15);
    border-color: var(--accent-gold);
    transform: translateY(-1px);
}

/* Style pour le bouton retour */
.em_side_right a {
    color: var(--text-gray) !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.em_side_right a:hover,
.em_side_right a:active {
    color: var(--accent-gold) !important;
    transform: translateY(-1px);
}

.em_side_right i {
    color: var(--accent-gold);
    font-size: 1rem;
}

/* Section principale mobile */
.npPage_introDefault {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: var(--gradient-dark);
    padding: 1rem;
    padding-top: calc(var(--header-height) + 1rem);
    position: relative;
}

.npPage_introDefault::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(203, 162, 72, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

/* Cover section mobile */
.cover {
    text-align: center;
    margin-bottom: 0.25rem;
    width: 100%;
    max-width: 320px;
}

.logo-modern {
    max-width: 80px;
    width: 100%;
    height: auto;
    margin-bottom: 0.25rem;
    filter: drop-shadow(0 8px 20px rgba(203, 162, 72, 0.2));
    transition: all 0.3s ease;
}

.cover p {
    font-size: 1rem;
    color: var(--accent-gold);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 0.25rem;
}

/* Style pour la phrase sous le titre */
.subtitle-text {
    font-size: 0.75rem !important;
    color: var(--text-gray) !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px !important;
    text-transform: none !important;
    margin-top: 0.5rem !important;
    line-height: 1.4 !important;
    max-width: 280px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.8;
    font-style: italic;
}

/* Swiper container mobile */
.swiper-container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 0;
}

.swiper-slide {
    text-align: center;
    padding: 0.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}



.content_text {
    background: var(--primary-black);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin: 0 0.25rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    width: 95%;
    max-width: 95%;
}

.content_text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gradient-gold);
}

.content_text:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.05);
}

.txt_gradient {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    margin-top: 0.25rem;
    position: relative;
}

.content_text p {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--text-gray);
}

.content_text strong {
    color: var(--accent-gold);
    font-weight: 600;
}

/* Boutons mobile optimisés */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    overflow: hidden;
    min-height: var(--button-height);
    width: 100%;
    max-width: 100%;
    touch-action: manipulation;
}

.btn:active {
    transform: scale(0.95);
}

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

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

.bg-primary {
    background: var(--gradient-gold);
    color: var(--primary-black);
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3);
}

.bg-primary:active {
    box-shadow: 0 2px 8px rgba(203, 162, 72, 0.4);
}

.border-snow {
    background: transparent;
    color: var(--accent-gold);
    border: 2px solid var(--accent-gold);
    position: relative;
}

.border-snow:active {
    background: var(--accent-gold);
    color: var(--primary-black);
}

/* Container des boutons mobile */
.npButtons_networks {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    padding: 0;
}

.npButtons_networks .btn {
    width: 100%;
    height: var(--button-height);
    max-width: 100%;
    text-align: center;
    justify-content: center;
    display: flex;
    align-items: center;
    margin: 0 auto;
    padding: 0;
}

/* Section de connexion intégrée */
.login-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.login-container {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    backdrop-filter: none;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.login-container::before {
    display: none;
}

.login-title {
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--accent-gold);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-form .form-group {
    margin-bottom: 0;
}

.login-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-white);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.login-form .input_group {
    position: relative;
    display: flex;
    align-items: center;
}

.login-form .form-control {
    width: 100%;
    padding: 0.875rem 3rem 0.875rem 3rem !important;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-white);
    font-size: 0.85rem !important;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: var(--input-height);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.login-form .form-control:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.login-form .form-control::placeholder {
    color: var(--text-dark-gray);
}

.login-form .input_group .icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-gold);
    z-index: 2;
}

.login-form .input_group .icon i {
    font-size: 16px;
    color: var(--accent-gold);
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-gray);
    cursor: pointer;
    font-size: 12px;
    z-index: 3;
    pointer-events: auto;
}

.login-form .icon_password:active {
    color: var(--accent-gold);
    background: transparent;
    transform: translateY(-50%);
}

.form-links {
    text-align: center;
    margin-bottom: 1rem;
}

.form-links a {
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.form-links a:active {
    color: var(--accent-gold-hover);
}

.login-submit {
    margin-top: 1rem;
    height: var(--button-height);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Séparateur du formulaire */
.form-separator {
    position: relative;
    text-align: center;
    margin: 0.5rem 0;
}

.info-section .content_text {
    padding: 0.5rem;
    margin: 0;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(203, 162, 72, 0.2);
}

.info-section .txt_gradient {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.info-section .content_text p {
    font-size: 0.75rem;
    line-height: 1.2;
    margin: 0;
}

.form-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--border-color);
}

.form-separator span {
    padding: 0 1rem;
    color: var(--text-gray);
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

/* Section création de carte */
.create-card-section {
    margin-top: 1rem;
}

.create-card-btn {
    height: var(--button-height);
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid var(--accent-gold);
    background: transparent;
    color: var(--accent-gold);
    transition: all 0.3s ease;
}

.create-card-btn:hover,
.create-card-btn:active {
    background: var(--accent-gold);
    color: var(--primary-black);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(203, 162, 72, 0.3);
}

/* Section contact */
.contact-section {
    margin-top: 1rem;
    text-align: center;
    padding: 1rem;
}

.contact-section p {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin: 0;
    line-height: 1.4;
}

.contact-section a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: all 0.3s ease;
}

.contact-section a:hover,
.contact-section a:active {
    color: var(--accent-gold-hover);
}

/* Formulaires mobile */
.form-group {
    margin-bottom: 1.25rem;
    padding: 0 1rem; /* Ajout d'espacement horizontal */
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-white);
    font-weight: 500;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 0.5rem; /* Espacement supplémentaire pour les labels */
}

.input_group {
    position: relative;
    display: flex;
    align-items: center;
}

.form-control {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.5rem;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--border-radius);
    color: var(--text-white) !important;
    font-size: 1rem !important; /* Minimum 16px pour éviter le zoom automatique sur iOS */
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: var(--input-height);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    margin: 0 0.5rem; /* Ajout d'espacement horizontal pour les inputs */
}

/* Empêcher le zoom automatique sur iOS Safari - minimum 16px pour tous les champs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea,
select {
    font-size: 16px !important; /* Minimum 16px pour éviter le zoom automatique sur iOS */
}

/* Spécifique pour les champs de mot de passe */
.input_group:has(.icon_password) .form-control {
    padding-right: 3rem;
}

.form-control:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.1);
    background: rgba(255, 255, 255, 0.08);
}

.form-control::placeholder {
    color: var(--text-dark-gray);
}

/* Styles spécifiques pour les selects */
.custom-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23Cba248' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.custom-select:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23Cba248' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.input_group .icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent-gold);
    z-index: 2;
}

.input_group .icon i {
    font-size: 16px;
    color: var(--accent-gold);
}

.icon_password {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: 50%;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon_password:active {
    color: var(--accent-gold);
    background: rgba(203, 162, 72, 0.1);
}

/* Liens mobile */
a {
    color: var(--accent-gold);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

a:active {
    color: var(--accent-gold-hover);
}

/* Pagination Swiper mobile */
.swiper-pagination {
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--border-color);
    opacity: 0.5;
    transition: all 0.3s ease;
    margin: 0 0.25rem;
}

.swiper-pagination-bullet-active {
    background: var(--accent-gold);
    opacity: 1;
    transform: scale(1.2);
}

/* Messages d'erreur/succès mobile */
.message {
    position: relative;
    padding: 1rem;
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
    border-left: 4px solid;
    animation: slideInRight 0.3s ease-out;
    font-size: 0.9rem;
}

.message.success {
    background: rgba(81, 207, 102, 0.1);
    border-left-color: #51cf66;
    color: #51cf66;
}

.message.error {
    background: rgba(255, 107, 107, 0.1);
    border-left-color: #ff6b6b;
    color: #ff6b6b;
}

/* Optimisations tactiles */
.btn,
.close,
.icon_password,
.form-control {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Amélioration de l'accessibilité mobile */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Support des gestes tactiles */
.swiper-container {
    touch-action: pan-y;
}

/* Optimisation pour les petits écrans */
@media (max-width: 360px) {
    .main_haeder {
        padding: 0.5rem 0.75rem;
    }
    
    .profile-avatar-small {
        width: 35px;
        height: 35px;
    }
    
    .avatar-text-small {
        font-size: 0.8rem;
    }
    
    .em_brand img {
        max-width: 60px;
    }
    
    .message-badge {
        width: 32px;
        height: 32px;
    }
    
    .message-badge i {
        font-size: 0.8rem;
    }
    
    .badge-count {
        min-width: 16px;
        height: 16px;
        font-size: 0.6rem;
        line-height: 1;
        padding: 0 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .cover {
        max-width: 280px;
    }
    
    .logo-modern {
        max-width: 60px;
    }
    
    .txt_gradient {
        font-size: 1.5rem !important;
    }
    
    .subtitle-text {
        font-size: 0.75rem !important;
    }
    
    .content_text {
        margin: 0 1rem;
    }
    
    .login-section {
        padding: 1rem;
    }
    
    .login-container {
        padding: 1.5rem;
    }
    
    .login-title {
        font-size: 1.25rem;
    }
    
    .btn {
        font-size: 0.85rem;
        padding: 0.75rem 1.25rem;
    }
}
@media (min-width: 768px) {
    .main_haeder {
        padding: 0.75rem 1.25rem;
    }
    
    .em_brand img {
        max-width: 85px;
    }
    
    .message-badge {
        width: 36px;
        height: 36px;
    }
    
    .message-badge i {
        font-size: 0.9rem;
    }
    
    .badge-count {
        min-width: 18px;
        height: 18px;
        font-size: 0.65rem;
        line-height: 1;
        padding: 0 2px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .npPage_introDefault {
        padding: 2rem;
    }
    
    .cover {
        max-width: 400px;
    }
    
    .logo-modern {
        max-width: 80px;
    }
    
    .subtitle-text {
        font-size: 0.8rem !important;
        max-width: 350px;
    }
    
    .content_text {
        margin: 0 1.5rem;
    }
    
    .login-section {
        max-width: 100%;
    }
    
    .login-container {
        padding: 2.5rem;
    }
    
    .npButtons_networks {
        max-width: 320px;
    }
    
    .btn {
        max-width: 320px;
    }
}

/* Support du mode sombre système */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-black: #000000;
        --secondary-black: #0a0a0a;
        --border-color: #222222;
    }
}

/* Optimisation pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo-modern {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Amélioration de la performance mobile */
.content_text,
.btn,
.modal-content,
.login-container {
    will-change: transform;
}

/* Support du mode paysage */
@media (orientation: landscape) and (max-height: 500px) {
    .npPage_introDefault {
        padding-top: calc(var(--header-height) + 0.5rem);
    }
    
    .cover {
        margin-bottom: 1rem;
    }
    
    .logo-modern {
        max-width: 60px;
        margin-bottom: 0.25rem;
    }
    
    .subtitle-text {
        font-size: 0.7rem !important;
        margin-top: 0.25rem !important;
    }
    
    .swiper-container {
        padding: 0.5rem 0;
    }
    
    .content_text {
        padding: 0.75rem;
        margin: 0 0.5rem;
    }
    
    .login-section {
        margin-top: 0.5rem;
        margin-left: 0;
        margin-right: 0;
    }
    
    .login-container {
        padding: 1.5rem;
    }
    
    .npButtons_networks {
        margin-top: 1rem;
    }
}

/* Styles pour les selects */
.custom-select {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-white);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: var(--input-height);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23Cba248' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

.custom-select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.2);
    background-color: rgba(255, 255, 255, 0.08);
}

/* Styles pour les checkboxes et radio buttons */
.form-check-input {
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid var(--border-color);
    border-radius: 4px;
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.25em;
    margin-right: 0.5rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-check-input:checked {
    background-color: var(--accent-gold);
    border-color: var(--accent-gold);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:focus {
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.2);
}

.form-check-label {
    color: var(--text-white);
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
}

/* Styles pour les alertes */
.alert {
    border-radius: var(--border-radius);
    padding: 0.4rem 0.9rem;
    margin-bottom: 0.75rem;
    border: 1px solid transparent;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
    color: #ff6b6b;
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    border-color: rgba(40, 167, 69, 0.3);
    color: #51cf66;
}

.alert-info {
    background: rgba(23, 162, 184, 0.1);
    border-color: rgba(23, 162, 184, 0.3);
    color: #74c0fc;
}

/* Modal styles */
.modal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    overflow: auto;
    align-items: center;
    justify-content: center;
}

.modal.show {
    display: flex !important;
}

.modal-content {
    background: var(--primary-black);
    margin: auto;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    width: 95%;
    max-width: 450px;
    max-height: 90vh;
    height: auto;
    overflow-y: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    color: var(--accent-gold);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.close {
    color: var(--text-gray);
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
    background: none;
    border: none;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.close:hover,
.close:focus {
    color: var(--accent-gold);
    background: rgba(203, 162, 72, 0.1);
}

.modal-body {
    color: var(--text-white);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: var(--button-height);
}

.modal-btn-primary {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.modal-btn-primary:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-1px);
}

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

.modal-btn-secondary:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
}

/* Cartes de promotion modernes avec effets */
.promotion-card {
    position: relative;
    border-radius: 12px;
    padding: 0.75rem;
    margin: 0.3rem 0;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.promotion-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.promotion-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    border-radius: 20px;
}

.promotion-particles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 30%, rgba(203, 162, 72, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(203, 162, 72, 0.05) 0%, transparent 50%);
    animation: particleFloat 8s ease-in-out infinite;
}

.promotion-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(203, 162, 72, 0.1), transparent);
    animation: glowRotate 6s linear infinite;
    opacity: 0.6;
}

@keyframes particleFloat {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes glowRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.promotion-content {
    position: relative;
    z-index: 2;
}

.promotion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.promotion-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.promotion-icon {
    width: 35px;
    height: 35px;
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(203, 162, 72, 0.4);
    position: relative;
    overflow: hidden;
}

.promotion-icon::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: iconGlow 3s linear infinite;
}

.promotion-icon i {
    font-size: 1rem;
    color: var(--primary-black);
    z-index: 2;
    position: relative;
}

.promotion-badge {
    padding: 0.3rem 0.8rem;
    border-radius: 12px;
}

.promotion-badge span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-white);
}

.badge-vip {
    color: #ffd700;
}

.badge-standard {
    color: #25c998;
}

.badge-fidelity {
    color: #ff6b6b;
}

.promotion-title {
    text-align: right;
}

.promotion-title h3 {
    color: var(--accent-gold);
    font-size: 0.7rem;
    font-weight: 800;
    margin: 0 0 0.3rem 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.promotion-id {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-gray);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

@keyframes iconGlow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.promotion-offer {
    text-align: center;
    margin-bottom: 2rem;
}

.offer-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.offer-main i {
    font-size: 1rem;
    color: var(--accent-gold);
    text-shadow: 0 4px 12px rgba(203, 162, 72, 0.5);
}

.offer-main h2 {
    color: var(--text-white);
    font-size: 0.65rem;
    font-weight: 800;
    margin: 0;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.promotion-details {
    text-align: center;
    margin-bottom: 0.5rem;
}

.promotion-details p {
    color: var(--text-gray);
    font-size: 0.6rem;
    margin: 0.2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.promotion-details p i {
    color: var(--accent-gold);
    font-size: 0.9rem;
}

.promotion-action {
    display: flex;
    justify-content: center;
}

.btn-use-promotion {
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
    color: var(--primary-black);
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 18px;
    font-weight: 700;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.4s ease;
    box-shadow: 0 8px 24px rgba(203, 162, 72, 0.4);
    position: relative;
    overflow: hidden;
}

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

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

.btn-use-promotion:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(203, 162, 72, 0.6);
}

.btn-use-promotion:active {
    transform: translateY(-1px);
}

/* Carte de fidélité spécifique */
.fidelity-card .promotion-icon {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
}

.fidelity-card .promotion-title h3 {
    color: #ff6b6b;
}

.fidelity-card .offer-main i {
    color: #ff6b6b;
    text-shadow: 0 4px 12px rgba(255, 107, 107, 0.5);
}

.fidelity-card .promotion-details p i {
    color: #ff6b6b;
}

.fidelity-card .btn-use-promotion {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
}

.fidelity-card .btn-use-promotion:hover {
    box-shadow: 0 12px 32px rgba(255, 107, 107, 0.6);
}

/* Responsive pour les cartes de promotion */
@media (max-width: 768px) {
    .promotion-card {
        padding: 0.5rem;
        margin: 0.2rem 0;
    }
    
    .promotion-header {
        margin-bottom: 0.3rem;
    }
    
    .promotion-icon {
        width: 25px;
        height: 25px;
    }
    
    .promotion-icon i {
        font-size: 0.7rem;
    }
    
    .promotion-title h3 {
        font-size: 0.7rem;
    }
    
    .promotion-id {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    
    .offer-main {
        padding: 0.4rem;
    }
    
    .offer-main i {
        font-size: 0.9rem;
    }
    
    .offer-main h2 {
        font-size: 0.65rem;
    }
    
    .promotion-details p {
        font-size: 0.6rem;
        padding: 0.15rem 0.4rem;
    }
    
    .btn-use-promotion {
        padding: 0.3rem 0.8rem;
        font-size: 0.6rem;
    }
}

@media (max-width: 360px) {
    .promotion-card {
        padding: 0.4rem;
        margin: 0.15rem 0;
    }
    
    .promotion-icon {
        width: 20px;
        height: 20px;
    }
    
    .promotion-icon i {
        font-size: 0.6rem;
    }
    
    .promotion-title h3 {
        font-size: 0.6rem;
    }
    
    .promotion-id {
        font-size: 0.5rem;
        padding: 0.15rem 0.3rem;
    }
    
    .offer-main {
        padding: 0.3rem;
    }
    
    .offer-main i {
        font-size: 0.8rem;
    }
    
    .offer-main h2 {
        font-size: 0.55rem;
    }
    
    .promotion-details p {
        font-size: 0.5rem;
        padding: 0.1rem 0.3rem;
    }
    
    .btn-use-promotion {
        padding: 0.25rem 0.6rem;
        font-size: 0.5rem;
    }
}

/* Responsive pour le modal */
@media (max-width: 768px) {
    .modal.show {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .modal-content {
        margin: auto !important;
        width: 95% !important;
        max-width: 450px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: 90vh !important;
        padding: 1.5rem !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    /* Exception pour le modal paramètres qui doit garder ses styles */
    #mdllSidebarMenu-background .modal-content {
        padding: 0 !important;
        height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }
    
    .modal-title {
        font-size: 1.1rem;
    }
    
    .modal-body {
        font-size: 0.95rem;
    }
    
    .modal-footer {
        flex-direction: column;
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
    }
    
    .modal-btn {
        width: 100%;
    }
}

/* Styles spécifiques pour les inputs d'inscription */
#registrationForm .form-control {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-white) !important;
}

#registrationForm .form-control:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent-gold) !important;
}

#registrationForm .form-control::placeholder {
    color: var(--text-dark-gray) !important;
}

#registrationForm .custom-select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-white) !important;
}

#registrationForm .custom-select:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--accent-gold) !important;
}

/* Étapes d'inscription */
.steps-progress {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    gap: 2rem;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.step.active {
    opacity: 1;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--border-color);
    color: var(--text-gray);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.step.active .step-number {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.step-label {
    font-size: 0.8rem;
    color: var(--text-gray);
    text-align: center;
    font-weight: 500;
}

.step.active .step-label {
    color: var(--accent-gold);
}

.form-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.form-step.active {
    display: block;
}

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

.step-buttons {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding: 0 1rem;
}

.step-buttons .btn {
    flex: 1;
    max-width: 150px;
}

/* Responsive pour les étapes */
@media (max-width: 768px) {
    .steps-progress {
        gap: 1.5rem;
    }
    
    .step-number {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .step-label {
        font-size: 0.7rem;
    }
    
    .step-buttons {
        flex-direction: column;
        padding: 0 1rem;
    }
    
    .step-buttons .btn {
        max-width: 100%;
    }
}

/* Styles pour le menu de navigation */
.em_main_footer {
    background: var(--primary-black);
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
}

.em_body_navigation {
    display: flex;
    justify-content: space-around;
    align-items: center;
    max-width: 100%;
    margin: 0 auto;
}

.item_link {
    flex: 1;
    text-align: center;
}

.item_link a {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-gray);
    transition: all 0.3s ease;
    padding: 0.5rem;
    border-radius: var(--border-radius);
}

.item_link a:hover,
.item_link a:active {
    color: var(--accent-gold);
    transform: translateY(-2px);
}

.item_link .icon_current,
.item_link .icon_active {
    font-size: 1rem;
    margin-bottom: 0.2rem;
    transition: all 0.3s ease;
}

.item_link .icon_active {
    display: none;
}

.item_link a:hover .icon_current,
.item_link a:active .icon_current {
    display: none;
}

.item_link a:hover .icon_active,
.item_link a:active .icon_active {
    display: block;
    color: var(--accent-gold);
}

.item_link .txt__tile {
    font-size: 0.65rem;
    font-weight: 500;
    margin-top: 0.2rem;
}

/* Bouton QR Code spécial */
.item_link a[data-target="#mdllAdd_Address"] {
    background: linear-gradient(45deg, var(--accent-gold), #d4af7a);
    color: var(--primary-black);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3);
    transform: translateY(-8px);
    aspect-ratio: 1;
    flex-shrink: 0;
    /* S'assurer que c'est parfaitement rond */
    min-width: 45px;
    min-height: 45px;
    max-width: 45px;
    max-height: 45px;
}

.item_link a[data-target="#mdllAdd_Address"]:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4);
}

.item_link a[data-target="#mdllAdd_Address"] .icon_current,
.item_link a[data-target="#mdllAdd_Address"] .icon_active {
    font-size: 1.25rem;
    margin: 0;
}

.item_link a[data-target="#mdllAdd_Address"] .txt__tile {
    display: none;
}

/* Responsive pour le menu */
@media (max-width: 768px) {
    .item_link .icon_current,
    .item_link .icon_active {
        font-size: 0.9rem;
    }
    
    .item_link .txt__tile {
        font-size: 0.6rem;
    }
    
    .item_link a[data-target="#mdllAdd_Address"] {
        width: 42px;
        height: 42px;
        min-width: 42px;
        min-height: 42px;
        max-width: 42px;
        max-height: 42px;
    }
    
    .item_link a[data-target="#mdllAdd_Address"] .icon_current,
    .item_link a[data-target="#mdllAdd_Address"] .icon_active {
        font-size: 1.1rem;
    }
}

@media (max-width: 360px) {
    .item_link .txt__tile {
        font-size: 0.55rem;
    }
    
    .item_link .icon_current,
    .item_link .icon_active {
        font-size: 0.85rem;
    }
    
    .item_link a[data-target="#mdllAdd_Address"] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        max-width: 40px;
        max-height: 40px;
    }
    
    .item_link a[data-target="#mdllAdd_Address"] .icon_current,
    .item_link a[data-target="#mdllAdd_Address"] .icon_active {
        font-size: 1rem;
    }
}

/* Styles pour la page carte.php */
.welcome-section {
    text-align: center;
    padding: 2rem 1rem;
    margin-bottom: 1rem;
}

.welcome-header {
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    padding: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
}

.welcome-header i {
    font-size: 3rem;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.welcome-header h2 {
    color: var(--text-white);
    font-size: 1.1rem;
    margin: 0 0 0.5rem 0;
    font-weight: 600;
}

.welcome-header p {
    color: var(--text-gray);
    font-size: 1rem;
    margin: 0;
}

/* Alertes */
.alert-warning {
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
    color: white;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 1rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

.alert-icon {
    font-size: 2rem;
    color: #ffeb3b;
}

.alert-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.alert-content p {
    margin: 0.25rem 0;
    font-size: 0.9rem;
    line-height: 1.4;
}

.alert-time {
    color: #ffeb3b !important;
    font-weight: 600;
    margin-top: 0.5rem !important;
}

/* Section headers */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
}

.section-header h3 {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-header h3 i {
    color: var(--accent-gold);
}

.history-link, .view-all-link {
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
}

.history-link:hover, .view-all-link:hover {
    color: var(--accent-gold-hover);
    transform: translateY(-1px);
}

.entry-count {
    text-align: center;
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.entry-count a {
    color: var(--accent-gold);
    text-decoration: none;
}

/* Fidélité */
.fidelity-section {
    margin: 1.5rem 0;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 1.25rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.fidelity-grid {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.5rem;
}

.fidelity-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.25rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    min-height: 45px;
    position: relative;
}

.fidelity-item.completed {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.1), rgba(40, 167, 69, 0.05));
    border-color: rgba(40, 167, 69, 0.2);
}

.fidelity-item.reward {
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.1), rgba(203, 162, 72, 0.05));
    border-color: rgba(203, 162, 72, 0.2);
}

.fidelity-icon {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin-bottom: 0.2rem;
}

.fidelity-item.completed .fidelity-icon {
    color: #51cf66;
}

.fidelity-item.reward .fidelity-icon {
    color: var(--accent-gold);
}

.fidelity-number {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-white);
    text-align: center;
}

.fidelity-reward {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--accent-gold);
    text-align: center;
    line-height: 1.1;
}

.fidelity-info {
    text-align: center;
    margin-top: 1.5rem;
    padding: 0 1rem;
}

.fidelity-note {
    color: var(--text-dark-gray);
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}

.fidelity-note strong {
    color: #ff6b6b;
}

.fidelity-progress {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    padding: 0 0.5rem;
}

.fidelity-progress strong {
    color: var(--accent-gold);
}

.expiry-info, .premium-info {
    color: var(--text-dark-gray);
    font-size: 0.8rem;
    margin: 0.25rem 0;
}

.premium-info strong {
    color: var(--accent-gold);
}

/* Événements */
.events-section {
    margin: 2rem 0;
}

.events-carousel {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding: 0 1rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.events-carousel::-webkit-scrollbar {
    display: none;
}

.event-card {
    flex: 0 0 auto;
    width: 200px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.event-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.event-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.event-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.event-card:hover .event-image img {
    transform: scale(1.05);
}

.event-info {
    padding: 1rem;
}

.event-info h4 {
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0.25rem 0 0.4rem 0;
    line-height: 1.2;
}

.event-date-small {
    color: var(--accent-gold);
    font-size: 0.65rem;
    font-weight: 500;
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.event-participants {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-gray);
    font-size: 0.7rem;
    margin-top: 0.2rem;
}

.event-participants i {
    font-size: 0.65rem;
    color: var(--accent-gold);
}

/* Responsive pour carte.php */
@media (max-width: 768px) {
    .welcome-header {
        padding: 1.5rem;
    }
    
    .welcome-header i {
        font-size: 2rem;
    }
    
    .welcome-header h2 {
        font-size: 0.9rem;
    }
    
    .fidelity-grid {
        gap: 0.2rem;
    }
    
    .fidelity-item {
        min-height: 40px;
        padding: 0.5rem 0.2rem;
    }
    
    .fidelity-icon {
        font-size: 0.85rem;
    }
    
    .fidelity-number {
        font-size: 0.65rem;
    }
    
    .event-card {
        width: 180px;
    }
    
    .event-image {
        height: 220px;
    }
    
    .event-info h4 {
        font-size: 0.8rem;
    }
    
    .event-date-small {
        font-size: 0.6rem;
    }
    
    .event-participants {
        font-size: 0.65rem;
    }
    
    .event-participants i {
        font-size: 0.6rem;
    }
}

@media (max-width: 360px) {
    .welcome-header {
        padding: 1rem;
    }
    
    .welcome-header i {
        font-size: 1.75rem;
    }
    
    .welcome-header h2 {
        font-size: 0.85rem;
    }
    
    .fidelity-item {
        min-height: 35px;
        padding: 0.4rem 0.15rem;
    }
    
    .fidelity-icon {
        font-size: 0.8rem;
    }
    
    .fidelity-number {
        font-size: 0.6rem;
    }
    
    .event-card {
        width: 160px;
    }
    
    .event-image {
        height: 200px;
    }
    
    .event-info h4 {
        font-size: 0.75rem;
    }
    
    .event-date-small {
        font-size: 0.55rem;
    }
    
    .event-participants {
        font-size: 0.6rem;
    }
    
    .event-participants i {
        font-size: 0.55rem;
    }
}

/* Styles pour le dress code */
.dress-code-section {
    margin: 1rem 0;
}

.dress-code-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.dress-code-card:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-white);
    text-decoration: none;
}

.dress-code-icon {
    font-size: 1.5rem;
    color: var(--accent-gold);
}

.dress-code-content {
    flex: 1;
}

.dress-code-title {
    margin: 0 0 0.25rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent-gold);
}

.dress-code-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-gray);
}

/* ===== DRESS CODE CARD MODERN ===== */
.dress-code-section-modern {
    margin: 1.5rem 0;
    padding: 0 1rem;
}

.dress-code-card-modern {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.15), rgba(255, 107, 107, 0.05));
    border: 2px solid rgba(255, 107, 107, 0.4);
    border-radius: 12px;
    padding: 0.9rem 1.2rem;
    transition: all 0.3s ease;
    color: var(--text-white);
    text-decoration: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2);
}

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

.dress-code-card-modern:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 107, 107, 0.6);
    box-shadow: 0 6px 25px rgba(255, 107, 107, 0.3);
    color: var(--text-white);
    text-decoration: none;
}

.dress-code-card-modern:hover::before {
    left: 100%;
}

.dress-code-icon-modern {
    font-size: 1.4rem;
    color: #ff6b6b;
    flex-shrink: 0;
    animation: pulse 2s ease-in-out infinite;
}

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

.dress-code-content-modern {
    flex: 1;
}

.dress-code-title-modern {
    margin: 0 0 0.2rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ff6b6b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dress-code-subtitle-modern {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-white);
    font-weight: 500;
}

.dress-code-arrow {
    font-size: 1rem;
    color: #ff6b6b;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.dress-code-card-modern:hover .dress-code-arrow {
    transform: translateX(5px);
}

/* Modal dress code */
.dress-code-content .dress-code-section {
    margin-bottom: 2rem;
}

.dress-code-content h4 {
    color: var(--accent-gold);
    font-size: 1.1rem;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dress-code-content p {
    color: var(--text-gray);
    margin: 0.5rem 0;
    line-height: 1.5;
}

.dress-code-rules {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.rule-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.rule-item i {
    font-size: 1.5rem;
    color: var(--accent-gold);
    margin-top: 0.25rem;
}

.rule-item div {
    flex: 1;
}

.rule-item strong {
    color: var(--text-white);
    font-size: 1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.rule-item p {
    color: var(--text-gray);
    margin: 0.25rem 0;
    font-size: 0.9rem;
}

.rule-item ul {
    color: var(--text-gray);
    margin: 0.5rem 0;
    padding-left: 1.5rem;
    font-size: 0.9rem;
}

.rule-item li {
    margin: 0.25rem 0;
}

.forbidden {
    color: #ff6b6b;
    font-weight: 600;
}

.dress-code-warning {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dress-code-warning i {
    color: #ff6b6b;
    font-size: 1.25rem;
}

.dress-code-warning p {
    color: #ff6b6b;
    margin: 0;
    font-weight: 500;
}

/* Responsive pour dress code */
@media (max-width: 768px) {
    .dress-code-card {
        padding: 0.875rem;
    }
    
    .dress-code-icon {
        font-size: 1.25rem;
    }
    
    .dress-code-title {
        font-size: 0.9rem;
    }
    
    .dress-code-subtitle {
        font-size: 0.75rem;
    }
    
    .rule-item {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .rule-item i {
        font-size: 1.25rem;
    }
}

@media (max-width: 360px) {
    .dress-code-card {
        padding: 0.75rem;
    }
    
    .dress-code-icon {
        font-size: 1.1rem;
    }
    
    .dress-code-title {
        font-size: 0.85rem;
    }
    
    .dress-code-subtitle {
        font-size: 0.7rem;
    }
}

/* Styles pour les soirées événementielles */
.special-event-section {
    margin: 1.5rem 0;
    padding: 0 1rem;
}

.special-event-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 0.75rem;
    backdrop-filter: blur(10px);
}

.event-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--accent-gold);
    color: var(--primary-black);
    border-radius: 6px;
    padding: 0.5rem 0.4rem;
    min-width: 40px;
    text-align: center;
}

.date-day {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.15rem;
    color: var(--text-white);
}

.date-month {
    font-size: 0.55rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--accent-gold);
}

.event-info {
    flex: 1;
}

.event-type {
    color: var(--accent-gold);
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.event-type i {
    font-size: 0.7rem;
}

.event-title {
    color: var(--text-white);
    font-size: 0.60rem;
    font-weight: 600;
    margin: 0 0 0.2rem 0;
    line-height: 1.1;
}

.event-date-full {
    color: var(--text-gray);
    font-size: 0.7rem;
    margin: 0;
}

.event-action {
    text-align: center;
}

.event-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--accent-gold);
    color: var(--primary-black);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.event-btn:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(203, 162, 72, 0.4);
    color: var(--primary-black);
    text-decoration: none;
}

.event-btn i {
    font-size: 0.85rem;
}

/* Responsive pour les soirées événementielles */
@media (max-width: 768px) {
    .special-event-card {
        padding: 0.6rem;
    }
    
    .event-header {
        gap: 0.6rem;
        margin-bottom: 0.6rem;
    }
    
    .event-date {
        min-width: 38px;
        padding: 0.5rem 0.3rem;
    }
    
    .date-day {
        font-size: 0.9rem;
    }
    
    .date-month {
        font-size: 0.5rem;
    }
    
    .event-title {
        font-size: 0.7rem;
    }
    
    .event-type {
        font-size: 0.55rem;
    }
    
    .event-btn {
        padding: 0.4rem 0.6rem;
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .special-event-card {
        padding: 0.5rem;
    }
    
    .event-header {
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .event-date {
        min-width: 35px;
        padding: 0.4rem 0.25rem;
    }
    
    .date-day {
        font-size: 0.85rem;
    }
    
    .date-month {
        font-size: 0.45rem;
    }
    
    .event-title {
        font-size: 0.65rem;
    }
    
    .event-type {
        font-size: 0.5rem;
    }
    
    .event-btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.6rem;
    }
}

/* Styles pour l'historique */
/* Styles historique supprimés - Gérés dans modern-style.css */

/* Styles pour le modal paramètres */
.user-profile {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info h4 {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-valid {
    background: rgba(65, 189, 131, 0.2);
    color: #41bd83;
    border: 1px solid rgba(65, 189, 131, 0.3);
}

.status-premium {
    background: rgba(203, 162, 72, 0.2);
    color: var(--accent-gold);
    border: 1px solid rgba(203, 162, 72, 0.3);
}

.status-admin {
    background: rgba(203, 162, 72, 0.2);
    color: var(--accent-gold);
    border: 1px solid rgba(203, 162, 72, 0.3);
}

.btn-logout {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(220, 53, 69, 0.2);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: rgba(220, 53, 69, 0.3);
    color: #dc3545;
    text-decoration: none;
}

.settings-menu {
    margin-bottom: 1.5rem;
}

.settings-section h5 {
    color: var(--text-gray);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 1rem 0;
    padding: 0 0.5rem;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--text-white);
    transition: all 0.3s ease;
}

.settings-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-1px);
    color: var(--text-white);
    text-decoration: none;
}

.settings-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
    flex-shrink: 0;
}

.settings-icon i {
    color: var(--primary-black);
    font-size: 1rem;
}

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

.settings-content span {
    font-size: 0.9rem;
    font-weight: 500;
}

.settings-arrow {
    color: var(--text-gray);
    font-size: 0.8rem;
}

.settings-toggle {
    flex-shrink: 0;
}

.toggle-switch {
    position: relative;
    width: 50px;
    height: 26px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 13px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-switch.active {
    background: var(--accent-gold);
}

.toggle-handle {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: var(--text-white);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-switch.active .toggle-handle {
    transform: translateX(24px);
}

.partnership-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 1rem;
}

.partnership-header h5 {
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.partnership-content {
    text-align: center;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.partner-logo span {
    color: var(--text-gray);
    font-size: 0.8rem;
    font-weight: 500;
}

.separator {
    width: 1px;
    height: 20px;
    background: rgba(255, 255, 255, 0.3);
}

.partner-logo img {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.footer-content {
    text-align: center;
    padding: 1rem;
}

.footer-logo {
    margin-bottom: 1rem;
}

.footer-logo img {
    max-width: 120px;
    height: auto;
}

.footer-info {
    margin-bottom: 1rem;
}

.footer-info p {
    color: var(--text-gray);
    font-size: 0.75rem;
    margin: 0.25rem 0;
}

.footer-info a {
    color: var(--accent-gold);
    text-decoration: none;
    font-size: 0.75rem;
}

.footer-info a:hover {
    color: var(--accent-gold-hover);
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.social-link:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(203, 162, 72, 0.3);
}

.social-link i {
    font-size: 1.2rem;
}

@media (max-width: 768px) {
    .user-profile {
        padding: 1rem;
    }
    
    .profile-avatar {
        width: 50px;
        height: 50px;
    }
    
    .profile-info h4 {
        font-size: 1rem;
    }
    
    .settings-item {
        padding: 0.75rem;
        gap: 0.75rem;
    }
    
    .settings-icon {
        width: 35px;
        height: 35px;
    }
    
    .settings-icon i {
        font-size: 0.9rem;
    }
    
    .settings-content span {
        font-size: 0.85rem;
    }
    
    .partnership-card {
        padding: 1rem;
    }
    
    .partner-logo {
        gap: 0.75rem;
    }
    
    .partner-logo img {
        width: 35px;
        height: 35px;
    }
}

@media (max-width: 360px) {
    .profile-avatar {
        width: 45px;
        height: 45px;
    }
    
    .profile-info h4 {
        font-size: 0.9rem;
    }
    
    .settings-item {
        padding: 0.6rem;
        gap: 0.6rem;
    }
    
    .settings-icon {
        width: 30px;
        height: 30px;
    }
    
    .settings-icon i {
        font-size: 0.8rem;
    }
    
    .settings-content span {
        font-size: 0.8rem;
    }
    
    .partner-logo img {
        width: 30px;
        height: 30px;
    }
}

/* Styles pour la page événement */
.btn-back {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.btn-back:hover {
    color: var(--accent-gold);
    text-decoration: none;
}

.header-title h3 {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.btn-share {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    transition: all 0.3s ease;
}

.btn-share:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.event-details {
    padding: 1rem;
    padding-top: calc(var(--header-height) + 1rem);
}

.event-hero {
    margin-bottom: 2rem;
}

.flyer-container {
    position: relative;
    margin-bottom: 1.5rem;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.event-flyer {
    width: 100%;
    height: auto;
    display: block;
}

.event-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-badge.special {
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
    color: var(--primary-black);
}

.event-badge.event {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: var(--text-white);
}

.event-info {
    text-align: center;
}

.event-title {
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

.event-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.event-date, .event-time {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.event-date i, .event-time i {
    color: var(--accent-gold);
    font-size: 1rem;
}

.event-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.stat-item i {
    color: var(--accent-gold);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.stat-number {
    display: block;
    color: var(--text-white);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--text-gray);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.reservations-section {
    margin-bottom: 2rem;
}

.reservations-section h3 {
    color: var(--text-white);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    text-align: center;
}

.reservations-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.reservation-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.reservation-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.reservation-card.couple .reservation-icon {
    color: #ffd700;
}

.reservation-card.femme .reservation-icon {
    color: #ff69b4;
}

.reservation-card.homme .reservation-icon {
    color: #1e90ff;
}

.reservation-card.tgirl .reservation-icon {
    color: #32cd32;
}

.reservation-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.reservation-type {
    display: block;
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.reservation-count {
    color: var(--accent-gold);
    font-size: 1.1rem;
    font-weight: 700;
}

.event-description {
    margin-bottom: 2rem;
}

.description-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ambiance-info h3 {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ambiance-info h3 i {
    color: var(--accent-gold);
}

.ambiance-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ambiance-info li {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ambiance-info li i {
    color: var(--accent-gold);
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.details-card h3 {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
}

.details-content {
    color: var(--text-gray);
    font-size: 0.9rem;
    line-height: 1.6;
}

.pricing-section {
    margin-bottom: 2rem;
}

.pricing-section h3 {
    color: var(--text-white);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    text-align: center;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.pricing-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.pricing-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
}

.pricing-header {
    margin-bottom: 1rem;
}

.pricing-header i {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    display: block;
}

.pricing-card.couple .pricing-header i {
    color: #ffd700;
}

.pricing-card.femme .pricing-header i {
    color: #ff69b4;
}

.pricing-card.homme .pricing-header i {
    color: #1e90ff;
}

.pricing-card.tgirl .pricing-header i {
    color: #32cd32;
}

.pricing-header h4 {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.pricing-price {
    margin-top: 1rem;
}

.price {
    color: var(--accent-gold);
    font-size: 1.3rem;
    font-weight: 700;
}

.price-free {
    color: #32cd32;
    font-size: 1.1rem;
    font-weight: 700;
}

.price-not-allowed {
    color: #ff4757;
    font-size: 0.9rem;
    font-weight: 600;
}

.pricing-note {
    background: rgba(203, 162, 72, 0.1);
    border: 1px solid rgba(203, 162, 72, 0.3);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-note i {
    color: var(--accent-gold);
    font-size: 1rem;
}

.pricing-note span {
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .event-title {
        font-size: 1.3rem;
    }
    
    .event-meta {
        gap: 1rem;
    }
    
    .event-date, .event-time {
        font-size: 0.8rem;
    }
    
    .stat-item {
        padding: 0.75rem;
    }
    
    .stat-item i {
        font-size: 1.2rem;
    }
    
    .stat-number {
        font-size: 1rem;
    }
    
    .reservations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .reservation-card {
        padding: 0.75rem;
    }
    
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .pricing-card {
        padding: 1rem;
    }
}

@media (max-width: 360px) {
    .event-title {
        font-size: 1.2rem;
    }
    
    .event-stats {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .stat-item {
        padding: 0.6rem;
    }
    
    .stat-item i {
        font-size: 1rem;
    }
    
    .stat-number {
        font-size: 0.9rem;
    }
    
    .reservations-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-grid {
        grid-template-columns: 1fr;
    }
    
    .pricing-card {
        padding: 0.75rem;
    }
}

/* Styles pour le modal paramètres plein écran */
#mdllSidebarMenu-background .modal-dialog {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
}

#mdllSidebarMenu-background.show .modal-dialog {
    transform: translateX(0);
}

#mdllSidebarMenu-background .modal-content {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    border: none !important;
    background: var(--primary-black) !important;
    /* Pas de transparence, fond solide, hauteur forcée */
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

#mdllSidebarMenu-background .modal-header {
    padding: 0.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--primary-black); /* Fond solide au lieu de translucide */
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#mdllSidebarMenu-background .modal-title h3 {
    font-size: 1rem;
    margin: 0;
    color: var(--text-white);
    font-weight: 600;
}

#mdllSidebarMenu-background .close {
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 1.2rem;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

#mdllSidebarMenu-background .close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-gold);
}

#mdllSidebarMenu-background .modal-body {
    padding: 0.75rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    min-height: 0 !important;
    flex: 1 !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 1rem !important;
}

/* Profil utilisateur compact */
.user-profile {
    background: var(--secondary-black); /* Fond solide au lieu de translucide */
    border-radius: 10px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.profile-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.avatar-text {
    color: var(--primary-black);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-info h4 {
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.status-badge {
    display: inline-block;
    padding: 0.2rem 0.4rem;
    border-radius: 8px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-valid {
    background: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

.status-premium {
    background: rgba(203, 162, 72, 0.2);
    color: var(--accent-gold);
    border: 1px solid rgba(203, 162, 72, 0.3);
}

.status-admin {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border: 1px solid rgba(255, 107, 107, 0.3);
}

.btn-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(255, 71, 87, 0.2);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.3);
    border-radius: 6px;
    padding: 0.6rem;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-logout:hover {
    background: rgba(255, 71, 87, 0.3);
    color: #ff4757;
    text-decoration: none;
}

/* Menu des paramètres compact */
.settings-menu {
    margin-bottom: 1rem;
}

.settings-section h5 {
    color: var(--text-white);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.settings-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--secondary-black); /* Fond solide au lieu de translucide */
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 0.4rem;
    text-decoration: none;
    color: var(--text-white);
    transition: all 0.3s ease;
}

.settings-item:hover {
    background: rgba(255, 255, 255, 0.1); /* Moins translucide au hover */
    text-decoration: none;
    color: var(--text-white);
    transform: translateX(3px);
}

.settings-icon {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}

.settings-item:nth-child(odd) .settings-icon {
    background: var(--accent-gold); /* Fond doré solide */
    color: var(--primary-black); /* Texte noir sur fond doré */
}

.settings-item:nth-child(even) .settings-icon {
    background: #4caf50; /* Fond vert solide */
    color: var(--primary-black); /* Texte noir sur fond vert */
}

.settings-content {
    flex: 1;
    font-size: 0.8rem;
    font-weight: 500;
}

.settings-arrow {
    color: var(--text-gray);
    font-size: 0.7rem;
}

.settings-toggle {
    flex-shrink: 0;
}

.toggle-switch {
    position: relative;
    width: 35px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.toggle-switch.active {
    background: var(--accent-gold);
}

.toggle-handle {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    background: var(--text-white);
    border-radius: 50%;
    transition: all 0.3s ease;
}

.toggle-switch.active .toggle-handle {
    transform: translateX(17px);
}

/* Partenariat compact */
.partnership-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 0.6rem;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.partnership-header h5 {
    color: var(--text-white);
    font-size: 0.7rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

.partnership-content {
    text-align: center;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-size: 0.6rem;
    color: var(--text-gray);
}

.separator {
    width: 1px;
    height: 10px;
    background: rgba(255, 255, 255, 0.2);
}

.partner-logo img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
}

/* Footer compact */
#mdllSidebarMenu-background .modal-footer {
    padding: 0.6rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0 !important;
    margin-top: auto !important;
}

.footer-content {
    text-align: center;
}

.footer-logo img {
    width: 50px;
    height: auto;
    margin-bottom: 0.4rem;
}

.footer-info {
    margin-bottom: 0.5rem;
}

.footer-info p {
    color: var(--text-gray);
    font-size: 0.6rem;
    margin: 0.2rem 0;
}

.footer-info a {
    color: var(--accent-gold);
    font-size: 0.6rem;
    text-decoration: none;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
}

.social-link {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
    text-decoration: none;
}

/* Responsive pour mobile */
@media (max-width: 768px) {
    #mdllSidebarMenu-background .modal-body {
        padding: 0.75rem;
        height: calc(100vh - 120px);
    }
    
    .user-profile {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .profile-header {
        gap: 0.75rem;
    }
    
    .profile-avatar {
        width: 40px;
        height: 40px;
    }
    
    .profile-info h4 {
        font-size: 0.9rem;
    }
    
    .status-badge {
        font-size: 0.6rem;
        padding: 0.2rem 0.4rem;
    }
    
    .btn-logout {
        padding: 0.6rem;
        font-size: 0.8rem;
    }
    
    .settings-item {
        padding: 0.6rem;
        margin-bottom: 0.4rem;
    }
    
    .settings-icon {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
    
    .settings-content {
        font-size: 0.8rem;
    }
    
    .partnership-card {
        padding: 0.75rem;
    }
    
    .partner-logo {
        font-size: 0.6rem;
    }
    
    .partner-logo img {
        width: 20px;
        height: 20px;
    }
    
    #mdllSidebarMenu-background .modal-footer {
        padding: 0.75rem;
    }
    
    .footer-logo img {
        width: 50px;
    }
    
    .footer-info p {
        font-size: 0.6rem;
    }
    
    .social-link {
        width: 35px;
        height: 35px;
    }
    
    .social-link i {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    #mdllSidebarMenu-background .modal-body {
        padding: 0.5rem;
    }
    
    .user-profile {
        padding: 0.6rem;
    }
    
    .profile-avatar {
        width: 30px;
        height: 30px;
    }
    
    .avatar-text {
        font-size: 0.8rem;
    }
    
    .profile-info h4 {
        font-size: 0.85rem;
    }
    
    .settings-item {
        padding: 0.5rem;
    }
    
    .settings-icon {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .settings-content {
        font-size: 0.75rem;
    }
    
    .partnership-card {
        padding: 0.6rem;
    }
    
    .partner-logo {
        font-size: 0.55rem;
    }
    
    .partner-logo img {
        width: 18px;
        height: 18px;
    }
    
    .social-link {
        width: 30px;
        height: 30px;
    }
    
    .social-link i {
        font-size: 0.9rem;
    }
}

/* ===== STYLES MODERNES POUR LES NOUVELLES PAGES ===== */

/* Page Profil Moderne */
.profile-modern {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    padding-top: var(--header-height);
}

/* Hero Section */
.profile-hero {
    position: relative;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.1) 0%, rgba(203, 162, 72, 0.05) 100%);
    backdrop-filter: blur(20px);
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem 1rem;
}

.profile-avatar-modern {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.profile-avatar-modern img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid rgba(203, 162, 72, 0.3);
    box-shadow: 0 8px 32px rgba(203, 162, 72, 0.2);
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #cba248 0%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(203, 162, 72, 0.3);
    box-shadow: 0 8px 32px rgba(203, 162, 72, 0.2);
}

.avatar-placeholder span {
    color: #000;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.profile-name {
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.profile-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    font-weight: 500;
}

.meta-item i {
    color: #cba248;
    font-size: 1rem;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 2rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(10px);
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 1.5rem 1rem;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.stat-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.stat-icon {
    margin-bottom: 0.75rem;
}

.stat-icon i {
    color: #cba248;
    font-size: 1.5rem;
}

.stat-number {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Content Tabs */
.content-tabs {
    padding: 2rem 1rem;
}

.tab-nav {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    font-weight: 500;
}

.tab-btn.active {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
}

.tab-btn i {
    font-size: 1.2rem;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Info Sections */
.info-section {
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.section-header i {
    color: #cba248;
    font-size: 1.2rem;
}

.section-header h3 {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.section-content {
    color: rgba(255, 255, 255, 0.8);
}

.search-preference-modern {
    display: flex;
    gap: 0.5rem;
}

.preference-tag {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.description-text {
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

.achievements-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.achievement-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-icon {
    width: 40px;
    height: 40px;
    background: rgba(203, 162, 72, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievement-icon i {
    color: #cba248;
    font-size: 1rem;
}

.achievement-title {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
}

/* Events Modern */
.events-modern {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-card-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.event-card-modern:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.event-title-modern {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
}

.event-date-modern {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    margin: 0;
}

.event-status-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot.confirmed {
    background: #4caf50;
}

.status-dot.pending {
    background: #ff9800;
}

.status-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 500;
}

/* Photos Modern */
.photos-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-card-modern {
    position: relative;
    aspect-ratio: 1;
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

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

.remove-photo-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.remove-photo-btn:hover {
    background: rgba(220, 53, 69, 0.8);
}

.add-photo-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-photo-modern:hover {
    background: rgba(255, 255, 255, 0.08);
}

.add-photo-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.add-photo-content i {
    font-size: 1.5rem;
}

.add-photo-content span {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Page Membres Moderne */
.members-modern {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
    padding-top: var(--header-height);
}

.members-header {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1.5rem 1rem;
    position: sticky;
    top: var(--header-height);
    z-index: 10;
}

.header-content-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-btn-modern {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.back-btn-modern:hover {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
}

.page-title-modern {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
    text-align: center;
}

.header-actions-modern {
    display: flex;
    gap: 0.5rem;
}

.action-btn-modern {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.action-btn-modern:hover {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
    transform: scale(1.1);
}

.filters-modern {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
}

.filters-modern.show {
    transform: translateY(0);
    opacity: 1;
}

.filter-chips-modern {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.filter-chip-modern {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.filter-chip-modern.active {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
    border-color: rgba(203, 162, 72, 0.3);
}

.members-grid-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem 1rem;
}

.member-card-modern {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 20px;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.member-card-modern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.member-card-modern:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.member-card-modern:hover::before {
    opacity: 1;
}

.member-avatar-modern {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
}

.member-avatar-modern img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(203, 162, 72, 0.3);
    box-shadow: 0 4px 20px rgba(203, 162, 72, 0.2);
}

.avatar-placeholder-modern {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #cba248 0%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(203, 162, 72, 0.3);
    box-shadow: 0 4px 20px rgba(203, 162, 72, 0.2);
}

.avatar-placeholder-modern span {
    color: #000;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.online-indicator-modern {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 16px;
    height: 16px;
    background: #4caf50;
    border-radius: 50%;
    border: 3px solid #000;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.4);
}

.member-info-modern {
    text-align: center;
    margin-bottom: 1.5rem;
}

.member-name-modern {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.member-details-modern {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.member-type-modern, .member-age-modern {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.member-actions-modern {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.member-actions-modern .action-btn-modern {
    width: 45px;
    height: 45px;
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
    border: 1px solid rgba(203, 162, 72, 0.3);
}

.member-actions-modern .action-btn-modern:hover {
    background: rgba(203, 162, 72, 0.3);
    transform: scale(1.1);
}

.pagination-modern {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
}

.page-btn-modern {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: rgba(255, 255, 255, 0.7);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-weight: 500;
}

.page-btn-modern.active {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
    border: 1px solid rgba(203, 162, 72, 0.3);
}

.page-btn-modern:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* ===== DESIGN MINIMALISTE ===== */

/* Page Membres */
.members-page {
    min-height: 100vh;
    background: #0a0a0a;
    padding-top: var(--header-height);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    position: relative;
}

/* Section informative des membres */
.members-info-section {
    padding: 0;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Barre de recherche */
.search-section {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

.search-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.search-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-gray);
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-white);
    font-size: 0.9rem;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.search-input:focus {
    outline: none;
    border-color: var(--accent-gold, #cba248);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.1);
}

.search-input::placeholder {
    color: var(--text-gray);
}

.search-clear {
    position: absolute;
    right: 0.75rem;
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.search-clear:hover {
    color: var(--accent-gold, #cba248);
    transform: scale(1.1);
}

.members-info-toggle {
    width: 100%;
    padding: 0.75rem 1rem;
    background: transparent;
    border: none;
    color: var(--text-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    font-size: 0.85rem;
}

.members-info-toggle:hover {
    background: rgba(255, 255, 255, 0.03);
}

.members-info-toggle i:first-child {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.members-info-toggle span {
    flex: 1;
    color: var(--text-gray);
    font-weight: 500;
}

.toggle-icon {
    color: var(--text-gray);
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.members-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 100%;
    box-sizing: border-box;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1rem;
}

.members-info-content.open {
    max-height: 500px;
    padding: 0.75rem 1rem 1rem;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.info-item i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.info-item p {
    color: var(--text-gray);
    font-size: 0.7rem;
    line-height: 1.4;
    margin: 0;
    flex: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.info-item p strong {
    color: var(--text-white);
    font-weight: 500;
}

.info-item-small {
    padding: 0.4rem 0.6rem;
    background: rgba(255, 255, 255, 0.01);
}

.info-item-small i {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.3);
}

.info-item-small p {
    font-size: 0.65rem;
    color: var(--text-gray);
}

.info-item-small p strong {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

/* Empêcher tout débordement sur la page membres */
body:has(.members-page) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

html:has(.members-page) {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

.filters-section {
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
    position: relative;
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
    margin-right: 0;
}

.filter-chips::-webkit-scrollbar {
    display: none;
}

.filter-chip {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.75rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    box-sizing: border-box;
}

.filter-chip.active {
    background: #cba248;
    color: #000;
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    min-width: 0;
}

.members-grid * {
    min-width: 0;
    max-width: 100%;
}

.member-card {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}

.member-card * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Pagination des membres */
.members-pagination {
    padding: 1.5rem 1rem;
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.pagination-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pagination-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.pagination-btn:hover:not(.disabled) {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-gold, #cba248);
    color: var(--accent-gold);
    transform: translateY(-1px);
}

.pagination-btn.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-white);
    text-decoration: none;
    font-size: 0.85rem;
    transition: all 0.3s ease;
    cursor: pointer;
    box-sizing: border-box;
}

.pagination-page:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.pagination-page.active {
    background: var(--accent-gold, #cba248);
    border-color: var(--accent-gold);
    color: var(--primary-black);
    font-weight: 600;
}

.pagination-dots {
    color: var(--text-gray);
    padding: 0 0.25rem;
    font-size: 0.85rem;
}

.pagination-info {
    color: var(--text-gray);
    font-size: 0.75rem;
    text-align: center;
}

@media (max-width: 768px) {
    .members-pagination {
        padding: 1rem 0.75rem;
    }
    
    .pagination-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .pagination-btn span {
        display: none;
    }
    
    .pagination-page {
        min-width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    
    .pagination-info {
        font-size: 0.7rem;
    }
}

.member-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.member-photo {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 120px;
    margin-bottom: 1rem;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    box-sizing: border-box;
}

.member-photo img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    box-sizing: border-box;
}

.photo-placeholder {
    width: 100%;
    max-width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #cba248 0%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.photo-placeholder span {
    color: #000;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.online-dot {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 15px;
    height: 15px;
    background: #4caf50;
    border-radius: 50%;
    border: 2px solid #000;
}

.member-info {
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.member-name {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.certification-icon {
    color: #4ade80;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.3rem;
    filter: drop-shadow(0 1px 3px rgba(74, 222, 128, 0.3));
}

.certification-icon:hover {
    transform: scale(1.15);
    color: #22c55e;
    filter: drop-shadow(0 2px 4px rgba(74, 222, 128, 0.5));
}

.member-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.member-age, .member-type {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

.member-actions {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.action-btn {
    background: rgba(203, 162, 72, 0.2);
    border: none;
    color: #cba248;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1rem;
    flex-shrink: 0;
    box-sizing: border-box;
}

.action-btn:hover {
    background: rgba(203, 162, 72, 0.3);
    transform: scale(1.1);
}

.action-btn i {
    font-size: 1rem;
}

/* Page Messages */
.messages-page {
    min-height: 100vh;
    background: #0a0a0a;
    padding-top: var(--header-height);
}



.chat-list {
    padding: 0;
    background: #0a0a0a;
    min-height: 100vh;
    padding-top: 0;
    margin-top: 0;
}

/* Message de chat désactivé */
.chat-disabled-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--header-height));
    padding: 2rem 1rem;
    background: #0a0a0a;
}

.chat-disabled-content {
    text-align: center;
    max-width: 500px;
    padding: 2rem;
    background: rgba(255, 193, 7, 0.1);
    border: 2px solid rgba(255, 193, 7, 0.3);
    border-radius: 12px;
}

.chat-disabled-content i {
    font-size: 3rem;
    color: #ffc107;
    margin-bottom: 1rem;
}

.chat-disabled-content h3 {
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.chat-disabled-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .chat-disabled-content {
        padding: 1.5rem;
    }
    
    .chat-disabled-content i {
        font-size: 2.5rem;
    }
    
    .chat-disabled-content h3 {
        font-size: 1.25rem;
    }
    
    .chat-disabled-content p {
        font-size: 0.9rem;
    }
}

.chat-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    background: none;
}

.chat-row:hover {
    background: rgba(255, 255, 255, 0.02);
}

.chat-pic {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.chat-pic.has-photo {
    border: 1px solid var(--accent-gold, #Cba248);
    border-radius: 50%;
    padding: 1px;
    box-sizing: border-box;
}

.chat-pic.has-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.chat-pic .online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    background: #4caf50;
    border: 2px solid var(--primary-black);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}

.chat-pic img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.pic-placeholder {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #cba248 0%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pic-placeholder span {
    color: #000;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #4caf50;
    border-radius: 50%;
    border: 2px solid #000;
}

.chat-info {
    flex: 1;
    min-width: 0;
}

.chat-name {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.chat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.chat-top-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.chat-name {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-time {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.chat-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.chat-badge {
    background: #cba248;
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.unread-badge-circle {
    background: #cba248;
    color: #000;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0 6px;
    border: 2px solid #000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.no-messages {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    background: #0a0a0a;
    min-height: 100vh;
    padding-top: var(--header-height);
}

.no-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(203, 162, 72, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.no-icon i {
    font-size: 2rem;
    color: #cba248;
}

.no-messages h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.no-messages p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 1.5rem 0;
}

.new-msg-btn {
    background: #cba248;
    color: #000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.new-msg-btn:hover {
    background: #d4af37;
    transform: translateY(-2px);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(203, 162, 72, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-icon i {
    font-size: 2rem;
    color: #cba248;
}

.empty-state h3 {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.empty-state p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin: 0 0 1.5rem 0;
}

.btn-primary {
    background: #cba248;
    color: #000;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #d4af37;
    transform: translateY(-2px);
}

/* Page Profil Compact */
.profile-compact {
    min-height: 100vh;
    background: #0a0a0a;
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: 90px; /* Espace pour le bouton fixe en bas */
}

.profile-photo-top {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
    aspect-ratio: 2/3;
}

/* Stats sous la photo */
.profile-stats-under-photo {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    gap: 1rem;
}

.stat-item-under {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.stat-value-under {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 700;
}

.stat-value-under.certified {
    color: #4ade80;
    font-size: 0.9rem;
}

.stat-label-under {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-photo-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-top-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #cba248 0%, #d4af37 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Photo BEAUCOUP PLUS LONGUE - de haut en bas */
    aspect-ratio: 2/3;
}

.photo-top-placeholder span {
    color: #000;
    font-size: 4rem; /* Taille augmentée pour la photo plus longue */
    font-weight: 700;
    text-transform: uppercase;
}

.profile-info-section {
    background: rgba(255, 255, 255, 0.02);
    padding: 1.5rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.profile-name-compact {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.75rem 0;
}

.age-display-with-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.age-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 400;
}

.age-item i {
    font-size: 1rem;
}

.type-display {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    margin-bottom: 0.5rem;
}

.profile-location {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.profile-meta-compact {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.meta-item-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.meta-item-compact i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.8rem;
}

.stats-compact {
    display: flex;
    justify-content: space-around;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Bouton Envoyer un message */
.message-action-section {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-send-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--accent-gold);
    color: var(--primary-black);
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    width: 100%;
}

.btn-send-message:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--primary-black);
}

.btn-send-message i {
    font-size: 1rem;
}

/* Bouton Envoyer un message sur le profil */
.message-button-container {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding: 1rem !important;
    background: var(--primary-black, #0a0a0a) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    z-index: 10000 !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.3) !important;
    display: block !important;
    visibility: visible !important;
}

.btn-send-message-profile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: var(--accent-gold, #cba248);
    color: var(--primary-black, #0a0a0a);
    text-decoration: none;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3);
}

.btn-send-message-profile:hover {
    background: var(--accent-gold-hover, #d4af37);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--primary-black, #0a0a0a);
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4);
}

.btn-send-message-profile:active {
    transform: translateY(0);
}

.btn-send-message-profile i {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .message-button-container {
        padding: 0.875rem;
    }
    
    .btn-send-message-profile {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
    }
    
    .btn-send-message-profile i {
        font-size: 1rem;
    }
}

.stat-item-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.stat-item-compact i {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1rem;
}

.stat-item-compact span {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.stat-item-compact small {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.7rem;
}

.tabs-compact {
    display: flex;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tab-btn-compact {
    flex: 1;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    padding: 0.75rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    font-size: 0.75rem;
}

.tab-btn-compact.active {
    color: var(--text-white);
    border-bottom: 2px solid var(--accent-gold, #cba248);
}

.tab-btn-compact i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.4);
}

.tab-btn-compact.active i {
    color: var(--accent-gold, #cba248);
}

.tab-content-compact {
    display: none;
    padding: 1rem;
}

.tab-content-compact.active {
    display: block;
}

.info-section-compact {
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header-compact h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.85rem;
}

.section-header-compact i {
    display: none; /* Masquer les icônes */
}

.section-header-compact h3 {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
}

.section-content-compact {
    color: rgba(255, 255, 255, 0.8);
}

.preference-tag-compact {
    background: rgba(203, 162, 72, 0.2);
    color: #cba248;
    padding: 0.4rem 0.8rem;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.description-text-compact {
    line-height: 1.5;
    font-size: 0.85rem;
    margin: 0;
}

/* Events Compact - Style Soirées */
.events-list-compact {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-item-compact {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.event-item-compact:hover {
    background: rgba(255, 255, 255, 0.05);
}

.event-flyer-compact {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.event-flyer-compact img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    object-fit: cover;
}

.event-badge-compact {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #cba248;
    color: #000;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.event-info-compact {
    flex: 1;
    min-width: 0;
}

.event-date-compact {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.event-time-compact {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.event-title-compact {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-type-compact {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.event-status-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-dot-compact {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status-dot-compact.confirmed {
    background: #4caf50;
}

.status-dot-compact.pending {
    background: #ff9800;
}

.status-text-compact {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
}

/* Photos Compact */
.photos-grid-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-item-compact {
    position: relative;
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.photo-item-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.remove-photo-btn-compact {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.add-photo-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-photo-content-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.add-photo-content-compact i {
    font-size: 1.5rem;
}

.add-photo-content-compact span {
    font-size: 0.8rem;
}

.profile-header-section {
    background: linear-gradient(135deg, var(--accent-gold) 0%, #d4af37 100%);
    padding: 2rem 1rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.profile-header-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.profile-cover {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.profile-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--primary-black);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.avatar-text-large {
    color: var(--accent-gold);
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile-info-main h2 {
    color: var(--primary-black);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.profile-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.badge-type, .badge-age {
    background: rgba(0, 0, 0, 0.3);
    color: var(--primary-black);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-edit-profile {
    background: rgba(0, 0, 0, 0.2);
    border: none;
    color: var(--primary-black);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    transition: all 0.3s ease;
}

.btn-edit-profile:hover {
    background: rgba(0, 0, 0, 0.4);
    transform: scale(1.1);
}

.profile-stats {
    display: flex;
    justify-content: space-around;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.profile-stats .stat-item i {
    color: var(--accent-gold);
    font-size: 1.5rem;
}

.profile-stats .stat-number {
    color: var(--text-white);
    font-size: 1.25rem;
    font-weight: 700;
}

.profile-stats .stat-label {
    color: var(--text-muted);
    font-size: 0.8rem;
}

.profile-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-tabs .tab-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 1rem 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

.profile-tabs .tab-btn.active {
    color: var(--accent-gold);
    border-bottom: 2px solid var(--accent-gold);
}

.profile-tabs .tab-btn i {
    font-size: 1.2rem;
}

.tab-content {
    display: none;
    padding: 1.5rem 1rem;
}

.tab-content.active {
    display: block;
}

.profile-section {
    margin-bottom: 2rem;
}

.profile-section h4 {
    color: var(--accent-gold);
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.search-preference, .user-description {
    color: var(--text-white);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.achievements {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.achievement-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.achievement-item i {
    color: var(--accent-gold);
    font-size: 1.2rem;
}

.achievement-item span {
    color: var(--text-white);
    font-size: 0.9rem;
}

.events-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.event-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.event-info h5 {
    color: var(--text-white);
    font-size: 1rem;
    margin: 0 0 0.25rem 0;
}

.event-date {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin: 0;
}

.status-badge.confirmed {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.status-badge.pending {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.photos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-item.add-photo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.photo-item.add-photo:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--accent-gold);
}

.photo-item.add-photo i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.photo-item.add-photo span {
    font-size: 0.8rem;
}

.btn-remove-photo {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

/* Page Membres */
.members-page {
    padding-top: calc(var(--header-height) + 1rem);
    min-height: 100vh;
    background: var(--primary-black);
}

.page-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    position: sticky;
    top: var(--header-height);
    z-index: 10;
}

.header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-title {
    color: var(--text-white);
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    flex: 1;
    text-align: center;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-filter, .btn-search, .btn-new-message {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-filter:hover, .btn-search:hover, .btn-new-message:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.filters-section {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.02);
}

.filter-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.filter-chip {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-chip.active {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.members-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.member-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    position: relative;
}

.member-card:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.member-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 auto 0.75rem;
}

.avatar-text-member {
    width: 100%;
    height: 100%;
    background: var(--accent-gold);
    color: var(--primary-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background: #4caf50;
    border-radius: 50%;
    border: 2px solid var(--primary-black);
}

.member-info {
    text-align: center;
    margin-bottom: 1rem;
}

.member-name {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.member-details {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.member-type, .member-age {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    font-size: 0.7rem;
}

.member-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.btn-message, .btn-profile {
    background: var(--accent-gold);
    border: none;
    color: var(--primary-black);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-message:hover, .btn-profile:hover {
    transform: scale(1.1);
}

.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
}

.btn-page {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-page.active {
    background: var(--accent-gold);
    color: var(--primary-black);
}

/* Page Messages */
.messages-page {
    padding-top: calc(var(--header-height) + 1rem);
    min-height: 100vh;
    background: var(--primary-black);
}

.messages-stats {
    display: flex;
    justify-content: space-around;
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.messages-stats .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.messages-stats .stat-item i {
    color: var(--accent-gold);
    font-size: 1.2rem;
}

.messages-stats .stat-number {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 700;
}

.messages-stats .stat-label {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.conversations-list {
    padding: 1rem;
}

.conversation-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    margin-bottom: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
}

.conversation-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(5px);
}

.conversation-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.avatar-text-conversation {
    width: 100%;
    height: 100%;
    background: var(--accent-gold);
    color: var(--primary-black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 700;
    text-transform: uppercase;
}

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

.conversation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.conversation-name {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversation-time {
    color: var(--text-muted);
    font-size: 0.75rem;
    flex-shrink: 0;
}

.conversation-preview {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.last-message {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.unread-badge {
    background: var(--accent-gold);
    color: var(--primary-black);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.conversation-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-more {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.btn-more:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
}

.empty-icon {
    font-size: 4rem;
    color: var(--accent-gold);
    margin-bottom: 1rem;
}

.empty-state h4 {
    color: var(--text-white);
    margin-bottom: 0.5rem;
}

.empty-state p {
    margin-bottom: 2rem;
}

.btn-primary {
    background: var(--accent-gold);
    color: var(--primary-black);
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(203, 162, 72, 0.3);
}

/* Page Conversation */
.conversation-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--primary-black);
}

.conversation-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    position: sticky;
    top: 0;
    z-index: 200;
}

.conversation-header .header-content {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
}

.conversation-header .header-actions {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
}

.conversation-header .btn-more {
    position: relative;
    z-index: 1001;
}

.conversation-header .btn-back {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.btn-back:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.user-info-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    cursor: pointer;
    z-index: 1;
    width: auto;
}

.user-avatar-center {
    position: relative;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.user-avatar-center.has-photo {
    border: 1px solid var(--accent-gold, #Cba248);
    border-radius: 50%;
    padding: 1px;
    box-sizing: border-box;
}

.user-avatar-center.has-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.user-avatar-center img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.user-avatar-center .avatar-text-conversation {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--accent-gold);
    color: var(--primary-black);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
}

.online-indicator-small {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #4caf50;
    border: 2px solid var(--primary-black);
    border-radius: 50%;
    z-index: 1;
}

.offline-indicator-small {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #666;
    border: 2px solid var(--primary-black);
    border-radius: 50%;
    z-index: 1;
}

.certification-icon-small {
    color: var(--accent-gold);
    font-size: 0.85rem;
    margin-left: 0.25rem;
    vertical-align: middle;
}

.chat-name .certification-icon-small {
    font-size: 0.75rem;
}

.user-name-center .certification-icon-small {
    font-size: 0.9rem;
}

/* Filtres de conversation avec scroll horizontal */
.chat-filters {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    padding-top: calc(var(--header-height) + 0.5rem);
    margin-bottom: 0;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    position: sticky;
    top: 0;
    z-index: 5;
}

.chat-filters::-webkit-scrollbar {
    display: none;
}

.chat-filters .filter-chip {
    padding: 0.4rem 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--text-white);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    flex-shrink: 0;
    font-weight: 500;
}

.chat-filters .filter-chip.active {
    background: var(--accent-gold);
    color: var(--primary-black);
    font-weight: 600;
    border-color: var(--accent-gold);
}

.chat-filters .filter-chip:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.chat-filters .filter-chip.active:hover {
    background: var(--accent-gold);
    opacity: 0.9;
}

.user-name-type-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.user-name-online-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.user-name-center {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.online-badge,
.offline-badge {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.online-badge i {
    color: #4caf50;
    font-size: 0.6rem;
}

.offline-badge i {
    color: var(--text-muted);
    font-size: 0.6rem;
}

.user-type-center {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

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

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-status {
    color: var(--text-muted);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.user-status i {
    font-size: 0.6rem;
}

.user-status i:first-child {
    color: #4caf50;
}

.header-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-video-call, .btn-voice-call {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-video-call:hover, .btn-voice-call:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.messages-container {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message-item {
    display: flex;
    margin-bottom: 1rem;
}

.message-mine {
    justify-content: flex-end;
}

.message-other {
    justify-content: flex-start;
}

.message-content {
    max-width: 70%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.message-mine .message-content {
    align-items: flex-end;
}

.message-other .message-content {
    align-items: flex-start;
}

.message-bubble {
    background: var(--accent-gold);
    color: var(--primary-black);
    padding: 0.5rem 0.75rem;
    border-radius: 14px;
    border-bottom-right-radius: 4px;
    position: relative;
    font-weight: 500;
    max-width: 100%;
    width: fit-content;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    overflow: visible;
}

.message-other .message-bubble {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-white);
    border-bottom-right-radius: 14px;
    border-bottom-left-radius: 4px;
    font-weight: 500;
}

.message-text {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.4;
    color: inherit;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: normal;
    white-space: normal;
    max-width: 100%;
    width: auto;
    display: inline-block;
}

.message-time {
    font-size: 0.7rem;
    opacity: 0.6;
    display: block;
    margin-top: 0.25rem;
    text-align: right;
}

.message-mine .message-time {
    text-align: right;
}

.message-other .message-time {
    text-align: left;
}

.message-input-container {
    background: rgba(255, 255, 255, 0.03);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.input-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-plus {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-white);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    font-weight: 300;
    cursor: pointer;
    flex-shrink: 0;
}

.btn-plus:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
    transform: scale(1.05);
}

.btn-plus:active {
    transform: scale(0.95);
}

.btn-attachment, .btn-emoji {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--text-muted);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.btn-attachment:hover, .btn-emoji:hover {
    background: var(--accent-gold);
    color: var(--primary-black);
}

.message-input-wrapper {
    flex: 1;
}

.message-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    font-size: 1rem;
    line-height: 1.5;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    transition: all 0.3s ease;
    font-family: inherit;
    overflow-y: auto;
}

.message-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.08);
}

.message-input::placeholder {
    color: var(--text-muted);
}

.btn-send {
    background: var(--accent-gold);
    border: none;
    color: var(--primary-black);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

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

.user-menu, .attachment-menu {
    position: fixed !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    border-radius: 10px !important;
    padding: 0.5rem 0 !important;
    min-width: 220px !important;
    z-index: 999999 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

.user-menu[style*="display: none"],
.attachment-menu[style*="display: none"] {
    display: none !important;
}

.attachment-menu {
    bottom: 80px !important;
    left: 1rem !important;
    right: auto !important;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--text-white);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-item i {
    color: var(--accent-gold);
    width: 20px;
    text-align: center;
}

/* Responsive */
@media (max-width: 768px) {
    .profile-avatar-large {
        width: 70px;
        height: 70px;
    }
    
    .avatar-text-large {
        font-size: 1.8rem;
    }
    
    .profile-info-main h2 {
        font-size: 1.3rem;
    }
    
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 0.75rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .member-card {
        padding: 0.75rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .member-avatar {
        width: 50px;
        height: 50px;
    }
    
    .avatar-text-member {
        font-size: 1.2rem;
    }
    
    .conversation-avatar {
        width: 45px;
        height: 45px;
    }
    
    .avatar-text-conversation {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .profile-avatar-large {
        width: 60px;
        height: 60px;
    }
    
    .avatar-text-large {
        font-size: 1.5rem;
    }
    
    .profile-info-main h2 {
        font-size: 1.1rem;
    }
    
    .members-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .member-card {
        padding: 0.5rem;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    .member-name {
        font-size: 0.9rem;
    }
    
    .member-details {
        font-size: 0.8rem;
    }
    
    .member-avatar {
        width: 45px;
        height: 45px;
    }
    
    .avatar-text-member {
        font-size: 1rem;
    }
    
    .conversation-avatar {
        width: 40px;
        height: 40px;
    }
    
    .avatar-text-conversation {
        font-size: 0.9rem;
    }
    
    .message-input-container {
        padding: 0.75rem;
    }
    
    .btn-send {
        width: 35px;
        height: 35px;
    }
}

/* Styles compacts pour vue_soiree.php */
.event-stats-compact {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.stat-compact i {
    color: var(--accent-gold);
    font-size: 1rem;
}

.stat-compact span {
    color: var(--text-white);
    font-size: 0.8rem;
    font-weight: 600;
}

.reservations-compact {
    margin-bottom: 1.5rem;
}

.reservations-mini {
    display: flex;
    justify-content: space-around;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reservation-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
}

.reservation-mini.couple i {
    color: #ffd700;
}

.reservation-mini.femme i {
    color: #ff69b4;
}

.reservation-mini.homme i {
    color: #1e90ff;
}

.reservation-mini.tgirl i {
    color: #32cd32;
}

.reservation-mini i {
    font-size: 1rem;
}

.reservation-mini span {
    color: var(--text-white);
    font-size: 0.8rem;
    font-weight: 600;
}

.event-description-compact {
    margin-bottom: 1.5rem;
}

.ambiance-compact {
    margin-bottom: 1rem;
}

.ambiance-mini {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 0.5rem;
}

.ambiance-mini i {
    color: var(--accent-gold);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.ambiance-mini div {
    flex: 1;
}

.ambiance-mini strong {
    display: block;
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.ambiance-mini span {
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.3;
}

.details-compact {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.details-compact h4 {
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.details-compact .details-content {
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.4;
}

.pricing-compact {
    margin-bottom: 1.5rem;
}

.pricing-mini {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.price-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.price-mini.couple i {
    color: #ffd700;
}

.price-mini.femme i {
    color: #ff69b4;
}

.price-mini.homme i {
    color: #1e90ff;
}

.price-mini.tgirl i {
    color: #32cd32;
}

.price-mini i {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.price-label {
    color: var(--text-gray);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.price-value {
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 700;
}

.price-mini.couple .price-value {
    color: #ffd700;
}

.price-mini.femme .price-value {
    color: #ff69b4;
}

.price-mini.homme .price-value {
    color: #1e90ff;
}

.price-mini.tgirl .price-value {
    color: #32cd32;
}

.pricing-note-compact {
    background: rgba(203, 162, 72, 0.1);
    border: 1px solid rgba(203, 162, 72, 0.3);
    border-radius: 6px;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-note-compact i {
    color: var(--accent-gold);
    font-size: 0.8rem;
}

.pricing-note-compact span {
    color: var(--text-gray);
    font-size: 0.7rem;
    line-height: 1.3;
}

@media (max-width: 768px) {
    .event-stats-compact {
        padding: 0.6rem;
    }
    
    .stat-compact i {
        font-size: 0.9rem;
    }
    
    .stat-compact span {
        font-size: 0.75rem;
    }
    
    .reservations-mini {
        padding: 0.6rem;
    }
    
    .reservation-mini i {
        font-size: 0.9rem;
    }
    
    .reservation-mini span {
        font-size: 0.75rem;
    }
    
    .ambiance-mini {
        padding: 0.6rem;
    }
    
    .ambiance-mini i {
        font-size: 1.1rem;
    }
    
    .ambiance-mini strong {
        font-size: 0.85rem;
    }
    
    .ambiance-mini span {
        font-size: 0.75rem;
    }
    
    .details-compact {
        padding: 0.6rem;
    }
    
    .details-compact h4 {
        font-size: 0.85rem;
    }
    
    .details-compact .details-content {
        font-size: 0.75rem;
    }
    
    .price-mini {
        padding: 0.6rem;
    }
    
    .price-mini i {
        font-size: 0.9rem;
    }
    
    .price-label {
        font-size: 0.65rem;
    }
    
    .price-value {
        font-size: 0.8rem;
    }
    
    .pricing-note-compact {
        padding: 0.4rem;
    }
    
    .pricing-note-compact i {
        font-size: 0.75rem;
    }
    
    .pricing-note-compact span {
        font-size: 0.65rem;
    }
}

@media (max-width: 360px) {
    .event-stats-compact {
        padding: 0.5rem;
    }
    
    .stat-compact i {
        font-size: 0.8rem;
    }
    
    .stat-compact span {
        font-size: 0.7rem;
    }
    
    .reservations-mini {
        padding: 0.5rem;
    }
    
    .reservation-mini i {
        font-size: 0.8rem;
    }
    
    .reservation-mini span {
        font-size: 0.7rem;
    }
    
    .ambiance-mini {
        padding: 0.5rem;
    }
    
    .ambiance-mini i {
        font-size: 1rem;
    }
    
    .ambiance-mini strong {
        font-size: 0.8rem;
    }
    
    .ambiance-mini span {
        font-size: 0.7rem;
    }
    
    .details-compact {
        padding: 0.5rem;
    }
    
    .details-compact h4 {
        font-size: 0.8rem;
    }
    
    .details-compact .details-content {
        font-size: 0.7rem;
    }
    
    .price-mini {
        padding: 0.5rem;
    }
    
    .price-mini i {
        font-size: 0.8rem;
    }
    
    .price-label {
        font-size: 0.6rem;
    }
    
    .price-value {
        font-size: 0.75rem;
    }
    
    .pricing-note-compact {
        padding: 0.35rem;
    }
    
    .pricing-note-compact i {
        font-size: 0.7rem;
    }
    
    .pricing-note-compact span {
        font-size: 0.6rem;
    }
}

/* Styles pour les nouveaux éléments de vue_soiree.php */
.event-date-simple {
    color: var(--accent-gold);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 0.5rem;
}

.event-time-simple {
    color: var(--text-gray);
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 1rem;
}

.participate-section {
    margin-top: 2rem;
    padding: 0 1rem;
}

.btn-participate {
    width: 100%;
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
    color: var(--primary-black);
    border: none;
    border-radius: 10px;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3);
}

.btn-participate:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4);
}

.btn-participate:active {
    transform: translateY(0);
}

.btn-participate i {
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .event-date-simple {
        font-size: 0.8rem;
    }
    
    .event-time-simple {
        font-size: 0.75rem;
    }
    
    .btn-participate {
        padding: 0.9rem;
        font-size: 0.9rem;
    }
    
    .btn-participate i {
        font-size: 1rem;
    }
}

@media (max-width: 360px) {
    .event-date-simple {
        font-size: 0.75rem;
    }
    
    .event-time-simple {
        font-size: 0.7rem;
    }
    
    .btn-participate {
        padding: 0.8rem;
        font-size: 0.85rem;
    }
    
    .btn-participate i {
        font-size: 0.9rem;
    }
}

/* Styles pour la page soirees.php */
.emPage__public {
    padding-top: calc(var(--header-height) + 1.5rem);
    min-height: 100vh;
    background: var(--primary-black);
}

/* Styles pour la page horaires.php */
.schedule-tabs {
    padding: 1rem;
    margin-bottom: 1rem;
}

.tab-buttons {
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 0.25rem;
    backdrop-filter: blur(10px);
}

.tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-gray);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: pointer;
}

.tab-btn.active {
    background: var(--accent-gold);
    color: var(--primary-black);
    box-shadow: 0 2px 8px rgba(203, 162, 72, 0.3);
}

.tab-btn:hover:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
}

.tab-btn i {
    font-size: 1rem;
}

.tab-content {
    display: none;
    padding: 0 1rem;
}

.tab-content.active {
    display: block;
}

.schedule-section {
    margin-bottom: 2rem;
}

.schedule-header {
    text-align: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    backdrop-filter: blur(10px);
}

.schedule-header h4 {
    color: var(--accent-gold);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.schedule-header p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0;
}

.schedule-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

.schedule-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.schedule-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    border-color: var(--accent-gold);
}

.schedule-card.evening {
    border-color: rgba(203, 162, 72, 0.3);
}

.day-header {
    text-align: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.day-icon {
    width: 40px;
    height: 40px;
    background: var(--accent-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    color: var(--primary-black);
    font-size: 1.2rem;
}

.day-header h5 {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.schedule-time {
    color: var(--accent-gold);
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.schedule-type {
    color: var(--text-gray);
    font-size: 0.8rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pricing-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.price-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.price-item:hover {
    background: rgba(255, 255, 255, 0.08);
}

.price-item i {
    width: 20px;
    color: var(--accent-gold);
    font-size: 0.9rem;
}

.price-item span {
    color: var(--text-white);
    font-size: 0.85rem;
    font-weight: 500;
    flex: 1;
    margin-left: 0.5rem;
}

.price-item strong {
    color: var(--accent-gold);
    font-size: 0.9rem;
    font-weight: 600;
}

.price-item.special strong {
    color: #ff6b6b;
    animation: pulse 2s infinite;
}

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

.schedule-note {
    margin-top: 1.5rem;
    padding: 1rem;
    background: rgba(203, 162, 72, 0.1);
    border: 1px solid rgba(203, 162, 72, 0.2);
    border-radius: 12px;
    text-align: center;
}

.schedule-note i {
    color: var(--accent-gold);
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.schedule-note p {
    color: var(--text-gray);
    font-size: 0.8rem;
    margin: 0.25rem 0;
    line-height: 1.4;
}

.schedule-note strong {
    color: var(--accent-gold);
}

@media (max-width: 768px) {
    .schedule-grid {
        gap: 0.75rem;
    }
    
    .schedule-card {
        padding: 0.75rem;
    }
    
    .day-header h5 {
        font-size: 1rem;
    }
    
    .schedule-time {
        font-size: 0.85rem;
    }
    
    .price-item {
        padding: 0.4rem;
    }
    
    .price-item span {
        font-size: 0.8rem;
    }
    
    .price-item strong {
        font-size: 0.85rem;
    }
}

@media (max-width: 360px) {
    .schedule-tabs {
        padding: 0.75rem;
    }
    
    .tab-btn {
        padding: 0.6rem;
        font-size: 0.8rem;
    }
    
    .tab-btn i {
        font-size: 0.9rem;
    }
    
    .schedule-header {
        padding: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .schedule-header h4 {
        font-size: 1.1rem;
    }
    
    .schedule-header p {
        font-size: 0.8rem;
    }
    
    .schedule-card {
        padding: 0.6rem;
    }
    
    .day-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
    
    .day-header h5 {
        font-size: 0.9rem;
    }
    
    .schedule-time {
        font-size: 0.8rem;
    }
    
    .schedule-type {
        font-size: 0.75rem;
    }
    
    .price-item {
        padding: 0.35rem;
    }
    
    .price-item i {
        font-size: 0.8rem;
    }
    
    .price-item span {
        font-size: 0.75rem;
    }
    
    .price-item strong {
        font-size: 0.8rem;
    }
    
    .schedule-note {
        padding: 0.75rem;
        margin-top: 1rem;
    }
    
    .schedule-note p {
        font-size: 0.75rem;
    }
}

.announcement-modern {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    backdrop-filter: blur(10px);
}

.announcement-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.announcement-icon i {
    color: var(--primary-black);
    font-size: 1.2rem;
}

.announcement-content h4 {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.announcement-content p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.soirees-list {
    padding: 0 1rem;
    margin-top: 1rem;
}

/* Format liste */
.soiree-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.soiree-item:hover {
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.soiree-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.soiree-flyer-small {
    width: 80px;
    height: 120px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.flyer-image-small {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.soiree-item:hover .flyer-image-small {
    transform: scale(1.05);
}

.soiree-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    height: 120px;
}

.soiree-info-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.3rem;
}

.soiree-date {
    color: var(--accent-gold);
    font-size: 0.9rem;
    font-weight: 600;
}

.soiree-time {
    color: var(--text-gray);
    font-size: 0.8rem;
    font-weight: 500;
}

.soiree-title {
    color: var(--text-white);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    text-align: center;
}

.soiree-type {
    color: var(--text-gray);
    font-size: 0.7rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    justify-content: center;
}

.soiree-type i {
    font-size: 0.8rem;
    color: var(--accent-gold);
}

.soiree-badge-small {
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-black);
    white-space: nowrap;
    align-self: flex-end;
    margin-top: auto;
}

.soiree-badge-small.special {
    background: linear-gradient(135deg, var(--accent-gold), #ffd700);
}

.soiree-badge-small.event {
    background: linear-gradient(135deg, #e91e63, #ff9800);
}

.soiree-badge-small.exclusive {
    background: linear-gradient(135deg, #9c27b0, #673ab7);
}

@media (max-width: 768px) {
    .announcement-modern {
        margin: 0.75rem;
        padding: 0.75rem;
    }
    
    .announcement-icon {
        width: 40px;
        height: 40px;
    }
    
    .announcement-icon i {
        font-size: 1rem;
    }
    
    .announcement-content h4 {
        font-size: 0.9rem;
    }
    
    .announcement-content p {
        font-size: 0.8rem;
    }
    
    .soirees-list {
        padding: 0 0.75rem;
    }
    
    .soiree-item {
        margin-bottom: 0.6rem;
    }
    
    .soiree-link {
        padding: 0.6rem;
        gap: 0.75rem;
    }
    
    .soiree-flyer-small {
        width: 70px;
        height: 100px;
    }
    
    .soiree-content {
        height: 100px;
    }
    
    .soiree-date {
        font-size: 0.8rem;
    }
    
    .soiree-time {
        font-size: 0.75rem;
    }
    
    .soiree-title {
        font-size: 0.9rem;
    }
    
    .soiree-type {
        font-size: 0.65rem;
    }
    
    .soiree-type i {
        font-size: 0.7rem;
    }
    
    .soiree-badge-small {
        padding: 0.15rem 0.4rem;
        font-size: 0.55rem;
    }
}

/* ===== RÉSERVATIONS STYLES ===== */
.blocked-reservation-modern {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    border: 2px solid #ef4444;
    border-radius: var(--border-radius);
    padding: 2rem;
    margin: 1.5rem 0;
    text-align: center;
}

.blocked-content-modern {
    margin-bottom: 1.5rem;
}

.blocked-icon-modern {
    font-size: 3rem;
    color: white;
    margin-bottom: 1rem;
    display: block;
}

.blocked-content-modern h3 {
    color: white;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.blocked-content-modern p {
    color: white;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.contact-section-modern {
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    backdrop-filter: blur(10px);
}

.contact-section-modern h4 {
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.contact-link-modern {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius);
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-link-modern:hover {
    background: rgba(255, 255, 255, 0.3);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.contact-note-modern {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.85rem;
    margin: 1rem 0 0 0;
    line-height: 1.4;
}

.no-reservations-modern {
    text-align: center;
    padding: 3rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.no-reservations-modern i {
    font-size: 3rem;
    color: var(--text-gray);
    margin-bottom: 1rem;
    display: block;
}

.no-reservations-modern h3 {
    color: var(--text-white);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.no-reservations-modern p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0;
}

.reservation-card-modern {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(203, 162, 72, 0.3);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.reservation-card-modern:hover {
    transform: translateY(-2px);
    border-color: var(--accent-gold);
    box-shadow: 0 8px 25px rgba(203, 162, 72, 0.1);
}

.reservation-header-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(203, 162, 72, 0.2);
}

.reservation-date-modern {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-gold);
    font-weight: 600;
    font-size: 1rem;
}

.reservation-date-modern i {
    font-size: 1.1rem;
}

.reservation-status-modern span {
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.status-pending-modern {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.4);
}

.status-confirmed-modern {
    background: rgba(34, 197, 94, 0.2);
    color: #10b981;
    border: 1px solid rgba(34, 197, 94, 0.4);
}

.status-unknown-modern {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
    border: 1px solid rgba(107, 114, 128, 0.4);
}

.reservation-info-modern {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    color: #60a5fa;
    font-size: 0.85rem;
    line-height: 1.4;
}

.reservation-info-modern i {
    font-size: 0.9rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.reservation-action-modern {
    text-align: center;
    margin: 2rem 0;
}

.btn-reservation-modern {
    background: var(--accent-gold);
    color: var(--primary-black);
    border: none;
    padding: 1rem 2rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-reservation-modern:hover {
    background: var(--accent-gold-hover);
    color: var(--primary-black);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(203, 162, 72, 0.3);
}

.contact-footer-modern {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.contact-footer-modern p {
    color: var(--text-gray);
    font-size: 0.85rem;
    margin: 0;
}

.contact-footer-modern a {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
}

.contact-footer-modern a:hover {
    text-decoration: underline;
}

/* Responsive pour réservations */
@media (max-width: 768px) {
    .reservation-header-modern {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .blocked-reservation-modern {
        padding: 1.5rem;
    }
    
    .contact-section-modern {
        padding: 1rem;
    }
}

@media (max-width: 360px) {
    .reservation-card-modern {
        padding: 1rem;
    }
    
    .blocked-content-modern h3 {
        font-size: 1.1rem;
    }
    
    .blocked-icon-modern {
        font-size: 2.5rem;
    }
}

/* ===== QR CODE STYLES ===== */
/* Styles pour le modal QR Code */
#mdllAdd_Address.modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1050 !important;
    overflow: auto !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    padding: 1rem !important;
    pointer-events: none !important;
}

#mdllAdd_Address.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

#mdllAdd_Address.modal:not(.show) {
    pointer-events: none !important;
    display: none !important;
}

.qr-modal-dialog {
    margin: 0 !important;
    max-width: 350px !important;
    width: 90% !important;
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 2rem) !important;
    flex-shrink: 0 !important;
    align-self: center !important;
}

.qr-modal-dialog::before {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    content: none !important;
}

.qr-modal .modal-content {
    overflow-y: auto;
    height: auto !important;
    margin: 0 !important;
    width: 100% !important;
    max-height: calc(100vh - 2rem) !important;
    flex-shrink: 0 !important;
}

.qr-modal .modal-body {
    padding: 1rem !important;
    color: var(--text-white);
    text-align: center;
}

/* Avertissement capture d'écran */
.qr-modal .qr-warning-text {
    margin-top: 0.75rem !important;
    padding: 0.75rem !important;
    text-align: center !important;
    background: rgba(255, 107, 107, 0.1) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 107, 107, 0.3) !important;
    display: block !important;
}

.qr-modal .qr-warning-text p {
    margin: 0 !important;
    color: #ff6b6b !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    text-shadow: 0 2px 4px rgba(255, 107, 107, 0.3) !important;
}

/* Alerte de sécurité */
.security-alert {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1), rgba(255, 142, 142, 0.05));
    color: #ff6b6b;
    padding: 0.5rem;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 0.7rem;
    border: 1px solid rgba(255, 107, 107, 0.3);
    margin-bottom: 1rem;
    backdrop-filter: blur(10px);
}

.security-alert i {
    margin-right: 0.3rem;
    font-size: 0.8rem;
}

/* Container QR Code */
.qr-modal .qr-container {
    display: flex !important;
    justify-content: center !important;
    margin: 0.75rem 0 !important;
}

/* Structure : QR CODE -> BLANC -> DORÉ */
.qr-code-wrapper {
    background: white !important; /* FOND BLANC directement autour du QR code */
    padding: 8px !important; /* ZONE BLANCHE très réduite autour du QR code */
    border: 2px solid var(--accent-gold) !important; /* BORDURE DORÉE */
    border-radius: 15px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
    position: relative !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Taille adaptative */
    width: auto !important;
    height: auto !important;
    max-width: 90vw !important;
    max-height: 90vh !important;
}

.qr-code-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(203, 162, 72, 0.1) 50%, transparent 70%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Informations du membre */
.qr-modal .member-info {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 12px !important;
    padding: 0.75rem !important;
    margin-top: 0.75rem !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
    display: block !important;
}

.qr-modal .member-pseudo {
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.qr-modal .member-pseudo h4 {
    color: var(--text-white) !important;
    margin: 0 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    display: block !important;
}

.qr-modal .member-details-compact {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    margin-bottom: 0.5rem !important;
    font-size: 0.7rem !important;
}

.qr-modal .detail-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    color: var(--text-gray) !important;
}

.qr-modal .detail-label {
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    font-size: 0.7rem !important;
}

.qr-modal .detail-value {
    color: var(--text-white) !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
}

.qr-modal .member-status {
    display: flex !important;
    justify-content: center !important;
    margin-top: 0.5rem !important;
}

.qr-modal .status-badge {
    padding: 0.35rem 0.75rem !important;
    border-radius: 14px !important;
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    transition: all 0.3s ease !important;
}

.qr-modal .status-badge:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

.qr-modal .status-badge.valid {
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.15), rgba(40, 167, 69, 0.05)) !important;
    color: #51cf66 !important;
    border: 1px solid rgba(40, 167, 69, 0.2) !important;
}

.qr-modal .status-badge.premium {
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.15), rgba(203, 162, 72, 0.05)) !important;
    color: var(--accent-gold) !important;
    border: 1px solid rgba(203, 162, 72, 0.2) !important;
}

.qr-modal .status-badge.admin {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.15), rgba(220, 53, 69, 0.05)) !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
}

.qr-modal .modal-footer {
    border-top: 1px solid var(--border-color);
    padding: 0.75rem 1rem !important;
}

.qr-modal .btn-primary {
    background: var(--accent-gold);
    color: var(--primary-black);
    border: none;
    padding: 0.6rem 1.25rem !important;
    border-radius: var(--border-radius);
    font-weight: 500;
    font-size: 0.9rem !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.qr-modal .btn-primary:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-1px);
}

/* Responsive pour le modal QR Code */
@media (max-width: 768px) {
    #mdllAdd_Address.modal {
        padding: 0.5rem !important;
    }
    
    .qr-modal-dialog {
        max-width: calc(100% - 1rem) !important;
        width: calc(100% - 1rem) !important;
    }
    
    .qr-modal .modal-content {
        max-height: calc(100vh - 1rem);
    }
    
    .qr-modal .modal-body {
        padding: 0.875rem !important;
    }
    
    .qr-modal .qr-warning-text {
        margin-top: 0.6rem !important;
        padding: 0.6rem !important;
    }
    
    .qr-modal .qr-warning-text p {
        font-size: 0.65rem !important;
        letter-spacing: 0.6px !important;
    }
    
    .member-pseudo h4 {
        font-size: 1rem;
    }
    
    .member-details-compact {
        gap: 0.2rem;
        font-size: 0.7rem;
    }
    
    .detail-label {
        font-size: 0.65rem;
    }
    
    .detail-value {
        font-size: 0.7rem;
    }
    
    .qr-code-wrapper {
        padding: 6px !important;
        border: 2px solid var(--accent-gold) !important;
        width: 240px;
        height: 240px;
    }
}

@media (max-width: 360px) {
    .qr-modal-dialog {
        max-width: calc(100% - 1rem) !important;
        width: calc(100% - 1rem) !important;
    }
    
    .qr-modal .modal-content {
        max-height: calc(100vh - 1rem);
    }
    
    .qr-modal .modal-body {
        padding: 1rem;
    }
    
    .member-pseudo h4 {
        font-size: 0.9rem;
    }
    
    .member-details-compact {
        gap: 0.15rem;
        font-size: 0.65rem;
    }
    
    .detail-label {
        font-size: 0.6rem;
    }
    
    .detail-value {
        font-size: 0.65rem;
    }
    
    .qr-code-wrapper {
        padding: 5px !important;
        border: 2px solid var(--accent-gold) !important;
        width: 200px;
        height: 200px;
    }
    
    .status-badge {
        padding: 0.35rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ===== DRESS CODE MODAL STYLES ===== */
.modal-dress-code {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    visibility: hidden !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    pointer-events: none !important;
}

.modal-dress-code.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* FORCER l'affichage si la classe show est présente */
.modal-dress-code.show,
#mdllContent-border.show {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    pointer-events: auto !important;
}

.modal-dress-code-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10001;
}

.modal-dress-code-dialog {
    position: relative;
    z-index: 10002;
    width: 90%;
    max-width: 600px;
    margin: 2rem auto;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-dress-code-content {
    background: var(--primary-black);
    border: 2px solid var(--accent-gold);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.modal-dress-code-header {
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.15), rgba(203, 162, 72, 0.08));
    border-bottom: 1px solid var(--accent-gold);
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.modal-dress-code-title-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-dress-code-icon {
    width: 35px;
    height: 35px;
    background: rgba(203, 162, 72, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--accent-gold);
}

.modal-dress-code-icon i {
    font-size: 1.2rem;
    color: var(--accent-gold);
}

.modal-dress-code-title {
    color: var(--accent-gold);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-dress-code-close {
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-size: 1.2rem;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-dress-code-close:hover {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    transform: rotate(90deg);
}

.modal-dress-code-body {
    padding: 1.25rem 1.5rem;
    color: var(--text-white);
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 200px);
}

.dress-code-modal-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dress-code-modal-content .dress-code-section {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    border-left: 2px solid var(--accent-gold);
}

.dress-code-modal-content .dress-code-section h4 {
    color: var(--accent-gold);
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dress-code-modal-content .dress-code-section h4 i {
    font-size: 1rem;
    color: var(--accent-gold);
}

.dress-code-modal-content .dress-code-section > p {
    color: var(--text-gray);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

.dress-code-rules {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.75rem;
}

.rule-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.rule-item > div {
    flex: 1;
}

.rule-item strong {
    color: var(--text-white);
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.rule-item strong i {
    font-size: 0.95rem;
    color: var(--accent-gold);
    margin: 0;
}

.rule-item p {
    color: var(--text-gray);
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0.4rem 0;
}

.rule-item p em {
    color: var(--text-gray);
    font-style: italic;
    font-size: 0.85rem;
}

.rule-item .forbidden {
    color: #ff6b6b;
    font-weight: 700;
    text-transform: uppercase;
}

.rule-item ul {
    list-style: none;
    padding-left: 0;
    margin: 0.75rem 0;
}

.rule-item ul li {
    color: var(--text-gray);
    font-size: 0.85rem;
    line-height: 1.6;
    padding-left: 1.25rem;
    position: relative;
}

.rule-item ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    color: var(--accent-gold);
    font-size: 0.75rem;
}

.dress-code-warning {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.12), rgba(255, 107, 107, 0.05));
    border: 1.5px solid rgba(255, 107, 107, 0.3);
    border-radius: 8px;
    padding: 0.9rem 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.dress-code-warning i {
    font-size: 1.1rem;
    color: #ff6b6b;
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.dress-code-warning p {
    margin: 0;
    color: #ff6b6b;
    font-size: 0.75rem;
    line-height: 1.4;
}

.dress-code-warning p strong {
    font-size: 0.75rem;
}

.dress-code-warning p strong {
    font-weight: 700;
    color: #ff6b6b;
}

.modal-dress-code-footer {
    border-top: 1px solid var(--border-color);
    padding: 1rem 1.5rem;
    background: var(--primary-black);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
}

.btn-dress-code-ok {
    background: linear-gradient(135deg, var(--accent-gold), #d4b55a) !important;
    color: var(--primary-black) !important;
    border: none !important;
    padding: 0.45rem 1rem !important;
    border-radius: 18px !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    box-shadow: 0 2px 8px rgba(203, 162, 72, 0.2) !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 110px !important;
}

.btn-dress-code-ok:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 12px rgba(203, 162, 72, 0.3) !important;
    background: linear-gradient(135deg, #d4b55a, var(--accent-gold)) !important;
}

.btn-dress-code-ok:active {
    transform: translateY(0) !important;
}

.btn-dress-code-ok i {
    font-size: 0.75rem !important;
}

/* Responsive pour le modal dress code */
@media (max-width: 768px) {
    #mdllContent-border .modal-dialog {
        margin: 1rem auto !important;
        max-width: calc(100% - 1rem) !important;
    }
    
    #mdllContent-border .modal-header {
        padding: 1.25rem 1.5rem !important;
    }
    
    #mdllContent-border .modal-header .modal-title {
        font-size: 1.3rem !important;
    }
    
    #mdllContent-border .modal-body {
        padding: 1.5rem !important;
        max-height: calc(100vh - 200px) !important;
    }
    
    #mdllContent-border .dress-code-content {
        gap: 1.5rem !important;
    }
    
    #mdllContent-border .dress-code-section {
        padding: 1.25rem !important;
    }
    
    #mdllContent-border .dress-code-section h4 {
        font-size: 1.1rem !important;
    }
    
    #mdllContent-border .rule-item {
        gap: 0.75rem !important;
    }
    
    #mdllContent-border .rule-item i {
        font-size: 1.3rem !important;
    }
    
    #mdllContent-border .modal-footer {
        padding: 1rem 1.5rem !important;
    }
    
    .btn-dress-code-ok {
        padding: 0.4rem 0.9rem !important;
        font-size: 0.75rem !important;
        min-width: 95px !important;
    }
    
    .btn-dress-code-ok i {
        font-size: 0.7rem !important;
    }
}

@media (max-width: 480px) {
    #mdllContent-border .modal-header {
        padding: 1rem !important;
    }
    
    #mdllContent-border .modal-header .modal-title {
        font-size: 1.1rem !important;
    }
    
    #mdllContent-border .modal-body {
        padding: 1.25rem !important;
    }
    
    #mdllContent-border .dress-code-section {
        padding: 1rem !important;
    }
    
    #mdllContent-border .dress-code-section h4 {
        font-size: 1rem !important;
    }
    
    #mdllContent-border .rule-item strong {
        font-size: 0.95rem !important;
    }
    
    #mdllContent-border .rule-item p {
        font-size: 0.9rem !important;
    }
    
    #mdllContent-border .dress-code-warning {
        padding: 1rem !important;
    }
    
    #mdllContent-border .dress-code-warning p {
        font-size: 0.9rem !important;
    }
}

/* ===== FORMULAIRES MODERNES ===== */
.modern-form-container {
    min-height: 100vh;
    padding: var(--header-height) 1rem 100px;
    background: var(--primary-black);
}

.form-header-modern {
    text-align: center;
    margin-bottom: 2rem;
}

.form-header-modern h1 {
    color: var(--text-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.form-header-modern p {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0;
}

.form-content-modern {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.form-modern {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.input-group-modern {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group-modern label {
    color: var(--text-white);
    font-weight: 600;
    font-size: 0.9rem;
}

.input-wrapper-modern {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper-modern input {
    width: 100%;
    height: var(--input-height);
    padding: 0 3rem 0 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--border-radius);
    color: var(--text-white);
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.input-wrapper-modern input:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.1);
}

.input-wrapper-modern input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.input-icon-modern {
    position: absolute;
    left: 1rem;
    color: var(--accent-gold);
    font-size: 1rem;
    pointer-events: none;
}

.password-toggle-modern {
    position: absolute;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-gray);
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.password-toggle-modern:hover {
    color: var(--accent-gold);
}

.btn-submit-modern {
    background: var(--accent-gold);
    color: var(--primary-black);
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: var(--button-height);
}

.btn-submit-modern:hover {
    background: var(--accent-gold-hover);
    transform: translateY(-2px);
}

.btn-danger-modern {
    background: #dc2626;
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: var(--border-radius);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: var(--button-height);
}

.btn-danger-modern:hover {
    background: #b91c1c;
    transform: translateY(-2px);
}

.alert-success-modern {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #10b981;
}

.alert-error-modern {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ef4444;
}

.form-info-modern {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #60a5fa;
}

.form-info-modern i {
    font-size: 1.2rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.form-info-modern p {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

.current-email-info {
    background: rgba(107, 114, 128, 0.1);
    border: 1px solid rgba(107, 114, 128, 0.3);
    border-radius: var(--border-radius);
    padding: 0.75rem;
    margin: 1rem 0;
}

.current-email-info p {
    margin: 0;
    color: var(--text-gray);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.current-email-info strong {
    color: var(--accent-gold);
}

.recovery-message-modern {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1.5rem;
    color: #10b981;
    font-size: 0.9rem;
}

.form-footer-modern {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.form-footer-modern p {
    margin: 0;
    color: var(--text-gray);
    font-size: 0.85rem;
}

.form-footer-modern a {
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
}

.form-footer-modern a:hover {
    text-decoration: underline;
}

.password-match-info {
    margin-top: 0.5rem;
}

.password-match-success {
    color: #10b981;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.password-match-error {
    color: #ef4444;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-error-modern {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* Styles pour Wyylde */
.wyylde-card-modern {
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wyylde-info-modern {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.wyylde-logo-modern img {
    width: 60px;
    height: 60px;
    border-radius: 10px;
    object-fit: cover;
}

.wyylde-details-modern h3 {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.wyylde-details-modern .current-pseudo {
    color: var(--text-gray);
    font-size: 0.9rem;
    margin: 0 0 0.5rem 0;
}

.wyylde-details-modern .current-pseudo strong {
    color: var(--accent-gold);
}

.wyylde-details-modern .wyylde-note {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    margin: 0;
    line-height: 1.4;
}

.form-actions-modern {
    display: flex;
    gap: 1rem;
    margin: 1.5rem 0;
}

.form-actions-modern .btn-submit-modern,
.form-actions-modern .btn-danger-modern {
    flex: 1;
}

.info-content-modern h4 {
    color: #60a5fa;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.info-content-modern ul {
    margin: 0;
    padding-left: 1.2rem;
    color: rgba(96, 165, 250, 0.8);
}

.info-content-modern li {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 768px) {
    .modern-form-container {
        padding: var(--header-height) 0.75rem 100px;
    }
    
    .form-content-modern {
        padding: 1rem;
    }
    
    .form-actions-modern {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .wyylde-info-modern {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
}

@media (max-width: 360px) {
    .form-header-modern h1 {
        font-size: 1.3rem;
    }
    
    .form-header-modern p {
        font-size: 0.8rem;
    }
    
    .input-wrapper-modern input {
        font-size: 0.85rem;
        padding: 0 2.5rem 0 2.5rem;
    }
    
    .input-icon-modern {
        left: 0.75rem;
        font-size: 0.9rem;
    }
    
    .password-toggle-modern {
        right: 0.75rem;
    }
}

@media (max-width: 360px) {
    .announcement-modern {
        margin: 0.5rem;
        padding: 0.6rem;
        gap: 0.75rem;
    }
    
    .announcement-icon {
        width: 35px;
        height: 35px;
    }
    
    .announcement-icon i {
        font-size: 0.9rem;
    }
    
    .announcement-content h4 {
        font-size: 0.8rem;
    }
    
    .announcement-content p {
        font-size: 0.75rem;
    }
    
    .soirees-list {
        padding: 0 0.5rem;
    }
    
    .soiree-item {
        margin-bottom: 0.5rem;
    }
    
    .soiree-link {
        padding: 0.5rem;
        gap: 0.6rem;
    }
    
    .soiree-flyer-small {
        width: 60px;
        height: 90px;
    }
    
    .soiree-content {
        height: 90px;
    }
    
    .soiree-date {
        font-size: 0.75rem;
    }
    
    .soiree-time {
        font-size: 0.7rem;
    }
    
    .soiree-title {
        font-size: 0.8rem;
    }
    
    .soiree-type {
        font-size: 0.6rem;
    }
    
    .soiree-type i {
        font-size: 0.65rem;
    }
    
    .soiree-badge-small {
        padding: 0.1rem 0.3rem;
        font-size: 0.5rem;
    }
}

/* ===== STYLES MODERNES POUR LES ALERTES ===== */
.alert {
    margin: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
    border: none;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
    animation: alertSlideIn 0.3s ease;
}

@keyframes alertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
}

.alert i {
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.alert strong {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.alert span {
    display: block;
    line-height: 1.4;
}

/* Styles spécifiques pour chaque type d'alerte */
.alert-danger {
    background: rgba(220, 53, 69, 0.1);
    color: #ff6b7a;
    border-left: 4px solid #dc3545;
}

.alert-danger i {
    color: #dc3545;
}

.alert-success {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-left: 4px solid #28a745;
}

.alert-success i {
    color: #28a745;
}

.alert-info {
    background: rgba(23, 162, 184, 0.1);
    color: #17a2b8;
    border-left: 4px solid #17a2b8;
}

.alert-info i {
    color: #17a2b8;
}

.alert-warning {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border-left: 4px solid #ffc107;
}

.alert-warning i {
    color: #ffc107;
}

/* Styles spécifiques pour les annonces */
.alert .alert-content {
    flex: 1;
    text-align: center;
}

.alert .alert-content strong {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Styles pour l'icône de certification */
.certification-icon {
    color: #4ade80;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.3rem;
    filter: drop-shadow(0 1px 3px rgba(74, 222, 128, 0.3));
}

.certification-icon:hover {
    transform: scale(1.15);
    color: #22c55e;
    filter: drop-shadow(0 2px 4px rgba(74, 222, 128, 0.5));
}

/* Styles pour le modal de certification */
.certification-modal-content {
    background: var(--primary-black, #0a0a0a);
    border: 2px solid var(--accent-gold, #cba248);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(203, 162, 72, 0.4);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.certification-modal-header {
    border-bottom: 1px solid rgba(203, 162, 72, 0.3);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.1), rgba(203, 162, 72, 0.05));
    border-radius: 20px 20px 0 0;
    flex-shrink: 0;
}

.certification-icon-wrapper {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: 0 5px 20px rgba(74, 222, 128, 0.4);
}

.certification-icon-wrapper i {
    font-size: 2rem;
    color: #fff;
}

.certification-modal-title {
    color: var(--accent-gold, #cba248);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

.certification-close {
    background: transparent;
    border: none;
    color: var(--text-gray);
    font-size: 1.5rem;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.certification-close:hover {
    background: rgba(203, 162, 72, 0.1);
    color: var(--accent-gold);
    transform: rotate(90deg);
}

.certification-modal-body {
    padding: 2rem 1.5rem 3rem;
    text-align: center;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    min-height: auto;
}

.certification-text {
    color: var(--text-white);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.certification-text strong {
    color: var(--accent-gold, #cba248);
    font-weight: 600;
}

.certification-subtext {
    color: var(--text-gray);
    font-size: 0.8rem;
    line-height: 1.4;
    margin: 0;
    margin-bottom: 0.5rem;
    font-style: italic;
}

.certification-modal-footer {
    border-top: 1px solid rgba(203, 162, 72, 0.3);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: center;
    background: var(--primary-black);
    border-radius: 0 0 20px 20px;
    flex-shrink: 0;
}

.certification-btn-close {
    background: linear-gradient(135deg, #cba248, #d4b55a);
    color: #000;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.certification-btn-close:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(203, 162, 72, 0.4);
}

#certificationModal.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

#certificationModal.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .certification-modal-header {
        padding: 1rem;
    }
    
    .certification-icon-wrapper {
        width: 50px;
        height: 50px;
        margin-right: 0.75rem;
    }
    
    .certification-icon-wrapper i {
        font-size: 1.5rem;
    }
    
    .certification-modal-title {
        font-size: 1.1rem;
    }
    
    .certification-modal-body {
        padding: 1.5rem 1rem 2.5rem;
        max-height: 65vh;
        overflow-y: auto;
        min-height: auto;
    }
    
    .certification-text {
        font-size: 0.85rem;
    }
    
    .certification-subtext {
        font-size: 0.75rem;
    }
    
    .certification-icon {
        font-size: 1rem;
    }
    
    .members-info-section {
        padding: 0.6rem;
    }
    
    .members-info-content {
        gap: 0.4rem;
    }
    
    .info-item {
        padding: 0.4rem 0.5rem;
        gap: 0.4rem;
    }
    
    .info-item i {
        font-size: 0.65rem;
    }
    
    .info-item p {
        font-size: 0.65rem;
    }
    
    .info-item-small {
        padding: 0.35rem 0.5rem;
    }
    
    .info-item-small i {
        font-size: 0.6rem;
    }
    
    .info-item-small p {
        font-size: 0.6rem;
    }
    
    .search-section {
        padding: 0.75rem;
    }
    
    .search-input {
        padding: 0.65rem 0.9rem 0.65rem 2.75rem;
        font-size: 0.85rem;
    }
    
    .search-icon {
        left: 0.85rem;
        font-size: 0.9rem;
    }
    
    .search-clear {
        right: 0.65rem;
        font-size: 0.85rem;
    }
}

/* Modal profil incomplet - s'ouvre au clic sur un profil (petit modal en bas) */
.modal-dialog-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    z-index: 1050;
    height: auto;
    max-height: none;
}

.complete-profile-to-view-modal-content {
    background: var(--primary-black, #0a0a0a);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: visible !important;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    animation: slideUp 0.3s ease;
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
}

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

.complete-profile-to-view-modal-body {
    padding: 0.75rem 0.75rem 2rem !important;
    text-align: center;
    min-height: auto !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 1;
}

.complete-profile-to-view-icon-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow: visible;
    height: auto;
}

.complete-profile-to-view-icon {
    font-size: 2.5rem;
    color: #ffc107;
    margin-bottom: 0.5rem;
}

.complete-profile-to-view-text {
    color: #ffffff !important;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    display: block;
    visibility: visible;
    opacity: 1;
    font-weight: 600;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    padding: 0 0.25rem;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

.complete-profile-to-view-modal-footer {
    border-top: none;
    padding: 0.875rem 1rem;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    background: var(--primary-black);
    flex-shrink: 0;
    flex-direction: row;
    margin-top: 0;
}

.complete-profile-to-view-btn-cancel {
    background: transparent;
    color: var(--text-gray);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-align: center;
    order: 1;
    min-width: 0;
}

.complete-profile-to-view-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.complete-profile-to-view-btn-complete {
    background: linear-gradient(135deg, #ffc107, #ffb300);
    color: #000;
    border: none;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    text-align: center;
    order: 2;
    min-width: 0;
}

.complete-profile-to-view-btn-complete:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
    color: #000;
    text-decoration: none;
}

#completeProfileToViewModal.modal {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1050;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

#completeProfileToViewModal.modal.show,
#completeProfileToViewModal.modal[style*="display: flex"] {
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

@media (max-width: 768px) {
    .complete-profile-to-view-modal-content {
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        min-height: 180px !important;
        height: auto !important;
        max-height: none !important;
    }

    .complete-profile-to-view-modal-body {
        padding: 0.75rem 0.5rem 2rem !important;
        min-height: auto !important;
        overflow: visible !important;
        flex: 0 0 auto;
        height: auto !important;
        max-height: none !important;
        justify-content: flex-start;
    }

    .complete-profile-to-view-text {
        padding: 0 0.15rem;
        white-space: nowrap;
        font-size: 0.85rem;
    }

    .complete-profile-to-view-icon-text-wrapper {
        gap: 0.75rem;
    }

    .complete-profile-to-view-icon {
        font-size: 2.25rem;
    }

    .complete-profile-to-view-text {
        font-size: 0.85rem !important;
        line-height: 1.5;
        color: #ffffff !important;
        font-weight: 400;
        word-wrap: break-word;
        overflow-wrap: break-word;
        padding: 0 0.25rem;
    }

    .complete-profile-to-view-modal-footer {
        padding: 0.875rem 1rem;
        gap: 0.75rem;
    }

    .complete-profile-to-view-btn-cancel,
    .complete-profile-to-view-btn-complete {
        padding: 0.55rem 0.875rem;
        font-size: 0.8rem;
        flex: 1;
        min-width: 0;
    }
}

/* Indicateur de chargement et message de fin */
.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
    color: var(--text-gray);
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(203, 162, 72, 0.2);
    border-top-color: var(--accent-gold, #cba248);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.loading-indicator span {
    font-size: 0.9rem;
    color: var(--text-gray);
}

.end-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-gray);
    font-size: 0.9rem;
}

.end-message p {
    margin: 0;
}

@media (max-width: 768px) {
    .loading-indicator {
        padding: 1.5rem;
    }
    
    .loading-spinner {
        width: 35px;
        height: 35px;
    }
    
    .loading-indicator span {
        font-size: 0.85rem;
    }
    
    .end-message {
        padding: 1.5rem;
        font-size: 0.85rem;
    }
}

/* Styles pour la section Wyylde */
.wyylde-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(203, 162, 72, 0.2);
    border-radius: 12px;
}

.wyylde-info {
    padding: 0.25rem 0;
}

.wyylde-pseudo-display {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.wyylde-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
}

.wyylde-pseudo-display strong {
    font-size: 1rem;
    color: var(--text-white);
    font-weight: 600;
}

.wyylde-age {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

/* Amélioration des sections d'info */
.info-section-compact {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.section-header-compact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-header-compact i {
    font-size: 1.1rem;
    color: var(--accent-gold, #cba248);
}

.section-header-compact h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-white);
}

.section-content-compact {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Tags de recherche */
.recherche-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.preference-tag-compact {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-white);
    padding: 0.5rem 0.9rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    display: inline-block;
}

/* Grille des caractéristiques */
.characteristics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}

.characteristic-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.characteristic-item:last-child {
    border-bottom: none;
}

.characteristic-item.full-width {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.char-label {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

.char-value {
    color: var(--text-white);
    font-size: 0.85rem;
    text-align: right;
    flex: 1;
    margin-left: 1rem;
}

/* Caractéristiques pour couples */
.couple-characteristics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 0.75rem;
}

.couple-person {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.person-label {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Description améliorée */
.description-text-compact {
    color: var(--text-gray);
    line-height: 1.8;
    font-size: 0.95rem;
    margin: 0;
    padding: 0.5rem 0;
}

@media (max-width: 768px) {
    .profile-info-section {
        padding: 1.25rem 1rem;
    }
    
    .profile-name-compact {
        font-size: 1.3rem;
    }
    
    .age-display {
        font-size: 1rem;
    }
    
    .wyylde-pseudo-display {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .wyylde-pseudo-display strong {
        font-size: 0.95rem;
    }
    
    .info-section-compact {
        padding: 1rem;
    }
    
    .section-header-compact {
        gap: 0.5rem;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
    }
    
    .section-header-compact h3 {
        font-size: 0.8rem;
    }
    
    .couple-characteristics {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
    
    .characteristic-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.5rem 0;
    }
    
    .char-value {
        text-align: left;
        margin-left: 0;
        width: 100%;
    }
    
    .recherche-tags {
        gap: 0.4rem;
    }
    
    .preference-tag-compact {
        padding: 0.4rem 0.75rem;
        font-size: 0.8rem;
    }
}

.alert .alert-content span {
    display: block;
    line-height: 1.4;
    font-size: 0.85rem;
}

/* Responsive pour les alertes */
@media (max-width: 768px) {
    .alert {
        margin: 0.5rem 0.75rem;
        padding: 0.275rem 1rem;
        font-size: 0.8rem;
    }
    
    .alert i {
        font-size: 1rem;
    }
    
    .alert .alert-content strong {
        font-size: 0.8rem;
    }
    
    .alert .alert-content span {
        font-size: 0.75rem;
    }
}

/* Page d'édition de profil */
.edit-profile-container {
    min-height: 100vh;
    background: var(--primary-black, #0a0a0a);
    padding-top: calc(var(--header-height) + 1rem);
    padding-bottom: calc(2rem + 80px); /* Espace pour le bouton fixe */
}

.edit-profile-header {
    padding: 1.5rem 1rem;
    background: var(--secondary-black, #111111);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    gap: 1rem;
}

.btn-back-profile {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-gray, #cccccc);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-back-profile:hover {
    color: var(--accent-gold, #cba248);
    text-decoration: none;
}

.edit-profile-header h1 {
    color: var(--text-white, #ffffff);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.edit-profile-form {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.form-section {
    background: var(--secondary-black, #111111);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.section-title {
    color: var(--accent-gold, #cba248);
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title i {
    font-size: 1rem;
}

.section-title .optional-label {
    color: var(--text-gray, #888888);
    font-size: 0.75rem;
    font-weight: 400;
    font-style: italic;
    margin-left: 0.5rem;
}

.form-group {
    margin-bottom: 1.25rem;
}

.form-group label {
    display: block;
    color: var(--text-white, #ffffff);
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
}

.form-group .form-control {
    width: 100%;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-white, #ffffff);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.form-group .form-control:focus {
    outline: none;
    border-color: var(--accent-gold, #cba248);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(203, 162, 72, 0.1);
}

.form-group textarea.form-control {
    resize: vertical;
    min-height: 100px;
    font-size: 0.85rem;
}

.form-group select.form-control {
    cursor: pointer;
}

.form-group .form-text {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-gray, #888888);
    font-size: 0.75rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--text-white, #ffffff);
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.checkbox-label:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(203, 162, 72, 0.3);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-gold, #cba248);
    flex-shrink: 0;
}

.checkbox-label:has(input[type="checkbox"]:checked) {
    background: rgba(203, 162, 72, 0.1);
    border-color: rgba(203, 162, 72, 0.4);
}

.checkbox-label input[type="checkbox"]:checked + span {
    color: var(--accent-gold, #cba248);
    font-weight: 500;
}

.form-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.form-actions-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--primary-black, #000000);
    border-top: 1px solid var(--border-color, #333333);
    padding: 0.75rem 0;
    z-index: 1000;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-save-profile {
    background: var(--accent-gold, #cba248);
    color: var(--primary-black, #000000);
    border: none;
    padding: 0.875rem 2rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3);
    width: auto;
    max-width: 500px;
    margin: 0;
    justify-content: center;
}

.btn-save-profile:hover {
    background: var(--accent-gold-hover, #d4af37);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4);
}

.btn-save-profile i {
    font-size: 1.1rem;
}

/* Upload de photo */
.photo-upload-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.photo-preview {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(203, 162, 72, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
}

.photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-preview.no-photo {
    flex-direction: column;
    color: var(--text-gray, #888888);
    gap: 0.5rem;
    text-align: center;
    justify-content: center;
}

.photo-preview.no-photo i {
    font-size: 3rem;
}

.photo-preview.no-photo span {
    font-size: 0.8rem;
    text-align: center;
}

.photo-upload-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.photo-input {
    display: none;
}

.photo-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    background: rgba(203, 162, 72, 0.1);
    border: 1px solid rgba(203, 162, 72, 0.3);
    border-radius: 8px;
    color: var(--accent-gold, #cba248);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
}

.photo-upload-label:hover {
    background: rgba(203, 162, 72, 0.2);
    border-color: var(--accent-gold, #cba248);
}

.photo-upload-label i {
    font-size: 0.9rem;
}

.photo-preview-new {
    width: 150px;
    height: 150px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid var(--accent-gold, #cba248);
    margin-top: 0.5rem;
}

.photo-preview-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cases à cocher pour la recherche */
.recherche-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.checkbox-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    color: var(--text-white, #ffffff);
    position: relative;
    overflow: hidden;
}

.checkbox-option::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(203, 162, 72, 0.1), transparent);
    transition: left 0.3s ease;
}

.checkbox-option:hover::before {
    left: 100%;
}

.checkbox-option:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(203, 162, 72, 0.3);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.checkbox-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent-gold, #cba248);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.checkbox-option input[type="checkbox"]:checked + span {
    color: var(--accent-gold, #cba248);
    font-weight: 500;
}

.checkbox-option:has(input[type="checkbox"]:checked) {
    background: rgba(203, 162, 72, 0.12);
    border-color: rgba(203, 162, 72, 0.5);
    box-shadow: 0 0 0 1px rgba(203, 162, 72, 0.2);
}

.checkbox-option span {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .edit-profile-container {
        padding-top: calc(var(--header-height) + 0.5rem);
    }
    
    .edit-profile-header {
        padding: 0.875rem 0.75rem;
    }
    
    .edit-profile-header h1 {
        font-size: 1.1rem;
    }
    
    .edit-profile-form {
        padding: 1.25rem 0.75rem;
    }
    
    .form-section {
        padding: 1rem 0.875rem;
    }
    
    .section-title {
        font-size: 0.95rem;
    }
    
    .form-group {
        margin-bottom: 1rem;
    }
    
    .form-group label {
        font-size: 0.75rem;
    }
    
    .form-group .form-control {
        padding: 0.55rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .form-group textarea.form-control {
        min-height: 90px;
        font-size: 0.8rem;
    }
    
    .photo-preview,
    .photo-preview-new {
        width: 120px;
        height: 120px;
    }
    
    .recherche-checkboxes {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    
    .checkbox-option {
        padding: 0.5rem 0.75rem;
        font-size: 0.65rem;
    }
    
    .checkbox-label {
        font-size: 0.7rem;
        padding: 0.45rem 0.65rem;
    }
    
    .checkbox-label input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
    
    .checkbox-option input[type="checkbox"] {
        width: 15px;
        height: 15px;
    }
    
    .form-actions-fixed {
        padding: 0.875rem 0.75rem;
    }
    
    .btn-save-profile {
        width: 100%;
        justify-content: center;
        padding: 0.8rem 1.5rem;
        font-size: 0.85rem;
    }
    
    .edit-profile-container {
        padding-bottom: calc(2rem + 70px); /* Espace pour le bouton fixe sur mobile */
    }
}

/* Styles pour les nouvelles fonctionnalités du chat */
.favorite-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: var(--accent-gold, #cba248);
    color: var(--primary-black, #000000);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    z-index: 2;
}

.chat-actions {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem;
    color: var(--text-gray, #888888);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.chat-row:hover .chat-actions {
    opacity: 1;
}

.chat-menu {
    position: fixed;
    background: var(--secondary-black, #111111);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.5rem 0;
    z-index: 1000;
    min-width: 200px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.chat-menu .menu-item {
    padding: 0.75rem 1rem;
    color: var(--text-white, #ffffff);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.3s ease;
}

.chat-menu .menu-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.chat-menu .menu-item i {
    width: 20px;
    text-align: center;
}

.message-photo {
    max-width: 250px;
    margin-bottom: 0.5rem;
}

.message-photo img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.message-photo img:hover {
    transform: scale(1.02);
}

.message-audio {
    margin-bottom: 0.5rem;
}

.message-audio audio {
    width: 100%;
    max-width: 300px;
    height: 40px;
}

.message-date-separator {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
}

.message-date-separator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.message-date-separator span {
    background: var(--primary-black, #000000);
    padding: 0.5rem 1rem;
    color: var(--text-gray, #888888);
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
}

.photo-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.photo-modal-content {
    position: relative;
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--text-white, #ffffff);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

.photo-modal-content img {
    max-width: 100%;
    max-height: 80vh;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.photo-modal-info {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-white, #ffffff);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.photo-modal-info span:first-child {
    font-weight: 600;
    color: var(--accent-gold, #cba248);
}

.photo-modal-brand {
    font-size: 0.85rem;
    color: var(--text-gray, #888888);
}

.blocked-message {
    text-align: center;
    padding: 2rem;
    color: var(--text-gray, #888888);
}

.btn-voice {
    background: transparent;
    border: none;
    color: var(--text-white, #ffffff);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    transition: color 0.3s ease;
}

.btn-voice:hover {
    color: var(--accent-gold, #cba248);
}

.btn-voice.recording {
    color: #ff4444;
    animation: pulse 1s infinite;
}

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

/* Messages d'information et d'alerte pour le chat (en haut) */
.chat-info-message {
    background: rgba(203, 162, 72, 0.15);
    border-left: 3px solid var(--accent-gold, #cba248);
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--accent-gold, #cba248);
    font-size: 0.85rem;
    line-height: 1.4;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    width: 100%;
}

.chat-info-message i {
    font-size: 1rem;
    flex-shrink: 0;
}

.chat-alert-message {
    background: rgba(255, 68, 68, 0.15);
    border-left: 3px solid #ff4444;
    padding: 0.75rem 1rem;
    margin: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #ff4444;
    font-size: 0.85rem;
    line-height: 1.4;
    animation: slideIn 0.3s ease;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    width: 100%;
}

.chat-alert-message.alert-warning {
    background: rgba(255, 193, 7, 0.15);
    border-left-color: #ffc107;
    color: #ffc107;
}

.chat-alert-message.alert-error {
    background: rgba(255, 68, 68, 0.15);
    border-left-color: #ff4444;
    color: #ff4444;
}

.chat-alert-message i {
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Modales pour conversation */
.modal.show {
    display: flex !important;
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - 1rem);
}

.modal-content {
    background: var(--secondary-black, #111111);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.modal-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header .modal-title {
    color: var(--text-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.modal-header .close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.modal-header .close:hover {
    color: var(--text-white);
}

.modal-body {
    padding: 1.5rem 1.25rem;
    color: var(--text-white);
    min-height: 150px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-body p {
    margin-bottom: 1rem;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Styles spécifiques pour les modals de chat (signaler, bloquer, etc.) */
#blockModal .modal-body,
#unblockModal .modal-body,
#reportUserModal .modal-body,
#deleteConversationModal .modal-body {
    padding: 1rem;
    min-height: auto;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

#blockModal .modal-body p,
#unblockModal .modal-body p,
#reportUserModal .modal-body p,
#deleteConversationModal .modal-body p {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

#reportUserModal .modal-body textarea.form-control {
    font-size: 0.75rem;
    padding: 0.75rem;
    min-height: 100px;
    max-height: 150px;
    resize: vertical;
    margin-top: 0.5rem;
    line-height: 1.4;
}

@media (max-width: 768px) {
    #blockModal .modal-content,
    #unblockModal .modal-content,
    #reportUserModal .modal-content,
    #deleteConversationModal .modal-content {
        max-height: 85vh;
        padding: 1rem;
    }
    
    #blockModal .modal-header,
    #unblockModal .modal-header,
    #reportUserModal .modal-header,
    #deleteConversationModal .modal-header {
        padding: 0.75rem 1rem;
    }
    
    #blockModal .modal-title,
    #unblockModal .modal-title,
    #reportUserModal .modal-title,
    #deleteConversationModal .modal-title {
        font-size: 1rem;
    }
    
    #blockModal .modal-body,
    #unblockModal .modal-body,
    #reportUserModal .modal-body,
    #deleteConversationModal .modal-body {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }
    
    #blockModal .modal-body p,
    #unblockModal .modal-body p,
    #reportUserModal .modal-body p,
    #deleteConversationModal .modal-body p {
        font-size: 0.8rem;
        line-height: 1.4;
        margin-bottom: 0.5rem;
    }
    
    #blockModal .modal-body .text-muted,
    #unblockModal .modal-body .text-muted,
    #reportUserModal .modal-body .text-muted,
    #deleteConversationModal .modal-body .text-muted {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    #reportUserModal .modal-body textarea.form-control {
        font-size: 0.7rem;
        padding: 0.6rem;
        min-height: 80px;
        max-height: 120px;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }
    
    #reportUserModal .modal-body textarea.form-control::placeholder {
        font-size: 0.7rem;
    }
    
    #blockModal .modal-footer,
    #unblockModal .modal-footer,
    #reportUserModal .modal-footer,
    #deleteConversationModal .modal-footer {
        padding: 0.75rem 1rem;
        margin-top: 0.5rem;
        padding-top: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #blockModal .modal-footer .btn,
    #unblockModal .modal-footer .btn,
    #reportUserModal .modal-footer .btn,
    #deleteConversationModal .modal-footer .btn {
        width: 100%;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

.modal-body .text-muted {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.modal-body .form-control {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.875rem;
    color: var(--text-white);
    font-size: 0.85rem;
    resize: vertical;
    font-family: inherit;
    margin-top: 0.75rem;
    min-height: 100px;
    line-height: 1.4;
}

.modal-body textarea.form-control {
    font-size: 0.85rem;
    line-height: 1.4;
}

.modal-content {
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

/* Styles spécifiques pour les modals de chat (signaler, bloquer, etc.) */
#blockModal .modal-dialog,
#unblockModal .modal-dialog,
#reportUserModal .modal-dialog,
#deleteConversationModal .modal-dialog {
    width: 90% !important;
    max-width: 600px !important;
    margin: 2rem auto !important;
}

#blockModal .modal-content,
#unblockModal .modal-content,
#reportUserModal .modal-content,
#deleteConversationModal .modal-content {
    max-height: 90vh;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

#blockModal .modal-body,
#unblockModal .modal-body,
#reportUserModal .modal-body,
#deleteConversationModal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    min-height: 0;
}

#blockModal .modal-title,
#unblockModal .modal-title,
#reportUserModal .modal-title,
#deleteConversationModal .modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

#blockModal .modal-body p,
#unblockModal .modal-body p,
#reportUserModal .modal-body p,
#deleteConversationModal .modal-body p {
    font-size: 0.85rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
}

#reportUserModal .modal-body textarea.form-control {
    font-size: 0.75rem;
    padding: 0.75rem;
    min-height: 100px;
    max-height: 150px;
    resize: vertical;
    margin-top: 0.5rem;
    width: 100%;
    line-height: 1.4;
}

#blockModal .modal-footer,
#unblockModal .modal-footer,
#reportUserModal .modal-footer,
#deleteConversationModal .modal-footer {
    flex-shrink: 0;
    margin-top: auto;
}

@media (max-width: 768px) {
    #blockModal .modal-dialog,
    #unblockModal .modal-dialog,
    #reportUserModal .modal-dialog,
    #deleteConversationModal .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto !important;
    }
    
    #blockModal .modal-content,
    #unblockModal .modal-content,
    #reportUserModal .modal-content,
    #deleteConversationModal .modal-content {
        max-height: 90vh;
        min-height: 400px;
        padding: 0;
    }
    
    #blockModal .modal-header,
    #unblockModal .modal-header,
    #reportUserModal .modal-header,
    #deleteConversationModal .modal-header {
        padding: 1rem 1.25rem;
        flex-shrink: 0;
    }
    
    #blockModal .modal-title,
    #unblockModal .modal-title,
    #reportUserModal .modal-title,
    #deleteConversationModal .modal-title {
        font-size: 0.9rem;
        font-weight: 600;
    }
    
    #blockModal .modal-body,
    #unblockModal .modal-body,
    #reportUserModal .modal-body,
    #deleteConversationModal .modal-body {
        padding: 1rem 1.25rem;
        font-size: 0.85rem;
        margin-bottom: 0;
        overflow-y: auto;
        flex: 1;
        min-height: 0;
    }
    
    #blockModal .modal-body p,
    #unblockModal .modal-body p,
    #reportUserModal .modal-body p,
    #deleteConversationModal .modal-body p {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: 0.5rem;
    }
    
    #blockModal .modal-body .text-muted,
    #unblockModal .modal-body .text-muted,
    #reportUserModal .modal-body .text-muted,
    #deleteConversationModal .modal-body .text-muted {
        font-size: 0.7rem;
        margin-bottom: 0.5rem;
        line-height: 1.3;
    }
    
    #reportUserModal .modal-body textarea.form-control {
        font-size: 0.7rem;
        padding: 0.6rem;
        min-height: 80px;
        max-height: 120px;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
        width: 100%;
        line-height: 1.3;
    }
    
    #reportUserModal .modal-body textarea.form-control::placeholder {
        font-size: 0.7rem;
    }
    
    #blockModal .modal-footer,
    #unblockModal .modal-footer,
    #reportUserModal .modal-footer,
    #deleteConversationModal .modal-footer {
        padding: 0.75rem 1rem;
        margin-top: 0;
        padding-top: 0.75rem;
        flex-direction: column;
        gap: 0.5rem;
        flex-shrink: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    #blockModal .modal-footer .btn,
    #unblockModal .modal-footer .btn,
    #reportUserModal .modal-footer .btn,
    #deleteConversationModal .modal-footer .btn {
        width: 100%;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
}

.modal-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.modal-body .form-control:focus {
    outline: none;
    border-color: var(--accent-gold);
    background: rgba(255, 255, 255, 0.08);
}

.modal-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Correction radicale des modals - FORCER LES TAILLES */
.modal-dialog {
    width: 90% !important;
    max-width: 550px !important;
    margin: 2rem auto !important;
}

.modal-content {
    display: flex !important;
    flex-direction: column !important;
    max-height: 90vh !important;
    min-height: 250px !important;
}

.modal-header {
    padding: 1.5rem 1.5rem 1rem !important;
    flex-shrink: 0 !important;
}

.modal-header .modal-title {
    font-size: 1.3rem !important;
    flex: 1;
    padding-right: 1rem;
}

.modal-header .close {
    font-size: 1.5rem !important;
    width: 40px !important;
    height: 40px !important;
    flex-shrink: 0 !important;
}

.modal-body {
    padding: 1.5rem !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 150px !important;
    max-height: calc(90vh - 200px) !important;
}

.modal-body p {
    margin-bottom: 1.25rem !important;
    line-height: 1.7 !important;
    font-size: 1rem !important;
}

.modal-body .text-muted {
    font-size: 0.95rem !important;
    margin-top: 0.75rem;
    line-height: 1.6;
}

.modal-body .form-control {
    padding: 1rem !important;
    font-size: 1rem !important;
    min-height: 120px !important;
    line-height: 1.6;
}

.modal-footer {
    padding: 1.25rem 1.5rem 1.5rem !important;
    flex-shrink: 0 !important;
}

.modal-footer .btn {
    padding: 0.875rem 1.75rem !important;
    font-size: 1rem !important;
    min-width: 120px !important;
}

.modal-footer .btn {
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-footer .btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-white);
}

.modal-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
}

.modal-footer .btn-danger {
    background: #dc3545;
    color: white;
}

.modal-footer .btn-danger:hover {
    background: #c82333;
}

@media (max-width: 768px) {
    .message-photo {
        max-width: 200px;
    }
    
    .photo-modal {
        padding: 1rem;
    }
    
    .photo-modal-content img {
        max-height: 70vh;
    }
    
    .chat-info-message,
    .chat-alert-message {
        margin: 0.5rem 0.75rem;
        font-size: 0.8rem;
        padding: 0.65rem 0.85rem;
    }
    
    .modal-dialog {
        width: 95%;
        margin: 1rem auto;
    }
    
    .modal-header,
    .modal-body,
    .modal-footer {
        padding: 1rem;
    }
}

/* ===== STYLES POUR LA PAGE DE CONNEXION (index.php) ===== */

/* Taille du logo */
.logo-modern {
    max-width: 180px !important;
    width: 180px !important;
    height: auto !important;
}

/* Réduction de la taille du texte "ACCES MEMBRE" */
.text-gradient.text-shadow {
    font-size: 0.95rem !important;
    margin-top: -10px !important;
    margin-bottom: 0.3rem !important;
}

/* Réduction des marges autour du logo */
.cover {
    margin-top: -2rem !important;
    margin-bottom: 0.3rem !important;
}

/* Remonter le logo sur mobile */
@media (max-width: 768px) {
    .cover {
        margin-top: -2.5rem !important;
        margin-bottom: 0.3rem !important;
    }
    
    .logo-modern {
        max-width: 150px !important;
        width: 150px !important;
    }
}

/* Réduction de la taille des labels du formulaire (Pseudo et Mot de passe) */
.login-form .form-group label:not(:has(input[name="remember_me"])) {
    font-size: 0.7rem !important;
}

/* Correction des icônes dans les inputs - ajouter du padding pour éviter que le texte soit sur l'icône */
.login-form .input_group input[type="text"],
.login-form .input_group input[type="password"] {
    padding-left: 3rem !important;
}

/* Réduction de l'espacement entre les boutons */
.login-section .form-separator {
    margin: 0.2rem 0 !important;
}

.login-section .create-card-section {
    margin-top: 0.1rem !important;
}

/* Réduction de la taille du texte "Maintenir la connexion" */
.login-form .form-group label:has(input[name="remember_me"]) {
    font-size: 0.5rem !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    color: var(--text-gray, #cccccc) !important;
}

.login-form .form-group label:has(input[name="remember_me"]) input[type="checkbox"] {
    margin-right: 8px !important;
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

/* Réduction des marges pour la checkbox */
.login-form .form-group:has(input[name="remember_me"]) {
    margin: 3px 0 5px 0 !important;
}

/* Réduction de la marge pour "Mot de passe oublié" */
.login-section .form-links {
    margin-bottom: 6px !important;
}

/* ===== STYLES POUR LE MODAL "COMMENT ÇA MARCHE" ===== */

/* Modal plus large */
#mdllContent-basic .modal-dialog {
    max-width: 95% !important;
    width: 95% !important;
    margin: 1rem auto !important;
}

#mdllContent-basic .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border: 2px solid rgba(203, 162, 72, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(203, 162, 72, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    animation: modalSlideIn 0.3s ease !important;
    margin: auto !important;
    padding: 0 !important;
    position: relative !important;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header du modal */
#mdllContent-basic .modal-header {
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.15) 0%, rgba(203, 162, 72, 0.05) 100%) !important;
    border-bottom: 2px solid rgba(203, 162, 72, 0.3) !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 14px 14px 0 0 !important;
}

#mdllContent-basic .modal-title,
#mdllContent-basic .modal-header h1,
#mdllContent-basic .modal-header h2,
#mdllContent-basic .modal-header h3,
#mdllContent-basic .modal-header h4,
#mdllContent-basic .modal-header h5 {
    font-size: 0.9rem !important;
    color: var(--accent-gold, #Cba248) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* Body du modal - texte réduit */
#mdllContent-basic .modal-body {
    padding: 0.75rem 0.75rem 3rem 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1.6 !important;
    color: var(--text-gray, #cccccc) !important;
}

#mdllContent-basic .modal-body p {
    font-size: 0.75rem !important;
    margin: 0.5rem 0 !important;
    color: var(--text-gray, #cccccc) !important;
}

#mdllContent-basic .modal-body h4,
#mdllContent-basic .modal-body h5,
#mdllContent-basic .modal-body h6 {
    font-size: 0.8rem !important;
    color: var(--text-white, #ffffff) !important;
    font-weight: 600 !important;
    margin: 0.75rem 0 0.5rem 0 !important;
}

#mdllContent-basic .modal-body strong {
    color: var(--accent-gold, #Cba248) !important;
    font-weight: 600 !important;
}

#mdllContent-basic .modal-body ul,
#mdllContent-basic .modal-body ol {
    padding-left: 1.25rem !important;
    margin: 0.5rem 0 !important;
}

#mdllContent-basic .modal-body li {
    font-size: 0.75rem !important;
    margin: 0.4rem 0 !important;
    color: var(--text-gray, #cccccc) !important;
}

/* Footer du modal */
#mdllContent-basic .modal-footer {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(203, 162, 72, 0.2) !important;
    padding: 0.75rem 0.75rem !important;
    border-radius: 0 0 14px 14px !important;
}

#mdllContent-basic .modal-footer .btn,
#mdllContent-basic .modal-btn,
#mdllContent-basic .modal-btn-primary {
    font-size: 0.7rem !important;
    padding: 0.5rem 1.25rem !important;
    background: linear-gradient(135deg, var(--accent-gold, #Cba248) 0%, #d4b55a 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3) !important;
    cursor: pointer !important;
}

#mdllContent-basic .modal-footer .btn:hover,
#mdllContent-basic .modal-btn:hover,
#mdllContent-basic .modal-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4) !important;
}

#mdllContent-basic .modal-btn i {
    color: #000 !important;
    margin-right: 0.5rem !important;
}

/* Bouton de fermeture */
#mdllContent-basic .close,
#mdllContent-basic .modal-header .close {
    color: var(--accent-gold, #Cba248) !important;
    opacity: 0.8 !important;
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#mdllContent-basic .close:hover {
    opacity: 1 !important;
    transform: rotate(90deg) !important;
    color: var(--accent-gold, #Cba248) !important;
}

/* Effet de brillance sur le modal */
#mdllContent-basic .modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(203, 162, 72, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
    pointer-events: none !important;
    border-radius: 16px !important;
}

#mdllContent-basic .modal-content:hover::before {
    left: 100% !important;
}

/* Icônes dorées dans le modal */
#mdllContent-basic .modal-body i,
#mdllContent-basic .modal-body .fas,
#mdllContent-basic .modal-body .far,
#mdllContent-basic .modal-body .fab,
#mdllContent-basic .modal-body .fa,
#mdllContent-basic .modal-header i,
#mdllContent-basic .modal-header .fas,
#mdllContent-basic .modal-header .far,
#mdllContent-basic .modal-header .fab,
#mdllContent-basic .modal-header .fa {
    color: var(--accent-gold, #Cba248) !important;
}

/* Responsive pour desktop */
@media (min-width: 769px) {
    #mdllContent-basic .modal-dialog {
        max-width: 700px !important;
        width: 90% !important;
    }
    
    #mdllContent-basic .modal-content {
        max-width: 700px !important;
        width: 90% !important;
    }
}

/* ===== STYLES POUR LE MODAL "PAIEMENT HOMMES" (paiementModal) ===== */
/* Appliquer les mêmes styles modernes que le modal "Comment ça marche" */

/* Modal plus large */
#paiementModal.modal {
    display: none !important;
    position: fixed !important;
    z-index: 1050 !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(10px) !important;
    overflow: auto !important;
    align-items: center !important;
    justify-content: center !important;
}

#paiementModal.modal.show {
    display: flex !important;
}

#paiementModal .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border: 2px solid rgba(203, 162, 72, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(203, 162, 72, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    animation: modalSlideIn 0.3s ease !important;
    margin: auto !important;
    padding: 0 !important;
    position: relative !important;
}

/* Header du modal */
#paiementModal .modal-header {
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.15) 0%, rgba(203, 162, 72, 0.05) 100%) !important;
    border-bottom: 2px solid rgba(203, 162, 72, 0.3) !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 14px 14px 0 0 !important;
}

#paiementModal .modal-title,
#paiementModal .modal-header h3 {
    font-size: 0.9rem !important;
    color: var(--accent-gold, #Cba248) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

#paiementModal .modal-title i,
#paiementModal .modal-header i {
    color: var(--accent-gold, #Cba248) !important;
    margin-right: 0.5rem !important;
}

/* Body du modal - texte réduit */
#paiementModal .modal-body {
    padding: 0.75rem 0.75rem 3rem 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1.6 !important;
    color: var(--text-gray, #cccccc) !important;
}

#paiementModal .modal-body p {
    font-size: 0.75rem !important;
    margin: 0.5rem 0 !important;
    color: var(--text-gray, #cccccc) !important;
}

#paiementModal .modal-body strong {
    color: var(--accent-gold, #Cba248) !important;
    font-weight: 600 !important;
}

/* Icon wrapper */
#paiementModal .modal-icon-wrapper {
    text-align: center !important;
    margin-bottom: 0.75rem !important;
    padding: 0.5rem 0 !important;
}

#paiementModal .modal-icon-wrapper i {
    font-size: 2rem !important;
    color: var(--accent-gold, #Cba248) !important;
}

/* Footer du modal */
#paiementModal .modal-footer {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(203, 162, 72, 0.2) !important;
    padding: 0.75rem 0.75rem !important;
    border-radius: 0 0 14px 14px !important;
}

#paiementModal .modal-btn,
#paiementModal .modal-btn-primary {
    font-size: 0.7rem !important;
    padding: 0.5rem 1.25rem !important;
    background: linear-gradient(135deg, var(--accent-gold, #Cba248) 0%, #d4b55a 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3) !important;
    cursor: pointer !important;
}

#paiementModal .modal-btn:hover,
#paiementModal .modal-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4) !important;
}

#paiementModal .modal-btn i {
    color: #000 !important;
    margin-right: 0.5rem !important;
}

/* Bouton de fermeture */
#paiementModal .close {
    color: var(--accent-gold, #Cba248) !important;
    opacity: 0.8 !important;
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#paiementModal .close:hover {
    opacity: 1 !important;
    transform: rotate(90deg) !important;
    color: var(--accent-gold, #Cba248) !important;
}

/* Effet de brillance sur le modal */
#paiementModal .modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(203, 162, 72, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
    pointer-events: none !important;
    border-radius: 16px !important;
}

#paiementModal .modal-content:hover::before {
    left: 100% !important;
}

/* Responsive pour desktop */
@media (min-width: 769px) {
    #paiementModal .modal-content {
        max-width: 700px !important;
        width: 90% !important;
    }
}

/* ===== STYLES POUR LE MODAL "CGU" (mdllContent-cgu) ===== */
/* Appliquer les mêmes styles modernes que le modal "Information Paiement" */

#mdllContent-cgu .modal-dialog {
    max-width: 95% !important;
    width: 95% !important;
    margin: 1rem auto !important;
}

#mdllContent-cgu .modal-content {
    max-width: 95% !important;
    width: 95% !important;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(10, 10, 10, 0.98) 100%) !important;
    border: 2px solid rgba(203, 162, 72, 0.3) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(203, 162, 72, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    animation: modalSlideIn 0.3s ease !important;
    margin: auto !important;
    padding: 0 !important;
    position: relative !important;
}

/* Header du modal */
#mdllContent-cgu .modal-header {
    background: linear-gradient(135deg, rgba(203, 162, 72, 0.15) 0%, rgba(203, 162, 72, 0.05) 100%) !important;
    border-bottom: 2px solid rgba(203, 162, 72, 0.3) !important;
    padding: 0.6rem 0.75rem !important;
    border-radius: 14px 14px 0 0 !important;
}

#mdllContent-cgu .modal-header h1,
#mdllContent-cgu .modal-title {
    font-size: 0.9rem !important;
    color: var(--accent-gold, #Cba248) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

#mdllContent-cgu .modal-header i {
    color: var(--accent-gold, #Cba248) !important;
}

/* Body du modal - texte réduit */
#mdllContent-cgu .modal-body {
    padding: 0.75rem 0.75rem 3rem 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1.6 !important;
    color: var(--text-gray, #cccccc) !important;
}

#mdllContent-cgu .modal-body p {
    font-size: 0.75rem !important;
    margin: 0.5rem 0 !important;
    color: var(--text-gray, #cccccc) !important;
}

#mdllContent-cgu .modal-body h4 {
    font-size: 0.8rem !important;
    color: var(--text-white, #ffffff) !important;
    font-weight: 600 !important;
    margin: 0.75rem 0 0.5rem 0 !important;
}

#mdllContent-cgu .modal-body strong {
    color: var(--accent-gold, #Cba248) !important;
    font-weight: 600 !important;
}

#mdllContent-cgu .modal-body ul,
#mdllContent-cgu .modal-body ol {
    padding-left: 1.25rem !important;
    margin: 0.5rem 0 !important;
}

#mdllContent-cgu .modal-body li {
    font-size: 0.75rem !important;
    margin: 0.4rem 0 !important;
    color: var(--text-gray, #cccccc) !important;
}

#mdllContent-cgu .modal-body a {
    color: var(--accent-gold, #Cba248) !important;
    text-decoration: underline !important;
}

/* Footer du modal */
#mdllContent-cgu .modal-footer {
    background: rgba(0, 0, 0, 0.3) !important;
    border-top: 1px solid rgba(203, 162, 72, 0.2) !important;
    padding: 0.75rem 0.75rem !important;
    border-radius: 0 0 14px 14px !important;
}

#mdllContent-cgu .modal-footer .btn {
    font-size: 0.7rem !important;
    padding: 0.5rem 1.25rem !important;
    background: linear-gradient(135deg, var(--accent-gold, #Cba248) 0%, #d4b55a 100%) !important;
    color: #000 !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(203, 162, 72, 0.3) !important;
    cursor: pointer !important;
}

#mdllContent-cgu .modal-footer .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(203, 162, 72, 0.4) !important;
}

/* Bouton de fermeture */
#mdllContent-cgu .close {
    color: var(--accent-gold, #Cba248) !important;
    opacity: 0.8 !important;
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

#mdllContent-cgu .close:hover {
    opacity: 1 !important;
    transform: rotate(90deg) !important;
    color: var(--accent-gold, #Cba248) !important;
}

/* Effet de brillance sur le modal */
#mdllContent-cgu .modal-content::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(203, 162, 72, 0.1), transparent) !important;
    transition: left 0.5s ease !important;
    pointer-events: none !important;
    border-radius: 16px !important;
}

#mdllContent-cgu .modal-content:hover::before {
    left: 100% !important;
}

/* Icônes dorées dans le modal */
#mdllContent-cgu .modal-body i,
#mdllContent-cgu .modal-body .fas,
#mdllContent-cgu .modal-body .far,
#mdllContent-cgu .modal-body .fab,
#mdllContent-cgu .modal-body .fa,
#mdllContent-cgu .modal-header i,
#mdllContent-cgu .modal-header .fas,
#mdllContent-cgu .modal-header .far,
#mdllContent-cgu .modal-header .fab,
#mdllContent-cgu .modal-header .fa {
    color: var(--accent-gold, #Cba248) !important;
}

/* Responsive pour desktop */
@media (min-width: 769px) {
    #mdllContent-cgu .modal-dialog {
        max-width: 700px !important;
        width: 90% !important;
    }
    
    #mdllContent-cgu .modal-content {
        max-width: 700px !important;
        width: 90% !important;
    }
}

/* ===== STYLES POUR LA PAGE D'INSCRIPTION (inscription.php) ===== */

/* Amélioration de l'espacement général du formulaire */
.em__body {
    padding: 0 0.5rem;
}

/* Amélioration des alertes dans inscription */
.em__body .alert {
    margin: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
}

/* Amélioration des termes et conditions */
.terms_toggle {
    margin: 0.5rem 1rem;
    padding: 0.75rem 0.5rem !important;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(203, 162, 72, 0.2);
}

.terms_toggle label {
    font-size: 0.7rem !important;
    line-height: 1.4;
    color: #ccc !important;
}

.terms_toggle a {
    font-size: 0.7rem !important;
}

/* Stylisation des checkboxes custom */
.terms_toggle .custom-control {
    position: relative;
    display: inline-block;
    padding-left: 1.5rem;
    min-height: 1.2rem;
    cursor: pointer;
}

.terms_toggle .custom-control-input {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 1.2rem;
    height: 1.2rem;
    opacity: 0;
    cursor: pointer;
    margin: 0;
}

.terms_toggle .custom-control-label {
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
    width: 1.2rem;
    height: 1.2rem;
    display: block;
}

.terms_toggle .custom-control-label::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1.5rem;
    display: block;
    width: 0.9rem;
    height: 0.9rem;
    pointer-events: none;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(203, 162, 72, 0.5);
    border-radius: 3px;
    transition: all 0.2s ease;
}

.terms_toggle .custom-control-label::after {
    content: "";
    position: absolute;
    top: 0.15rem;
    left: -1.35rem;
    display: block;
    width: 0.35rem;
    height: 0.2rem;
    border: solid #000;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.terms_toggle .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--accent-gold, #Cba248);
    border-color: var(--accent-gold, #Cba248);
}

.terms_toggle .custom-control-input:checked ~ .custom-control-label::after {
    opacity: 1;
}

.terms_toggle .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(203, 162, 72, 0.25);
}

/* Centrage du titre */
.em_titleSign {
    text-align: center !important;
}

.em_titleSign h2 {
    text-align: center !important;
    margin: 0 auto !important;
}

/* Décalage des icônes dans les inputs */
.em__body .input_group .icon {
    position: absolute !important;
    left: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
}

.em__body .input_group .form-control {
    padding-left: 3.5rem !important;
}

/* Uniformiser la taille des inputs et selects */
.em__body .form-control,
.em__body .form-control.custom-select,
.em__body select.form-control {
    padding: 0.75rem 1rem !important;
    height: auto !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    border-radius: 12px !important;
}

.em__body select.form-control.custom-select {
    padding: 0.75rem 1rem !important;
    height: 48px !important;
}

/* Style pour le texte d'aide sous les inputs */
.em__body .form-text.text-muted {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: #888;
    font-style: italic;
    line-height: 1.4;
}

/* Styles pour le choix Wyylde */
.wyylde-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.wyylde-radio-item {
    position: relative;
}

.wyylde-radio-item .form-check-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wyylde-radio-item .form-check-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(203, 162, 72, 0.3);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    color: #ccc;
}

.wyylde-radio-item .form-check-input:checked + .form-check-label {
    background: rgba(203, 162, 72, 0.15);
    border-color: #Cba248;
    color: #fff;
}

.wyylde-radio-item .form-check-input:checked + .form-check-label .radio-icon {
    color: #Cba248;
}

.wyylde-radio-item .form-check-label:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(203, 162, 72, 0.5);
}

.radio-icon {
    font-size: 1.1rem;
    color: #888;
    transition: color 0.3s ease;
}

.radio-text {
    flex: 1;
    font-size: 0.8rem;
}

@media (max-width: 768px) {
    .wyylde-radio-item .form-check-label {
        padding: 0.6rem 0.85rem;
        font-size: 0.75rem;
    }
    
    .radio-icon {
        font-size: 1rem;
    }
    
    .radio-text {
        font-size: 0.75rem;
    }
}