/* ============================================================
   RESPONSIVE.CSS — CodeZen Starter Template
   Mobile First · 320px → 375px → 425px → 768px → 1024px → 1440px
   ============================================================ */

/* ── MINI-MOBILE 320px ───────────────────────────────────── */
@media (max-width: 359px) {
  .container {
    padding-inline: var(--space-4);
  }

  .hero__title {
    font-size: 2rem;
  }

  .page-hero__title {
    font-size: var(--text-3xl);
  }

  .btn {
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-xs);
  }

  .navbar__logo-name {
    font-size: var(--text-lg);
  }

  .stat__number {
    font-size: var(--text-3xl);
  }
}

/* ── MOBILE (jusqu'à 767px) ──────────────────────────────── */
@media (max-width: 767px) {

  /* Layout */
  .section {
    padding-block: var(--space-12);
  }

  .section-header {
    margin-bottom: var(--space-10);
  }

  .section-title {
    font-size: var(--text-2xl);
  }

  .section-subtitle {
    font-size: var(--text-base);
  }

  /* Navbar */
  .navbar__nav,
  .navbar__cta {
    display: none;
  }

  .navbar__burger {
    display: flex;
  }

  /* Hero */
  .hero {
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: var(--space-20);
  }

  .hero__content {
    text-align: center;
  }

  .hero__pre {
    justify-content: center;
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__desc {
    font-size: var(--text-base);
    margin-inline: auto;
  }

  .hero__actions {
    justify-content: center;
  }

  /* Stats bar */
  .stats-bar__inner {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* About */
  .about-home {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .about-home__img-wrap {
    aspect-ratio: 4/3;
  }

  /* Badge : sur mobile on le repositionne pour qu'il ne déborde pas */
  .about-home__badge {
    right: var(--space-4);
    bottom: calc(-1 * var(--space-8));
  }

  .about-home__visual {
    padding-bottom: var(--space-10);
  }

  /* Services */
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* Galerie */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .gallery-grid .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
    height: 220px;
  }

  .gallery-grid .gallery-item {
    height: 160px;
  }

  /* Témoignages */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  /* FAQ */
  .faq-item__question {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-xs);
  }

  .faq-item__answer-inner {
    padding: var(--space-3) var(--space-4) var(--space-4);
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-form {
    padding: var(--space-6);
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  /* Map */
  .map-wrapper {
    height: 260px;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .footer__brand-desc {
    max-width: 100%;
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  .footer__legal {
    justify-content: center;
  }

  /* Page hero */
  .page-hero__title {
    font-size: var(--text-4xl);
  }

  .page-hero__subtitle {
    font-size: var(--text-base);
  }

  /* WhatsApp float */
  .whatsapp-float {
    bottom: var(--space-5);
    right: var(--space-5);
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }

  /* Tooltip masqué sur mobile (manque de place) */
  .whatsapp-float__tooltip {
    display: none;
  }

  /* CTA */
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ── TABLETTE 768px → 1023px ─────────────────────────────── */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Navbar */
  .navbar__nav,
  .navbar__cta {
    display: none;
  }

  .navbar__burger {
    display: flex;
  }

  /* Hero */
  .hero__title {
    font-size: var(--text-5xl);
  }

  /* Stats */
  .stats-bar__inner {
    grid-template-columns: repeat(3, 1fr);
  }

  /* About */
  .about-home {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10);
  }

  /* Badge tablette : reste dans le parent */
  .about-home__badge {
    right: var(--space-4);
  }

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

  /* Galerie */
  .gallery-grid {
    grid-template-rows: 200px 200px;
  }

  /* Témoignages */
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
  }

  /* Contact */
  .contact-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .contact-form {
    max-width: 600px;
  }

  /* Footer */
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  /* Map */
  .map-wrapper {
    height: 340px;
  }
}

/* ── DESKTOP 1024px et plus ──────────────────────────────── */
@media (min-width: 1024px) {

  .navbar__burger {
    display: none;
  }

  .navbar__nav {
    display: flex;
  }

  .navbar__cta {
    display: inline-flex;
  }

  /* About badge repositionné en dehors sur grands écrans */
  .about-home__badge {
    right: calc(-1 * var(--space-6));
  }
}

/* ── GRAND DESKTOP 1440px et plus ────────────────────────── */
@media (min-width: 1440px) {
  .section {
    padding-block: var(--space-24);
  }

  .hero__title {
    font-size: 4.5rem;
  }

  .page-hero__title {
    font-size: var(--text-6xl);
  }
}