/* Pop-up du mode essai */

.trial-mode-popup-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgba(0, 0, 0, 0.7);

    backdrop-filter: blur(5px);

    z-index: 9999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    animation: fadeIn 0.3s ease-out;

}



.trial-mode-popup {

    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);

    border-radius: 20px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);

    max-width: 500px;

    width: 100%;

    max-height: 90vh;

    overflow-y: auto;

    animation: slideIn 0.4s ease-out;

    border: 1px solid rgba(255, 255, 255, 0.2);

}



.trial-mode-popup-header {

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    color: white;

    padding: 30px 30px 20px;

    border-radius: 20px 20px 0 0;

    text-align: center;

    position: relative;

}



.trial-mode-popup-icon {

    font-size: 3rem;

    margin-bottom: 15px;

    display: block;

    animation: bounce 2s infinite;

}



.trial-mode-popup-header h3 {

    margin: 0;

    font-size: 1.8rem;

    font-weight: 700;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.trial-mode-popup-content {

    padding: 30px;

}



.trial-mode-popup-message {

    font-size: 1.1rem;

    line-height: 1.6;

    color: #495057;

    margin-bottom: 25px;

    text-align: center;

    font-weight: 500;

}



.trial-mode-popup-details {

    background: #f8f9fa;

    border-radius: 15px;

    padding: 20px;

    margin-bottom: 25px;

}



.trial-mode-detail {

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    padding: 10px 0;

}



.trial-mode-detail:last-child {

    margin-bottom: 0;

}



.detail-icon {

    font-size: 1.5rem;

    margin-right: 15px;

    min-width: 30px;

    text-align: center;

}



.detail-text {

    font-size: 1rem;

    color: #495057;

    font-weight: 500;

}



.trial-mode-popup-features {

    background: #e8f5e8;

    border-radius: 15px;

    padding: 20px;

    margin-bottom: 25px;

    border-left: 4px solid #28a745;

}



.trial-mode-popup-features h4 {

    margin: 0 0 15px 0;

    color: #155724;

    font-size: 1.1rem;

    font-weight: 600;

}



.trial-mode-popup-features ul {

    margin: 0;

    padding-left: 20px;

    list-style: none;

}



.trial-mode-popup-features li {

    margin-bottom: 8px;

    color: #155724;

    font-size: 0.95rem;

    position: relative;

}



.trial-mode-popup-features li:before {

    content: "✅";

    position: absolute;

    left: -25px;

    top: 0;

}



.trial-mode-popup-footer {

    padding: 20px 30px 30px;

    text-align: center;

}



#trial-mode-continue {

    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);

    border: none;

    color: white;

    padding: 15px 40px;

    font-size: 1.1rem;

    font-weight: 600;

    border-radius: 50px;

    cursor: pointer;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);

    min-width: 150px;

}



#trial-mode-continue:hover {

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);

    background: linear-gradient(135deg, #218838 0%, #1ea085 100%);

}



#trial-mode-continue:active {

    transform: translateY(0);

}



/* Animations */

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}



@keyframes slideIn {

    from {

        opacity: 0;

        transform: translateY(-50px) scale(0.9);

    }

    to {

        opacity: 1;

        transform: translateY(0) scale(1);

    }

}



@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {

        transform: translateY(0);

    }

    40% {

        transform: translateY(-10px);

    }

    60% {

        transform: translateY(-5px);

    }

}



/* Responsive */

@media (max-width: 768px) {

    .trial-mode-popup {

        margin: 10px;

        max-height: 95vh;

    }

    

    .trial-mode-popup-header {

        padding: 25px 20px 15px;

    }

    

    .trial-mode-popup-header h3 {

        font-size: 1.5rem;

    }

    

    .trial-mode-popup-content {

        padding: 20px;

    }

    

    .trial-mode-popup-footer {

        padding: 15px 20px 25px;

    }

    

    #trial-mode-continue {

        padding: 12px 30px;

        font-size: 1rem;

        min-width: 120px;

    }

}



@media (max-width: 480px) {

    .trial-mode-popup-overlay {

        padding: 10px;

    }

    

    .trial-mode-popup {

        border-radius: 15px;

    }

    

    .trial-mode-popup-header {

        border-radius: 15px 15px 0 0;

        padding: 20px 15px 10px;

    }

    

    .trial-mode-popup-icon {

        font-size: 2.5rem;

    }

    

    .trial-mode-popup-header h3 {

        font-size: 1.3rem;

    }

    

    .trial-mode-popup-content {

        padding: 15px;

    }

    

    .trial-mode-popup-details,

    .trial-mode-popup-features {

        padding: 15px;

    }

    

    .trial-mode-popup-footer {

        padding: 10px 15px 20px;

    }

}



/* Scrollbar personnalisée */

.trial-mode-popup::-webkit-scrollbar {

    width: 8px;

}



.trial-mode-popup::-webkit-scrollbar-track {

    background: #f1f1f1;

    border-radius: 10px;

}



.trial-mode-popup::-webkit-scrollbar-thumb {

    background: #c1c1c1;

    border-radius: 10px;

}



.trial-mode-popup::-webkit-scrollbar-thumb:hover {

    background: #a8a8a8;

}