/*
    ////////////////////////
    Mise en page des Projets
    ////////////////////////
*/
body{
    display:flex;
}
footer{
    bottom:0;
    position:fixed;
}
/*conteneur des projets et du titre */
.gen{
    margin:auto;
    height:80%;
    width:80%;
}
/*Titre de la page projet*/
h1{
    margin:auto;
    padding:unset;
}
/*conteneur de tous les projets*/
.fondp{
    background-image:url(../img/worldmap.png);
    background-repeat:no-repeat;
    background-position:center;
}
/*conteneur extérieur de projet*/
.projet{
    margin:auto;
    height:80%;
    justify-content:center;
    perspective:50rem;
}
/*conteneur intérieur de projet*/
#flip{
    height:80%;
    width:80%;
    box-shadow:0 0 15px black;
    transition:all 1s ease;
    transform-style:preserve-3d;
    margin:auto;
}
/*Face avant des tuiles projets*/
#flip div{
    position:absolute;
    background-color:#A52A2A;
    overflow:hidden;
    backface-visibility:hidden;
    /*pour la portabilité des navigateurs*/
    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    -o-backface-visibility:hidden;
}
/*Face arrière des tuiles projets*/
#flip div:first-child{
    background:#515151;
    transform:rotateX(180deg);
    color:#fff;
    text-shadow:0 0 1px #111;
    text-align:center;
    font-family:anita-semi-square;
    text-decoration:none;
}
#flip div p a{
    color:#fff;
    text-decoration:none;
    padding:3px;
}
/*Texte de la face avant en colonne*/
#flip div:last-child p{
    width:2rem;
    font-size:2rem;
    word-wrap:break-word;
    position:absolute;
    background-color:#515151;
    margin:auto;
    padding:10%;
    text-align:center;
}
/*Au survol de d'un projet*/
.projet:hover #flip{
    transform:rotateX(180deg);
    -moz-backface-visibility:hidden;/*Ajout d'un attribut pour corriger un bug de l'arrière plan sous firefox*/
}
.ajustement{
    display:none;
}

@media screen and (max-width:1366px), (orientation:portrait){
    h1{
        margin-top:5rem;
    }
    .gen{
        display:block;
    }
    .fondp{
        height:50%;
        display: block;
        background-size:contain;
    }
    #flip div:last-child p{
        width:fit-content;
        padding:2.5%;
    }    
    #flip div img{
        margin:auto;
    }
    .ajustement{
        display:inherit;
        height:50%;
    }
}
@media (orientation:landscape) and (max-height:400px) {
    h1{
        margin-top:5rem;
    }
}