@media screen and (max-width: 767px) {
    .follow-box {
        display: none;
    }
    #container_1{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    }
    
    #container_left{
        width: 100%;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-top: 100vh;
    }
    
    #container_right{
        position: fixed;
        width: 100%;
        height: 100vh;
        right: 0%;
        z-index: -10;
    }
        #mobile-container-top-nav{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-right: 2% ;
            margin-left: 2%;
            margin-top: -2%;
            padding-top: 2%;
            padding-bottom: 2%;
            height: 0;
        }
        #logo{
            display: none;
        }
        #left-side-mobile-top{
            width: 76%;
        }
            #name-mobile{
                width: 73%;
                position: absolute;
                opacity: 1;
                transition: all .3s ease-out;
            }
            #name-mobile-white{
                width: 73%;
                position: absolute;
                opacity: 1;
                transition: all .3s ease-out;
            }
            #space-bar-mobile-top-nav{
                margin-top: 9%;
                margin-bottom: 2%;
                width: 0%;
                border: 0px solid var(--main-color);
                transition: all .6s ease-out;
            }
            #text-name-mobile-top{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 55%;
            }
                #language-mobile{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    width: 100%;
                    font-size: 1.8vmax;
                    font-family: GTFlexamono_bold;
                    margin-top: 2%;
                    transition: all .3s ease-out;
                }
                #contact-adress-mobile{
                    font-size: 1.8vmax;
                    font-family: GTFlexamono_bold;
                    transition: all .3s ease-out;
                }
        #right-side-mobile-top{
            width: 20%;
        }
            .logo-wrapper-mobile-container{
                position: relative;
                width: 100%;
                height: 100%;
            }
            #logo-mobile, 
            #logo-mobile-white{
                position: absolute;
                width: 100%;
                height: auto;
                top: 0;
                left: 0;
            }
        #space-bar-mobile-top{
            width: 0%;
            margin-left: 2%;
            margin-top: 0%;
            border: 0px solid var(--main-color);
            transition: all .6s ease-out;
            display: block;
        }
        #space_bar{
            display: none;
            width: 100%;
            border-top: 2px solid var(--main-color);
            margin-top: 3%;
            margin-bottom: 3%;
        }
        #nav{
            display: none;
        }
        #nav-mobile{
            flex: 1 1 0px;
            width: 96%;
            display: flex;
            position: fixed;
            flex-direction: column;
            height: 20%;
            bottom: 12%;
            transition: all .5s ease-out, bottom 0s ease-out;
            font-family: GTFlexamono_bold;
            font-size: 1.8vmax;
            z-index: 10;
        }
        #arrow-mobile-nav-bottom{
            text-align: right;
            z-index: 20000;
        }
            #arrow-blue-mobile{
                position: absolute;
                rotate: 0deg;
                width: 5%;
                transition: rotate .2s ease-out;
                top: -15%;
                right: 0;
            }
            #arrow-white-mobile{
                position: absolute;
                rotate: 0deg;
                width: 5%;
                transition: rotate .2s ease-out;
                top: -15%;
                right: 0;
            }
        #line-mobile-nav-bottom{
            width: 0%;
            padding-top: 0px;
            border: 0px solid var(--main-color);
            margin-top: 3%;
            transition: all .6s ease-out;
        }
        #link-mobile-nav-bottom{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            height: 0%;
            transition: height .3s ease-out;
            background-color: var(--second-color);
            padding-top: 0%;
            padding-bottom: 0%;
        }
        #nav_right-mobile{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text-align: right;
        }
        #nav_center{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 25%;
        
        }
        #nav_left-mobile{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
    
        
        }
            #nav_left_top{
                height: 50%;
                background: var(--main-color);
            }
            #nav_left_bottom{
                height: 50%;
                background: red;
            }
            .nav_text_animated-mobile{
                letter-spacing: 0em;
                opacity: 1;
                transition: all .5s ease-out;
            }
            .nav_text-mobile{
                letter-spacing: 0em;
            }
            .nav_text_animated-mobile:hover{
                letter-spacing: 0.1em;
                overflow: visible;
                white-space: nowrap;
            }
        #info{
            display: none;
        }
        #info-mobile{
            z-index: -1;
            position: sticky;
            top: 90%;
            width: 100%;
            padding-top: 2%;
            padding-bottom: 2%;
            border-top: 2px solid var(--main-color);
            border-bottom: 2px solid var(--main-color);
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            letter-spacing: 0.1em;
            font-family: GTFlexamono_bold;
            font-size: 1.3vmax;
        }
        #text-info-bar{
/*            mix-blend-mode: hard-light;	*/
        }
            #type_project{
                margin: 0;
                flex: 1 1 auto;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            #soft_project{
                flex: 1 1 auto;
                margin: 0;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                text-align: right;
            }
            #text-info-bar{
                margin-top: 1.5%;
                margin-bottom: 1.5%;
            }
        .container{
            width: 95%;
        }
        .block-left{
            display: none;
        }
        .block-right{
            width: 100%;
            font-size: 2vmax;
            font-family: GTFlexa_regular;
            line-height: 120%;
            letter-spacing: 1px;
            display: flex;
            flex-direction: column;
        }
            .not-mobile{
                display: none;
            }
    #mobile-project-info{
        display: flex;
        width: 100%;
        flex-direction: column;
        justify-content: space-between;
        letter-spacing: 0.1em;
        padding-top: 2%;
        padding-bottom: 100%;
    }
        #intext-mobile-info{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
        }
            #inname-project-mobile{     
                flex: 1 1 0px;
            }
                #title_project-image-mobile{
                    width: 100%;
                }
            #incomment-project-mobile{
                flex: 1 1 0px;
                font-family: GTFlexa_light;
                font-size: 1.3vmax;
                text-align: right;
            }
        #inline-project-mobile{
            margin-top: 2%;
            border: 1px solid var(--main-color);
        }
        .video-project{
            margin-bottom: 0%;
        }
        #videoproject_4{
            display: block;
        }
        #iframevideoproject_4{
            width: auto;
        }

#info-bar-top{
    display: none;
}

/* Footer */
#container-footer{
    display: none;
}
#container-footer-mobile{
    position: absolute;
    z-index: 100000;
    background-color: #2333ad;
    color: white;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-family: GTFlexa_regular;
    font-size: 1.3vmax;
    letter-spacing: 0.1em;
    line-height: 135%;

}
    #footer-mobile-first{
        width: 94%;
        height: 20vh;
        margin: 3%;
    }
    #footer-mobile-second{
        margin: 3%;
        width: 94%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
        #footer-mobile-message-thanks-top{
            width: 70%;
        }
        #footer-mobile-message-thanks-bottom{
            display: block;
        }
    #footer-mobile-third{
        margin: 3%;
        width: 94%;
        display: flex;
        flex-direction: column;
    }
        #footer-contact-message{
            padding-top: 8%;
            padding-bottom: 8%;
        }
        .footer-mobile-row{
            display: flex;
            padding-bottom: 8%;
        }
            #footer-date-link{
                width: 65%;
                padding-left: 0;
            }
            #footer-link-social{
                padding-left: 0;
            }
        #container-footer-right-part-name{
            padding-top:0;
            display: flex;
            width: 100%;
            flex-direction: row;
            justify-content: flex-start;	
            padding-bottom: 8%;
        }
            #footer-work-field{
                width: 65%;
            }
    #footer-mobile-fourth{
        margin: 3%;
        display: flex;
        width: 94%;
        justify-content: space-between;
        align-items: flex-end;
    }
        #footer-mobile-copyright{
            text-align: left;
        }
        #footer-mobile-info-bottom-right{
            text-align: right;
        }
.square-footer{
    background-color: white;
    height: 1vw;
    width: 1vw;
    border: none;
    outline: none;
    display: inline-flex;
    margin-right: 5vw;
}
#container-footer-mobile a {
	/* Vos styles ici */
	color: white; /* Exemple */
	text-decoration: none;
}
#container-footer-mobile a:visited {
	/* Vos styles ici */
	color: grwhiteeen; /* Exemple */
	text-decoration: none;
}

#container-footer-mobile a:link {
	/* Vos styles ici */
	color: white; /* Exemple */
	text-decoration: none;
}
#footer-time-mobile{
    display: inline-flex;
}
#footer-time-badge-mobile{
    margin-left: 2vw;
    width: 12px;          	  /* Taille de la pastille  */
    height: 12px;             /* Taille de la pastille  */
    border-radius: 50%;  	  /* Rend la pastille ronde */
    background-color: red;  /* Couleur par défaut     */
}

/* Footer */
.logo-blue-wrapper-mobile{
    opacity: 0;
}
.logo-white-wrapper-mobile{
    opacity: 1;
}
#logo-white-wrapper {
    display: none;
}

#logo-above {
    display: none;
}
#logo-white-wrapper-mobile {
    display: block;
	position: fixed; /* Le logo suit le scroll */
	top: 0;
	left: 0;
	width: 100px; /* Taille du logo */
	height: 100px;
    z-index: 100001;
    display: block;
	pointer-events: none;
}

#logo-above-mobile {
    display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	clip-path: inset(100% 0 0 0); /* Par défaut invisible */
	transition: clip-path 0.075s ease-out;
}
#name-white-wrapper-mobile {
	position: fixed; /* Le logo suit le scroll */
    z-index: 100001;
	top: 0;
	left: 0;
	width: 100px; /* Taille du logo */
	height: 100px;
	pointer-events: none;
    display: block;
}

#name-mobile-above {
    display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	clip-path: inset(100% 0 0 0); /* Par défaut invisible */
	transition: clip-path 0.075s ease-out;
}

}

@media screen and (min-width: 1800px) {
    #info-bar-top{
        position: fixed;
        top: 2%;
        width: 73.95%;
        display: flex;
        justify-content: space-between;
    
    }
    #container_left{
        width: 77%;
    }
    #container_right{
        width: 20%;
    }
    #nav{
        font-size: .6vmax;
    }
}