#Identification .table>tbody>tr>td, 
#Identification .table>tbody>tr>th, 
#Identification .table>tfoot>tr>td, 
#Identification .table>tfoot>tr>th, 
#Identification .table>thead>tr>td, 
#Identification .table>thead>tr>th{
    vertical-align:middle;
}

#Identification input[type="radio"], 
#Identification input[type="checkbox"]{
    margin-right:2px;
}

.page-accesclient h1,
.page-compteclient h1{
    text-align:center;
    color:var(--color-secondary);
}

#Identification h2.Titre{
    margin:15px auto;
    text-align:center;
    font-size:25px;
}
#NouvClient{
    margin-top:30px;
}
#DejaClient{
    margin-top:60px;
}

#TB_Login .Entete{
    display:none;
}

#MenuCompteConnecte{
    display:none;
}

.MsgLogin{
    margin:5px auto 10px auto;
}
#Deconnection{
    float:right;
}
#SeSouvenir{
    font-size:14px;
}
#MsgInfoPerdu{
    margin:15px auto;
}
#MsgInfoPerdu a{
    color:var(--color-text-medium);
    font-size:13px;
    text-decoration:underline;
}
#MsgInfoMdp p{
    margin-bottom:0;
    color:var(--color-gray);
}

#BandeauReunion{
    background-color:var(--color-secondary);
    color:var(--color-white);
}
#InfoReunion .Titre{
    margin:0 auto;
    padding:10px;
    background-color:var(--color-secondary);
    color:var(--color-white);
    font-family:var(--font-family-subtitle);
    font-weight:normal;
    font-size:15px;
    line-height:22px;
    text-align:center;
}

#BandeauVendeur {
    padding: 10px;
    background-color: var(--color-primary-light);
}
#InfoVendeur {
    display: grid;
    grid-template-columns: auto 1fr; /* colonne 1: photo, colonne 2: infos */
    grid-template-rows: auto auto auto; /* 3 lignes pour les 3 infos */
    gap: 5px 15px; /* gap vertical et horizontal */
    align-items: start;
}

#InfoVendeur #Photo {
    grid-column: 1; /* colonne 1 */
    grid-row: 1 / 4; /* s'étend sur les 3 lignes */
    align-self: stretch;
}

#InfoVendeur #ImgPhotoVendeur{
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 50%;
}

/* Les 3 divs d'info se placent automatiquement dans la colonne 2 */
#InfoVendeur #PseudoSinonPrenom {
    grid-column: 2;
    grid-row: 1;
}

#InfoVendeur #CodeCourtier {
    grid-column: 2;
    grid-row: 2;
}

#InfoVendeur #Departement {
    grid-column: 2;
    grid-row: 3;
}

#InfoVendeur .Titre,
#InfoVendeur > div:not(#Photo){
    margin: 0;
    padding: 0;
    background: transparent;
    color: var(--color-secondary);
    font-family: var(--font-family-subtitle);
    font-size: 15px;
    font-weight: normal;
    text-align: left;
}

#InfoVendeur .Entete,
#InfoVendeur .Contenu{
    display: inline;
}

#InfoVendeur #PseudoSinonPrenom .Contenu{
    font-weight: 500;
}

@media (min-width:768px){
    #InfoVendeur{
        display: flex;
        flex-direction: row;
        gap: 9px;        
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-evenly;
    }
    #InfoVendeur .Titre,
    #InfoVendeur > div:not(#Photo),
    #InfoReunion .Titre{
        font-size:16px;
    }
}