:root {
      --text-color: #696969;
      --text-color-title: #4D4D4D;
      --text-color-hight: #007ad1;
      --text-color-error: #D15700;
      --bg: #e0e0e0;
      --shadow-light: #ffffff;
      --shadow-dark: #bebebe;
    }

    * {
      font-family: "JetBrains Mono", sans-serif;
    }

    html {
      font-size: 13px;
    }

    * {
      font-family: "JetBrains Mono", sans-serif;
    }

    html {
      font-size: 13px;
    }

    body {
      background: var(--bg);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-color);
    }

    /* --- Card --- */
    .container {
      width: 22rem;
      padding: 1rem;
      border-radius: 9px;
      background: var(--bg);
      box-shadow: 2px 2px 4px var(--shadow-dark),
        -2px -2px 4px var(--shadow-light);
      transition: 0.3s ease;
    }

    h2 {
      text-align: center;
      margin: 0 0 1rem;
      font-weight: 600;
      color: var(--text-color-title);
    }

    /* --- Inputs --- */
    .input-group {
      display: flex;
      align-items: center;
      position: relative;
      margin-bottom: .8rem;
    }

    .input-group input {
      width: 100%;
      padding: 0.7rem;
      border: none;
      border-radius: 9px;
      font-size: 1rem;
      background: var(--bg);
      box-shadow: inset 2px 2px 4px var(--shadow-dark),
        inset -2px -2px 4px var(--shadow-light);
      transition: color .2s ease, box-shadow .15s ease, transform .08s ease;
      outline: none;
      color: var(--text-color);
    }

    .input-group input:hover::placeholder {
      color: var(--text-color-hight);
    }

    .input-group input:focus {
      color: var(--text-color-hight);
    }

    .margin-eye input {
      padding-right: 2.8rem;
    }

    /* --- Eye Button --- */
    .toggle-eye {
      position: absolute;
      right: .8rem;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-color);
      transition: color .18s ease, transform .08s ease;
      display: inline-flex;
      align-items: center;
    }

    .toggle-eye:hover {
      color: var(--text-color-hight);
    }

    .toggle-eye:active {
      transform: translateY(-50%) scale(.96);
    }

    .toggle-eye svg {
      width: 1.5rem;
      height: 1.5rem;
      pointer-events: none;
    }

    /* --- Buttons --- */
    .primary {
      width: 100%;
      padding: .67em;
      border: none;
      border-radius: 9px;
      background: var(--bg);
      color: var(--text-color-title);
      font-size: 1rem;
      cursor: pointer;
      box-shadow: 2px 2px 4px var(--shadow-dark),
        -2px -2px 4px var(--shadow-light);
      transition: box-shadow .12s ease, transform .12s ease, color .2s ease;
    }

    .primary:hover {
      transform: scale(.99);
      color: var(--text-color-hight);
    }

    .primary:active {
      box-shadow: inset 2px 2px 4px var(--shadow-dark),
        inset -2px -2px 4px var(--shadow-light);
      transform: translateY(1px);
    }

    /* --- Links --- */
    .links {
      text-align: center;
      font-size: .8rem;
      margin-bottom: .3rem;
    }

    .links a {
      color: var(--text-color);
      text-decoration: none;
      transition: color .2s ease;
    }

    .links a:hover {
      color: var(--text-color-hight);
    }

/* ----- ERREURS / FLASH ----- */
.error, .notice {
    padding: 0.7rem;
    margin-bottom: 20px;
    border-radius: 10px;
/*    font-size: 14px; */
     background: #ffdede;
    color: #993333;

    /* légère ombre */
    box-shadow:
        inset 2px 2px 4px  #c9c9c9,
        inset -2px -2px 4px  #ffffff;
}