/*****************************************************
********* RESPONSIVE GÉRÉ POUR FORMAT TABLETTE *******
*****************************************************/

@media screen and (max-width:860px) {
    :root {
        font-size: 50%;
    }
}

@media screen and (max-width:650px) {
    :root {
        font-size: 50%;
    }

    main {
        padding-top: 16.5rem;
    }

    /* HEADER */

    .bandeau {
        height: 16.5rem;
        display: flex;
        flex-direction: column;
    }

    .bandeau figure {
        padding-bottom: 2rem;
    }

    header a {
        font-size: 1.8rem;
    }

    .video {
        padding-bottom: 3rem;
    }

    /* MAIN */

    #work .sousWork {
        padding: 0rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #work .sousWork div {
        width: 80%;
        padding: 0rem 5rem 5rem;
    }

    #work .bloc2 {
        display: flex;
        justify-content: center;
    }

    #about {
        padding: 0rem;
    }

    #about .sousAbout {
        padding: 0rem;
        display: flex;
        flex-direction: column;
    }

    #about .sousAbout div {
        padding: 0rem 5rem 4rem;
    }

    #about .presentation {
        width: 80%;
    }

    #mescompetences .sousCompetences {
        padding: 0rem 2rem 0rem;
    }

    #mescompetences .graphisme {
        width: 40%;
    }

    #contact .sousContact {
        padding: 0rem 5rem;
    }

    #contact .sousContact .two {
        padding: 0rem 3rem !important;
    }

    #contact .three img {
        width: 10rem;
    }


    /* FOOTER */

    footer .pieddepage {
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 2rem 2rem;
    }

    footer .pieddepage p {
        padding: 0rem 1rem;
    }

    /********* PAGE 2 GALERIE PROJETS ************/

    main nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sectionPage2 {
        padding: 0rem 10rem;
    }

    .page2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4rem 0rem;
    }

    .marginright,
    .marginleft {
        margin: 0rem;
    }

    .textbefore {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        justify-content: center;
    }

    .galerie h2 {
        padding: 2rem 5rem 3rem;
    }

    .box {
        padding: 0rem;
    }

    .page2 p {
        text-align: center;
    }

    .page2 img {
        padding: 0rem 2rem 4rem;
    }

}



@media screen and (max-width:500px) {
    #contact .sousContact {
        padding: 0rem;
        display: flex;
        flex-direction: column;
    }

    #contact .sousContact div {
        padding: 0rem 0rem 3rem;
    }

}




/*****************************************************
********* RESPONSIVE GÉRÉ POUR IPHONE 12PRO **********
*****************************************************/

/************** HOMEPAGE ************/

@media screen and (max-width:390px) {
    :root {
        font-size: 50% !important;
    }

    h2 {
        text-align: center;
        padding: 0rem 5rem 5rem;
    }

    /* GESTION DES ANCRES */

    main {
        padding-top: 16.5rem;
    }

    #affiche:target {
        padding-top: 16.5rem;
    }

    #video:target {
        padding-top: 16.5rem;
    }

    #visuelle:target {
        padding-top: 16.5rem;
    }

    #photo:target {
        padding-top: 16.5rem;
    }

    /* HEADER */

    .bandeau {
        height: 16.5rem;
        display: flex;
        flex-direction: column;
    }

    .bandeau figure {
        padding-bottom: 2rem;
    }

    header a {
        font-size: 1.8rem;
    }

    .video {
        padding-bottom: 3rem;
    }

    /* WORK */

    #work .sousWork {
        padding: 0rem;
        display: flex;
        flex-direction: column;
    }

    #work .sousWork div {
        width: 100%;
        padding: 0rem 0rem 2rem;
    }

    #work button {
        margin-left: 8rem;
    }

    #work .bloc2 {
        display: flex;
        justify-content: center;
    }

    /* ABOUT */

    #about {
        padding-bottom: 5rem;
    }

    #about .sousAbout {
        padding: 0rem;
        display: flex;
        flex-direction: column;
    }

    #about .sousAbout div {
        padding: 0rem 2rem 4rem;
    }

    #about .presentation {
        width: 100%;
    }

    /* COMPETENCES */

    #mescompetences .sousCompetences {
        padding: 0rem;
        display: flex;
        flex-direction: column;
        padding-bottom: 5rem;
    }

    #mescompetences .graphisme {
        width: 100%;
        margin-bottom: 0rem;
        padding: 2rem 0rem 2rem;

    }

    .sousCompetences img {
        width: 5rem !important;
        padding-bottom: 0rem !important;
    }

    h3 {
        padding: 5rem 0rem 1rem;
    }

    /* CONTACT */

    #contact .sousContact {
        padding: 0rem;
        display: flex;
        flex-direction: column;
    }

    #contact .sousContact div {
        padding-left: 0rem;
        padding-right: 0rem;
    }

    #contact {
        padding-bottom: 0rem;
    }

    #contact .one {
        padding-bottom: 3rem;
    }

    #contact .one p {
        font-size: 1.8rem;
    }

    #contact .three {
        padding-bottom: 2rem;
    }

    /* FOOTER */

    footer .pieddepage {
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 2rem 2rem;
    }

    footer .pieddepage p {
        padding: 0rem 1rem;
    }


    /********* PAGE 2 GALERIE PROJETS ************/

    main nav {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .sectionPage2 {
        padding: 0rem 2rem;
    }

    .page2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 4rem 0rem;
    }

    .marginright,
    .marginleft {
        margin: 0rem;
    }

    .textbefore {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap-reverse;
        justify-content: center;
    }

    .galerie h2 {
        padding: 2rem 5rem 3rem;
    }

    .box {
        padding: 0rem;
    }

    .page2 p {
        text-align: center;
    }

    .page2 img {
        padding: 0rem 2rem 4rem;
    }


    /********* PAGE 3 MENTIONS LÉGALES ************/


    .retrait {
        padding: 0rem 5rem 10rem;
    }
}