/*.container {
    max-width: 960px;
}*/
  
.pricing-header {
    /*max-width: 700px;*/
    display: flex;
    flex-direction: column;
    align-items: center;
}

.carte {
    color: rgb(255, 255, 255);
    font-size: 2vh;
    border-radius: 20px;
    max-width: 400px;
    /*max-height: 1000px;*/
    padding: 20px;
    background: rgb(5,184,83);
    background: linear-gradient(0deg, rgba(5,184,83,1) 0%, rgba(122,193,66,1) 100%);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    margin-bottom: 5vh;
}

.carte-titre {
    color: black;
    font-size: 2em;
    font-weight: lighter;
}

.carte-prix {
    font-size: 3em;
    font-weight: 150;
}

.btn-prix {
    color: black;
    font-size: 20px;
    border-radius: 20px;
    width: 175px;
    background: #FAF7F0;
    padding: 10px 5px;
    text-decoration: none;
}

.card-pricing {
    width: 100% auto;
    border-radius: 5%;
    height: 55vh;
    /*-webkit-box-shadow: 11px 11px 10px 4px rgba(179,46,255,0.5); */
    box-shadow: 1px 1px 11px 5px rgba(0,0,0,0.51);
    background-color: white;
}

.recurrence {
    /*height: 5vh;*/
    display: flex;
    justify-content: center;
    margin-bottom: 4vh;
}

.btn-price {
    width: 20vh;
    padding: 10px;
    background-color: aliceblue;
    border-radius: 5px;
    text-align: center;
    border: none;
    font-size: 18px;
}

.btn-price:hover {
    background-color: rgb(206, 206, 206);
    color: black;
}

.title-card {
    text-align: center;
    padding: 10px;
    border-bottom: 1px solid black;
}

.main-title {
    font-size: 3vh;
}

.sub-title {
    font-style: italic;
}

.card-price {
    text-align: center;
}

.number-price {
    font-size: 5em;
}

.card-content {
    padding: 10px;
}


.fadeable {
    opacity: 0;
}
  
.fade-in {
    opacity: 1;
    transition: opacity 2s;
}

.content {
    height: 50vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#eee
}

.wrapper{
    /*height:100vh;*/
    display:flex;
    justify-content:center;
    align-items:center;
}
.checkmark__circle{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #7ac142;fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards
}
.checkmark-confirm{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 10% auto;
    box-shadow: inset 0px 0px 0px #7ac142;
    animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both
}
.checkmark__check{
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards
}

/* --- CROIX (erreur) --- */
.xmark__circle{
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke-miterlimit: 10;
    stroke: #e74c3c; /* rouge */
    fill: none;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.xmark-confirm{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: block;
    stroke-width: 2;
    stroke: #fff;
    stroke-miterlimit: 10;
    margin: 40px auto;
    box-shadow: inset 0 0 0 #e74c3c;
    animation: fill-x .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
}

/* Chaque trait de la croix : longueur ~28.3px pour un 16->36 */
.xmark__line{
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    transform-origin: 50% 50%;
    stroke-dasharray: 28.3;
    stroke-dashoffset: 28.3;
    animation: stroke 0.25s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
/* petit décalage pour dessiner la 2e diagonale juste après */
.xmark__line:nth-of-type(3){
    animation-delay: 0.95s;
}

@keyframes stroke{
    100%{
        stroke-dashoffset: 0
    }
}
@keyframes scale{
    0%, 100% {
        transform: none
    }50%{
             transform: scale3d(1.1, 1.1, 1)
         }
}
@keyframes fill{
    100%{
        box-shadow: inset 0px 0px 0px 30px #7ac142
    }
}

@keyframes fill-x{
    100% { box-shadow: inset 0 0 0 30px #e74c3c; }
}

#autoCount{
    margin: 0 5px;
}
.txt
{
    height: 60px;
    display: flex;;
    align-items: center;
}
.count{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}