html {
    font-size: max(12px, min(16px, calc(10px + 0.5vw)));
    overflow-x: hidden;
}

body {
    margin: 0;
}

.container {
    box-sizing: border-box;
    height: auto;
    width: 100%;

    font-family: "Annie Use Your Telescope", cursive;
    font-family: "Indie Flower", cursive;

    display: grid;

    grid-template-columns: 1fr 2fr;
    grid-template-rows: 45vw 1fr auto;

    background-image: linear-gradient(
        to right,
        rgb(76, 172, 236),
        rgb(230, 243, 245)
    );
}

.bloc-superieur {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;

    display: grid;

    grid-template-columns: 1fr 6fr 1fr;
    grid-template-rows: 1fr 3fr 1fr;
    z-index: 1;
}

.bloc-superieur-background-video {
    grid-row-start: 1;
    grid-column: 1/3;
}

.bloc-superieur-background-video .background-video {
    width: 100%;
    object-fit: cover;
    z-index: -1;
}

.bloc-superieur .section-logo {
    grid-row: 1/1;
    grid-column: 1/1;
}

.bloc-superieur .section-logo .logo {
    width: 150%;
    height: 160%;
    cursor: pointer;
    transform: translate(-10%, -10%);
}

.bloc-superieur .section-navigation {
    grid-row: 1;
    grid-column: 2/3;
    grid-template-rows: auto 2fr;
    display: grid;
    letter-spacing: 2px;
}

.bloc-superieur .navigation-menu li {
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.212);
    background-color: rgba(115, 142, 197, 0.438);
    border: 1px solid rgba(0, 0, 0, 0.164);
    float: left;
}

.logout_btn {
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
    font-family: "Annie Use Your Telescope", cursive;
    font-family: "Indie Flower", cursive;
}

.bloc-superieur .navigation-menu a {
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.212);
    background-color: rgba(115, 142, 197);
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
    height: 2.5vw;
    display: flex;
    align-items: center; /* vertically aligns the content */
    justify-content: center;
    font-size: clamp(1rem, 0.5rem+ 3vw, 1.5rem);
}

div .navigation-menu ul > li {
    display: inline-block;
    zoom: 1;
    display: inline;
    overflow: hidden;
}

/* Navigation bar sub menus*/
.sub-menu-1 {
    display: none;
}

/* Navigation bar sub menus end*/

.bloc-superieur .connexion {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

div .navigation-menu ul > li {
    display: inline-block;
    zoom: 1;
    display: inline;
    background-color: #747373;
    overflow: hidden;
}

div .navigation-menu li a {
    display: block;
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
}

div .navigation-menu li a:hover {
    /* background-color: #3a3535; */
}

div .navigation-menu li a:hover {
    /* background-color: rgba(115, 142, 197, 0.705); */
}

.navigation-menu li,
.navigation-menu li a {
    /* background-color: transparent !important; */
}

/* Navigation bar sub menus*/
.sub-menu-1 {
    display: none;
}

.bloc-superieur .navigation-menu a {
    background-color: #4e77a7;
    opacity: 1;
}

.sub-menu-2 {
    display: none;
}
/* Navigation bar sub menus end*/

/* Navigation menu mobile */
#hamburger-menu {
    text-decoration: none;
    color: white;
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 1.35rem;
}

#menu-mobile {
    margin-left: auto;
    width: fit-content;
    background: linear-gradient(
        to right,
        rgba(124, 190, 235, 0.85),
        rgba(76, 172, 236, 0.95)
    );

    z-index: 4;
    position: fixed;
    top: 3rem;
    right: 0;

    overflow-y: auto;
    max-height: 90vh; /* Limit the height to fit within the viewport */

    transform: translateX(
        100%
    ); /* Initially, move the menu out of the viewport to the right */
    transition: transform 0.9s ease;
}

/* Optional: Customize the scrollbar for a better look */
#menu-mobile,
.sub-menu-1,
.sub-menu-2 {
    scrollbar-width: none; /* For Firefox */
}

#menu-mobile.open {
    transform: translateX(0); /* Move the menu back to its original position */
    transition: transform 0.9s ease; /* Transition both transform and visibility properties */
}

.bloc-superieur {
    z-index: 4;
}

.bloc-superieur #navigation-menu-mobile li {
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.212);
    background-color: rgba(115, 142, 197, 0.438);
    border: 1px solid rgba(0, 0, 0, 0.164);
    float: left;
    padding: 0.3rem;
}

#header-top-right {
    display: flex;
    flex-direction: row;
}

.bloc-superieur #menu-mobile a {
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.212);
    background-color: rgba(115, 142, 197);
    color: white;
    text-align: center;
    padding: 12px;
    padding-right: 2rem;
    padding-left: 2rem;
    text-decoration: none;
    height: 3vw;
    display: flex;
    flex-direction: row;
    align-items: center; /* vertically aligns the content */
    justify-content: center;
}

#menu-mobile ul > li {
    display: inline;
    zoom: 1;
    background-color: #747373;
    overflow: hidden;
}

#menu-mobile li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 12px;
    text-decoration: none;
}

#menu-mobile li a:hover {
    /* background-color: #3a3535; */
}

#menu-mobile li a:hover {
    /* background-color: rgba(115, 142, 197, 0.705); */
}

#menu-mobile li,
#menu-mobile li a {
    /* background-color: transparent !important; */
}

#menu-mobile ul {
    padding: 0;
    margin: 0.1rem;
}
/* Navigation menu mobile end */

@media screen and (min-width: 721px) {
    #hamburger-menu {
        display: none;
    }

    #menu-mobile {
        display: none !important;
    }

    #mainPageButton {
        display: none;
    }

    #langue-site select {
        margin-left: 1rem;
        margin-right: 10vw;
        margin-top: 1.2rem;
        padding: 0.2rem;
        border-radius: 15%;
    }

    .bloc-superieur .navigation-menu li:first-child {
        border-radius: 6px 0 0 6px;
    }

    .bloc-superieur .navigation-menu li:last-child {
        border-radius: 0 6px 6px 0;
    }

    .footer-right-bottom {
        display: flex;
        flex-direction: row;
    }

    .footerBtnLinks {
        padding: 10px;
        font-size: 1rem;
        text-align: center;
        margin: auto auto;
    }

    #footerButtons {
        display: flex;
        flex-direction: row;
        margin-right: 3%;
    }

    .bloc-superieur-background-video .background-video {
        border-radius: 8px;
    }

    .footer {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .footer img {
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.7);
    }

    img.logo {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    .hover:hover .sub-menu-1 {
        position: absolute;
        display: flex;
        flex-direction: column;
        margin-top: 0;
        margin-left: 0;
        background: white;
        word-wrap: break-word;
        border-top: 1px solid #858383;
        transition-delay: 2s;
    }
    .navigation-menu ul li:hover .sub-menu-1 {
        position: absolute;
    }
    .navigation-menu ul li:hover .sub-menu-1 ul {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: auto auto;
        padding-inline-start: 0;
    }
    .navigation-menu ul li:hover .sub-menu-1 ul li {
        width: 15rem;
        border-bottom: 1px solid #a5a2a2;
        background: #747373;
        border-radius: 0;
        text-align: left;
    }
    .navigation-menu ul li:hover .sub-menu-1 ul li:last-child {
        border-bottom: none;
    }
    .sub-menu-2 {
        display: none;
    }
    .hover-2:hover .sub-menu-2 {
        position: absolute;
        display: flex;
        flex-direction: column;
        margin-top: -17%;
        margin-left: 100%;
        background: white;
        font-size: 1rem;
        word-wrap: break-word;
    }

    .hover:hover .sub-menu-1 {
        position: absolute;
        display: flex;
        flex-direction: column;
        margin-top: 0;
        margin-left: 0;
        background: white;
        font-size: 1rem;
        word-wrap: break-word;
        border-top: 1px solid #858383;
    }
    .navigation-menu ul li:hover .sub-menu-1 {
        position: absolute;
    }
    .navigation-menu ul li:hover .sub-menu-1 ul {
        display: flex;
        align-items: center;
        flex-direction: column;
        margin: auto auto;
        padding-inline-start: 0;
    }
    .navigation-menu ul li:hover .sub-menu-1 ul li {
        width: 15rem;
        border-bottom: 1px solid #a5a2a2;
        background: #747373;
        border-radius: 0;
        text-align: left;
    }

    .navigation-menu ul li:hover .sub-menu-1 ul li:last-child {
        border-bottom: none;
    }

    /* Override sub-menu background color */
    .bloc-superieur .navigation-menu ul li:hover .sub-menu-1,
    .bloc-superieur .navigation-menu ul li:hover .sub-menu-1 ul li {
        /* background: transparent; */
    }

    /* Override sub-menu background color */
    .bloc-superieur .navigation-menu ul li:hover .sub-menu-2,
    .bloc-superieur .navigation-menu ul li:hover .sub-menu-2 ul li {
        /* background: transparent; */
    }

    .dark-mode-switch {
        margin-right: 1rem;
        margin-top: 1rem;
        position: absolute;
        right: 4rem;
    }

    .switch {
        position: absolute;
        cursor: pointer;
        width: 60px; /* Augmenté */
        height: 30px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* background-color: lightblue; */
        transition: 0.4s;
        border-radius: 34px;
        border: 2px solid white;
    }

    .slider::before {
        position: absolute;
        content: "";
        height: 22px; /* Augmenté */
        width: 22px; /* Augmenté */
        left: 3px; /* Ajusté pour centrage */
        bottom: 2px;
        background-color: darkgray;
        transition: 0.4s;
        border-radius: 50%;
        transform: translateX(0);
    }

    .dark-mode-switch #toggle.dark-mode + .slider {
        background-color: #1e3a5f;
    }

    .dark-mode-switch #toggle.dark-mode + .slider::before {
        transform: translateX(28px);
    }
}

@media screen and (max-width: 720px) {
    .bloc-superieur .section-logo .logo {
        display: none;
    }

    .section-navigation .navigation-menu {
        display: none;
    }

    #langue-site select {
        margin-left: 1rem;
        margin-right: 5vw;
        margin-top: 1rem;
        padding: 0.05rem;
        border-radius: 15%;
    }

    .bloc-superieur {
        grid-template-columns: 1fr 5fr 2fr !important;
    }

    #mainPageButton {
        display: block;
    }

    .section-navigation {
        grid-column: 1/3 !important;
        letter-spacing: 1px;
    }

    .navigation-menu a {
        padding: 5px !important;
        height: 2vw;
    }

    .navigation-menu ul {
        margin-top: 2%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        flex-direction: row;
    }

    .footer-right-bottom {
        font-size: 0.8rem;
        display: grid;
        grid-template-rows: 2fr 1fr;
    }

    #copyright {
        grid-row: 2;
    }

    #footerButtons {
        grid-row: 1;
        display: flex;
        flex-direction: row;
        margin: 0 auto;
    }

    .footer-right-bottom .footerBtnLinks {
        grid-row: 1;
        padding: 10px;
        margin: auto 2%;
        text-align: center;
        font-size: 0.85rem;
    }

    .sub-menu-1 a {
        font-size: min(4vw, 1rem) !important;
    }

    .sub-menu-1 {
        display: block !important;
    }

    .dark-mode-switch {
        margin-right: 10rem;
        margin-top: 1rem;
    }

    .switch {
        position: absolute;
        cursor: pointer;
        width: 40px; /* Augmenté */
        height: 20px;
    }

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        /* background-color: lightblue; */
        transition: 0.4s;
        border-radius: 34px;
        border: 2px solid white;
    }

    .slider::before {
        position: absolute;
        content: "";
        height: 12px; /* Augmenté */
        width: 12px; /* Augmenté */
        left: 2px; /* Ajusté pour centrage */
        bottom: 2px;
        background-color: darkgray;
        transition: 0.4s;
        border-radius: 50%;
        transform: translateX(0);
    }

    .dark-mode-switch #toggle.dark-mode + .slider {
        background-color: #1e3a5f;
    }

    .dark-mode-switch #toggle.dark-mode + .slider::before {
        transform: translateX(19px);
    }
}

.bloc-milieu {
    z-index: 2;
}

.footer {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 3;
    text-align: justify;

    display: grid;

    /*grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: 6fr 1fr;*/
    background: linear-gradient(
        to right,
        rgb(96, 186, 246),
        rgb(199, 230, 235)
    );
}

.footer .footer-right {
    text-align: center;
}

.footer .footer-left {
    grid-template-rows: 0.7fr 1fr;
    grid-template-columns: 1fr;
    display: grid;
    align-items: center;
    margin: auto;
    text-align: center;
}

.footer .footer-left .titre-footer {
    font-size: 1.2rem;
}

.footer .footer-left .paragraphe-1 {
    width: min(60vw, 35rem);
    font-size: 1rem;
}

.footer .footer-right .titre-1 {
    grid-row-start: 1;
    grid-column-start: 2;
    font-size: 1.2rem;
    margin: 1rem;
}

.footer .footer-right .instagram-logo {
    grid-row-start: 2;
    grid-column-start: 1;
    height: 2.7rem;
    width: 2.7rem;
    margin-bottom: 1.6rem;
}

.footer .footer-right .youtube-logo {
    grid-row-start: 2;
    grid-column-start: 2;
    height: 2.7rem;
    width: 2.7rem;
    margin-bottom: 1.6rem;
}

.footer .footer-right .instagram-logo:hover {
    box-shadow: 1px 1px 1px 0px black;
}

.footer .footer-right .youtube-logo:hover {
    box-shadow: 1px 1px 1px 0px black;
}

.footerBtnLinks #login {
    margin: 10px;
    margin-right: 1rem;
}

.footerBtnLinks,
.footerBtnLinks:visited,
.footerBtnLinks:hover,
.footerBtnLinks:active {
    color: blue;
}

.footer .vl {
    border-left: 1px solid white;
    height: 60%;
    margin: auto 0;
}

.footer .vl:last-child {
    border-left: 1px solid white;
    height: 60%;
    margin: auto 0;
    margin-right: 1%;
}

.footer #copyright {
    float: left;
    font-weight: normal;
    margin: auto auto 1% 2%;
}

#pageTitle {
    font-size: 1.6rem;
    max-height: 2.5rem;
    font-weight: bold;
    padding: 1.1rem;
    margin: 1rem;
    border-radius: 4px;
    background: linear-gradient(
        to right,
        rgb(139, 202, 245),
        rgb(193, 241, 241)
    );
}

.slider.no-transition {
    transition: none !important;
}

.slider.no-transition::before {
    transition: none !important;
}

.dark-mode-switch {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.4s ease;
}

.dark-mode-switch.visible {
    visibility: visible;
    opacity: 1;
}