/* ============================================
   NAYT PROD - Mobile Optimizations
   Améliorations responsive complètes
   ============================================ */

/* ========== TABLET (max 1024px) ========== */
@media (max-width:1024px){
  .container{padding:0 1.25rem}
  .container-narrow{padding:0 1.25rem}
  .section{padding:5rem 0}
  .section-sm{padding:4rem 0}

  h1{font-size:clamp(2.25rem,7vw,4.5rem)}
  h2{font-size:clamp(1.75rem,5vw,3.5rem)}
  h3{font-size:clamp(1.5rem,4vw,2.5rem)}
}

/* ========== MOBILE LARGE (max 768px) ========== */
@media (max-width:768px){
  :root{--header-h:64px}

  body{font-size:.95rem}

  .container,.container-narrow{padding:0 1rem}
  .section{padding:4rem 0}
  .section-sm{padding:3rem 0}

  /* Typography */
  h1{font-size:clamp(2rem,9vw,3.5rem) !important;line-height:1}
  h2{font-size:clamp(1.65rem,7vw,2.5rem) !important;line-height:1.1}
  h3{font-size:clamp(1.35rem,5vw,2rem) !important;line-height:1.2}
  h4{font-size:1.15rem}

  p{font-size:.95rem;line-height:1.65}

  .section-title{font-size:clamp(1.75rem,7vw,2.5rem) !important;line-height:1.1;margin-bottom:1rem}
  .section-subtitle{font-size:.95rem;line-height:1.6}
  .section-header{margin-bottom:2.5rem}

  .eyebrow{font-size:.65rem;margin-bottom:1rem;letter-spacing:.25em}
  .eyebrow::before{width:24px}

  /* Buttons */
  .btn{padding:.85rem 1.5rem;font-size:.8rem}
  .btn-large{padding:1rem 1.75rem;font-size:.875rem}

  /* Header */
  .site-header{height:64px}
  .site-header .container{padding:0 1rem}
  .logo-mark{height:36px !important}
  .logo-name{font-size:1.1rem !important}
  .logo-sub{font-size:.55rem !important;letter-spacing:.3em !important}

  /* Hide custom cursor */
  .cursor-dot,.cursor-ring{display:none !important}

  /* Hero */
  .hero{min-height:88vh;padding-top:64px}
  .hero-content{padding:3rem 0}
  .hero-eyebrow{padding:.4rem 1rem;font-size:.65rem;margin-bottom:1.5rem}
  .hero-title{font-size:clamp(2.5rem,11vw,4.5rem) !important;line-height:.95;margin-bottom:1.5rem;letter-spacing:-.02em}
  .hero-subtitle{font-size:1rem;margin-bottom:2rem}
  .hero-actions{flex-direction:column;align-items:stretch;gap:.75rem;width:100%;max-width:340px}
  .hero-actions .btn{width:100%;justify-content:center}
  .hero-scroll-indicator{bottom:1.5rem;font-size:.6rem}
  .scroll-line{height:40px}

  /* Stats */
  .stats-bar{padding:3rem 0}
  .stats-grid{grid-template-columns:repeat(2,1fr) !important;gap:2.5rem 1rem !important}
  .stat-number{font-size:2.5rem !important}
  .stat-label{font-size:.65rem;letter-spacing:.15em}
  .stat-item:not(:last-child)::after{display:none}

  /* About grid (homepage) */
  .about-grid{grid-template-columns:1fr !important;gap:2rem !important}
  .about-grid > div:last-child{aspect-ratio:16/12 !important;max-height:400px}

  /* Services grid */
  .services-grid{grid-template-columns:1fr !important;gap:1rem}
  .service-card{padding:2rem 1.5rem !important;min-height:auto}
  .service-icon{width:52px;height:52px;margin-bottom:1rem}
  .service-icon svg{width:24px;height:24px}
  .service-card h3{font-size:1.3rem}

  /* Portfolio */
  .portfolio-grid{grid-template-columns:1fr !important;gap:1rem}
  .portfolio-item{aspect-ratio:4/4 !important}
  .portfolio-item.featured{grid-column:span 1 !important;aspect-ratio:4/4 !important}
  .portfolio-overlay{opacity:1 !important;background:linear-gradient(180deg,transparent 40%,rgba(10,10,10,.95)) !important;padding:1.5rem !important}
  .portfolio-overlay h4{font-size:1.15rem}
  .portfolio-category{font-size:.65rem}
  .portfolio-filters{gap:.5rem;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.5rem;flex-wrap:nowrap}
  .portfolio-filters::-webkit-scrollbar{height:4px}
  .filter-btn{padding:.5rem 1rem;font-size:.7rem;white-space:nowrap;flex-shrink:0}

  /* Clients */
  .clients-section{padding:4rem 0}
  .clients-grid{grid-template-columns:repeat(2,1fr) !important;gap:.75rem}
  .client-logo{padding:1rem;font-size:.85rem;min-height:64px}

  /* Pricing */
  .pricing-grid{grid-template-columns:1fr !important;gap:1.5rem;max-width:420px;margin:0 auto}
  .pricing-card{padding:2rem 1.5rem !important;transform:none !important}
  .pricing-card.popular{transform:none !important}
  .pricing-card.popular:hover{transform:translateY(-4px) !important}
  .pricing-title{font-size:1.6rem}

  /* Process steps */
  .process-steps{grid-template-columns:1fr !important;gap:1.5rem}
  .process-step{padding:1.25rem;border-left:2px solid var(--teal);background:rgba(255,255,255,.02);border-radius:8px}
  .step-number{font-size:2.5rem !important;margin-bottom:.5rem}
  .step-title{font-size:1.1rem}
  .step-desc{font-size:.85rem}

  /* Testimonials */
  .testimonials-grid{grid-template-columns:1fr !important;gap:1rem}
  .testimonial-card{padding:1.75rem}
  .testimonial-card::before{font-size:4rem;top:.5rem;right:1rem}
  .testimonial-text{font-size:.95rem;line-height:1.6}

  /* Why grid (home & about) */
  .why-grid,.why-grid-service{grid-template-columns:1fr !important;gap:1rem !important}
  .why-grid .card,.why-grid-service .card{padding:1.5rem !important}

  /* DNA grid (about) */
  .dna-grid{grid-template-columns:1fr !important;gap:1rem !important}

  /* Story grid (about) */
  .story-grid{grid-template-columns:1fr !important;gap:1.5rem !important}

  /* CTA Banner */
  .cta-banner{padding:5rem 0}
  .cta-banner h2{font-size:clamp(1.75rem,7vw,2.75rem) !important;margin-bottom:1rem}
  .cta-banner p{font-size:1rem;margin-bottom:2rem}
  .cta-banner-content > div{flex-direction:column !important;gap:.75rem !important;width:100%;max-width:340px;margin:0 auto}
  .cta-banner-content > div .btn{width:100%}

  /* Page header */
  .page-header{padding:7rem 0 3rem}
  .page-header h1{font-size:clamp(2.25rem,9vw,4rem) !important}
  .breadcrumbs{font-size:.7rem}

  /* Forms */
  .form-wrapper{padding:1.5rem !important;border-radius:16px}
  .form-row{grid-template-columns:1fr !important;gap:.75rem !important}
  .form-row.cols-3{grid-template-columns:1fr !important}
  .form-step-title{font-size:1.35rem}
  .form-step-subtitle{font-size:.85rem;margin-bottom:1.5rem}
  .progress-label{display:none}
  .form-input,.form-textarea,.form-select{padding:.85rem 1rem;font-size:.95rem;font-size:16px} /* 16px évite zoom iOS */
  .form-actions{flex-direction:column-reverse !important;gap:.75rem}
  .form-actions .btn{width:100%}

  /* Option cards smaller */
  .option-grid,.option-grid.cols-3,.option-grid.cols-4{grid-template-columns:1fr 1fr !important;gap:.5rem}
  .option-card-content{padding:.85rem .5rem !important;min-height:auto}
  .option-card-label{font-size:.8rem !important}
  .option-card-desc{font-size:.65rem !important}

  /* Contact grid */
  .contact-grid{grid-template-columns:1fr !important;gap:2rem !important}
  .info-cards{grid-template-columns:1fr !important;gap:.75rem}
  .info-card{padding:1.5rem}

  /* Quick contact */
  .quick-contact-btn{padding:.85rem 1rem}

  /* Footer */
  .site-footer{padding:4rem 0 1.5rem}
  .footer-grid{grid-template-columns:1fr !important;gap:2rem !important;margin-bottom:2.5rem}
  .footer-brand p{max-width:none}
  .footer-bottom{flex-direction:column;text-align:center;gap:.75rem;font-size:.7rem}
  .footer-bottom-links{flex-direction:row;gap:1rem}

  /* WhatsApp float */
  .whatsapp-float{width:50px;height:50px;bottom:16px;right:16px}
  .whatsapp-float svg{width:26px;height:26px}

  /* Marquee smaller */
  .marquee{padding:2rem 0}
  .marquee-item{font-size:clamp(1.5rem,5vw,2.5rem);gap:3rem}

  /* Mega menu disabled on mobile */
  .mega-menu{display:none !important}

  /* Studio grid (about) */
  .studio-grid{grid-template-columns:1fr 1fr !important;grid-auto-rows:160px !important}
  .studio-grid > div:first-child{grid-row:span 2 !important;grid-column:span 2 !important}
}

/* ========== MOBILE SMALL (max 480px) ========== */
@media (max-width:480px){
  .container,.container-narrow{padding:0 .875rem}
  .section{padding:3rem 0}

  h1{font-size:clamp(1.85rem,9vw,2.75rem) !important}
  h2{font-size:clamp(1.5rem,7vw,2.25rem) !important}

  .hero-title{font-size:clamp(2.25rem,11vw,3.5rem) !important}

  /* Forms even tighter */
  .form-wrapper{padding:1.25rem !important;border-radius:12px}
  .option-grid,.option-grid.cols-3,.option-grid.cols-4{grid-template-columns:1fr !important}

  /* Stats compact */
  .stat-number{font-size:2.25rem !important}

  /* Logo compact */
  .logo-mark{height:32px !important}
  .logo-name{font-size:1rem !important}
  .logo-sub{font-size:.5rem !important}

  /* Studio grid single col */
  .studio-grid{grid-template-columns:1fr !important;grid-auto-rows:200px !important}
  .studio-grid > div:first-child{grid-row:span 1 !important;grid-column:span 1 !important}

  /* Marquee */
  .marquee-item{font-size:1.5rem;gap:2rem}

  /* Card padding */
  .card{padding:1.25rem !important}

  /* Service icon */
  .service-icon{width:44px;height:44px}
  .service-icon svg{width:20px;height:20px}
}

/* ========== SMOOTH OVERFLOW PROTECTION ========== */
@media (max-width:768px){
  html,body{overflow-x:hidden;width:100%}
  .grain{display:none} /* Improve perf on mobile */

  /* Disable parallax/tilt on mobile */
  [data-tilt]{transform:none !important}

  /* Tap highlight transparent */
  *{-webkit-tap-highlight-color:rgba(0,169,157,.2)}

  /* Safe area iOS */
  body{padding-bottom:env(safe-area-inset-bottom)}
  .whatsapp-float{bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ========== TOUCH IMPROVEMENTS ========== */
@media (hover:none){
  /* Disable hover effects on touch devices */
  .service-card:hover,.portfolio-item:hover,.pricing-card:hover,.card:hover,.client-logo:hover{
    transform:none !important;
  }
  /* Portfolio overlay always visible */
  .portfolio-overlay{opacity:1 !important}
}