/* * {
    outline: 1px solid red;
} */

body
{
    overflow: hidden;
}

main
{
    display: flex;
    justify-content: center;   /* centre horizontalement */
    align-items: center;
    grid-column-start: 2;
    grid-column-end: 12;
    grid-row-start: 1;
    grid-row-end: 12;
    gap: 50px;
}

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

.index_left
{
    display: flex;
    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 */                 /* active Flexbox */
    justify-content: center;   /* centre horizontalement */
    align-items: center;  

}

.index_right
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;   /* centre horizontalement */
    border: 1px solid #dbdbdb;
    width: 352px;
    max-height: 550px;
    padding-right: 40px;
    padding-left: 40px;
    padding-bottom: 27px;
    
    margin-right: 75px;
    background: #FBFBFB ;
    transform: translateY(-7px);

}

main .top
{
    max-width: 100%;  /* ne dépasse jamais la largeur du conteneur */
    display: flex;
    flex-direction: column;
}

main .bottom
{
    max-width: 100%;  /* ne dépasse jamais la largeur du conteneur */
    display: flex;
    flex-direction: column;
}

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

.bottom p
{
    text-align: center;
    margin-bottom: 8px;
}

.bottom a
{
    text-align: center;
}

a.visitor
{
    text-decoration: none;
    color: #262626;
    font-size: 14px;
    margin-bottom: 25px;
}

a.visitor:hover
{
    text-decoration: underline;
}

a.violet.forgot
{
    margin-bottom: 3px;
}

.index_right input
{
    width: 100%;
    padding: 9px 0 7px 8px;
    
    margin-bottom: 6px;
    border: 1px solid #dbdbdb; 
    border-radius: 3px; 
    outline: none;
    background: white;
}

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

/* OR delimitation */

.or 
{
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 9px;

}

.left.or
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border-bottom: 1px solid #ddd;
}

span.or
{
    padding: 0 10px; color: #666;
    font-weight: bold;
}

.right.or
{
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    border-bottom: 1px solid #ddd;
}

p.error
{
    display: none;
    color : #ED4956;
    font-size: 14px;
    width: 268px;
    text-align: center;
    margin-bottom: 17px ;
}

p.errorMatch
{
    display: none;
    color : #ED4956;
    font-size: 14px;
    width: 268px;
    text-align: center;
    margin-bottom: 17px ;
}


@media (max-width: 1050px) 
{
    .landing.img { display: none; }
    .index_left { display: none; }
    .index_right { margin-right: 0; }
    main { gap: 0; }
}

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