/* tarifs */
#page.pageRates .h2 {margin-bottom: var(--marginM); text-align: center;}
.rate-list {display: flex; flex-wrap: wrap; margin: 0 -12.5px;}
.rate-list > li {background: var(--light); width: calc(33.33% - var(--marginS)); margin: calc(var(--marginS) / 2); text-align: center;display: flex; flex-direction: column; justify-content: space-between;}
.rate-list > li:hover {background: var(--light);}
.rate-list > li > div {padding: var(--marginM) var(--marginS); }
.rate-list h3 {color: var(--primary); font-size: var(--textL); font-weight: 600; margin-bottom: 7px;}
.rate-list .price {color: var(--primary); font-size: var(--textXL); font-weight: 600; z-index: 2; pointer-events: none; transition: .3s ease-in-out; padding-top: 0;}
.rate-list .stripe-link {font-size: var(--textM); color: var(--primary); font-weight: 600; padding: var(--marginS) var(--marginM); display: block; border-top: 1px solid var(--secondary);transition: ease-in-out .3s; width: 100%;}
.rate-list .stripe-link:hover {background: var(--secondary);}
.rate-list del {color: var(--textColorLight); font-weight: 700; font-size: var(--textL); opacity: .3}
.discount {pointer-events: auto!important; cursor: initial;}
.discount:after {content: '* Prix de lancement'; opacity: 0; font-family: Gilroy, sans-serif; z-index: 1; font-size: 12px; padding: 10px; background: var(--background); border-radius: 10px; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); box-shadow: 5px 5px 15px 0px rgba(255,54,68,0.1); transition: .3s ease-in-out;}
.discount:hover:after {opacity: 1;}


/* media */
@media screen and (max-width:1084px) {
    .rate-list > li {width: calc(50% - var(--marginS));}
}
@media screen and (max-width:600px){
    .rate-list > li > div,
    .rate-list .stripe-link {padding: var(--marginS);}
}
@media screen and (max-width:500px){
    .rate-list > li:not(.last),
    .rate-list li.last li {flex-direction: column; justify-content: center; align-items: center;}
    .rate-list li.last ul {margin-top: 0;}
}
@media screen and (max-width:450px){
    .rate-list > li {width: calc(100% - var(--marginS));}
}