*{box-sizing:border-box}
    body{
      background:var(--bg);
      color:var(--text);
      font-family:"Lisu Bosa", serif;
      overflow:hidden;
    }
    .page{
      height:100vh;
      height:100dvh;
      overflow:hidden;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:clamp(12px, 4vh, 40px) 16px clamp(56px, 9vh, 80px);
    }
    .login{
      width:360px; max-width:100%;
      text-align:center;
    }
    /* wordmark (image du nom "Nomad Note") */
    .brand-img{
      width: clamp(140px, 55vw, 220px);
      max-width: 80%;
      margin: 0 auto clamp(4px, 1vh, 8px);
      display:block;
      filter: drop-shadow(0 2px 0 rgba(0,0,0,.35));
    }
    /* logo rond */
    /* conteneur rond, carré, pas d’image déformée */
.logo-wrap{
  width: clamp(120px, 28vh, 260px);
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  margin: clamp(4px, 1.2vh, 10px) auto clamp(8px, 2.5vh, 24px);
  max-width: 80%;
  display:flex;
}

/* l’image conserve son ratio, jamais écrasée */
.logo{
  width:100%;
  height:auto;
  object-fit: contain;         /* évite l’écrasement */
  border-radius:5%;             /* on ne coupe pas l’image */
  display:block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.35));
}


    /* Inputs fins et arrondis */
    .input{
      width:100%;
      padding:12px 14px;
      background:transparent;
      border:1px solid var(--line);
      border-radius:10px;
      color:var(--text);
      font-family:inherit; font-size:16px;
      outline:none;
      margin: clamp(5px, 1.2vh, 10px) 0;
    }
    .input-wrap{
      position:relative;
      width:100%;
      margin: clamp(5px, 1.2vh, 10px) 0;
    }
    .input-wrap .input{
      padding-right:44px;
      margin:0;
      width:100%;
    }
    .pwd-toggle{
      position:absolute;
      right:12px;
      top:50%;
      transform:translateY(-50%);
      background:none;
      border:none;
      padding:0;
      cursor:pointer;
      color:#9893a799;
      display:flex;
      align-items:center;
      line-height:1;
    }
    .pwd-toggle:hover{ color:var(--gold); }
    .eye-icon{ width:20px; height:20px; display:block; }
    .input::placeholder{ color:#9893a799; }
    .input:focus{
      border-color: var(--gold);
      box-shadow: 0 0 0 2px rgba(189,152,64,.28);
    }

    /* Boutons or avec glow doux */
    .btn{
      width: 80%;
      margin: clamp(8px, 1.8vh, 14px) auto 0;
      padding: clamp(10px, 1.5vh, 12px) 18px;
      border: 0;
      border-radius: 18px;
      font-weight: 800;
      font-size: 18px;
      font-family: inherit;
      cursor: pointer;
      transition: transform .05s ease;
      display:block;
    }
    .btn:active{ transform: translateY(1px); }

    .btn-gold{
      background: var(--gold);
      color: var(--night);
      box-shadow:
        0 8px 24px rgba(189,152,64,.35),
        0 0 0 2px rgba(189,152,64,.25) inset;
    }
    .btn-ghost{
      background: transparent;
      color: var(--gold);
      border: 1px solid rgba(189,152,64,.55);
      box-shadow: none;
    }

    .login-separator {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      color: var(--muted);
      font-size: 12px;
      margin: 4px 0;
    }
    .login-separator::before,
    .login-separator::after {
      content: '';
      flex: 1;
      height: 1px;
      background: var(--line);
    }

    .btn-google {
      background: #fff;
      color: #3c4043;
      border: 1px solid #dadce0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-weight: 500;
      font-size: 10px;
      padding: 3px 12px;
      box-shadow: 0 1px 3px rgba(0,0,0,.15);
      width: auto;
      margin-top: 0;
    }
    .btn-google:hover { background: #f8f9fa; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

    .forgot{
      margin-top: 8px;
      font-size: 12px;
      opacity: .7;
    }

    /* messages */
    .msg{ margin:10px 0; font-size:14px; }
    .err{ color:#ffb4b4; }
    .ok{ color:#9ef59e; }

    /* écran dashboard minimal */
    .card{
      width:360px; max-width:100%;
      margin:0 auto; padding:18px;
      border:1px solid rgba(255,255,255,.15);
      border-radius:12px;
      background: rgba(255,255,255,.04);
    }
    .title{
      color: var(--gold);
      font-weight:800;
      font-size: 24px;
      margin: 0 0 8px;
      text-align:center;
    }

    /* responsive léger */
    @media (max-width:380px){
      .btn{ width: 88%; }
    }

    /* animations douces */
 .btn{ transition: transform .06s ease, filter .12s ease, box-shadow .12s ease; }
 .btn:active{ transform: translateY(1px) scale(0.995); }

    /* hover souris */
  .btn-gold:hover{ filter: brightness(1.06); box-shadow: 0 0px 28px rgba(189,152,64,.42), 0 0 0 2px rgba(189,152,64,.28) inset; }
  .btn-ghost:hover{ border-color: rgba(189,152,64,.8); filter: brightness(1.08); }

/* focus clavier / mobile */
  .btn:focus-visible{ outline: 2px solid rgba(189,152,64,.55); outline-offset: 2px; }
  .input:focus{ border-color: var(--gold); box-shadow: 0 0 0 2px rgba(189,152,64,.28); }

.lang-toggle{
  position: fixed;
  left: 50%;
  bottom: max(44px, calc(env(safe-area-inset-bottom) + 44px));
  transform: translateX(-50%);
  margin: 0;
  z-index: 50;
}

.lang-toggle__btn{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
}

.lang-toggle__track{
  --w: 60px;
  --h: 22px;
  --pad: 3px;
  --thumb: 25px;

  position:relative;
  display:flex;
  align-items:center;
  width: var(--w);
  height: var(--h);
  border-radius:999px;
  border:1px solid var(--line);
  background: var(--btn-ghost-bg, rgba(255,255,255,.03));
  box-shadow: 0 0 0 2px rgba(0,0,0,.12) inset;
  overflow:hidden;
  isolation:isolate;
}
/* padding-bottom géré par clamp dans .page */

/* 2 cases pile poil */
.lang-toggle__flag{
  flex: 0 0 50%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
  opacity:.95;
}

/* drapeaux en background */
.lang-toggle__flag--left{
  background: url("../images/flags/fr.svg") center/15px 15px no-repeat;
}
.lang-toggle__flag--right{
  background: url("../images/flags/gb.svg") center/15px 15px no-repeat;
}

.lang-toggle__thumb{
  position:absolute;
  top: var(--pad);
  left: var(--pad);
  height: calc(var(--h) - (var(--pad) * 2));
  width: var(--thumb);
  border-radius:999px;
  background: color-mix(in oklab, var(--gold), transparent 86%);
  border:1px solid color-mix(in oklab, var(--gold), transparent 50%);
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  transform: translateX(0);
  transition: transform .18s ease;
  z-index:1; /* dessous des flags */
  pointer-events:none;
}

/* état EN : déplacement AUTO (donc plus d’erreur quand tu changes les tailles) */
.lang-toggle[data-lang="en"] .lang-toggle__thumb{
  transform: translateX(calc(var(--w) - (var(--pad) * 2) - var(--thumb)));
}

/* focus clavier */
.lang-toggle__btn:focus-visible .lang-toggle__track{
  outline:2px solid rgba(189,152,64,.55);
  outline-offset:2px;
}