/* 
Popup d’alerte 

Ce bloc de styles transforme le message d’avertissement de renouvellement
en une fenêtre modale visible/mode popup

Fonctionnalités :
- Affichage centré et fixe à l’écran (effet popup / modal)
- Arrière-plan assombri pour attirer l’attention et bloquer visuellement la page
- Style d’alerte critique en rouge 
- Texte agrandi et renforcé pour une lisibilité maximale
- Disparition automatique après 4 secondes 
*/

.member_renew_date_now {
    /* Normal state (after 4s) */
    position: static;
    max-width: none;
    width: auto;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: none;
    transform: none;
    z-index: auto;
    border-left: 0;
    background: inherit;
    opacity: 1;

    animation: popupThenNormal 4s steps(1, end) forwards;/*La valeur de 4s peut être changée à souhait*/
}

.member_renew_date_now p {
    /* Normal text after revert */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;

    animation: popupTextThenNormal 4s steps(1, end) forwards;
}
@keyframes popupThenNormal {
    /* POPUP MODE */
    0% {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 680px;
        width: calc(100% - 48px);
        padding: 44px 48px;
        border-radius: 20px;
        z-index: 9999;

        background: #fff5f5;
        border-left: 10px solid #dc3545;

        box-shadow:
            0 30px 70px rgba(0, 0, 0, 0.45),
            0 0 0 9999px rgba(0, 0, 0, 0.6);
    }

    /* Stay popup for full duration */
    99% {
        position: fixed;
    }

    /* SNAP back to normal */
    100% {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        max-width: none;
        width: auto;
        padding: 12px 16px;
        border-radius: 6px;
        z-index: auto;

        background: inherit;
        border-left: 0;
        box-shadow: none;
    }
}

@keyframes popupTextThenNormal {
    0% {
        font-size: 20px;
        font-weight: 700;
        line-height: 1.7;
        color: #842029;
    }

    99% {
        font-size: 20px;
        font-weight: 700;
        color: #842029;
    }

    /* SNAP back */
    100% {
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
        color: inherit;
    }
}

/************************************************************************************************************* 
Fin-Popup d’alerte 
*************************************************************************************************************/