/* ----------------------------------------------------------------------------
Ce fichier CSS concerne le script qui permet d'afficher une alerte quand on quitte une page avec un formulaire entamé
---------------------------------------------------------------------------- */

/* Règles pour toutes résolutions, sauf contre-ordre plus bas */
@media (min-width: 1px) {
    /* Parent le plus haut, qui sert d'overlay de masquage et de positionnement à l'alerte */
    #Form_protection_overlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 9999999999;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 25px;
    }

    /* Conteneur "réel" de l'alerte */
    #Formprot_container {
        width: -moz-fit-content;
        width: fit-content;
        max-width: 500px;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 20px 20px;
        margin: 0 0 15vh 0;
        display: flex;
        flex-direction: column;
    }

    /* Titre de l'alerte */
    #Formprot_title {
        font-family: 'Cabin', sans-serif;
        font-size: 22px;
        color: var(--secondary);
        font-weight: 600;
        line-height: 1;
        margin: 0 0 15px 0;
    }

    /* Texte de l'alerte */
    #Formprot_desc {
        font-family: 'Cabin', sans-serif;
        font-size: 16px;
        color: var(--noir-texte);
        font-weight: 400;
        line-height: 1;
        margin: 0;
    }

    /* Élément contenant les boutons de choix de l'alerte */
    #Formprot_btn_bloc {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: end;
        align-items: center;
        width: 100%;
        margin: 30px 0 0 0;
        gap: 25px;
    }

    /* Règles communes des boutons de l'alerte */
    .formprot-btn {
        background-color: #ffffff;
        border: none;
        border-radius: 5px;
        color: var(--noir-texte);
        font-family: 'Cabin', sans-serif;
        font-size: 17px;
        font-weight: 500;
        width: -moz-fit-content;
        width: fit-content;
        padding: 5px 15px;
    }

    /* Bouton qui permet de quitter la page */
    #Formpro_btn_sortie {
        background-color: var(--secondary-extra-light);
    }

    #Formpro_btn_sortie:hover {
        background-color: var(--secondary-light);
    }

    /* Bouton qui permet de rester sur la page */
    #Formpro_btn_annuler {
        background-color: var(--gris-contraste);
    }

    #Formpro_btn_annuler:hover {
        background-color: var(--gris-form);
    }
}

/* Media query qui marque le début d'une logique "grand tablette" */
@media (min-width: 768px) {

    /* Titre de l'alerte */
    #Formprot_title {
        font-size: 24px;
    }

    /* Texte de l'alerte */
    #Formprot_desc {
        font-size: 17px;
    }

    /* Règles communes des boutons de l'alerte */
    .formprot-btn {
        font-size: 18px;
    }

}