*{
    margin: 0;
    padding: 0;
}
.d-flex{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.fond{
width:100%;
position:fixed;
height:100%;
background-color:rgba(0,0,0,0.8);
z-index:2;
}
.affichage{
max-width:450px;
height:530px;
 margin: auto; 
overflow:hidden;
z-index:3;
padding:15px;
background-color:rgb(255, 255, 255);
}
.affichage form label{
width:90%;
font-size:18px;
}
.affichage input[type='button']
{
    background:#fff;
    color:#000;
    padding: 0 20px;
    border: none;
    border-radius: 35px;
    float:right;
   font-size:50px;
   transition:all 0.9s ease; 

}

.infoitem
{
    text-align:center;
    margin-bottom:30px;
}
.infoitem img{
    width:170px;
    height:110px;
}
.affichage form input
{
    width:98%;
    margin:1px 0 4px;
    font-style:23px;
    outline:none;
    box-sizing: border-box;
    border: 1px solid grey;
    background: white;
    padding:10px 5px;
    color: rgb(0, 0, 0);
    transition: 0.5s;
}
.affichage form input:hover
{
    box-shadow: 0 0 8px 3px #34495e ;
}
.affichage form button
{
    background:blue;
    width:98%;
    padding:10px;
    margin:20px 0;
    font-size:20px;
    font-family:sans-serif;
    border:none;
    border-radius:20px;
    color:white;
    transition:0.9s;
}
.affichage form button:hover
{
    background:navy;
}
.affichage input[type='checkbox']
{
    width:23px;
    padding:45px;
}
.forget, .suscrib
{
text-align:center;
padding:5px 0;
}

.forget a
{
    font-size:18px;
    font-family:sans-serif;
    color:blue;
}

.suscrib button
{
    padding:5px 12px;
    background:green;
    font-size:18px;
    border:none;
    color:white;
    border-radius:10px;
}
.footerLog{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

@media(max-width:1200px)
{
    .affichage{
        width:400px;
        height:520px;
        /* margin:10% auto; */
        overflow:hidden;
        z-index:3;
        padding:15px;
        background-color:rgb(255, 255, 255);
        }
}
@media(max-width:930px)
{
    .affichage{
        width:400px;
        height:520px;
        /* margin:15% auto; */
        overflow:hidden;
        z-index:3;
        padding:15px;
        background-color:rgb(255, 255, 255);
        }
}
@media(max-width:768px)
{
    .affichage{
        width:400px;
        height:520px;
        /* margin:18% auto; */
        overflow:hidden;
        z-index:3;
        padding:15px;
        background-color:rgb(255, 255, 255);
        }
}

@media(max-width:500px)
{
    .affichage{
        width:400px;
        height:500px;
         margin:19% auto;
        overflow:hidden;
        z-index:3;
        padding:15px;
        background-color:rgb(255, 255, 255);
        }

}
@media(max-width:450px)
{
    .affichage{
        width:400px;
        height:535px;
         margin:16% auto; 
        overflow:hidden;
        z-index:3;
        padding:15px;
         background-color:rgb(255, 255, 255);
        
        }
        .footerLog{
            display: block;
        }
        .forget, .suscrib
        {
          width: 100%;
          text-align:center;
          padding:5px 0;
        }

}
@media(max-width:440px)
{
    .affichage{
        width:350px;
        height:530px;
        margin:15% auto;
        overflow:hidden;
        z-index:3;
        padding:15px;
        background-color:rgb(255, 255, 255);
        }

        .footerLog{
            display: block;
        }
        .forget, .suscrib
        {
            width: 100%;
        text-align:center;
        padding:5px 0;
        }


}
@media(max-width:370px)
{
    .affichage{
        width:330px;
        height:530px;
         margin:15% auto;
        overflow:hidden;
        z-index:3;
        padding:15px;
        background-color:rgb(255, 255, 255);
        }

        .footerLog{
            display:block;
        }
        .forget, .suscrib
        {
            width: 100%;
        text-align:center;
        padding:5px 0;
        }


}