/* ============================================================
   ADN Châssis – Responsive Mobile
   Breakpoints : 1024px (tablette) · 768px (mobile) · 480px (petit mobile)
   ============================================================ */

/* ── TABLETTE (≤ 1024px) ──────────────────────────────────── */
@media (max-width: 1024px) {

  /* Hero */
  .hero .container { grid-template-columns: 1fr; gap: 2rem; padding: 4rem 1.5rem; }
  .hero-card { display: none; }
  .hero h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
  .hero-desc { font-size: 1rem; }
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; }

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

  /* Brands */
  .brands-grid { grid-template-columns: repeat(3, 1fr); }

  /* Quote band */
  .quote-band .container { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .quote-badge { display: inline-block; }

  /* Why */
  .why-grid { grid-template-columns: 1fr; }
  .why-visual { max-width: 480px; margin: 0 auto; }

  /* Zones */
  .zones-grid { grid-template-columns: 1fr 1fr; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: repeat(2, 1fr); }

  /* Blog */
  .blog-list-layout { grid-template-columns: 1fr; }
  .blog-sidebar { position: static !important; }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }

  /* Two-col admin */
  .two-col, .three-col { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }

  /* Services page */
  .product-layout,
  .product-layout.reverse { grid-template-columns: 1fr; direction: ltr; }
  .product-layout.reverse > * { direction: ltr; }

  /* Devis */
  .devis-layout { grid-template-columns: 1fr; }
  .devis-sidebar { position: static; }
}

/* ── MOBILE (≤ 768px) ─────────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Base ── */
  html { font-size: 15px; }
  .container { padding: 0 1rem; }
  .section { padding: 3rem 0; }
  .section-sm { padding: 2rem 0; }
  h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.9rem); }

  /* ── Top bar ── */
  .topbar .container { flex-direction: column; gap: .35rem; text-align: center; padding: .5rem 1rem; }
  .topbar-left { flex-wrap: wrap; justify-content: center; gap: .75rem; }
  .topbar-right { display: none; }

  /* ── Header / Nav ── */
  .header .container { height: auto; padding: .9rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .logo img { height: 44px; }
  .hamburger { display: flex; }
  .nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(17,24,39,0.98);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    z-index: 9000;
    padding: 2rem;
  }
  .nav.open { display: flex; }
  .nav-link {
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff !important;
    padding: .75rem 1.5rem;
    border-radius: 10px;
    width: 100%;
    text-align: center;
  }
  .nav-link.active,
  .nav-link:hover { background: rgba(34,139,34,.25); color: #7fd87f !important; }
  .nav-cta {
    margin: .5rem 0 0;
    width: 100%;
    text-align: center;
    padding: .9rem 1.5rem;
    font-size: 1rem;
    border-radius: 10px;
  }
  /* Bouton fermer le menu */
  .nav.open::before {
    content: '✕';
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    font-size: 1.5rem;
    color: rgba(255,255,255,.6);
    cursor: pointer;
    z-index: 9001;
  }

  /* ── Hero ── */
  .hero { min-height: auto; }
  .hero .container { padding: 3rem 1rem; }
  .hero h1 { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .hero-desc { font-size: .95rem; }
  .hero-actions { flex-direction: column; gap: .75rem; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-stats { flex-wrap: wrap; gap: 1rem; padding-top: 1.5rem; }
  .hero-stat-value { font-size: 1.6rem; }
  .hero-label { font-size: .72rem; }

  /* ── Trust bar ── */
  .trust-bar .container { flex-direction: column; align-items: flex-start; gap: 1rem; }

  /* ── Services grid ── */
  .services-grid { grid-template-columns: 1fr; gap: 1rem; }
  .service-card { padding: 1.5rem; }

  /* ── Brands ── */
  .brands-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .brand-card { padding: 1rem .75rem; }

  /* ── Why ── */
  .why-points { gap: 1.25rem; }
  .why-visual-badge { right: 0; }

  /* ── Zones ── */
  .zones-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* ── Testimonials ── */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* ── Blog list ── */
  .blog-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .cat-pills { gap: .4rem; }
  .cat-pill { font-size: .76rem; padding: .3rem .75rem; }

  /* ── Blog article ── */
  .blog-layout { display: block !important; }
  .blog-layout main { margin-right: 0 !important; }
  .blog-layout > div[style*="float:right"],
  .blog-layout > aside { float: none !important; width: 100% !important; margin: 0 0 1.5rem !important; }

  /* ── Contact ── */
  .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-row { grid-template-columns: 1fr; }

  /* ── Footer ── */
  .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-main { padding: 2.5rem 0; }
  .footer-bottom .container { flex-direction: column; text-align: center; gap: .75rem; }

  /* ── Floating CTA → icônes rondes empilées en bas à droite ── */
  .floating-cta {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    flex-direction: column;
    gap: .6rem;
    align-items: center;
  }
  .floating-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    min-width: unset;
  }
  .floating-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    margin: 0;
  }

  /* ── Page hero ── */
  .page-hero { padding: 3rem 0 2.5rem; }
  .page-hero h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }

  /* ── Devis wizard ── */
  .wizard-options { grid-template-columns: 1fr 1fr; }
  .wizard-option { padding: 1rem; }
  .wizard-body { padding: 1.5rem 1rem; }
  .wizard-nav { padding: 1rem; }
  .progress-steps { gap: .25rem; }
  .progress-step-label { display: none; }
  .progress-line { flex: 1; }
  .checkbox-grid { grid-template-columns: 1fr; }
  .devis-layout { grid-template-columns: 1fr; }
  .devis-sidebar { position: static; }

  /* ── Services page ── */
  .product-specs { grid-template-columns: 1fr 1fr; }
  .product-visual-photo { aspect-ratio: 16/9; }

  /* ── Gallery (réalisations) ── */
  .gallery-grid { columns: 2 !important; column-gap: .75rem !important; }

  /* ── Carousel marques ── */
  .bc-header h2 { font-size: 1.3rem; }
  .bc-item { width: 140px; height: 72px; }
  .bc-item img { width: 110px; height: 36px; }

  /* ── Cookie banner ── */
  #cookie-banner { padding: 1rem; }
  #cookie-banner > div { flex-direction: column; gap: 1rem; }
  #cookie-banner .floating-btn-wrap { width: 100%; }

  /* ── Admin sidebar ── */
  .sidebar { transform: translateX(-100%); transition: transform .25s; }
  .sidebar.mobile-open { transform: translateX(0); }
  .main { margin-left: 0; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }

  /* ── Mentions légales ── */
  .legal-body { padding: 0; }
}

/* ── PETIT MOBILE (≤ 480px) ──────────────────────────────── */
@media (max-width: 480px) {

  /* ── Base ── */
  html { font-size: 14px; }
  .container { padding: 0 .875rem; }

  /* ── Hero ── */
  .hero h1 { font-size: 1.65rem; }
  .hero-stats { flex-direction: column; gap: .75rem; }

  /* ── Brands ── */
  .brands-grid { grid-template-columns: 1fr 1fr; }
  .brand-logo-text { font-size: .85rem; }

  /* ── Wizard ── */
  .wizard-options { grid-template-columns: 1fr; }
  .progress-step-num { width: 26px; height: 26px; font-size: .72rem; }

  /* ── Gallery ── */
  .gallery-grid { columns: 1 !important; }

  /* ── Floating CTA ── */
  .floating-cta { flex-direction: row; bottom: .75rem; right: .75rem; }
  .floating-btn { padding: .6rem; border-radius: 50%; width: 46px; height: 46px; justify-content: center; }
  .floating-btn span { display: none; }

  /* ── Stats admin ── */
  .stats-grid { grid-template-columns: 1fr; }

  /* ── Service images admin ── */
  .service-images-grid { grid-template-columns: 1fr !important; }

  /* ── Forms ── */
  .btn-lg { font-size: .92rem; padding: .85rem 1.5rem; }
}

/* ── SEO : Tap targets minimum 48px (Google Core Web Vitals) ─ */
@media (max-width: 768px) {
  /* Tous les liens et boutons ≥ 48px de hauteur minimum */
  .nav-link, .nav-cta,
  .btn, .btn-primary, .btn-secondary, .btn-outline, .btn-lg,
  .floating-btn,
  .footer-links a,
  .service-card-link,
  .blog-card-link,
  .topbar a,
  input[type="submit"],
  select { min-height: 44px; }

  /* Espacement entre liens footer */
  .footer-links li { margin-bottom: .4rem; }
  .footer-links a { padding: .3rem 0; }

  /* Service et blog links */
  .service-card-link,
  .blog-card-link { padding: .4rem 0; display: inline-block; }

  /* Image hero : version allégée sur mobile */
  .hero-bg {
    background-image: url('https://images.unsplash.com/photo-1580587771525-78b9dba3b914?w=900&q=75') !important;
  }
}

/* ── Touch improvements ───────────────────────────────────── */
@media (hover: none) {
  /* Boutons plus grands sur touch */
  .btn, .nav-cta { min-height: 44px; }
  .floating-btn { min-height: 44px; min-width: 44px; }
  .action-btn { min-height: 36px; }

  /* Pas d'animation au hover sur touch */
  .service-card:hover { transform: none; }
  .blog-card:hover { transform: none; }
  .brand-card:hover { transform: none; }
  .bc-item:hover { transform: none; }
  .gallery-card:hover img { transform: none; }

  /* Carousel toujours en mouvement sur touch (pas de pause) */
  .bc-track:hover { animation-play-state: running; }
  .brands-carousel-track:hover { animation-play-state: running; }
}

/* ── Amélioration lisibilité mobile ── */
@media (max-width: 768px) {
  /* Espacement sections */
  .section-header { margin-bottom: 2rem; }
  .section-header p { font-size: .9rem; }

  /* Tableaux scrollables */
  .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  /* Texte article */
  .article-body { font-size: .92rem; }
  .article-body h2 { font-size: 1.25rem; }
  .article-body h3 { font-size: 1.05rem; }
  .article-body table { font-size: .82rem; }

  /* Boutons de partage */
  .share-btns { flex-wrap: wrap; gap: .5rem; }

  /* Formulaire devis */
  .quote-band .container { gap: 1.25rem; }
  .quote-badge-time { font-size: 2rem; }

  /* Zones intervention */
  .zone-card { padding: 1.5rem; }

  /* Page mentions légales */
  .info-box { padding: 1rem; font-size: .88rem; }

  /* Sidebar blog */
  [style*="float:right"] { float: none !important; width: 100% !important; margin: 0 0 2rem !important; }
  [style*="margin-right:330px"] { margin-right: 0 !important; }
}