/*RESPONSIVE------------------------------*/

@media (max-width: 1430px) {

    #usine {
        height: 565px;
    }

    #nuit,
    #jour {
        width: 200%;
        transform: scale(.75) translateX(-33.33%);
        transform-origin: center top;
    }

    #tuto1 {
        top: 173px;
        margin-left: -311px;
    }

    #f1,
    #f2 {
        height: 149px;
        top: -68px;
        transform: translateX(-29px);
    }

    #f2 {
        width: 60px;
        transform: translateX(29px);
    }

    #f3 {
        left: 80px;
        right: calc(50% + 29px);
    }

    #f4 {
        width: calc(50% - 80px);
        transform: translateX(-100%);
    }

    #flex-intro {
        padding: 0 80px;
    }

    #texte-intro {
        font-size: 2vw;
    }
}


@media (max-width: 1300px) {
    :root {
        --col: (50vw - 80px);
    }

    #f3 {
        left: 40px;
    }

    #f4 {
        width: calc(50% - 40px);
    }

    #flex-intro {
        padding: 0 40px;
    }

    #texte-intro {
        font-size: 2.3vw;
        margin: -0.8vw 0 -0.8vw 40px;
    }

    #portfolio .col {
        padding: 40px 40px 0;
    }

    .boite-projet {
        margin-top: 40px;
    }

    #nom {
        right: -155px;
    }

    #xp {
        transform: scale(.75) rotate(-7deg) translateX(-50%);
    }
}


@media (max-width: 960px) {

    #usine {
        height: 377px;
    }

    #nuit,
    #jour {
        transform: scale(.5) translateX(-50%);
    }

    #tuto1 {
        top: 90px;
        margin-left: -215px;
    }

    #tuto3 {
        bottom: 30px;
    }

    #f1,
    #f2 {
        height: 125px;
        top: -44px;
        transform: translateX(-20px);
    }

    #f2 {
        width: 70px;
        transform: translateX(20px);
    }

    #f3 {
        right: calc(50% + 20px);
        height: 93px;
    }

    #sarah-julie {
        display: block;
    }

    #txt-sarah {
        margin-top: -2px;
    }
}

@media (max-width: 920px) {

    :root {
        --col: (100vw - 128px);
    }

    #f4 {
        left: 40px;
        width: 0;
        transform: none;
    }

    #f5,
    #f6,
    #f7,
    #f8,
    #f9,
    #i1,
    #i2,
    #m2,
    #m3,
    #m4 {
        left: 40px;
    }

    /* #texte-intro {
        font-size: 2.3vw;
    } */

    #tuto2,
    #tuto4 {
        left: 39px;
    }

    #portfolio {
        padding-bottom: 300px;
    }

    #portfolio .col {
        min-width: 100%;
        padding: 0 40px 0 86px;
    }

    #portfolio .col:nth-child(5) {
        padding-top: 60px;
    }

    .boite-projet {
        margin-top: 40px;
    }

    #voir-portfolio {
        left: 86px;
        bottom: 160px;
        transform: none;
    }

    #chiffres {
        height: 900px;
    }

    #xp {
        left: 35%;
        top: 150px;
    }

    #c1 {
        left: 80%;
        top: 300px;
    }

    #c2 {
        left: 35%;
        top: 400px;
    }

    #c3 {
        left: 65%;
        top: 600px;
    }

    #jauge {
        bottom: 70px;
    }

    #lignes {
        left: 100px;
        bottom: 100px;
        transform: none;
    }
}

@media (max-width: 780px) {

    #flex-intro {
        display: block;
    }

    #boite-oim {
        width: 60%;
        height: 80vw;
        margin-bottom: 20px;
    }

    #boite-oim {
        transform: scaleX(-1);
    }

    #oim {
        background-size: 110%;
        transform: scaleX(-1);
    }

    #prenom {
        transform: scaleX(-1);
    }

    #texte-intro {
        min-width: 100%;
        margin: 0 0 0 -2px;
        font-size: 1.25em;
    }

    #chiffres {
        height: 1000px;
    }

    .chiffre {
        transform: scale(.7) translateX(-50%);
    }

    #xp {
        left: 52%;
        top: 100px;
    }

    #c1 {
        left: 52%;
        top: 300px;
    }

    #c2 {
        left: 52%;
        top: 500px;
    }

    #c3 {
        left: 52%;
        top: 700px;
    }

    #competences h2 {
        font-size: 3em;
    }

    #colones-competences {
        gap: 0;
    }

    .col-competences {
        min-width: 100%;
    }
}

@media (max-width: 630px) {

    :root {
        --col: (100vw - 76px);
    }

    #usine {
        height: 249px;
    }

    #nuit,
    #jour {
        width: 400%;
        transform: scale(.33) translateX(-113.66%);
    }

    #tuto1 {
        top: 32px;
        margin-left: -148px;
    }

    #tuto3 {
        display: none !important;
    }

    #f1,
    #f2 {
        height: 110px;
        top: -29px;
        transform: translateX(-14px);
    }

    #f2 {
        width: 75px;
        transform: translateX(14px);
    }

    #f3 {
        right: calc(50% + 14px);
    }

    #texte-intro {
        text-align: left;
    }

    #portfolio .col {
        padding: 0 16px 0 60px;
    }

    .boite-projet {
        margin-top: 16px;
    }

    #voir-portfolio {
        left: 60px;
    }

    #nom {
        display: none;
    }

    #xp {
        transform: scale(.55) rotate(-7deg) translateX(-50%);
        left: 56%;
    }


}

@media (max-width: 430px) {

    #competences h2 {
        font-size: 2.4em;
    }

    #colones-competences {
        padding: 0 16px;
    }

    #boite-oim {
        width: 100%;
        height: 120vw;
    }

    #voir-portfolio {
        transform: scale(.7);
        transform-origin: left center;
    }

    .mot {
        font-size: 2em;
    }

    #attention {
        background-size: 70%;
    }
}

@media (max-width: 355px) {

    #xp {
        transform: scale(.7) rotate(-7deg) translateX(-50%);
    }

    #xp .eclair {
        display: none !important;
    }
}