/* ============================================================
   FUMA RESPONSIVE LAYOUT V2
   Desktop plus large / tablette et mobile conservés
   ============================================================ */

/* Desktop large */
@media (min-width:1200px){
  body.home-page .wrap,
  body.catalog-page .wrap{
    max-width:1540px !important;
    padding-left:32px !important;
    padding-right:32px !important;
  }

  body.home-page .nav,
  body.catalog-page .nav{
    gap:24px !important;
    min-height:82px !important;
  }

  body.home-page .nav > nav,
  body.catalog-page .nav > nav{
    flex:1 1 auto;
    justify-content:center;
    gap:22px !important;
    min-width:0;
  }

  body.home-page .nav > nav a,
  body.catalog-page .nav > nav a{
    white-space:nowrap;
  }

  body.home-page .hero,
  body.catalog-page .hero{
    min-height:420px !important;
  }

  body.home-page .hero-text,
  body.catalog-page .hero-text{
    max-width:700px !important;
    padding:52px 54px !important;
  }

  body.home-page .hero p,
  body.catalog-page .hero p{
    max-width:540px !important;
    font-size:16px;
    line-height:1.6;
  }

  body.home-page .seo-intro,
  body.catalog-page .seo-intro{
    padding-left:32px !important;
    padding-right:32px !important;
  }

  body.home-page .seo-intro-box,
  body.catalog-page .seo-intro-box{
    padding:32px 36px !important;
  }

  body.home-page .engineering-shell,
  body.catalog-page .engineering-shell{
    padding:36px 38px !important;
  }

  body.home-page .engineering-copy,
  body.catalog-page .engineering-copy{
    max-width:820px;
  }

  body.home-page .grid,
  body.catalog-page .grid{
    gap:22px !important;
  }

  body.home-page .filters,
  body.catalog-page .filters{
    gap:14px !important;
  }

  /* Engineer */
  body:has(#app) .wrap{
    width:min(1480px,calc(100% - 48px)) !important;
  }

  /* Garage already uses a broad layout, give it a little more room */
  body:has(#cards) .wrap{
    width:min(1540px,94vw) !important;
  }
}

/* Medium desktop / laptop: prevent French navigation from feeling cramped */
@media (min-width:901px) and (max-width:1199px){
  body.home-page .nav,
  body.catalog-page .nav{
    gap:14px !important;
  }
  body.home-page .nav > nav,
  body.catalog-page .nav > nav{
    gap:12px !important;
    font-size:12.5px !important;
    flex:1 1 auto;
    justify-content:center;
    min-width:0;
  }
  body.home-page .nav .btn,
  body.catalog-page .nav .btn{
    padding:10px 12px !important;
    font-size:12.5px !important;
  }
}

/* Tablet / mobile: header becomes two rows instead of squeezing everything */
@media (max-width:900px){
  body.home-page .nav,
  body.catalog-page .nav{
    min-height:auto !important;
    flex-wrap:wrap !important;
    gap:10px 12px !important;
    padding-top:12px !important;
    padding-bottom:12px !important;
  }

  body.home-page .nav > nav,
  body.catalog-page .nav > nav{
    order:10 !important;
    width:100% !important;
    display:flex !important;
    justify-content:flex-start !important;
    gap:10px !important;
    overflow-x:auto;
    overflow-y:hidden;
    padding:3px 0 5px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body.home-page .nav > nav::-webkit-scrollbar,
  body.catalog-page .nav > nav::-webkit-scrollbar{display:none}

  body.home-page .nav > nav a,
  body.catalog-page .nav > nav a{
    flex:0 0 auto;
    white-space:nowrap;
  }

  body.home-page .wrap,
  body.catalog-page .wrap{
    width:100%;
    max-width:none !important;
    padding-left:20px !important;
    padding-right:20px !important;
  }

  body.home-page .hero-text,
  body.catalog-page .hero-text{
    max-width:650px !important;
  }
}

/* Smartphone */
@media (max-width:580px){
  body.home-page .wrap,
  body.catalog-page .wrap{
    padding-left:14px !important;
    padding-right:14px !important;
  }

  body.home-page .nav,
  body.catalog-page .nav{
    padding-top:10px !important;
    padding-bottom:10px !important;
  }

  body.home-page .logo strong,
  body.catalog-page .logo strong{
    font-size:25px !important;
  }

  body.home-page .logo span,
  body.catalog-page .logo span{
    font-size:16px !important;
  }

  body.home-page .hero,
  body.catalog-page .hero{
    min-height:390px !important;
    border-radius:10px !important;
  }

  body.home-page .hero-text,
  body.catalog-page .hero-text{
    padding:28px 20px !important;
  }

  body.home-page .hero h1,
  body.catalog-page .hero h1{
    font-size:38px !important;
    max-width:92%;
  }

  body.home-page .hero p,
  body.catalog-page .hero p{
    max-width:95% !important;
    font-size:14px !important;
  }

  body.home-page .engineering-shell,
  body.catalog-page .engineering-shell{
    padding:22px 18px !important;
  }

  /* Language remains compact in mobile header */
  .fuma-language{
    margin-left:auto !important;
  }
  .fuma-language-btn{
    min-height:36px !important;
  }

  /* Garage */
  body:has(#cards) header{
    height:auto !important;
    min-height:68px;
    flex-wrap:wrap;
    gap:8px 12px !important;
    padding-top:10px !important;
    padding-bottom:10px !important;
  }
  body:has(#cards) header nav{
    order:10;
    width:100%;
    overflow-x:auto;
    gap:10px !important;
    scrollbar-width:none;
  }
  body:has(#cards) header nav::-webkit-scrollbar{display:none}
  body:has(#cards) header nav a{flex:0 0 auto;white-space:nowrap}
}

/* Secondary user-facing pages: breathe more on desktop, remain compact on mobile */
@media (min-width:1200px){
  body:not(.home-page):not(.catalog-page) .wrap{
    max-width:1480px;
  }
}

@media (min-width:1200px){
  body.engineer-page .wrap{width:min(1480px,calc(100% - 48px)) !important;max-width:none !important}
  body.garage-page .wrap{width:min(1540px,94vw) !important;max-width:none !important}
}
@media (max-width:700px){
  body.engineer-page .wrap{width:calc(100% - 24px) !important}
  body.garage-page .wrap{width:calc(100% - 20px) !important}
}