/* account-auth.css — pages de connexion et d'inscription Venach */
.va-auth {
  --g: #03c75a; --gd: #029e48; --g-soft: #f0fbf5;
  --bd: #e3e3e3; --bg: #f5f6f7; --surface: #fff;
  --tx: #1e1e23; --mu: #767678;
  --er: #c4161c; --er-bg: #fff4f4; --er-bd: #f3c4c6;
  --info-bg: #f0f6ff; --info-bd: #c6dbff; --info-tx: #0058d9;
  --r: 6px;
  min-height: 100vh;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center;
  padding: 2.5rem 1rem 3rem;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px; line-height: 1.5; color: var(--tx);
}
.va-auth *, .va-auth *::before, .va-auth *::after { box-sizing: border-box; margin: 0; padding: 0; }
.va-auth .rw { width: 100%; max-width: 420px; }
.va-auth [hidden] { display: none !important; }

/* Logo */
.va-auth .r-logo { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 1.75rem; text-decoration: none; color: var(--tx); }
.va-auth .r-logo-name { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }

/* Carte */
.va-auth .rc { background: var(--surface); border: 1px solid var(--bd); border-radius: 10px; padding: 2rem 1.75rem; }
.va-auth h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; margin-bottom: .35rem; }
.va-auth .r-lead { color: var(--mu); font-size: 14px; margin-bottom: 1.5rem; }

/* Alerte */
.va-auth .r-alert { padding: .75rem .9rem; border-radius: var(--r); font-size: 14px; margin-bottom: 1.25rem; border: 1px solid; }
.va-auth .r-alert.error { background: var(--er-bg); color: var(--er); border-color: var(--er-bd); }
.va-auth .r-alert.info  { background: var(--info-bg); color: var(--info-tx); border-color: var(--info-bd); }
.va-auth .r-alert a { color: inherit; font-weight: 700; }

/* Choix de la méthode */
.va-auth .r-methods { display: flex; flex-direction: column; gap: 10px; }
.va-auth .r-method {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 52px; padding: 0 16px;
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--tx);
  text-decoration: none; cursor: pointer; text-align: left;
  transition: border-color .15s, background .15s;
}
.va-auth .r-method:hover { border-color: #c9c9cc; background: #fafafa; }
.va-auth .r-method svg, .va-auth .r-method img { flex: none; width: 20px; height: 20px; }
.va-auth .r-method.google { border-color: #747775; }
.va-auth .r-or { display: flex; align-items: center; gap: 12px; color: var(--mu); font-size: 13px; margin: 6px 0; }
.va-auth .r-or::before, .va-auth .r-or::after { content: ""; flex: 1; height: 1px; background: var(--bd); }

/* Retour */
.va-auth .r-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: var(--mu); font: inherit; font-size: 14px; cursor: pointer; margin-bottom: 1rem; padding: 4px 0; }
.va-auth .r-back:hover { color: var(--tx); }

/* Sélecteur téléphone / email */
.va-auth .r-switch { display: grid; grid-template-columns: 1fr 1fr; background: #eef0f2; border-radius: var(--r); padding: 3px; margin-bottom: 1.25rem; }
.va-auth .r-switch button { border: 0; background: none; padding: 9px 0; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 600; color: var(--mu); cursor: pointer; }
.va-auth .r-switch button[aria-pressed="true"] { background: var(--surface); color: var(--tx); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* Champs */
.va-auth .r-field { margin-bottom: 1.1rem; }
.va-auth label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.va-auth .r-hint { font-size: 13px; color: var(--mu); margin-top: 6px; }
.va-auth input, .va-auth select {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--tx);
  background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r);
  outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: border-color .15s, box-shadow .15s;
}
.va-auth select { background-image: linear-gradient(45deg, transparent 50%, var(--mu) 50%), linear-gradient(135deg, var(--mu) 50%, transparent 50%); background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.va-auth input:focus, .va-auth select:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(3,199,90,.15); }
.va-auth input[aria-invalid="true"] { border-color: var(--er); }
.va-auth .r-field-err { font-size: 13px; color: var(--er); margin-top: 6px; min-height: 0; }
.va-auth .r-phone { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px; }
.va-auth .r-pwd { position: relative; }
.va-auth .r-pwd input { padding-right: 48px; }
.va-auth .r-pwd-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 4px; color: var(--mu); cursor: pointer; }
.va-auth .r-pwd-toggle:hover { color: var(--tx); }

/* Code */
.va-auth .r-code { height: 60px; text-align: center; font-size: 26px; font-weight: 700; letter-spacing: .5em; padding-left: .5em; font-variant-numeric: tabular-nums; }
.va-auth .r-otp-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 1rem; font-size: 14px; }
.va-auth .r-link { background: none; border: 0; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--gd); cursor: pointer; }
.va-auth .r-link:disabled { color: var(--mu); font-weight: 400; cursor: default; }
.va-auth .r-link.muted { color: var(--mu); font-weight: 400; }

/* Boutons */
.va-auth .r-btn { position: relative; display: block; width: 100%; height: 50px; border: 0; border-radius: var(--r); font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; background: var(--g); color: #fff; transition: background .15s; }
.va-auth .r-btn:hover:not(:disabled) { background: var(--gd); }
.va-auth .r-btn:disabled { background: #a8e6c4; cursor: not-allowed; }
.va-auth .r-btn.is-busy { color: transparent; }
.va-auth .r-btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: rspin .7s linear infinite; }
@keyframes rspin { to { transform: rotate(360deg); } }

.va-auth :focus-visible { outline: 2px solid var(--info-tx); outline-offset: 2px; }

/* Succès */
.va-auth .r-done { text-align: center; padding: 1.5rem 0 .5rem; }
.va-auth .r-done-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: var(--g-soft); display: flex; align-items: center; justify-content: center; }
.va-auth .r-done p { color: var(--mu); font-size: 14px; margin-top: .25rem; }

.va-auth .r-cgu { font-size: 13px; color: var(--mu); margin: 1.25rem 0 1rem; }
.va-auth .r-cgu a, .va-auth .r-foot a { color: var(--gd); font-weight: 600; text-decoration: none; }
.va-auth .r-cgu a:hover, .va-auth .r-foot a:hover { text-decoration: underline; }
.va-auth .r-foot { margin-top: 1.25rem; text-align: center; font-size: 14px; color: var(--mu); }

@media (max-width: 480px) {
  .va-auth { padding: 1.25rem .75rem 2rem; }
  .va-auth .rc { padding: 1.5rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .va-auth * { transition: none !important; }
  .va-auth .r-btn.is-busy::after { animation-duration: 2s; }
}
  

/* Connexion */
.va-auth .r-row-end { display: flex; justify-content: flex-end; margin: -.35rem 0 1.1rem; }
.va-auth .r-row-end a { font-size: 13px; color: var(--mu); text-decoration: none; }
.va-auth .r-row-end a:hover { color: var(--tx); text-decoration: underline; }


/* Action irréversible */
.va-auth .r-btn.danger { background: var(--er); }
.va-auth .r-btn.danger:hover:not(:disabled) { background: #9e1116; }
.va-auth .r-btn.ghost { background: none; color: var(--tx); border: 1px solid var(--bd); margin-top: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.va-auth .r-btn.ghost:hover { background: #f7f7f7; }
.va-auth .r-list { margin: 0 0 1.25rem 1.1rem; font-size: 14px; color: var(--tx); }
.va-auth .r-list li { margin-bottom: .35rem; }