header {
    padding: 0 7%;
    width: 85%;
    margin: 0;
}

header ul {
    margin: 0;
}

nav li a {
    font-size: 4cqw;
    line-height: 1.2em;
}

.menu {    
    display: flex;
    justify-content: flex-end;
}

#logo {    
    width: 40%;
}

header img {
    width: 100%;
}

#hero .txt-hero {
    width: 60%;
}

#home #hero-responsive {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 108vh;
    background: linear-gradient(rgba(30, 28, 27, 0.15), rgba(30, 28, 27, 0.3));
}

#hero-responsive video {
    height: 108vh;
    width: 100vw;
    position: absolute;
    top: 0;
    z-index: -1;
    object-fit: cover;
    object-position: 47% 50%;;
}

#home #hero {
    display: none;
    width: 100%;
    padding: 0;
}

#home #hero-responsive #introduction, #home #hero-responsive #presentation {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    padding-bottom: 10%;

}

#hero-responsive #presentation {
    padding-bottom: 30%;
}

#hero-responsive #introduction {
    margin-bottom: -15%;
}

#home #hero-responsive #introduction #signature {
    width: 100%;
}

#home #hero-responsive #introduction svg {
    width: 110%;
    margin: 5%;
}

#home #hero-responsive h1{
    font-family: 'Arimo';
    color: var(--color-primary);
    font-size: 6cqw;
    line-height: 50px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1.2px;
    margin: -15% 0 2% 0;
    display: flex;
    flex-wrap: wrap;
    text-align:left;
}

#home #hero-responsive p {
    font-family: 'Arimo';
    color: var(--color-primary);
}

#hero-responsive #presentation p {
    width: 100%;
    margin: -5% 0 10% 0;
}

#hero-responsive #container-presentation {
    display: flex;
}

#hero-responsive #savoirplus {
    width: 80%;
    margin: -5% 0 20% 0;
}

#hero-responsive #container-video {
    display: none;    
}

#hero-responsive #video {
    width: 100%;
}

#hero-responsive #presentation button {
    background-color: transparent;
    border-width: 0;
    width: fit-content;
    text-align: left;
    padding: 0;
    width: 100%;
}

#hero-responsive #presentation button a {
    color: var(--color-primary);
    font-weight: 600;
}

#hero-responsive #presentation button img {
    padding-left: 10px;
    width: 7%;
}

#home #portfolio, .section-contact {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: auto;
}

    #title-portfolio-computer {
        display: none !important;
    }

    #title-portfolio-responsive {
        display: flex !important;
        margin: -5vh auto 0 auto !important;
        flex-direction: column;
    }

    .title-section-apropos, .text-section-apropos {
    display: flex;
    flex-direction: column;
    }

    p {
        font-size: 2cqw;
    }

    #portfolio button {
    width: 100%;
    }

    #portfolio button img {
    width: 7%;
    }   

    .text-section-portfolio {
        width: 100%;
    }

    #portfolio h4 {
        width: 100%;
        margin-top: 3vh;
    }

    .title-section-portfolio {
        padding-top: 0rem;
    }

    #home h3 {
        font-size: 8cqw;
        line-height: 7cqw;
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        padding-top: 0;
    }

    #home h3 span {
        font-size: 7cqw;
        line-height: 7.5cqw;
        text-align: left;
    }

    #home #portfolio {
        display: flex;
        flex-direction: column;
        width: 90%;
    }

    #home .text-section-portfolio {
        width: 100%;
    }

    #home h2 {
        text-align: left;
        font-size: 10cqw;
        width: 100%;
    }

    #home h4 {
        font-size: 4.55cqw;
        line-height: 5cqw;
    }

    #home button a {
        font-size: 5cqw;
    }
    #page-portfolio #portfolio-title {
        padding: 30% 0 0 10%;
    }

    .text-section-portfolio h4 {
        margin-top: -5%;
    }

    .title-section-portfolio {
        padding-top: 0rem;
        height: fit-content;
    }

    .img-section-portfolio button a {
    font-size: 14.2cqw !important;
    }

    .img-section-portfolio {
    width: 100%;
    }

    #page-yummy #hero {
    background-image: url('../assets/images/fond_responsive-nouveauxpots-yummy.webp');    
    }

    #section-apropos {
        width: 90%;
        margin: auto;
        flex-direction: column;
    }

    .title-section-apropos h2 {
        padding-top: 0;
        margin-top: -15%;
    }

    .text-apropos {
        padding-bottom: 10%;
    }

    .text-section-apropos {
    width: 100%;
    }

    .img-apropos {
    width: 100%;
    }

    .section-contact {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    #contact {
        margin: -2rem auto 3rem auto;
    } 

    #contact h3 {
        width: 100%;
        margin: 0 auto 8vh auto;
    }

    .text-contact {
    width: 100%;
    }

    #formulaire-home {
    width: 100%;
    }

    .contact-form {
    width: 100%;
    margin: -5vh auto 0 auto;
    }

    .page-pjt h1, #page-portfolio h1{
    font-size: 20cqw !important;
    margin: -14% 0 0 0 !important;
    }

    .page-pjt #hero h2, #page-portfolio h2, #page-contact h2 {
    font-size: 5.5cqw !important;
    }

    .page-pjt h2 span, #page-portfolio h2 span, #page-contact h2 span {
    font-size: 8cqw !important;
    }

    .presentation-project {
        flex-direction: column;
    }

    #page-souper .text-project p {
    width: 100%;
    }

    #page-ecrevisses .title-project {
    margin: 0 0 3rem -10vw;
    }

    #page-ecrevisses .title-project h2 {
        font-size: 28cqw;
    }

    .project-button{
    bottom: -15vh;
    }

    #page-ecrevisses .project-section, #page-assistpro .project-section {
    margin: 3rem auto 18vh !important;
    }
    
    #page-assistpro .title-project h2 {
    font-size: 26cqw;
    line-height: 30cqw;
    }

    #page-assistpro .text-project {
    margin-top: 3vh;
    }

    #page-aby .title-project {
    margin: 10% 0 8rem 0;
    }

    #page-aby .title-project h2 {
    font-size: 26cqw;
    margin-top: 0;
    display: flex;
    }

    #page-aby .title-project h2 span {
    padding-left: 5%;
    font-size: 26cqw !important;
    }

    #page-aby #hero {
    background-position: left;
    }

    #page-guud .project-section {
    margin: 2rem auto 25vh auto !important;
    }

    #page-yummy h1 {
    margin: 0;
    line-height: 22cqw;
    }

    #page-yummy .title-project h2 {
    font-size: 18cqw;
    display: flex;
    }

    #page-yummy .title-project h2 span {
    font-size: 18cqw;
    padding-left: 0;
    }

    #page-yummy .title-project {
    margin: 3% 0 0 0;
    }

    #page-souper .text-project p {
    width: 100%;
    margin: 0;
    }

    #page-souper .presentation-project {
    gap: 0;
    }

    .text-project {
        width: 100%;
    }

    #page-ekhi .text-project {
    margin-top: 0;
    }

   .project-section {
    margin: 3rem auto 10vh !important;
    }

    .project-link {
        bottom: -8% !important;
    }

    /*-------------- PAGE CONTACT -------------*/

#page-contact {
    background-image: url('../assets/images/fond-eclipsetelephone-responsive.jpg');
    height: fit-content;
    padding: 15% 0;
    width: 100%;
    overflow: hidden;
}

#page-contact #hero {
    flex-direction: column-reverse;
    justify-content: space-evenly;
    width: 90%;
    margin: 0 auto;
    height: 110vh;
}

#page-contact h1 {
    font-size: 26cqw !important;
}

#intro-contact {
    height: fit-content;
    position: absolute;
    bottom: -20%;
    left: 14%;
}

#intro-contact p {
    width: 75%;
}

.form-info .infos {
    flex-direction: column;
    align-items: center;
}

#page-contact #titre {
    display: flex;
    flex-direction: column;
    width: 100% !important;
    text-align: center;
}

#page-contact h2 {
    font-weight: 600;
    width: 100%;
}

#page-contact h1 {
    margin: -5rem 0 0 -20% !important;
}

#page-contact .info-content {
    padding-left: 0;
    width: 90%;
    margin: auto;
}

#page-contact .form-message, #page-contact #bouton-envoi {
    width: 90%;
    margin: auto;
}

#form-contact {
    width: 90%;
    margin-top: -10%;
}

#page-contact .contact-form {
    width: 100%;
    margin: auto;
}

.form-container {
    width: 100%;
}