body {
            font-family: 'Arial Rounded MT Bold', sans-serif;
            margin: 0;
            padding: 0;
        }
        
        * {
            max-width: 100%; 
            background: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ff6600' fill-opacity='0.05'%3E%3Ccircle cx='7' cy='7' r='3'/%3E%3C/g%3E%3C/svg%3E") repeat;
        }

        html, body {
            overflow-x: hidden;    
        }        
        main {
            display: flex;
            justify-content: center;
            margin-top: 20px;
        }
        
        body {
            font-family: 'Arial Rounded MT Bold', sans-serif;
            background: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            position: relative;
            overflow-x: hidden;
            }

    


        /* --- BLOC RÉCOMPENSES --- */
        .rewards-box {
            position: absolute;
            top: 95%;
            right: 8%;
            background: #fff;
            border-radius: 10px;
            padding: 10px;
            width: 300px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
            text-align: center;
            transform: translateY(-50%);
            z-index: 2;
        }

        .tabs {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
        }

        .tab {
            flex: 1;
            padding: 10px;
            font-size: 14px;
            background: #e6a86b;
            color: black;
            border: none;
            cursor: pointer;
            border-radius: 10px 10px 0 0;
            font-weight: bold;
        }

        .tab.active {
            background: white;
            border-bottom: 2px solid #e6a86b;
        }

        .reward-amount {
            font-size: 26px;
            font-weight: bold;
            color: black;
        }

        .currency {
            font-size: 14px;
            color: black;
        }

        .reward-text {
            font-size: 12px;
            color: gray;
            margin-top: 5px;
        }



@media (max-width: 1034px) {
    .main-text {
        width: 100%;
        margin-top: 5%;
        align-self: center;
        font-size: 20px;
        left: 8%;
        font-weight: 400; 
    }

    .line4 {
            transform: translateX(80px); 
        }

    .contain
    {
        margin-bottom: 7%;
        align-self: center;
        z-index: 5;

    }
    .card
    {
        flex-direction: column;
        align-self: center;
        width: 80%;
    }

    .main-background
    {
        max-width: 100%;
        margin: 0% 1%;
        width: 100%;
        
    }

    .rewards-box {
    width: 70%;
    padding: 2px;
    margin: auto; 
    margin-right: 7%;
    background-color: #fff;
    top: 100%;
}
.main-text, .rewards-box {
    max-width: 100%;
    overflow: hidden;
}

    
    body
    {
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: hidden;
        flex-direction: column;
        margin: 0;
        padding: 0;
    }
    .logo
    {
        width: 60%;
    }
    header
    {
        width: 100%;
    }

    .card img{
        width: 100%;
    }
    a
    {
        width: 100%;
        
    }

}

.main-background::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.2); 
    }