/*******************************************
 *  THÈME LIGHT (par défaut)
 *  Variables CSS générées à partir du thème clair
 *******************************************/
:root {
  /* Couleurs principales */
  --color1: #2E547B;
  /* Composantes RGB correspondantes à --color1 (utile pour rgba) */
  --color1_r: 46;
  --color1_g: 84;
  --color1_b: 123;
  --color2: #5C000D;
  --color3: #9faec5;
  --couleur_principale: #1390C1;
  /* Gris */
  --gris2: #d5d5d5;
  --gris3: #BBBBBB;
  --gris4: var(--color1);
  --gris5: #eaeef4;
  --gris6: #5f6a73;
  --gris7: #B2B2B1;
  --gris8: #a0a7ad;
  --gris9: #CCC9C7;
  /* Divers */
  --border: #575756;
  --fieldset_title: #6D6E6D;
  --bg_bloc: #F8F8F8;
  --fontColor: #000000;
  --body-bg: #ffffff;
  --body-color: var(--fontColor);
  /* Éléments fonctionnels */
  --color_tag: var(--couleur_principale);
  --color_valid: #8ebe21;
  --color_unvalid: #ed6a51;
  --color_required: #DC001E;
  --background_required: rgba(220, 0, 30, 0.1);
  --color_required_check: #067A1B;
  --background_required_check: rgba(6, 122, 27, 0.1);
  --inputSelectColor: #333333;
  --inputColor: #F1F1F1;
  --white: #ffffff;
  --bodyColor: #f4f6f8;
  /* Typo */
  --font-size: 11px;
}
/*******************************************
 *  THÈME DARK
 *  Écrase uniquement les variables CSS
 *  pour un rendu sombre cohérent et lisible
 *******************************************/
body.dark-mode {
  /* Composantes RGB correspondantes à --color1 (dark) */
  --color1_r: 88;
  --color1_g: 185;
  --color1_b: 219;
  --couleur_principale: #58b9db;
  /* Gris adaptés au thème sombre */
  --gris2: #30363d;
  --gris3: #6b7177;
  --gris4: #2d3238;
  --gris5: #23272e;
  --gris6: #7a828a;
  --gris7: #a3a9ae;
  --gris8: #90979d;
  --gris9: #343a40;
  /* Bordures & divers */
  --border: #3a4047;
  --fieldset_title: #b6b6b6;
  --bg_bloc: #23272e;
  /* Texte & fond */
  --fontColor: #e5e5e5;
  --body-bg: #121212;
  --body-color: var(--fontColor);
  /* Tags */
  --color_tag: var(--couleur_principale);
  /* Validations */
  --color_valid: #7cc152;
  --color_required_check: #4ec77d;
  --background_required_check: rgba(78, 199, 125, 0.12);
  /* Erreurs / Requis */
  --color_unvalid: #e07360;
  --color_required: #ff5c7a;
  --background_required: rgba(255, 92, 122, 0.12);
  /* Inputs & utilitaires */
  --inputSelectColor: #e5e5e5;
  --inputColor: #40464d;
  --white: #ffffff;
  --bodyColor: #1b1f24;
}
body,
html {
  height: 100%;
}
body {
  background-color: var(--gris5);
  font-family: "Arial", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}
body #mainWrapper {
  top: 50% !important;
}
#content {
  width: 450px;
  margin: auto;
  box-shadow: 0px 4px 5px var(--gris2);
}
@media (max-width: 767px) {
  #content {
    width: 100%;
  }
}
#content .logoContainer {
  min-height: 80px;
  max-height: 120px;
  padding: 10px 0;
  background: var(--white) !important;
  display: flex;
  justify-content: center;
  align-items: center;
}
#content .logoContainer > img {
  display: block;
  margin: auto;
  max-height: 120px;
}
#content .formBlock {
  padding: 30px 50px;
  background: var(--white);
}
@media (max-width: 767px) {
  #content .formBlock {
    padding: 30px;
  }
}
#content .formBlock .form-group {
  margin-bottom: 5px;
}
#content .formBlock .form-group > label,
#content .formBlock .form-group > div {
  padding-left: 0;
  padding-bottom: 5px;
}
#content .formBlock .form-group label {
  font-size: 14px;
}
#content .formBlock .form-group input.form-control {
  background: var(--gris9);
  color: #000;
  text-align: center;
}
#content .formBlock .form-group input.form-control::-moz-placeholder {
  color: #888 !important;
}
#content .formBlock .buttons {
  margin: 10px auto;
}
#content .formBlock .error {
  color: var(--color1);
}
#content .formBlock #mdp_oublie {
  color: var(--couleur_principale);
}
#content .formBlock #optimise_pour {
  display: flex;
  align-items: center;
}
#content .formBlock #optimise_pour .icon {
  font-size: 2em;
  margin-right: 5px;
  padding: 5px;
}
#content .formBlock #optimise_pour > div {
  margin-left: 10px;
}
#content .formBlock #optimise_pour > div > p {
  font-size: 11px;
  margin: 0;
}