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


/*====================================================
                    FOND DE LA PAGE
======================================================*/

main{

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

}



/*====================================================
                SEPARATEUR WESTERN
======================================================*/

.western-divider{

    height:70px;

    background:#F9F5ED url("../images/divider-western.svg")
    center center no-repeat;

    background-size:350px;

}



/*====================================================
                TITRES DES SECTIONS
======================================================*/

.section-title{

    text-align:center;

    margin-bottom:55px;

}

.section-title h2{

    margin:0;

    font-family:'Oswald',sans-serif;

    font-size:3rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#4A3A2A;

}

.section-description{

    max-width:750px;

    margin:20px auto 55px;

    text-align:center;

    color:#756A60;

    font-size:1.08rem;

    line-height:1.8;

}



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

.stats-section{

    position:relative;

    padding:80px 0 100px;

}

.stats-wrapper{

    display:flex;

    justify-content:center;

}

.stats-grid{

    display:grid;

    grid-template-columns:repeat(3,380px);

    justify-content:center;

    gap:35px;

}



/*====================================================
                DECORATIONS
======================================================*/

.stats-section::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:70px;

    background:url("../images/separators/western-top.png")
    repeat-x center top;

    pointer-events:none;

}

.stats-section::after{

    content:"";

    position:absolute;

    bottom:0;

    left:0;

    width:100%;

    height:70px;

    background:url("../images/separators/western-bottom.png")
    repeat-x center bottom;

    pointer-events:none;

}



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

@media(max-width:1450px){

.stats-grid{

    grid-template-columns:repeat(3,210px);

}

}



@media(max-width:900px){

.stats-grid{

    grid-template-columns:repeat(2,210px);

}

}



@media(max-width:600px){

.stats-grid{

    grid-template-columns:1fr;

    justify-items:center;

}

.section-title h2{

    font-size:2.2rem;

}

}




/*====================================================
            DERNIÈRES DANSES AJOUTÉES
====================================================*/

.latest-section{

    position:relative;

    padding:100px 0;

}

.latest-grid{

    display:grid;

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

    gap:28px;

    align-items:stretch;

}

.latest-button{

    text-align:center;

    margin-top:60px;

}


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

.home-section{

    padding:100px 0;

}

.section-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:45px;

}

.section-header h2{

    font-family:'Oswald',sans-serif;

    font-size:2.6rem;

    color:#4A3A2A;

    text-transform:uppercase;

    letter-spacing:1px;

    margin:0;

}

.btn-small{

    display:inline-block;

    padding:12px 28px;

    border-radius:40px;

    text-decoration:none;

    background:#6F8352;

    color:#fff;

    font-weight:600;

    transition:.30s;

}

.btn-small:hover{

    background:#586A43;

}

.events-grid{

    display:grid;

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

    gap:30px;

}



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

@media(max-width:1400px){

.latest-grid{

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

}

}



@media(max-width:1100px){

.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;

    gap:20px;

    text-align:center;

}

}



@media(max-width:650px){

.latest-grid{

    grid-template-columns:1fr;

}

.events-grid{

    grid-template-columns:1fr;

}

.section-header h2{

    font-size:2rem;

}

}



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

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

    position:relative;

    z-index:1;

}

.container{

    position:relative;

    z-index:2;

}



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

.section-title,
.section-description{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



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

.btn{

    transition:.30s;

}

.btn:hover{

    transform:translateY(-3px);

}