/* Hero landing page - identite visuelle alignee sur drivo-vtc.fr
   (fond degrade bleu->violet, gros titre avec mot en degrade, badge pilule,
   bouton CTA degrade, cartes flottantes). Fichier separe de style.css tant
   que la maquette n'est pas validee par le client. */

body.hero-body {
  padding: 0;
  align-items: stretch;
  background: var(--bg);
}

.hero-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(62,123,250,0.35), rgba(138,79,240,0.35));
  filter: blur(2px);
  z-index: 0;
}

.hero-blob.b1 { width: 620px; height: 620px; top: -260px; right: -220px; opacity: 0.55; }
.hero-blob.b2 { width: 360px; height: 360px; bottom: -140px; right: 60px; opacity: 0.35; }

.hero-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px 24px;
}

.hero-topbar .brand { margin-bottom: 0; }

.hero-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-pill:active { transform: scale(0.97); }

.btn-pill.primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 10px 24px rgba(90, 90, 240, 0.28);
}

.btn-pill.outline {
  background: #fff;
  color: var(--text);
  border-color: var(--line-strong);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 80px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 48px;
  align-items: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--gradient-soft);
  color: var(--blue-dark);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--violet);
}

.hero-title {
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}

.hero-title .grad {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 480px;
  margin: 0 0 28px;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 32px;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}

.hero-feature {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.hero-feature .hf-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--violet);
  display: inline-block;
}

.hero-feature strong {
  color: var(--text);
  font-size: 15px;
}

.hero-mockup-wrap {
  position: relative;
}

.hero-mockup {
  background: #0f1230;
  border-radius: 22px;
  padding: 10px;
  box-shadow: 0 30px 60px rgba(22, 26, 62, 0.25);
}

.hero-mockup-dots {
  display: flex;
  gap: 6px;
  padding: 4px 6px 10px;
}

.hero-mockup-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
}

.hero-mockup-inner {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
}

.hero-qr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}

.hero-qr-box {
  width: 76px;
  height: 76px;
  border-radius: 14px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 3px;
  padding: 8px;
  flex-shrink: 0;
}

.hero-qr-box span { background: var(--text); border-radius: 1px; }
.hero-qr-box span.off { background: transparent; }

.hero-qr-label { font-size: 13px; color: var(--muted); }
.hero-qr-label strong { display: block; color: var(--text); font-size: 15px; }

.hero-ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13.5px;
}

.hero-ticket-row span:first-child { color: var(--muted); }
.hero-ticket-row span:last-child { font-weight: 700; color: var(--text); }

.hero-ticket-btn {
  margin-top: 12px;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: var(--gradient);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
}

.hero-float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(22,26,62,0.14);
  padding: 12px 16px;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-float-card.f1 {
  top: -18px;
  right: 18px;
}

.hero-float-card.f2 {
  bottom: -18px;
  left: -18px;
}

.hero-float-card .fc-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--gradient-soft);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}

.hero-float-card strong { display: block; color: var(--text); font-size: 13px; }
.hero-float-card span { color: var(--muted); }

.steps-section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 24px 70px;
}

.steps-heading {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.steps-sub {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  margin: 0 auto 36px;
  max-width: 460px;
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.step-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 22px;
  box-shadow: var(--shadow-soft);
}

.step-num {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  margin-bottom: 16px;
}

.step-card h3 {
  font-size: 16px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.step-card p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 860px) {
  .hero-content { grid-template-columns: 1fr; padding-top: 10px; }
  .hero-mockup-wrap { max-width: 420px; margin: 0 auto; }
  .steps-grid { grid-template-columns: 1fr; }
  .hero-topbar { flex-direction: column; gap: 14px; }
}

/* ===== Bande d'en-tete compacte (pages formulaire) =====
   Meme fond degrade/blobs que la page d'accueil, mais en version courte,
   pour garder une identite coherente sans reprendre tout le hero. */

.form-band {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 46px;
  margin-bottom: -26px;
}

.form-band .hero-blob.b1 { width: 420px; height: 420px; top: -220px; right: -140px; opacity: 0.4; }
.form-band .hero-blob.b2 { width: 260px; height: 260px; bottom: -160px; left: -80px; opacity: 0.3; }

.form-band-inner {
  position: relative;
  z-index: 2;
  max-width: 480px;
  margin: 0 auto;
}

/* ===== Sections numerotees a l'interieur du formulaire ===== */

.form-section {
  margin: 26px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.form-section:first-of-type {
  margin-top: 4px;
  padding-top: 0;
  border-top: none;
}

.form-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.form-section-head .step-num {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  font-size: 13px;
  margin-bottom: 0;
  flex-shrink: 0;
}

.form-section-head h2 { margin: 0; }

.activation-box {
  background: var(--gradient-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 6px;
}

.activation-box h2 { margin-top: 0; }

.activation-box label { margin-top: 0; }

.btn-pill-block {
  width: 100%;
  border-radius: 999px !important;
  box-shadow: 0 10px 24px rgba(90, 90, 240, 0.22);
}

button.secondary.btn-pill-block {
  box-shadow: none;
}

/* ===== Espace chauffeur (dashboard, commandes, historique) ===== */

.online-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--success-bg);
  color: var(--success-text);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.online-pill .pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}

#orders-list .order-item {
  border-left: 4px solid var(--blue);
  border-radius: 14px;
}

#historique-list .order-item {
  border-left: 4px solid var(--success);
  border-radius: 14px;
}

.status {
  border-radius: 999px;
}

.empty {
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 40px 16px;
}

.empty .empty-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--gradient-soft);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 800;
  margin: 0 auto 14px;
}

.stat-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.stat-tile .stat-value { font-size: 22px; }

.screen-label {
  width: 100%;
  max-width: 480px;
  margin: 40px auto 10px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted-light);
}

.screen-label.wide { max-width: 760px; }

.screen-label:first-of-type { margin-top: 6px; }

/* ===== Animation "voiture en attente" (ecran commandes vide) ===== */

.car-wait-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 0 4px;
}

.car-wait-svg { display: block; }

.car-group {
  animation: carFloat 2.6s ease-in-out infinite;
}

.radar-ring {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2;
  transform-origin: 100px 68px;
  animation: radarPing 2.4s ease-out infinite;
}

.radar-ring.r2 { animation-delay: 1.2s; }

.roof-light { animation: roofBlink 1.1s ease-in-out infinite; }

.wait-text {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.wait-dots span {
  animation: dotBlink 1.4s infinite;
  opacity: 0.25;
}

.wait-dots span:nth-child(2) { animation-delay: 0.2s; }
.wait-dots span:nth-child(3) { animation-delay: 0.4s; }

.wait-sub {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 2px;
}

@keyframes carFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes radarPing {
  0% { transform: scale(0.6); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

@keyframes roofBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes dotBlink {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .car-group, .radar-ring, .roof-light, .wait-dots span { animation: none; }
}

/* ===== Bandeau "nouvelle version disponible" (js/update-checker.js) ===== */

.update-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  max-width: 448px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(22,26,62,0.22);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateY(140%);
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2);
  z-index: 9999;
}

.update-toast.show { transform: translateY(0); }

.update-toast .ut-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  animation: utSpin 2.2s ease-in-out infinite;
}

@keyframes utSpin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
}

.update-toast .ut-text { flex: 1; min-width: 0; }
.update-toast .ut-title { font-weight: 800; font-size: 14.5px; margin: 0 0 2px; }
.update-toast .ut-sub { font-size: 12.5px; color: var(--muted); margin: 0; }

.update-toast .ut-btn {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
  width: auto;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .update-toast .ut-icon { animation: none; }
}

/* ===== Nouvelle navigation basse (espace chauffeur) ===== */

body.has-bottom-nav { padding-bottom: 88px; }

.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 74px;
  background: var(--gradient);
  border-top: none;
  box-shadow: 0 -10px 26px rgba(90,60,220,0.28);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding-top: 8px;
  z-index: 40;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: rgba(255,255,255,0.68);
  font-size: 10.5px;
  font-weight: 700;
  background: none;
  border: none;
  cursor: pointer;
  width: auto;
  margin: 0;
  padding: 4px 6px;
}

.bottom-nav-item svg { width: 22px; height: 22px; transition: transform 0.15s ease; }
.bottom-nav-item { transition: color 0.15s ease; }
.bottom-nav-item.active { color: #ffffff; }
.bottom-nav-item.active svg { animation: navIconPop 0.35s ease; }

@keyframes navIconPop {
  0% { transform: scale(0.7); }
  55% { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .bottom-nav-item.active svg { animation: none; }
}

/* Onglet central "DRIVO" : meme style plat que les autres icones (plus de
   bulle violette surelevee), juste le libelle qui change. */
.bottom-nav-item.center { position: relative; }
.bottom-nav-item.center .nav-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  color: inherit;
}
.bottom-nav-item.center .nav-fab svg { width: 22px; height: 22px; }

/* ===== Interrupteur "En ligne" ===== */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gradient-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-bottom: 18px;
}

.toggle-row-label { display: flex; flex-direction: column; }
.toggle-row-label strong { font-size: 15px; color: var(--text); }
.toggle-row-label span { font-size: 12px; color: var(--muted); }

.switch {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--line-strong);
  position: relative;
  flex-shrink: 0;
}

.switch.on { background: var(--gradient); }

.switch .knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: left 0.2s ease;
}

.switch.on .knob { left: 23px; }

/* ===== Carte fidelisation (QR + message de recommandation) ===== */

.loyalty-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 18px;
}

/* QR agrandi (132px) : mieux mis en valeur en colonne, centre au-dessus du
   texte plutot qu'ecrase a cote sur mobile. */
.loyalty-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.loyalty-text p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 6px 0 0;
}

.loyalty-text strong { font-size: 14px; color: var(--text); }

.loyalty-qr-box {
  width: 132px;
  height: 132px;
  border-radius: 16px;
  background: var(--surface-2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 4px;
  padding: 11px;
  flex-shrink: 0;
  /* Affiche visuellement le QR avant le texte (au-dessus), meme si le texte
     vient en premier dans le HTML. */
  order: -1;
}

.loyalty-qr-box span { background: var(--text); border-radius: 1px; }
.loyalty-qr-box span.off { background: transparent; }

/* Quand un vrai QR code (image) est present, il remplace la grille
   decorative : il doit occuper toute la case, pas seulement 1/25e. */
.loyalty-qr-box img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}

.loyalty-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}

.loyalty-id {
  font-family: 'Bricolage Grotesque', monospace;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.loyalty-share {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: var(--gradient-soft);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.loyalty-share:active { transform: scale(0.94); }

/* ===== Profil chauffeur (photo vehicule + photo chauffeur) ===== */

.profile-photos-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 18px;
}

.profile-photo-vehicule {
  flex: 1;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-2);
}

.profile-photo-vehicule img { width: 100%; height: 100%; object-fit: cover; display: block; }

.profile-photo-chauffeur {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  flex-shrink: 0;
  border: 3px solid #fff;
  box-shadow: var(--shadow-soft);
}

.profile-photo-chauffeur img { width: 100%; height: 100%; object-fit: cover; display: block; }

.photo-upload-row {
  display: flex;
  gap: 10px;
  margin: 10px 0 6px;
}

.photo-upload-btn {
  flex: 1;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
}

/* ===== Portefeuille client (liste clients reguliers) ===== */

.client-item {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.client-item:hover { border-color: var(--blue); box-shadow: var(--shadow-soft); }

.client-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gradient-soft);
  color: var(--violet);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex-shrink: 0;
}

.client-info { flex: 1; min-width: 0; }
.client-info strong { display: block; font-size: 14.5px; color: var(--text); }
.client-info span { font-size: 12.5px; color: var(--muted); }

.client-count {
  background: var(--gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 11px;
  border-radius: 999px;
  flex-shrink: 0;
}

.client-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.client-tier-badge {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.client-tier-badge.tier-nouveau { background: var(--surface-2); color: var(--muted); }
.client-tier-badge.tier-habitue { background: rgba(62,123,250,0.14); color: var(--blue-dark); }
.client-tier-badge.tier-fidele { background: rgba(138,79,240,0.14); color: var(--violet); }
.client-tier-badge.tier-vip { background: linear-gradient(135deg, #f7b733, #dc9309); color: #fff; }

/* ===== Fiche detail client (mini-CRM / programme de fidelite) ===== */
.client-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(22,26,62,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.25s ease;
  padding: 0;
}
.client-detail-overlay.show { opacity: 1; }
.client-detail-card {
  background: #fff;
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding: 26px 22px 30px;
  position: relative;
  transform: translateY(24px);
  transition: transform 0.25s ease;
}
.client-detail-overlay.show .client-detail-card { transform: translateY(0); }
@media (min-width: 540px) {
  .client-detail-overlay { align-items: center; }
  .client-detail-card { border-radius: 22px; }
}
.client-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font-size: 19px;
  line-height: 1;
}
.client-detail-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 30px;
}
.client-detail-head strong { display: block; font-size: 17px; margin-bottom: 4px; }
.client-avatar.big { width: 54px; height: 54px; font-size: 18px; }
.client-detail-courses { display: flex; flex-direction: column; gap: 8px; }
.client-detail-course {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 12px;
  font-size: 12.5px;
}
.cdc-date { color: var(--muted); flex-shrink: 0; width: 64px; }
.cdc-addr { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdc-prix { font-weight: 800; color: var(--text); flex-shrink: 0; }

/* ===== Onglets espace chauffeur (nav du bas fonctionnelle) ===== */

.tab-panel { display: none; }
.tab-panel.active { display: block; }

.tab-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

.count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  animation: badgePulse 1.6s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .count-badge { animation: none; }
}

/* ===== Animation voiture vue du dessus (etat "en attente de commande") =====
   Remplace l'ancienne animation vue de cote : carrosserie vue d'en haut,
   vitres avant/arriere, retroviseurs, 4 roues visibles, avec un effet radar
   qui pulse depuis la voiture (comme si elle "ecoutait" les commandes) et
   une legere respiration/flottement pour un rendu plus vivant. */

.car-top-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0 4px;
}

.car-top-svg { overflow: visible; }

.radar-ring-top {
  fill: none;
  stroke: #3e7bfa;
  stroke-width: 2;
  opacity: 0;
  transform-origin: 100px 96px;
  animation: radarPulseTop 2.8s ease-out infinite;
}
.radar-ring-top.r2 { animation-delay: 0.9s; }
.radar-ring-top.r3 { animation-delay: 1.8s; }

@keyframes radarPulseTop {
  0% { transform: scale(0.3); opacity: 0.5; }
  75% { opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

.car-top-group {
  transform-origin: 100px 96px;
  animation: carTopIdle 2.6s ease-in-out infinite;
}

@keyframes carTopIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

.roof-light-top {
  animation: roofBlinkTop 1s steps(2, start) infinite;
}

@keyframes roofBlinkTop {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .radar-ring-top, .car-top-group, .roof-light-top { animation: none; }
}

/* ===== Onglet Parametre : photos de profil bien visibles ===== */

.param-photo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.param-photo-chauffeur {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--surface-2);
  border: 4px solid #fff;
  box-shadow: var(--shadow);
}

.param-photo-chauffeur img { width: 100%; height: 100%; object-fit: cover; display: block; }
.param-photo-chauffeur img.placeholder { object-fit: contain; padding: 22px; opacity: 0.3; }

.param-photo-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 20px 0 10px;
}

.param-photo-vehicule {
  width: 100%;
  height: 150px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
}

.param-photo-vehicule img { width: 100%; height: 100%; object-fit: cover; display: block; }
.param-photo-vehicule img.placeholder { object-fit: contain; padding: 30px; opacity: 0.25; }

/* ===== Espace comptabilite : filtre par periode + mini tableau de bord ===== */

.period-tabs {
  display: flex;
  background: var(--surface-2);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
  margin: 12px 0 18px;
}

.period-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  padding: 9px 6px;
  border-radius: 999px;
  cursor: pointer;
  width: auto;
  margin: 0;
  transition: background 0.15s ease, color 0.15s ease;
}

.period-tab.active {
  background: #fff;
  color: var(--blue-dark);
  box-shadow: var(--shadow-soft);
}

.mini-dashboard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 16px 26px;
  margin-bottom: 18px;
}

.mini-dashboard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 18px;
}

.mini-dashboard-head strong {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
}

.mini-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}

.mini-chart-bar {
  flex: 1;
  background: var(--gradient);
  border-radius: 6px 6px 3px 3px;
  position: relative;
  min-height: 6px;
}

.mini-chart-bar span {
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 10px;
  color: var(--muted-light);
  font-weight: 600;
}

/* ============================================================
   Bandeau "Message de l'administrateur" cote chauffeur : meme logique
   visuelle que le bandeau de mise a jour (js/update-checker.js), mais
   positionne en haut de l'ecran pour ne jamais se superposer a lui, et une
   icone enveloppe plutot qu'une icone de rafraichissement.
   ============================================================ */
.admin-msg-toast {
  position: fixed;
  left: 16px;
  right: 16px;
  top: 16px;
  max-width: 448px;
  margin: 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(22,26,62,0.22);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateY(-160%);
  transition: transform 0.35s cubic-bezier(.2,.9,.3,1.2);
  z-index: 9999;
}

.admin-msg-toast.show { transform: translateY(0); }

.admin-msg-toast .amt-icon {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.admin-msg-toast .amt-text { flex: 1; min-width: 0; }
.admin-msg-toast .amt-title { font-weight: 800; font-size: 14.5px; margin: 0 0 2px; color: var(--text); }
.admin-msg-toast .amt-sub { font-size: 12.5px; color: var(--muted); margin: 0; line-height: 1.4; }

.admin-msg-toast .amt-btn {
  flex-shrink: 0;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--gradient);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border: none;
  cursor: pointer;
}

@media (max-width: 480px) {
  .admin-msg-toast { flex-wrap: wrap; }
  .admin-msg-toast .amt-btn { width: 100%; text-align: center; }
}