/* ============================================================================
   SPECULAR STUDIO — responsive.css
   Breakpoints professionnels, safe areas iOS, appareils tactiles,
   préférences d'accessibilité (reduced motion)
   ============================================================================ */

/* ===== Desktop large (1440px+) ============================================== */
@media (min-width: 1440px) {
  :root { --container: 1400px; }
  h1 { font-size: clamp(3.4rem, 4.6vw, 5rem); }
}

/* ===== Tablettes & petits laptops (< 1180px) ================================ */
@media (max-width: 1179px) {
  .nav-links { gap: 1.15rem; }
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cert-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-step:not(:last-child)::after { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== Navigation : bascule mobile (< 1024px) =============================== */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .burger { display: inline-flex; }
  .bottomnav { display: block; }
  .mobile-only { display: block; }
  .desktop-only { display: none !important; }

  /* Laisse la place à la bottom nav */
  body.has-bottomnav { padding-bottom: 4.6rem; }

  .split { grid-template-columns: 1fr; gap: 2rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; padding-block: 3rem; }

  /* Admin : sidebar en tiroir */
  .admin-burger { display: inline-flex; }
  .admin-sidebar {
    position: fixed; inset: 0 30% 0 0; z-index: 120;
    min-width: 270px;
    transform: translateX(-105%);
    transition: transform 0.35s var(--ease-brand);
    background: rgba(4, 8, 18, 0.92);
  }
  .admin-sidebar.open { transform: translateX(0); box-shadow: var(--shadow-pop); }
}

/* ===== Mobiles standard (< 768px) =========================================== */
@media (max-width: 767px) {
  html { scroll-padding-top: 84px; }

  .section { padding-block: 3.6rem; }
  .section-head { margin-bottom: 2.2rem; }

  .navbar { top: 0; padding-inline: 0; }
  .nav-inner { border-radius: 0 0 1.1rem 1.1rem; padding: 0.6rem 1rem; }
  .mobile-menu { margin-inline: 0.6rem; }

  .topbar-links span { display: none; }

  .hero { min-height: 78vh; padding-block: 3.5rem; }
  .hero-cta { gap: 0.7rem; }
  .hero-cta .btn { width: 100%; max-width: 340px; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .stat-card { padding: 0.9rem 0.4rem; }

  .proof-row { gap: 1.2rem 1.8rem; }
  .proof-mark { font-size: 0.78rem; letter-spacing: 0.16em; }

  .services-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .service-card { padding: 1.6rem 1.4rem 1.5rem; }

  .compare-wrap { aspect-ratio: 4 / 3; border-radius: 1.25rem; }

  .process { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .cert-row { grid-template-columns: 1fr; }

  .rating-box { padding: 1.1rem 1.3rem; gap: 1rem; }
  .rating-sep { display: none; }
  .review-card { width: 285px; padding: 1.4rem; }

  .travel-card { padding: 1.5rem; }

  /* Modales : bottom sheet plein écran */
  .modal { padding: 0; align-items: flex-end; }
  .modal-box {
    max-width: 100%;
    max-height: 94vh;
    border-radius: 1.4rem 1.4rem 0 0;
    padding: 1.6rem 1.3rem 2rem;
  }
  .form-grid { grid-template-columns: 1fr; }

  .toast-zone { left: 1rem; right: 1rem; bottom: 5.4rem; }
  .toast { min-width: 0; max-width: 100%; }

  /* Admin */
  .admin-content { padding: 1rem; }
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
  .kpi-value { font-size: 1.7rem; }
  .chart { height: 160px; gap: 0.5rem; }
  .tile-grid { grid-template-columns: 1fr; }
  .theme-grid { grid-template-columns: 1fr; }
  .inv-upload { grid-template-columns: 1fr; }
  .order-head { flex-direction: column; }
}

/* ===== Très petits mobiles (< 375px) ======================================== */
@media (max-width: 374px) {
  h1 { font-size: 1.72rem; line-height: 1.15; }
  .btn { padding: 0.7rem 1.2rem; font-size: 0.82rem; }
  .nav-logo .wordmark { font-size: 0.82rem; }
  .service-card { padding: 1.3rem 1.1rem; }
  .price { font-size: 1.9rem; }
  .review-card { width: 250px; }
  .bn-item { padding-inline: 0.45rem; }
}

/* ===== Safe areas iOS (encoche) ============================================= */
@supports (padding: max(0px)) {
  body {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  .navbar {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* ===== Appareils tactiles ==================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Tilt 3D et reflets désactivés (performance + pertinence) */
  .service-card { transform: none !important; }
  .card-glare { display: none; }

  /* Cibles tactiles confortables */
  .btn { min-height: 48px; }
  .btn-sm { min-height: 40px; }
  .nav-link { padding: 0.6rem 0.3rem; }
  .faq-q { padding: 1rem 1.25rem; min-height: 56px; }
  .tab { min-height: 42px; }

  /* Pas de curseur custom au doigt */
  .cursor-ring, .cursor-dot { display: none !important; }
}

/* ===== Impression ============================================================ */
@media print {
  #fx-canvas, #fx-overlay, .bg-orb, .bottomnav, .navbar, .toast-zone { display: none !important; }
  body { background: #fff; color: #000; }
}

/* ===== Préférence : mouvement réduit ========================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal-up, .reveal-left, .reveal-right, .reveal-scale,
  .stagger-children > * { opacity: 1; transform: none; }
  .gradient-text, .logo-metal { animation: none; }
  .bg-orb, .sparkle, .float-anim, .hero-sweep { animation: none; }
  .cursor-ring, .cursor-dot { display: none !important; }
  [data-parallax] { transform: none !important; }
}