@media only screen and (max-width: 1280px) {
    .nav {
        display: none;
    }
    .descProject,
    .projects,
    #contact {
        padding-left: 135px;
        gap: 24px;
    }
    .projectsTitle {
        padding: 8vh 0 8vh 135px;
    }
    #contact {
        padding: 0 135px 5vh 135px;
    }
    header img {
        height: 65px;
        margin: 40px;
    }
    .aboutDescription {
        width: 100%;
        z-index: 100;
    }
    #about {
        padding: 250px 450px 150px 135px;
        position: relative;
        min-height: 200px;
        overflow: hidden;
    }
    .aboutKevin {
        position: absolute;
        top: 0px;
        right: 80px;
        z-index: 0;
    }
    .aboutKevin>img {
        width: 500px;
    }
    .project {
      margin: 0;
    }
    .project2 {
      height: 100%;
      width: 100%;
      padding: 24px;
      box-sizing: border-box;
    }
    #contact>div {
        width: 600px;
    }
    .mentionsLegales {
        padding: 10px;
    }
    .footerSocialMedia {
        height: 80px;
    }
    .footerSocialMedia svg {
        height: 50px;
        padding: 10px;
    }
    .footerSocialMedia svg:hover {
        height: 56px;
        padding: 7px;
    }
    .footer {
        margin-top: 10px;
    }
    #home {
        align-items: center;
        justify-content: end;
    }
    .socialMedia {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: static;
        height: 400px;
        width: 80px;
        margin-right: 20px;
    }
    .socialMedia svg {
        height: 50px;
        padding: 10px;
    }
    .socialMedia svg:hover {
        height: 56px;
        padding: 7px;
    }
    .txtUnderline {
        font-size: 2.8vh;
    }
}


/*************************************   TAILLE 900PX   ***********************************************/


/*************************************   TAILLE 900PX   ***********************************************/


/*************************************   TAILLE 900PX   ***********************************************/

@media only screen and (max-width: 900px) {
    * {
        font-size: 1.7vh;
    }
    .descProject,
    .projectsTitle,
    #about {
        padding-left: 80px;
        padding-right: 120px;
    }
    #about {
        padding: 650px 80px 100px 80px;
        position: relative;
        min-height: 200px;
        overflow: hidden;
    }
    .aboutKevin {
        top: -20px;
        right: 60px;
        z-index: 0;
    }
    .aboutKevin>img {
        width: 580px;
    }
    .projectsTitle {
        padding: 20% 120px 5% 80px;
    }
    .projects {
        padding-left: 80px;
        padding-right: 55px;
    }
    header {
      position: absolute; /* Changez à 'relative' pour que le header ne soit pas fixe */
      top: 0; /* Aligne le header en haut */
      left: 0; /* Aligne le header à gauche */
      right: 0; /* Aligne le header à droite */
      display: flex; /* Utilise flexbox pour le placement */
      justify-content: space-between; /* Espace entre le logo et le bouton EN */
      align-items: center; /* Centrer verticalement le contenu */
    }

    header img {
        height: 80px;
        margin: 80px;
    }
    .language-switcher {
      position: absolute;
      top: 3vh;       /* Ajuste selon tes préférences */
      right: 3vh;
  }
    .language-switcher a {
      padding: 0.5rem 1rem; /* Ajoute un padding autour du texte */
      /*border: 3.5px solid white;  Bordure blanche */
  }


    .txtUnderline {
        font-size: 2vh;
        padding-bottom: 0.75vh;
    }
    .underLine {
        width: 7vh;
        height: 0.4vh;
    }
    .titleProject {
        font-size: 6vh;
        padding: 3vh 0;
    }
    .btnRectangle a {
        padding: 0vh 2.5vh;
    }
    .btnRectangle {
        border: white 0.5vh solid;
        padding: 1.2vh 0vh;
    }
    #contact {
        padding: 5vh 85px 5vh 85px;
        height: auto;
    }
    #contact>div {
        width: 500px;
    }
    form input {
        margin: 15px 15px 0 15px;
        color: #222220;
        font-size: 1.7vh;
        padding: 15px;
    }
    .formName>input {
        width: auto;
        color: #222220;
        font-size: 1.7vh;
    }
    textarea {
        margin: 15px 15px 0 15px;
        padding: 15px;
        font-size: 1.7vh;
    }
     ::placeholder {
        font-size: 1.7vh;
    }
    .formName {
        flex-direction: column;
    }
    form input[type=submit] {
        margin: 15px;
    }
}


/*************************************   TAILLE 720PX   ***********************************************/


/*************************************   TAILLE 720PX   ***********************************************/


/*************************************   TAILLE 720PX   ***********************************************/

/**@media only screen and (max-width: 720px) {
    * {
        font-size: 1.5vh;
    }
    p {
        line-height: 20px;
    }
    header img {
        height: 60px;
        margin: 30px;
    }
    .socialMedia {
        display: none;
    }
    .descProject,
    #about {
        padding-left: 30px;
        padding-right: 30px;
    }
    .projectsTitle {
        padding: 20% 30px 10% 30px;
    }
    #about {
        padding: 350px 30px 80px 30px;
    }
    .aboutKevin {
        top: -30px;
        right: 10px;
    }
    .aboutKevin>img {
        width: 400px;
    }
    .titleProject {
        font-size: 5vh;
        padding: 3vh 0;
    }
    .projects {
        padding-right: 15px;
        padding-left: 30px;
    }
    .project {
        width: 100%;
        margin: 0 5% 10% 0;
    }
    #contact>div {
        width: 108%;
    }
    .autresProjets{
        width: 100%;
    }
    #autresProjets{
        width: 100%;
    }
    #contact {
        padding: 5vh 30px 5vh 30px;
    }
    .footerSocialMedia {
        overflow: hidden;
    }
    .footerSocialMedia svg {
        height: 40px;
        padding: 10px;
    }
    .footerSocialMedia svg:hover {
        height: 46px;
        padding: 7px;
    }
}**/


/*************************************   TAILLE 500PX   ***********************************************/


/*************************************   TAILLE 500PX   ***********************************************/


/*************************************   TAILLE 500PX   ***********************************************/

/**@media only screen and (max-height: 500px) {
    * {
        font-size: 3vh;
    }
    p {
        line-height: 20px;
    }
    header {
        position: absolute;
    }
    header img {
        height: 60px;
        margin: 30px;
    }
    .projects,
    #contact,
    #about,
    .projectsTitle {
        padding-left: 30px;
    }
    .descProject {
        padding-left: 30px;
        padding-top: 10px;
    }
    .txtUnderline {
        font-size: 4vh;
    }
    .titleProject {
        font-size: 12vh;
    }
    .socialMedia {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: static;
        height: 400px;
        width: 80px;
        margin-right: 20px;
    }
    .socialMedia svg {
        height: 50px;
        padding: 10px;
    }
    .socialMedia svg:hover {
        height: 56px;
        padding: 7px;
    }
    #about {
        padding: 100px 450px 100px 30px;
        min-height: 200px;
        overflow: hidden;
    }
    .aboutKevin {
        top: -20px;
        right: 80px;
    }
    .aboutKevin>img {
        width: 330px;
    }
    .underLine {
        width: 12vh;
        height: 0.7vh;
    }
    #contact {
        height: auto;
        min-height: 95vh;
        padding: 0 135px 5vh 135px;
    }
     ::placeholder,
    textarea,
    .formName>input {
        font-size: 3vh;
    }
    form input {
        padding: 15px;
    }
    textarea {
        padding: 15px;
    }
    form input[type=submit] {
        padding: 15px;
        font-size: 3vh;
    }
    .btnRectangle a {
        padding: 2vh 3.5vh;
    }
} **/


/*************************************   TAILLE 720PX DÉSACTIVÉ     ***********************************************/
@media (max-width: 720px) {
    header img {
      height: 64px;
      margin: 24px;
    }
    .descProject, .projectsTitle, #about {
      padding-left: 24px;
      padding-right: 24px;
    }
    .btnRectangle {
      padding: 0;
      display: block;
    }
    .btnRectangle a {
      padding: 16px 24px;
      display: block;
    }
    .socialMedia {
        display: none;
    }
    #about {
      padding-top: 400px;
    }
    .aboutKevin > img {
      width: 380px;
    }
    .aboutKevin {
      right: 0px;
    }
    .projects {
      padding-left: 24px;
      padding-right: 24px;
      gap: 24px;
    }
    .project {
      width: 100%;
      margin: 0;
      height: auto;
      aspect-ratio: auto 2 / 1.3;
    }
    .project2 {
      height: 100%;
      width: 100%;
      padding: 24px;
      box-sizing: border-box;
    }
    .project .project2 > p,  .project .project2 > h4{
        color: rgba(255, 255, 255, 1);
    }
    .project .project2 {
        background-color: rgba(1, 1, 1, 0.15);
    }
    .project2 > h4 {
        font-size: 3vh;
    }
    form input {
      margin: 0;
    }
    textarea {
      margin: 0;
    }
  
  
  #contact p {
    padding: 0 0 1vh 0;
  }
  
  .formName, form {
    gap: 16px;
  }
  form{
    margin-top: 24px;
  }
  
#contact > div:nth-child(1) {
    width: 100%;
}

form input[type="submit"] {
    margin: 0;
    padding: 16px;
}

.projectsTitle {
    /* padding: 20% 120px 5% 80px; */
    padding: 80px 24px 20px 24px;
}

#contact {
    padding: 80px 24px 40px 24px;
}

#mentionsLegales {
    padding: 0 24px;
}
.titleMentions {
    font-size: 6vh;
}
#descriptionProjet {
    padding: 80px 24px;
  }
  
  .infoRole {
    flex-direction: column;
    padding-bottom: 3vh;
  }
  
  #autresProjets {
    padding: 0 24px;
  }
  
  #autresProjets .project {
    width: 100%;
    aspect-ratio: auto 2 / 1.3;
    height: auto;
    min-height: 0;
    min-width: 0;
    margin: 0;
  }

.titreProjet h4 {
    font-size: 48px;
    text-align: center;
    padding: 24px;
  }
#autresProjets .project2 {
    height: 100%;
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
  }
.containerAutresProjets {
    gap: 16px;
  }
  
  /**** SECTION DESIGN ****/

.sectionDesign{
    padding-top: 112px;
    height: auto;
  }
  
  .titreSectionDesign{
    padding: 24px;
    box-sizing: border-box;
    width: 100%;
    gap: 16px;
  }
  
  .titreSectionDesign h4{
    font-size: 48px;
    text-align: center;
  }
  
  .titreSectionDesign p{
    padding: 0;
  }
  
  .descriptionSectionDesign{
    padding: 80px 24px;
  }
  
  /***** PDF *****/
  .infoRole{
    width: 100%;
  }
  .btnRectangle{
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  .sectionPDF .embedPDF, .sectionPDF .txtProjetDescription{
    display: none;
  }

  .sectionPDF{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .btnPDF{
    display: block;
  }

  #descriptionProjet > div{
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
.embedPDF{
    display: none;
  }

.apercuJeu{
    display: none;
}

.pEtc{
  background-image:url("../img/projets//responsive/projetETC.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.pRiseOfRealm{
    background-image:url("../img/projets/responsive/projetRiseOfRealm.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pAnuu{
    background-image:url("../img/projets/responsive/projetAnuu.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pFish{
    background-image:url("../img/projets/responsive/projetFish.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pMine{
    background-image:url("../img/projets/responsive/projetMine.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

    .pMineJV {
        background-image: url("../img/projets/responsive/projetMineJV.jpg");
        background-size: cover;
        background-repeat: no-repeat;
    }
  
  .pGetOut{
    background-image:url("../img/projets/responsive/projetGetOut.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pTPS{
    background-image:url("../img/projets/responsive/projetTPS.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pUnivers{
    background-image:url("../img/projets/responsive/projetUnivers.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pEquilibrage{
    background-image:url("../img/projets/responsive/projetEquilibrage.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pHostile{
    background-image:url("../img/projets/responsive/projetMerHostile.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pNavire{
    background-image:url("../img/projets/responsive/projetCaleNavire.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pEscape{
    background-image:url("../img/projets/responsive/projetEscape.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pQuest{
    background-image:url("../img/projets/responsive/projetQuest.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pLastHope{
    background-image:url("../img/projets/responsive/projetLastHope.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pCvAnime{
    background-image:url("../img/projets/responsive/projetCV.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pQuestDesign{
    background-image:url("../img/projets/responsive/projetQuestDesign.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pCardDesign{
    background-image:url("../img/projets/responsive/projetCardDesign.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }
  
  .pEconomyDesign{
    background-image:url("../img/projets/responsive/projetEconomyDesign.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

  .pMirror{
    background-image:url("../img/projets/responsive/projetMirror.jpg");
    background-size: cover;
    background-repeat: no-repeat;
  }

/**** PROJET 18 : ESCAPE THE CITY ****/

.slideETC1{
  background-image: url("../img/etc/etc_responsive_img1.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 0vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideETC2{
  background-image: url("../img/etc/etc_responsive_img2.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 100vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

.slideETC3{
  background-image: url("../img/etc/etc_responsive_img3.jpg");
  background-size: cover;
  height: 100vh;
  position: absolute;
  width: 100vw;
  left: 200vw;
  box-shadow: inset 0vh -40vh 30vh #222220;
  transition: left 1s ease-in-out;
  background-position: bottom;
}

  .slideP1{
    background-image: url("../img/alamine/alamine_responsive_img1.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 0vw;
    box-shadow: inset 20vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
  }
  
  .slideP2{
    background-image: url("../img/etc/etc_responsive_img1.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 100vw;
    box-shadow: inset 20vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
  }
  
  .slideP3{
    background-image: url("../img/riseOfRealm/rise_responsive_img1.jpg");
    background-size: cover;
    height: 100vh;
    position: absolute;
    width: 100vw;
    left: 200vw;
    box-shadow: inset 20vh -40vh 30vh #222220;
    transition: left 1s ease-in-out;
    background-position: bottom;
  }
}