/* =====================================================
   RESPONSIVE — Tablet & Mobile
   ===================================================== */

/* --- Tablet (768px – 1024px) --- */
@media (max-width: 1024px) {
  :root {
    --nav-height: 60px;
  }

  .hero .container {
    gap: 40px;
  }

  .hero-slider {
    height: 320px;
  }

  .metier-grid {
    gap: 32px;
  }

  .apropos-inner {
    gap: 40px;
  }

  .apropos-photo {
    width: 260px;
  }

  .footer-inner {
    gap: 40px;
  }
}

/* --- Mobile (< 768px) --- */
@media (max-width: 768px) {
  :root {
    --nav-height: 56px;
    --gutter: 20px;
  }

  .section {
    padding: 60px 0;
  }

  .section-title {
    font-size: 2.4rem;
  }

  /* --- Navigation Mobile --- */
  .nav-links {
    display: none;
  }

  .hamburger {
    display: flex;
    position: absolute;
    right: var(--gutter);
  }

  .nav-logo-mobile {
    position: absolute;
    left: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    align-items: center;
    z-index: 1002;
  }

  .nav-logo-mobile img {
    height: 36px;
    width: auto;
    display: block;
  }

  .mobile-menu {
    display: block;
  }

  /* --- Hero Mobile --- */
  .hero {
    padding: 40px 0 60px;
  }

  .hero .container {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .hero-content {
    text-align: center;
    align-items: center;
  }

  .hero-logo {
    max-width: 260px;
  }

  .hero-slider {
    height: 260px;
  }

  /* --- Mission Mobile --- */
  .mission {
    padding: 60px 0;
  }

  .mission .section-title {
    font-size: 2.4rem;
  }

  .mission-illustration {
    display: none;
  }

  /* --- Métier Mobile --- */
  .metier {
    padding: 60px 0;
  }

  .metier-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .metier-card__illustration {
    width: 180px;
    height: 180px;
  }

  /* --- Séparateur Mobile --- */
  .separator {
    padding: 20px 0;
  }

  .separator img {
    width: 100%;
    height: auto;
  }

  /* --- Plantes Mobile --- */
  .plantes-moment-strip {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .artisans-inner {
    flex-direction: column;
    gap: 36px;
  }

  .artisans-img-col {
    flex: none;
    width: 100%;
  }

  .artisans-text-col h2 {
    font-size: 1.5rem;
  }

  .plantes {
    padding: 60px 0;
  }

  .catalogue-filters {
    flex-direction: column;
    align-items: stretch;
  }

  .catalogue-selects {
    flex-direction: column;
  }

  .catalogue-select {
    width: 100%;
  }

  .plantes-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }

  .plant-card__img {
    height: 200px;
  }

  /* --- À propos Mobile --- */
  .apropos {
    padding: 60px 0;
  }

  .apropos-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .apropos-photo {
    width: 240px;
    margin: 0 auto;
  }

  .apropos-text .section-title {
    text-align: center;
  }

  /* --- Contact Mobile --- */
  .contact-top {
    padding: 60px 0;
  }

  .contact-top .section-title {
    text-align: center;
    font-size: 2.8rem;
  }

  .contact-content {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-info {
    margin-top: 1rem;
  }

  .contact-form-container {
    max-width: 100%;
  }

  .contact-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    align-self: center;
    width: 100%;
    margin-top: 10px;
    order: 3;
  }

  .contact-illustration img {
    max-height: 200px;
  }

  .contact-social {
    margin-top: 32px;
  }

  .contact-map iframe {
    height: 250px;
  }

  /* --- Footer Mobile --- */
  .footer {
    padding: 48px 0 24px;
  }

  .footer-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }

  .footer-logo {
    display: flex;
    justify-content: center;
  }

  .footer-nav {
    justify-self: center;
  }

  .footer-contact {
    text-align: center;
  }

  .footer-social {
    justify-content: center;
  }
}

/* --- Small mobile (< 480px) --- */
@media (max-width: 480px) {
  .section-title {
    font-size: 2rem;
  }

  .hero-logo {
    max-width: 220px;
  }

  .hero-text {
    font-size: 0.95rem;
  }

  .contact-top .section-title {
    font-size: 2.2rem;
  }

  .plantes-grid {
    max-width: 100%;
  }

  .metier-grid {
    max-width: 100%;
  }
}