/* ==========================================================================
   FARIDEEJAY — responsive.css
   Le site est construit mobile-first dans style.css.
   Ce fichier ajoute les paliers tablette (≥768px) et desktop (≥1024px / ≥1280px).
   ========================================================================== */

/* ---------- TABLETTE : dès 768px ---------- */
@media (min-width: 768px) {
  .features-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-masonry { columns: 3; }
  .reviews-track { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-actions { gap: 1.1rem; }

  .footer-top {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* ---------- DESKTOP : dès 1024px ---------- */
@media (min-width: 1024px) {
  /* Navigation complète visible, on masque le burger */
  .main-nav { display: block; }
  .header-cta.desktop-only { display: inline-flex; }
  .nav-toggle { display: none; }

  /* La CTA bar collante n'a plus lieu d'être sur grand écran :
     les CTA sont déjà dans le header et à chaque section. */
  .sticky-cta { display: none; }
  .back-to-top { bottom: var(--gutter); }

  .features-grid { grid-template-columns: repeat(4, 1fr); }
  .gallery-masonry { columns: 4; }
  .reviews-track { grid-template-columns: repeat(3, 1fr); }
  .contact-grid { grid-template-columns: repeat(2, 1fr); align-items: stretch; }

  .pricing-card { padding: 3.6rem; }

  /* Le showreel passe en deux colonnes : vidéo + texte d'accompagnement */
  .showreel { flex-direction: row; align-items: center; justify-content: center; gap: 3.5rem; text-align: left; }
  .showreel-copy { max-width: 380px; }
  .showreel-copy .section-head { text-align: left; margin-inline: 0; }
  .showreel-copy .eyebrow::before { display: none; }
}

/* ---------- GRAND DESKTOP : dès 1280px ---------- */
@media (min-width: 1280px) {
  :root { --gutter: 3.5rem; }
  .hero-title { max-width: 20ch; }
}

/* ---------- Très petits écrans : ajustements fins (≤360px) ---------- */
@media (max-width: 360px) {
  :root { --gutter: 1rem; }
  .pricing-card { padding: 1.6rem 1.2rem; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Mode paysage mobile bas (hauteur réduite) ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .hero { min-height: 100vh; padding-block: 5rem 2rem; }
  .hero-scroll { display: none; }
}

/* ---------- Impression (au cas où) ---------- */
@media print {
  .site-header, .sticky-cta, .back-to-top, .mobile-nav, .hero-scroll, .page-loader { display: none !important; }
  body { background: #fff; color: #000; }
}