@font-face{
    font-family: "abrade";
    src: url(font/Abrade\ Thin.otf);
}

@font-face{
    font-family: "abrade-book";
    src: url(font/a.otf);
}

@font-face{
    font-family: "abrade-black";
    src: url(font/Abrade\ Black.otf);
}



@media screen and (orientation: landscape)
{
    :root
    {
        --columns: 3;
        --gap: 0.2vw;
        --imagecorner: 0.4vw;
        --h1size: 1.5vw;
        --h1sizehover: 2vw;
        --h2size: 1vw;
        --psize: 0.7vw;
        --intrologowidth: 10vw;
        --navwidth: ;
        --projdirection: row;
        --navdirection: column;
        --sidewidth: 5%;
        --sidewidthhover: 20%;
        --sideheight: auto;
        --sideheighthover: auto;
        --thumbwidth: 100%;
        --thumbheight: auto;
        --projinfomargin: 0.25vw;
        --commandswidth: 2vw;
        --commandsmargin: 0.5vw;
        --pageprojetwidth: 40%;
        --missionheight: 15vw;
        --hban: 4vw;
        --marginmenu: 2vw;
    } 

    #petit{display: none;}
}

@media screen and (orientation: portrait)
{
    :root
    {
        --columns: 3;
        --gap: 0.6vw;
        --imagecorner: 2vw;
        --h1size: 5vw;
        --h2size: 4vw;
        --psize: 3vw;
        --intrologowidth: 30vw;
        --navwidth: 100%;
        --projdirection: column-reverse;
        --navdirection: row;
        --sidewidth: auto;
        --sidewidthhover: auto;
        --sideheight: 10%;
        --sideheighthover: 50%;
        --thumbwidth: auto;
        --thumbheight: 100%;
        --projinfomargin: 1vw;
        --commandswidth: 8vw;
        --commandsmargin: 2vw;
        --pageprojetwidth: auto;
        --missionheight: 40vw;
        --hban: 14vw;
        --marginmenu: 4vw;
    }

    #grand{display: none;}
}

*{
    margin: 0;
    padding: 0;
}

p, h1, h2, h3, h4, img, video, a, ul, li
{
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
	-webkit-user-drag: none;
}

html, body, .navigation, .conteneur
{
    scrollbar-width: none;
	border: none;
	-ms-overflow-style: none;
	scrollbar-width: none;
	list-style: none;
}

::-webkit-scrollbar
{
    display: none;
}

h2{
    font-family: "abrade";
    font-size: var(--h2size);
}

h1{
    font-family: "abrade";
    font-size: var(--h1size);
}

p{
    font-family: "helvetica";
    font-size: var(--psize);
}

a{
    font-family: "abrade";
    font-size: var(--h1size);
    text-decoration: none;
    text-decoration-color: none;
    color: black;
    filter: grayscale(100%);
    opacity: 0.5;
    transition: 0.5s;
}

a:hover{
    filter: grayscale(0%);
    opacity: 1;
    transition: 0.5s;
}

body{
    height: 100%;
    width: 100%;
}

.page{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    width: 100%;
}

.logo{
    height: 100%;
    width: fit-content;
}

.logo img{
    width: auto;
    height: 100%;
}

.enter{
    position: absolute;
    z-index: 100;
    width: 100%;
    height: 100%;
}

@keyframes fadeInback {
    0% { opacity: 0; }
    100% { opacity: 0.5; }
  }

  @keyframes fadeInfront {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

.intro img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--imagecorner);
    animation: fadeInback 5s;
    opacity: 0.5;
}

.full{
       grid-area: 2 / 1 / 4 / 8;
}

.full img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--imagecorner);
}

.projets{
    flex: 1;
    overflow: hidden;
    width: 100%;
}

.navigation{
    padding: 0;
    display: flex;
    flex-direction: var(--navdirection);
    gap: var(--gap);
    overflow: scroll;
    overflow-x: scroll;
    width: var(--sidewidth);
    height: var(--sideheight);
    transition: 0.5s;
}

.navigation:hover{
    width: var(--sidewidthhover);
    height: var(--sideheighthover);
    transition: 0.5s;
}

/*
.navigation:hover + .conteneur{
    width: 89%;
    transition: 0.5s;
    border: 2px solid blue;
}
*/

.thumb{
    border: none;
}

.thumb img{
    object-fit: cover;
    width: var(--thumbwidth);
    height: var(--thumbheight);
    border-radius: var(--imagecorner);
    aspect-ratio: 1;
}

.conteneur{
    display: flex;
    flex-grow: 2;
    transition: 0.5s;
    overflow: hidden;
}

.conteneur img{
    border-radius: var(--imagecorner);
    object-fit: cover;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.projinfo{
    /*position: absolute;
    right: 0;*/
    cursor: pointer;
    z-index: 2;
    width: var(--sidewidth);
    height: var(--sideheight);
    transition: 0.5s;
    overflow: scroll;
    /*background-color: white;
    width: var(--projinfowidth);
    aspect-ratio: 1;
    margin: var(--projinfomargin);
    border-radius: var(--imagecorner);*/
}

.projinfo:hover{
    width: var(--sidewidthhover);
    height: var(--sideheighthover);
    transition: 0.5s;
}

button {
    border: none;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    position: absolute;
    z-index: 0;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--imagecorner);
    opacity: 1;
    transition: object-fit 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.commands{
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    margin: var(--commandsmargin);
    right: 0;
}

.navprojects{
    display: flex;
    flex-direction: row-reverse;
    position: absolute;
    margin: var(--commandsmargin);
    right: left;
}

.gallery-button{
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background-color: white;
    width: var(--commandswidth);
    aspect-ratio: 1;
    margin: var(--projinfomargin);
    border-radius: var(--imagecorner);
    transition: 0.5s;
    opacity: 0.5;
    border: 0.05vw solid black;
}

.gallery-button h2{
    position: absolute;
    margin: auto;
}

@media screen and (orientation: landscape)
{
    .commands{
        top:0;
    }

    .navprojects{
        top:0;
    }
}

@media screen and (orientation: portrait)
{
    #togglefit h2{
        display: none;
    }

    .commands{
        bottom:0;
    }

    .navprojects{
        bottom:0;
    }

}

.gallery-button img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--imagecorner);
}

.gallery-button:hover{
    opacity: 1;
    transition: 0.5;
}

.format{
    position: absolute;
    right: 0;
    bottom: 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    background-color: white;
    width: var(--commandswidth);
    aspect-ratio: 1;
    margin: var(--projinfomargin);
    border-radius: var(--imagecorner);
}

.format img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0.05vw solid black;
    border-radius: var(--imagecorner);
}


.miscontainer{
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    overflow: hidden;
}

.mission{
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: stretch;
    gap: var(--gap);
    width: 100%;
    height: var(--missionheight);
    border-radius: var(--imagecorner);
    transition: 0.5s;
}

.visu{
    width: 100%;
    height: 100%;
}

.visu img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--imagecorner);
}

.mission:hover{
    opacity: 1;
    cursor: pointer;
    transition: 0.5s;
}

.fiche{
    width: 30%;
    height: auto;
    padding: var(--gap);
    border-radius: var(--imagecorner);
    overflow: scroll;
    z-index: 10;
    background-color: #fff;
    text-align: left;
    text-justify: right;
}

.fiche p{
    text-align: justify;
    margin: var(--gap);
}

.pageprojet{
    position: absolute;
    padding: var(--commandsmargin);
    top: var(--commandsmargin);
    left: var(--commandsmargin);
    right: var(--commandsmargin);
    width: var(--pageprojetwidth);
    height: auto;
    z-index: 100;
    border-radius: var(--imagecorner);
    border: 0.05vw solid black;
    background-color: rgba(255, 255, 255, 1);
    overflow-y: scroll;
    display: none;
    opacity: 0;
}

.pageprojet img{
    width: 100%;
}

@media screen and (orientation: portrait)
{
    .fiche{
        padding: var(gap);
    }

    .pageprojet{
        bottom: 14vw;
    }
}

@media screen and (orientation: landscape)
{
    .pageprojet{
        bottom: var(--commandsmargin);
    }
}

.footer{
    position: fixed;
    z-index: 100;
    display: flex;
    justify-content: center;
    bottom: 0;
    width: 100%;
    height: auto;
    margin: 0.5vw;
}