/* Section header */
.mobile-header-nav{
    display: none;
}
.moblie-hamburger-menu{
    display: none;
}
.carousel{
    display: none;
}
.footer-home-icon{
    display: none;
}
.header-global{
    height: 15vw;
}
.header-external-links{
    display: flex;
    align-items: baseline;
    justify-content: right;
    gap: 2%;
    font-family: Inter;
    color: #4087a4;
    margin-right: 4%;
    a{
        color: #4087a4;
    }
    a:hover{
        animation-name: GrowText;
        animation-duration: 0.5s;
        font-size: x-large;
    }
}
.header-reserve-text{
    all: unset;
    color: #ff8d6d !important;
    font-size: 3vh;
}
.header-nav{
    display: flex;
    align-items: end; 
    gap: 4%;
    margin: 0 3% 0 8%;
    font-family: Inter;
    color: #ff8d6d;
}
.header-dropdown-menu{
    font-family: Inter;
    font-size: 13px;
    list-style: none;
    width: 7vw;
    display: none;
    align-items: center;
    flex-direction: column;
    background-color: #ffc9ba;
    position: absolute;
    li{
        color: #005f86;
    }
}
.header-dropdown-expositon-menu{
    padding: 2vh 0;
    gap: 2vh;
}
.header-dropdown-observatory-menu{
    padding: 3vh 0;
    gap: 3.5vh;    
}
.textbox-header{
    border-radius: 3vh;
    border-color: #4087a4;
    height: 4vh;
    width: 20%;
    background-image: url("../images/loupe-recherche-corail.svg");
    background-repeat: no-repeat;
    background-position: 97%;
    background-size: 10%;
    margin: 0 0 1% 5%;
}
.textbox-header:hover{
    animation-name: ChangeSearchIcon;
    animation-duration: 1s;
    background-image: url("../images/fleche-gauche-billet.svg");
}
.textbox-header::placeholder{
    color: #ff9476;
    font-style: italic;
}
.exposition-menu:hover{
    .header-dropdown-menu{
        display: flex;
    }
}
/* Titres communs à plusieurs pages */
.page-title{
    font-family: Lora;
    color: #005f86;
    padding-left: 9.5vw;
}
.section-title{
    font-family: Lora;
    font-weight: 500;
    color: #f37551;
    font-size: x-large;
    display: flex;
    align-items: baseline;
    gap: 2vw;
}
/* Section footer */
.smartphone-subscribe-button{
     display: none;
}
.footer-global{
    display: flex;
    padding: 0 10%;
    align-items: baseline;
}
.footer-nav{
    display: flex;
    flex-direction: column;
    margin-right: 5vw;
    font-family: Inter;
    color: #005f86;
    p{
        display: flex;
    }
}
.footer-external-links{
    display: flex;
    flex-direction: column;
    gap: 4vh;
    font-family: Inter;
     a{
        color: #f37551;
    }
    a:hover{
        animation-name: FooterExternalLinkAnimation;
        animation-duration: 1s;
        text-decoration: none;
    }
}
.footer-email-subscription{
    padding: 20vh 8vw;
    font-family: Lora;
    color: #005f86;
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
.footer-email-subscription-textbox{
    background-color: #ffd0c3;
    border-radius: 30vw;
    height: 3vw;
    width: 30vw;
    background-position: 2%;
    padding-left: 1vw;
    display: flex;
    justify-content: space-between;
}
.textbox-footer{
    all: unset;
    font-family: Inter;
}
.footer-subscribe-button{
    background-color: #ff8d6d;
    border-style: none;
    border-radius: 30vw;
    font-family: Inter;
    color: #ffffff;
    padding: 0 2vw;
}
.textbox-footer::placeholder{
    color: #005f86;
    font-style: italic;
}
.footer-follow-us-section{
    font-family: Lora;
    font-weight: 700;
    p{
        color: #005f86;
    }      
}
.footer-follow-us-section-icons{
    display: flex;
    gap: 4vh;
    justify-content: center;
    img:hover{
        animation-name: InvertSvgColor;
        animation-duration: 0.3s;
        filter: invert(100%);
    }
}
.main-global{
    background-image: url("../images/arriere-plan.jpg");
}
.footer-global{
    background-image: url("../images/arriere-plan.jpg"), url("../images/vague-footer.png");
    background-blend-mode: overlay;
    background-repeat: no-repeat;
}
.header-global{
    background-image: url("../images/arriere-plan.jpg"), url("../images/vague-navigation.png");
    background-blend-mode: overlay;
    background-size: 100%, 100%;
    background-repeat: no-repeat;
    padding-bottom: 18vh;
}

.header-mobile-textbox{
    position: relative;
    border-radius: 30px;
    width: 100vw;
    height: 10vh;
}
@media screen and (max-width: 1200px){
    .header-external-links{
        display: none;
    }
    .header-nav{
        display: none;
    }
    .header-global{
        height: fit-content;
    }
    .header-mobile-textbox{
        display: none;
        max-width: 30%;
        position: absolute;
        left: 43%;
        top: 7%;
        background-image: url("../images/x-fermer-menu-icone-blanc.svg");
    }
    .mobile-header-nav{
        display: flex;
        justify-content: space-evenly;
        gap: 50vw;
    }
    .mobile-header-nav-left{
        display: flex;
        gap: 4vw;
    }
    .mobile-header-textbox{
        display: flex;
    }
    .mobile-header-textbox:active{
        .header-mobile-textbox{
            display: flex;
        }
    }
    .mobile-burger-menu-toggle{
        display: flex;
    }
    .active{
        display: flex;
    }
    .inactive{
        display: none !important;
    }
    #moblie-hamburger-menu{
        background-color: #f37551;
        display: flex;
        flex-direction: column;
    }
    .smartphone-shop-icon{
        display: none;
    }
    .hamburger-menu-top{
        margin: 2vw 2vw 2vw 6vw;
        display: flex;
        gap: 65vw;
        align-items: center;
    }
    .hamburger-menu-top-controls{
        display: flex;
    }
    .hamburger-menu-options{
        display: flex;
    }
    .hamburger-menu-middle{
        display: flex;
        margin-left: 10%;
        flex-direction: column;
        gap: 2vh;
        font-family: Inter;
        font-size: 20px;
        color: white;
        p, a{
            display: flex;
            align-items: center;
            margin: 0;
        }
    }
    .hamburger-submenu{
        flex-direction: column;
        gap: 1.5vh;
        margin-right: 50vw;
        hr{
            border-color: #ffffff;
            border-width: 1.5px;
            border-style: solid;
            width: 100%;
        }
        p{
            margin-left: 5vw;
        }
    }
    .hamburger-menu-bottom{
        font-family: Inter;
        margin-left: 10%;
        display: flex;
        gap: 40%;
        align-items: center;
        a{
           color: #005f86; 
        }
    }
    .hamburger-menu-external-links{
        display: flex;
        gap: 3vw;
    }


    .footer-nav{
        display: none;
    }
    .footer-external-links{
        display: none;
    }
    .footer-global{
        align-items: center;
        justify-content: space-evenly;
    }
    .footer-email-subscription-textbox{
        height: 9vh;
        width: 43vw;
    }
    .footer-home-icon{
        display: flex;
        margin-top: 12vh;
    }
    .footer-home-icon:active, .footer-globe-icon:active, .footer-facebook-icon:active{
        img{
            animation-name: GrowText;
            animation-duration: 0.3s;
            animation-fill-mode: forwards;
        }
    }
}
@media screen and (max-width: 1080px){
    .mobile-header-nav{
        display: flex;
        justify-content: end;
        gap: 5vw;
    }
    .tablet-shop-icon{
        display: none;
    }
    .smartphone-shop-icon{
        display: flex;
        margin-right: 40vw;
        margin-bottom: 10vh;
    }
    .hamburger-menu-top{
        gap: 9%;
        align-items: center;
    }
    .hamburger-menu-middle{
        margin-bottom: 10vh;
    }
    .hamburger-menu-external-links{
        display: flex;
        gap: 15vw;
        margin-bottom: 7vh;
    }
    .footer-follow-us-label{
        display: none;
    }
    .footer-follow-us-section{
        margin-top: 7%;
    }
    .desktop-subscribe-button{
        display: none;
    }
    .smartphone-subscribe-button{
        display: block;
        padding: 0 5vw;
        font-size: 20px;
    }
}