/* Structure principale */
main{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--main-gap);
}

/* Banner-hero */
.banner-hero{
    background-image:
        linear-gradient(rgba(248, 248, 248, 0),80%, #F5F5DC),
        url("../../images/BannerHero-j-Oo9Cm.jpg"); 
    
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height : 85vh ;
}
.btn-contact {
    position: relative; 
    top: 20%;
    left: 85%;
    z-index: 999;
    max-width: max-content;
}
.banner-text{
    position: relative;
    max-width: 50%;
    top : 20%;
    left : 5%;
        h1{
            font-size: 5rem;
            animation: Bouncing-entry 2.5s forwards ;
            color:var(--secondary-text-color);
        }
        h2{
            font-size: 2rem;
            animation: entry-bottom 2s forwards ;
            color:var(--text-color);
        }
}

/* Nos-missions */

.nos-actions{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    padding: var(--padding-container);

        h2{
            font-size: 2rem;
            border-bottom: var(--border-color);
            width: 80%;
            text-align: center;
            padding: 1.5rem ;
            color : var(--text-color)
        }

        .container-actions{
            display: flex;
            align-items: baseline;
            gap: var(--gap-container);


            .mission{
                width: 25%;
                display: flex;
                flex-direction: column;
                gap: 1rem;
               

                .mission-title{
                    height: 3rem;
                    text-align: center;
                }

                .img-action{
                    width: 100%;
                    height: 25rem;
                    object-fit: cover;
                    border: var(--border-color);
                    border-radius: var(--border-radius);
                }

                .mission-text{ 
                    height: 15%;
                    text-align: center;
                }
                h4{
                    color: var(--text-color);
                }
                p{
                    color: var(--text-color);
                }

            }

        }
    }

/* Banner à chiffres */
.banner{
    width: 100%;
    height: 18rem;
    background-color: var(--tertiary-bg-color);
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--secondary-text-color);
    font-size: 20px;

        .banner-num{
            padding: 1.6rem;
                span{
                    font-size: 20px;
                    font-weight: bold;
                }
        }
        .banner-num:not(:last-child){
            border-right: var(--secondary-text-color) solid 1px;
        }
        
}

/* Section patrimoine */

.patrimoine{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}
.titles{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    border-bottom: var(--border-color);
    padding:var(--padding-container);
    color: var(--text-color);
}

.img-patrimoine{
    background-image: url("../../images/accueil/patrimoine-emqgmDB.webp");
    background-repeat: no-repeat;
    background-size: cover;
    border: var(--border-color);
    border-radius: var(--border-radius);
    width: 80%;
    height : 20rem ;

}
.description{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    gap: 20px;
    padding: 2.5rem;
    color:var(--text-color);
}

/* Section visit */
.visit{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;

    h2{
        font-size: 2rem;
        border-bottom: var(--border-color);
        width: 80%;
        text-align: center;
        padding: 2.5rem ;
        color : var(--text-color)
    }

    p{
        font-size: 20px;
        text-align: center;
        margin-bottom: 2.5rem ;
    }

    

}
.img-visit{
    background-image: url("../../images/accueil/visit-Yxay-2M.webp");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height : 20rem ;

}
.visit-description{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:20px;
    padding: 2.5rem;
    color: var(--text-color);  
}
.visit-links{
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    a{
        width: 40%;
        max-width: none;
        justify-content: space-between;
    }
}


/* Gestion des cards (event + articles) */

.articles-container, .news-container{
    display: flex;
    width: 100%;
    gap: 20px;
}

.news-articles , .news-events {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap : 4rem;
    padding: 4rem;

    h2{
        font-size: 2rem;
        border-bottom: var(--border-color);
        padding: var(--padding-container);
        width: 80%;
        text-align: center;
        color: var(--text-color);
    }
}



.article-card, .event-card{
    width: 25%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    background-size: cover;
    background-repeat: no-repeat;
    gap: 10px;
    height: 50vh;
    border: var(--border-color);
    border-radius: var(--border-radius);
    transition: all 0.3s;

    .separator{
        width: 20%;
        transition: all 0.5s;
    }
            
    &:hover{
        transform: scale(1.05);
        box-shadow: inset 0px 0px 9px 0px rgba(232, 170, 20, 0.64),
            4px 4px 5px 0px rgba(71, 94, 91, 0.5);
        /* box-shadow: inset 0px 0px 9px 2px rgba(232, 170, 20, 1); */
        /* box-shadow: 6px 6px 5px 0px rgba(44, 44, 44, 0.64); */
        .separator{
            width: 80%;
        }
    }
            
}

.article-body , .event-body{
    font-size: 15px;
    height: 70%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;

    .separator{
        transition: all 0.5s;
        width: 20%;
    }

    p{
        color: aliceblue;
        text-align: center;
    }

    h3:first-child{
        font-size: 20px;
        height: 50%;
        text-align: center;
    }

    h3{
        color: var(--secondary-text-color);
    }

}

/* Deuxieme baniere */

.banner-second{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18rem;
    background: #0E686C;
    background: linear-gradient(to right, #0E686C 0%, #083C3E 100%);
        h2{
            
            font-size: 70px;
            color: var(--secondary-text-color);
        }
}

/* Section nous rejoindre */
.join-us{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2.5rem 0rem;
    gap: 2.5rem;
    
        .img-join{
            background-image: url("../../images/accueil/benevoles-jrUez2G.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 80%;
            border: var(--border-color);
            border-radius: var(--border-radius);
            height : 20rem ;
        }    
        h2{
            font-size: 2rem;
            border-bottom: var(--border-color);
            padding: var(--padding-container);
            width: 80%;
            text-align: center;
            color: var(--text-color);
        }
        p{
            font-size: 20px;
            text-align: center;
            color: var(--text-color);
            padding:var(--padding-container);
        }
        
}

/* Section lieux à réinventer */

.lieux{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 2.5rem 0rem;

    .img-lieux{
            background-image: url("../../images/accueil/lieux-_XBUdHH.webp");
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            width: 100%;
            height : 25rem ;
    }
    h2{
        font-size: 2rem;
        border-bottom: var(--border-color);
        padding: var(--padding-container);
        width: 80%;
        text-align: center;
        color: var(--text-color);
    }
    p{
        font-size: 20px;
        padding: 1rem;
        color: var(--text-color);
        text-align: center;
    }
    
}

/* Section confiance */
.confiance{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 6.25rem;
}



@media screen and (max-width : 600px) {
    .container{
        width: 90%;
    }
    
    .banner-hero{
       height: 70vh;
       background-position: center;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 20px;

    }
    .btn-contact{
        position: static;
    }
    
    .banner-text{
        background-color: rgba(240, 248, 255, 0.700);
        backdrop-filter: blur(2px);
        padding: var(--padding-container);
        border-radius: var(--border-radius);
        border: var(--border-color);
        position: static;
        max-width: 80%;
        text-align: center;
        h1{
            font-size: 2rem;
        }
    }
    .nos-actions{

        .container-actions{
            flex-direction: column;
            align-items: center;
        .mission{
            width: 100%;
            border: var(--border-color);
            border-radius: var(--border-radius);
            padding: 10px;
            }
        }
    }

    .banner{
        padding: 1,5rem;
        height: 45vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .banner-num{

            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            border-right: none !important ;
            span{
                font-size:1.7rem;
            }
            
        }
        .banner-num:not(:last-child){
            border-bottom: var(--secondary-text-color) solid 1px;
        }
    }
    /* Patrimoine */
    .patrimoine{
        .description{
            font-size: 20px;
            text-align: center;
        }
        h2{
            text-align: center;
        }


    }
    /* Section visite */
    .visit{
        h2{
            text-align: center;
        }
        .visit-description{
            font-size: 20px;
            color: var(--text-color);
            .visit-links{
                a{
                    font-size: 16px;
                    width: 100%;
                }
            }   
        }

    }

    /* Section articles */

    .news-articles , .news-events{
        padding: 1rem;
        .articles-container, .news-container{
            flex-direction: column;

            .article-card, .event-card{
                width: 100%;
                height: 45vh;
            }
        }
        a{
            font-size: 16px;
        }
    }

    /* Banner join-us */
    .banner-second{
        h2{
            font-size: 4rem;
            text-align: center;
        }
    }

    .join-us{
        p{
            font-size: 16px;
            color: var(--text-color);
            text-align: center;
        }
        a{
            font-size: 16px;
        }
    }

    /* Section lieux */
    .lieux{
        p{
        font-size: 16px;
        color: var(--text-color);
        }
        a{
            font-size: 16px;
        }
    }
    
}