/* ==========================================================================
   Responsive — démo 4 « Maison de nuit »
   - ≤ 1024px : tablette (parcours et offres empilés)
   - ≤ 767px  : mobile
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --header-height: 72px;
  }

  .site-header__contact {
    display: none;
  }

  .menu {
    grid-template-columns: minmax(0, 1fr);
  }

  .menu__aside {
    display: none;
  }

  .hero__grid,
  .head,
  .page-head__grid,
  .vision,
  .voices,
  .faq,
  .contact,
  .registration,
  .manifesto__foot {
    grid-template-columns: minmax(0, 1fr);
  }

  .faq__aside,
  .registration__nav {
    position: static;
  }

  .registration__nav {
    display: none;
  }

  /* Parcours : défilement horizontal natif (glisser) */
  .hscroll {
    height: auto;
  }

  .hscroll__sticky {
    position: relative;
    height: auto;
    padding-block: var(--section-space);
  }

  .hscroll__progress {
    display: none;
  }

  .hscroll__track {
    padding-right: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none;
  }

  .hscroll__track::-webkit-scrollbar {
    display: none;
  }

  .step {
    flex-basis: min(86vw, 640px);
    height: auto;
    grid-template-columns: minmax(0, 1fr);
    scroll-snap-align: start;
  }

  .step .photo {
    order: -1;
    aspect-ratio: 16 / 10;
  }

  .step__number {
    margin-bottom: 32px;
  }

  .hscroll__end {
    flex-basis: min(70vw, 360px);
  }

  .values {
    grid-template-columns: minmax(0, 1fr);
  }

  .value,
  .value + .value {
    padding: 32px 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .value__index {
    margin-bottom: 20px;
  }

  .service-row {
    grid-template-columns: 56px minmax(0, 1fr) 120px;
  }

  .service-row__text {
    grid-column: 2 / -1;
    grid-row: 2;
  }

  .service-row__photo {
    grid-column: 3;
    grid-row: 1;
    height: 80px;
  }

  /* Offres : empilées, tout est visible */
  .offers {
    flex-direction: column;
    min-height: 0;
  }

  .offer,
  .offer.is-active {
    flex: none;
    cursor: default;
  }

  .offer__details {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .offer__toggle {
    display: none;
  }

  .offer__price {
    margin-top: 32px;
  }

  .site-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .site-footer__about {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-body: 1rem;
    --section-space: clamp(80px, 20vw, 104px);
    --fs-h2: clamp(2rem, 8.6vw, 2.6rem);
    --fs-display: clamp(2.8rem, 12vw, 3.6rem);
  }

  .site-header__logo {
    width: 140px;
  }

  .button {
    width: 100%;
  }

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

  .hero {
    height: 220svh;
  }

  .hero__mask-text {
    font-size: clamp(3.6rem, 20vw, 5.6rem);
  }

  .hero__title {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .hero__hint {
    display: none;
  }

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

  .figure,
  .figure + .figure {
    padding: 24px 12px 24px 0;
    border-left: 0;
  }

  .figure:nth-child(even) {
    padding-left: 16px;
    border-left: 1px solid var(--line);
  }

  .figure:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .service-row {
    grid-template-columns: 40px minmax(0, 1fr);
    padding: 26px 0;
  }

  .service-row:hover > :not(.service-row__photo),
  .service-row:focus-within > :not(.service-row__photo) {
    transform: none;
  }

  .service-row__photo {
    display: none;
  }

  .collage {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .collage__item:nth-child(n) {
    grid-column: 1;
    margin-top: 0;
    transform: none;
  }

  .collage__item:nth-child(even) {
    width: 78%;
    margin-left: auto;
  }

  .collage__item:nth-child(n) .photo {
    aspect-ratio: 4 / 5;
  }

  .offer__features {
    grid-template-columns: minmax(0, 1fr);
  }

  .deck {
    min-height: 480px;
  }

  .accordion__trigger {
    grid-template-columns: 36px minmax(0, 1fr) 18px;
  }

  .accordion__content {
    padding: 0 0 24px 48px;
  }

  .form__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .registration__head {
    grid-template-columns: minmax(0, 1fr);
  }

  .registration__number {
    grid-row: auto;
  }

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

  .site-footer__wordmark {
    white-space: normal;
    font-size: clamp(3rem, 17vw, 4.8rem);
  }

  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }

  .site-footer__bottom {
    flex-direction: column;
  }
}

@media (max-width: 400px) {
  .site-footer__grid {
    grid-template-columns: 1fr;
  }
}