@import url('https://api.fontshare.com/v2/css?f[]=zodiak@100,101,300,301,400,401,700,701&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=switzer@100,101,200,201,300,301,400,401,500,501,600,601&display=swap');


/**************HEADER*********************/
.back {
width: 100%;
}

.back a {
    font-family: 'Switzer', sans-serif;
    font-weight: 300;
    font-style: italic;
    font-size: 0.89em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
    position: fixed;
    top: 2.8vh;
    mix-blend-mode: difference;
    z-index: 999;
    margin-left: 15vw;;
}


/**************GENERAL*********************/
#contenu {
    margin: 0 0 10vh 0;
}


/*****************INTRO*********************/
.intro{
   display: flex;
   justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 2.4vw;
    height: 105%;
}

.resume {
    margin-top: 14vh;
    width: 35vw;
}

.resume h1 {
    font-family: 'Zodiak', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 3.65em;
    line-height: 120%;
    text-transform: uppercase;
    letter-spacing: -0.02vw;
    color: black;
    margin: 0 0 4vh 0;
}

.resume p {
    font-family: 'Switzer', sans-serif;
    font-size: 1.07em;
    line-height: 163%;
    margin-right: 6.5vw;
}


/**************FICHE TECHNIQUE*********************/
.fiche-technique {
    margin-top: 13.5vh;
    width: 15vw;
    margin-right: 0.5vw;
    margin-bottom: 10vh;
}

.categorie {
    margin-bottom: 3.8vh;
}

.categorie-title {
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    font-size: 0.78em;
    text-transform: uppercase;
    color: #8f8f8f;
    margin: 2vh 0 0.3vh 0;
    letter-spacing: 0.01vw;
    font-style: italic;
}

.categorie-text p, .categorie-text a {
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    font-size: 0.96em;
    line-height: 135%;
    color: black;
    text-decoration: none;
    display: inline-block;
    position: relative;
    margin: 0 0.4vw 0.3vh 0;
}


/**************IMG INTRO*********************/
.intro-img {
    flex: 1;
    margin-left: 1vw;
}

.intro-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/**************TEXTES DESCRIPTION*********************/

.detail {
    border-top: 1.6px solid rgb(73, 73, 73);
    padding-top: 12vh;
    border-bottom: 1.6px solid rgb(73, 73, 73);
}


/************************BRIEF**************************/
.description {
    display: flex;
    margin: 0 2.5vw 0 2.5vw;
    padding: 0 0 14vh 0;
}

.margin-top {
    margin-top: 13vh
}

.description-title {
    width: 25.5vw;
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    font-size: 0.94em;
    text-transform: uppercase;
    color: #8f8f8f;
    margin-top: 0.6vh;
    font-style: italic;
}

.description-text {
    margin: 0;
    width: 45vw;
    font-family: 'Switzer', sans-serif;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 162%;
}

/************************CREDITS PHOTOS**************************/
.creditphoto {
    padding-bottom: 11vh;
    margin-top: 10vh
}

.creditphoto .description-title {
    width: 13vw; 
}

.creditphoto .description-text {
    font-size: 0.98em;
    line-height: 190%;
    opacity: 0.8;
    text-align: end;
    width: 80vw;
}


/***********************IMAGES**********************/
.image2,
.image1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4vh;
}

.image2 .bloc-img {
    width: 100%;
    height: 130vh;
}

.image1 .bloc-img {
    width: 100%;
    height: 110vh;
}

.image2 .bloc-img {
    width: 49.9%;
}

.bloc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.video-portfolio {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0.4vh;  
}

/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////////////////////////*/

/*********************TABLETTE********************/
@media (max-width: 1280px) {

/**************HEADER*********************/
.back a {
    margin-left: 20vw;;
}

.resume {
    width: 39vw;
}

.resume h1 {
    font-size: 3em;
}

.resume p {
    font-size: 1.07em;
    margin-right: 6.5vw;
}

/**************FICHE TECHNIQUE*********************/
.fiche-technique {
    width: 18vw;

}
}


/**************MOBILE*********************/
@media (max-width: 770px) {

html, body {
  overflow-x: hidden;
}

.back {
        display: none;
    }

.intro{
   display: block;
   margin: 0;
}

.resume {
    width: 95%;
    margin: 12vh 0 0 3.1vw;
}

.resume h1 {
    font-size: 2.8em;
    margin: 0 0 1vh 0;
}

.resume p {
    font-size: 1.07em;
    margin-right: 6.5vw;
    line-height: 150%;
}

/**************FICHE TECHNIQUE*********************/
.fiche-technique {
    display: flex;
    flex-wrap: wrap;
    width: 96%;
    margin: 0 3.1vw 0 3.4vw;
}

.categorie {
    margin-bottom: 0.8vh;
    width: 46vw;
    padding-right: 2vw;
}

.categorie-title {
    font-size: 0.9em;
}

.categorie-text p, .categorie-text a {
    font-size: 1em;
}

.categorie:nth-of-type(5) {
display: none;
}

.intro-img {
    height: 40vh;
    margin: 4vh 0 0 0;
}

.detail{
    padding-top: 5vh;
}

.description {
    display: block;
    margin: 0 3.2vw 0 3.4vw;
    padding: 5vh 0 8vh 0;
}

.description-text {
    width: 94vw;
}

.image2, .image1 {
    display: block;
    justify-content: space-between;
    margin-bottom: 0.4vh;
}

.image2 .bloc-img {
    width: 100%;
}

.image2 .bloc-img, .image1 .bloc-img {
    height: 60vh;
}

.creditphoto .description-title {
    width: 50vw;
}

.creditphoto .description-text {
    width: 93vw;
}
}