/* e_Taxi Africa — site vitrine */
:root {
  --primary:#0b6e4f;
  --accent:#f4a261;
  --bg:#f8f5f0;
  --content-pad:24px;
  --nav-height:56px;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:system-ui,-apple-system,BlinkMacSystemFont,sans-serif; background:var(--bg); color:#1a1a2e; line-height:1.5; overflow-x:hidden; }
body.nav-no-scroll { overflow:hidden; }
img, video, svg { max-width:100%; height:auto; }

/* —— Navigation —— */
.nav { background:var(--primary); color:#fff; position:relative; z-index:100; }
.nav-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px var(--content-pad); min-height:var(--nav-height); }
.nav-brand { font-size:1rem; line-height:1.3; }
.nav a { color:#fff; text-decoration:none; opacity:.92; }
.nav a:hover, .nav a:focus-visible { opacity:1; }
.nav-toggle { display:flex; flex-direction:column; justify-content:center; gap:5px; width:44px; height:44px; padding:10px; border:0; border-radius:10px; background:rgba(255,255,255,.12); cursor:pointer; flex-shrink:0; }
.nav-toggle span { display:block; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.nav-open .nav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity:0; }
.nav-open .nav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav-links { display:none; flex-direction:column; gap:4px; padding:8px var(--content-pad) 16px; background:var(--primary); border-top:1px solid rgba(255,255,255,.12); }
.nav-open .nav-links { display:flex; }
.nav-links a { display:block; padding:12px 14px; border-radius:10px; font-size:15px; font-weight:500; }
.nav-links a:hover, .nav-links a:focus-visible { background:rgba(255,255,255,.12); opacity:1; }

@media (min-width:768px) {
  .nav { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; padding:0 var(--content-pad); }
  .nav-bar { padding:0; flex:1 1 auto; min-height:var(--nav-height); }
  .nav-toggle { display:none; }
  .nav-links { display:flex !important; flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 16px; padding:12px 0; border-top:0; flex:2 1 auto; justify-content:flex-end; }
  .nav-links a { padding:8px 0; border-radius:0; font-size:14px; font-weight:400; background:transparent !important; }
}

.hero { text-align:center; padding:48px var(--content-pad); background:linear-gradient(135deg,var(--primary),#084c37); color:#fff; }
.hero h1 { font-size:2rem; margin-bottom:12px; }
.hero p { opacity:.9; max-width:520px; margin:0 auto 24px; }
.hero-compact { padding:48px 24px; }
.hero-meta { margin-top:16px; font-size:14px; opacity:.85; }
.hero .btn { margin:6px 8px; }
.btn-lg { padding:16px 36px; font-size:1.05rem; }
.btn-outline-light { background:transparent; border:2px solid #fff; color:#fff; }
.btn-outline { background:#fff; color:var(--primary); border:2px solid var(--primary); margin-right:8px; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); max-width:960px; }
.steps { line-height:1.8; margin:12px 0 0; padding-left:20px; }
.install-box { margin-top:20px; }
.hint { font-size:14px; color:#555; margin-top:12px; }
.hint code { background:#f0f0f0; padding:2px 6px; border-radius:4px; font-size:13px; }
.btn { display:inline-block; background:var(--accent); color:#1a1a2e; padding:12px 28px; border-radius:10px; text-decoration:none; font-weight:600; min-height:44px; line-height:1.2; text-align:center; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:20px; padding:32px var(--content-pad); max-width:960px; margin:auto; width:100%; }
.card { background:#fff; padding:20px; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.card h3 { font-size:1.05rem; margin-bottom:8px; }
.content { max-width:720px; margin:32px auto; padding:0 var(--content-pad); width:100%; }
.content-wide { max-width:960px; }
.content h1 { color:var(--primary); margin-bottom:20px; font-size:clamp(1.35rem,4vw,1.85rem); }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.06); }
.table { width:100%; min-width:480px; border-collapse:collapse; background:#fff; border-radius:10px; overflow:hidden; }
.table th,.table td { padding:12px 16px; text-align:left; border-bottom:1px solid #eee; }
.table th { background:var(--primary); color:#fff; }
footer { text-align:center; padding:24px; opacity:.6; font-size:14px; }
.admin-pre { background:#1a1a2e; color:#a8e6cf; padding:12px; border-radius:8px; font-size:12px; overflow:auto; max-height:320px; }
.admin-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin:16px 0; }
.admin-toolbar button, .admin-login button { background:var(--primary); color:#fff; border:0; padding:10px 18px; border-radius:8px; cursor:pointer; font-size:14px; width:auto; }
.admin-toolbar button.secondary { background:var(--accent); color:#1a1a2e; }
.admin-login input { width:100%; max-width:400px; padding:10px; margin:6px 0; border-radius:8px; border:1px solid #ddd; }
.driver-row { background:#fff; border:1px solid #eee; border-radius:10px; padding:14px; margin:10px 0; }
.driver-row button { margin-top:8px; margin-right:8px; padding:8px 14px; border:0; border-radius:6px; cursor:pointer; color:#fff; }
.driver-row .approve { background:var(--primary); }
.driver-row .reject { background:#c0392b; }

/* —— Panneau admin —— */
.admin-page .stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; margin:20px 0; }
.admin-page .stat { background:#fff; padding:16px; border-radius:10px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.06); }
.admin-page .stat b { font-size:1.6rem; color:var(--primary); display:block; }
.admin-section-title { color:var(--primary); margin:24px 0 12px; font-size:1.15rem; }
.admin-driver-card { background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.08); margin-bottom:16px; overflow:hidden; }
.admin-driver-header { display:flex; justify-content:space-between; gap:12px; padding:16px 20px; background:#f8faf9; border-bottom:1px solid #eee; flex-wrap:wrap; }
.admin-driver-meta { text-align:right; }
.admin-driver-body { padding:16px 20px; font-size:14px; line-height:1.6; }
.admin-docs { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.doc-btn { background:#084c37; color:#fff; border:0; padding:8px 14px; border-radius:8px; cursor:pointer; font-size:13px; }
.doc-btn:hover { background:var(--primary); }
.admin-notes-label { display:block; margin:12px 0; font-size:13px; font-weight:600; }
.admin-notes-label textarea { width:100%; margin-top:6px; padding:10px; border:1px solid #ddd; border-radius:8px; font-family:inherit; font-size:14px; }
.admin-driver-actions { display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
.admin-driver-actions .approve { background:var(--primary); color:#fff; border:0; padding:10px 18px; border-radius:8px; cursor:pointer; }
.admin-driver-actions .reject { background:#c0392b; color:#fff; border:0; padding:10px 18px; border-radius:8px; cursor:pointer; }
.badge-ok { background:#d4edda; color:#155724; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; }
.badge-warn { background:#fff3cd; color:#856404; padding:4px 10px; border-radius:12px; font-size:12px; font-weight:600; }

/* —— Recrutement chauffeur —— */
.recruit-hero { background:linear-gradient(135deg,var(--primary),#084c37); color:#fff; padding:40px 24px 32px; margin:-40px -24px 32px; border-radius:0 0 20px 20px; }
.recruit-hero .badge { display:inline-block; background:rgba(255,255,255,.2); padding:6px 14px; border-radius:20px; font-size:13px; margin-bottom:12px; }
.recruit-hero h1 { color:#fff; margin-bottom:8px; font-size:1.75rem; }
.recruit-hero p { opacity:.92; max-width:560px; line-height:1.5; }
.recruit-benefits { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:24px 0 8px; }
.recruit-benefit { background:rgba(255,255,255,.12); padding:16px; border-radius:12px; }
.recruit-benefit strong { display:block; margin-bottom:4px; font-size:15px; }
.recruit-benefit span { font-size:13px; opacity:.88; line-height:1.4; }
.recruit-progress { height:6px; background:#e0e0e0; border-radius:3px; margin-bottom:20px; overflow:hidden; }
.recruit-progress-bar { height:100%; background:var(--primary); border-radius:3px; transition:width .35s ease; width:25%; }
.steps-wizard { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; }
.steps-wizard span { text-align:center; padding:12px 6px; border-radius:10px; background:#eee; font-size:12px; font-weight:600; line-height:1.3; position:relative; }
.steps-wizard span small { display:block; font-weight:400; opacity:.75; font-size:11px; margin-top:2px; }
.steps-wizard span.active { background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(11,110,79,.35); }
.steps-wizard span.done { background:#d4edda; color:#155724; }
.wizard-panel { display:none; animation:fadeIn .3s ease; }
.wizard-panel.active { display:block; }
@keyframes fadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.wizard-panel h3 { color:var(--primary); margin-bottom:4px; }
.wizard-panel .step-desc { color:#666; font-size:14px; margin-bottom:20px; }
.form-tabs { display:flex; gap:8px; margin-bottom:20px; }
.form-tab { flex:1; padding:10px; border:2px solid #ddd; background:#fff; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px; color:#555; }
.form-tab.active { border-color:var(--primary); color:var(--primary); background:#f0faf6; }
.form-grid { display:grid; gap:16px; }
.form-grid-2 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.form-field label { display:block; font-size:14px; font-weight:600; margin-bottom:6px; color:#333; }
.form-field input, .form-field select { width:100%; padding:12px 14px; border:1px solid #ddd; border-radius:10px; font-size:15px; transition:border-color .2s, box-shadow .2s; }
.form-field input:focus, .form-field select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(11,110,79,.15); }
.form-field input.invalid { border-color:#c0392b; }
.form-field .field-hint { font-size:12px; color:#888; margin-top:4px; }
.form-section-title { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--primary); font-weight:700; margin:8px 0 4px; padding-bottom:8px; border-bottom:2px solid #eee; grid-column:1/-1; }
.vehicle-types { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; grid-column:1/-1; }
.vehicle-type { border:2px solid #ddd; border-radius:12px; padding:14px 10px; text-align:center; cursor:pointer; transition:all .2s; background:#fff; }
.vehicle-type:hover { border-color:var(--primary); }
.vehicle-type.selected { border-color:var(--primary); background:#f0faf6; box-shadow:0 0 0 3px rgba(11,110,79,.12); }
.vehicle-type .icon { font-size:1.6rem; display:block; margin-bottom:4px; }
.vehicle-type .label { font-size:13px; font-weight:600; }
.file-drop { border:2px dashed #ccc; border-radius:12px; padding:24px 16px; text-align:center; cursor:pointer; background:#fafafa; transition:all .2s; }
.file-drop:hover, .file-drop.has-file { border-color:var(--primary); background:#f0faf6; }
.file-drop .file-name { font-size:13px; color:var(--primary); font-weight:600; margin-top:8px; word-break:break-all; }
.file-drop input { display:none; }
.form-actions { margin-top:24px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.form-actions .btn { border:0; cursor:pointer; font-size:15px; }
.form-actions .btn:disabled { opacity:.55; cursor:not-allowed; }
.form-actions .btn-primary { background:var(--primary); color:#fff; padding:12px 28px; border-radius:10px; font-weight:600; }
.form-actions .btn-secondary { background:#fff; color:var(--primary); border:2px solid var(--primary); padding:10px 24px; border-radius:10px; font-weight:600; }
.success-box { text-align:center; padding:16px 8px 8px; }
.success-icon { font-size:3.5rem; margin-bottom:12px; }
.success-box h3 { font-size:1.4rem; color:var(--primary); margin-bottom:12px; }
.success-checklist { text-align:left; max-width:400px; margin:20px auto; list-style:none; padding:0; }
.success-checklist li { padding:10px 0 10px 32px; position:relative; border-bottom:1px solid #eee; font-size:14px; }
.success-checklist li::before { content:'✓'; position:absolute; left:0; color:var(--primary); font-weight:bold; }
.form-status { margin:12px 0; padding:12px 16px; border-radius:10px; font-size:14px; display:none; }
.form-status.visible { display:block; }
.form-status .ok { color:#155724; }
.form-status.err { background:#fdecea; color:#c0392b; border:1px solid #f5c6cb; }
.form-status.ok-box { background:#d4edda; border:1px solid #c3e6cb; }
.application-ref-box { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; background:linear-gradient(135deg,#f0faf6,#e8f5e9); border:2px solid var(--primary); border-radius:12px; padding:20px; margin:20px 0; text-align:center; }
.application-ref-box .ref-label { display:block; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#666; margin-bottom:6px; }
.application-ref-box .ref-value { font-size:1.5rem; color:var(--primary); }
.application-ref-box .ref-value.code { font-family:ui-monospace,monospace; letter-spacing:.08em; }
.application-save-hint { background:#fff8e6; padding:12px; border-radius:8px; border:1px solid #f4a261; }
.application-result { max-width:520px; margin-top:24px; }
.status-badge { display:inline-block; padding:8px 20px; border-radius:20px; font-weight:700; font-size:14px; }
.status-badge.pending { background:#fff3cd; color:#856404; }
.status-badge.approved { background:#d4edda; color:#155724; }
.status-badge.rejected, .status-badge.suspended { background:#fdecea; color:#c0392b; }
.track-details { list-style:none; padding:0; margin:16px 0; }
.track-details li { display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid #eee; font-size:14px; flex-wrap:wrap; }
.track-details li span { color:#666; }
.track-details li strong { text-align:right; word-break:break-word; }

/* —— Responsive —— */
@media (max-width:767px) {
  :root { --content-pad:16px; }
  .hero { padding:36px var(--content-pad); }
  .hero h1 { font-size:clamp(1.4rem,6vw,1.85rem); }
  .hero p { font-size:15px; }
  .hero .btn { display:block; width:100%; max-width:320px; margin:8px auto !important; }
  .btn-lg { width:100%; max-width:360px; }
  .grid { padding:24px var(--content-pad); gap:16px; }
  .content { margin:24px auto; }
  .table th, .table td { padding:10px 12px; font-size:14px; }
  .form-actions { flex-direction:column; align-items:stretch; }
  .form-actions .btn, .form-actions .btn-primary, .form-actions .btn-secondary { width:100%; justify-content:center; }
  .form-tab { font-size:13px; padding:10px 8px; }
  .vehicle-types { grid-template-columns:repeat(2,1fr); }
  .application-ref-box { grid-template-columns:1fr; padding:16px; }
  .application-ref-box .ref-value { font-size:1.25rem; }
  .track-details li { flex-direction:column; align-items:flex-start; }
  .track-details li strong { text-align:left; }
  .admin-toolbar button { flex:1 1 calc(50% - 4px); min-width:140px; }
  .admin-driver-header { flex-direction:column; }
  .admin-driver-meta { text-align:left; }
  .admin-driver-actions .approve, .admin-driver-actions .reject, .doc-btn { width:100%; min-height:44px; }
  .admin-page .stat b { font-size:1.35rem; }
  .admin-pre { max-height:240px; font-size:11px; }
  .lang-switch { justify-content:center; padding:8px var(--content-pad); }
  footer { padding:20px var(--content-pad); font-size:13px; }
  .hint code { word-break:break-all; display:inline-block; max-width:100%; }
  .btn-row { display:flex; flex-direction:column; gap:10px; }
  .btn-row .btn { width:100%; margin:0 !important; }
}

@media (max-width:600px) {
  .recruit-hero { margin:-24px calc(var(--content-pad) * -1) 24px; padding:28px var(--content-pad) 20px; border-radius:0 0 16px 16px; }
  .recruit-hero h1 { font-size:1.45rem; }
  .recruit-benefits { grid-template-columns:1fr; }
  .steps-wizard { grid-template-columns:repeat(2,1fr); }
  .steps-wizard span { font-size:11px; padding:10px 4px; }
  .steps-wizard span small { display:none; }
  .form-grid-2 { grid-template-columns:1fr; }
  .file-drop { padding:20px 12px; }
  .success-icon { font-size:2.75rem; }
}

@media (max-width:380px) {
  .vehicle-types { grid-template-columns:1fr 1fr; }
  .steps-wizard { grid-template-columns:1fr 1fr; }
  .admin-toolbar button { flex:1 1 100%; }
}

@media (min-width:768px) {
  .hero h1 { font-size:2rem; }
  .hero { padding:60px var(--content-pad); }
  .grid { padding:40px var(--content-pad); }
  .card { padding:24px; }
}

@supports (padding: max(0px)) {
  .nav-bar, .nav-links, .hero, .grid, .content, .lang-switch, footer {
    padding-left:max(var(--content-pad), env(safe-area-inset-left));
    padding-right:max(var(--content-pad), env(safe-area-inset-right));
  }
  @media (min-width:768px) {
    .nav { padding-left:max(var(--content-pad), env(safe-area-inset-left)); padding-right:max(var(--content-pad), env(safe-area-inset-right)); }
  }
}

@media (max-width:767px) {
  .recruit-page .recruit-hero {
    margin-left:calc(var(--content-pad) * -1);
    margin-right:calc(var(--content-pad) * -1);
  }
}
[dir="rtl"] .nav-bar { flex-direction:row-reverse; }
[dir="rtl"] .nav-links { text-align:right; }
@media (min-width:768px) {
  [dir="rtl"] .nav { flex-direction:row-reverse; }
  [dir="rtl"] .nav-links { justify-content:flex-start; }
}
[dir="rtl"] ol { padding-left:0; padding-right:20px; }
.lang-switch { display:flex; align-items:center; gap:8px; padding:8px var(--content-pad); background:#084c37; justify-content:flex-end; }
.lang-label { color:rgba(255,255,255,.88); font-size:13px; font-weight:500; white-space:nowrap; }
.lang-select {
  appearance:none;
  -webkit-appearance:none;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230b6e4f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  color:#1a1a2e;
  border:0;
  border-radius:8px;
  padding:8px 36px 8px 12px;
  font-size:14px;
  font-weight:600;
  min-width:140px;
  max-width:100%;
  cursor:pointer;
  line-height:1.3;
}
.lang-select:focus { outline:2px solid var(--accent); outline-offset:2px; }
[dir="rtl"] .lang-switch { justify-content:flex-start; }
[dir="rtl"] .lang-select {
  padding:8px 12px 8px 36px;
  background-position:left 12px center;
}
@media (max-width:767px) {
  .lang-switch { justify-content:center; }
  .lang-label { font-size:12px; }
  .lang-select { flex:1 1 auto; min-width:120px; max-width:220px; }
}