/* Modal */
    /* Transition d'ouverture/fermeture */
        @keyframes inModal{
            0%{
                opacity: 0;
            }

            75%{
                opacity: 0;
            }

            100%{
                opacity: 1;
            }
        }

        .InOutModal-enter-active,
        .InOutModal-leave-active{
            animation: inModal 3s;
        }

        .InOutModal-enter,
        .InOutModal-leave-to{
            animation: inModal;
        }
    /* Fin transition d'ouverture/fermeture */

    /* Fond */
        .fondModal{
            backdrop-filter: blur(30px) brightness(130%);
            -webkit-backdrop-filter: blur(30px) brightness(130%);
            bottom: 0;
            height: 100vh;
            left: 0;
            overflow: hidden;
            position: fixed;
            right: 0;
            top: 0;
            width: 100vw;
            z-index: 99999999999999999999999999999999999999999999999999;
            -webkit-backdrop-filter: blur(30px) brightness(130%);
        }

        .svgCrossModal{
            height: auto;
            position: absolute;
            right: 30px;
            top: 20px;
            width: 25px;
        }
    /* Fin fond */

    /* Modal */
        .modal{
            box-sizing: border-box;
            border-radius: 20px;
            box-shadow: 0 0 30px rgb(0 0 0 / 44%);
            height: 100%;
            left: 50%;
            min-height: 310px;
            min-width: 310px;
            max-height: 500px;
            max-width: 500px;
            overflow: hidden;
            position: fixed;
            padding: 20px;
            top: 50%;
            transform: translateX(-50%) translateY(-50%);
            width: 100%;
        }

        /* SVG */
            .svgModal{
                height: auto;
                margin: 20px 0;
                position: relative;
                width: 150px;
            }
        /* Fin SVG */

        /* Modal connexion */
            .modalConnexion{
                display: flex;
                flex-direction: column;
                flex-wrap: nowrap;
                gap: 0;
                height: 100%;
                margin: 0;
                min-height: 500px;
                min-width: 460px;
                max-height: 100%;
                overflow: hidden;
                position: relative;
                padding: 0;
                width: 100%;
            }

            .flexCadreImage{
                height: 33%;
                min-height: calc(500px / 3);
                overflow: hidden;
                position: relative;
                width: 100%;
            }

            .flexCadreImage>img{
                left: 50%;
                max-height: 300%;
                max-width: 300%;
                min-height: 100%;
                min-width: 100%;
                position: absolute;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 100%;
            }

            .flexCadreConnexion{
                height: 100%;
                position: relative;
                width: 100%;
                text-align: center;
            }

            /* Input */
                .modal input{
                    border-radius: 20px;
                    border: none;
                    height: 30px;
                    margin: 10px 20px;
                    padding: 5px 10px;
                    width: calc(100% - 60px);
                }

                /* Password */
                    .svgEyeLookPassword{
                        height: 25px; 
                        margin: 0; 
                        position: absolute; 
                        right: 35px;
                        top: 27px;
                        width: auto; 
                    }

                    .svgEyeNotLookPassword{
                        height: 25px; 
                        margin: 0; 
                        position: absolute; 
                        right: 33.33px;
                        top: 27px;
                        width: auto; 
                    }
                /* Fin password */
            /* Fin input */
        /* Fin modal connexion */
        /* Modal Full Image */
            .imageFullSize{
                max-width: 75vw;
                width: auto;
                max-height: 80vh;
                height: auto;
                position: relative;
                left: 50vw;
                top: 50vh;
                transform: translateX(-50%) translateY(-50%);
            }

            .listePetiteImg{
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                justify-content: center;
                left: 0;
                overflow-x: scroll;
                position: fixed;
                top: 100vh;
                transform: translateY(-100%);
                transition: ease-in-out 500ms;
                width: 100vw;
            }

            .imageSliderFull{
                min-width: auto;
                max-width: auto;
                min-height: 75px;
                max-height: 75px;
                border-radius: 10px;
            }

            @media(hover:hover){
                .listePetiteImg{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: nowrap;
                    justify-content: center;
                    left: 0;
                    overflow-x: scroll;
                    position: fixed;
                    top: 100vh;
                    transform: translateY(-25%);
                    transition: ease-in-out 500ms;
                    width: 100vw;
                }

                .listePetiteImg:hover{
                    position: fixed;
                    top: 100vh;
                    left: 0;
                    transform: translateY(-100%);
                    overflow-x: scroll;
                }
            }
        /* Fin modal Full Image */
        /* Modal standard */
            .modalStandard,
            .modalContact{
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                gap: 40px;
                height: 100%;
                margin: 0;
                min-height: 460px;
                min-width: 460px;
                max-height: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
                position: relative;
                padding: 0;
                width: 100%;
            }

            .modalStandard>h2{
                text-align: center;
            }

            .descriptionModal{
                height: max-content;
                margin: 0 20px;
                width: calc(100% - 40px);
            }
        /* Fin modal standard */

        /* Modal tarifs */
            .modalTarifs{
                height: calc(100% - 40px);
                margin: 0;
                min-height: 420px;
                min-width: 420px;
                max-height: 100%;
                overflow-x: hidden;
                overflow-y: scroll;
                position: relative;
                padding: 20px;
                width: calc(100% - 40px);
            }
        /* Fin modal tarifs */

        /* Modal Confirmation envoi */
            .modalConfEnvoi{
                align-items: center;
                border-radius: 20px;
                display: flex;
                flex-direction: column;
                gap: 40px;
                height: 250px;
                justify-content: center;
                left: 50%;
                margin: 0;
                overflow-x: hidden;
                overflow-y: scroll;
                position: relative;
                padding: 0;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
                width: 250px;
            }

            .svgSent{
                height: 100px;
                width: 100px;
            }
        /* Fin modal Confirmation envoi */
    /* Fin modal */

    /* Version téléphone */
        @media(max-width: 500px){
            .modal{
                min-width: 350px;
                min-height: 350px;
            }

            .modalConnexion, 
            .modalStandard{
                min-width: 350px;
            }
        }
    /* Fin version téléphone */

    /*  */
        .banniereModalContact{
            max-width: 600px;
            min-width: 350px;
            height: auto;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%) translateY(-75px);
            z-index: 0;
        }

        .divModal{
            position: relative;
            z-index: 2;
            min-height: 100%;
            max-height: 100%;
            margin-top: 150px;
        }

        .divModal>table{
            width: calc(100% - 50px);
            margin: 0 25px;
            height: 100%;
            border-spacing: 10px 0;
            position: relative;
            min-height: 100%;
        }

        .divLogoContact{
            width: 50px;
            height: 50px;
            position: relative;
            border-radius: 25px;
            overflow: hidden;
            margin: 0 auto;
        }

        .divLogoContact>img{
            width: 100%;
            height: auto;
            position: relative;
        }
    /*  */
/* Fin modal */