/* =============Pricing page============ */
#pricing_container{
    width: 100%;
    min-height: 120vh;
    background-color: var(--background-body);
    font-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

/* intitulé de chaque grid, particulier, entreprise, premium */
.pricing_title{
    width: 100%;
    background-color:transparent;
    height: 40px;
    padding-top: 12px;
    border-radius: 5px;
    font-size: 22px;
    transition: .5s;
    border: var(--background-red-border);
}
.pricing_title:hover, .table_name:hover{
	background-color: var(--background-hover-title);
    color: var(--police-white-color);
    transition: .5s;
}

/* id du texte a placer en dessous de la phrase d'accroche, a voir si on 
garde ou non */
#presentation{
    color: var(--police-main-color);
    width: 60%;
    margin: auto;
    line-height: 20px;
    padding-bottom: 50px;
    /* background-color: rgb(8, 7, 7); */
}

/* ==== effet et style du boutton pour changer les grid====== */
#pricing_button_block{
    width: 235px;
    margin: auto;
    margin-bottom: 35px;
    margin-top: 20px;
    position: relative;
    box-shadow: 0 0 12px 9px rgba(55, 55, 55, 1);
    border-radius: 12px;
}
.pricing_button{
    font-size: 15px;
    padding-top: 12px;
    padding-bottom: 12px;
    cursor: pointer;
    background: transparent;
    border: 0;
    outline: none;
    position: relative;
    color:var(--police-white-color);
    font-weight: 600;
}

#pricing_button{
    top: 0;
    left: 0;
    position: absolute;
    width: 115px;
    height: 100%;
    background: linear-gradient(to right, rgb(179, 26, 26), rgb(133, 22, 20));
    border-radius: 12px;
    transition: .5s;
}
#personal_switch{
    padding-left: 15px;
    width: 100px;
}
#business_switch{
    padding-left: 30px;
    width: 110px;
}

.price_row,
.price_row_entreprise {
    width: 90%;
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-gap: 25px;
}

.price_row {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.price_row_entreprise {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    display: none; 
}

/* div ou il y a le nom du service ainsi que le prix proposé */
.pricing_column {
    background-color: var(--background-header);
    padding: 10% 15%; 
    border-radius: 10px;
    color: var(--police-main-color);
    text-align: center;
    transition: box-shadow .3s;
    border: 1px solid rgba(33, 33, 33, 1);
}

/* permet de mettre le prix en couleur différente */
h3{
    color: rgba(148, 49, 49, 1);
}

/* permet de pas avoir le mois avec la meme couleur que le prix */
h3 span{
    color: var(--police-main-color);
}

/* taille de police du h3 avec le prix/mois */
.pricing_column h3{
    font-size: 44px;
    margin: 20px 0 40px;
    font-weight: 500;
}

/* permet d'avoir le "mois" en plus petit que le prix */
.pricing_column h3 span{
    font-size: 16px;
}

/* ====style de la liste de chaque grid==== */
.pricing_column ul{
    text-align: center;
    color: var(--police-main-color);
    list-style: none;
    padding: 0;
}
.pricing_column ul li, .price_col_global ul li{
    margin: 15px 0;
}
.price_col_global ul li::before, .pricing_column ul li::before{
    content: '\2022';
    color: rgba(227, 48, 88, 1);
    font-weight: bold;
    margin-right: 8px;
}

/* bow shadow quand on est sur la div */
.price_col_global:hover, .pricing_column:hover{
    box-shadow: 0 0 11px rgba(255, 251, 251, 0.2); 
}

/* boutton souscrire et les effets */
.pricing_column button{
    background: transparent;
    color: var(--police-main-color);
    font-size: 15px;
    border: var(--background-red-border);
    border-radius: 6px;
    transition: 0.5s;
    display: flex;
    justify-content: center;
    padding: 15px;
    width: 100%;
    margin-top: -125px;
}

.pricing_column button:hover{
    background-color: rgba(148, 49, 49, 1);
}

/* ==========grid global qui resume toute les fonctionnalités========= */

.price_col_global{
    max-width: 1200px;
    width: 90%;
    display: flex;
    height: auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
	background-color: var(--background-header);
    color: var(--police-main-color);
    border-radius: 5px;
    transition: box-shadow .5s;
    z-index: 2;
}

.price_col_global ul{
    text-align: center;
    margin: 20px 0 ;
    color: var(--police-main-color);
    list-style: none;
    min-height: 300px;
    width: 80%;
}


.price_col_global p{
    padding: 30px;
    font-size: 22px;
    border-radius: 5px;
    width: 80%;
    text-align: center;
    transition: .3s background-color ease-in;
}

/* reveal lors d'un scroll sur tel */
@media (max-width: 700px){
    .reveal{
        position: relative;
        transform: translateY(30px);
        opacity: 0;
        transition: 2s all ease;
    }
    .reveal.active{
        transform: translateY(0);
        opacity: 1;
    }
    .reveal2{
        position: relative;
        transform: translateY(30px);
        opacity: 0;
        transition: 3s all ease;
    }
    .reveal2.active{
        transform: translateY(0);
        opacity: 1;
    }
    .pricing_column button{
        margin-top: -110px;
    }
    .price_col_global{
        width: 95%;
    }
}

/* ==================tableau=========== */
.table_name{
    font-size: 30px;
    text-align: center;
    color: var(--police-main-color);
    margin-bottom: 40px;
    border: var(--background-red-border);
    background-color: transparent;
    transition: .5s background-color ease-in;
}

.pricing_table{
    width: 80%;
    border-collapse: collapse;
    columns: rgb(255, 255, 255);
    border-radius: 0px;
    margin: auto;
}
.table_container{
    margin-bottom: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pricing_table thead{
    background-color: rgba(148, 49, 49, 1);
}
.pricing_table .top_right{
    border-top-right-radius: 5px ;
}
.pricing_table .top_left{
    border-top-left-radius: 5px;
}

.pricing_table .pricing_td .ticks{
    height: 20px;
    width: 20px;
    -webkit-filter: var(--icon-invert-filter); /* Safari/Chrome */
    filter: var(--icon-invert-filter); 
}

.pricing_table .pricing_td .ticks2{
    height: 80%;
    width: 80%;
    -webkit-filter: var(--icon-invert-filter); /* Safari/Chrome */
    filter: var(--icon-invert-filter); 
}
.pricing_table .pricing_td{
    text-align: center;
}
.pricing_table thead tr{
    border-top-left-radius: 5px;
}
.pricing_table thead tr th{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.35px;
    color: var(--police-white-color);
    opacity: 1;
    padding: 12px;
    vertical-align: top;
}
.pricing_table tbody tr td{
    font-size: 16px;
    font-weight: normal;
    letter-spacing: 0.35px;
    color: var(--police-main-color);
    padding: 8px;
    border: 1px solid rgb(73, 72, 72);
}

.pricing_table tbody tr:hover{
    background-color: var(--hover-main-td);
}

@media (max-width: 766px) {
    .table_name{
        font-size: 3.8vw;
        padding: 10px;
    }
    .pricing_table, .pricing_table tbody, .pricing_table tr, .pricing_table td{
        width: 90%;
        margin: auto;
    }
    .pricing_table tr{
        margin-bottom: 15px;
        
    }
    .pricing_table .pricing_td .ticks{
        height: 15px;
        width: 15px;
    }
}

@media (max-width : 480px){
    .price_col_global p {
        padding: 20px;
        font-size: 4vw;
    }

    .pricing_table thead tr th{
        font-size: 3.2vw;
    }
    .pricing_table tbody tr td{
        font-size: 3.2vw;
    }

    .price_row {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .pricing_column {
        padding: 10% 10%;
    }
}