/*Police import*/

@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/*Style du Header*/



header{/*Style général du header*/

    background-color: #F8F5F0;

    padding: 20px;

    text-align: center;

    font-family: 'Gilda Display';



    div.container{

        display: flex;

        justify-content: space-between;

        align-items: center;

        margin: 0 auto;



        div.site-branding{

            margin: 0px 20px;

            display: flex;

            justify-content: right;



            div.site-logo {

                max-width: fit-content;

            }



            .logo-text {

                text-decoration: none;

            

                div.site-title {

                    margin: 0;

                    font-size: 24px;

                    color: #333;

                }

            }

        }



        nav.main-navigation {

            position: relative;

            font-family: 'Barlow Condensed', sans-serif;

        



            ul.nav-menu {

                display: flex;

                justify-content: center;

                list-style: none;

                padding: 0;

                margin: 0;

                font-family: 'Barlow Condensed', sans-serif;



                .menu-item-153{

                    border-radius: 10px;

                    background: #BAA360;

                    display: flex;

                    padding: 10px;

                    justify-content: center;

                    align-items: center;

                    color: #fff;

                }



                li{

                    margin: 0 15px;

                    font-size: 18px;

                    font-weight: bold;

                    color: #333;

                    position: relative;



                    a{

                        text-decoration: none;

                        color: inherit;

                        display: block;

                        padding: 10px 5px;

                        position: relative;

                    }



                    a:hover {

                        color: #FF6347; /* Couleur de survol */

                    }

                }

            }



            ul.sub-menu {

                position: absolute;

                background-color: #fff;

                padding: 10px;

                border-radius: 5px;

                box-shadow: 0 2px 10px rgba(0,0,0,0.1);

                min-width: 200px;

                z-index: 100;

                list-style: none;

                /*top: 100%;

                left: 0;*/



                li {

                    margin: 5px 0;

                    text-align: left;



                    a{

                        color: #333;

                        text-decoration: none;

                        display: block;

                        padding: 5px 10px;

                        font-size: 16px;

                        font-weight: normal;

                    }



                    a:hover {

                        background-color: #f5f5f5;

                        color: #FF6347;

                    }

                }

            }

        }

    }



}



/* Indicateur de sous-menu */

.dropdown-indicator {

    margin-left: 5px;

    transition: transform 0.3s ease;

}



/* Pour les éléments de menu qui ont des enfants */

.menu-item-has-children {

    cursor: pointer;

}



/* Animation pour l'indicateur  **A réparer**

.menu-item-has-children.active .dropdown-indicator {

    transform: rotate(180deg);

}*/



/*Style du Footer*/



footer{

    background-color: #303440;

    padding: 40px 10px;

    font-size: 14px;

    color: #fcfcfc;



    div.container{

        max-width: 1200px;

        margin: 0 auto;

        display: flex;

        justify-content: space-between;



        section.a-propos{

            width: 500px;



            h1{

                padding-bottom: 10px;

                color: #BAA360;

            }



            p{

                line-height: 20px;

            }

        }



        div.site-info{

            display: flex;

            flex-direction: column;

            flex-wrap: wrap;

            align-items: flex-start;



            p{

                padding-bottom: 40px;

            }



            nav.footer-navigation {

                display: flex;

                justify-content: center;

                list-style: none;

                padding: 0;

                margin: 0;



                ul{

                    display: flex;



                    li{

                        margin: 0 10px;

                        font-size: 18px;

                        font-weight: normal;

                        color: #fcfcfc;

                        position: relative;



                        a{

                            text-decoration: none;

                            color: inherit;

                            display: block;

                            padding: 10px 5px;

                            position: relative;

                        }



                        a:hover {

                            color: #FF6347;

                        }

                    }

                }



            }

        }

    }

}



.container{

    width: 100%;

    margin: 0 auto;

}



/*body*/

body{

    background-color: #fcfcfc;

    margin: 0;

    padding: 0;



    h1{

        font-family: 'Barlow Condensed', serif;

        color: #E1A551;

        font-size: 32px;

        font-style: normal;

        font-weight: bold;

        line-height: normal;

    }



    h2{

        font-family: 'Barlow Condensed', serif;

        color: #000;

        font-size: 16px;

        font-style: normal;

        font-weight: bold;

        line-height: normal;

    }



    p{

        font-family: 'Gilda Display', serif;

        font-size: 16px;

    }



    ul{

        font-family: 'Gilda Display', serif;

    }

}



/*Responsive*/

@media (max-width: 768px) {

    header .container {

        flex-direction: column;

    }



    footer .container {

        flex-direction: column;

    }



    section.a-propos{

        display: flex;

        flex-direction: column;

        width: 100% !important;

        gap: 20px;

    }

    

    .nav-menu {

        flex-direction: column;

        width: 100%;

    }

    

    .nav-menu > li {

        margin: 5px 0;

    }

    

    .sub-menu {

        position: static;

        box-shadow: none;

        width: 100%;

        padding: 0 0 0 20px;

    }

}