/* Pages « Connexion » et « Créer votre compte ».
   Mêmes couleurs, même police et mêmes arrondis que le webmail (public/maquette.html). */

:root {
  --bg: #f5f6f8;
  --panel: #ffffff;
  --border: #e7e9ee;
  --text: #1a1d21;
  --muted: #7a828d;
  --muted-2: #9aa1ab;
  --accent: #2f6fed;
  --accent-ink: #ffffff;
  --hover: #f2f4f7;
  --danger: #e5484d;
  --danger-soft: rgba(229, 72, 77, .08);
  --shadow: 0 10px 30px rgba(20, 25, 40, .12);
  --radius: 10px;
}
[data-theme="sombre"] {
  --bg: #0f1115;
  --panel: #171a22;
  --border: #262c37;
  --text: #e6e8ee;
  --muted: #99a0ac;
  --muted-2: #6b7482;
  --hover: #1c2029;
  --danger: #f2777b;
  --danger-soft: rgba(229, 72, 77, .14);
  --shadow: 0 16px 40px rgba(0, 0, 0, .55);
  scrollbar-color: #414a5a transparent;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; padding: 24px 16px; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; -webkit-font-smoothing: antialiased;
}

.card { width: 100%; max-width: 400px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 32px; }
.badge { width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.badge svg { width: 22px; height: 22px; }
h1 { font-size: 22px; font-weight: 600; margin: 0 0 6px; letter-spacing: -.2px; }
.sub { color: var(--muted); margin: 0 0 24px; line-height: 1.5; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.field input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 14px; background: var(--panel); color: var(--text); font-family: inherit; outline: none; }
.field input::placeholder { color: var(--muted-2); }
.field input:focus { border-color: var(--accent); }
.field.invalid input { border-color: var(--danger); }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Mot de passe : le bouton « Afficher » est posé dans le champ, à droite */
.pass { position: relative; }
.pass input { padding-right: 84px; }
.reveal { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); border: none; background: transparent; color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 500; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.reveal:hover { background: var(--hover); color: var(--text); }

.error { background: var(--danger-soft); color: var(--danger); border-radius: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.45; margin-bottom: 16px; }

.submit { width: 100%; border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); padding: 11px 14px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.submit:hover { filter: brightness(.94); }
.submit:disabled { opacity: .6; cursor: default; filter: none; }

.other { margin: 22px 0 0; text-align: center; color: var(--muted); font-size: 13px; }
.other a { color: var(--accent); font-weight: 500; text-decoration: none; }
.other a:hover { text-decoration: underline; }

.reveal:focus-visible, .submit:focus-visible, .other a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }