/* ============================================

NOVA FILM - Main.css

/* ========== GLOBAL ========== */

@import 'global/base.css';

@import 'global/reset.css';

@import 'global/global.css';

@import 'global/typography.css';

/* ========== COMPONENTS ========== */

@import 'components/buttons.css';

@import 'components/cards.css';

@import 'components/footer.css';

@import 'components/forms.css';

@import 'components/header.css';

@import 'components/hero.css';

@import 'components/icons.css';

@import 'components/section-resultats-concrets.css';

@import 'components/section-problemes.css';

@import 'components/section-processus.css';

@import 'components/section-realisations.css';

@import 'components/faq.css';

@import 'components/bandeau-devis.css';



/* ========== UTILITIES ========== */

@import 'utilities/layout.css';

/* ========== PAGES ========== */

@import 'pages/apropos.css';

@import 'pages/CGV.css';

@import 'pages/contact.css';

@import 'pages/detail-chantier.css';

@import 'pages/home.css';

@import 'pages/mentions-legales.css';

@import 'pages/parrainage.css';

@import 'pages/prenium.css';

@import 'pages/realisations.css';

@import 'pages/solutions.css';


/* ================================================================
   RESPONSIVE - BLOC FINAL (à laisser en dernier dans main.css)
   But : mobile utilisable + aucun débordement horizontal
================================================================ */

/* Garde-fous globaux */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

* {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Animations (si tu en as besoin ici) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes slideSpecs {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes shimmer {
  0% { left: -120%; }
  100% { left: 120%; }
}

/* ----------------- 1024px ----------------- */
@media (max-width: 1024px) {
  .solutions-grid,
  .realisations-grid { grid-template-columns: repeat(2, 1fr); }

  .pillars-grid,
  .timeline { grid-template-columns: 1fr; }

  .footer-content { grid-template-columns: repeat(2, 1fr); }

  .contact-cards-grid { grid-template-columns: 1fr 1fr; }

  .rea-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* réalisations */ /* [file:1] */

  .similar-grid { grid-template-columns: repeat(2, 1fr); }

  .metric-desc { display: none; }

  .problems-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
  }

  .problem-card {
    width: 100%;
    max-width: 420px;
    min-height: 360px;
  }
}

/* ----------------- 768px ----------------- */
@media (max-width: 768px) {
  .hero-section {
    min-height: 540px !important;
    padding-top: 70px !important;
  }

  .hero-title { font-size: 44px !important; }

  .hero-cta {
    display: flex;
    flex-direction: column !important;
    gap: 16px !important;
    align-items: center;
  }

  .btn-cta-primary,
  .btn-cta-secondary {
    width: 100% !important;
    max-width: 320px !important;
  }

  .header { height: 64px; }

  .header-container {
    padding: 0 20px;
    gap: 16px;
  }

  .logo { height: 64px; }
  .logo-text { font-size: 16px; }
  .header-right { height: 64px; }
  .social-icons { gap: 8px; }

  .btn-cta {
    padding: 8px 16px;
    font-size: 13px;
    height: 36px;
  }

  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }

  .solutions-grid,
  .realisations-grid,
  .metrics-grid,
  .contact-cards-grid,
  .similar-grid { grid-template-columns: 1fr; }

  .container { padding: 0 var(--space-md); } /* cohérent avec réalisations.html */ /* [file:1] */

  .tabs { flex-direction: column; align-items: center; }
  .tab { width: 100%; max-width: 420px; justify-content: center; }
}

/* ----------------- 640px ----------------- */
@media (max-width: 640px) {
  .rea-grid { grid-template-columns: 1fr; } /* réalisations */ /* [file:1] */

  .carousel-wrapper { height: 300px; }
  .carousel-btn { width: 40px; height: 40px; }

  .detail-title { font-size: 1.4rem; }
  .detail-block { padding: var(--space-md); }

  .btn-devis-large { width: 100%; }

  .map-container { height: 250px; }

  .problems-section { padding: 4rem 1rem; }
  .problems-grid { grid-template-columns: 1fr; gap: 1rem; }
  .problem-card { width: 100%; max-width: 320px; }

  /* Footer en 1 colonne sur mobile (sinon la 2e colonne déborde) */
  .footer-content { grid-template-columns: 1fr; }
  .footer-col { padding: 0; }
}

/* ----------------- 480px ----------------- */
@media (max-width: 480px) {
  .hero-section { min-height: 480px !important; }

  .header { height: 60px; }

  .header-container {
    padding: 0 16px;
    gap: 12px;
  }

  .logo { height: 60px; }
  .logo-text { font-size: 14px; }

  .social-icons { display: none; }

  .btn-cta {
    padding: 6px 12px;
    font-size: 12px;
    height: 32px;
  }

  h1 { font-size: 28px; }
  .subtitle { font-size: 12px; }

  .footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
}

/* ----------------- 481-768 (tablette) ----------------- */
@media (max-width: 768px) and (min-width: 481px) {
  .page-resultats { padding: calc(var(--space-32) * 2.5) var(--space-16); }
}


body { padding-top: 80px; }
@media (max-width: 1240px) { body { padding-top: 64px; } }
@media (max-width: 480px) { body { padding-top: 60px; } }


html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }
* { overflow-wrap: break-word; }