/* ===================================
   Chargement de la police Epilogue
=================================== */
@font-face {
    font-family: 'Epilogue';
    src: url('../Ressources/Font/Epilogue-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 900;
    font-display: swap;
}

html {
    background-color: #000;
}


/* --- Styles spécifiques à la page de connexion --- */
.login-page {
    background-color: black;
    /* on supprime la hauteur minimale */
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    align-items: center;
    /* si vous voulez remonter légèrement le formulaire, réduisez ou supprimez cette marge */
    /* padding-top: 70px; */
}

.login-container {
    width: 450px;
    background: linear-gradient(135deg, #4648FF 0%, #FF7262 100%);
    color: #fff;
    padding: 50px 35px;
    text-align: center;
    border-radius: 10px;
    /* remplacez margin-top par un padding interne si besoin : */
    margin-top: 25px;
}

.login-container h1 {
    margin-bottom: 35px;
    font-size: 1.8rem;
    font-weight: 700;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.login-page .input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
    height: 55px;
    margin: auto;
}

.login-page .input-group .icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
}

.toggle-password {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px; /* espace entre icônes si besoin */
}


.login-page .input-group .icon svg,
.login-page .input-group .toggle-password svg {
    width: 26px;
    height: 26px;
    stroke: #fff;
}

.login-page .input-group .toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

.login-page .input-group input {
    width: 100%;
    height: 100%;
    padding: 15px 65px;
    background: #000;
    color: #fff;
    border: none;
    font-size: 14px;
    font-weight: 300;
}

.login-page .forgot-password {
    color: #ccc;
    text-decoration: none;
    font-size: 0.9rem;
    align-self: flex-start;
    margin-top: -10px;
    margin-bottom: 20px;
}

.login-page .btn {
    background: #000;
    color: #fff;
    padding: 16px;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    width: 90%;
    transition: opacity 0.2s;
    margin: auto;
    text-decoration: none;
    white-space: nowrap; /* Empêche le passage à la ligne */
}

.login-page .btn:hover {
    opacity: 0.8;
}

.login-page .separator {
    margin: 20px 0;
    color: #fff;
    font-weight: bold;
    font-size: 0.9rem;
    position: relative;
}

.login-page .separator span {
    background-color: transparent;
}

.login-page .secondary-btn a {
    color: #fff;
    text-decoration: none;
    display: block;
}

.login-explanation {
  background: rgba(255, 255, 255, 0.05); /* légère mise en relief */
  border-left: 4px solid #4648FF;        /* accent couleur dégradé */
  padding: 20px 25px;                    /* espace intérieur confortable */
  margin: 0 auto 30px;                   /* recentrage et espacement bas */
  max-width: 90%;                        /* limite la largeur */
  border-radius: 6px;                    /* coins arrondis */
  font-size: 1rem;                       /* taille de texte adéquate */
  line-height: 1.6;                      /* meilleure lisibilité */
  color: #eee;                           /* texte clair */
  font-style: italic;                    /* touche de style */
  margin-top: 25px;
}