:root {
    --primary: #b20078;
    --secondary: #fde00a;
    --white: #FFF;
}

@font-face {
    font-family: 'Berlin Sans FB', sans-serif;
    src: url("public/fonts/Berlin_Sans_FB_Regular.ttf");
}

html {
    scroll-behavior: smooth;
    font-family: 'Berlin Sans FB', Arial, sans-serif;
}

* {
    font-weight: 200;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-color: var(--secondary) var(--primary);
}

body {
    display: grid;
    grid-template-rows: 1fr auto; /* 1fr pour le contenu, auto pour le footer */
    height: 100vh; /* 100% de la hauteur de la fenêtre */
    background: ;
    color: #000;

    a {
        color: var(--white);
        text-decoration: none;
    }
}

header {
    position: fixed;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--primary);
    color: var(--white);
    z-index: 1000;
    font-size: 1rem;

    .logo img {
        width: 26rem;
        margin: -0.35rem;
    }

    nav {
        right: 1rem;

        .burger {
            .burger_button .lines {
                display: none;
                position: relative;
                right: 2rem;
                width: 25px;
                height: 3px;
                background-color: var(--white);
                margin: 5px;
                background-color: var(--secondary);
            }

            .nav-links {
                list-style: none;
                display: flex;
                gap: 2.5rem;
                margin-right: 5rem;
                padding: 1rem;


                @media screen and (max-width: 28rem) {
                    width: 100vw;
                }

                li {
                    position: relative;

                    & > a {
                        font-size: 1rem;
                        display: block;
                        padding: 1rem;

                        &:hover {
                          color: var(--secondary);
                        }

                        &.active {
                          color: var(--secondary);
                        }
                    }

                    &:first-child {
                        background-color: var(--primary);
                    }
                }
            }
        }
    }
}

main {
    padding-top: 3rem; /* Pour éviter que le contenu soit caché par le header fixe */

    #home, #services, #projects, #contact, #news {
        scroll-margin-top: 5rem;
    }

    #services, #projects {
        height: 12.5rem;
    }

    #home {
        margin-top: 1.5rem;

        /* Définition d'un container pour gérer l'affichage */
        .container {
            overflow: hidden;
            display: flex;
            flex-direction: row;

            /* Définition du carousel */
            .carousel {
                /*position: relative;*/

                /* Définition de l'élément contenant les diapositives */
                .carousel-inner {
                    display: flex;
                    width: 100%;
                    height: auto;

                    /* Définition des diapositives */
                    .slide {
                        flex: 0 0 100%;
                        transition: 1s ease-in-out;

                        /* Définition de l'affichage de l'image de chaque diapositive */
                        img {
                            width: 100%;
                            height: auto;
                        }
                    }
                }
            }
        }

    }

    #news {
        #insta {
            width: 100%;
            overflow-y: hidden;
        }
    }

    #contact {
        color: var(--white);

        h3 {
            margin-bottom: 10px;
            color: #000;
        }

        .contact-container {
            display: flex;
            flex-wrap: wrap;

            .main-container {
                display: flex;
                width: 100%;

                &:nth-of-type(2) {
                    text-align: center;
                    background-color: var(--primary);
                    font-weight: 600;

                    h3 {
                        font-size: 1.5rem;
                        font-weight: 300;
                        color: var(--white);
                    }
                }

                 .contact-info a {
                    font-weight: bold;
                    font-weight: 500;
                 }

                .address-hours, .contact-info, .social-media {
                    width: 33.33%;
                    padding: 2rem;
                }

                .map-container, .contact-form {
                    width: 50%;

                    input, textarea, select {
                        border-radius: 0.2rem;
                        font-size: 0.75rem;
                    }

                    button[type=submit] {
                        border-radius: 1rem;
                        background-color: var(--primary);
                        width: 7rem;
                        margin-top: 1rem;
                    }
                }

                .contact-form  {
                    padding: 2em;

                    label {
                        display: block;
                        margin: 10px 0 5px;
                    }

                    h3 {
                        font-size: 1.5rem;
                    }

                    button {
                        background: #555;
                        color: var(--white);
                        padding: 10px;
                        border: none;
                        cursor: pointer;

                        &:hover {
                            background: #777;
                        }
                    }

                    .form-row {
                        display: flex;

                        .input-container {
                            width: 100%;

                            &.shrink:nth-child(1) {
                                width: 33%;
                            }
                            &.shrink:nth-child(2) {
                                width: 67%;
                                padding-left: 1rem;
                            }

                            display: flex;
                            flex-direction: column;

                            label {
                                margin-bottom: 5px;
                            }

                            input, textarea, select {
                                width: 100%;
                                padding: 10px;
                                margin-bottom: 10px;
                                border: 1px solid #ccc;
                                background-color: var(--white);

                                &::placeholder {
                                    color: #9F9F9F;
                                    font-weight: 400;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Responsive */
@media screen and (max-width: 66rem) {
    main {
        padding-top: 0rem;

        #home {
            margin-top: 0rem;
        }

        #contact {
            .contact-container {
                .main-container {
                    flex-direction: column; /* Sur petits écrans, chaque champ prend une ligne */
                    .map-container, .contact-form {
                        width: 100%; /* Chaque champ prend toute la largeur */

                        .form-row {
                            flex-direction: column; /* Sur petits écrans, chaque champ prend une ligne */
                            & > .input-container {

                                &:nth-child(1).shrink, &:nth-child(2).shrink {
                                    width: 100%; /* Chaque champ prend toute la largeur */
                                }

                                &:nth-child(2).shrink {
                                    padding-left: 0;
                                }
                            }
                        }
                    }

                    .address-hours, .contact-info, .social-media, .map-container, .contact-form {
                        width: 100%;
                        padding: 2rem;
                        text-align: center;
                    }
                }
            }
        }
    }

    header {
        position: static;
        font-size: 1.4rem;

        .logo img {
            width: 18rem;
            margin: -0.35rem;
        }

        nav {
            .burger {
                .burger_button .lines {
                    display: block !important;
                }

                .nav-links {
                    margin-right: unset;
                    opacity: 0;
                    transition: all .5s ease;
                    visibility: hidden;
                    position: absolute;
                    flex-direction: column;
                    justify-content: flex-start;
                    top: 3.2rem;
                    left: 0;
                    right: 0;
                    background-color: #303030;
                    gap: 1rem;

                    &.active {
                        transition: all .5s ease;
                        visibility: visible;
                        opacity: 1;

                        li {
                            transform: translateY(0);
                        }
                    }


                    li a {
                        padding: 0.5rem;
                        font-size: 1rem;
                    }
                }
            }
        }
    }
}

footer {
    border-top: 4px solid #212529;
    border-top-color: rgb(128, 119, 105);

    .footer-copyright {
        padding: 2rem;
        text-align: center;
    }
}

/*
Code temporaire, à revoir
*/

#toast {
    position: fixed;
    background-color: #213cfd;
    background-image: linear-gradient(19deg, #213cfd 0%, #b421ff 100%);
    color: #fff;
    font-size: 16px;
    -webkit-transition: bottom 350ms;
    -moz-transition: bottom 350ms;
    -o-transition: bottom 350ms;
    -ms-transition: bottom 350ms;
    transition: bottom 350ms;
    user-select: none;
}

#toast.active {
    top: 5rem;
    right: 0;
	z-index: 1000;
    width: 100%;
    max-width: 300px;
    padding: 10px;
}

/*
Spinner
 */

#lds-roller {
    /* change color here */
    color: var(--primary);
    position: fixed;
    width: 80px;
    height: 80px;
    right: 50%;
    top: 50%;
}
#lds-roller,
#lds-roller div,
#lds-roller div:after {
    box-sizing: border-box;
}
#lds-roller div {
    animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    transform-origin: 40px 40px;
}
#lds-roller div:after {
    content: " ";
    display: block;
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    margin: -3.6px 0 0 -3.6px;
}
#lds-roller div:nth-child(1) {
    animation-delay: -0.036s;
}
#lds-roller div:nth-child(1):after {
    top: 62.62742px;
    left: 62.62742px;
}
#lds-roller div:nth-child(2) {
    animation-delay: -0.072s;
}
#lds-roller div:nth-child(2):after {
    top: 67.71281px;
    left: 56px;
}
#lds-roller div:nth-child(3) {
    animation-delay: -0.108s;
}
#lds-roller div:nth-child(3):after {
    top: 70.90963px;
    left: 48.28221px;
}
#lds-roller div:nth-child(4) {
    animation-delay: -0.144s;
}
#lds-roller div:nth-child(4):after {
    top: 72px;
    left: 40px;
}
#lds-roller div:nth-child(5) {
    animation-delay: -0.18s;
}
#lds-roller div:nth-child(5):after {
    top: 70.90963px;
    left: 31.71779px;
}
#lds-roller div:nth-child(6) {
    animation-delay: -0.216s;
}
#lds-roller div:nth-child(6):after {
    top: 67.71281px;
    left: 24px;
}
#lds-roller div:nth-child(7) {
    animation-delay: -0.252s;
}
#lds-roller div:nth-child(7):after {
    top: 62.62742px;
    left: 17.37258px;
}
#lds-roller div:nth-child(8) {
    animation-delay: -0.288s;
}
#lds-roller div:nth-child(8):after {
    top: 56px;
    left: 12.28719px;
}
@keyframes lds-roller {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Overlay */

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}