@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
@font-face {
    font-family: "AeroReg"; /* Nom de la police */
    src: url('./font/AtAero-Regular.woff') format('woff'), url('font/AtAero-Regular.woff2') format('woff2'); /* Chemin vers le fichier de police */
  }

  @font-face {
    font-family: "AeroBold"; /* Nom de la police */
    src: url('./font/AtAero-Bold.woff') format('woff'), url('font/AtAero-Bold.woff2') format('woff2'); /* Chemin vers le fichier de police */
  }

body {
    margin: 0px;
    padding: 0px;
    font-family: 'AeroReg','Space Grotesk', sans-serif;
    font-size: 23px;
}

/* nav */
nav {
    background-color: black;
    display: flex;
    position: sticky;
    top: 0px;
    height: 43px;
    z-index: 3;
}

nav div {
    width: 50vw;
    display: flex;
}

nav div div {
    padding-left: 11px;
    padding-top: 6px;
    padding-bottom: 6px;
}

nav a {
    color: white;
    font-family: 'AeroReg', 'Space Grotesk', sans-serif;
    font-weight: 400;
    text-decoration: none;
}

.RightSide a:visited {
    color: black;
}

main { 
    display: flex;
}

main div {
    width: 50vw;
}

.LeftSide {
    background-color: black;
    height: 96vh;
   display: flex;
   position: sticky;
   top:41px;
   width: 50vw;
   flex-direction: column;
   z-index: 2;
}

.ProjectSlide {
    height: 140px;
    margin: 5px 0px;
    display: flex;
    align-items: center;
    background-color: white;
}

.ProjectSlide img {
    max-height: 120px;
    width: auto;
    margin-top: auto;
    margin-bottom: auto;
    max-width: 220px;
    margin: auto;
}

.ProjectSlide:hover {
    filter: invert();
}

.ProjectSlide:hover p, .ProjectSlide:hover h2 {
    color: magenta;
    filter: invert(1);
}

.ProjectSlide:hover img {
    filter: grayscale(1);
}


#main-image {
    max-width: 50vw;
    max-height: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
    margin-bottom: auto;
   
}

.hidden {
    position: fixed;
    top: -1220px;
    padding-left: 11px;
    transition: position 0.5s;
}

.hidden p {
    font-size: 3rem;
    width: 85vw;
    margin: 11px;
    margin-left: 0px;
    line-height: 1.3;
}

.hidden a {
    color: black;
    text-decoration: underline;
    text-decoration-thickness: 3.5px;
    text-underline-offset: 5.5px;
}

.hidden a:hover {
    color: magenta;
}

.visible {
    position: static;
}

button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    /* Réinitialisation des polices, couleurs et arrière-plan */
    font: inherit;
    background: transparent;
    /* Réinitialisation de la boîte */
    box-sizing: border-box;
}

#BtAbout {
    color: white;
}
#BtContact {
    color: white;
}
button:hover {
    
    color: magenta !important;
    
}

#PhotoBody .RightSide {
    display: flex;
    flex-wrap: wrap;
    width: 50vw;
    align-content: flex-start;
    border-top: 3px solid #000;
}
.GaleriePhoto {
    width: calc(12.5vw - 7px);
    height: calc(12.5vw - 3px);
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    /*background-color: #d8d8d8;*/
    border-bottom: 3px solid #000;
    border-right: 3px solid #000;
}

.GaleriePhoto:hover {
    background-color: white;
    -webkit-filter: grayscale(100%); /* Pour les navigateurs Chrome, Safari, Opera */
    filter: grayscale(100%) invert(100%); /* Firefox */
    border-color: white;
}

.GaleriePhoto img {
    max-width: 100%;
    max-height: 100%;
}

.Survol {
    opacity: 0%;
    position:absolute;
    width: 12.5vw;
    height: 12.5vw;
}

.Survol:hover {
    opacity: 100%;
    position:absolute;
    width: 12.5vw;
    height: 12.5vw;
    
}

.DetailPhoto {
    background-color: yellow;
    height: 30vh;
    width: 50vw ;
}

/* -------------------- carousel ---------------- */
.carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.slide {
    width: 100%;
    display: none;
}

img {
    max-width: 50vw;
    max-height: 100%;
}

.carousel {
    margin: auto;
}

/* Styles for active slide */
.slide.active {
    display: block;
}

.carouselBtn button {
    color: white;
    margin: 20px;
    font-size: 2.5rem;
}

.carouselBtn {
    display: flex;
    justify-content: space-between;
}

#Labo *{
        padding: 0px;
        margin: 0px;
}

/* ---------- Labo ---------- */

#Labo .container {
    margin: 0px 15vw;
}
#Labo nav {
    background-color: white;
    border-bottom: black solid 2px;
    height: 30px;
}
#Labo nav a {
    color: black;
    margin-left: 15vw;
}

#Labo nav a:hover {
    color: magenta;
    
}


#Labo h1 {
    font-size: 3rem;
    margin-top: 5vh;
    text-decoration: underline black 4px  ;
    text-underline-offset: 5px;
    text-align: center;
}

#Labo h2 {
    font-size: 2rem;
    color: #333333;
    text-align: center;
}

#Labo h2 + p {
    font-size: 2rem;
    width: 35vw;
    margin-bottom: 5vh;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#contenuLabo {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: auto;
}

#contenuLabo a {
    margin-bottom: 10px;
    text-underline-offset: 2.5px;
    color: magenta;
}


#contenuLabo a:visited {
    color:magenta;
}

#contenuLabo a:hover {
    color: black;
}

.affichageLabZone {
    margin-top: 40px;
    width: 30vw;
}

#index #ProjectPage {
    
    color: black;
}

nav a:hover {
    color: magenta;
}

#PhotoBody #PhotoPage {
    
    color: black;
}

#VideoBody #VideoPage {
   
    color: black;
}

#index #ProjectPageDiv {
    background-color: white;
}

#PhotoBody #PhotoPageDiv {
    background-color: white;
}

#VideoBody #VideoPageDiv {
    background-color: white;
}

/* ------ détail projet ------------- */
.DetailProjet p:not(.DemiPage) {
    margin: 0 1.5vw;
}

.DemiPage {
    width: 45%;
    margin: 0;
}



.DetailProjet  {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 50vw;
    border-bottom: 3px solid black;
    padding-bottom: 5px;
}

#LogoZeroDechetDetail {
    max-width: 45%;
    height: auto;
}

.DetailProjet iframe {
    width: 22vw;
    max-height: 25vh;
}


.DetailProjet div {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin: 5px 0 0 0;
    padding: 5px 0 0 0 ;
    border-top: 3px solid black
}

h2 {
    font-size: 3.4rem;
    margin-left: 2vw;
}

/* ----------------- page video -----------------_ */
.LeftSide iframe {
    height: 30vw;
    width: 50vw;
    margin: auto;
}

#VideoBody .LeftSide div {
    overflow:hidden;
}

#VideoBody .LeftSide div {
    width: 50vw;
    height: calc(50vw / 2);
}

.ytp-title-channel-logo {
    display: none !important;
    opacity: 0;
}

.ytp-title-text {
    display: none !important;
}

.ytp-cued-thumbnail-overlay-image {
    background-image: none !important;
}

h3 { 
    margin-left:2vw;
}

.main-image  {
    max-width: 50vw;
    max-height: calc(100vh - 30px);
}

.carouselImg {
    max-width: 50vw;
    max-height: calc(100vh - 30px);
}

.slide.active {
    padding: auto;
}

#index .RightSide {
    background-color: black;
}

.DetailProjet {
    background-color: white;
}

#VideoBody .RightSide {
    background-color: black;
    height: 540px;
}

#affichageLabZone {
    margin-top: 40px;
}
/* ------------------------------------------------------------ version téléphone ------------------------------------------------------------*/

@media (max-width: 858px) {
    /* Placez vos styles CSS pour les téléphones ici */
    body {
        font-size: 17px; /* Exemple de style pour les téléphones */
    }

    nav {
        flex-direction: column;
        height: 65px;
       
    }

    nav div {
        width: 100vw;
    }

    main {
        flex-direction: column;
    }

     .LeftSide {
        width: 100vw;
        height: calc(45vh - 60px);
        top: 65px;
        border-bottom: 3px solid black;
        border-top: 1px solid black;
        z-index: 4;
    }

    .carousel {
        width: 100vw;
        margin: 0;
        height: 100%;
        margin: auto;
    }

    .carouselBtn {
        width: 100vw;
    }


    .carousel img {
        max-width: 100vw;
        max-height: 100%;
        margin: auto;
        align-self: center;
    }

    .carousel .slide {
        margin: auto;
        align-items: center;
    }

    .carouselBtn button {
        margin: 10px;
    }

    .carousel .slide {
        width: 100vw;
        height: 100%;
    }
    

    #PhotoBody .RightSide {
        width: 100vw;
    }

    .GaleriePhoto {
        width: calc(25vw - 3px);
        height: calc(25vw - 3px);
    }
    .hidden {
        top: -2000
    }

    .hidden p {
        font-size: 1.5rem;
    }
    .hidden a {
        text-decoration-thickness: 2px;
        text-underline-offset: 2.5px;
    }


    .GaleriePhoto img {
        z-index: 0;
    }

    /* ----------------------------- Projets -------------------------- */
    h2 {
        font-size: 3rem;
    }
    .ProjectSlide {
        width: 100vw;
        justify-content: left;
    }

    .ProjectSlide img {
        margin: 0px;
        width: 40vw;
    }
    .ProjectSlide h2 {
        font-size: 2rem;
    }

    #index .RightSide div {
        width: 100vw;
        background-color: white;
    }

    /* ------------------------------ Labo ----------------------------- */
    #Labo h2 + p {
        width: 80vw;
        font-size: 1.8rem;
    }

    #Labo .container {
        margin: 0 10vw;
    }

    #Labo nav a {
        margin-top: 5px;
        font-size: 1.3rem;
        margin-left: 10vw;
    }

    #Labo nav {
        height: 35px;
    }

    .DetailProjet p:not(.DemiPage) {
        margin: 0 3vw;
        width: 100vw;
    }

    .DetailProjet iframe {
        width: 44vw;
        max-height: 18vh;
    }

    .DetailProjet div p {
        justify-content: space-between;
        width: 50vw;
        padding-left: 1.5vw;
    }

    .DetailProjet div iframe {
        margin-left: 1.5vw;
    }

    .DemiPage {
        width: 44vw;
        margin: 0;
        padding: 0;
    }

    .LeftSide iframe {
        height: calc(45vh - 60px);
        width: 100vw;
    }

    #VideoBody .RightSide {
        width: 100vw;
    }

    #VideoBody .DetailProjet div {
        width: 100vw;
    }

    #VideoBody .DetailProjet {
        width: 100vw;
    }


#VideoBody .RightSide {
    background-color: black;
    height: 540px;
    width: 100vw;
}

#Index .RightSide {
    background-color: black;
    height: 540px;
    width: 100vw;
}
main div {
    width: 100vw;
}
 img {
    max-width: 100vw;
}

#main-image {
    max-width: 100vw;
}

.carouselBtn button {
    color: white;
    margin: 20px;
    font-size: 1.7rem;
}


}

@media (max-width: 500px) { 
    .ProjectSlide h2 {
        font-size: 1.8rem;
    }
}