/*====================================================
                    INDEX.CSS
                VERSION 2.0
                PARTIE 1
======================================================*/


/*====================================================
                    FOND
======================================================*/

main{

    background:
        radial-gradient(circle at top,#FFFDF8 0%,transparent 45%),
        linear-gradient(
            180deg,
            #FCFBF7 0%,
            #F9F5EE 25%,
            #F4EBDD 55%,
            #EFE4D4 80%,
            #E8DCC9 100%
        );

}


/*====================================================
                CONTENEUR GÉNÉRAL
======================================================*/

.page-wrapper{

    max-width:1400px;

    margin:0 auto;

    padding-inline:100px;

}


/*====================================================
                TITRES
======================================================*/

.section-title{

    font-family:var(--font-title);

    font-size:clamp(2.3rem,4vw,3rem);

    font-weight:700;

    color:#4A3A2A;

    text-align:center;

    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:20px;

}

.section-description{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

    color:#756A60;

    font-size:1.08rem;

    line-height:1.8;

}


/*====================================================
            ESPACEMENT DES SECTIONS
======================================================*/

.stats-section,
.latest-section,
.home-section,
.quick-links{

    position:relative;

    z-index:1;

}

.latest-section,
.home-section{

    padding:0 100px 25px;

}

.stats-section .container,
.latest-section .container,
.home-section .container,
.quick-links .container{

    position:relative;

    z-index:2;

}


/*====================================================
            BOUTONS GÉNÉRAUX
======================================================*/

.events-button,
.latest-button-wrapper{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-top:40px;

}

.btn-section{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:260px;

    min-width:0;

    height:58px;

    padding:0 28px;

    box-sizing:border-box;

    border-radius:16px;

    background:var(--primary);

    color:#fff;

    font-size:1.05rem;

    font-weight:700;

    text-decoration:none;

    transition:.30s;

    box-shadow:0 10px 25px rgba(0,0,0,.18);

}

.btn-section:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.22);

}

.btn-section.outline{

    background:transparent;

    border:2px solid var(--primary);

    color:var(--primary);

}

.btn-section.outline:hover{

    background:var(--primary);

    color:#fff;

}


/*====================================================
                ANIMATION
======================================================*/

.section-title,
.section-description{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================================
                ACCÈS RAPIDES
======================================================*/

.quick-links{

    padding:70px 0;

    overflow:hidden;

}

.quick-grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:24px;

    align-items:stretch;

}


/*====================================================
                    CARTE
======================================================*/

.quick-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    align-items:center;

    min-height:340px;

    padding:35px 28px;

    background:linear-gradient(
        180deg,
        #FFFFFF 0%,
        #FCF8F2 100%
    );

    border:1px solid rgba(175,145,95,.18);

    border-radius:24px;

    text-align:center;

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(0,0,0,.06),
        0 2px 8px rgba(0,0,0,.04);

    transition:
        transform .30s,
        box-shadow .30s,
        border-color .30s;

}

.quick-card:hover{

    transform:translateY(-8px);

    border-color:rgba(175,145,95,.35);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10),
        0 8px 18px rgba(175,145,95,.14);

}

.quick-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #D7B56D,
        #C89D49,
        #B37D2C
    );

}


/*====================================================
                    ICÔNE
======================================================*/

.quick-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    width:90px;

    height:90px;

    margin-bottom:22px;

    border-radius:50%;

    background:#FFF8ED;

    border:2px solid rgba(175,145,95,.15);

    font-size:42px;

    transition:.30s;

}

.quick-card:hover .quick-icon{

    transform:scale(1.08);

}


/*====================================================
                    TITRES
======================================================*/

.quick-card h3{

    margin-bottom:15px;

    color:#4A3A2A;

    font-family:var(--font-title);

    font-size:1.45rem;

}

.quick-card p{

    flex:1;

    margin-bottom:22px;

    color:#746A60;

    line-height:1.7;

}

.quick-card span{

    color:var(--primary);

    font-weight:700;

}


/*====================================================
                    ACTIONS
======================================================*/

.quick-actions{

    display:flex;

    flex-direction:column;

    gap:12px;

    width:100%;

}

.quick-link{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:13px 18px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.30s;

    box-sizing:border-box;

}

.quick-link:hover{

    background:var(--primary-dark);

    transform:translateY(-2px);

}


/*====================================================
                BOUTON CONNEXION
======================================================*/

.quick-card .btn-section{

    width:100%;

    max-width:100%;

    min-width:0;

}


/*====================================================
            RESPONSIVE DESKTOP
======================================================*/

@media(max-width:1400px){

    .quick-grid{

        grid-template-columns:repeat(5,1fr);

    }

}


/*====================================================
            RESPONSIVE TABLETTE
======================================================*/

@media(max-width:1100px){

    .quick-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:850px){

    .quick-grid{

        grid-template-columns:repeat(2,1fr);

    }

}


/*====================================================
            RESPONSIVE MOBILE
======================================================*/

@media(max-width:576px){

    .quick-links{

        padding:40px 0;

    }

    .quick-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .quick-card{

        min-height:auto;

        padding:28px 22px;

    }

    .quick-icon{

        width:75px;

        height:75px;

        font-size:34px;

        margin-bottom:18px;

    }

    .quick-card h3{

        font-size:1.30rem;

    }

    .quick-card p{

        margin-bottom:18px;

    }

}

/*====================================================
            EXPLORER PAR NIVEAU
======================================================*/

.stats-section{

    margin:20px auto 80px;

}

.stats-wrapper{

    display:grid;

    grid-template-columns:340px 1fr;

    gap:25px;

    align-items:stretch;

}


/*====================================================
            TOUTES LES DANSES
======================================================*/

.all-dances-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:45px;

    border-radius:24px;

    text-align:center;

    text-decoration:none;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    transition:.30s;

    box-shadow:0 12px 30px rgba(0,0,0,.10);

}

.all-dances-card:hover{

    transform:translateY(-8px);

}

.all-icon{

    font-size:3rem;

    margin-bottom:18px;

}

.all-dances-card h3{

    color:#fff;

    margin-bottom:12px;

}

.all-count{

    font-size:4rem;

    font-weight:700;

    line-height:1;

    margin-bottom:12px;

}

.all-dances-card p{

    color:rgba(255,255,255,.92);

}


/*====================================================
                CARTES NIVEAUX
======================================================*/

.stats-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(210px,1fr));

    gap:25px;

}

.stats-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:35px;

    text-align:center;

    text-decoration:none;

    background:#fff;

    border:1px solid var(--border);

    border-radius:24px;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.30s;

}

.stats-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.10);

}

.stats-card img{

    width:85px;

    height:auto;

    margin-bottom:20px;

}

.stats-card h3{

    margin-bottom:10px;

    color:var(--primary-dark);

}

.stats-card strong{

    display:block;

    margin-bottom:6px;

    font-size:2.4rem;

    color:var(--primary);

}

.stats-card span{

    color:#777;

}


/*====================================================
            DERNIÈRES DANSES
======================================================*/

.latest-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:28px;

    align-items:stretch;

}


/*====================================================
                ÉVÈNEMENTS
======================================================*/

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    margin-bottom:45px;

}

.section-header h2{

    margin:0;

    font-family:var(--font-title);

    font-size:2.6rem;

    color:#4A3A2A;

    text-transform:uppercase;

    letter-spacing:1px;

}

.events-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


/*====================================================
            RESPONSIVE DESKTOP
======================================================*/

@media(max-width:1400px){

    .latest-grid{

        grid-template-columns:repeat(3,1fr);

    }

}


/*====================================================
            RESPONSIVE TABLETTE
======================================================*/

@media(max-width:1100px){

    .stats-wrapper{

        grid-template-columns:1fr;

    }

    .events-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:900px){

    .latest-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .section-header{

        flex-direction:column;

        text-align:center;

    }

}


/*====================================================
            RESPONSIVE MOBILE
======================================================*/

@media(max-width:768px){

    .stats-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:576px){

    .stats-grid{

        grid-template-columns:1fr;

    }

    .latest-grid{

        grid-template-columns:1fr;

    }

    .events-grid{

        grid-template-columns:1fr;

    }

    .section-header h2{

        font-size:2rem;

    }

}

/*====================================================
                RESPONSIVE GLOBAL
======================================================*/

/*------------------------------
        ≤ 1200px
------------------------------*/

@media (max-width:1200px){

    .page-wrapper{

        padding-inline:50px;

    }

    .latest-section,
    .home-section{

        padding-inline:50px;

    }

}


/*------------------------------
        ≤ 768px
------------------------------*/

@media (max-width:768px){

    .page-wrapper{

        padding-inline:25px;

    }

    .latest-section,
    .home-section{

        padding-inline:25px;

    }

    .section-title{

        font-size:2.2rem;

    }

    .section-description{

        max-width:100%;

        margin:0 auto 45px;

        padding:0 15px;

        font-size:1rem;

        line-height:1.7;

    }

    .btn-section{

        width:100%;

        max-width:320px;

        min-width:0;

    }

}


/*------------------------------
        ≤ 576px
------------------------------*/

@media (max-width:576px){

    .page-wrapper{

        padding-inline:15px;

    }

    .latest-section,
    .home-section{

        padding-inline:15px;

    }

    .section-title{

        font-size:2rem;

    }

    .section-description{

        margin-bottom:35px;

        padding:0 10px;

    }

    .btn-section{

        max-width:100%;

    }

}


/*====================================================
                PETITES ANIMATIONS
======================================================*/

.stats-card,
.quick-card,
.all-dances-card{

    will-change:transform;

}


/*====================================================
                IMAGES
======================================================*/

img{

    max-width:100%;

    height:auto;

}


/*====================================================
                FIN INDEX.CSS
======================================================*/





/*====================================================
                ACCÈS RAPIDES PREMIUM
======================================================*/

.quick-access{

    padding:40px 0 80px;

}

.quick-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:28px;

}

.quick-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#fff;

    border-radius:22px;

    text-decoration:none;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:.35s;

}

.quick-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.quick-image{

    height:180px;

}

.quick-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.quick-card:hover img{

    transform:scale(1.05);

}

.quick-content{

    padding:25px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.quick-content h3{

    margin-bottom:12px;

    color:#4A3A2A;

    font-size:1.45rem;

}

.quick-content p{

    color:#756A60;

    line-height:1.7;

    flex:1;

}

.quick-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:25px;

    padding:14px 22px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.quick-card:hover .quick-button{

    background:var(--primary-dark);

}

/*====================================================
                    RUBANS
======================================================*/

.quick-ribbon{

    position:absolute;

    left:18px;

    top:18px;

    padding:9px 18px;

    border-radius:50px;

    color:#fff;

    font-size:.9rem;

    font-weight:700;

    letter-spacing:.5px;

    box-shadow:0 6px 18px rgba(0,0,0,.18);

}

.ribbon-green{

    background:#487C54;

}

.ribbon-gold{

    background:#B48A3A;

}

.ribbon-blue{

    background:#54779D;

}

.ribbon-brown{

    background:#7A5640;

}

.ribbon-red{

    background:#9B534E;

}

.submit-buttons{

    display:flex;

    flex-direction:column;

    gap:12px;

    margin-top:20px;

}

.submit-buttons a{

    display:block;

    padding:12px;

    text-align:center;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.submit-buttons a:hover{

    background:var(--primary-dark);

}

@media(max-width:1400px){

    .quick-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:900px){

    .quick-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:600px){

    .quick-grid{

        grid-template-columns:1fr;

    }

    .quick-image{

        height:210px;

    }

}

.quick-ribbon{

    color:#fff !important;

    font-weight:700;

    text-shadow:0 1px 3px rgba(0,0,0,.35);

}

.quick-button,
.quick-link,
.submit-buttons a{

    color:#fff !important;

    text-decoration:none;

}

.quick-button{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    padding:14px;

    margin-top:20px;

    border-radius:14px;

    background:var(--primary);

    color:#fff !important;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.quick-button:hover{

    background:var(--primary-dark);

}

/*====================================================
                NIVEAUX PREMIUM
======================================================*/

.levels-section{

    padding:80px 0;

}

.levels-grid{

    display:grid;

    grid-template-columns:repeat(5,minmax(0,1fr));

    gap:24px;

    align-items:stretch;

}

.level-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    text-decoration:none;

    border:1px solid var(--border);

    box-shadow:var(--shadow);

    transition:.35s;

}

.level-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.level-image{

    height:170px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(
        180deg,
        #FFFDF8,
        #F8F1E7
    );

}

.level-image img{

    width:115px;

    height:auto;

}

.level-content{

    padding:25px;

    text-align:center;

}

.level-content h3{

    margin-bottom:12px;

    color:#4A3A2A;

}

.level-content strong{

    display:block;

    font-size:2.4rem;

    color:var(--primary);

}

.level-content span{

    color:#777;

}

.level-button{

    margin-top:22px;

    padding:12px;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

}





/*====================================================
            CARTE TOUTES LES DANSES
====================================================*/

.level-card-all{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    padding:0;

    background:linear-gradient(
        180deg,
        #6F8553 0%,
        #607548 100%
    );

    color:#fff;

}

.level-all-image{

    height:190px;

    overflow:hidden;

}

.level-all-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.level-all-content{

    flex:1;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:35px;

}

.level-card-all h3{

    color:#fff;

    font-size:2rem;

    margin-bottom:18px;

}

.level-card-all strong{

    font-size:3.2rem;

    line-height:1;

    margin-bottom:10px;

    color:#fff;

}

.level-card-all span{

    color:rgba(255,255,255,.90);

    margin-bottom:30px;

}

.level-card-all .level-button{

    background:white;

    color:var(--primary);

}

.level-card-all:hover .level-button{

    background:#F6F3EC;

}


.all-card{

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border-radius:28px;

    background:#fff;

    text-decoration:none;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.all-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.all-image{

    height:220px;

    overflow:hidden;

}

.all-image img{

    width:100%;
    height:100%;
    object-fit:cover;

    transition:.45s;

}

.all-card:hover img{

    transform:scale(1.05);

}

.all-content{

    background:var(--primary);

    color:white;

    padding:45px;

    text-align:center;

}

.all-content h2{

    color:white;

    font-size:2.3rem;

    margin-bottom:15px;

}

.all-content strong{

    display:block;

    font-size:4rem;

    font-weight:700;

    margin-bottom:8px;

}

.all-content span{

    display:block;

    opacity:.9;

    margin-bottom:35px;

}

.all-button{

    display:inline-flex;

    padding:16px 36px;

    background:white;

    color:var(--primary);

    border-radius:50px;

    font-weight:700;

}


/*====================================================
            DERNIÈRES DANSES
====================================================*/

.latest-section{

    padding:90px 0;

}

.latest-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:28px;

}

.latest-card{

    display:flex;

    flex-direction:column;

    height:100%;

    background:#fff;

    border:1px solid var(--border);

    border-radius:22px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.3s;

}

.latest-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.12);

}

.latest-image{

    position:relative;

    width:100%;

    aspect-ratio:16/9;

    overflow:hidden;

}

.latest-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.latest-card:hover .latest-image img{

    transform:scale(1.05);

}

.latest-ribbon{

    position:absolute;

    top:18px;

    left:18px;

    background:#C58A29;

    color:#fff;

    padding:8px 18px;

    border-radius:50px;

    font-size:.80rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:1px;

}

.latest-content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:22px;

}

.latest-content h3{

    color:#4A3A2A;

    font-size:1.35rem;

    line-height:1.35;

    margin-bottom:10px;

    min-height:65px;

}

.latest-artist{

    color:#7A7068;

    margin-bottom:22px;

    font-size:.95rem;

}

.latest-infos{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.latest-infos span{

    background:#F6F3ED;

    border-radius:30px;

    padding:8px 14px;

    font-size:.85rem;

    color:#65584D;

}

.latest-button{

    margin-top:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    height:52px;

    border-radius:16px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.latest-button:hover{

    background:var(--primary-dark);

}

.latest-details{

    flex:1;

}

@media(max-width:1400px){

    .latest-grid{

        grid-template-columns:repeat(3,1fr);

    }

}

@media(max-width:900px){

    .latest-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:650px){

    .latest-grid{

        grid-template-columns:1fr;

    }

}


/*====================================================
            PROCHAINS ÉVÉNEMENTS
====================================================*/

.events-home{

    padding:90px 0;

}

.events-home-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.event-home-card{

    background:#fff;

    border-radius:24px;

    overflow:hidden;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 12px 30px rgba(0,0,0,.06);

    transition:.35s;

}

.event-home-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

.event-home-image{

    position:relative;

    height:500px;

    overflow:hidden;

}

.event-home-image img{

    width:100%;

    height:90%;

    object-fit:cover;

    transition:.4s;

}

.event-home-card:hover img{

    transform:scale(1.08);

}

.event-home-ribbon{

    position:absolute;

    top:18px;

    left:18px;

    padding:8px 18px;

    border-radius:40px;

    background:#B94747;

    color:#fff;

    font-size:.80rem;

    font-weight:700;

    text-transform:uppercase;

}

.event-home-content{

    padding:28px;

}

.event-home-content h3{

    color:#4A3A2A;

    margin-bottom:18px;

}

.event-home-info{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:28px;

}

.event-home-info span{

    background:#F6F3ED;

    padding:8px 14px;

    border-radius:30px;

    color:#65584D;

    font-size:.85rem;

}

.event-home-button{

    display:flex;

    justify-content:center;

    align-items:center;

    height:52px;

    border-radius:16px;

    background:var(--primary);

    color:#fff;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

}

.event-home-button:hover{

    background:var(--primary-dark);

}

@media(max-width:1000px){

    .events-home-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:650px){

    .events-home-grid{

        grid-template-columns:1fr;

    }

}


/*====================================================
            BANNIÈRE TOUTES LES DANSES
====================================================*/

.all-dances-section{

    padding:70px 0 40px;

}

.all-banner{

    position:relative;

    display:block;

    overflow:hidden;

    border-radius:28px;

    text-decoration:none;

    min-height:320px;

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.all-banner-image{

    position:absolute;

    inset:0;

}

.all-banner-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.all-banner:hover img{

    transform:scale(1.05);

}

.all-banner-overlay{

    position:relative;

    z-index:2;

    min-height:320px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:60px;

    background:linear-gradient(
        rgba(35,30,25,.45),
        rgba(35,30,25,.55)
    );

}

.all-ribbon{

    display:inline-block;

    padding:8px 22px;

    border-radius:40px;

    background:#B99045;

    color:#fff;

    font-weight:700;

    margin-bottom:20px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.all-banner h2{

    color:#fff;

    font-size:3rem;

    margin-bottom:15px;

}

.all-banner p{

    color:#fff;

    font-size:1.2rem;

    margin-bottom:35px;

}

.all-banner strong{

    font-size:2rem;

    color:#FFD978;

}

.all-banner-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:25px;

    padding:14px 22px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:.3s;

}

.all-banner:hover .all-banner-button{

    background:var(--primary-dark);

}




.level-count{

    display:flex;

    flex-direction:column;

    align-items:center;

    margin:15px 0 25px;

}

.level-count small{

    color:#777;

    font-size:20px;

}

.section-button{

    display:flex;

    justify-content:center;

    margin-top:50px;

}

.events-home .section-button{

    margin-top:50px;

}

.latest-section{

    padding-bottom:70px;

}

.events-home{

    padding-top:20px;

}




/*====================================================
              BADGES NIVEAUX
====================================================*/


.niveau-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:var(--pill-radius);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    white-space:nowrap;

}



/* Débutant */

.badge-debutant{

    background:#dfe8d3;

    color:#49613b;

    border:1px solid #c3d3b4;

}



/* Novice */

.badge-novice{

    background:#D9ECFF;

    color:#1E5A8A;

    border:1px solid #A8D0F0;

}



/* Intermédiaire */

.badge-intermediaire{

    background:#E6D6BC;

    color:#80601d;

    border:1px solid #C9AD76;

}



/* Avancé */

.badge-avance{

    background:#8b4b45;

    color:#fff;

    border:1px solid #6d3732;

}



/* Partenaire */

.badge-partenaire{

    background:#DCC6E0;

    color:#5B3A63;

    border:1px solid #BFA3C5;

}








.levels-grid {

    display:grid;

    grid-template-columns:repeat(5, minmax(0, 1fr));

    gap:24px;

    width:100%;

}


/* Tablet */
@media(max-width:992px){

    .levels-grid{
        grid-template-columns:repeat(2, minmax(260px, 320px));
        justify-content:center;
    }

}


/* Mobile */
@media(max-width:600px){

    .levels-grid{

        grid-template-columns: minmax(280px, 320px);

        justify-content:center;

    }

}