:root {
  --bg: #F5F6F4; --card: #FFFFFF; --ink: #1D2124; --ink-soft: #5B615F; --ink-faint: #8B918E;
  --line: #DFE2DF; --accent: #2C5F8A; --accent-tint: #DCEAF4; --accent-dark: #17334A;
  --warn: #B9791E; --full: #B23A34; --ok: #2F7A4F;
}
* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif; display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Colonne de gauche : identité du produit, masquée sur petit écran. */
.pane-brand {
  background: var(--accent-dark);
  color: #fff;
  padding: 48px 44px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.pane-brand::after {
  content: ''; position: absolute; right: -120px; bottom: -140px;
  width: 420px; height: 420px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
}
.pane-brand .mark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600;
}
.pane-brand .mark i { font-size: 22px; opacity: 0.9; }
.pane-brand h1 {
  font-family: 'Space Grotesk', sans-serif; font-size: 30px; font-weight: 600;
  line-height: 1.25; margin: 0 0 14px; max-width: 15ch;
}
.pane-brand p { font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); margin: 0; max-width: 34ch; }
.pane-brand ul { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 9px; }
.pane-brand li { font-size: 13px; color: rgba(255, 255, 255, 0.75); display: flex; align-items: center; gap: 9px; }
.pane-brand li i { color: rgba(255, 255, 255, 0.45); font-size: 15px; }
.pane-brand .foot { font-size: 12px; color: rgba(255, 255, 255, 0.4); position: relative; z-index: 1; }

/* Colonne de droite : le formulaire. */
.pane-form { display: flex; align-items: center; justify-content: center; padding: 40px 32px; }
.form-inner { width: 100%; max-width: 350px; }

.form-inner h2 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; margin: 0 0 5px; }
.form-inner .lead { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 24px; line-height: 1.55; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
label { font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
input {
  height: 42px; border: 1px solid var(--line); border-radius: 9px; padding: 0 13px;
  font-size: 14.5px; font-family: inherit; background: #fff; color: var(--ink); width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
input::placeholder { color: #B4B9B6; }

.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border: none;
  background: transparent; color: var(--ink-faint); border-radius: 6px; cursor: pointer;
  display: grid; place-items: center;
}
.pw-toggle:hover { background: var(--bg); color: var(--ink); }

button.primary {
  width: 100%; height: 44px; border: 1px solid var(--accent); border-radius: 9px;
  background: var(--accent); color: #fff; font-family: inherit; font-size: 14.5px;
  font-weight: 500; cursor: pointer; transition: background 0.15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
button.primary:hover:not(:disabled) { background: var(--accent-dark); }
button.primary:disabled { opacity: 0.55; cursor: not-allowed; }

.msg {
  font-size: 13px; margin: 0 0 16px; padding: 11px 13px; border-radius: 9px;
  line-height: 1.55; display: none; align-items: flex-start; gap: 9px;
}
.msg.show { display: flex; }
.msg i { font-size: 15px; margin-top: 1px; flex: none; }
.msg.error { background: #FBEAE9; color: var(--full); border: 1px solid #F0CFCD; }
.msg.ok { background: #E8F3EC; color: var(--ok); border: 1px solid #CBE5D5; }

.row-between { display: flex; justify-content: space-between; align-items: baseline; }
.link-btn {
  background: none; border: none; padding: 0; font-family: inherit; font-size: 12.5px;
  color: var(--accent); cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

.form-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-faint); line-height: 1.6; }

@media (max-width: 820px) {
  body { grid-template-columns: 1fr; }
  .pane-brand { padding: 28px 24px; }
  .pane-brand h1 { font-size: 23px; margin-bottom: 8px; }
  .pane-brand ul, .pane-brand .foot { display: none; }
  .pane-form { padding: 32px 24px 48px; align-items: flex-start; }
}