body{
    margin: 0;
    padding: 0;
    font-family: arial, sans-serif;
    transition: all 0.3s ease-in-out 0s;
}

.ap 
{
    color: #40a8a1;
    font-weight: 600;
    text-decoration: none;
}

.ap:hover
{
    text-decoration: underline;
}

.ceti_div_general_left
{
    position: absolute;
    width: 60%;
    height: 100%;
    background-size: cover;
    background-color: rgb(255, 255, 255);
    text-align: center;
    transition: all 0.3s ease-in-out 0s;
}

.div_ceti_logo
{
    float: left;
    width: 100%;
    height: 100px;
    text-align: left;
}

.ceti_logo
{
    height: 40px;
    margin-top: 40px;
    margin-left: 80px;
}

.ceti_div_center_in_DGL /* la div centre au millieux de la div general left */
{
    display: inline-block;
    width: 600px;
    height: auto;
    background-color: #ffffff;
    margin-top: 60px;
    border-radius: 10px;
    text-align: left;
    padding-bottom: 20px;
}

.ceti_div_center_in_DGL h1
{
    font: 600 30px arial, sans-serif;
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 20px;
}

.ceti_div_center_in_DGL h2
{
    font: 400 14px arial, sans-serif;
    margin-top: 10px;
    margin-left: 22px;
}

.ceti_div_gnrl_button /* boutton pour les connexions via des app API */
{
    height: auto;
    width: calc(100% - 40px);
    margin-top: 20px;
    margin-left: 20px;
    display: inline-block;
    border: 1px solid #d6d6d6;
    border-radius: 5px;
    text-align: center;
    background-color: transparent;
    padding-top: 10px;
    padding-bottom: 5px;
    transition: all 0.3s ease-in-out 0s;
}

.ceti_div_gnrl_button:hover
{
    background-color: #f0f0f0;
}

.in_ceti_div_gnrl_button
{
    height: 20px;
    width: auto;
    background-color: rgba(255, 255, 255, 0);
    border: none;
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}

.img_inx2_ceti_div_gnrl_button
{
    float: left;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    padding: 0px;
}

.p_inx2_ceti_div_gnrl_button
{
    float: right;
    font-size: 14px;
    font-weight: 600;
    color: rgb(0, 0, 0);
    margin-top: 0px;
    padding: 0px;
}

/* HR OR */

.auth_div_or_span 
{
    margin-top: 35px;
    width: 100%;
    height: 10px;
    text-align: center;
    position: relative; /* Ajout pour permettre le positionnement absolu */
    background-color: rgba(255, 99, 71, 0);
}

.auth_div_or_span hr
{
    background-color: rgb(92, 92, 92);
    border: 0;
    height: 1px;
    width: calc(100% - 40px);
    margin-top: 15px;
    margin-left: 20px;
    margin-bottom: 0;
}

.auth_div_or_span div {
    position: absolute;
    top: -13px; /* Centre vertical sur le <hr> (milieu de ses 10px) */
    left: 50%;
    transform: translateX(-50%); /* Centre horizontal */
    background-color: transparent;
}

.auth_div_or_span div span
{
    background-color: rgb(255, 255, 255);
    padding-left: 15px;
    padding-right: 15px;
    font: 400 16px arial;
    color: rgb(97, 97, 97);
}

/* END HR OR */

.label_input_div
{
    margin-top: 20px;
    margin-left: 20px;
    height: auto;
    width: calc(100% - 40px);
    background-color: rgba(0, 128, 0, 0);
}

.label_input_div label
{
    display: block;
    font: 600 16px arial;
    color: rgb(94, 94, 94);
    margin-bottom: 5px;
    float: left;
}

.input_ceti
{
    background-color: transparent;
    color: rgb(53, 53, 53);
    height: 40px;
    width: calc(100% - 0px);
    font: 400 16px arial;
    border-radius: 7px;
    padding-left: 10px;
    padding-right: 10px;
    outline: none;
    border: 1px solid #d6d6d6;
    transition: all 0.3s ease-in-out 0s;
}

.input_ceti:focus
{
    border: 2px solid #40a8a1;
}

.valid_email {
    border: 1px solid #d6d6d6;
}
.invalid_email {
    border: 1px solid rgb(217, 48, 37);
}

.pass{
    border: 1px solid #d6d6d6;
}

.showhide
{
    border: 0;
    background-color: transparent;
    color: rgb(64, 168, 161);
    font: 600 14px arial;
    height: 20px;
    border-radius: 20px;
    cursor: pointer;
    float: right;
    transition: all 0.3s ease-in-out 0s;
    outline: none;
}

.showhide:hover
{
    background-color: rgba(0, 0, 0, 0.041);
}

.showhide:active
{
    background-color: rgba(0, 0, 0, 0.075);
}

.erreur_input
{
    color: rgb(217, 48, 37);
    font: 600 14px arial;
    margin-top: 5px;
}

/* **** */

.erreur_input ul {
    list-style: none;
    padding: 0;
}

.erreur_input li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: 0.2s;
}

.icon {
    font-weight: bold;
    width: 16px;
    text-align: center;
}

/* États */
.valid {
    color: #22c55e; /* vert moderne */
}

.valid .icon {
    content: "✔";
}

.invalid {
    color: rgb(217, 48, 37); /* rouge moderne */
}

#Password-error {
    display: none;
}

/* Only inscription */

.ceti_div_pass_forgot
{
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    float: left;
    height: auto;
    background-color: #0000002f;
    margin-top: 30px;
    text-align: right;
    font-size: 16px;
}

.ceti_input_submit
{
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
    float: left;
    height: 40px;
    background-color: #40a8a1;
    color: white;
    margin-top: 30px;
    text-align: center;
    font: 600 14px arial;
    border-radius: 5px;
    outline: none;
    border: none;
}

/* special for media screen 150px to 1026px */
.special_for_ms_150_1026
{
    display: none;
}

.ceti_p_bottom_tpa
{
    float: left;
    font-size: 12px;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-top: 20px;
}

/* Right side */

.ceti_div_general_right
{
    position: absolute;
    width: 40%;
    height: 100%;
    background-size: cover;
    background-color: #adcfc51e;
    text-align: center;
    right: 0;
    margin: 0;
    border: 0;
    padding: 0;
}

.img_ceti_div_general_right
{
    position: absolute;
    height: 100%;
    width: 100%;
    object-fit: cover;
    left: 0;
}