/* //////////////////////////// GRAND ORDINATEUR */
@media screen and (min-width: 980px) {
    @font-face {
        font-family: "lausanne";
        src: url("/type/lausanne.ttf");

    }

    @font-face {
        font-family: "traulha";
        src: url("/type/Traulha.ttf");
    }



    body {

        background-color: black;
        color: white;
        text-decoration: none;
        font-family: "lausanne";

        margin-top: 90px;
        margin-left: 80px;
        margin-right: 80px;
    }

    body a {
        color: white;
        text-decoration: none;
    }



    #retour img {
        width: 25px;
        position: absolute;
        margin-top: -3.1px;
    }


    h1 {
        width: 400px;
        letter-spacing: 10;
        font-size: 1.2em;
        padding-left: 50px;
    }

    #menu {
        display: flex;
        float: right;
        margin-top: -53px;

    }

    h3 {
        margin-top: 16px;
        padding-left: 50px;
        padding-right: 50px;
    }

    h4 {
        margin-top: 16px;
    }

    h2,
    h3,
    h4 {
        font-size: 1.2em;
    }

    
    
    
    
    
    
    
    
    /*Afficher les liens vers catégories*/


    .a-img-txt {
        display: grid;
    }

    /* les enfants se superposent */
    .a-img-txt > * {
        grid-area: 1/1/-1/-1;
        /* raccourci pour grid-row et grid-column */
    }

    /* le texte */
    .a-txt {
        opacity: 0;
        transition: opacity .8s;
    }


    /* le survol */
    .a-txt:hover {
        opacity: 1;
    }
    
    
    
    
    
    
    
    
    
    
    


    /*SECTION 2*/

    #travaux img {
        margin: 40px;
        width: 390px;
        height: 270px;
        background-color: white;
        border: 1px solid;

    }

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

    .apercutravaux {
        margin-top: 40px;
        margin-bottom: 70px;

    }
    
    
    
    #travauxphoto img{
        margin: 40px;
        height:270px;
        height: auto;
max-height: 270px;
        background-color: white;
        border: 1px solid;
    }
    
    .travauxphoto {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    
    .apercu2{
        padding-left: 105px;
        padding-right: 105px;
    }
    
    
}

/* //////////////////////////// IPAD */
@media screen and (max-width: 979px) {

    @font-face {
        font-family: "lausanne";
        src: url("/type/lausanne.ttf");

    }

    @font-face {
        font-family: "traulha";
        src: url("/type/Traulha.ttf");
    }



    body {

        background-color: black;
        color: white;
        text-decoration: none;
        font-family: "lausanne";

        margin-top: 60px;
        margin-left: 30px;
        margin-right: 30px;
    }

    body a {
        color: white;
        text-decoration: none;
    }



    #retour img {
        
        width: 40px;
        position: absolute;
        margin-top: -9.9px;
    }


    h1 {
        width: 280px;
        letter-spacing: 6;
        font-size: 1.2em;
        padding-left: 70px;
    }

    #menu {
        display: flex;
        float: center;
        text-decoration: line-through;
        flex-direction: column;
        text-align: center;
        margin-top: 73px;
 

    }

    h3 {
        margin-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
    }

    h4 {
        margin-top: 20px;
        
    }

    h2,
    h3,
    h4 {
        font-size: 1.1em;
    }



    /*SECTION 2*/

    #travaux img {
        margin-top: 60px;
        max-height: 220px;
        margin: 30px;
        height: auto;
        background-color: white;
        border: 0.6px solid;

    }

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

    .apercutravaux {
        margin-top: 10px;
        margin-bottom: 70px;

    }
    
    #travauxphoto img{
        margin-top: 60px;
        margin: 50px;
        height: auto;
max-height: 300px;
        background-color: white;
        border: 0.6px solid;
    }
    
    .travauxphoto {
        display: flex;
        flex-grow: 1;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    
    .apercu2{
        padding-left: 105px;
        padding-right: 105px;
    }
    
    .a-txt{
        display: none;
    }

}

/* //////////////////////////// Smartphone */
@media screen and (max-width: 580px) {

    @font-face {
        font-family: "lausanne";
        src: url("/type/lausanne.ttf");

    }

    @font-face {
        font-family: "traulha";
        src: url("/type/Traulha.ttf");
    }



    body {

        background-color: black;
        color: white;
        text-decoration: none;
        font-family: "lausanne";

        margin-top: 60px;
        margin-left: 30px;
        margin-right: 30px;
    }

    body a {
        color: white;
        text-decoration: none;
    }



    #retour img {
        
        width: 30px;
        position: absolute;
        margin-top: -6.4px;
    }


    h1 {
        width: 280px;
        letter-spacing: 6;
        font-size: 0.9em;
        padding-left: 50px;
    }

    #menu {
        display: flex;
        float: center;
        text-decoration: line-through;
        flex-direction: column;
        text-align: center;
        margin-top: 73px;
 

    }

    h3 {
        margin-top: 20px;
        padding-left: 50px;
        padding-right: 50px;
    }

    h4 {
        margin-top: 20px;
        
    }

    h2,
    h3,
    h4 {
        font-size: 0.9em;
    }



    /*SECTION 2*/

    #travaux img {
        margin-top: 60px;
        max-height: 220px;
        height: auto;
        background-color: white;
        border: 0.6px solid;

    }

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

    .apercutravaux {
        margin-top: 10px;
        margin-bottom: 70px;

    }
    
    #travauxphoto img{
        margin-top: 60px;
        
        height: auto;
max-height: 220px;
        background-color: white;
        border: 0.6px solid;
    }
    
    .travauxphoto {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: center;
    }
    
    .apercu2{
        padding-left: 105px;
        padding-right: 105px;
    }
    
    .a-txt{
        display: none;
    }

}