/* Main Styles for 2Earn.cash Application */

/* Styles pour les dégradés */
.bg-gradient-to-br { 
    background: linear-gradient(to bottom right, var(--tw-gradient-stops)); 
}
.bg-gradient-to-r { 
    background: linear-gradient(to right, var(--tw-gradient-stops)); 
}
.from-purple-900 { 
    --tw-gradient-from: #581c87; 
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); 
}
.via-blue-900 { 
    --tw-gradient-to: transparent; 
    --tw-gradient-stops: var(--tw-gradient-from), #1e3a8a, var(--tw-gradient-to); 
}
.to-purple-800 { 
    --tw-gradient-to: #6b21a8; 
}

/* Custom styles pour les cartes */
.backdrop-blur-sm { 
    backdrop-filter: blur(4px); 
}

/* Transition animations */
.transition-all { 
    transition-property: all; 
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); 
    transition-duration: 300ms; 
}

/* Hidden elements */
.hidden { 
    display: none !important; 
}

/* Custom scrollbar */
::-webkit-scrollbar { 
    display: none; 
}
* { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Animation scale */
.hover\:scale-\[1\.02\]:hover { 
    transform: scale(1.02); 
}
.active\:scale-\[0\.98\]:active { 
    transform: scale(0.98); 
}

/* Main body styles */
.main-body {
    min-height: 100vh;
    background: linear-gradient(135deg, #581c87 0%, #1e3a8a 50%, #581c87 100%);
    color: white;
}

/* Page container */
.page-container {
    /* Suppression du padding-bottom forcé pour utiliser des marges naturelles */
    padding-bottom: 6rem; /* Marge de sécurité pour la navigation bottom sur desktop */
}

/* Modal styles */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.modal-content {
    width: 100%;
    max-width: 28rem;
    background: linear-gradient(135deg, #1f2937 0%, #581c87 50%, #1e3a8a 100%);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    max-height: 90vh;
    overflow: hidden;
}

/* Card styles */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Button styles */
.btn-primary {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: white;
    border: none;
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Status badges */
.status-completed {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-pending {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-failed {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Form styles */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    transition: all 0.3s ease;
}

.form-input:focus {
    outline: none;
    border-color: #3b82f6;
    background: rgba(255, 255, 255, 0.15);
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .page-container {
        padding: 0 0.5rem 6rem 0.5rem;
    }
    
    .modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
}

/* Loading states */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Animations personnalisées pour home-page1 */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

.animate-pulse { 
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; 
}
.animate-bounce { 
    animation: bounce 1s infinite; 
}
.animate-ping { 
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; 
}

/* ===== STYLES COMMUNS POUR COMMUNITY ET INTERACTIVITY ===== */

/* Side Menu Styles */
.side-menu {
    position: fixed;
    top: 0;
    right: -20rem;
    width: 20rem;
    height: 100vh;
    background: linear-gradient(135deg, #1f2937 0%, #581c87 50%, #1e3a8a 100%);
    box-shadow: -2rem 0 2rem rgba(0, 0, 0, 0.5);
    transition: right 0.3s ease;
    z-index: 50;
}

.side-menu.open {
    right: 0;
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.menu-items {
    padding: 1.5rem;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.menu-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Main Content Styles */
.main-content {
    padding: 0 1rem;
    max-width: 64rem;
    margin: 0 auto;
}

/* Tabs Container */
.tabs-container {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 0.25rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.tab {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
}

.tab.active {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.tab:not(.active) {
    color: rgba(255, 255, 255, 0.7);
}

.tab:not(.active):hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

/* Section Display */
.contact-section {
    display: block;
    margin-bottom: 6rem; /* Marge suffisante pour éviter le masquage par la navigation inférieure */
}

.network-section {
    display: none;
    margin-bottom: 6rem; /* Marge suffisante pour éviter le masquage par la navigation inférieure */
}

/* Button Styles */
.add-contact-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #ea580c, #dc2626);
    color: white;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 1rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
}

.add-contact-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

/* Search Container */
.search-container {
    position: relative;
    margin-bottom: 1.5rem;
}

.search-input {
    width: 100%;
    padding: 0.75rem 1.25rem 0.75rem 2.75rem;
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.9rem;
    min-height: 44px;
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.search-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.125rem;
    height: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Filters */
.filters {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.filter-btn {
    flex-shrink: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    min-height: 36px;
}

.filter-btn.active {
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.filter-btn:not(.active) {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

/* Contact Cards */
.contacts-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 6rem; /* Marge suffisante pour éviter le masquage par la navigation inférieure (py-3 + contenu ≈ 80-100px) */
}

.contact-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.contact-card:hover {
    background: rgba(255, 255, 255, 0.15);
}

.contact-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.contact-info {
    flex: 1;
}

.contact-name {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.contact-phone {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-country {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Amélioration de l'affichage des emojis drapeaux */
.contact-phone::before,
.contact-country::before {
    font-size: 1.1em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* STYLE MINIMALISTE - Design épuré et performant */
.flag-emoji {
    display: inline-block;
    width: 1.6em;
    height: 1.2em;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 0.5rem;
    border-radius: 0.125rem;
    background-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.1s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.flag-emoji:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    border-color: rgba(255, 255, 255, 0.1);
}


/* Drapeau de Tunisie - Design moderne et épuré */
.flag-tn {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><defs><linearGradient id="tnRed" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23E70013;stop-opacity:1" /><stop offset="100%" style="stop-color:%23CC0000;stop-opacity:1" /></linearGradient><filter id="tnGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="0.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="60" height="40" rx="2" fill="url(%23tnRed)" filter="url(%23tnGlow)"/><circle cx="30" cy="20" r="6" fill="white" opacity="0.95"/><path d="M30 16l1 3h3l-2.5 1.8 1 3L30 21l-2.5 1.8 1-3L26 19h3z" fill="%23E70013"/></svg>');
}

/* Drapeau de France - Design moderne et épuré */
.flag-fr {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><defs><linearGradient id="frBlue" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2300257D;stop-opacity:1" /><stop offset="100%" style="stop-color:%23001A5C;stop-opacity:1" /></linearGradient><linearGradient id="frRed" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23E70013;stop-opacity:1" /><stop offset="100%" style="stop-color:%23CC0000;stop-opacity:1" /></linearGradient><filter id="frGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="0.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="60" height="40" rx="2" fill="url(%23frBlue)" filter="url(%23frGlow)"/><rect x="20" y="0" width="20" height="40" fill="white" opacity="0.95"/><rect x="40" y="0" width="20" height="40" fill="url(%23frRed)" filter="url(%23frGlow)"/></svg>');
}

/* Drapeau d'Allemagne - Design moderne et épuré */
.flag-de {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><defs><linearGradient id="deBlack" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23000000;stop-opacity:1" /><stop offset="100%" style="stop-color:%23111111;stop-opacity:1" /></linearGradient><linearGradient id="deRed" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23DD0000;stop-opacity:1" /><stop offset="100%" style="stop-color:%23CC0000;stop-opacity:1" /></linearGradient><linearGradient id="deYellow" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23FFCE00;stop-opacity:1" /><stop offset="100%" style="stop-color:%23FFD700;stop-opacity:1" /></linearGradient><filter id="deGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="0.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="60" height="40" rx="2" fill="url(%23deBlack)" filter="url(%23deGlow)"/><rect x="0" y="13.33" width="60" height="13.33" fill="url(%23deRed)" filter="url(%23deGlow)"/><rect x="0" y="26.66" width="60" height="13.34" fill="url(%23deYellow)" filter="url(%23deGlow)"/></svg>');
}

/* Drapeau d'Espagne - Design moderne et épuré */
.flag-es {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><defs><linearGradient id="esRed" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23C60B1E;stop-opacity:1" /><stop offset="100%" style="stop-color:%23AA0000;stop-opacity:1" /></linearGradient><linearGradient id="esYellow" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23FFC400;stop-opacity:1" /><stop offset="100%" style="stop-color:%23FFD700;stop-opacity:1" /></linearGradient><filter id="esGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="0.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="60" height="40" rx="2" fill="url(%23esRed)" filter="url(%23esGlow)"/><rect x="0" y="8" width="60" height="24" fill="url(%23esYellow)" filter="url(%23esGlow)"/></svg>');
}

/* Drapeau d'Italie - Design moderne et épuré */
.flag-it {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 40"><defs><linearGradient id="itGreen" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23009234;stop-opacity:1" /><stop offset="100%" style="stop-color:%23008000;stop-opacity:1" /></linearGradient><linearGradient id="itRed" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23CE2B37;stop-opacity:1" /><stop offset="100%" style="stop-color:%23CC0000;stop-opacity:1" /></linearGradient><filter id="itGlow" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="0.5" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter></defs><rect width="60" height="40" rx="2" fill="url(%23itGreen)" filter="url(%23itGlow)"/><rect x="20" y="0" width="20" height="40" fill="white" opacity="0.95"/><rect x="40" y="0" width="20" height="40" fill="url(%23itRed)" filter="url(%23itGlow)"/></svg>');
}

/* Styles pour l'icône de téléphone */
.phone-icon {
    font-size: 1em;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* Amélioration générale des emojis */
.contact-phone,
.contact-country {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Android Emoji', 'EmojiSymbols', sans-serif;
}

/* Status Badges */
.status-badge {
    padding: 0.375rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.7rem;
    font-weight: 500;
    min-height: 28px;
}

.status-registered {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.status-not-registered {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Availability Status */
.availability-status {
    padding: 0.75rem;
    border-radius: 1rem;
    text-align: center;
    margin-bottom: 1rem;
}

.availability-sponsor {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.availability-available {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.availability-reserved {
    background: rgba(251, 146, 60, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Contact Actions - Organisation optimisée */
.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ligne des boutons principaux */
.contact-actions .btn-designate,
.contact-actions .btn-invite {
    width: 100%;
    margin-bottom: 0.25rem;
}

/* Conteneur pour les boutons secondaires */
.contact-actions .secondary-actions {
    display: flex;
    gap: 0.375rem;
    width: 100%;
}

/* Ligne des boutons secondaires */
.contact-actions .btn-modify,
.contact-actions .btn-delete {
    flex: 1;
    min-width: 0;
}

.action-btn {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    border: 1px solid;
    cursor: pointer;
    min-height: 2.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Bouton Modifier - Action secondaire */
.btn-modify {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
    flex: 0.8;
}

.btn-modify:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

/* Bouton Supprimer - Action de danger */
.btn-delete {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
    flex: 0.8;
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    transform: translateY(-1px);
}

/* Bouton Désigner - Action principale */
.btn-designate {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: white;
    border-color: rgba(59, 130, 246, 0.5);
    flex: 1.2;
    font-weight: 600;
}

.btn-designate:hover {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    border-color: rgba(59, 130, 246, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
}

/* Bouton Inviter - Action principale */
.btn-invite {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    border-color: rgba(16, 185, 129, 0.5);
    flex: 1.2;
    font-weight: 600;
}

.btn-invite:hover {
    background: linear-gradient(135deg, #059669, #047857);
    border-color: rgba(16, 185, 129, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

/* Styles responsives pour les boutons */
@media (max-width: 768px) {
    .contact-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .contact-actions .btn-designate,
    .contact-actions .btn-invite {
        width: 100%;
        min-height: 2.5rem;
        font-size: 0.875rem;
    }
    
    .contact-actions .secondary-actions {
        width: 100%;
        gap: 0.5rem;
    }
    
    .contact-actions .btn-modify,
    .contact-actions .btn-delete {
        flex: 1;
        min-height: 2.5rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .action-btn {
        padding: 0.625rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .action-btn svg {
        width: 14px;
        height: 14px;
    }
}


/* Network Overview */
.network-overview {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
    text-align: center;
}

.overview-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    text-align: center;
}

.stat-value {
    font-size: 1.875rem;
    font-weight: bold;
    color: #86efac;
    transition: all 0.3s ease;
}

.stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Network Levels */
.network-levels {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.level-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.level-card:hover {
    background: rgba(255, 255, 255, 0.15);
}

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

.level-icon-container {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.level1 {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
}

.level2 {
    background: linear-gradient(135deg, #9333ea, #7c3aed);
}

.level3 {
    background: linear-gradient(135deg, #0891b2, #0e7490);
}

.level-info h3 {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
}

.level-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

.expand-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: rgba(255, 255, 255, 0.7);
    transition: transform 0.3s ease;
}

.expand-icon.expanded {
    transform: rotate(180deg);
}

.level-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.level-stat-value {
    font-size: 1.5rem;
    font-weight: bold;
    color: #86efac;
}

.level-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
}

.members-list {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1rem;
    display: none;
}

.members-list.expanded {
    display: block;
}

.member-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

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

.member-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ea580c, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
}

.member-details h4 {
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
}

.member-details p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.member-stars {
    display: flex;
}

.star {
    font-size: 1.125rem;
    color: #fbbf24;
}

.star.empty {
    color: rgba(255, 255, 255, 0.2);
}

/* Bottom Navigation */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(8px);
    padding: 0.75rem 1rem;
}

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

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    color: #9ca3af;
    font-size: 0.75rem;
}

.nav-item.active {
    color: white;
}

.nav-icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(4px);
    z-index: 50;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal.open {
    display: flex;
}

.modal-content {
    background: linear-gradient(135deg, #581c87 0%, #1e3a8a 50%, #581c87 100%);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 100%;
    max-width: 28rem;
}

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

.modal-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: white;
}

.close-btn {
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-btn:hover {
    color: white;
}

.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.form-input:focus {
    outline: none;
    ring: 2px solid #3b82f6;
    border-color: #3b82f6;
}

.form-select {
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.form-select option {
    background: #1f2937;
    color: white;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.btn-cancel {
    flex: 1;
    padding: 0.75rem;
    border-radius: 1rem;
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cancel:hover {
    background: rgba(239, 68, 68, 0.3);
}

.btn-save {
    flex: 1;
    padding: 0.75rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-save:hover {
    background: linear-gradient(135deg, #15803d, #166534);
}

.no-contacts {
    text-align: center;
    padding: 3rem;
}

.no-contacts-icon {
    font-size: 3.75rem;
    margin-bottom: 1rem;
}

.no-contacts-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.no-contacts-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
}

/* ===== STYLES SPÉCIFIQUES INTERACTIVITY ===== */

/* Page Header */
.page-header {
    text-align: center;
    margin-bottom: 2rem;
}

.page-icon {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, #16a34a, #1e40af);
    border-radius: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.page-title {
    font-size: 2rem;
    font-weight: bold;
    color: white;
    margin-bottom: 1.5rem;
}

/* Stats Card */
.stats-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    margin-bottom: 1.5rem;
}

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

.stats-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.stats-badges {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.stat-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-participated {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.badge-new {
    background: rgba(251, 146, 60, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(251, 146, 60, 0.3);
}

/* Chance Banner */
.chance-banner {
    background: rgba(251, 146, 60, 0.2);
    border: 1px solid rgba(251, 146, 60, 0.3);
    border-radius: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
    position: relative;
}

.chance-badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #eab308, #ea580c);
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.chance-content {
    text-align: center;
    padding-top: 0.5rem;
}

.chance-title {
    font-size: 1.125rem;
    font-weight: bold;
    color: #fbbf24;
    margin-bottom: 0.25rem;
}

.chance-info {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #fbbf24;
}

.chance-description {
    color: rgba(251, 191, 36, 0.8);
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

/* Survey List */
.survey-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 12rem; /* Augmenté pour éviter le chevauchement avec la navigation bottom */
}

.survey-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    padding: 1.5rem;
    border: 1px solid;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    cursor: pointer;
}

.survey-card:hover {
    transform: scale(1.02);
}

.survey-participated {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.2);
}

.survey-new {
    border-color: rgba(251, 146, 60, 0.6);
    box-shadow: 0 8px 32px rgba(251, 146, 60, 0.2);
}

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

.survey-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    border: 2px solid;
}

.survey-icon.participated {
    background: rgba(34, 197, 94, 0.3);
    border-color: #16a34a;
}

.survey-icon.new {
    background: rgba(251, 146, 60, 0.3);
    border-color: #ea580c;
}

/* Différenciation visuelle spécifique */
/* Event (Survey 3) – accent vert animé pour urgence/temps réel */
.survey-card[data-id="3"] .survey-icon.new {
    background: rgba(34, 197, 94, 0.25);
    border-color: #16a34a;
}
.survey-card[data-id="3"] {
    border-color: rgba(34, 197, 94, 0.6);
    box-shadow: 0 8px 32px rgba(34, 197, 94, 0.22);
}
.survey-card[data-id="3"] .survey-question {
    color: #bbf7d0; /* vert pâle lisible */
}
.survey-card[data-id="3"] .survey-badge.badge-active {
    background: rgba(34, 197, 94, 0.35);
    border-color: rgba(34, 197, 94, 0.55);
}
.survey-card[data-id="3"] {
    animation: eventPulse 2.4s ease-in-out infinite;
}
@keyframes eventPulse {
    0%, 100% { box-shadow: 0 8px 32px rgba(34, 197, 94, 0.22); }
    50% { box-shadow: 0 12px 40px rgba(34, 197, 94, 0.32); }
}

/* Jeux & Quiz (Survey 4) – accent bleu/violet pour ludique */
.survey-card[data-id="4"] .survey-icon.new {
    background: rgba(59, 130, 246, 0.25);
    border-color: #3b82f6;
}
.survey-card[data-id="4"] {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.22);
}
.survey-card[data-id="4"] .survey-question {
    color: #c4b5fd; /* violet pâle lisible */
}
.survey-card[data-id="4"] .btn-results {
    background: rgba(139, 92, 246, 0.25);
    border-color: rgba(139, 92, 246, 0.4);
    color: #ddd6fe;
}

.survey-meta {
    flex: 1;
    min-width: 0;
}

.survey-author {
    color: white;
    font-weight: 600;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.survey-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* Grouper l'icône horloge avec son texte pour éviter les retours à la ligne */
.survey-info .time-group {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    flex-shrink: 0;
}

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

.survey-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid;
}

.badge-active {
    background: rgba(34, 197, 94, 0.3);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.5);
}

.badge-closed {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.5);
}

.badge-pending {
    background: rgba(251, 146, 60, 0.3);
    color: #fbbf24;
    border-color: rgba(251, 146, 60, 0.5);
}

.survey-question {
    color: white;
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.survey-description {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

.survey-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.option {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.option:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.option.selected {
    border-color: rgba(59, 130, 246, 0.5);
    background: rgba(59, 130, 246, 0.1);
}

.option-progress {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    opacity: 0.05;
    border-radius: 0.75rem;
    transition: all 0.3s ease;
}

.option-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

.option-indicator {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.option.selected .option-indicator {
    background: #3b82f6;
    border-color: #3b82f6;
}

.option-text {
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
}

.option-results {
    text-align: right;
}

.option-percentage {
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
}

.option-votes {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.survey-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: space-between;
    align-items: center;
}

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

.btn-like {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-like.liked {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

.btn-like:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-comment {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

.btn-comment:hover {
    background: rgba(255, 255, 255, 0.2);
}

.btn-results {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

.btn-results:hover {
    background: rgba(59, 130, 246, 0.3);
}

.survey-status {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.status-pending {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
}

.status-participated {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

.status-closed {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-content {
        padding: 0 0.5rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .level-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .contact-actions {
        flex-direction: column;
    }
    
    .survey-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-left {
        justify-content: center;
    }
    
    .stats-badges {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }

    /* Assurer un espacement suffisant sur mobile pour la navigation inférieure */
    .page-container {
        padding: 0 0.5rem 8rem 0.5rem;
    }

    .survey-card {
        margin-bottom: 2rem;
    }
}

/* ===== COMMENTAIRES AVANCÉS ===== */

/* Section des commentaires */
.comments-section {
    margin-top: 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    animation: slideDown 0.3s ease-out;
}

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

.comments-container {
    padding: 1.5rem;
}

.comments-title {
    color: white;
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.comments-title::before {
    content: "💬";
    font-size: 1.25rem;
}

/* Formulaire de nouveau commentaire */
.new-comment-form {
    margin-bottom: 2rem;
}

.comment-input-container {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.user-avatar {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.comment-input-wrapper {
    flex: 1;
}

.comment-textarea {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 0.875rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 4rem;
    transition: all 0.2s ease;
}

.comment-textarea::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.comment-textarea:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    background: rgba(255, 255, 255, 0.15);
}

.comment-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

.comment-submit-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(59, 130, 246, 0.2);
    color: rgb(147, 197, 253);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.comment-submit-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.4);
    transform: translateY(-1px);
}

.comment-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Liste des commentaires */
.comments-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-item {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.comment-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

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

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

.comment-author-avatar {
    width: 2rem;
    height: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.comment-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.comment-author {
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
}

.comment-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

.comment-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    line-height: 1.5;
    margin-left: 2.75rem;
}

.comment-actions-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: 2.75rem;
}

.comment-action-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
}

.comment-action-btn:hover {
    color: white;
    background: rgba(255, 255, 255, 0.1);
}

.comment-action-btn.reply-btn:hover {
    color: rgb(147, 197, 253);
    background: rgba(59, 130, 246, 0.1);
}

/* Section des réponses */
.replies-section {
    margin-top: 1rem;
    margin-left: 2.75rem;
    padding-left: 1rem;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.reply-item {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 0.75rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 0.75rem;
}

.reply-item:last-child {
    margin-bottom: 0;
}

.reply-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.reply-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.reply-author-avatar {
    width: 1.5rem;
    height: 1.5rem;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.reply-meta {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.reply-author {
    color: white;
    font-weight: 500;
    font-size: 0.75rem;
}

.reply-date {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.625rem;
}

.reply-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    line-height: 1.4;
    margin-left: 2rem;
}

.reply-actions-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-left: 2rem;
}

/* Animations pour les réponses */
.replies-section {
    animation: slideInLeft 0.3s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive pour les commentaires */
@media (max-width: 640px) {
    .comments-container {
        padding: 1rem;
    }
    
    .comment-input-container {
        gap: 0.5rem;
    }
    
    .user-avatar {
        width: 2rem;
        height: 2rem;
    }
    
    .comment-text {
        margin-left: 2.5rem;
    }
    
    .comment-actions-bar {
        margin-left: 2.5rem;
    }
    
    .replies-section {
        margin-left: 2.5rem;
    }
    
    .comment-submit-btn {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/* ===== MODAL DE RÉSULTATS DÉTAILLÉS ===== */

/* Modal principal */
.results-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Backdrop du modal */
.modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

/* Conteneur du modal */
.modal-container {
    position: relative;
    width: 100%;
    max-width: 22rem; /* 352px - optimisé pour mobile 370px */
    max-height: 90vh;
    background: linear-gradient(135deg, #1f2937 0%, #581c87 50%, #1e3a8a 100%);
    border-radius: 1.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: hidden;
    animation: modalSlideIn 0.3s ease-out;
}

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

/* En-tête du modal */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

.modal-title-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #10b981 0%, #3b82f6 100%);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.modal-title-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.modal-title {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
}

.modal-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
}

.modal-close-btn {
    width: 2.5rem;
    height: 2.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

/* Contenu du modal */
.modal-content {
    padding: 1.5rem;
    max-height: calc(90vh - 120px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: calc(100% - 1.5rem); /* Largeur adaptée avec marges de 12px de chaque côté */
    box-sizing: border-box;
    margin: 0 0.75rem 0.75rem 0.75rem; /* Marge de 12px sur les côtés et en bas */
}

/* Élément de résultat */
.result-item {
    position: relative;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1rem;
    margin-right: 0.5rem; /* Espacement à droite avec le conteneur */
    transition: all 0.3s ease;
    overflow: hidden;
}

.result-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.result-item.selected {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);
}

/* Barre de progression */
.result-progress {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: linear-gradient(90deg, #10b981 0%, #3b82f6 100%);
    opacity: 0.15;
    border-radius: 1rem;
    transition: width 0.7s ease-out;
    z-index: 1;
}

/* Contenu de l'élément de résultat */
.result-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.result-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.result-indicator {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.05);
}

.result-indicator.selected {
    background: #3b82f6;
    border-color: #60a5fa;
    color: white;
}

.result-indicator.selected::after {
    content: "✓";
    font-size: 0.75rem;
    font-weight: bold;
}

.result-text {
    color: white;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.result-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.result-percentage {
    color: white;
    font-size: 1.25rem;
    font-weight: 700;
}

.result-votes {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
}

/* Responsive pour mobile */
@media (max-width: 640px) {
    .results-modal {
        padding: 0.75rem;
    }
    
    .modal-container {
        max-width: calc(100vw - 1.5rem); /* Marge de 24px de chaque côté */
        max-height: 95vh;
        border-radius: 1rem;
        /* Assurer que le modal ne dépasse jamais la largeur disponible */
        width: min(calc(100vw - 1.5rem), 22rem);
    }
    
    .modal-header {
        padding: 1rem;
    }
    
    .modal-icon {
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 0.75rem;
    }
    
    .modal-title {
        font-size: 1.125rem;
    }
    
    .modal-subtitle {
        font-size: 0.75rem;
    }
    
    .modal-content {
        padding: 1rem;
        gap: 0.75rem;
        width: calc(100% - 1rem); /* Largeur adaptée avec marges de 8px de chaque côté */
        box-sizing: border-box;
        margin: 0 0.5rem 0.5rem 0.5rem; /* Marge de 8px sur les côtés et en bas sur mobile */
    }
    
    .result-item {
        padding: 0.75rem;
        border-radius: 0.75rem;
        margin-right: 0.25rem; /* Espacement réduit sur mobile */
    }
    
    .result-content {
        gap: 0.5rem;
    }
    
    .result-left {
        gap: 0.5rem;
    }
    
    .result-indicator {
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.625rem;
    }
    
    .result-text {
        font-size: 0.8125rem;
    }
    
    .result-percentage {
        font-size: 1.125rem;
    }
    
    .result-votes {
        font-size: 0.6875rem;
    }
}

/* Animation de fermeture */
.results-modal.closing {
    animation: modalFadeOut 0.2s ease-in forwards;
}

.results-modal.closing .modal-container {
    animation: modalSlideOut 0.2s ease-in forwards;
}

@keyframes modalFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}