/* ============================================
   RESPONSIVE - Mobile First Breakpoint Rules
   ============================================ */

/* === SMALL PHONES (480px+) === */
@media (min-width: 480px) {
  .trust-bar__grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

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

/* === TABLETS PORTRAIT (768px+) === */
@media (min-width: 768px) {
  /* Top bar - tam göster */
  .top-bar__divider {
    display: inline;
  }

  .top-bar__info,
  .top-bar__contact {
    flex-wrap: nowrap;
  }

  /* Hero */
  .hero { min-height: 700px; }
  .hero__subtitle { font-size: var(--fs-xl); }

  /* Trust bar */
  .trust-bar__grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  /* Why choose - 2 columns */
  .why-choose__content {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
  }

  /* Quote calculator - 2 columns */
  .quote-calculator__content {
    grid-template-columns: 1fr 1.2fr;
  }

  .quote-form__row {
    grid-template-columns: 1fr 1fr;
  }

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

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

  /* Testimonials - 2 cards visible */
  .testimonial-card {
    flex: 0 0 calc(50% - var(--space-md) / 2);
  }

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

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

  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }

  /* Video section - inline */
  .video-section__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  .video-section__card {
    flex: 0 0 55%;
  }
}

/* === TABLETS LANDSCAPE / LAPTOPS (1024px+) === */
@media (min-width: 1024px) {
  /* Navigation - show desktop, hide hamburger */
  .nav { display: block; }
  .hamburger { display: none; }
  .mobile-menu { display: none; }

  .header__cta { display: inline-flex; }

  /* Top bar full */
  .top-bar__content { flex-wrap: nowrap; }

  /* Hero */
  .hero { min-height: 800px; }

  /* Trust bar - 5 items in row */
  .trust-bar__grid {
    grid-template-columns: repeat(5, 1fr);
  }

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

  /* Why choose with stats column */
  .why-choose__content {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* Process - 4 columns with connecting line */
  .process__timeline {
    grid-template-columns: repeat(4, 1fr);
    position: relative;
  }

  .process__timeline::before {
    content: '';
    position: absolute;
    top: 28px;
    left: 12%;
    right: 12%;
    height: 2px;
    border-top: 2px dashed var(--color-border);
    z-index: 0;
  }

  .process__step {
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
  }

  /* Testimonials - 3 cards visible */
  .testimonial-card {
    flex: 0 0 calc(33.333% - var(--space-md) * 2 / 3);
  }

  /* Contact - 2 columns (info + form) */
  .contact__content {
    grid-template-columns: 1fr 1.2fr;
  }

  /* Footer - 4 columns */
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
}

/* === DESKTOP (1280px+) === */
@media (min-width: 1280px) {
  .hero { min-height: 900px; }

  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-choose__content {
    gap: var(--space-3xl);
  }

  .why-choose__stats {
    grid-template-columns: 1fr;
  }
}

/* === LARGE DESKTOP / 4K (1536px+) === */
@media (min-width: 1536px) {
  .container,
  .container-narrow,
  .container-wide {
    max-width: 1400px;
  }

  .hero { min-height: 1000px; }

  .hero h1 { font-size: 5.5rem; }
}

/* === MOBILE SPECIFIC ADJUSTMENTS === */
@media (max-width: 767px) {
  /* Top bar - hide on mobile for clean look */
  .top-bar { display: none; }

  /* Header padding */
  .header { padding: var(--space-sm) 0; }

  .logo img { height: 40px; }

  /* Hero */
  .hero { min-height: 500px; text-align: left; }

  /* CTA full width on mobile */
  .hero__cta { flex-direction: column; }
  .hero__cta .btn { width: 100%; }

  /* Section padding */
  section { padding: var(--space-lg) 0; }

  /* Section title */
  .section-header__title { font-size: var(--fs-3xl); }

  /* Trust bar - top margin reset */
  .trust-bar { margin-top: -2rem; }

  /* Trust bar items vertical center */
  .trust-bar__item { padding: var(--space-sm); }

  /* Process - vertical on mobile */
  .process__step { flex-direction: row; }

  .process__number {
    width: 48px;
    height: 48px;
    font-size: var(--fs-xl);
  }

  /* Quote calculator */
  .quote-calculator__info { padding: var(--space-md); }
  .quote-calculator__form { padding: var(--space-md); }

  .quote-form__radios { flex-direction: column; }

  /* Gallery tabs - smaller */
  .gallery__tab {
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--fs-xs);
  }

  /* Testimonials - smaller cards */
  .testimonial-card { padding: var(--space-md); }
  .testimonial-card__text { font-size: var(--fs-sm); min-height: 4rem; }

  /* FAQ */
  .faq__question { font-size: var(--fs-sm); padding: var(--space-sm); }
  .faq__answer-inner { padding: 0 var(--space-sm) var(--space-sm); }

  /* CTA banner */
  .cta-banner h2 { font-size: var(--fs-3xl); }
  .cta-banner p { font-size: var(--fs-lg); }

  /* Footer */
  .footer { padding: var(--space-xl) 0 var(--space-sm); }
  .footer__grid { gap: var(--space-lg); }
  .footer__social { justify-content: flex-start; }

  /* Contact form */
  .contact__form { padding: var(--space-md); }

  /* Modal */
  .modal { padding: var(--space-sm); }
  .modal__close { top: var(--space-xs); right: var(--space-xs); }
}

/* === LANDSCAPE PHONES === */
@media (max-width: 1023px) and (orientation: landscape) {
  .hero { min-height: 500px; }
  .mobile-menu { width: 320px; }
}

/* === PRINT STYLES === */
@media print {
  .top-bar,
  .header,
  .hamburger,
  .mobile-menu,
  .hero__cta,
  .cta-banner,
  .contact,
  .footer,
  .testimonials__controls,
  .testimonials__dots,
  .gallery__tabs,
  .video-section__play,
  .modal,
  .trust-bar {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
    color: #000;
    background: #fff;
  }

  section {
    page-break-inside: avoid;
    padding: 1cm 0;
  }

  h1, h2, h3 {
    page-break-after: avoid;
  }

  img {
    max-width: 100%;
    page-break-inside: avoid;
  }

  a {
    text-decoration: underline;
    color: #000;
  }

  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 10pt;
  }
}

/* === HIGH CONTRAST === */
@media (prefers-contrast: high) {
  :root {
    --color-text-primary: #000000;
    --color-text-secondary: #1a1a1a;
    --color-border: #000000;
  }

  .btn { border-width: 3px; }

  .card,
  .stat-card,
  .faq__item {
    border: 2px solid var(--color-border);
  }
}

/* === HOVER SUPPORT (Mouse devices) === */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-2px); }
}

/* === NO HOVER (Touch devices) === */
@media (hover: none) {
  .btn:hover { transform: none; }
  .btn:active { transform: scale(0.98); }
}
/* ==========================================================================
   CORRECTIFS RESPONSIVE (ANTI-DÉBORDEMENT MOBILE ET TABLETTE)
   ========================================================================== */

/* Sécurité globale anti-débordement horizontal */
html, body { 
  overflow-x: hidden; 
  max-width: 100%; 
}

img { 
  max-width: 100%; 
  height: auto; 
  display: inline-block; 
}

/* --- MENU NAVIGATION PRINCIPAL (Écrans moyens / Tablettes) --- */
@media (max-width: 1024px) {
  .nav__list, 
  .header__cta { 
    display: none !important; 
  }
}

/* --- SECTION HERO (Mobiles) --- */
@media (max-width: 768px) {
  .hero { 
    padding: 80px 0 !important; 
    min-height: auto !important; 
  }
  .hero h1 { 
    font-size: 2rem !important; 
    line-height: 1.2 !important; 
  }
  .hero__subtitle { 
    font-size: 1rem !important; 
    line-height: 1.4 !important; 
  }
  .hero__cta { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    width: 100%; 
  }
  .hero__cta .btn { 
    width: 100%; 
    text-align: center; 
    justify-content: center; 
  }
}

/* --- TRUST BAR (Barre d'avantages fluide) --- */
.trust-bar__grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
  gap: 15px !important;
}

@media (max-width: 480px) {
  .trust-bar__grid { 
    grid-template-columns: repeat(2, 1fr) !important; 
  }
}

/* --- GRILLE DES SERVICES --- */
.services__grid {
  display: grid !important;
  /* Force exactement 3 colonnes d'égale taille sur les écrans d'ordinateurs */
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important; /* Espace équilibré entre les cartes */
  width: 100% !important;
}

/* --- AJUSTEMENT POUR TABLETTES (Écrans inférieurs à 992px) --- */
@media (max-width: 992px) {
  .services__grid {
    /* Passe proprement à 2 colonnes sur tablette (génère 3 lignes de 2) */
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
  }
}

/* --- AJUSTEMENT POUR MOBILES (Écrans inférieurs à 600px) --- */
@media (max-width: 600px) {
  .services__grid {
    /* Une seule colonne par ligne pour une lecture verticale fluide sur smartphone */
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }
}



/* --- SECTION POURQUOI CHOISIR --- */
@media (max-width: 991px) {
  .why-choose__content { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 40px !important; 
  }
  .why-choose__stats { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; 
    gap: 20px !important; 
  }
}

/* --- CALCULATEUR DE DEVIS --- */
@media (max-width: 768px) {
  .quote-calculator__content { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 30px !important; 
  }
  .quote-form__row { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 15px !important; 
  }
}