/* ==========================================================================
   ELEDJI — Responsive
   Mobile-first. Testé sur 360 / 375 / 390 / 430 / 768 / 1024 / 1280 / 1440 / 1920.
   ========================================================================== */

/* ---------- Base mobile (< 768px) ---------- */
.feature-strip {
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.split-grid,
.grid-cols-2 {
  grid-template-columns: 1fr;
}

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

.footer__top {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.manifesto__quote {
  text-align: left;
}

.manifesto__inner {
  text-align: left;
  align-items: flex-start;
}

main {
  padding-bottom: var(--mobile-tabbar-height);
}

/* ---------- ≥ 480px : léger regroupement ---------- */
@media (min-width: 480px) {
  .feature-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ≥ 640px ---------- */
@media (min-width: 640px) {
  .footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- ≥ 768px : tablette — navigation desktop apparaît ---------- */
@media (min-width: 768px) {
  .header {
    height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  }

  .nav-primary {
    display: flex;
  }

  .nav-menu-toggle {
    display: none;
  }

  .tabbar {
    display: none;
  }

  main {
    padding-bottom: 0;
  }

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

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

  .grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .feature-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero {
    min-height: 92svh;
  }

  .hero__slide {
    flex-direction: row;
  }

  .hero__slide::after {
    content: none;
  }

  .hero__panel {
    position: relative;
    z-index: 2;
    width: 45%;
    max-width: 560px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 0 var(--space-8);
    background-color: var(--hero-panel-color, var(--color-obsidian-soft));
  }

  .hero__media {
    position: relative;
    inset: auto;
    flex: 1;
  }

  .manifesto__inner,
  .manifesto__quote {
    text-align: center;
    align-items: center;
  }

  .page-hero {
    padding-block: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + var(--space-9)) var(--space-9);
  }
}

/* ---------- ≥ 1024px : desktop ---------- */
@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-10);
  }

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

/* ---------- ≥ 1280px : grand desktop ---------- */
@media (min-width: 1280px) {
  .carousel__track {
    grid-auto-columns: minmax(260px, 1fr);
  }
}

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

.container,
.section,
.header__inner {
  max-width: 100%;
}