/* ===================================================
   AquaNeo — Responsive
   =================================================== */

/* ---- Tablet (≤ 1024px) ---- */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 140px;
    padding-bottom: 80px;
    gap: 4rem;
  }

  .hero__content {
    align-items: center;
  }

  .hero__badge,
  .hero__sub { margin-inline: auto; }

  .hero__actions { justify-content: center; }

  .hero__scroll { display: none; }

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

  .steps {
    flex-direction: column;
    gap: 1rem;
  }

  .step__connector {
    flex-direction: row;
    padding: 0;
    gap: 4px;
  }

  .connector-line {
    width: 24px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aqua), transparent);
  }

  .tech__layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .tech__diagram { width: 280px; height: 280px; }

  .diagram-ring--outer { width: 260px; height: 260px; }
  .diagram-ring--mid   { width: 180px; height: 180px; }
  .diagram-ring--inner { width: 110px; height: 110px; }

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

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

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

  .diagram-label--right { right: -60px; font-size: 0.62rem; }
  .diagram-label--left  { left:  -60px; font-size: 0.62rem; }
}

/* ---- Mobile (≤ 768px) ---- */
@media (max-width: 768px) {
  :root { --section-pad: 80px 0; }

  .nav__links { display: none; }

  .nav__burger { display: flex; }

  .btn--nav { display: none; }

  .section-title { font-size: clamp(1.75rem, 6vw, 2.5rem); }

  .hero__title { font-size: clamp(2.2rem, 8vw, 3rem); }

  .hero__sub { font-size: 1rem; }

  .bottle-wrap { width: 300px; height: 300px; }
  .product-img-wrap { width: 220px; height: 220px; }

  .ring--1 { width: 200px; height: 200px; }
  .ring--2 { width: 250px; height: 250px; }
  .ring--3 { width: 300px; height: 300px; }

  /* ---- Carrousels ---- */
  .concept__grid,
  .usecases__grid,
  .team__grid,
  .eco__grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1rem;
    /* Déborde du container pour aller bord à bord */
    margin-left: -24px;
    margin-right: -24px;
    padding: 0.5rem 24px 1.5rem;
  }

  .concept__grid::-webkit-scrollbar,
  .usecases__grid::-webkit-scrollbar,
  .team__grid::-webkit-scrollbar,
  .eco__grid::-webkit-scrollbar { display: none; }

  /* Largeur de chaque carte — l'excédent droit = hint de swipe */
  .concept-card  { flex: 0 0 80vw; scroll-snap-align: center; }
  .usecase-card  { flex: 0 0 74vw; scroll-snap-align: center; }
  .team-card     { flex: 0 0 74vw; scroll-snap-align: center; }
  .eco-stat      { flex: 0 0 58vw; scroll-snap-align: center; }

  /* Affichage des dots dans le carrousel */
  .carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
  }

  /* Désactiver le hover lift dans le carrousel */
  .concept-card:hover,
  .usecase-card:hover,
  .team-card:hover,
  .eco-stat:hover { transform: none; }

  .usecase-card::before { opacity: 1; }

  /* Sections avec overflow : éviter le clip du carrousel */
  .concept,
  .eco,
  .usecases,
  .team { overflow: visible; }

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

  .global__inner { padding: 2.5rem 1.5rem; }
  .global__stats { grid-template-columns: 1fr; gap: 2rem; }

  .cta-layout { grid-template-columns: 1fr; }
  .cta-capsule-wrap { width: 200px; height: 200px; }

  .cta-form__row { flex-direction: column; }

  .cta-form input[type="email"],
  .cta-form .btn--primary {
    width: 100%;
    justify-content: center;
  }

  .cta-trust {
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
  }
}

/* ---- Small mobile (≤ 480px) ---- */
@media (max-width: 480px) {
  .hero { padding-top: 120px; }

  .hero__actions { flex-direction: column; align-items: center; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Cartes encore plus larges sur petit écran */
  .concept-card  { flex: 0 0 88vw; scroll-snap-align: center; }
  .usecase-card  { flex: 0 0 84vw; scroll-snap-align: center; }
  .team-card     { flex: 0 0 84vw; scroll-snap-align: center; }
  .eco-stat      { flex: 0 0 72vw; scroll-snap-align: center; }

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

  .tech__badges { flex-direction: column; }

  .step { padding: 2rem 1.25rem; }

  .global__stats { grid-template-columns: 1fr; }
}