/* Connexion XYBim 2026 : style autonome et strictement circonscrit a la page publique. */
body.xybim-auth-page {
  margin: 0;
  min-height: 100vh;
  color: #171b33;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: radial-gradient(ellipse 580px 310px at 8% -70px, rgba(92, 64, 244, .085), transparent 72%),
              radial-gradient(ellipse 460px 320px at 96% 18%, rgba(89, 105, 251, .055), transparent 72%),
              #f7f8fc !important;
  -webkit-font-smoothing: antialiased;
}
.xybim-auth-page *, .xybim-auth-page *::before, .xybim-auth-page *::after { box-sizing: border-box; }
.xybim-auth-page a { color: #4f37d9; text-decoration: none; }
.xybim-auth-page a:hover { text-decoration: underline; color: #3920c4; }
.xy-auth-shell { width: min(900px, calc(100% - 32px)); min-height: 100vh; min-height: 100svh; margin: 0 auto; padding: 27px 0 20px; display: flex; flex-direction: column; }
.xy-auth-stage { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; }
.xy-auth-login-zone { display: flex; flex-direction: column; }
.xy-auth-discovery-zone { display: flex; flex-direction: column; gap: 15px; }
.xy-auth-brand { text-align: center; margin: 0 0 17px; }
.xy-auth-brand img { display: block; width: 202px; max-width: 70%; height: auto; margin: 0 auto 5px; }
.xy-auth-brand p { margin: 0; color: #767c90; font-size: 12px; font-weight: 500; letter-spacing: .025em; }
.xy-auth-panel {
  width: 100%; max-width: 430px; margin: 0 auto 17px; padding: 25px 30px 20px;
  background: #fff; border: 1px solid #e8e9f1; border-radius: 18px;
  box-shadow: 0 8px 25px rgba(31, 37, 76, .035);
}
.xy-auth-panel h1 { font-size: 21px; font-weight: 740; line-height: 1.25; letter-spacing: -.035em; text-align: center; margin: 0 0 5px; color: #1a1d31; }
.xy-auth-intro { font-size: 13px; color: #7b8091; text-align: center; margin: 0 0 21px; }
.xy-auth-field { margin: 0 0 13px; }
.xy-auth-field label { display: inline-block; margin: 0 0 6px; font-weight: 620; color: #343b55; font-size: 12px; }
.xy-auth-input, .xybim-auth-page .xy-auth-input.form-control {
  display: block; width: 100%; height: 42px; padding: 9px 12px; margin: 0;
  border-radius: 9px; background: #fcfcff; border: 1px solid #dfe2ed;
  outline: 0; box-shadow: none; font: inherit; font-size: 13px; color: #20253c;
  transition: border-color .16s, box-shadow .16s;
}
.xy-auth-input::placeholder { color: #a0a5b4; opacity: 1; }
.xy-auth-input:focus { border-color: #725de7; box-shadow: 0 0 0 3px rgba(86, 61, 239, .10); background: #fff; }
.xy-auth-input.input-validation-error { border-color: #d66b76; }
.xy-auth-password-wrap { position: relative; }
.xy-auth-password-wrap .xy-auth-input { padding-right: 83px; }
.xy-auth-reveal {
  position: absolute; right: 6px; top: 5px; padding: 5px 9px; height: 32px;
  border: 0; border-radius: 7px; background: transparent; color: #5955a8;
  cursor: pointer; font-weight: 580; font-size: 11px;
}
.xy-auth-reveal:hover, .xy-auth-reveal:focus-visible { background: #f0eeff; color: #3c28ba; outline: none; }
.xy-auth-error { display: block; margin-top: 4px; color: #bc384e; font-size: 12px; }
.xy-auth-error:empty { display: none; }
.xy-auth-server-errors { margin: 10px 0 13px; border-radius: 8px; padding: 9px 11px; background: #fff1f1; border: 1px solid #f5d1d4; font-size: 12px; color: #a72b3a; text-align: left; }
.xy-auth-server-errors.validation-summary-valid { display: none; }
.xy-auth-server-errors ul { margin: 0; padding-left: 19px; }
.xy-auth-submit {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 43px; margin-top: 18px; border: 0; border-radius: 9px;
  background: linear-gradient(112deg, #5a41f0 0%, #4930d7 100%); color: #fff;
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 660;
  box-shadow: 0 3px 10px rgba(85, 63, 220, .15); transition: background .2s, transform .12s, box-shadow .2s;
}
.xy-auth-submit:hover { background: linear-gradient(112deg, #5138e6 0%, #3c24cc 100%); box-shadow: 0 5px 13px rgba(85, 63, 220, .22); }
.xy-auth-submit:active { transform: translateY(1px); }
.xy-auth-submit:disabled { cursor: wait; opacity: .76; }
.xy-auth-submit:focus-visible, .xy-ai-cta:focus-visible, .xy-beta a:focus-visible { outline: 3px solid rgba(94, 77, 246, .45); outline-offset: 3px; }
.xy-auth-submit-spinner { display: none; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 100%; animation: xy-auth-spin .7s linear infinite; }
.xy-auth-submit.is-loading .xy-auth-submit-spinner { display: inline-block; }
@keyframes xy-auth-spin { to { transform: rotate(360deg); } }
.xy-auth-assist { text-align: center; margin-top: 13px; font-size: 12px; }
.xy-ai-banner {
  display: flex; align-items: center; gap: 17px; margin: 0 0 15px; padding: 17px 20px;
  border-radius: 14px; border: 1px solid #ddd9fa;
  background: linear-gradient(98deg, #f0edff 0%, #f9f8ff 62%, #fff 100%);
}
.xy-ai-symbol { flex: 0 0 46px; width: 46px; height: 46px; display: flex; justify-content: center; align-items: center; color: #fff; background: #583def; border-radius: 13px; font-size: 28px; box-shadow: 0 7px 15px rgba(83, 59, 221, .14); }
.xy-ai-copy { flex: 1 1 auto; min-width: 0; }
.xy-ai-eyebrow { color: #5840d7; font-size: 10px; font-weight: 800; letter-spacing: .10em; }
.xy-ai-copy h2 { color: #201945; font-size: 17px; font-weight: 750; line-height: 1.2; letter-spacing: -.025em; margin: 4px 0; }
.xy-ai-copy p { color: #5d5d78; font-size: 12px; line-height: 1.5; margin: 0; }
.xybim-auth-page .xy-ai-cta {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 14px; border-radius: 9px; background: #5036df; color: #fff;
  font-size: 12px; font-weight: 720; white-space: nowrap; box-shadow: 0 3px 10px rgba(66, 40, 186, .15);
}
.xybim-auth-page .xy-ai-cta:hover { color: #fff; background: #3f28c7; text-decoration: none; }
.xy-beta { padding: 19px 21px 12px; border: 1px solid #e7e9f0; border-radius: 16px; background: #fff; box-shadow: 0 7px 22px rgba(34, 42, 83, .025); }
.xy-beta-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.xy-beta-heading h2 { margin: 0 0 3px; font-size: 16px; color: #20253e; font-weight: 720; letter-spacing: -.02em; }
.xy-beta-heading p { margin: 0; color: #7b8090; font-size: 12px; }
.xy-beta-status { flex: 0 0 auto; padding: 5px 9px; color: #6155b4; background: #f2f0ff; font-size: 9px; font-weight: 800; letter-spacing: .065em; border-radius: 99px; }
.xy-beta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.xy-beta-card { min-width: 0; padding: 13px; border: 1px solid #ececf2; border-radius: 12px; background: #fcfcfe; }
.xy-beta-device { display: flex; align-items: center; gap: 10px; margin-bottom: 11px; }
.xy-beta-device-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; border-radius: 9px; color: #6250d8; background: #efedff; font-size: 11px; font-weight: 800; }
.xy-beta-device-icon--android { background: #ecf8ed; color: #2d8c55; font-size: 14px; }
.xy-beta-device h3 { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.15; color: #2b3044; }
.xy-beta-device p { margin: 2px 0 0; font-size: 11px; color: #9599a8; }
.xy-beta-card-body { display: flex; align-items: center; gap: 14px; }
.xy-beta-qr-link { flex: 0 0 auto; display: block; background: #fff; border: 1px solid #e9e9ef; border-radius: 10px; padding: 5px; line-height: 0; }
.xy-beta-qr-link img { width: 118px; height: 118px; display: block; object-fit: contain; }
.xy-beta-directions { min-width: 0; font-size: 12px; color: #596075; line-height: 1.45; }
.xy-beta-directions p { margin: 0 0 10px; }
.xy-beta-directions a { font-size: 11px; font-weight: 750; }
.xy-beta-note { display: flex; align-items: flex-start; gap: 7px; margin: 13px 0 0; padding: 8px 10px; background: #f6f7fa; border-radius: 8px; font-size: 11px; color: #777c8b; }
.xy-beta-note strong { color: #565d75; font-weight: 700; }
.xy-beta-note > span:first-child { color: #5b4aeb; font-size: 14px; line-height: 1; }
.xy-beta-help { margin-top: 10px; font-size: 11px; color: #787f95; }
.xy-beta-help summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: #5b4bdd; font-weight: 650; list-style: none; }
.xy-beta-help summary::-webkit-details-marker { display: none; }
.xy-beta-help[open] summary span { transform: rotate(180deg); }
.xy-beta-help-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 9px; line-height: 1.55; }
.xy-beta-help-columns p { margin: 4px 0; }
.xy-auth-footer { text-align: center; margin-top: 0; font-size: 11px; color: #9da1b1; }
@media (min-width: 721px) {
  .xy-auth-shell { padding-top: clamp(20px, 3.4vh, 38px); padding-bottom: clamp(16px, 2.6vh, 28px); }
  .xy-auth-stage { gap: clamp(16px, 2vh, 24px); }
  .xy-auth-login-zone { flex: 1 0 auto; justify-content: flex-start; }
  .xy-auth-login-zone::before, .xy-auth-login-zone::after { content: ""; display: block; min-height: 0; }
  .xy-auth-login-zone::before { flex: 4 1 0; }
  .xy-auth-login-zone::after { flex: 1 1 0; }
  .xy-auth-panel { margin-bottom: 0; }
  .xy-auth-discovery-zone { flex: 0 0 auto; gap: 14px; }
  .xy-auth-discovery-zone .xy-ai-banner { margin-bottom: 0; }
}

@media (max-width: 720px) {
  .xy-auth-shell { width: min(570px, calc(100% - 26px)); min-height: auto; padding-top: 20px; }
  .xy-auth-stage { display: block; }
  .xy-auth-login-zone, .xy-auth-discovery-zone { display: block; }
  .xy-ai-banner { flex-wrap: wrap; gap: 11px; padding: 16px; }
  .xy-ai-symbol { flex-basis: 40px; height: 40px; width: 40px; font-size: 24px; }
  .xy-ai-copy { flex: 1 1 calc(100% - 55px); }
  .xy-ai-cta { margin-left: 51px; }
  .xy-beta-grid { grid-template-columns: 1fr; }
  .xy-beta-help-columns { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 400px) {
  .xy-auth-panel { padding: 22px 18px 18px; }
  .xy-beta { padding: 16px 13px 12px; }
  .xy-beta-heading { gap: 7px; }
  .xy-beta-status { font-size: 8px; padding: 5px 6px; }
  .xy-beta-card-body { gap: 12px; }
  .xy-beta-qr-link img { width: 112px; height: 112px; }
  .xy-ai-cta { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .xybim-auth-page *, .xybim-auth-page *::before, .xybim-auth-page *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }