.body-tarifs .upper-header{
    background-color:var(--bleu-clair);
}

.tarifs-header {
    background-image: url('../images/tarifs.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    align-items: center;
    height: 250px;
    display: flex;
}

.tarifs-rangee{
    display:flex;
    justify-content: space-between;
}

.page-tarifs{
    padding:20px 80px;

    & .column-flex{
        justify-content: space-around;
    }

    & .tarifs-header-section{
        & .wp-block-group__inner-container{
            display:flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            }
        & hr{
            margin:0;
        }
    }

     & .epilation-rangee{
        display: flex;
        gap: 30px;
    }

    & h1{
        font-family:'Didot';
        font-size:3.5rem;
        color:var(--black);
        line-height: 1.1;
        padding: 20px 0 15px 0;
    }


    & p{
        padding: 5px 0;
        font-family:'ProximaNovaRegular';
        color:var(--black);
        font-size:1rem;
        max-width:1000px;
    }

    & h2{
        background-color:var(--bleu-clair);
        font-family:'Didot';
        font-size:1.6rem;
        color:var(--black);
        line-height: 1;
        margin:20px 0 30px 0;
        padding:15px;
        width:100%;
        text-align: center;
    }

    & h3{
        font-family:'Didot';
        color:var(--black);
        font-size:1.6rem;
        line-height:1.2;
        margin: 20px 0 0 0;
    }

    & h4{
        font-family:'ProximaNovaSemiBold';
        color:var(--black);
        font-size:1.2rem;
        line-height:1.2;
        margin: 20px 0 0 0;

  }

    & hr{
        width:300px;
        border: 2px solid var(--bleu-clair);
        margin:5px 0 20px 0;
    }

    & ul{
        list-style: none;
    }

    & li{
        font-family:'ProximaNovaRegular';
        color:var(--black);
        font-size:1rem;      
    }
}

@media screen and (max-width:1280px){
    .column-flex-container{
        flex-basis: 40% !important;
    }
}

@media screen and (max-width:1024px){
    .page-tarifs{
        & .column-flex{
            flex-direction:column;
        }

        & h2{
            padding: 15px 0;
        }

        & .column-flex{
            align-items: center;
        }

        .column-flex-container{
        width:70%;
    }

      & h1{
        font-size:3rem;
    }

    & p{

        font-size:0.9rem;
    }

    & h3{
        font-size:1.8rem;
    }

    & h4{
        font-size:1.3rem;
    }

    }
}

@media screen and (max-width:768px){
    .page-tarifs{
        padding: 20px 50px;

        & .column-flex-container{
        width:100%;
    }

        & h1{
        font-size:2.5rem;
        }

        & h2{
        font-size:1.4rem;
        }

        & h3{
        font-size:1.6rem;
        }

        & h4{
            font-size:1.1rem;
        }

    }
}

@media screen and (max-width:480px){
    .page-tarifs{
        padding: 20px 30px;

        & h2{
        font-size:1.2rem;
        }

        & h3{
        font-size:1.4rem;
        }

        & h4{
            font-size:1rem;
        }

    }
}