/*#region - Importation de font --------------------------------*/

    @font-face {
        font-family: 'regular';
        src: url('../fnt/Futura/FuturaPT-Medium.eot');
        src: url('../fnt/Futura/FuturaPT-Medium.eot?#iefix') format('embedded-opentype'),
            url('../fnt/Futura/FuturaPT-Medium.woff2') format('woff2'),
            url('../fnt/Futura/FuturaPT-Medium.woff') format('woff'),
            url('../fnt/Futura/FuturaPT-Medium.ttf') format('truetype'),
            url('../fnt/Futura/FuturaPT-Medium.svg#../fnt/Futura/FuturaPT-Medium') format('svg');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'bold';
        src: url('../fnt/Futura/FuturaPT-Heavy.eot');
        src: url('../fnt/Futura/FuturaPT-Heavy.eot?#iefix') format('embedded-opentype'),
            url('../fnt/Futura/FuturaPT-Heavy.woff2') format('woff2'),
            url('../fnt/Futura/FuturaPT-Heavy.woff') format('woff'),
            url('../fnt/Futura/FuturaPT-Heavy.ttf') format('truetype'),
            url('../fnt/Futura/FuturaPT-Heavy.svg#../fnt/Futura/FuturaPT-Heavy') format('svg');
        font-weight: 900;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: 'ink free';
        src: url('../fnt/Ink free/InkFree.eot');
        src: url('../fnt/Ink free/InkFree.eot?#iefix') format('embedded-opentype'),
            url('../fnt/Ink free/InkFree.woff2') format('woff2'),
            url('../fnt/Ink free/InkFree.woff') format('woff'),
            url('../fnt/Ink free/InkFree.ttf') format('truetype'),
            url('../fnt/Ink free/InkFree.svg#../fnt/Futura/FuturaPT-Heavy') format('svg');
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }


/*#endregion*/

/*#region - Initialisation ------------------------------------*/

    *{
        margin: 0;
        padding: 0; 
        box-sizing: border-box;
        font-family: 'regular';
        font-size: 15px;
    }
    
    /* Desactiver la selection de texte */
    *:not(input) {    
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    input, textarea{
        -webkit-user-select: text !important;
    } 

    html,body{
        width: 100%;
        height: 100%;
    }

    body[data-theme="light"]{
        --fond: #fff;
        --font: #000;
    }
    
    body[data-theme="light"][data-ascent="default"]{
        --pri: #7551F5;
        --bg_mvn: #9077e7;
        --dcmp_banner : rgb(117 81 245 / 18%);
    }
    
    body[data-theme="light"][data-ascent="gold"]{
        --pri: rgb(184 134 11);
        --bg_mvn: rgb(217 165 36);
        --dcmp_banner : rgb(184 134 11 / 18%);
    }
    
    body[data-theme="light"][data-ascent="classic"]{
        --pri: #28BAF5;
        --bg_mvn: rgb(121 201 233);
        --dcmp_banner: rgba(40 186 245/18%);
    }

/*#endregion*/
    
/*#region - Générale -------------------------------------------*/

    #app-load, #app{
        width: 100%;
        height: 100%;
    }

    #app.diseable{
        pointer-events: none !important;
    }

    .d{
        pointer-events: none !important;
    }

/*#endregion*/

/*#region - Loader -------------------------------------------*/

    #app-load{
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;

        display: flex;
        justify-content: center;
        align-items: center;

        background: #fff;
    }


    #app-load.hide{
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    #app-load > .icon > svg{
        width: 40px;
        height: 40px;

        color: var(--pri);

        animation: pulse 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    }


    @keyframes pulse{
        0% { transform: scale(0.95); }
        5% { transform: scale(1.1); }
        39% { transform: scale(0.85); }
        45% { transform: scale(1); }
        60% { transform: scale(0.95); }
        100% { transform: scale(0.9); }
    }

/*#endregion ---------------------------------------*/

/*#region - Loader content -------------------------------------*/

    #app-load-content{
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        
        width: 100%;
        height: 100vh;

        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;

        background: rgba(0 0 0 /.5);

        justify-content: center;
        align-items: center;
        
    }

    #app-load-content > .cadre{
        width: 100px;
        height: 100px;

        display: flex;
        justify-content: center;
        align-items: center;

        background: #fff;
        border-radius: 20px;

        transform: scale(0);
        transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1);
    }


    #app-load-content > .cadre > .icon{
        width: auto;
        height: auto;

        display: flex;
        justify-content: center;
        align-items: center;
        
        opacity: 0;
        transition: transform .3s cubic-bezier(0.215, 0.61, 0.355, 1) , opacity .3s ease-in-out ;
    }


    #app-load-content > .cadre > .icon > svg{
        width: 40px;
        height: 40px;

        color: var(--pri);

        transform: scale(5);
        opacity: 0;

        animation: pulse 1.2s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
        animation-delay: .3s;

        transition: transform .3s ease-in-out .3s, opacity .3s ease-in-out .3s;
    }



    #app-load-content.aff{
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    #app-load-content.aff.anim > .cadre{
        transform: scale(1);
    }

    #app-load-content.aff.anim > .cadre > .icon{
        transform: scale(1);
        opacity: 1;
    } 

    #app-load-content.aff.anim > .cadre > .icon > svg{
        transform: scale(1);
        opacity: 1;
    } 


/*#endregion */

/*#region - Costume element ----------------------------------------*/

    /*#region - Center --------*/
        .center{
            display: flex;
            justify-content: center;
            align-items: center;
        }

    /*#endregion ----------------*/

    /*#region - Boutton -------*/
        
        .cus-btn{
            width: 100%;
            height: 40px;

            background: var(--pri);
            border-radius: 30px;

            position: relative;

            display: flex;
            justify-content: center;
            align-items: center;

            overflow: hidden;
            transition: transform .3s ease-in-out;
        }
            .cus-btn > span{
                color: #fff;
                display: block;

                /* font-family: 'bold'; */

                transition: transform .3s ease-in-out;
            }

        .cus-btn:active{
            transform: scale(0.9);
        }


    /*#endregion --------------*/ 

    /*#region - Checkbox */
        .cus-checkbox{
            width: auto;
            height: auto;

            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
        .cus-checkbox > .box{
            width: 20px;
            height: 20px;

            border: 1px solid #000;

            display: flex;
            justify-content: center;
            align-items: center;

            transition: border .2s ease-in-out;
        }

        .cus-checkbox > .text{
            font-size: 1rem;
            color: ;
            margin-left: 10px;
        }

        /* actived */
            .cus-checkbox > .box::before{
                content: "";
                
                width: 26px;
                height: 26px;

                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ctitle%3Echeckbox_fill%3C/title%3E%3Cg id='checkbox_fill' fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.594 23.258l-.012.002-.071.035-.02.004-.014-.004-.071-.036c-.01-.003-.019 0-.024.006l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.016-.018m.264-.113-.014.002-.184.093-.01.01-.003.011.018.43.005.012.008.008.201.092c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.003-.011.018-.43-.003-.012-.01-.01z'/%3E%3Cpath fill='%23b8860b' d='M5 3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm11.95 6.796a1 1 0 0 0-1.414-1.415l-4.95 4.95-2.121-2.121a1 1 0 1 0-1.415 1.414l2.758 2.758a1.1 1.1 0 0 0 1.556 0z'/%3E%3C/g%3E%3C/svg%3E");

                display: block;
                position: absolute;

                transform: scale(0);
                transition: transform .2s ease-in-out;
            }
            .cus-checkbox[data-actived="true"] > .box::before{
                transform: scale(1);
            }
            .cus-checkbox[data-actived="true"] > .box{
                border-color: transparent;
            }

    /*#endregion*/

    /*#region - Input ---------*/
        .cus-input{
            width: 100%;
            height: 50px;

            display: flex;
            justify-content: flex-start;
            align-items: center;

            border: 1px solid rgba(0 0 0/.2);
            border-radius: 5px;

            position: relative;
            padding: 0 10px;

            overflow: hidden;
            margin-bottom: 20px;
        }

        /* icon */
            .cus-input > .icon{
                width: 30px;
                height: 40px;

                order: 1;
            }

                .cus-input > .icon > svg{
                    color: gray;

                    width: 18px;
                    height: 18px;

                    transition: color .3s ease-in-out;
                }


        /* icon - voir */
            .voir-motdepasse{
                background: var(--pri);
            }

            .voir-motdepasse > svg{
                opacity: 0;

                width: 18px;
                height: 18px;

                position: absolute;
                right: 10px;
                margin-top: 5px;

                color: gray;

                transition: opacity .3s ease-in-out;
            }

        
        /* champs - select */
            .cus-input > input,
            .cus-input > select{
                order: 2; 

                opacity: hidden;

                width: 100%;
                height: calc(100% - 15px);

                background: transparent;
                padding-left: 5px;
                
                font-size: 17px;
                color: #000;

                border: unset !important;
                outline: unset !important;

                margin-top: 10px;
            }

            .cus-input > select{
                padding-left: 0;
            }

            .cus-input > input[type="password"]{
                font-size: 17px !important;
                letter-spacing: -3px !important;
            }

            /* .cus-input > input[type="password" i]{
                -webkit-text-security: square !important;
            } */

        /* label */
            .cus-input > .label{
                pointer-events: none;

                width: auto;
                height: auto;

                position: absolute;
                left: 35px;
                margin-left: 5px;

                display: block;

                font-size: 14px;
                color: gray;

                background: var(--fond);
                transition: transform .3s ease-in-out, font .3s ease-in-out;
            }


        /*---> animation  */
            .cus-input[focus],
            .cus-input[persistant] {
                border-color:  var(--pri);
            }

            .cus-input[focus] > .icon > svg,
            .cus-input[persistant] > .icon > svg {
                color: var(--pri);
            }

            .cus-input[focus] .label,
            .cus-input input:empty:focus + .icon + .label,
            .cus-input[persistant] .label{
                transform: translateY(-90%);
                font-size: 10px;
            }

            .cus-input[focus] .voir-motdepasse > svg,
            .cus-input[persistant] .voir-motdepasse > svg{
                opacity: 1;
            }



    /*#endregion --------------*/

    /*#region - Textarea -------*/
        .cus-textarea{
            width: 100%;
            min-height: 200px;
            max-height: 300px;

            border-radius: 5px;
            border: 1px solid silver;

            padding: 10px 15px;
            padding-top: 20px;

            font-size: 17px !important;
            outline: unset !important;
            overflow: hidden;
        }

        .cus-textarea::before{
            content: 'Decris toi en quelque ligne ainsi que le type de relation que tu souhaite avoir sur ce site...';

            display: block;

            pointer-events: none !important;
            width: 90%;

            position: absolute;
            left: 15px;
            top: 10px;
            z-index: 2;

            font-size: 14px;
            line-height: 20px;
            color: gray;

            transition: .3s ease-in-out;
        }

        .cus-textarea:focus::before,
        .cus-textarea:not(:empty)::before{
            content: 'Description';

            font-size: 10px;
            color: var(--pri);
            transform: translateY(-30%);
        }

        .cus-textarea:focus,
        .cus-textarea:not(:empty){
            border-color: var(--pri);
        }


    /*#endregion---------------*/ 
    
    /*#region - Loader interne --*/
        .app-loader-interne{
            width: 100%;
            height: 100%;

            position: absolute;
            left: 0;
            top: 0;
            z-index: 2;

            background: var(--pri);

            display: flex;
            justify-content: center;
            align-items: center;
        }

            .app-loader-interne > .content {
                display: inline-block;
                position: relative;
                width: 80px;
                height: 80px;

                transform: scale(0.3);
            }
            .app-loader-interne > .content div {
                display: inline-block;
                position: absolute;
                left: 8px;
                width: 16px;

                background: #fff;
                animation: app-loader-interne 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
            }

            .app-loader-interne[colorer] > .content div{
                background: var(--pri);
            }

            .app-loader-interne > .content div:nth-child(1) {
                left: 8px;
                animation-delay: -0.24s;
            }
            .app-loader-interne > .content div:nth-child(2) {
                left: 32px;
                animation-delay: -0.12s;
            }
            .app-loader-interne > .content div:nth-child(3) {
                left: 56px;
                animation-delay: 0;
            }
            @keyframes app-loader-interne {
                0% {
                top: 8px;
                height: 64px;
                }
                50%, 100% {
                top: 24px;
                height: 32px;
                }
            }

    /*#endregion ----------------------------*/

/*#endregion*/

/*#region - Notification Modal ------------*/
    
    .notif-modal{
        display: none;
        pointer-events: none;
        visibility: hidden;

        width: 100%;
        height: 100%;

        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;

        background: rgba(0 0 0 /.7);
        padding: 0 40px;

        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
        .notif-modal > .cadre{
            width: 100%;
            height: auto;

            position: relative;
            z-index: 1;

            transform: scale(0);
            transition: transform .4s cubic-bezier(.96,-0.06,.22,1.3);

            border-radius: 20px;
            background: var(--fond);
            padding: 20px 20px;
        }

            .notif-modal.aff{
                display: flex;
                pointer-events: fill;
                visibility: visible;
            }

            .notif-modal.aff.anim > .cadre{
                transform: scale(1);
            }

        /* icon */
            .notif-modal .icon{
                margin-bottom: 5px;
            }

                .notif-modal .icon > svg{
                    width: 20px;
                    height: 20px;

                    color: gray;
                }

        /* text */
            .notif-modal .text{

                font-size: 15px;
                color: var(--font);
                text-align: center;
            }
                .notif-modal .text > span{
                    color: var(--pri);
                    font-size: inherit;  
                }

        /* action */
            .notif-modal .action{
                width: 100%;

                display: flex;
                justify-content: center;
                align-items: center;

                margin-top: 20px;
            }
            
                .notif-modal-btn{
                    position: relative;

                    width: auto;
                    height: 30px;

                    transition: transform .3s ease-in-out;
                    padding: 0 15px;
                }
                .notif-modal-btn:active{ transform: scale(0.9); }


        /* configuration */
            .notif-modal:not(.confirm) .notif-modal-btn[annuler]{
                background: var(--pri);
                border-radius: 30px;
                padding: 0 15px;
            }
            .notif-modal:not(.confirm) .notif-modal-btn[annuler]::after{ 
                content: 'Ok';
                color: #fff; 
            }
            .notif-modal:not(.confirm) .notif-modal-btn[valider]{
                display: none;
            }


            .notif-modal.confirm .notif-modal-btn[annuler]{
                background: transparent;
            }
            .notif-modal.confirm .notif-modal-btn[annuler]::after{ 
                content: 'Annuler';
                color: var(--pri); 
            }

            .notif-modal.confirm .notif-modal-btn[valider]{ 
                background: var(--pri);
                border-radius: 30px;
                margin-left: 10px;

                overflow: hidden;
            }
            .notif-modal.confirm .notif-modal-btn[valider]::after{ 
                content: 'Confirmer';
                color: #fff; 
            }


        /*#region - Adaptation */

            @media screen and (min-width: 450px){
                .notif-modal > .cadre{
                    width: 400px;
                }

            }


        /*#endregion */

         


            /* .notif-modal:not(.confirm) .notif-modal-btn[annuler]{ padding: 0 25px; }
            .notif-modal:not(.confirm) .notif-modal-btn[annuler]::after{ content: 'Ok'; }
            .notif-modal:not(.confirm) .notif-modal-btn[valider]{ 
                display: none !important;
                visibility: hidden;
                pointer-events: none !important;
            }

            .notif-modal:is(.confirm) .notif-modal-btn[valider]::after{ content: 'Confirmer'; }
            .notif-modal:is(.confirm) .notif-modal-btn[annuler]::after{ content: 'Annuler'; } */









/*#endregion ------------------------------*/

/*#region - Modal CU ----------------------*/
    #app-cu{
        display: none;
        visibility: hidden;
        pointer-event: none;
        
        width: 100%;
        height: 100%;
        
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        
        background: #fff;
        
        transform: translateY(110%);
        transition: transform .2s ease-in-out;
    }
    
    #app-cu.aff{
        display: block;
        visibility: visible;
        pointer-event: fill;
    }
    
     #app-cu.aff.anim{
        transform: translateY(0%);
    }
    
    #app-cu > .cadre{
        width: 100%;
        height: 100%;
        
        position: relative;
    }
    
    /*#region - Close */
        .cu-tab{
            width: auto;
            height: 40px;
            
            display: inline-flex;
            justify-content: center;
            align-items: center;
            
            border-radius: 15px;
            background: rgba(255 255 255/100%);
            border: 1px solid rgba(0 0 0/10%);
            box-shadow: 0 0 10px rgba(0 0 0/20%);
            
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 2;
            
            padding: 5px;
            padding-right: 15px;
        }
        
        .cu-tab > span{
            display: block;
            
            font-size: 17px;
            color: #000;
        }
    
        .cu-tab > svg{
            width: 30px;
            height: 30px;
            
            color: gray;
        }
        
    /*#endregion */
    
    /*#region - Content */
        #app-cu .content{
            width: 100%;
            height: 100%;
            
            position: relative;
            padding: 20px 30px;
            padding-top: calc(40px + 20px + 20px);
            
            overflow-y: scroll; 
            overflow-x: hidden; 
        }
        
        .cu-section{
            width: 100%;
            height: auto;
            
            margin-bottom: 20px;
        }
            
            #app-cu > span,
            .cu-section > span{
                display: block;
            }
            
            .cu-title,
            .cu-title > span{
                font-size: 1.7rem;
                font-family: 'bold';
                
                color: var(--pri);
            }
            
            
            .cu-text{
                font-size: 1.1rem;
                text-align: justify;
                margin-top: 5px;
            }
            
        
        .cu-section:not(:nth-child(1)) > .cu-title{
            color: #000;
            font-size: 1.2rem;
        }
        
        .cu-section:is(:nth-child(18)),
        .cu-section:is(:nth-child(1)){
            margin-bottom: 30px;
        }
        
        .cu-section:is(:nth-child(1)) > .cu-title > span{
            font-family: 'ink free';
            font-size: 2rem;
            font-weight: 800;
        }
    
    /*#endregion*/


/*#endregion*/