
/* ---------- Background plein écran ---------- */
html, body, .body-full-height { height: 100%; }

body.body-full-height, body{
  margin: 0;
  min-height: 100vh;

  background-color: #0b1b24;

    background-image:
    linear-gradient(180deg,
      rgba(0,0,0,0.20) 0%,
      rgba(0,0,0,0.40) 60%,
      rgba(0,0,0,0.55) 100%
    ),
    url("/images_users/728/MCM_320.png");
  
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 70%;
  background-attachment: fixed;

  /* ✅ CENTRAGE DU CONTENU */
  display: flex;
  align-items: center;      /* centre vertical */
  justify-content: center;  /* centre horizontal */
  padding: 22px;
}

/* Mobile : éviter les saccades */
@media (max-width: 768px){
  body.body-full-height, body{
    background-attachment: scroll;
    background-position: center 55%;
    padding: 14px;
  }
}

/* ---------- On neutralise les fonds blancs du thème ---------- */
.login-container,
.page-container,
.page-content,
.content{
  background: transparent !important;
}

/*
  Très important : si ton HTML a un wrapper .login-container
  on le centre aussi au cas où le thème casse le body flex.
*/
.login-container{
  width: 100%;
  min-height: 100vh;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 22px;
}

/* ---------- CARD (formulaire) ---------- */
.login-box,
.divcontainer_login{
  width: 100%;
  max-width: 520px;         /* ✅ taille propre */
  border-radius: 16px !important;

  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  box-shadow: 0 18px 50px rgba(0,0,0,0.35);
  padding: 18px !important;
}

/* ---------- PHOTO / LOGO DANS LA CARD ---------- */
/*
  Ici on cible toutes les images à l’intérieur de la box/login.
  Comme ça ta photo/logo sera centrée et pas énorme.
*/
.login-box img,
.divcontainer_login img{
  display: block;
  margin: 0 auto 12px auto;   /* centre + espace dessous */
  max-width: 56px;            /* ✅ taille logo */
  max-height: 56px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  background: rgba(255,255,255,0.65); /* petite pastille claire */
  padding: 8px;
}

/* Si ton logo est dans une div spécifique, on peut la forcer */
.divcontainer_img{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  text-align: center;
  margin-bottom: 10px;
}

/* ---------- Titres ---------- */
.login-title,
.divcontainer_title,
.login-box .login-title{
  color: rgba(255,255,255,0.95) !important;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-shadow: 0 6px 18px rgba(0,0,0,0.35);
  margin-bottom: 14px;
}

/* ---------- Inputs ---------- */
.login-box input[type="text"],
.login-box input[type="password"],
.login-box input[type="email"],
.divcontainer_login input[type="text"],
.divcontainer_login input[type="password"],
.divcontainer_login input[type="email"]{
  width: 100%;
  border-radius: 10px !important;

  background: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.60) !important;

  color: #0b1b24 !important;
  padding: 12px 14px !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
  outline: none;
  margin-bottom: 10px;
}

.login-box input:focus,
.divcontainer_login input:focus{
  border-color: rgba(0,210,255,0.55) !important;
  box-shadow: 0 0 0 4px rgba(0,210,255,0.18);
}

/* ---------- Bouton ---------- */
.login-box .btn,
.divcontainer_login .btn,
.login-box button,
.divcontainer_login button{
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-weight: 700;
  border: 0 !important;

  background: linear-gradient(90deg, rgba(0,168,255,0.95), rgba(0,210,255,0.95)) !important;
  color: #06202b !important;

  box-shadow: 0 12px 26px rgba(0,0,0,0.25);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.login-box .btn:hover,
.divcontainer_login .btn:hover,
.login-box button:hover,
.divcontainer_login button:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 16px 34px rgba(0,0,0,0.30);
}

/* ---------- Liens ---------- */
.login-box a,
.divcontainer_login a{
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
}
.login-box a:hover,
.divcontainer_login a:hover{ text-decoration: underline; }

/* ---------- Footer ---------- */
.login-footer,
.footer{
  color: rgba(255,255,255,0.85) !important;
  text-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

/* ---------- Tes couleurs ---------- */
.divcontainer_color1{ color:#ffd08a; }
.divcontainer_color2{ color:#ffd08a; }
