/* Vercel V0 exact header styles adapted for PrestaShop classic */
/* Custom gradient class exactly like Vercel */
.custom-gradient {
  background: linear-gradient(to right, 
    oklch(0.13 0.06 285.79), 
    oklch(0.47 0.24 259.64), 
    oklch(0.49 0.25 261.8)
  );
}

/* Autorise les overlays à se positionner relativement au bloc principal */
.custom-gradient.relative { position: relative; }
.custom-gradient.overflow-hidden { overflow: hidden; }

/* Geist Sans fallback font stack */
:root {
  /* Couleurs marque (peuvent être ajustées si besoin) */
  --color-blue-600: #2563eb; /* Tailwind blue-600 par défaut */
  --color-blue-500: #3b82f6; /* Tailwind blue-500 par défaut */
}
body, #header, .header-nav, .custom-gradient, .v0-main-menu {
  font-family: 'Geist', 'Geist Sans', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}

#wrapper .breadcrumb{
  margin-bottom: 30px;
}

/* Reset default header styles */
#header { position: relative; background: transparent; overflow: hidden; }

/* Utility classes for Tailwind-like styling (scopées au header pour éviter les conflits) */
.custom-gradient .container { max-width: 1280px; margin: 0 auto; }
.custom-gradient .container-vercel { max-width: 1540px; margin: 0 auto; }
.custom-gradient .mx-auto { margin-left: auto; margin-right: auto; }
.custom-gradient .px-4 { padding-left: 1rem; padding-right: 1rem; }
.custom-gradient .py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.custom-gradient .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.custom-gradient .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.custom-gradient .text-xs { font-size: 0.75rem; line-height: 1rem; }
.custom-gradient .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.custom-gradient .text-2xl { font-size: 1.5rem; line-height: 2rem; }
.custom-gradient .text-white { color: rgb(255 255 255); }
.custom-gradient .text-blue-400 { color: rgb(96 165 250); }
.custom-gradient .text-gray-300 { color: rgb(209 213 219); }
.custom-gradient .text-gray-400 { color: rgb(156 163 175); }
.custom-gradient .text-black { color: rgb(0 0 0); }
.custom-gradient .text-left { text-align: left; }
.custom-gradient .font-bold { font-weight: 700; }
.custom-gradient .font-semibold { font-weight: 600; }
.custom-gradient .uppercase { text-transform: uppercase; }
.custom-gradient .tracking-wider { letter-spacing: 0.05em; }
.custom-gradient .flex { display: flex; }
.custom-gradient .gap-2 { gap: 0.5rem; }
.custom-gradient .gap-4 { gap: 1rem; }
.custom-gradient .gap-8 { gap: 2rem; }
.custom-gradient .justify-between { justify-content: space-between; }
.custom-gradient .items-center { align-items: center; }
.custom-gradient .items-end { align-items: flex-end; }
.custom-gradient .flex-col { flex-direction: column; }
.custom-gradient .mb-2 { margin-bottom: 0.5rem !important; }
.custom-gradient .mb-4 { margin-bottom: 1rem; }
.custom-gradient .relative { position: relative; }
.custom-gradient .absolute { position: absolute; }
.custom-gradient .left-0 { left: 0px; }
.custom-gradient .w-full { width: 100%; }
.custom-gradient .w-12 { width: 3rem; }
.custom-gradient .w-64 { width: 16rem; }
.custom-gradient .h-4 { height: 1rem; }
.custom-gradient .h-5 { height: 1.25rem; }
.custom-gradient .h-8 { height: 2rem; }
.custom-gradient .h-12 { height: 3rem; }
.custom-gradient .z-10 { z-index: 10; }
.custom-gradient .z-50 { z-index: 50; }
.custom-gradient .object-contain { object-fit: contain; }
.custom-gradient .cursor-pointer { cursor: pointer; }
.custom-gradient .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.custom-gradient .border-b { border-bottom-width: 1px; }
.custom-gradient .border-slate-700 { border-bottom: 1px solid rgb(51 65 85); }
.custom-gradient .border-b.border-slate-700 { border-bottom: 1px solid rgb(51 65 85); }
.custom-gradient .bg-white { background-color: rgb(255 255 255); }
.custom-gradient .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
/* Simplification compatible Tailwind-like sans variables internes non définies */
.custom-gradient .from-blue-600 { 
  --tw-gradient-from: var(--color-blue-600);
  /* même fallback que Tailwind pour générer un dégradé correct */
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(37 99 235 / 0));
}
.custom-gradient .to-blue-500 { --tw-gradient-to: var(--color-blue-500); }

/* Correction explicite du cas combiné utilisé par la card VIN */
.custom-gradient .bg-gradient-to-r.from-blue-600.to-blue-500 {
  background-image: linear-gradient(to right, var(--color-blue-600), var(--color-blue-500));
}
.custom-gradient .p-4 { padding: 1rem; }
.custom-gradient .p-2 { padding: 0.5rem !important; }
.custom-gradient .-m-2 { margin: -0.5rem; }
.custom-gradient .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.custom-gradient .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.custom-gradient .pr-10 { padding-right: 2.5rem; }
.custom-gradient .right-3 { right: 0.75rem; }
.custom-gradient .top-1-2 { top: 50%; }
.custom-gradient .transform { transform: var(--tw-transform); }
.custom-gradient .-translate-y-1-2 { --tw-translate-y: -50%; transform: translateY(-50%); }
.custom-gradient .top-50 { top: 50%; }
.custom-gradient .-translate-y-50 { transform: translateY(-50%); }
.custom-gradient .rounded-md { border-radius: 0.375rem; }
.custom-gradient .rounded-lg { border-radius: 0.5rem; }
.custom-gradient .shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); }
.custom-gradient .border { border-width: 1px; }
.custom-gradient .overflow-hidden { overflow: hidden; }
.custom-gradient .inline-block { display: inline-block; }
.custom-gradient .d-none { display: none; }

/* Styles pour les inputs et placeholders - scoping header uniquement */
.custom-gradient input[type="search"], .custom-gradient input[type="text"] {
  color: #000 !important;
  background: #fff !important;
  text-align: left !important;
  border: none !important;

  padding-left: 12px !important;
  
}

.custom-gradient input[type="search"]::placeholder, .custom-gradient input[type="text"]::placeholder {
  color: #8590a0 !important; /* à peine plus foncé que #9ca3af */
  opacity: 1 !important;
  font-size: 0.875rem !important;
}

/* Styles pour les boutons submit - sans background, centrés (scopés header) */
.custom-gradient button[type="submit"] {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* Barre nav supérieure - Structure Vercel exacte */
.header-nav { background: transparent; color: #fff; padding: 0; border: 0; }
.header-nav a, .header-nav .material-icons { color: #fff; }
.header-nav .user-info a { color: #fff; display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.header-nav .user-info a:hover { color: #bfdbfe; }
.header-nav .blockcart, .header-nav .blockcart .cart-preview { background: transparent !important; box-shadow: none; border: 0; }
.header-nav .blockcart .header a { display: flex; align-items: center; gap: 8px; transition: color 0.2s; }
.header-nav .blockcart .header a:hover { color: #bfdbfe; }
.header-banner { display: none; }
.v0-header-hero { background: transparent; color: #ffffff; padding: 24px 0 18px; position: relative; }
/* Largeur de container alignée sur V0 */
.container-xl { max-width: 1540px; }
/* Contact text color and sizing */
.v0-contact-link, .v0-contact-link a { color: #fff !important; }
.v0-contact-text { color: #fff; opacity: .95; font-weight: 600; font-size: 13px; }
.v0-contact-phone { color: #fff !important; font-size: 13px; }

/* Forcer "Connexion" et "Panier" en outline blanc, pas en plein */
#v0-topline-actions, #v0-topline-actions a, #v0-topline-actions span { color: #ffffff !important; }
#v0-topline-actions svg { stroke: #ffffff !important; fill: none !important; }
#v0-topline-actions a { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
#v0-topline-actions #_desktop_cart .header { display: inline-flex; align-items: center; gap: 8px; vertical-align: middle; }
#v0-topline-actions a:hover { color: #bfdbfe !important; }
#v0-topline-actions a:hover svg { stroke: #bfdbfe !important; }

/* Motorcycle animation - exact Vercel V0 styles */
.motorcycle-animation { animation: motorcycle-ride 8s ease-in-out infinite; }

.motorcycle-track {
  position: absolute;
  bottom: -21px;
  left: 0;
  width: 100%;
  height: 3rem;
  z-index: 50;
  pointer-events: none;
}

.motorcycle-track .v0-moto-click {
  pointer-events: auto;
}

@keyframes motorcycle-ride {
  0% { transform: translateX(calc(-100vw - 50px)); }
  55% { transform: translateX(40vw); }
  70% { transform: translateX(40vw); }
  100% { transform: translateX(calc(100vw + 50px)); }
}

@keyframes explode {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(3) rotate(180deg); opacity: .5; }
  100% { transform: scale(0) rotate(360deg); opacity: 0; }
}

@keyframes particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, 0)) scale(0); }
}

.exploding { animation: explode .8s ease-out forwards !important; }
.particle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, #ff6b35, #f7931e); border-radius: 50%; animation: particle 1.5s ease-out forwards; top: 50%; left: 50%; }
.explosion-flash { position: absolute; inset: 0; pointer-events: none; animation: flash .5s ease-out; z-index: 10; }
/* Overlay global: couvre tout le header, au-dessus du décor */
.explosion-flash-global { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.flash-active { animation: flash .5s ease-out; }

@keyframes flash { 0% { background: rgba(255,255,255,0); } 50% { background: rgba(255,107,53,0.3); } 100% { background: rgba(255,255,255,0); } }

.v0-header-hero__row { gap: 16px 0; }

.v0-header__branding { display: flex; align-items: center; gap: 16px; }
.v0-branding-text { line-height: 1.1; }
.v0-branding-line1 { font-size: 32px; font-weight: 800; color: #ffffff; letter-spacing: 0.2px; opacity: 1; }
.v0-branding-line2 { font-size: 28px; font-weight: 700; color: #60a5fa; }
.v0-branding-line3 { font-size: 11px; color: #d1d5db; text-transform: uppercase; letter-spacing: 0.08em; opacity: 1; }

.v0-header__right { display: flex; flex-direction: column; gap: 16px; }
.v0-header__topline { display: flex; gap: 32px; align-items: end; }

/* Search area */
.v0-header__search { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 16px; flex: 1; }
.v0-search-label { font-size: 12px; color: #d1d5db; margin: 0; }
#search_widget input::placeholder { color: #6b7280; }
#search_widget input { font-size: 14px; }
.v0-search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: #64748b; }
#search_widget form { position: relative; }
#search_widget input[type="search"], #search_widget input[type="text"] { padding-right: 44px; height: 48px; }
.v0-search-btn { position: absolute; right: 6px; top: 6px; height: 36px; width: 36px; border: 0; border-radius: 6px; background: #0a4fd7; color: #fff; display: grid; place-items: center; }

/* VIN search card */
.v0-header__vin-search { width: 256px; flex-shrink: 0; }
.v0-vin-card { background: rgba(255,255,255,.08); border-radius: 12px; padding: 16px; }
.v0-vin-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #ffffff; }
.v0-vin-form { display: block; }
.v0-vin-input-wrap { position: relative; }
.v0-vin-input { width: 100%; background: #ffffff; color: #111; border-radius: 8px; border: none; padding: 10px 40px 10px 12px; height: 48px; font-size: 14px; }
.v0-vin-input::placeholder { color: #6b7280; }
.v0-vin-submit { position: absolute; right: 4px; top: 4px; height: 32px; width: 32px; border: none; border-radius: 6px; background: #0a4fd7; color: #fff; display: grid; place-items: center; }

/* Menu line */
.v0-header__menuline { display: flex; align-items: center; gap: 12px; }
.v0-main-menu { background: rgba(0,0,0,.08); }
.v0-main-menu #_desktop_top_menu .top-menu > li > a.dropdown-item { color: #fff; }

/* Top menu visuals */
#_desktop_top_menu, .menu.js-top-menu { position: static; }
#_desktop_top_menu .top-menu > li > a.dropdown-item { color: #ffffff; text-transform: uppercase; font-weight: 700; font-size: 14px; padding: 12px 14px; letter-spacing: 0.02em; }
#_desktop_top_menu .top-menu > li > a.dropdown-item:hover { color: #bfdbfe; }
#_desktop_top_menu .top-menu > li.current > a { color: #bfdbfe; }

/* Responsive */
@media (max-width: 991.98px) {
  .v0-header__topline { flex-direction: column; gap: 16px; align-items: stretch; }
  .v0-header__vin-search { width: 100%; order: 2; }
  .v0-header__search { margin-bottom: 0; }
}