#page-merci{
    margin:0;
    padding:0;
    min-height:100dvh;
    background:#efefef;
    font-family: 'Helvetica Neue', sans-serif;
}

#merci-page{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:60px 20px;
    box-sizing:border-box;
}

#merci-circle{
    width:min(900px, 90vw);
    aspect-ratio:1 / 1;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background: radial-gradient(circle at center, #ffd400 0%, #f28a2e 55%, #ef3131 100%);
    animation: merciGradient 8s ease-in-out infinite;
    position:relative;
}

#merci-content{
    width:72%;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

#merci-title{
    font-size:clamp(4rem, 8vw, 7rem);
    line-height:1;
    margin:0 0 30px 0;
    font-weight:900;
    animation: merciBounce 1.3s ease-in-out infinite;
    transform-origin:center;
}

#merci-text{
    font-size:clamp(1rem, 1.8vw, 1.5rem);
    line-height:1.35;
    font-weight:700;
    margin:0 0 40px 0;
}

#merci-recap{
    width:100%;
    text-align:left;
}

#merci-recap-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
    font-weight:800;
    font-size:1.1rem;
}

.merci-line{
    flex:1;
    height:3px;
    background:#000;
}

.merci-item{
    display:grid;
    grid-template-columns:80px 1fr auto;
    gap:18px;
    align-items:center;
    margin-bottom:24px;
}

.merci-thumb{
    width:80px;
    height:80px;
    background:#000;
}

.merci-item-infos{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.merci-item-infos strong{
    font-size:1.15rem;
}

.merci-item-infos span{
    font-size:1rem;
}

.merci-price{
    font-weight:800;
    font-size:1.2rem;
}

#merci-total{
    display:flex;
    justify-content:flex-end;
    margin-top:10px;
    font-size:2rem;
    font-weight:900;
}

#merci-home-btn{
    margin-top:36px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:18px 42px;
    border-radius:999px;
    background:#ec008c;
    color:#fff;
    text-decoration:none;
    font-size:1.1rem;
    font-weight:800;
    transition:transform .2s ease;
}

#merci-home-btn:hover{
    transform:scale(1.05);
}

@keyframes merciBounce{
    0%   { transform: scale(1) rotate(-2deg); }
    20%  { transform: scale(1.08) rotate(1deg); }
    40%  { transform: scale(0.96) rotate(-1deg); }
    60%  { transform: scale(1.1) rotate(2deg); }
    80%  { transform: scale(0.98) rotate(-1deg); }
    100% { transform: scale(1) rotate(-2deg); }
}

@keyframes merciGradient{
    0%{
        background: radial-gradient(circle at 50% 50%, #ffe100 0%, #f59b23 55%, #ef3131 100%);
    }
    33%{
        background: radial-gradient(circle at 45% 40%, #faff00 0%, #ff7a00 55%, #ff0055 100%);
    }
    66%{
        background: radial-gradient(circle at 60% 55%, #fff36b 0%, #ff8c42 50%, #ff2f2f 100%);
    }
    100%{
        background: radial-gradient(circle at 50% 50%, #ffe100 0%, #f59b23 55%, #ef3131 100%);
    }
}

@media (max-width: 900px){
    #merci-circle{
        width:min(95vw, 700px);
        aspect-ratio:auto;
        border-radius:40px;
        padding:50px 0;
    }

    #merci-content{
        width:84%;
    }

    .merci-item{
        grid-template-columns:60px 1fr;
    }

    .merci-price{
        grid-column:2;
        justify-self:end;
    }

    .merci-thumb{
        width:60px;
        height:60px;
    }

    #merci-total{
        font-size:1.5rem;
    }
}