@import url('https://fonts.googleapis.com/css2?family=Poiret+One&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@500&display=swap');

body{
    background: url('../image/groupe-feuilles-multiples.jpg') no-repeat ;
    background-size: cover;
}



@media only screen and (max-width: 400px) {
    #container-tarifs{
        display:flex;
        flex-direction: column;
        
        
    }
    
    .tarifs-sophro{
        
        margin:0;
        margin-left: 5%;
        margin-top: 5%;
        padding:0;
        border-radius:20px;
        background-color: #B6DE83;
        width: 80%;
        height:70%;
    }
    
    .tarifs-feuilles{
        
        display:none;
        
    }
    
    
    
    .tarifs-hypnose{
        margin:0;
        margin-left: 5%;
        margin-top: 5%;
        padding:0;
        border-radius:20px;
        background-color: #84D0D3;
        width: 80%;
        height:70%;
    }
    
    .tarifs-sophro-box{
        font-family: 'Poiret One',cursive;
        font-size:medium;
        font-weight: bold;
        text-align: center;
        padding:30px;
    }
    
    .tarifs-hypnose-box{
        font-family: 'Poiret One',cursive;
        font-size: small;
        text-align: center;
        padding:30px;
        font-weight: bold;
    }
}

@media only screen and (min-width:401px) and (max-width: 768.98px){
    #container-tarifs{
        display:flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .tarifs-sophro{
        
        margin:0;
        margin-left: 5%;
        margin-top: 5%;
        padding:0;
        border-radius:20px;
        background-color: #B6DE83;
        width: 80%;
        height:70%;
    }
    
    .tarifs-feuilles{
        
        display:none;
        
    }
    
    
    
    .tarifs-hypnose{
        margin:0;
        margin-left: 5%;
        margin-top: 5%;
        padding:0;
        border-radius:20px;
        background-color: #84D0D3;
        width: 80%;
        height:100%;
    }
    
    .tarifs-sophro-box{
        font-family: 'Poiret One',cursive;
        font-size:medium;
        font-weight: bold;
        text-align: center;
        padding:30px;
    }
    
    .tarifs-hypnose-box{
        font-family: 'Poiret One',cursive;
        font-size: medium;
        text-align: center;
        padding:30px;
        font-weight: bold;
    }
}

@media only screen and (min-width: 769px) and (max-width:1999px){

    #container-tarifs{
        display:flex;
    }
    
    .tarifs-sophro{
        
        margin:0;
        margin-left: 5%;
        margin-top: 5%;
        padding:0;
        border-radius:20px;
        background-color: #B6DE83;
        width: 33%;
        height:70%;
    }
    
    .tarifs-feuilles{
        width:33%;
        display:flex;
        align-items:center;
        justify-content: center;
        margin-top: 10%;
        height:100%;
    }
    
    .tarifs-feuilles img{
        width:100%;
        height: auto;
    }
    
    .tarifs-hypnose{
        margin:0;
        margin-right: 5%;
        margin-top: 5%;
        border-radius:20px;
        background-color: #84D0D3;
        width: 33%;
        
    }
    
    .tarifs-sophro-box{
        font-family: 'Poiret One',cursive;
        font-size:medium;
        font-weight: bold;
        text-align: center;
        padding:30px;
    }
    
    .tarifs-hypnose-box{
        font-family: 'Poiret One',cursive;
        font-size: large;
        text-align: center;
        padding:30px;
        font-weight: bold;
    }
}

@media only screen and (min-width:2000px ){

    #container-tarifs{
        display:flex;
    }
    
    .tarifs-sophro{
        
        margin:0;
        margin-left: 5%;
        margin-top: 5%;
        padding:0;
        border-radius:20px;
        background-color: #B6DE83;
        width: 33%;
        height:70%;
    }
    
    .tarifs-feuilles{
        width:33%;
        display:flex;
        align-items:center;
        justify-content: center;
        margin-top: 10%;
        height:100%;
    }
    
    .tarifs-feuilles img{
        width:100%;
        height: auto;
    }
    
    .tarifs-hypnose{
        margin:0;
        margin-right: 5%;
        margin-top: 5%;
        border-radius:20px;
        background-color: #84D0D3;
        width: 33%;
        
    }
    
    .tarifs-sophro-box{
        font-family: 'Poiret One',cursive;
        font-size:xx-large;
        font-weight: bold;
        text-align: center;
        padding:30px;
    }
    
    .tarifs-hypnose-box{
        font-family: 'Poiret One',cursive;
        font-size: xx-large;
        text-align: center;
        padding:30px;
        font-weight: bold;
    }
}