/**Colors**/
:root{
    --dark-black : #090A0B;
    --white : #F5F5F5;
    --grey : #9CA1A5;
    --opacity-grey : rgba(156,161,165,0.25);
    --line-grey : rgba(156,161,165,0.5);
    --yellow : #F1B569;
    --text-grey : #DADADA;
}


/**Font**/
@font-face {
    font-family: 'Limelight';
    src: url('../font/Limelight/Limelight-Regular.woff2') format('woff2'),
         url('../font/Limelight/Limelight-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('../font/LibreFranklin/LibreFranklin-Regular.woff2') format('woff2'),
         url('../font/LibreFranklin/LibreFranklin-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Libre Franklin';
    src: url('../font/LibreFranklin/LibreFranklin-SemiBold.woff2') format('woff2'),
         url('../font/LibreFranklin/LibreFranklin-SemiBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}






/**Nav Bar */
header{
    display: flex;
    justify-content: center;
}

.nav_bar{
    display: flex;
    align-items:center;
    justify-content:space-between;
    position: absolute;
    width: 90vw;
    margin-top: 0.5rem;
    z-index: 2;
}
#navigation_bar_links{
    display: flex;
    justify-content: space-between;
    width: 50vw;
}
#navigation_bar_links a {
    font-family: 'Limelight';
    color: var(--white);
    font-size: 1.5rem;
    text-decoration: none;
    transition: 0.5s ease-in-out;
}
#navigation_bar_links a:hover{
    text-decoration: underline;
}
#logo_link{
    font-size: 2.2rem;
    color: var(--white);
    transition: 0.1s ease-in-out;
}
#logo_link:hover{
    color: var(--yellow);
}






/** Nav Layour **/
.Header_Layour nav{
    width: 95vw;
    margin-top: 1.5rem;
    position: absolute;
    z-index: 2;
}
.Header_Layour nav .icons{
    color: var(--white);
    font-size: 2.5rem;
}
.Header_Layour nav .icons:hover{
    color: var(--opacity-grey);
    font-size: 2.5rem;
}

/**Informations**/
.container_informations{
    width: 100vw;
    height: auto;
}
.container_informations .container_Title_Infos{
    width: 90vw;
    height: 80%;
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 5rem;
}
#Welcome{
    height: 90vh;
    background-color: var(--dark-black);
    display: flex;
    justify-content: center;
}
#Video_Size{
    min-height: 90vh;
    min-width: 100vw;
    object-fit: cover;
    position: relative;
    background: no-repeat;
    background-size: cover;
    z-index: 0;
}
#Welcome .gradient{
    width: 100%;
    height: 90vh;
    position: absolute;
    background: linear-gradient(180deg, rgba(255,255,255,0) 75%, rgba(9,10,11,1) 100%);
    z-index: 1;
}
#Projets::before{
    content: " ";
    width: 90vw;
    height: .1em;
    background-color: var(--line-grey);
    border-radius: 10px;
    position: absolute;
}
#Projets{
    background-color: var(--dark-black);
    display: flex;
    height: auto;
    justify-content: center;
    margin-top: 5rem;
    margin-bottom: 5rem;
}
#A_Propos::before{
    content: " ";
    width: 90vw;
    height: .1em;
    background-color: var(--line-grey);
    border-radius: 10px;
    position: absolute;
}
#A_Propos{
    background-color: var(--dark-black);
    display: flex;
    justify-content: center;
}
#Contact{
    background-position: center;
    background-blend-mode:hard-light;
    background-color: rgba(245, 245, 245, 0.5);
    display: flex;
    justify-content: center;
    height: auto;
    padding-bottom: 5rem;
}
#Go_up{
    position: fixed;
    bottom: 5px;
    right: 5px;
    font-size: 2.5rem;
    z-index: 1;
}






/**Projets**/
.Title_Section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5rem;
}

.Title_Section h2{
    font-family: 'Limelight';
    color: var(--white);
    font-size: 2.5rem;
}
.icons_title{
    font-size: 3.5rem;
    color: var(--yellow);
    margin-left: 1rem;
    transition: 0.75s ease-in-out;
}
.icons_title:hover{
    transform: rotateZ(360deg);
}

.Project_APropos{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.Project_APropos .links_Projets{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.Project_APropos .links_Projets .image_Projets{
    width: 28rem;
    height: 17rem;
    background-position: center;
    background-size: cover;
    border-radius: 0.5rem;
    border: 0.05rem var(--grey) solid;
}
.Project_APropos .links_Projets .Title_Projets_Section{
    color: var(--white);
    font-family: 'Libre Franklin';
    font-weight: bold;
    font-size: 1.2rem;
    transition: 0.2s ease-in-out;
}
.Project_APropos .links_Projets:hover .Title_Projets_Section{
    color: var(--yellow);
}






/**A Propos**/
.Photo_Profile{
    width: 30rem;
    height: 35rem;
    border-radius: 0.5rem;
    background-position: center;
    background-size: cover;
    border: 0.05rem var(--white) solid;
}
.border{
    content: " ";
    width: 0.1rem;
    height: 20rem;
    background-color: var(--line-grey);
    border-radius: 10px;
}
#A_Propos_container{
    margin-bottom: 5rem;
}
.Qui_suis_je_container{
    width: 50rem;
    height: 25rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}
.SubTitle_Section{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.SubTitle_Section h2{
    font-family: 'Limelight';
    color: var(--white);
    font-size: 1.5rem;
}
.SubTitle_Section .icons_title{
    font-size: 2.25rem;
}
.Paragraphe{
    color: var(--text-grey);
    font-size: 1rem;
    width: 90%;
    height: auto;
    font-family: 'Libre Franklin';
    line-height: 1.5rem;
}
.Send_Class{
    padding: 0.5rem 2rem 0.5rem 2rem;
    background-color: #F1B569;
    color: var(--dark-black);
    font-family: 'Limelight';
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0.2rem;
    transition: 0.2s ease-in-out;
}
.Send_Class:hover{
    background-color: var(--opacity-grey);
    color: var(--text-grey);
}






/**Contact**/
#Contact_Title {
    margin-top: 1rem;
    margin-bottom: 0;
}
#Contact_Title h2{
    color: var(--dark-black);
}
#Contact_Title .icons_title{
    margin: 0px;
    margin-right: 1rem;
}
.Description_contact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    color: var(--grey);
    font-family: 'Libre Franklin';
    font-weight: bold;
    margin-bottom: 2rem;
}
.width{
    width: 30rem;
    height: 0.1rem;
}
.formulaire{
    width: 50rem;
    height: 40rem;
    border: 0.2rem var(--grey) solid;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#formulaire_Title{
    color: var(--dark-black);
    display: flex;
    justify-content: center;
    font-size: 2rem;
    font-family: 'Limelight';
}
.formulaire_input{
    width: 80%;
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.formulaire_input textarea{
    background-color: var(--dark-black);
}
.formulaire_input input, textarea{
    background-color: var(--dark-black);
    border-radius: 0.5rem;
    border: none;
    padding: 1rem 1rem 1rem 1rem;
    resize: none;
    width: 100%;
    color: var(--text-grey);
    font-family: 'Libre Franklin';
}
.formulaire_input input::placeholder, textarea::placeholder{
    color: var(--text-grey);
    font-family: 'Libre Franklin';
}
.formulaire_input .formulaire_name_forename{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.formulaire_input .formulaire_name_forename input{
    width: 40%;
}
#Send_form{
    width: 10rem;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px;
}
#Send_form:hover{
    background-color: var(--dark-black);
    color: var(--yellow);
}
#Send_form:hover .Send_icon{
    color: var(--yellow);
}

.Send_icon{
    font-size: 1.25rem;
    margin-left: 0.5rem;
    color: var(--dark-black);
}





/**Footer**/
footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--dark-black);
}

footer::before{
    content: " ";
    display: block;
    width: 90vw;
    height: .1em;
    background-color: var(--line-grey);
    border-radius: 10px;
}
footer .line_container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
}
footer .icons_footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 12vw;
}
.icons{
    font-size: 3rem;
    color: var(--yellow);
    transition: 0.1s ease-in-out;
}
.icons:hover{
    color: var(--opacity-grey);
}
footer p{
    color: var(--grey);
    margin: 0px;
    margin-top: 0.5rem;
}





/**##### Infographie Projets ######**/
.container_filtre_Projets{
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
}
.container_Filtre{
    width: 90vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2rem;
    margin-bottom: 5rem;
}
.container_Filtre::before{
    content: " ";
    width: 90vw;
    height: .1em;
    background-color: var(--line-grey);
    border-radius: 10px;
    position: absolute;
    top: 0px;
}
.container_Filtre p{
    padding: 0.4rem 1.5rem 0.4rem 1.5rem;
    margin-right: 1rem;
    font-size: 1.2rem;
    font-family: 'Libre Franklin';
    border-radius: 0.5rem;
    border: 0.1rem var(--line-grey) solid;
    color: var(--line-grey);
    cursor: pointer;
    transition: 0.2s ease-in-out;
}
.container_Filtre p:hover{
    background-color: var(--yellow);
    color: var(--dark-black);
}
.grid{
    width: 90vw;
    height: auto;
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr; 
    grid-template-rows: auto; 
    gap: 5rem 1rem; 
    justify-items: stretch;
    align-items: stretch;
    margin-bottom: 5rem;
}
.grid .links_Projets{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.grid .links_Projets .image_Projets{
    width: 20rem;
    height: 27rem;
    position: relative;
}
.grid .links_Projets .image_Projets .image_Projets_miniature{
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: 0.5rem;
    border: 0.01rem var(--line-grey) solid;
    position: absolute;
    transition: 0.2s ease-in-out;
}
.grid .links_Projets .Title_Projets_Section{
    font-family: 'Libre Franklin';
    font-weight: bold;
    font-size: 1rem;
    transition: 0.2s ease-in-out;
}
.White_Section{
    color: var(--white); 
}
.grid .links_Projets:hover .image_Projets_miniature{
    filter: blur(3px);
}
.grid .links_Projets:hover .White_Section{
    color: var(--opacity-grey);
}
.Watch{
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    position: absolute;
}
.Watch .watch_icon{
    opacity: 0;
    font-size: 2.5rem;
    color:var(--white);
    padding: 1.5rem;
    border-radius: 50rem;
    border: 0.1rem var(--white) solid;
    background-color: var(--line-grey);
    transition: 0.2s ease-in-out;
}
.grid .links_Projets:hover .Watch{
    border: 0.01rem var(--line-grey) solid;
}
.grid .links_Projets:hover .watch_icon{
    opacity: 100%;
}





/**##### Photos #####**/
#smart_grid {
    display: grid;
    grid-gap: 2.5rem;
    -ms-grid-row-align: center;
    grid-template-columns: repeat(3, 28rem);
    grid-auto-flow: dense;
}
#smart_grid .smart_image{
    width: 100%;
    height: 28rem;
}

#grid_photos{
    display: none;
}

/**##### Photo Description #####**/
.photos_background_viewer{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-position:center; 
    background-size: cover;
    filter: blur(7.5px) brightness(0.8);

}

.photo_image_viewer{
    border-radius: 0.7rem;
    border: 0.1rem solid var(--white);
    box-shadow: 0px 0px 12px 1px var(--white);
    background-position: center;
    background-size: cover;
    z-index: 2;
}

.photo-selector{
    width: 100rem;
    height: 10rem;
    margin-top: 2.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.photo_image_viewer::-webkit-scrollbar { 
    display: none; 
}

.photo-symbol{
    height: 7.5rem;
    width: 7.5rem;
    margin-right: 1rem;
    display: inline-block;
    background-position: center;
    background-size: cover;
    border: 0.1rem solid var(--white);
    border-radius: 0.5rem;
    transition: 0.2s ease-in-out;
    cursor:pointer;
}
.photo-symbol:hover{
    opacity: 75%;
}
.photo-symbol:first-child{
    margin-left: 5rem;
}

.photo-selector::-webkit-scrollbar {
    scrollbar-width: thin;
    width: 0.05rem; /* Width of the scrollbar */
}

.photo-selector::-webkit-scrollbar-track {
    background-color: var(--dark-black); /* Color of the scrollbar track */
}

.photo-selector::-webkit-scrollbar-thumb {
    background-color: var(--grey); /* Color of the scrollbar thumb */
    border-radius: 50px; /* Rounded corners of the scrollbar thumb */
    opacity: 20%;
}

.photo-selector::-webkit-scrollbar-thumb:hover {
    background-color: var(--grey); /* Color of the scrollbar thumb on hover */
}


/**##### Projet Description #####**/
.Photo_Description{
    width: 90vw;
    height: 40rem;
    margin-top: 2.5rem;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.Photo_Description .Photo{
    width: 30rem;
    height: 100%;
    border: 0.05rem var(--text-grey) solid;
    border-radius: 0.5rem;
    background-position: center;
    background-size: cover;
}
.Description .width{
    width: 100%;
}
.Photo_Description .Description{
    width: 50rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.Description .Title_Projet{
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 2rem;
}
.width_Description_Title{
    width: 30rem;
    justify-content: flex-start;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}
.width_Description_Title h2{
    font-size: 1.5rem;
    margin: 0;
    font-family: 'Limelight';
}
.width_Description_Title .icons_title{
    font-size: 2.25rem;
}
.Description_P{
    margin-top: 0;
}
.external_links{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--text-grey);
    text-decoration: none;
    font-family: 'Libre Franklin';
    transition: 0.2s ease-in-out;
}
.external_links p{
    margin: 0;
    font-size: 1rem;
 }

.external_links .icons_title{
    font-size: 2rem;
    margin-right: 0.5rem;
    margin-left: 0;
}
.external_links:hover{
    color: var(--opacity-grey);
}
.Badges{
    margin-top: 5rem;
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.Badges .Description_contact {
    width: 85vw;
    margin-bottom: 0.5rem;
}
.Badges .width{
    width: 30rem;
}
.Badges .Description_contact h2{
    width: auto;
    color: var(--text-grey);
    font-family: 'Limelight';
}
.badge_container{
    width: 90%;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5rem;
}
.badge_container .border{
    height: 70%;
}
.Badge_Items{
    width: 30%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.Badge_unique{
    width: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.Badge_unique p{
    color: var(--grey);
    font-size: 1rem;
    font-family: 'Libre Franklin';
    margin: 0;
    margin-top: 0.5rem;
}
.Badge_unique .icons_title{
    font-size: 6rem;
    margin: 0;
}
.suggestion{
    width: 100%;
    height: 10rem;
    background-color: red;
    flex-direction: column;
    align-items: center;
}
.suggestion .width{
    width: 30rem;
}
.autres_projets{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30rem;
}
.autres_projets h2{
    color: var(--dark-black);
    font-family: 'Limelight';
    font-size: 2rem;
    margin-left: 1rem;
}
.autres_projets .icons_title{
    font-size: 4rem;
}
.suggestion .Description_contact{
    width: 90vw;
    margin-top: 2.5rem;
    margin-bottom: 5rem;
}
.black_grid .image_Projets{
    filter: drop-shadow(5px 5px 8px rgba(0,0,0,0.25));
}
.Black_Title_Projets{
    color: var(--dark-black);
    transition: 0.2s ease-in-out;
}
.grid .links_Projets:hover .Black_Title_Projets{
    color: var(--grey)
}
.suggestion .BottomWidth{
    width: 90vw;
}


/**######## Vidéo ########**/
.grid_vidéo{ 
    grid-template-columns: 1fr 1fr; 
}
.grid .links_Projets .Miniature_Video{
    width: 35rem;
    height: 22.5rem;
}
/**######## Vidéo Description ########**/
.video_viewer{
    width: 85vw;
    height: 40rem;
    margin-top: 2.5rem;
    border: 0.05rem var(--white) solid;
    border-radius: 0.5rem;
}
.Description_video{
    width: 90vw;
    margin-top: 5rem;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.Video_Title{
    font-size: 3rem;
    color: var(--white);
    margin-bottom: 2rem;
}
.Description_video .width{
    width: 100%;
    margin-bottom: 2.5rem;
}
#Top_Width{
    display: block;
}
#Bottom_width{
    display: none;
}
.Description_links_Video{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 5rem;
}
.container_Description_Video{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 40rem;
}
.width_Video{
    height: 6rem;
    margin-top: auto;
    margin-bottom: auto;
}

/**##### Login #####**/
.icon_reverse{
    margin: 0px;
    margin-right: 1rem;
}
.login_Formulaire {
    height: 30rem;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}
.login_formulaire_input input, textarea{
    background-color: var(--white);
    border-radius: 0.5rem;
    border: none;
    padding: 1rem 1rem 1rem 1rem;
    resize: none;
    width: 100%;
    color: var(--dark-black);
    font-family: 'Libre Franklin';
}
.login_formulaire_input input::placeholder, textarea::placeholder{
    color: var(--grey);
    font-family: 'Libre Franklin';
}
.login_formulaire_input input, textarea{
    width: 100%;
}
.login_formulaire_input #Send_form{
    margin-bottom: 2rem;
}

/**##### Add Projet #####**/
.choose_categorie_add{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}
.Name_Categorie_add{
    width: auto;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
}
.Name_Categorie_add .icons_title{
    font-size: 2.5rem;
    color: var(--opacity-grey);
    transition: 0.1s ease-in-out;
}
.Name_Categorie_add h3{
    font-family: 'Limelight';
    font-size: 1.5rem;
    color: var(--opacity-grey);
    opacity: 50%;
    transition: 0.1s ease-in-out;
}

.Name_Categorie_add:hover h3{
    opacity: 100%;
    color: var(--white);
}
.Name_Categorie_add:hover .icons_title {
    color: var(--yellow)
}
.Add_Projet_Filtre_Container{
    width: auto;
}
.Ajout_Projet_Form{
    height: 100%;
}
#upload{
    width: 30%;
    display: flex;
    background-color: var(--yellow);
    border: none;
    border-radius: 0.5rem;
    color: var(--dark-black);
}


.Ajout_formulaire_Infographie{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
.Input_Photos_Add{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
}
.input_Add{
    width: 40%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.input_Add input, textarea{
    background-color: var(--white);
    border-radius: 0.5rem;
    border: none;
    padding: 1rem 1rem 1rem 1rem;
    resize: none;
    width: 100%;
    color: var(--dark-black);
    font-family: 'Libre Franklin';
    margin-bottom: 2.5rem;
}
.input_Add input::placeholder, textarea::placeholder{
    color: var(--grey);
    font-family: 'Libre Franklin';
}
.input_Add textarea{
    margin-bottom: 2.5rem;
}

.Input_Photos_Add .Photos{
    width: 30rem;
    height: 40rem;
    border: 0.05rem var(--text-grey) solid;
    border-radius: 0.5rem;
    background-position: center;
    background-size: cover;
    position: relative;
}
#upload{
    display: none;
}
.label_upload{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    background-color: var(--yellow);
    border-radius: 0.5rem;
    position: absolute;
    top: 40%;
    left: 35%;
}
.Black_icon{
    color: var(--dark-black);
    font-size: 3.5rem;
    margin: 0;
    margin-top: 1rem;

}
.Charge{
    color: var(--dark-black);
    font-family: 'Limelight';
    font-size: 1rem;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
    margin-bottom: 1rem;
}
.Boutton_Radio{
    display: none;
}
.label_Radio{
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.label_Radio .icons_title{
    font-size: 6rem;
    margin: 0px;
    color: var(--opacity-grey);
}

.label_Radio .icons_title:hover{
    transform: none;
}
.text_Type_Project{
    color: var(--opacity-grey);
    font-size: 1rem;
    font-family: 'Libre Franklin';
    margin: 0;
    margin-top: 0.5rem;
    transition: 0.5s ease-in-out;
}
input[type="radio"]:checked+label .Radio_Chose{
    color: var(--yellow);
}
input[type="radio"]:checked+label .text_Type_Project{
    color: var(--grey);
}
input[type=radio]:not(:checked)+label .Radio_Chose, .text_Type_Project{
    color: var(--opacity-grey);
}

#Formulaire_Audiovisuel .Video_Minia{
    height: 20rem;
}
.Invert_Send_Class{
    margin-left: auto;
    margin-right: auto;
}

/*#######################################
#########################################
#########################################
*/

@media only screen and (max-width: 900px){
    .nav_bar{
        display: flex;
        align-items:center;
        justify-content:center;
    }
    #navigation_bar_links{
        display: none
    }
    #logo_link{
        font-size: 6rem;
    }
    #logo_link:hover{
        color: var(--yellow);
    }

    /** Nav Layour **/
    .Header_Layour nav .icons{
        font-size: 8rem;
    }
    /**Informations**/
    
    .container_informations{
        height: 100vh;
}
    #Projets{
        height: auto;
    }
    #A_Propos{
        height: 100vh;
    }
    #Contact{
        background-position: center;
        background-blend-mode:hard-light;
        background-color: rgba(245, 245, 245, 0.5);
        display: flex;
        justify-content: center;
        height: auto;
        padding-bottom: 5rem;
    }
    #Go_up{
        position: fixed;
        bottom: 5px;
        right: 5px;
        font-size: 15rem;
        z-index: 1;
    }
    /**Projets**/
    .Title_Section h2{
        font-size: 6rem;
    }
    .icons_title{
        font-size: 10rem;
        margin-left: 2rem;
    }
    .Project_APropos{
        width: 100%;
        height: auto;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }
    .Project_APropos .links_Projets{
        flex-direction: column;
        margin-bottom: 5rem;
    }
    .Project_APropos .links_Projets .image_Projets{
        width: 70rem;
        height: 45rem;
        border-radius: 1rem;
    }
    .Project_APropos .links_Projets .Title_Projets_Section{
        font-size: 3rem;
    }
    /**A Propos**/
    .Photo_Profile{
        width: 70rem;
        height: 90rem;
        border-radius: 1rem;
    }
    #A_Propos{
        height: auto;
        padding-bottom: 20rem;
    }
    .border{
        display: none;
    }
    #A_Propos_container{
        margin-bottom: 0;
    }
    .Qui_suis_je_container{
        width: 90rem;
        height: auto;
        align-items: center;
    }
    .SubTitle_Section{
        justify-content: center;
    }
    .SubTitle_Section h2{
        font-family: 'Limelight';
        color: var(--white);
        font-size: 5rem;
        margin-top: 5rem;
    }
    .SubTitle_Section .icons_title{
        font-size: 6rem;
    }
    .Paragraphe{
        font-size: 3rem;
        height: auto;
        line-height: 5rem;
        margin-bottom: 8rem;
        margin-top: 8rem;
    }
    .Send_Class{
        padding: 3rem 8rem 3rem 8rem;
        font-size: 4rem;
        border-radius: 1rem;
    }

    /**Contact**/
    #Contact_Title {
        margin-top: 1rem;
        margin-bottom: 0;
    }
    #Contact_Title .icons_title{
        margin-right: 2rem;
    }
    .Description_contact{
        justify-content: center;
    }
    .Description_contact p{
        font-size: 2rem;
    }
    .formulaire{
        width: 90rem;
        height: 150rem;
        border: 0.5rem var(--grey) solid;
        border-radius: 1rem;
        flex-direction: column;
        align-items: center;
    }
    #formulaire_Title{
        font-size: 5rem;
    }
    .formulaire_input{
        flex-direction: column;
        justify-content: space-between;
    }
    .formulaire_input textarea{
        height: 50rem;
        font-size: 3rem;
        color: var(--text-grey);
    }
    .formulaire_input input, textarea{
        background-color: var(--dark-black);
        border-radius: 1rem;
        border: none;
        padding: 3.5rem 2rem 3.5rem 2rem;
        width: 100%;
        font-size: 3rem;
    }
    .formulaire_input input::placeholder, textarea::placeholder{
        color: var(--text-grey);
        font-family: 'Libre Franklin';
    }
    .formulaire_input .formulaire_name_forename{
        flex-direction: column;
        height: 22%;
        justify-content: space-between;
    }
    .formulaire_input .formulaire_name_forename input{
        width: 100%;
    }
    #Send_form{
        width: 40rem;
        border-radius: 1rem;
    }
    .Send_icon{
        font-size: 3rem;
        margin-left:1rem;
    }

    /**Footer**/
    footer::before{
        height: .5em;
        border-radius: 10px;
    }
    footer .line_container{
        padding-top: 5rem;
    }
    footer .icons_footer{
        width: 48vw;
    }
    .icons{
        font-size: 8rem;
    }
    footer p{
        font-size: 3.5rem;
        margin-top: 4rem;
    }



    /**##### Infographie Projets ######**/

    .container_Filtre{
        display: none;
    }
    .grid{
        margin-top: 5rem;
        grid-template-columns: 1fr 1fr ; 
        gap: 5rem 1rem; 
        margin-bottom: 5rem;
    }
    .grid .links_Projets{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

    .grid .links_Projets .image_Projets{
        width: 40rem;
        height: 60rem;
        position: relative;
    }
    .grid .links_Projets .image_Projets .image_Projets_miniature{
        border-radius: 2rem;
    }
    .grid .links_Projets .Title_Projets_Section{
        font-family: 'Libre Franklin';
        font-weight: bold;
        font-size: 3rem;
        transition: 0.2s ease-in-out;
    }
    .White_Section{
        color: var(--white); 
    }
    .grid .links_Projets:hover .image_Projets_miniature{
        filter: blur(3px);
    }
    .grid .links_Projets:hover .White_Section{
        color: var(--opacity-grey);
    }
    .Watch{
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 2;
        position: absolute;
    }
    .Watch .watch_icon{
        opacity: 0;
        font-size: 2.5rem;
        color:var(--white);
        padding: 1.5rem;
        border-radius: 50rem;
        border: 0.1rem var(--white) solid;
        background-color: var(--line-grey);
        transition: 0.2s ease-in-out;
    }
    .grid .links_Projets:hover .Watch{
        border: 0.01rem var(--line-grey) solid;
    }
    .grid .links_Projets:hover .watch_icon{
        opacity: 100%;
    }


    /**##### Projet Description #####**/
    .Photo_Description{
        width: 90vw;
        height: auto;
        margin-top: 15rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .Photo_Description .Photo{
        width: 90rem;
        height: 130rem;
        border-radius: 2rem;
    }
    .Photo_Description .Description{
        width: 90rem;
        height:auto;
    }
    .Description .Title_Projet{
        font-size: 8rem;
        margin-top: 6rem;
        width: 100%;
        text-align: center;
    }
    .Description .width{
        width: 100%;
        height: 0.1rem;
        background-color: var(--line-grey);
        border-radius: 10px;
        display: revert;
        margin-bottom: 10rem;
    }
    .width_Description_Title{
        width: auto;
        justify-content: flex-start;
        margin-top: 5rem;
        margin-bottom: 4rem;
    }
    .width_Description_Title h2{
        font-size: 5rem;
        margin: 0;
        font-family: 'Limelight';
    }
    .width_Description_Title .icons_title{
        font-size: 8rem;
    }
    .Description_P{
        margin-top: 0;
        font-size: 3rem;
    }
    .external_links p{
        font-size: 3rem;
    }

    .external_links .icons_title{
        font-size: 5rem;
        margin-right: 2rem;
    }
    .Badges{
        margin-top: 8rem;
    }
    .Badges .Description_contact {
        width: 85vw;
        margin-bottom: 0.5rem;
    }
    .Badges .width{
        width: 10rem;
        height: 0.1rem;
        background-color: var(--line-grey);
        display: revert;
    }
    .Badges .Description_contact h2{
        font-size: 5rem;
        color: var(--white);
        margin: 0px 1rem 0px 1rem;
    }
    .badge_container {
        justify-content: center;
        height: auto;
    }
    .badge_container .border{
        display: none;
    }
    .Badge_Items{
        justify-content: space-around;
        width: 100%;
        margin-top: 5rem;
        margin-bottom: 10rem;
    }
    .Badge_unique p{
        color: var(--grey);
        font-size: 3rem;
        font-family: 'Libre Franklin';
        margin: 0;
        margin-top: 0.5rem;
    }
    .Badge_unique .icons_title{
        font-size: 20rem;
        margin: 0;
    }

    .autres_projets{
        width: 100%;
        margin-top: 5rem;
    }
    .autres_projets h2{
        font-size: 6rem;
        margin-left: 2rem;
    }
    .autres_projets .icons_title{
        font-size: 12rem;
    }
    .suggestion .Description_contact{
        width: 90vw;
        margin-top: 2.5rem;
        margin-bottom: 5rem;
    }


    /**##### Photos #####**/
    #smart_grid {
        display: none;
    }

    #grid_photos{
        display : block;
    }


    /*##### Photo Description #####*/

    #photos_background_viewer{
        height: 120rem;
        margin-top: 12rem;
        border-width: 0.2rem;
    }
    
    .photo-bg{
        filter: blur(0) brightness(1);  
    }
    
    .photo_image_viewer{
        display: none;
    }

    .photo-selector{
        width: 100rem;
        height: 35rem;
        margin-top: 5rem;
    }

    .photo-symbol{
        height: 30rem;
        width: 30rem;
        margin-right: 2rem;
        border: 0.15rem solid var(--white);
        border-radius: 1rem;
    }


    /*##### Vidéo ####*/
    .grid_vidéo{ 
        grid-template-columns: 1fr; 
    }
    .grid .links_Projets .Miniature_Video{
        width: 90rem;
        height: 60rem;
    }

    /**######## Vidéo Description ########**/
    .video_viewer{
        width: 90vw;
        height: 50rem;
        margin-top: 15rem;
        border-radius: 2rem;
    }
    .Description_video{
        width: 90vw;
        margin-top: 5rem;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .Description_video .width{
        width: 100%;
        height: 0.1rem;
        background-color: var(--line-grey);
        border-radius: 10px;
        display: revert;
    }
    #Top_Width{
        display: none;
    }
    #Bottom_width{
        display: block;
        margin-bottom: 10rem;
    }
    .Video_Title{
        font-size: 7rem;
        color: var(--white);
    }
    .Description_video .width{
        width: 100%;
        margin-bottom: 2.5rem;
    }
    .Description_links_Video{
        flex-direction: column;
        margin-top: 5rem;
    }
    .container_Description_Video{
        width: 100%;
    }

    /**##### Login #####**/
    #container_login_title_infos{
        min-height: 100vh;
    }
    .icon_reverse{
        margin: 0px;
        margin-right: 1rem;
    }
    .login_Formulaire {
        height: 100rem;
        margin-top: 8rem;
        margin-bottom: 8rem;
    }
    .login_formulaire_input input, textarea{
        background-color: var(--white);
        border-radius: 1rem;
        padding: 3.5rem 2rem 3.5rem 2rem;
        resize: none;
        width: 100%;
        color: var(--dark-black);
    }

    /**##### Add Projet #####**/
    .choose_categorie_add{
        margin-bottom: 10rem;
        margin-top: 6rem;
    }
    .Name_Categorie_add .icons_title{
        font-size: 10rem;
    }
    .Name_Categorie_add h3{
        display: none;
    }

    .Name_Categorie_add:hover h3{
        opacity: 100%;
        color: var(--white);
    }
    .Name_Categorie_add:hover .icons_title {
        color: var(--yellow)
    }
    .Add_Projet_Filtre_Container{
        width: auto;
    }
    .Ajout_Projet_Form{
        height: 100%;
    }
    #upload{
        width: 30%;
        display: flex;
        background-color: var(--yellow);
        border: none;
        border-radius: 0.5rem;
        color: var(--dark-black);
    }
    .Ajout_formulaire_Infographie{
        margin-top: 3rem;
        margin-bottom: 3rem;
        margin-bottom: 8rem;
    }
    .Input_Photos_Add{
        flex-direction: column;
        align-items: center;
    }
    .input_Add{
        width: 100%;
        flex-direction: column;
        margin-top: 15rem;
    }
    .input_Add textarea{
        border-radius: 1rem;
        padding: 3.5rem 2rem 3.5rem 2rem;
        margin-bottom: 5rem;
        font-size: 3rem;
    }
    .input_Add input, textarea{
        border-radius: 1rem;
        padding: 3.5rem 2rem 3.5rem 2rem;
        margin-bottom: 5rem;
        font-size: 3rem;
    }

    .Input_Photos_Add .Photos{
        width: 90rem;
        height:130rem;
        border-radius: 2rem;
    }
    #upload{
        display: none;
    }
    .label_upload{
        border-radius: 2rem;
        top: 35%;
        left: 35%;
        padding: 2rem;
    }
    .Black_icon{
        color: var(--dark-black);
        font-size: 20rem;
        margin: 0;
        margin-top: 1rem;
    }
    .Charge{
        font-size: 3rem;
    }
    .Boutton_Radio{
        display: none;
    }
    .label_Radio .icons_title{
        font-size: 20rem;
    }
    .text_Type_Project{
        font-size: 3rem;
    }
    input[type="radio"]:checked+label .Radio_Chose{
        color: var(--yellow);
    }
    input[type="radio"]:checked+label .text_Type_Project{
        color: var(--grey);
    }
    input[type=radio]:not(:checked)+label .Radio_Chose, .text_Type_Project{
        color: var(--opacity-grey);
    }


    #Formulaire_Audiovisuel .Video_Minia{
        height: 50rem;
    }
    .Invert_Send_Class{
        margin-left: auto;
        margin-right: auto;
    }
}