/* ==========================================================================
   Phoenix Opsale — Page de connexion (design novembre 2026)
   ========================================================================== */
.auth-body { background: #eaf1ff; }
.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); overflow-x: hidden; }

/* --- Logo texte (emblème + « Phoenix Opsale ») --- */
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none !important; line-height: .95; }
.wordmark img { width: auto; height: 46px; flex: none; }
.wordmark b, .wordmark i { display: block; font-style: italic; letter-spacing: -.02em; }
.wordmark b { font-weight: 800; font-size: 25px; }
.wordmark i { font-weight: 700; font-size: 25px; opacity: .95; }
.wordmark-lg img { height: 78px; }
.wordmark-lg b, .wordmark-lg i { font-size: 38px; }

/* --- Panneau vitrine --- */
.auth-showcase {
  position: relative; overflow: hidden; color: #fff;
  padding: 34px 150px 34px 56px; display: flex; flex-direction: column; gap: 22px;
  background:
    radial-gradient(900px 520px at 85% 35%, rgba(41,121,255,.38) 0%, transparent 60%),
    radial-gradient(700px 420px at 10% 100%, rgba(29,78,216,.35) 0%, transparent 60%),
    linear-gradient(160deg, #04122b 0%, #071d43 55%, #0a2a63 100%);
}
.auth-showcase::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 46%, rgba(120,170,255,.16) 49%, transparent 52%),
    linear-gradient(122deg, transparent 58%, rgba(120,170,255,.10) 60%, transparent 63%),
    linear-gradient(108deg, transparent 70%, rgba(120,170,255,.08) 72%, transparent 75%);
}
.auth-showcase > * { position: relative; }
.auth-badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(110,165,255,.55); background: rgba(40,100,239,.14);
  font-size: 14px; font-weight: 700; color: #e6efff;
}
.auth-badge .ico { color: #6aa8ff; }
.auth-hero h1 { font-size: clamp(34px, 3.3vw, 52px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 0 0 16px; }
.auth-hero h1 em { font-style: normal; background: linear-gradient(90deg, #3d8bff, #5cb8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-hero p { color: #d3def2; font-size: 16px; line-height: 1.55; max-width: 640px; }

/* --- Maquette appareils --- */
.devices { position: relative; width: min(660px, 100%); aspect-ratio: 660 / 330; margin: 4px 0 8px; container-type: inline-size; }
.laptop { position: absolute; left: 10%; top: 0; width: 76%; }
.laptop-screen { background: #0b1324; border: 1.2cqw solid #1a2233; border-bottom-width: 1.6cqw; border-radius: 2cqw 2cqw 0 0; aspect-ratio: 16 / 9.4; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.laptop-base { height: 2.4cqw; margin: 0 -6%; background: linear-gradient(#cfd6e2, #8d97a8); border-radius: 0 0 3cqw 3cqw; position: relative; }
.laptop-base::before { content: ''; position: absolute; left: 42%; right: 42%; top: 0; height: .9cqw; background: #7c8698; border-radius: 0 0 1cqw 1cqw; }
.mk-app { display: flex; height: 100%; font-size: 1.15cqw; color: #0f2240; }
.mk-side { width: 24%; background: #081a36; padding: 2.2cqw 1.4cqw; display: flex; flex-direction: column; gap: .5cqw; }
.mk-brand { display: flex; align-items: center; gap: .6cqw; color: #fff; margin-bottom: 1.4cqw; line-height: .95; }
.mk-brand img { height: 3.4cqw; width: auto; }
.mk-brand b, .mk-brand i { display: block; font-style: italic; font-size: 1.45cqw; }
.mk-nav { display: flex; align-items: center; gap: .9cqw; color: #c7d3e8; padding: .7cqw .9cqw; border-radius: .7cqw; white-space: nowrap; }
.mk-nav i { width: 1.4cqw; height: 1.4cqw; border: .2cqw solid currentColor; border-radius: .35cqw; opacity: .8; }
.mk-nav.on { background: #2864ef; color: #fff; }
.mk-main { flex: 1; background: #f4f7fc; padding: 1.4cqw 1.8cqw; min-width: 0; }
.mk-top { display: flex; align-items: center; gap: 1.2cqw; }
.mk-search { flex: 1; background: #fff; border: .15cqw solid #e2e8f2; border-radius: .8cqw; padding: .7cqw 1.2cqw; color: #8392aa; }
.mk-bell { width: 1.8cqw; height: 1.8cqw; border-radius: 50% 50% .4cqw .4cqw; border: .25cqw solid #4a5b78; position: relative; }
.mk-bell::after { content: ''; position: absolute; right: -.5cqw; top: -.5cqw; width: .8cqw; height: .8cqw; border-radius: 50%; background: #ef4444; }
.mk-av { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #2864ef; color: #fff; display: grid; place-items: center; font-size: .95cqw; font-weight: 800; }
.mk-title { font-weight: 800; font-size: 1.8cqw; margin: 1.8cqw 0 1.4cqw; }
.mk-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.mk-col { background: #eaf0f8; border-radius: .9cqw; padding: .8cqw; display: flex; flex-direction: column; gap: .8cqw; }
.mk-head { font-weight: 800; padding: .6cqw .8cqw; border-radius: .6cqw; font-size: 1.05cqw; white-space: nowrap; overflow: hidden; }
.mk-head.c1 { background: #c9d6ff; color: #2b3f8f; }
.mk-head.c2 { background: #ffd79a; color: #8a4b00; }
.mk-head.c3 { background: #a6efc1; color: #0d6b3a; }
.mk-head.c4 { background: #3a86ff; color: #fff; }
.mk-card { background: #fff; border-radius: .7cqw; padding: .9cqw; display: flex; align-items: center; gap: .8cqw; box-shadow: 0 .2cqw .6cqw rgba(15,34,64,.08); }
.mk-card i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: linear-gradient(135deg, #f3c4a5, #b07a5a); flex: none; }
.mk-card span { flex: 1; height: 2.2cqw; background: linear-gradient(#0f2240, #0f2240) 0 0 / 70% .55cqw no-repeat, linear-gradient(#cbd5e3, #cbd5e3) 0 1cqw / 50% .45cqw no-repeat, linear-gradient(#e2e8f2, #e2e8f2) 0 1.8cqw / 90% .35cqw no-repeat; }
.phone { position: absolute; right: 3%; top: 4%; width: 21%; aspect-ratio: 9 / 17.5; background: #0b0f18; border-radius: 3.6cqw; padding: 1cqw; box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 0 0 .3cqw #39445a; transform: rotate(4deg); }
.phone-screen { height: 100%; background: #fff; border-radius: 2.8cqw; overflow: hidden; padding: 1.4cqw 1.4cqw; color: #0f2240; font-size: 1.3cqw; }
.ph-top { text-align: center; font-weight: 700; font-size: 1.15cqw; padding: .6cqw 0 1.2cqw; background: #081a36; color: #fff; margin: -1.4cqw -1.4cqw 1.4cqw; padding-top: 2.4cqw; }
.ph-title { font-weight: 800; font-size: 1.75cqw; margin-bottom: 1.2cqw; }
.ph-row { display: flex; align-items: center; gap: 1cqw; padding: 1.1cqw .4cqw; font-weight: 700; border-bottom: .1cqw solid #eef2f8; }
.ph-row em { margin-left: auto; font-style: normal; font-size: 1.05cqw; color: #fff; background: #6c8cff; border-radius: 1cqw; padding: .2cqw .7cqw; }
.ph-ico { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1cqw; font-weight: 800; flex: none; }

/* --- Points forts --- */
.auth-features { list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 760px; }
.auth-features li { display: flex; flex-direction: column; gap: 4px; }
.auth-features .ico { width: 30px; height: 30px; color: #3d8bff; stroke-width: 1.8; margin-bottom: 8px; }
.auth-features b { font-size: 14.5px; letter-spacing: -.01em; }
.auth-features span { font-size: 12.5px; color: #a9b9d4; line-height: 1.45; }

/* --- Panneau formulaire --- */
.auth-panel {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding: 40px 32px; background: linear-gradient(160deg, #f4f8ff 0%, #e4edff 55%, #d6e4ff 100%);
}
.auth-panel::before {
  content: ''; position: absolute; top: -10%; bottom: -10%; left: -110px; width: 220px; border-radius: 50%;
  background: #eef4ff; box-shadow: -14px 0 40px rgba(64,140,255,.55), -3px 0 0 rgba(140,190,255,.7);
}
.auth-panel > * { position: relative; }
.auth-card { width: min(540px, 100%); background: #fff; border-radius: 30px; padding: 40px 46px 36px; box-shadow: 0 30px 80px rgba(23,64,140,.16), 0 2px 6px rgba(23,64,140,.06); }
.auth-card-logo { display: block; height: 92px; width: auto; margin: 0 auto 18px; }
.auth-step h2 { font-size: 28px; font-weight: 800; letter-spacing: -.03em; text-align: center; color: #0a1630; }
.auth-sub { margin: 8px 0 26px; color: #4a5b78; text-align: center; font-size: 15px; }
.auth-step form { display: flex; flex-direction: column; gap: 16px; }
.auth-step .field > label, .auth-step .field-label { font-size: 14px; font-weight: 700; color: #0a1630; }
.auth-step .input { height: 50px; border-radius: 12px; font-size: 15px; border-color: #d5deec; }
.auth-step .input-icon > .ico { width: 18px; height: 18px; color: #4a5b78; left: 14px; }
.auth-step .input-icon > .input { padding-left: 44px; }
.auth-step .check { font-size: 14px; color: #0a1630; font-weight: 500; }
.auth-step .check input { width: 18px; height: 18px; }
.btn-cta { height: 54px; border-radius: 12px; font-size: 17px; font-weight: 700; background: linear-gradient(180deg, #2a6bf2, #1b4fd6); box-shadow: 0 10px 24px rgba(31,83,214,.35); }
.btn-cta .ico { width: 20px; height: 20px; }
.input-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: #4a5b78; }
.input-toggle:hover { background: var(--surface-2); color: var(--text); }
.form-error { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--bad-50); color: var(--bad); font-size: 13px; font-weight: 600; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0 18px; color: #4a5b78; font-size: 13.5px; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #dfe6f1; }
.sso { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sso .btn { height: 50px; border-radius: 12px; font-size: 16px; font-weight: 700; border-color: #d5deec; }
.sso svg { width: 22px; height: 22px; }
.secure-note { position: relative; overflow: hidden; display: flex; gap: 14px; margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: #eef3fc; color: #34465f; font-size: 13px; line-height: 1.5; }
.secure-note > .ico { width: 26px; height: 26px; color: #2864ef; flex: none; margin-top: 2px; }
.secure-note b { display: block; color: #0a1630; font-size: 14.5px; margin-bottom: 2px; }
.secure-note div { position: relative; z-index: 1; padding-right: 40px; }
.maple { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 72px; height: 72px; fill: #c9d8f2; opacity: .8; }
.auth-back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 600; font-size: 13px; margin-bottom: 18px; }
.auth-back:hover { color: var(--text); }
.otp-ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); margin: 0 auto 16px; }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; max-width: 100%; }
.otp input { width: 100%; min-width: 0; padding: 0; height: 58px; text-align: center; font-size: 22px; font-weight: 800; border: 1px solid #d5deec; border-radius: 12px; background: #fff; outline: none; transition: .15s; }
.otp input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
.otp input.filled { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); background: var(--brand-50); }
.otp.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.auth-legal { text-align: center; font-size: 12px; color: #5b6e8f; max-width: 540px; }

/* --- Responsive --- */
@media (max-width: 1280px) {
  .auth-showcase { padding: 30px 120px 30px 36px; }
  .auth-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-card { padding: 34px 32px 30px; }
}
@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; }
  .auth-showcase { display: none; }
  .auth-panel::before { display: none; }
}
@media (max-width: 520px) {
  .auth-panel { padding: 22px 14px; }
  .auth-card { padding: 28px 20px 24px; border-radius: 22px; }
  .auth-card-logo { height: 72px; }
  .auth-step h2 { font-size: 23px; }
  .sso .btn { font-size: 14.5px; }
  .otp { gap: 6px; }
}