/* ============================================================
   LOC RÉACTION S.A.S — /auth-shared.css
   Structure commune à login.html et register.html
   ============================================================ */

.auth-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: clamp(90px, 12vh, 130px) clamp(16px, 3vw, 32px) clamp(40px, 6vh, 60px);
  background: var(--gray-xlight);
}
.auth-card {
  width: 100%; max-width: 460px; background: #fff; border-radius: var(--radius-xl);
  padding: clamp(28px, 3.4vw, 44px); box-shadow: 0 12px 48px rgba(10,26,56,.1);
}
.auth-card.wide { max-width: 560px; }
.auth-title { font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 800; color: var(--primary); margin-bottom: 6px; text-align: center; }
.auth-subtitle { font-size: clamp(.85rem, .95vw, .92rem); color: var(--gray); text-align: center; margin-bottom: 26px; }

.role-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--gray-xlight); border-radius: var(--radius-lg); padding: 5px; margin-bottom: 22px; }
.role-tabs.two-tabs { grid-template-columns: repeat(2, 1fr); }
.role-tab { padding: 11px 6px; border-radius: var(--radius); border: none; background: none; font-family: inherit; font-size: clamp(.76rem, .85vw, .85rem); font-weight: 600; color: var(--gray); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; transition: all .2s; }
.role-tab i { font-size: 1rem; }
.role-tab.active { background: #fff; color: var(--primary); box-shadow: 0 2px 10px rgba(10,26,56,.1); }

.auth-alert { display: none; padding: 12px 16px; border-radius: var(--radius); font-size: .85rem; margin-bottom: 16px; }
.auth-alert.show-error { display: flex; align-items: center; gap: 8px; background: rgba(192,57,43,.08); color: var(--red); }
.auth-alert.show-success { display: flex; align-items: center; gap: 8px; background: rgba(26,107,58,.08); color: var(--green); }

.auth-form-group { margin-bottom: 16px; }
.auth-form-group label { display: block; font-size: .82rem; font-weight: 600; color: var(--primary); margin-bottom: 6px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap i.left-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--gray); font-size: .9rem; }
.auth-input { width: 100%; padding: 12px 14px 12px 42px; border: 1.5px solid var(--gray-light); border-radius: var(--radius); font-size: .9rem; font-family: inherit; outline: none; }
.auth-input:focus { border-color: var(--primary); }
.auth-toggle-pw { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--gray); cursor: pointer; font-size: .9rem; }

.auth-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-forgot { display: block; text-align: right; font-size: .8rem; font-weight: 600; color: var(--primary); margin: -8px 0 18px; }

.auth-submit { width: 100%; padding: 13px; margin-top: 6px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--gray); font-size: .78rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--gray-light); }
.auth-switch { text-align: center; font-size: .85rem; color: var(--gray); }
.auth-switch a { color: var(--primary); font-weight: 700; }

.driver-fields { display: none; border-top: 1px dashed var(--gray-light); padding-top: 16px; margin-top: 6px; }
.driver-fields.show { display: block; }

.pw-strength { height: 4px; border-radius: 2px; background: var(--gray-light); margin-top: 6px; overflow: hidden; }
.pw-strength-bar { height: 100%; width: 0%; transition: width .3s, background .3s; }

@media (max-width: 480px) { .auth-row2 { grid-template-columns: 1fr; } }