/* ══════════════════════════════════════════════════════
   MB TRANSFERTS — Composants (extrait de index.php)
   ══════════════════════════════════════════════════════ */

/* ── Service cards avec image au survol ── */
.service-card { position: relative; overflow: hidden; }
.service-car-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  opacity: 0; transform: scale(1.06);
  transition: opacity 0.5s ease, transform 0.5s ease; z-index: 0;
}
.service-car-img::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.58);
}
.service-card .service-icon,
.service-card h3,
.service-card p { position: relative; z-index: 1; transition: color 0.35s ease; }
.service-card p { color: #444444; }
.service-card:hover .service-car-img { opacity: 1; transform: scale(1); }
.service-card:hover h3 { color: #ffffff; }
.service-card:hover p  { color: rgba(255,255,255,0.82); }

/* ── Bouton WhatsApp ── */
.btn-whatsapp {
  border-color: #25D366 !important;
  background: #25D366 !important;
  color: #ffffff !important;
}
.btn-whatsapp:hover { background: #1ebe5d !important; border-color: #1ebe5d !important; }

/* ── Flotte ── */
.fleet-img { height: 200px; overflow: hidden; }
.fleet-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; transition: transform 0.5s ease;
}
.fleet-card:hover .fleet-img img { transform: scale(1.06); }

/* ── Badge HTTPS ── */
.security-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(29,158,117,0.12); border: 1px solid rgba(29,158,117,0.4);
  border-radius: 20px; padding: 4px 12px; font-size: 0.75rem; color: #1D9E75;
  margin-bottom: 1.5rem;
}

/* ── Lien d'évitement accessibilité ── */
.skip-link {
  position: absolute; top: -40px; left: 0;
  background: #C9A84C; color: #000;
  padding: 8px 16px; z-index: 10000; font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* ── Bouton langue ── */
.lang-toggle {
  background: transparent;
  border: 1px solid rgba(201,168,76,0.5);
  color: #C9A84C;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  letter-spacing: 0.05em;
  margin-right: 8px;
}
.lang-toggle:hover { background: #C9A84C; color: #000; }

/* ── Note transport médical ── */
.medical-note {
  font-size: 0.78em;
  opacity: 0.7;
  font-style: italic;
  display: block;
  margin-top: 4px;
}