/* ===== *//* new *//* ===== */
    /* ===== thèmes ===== */
@import url("../parts/core.css");
@import url("../parts/index.layout.css");

    /* ===== menu ===== */
@import url("../parts/menu.css");



/* ============================================================
   ALERTES (LOGIN)
   ============================================================ */

.alert {
  padding: 12px;
  margin: 10px 0 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  font-size: 14px;
}

.alert-danger {
  background: color-mix(in srgb, var(--danger, #ff4d4d) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger, #ff4d4d) 35%, var(--border));
}

.alert-success {
  background: color-mix(in srgb, var(--success, #1eff00) 12%, transparent);
  border-color: color-mix(in srgb, var(--success, #1eff00) 30%, var(--border));
}

/* ============================================================
   FORMULAIRE
   ============================================================ */

.form label {
  display: block;
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--muted);
}

/* Inputs strictement utiles à la page */
.form input[type="password"],
.form input[type="text"] {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 35%, transparent);
  color: var(--fg);
  outline: none;
}

.form input:focus {
  border-color: color-mix(in srgb, var(--acc) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}

/* Bouton principal pleine largeur */
.form .btn.primary {
  margin-top: 14px;
  width: 100%;
  
}

/* ============================================================
   CHAMP CODE + BOUTON ŒIL
   ============================================================ */

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-right: 46px;
}

.toggle-pass {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  height: 100%;
  display: flex;
  align-items: center;

  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;

  font-size: 18px;
  color: var(--muted);
}

.toggle-pass:hover {
  color: var(--fg);
}