.nivstats-wrapper{
    max-width: 1020px;
    margin: 0 auto;
    font-family: 'texte', serif;
    font-size: 18px;
    line-height: 1.45;
    color: #4a2411;
}

.nivstats-header-card{
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.10) 28%, rgba(255,255,255,0) 45%),
        linear-gradient(145deg, #ecdcc0 0%, #e2ccaa 35%, #d2b184 68%, #be8c58 100%);
    border: 2px solid #8a5f39;
    border-radius: 26px;
    box-shadow:
        0 10px 26px rgba(0,0,0,0.18),
        inset 0 2px 0 rgba(255,255,255,0.45),
        inset 0 -8px 18px rgba(110,60,20,0.10);
    padding: 20px;
    margin: 0 auto 26px auto;
    max-width: 940px;
    position: relative;
    overflow: hidden;
}

.nivstats-header-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0) 45%),
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.20), transparent 28%);
    pointer-events: none;
}

.nivstats-header-layout{
    display: grid;
    grid-template-columns: minmax(260px, 1.15fr) minmax(0, 0.95fr);
    grid-template-areas:
        "hero minis"
        "menu menu";
    gap: 18px;
    align-items: start;
    position: relative;
    z-index: 1;
}

.nivstats-hero-panel{
    grid-area: hero;
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.28), transparent 35%),
        linear-gradient(180deg, #ead9bc 0%, #e2cca8 100%);
    border: 1px solid rgba(122,82,48,0.35);
    border-radius: 22px;
    box-shadow:
        inset 0 2px 0 rgba(255,255,255,0.35),
        inset 0 -8px 12px rgba(122,82,48,0.08),
        0 6px 14px rgba(0,0,0,0.08);
    padding: 16px 16px 14px 16px;
    text-align: center;
    min-height: 100%;
}

.nivstats-hero-panel h3{
    margin: 0 0 10px 0;
    font-size: 60px;
}

.nivstats-hero-image-wrap{
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    padding: 6px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

.nivstats-hero-image-wrap::before{
    display: none;
}

.nivstats-hero-image-wrap img{
    max-width: 100%;
    height: auto;
    max-height: 4000px;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.18));
}

.nivstats-gemmes{
    font-size: 23px;
    font-weight: bold;
    margin: 0;
}

.nivstats-menu-side{
    grid-area: menu;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    justify-content: stretch;
    align-items: stretch;
    margin-top: 4px;
}

.nivstats-tab-btn{
    width: 100%;
    min-height: 74px;
    border: 2px solid #6d4528;
    border-radius: 16px;
    background: linear-gradient(180deg, #b18357 0%, #8a5e35 58%, #754b28 100%);
    color: #fff7e7;
    padding: 16px 12px;
    font-family: 'texte', serif;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.15;
    cursor: pointer;
    box-shadow:
        0 6px 14px rgba(0,0,0,0.18),
        inset 0 2px 0 rgba(255,255,255,0.18),
        inset 0 -3px 0 rgba(70,35,12,0.18);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.nivstats-tab-btn:hover{
    transform: translateY(-1px);
    box-shadow:
        0 8px 18px rgba(0,0,0,0.22),
        inset 0 2px 0 rgba(255,255,255,0.18),
        inset 0 -3px 0 rgba(70,35,12,0.18);
    filter: brightness(1.03);
}

.nivstats-tab-btn.active{
    background: linear-gradient(180deg, #7c522e 0%, #5d391d 100%);
}

.nivstats-section{
    display: none;
    background: linear-gradient(180deg, #fff7e8 0%, #f4e2c1 100%);
    border: 2px solid #7a5230;
    border-radius: 22px;
    box-shadow: 0 8px 22px rgba(0,0,0,0.15), inset 0 2px 0 rgba(255,255,255,0.35);
    padding: 24px;
    margin-bottom: 20px;
}

.nivstats-section.active{
    display: block;
}

.nivstats-section h3{
    margin-top: 0;
    margin-bottom: 18px;
    font-size: 30px;
}

.nivstats-list{
    list-style: none;
    padding: 0;
    margin: 0;
}

.nivstats-list li{
    padding: 12px 16px;
    margin-bottom: 12px;
    background: rgba(255,255,255,0.45);
    border: 1px solid rgba(122,82,48,0.25);
    border-radius: 14px;
    font-size: 20px;
    box-shadow:
        0 5px 12px rgba(0,0,0,0.10),
        inset 0 2px 0 rgba(255,255,255,0.35),
        inset 0 -3px 8px rgba(90,40,10,0.08);
}

.nivstats-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: 18px;
}

.nivstats-chapitre-card{
    background: linear-gradient(180deg, #f8ecd5 0%, #ead0a6 100%);
    border: 2px solid #8b6340;
    border-radius: 18px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.14), inset 0 2px 0 rgba(255,255,255,0.3);
    padding: 18px;
}

.nivstats-chapitre-card h4{
    margin: 0 0 12px 0;
    font-size: 24px;
    color: #4a2411;
}

.nivstats-chapitre-ligne{
    font-size: 20px;
    margin-bottom: 12px;
}

.nivstats-progress-wrap{
    height: 24px;
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, #6d4d38 0%, #8b6b4e 100%);
    box-shadow: inset 0 3px 6px rgba(0,0,0,0.22), 0 2px 4px rgba(255,255,255,0.18);
    position: relative;
    margin-bottom: 10px;
}

.nivstats-progress-fill{
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(180deg, #f6d37b 0%, #d89e34 52%, #b7771f 100%);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.15);
    position: relative;
}

.nivstats-progress-fill::after{
    content: "";
    position: absolute;
    inset: 2px 0 auto 0;
    height: 40%;
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
}

.nivstats-progress-text{
    font-size: 19px;
    font-weight: bold;
    text-align: center;
}

.nivstats-placeholder{
    font-size: 19px;
    margin: 0;
}

#sesobjectifs,
#objectifsbandits,
#sesbadges{
    font-size: 20px;
    line-height: 1.5;
}

#sesobjectifs p,
#objectifsbandits p,
#sesbadges p,
#sesobjectifs li,
#objectifsbandits li,
#sesbadges li{
    font-size: 20px;
}

.nivstats-question-juste{
    background: linear-gradient(180deg, rgba(180,230,190,0.92) 0%, rgba(150,215,165,0.92) 100%);
}

.nivstats-question-fausse{
    background: linear-gradient(180deg, rgba(255,180,170,0.92) 0%, rgba(255,140,125,0.92) 100%);
}

.nivstats-mini-stats{
    grid-area: minis;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-content: start;
    margin-top: 0;
}

.nivstats-mini-card{
    background:
        radial-gradient(circle at top left, rgba(255,255,255,0.28), transparent 38%),
        linear-gradient(180deg, #f8ecd7 0%, #e4c99e 100%);
    border: 1px solid rgba(122,82,48,0.32);
    border-radius: 16px;
    box-shadow:
        0 5px 14px rgba(0,0,0,0.10),
        inset 0 2px 0 rgba(255,255,255,0.36),
        inset 0 -5px 10px rgba(110,60,20,0.08);
    padding: 10px 8px;
    text-align: center;
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.nivstats-mini-card img{
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.18));
}

.nivstats-mini-card-value{
    font-size: 28px;
    font-weight: bold;
    line-height: 1.05;
    color: #4a2411;
}

.nivstats-mini-card-label{
    font-size: 28px;
    line-height: 1.15;
    color: #6a3a1d;
    text-align: center;
}

@media (max-width: 900px){
    .nivstats-header-layout{
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "hero minis"
            "menu menu";
    }

    .nivstats-mini-stats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .nivstats-menu-side{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nivstats-tab-btn{
        font-size: 19px;
    }

    .nivstats-hero-image-wrap{
        min-height: 300px;
    }

    .nivstats-hero-image-wrap img{
        max-height: 270px;
    }
}

@media (max-width: 700px){
    .nivstats-wrapper{
        max-width: 100%;
        font-size: 17px;
    }

    .nivstats-header-card{
        padding: 16px;
        border-radius: 20px;
    }

    .nivstats-header-layout{
        grid-template-columns: minmax(150px, 1.15fr) minmax(0, 0.95fr);
        grid-template-areas:
            "hero minis"
            "menu menu";
        gap: 12px;
    }

    .nivstats-hero-panel{
        padding: 12px;
    }

    .nivstats-hero-panel h3{
        font-size: 30px;
        margin-bottom: 8px;
    }

    .nivstats-hero-image-wrap{
        min-height: 250px;
    }

    .nivstats-hero-image-wrap img{
        max-height: 225px;
    }

    .nivstats-section h3{
        font-size: 25px;
    }

    .nivstats-tab-btn,
    .nivstats-list li,
    .nivstats-chapitre-ligne,
    .nivstats-placeholder,
    #sesobjectifs p,
    #objectifsbandits p,
    #sesbadges p,
    #sesobjectifs li,
    #objectifsbandits li,
    #sesbadges li{
        font-size: 18px;
    }

    .nivstats-chapitre-card h4{
        font-size: 21px;
    }

    .nivstats-progress-text{
        font-size: 18px;
    }

    .nivstats-mini-stats{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .nivstats-mini-card{
        min-height: 96px;
        padding: 8px 6px;
    }

    .nivstats-mini-card img{
        width: 46px;
        height: 46px;
    }

    .nivstats-mini-card-value{
        font-size: 22px;
    }

    .nivstats-mini-card-label{
        font-size: 16px;
    }

    .nivstats-menu-side{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .nivstats-tab-btn{
        min-height: 64px;
        padding: 12px 10px;
        font-size: 18px;
    }
}