/* Feuille de style comportant responsive du site en dehors du header et du footer */
/*////////////////////////////////////*/
@media screen and (max-width: 768px) {
    /*/////////////////////////////*/
    /* Home Page */
    /*/////////////////////////////*/
    /*Section d'introduction numéro 1*/
    #home-introduction {
        background: url("../img/bannieres/demonsouls.jpg") center/cover;
        height: 700px;
        justify-content: start;
        padding-top: 25%;
    }

    #home-introduction h1 {
        font-size: 3em;
    }

    #home-introduction h2 {
        font-size: 1.5em;
    }

    #home-introduction p {
        padding: 5%;
        inline-size: 80%;
        font-size: 1.2em;
    }
    
    .bouton-style-1 {
        padding: 3% 9%;
    }

    /*Section d'introduction numéro 2*/
    .image-introduction-2 {
        margin-left: -30%;
        margin-top: 5%;
    }

    #home-introduction-2 {
        text-align: center;
        display: block;
        height: 920px;
    }

    .bloc-introduction-2 {
        border-radius: 50px;
        width: 100%;
        margin-top: 50%;
        padding: 15%;
    }

    .bloc-introduction-2 h3 {
        font-size: 1.2em;
    }

    .bloc-introduction-2 p {
        font-size: 1em;
    }

    .bouton-style-2 {
        position: absolute;
        padding: 15px 20px;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 50%;
        margin-top: 5%;
    }

    .bouton-style-3 {
        position: absolute;
        margin-top: 24%;
        padding: 15px 20px;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 70%;
    }

    /* Bloc explications */
    #home-explications h3 {
        font-size: 1.4em;
    }

    #home-explications p {
        font-size: 1em;
    }

    .image-explications-1 {
        height: 250px;
        width: 80%;
        margin: auto;
    }
    
    .image-explications-2 {
        height: 250px;
        width: 60%;
        margin: auto;
    }
    
    .image-explications-3 {
        height: 250px;
        width: 70%;
        margin: auto;
    }

    /* Jeux du moment */
    #home-jeuxdumoment {
        background: url("../img/bannieres/baldursgate.jpg") center/cover;
        height: 300px;
        text-align: center;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    #home-jeuxdumoment h2{
        padding: 3%;
        font-size: 1.5em;
        font-family: 'Barlow';
        font-style: Bold;
        text-transform: uppercase;
    }

    /* Personnalisation */
    #home-personnalisation {
        text-align: center;
        position: relative;
        height: 600px;
        overflow: hidden;
    }
    
    .texte-personnalisation {
        padding: 10%;
        width: 80%;
        z-index: 5;
        margin: auto;
        position: absolute;
        margin-top: 47%;
    }
    
    .texte-personnalisation h3 {
        font-size: 1.4em;
    }
    
    .texte-personnalisation p {
        font-size: 1em;
    }
    
    .image-personnalisation {
        position: absolute;
        margin-left: -50%;
        margin-top: -70%;
        z-index: 20;
    }
    
    .image-personnalisation img {    
        width: 50%;
    } 

    /*////////////////////////////////////////////////*/
    /* PAGE DECOUVERTE */
    /*/////////////////////////////////////////////////*/
    #decouverte-derniers-jeux h2 {
        text-align: center;
    }
    
    .decouverte-jeux-titre-categories {
        font-size: 1.8em;
        margin: 4%;
        text-align: center;
    }

    .decouverte-derniers-jeux-blocs {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .decouverte-derniers-jeux-blocs div {
        height: 350px;
        width: 300px;
    }
    
    .decouverte-jeux-blocs div {
        height: 150px;
        width: 150px;
        border-radius: 30px;
        margin: 1%;
        overflow: hidden;
    }

    /*/////////////////////////////////////////////*/
    /* PAGE TOUS LES JEUX */
    /*//////////////////////////////////////////////*/
    .jeux-recherche-titre {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    #recherche-jeux-input-noms,
    #recherche-joueurs-input-noms {
        padding: 3%;
        width: 100%;
        margin: 5% 0%;
    } 
    
    .jeux-liste-img  {
        width: 50%;
        overflow: hidden;
    }

    .jeux-liste-nom {
        width: 50%;
        text-align: center;
        padding: 2%;
        font-size: 0.8em;
    }

    .jeux-liste-consoles {
        display: none;
    }

    /*////////////////////////////////////////////////*/
    /* PAGE CONNEXION */
    /*/////////////////////////////////////////////////*/
    #connexion-banniere h2 {
        font-size: 2em;
        padding: 8%;
        inline-size: 90%;
        margin-top: 35%;
    }

    #connexion-banniere {
        background: url("../img/bannieres/price_callof.jpg") center/cover;
        background-position: right;
        height: 400px;
        text-align: left;
        color: white;
        display: flex;
        align-items: center;
    }

    #connexion-blocs h3 {
        margin-bottom: 9%;
    }

    .creer-compte-inscription {
        margin: 2%;
    }

    /*////////////////////////////////////*/
    /* Description jeu */
    /*///////////////////////////////////*/
    .description-jeu-banniere-image {
        width: 100%;
        height: 300px;
    }

    /*//////////////////////////////////////*/
    /* User profile page */
    /*//////////////////////////////////////*/
    #profil-utilisateur-bandeau {
        height: 500px;
    }
    
    .profil-utilisateur-bandeau-profil {
        height: 270px;
        width: 100%;
        overflow: hidden;
    }

    .profil-utilisateur-nom-resume {
        display: flex;
        flex-direction: column;
        justify-content: center;
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        margin-left: auto; 
        margin-right: auto;
        padding: 5%;
    }

    .profil-utilisateur-resume {
        width: auto;
    }
    

    .profil-utilisateur-avatar {
        height: 230px;
        width: 230px;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto;
    }

    .profil-utilisateur-resume-general {
        width: 100%;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto;
    }

    .profil-utilisateur-infos-ligne {
        padding: 2% 4%;
        font-size: 1em;
    }

    .profil-utilisateur-infos-ligne-grise {
        padding: 2% 4%;
        font-size: 1em;
    }

    .profil-utilisateur-jeux-titres {
        font-family: 'Barlow';
        font-size: 1.7em;
        text-align: center;
        text-transform: uppercase;
        background: var(--clr-neutral);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .profil-utilisateur-jeux div {
        height: 150px;
        width: 150px;
        border-radius: 20px;
        margin: 1%;
        overflow: hidden;
    }

    /*******************/
    /*Contact page */
    #formulaire {
        height: 80vh;
    }

    .bloc-formulaire {
        width: 90%;
    }
}

/*/////////////////////////////////*/
/* Ajustements tablette pour le bloc de la home */
/*//////////////////////////////////*/
@media screen and (max-width: 1200px) and (min-width: 700px) {
/*Section d'introduction numéro 2*/
    .image-introduction-2 {
        margin-left: -30%;
        margin-top: -5%;
    }

    #home-introduction-2 {
        padding: 12%;
        text-align: center;
        display: block;
        height: 970px;
    }

    .bloc-introduction-2 {
        border-radius: 50px;
        width: 100%;
        margin-top: 40%;
        padding: 10%;
    }

    .bloc-introduction-2 h3 {
        font-size: 1.2em;
    }

    .bloc-introduction-2 p {
        font-size: 1em;
    }

    .bouton-style-2 {
        position: absolute;
        padding: 15px 20px;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 50%;
        margin-top: 4%;
    }

    .bouton-style-3 {
        position: absolute;
        margin-top: 110px;
        padding: 15px 20px;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 70%;
    }
}

@media screen and (max-width: 715px) and (min-width: 460px) {
    .bouton-style-3 {
        margin-top: 100px;
    }
}

@media screen and (max-width: 1200px) and (min-width: 769px) {
    /*////////////////////////////////////////////////*/
    /* HOME PAGE */
    /*/////////////////////////////////////////////////*/
    .image-explications-1 {
        height: 550px;
        width: 80%;
        margin: auto;
    }
    
    .image-explications-2 {
        height: 550px;
        width: 60%;
        margin: auto;
    }
    
    .image-explications-3 {
        height: 550px;
        width: 70%;
        margin: auto;
    }

    /* Personnalisation */
    #home-personnalisation {
        text-align: center;
        position: relative;
        height: 600px;
        overflow: hidden;
    }
        
    .texte-personnalisation {
        padding: 10%;
        width: 80%;
        z-index: 5;
        margin: auto;
        position: absolute;
        margin-top: 5%;
    }
        
    .texte-personnalisation h3 {
        font-size: 1.4em;
    }
        
    .texte-personnalisation p {
        font-size: 1em;
    }
        
    .image-personnalisation {
        position: absolute;
        margin-left: -75%;
        margin-top: -35%;
        z-index: 20;
    }
        
    .image-personnalisation img {    
        width: 50%;
    }    

    /*////////////////////////////////////////////////*/
    /* PAGE DECOUVERTE */
    /*/////////////////////////////////////////////////*/
    .decouverte-derniers-jeux-blocs div {
        height: 250px;
        width: 450px;
    }
    
    .decouverte-jeux-blocs div {
        height: 250px;
        width: 200px;
        border-radius: 30px;
        margin: 1%;
        overflow: hidden;
    }

    /*////////////////////////////////////////////////*/
    /* PAGE DE CONNEXION */
    /*/////////////////////////////////////////////////*/
    .creer-compte-inscription {
        margin: 10%;
    }

    .bouton-connexion {
        width: 80%;
        padding: 10px 35px;
    }
    
    .bouton-connexion a {
        font-size: 1.2em;
    }
    
    #connexion-blocs h3 {
        font-size: 1.7em;
    }

    .form2 input {
        width: 80%;
    }

    /*////////*/
    /* Page profil */
    .profil-utilisateur-resume {
        width: 450px;
    }

    /*******************/
    /*Contact page */
    #formulaire {
        height: 60vh;
    }

    .bloc-formulaire {
        width: 80%;
    }
}

@media screen and (max-width: 1200px) {    
    /*////////////*/
    /* Partie Explications */
    #home-explications {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 50px 0px;
    }

    #titre-explications {
        font-size: 2.2em;
        margin: auto;
        text-align: center;
        padding: 0% 10%;
    }

    /*////////////*/
    /* Partie Connexion */
    #connexion-blocs {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 8%;
        text-align: center;
    }

    /*******************/
    /* Game details page */
    #description-jeu-banniere{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .description-jeu-banniere-image {
        width: 100%;
        height: 40vh;
    }
}