/* AutoDeal — page d’accueil centrée sur l’achat automobile, 18 octobre 2026 */
/* Conserves both day/night modes, with a compact vehicle-first hero and search. */
.hero{min-height:0!important;padding-bottom:54px!important}
.hero .hero-inner{max-width:1500px!important;padding-top:73px!important;padding-bottom:50px!important}
.hero .hero-copy{width:min(1160px,100%)!important;max-width:1160px!important;margin:0 auto!important;text-align:center!important;position:relative;z-index:2}
.hero .hero-copy .eyebrow{
  display:flex!important;align-items:center;justify-content:center;gap:11px;
  color:#f0067f!important;letter-spacing:.18em!important;font-size:12px!important;
  font-weight:800!important;text-transform:uppercase!important;margin-bottom:22px!important
}
.hero .hero-copy .eyebrow span{color:#f0067f;opacity:.6}
.hero .hero-copy h1{
  color:#161b2b!important;font-size:clamp(36px,4.35vw,70px)!important;
  line-height:1.055!important;letter-spacing:-.047em!important;
  font-weight:900!important;max-width:1160px!important;
  margin:0 auto!important;text-wrap:balance!important;text-transform:uppercase!important
}
.hero .hero-copy h1 span{color:#f0077d!important;display:inline!important}
.hero .hero-copy>p{
  color:#566173!important;font-size:clamp(14px,1.25vw,18px)!important;
  line-height:1.65!important;max-width:760px!important;
  margin:24px auto 0!important;text-wrap:balance!important
}
.hero .hero-actions{display:none!important}
.hero .hero-search-wrap{width:min(1310px,100%)!important;max-width:1310px!important;margin:32px auto 0!important;position:relative;z-index:3}
.hero .hero-search-tabs{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:max-content!important;max-width:100%!important;margin:0 auto 16px!important;
  padding:5px!important;border-radius:30px!important;border:1px solid #e0e3e9!important;
  background:rgba(255,255,255,.93)!important;box-shadow:0 7px 25px rgba(10,25,40,.06)!important
}
.hero .hero-search-tab{padding:12px 28px!important;border-radius:24px!important;font-size:14px!important;font-weight:750!important;white-space:nowrap!important;min-height:47px!important}
.hero .hero-search-tab.active{background:#f40d7e!important;color:#fff!important;box-shadow:0 7px 16px #f40d7e22!important}
.hero .air-search.hidden{display:none!important}
.hero #carsSearch.ad-car-search{
  display:grid!important;
  grid-template-columns:minmax(132px,1.1fr) minmax(132px,1.05fr) minmax(130px,1fr) minmax(155px,1.1fr) minmax(177px,.95fr)!important;
  align-items:stretch!important;gap:0!important;
  width:100%!important;max-width:100%!important;min-height:88px!important;
  padding:8px!important;
  background:#fff!important;border:1.5px solid #f30e80!important;border-radius:28px!important;
  box-shadow:0 13px 35px rgba(33,38,49,.10)!important
}
.hero #carsSearch.ad-car-search .air-sep{display:none!important}
.hero #carsSearch.ad-car-search .air-field{
  display:flex!important;flex-direction:column!important;justify-content:center!important;
  min-width:0!important;padding:10px 14px!important;gap:5px!important;
  border-right:1px solid #e2e3e9!important
}
.hero #carsSearch.ad-car-search .air-field:nth-of-type(4){border-right:0!important}
.hero #carsSearch.ad-car-search .air-field span{
  color:#243043!important;font-size:11px!important;letter-spacing:.07em!important;
  text-transform:uppercase!important;font-weight:800!important
}
.hero #carsSearch.ad-car-search select,
.hero #carsSearch.ad-car-search input{
  color:#293649!important;background:transparent!important;border:0!important;
  outline:0!important;box-shadow:none!important;padding:4px 3px!important;
  width:100%!important;max-width:100%!important;height:29px!important;
  font-size:14px!important;font-weight:500!important;min-height:29px!important
}
.hero #carsSearch.ad-car-search input::placeholder{color:#667286!important;opacity:1!important}
.hero #carsSearch.ad-car-search .air-field:focus-within{background:#f8f8fb!important;border-radius:12px!important}
.hero #carsSearch.ad-car-search .air-search-btn{
  border-radius:21px!important;min-width:0!important;width:100%!important;
  height:100%!important;min-height:65px!important;padding:12px 14px!important;
  font-size:15px!important;font-weight:800!important;white-space:nowrap!important;
  background:linear-gradient(115deg,#f3057b,#fc308f)!important;
  box-shadow:none!important
}
.hero-bg{background-position:center right!important}
html[data-theme="light"] .hero{background:#f6f7fa!important}
html[data-theme="light"] .hero-bg{
  background-image:linear-gradient(90deg,rgba(251,252,254,.96) 0%,rgba(251,252,254,.92) 43%,rgba(251,252,254,.70) 72%,rgba(251,252,254,.38) 100%),url('/assets/hero.webp')!important;
  filter:none!important;opacity:1!important;background-size:cover!important;
}
html[data-theme="dark"] .hero .hero-copy h1{color:#f7f8fa!important}
html[data-theme="dark"] .hero .hero-copy>p{color:#b7bece!important}
html[data-theme="dark"] .hero #carsSearch.ad-car-search{background:#171a24!important}
html[data-theme="dark"] .hero #carsSearch.ad-car-search .air-field{border-right-color:#373c4b!important}
html[data-theme="dark"] .hero #carsSearch.ad-car-search .air-field span{color:#e0e4eb!important}
html[data-theme="dark"] .hero #carsSearch.ad-car-search select,
html[data-theme="dark"] .hero #carsSearch.ad-car-search input{color:#e8ebf0!important;background:transparent!important}
html[data-theme="dark"] .hero #carsSearch.ad-car-search input::placeholder{color:#a4a9b5!important}
html[data-theme="dark"] .hero #carsSearch.ad-car-search .air-field:focus-within{background:#212533!important}
@media (max-width:1050px){
 .hero .hero-inner{padding-top:46px!important}
 .hero #carsSearch.ad-car-search{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  border-radius:22px!important;gap:4px 0!important
 }
 .hero #carsSearch.ad-car-search .air-field{border-bottom:1px solid #e2e3e9!important}
 .hero #carsSearch.ad-car-search .air-field:nth-of-type(even){border-right:0!important}
 .hero #carsSearch.ad-car-search .air-field:nth-of-type(3),
 .hero #carsSearch.ad-car-search .air-field:nth-of-type(4){border-bottom:0!important}
 .hero #carsSearch.ad-car-search .air-search-btn{grid-column:1/-1!important;min-height:53px!important}
}
@media (max-width:650px){
 .hero{padding-bottom:20px!important}
 .hero .hero-inner{padding:24px 16px 30px!important}
 .hero .hero-copy .eyebrow{font-size:9px!important;letter-spacing:.075em!important;gap:5px!important;white-space:normal!important;margin-bottom:17px!important}
 .hero .hero-copy h1{font-size:clamp(30px,8.3vw,46px)!important;line-height:1.06!important;letter-spacing:-.042em!important}
 .hero .hero-copy>p{font-size:13px!important;line-height:1.55!important;margin:16px auto 0!important}
 .hero .hero-search-wrap{margin:22px auto 0!important}
 .hero .hero-search-tabs{margin-bottom:12px!important;padding:4px!important}
 .hero .hero-search-tab{font-size:12px!important;min-height:42px!important;padding:10px 17px!important}
 .hero #carsSearch.ad-car-search{padding:6px!important;border-radius:19px!important;gap:0!important}
 .hero #carsSearch.ad-car-search .air-field{padding:8px 12px!important;min-height:63px!important}
 .hero #carsSearch.ad-car-search .air-field span{font-size:9px!important;letter-spacing:.02em!important}
 .hero #carsSearch.ad-car-search select,
 .hero #carsSearch.ad-car-search input{font-size:12px!important;height:25px!important;min-height:25px!important}
 .hero #carsSearch.ad-car-search .air-search-btn{min-height:48px!important;font-size:14px!important;border-radius:14px!important;margin-top:5px!important}
}


/* Responsive-v2: only ONE search panel, even with legacy !important declarations. */
html body .hero .hero-search-wrap #partsSearch.hidden,
html body .hero .hero-search-wrap #partsSearch[hidden],
html body .hero .hero-search-wrap #carsSearch.ad-car-search.hidden,
html body .hero .hero-search-wrap #carsSearch.ad-car-search[hidden]{
  display:none!important;visibility:hidden!important;
  height:0!important;min-height:0!important;max-height:0!important;
  margin:0!important;padding:0!important;border:0!important;overflow:hidden!important;
}
html body .hero .hero-search-wrap .hero-search-tabs{
  width:min(100%,440px)!important;
  max-width:100%!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  justify-content:stretch!important;
  gap:5px!important;
  padding:5px!important;
  overflow:visible!important;
  box-sizing:border-box!important
}
html body .hero .hero-search-wrap .hero-search-tabs .hero-search-tab{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;max-width:100%!important;
  padding:12px 10px!important;
  display:flex!important;
  align-items:center!important;justify-content:center!important;
  overflow:visible!important;text-overflow:clip!important;
  white-space:normal!important;word-break:normal!important;
  font-size:14px!important;line-height:1.2!important;min-height:45px!important;
}
html body .hero .hero-search-wrap #carsSearch.ad-car-search:not([hidden]):not(.hidden){
  display:grid!important;visibility:visible!important;
}
html body .hero .hero-search-wrap #partsSearch:not([hidden]):not(.hidden){
  display:grid!important;visibility:visible!important;
}
@media(max-width:650px){
  html body .hero .hero-search-wrap .hero-search-tabs{
    width:min(100%,350px)!important;
    padding:4px!important;gap:4px!important;margin:0 auto 12px!important;
  }
  html body .hero .hero-search-wrap .hero-search-tabs .hero-search-tab{
    padding:9px 6px!important;min-height:42px!important;font-size:13px!important;
  }
  .hero .hero-copy h1{font-size:clamp(28px,7.4vw,40px)!important;overflow-wrap:normal!important;}
  .hero .hero-copy .eyebrow{font-size:9px!important;letter-spacing:.05em!important;}
  html body .hero .hero-search-wrap{min-width:0!important;width:100%!important;max-width:100%!important;}
  html body .hero #carsSearch.ad-car-search{box-sizing:border-box!important;max-width:100%!important;width:100%!important;overflow:hidden!important;}
  html body .hero #carsSearch.ad-car-search .air-field{min-width:0!important;overflow:hidden!important;}
  html body .hero #carsSearch.ad-car-search select,
  html body .hero #carsSearch.ad-car-search input{min-width:0!important;max-width:100%!important;}
}
@media(max-width:360px){
  html body .hero .hero-search-wrap .hero-search-tabs .hero-search-tab{font-size:12px!important;}
  .hero .hero-copy .eyebrow{font-size:8px!important;}
}