@font-face {
    font-family: 'Diogenes';                                
    src: url('ressources/DIOGENES.ttf') format('truetype'); 
}


body {
    font-family: 'Diogenes', sans-serif;
    background-size: cover;    
    background-position: center;                    
    background-repeat: no-repeat;  
}


/* ajuster le fond d'écran pour un grand écran */

@media screen and (min-width: 1800px) {
    body {
        background-size: 110% auto; 
    }
}



body.easy {
    background-image: url('ressources/ville.webp');
}

body.medium {
    background-image: url('ressources/olympe.webp');
}

body.hard {
    background-image: url('ressources/enfer.webp');
}

body.ecranTitre {
    background-image: url('ressources/ecran-titre.webp');
}

h1 {
    text-align: center;
    font-size: 40px;
    margin-bottom: 0px;
    margin: 0px;
    color: #68432a;
}

h2 {
    text-align: center;
    font-size: 15px;
    margin-bottom : 0px;
    color: #68432a;
}

.grille_facile,
.grille_hard,
.grille_medium {
    background: color;
    display:  grid;
}


.grille_facile {                       

    grid-template: repeat(2, 250px) / repeat(3, 250px);  
    margin: 50px 0px 0px 385px;
}

@media screen and (min-width: 1800px) {
    .grille_facile {
        margin: 50px 0px 0px 545px;
    }
}


.grille_medium {                       

    grid-template: repeat(3, 180px) / repeat(4, 180px);
    margin: 0px 0px 0px 380px;  
}

@media screen and (min-width: 1800px) {
    .grille_medium {
        margin: 50px 0px 0px 585px;
    }
}



.grille_hard{                       

    grid-template: repeat(4, 140px) / repeat(6, 140px); 
    margin: 0px 0px 0px 335px;  
}

@media screen and (min-width: 1800px) {
    .grille_hard {
        margin: 50px 0px 0px 515px;
    }
}

.carte {
    margin: 5px;
}

.double-face {
  /*  position: relative; */
    width: 100%;
    height: 100%;
    transition: transform 1s;
    transform-style: preserve-3d; /* permet de garder la 3D quand les cartes se retournent */
}

.face, .arriere-easy,
.arriere-medium,
.arriere-hard {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;           
    -webkit-backface-visibility: hidden;
}

.face {
    transform : rotateY(180deg);
 /*   display: flex; 
    align-items: center; */
}

.face img {
    width: 100%;
    height: 100%;
 /*   object-fit: cover; */
}


.arriere-easy {
    background-image: url('ressources/dos-carte-easy.webp'); 
}

.arriere-medium {
    background-image: url('ressources/dos-carte-medium.webp'); 
}

.arriere-hard {
    background-image: url('ressources/dos-carte-hard.webp'); 
}

.arriere-easy,
.arriere-medium,
.arriere-hard {

    background-size: cover; 
  /*  background-position: center; */
}


.active {
    transform: rotateY(180deg);
}

.retour {
    position: absolute;
    top: 440px;
    width: 250px;
    height: 250px;
}

@media screen and (min-width: 1800px) {
    .retour {
        position: absolute;
        top: 660px;
        width: 250px;
        height: 250px;
    }
}


.poterie {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0px 0px 0px 150px;
}
.image-poterie {
    text-align: center;
}
.image-poterie img {
    width: 75%;
    height: 75%;
    display: block;
    margin-bottom: 10px;
}
.image-poterie a {
    text-decoration: none;
    color: red;
    font-size: 50px;
}

.titre-level {

    padding-right: 76px;
}