/* ==========================================================
   Prestige Motors — style.css (global) — Neuromorphic theme
   Palette : bleu marine (navy) + jaune/or (gold) — logo
   ========================================================== */

:root{
  --nm-bg:        #0c1733;                 /* fond principal (navy) */
  --nm-bg-2:      #0a142c;                 /* fond sombre (sections) */
  --nm-bg-3:      #0a1228;
  --nm-surface:   #101f47;                 /* surface neumorphique */
  --nm-surface-2: #12224e;
  --nm-high:      rgba(125,155,235,0.13);  /* lumiere haut-gauche */
  --nm-high-soft: rgba(125,155,235,0.08);
  --nm-shadow:    rgba(2,6,20,0.55);       /* ombre bas-droite */
  --nm-radius:    1.25rem;
  --gold:         #ffc63c;
  --gold-2:       #f0a500;
  --gold-3:       #d99a00;
  --blue:         #3b82f6;
  --blue-deep:    #1d4ed8;
  --ink:          #e9eefb;
  --muted:        #93a3c4;
  --line:         rgba(125,155,235,0.12);
  --nm-raised:
    8px 8px 18px var(--nm-shadow),
    -8px -8px 18px var(--nm-high);
  --nm-raised-lg:
    14px 14px 30px var(--nm-shadow),
    -14px -14px 30px var(--nm-high);
  --nm-inset:
    inset 5px 5px 12px var(--nm-shadow),
    inset -5px -5px 12px var(--nm-high-soft);
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  background-color:var(--nm-bg);
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background:var(--nm-bg);
  color:var(--ink);
}

/* ---------- Anti-debordement horizontal (mobile) ---------- */
html{
  overflow-x:clip;
}
body{
  overflow-x:clip;
  overflow-wrap:break-word;
}
@supports not (overflow-x:clip){
  html, body{ overflow-x:hidden; }
}
img, video, svg, canvas{
  max-width:100%;
}
input, select, textarea{
  max-width:100%;
}

/* ---------- Fix horizontal scrolling on very small screens (< 450px) ---------- */
@media (max-width: 450px) {
  html, body {
    width: 100%;
    max-width: 100vw;
    overflow-x: clip !important;
  }

  /* Ensure all containers respect viewport width */
  .site-header,
  .site-header > div,
  .site-nav,
  main,
  section,
  footer,
  footer > div,
  .mx-auto,
  .max-w-\[1440px\],
  .max-w-\[1300px\],
  .max-w-3xl,
  .max-w-lg,
  .max-w-2xl,
  .max-w-xl,
  .container {
    max-width: 100vw !important;
    width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  /* Fix header/navbar */
  .site-header {
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
  }
  .site-header > div {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .site-nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    border-radius: 1rem !important;
  }

  /* Fix grid layouts that might overflow */
  .grid {
    grid-template-columns: 1fr !important;
  }
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .sm\:grid-cols-2,
  .sm\:grid-cols-3,
  .sm\:grid-cols-4,
  .md\:grid-cols-2,
  .md\:grid-cols-3,
  .md\:grid-cols-4,
  .md\:grid-cols-5,
  .md\:grid-cols-6,
  .lg\:grid-cols-2,
  .lg\:grid-cols-3,
  .lg\:grid-cols-4,
  .xl\:grid-cols-2,
  .xl\:grid-cols-3,
  .xl\:grid-cols-4 {
    grid-template-columns: 1fr !important;
  }

  /* Fix flex containers */
  .flex {
    flex-wrap: wrap !important;
  }
  .flex-nowrap {
    flex-wrap: wrap !important;
  }

  /* Fix specific elements that commonly cause overflow */
  .testimonials-viewport {
    margin: -1rem !important;
    padding: 1rem !important;
  }
  .testimonials-card {
    width: 85vw !important;
    min-width: 85vw !important;
  }

  /* Fix form elements */
  input, select, textarea, button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Fix video iframe embeds */
  iframe, video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Fix tables */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }

  /* Fix any absolute/fixed positioned elements */
  [style*="fixed"], [style*="absolute"] {
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* Reduce font sizes that might cause overflow */
  h1 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; line-height: 1.1 !important; }
  h2 { font-size: clamp(1.5rem, 7vw, 2rem) !important; line-height: 1.2 !important; }
  h3 { font-size: clamp(1.25rem, 6vw, 1.5rem) !important; line-height: 1.3 !important; }
  p, span, a, li, label { font-size: clamp(0.8rem, 4vw, 1rem) !important; }

  /* Fix padding on main containers */
  .px-6, .px-10, .px-16, .md\:px-10, .md\:px-16, .lg\:px-10, .lg\:px-16 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix footer */
  footer {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix hero section */
  #home {
    padding-top: 8rem !important;
    padding-bottom: 4rem !important;
  }

  /* Fix search/filter section */
  .section-fade, section[class*="py-28"] {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Ensure whitespace doesn't cause overflow */
  * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

::selection{ background:rgba(245,179,1,0.35); color:#fff; }

/* ---------- Textures & surfaces ---------- */
.noise::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

/* Surface neumorphique sur�lev�e */
.glass{
  background:linear-gradient(145deg, var(--nm-surface-2), var(--nm-surface));
  border:1px solid var(--line);
  box-shadow:var(--nm-raised);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.glass-strong{
  background:linear-gradient(145deg, #13234f, var(--nm-surface));
  border:1px solid var(--line);
  box-shadow:var(--nm-raised-lg);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(59,130,246,0.32), transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 15%, rgba(245,179,1,0.14), transparent 55%),
    linear-gradient(180deg, var(--nm-bg) 0%, var(--nm-bg-2) 55%, var(--nm-bg) 100%);
}

.section-fade{
  background:linear-gradient(180deg, var(--nm-bg) 0%, var(--nm-bg-2) 100%);
}

/* ---------- Champs de formulaire (encastres / inset) ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea{
  background:var(--nm-bg-2) !important;
  border-color:var(--line) !important;
  box-shadow:var(--nm-inset) !important;
  color:var(--ink) !important;
  transition:box-shadow .25s ease, border-color .25s ease;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder{ color:#5c6f9a !important; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus{
  box-shadow:var(--nm-inset), 0 0 0 3px rgba(245,179,1,0.22) !important;
  border-color:rgba(245,179,1,0.45) !important;
  outline:none;
}

/* ---------- Boutons ---------- */
.glow-btn{
  box-shadow:0 0 0 rgba(245,179,1,0);
  transition:all .35s cubic-bezier(.2,.8,.2,1);
}
.glow-btn:hover{
  box-shadow:0 0 30px rgba(245,179,1,0.45), 0 0 60px rgba(245,179,1,0.2);
  transform:translateY(-2px);
}
.glow-outline:hover{
  box-shadow:0 0 20px rgba(125,155,235,0.35);
  transform:translateY(-2px);
}

/* ---------- Cards ---------- */
.card-hover{
  transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease, border-color .4s ease;
}
.card-hover:hover{
  transform:translateY(-6px);
  box-shadow:16px 16px 32px var(--nm-shadow), -16px -16px 32px var(--nm-high);
  border-color:rgba(245,179,1,0.3);
}

/* ---------- Testimonials infinite scroll ---------- */
.testimonials-viewport{
  overflow:hidden;
  margin:-1.5rem;
  padding:1.5rem;
}
.testimonials-track{
  display:flex;
  gap:1.5rem;
  width:max-content;
  animation:testimonials-scroll 70s linear infinite;
}
.testimonials-viewport:hover .testimonials-track{
  animation-play-state:paused;
}
.testimonials-card{
  flex:0 0 auto;
  width:400px;
}
@media (max-width:640px){
  .testimonials-card{ width:82vw; }
}
@keyframes testimonials-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
@media (prefers-reduced-motion:reduce){
  .testimonials-track{ animation:none; }
}

/* ---------- Nav links ---------- */
.nav-link{ position:relative; }
.nav-link::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0%; height:1.5px;
  background:linear-gradient(90deg, var(--gold), var(--blue));
  transition:width .3s ease;
}
.nav-link:hover::after{ width:100%; }

/* ---------- Entrance animations ---------- */
.fade-up{
  opacity:0;
  transform:translateY(24px);
  animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp{ to{opacity:1; transform:translateY(0);} }
.delay-1{animation-delay:.1s;}
.delay-2{animation-delay:.25s;}
.delay-3{animation-delay:.4s;}
.delay-4{animation-delay:.55s;}

/* ---------- Misc ---------- */
.scrollbar-thin::-webkit-scrollbar{height:6px;width:6px;}
.scrollbar-thin::-webkit-scrollbar-thumb{background:rgba(125,155,235,0.25);border-radius:10px;}
select.glass-select option{background:var(--nm-bg-2); color:var(--ink);}
input[type="radio"]{ accent-color:var(--gold); }

/* ---------- Navbar fixe au scroll ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* Masque le nom du site sur les très petits écrans (< 450px) */
@media (max-width: 450px) {
  .site-name {
    display: none;
  }
}

.site-nav {
  background:linear-gradient(145deg, var(--nm-surface-2), var(--nm-surface));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: 1px solid var(--line);
  box-shadow:var(--nm-raised);
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}

.site-header.scrolled .site-nav {
  background:linear-gradient(145deg, #14254f, var(--nm-surface));
  border-color: rgba(125,155,235,0.18);
  box-shadow:10px 10px 26px var(--nm-shadow), -10px -10px 26px var(--nm-high);
}

/* ---------- Lien actif de la navigation ---------- */
.site-nav .nav-link.is-active {
  color: #ffffff;
  border-color: var(--gold);
}

.mobile-menu-nav a.is-active {
  color: #ffffff;
  background: rgba(59,130,246,0.14);
}

/* ---------- Bouton hamburger ---------- */
.mobile-menu-toggle {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu-toggle:active {
  transform: scale(0.92);
}

/* ---------- Panneau menu mobile ---------- */
.mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: max-height 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 0.3s ease,
              transform 0.3s ease,
              margin-top 0.3s ease;
}

.mobile-menu.open {
  max-height: 540px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 14px;
}

.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px;
  border-radius: 1rem;
  background:linear-gradient(145deg, var(--nm-surface-2), var(--nm-surface));
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border: 1px solid var(--line);
  box-shadow:var(--nm-raised-lg);
}

.mobile-menu-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 0.75rem;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.mobile-menu-nav a:hover {
  color: #ffffff;
  background: rgba(59,130,246,0.14);
}

.mobile-menu-nav a:active {
  transform: scale(0.98);
}

.mobile-menu-cta {
  margin-top: 8px;
  justify-content: center;
  color: var(--nm-bg);
  background:linear-gradient(90deg, var(--gold), var(--gold-2));
  border: 1px solid rgba(245,179,1,0.25);
}

.mobile-menu-cta:hover {
  background:linear-gradient(90deg, var(--gold), var(--gold-3));
}

/* Sur grand écran, le menu mobile n'apparaît jamais */
@media (min-width: 1024px) {
  .mobile-menu {
    display: none !important;
  }
}

/* ---------- View Transition (page d'accueil) ---------- */
@view-transition{ navigation: auto; }
::view-transition{ background-color:var(--nm-bg); }

::view-transition-old(main-nav),
::view-transition-new(main-nav),
::view-transition-old(site-footer),
::view-transition-new(site-footer){
  animation:none;
  mix-blend-mode:normal;
}

::view-transition-old(main-content){
  animation:0.25s ease-out both fade-out;
}
::view-transition-new(main-content){
  animation:0.25s ease-in 0.1s both fade-in;
}
@keyframes fade-out{ from{opacity:1;} to{opacity:0;} }
@keyframes fade-in{ from{opacity:0;} to{opacity:1;} }

::view-transition-old(root),
::view-transition-new(root){
  animation:none;
  mix-blend-mode:normal;
}

header{ view-transition-name: main-nav; }
footer{ view-transition-name: site-footer; }

/* ==========================================================
   Page : Vehicle Details
   ========================================================== */
body.page-vehicle-details input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--blue), var(--gold));
  outline:none;
  box-shadow:inset 3px 3px 6px var(--nm-shadow), inset -3px -3px 6px var(--nm-high-soft);
}
body.page-vehicle-details input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg, var(--gold), var(--gold-3));
  box-shadow:0 0 0 4px rgba(245,179,1,0.3), 0 4px 12px rgba(0,0,0,0.4);
  cursor:pointer;
}
body.page-vehicle-details .thumb-active{ position:relative; }
body.page-vehicle-details .gallery-thumb{
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  opacity:0.5;
}
body.page-vehicle-details .gallery-thumb.active,
body.page-vehicle-details .gallery-thumb:hover{
  opacity:1;
  box-shadow:0 0 0 2px rgba(245,179,1,0.6);
}

/* ==========================================================
   Page : Financement (calculatrice + FAQ)
   ========================================================== */
body.page-financing input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--gold) var(--range-progress, 50%), var(--nm-bg-3) var(--range-progress, 50%));
  box-shadow:inset 3px 3px 6px var(--nm-shadow), inset -3px -3px 6px var(--nm-high-soft);
  outline:none;
}
body.page-financing input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg, var(--gold), var(--gold-3));
  border:none;
  box-shadow:0 0 12px rgba(245,179,1,0.6), 0 2px 6px rgba(0,0,0,0.4);
  cursor:pointer;
  transition:transform .2s ease;
}
body.page-financing input[type="range"]::-webkit-slider-thumb:hover{
  transform:scale(1.15);
}
body.page-financing input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg, var(--gold), var(--gold-3));
  border:none;
  box-shadow:0 0 12px rgba(245,179,1,0.6), 0 2px 6px rgba(0,0,0,0.4);
  cursor:pointer;
}

body.page-financing .tier-card{
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
body.page-financing .tier-card.active{
  border-color:rgba(245,179,1,0.6);
  background:linear-gradient(145deg, rgba(245,179,1,0.14), rgba(59,130,246,0.06));
  box-shadow:var(--nm-raised), 0 0 30px rgba(245,179,1,0.15);
}
body.page-financing .term-btn{
  transition:all .25s ease;
}
body.page-financing .term-btn.active{
  background:linear-gradient(90deg, var(--gold), var(--gold-3));
  color:var(--nm-bg);
  font-weight:600;
  box-shadow:0 0 20px rgba(245,179,1,0.4);
}

body.page-financing .accordion-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .4s cubic-bezier(.2,.8,.2,1);
}
body.page-financing .accordion-item.open .accordion-content{
  max-height:300px;
}
body.page-financing .accordion-item.open .accordion-icon{
  transform:rotate(180deg);
}
body.page-financing .accordion-icon{
  transition:transform .3s ease;
}

/* ==========================================================
   Page : Checkout
   ========================================================== */
body.page-checkout .payment-option{
  transition:all .3s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
body.page-checkout .payment-option:hover{
  border-color:rgba(245,179,1,0.4);
  background:rgba(255,255,255,0.03);
}
body.page-checkout .payment-option.selected{
  border-color:rgba(245,179,1,0.6);
  background:linear-gradient(145deg, rgba(245,179,1,0.12), rgba(59,130,246,0.05));
  box-shadow:var(--nm-raised), 0 0 24px rgba(245,179,1,0.15);
}
body.page-checkout .payment-option .radio-dot{
  transition:all .25s ease;
}
body.page-checkout .payment-option.selected .radio-dot{
  border-color:var(--gold);
}
body.page-checkout .payment-option.selected .radio-dot::after{
  opacity:1;
  transform:scale(1);
}
body.page-checkout .radio-dot::after{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:9999px;
  background:var(--gold);
  opacity:0;
  transform:scale(0.4);
  transition:all .25s ease;
}

body.page-checkout .step-line{
  background:linear-gradient(90deg, var(--gold), rgba(245,179,1,0.15));
}
body.page-checkout .step-circle-active{
  background:linear-gradient(135deg, var(--gold), var(--gold-3));
  color:var(--nm-bg) !important;
  box-shadow:0 0 20px rgba(245,179,1,0.5);
}
body.page-checkout .step-circle-done{
  background:linear-gradient(135deg, var(--gold), var(--gold-3));
  color:var(--nm-bg) !important;
}
body.page-checkout .step-circle-pending{
  background:var(--nm-bg-2);
  border:1px solid var(--line);
}

body.page-checkout .lock-pulse{
  animation:lockPulse 2.4s ease-in-out infinite;
}
@keyframes lockPulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(245,179,1,0.35); }
  50%{ box-shadow:0 0 0 8px rgba(245,179,1,0); }
}

/* ==========================================================
   Page : Confirmation de commande
   ========================================================== */
body.page-order-confirmation .check-circle{
  animation: popIn .6s cubic-bezier(.2,.8,.2,1) .2s both, pulseGlow 2.4s ease-in-out 1s infinite;
}
@keyframes popIn{
  0%{ transform:scale(0); opacity:0; }
  60%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
@keyframes pulseGlow{
  0%,100%{ box-shadow:0 0 30px rgba(34,197,94,0.35), 0 0 60px rgba(34,197,94,0.15); }
  50%{ box-shadow:0 0 45px rgba(34,197,94,0.55), 0 0 90px rgba(34,197,94,0.25); }
}
body.page-order-confirmation .check-path{
  stroke-dasharray:48;
  stroke-dashoffset:48;
  animation: drawCheck .5s ease-out .55s forwards;
}
@keyframes drawCheck{ to{ stroke-dashoffset:0; } }

body.page-order-confirmation .timeline-line{
  background:linear-gradient(180deg, rgba(245,179,1,0.7), rgba(59,130,246,0.05));
}
body.page-order-confirmation .timeline-dot{
  box-shadow:0 0 0 4px var(--nm-bg), 0 0 16px rgba(245,179,1,0.5);
}
body.page-order-confirmation .timeline-dot-done{
  background:var(--gold);
}
body.page-order-confirmation .timeline-dot-pending{
  background:#374151;
  box-shadow:0 0 0 4px var(--nm-bg);
}

/* ==========================================================
   Sélecteur de langue
   ========================================================== */
.lang-switcher .lang-switcher-select{
  background:var(--nm-bg-2);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:var(--nm-inset);
}
.lang-switcher .lang-switcher-select:hover{
  border-color:rgba(245,179,1,0.4);
}
.lang-switcher .lang-switcher-select option{
  background:var(--nm-bg-2);
  color:var(--ink);
}