/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .numbered { grid-template-columns: 1fr; gap: 40px; }
  .numbered__media { min-height: 380px; }
  .numbered__panel { padding-top: 0; }
  .numbered__items { width: auto; margin: 44px 0 0; }
}

@media (max-width: 1024px) {
  :root { --section-y: 72px; }

  /* Recette: tablets keep the desktop columns; only the gaps tighten. */
  .section__head--split { gap: 32px; }
  .timeline__head { grid-template-columns: 1fr; gap: 24px; }
  .timeline__years { justify-content: flex-start; padding-top: 0; }
  /* Recette: the arrows move inside the screen, the card narrows between
     them and keeps some height. */
  .timeline__stage { padding-inline: 44px; }
  .timeline__nav--prev { inset-inline-start: 0; }
  .timeline__nav--next { inset-inline-end: 0; }
  .milestone { min-height: 340px; padding: 40px 32px; }
  .milestone__ghost { font-size: 8rem; inset-inline-end: 20px; }

  .card-grid__items,
  .features__items,
  .block-ref__content .views-element-container > div { gap: 24px; }

  .spotlight { grid-template-columns: 590fr 396fr; }
  .spotlight__feature .card { min-height: 480px; }
  .spotlight .card__body { padding: 28px; }

  /* Recette: the tiles stay side by side as on desktop, the row shorter. */
  .media-band--feature .media-band__items { gap: 16px; }
  .media-band--feature .media-tile__media { height: clamp(220px, 42vw, 479px); }

  /* minmax(0, …) lets the column shrink to the screen instead of growing to
     its widest content (the newsletter form, long menu labels). */
  /* Recette: the menu stays beside the newsletter field on tablets. */
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px 32px; }
  .site-header__nav ul { justify-content: flex-start; gap: 12px 24px; }
}

@media (max-width: 720px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .site-footer__menu-col { padding-top: 0; }
  .timeline__stage { padding-inline: 26px; }
  .timeline__nav { width: 26px; }
  .timeline__nav::before { width: 14px; height: 14px; }
  .milestone { min-height: 300px; padding: 32px 22px; }

  /* Phones: two equal tiles, no widening on touch. */
  .media-band--feature .media-band__items { gap: 10px; }
  .media-band--feature .media-band__item,
  .media-band--feature .media-band__item:first-child,
  .media-band--feature .media-band__items:has(.media-band__item:hover) .media-band__item:hover { flex: 1 1 0; }
  .media-band--feature .media-tile__media { height: auto; aspect-ratio: 4 / 5; }
  .media-band--feature.media-band--single .media-tile__media { aspect-ratio: 16 / 9; }
  .media-band--feature .media-tile__media::after { width: 48px; height: 48px; background-size: 16px; }
}

@media (max-width: 480px) {
  /* Recette: the numbered cards (two a row on small screens) stack. */
  .numbered__items { grid-template-columns: 1fr; gap: 16px; }
  /* Stacked 16px apart, an 18px lift would cover the card above. */
  .numbered__items .card:hover,
  .numbered__items .card:focus-within { transform: translateY(-6px); }

  /* Recette (Mobile L and below): one video per row, a little wider than
     tall so the pair does not run too long. */
  .media-band--feature .media-band__items { flex-direction: column; gap: 14px; }
  .media-band--feature .media-tile__media { aspect-ratio: 4 / 3; }

  /* Recette: once the hero buttons stack, they share one width. */
  .hero__actions > * > :nth-child(-n + 2) a { width: 100%; justify-content: center; }
  /* The primary button's white disc sits 26px from its right edge; at full
     width the arrow is pinned there too (instead of following the centred
     label), so the disc stays behind it. */
  .hero__actions > * > :first-child a { padding-inline: 58px; }
  .hero__actions > * > :first-child a::after {
    position: absolute;
    top: 50%;
    inset-inline-end: 26px;
    margin-top: -12px;
  }
}
@media (max-width: 400px) {
  /* Room for the label on one line beside the pinned arrow. */
  .hero__actions > * > :first-child a { padding-inline: 44px 54px; font-size: 0.875rem; }
  .hero__actions > * > :first-child a::before,
  .hero__actions > * > :first-child a::after { inset-inline-end: 18px; }
  .hero__actions > * > :nth-child(-n + 2) a { text-align: center; }
}
@media (max-width: 340px) {
  .hero__actions > * > :first-child a { padding-inline: 14px 48px; font-size: 0.8rem; }
  .hero__actions > * > :first-child a::before,
  .hero__actions > * > :first-child a::after { inset-inline-end: 14px; }
}

@media (max-width: 720px) {
  /* Recette (Actualités, À la une): the text on its own row, the photo
     below it. */
  .card-grid--featured .card { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .card-grid--featured .card__body { order: -1; }
  .card-grid--featured .card__media { aspect-ratio: 16 / 10; }
}