body
{
    overflow: hidden;
}


.overlay {
  display: none ;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5); /* fond sombre semi-transparent */
  z-index: 100;
}

main
{
    display: flex;
    flex-direction: column;
    grid-column-start: 4;
    grid-column-end: 10;
    grid-row-start: 2;
    grid-row-end: 11;
    align-items: center;
    justify-content: center;
    gap: 20px;              /* espace entre top et bottom */
}

main img
{
    max-width: 100%;      /* l'image ne dépasse jamais de .left */
    max-height: 100%;     /* l'image ne dépasse jamais en hauteur */
    object-fit: contain;  /* garde les proportions */
}

main p
{
    max-width: 270px;
}

.top
{
    display: flex;
    border: 1px solid #dbdbdb;
    flex-direction: column;
    background: #FBFBFB;
    align-items: center;
    width: 350px;
}

.top a {
    color: #5063F9;
    text-decoration: none;
}

p.logo
{
    margin-top: -30px; /* Remonte de 30 px*/
    font-weight: 550;
    color: #737373;
    font-size: 14px;
} 

.bottom
{
    display: flex;
    flex-direction: column;
    align-items: center;    
    width: 350px;
    border: 1px solid #dbdbdb;
    background: #FBFBFB ;
    padding-top: 25px;
    padding-bottom: 20px;
}

.bottom p 
{
    font-size: 14px;
    max-width: 250px;
}

.bottom a {
    color: #5063F9;
    font-weight: 600;
    text-decoration: none;
}

form
{
    display: flex;
    flex-direction: column;
    padding-right: 40px;
    padding-left: 40px;
    padding-left: 40px;
    padding-top: 15px;
    padding-bottom: 12px;
}

.top input
{
    width: 270px;
    padding: 9px 0 7px 8px;
    border: 1px solid #dbdbdb; 
    border-radius: 3px; 
    outline: none; 
}

input[name="email"]
{
    margin-bottom: 10px;
}

input[name="password"]
{
    margin-bottom: 10px;
}

input[name="fullname"]
{
    margin-bottom: 10px;
}

p.error
{
    display: none;
    margin-top: 5px;
    margin-bottom: 2px;
    margin-left: 9px;
    color : #ED4956;
    font-size: 13px;
    width: 268px;
}

.top button
{
    width: 100%;
    padding: 7px 16px;
    margin-top: 14px;
    font-weight: 600;
    color: white;
    background: #828FFA;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.top p.first,
.top p.second 
{
    color: #6d6d6d;
    font-size: 12px;
    text-align: center;
}

.top p.first
{
    margin-bottom: 15px;
}

.top p.second 
{
    margin-bottom: 25px;
}

/*  modale */

dialog.modale
{
    display: none;
    flex-direction: column;
    position:fixed;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 550px;
    height: 625px;
    background: #fafafa;
    border: none;
    border-radius: 20px;
    z-index: 101;
}

.modale header
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width:550px;
    height: 75px;
    border-bottom: 1px solid #ddd;
}

span.learn-more-title-cross
{
    position: relative;
    color: #262626;
    font-size: 19px;
}


img.cross
{
    position: absolute;
    top:12px;
    right: 12px;
    width: 19px;
    height: 19px;
    object-fit: contain; 

}

/*  modale */

@media (max-height: 800px)
{
    footer
    {
        display: none;
    }
}