/* =========================================================
   TOUNZI CAR — mobile.css
   Styles responsives (tablettes & mobiles)
   ========================================================= */

/* ============ Tablettes ============ */
@media (max-width:1024px){
  .container{padding:0 18px}

  .menu,.nav-phone{display:none}
  .lang-switch.desktop-lang,.lang-dd.desktop-lang{display:none}
  .burger{display:flex}

  .hero{min-height:auto}
  .hero .container{padding:54px 18px 74px}
  .hero-inner{grid-template-columns:1fr;gap:36px}
  .hero-copy{text-align:center;display:flex;flex-direction:column;align-items:center}
  .hero h1{font-size:clamp(28px,7vw,44px);margin-left:auto;margin-right:auto}
  .hero p{font-size:16px;margin-left:auto;margin-right:auto}
  .hero-btns{justify-content:center}
  .hero-highlights{gap:14px;margin-top:28px;justify-content:center}
  .hero-showcase{width:100%;max-width:560px;margin:0 auto}

  .stats-band{margin-top:-70px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid #eceff5}
  .stat:nth-child(2){border-right:none}
  .stat:nth-last-child(-n+2){border-bottom:none}

  .vendre-card{padding:28px 24px}

  .etapes-grid{grid-template-columns:repeat(2,1fr);gap:30px 20px}
  .etape{margin-top:10px}
  .etape-num{top:-18px;left:22px}

  .car-grid{grid-template-columns:repeat(2,1fr);gap:18px}

  .why-split{grid-template-columns:1fr;gap:40px}
  .why-split-img{max-width:520px;margin:0 auto}

  .services-grid{grid-template-columns:repeat(2,1fr)}

  .temoins-grid{grid-template-columns:1fr;max-width:560px;margin:0 auto}

  .contact-grid{grid-template-columns:1fr;gap:28px}

  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}

  .page-header{padding:80px 0 60px}

  .final-cta{padding:55px 0}
}

/* ============ Mobiles larges ============ */
@media (max-width:720px){
  .section{padding:55px 0}

  .hero .container{padding:48px 18px 62px}
  .hero h1{font-size:clamp(28px,8vw,40px)}
  .hero-btns{gap:10px;margin-top:26px}
  .hero-btns .btn{flex:1;min-width:140px;padding:14px 18px;font-size:14px}

  .stats-band{margin-top:-80px}
  .stat{padding:22px 16px}
  .stat .num{font-size:24px}
  .stat .label{font-size:12px}

  .vendre-card{padding:24px 20px;flex-direction:column;text-align:center}
  .vendre-actions{width:100%;justify-content:center}
  .vendre-actions .btn{flex:1;min-width:140px}

  .etapes-grid{grid-template-columns:1fr;gap:36px 20px}

  .car-grid{grid-template-columns:1fr;gap:18px}

  .services-grid{grid-template-columns:1fr}

  .form-row{grid-template-columns:1fr}

  .filters{gap:8px;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .filters::-webkit-scrollbar{display:none}
  .filter-btn{white-space:nowrap;flex-shrink:0;padding:9px 16px;font-size:12.5px}

  .contact-form{padding:24px 20px}

  .footer-grid{grid-template-columns:1fr;gap:24px;text-align:center}
  .footer-socials{justify-content:center}

  .page-header h1{font-size:clamp(26px,7.5vw,40px)}
  .page-header p{font-size:15px}

  .socials{right:12px;bottom:12px;gap:7px}
  body.arabic .socials{right:auto;left:12px}
  .socials a,.socials button{width:48px;height:48px}
  .socials svg{width:20px;height:20px}

  .why-split-img .floating{left:14px;right:14px;bottom:14px;padding:16px}
  .why-split-img .floating .fl-ic{width:42px;height:42px;font-size:18px}
  .why-split-img .floating h4{font-size:14px}

  .final-cta .btns{flex-direction:column}
  .final-cta .btns .btn{width:100%}

  .faq-q{padding:16px 18px;font-size:15px}
  .faq-a-inner{padding:0 18px 18px;font-size:14px}
}

/* ============ Mobiles petits ============ */
@media (max-width:480px){
  .container{padding:0 16px}
  .section{padding:50px 0}

  .logo strong{font-size:20px}
  .logo small{font-size:10px}

  .hero .container{padding:36px 16px 54px}
  .hero-badge{font-size:11px;padding:6px 12px;margin-bottom:16px}
  .hero h1{font-size:28px;letter-spacing:-.3px}
  .hero p{font-size:15px;margin-top:16px}
  .hero-btns{flex-direction:column}
  .hero-btns .btn{width:100%}
  .hero-highlights{flex-direction:column;gap:10px;align-items:center}
  .hero-hl{font-size:13px}

  .showcase-frame{padding:8px;border-radius:18px}
  .showcase-media{border-radius:12px}
  .showcase-tag{top:14px;left:14px;padding:6px 11px;font-size:11px}
  body.arabic .showcase-tag{left:auto;right:14px}
  .showcase-chip{left:14px;bottom:14px;padding:10px 13px;gap:10px}
  body.arabic .showcase-chip{left:auto;right:14px}
  .showcase-chip .chip-ic{width:38px;height:38px;font-size:18px}
  .showcase-chip .chip-tx strong{font-size:13px}
  .showcase-chip .chip-tx span{font-size:11.5px}

  .stats{grid-template-columns:1fr 1fr;border-radius:12px}
  .stat{padding:18px 12px}
  .stat .num{font-size:22px}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(odd){border-right:1px solid #eceff5}

  .vendre-card{border-radius:12px;padding:22px 18px}
  .vendre-text h3{font-size:18px}
  .vendre-text p{font-size:14px}
  .vendre-actions{flex-direction:column}
  .vendre-actions .btn{width:100%}

  .etape{padding:24px 20px}
  .etape h3{font-size:15.5px}

  .car{border-radius:12px}
  .car-body{padding:16px 18px 18px}
  .car-body h3{font-size:16.5px}
  .car-price{font-size:21px}
  .car-cta{flex-direction:column}

  .why-item{padding:16px 14px;gap:14px}
  .why-item .why-ic{width:44px;height:44px;font-size:18px}
  .why-item h3{font-size:15px}

  .service-card{padding:26px 22px}
  .service-card h3{font-size:16.5px}

  .temoin{padding:22px}
  .temoin blockquote{font-size:14px}

  .contact-blk{padding:18px 18px;gap:12px}
  .contact-blk .c-ic{width:42px;height:42px;font-size:18px}
  .contact-blk a.big{font-size:18px}

  .contact-form{padding:22px 18px}
  .contact-form h3{font-size:19px}

  .final-cta{padding:45px 0}
  .final-cta h2{font-size:24px}
  .final-cta p{font-size:15px}

  .footer{padding:40px 0 18px}
  .footer-grid{padding-bottom:24px}
  .footer-logo{font-size:22px}

  .splash-logo{font-size:38px!important}
  .splash-tag{font-size:12px;letter-spacing:2px}
  .splash-loading{width:180px}
  .splash-car{font-size:42px}
  .splash-cars{height:70px}

  .page-header{padding:65px 0 50px}
  .breadcrumb{font-size:11px}
}

/* ============ Paysage mobile ============ */
@media (max-height:500px) and (orientation:landscape){
  .hero{min-height:480px}
  .hero .container{padding:40px 18px 58px}
  .splash-road{height:25%}
  .splash-cars{bottom:8%;height:70px}
}

/* ============ Grand écran ============ */
@media (min-width:1400px){
  .container{max-width:1280px}
}