:root {
      --color-bg: #f5f5fa;
      --color-primary: #28a745; /* Vert de la maquette - sera remplacé par le service */
      --color-primary-hover: #218838; /* Sera remplacé par le service */
      --color-border: #000000;
      --color-text: #333;
      --color-text-secondary: #666;
      --color-sidebar-active: #e7f7d3;
      --color-sidebar-hover: #d4f0c6;
      --border-radius: 16px;
  }
  
  body {
        background-color: #f8f9fa;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
    
    .login-container {
        max-width: 380px;
        padding: 30px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid black;
        box-sizing: content-box;
    }
    
    .login-container .btn-primary:hover {
        background-color: var(--color-primary-hover) !important;
    }
    
    /* Styles génériques pour tous les boutons btn-primary */
    .btn-primary {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
    }
    
    .btn-primary:hover {
        background-color: var(--color-primary-hover) !important;
        border-color: var(--color-primary-hover) !important;
    }
  
    .input-group-text {
      background-color: transparent; /* Supprime la couleur de fond */
      border: none; /* Supprime la bordure */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px; /* Ajuste l'espace autour de l'icône */
  }
    .text-grey {
      color: var(--color-text-secondary) !important;
      font-weight: bold !important;
      font-size: small;
  }
  .input-group .form-control {
      padding-right: 2.5rem; /* Laisse de l'espace pour l'icône */
  }
  
  
  
  .btn-outline-secondary{
      color: var(--color-primary);
      border-color: var(--color-primary);
  }
  
  .btn-outline-secondary:hover {
      background-color: var(--color-primary) !important;
      border-color: var(--color-primary) !important;
      color: white !important;
  }
  
  .title-forgot {
      font-size: 1.5rem; /* Ajuster selon la maquette */
      font-weight: bold;
      text-align: center; /* Centre horizontalement */
      margin-bottom: 1rem; /* Espacement avec le texte suivant */
      white-space: nowrap; /* Empêche le retour à la ligne */
  }
  
  .form-label{
  font-weight: 300;
  color: #666;
  }
  .form-control,
  .btn {
      height: 48px; /* Hauteur identique */
      border-radius: 8px; /* Coins arrondis */
  }
  
  .password-toggle {
      background: none; /* Supprime l'arrière-plan */
      border: none; /* Supprime les bordures */
      outline: none; /* Supprime le contour par défaut */
      box-shadow: none; /* Supprime les ombres */
      cursor: pointer; /* Ajoute un curseur pointer */
      padding: 5px; /* Ajoute un léger padding */
      display: flex; /* Centre l'icône */
      align-items: center; /* Centre verticalement */
      justify-content: center; /* Centre horizontalement */
  }
  
  .password-toggle:focus {
      outline: none; /* Supprime le contour lors du focus */
      box-shadow: none; /* Supprime d'autres styles de focus éventuels */
  }
  
  .btn.position-absolute {
      background: none; /* Supprime le fond */
      border: none; /* Supprime les bordures */
      outline: none; /* Supprime les contours */
      box-shadow: none; /* Supprime les ombres */
      padding: 5px; /* Ajuste le padding pour uniformité */
      display: flex; /* Centre l'icône */
      align-items: center; /* Centre verticalement */
      justify-content: center; /* Centre horizontalement */
  }
  
  .btn.position-absolute:focus {
      outline: none !important; /* Supprime le contour sur le focus */
      box-shadow: none !important; /* Supprime les ombres */
  }
  
  
  .d-flex.justify-content-between {
      gap: 12px; /* Ajustez cette valeur pour réduire l'espacement */
  }
  .d-flex.justify-content-between button,
  .d-flex.justify-content-between a {
      flex: 1; /* Les deux boutons prennent la même largeur */
      text-align: center; /* Centre le texte dans le bouton */
      height: 48px; /* Ajustez cette valeur pour correspondre à la hauteur souhaitée */
      display: flex;
      align-items: center;
      justify-content: center; /* Centre le texte dans le bouton */
      padding: 0 20px; /* Garde un espacement interne horizontal */
      border-radius: 8px; /* Maintient des bordures arrondies */
  }
  
  .alert {
      font-size: 0.9rem; /* Taille légèrement plus petite */
      border-radius: 8px; /* Coins arrondis */
  }