/* Feuille de style comportant le style des blocs ou encore des structures de la page, les images */
/*////////////////////////////////////*/

* {
    margin: 0;
    padding: 0;
    width: auto;
    box-sizing: border-box;
    scroll-behavior: smooth;
    overflow-x: hidden ! important;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/*/////////////////////////////////////*/
/* Section d'introduction au site */
#home-introduction {
    background: url("../img/bannieres/eldenring.jpg") center/cover;
    height: 700px;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*////////////////////////////////////*/
/* Section d'introduction numéro 2 au site */
#home-introduction-2 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    padding: 10%;
    overflow: hidden;
    position: relative;
}

/* Image d'introduction numéro 2 au site */
.image-introduction-2 {
    position: absolute;
    margin-left: 47%;
    width: 55%;
    margin-top: 3%;
}

/*///////////////////////////////////*/
/* Section d'explications du site */
#home-explications {
    padding: 4%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    flex-wrap: wrap;
    text-align: center;
}

/* Images d'explications du site */
.image-explications-1 {
    background: url('../img/fond_transparent/tc.png') center/cover;
    background-position: top;
    height: 350px;
    width: 80%;
    margin: auto;
}

.image-explications-2 {
    background: url('../img/fond_transparent/gnar.png') center/cover;
    background-position: top;
    height: 350px;
    width: 80%;
    margin: auto;
}

.image-explications-3 {
    background: url('../img/fond_transparent/mario.png') center/cover;
    background-position: top;
    height: 350px;
    width: 70%;
    margin: auto;
}

/*///////////////////////////////////////////////*/
/* Section jeux du moment */
#home-jeuxdumoment {
    background: url("../img/bannieres/baldursgate.jpg") center/cover;
    height: 600px;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/*/////////////////////////////////*/
/* Section personnalisation du site */
#home-personnalisation {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: right;
    position: relative;
    height: 900px;
    overflow: hidden;
}

/* Image section personnalisation du site */
.image-personnalisation {
    position: absolute;
    margin-left: -70%;
    z-index: 10;
}

/*///////////////////////////////////*/
/* PAGE DECOUVERTE */
/*////////////////////////////////*/
/* Section découverte */
#decouverte-derniers-jeux {
    padding: 3% 5%;
}

/* Section derniers jeux ajoutés */
.decouverte-derniers-jeux-blocs {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Section jeux ps5 */
.decouverte-jeux-blocs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/*/////////////////////////////*/
/* PAGE DESCRIPTION JEU */
/*///////////////////////////*/
/* Section bandeau intro jeu  */
#description-jeu-banniere {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    text-align: center;
}

#description-jeu-infos {
    display: grid;
    grid-template-columns: 1fr 2fr;
    padding: 3%;
    align-items: center;
}

.description-jeu-banniere-texte div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 1%;
}

.description-jeu-banniere-texte div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin: 1%;
}

/*////////////////////////////////*/
/* ALL GAMES REGISTERED ON THE WEBSITE */
/*/////////////////////////////*/
.jeux-recherche-titre {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#jeux-liste-noms-complets {
    padding: 2% 0%;
}

#jeux-liste li {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 1% 0%;
}

.jeux-liste-img  {
    height: 100px;
    width: 200px;
    overflow: hidden;
}

.jeux-liste-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/*////////////////////////////////*/
/* PAGE CONNEXION ET INSCRIPTION */
/*//////////////////////////////*/
/* Section bannière d'entrée page de connexion */
#connexion-banniere {
    background: url("../img/bannieres/callof.jpg") center/cover;
    background-position: top;
    height: 500px;
    text-align: left;
    color: white;
    display: flex;
    align-items: center;
}

/* Section connexion */
#connexion-blocs {
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 7%;
}

/*///////////////////////////////////////*/
/* USER PROFILE PAGE */
/*//////////////////////////////////////*/
/* Bandeau image et avatar */
#profil-utilisateur-bandeau {
    height: 500px;
    position: relative;
}

.profil-utilisateur-bandeau-profil {
    height: 400px;
    width: 100%;
    overflow: hidden;
}

.profil-utilisateur-bandeau-profil img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.profil-utilisateur-avatar {
    height: 280px;
    width: 280px;
    overflow: hidden;
    border-radius: 150px;
    border: 10px solid white;
}

.profil-utilisateur-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Standard informations about the user */
#profil-utilisateur-infos {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin: 3%;
}

/* User's games */
#profil-utilisateur-jeux {
    padding: 0% 5%;
    margin-bottom: 4%;
}

.profil-utilisateur-jeux {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}

/*/////////////////////////////*/
/* Community Page */
/*////////////////////////////*/

/* On going screen, a teaser for an upcoming page */
#community-page {
    background: url('../img/fond/minecraft_community_wallpaper.jpg') center/cover;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*///////////////////////////////////*/
/* Page recherche de joueurs */
/*////////////////////////////////////*/
#joueurs-liste-complete {
    padding: 3% 5%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.joueurs-bloc-banniere {
    height: 250px;
    width: 100%;
    overflow: hidden;
}

.joueurs-bloc-banniere img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.joueurs-bloc-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.joueurs-bloc-consoles,
.joueurs-bloc-jeux {
    margin: 3% 0%;
}