/* ============================================================
   DRIVE AUTOPARTAGE v3 – CSS Principal
   ============================================================ */

:root {
  --orange:      #FF6B00;
  --orange-dark: #E05A00;
  --orange-light:rgba(255,107,0,.1);
  --dark-nav:    #111827;
  --radius:      16px;
  --radius-btn:  10px;
  --radius-inp:  10px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.08);
  --shadow-md:   0 4px 16px rgba(0,0,0,.12);
  --transition:  all .2s ease;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  background: #F8F9FA;
  color: #1F2937;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100vh;
}
main { flex: 1 }
a { color: var(--orange); text-decoration: none }
a:hover { color: var(--orange-dark) }

/* ── Utilities ──────────────────────────────────────────────── */
.text-orange    { color: var(--orange) !important }
.bg-orange      { background: var(--orange) !important }
.bg-orange-light{ background: var(--orange-light) !important }
.border-orange  { border-color: var(--orange) !important }
.text-white-75  { color: rgba(255,255,255,.75) }
.btn-outline-orange { border: 1.5px solid var(--orange); color: var(--orange); border-radius: var(--radius-btn) }
.btn-outline-orange:hover { background: var(--orange); color: #fff }

/* ── Navbar ─────────────────────────────────────────────────── */
.drive-navbar { background: var(--dark-nav); padding: 10px 0; box-shadow: 0 2px 12px rgba(0,0,0,.25); z-index: 1030 }
.drive-brand  { display: flex; align-items: center; gap: 8px; text-decoration: none }
.brand-icon   { background: var(--orange); width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; flex-shrink: 0 }
.brand-text   { font-size: 1.15rem; font-weight: 800; color: #fff; letter-spacing: -.5px; line-height: 1.1 }
.brand-sub    { display: block; font-size: .58rem; font-weight: 400; color: rgba(255,255,255,.5); letter-spacing: .5px; text-transform: uppercase }
.drive-navbar .nav-link { color: rgba(255,255,255,.8) !important; font-weight: 500; transition: var(--transition); padding: .4rem .8rem !important; border-radius: 8px }
.drive-navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.1) }
.drive-user-btn { display: flex; align-items: center; color: rgba(255,255,255,.85) !important; font-weight: 500 }
.drive-notif-btn { color: rgba(255,255,255,.8); padding: .35rem .55rem; border-radius: 8px; background: rgba(255,255,255,.08); transition: var(--transition); border: none }
.drive-notif-btn:hover { background: rgba(255,255,255,.15) }
.drive-avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.3) }
.drive-avatar-placeholder { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.15); display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.8) }
.drive-dropdown { border: 0; border-radius: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.15); min-width: 200px }
.drive-dropdown .dropdown-item { font-size: .88rem; padding: .55rem 1rem; transition: var(--transition) }
.drive-dropdown .dropdown-item:hover { background: var(--orange-light); color: var(--orange) }

/* ── Flash ───────────────────────────────────────────────────── */
.alert-float { position: fixed; top: 68px; right: 16px; z-index: 9999; max-width: 400px; border-radius: 12px; box-shadow: var(--shadow-md); animation: slideIn .3s ease; font-size: .88rem }
@keyframes slideIn { from { transform: translateX(120%); opacity: 0 } to { transform: translateX(0); opacity: 1 } }

/* ── Buttons ─────────────────────────────────────────────────── */
.drive-btn-primary { background: var(--orange); border: none; color: #fff; border-radius: var(--radius-btn); font-weight: 600; transition: var(--transition) }
.drive-btn-primary:hover { background: var(--orange-dark); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,107,0,.4) }
.drive-btn-primary:active { transform: translateY(0) }

/* ── Inputs ──────────────────────────────────────────────────── */
.drive-input { border-radius: var(--radius-inp) !important; border: 1.5px solid #E5E7EB !important; padding: .55rem .9rem !important; font-size: .9rem !important; transition: var(--transition) !important }
.drive-input:focus { border-color: var(--orange) !important; box-shadow: 0 0 0 3px rgba(255,107,0,.12) !important; outline: none !important }

/* ── Hero ────────────────────────────────────────────────────── */
.drive-hero { background: linear-gradient(135deg, #0F0F23 0%, #1A1A3E 40%, #2D1B6E 100%); padding: 80px 0 60px; position: relative; overflow: hidden }
.drive-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(255,107,0,.15) 0%, transparent 60%) }
.hero-title { font-size: clamp(2rem,5vw,3.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -1px }

/* ── Cards ───────────────────────────────────────────────────── */
.trip-card { border-radius: var(--radius) !important; transition: var(--transition) }
.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md) !important }
.booking-card { border-radius: var(--radius) !important }
.kpi-card { border-radius: var(--radius) !important; transition: var(--transition) }
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important }
.kpi-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem }

/* ── Route ───────────────────────────────────────────────────── */
.route-dot-start { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); flex-shrink: 0 }
.route-dot-end   { width: 10px; height: 10px; border-radius: 50%; background: #1F2937; flex-shrink: 0 }
.route-line-h    { flex: 1; height: 2px; background: linear-gradient(90deg, var(--orange), #1F2937); border-radius: 2px }
.route-line-v    { width: 2px; height: 28px; background: linear-gradient(180deg, var(--orange), #374151) }

/* ── Badges ──────────────────────────────────────────────────── */
.badge-standard { background: #6B7280; color: #fff; font-size: .72rem }
.badge-confort  { background: linear-gradient(135deg, #3B82F6, #1D4ED8); color: #fff; font-size: .72rem }
.badge-premium  { background: linear-gradient(135deg, #F59E0B, #D97706); color: #fff; font-size: .72rem }
.badge-clim     { background: #DBEAFE; color: #1D4ED8; font-size: .72rem }

/* ── Avatars ─────────────────────────────────────────────────── */
.driver-avatar-sm { width: 38px; height: 38px; min-width: 38px; border-radius: 50%; overflow: hidden }
.driver-avatar-lg { width: 64px; height: 64px; min-width: 64px; border-radius: 50%; overflow: hidden }
.doc-thumb { width: 100px; height: 70px; object-fit: cover; cursor: pointer }

/* ── Stars ───────────────────────────────────────────────────── */
.star-rating { display: flex; flex-direction: row-reverse; gap: 4px }
.star-rating input { display: none }
.star-rating label { cursor: pointer; font-size: 1.4rem; color: #D1D5DB; transition: var(--transition) }
.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label { color: #F59E0B }

/* ── Auth ────────────────────────────────────────────────────── */
.auth-section { min-height: calc(100vh - 140px) }
.role-btn { border-radius: 12px !important; padding: 12px !important }
.btn-check:checked + .role-btn { background: var(--orange) !important; border-color: var(--orange) !important; color: #fff !important }

/* ── Stepper ─────────────────────────────────────────────────── */
.stepper-nav a { transition: all .2s; border-right: 1px solid #dee2e6 }
.stepper-nav a:last-child { border-right: none }

/* ── How steps ───────────────────────────────────────────────── */
.how-step-number { width: 32px; height: 32px; border-radius: 50%; background: var(--orange); color: #fff; font-weight: 800; font-size: .9rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px }
.how-step-icon { font-size: 2.5rem; color: var(--orange) }

/* ── CTA ─────────────────────────────────────────────────────── */
.drive-cta-section { background: linear-gradient(135deg, var(--orange) 0%, #FF8C42 100%); padding: 80px 0 }

/* ── Footer ──────────────────────────────────────────────────── */
.drive-footer { background: var(--dark-nav); padding: 48px 0 24px; margin-top: auto }
.footer-link { color: rgba(255,255,255,.5); font-size: .875rem; display: block; margin-bottom: 6px; transition: var(--transition) }
.footer-link:hover { color: var(--orange) }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .drive-hero { padding: 50px 0 40px }
  .alert-float { right: 8px; left: 8px; max-width: none }
}

::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: #F1F5F9 }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--orange) }