/* ============================================
   HM Design – Mobile & Tablet Optimizations
   ============================================ */

/* === TABLET (max 1024px) === */
@media(max-width:1024px){
  .showroom-info{display:none}
  .hero{height:70vh;min-height:400px}
  .hero-slide .slide-content{width:60%;padding:40px 48px}
  .hero-promo-circle{right:6%;width:clamp(120px,12vw,180px);height:clamp(120px,12vw,180px)}
  .products-grid{grid-template-columns:repeat(3,1fr)}
  .layout-with-sidebar{grid-template-columns:220px 1fr;gap:24px}
  .detail-layout{gap:32px}
  .contact-grid{gap:32px}
  .nav-inner a{padding:14px 14px;font-size:12px;letter-spacing:.3px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .services-row{gap:20px}
  .service-item{min-width:120px}
  .section{padding:60px 0}
}

/* === SMALL TABLET / PHABLET (max 768px) === */
@media(max-width:768px){
  /* --- NAV: hamburger --- */
  .menu-toggle{display:block}
  .nav-inner{flex-wrap:wrap;justify-content:flex-start;padding:0;min-height:48px;align-items:center}
  .nav-inner::before{content:'☰ Menu';display:block;padding:12px 20px;font-size:14px;font-weight:700;color:var(--text-dark);width:100%}
  .nav-inner>a,.nav-inner>li{display:none}
  .nav-inner.open::before{content:'✕ Fermer';color:var(--gold)}
  .nav-inner.open>a,.nav-inner.open>li{display:block;width:100%}
  .nav-inner.open a{padding:13px 24px;border-bottom:1px solid var(--light-gray);font-size:14px}
  .nav-inner.open a::after{display:none}
  .nav-inner.open a:hover,.nav-inner.open a.active{background:var(--cream);color:var(--gold)}
  .nav-inner li{width:100%}
  .menu-toggle{position:absolute;right:16px;top:12px}

  /* --- HEADER --- */
  .header-inner{padding:0 16px;gap:10px}
  .search-box{display:none}
  .h-btn span:last-child:not(:first-child){display:none}
  .header{height:60px}
  :root{--header-h:60px}

  /* --- HERO --- */
  .hero{height:auto;min-height:0}
  .hero-slide{position:relative;display:none;opacity:1;pointer-events:all}
  .hero-slide.active{display:block}
  .hero-slide .slide-bg{position:relative;aspect-ratio:16/9;min-height:220px}
  .hero-slide.active .slide-bg{transform:scale(1.05)}
  .hero-slide .slide-overlay{background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.6) 100%)}
  .hero-slide .slide-content{position:absolute;bottom:0;left:0;right:0;top:auto;width:100%;padding:20px;background:transparent}
  .hero-slide .slide-tag{font-size:10px;letter-spacing:2px;margin-bottom:6px}
  .hero-slide .slide-title{font-size:26px;text-shadow:0 2px 8px rgba(0,0,0,.5)}
  .hero-slide .slide-title em{font-size:28px}
  .hero-slide .slide-subtitle{font-size:13px;margin-bottom:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .hero-slide .slide-cta{gap:8px}
  .hero-slide .slide-cta .btn{padding:10px 20px;font-size:12px}
  .hero-promo-circle{position:absolute;right:12px;top:12px;width:70px;height:70px;transform:none;z-index:5}
  .hero-promo-circle .label{font-size:7px;letter-spacing:.5px}
  .hero-promo-circle .pct{font-size:22px}
  .hero-promo-circle .sub{font-size:7px}
  .hero-features{position:relative;flex-wrap:wrap}
  .hero-feature{flex:1 1 calc(50% - 1px);min-width:calc(50% - 1px);padding:14px 10px;border-bottom:1px solid var(--light-gray)}
  .hero-feature:nth-child(even){border-right:none}
  .hero-feature .feat-icon{width:32px;height:32px;font-size:13px}
  .hero-feature span{font-size:10px;letter-spacing:.3px}
  .hero-arrows{display:none}
  .hero-dots{position:absolute;top:8px;left:50%;transform:translateX(-50%);bottom:auto;z-index:6}
  .hero-dot{width:8px;height:8px}
  .hero-dot.active{width:24px}

  /* --- PRODUCTS --- */
  .products-grid{grid-template-columns:1fr 1fr;gap:12px}
  .product-card .card-actions{display:none}
  .product-card .card-body{padding:12px 14px 16px}
  .product-card .p-name{font-size:14px}
  .product-card .p-desc{font-size:11px;-webkit-line-clamp:1}
  .product-card .price-current{font-size:17px}
  .product-card .price-old{font-size:12px}
  .product-card .color-dot{width:14px;height:14px}

  /* --- CATEGORIES --- */
  .cat-grid{grid-template-columns:1fr 1fr;gap:10px}
  .cat-card{aspect-ratio:1}
  .cat-card .cat-name{font-size:14px}

  /* --- LAYOUT --- */
  .layout-with-sidebar{grid-template-columns:1fr;padding:16px}
  .sidebar{position:static;display:flex;flex-wrap:wrap;gap:12px;padding-bottom:16px;border-bottom:2px solid var(--light-gray);margin-bottom:16px}
  .filter-group{flex:1 1 45%;margin-bottom:0;padding-bottom:0;border-bottom:none}
  .detail-layout{grid-template-columns:1fr;gap:20px;padding:20px 16px}
  .contact-grid{grid-template-columns:1fr;gap:20px;padding:20px 16px}
  .about-values{grid-template-columns:1fr 1fr}
  .about-content{padding:32px 16px}

  /* --- FOOTER --- */
  .footer-grid{grid-template-columns:1fr;gap:24px;padding:0 16px 32px}
  .footer-col:first-child{text-align:center}
  .footer-social{justify-content:center}

  /* --- MISC --- */
  .promo-banner{flex-direction:column;text-align:center;gap:16px;padding:28px 20px;margin:20px 16px;border-radius:var(--radius-lg)}
  .newsletter-form{flex-direction:column}
  .newsletter h3{font-size:22px}
  .toolbar{flex-wrap:wrap;gap:8px}
  .section{padding:48px 0}
  .section-header{margin-bottom:32px}
  .section-header h2{font-size:clamp(22px,5vw,32px)}
  .container{padding:0 16px}
  .btn-lg{padding:14px 28px;font-size:13px}
  .form-row{grid-template-columns:1fr}

  /* --- SERVICES --- */
  .services-bar{padding:32px 0}
  .services-row{gap:16px;justify-content:space-around}
  .service-item{min-width:80px;flex:0 0 calc(25% - 12px)}
  .service-item .s-icon{width:44px;height:44px;font-size:18px}
  .service-item span{font-size:10px;letter-spacing:0}
}

/* === MOBILE (max 480px) === */
@media(max-width:480px){
  .top-banner{font-size:9px;flex-direction:column;gap:4px;padding:6px 10px;letter-spacing:1px}
  .countdown{font-size:10px}
  .logo-text{font-size:20px}
  .logo sub{font-size:8px;letter-spacing:1px}
  .header{height:54px}
  :root{--header-h:54px}
  .header-inner{padding:0 10px;gap:6px}
  .h-btn{padding:6px 10px;font-size:12px}
  .cart-badge{min-width:16px;height:16px;font-size:9px}

  .hero-slide .slide-bg{min-height:180px}
  .hero-slide .slide-title{font-size:22px}
  .hero-slide .slide-title em{font-size:24px}
  .hero-slide .slide-subtitle{font-size:12px;-webkit-line-clamp:1}
  .hero-slide .slide-cta .btn{padding:8px 16px;font-size:11px}
  .hero-promo-circle{width:60px;height:60px}
  .hero-promo-circle .pct{font-size:18px}

  .products-grid{gap:6px}
  .product-card{border-radius:var(--radius-md)}
  .product-card .card-img{aspect-ratio:3/4}
  .product-card .card-body{padding:8px 10px 12px}
  .product-card .p-name{font-size:12px;-webkit-line-clamp:1}
  .product-card .p-desc{display:none}
  .product-card .p-colors{margin-bottom:6px;gap:3px}
  .product-card .color-dot{width:12px;height:12px}
  .product-card .price-current{font-size:15px}
  .product-card .price-old{font-size:10px}
  .product-card .price-pct{display:none}
  .product-card .badge{font-size:9px;padding:3px 8px;top:6px;left:6px}

  .social-side{display:none}
  .wa-float{width:48px;height:48px;font-size:24px;bottom:16px;left:16px}

  .cat-grid{gap:6px}
  .cat-card .cat-overlay{padding:12px}
  .cat-card .cat-name{font-size:12px}

  .service-item{flex:0 0 calc(50% - 8px)}
  .service-item .s-icon{width:40px;height:40px;font-size:16px}
  .service-item span{font-size:9px}

  .section{padding:32px 0}
  .section-header{margin-bottom:24px}
  .section-header h2{font-size:20px}
  .section-header h2::after{width:30px;margin-top:8px}
  .section-header p{font-size:13px}

  .detail-prices .current-price{font-size:20px}
  .detail-prices .old-price{font-size:14px}
  .product-title{font-size:22px!important}
  .detail-actions{flex-direction:column}
  .detail-features{grid-template-columns:1fr}

  .page-hero{padding:32px 16px}
  .page-hero h1{font-size:24px}
  .page-hero p{font-size:13px}

  .about-values{grid-template-columns:1fr}
  .value-card{padding:20px}

  .footer-bottom{font-size:10px;padding:16px 12px}
  .newsletter{padding:40px 0}
  .promo-banner{padding:20px 16px;border-radius:var(--radius-md)}
  .promo-banner h3{font-size:20px}
  .promo-banner p{font-size:13px}

  .breadcrumb-inner{font-size:11px;padding:0 12px}

  .admin-tabs{gap:0}
  .admin-tab{padding:10px 14px;font-size:12px}
  .admin-card{padding:20px 16px}
  .slide-manager{grid-template-columns:1fr 1fr}
}

/* === TINY SCREENS (max 360px) === */
@media(max-width:360px){
  .products-grid{grid-template-columns:1fr}
  .product-card .card-img{aspect-ratio:4/3}
  .product-card .p-desc{display:block;-webkit-line-clamp:2}
  .product-card .price-pct{display:inline}
  .hero-slide .slide-title{font-size:20px}
  .hero-slide .slide-cta{flex-direction:column}
  .cat-grid{grid-template-columns:1fr}
  .cat-card{aspect-ratio:16/9}
}