/* =====================================================================
   LE JARDIN D'ELIO — responsive.css
   Adaptations : ordinateur portable, tablette, mobile.
   Approche : le design de base est « desktop-first » modéré ;
   ces requêtes ajustent aux paliers clés.
   ===================================================================== */

/* ---------- Grand portable ---------- */
@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .footer__brand { grid-column: 1 / -1; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Tablette ---------- */
@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    position: fixed;
    inset: 76px 0 auto 0;
    background: var(--c-cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-l);
    transform: translateY(-120%);
    transition: transform var(--t);
    padding: var(--space-m) var(--space-s) var(--space-l);
  }
  .nav__menu.is-open { transform: translateY(0); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--line); }
  .nav__link { display: block; padding: .9em .3em; font-size: var(--step-1); }
  .nav__link::after { display: none; }
  .nav__cta { margin-top: var(--space-s); }

  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__visual { order: -1; }
  .hero__logo { width: min(78%, 360px); }
  .hero__actions, .hero__stats { justify-content: center; }
  .hero__tag { margin-inline: auto; }

  .split, .locate { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Mobile ---------- */
@media (max-width: 620px) {
  :root { --space-2xl: 4rem; --space-xl: 3rem; }
  .grid--2, .grid--3, .grid--4, .grid--auto { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
  .workshop { grid-template-columns: 72px 1fr; }
  .hero__stats { gap: var(--space-m); }
  .stat { flex: 1 1 40%; }
  .frieze { height: 34px; }
  .carousel__track > * { flex-basis: 82%; }
  .btn { width: auto; }
  .hero__actions .btn { flex: 1 1 auto; justify-content: center; }
  .section__head--center { text-align: left; }
}

/* ---------- Très petits écrans ---------- */
@media (max-width: 380px) {
  .nav__brand-text { display: none; }
}

/* ---------- Impression ---------- */
@media print {
  .site-header, .site-footer, .tipouss, .leaves, .hero__halo, .frieze { display: none !important; }
  body { background: #fff; color: #000; }
}