@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

*{ 
    box-sizing: border-box;
    font-family: 'Poppins' , 'sans-serif' ;
}

.modal_conteiner{
    z-index: 11000;
    position: fixed; 
    bottom: 0rem; right: 0%;

    height: 100vh; width: 100vw; 
    padding: 0%; border: none; margin: 0%;

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

    background-color: var(--opacity2); 
    opacity: 0;
    /* opacity: 1; */
    pointer-events: none; 
    
}
.modal_conteiner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.572);
    /* background-color: rgba(240, 248, 255, 0.33); */
    backdrop-filter: blur(5px);
    /* filter: blur(50px);  */

  }
/** Perte de JS*/
.show{ 
    opacity: 1; 
    pointer-events: initial;
}
/*-----------------------------*/


.modal{
    height: 34rem; width: auto; max-width: 100%;
    padding: 0%; border: none; margin: 0%;
    aspect-ratio: 2 / 2.8;
    
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */

    display: flex; flex-flow: column nowrap;
    /* justify-content: space-around; */
    align-items: center; align-content: center;

    background-color: var( --white );
    border-radius: 4px ;

}


.modal_row_img{
    position: relative;
    height: 60%; width: 100%;
    padding: 0rem ; border: none; 
    margin: 0rem ;

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

    /* background-color: var(  --grayLight ); */
    /* background-color: var( --greenDarck ); */
    /* background-color: var( --greenDarck2 ); */
    /* background-color: var( --greenLight2 ); */
    /* background-color: var( --greenLight ); */
    background-color: var( --green );
    /* background-color: var( --white ); */
    /* background-color: transparent; */
    border-radius: 7px 7px 0px 0px;
}
    .modal_img{
        display: block;
        height: 10.5rem; width: 10.5rem;
        padding: 0rem ; border: none; 
        margin: 4.8rem 0rem 0rem 0rem;

        /* filter: drop-shadow(5px 5px 3px rgba(0, 0, 0, 0.5)); */
        /* filter: invert(100%); */
        /* filter: drop-shadow( -27px -5px 3px rgba(0, 0, 0, 0.3)) ; */
        /* border: solid black 2px; */
        
        background-color: transparent;
    }

    .modal_titule{
        height: 2.8rem; width: 100%;
        padding: 0rem; border: none; 
        margin: 0.5rem 0rem 0rem 0rem;
        /* border: solid black 2px; */

        display: flex;flex-flow: column;
        justify-content: flex-end;
        align-items: center; align-content: center;
        
        /* color: var( --black); */
        /* color: var( --color-opacity ) ; */
        color: var( --white );
        letter-spacing: 3.3px;
        font-size: 2.2rem;
        /* filter: drop-shadow( -7px 5px 3px rgba(0, 0, 0, 0.3)) ; */


    }

.modal_row_bottom{
    position: relative;
    height: 40%; width: 100%;
    padding: 0rem 0rem ; border: none; 
    margin: 0rem 0rem 0rem 0rem;

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

    background-color: var( --greenLight );
    background-color: var(--green);
    /* background-color: var( --greenDarck2 ); */
    /* background-color: transparent; */

    border-radius: 0px 0px 7px 7px ;

}
    .modal_text{
        padding: 0rem 4rem 0rem 4rem; border: none; 
        margin: 0rem ; 

        font-size: 17px;
        line-height: 1.8rem;
        letter-spacing: 0.5px;

        color: var(--white);
        /* filter: drop-shadow( 0px 40px 5px rgba(0, 0, 0, 0.3)) ; */

    }
    .modal_btn_delete{
        position: absolute ; bottom: 0%; left: 0%;
        overflow: hidden;
        box-sizing: border-box;

        height: 5rem; width: 100%; 
        padding: 0%; border: none; 
        margin: 0rem 0rem 0rem 0rem;
      
        display: flex; flex-direction: column;
        justify-content: center; 
        align-content: center; align-items: center;
    
        font-size: 18px;
        letter-spacing: 2.8px;
        /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
        border-radius: 0px 0px 7px 7px ;
        /* background-color: var( --opacity1 ); */
        background-color: var( --opacity2 );

        color: var( --white ); 


    }
    .modal_btn_delete:active {
        transform: scale(0.8);
    }
    .modal_btn_delete:hover {
        opacity: 0.7;
    }
    /* .modal_btn_delete_img{
        height: 100%; width: 100%;
        padding: 0rem; border: none; margin: 0%;
        
    } */

    /*?----------------------- R E S P O N S I V E ----------------------------------*/

@media (max-width:920px) and ( min-height: 1000px) {
    .modal{
        margin: 0% 0rem 30% 0rem;
   
    } 
      
}
@media (max-width:920px) and ( max-height: 590px) {
    .modal{
        height: 26rem; width: auto;
        padding: 0%;  margin: 0% ;
        aspect-ratio: 2 / 2;
   
    } 
    .modal_img{
        display: block;
        height: 10rem; width: 10rem;
        padding: 0rem; 
        margin: 2.6rem 0rem 0rem 0rem;
        

    }
    .modal_titule{
        height: 2.5rem; 
        padding: 0rem; border: none; 
        margin: 0.5rem 0rem 0rem 0rem;

        letter-spacing: 3.3px;
        font-size: 2rem;
    }

    .modal_text{
        padding: 0.5rem 3rem 0rem 3rem; 

        font-size: 15px;
        line-height: 1.6rem;
        letter-spacing: 0.5px;

    }
    .modal_btn_delete{
        height: 4.8rem;
    
        font-size: 18px;
        letter-spacing: 2.8px;
        box-shadow: none;


    }
      
}


@media (max-width: 500px) and ( min-height: 635px) {
       
.modal{
    height: 30rem; width: auto;
    padding: 0%;  margin: 0% 0rem 20% 0rem;
    aspect-ratio: 2 / 2.8;

}

.modal_row_img{
    position: relative;
    height: 60%;
    padding: 0rem; 
    margin: 0rem;

    border-radius: 5px 5px 0px 0px;
}
    .modal_img{
        height: 9.5rem; width: 9.5rem;
        padding: 0rem; 
        margin: 4.8rem 0rem 0rem 0rem;

    }

    .modal_titule{
        height: 3rem; 
        padding: 0rem; margin: 0rem;

        letter-spacing: 3.3px;
        font-size: 2rem;
        
    }

.modal_row_bottom{
    position: relative;
    height: 40%;
    padding: 0rem ; margin: 0rem ;

    border-radius: 0px 0px 5px 5px ;
}
    .modal_text{
        padding: 0.6rem 3rem 0rem 3rem; 
        margin: 0rem ; 

        font-size: 14px;
        line-height: 1.4rem;
        letter-spacing: 0.5px;
    }
    .modal_btn_delete{
        position: absolute ; bottom: 0%; left: 0%;
        height: 4.4rem; 
        padding: 0%; margin: 0rem;
    
        font-size: 16px;
        letter-spacing: 2.8px;
        border-radius: 0px 0px 5px 5px ;
    }
 
}
@media (max-width: 500px) and ( max-height: 635px) {
    .modal{
        height: 26rem; width: auto; max-width: 90%;
        padding: 0%;  margin: 0% ;
        aspect-ratio: 2 / 2;
   
    } 
    .modal_img{
        height: 9rem; width: 9rem;
        padding: 0rem; 
        margin: 3.2rem 0rem -0.5rem 0rem;

    }

    .modal_titule{
        height: 3rem; 
        padding: 0rem; margin: 0rem;

        letter-spacing: 3.3px;
        font-size: 2rem;
        
    }
      
}

@media (max-width:370px) {
       
    .modal{
        height: 25rem; width: 80%;
        padding: 0%;  margin: 0%;
        aspect-ratio: none;
    
    }
    
    .modal_row_img{
        position: relative;
        padding: 0rem; margin: 0rem;

    }
        .modal_img{
            height: 8rem; width: 8rem;
            padding: 0rem; 
            margin: 3.8rem 0rem 0rem 0rem;
    
        }
    
        .modal_titule{
            height: 3rem; 
            padding: 0rem; margin: -0.5rem 0rem 0rem 0rem;
    
            letter-spacing: 3.3px;
            font-size: 1.6rem;
            
        }
    
    .modal_row_bottom{
        position: relative;
        padding: 0rem ; margin: 0rem ;


    }
        .modal_text{
            padding: 0.5rem 1.5rem 0rem 1.5rem; 
            margin: 0rem ; 
    
            font-size: 13px;
            line-height: 1.3rem;
            letter-spacing: 0.5px;
        }
        .modal_btn_delete{
            position: absolute ; bottom: 0%; left: 0%;
            height: 3.5rem; width: 100%;
            padding: 0%; margin: 0rem;
            
            font-size: 14px;
            letter-spacing: 1x;

        }
     
    }