/* EN DESSOUS DE 1366PX POUR L'INSTANT */

@media screen and (min-width: 1039px) and (max-width: 1024px) {

    /* CONTENU GENERIQUE */

    .cursor {
        display: none;
    }


    .site-header-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-all-nav {
        width: auto;
    }

    .site-toggle-theme {
        margin-right: 30rem;
    }

    .site-toggle-theme {
        margin-right: 15rem;
    }

    .site-nav-item {
        font-size: 25rem;
    }

    .site-nav-liste svg {
        width: 80rem;
        height: 80rem;
    }

    .open-popup-button {
        margin-left: -22rem;
    }

    .site-nav-menu.active {
        width: 100%;
    }

    .site-footer-wrapper {
        width: 90%;
        margin: auto;
    }






    /* ACCUEIL */

    .site-main {
        min-height: 200rem;
    }

    .site-main-wrapper {
        width: 100%;
        min-height: 0rem;
    }

    .site-texte-fun {
        width: 90%;
        margin-left: auto;
    }

    .messagedefilant {
        min-height: 70rem;
        padding: 30rem 0rem 10rem;
    }

    .messagedefilant div h1, .messagedefilant div:after {
        font-size: 50rem;
    }

    .site-aboutme-wrapper {
        width: 100%;
        display: block;
        position: static;
    }

    .site-aboutme-image {
        width: 100%;
        height: 100%;
    }

    .site-aboutme-text h2 {
        padding-bottom: 15rem;
    }

    .site-aboutme-text {
        width: 80%;
        padding-top: 35rem;
        padding-left: 10%;
        padding-right: 10%;
        position: inherit;
    }

    .site-text {
        font-size: 14rem;
        line-height: 20rem;
        margin-bottom: 50rem;
    }

    .btn.yellow, .btn {
        border-radius: 35rem;
        padding: 16rem 32rem;
        margin: auto;
    }

    .site-title {
        padding-bottom: 20rem;
    }

    .site-works {
        min-height: 1000rem;
    }

    .site-works-wrapper {
        min-height: 700rem;
        width: 90%;
        margin: auto;
    }

    .site-item-work-link {
        height: 150rem;
        justify-content: center;
        flex-direction: column;
    }

    .site-item-work-link h4 {
        font-size: 30rem;
        margin-bottom: 20rem;
        width: auto;
    }

    .site-list-works {
        margin-bottom: 40rem;
    }

    .site-contact {
        min-height: 350rem;
    }

    .site-contact-wrapper {
        width: 100%;
        min-height: 350rem;
    }

    .site-contact-wrapper h3 {
        width: 80%;
        font-size: 25rem;
        margin: auto;
    }

    .site-contact-wrapper p {
        width: 80%;
        margin-bottom: 20rem;
    }

    .site-form-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-form-left {
        width: 100%;
    } 

    .site-form-right {
        display: none;
    }

    .site-form-wrapper .site-title {
        font-size: 50rem;
    }

    .site-form-top .site-text {
        width: 90%;
        font-size: 14rem;
        line-height: 20rem;
    }

    .site-form-content {
        width: 100%;
    }

    .site-footer {
        display: flex;
    }

    .site-footer-wrapper {
        width: 90%;
        margin: auto;
        height: auto;
    }

    .site-footer-all-content {
        flex-direction: column;
        height: auto;
    }

    .site-footer-content {
        width: 100%;
        justify-content: space-evenly;
    }

    .site-footer-img {
        width: 250rem;
        right: -97rem;
        top: -37rem;
        transform: rotate(-6deg);
    }







    /* REALISATIONS */

    .site-main-realisations-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-main-realisations-wrapper .site-title {
        font-size: 50rem;
        padding-bottom: 15rem;
    }

    .site-main-realisations-wrapper .site-text.light, .site-main-realisations-wrapper .site-text.dark {
        width: 90%;
        margin-bottom: 30rem;
    }

    .all-filter {
        margin-bottom: 30px;
    }

    .site-filter-works-wrapper {
        width: 90%;
    }

    .all-works-title {
        opacity: 0;
        margin-top: -75rem;
    }

    .all-works .site-item-work-link {
        height: 180rem;
    }

    .site-item-work-services {
        width: auto;
        margin-bottom: 20rem;
    }

    .site-item-work-link p {
        width: auto;
    }

    input[type=radio]+label {
        padding: 8rem 16rem;
        margin-right: 25rem;
        line-height: 60rem;
        font-size: 16rem;
    }





    /* ABOUT */

    .site-main-about {
        width: 100%;
        min-height: initial;
    }

    .site-main-about-wrapper {
        width: 100%;
        min-height: initial;
        flex-direction: column-reverse;
        position: static;
    }

    .site-main-about-text {
        width: 90%;
        height: auto;
        padding-top: 35rem;
        padding-bottom: 35rem;
        padding-left: 5%;
        padding-right: 5%;
        position: static;
        display: inline;
    }

    .site-main-about-text .site-title {
        font-size: 50rem;
        margin: 0rem;
    }

    .site-main-about-text .site-text {
        margin: 0rem;
    }

    .site-main-about-img {
        height: auto;
        width: 100%;
        position: static;
        transform: scalex(-1)
    }

    .site-main-about-img img {
        width: 100%;
    }

    .site-ability {
        width: 100%;
        min-height: 2350rem;
    }

    .site-ability-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-ability-wrapper h2 {
        font-size: 30rem;
        margin-bottom: 20rem;
    }

    .site-ability-content {
        margin-top: 35rem;
        display: inline;
    }

    .site-ability-content-left {
        margin: 0rem;
    }

    .site-ability-content-right {
        margin-top: 100rem;
      }

    .site-ability-bloc {
        width: 90%;
    }

    .site-ability-bloc:last-child {
        margin-bottom: 0rem;
    }



    /* DETAILS OF WORK */

    .site-main-realisations-details {
        margin-top: 35rem;
        height: 200rem;
    }

    .site-main-realisations-details {
        flex-direction: column;
    }

    .site-main-realisations-details-content:nth-child(3) {
        text-align: left;
    }

    .site-details-work {
        margin: 70rem 0rem 70rem 0rem;
    }

    .site-details-work-wrapper {
        width: 100%;
    }

    .site-details-work-picture {
        width: 100%;
        height: auto;
    }

}


/* FORMAT TABLETTE */
@media screen and (min-width: 768px) and (max-width: 1024px) {


    .site-header-wrapper {
        width: 100%;
    }

    .site-nav-menu.active {
        width: 100%;
    }

    .site-main-wrapper {
        width: 100%;
        min-height: 200rem;
    }

    .site-aboutme-wrapper {
        width: 100%;
    }

    .site-aboutme-image {
        width: 100%;
        height: 100%;
    }

    .site-aboutme-text {
        width: 100%;
    }
    

    .site-works-wrapper {
        width: 100%;
    }

    .site-contact-wrapper {
        width: 100%;
    }

    .site-footer-wrapper {
        width: 100%;
    }

}


/* FORMAT SMARTPHONE */

@media screen and (max-width: 767px) {


    /* CONTENU GENERIQUE */

    .cursor {
        display: none;
    }


    .site-header-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-all-nav {
        width: auto;
    }

    .site-toggle-theme {
        margin-right: 30rem;
    }

    .site-toggle-theme {
        margin-right: 15rem;
    }

    .site-nav-item {
        font-size: 25rem;
    }

    .site-nav-liste svg {
        width: 80rem;
        height: 80rem;
    }

    .open-popup-button {
        margin-left: -22rem;
    }

    .site-nav-menu.active {
        width: 100%;
    }

    .site-footer-wrapper {
        width: 90%;
        margin: auto;
    }






    /* ACCUEIL */

    .site-main {
        min-height: 200rem;
    }

    .site-main-wrapper {
        width: 100%;
        min-height: 0rem;
    }

    .site-texte-fun {
        width: 90%;
        margin-left: auto;
    }

    .messagedefilant {
        min-height: 70rem;
        padding: 30rem 0rem 10rem;
    }

    .messagedefilant div h1, .messagedefilant div:after {
        font-size: 50rem;
    }

    .site-aboutme-wrapper {
        width: 100%;
        display: block;
        position: static;
    }

    .site-aboutme-image {
        width: 100%;
        height: 100%;
    }

    .site-aboutme-text h2 {
        padding-bottom: 15rem;
    }

    .site-aboutme-text {
        width: 80%;
        padding-top: 35rem;
        padding-left: 10%;
        padding-right: 10%;
        position: inherit;
    }

    .site-text {
        font-size: 14rem;
        line-height: 20rem;
        margin-bottom: 50rem;
    }

    .btn.yellow, .btn {
        border-radius: 35rem;
        padding: 16rem 32rem;
        margin: auto;
    }

    .site-title {
        padding-bottom: 20rem;
    }

    .site-works {
        min-height: 1000rem;
    }

    .site-works-wrapper {
        min-height: 700rem;
        width: 90%;
        margin: auto;
    }

    .site-item-work-link {
        height: 150rem;
        justify-content: center;
        flex-direction: column;
    }

    .site-item-work-link h4 {
        font-size: 30rem;
        margin-bottom: 20rem;
        width: auto;
    }

    .site-list-works {
        margin-bottom: 40rem;
    }

    .site-contact {
        min-height: 350rem;
    }

    .site-contact-wrapper {
        width: 100%;
        min-height: 350rem;
    }

    .site-contact-wrapper h3 {
        width: 80%;
        font-size: 25rem;
        margin: auto;
    }

    .site-contact-wrapper p {
        width: 80%;
        margin-bottom: 20rem;
    }

    .site-form-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-form-left {
        width: 100%;
    } 

    .site-form-right {
        display: none;
    }

    .site-form-wrapper .site-title {
        font-size: 50rem;
    }

    .site-form-top .site-text {
        width: 90%;
        font-size: 14rem;
        line-height: 20rem;
    }

    .site-form-content {
        width: 100%;
    }

    .site-footer {
        display: flex;
    }

    .site-footer-wrapper {
        width: 90%;
        margin: auto;
        height: auto;
    }

    .site-footer-all-content {
        flex-direction: column;
        height: auto;
    }

    .site-footer-content {
        width: 100%;
        justify-content: space-evenly;
    }

    .site-footer-img {
        width: 250rem;
        right: -97rem;
        top: -37rem;
        transform: rotate(-6deg);
    }







    /* REALISATIONS */

    .site-main-realisations-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-main-realisations-wrapper .site-title {
        font-size: 50rem;
        padding-bottom: 15rem;
    }

    .site-main-realisations-wrapper .site-text.light, .site-main-realisations-wrapper .site-text.dark {
        width: 90%;
        margin-bottom: 30rem;
    }

    .all-filter {
        margin-bottom: 30px;
    }

    .site-filter-works-wrapper {
        width: 90%;
    }

    .all-works-title {
        opacity: 0;
        margin-top: -75rem;
    }

    .all-works .site-item-work-link {
        height: 180rem;
    }

    .site-item-work-services {
        width: auto;
        margin-bottom: 20rem;
    }

    .site-item-work-link p {
        width: auto;
    }

    input[type=radio]+label {
        padding: 8rem 16rem;
        margin-right: 25rem;
        line-height: 60rem;
        font-size: 16rem;
    }





    /* ABOUT */

    .site-main-about {
        width: 100%;
        min-height: initial;
    }

    .site-main-about-wrapper {
        width: 100%;
        min-height: initial;
        flex-direction: column-reverse;
        position: static;
    }

    .site-main-about-text {
        width: 90%;
        height: auto;
        padding-top: 35rem;
        padding-bottom: 35rem;
        padding-left: 5%;
        padding-right: 5%;
        position: static;
        display: inline;
    }

    .site-main-about-text .site-title {
        font-size: 50rem;
        margin: 0rem;
    }

    .site-main-about-text .site-text {
        margin: 0rem;
    }

    .site-main-about-img {
        height: auto;
        width: 100%;
        position: static;
        transform: scalex(-1)
    }

    .site-main-about-img img {
        width: 100%;
    }

    .site-ability {
        width: 100%;
        min-height: 2350rem;
    }

    .site-ability-wrapper {
        width: 90%;
        margin: auto;
    }

    .site-ability-wrapper h2 {
        font-size: 30rem;
        margin-bottom: 20rem;
    }

    .site-ability-content {
        margin-top: 35rem;
        display: inline;
    }

    .site-ability-content-left {
        margin: 0rem;
    }

    .site-ability-content-right {
        margin-top: 100rem;
    }

    .site-ability-bloc {
        width: 90%;
    }

    .site-ability-bloc:last-child {
        margin-bottom: 0rem;
    }



    /* DETAILS OF WORK */

    .site-main-realisations-details {
        margin-top: 35rem;
        height: 200rem;
    }

    .site-main-realisations-details {
        flex-direction: column;
    }

    .site-main-realisations-details-content:nth-child(3) {
        text-align: left;
    }

    .site-details-work {
        margin: 70rem 0rem 70rem 0rem;
    }

    .site-details-work-wrapper {
        width: 100%;
    }

    .site-details-work-picture {
        width: 100%;
        height: auto;
    }

}