/*----- HEADER -----*/

.page-pjt h1, #page-contact h1, #page-portfolio h1 {
    font-size: 28cqw !important;
    line-height: 30cqw !important;
    margin: 0;
}

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

.page-pjt #project-title h2 {
    letter-spacing: 0;
}

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

#page-apropos #hero p {
    font-size: 3.5cqw !important;
}

nav li a {
    font-size: 5cqw;
    line-height: 1.5em;
}

p {
    font-size: 3.5vw;
}    

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

#txt-portfolio {
    position: absolute;
    bottom: 12%;
    left: 7%;
}
/*------- ACCUEIL ---------*/

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

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

#home button a {
    font-size: 4cqw;
}

.title-section-portfolio img {
    height: 60vh;
}

.form-row {
    width: 100%;
}

#formulaire-home {
    width: 100%;
    margin: 25% 0 15% 0;
}

.form-container {
    flex-direction: column;
}

.contact-form {
    width: 100%;
}

.page-pjt h1, #page-portfolio h1 {
    margin: 3% 0 0 0 !important;
}

/*------- PROJETS -------*/

#pjt-intro p {
        font-size: 3.8cqw;
        line-height: 4cqw;
    }

.project-section {
      grid-template-columns: 1fr;
      height: auto;
      max-height: none;
      gap: 1.5rem;
      margin: -2rem auto 25vh auto;
    }

    .col-left {
      padding: 0;
      height: auto;
    }

    .gallery-outer {
      height: 55vw;
      min-height: 200px;
      margin-top: 1rem;
      flex: none;
    }

    .gallery-item {
      flex: 0 0 80%;
    }

    .col-right {
      height: max-content;
    }

    .project-link {
      margin-top: 0.8rem;
    }

    #portfolio-track {
        margin-top: -15%;
    }

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

.presentation-project {
    /*height: 30vh;*/
    min-height: 0;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;
}

.title-project {
    width: 100%;
    height: auto;
    margin-top: -25vh;
    margin-bottom: 2.5rem;
}

.title-project h2 {
    font-size: 32cqw;
    letter-spacing : 0;
    position: relative;
    width: 100%;
}

.text-project {
    width: 100%;
    margin: 0;
    align-items: flex-start;
    font-size: 2.4vw;
}

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

.project-conditions .conditions {
    font-size: 7cqw;
    font-weight: 500;
}

.page-pjt h3 {
    font-size: 8cqw;
    white-space: nowrap;
    display: flex;
    flex-wrap: wrap;
    line-height: 9cqw;
    font-weight: 600;
}

.project-button {
    bottom: -18vh;
    font-size: 18cqw;
    text-align: center;
    margin-left: -5vw;
}

#page-ecrevisses #hero {
    background-position: 10% 50%;
}

.txt-hero {
    width: 60%;
    bottom: 10%;
    left: 7%;
}

.project-cat {
    display: flex;
    flex-direction: column;
    max-height: inherit;
}

#page-aby .title-project h2, #page-yummy .title-project h2 {
    display: block;
}

/*--- ECREVISSES ---*/

#page-ecrevisses h1 {
    margin: 0 !important;
}

#page-ecrevisses .title-project {
    height: auto;
}

/*--- GUUD ---*/

#page-guud h1 {
    margin: 8% 8% 0 0 !important;
    font-size: 34cqw !important;
}

#page-guud .title-project h2 {
    font-size: 48cqw;
}

#page-guud .presentation-project {
    /*height: 75vh;*/
    gap: 0;
}

#page-guud .text-project {
    padding-top: 3rem;
}

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

#page-guud .title-project {
    width: 100%;
    height: 26vh;
}

/*--- EKHI ---*/

#page-ekhi h1 {
    font-size: 32cqw !important;
}

#page-ekhi .title-project h2 {
    font-size: 48cqw !important;
    margin: 0;
}

#page-ekhi .title-project {
    margin-top: 0vh;
    height: 18vh;
}

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

#page-ekhi .presentation-project {
    padding-top: 0;
}


/*--- YUMMY TRAVEL ---*/

#page-yummy .page-pjt #pjt-title {
    line-height: 15rem;
}

#page-yummy .presentation-project {
    padding-top: 0;
}

#page-yummy .title-project h2, #page-yummy .title-project h2 span {
    font-size: 24cqw !important;
    line-height: 26cqw !important;
    font-family: 'Tuesday Night';
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}

#page-yummy .title-project h2 span {
    padding-left: 10rem;
}

#page-yummy #hero {
    background-position: 20%;
}

/* ---- Souper -----*/

#page-souper .text-project {
    justify-content: flex-start;
}

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

#page-souper .title-project {
    margin: 4% 0 0 -15%;
    height: 20svh;
}

#page-souper .project-section {
    margin: 5rem auto 15vh auto;
}

/* ---- Aby & Dan -----*/

#page-aby #hero {
    background-position: 10% 50%;
    height: 107vh;
}

#page-aby .title-project h2, #page-aby .title-project h2 span {
    font-size: 30cqw !important;
    line-height: 32cqw !important;
    font-family: 'Tuesday Night';
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}

#page-aby .text-project {
    justify-content: flex-start;
}

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

#page-aby .title-project {
    height: 0svh;
    white-space: nowrap;
    margin: 5% 0 5rem 0;
}

#page-aby .project-section {
    margin: 2rem auto 10vh auto;
}

#page-aby .presentation-project {
    padding-top: 0;
}

#page-aby .title-project {
    width: 100%;
    height: 35vh;
}

#page-aby .title-project h2 span {
    padding-left: 25%;
}

/*--- A2 Assist Pro ---*/

#page-assistpro #hero {
    background-position: 60% 50%;
}

#page-assistpro h1 {
    font-size: 24cqw !important;
    line-height: 30cqw !important;
    margin-left: -5rem;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 3% 0 0 -5vw !important;
}

#page-assistpro h1 span {
    margin-left: 60%;
}

#page-assistpro .presentation-project {
    padding-top: 5%;
}

#page-assistpro .title-project {
    height: 24vh;
}

#page-assistpro  .title-project h2 {
    font-size: 28cqw;
    line-height: 32cqw;
}

#page-assistpro .text-project {
    margin-top: 12rem;
}

#page-assistpro .project-section {
    margin: 10vh auto 20vh auto;
}

#page-assistpro .project-button {
    bottom: -18vh;
}

/*------------- PORTFOLIO -----------*/

#page-portfolio #hero {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
    height: 110vh;
}

#page-portfolio h1 {
    margin: 10% 0 0 0;
}

#page-portfolio #hero p {
    font-size: 4cqw;
}

.project-slide{
    flex: 0;
    grid-template-columns: 1fr;
    padding: 0 3rem 1.5rem 2rem;
}

.project-left {
    width: 100%;
    margin-top: -5%;
}

.project-category {
    font-size: 5.5cqw;
    line-height: 5.5cqw;
}

.project-categories {
    width: 70%;
}

.project-right {
    display: none;
}

.project-link {
    bottom: -10%;
    right: 20%;
    font-size: 14cqw;
}

.project-main-image {
    width: 88vw;
}

.img-placeholder {
    height: 72vh;
}

/*--- + EKHI ---*/

#page-portfolio #hero, #page-ekhi #hero {
    background-image: url('../assets/images/ekhi-fond.webp');
}
/*------------- PAGE CONTACT -----------------*/

#page-contact {
    padding: 10% 0;
}

#page-contact .contact-form #titre {
    margin-bottom: 3rem;
}

#page-contact h2 {
    margin-bottom: 8rem !important;
}

/*---------------- FOOTER -----------------*/

#footer-apropos {
    margin-top: -7%;
}

footer {
    display: flex;
    flex-direction: column;
    padding-bottom: 10%;
    background-image: url('../assets/images/fond-footer-responsive.jpg');
}

.menu-footer {
    width: 90%;
    margin: auto;
    align-items: center;
}

.menu-footer svg {
    width: 100%;
    margin-right: -10%;

}

footer nav {
    width: 90%;
    margin-top: -7%;

}

footer nav li a {
    font-size: 22px;
    line-height: 34px;

}

.form-contact {
    width: 90%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

}

#footer-txt {
    width: 80%;
}

/*---------- MODALE ---------*/
.modal {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url('../assets/images/eclipse-bienrecu-responsive.jpg');
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
    z-index: 9999;
}

.modal-content {
    padding: 2rem;
    text-align: center;
}

.modal-content h3 {
    font-size: 80px;
    display: flex;
    flex-wrap: wrap;
}

.modal-content p {
    font-size: 18px;
}