/* ==========================================================================
   MÉRA — Responsive (mobile-first)
     base          <= 767px   mobile  — 4 colonnes
     md            >= 768px   tablet  — 8 colonnes
     lg            >= 1024px  laptop  — 12 colonnes, navigation horizontale
     xl            >= 1440px  large desktop
   ========================================================================== */

/* ---- Visibilité par composition ----------------------------------------- */
/* Le mobile est une composition dédiée : ces utilitaires permettent
   de servir un bloc spécifique plutôt que de réduire le desktop.
   Ils ne font que masquer (jamais de display: revert, qui écraserait
   le display propre au composant).
     .until-md / .from-md          seuil 768px
     .only-mobile / .only-desktop  seuil 1024px */
@media (max-width: 767.98px) {
  .from-md {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .until-md {
    display: none !important;
  }
}

@media (max-width: 1023.98px) {
  .only-desktop {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .only-mobile {
    display: none !important;
  }
}

/* ==========================================================================
   Tablet — 768px → 1023px
   ========================================================================== */

@media (min-width: 768px) {
  :root {
    --grid-columns: 8;
    --grid-gutter: 1.5rem;
    --grid-gap: 1.25rem;
    --header-height: 4rem;
  }

  .col {
    --_span: var(--span-md, var(--grid-columns));
    --_start: var(--start-md, var(--start, auto));
    grid-row: var(--row-md, var(--row, auto));
  }

  /* Footer */
  .site-footer__main {
    grid-template-columns: auto 1fr;
    align-items: center;
  }

  .site-footer__aside {
    grid-column: 1 / -1;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-items: center;
  }

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

/* ==========================================================================
   Laptop — 1024px → 1439px
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --grid-columns: 12;
    --grid-gutter: 2rem;
    --grid-gap: 1.5rem;
    --header-height: 4.5rem;
  }

  .col {
    --_span: var(--span-lg, var(--grid-columns));
    --_start: var(--start-lg, var(--start-md, var(--start, auto)));
    grid-row: var(--row-lg, var(--row-md, var(--row, auto)));
  }

  /* ---- Header : navigation horizontale ---- */

  .site-header__inner,
  .js .site-header__inner {
    flex-wrap: nowrap;
    gap: var(--space-6);
  }

  .site-header__rule {
    display: block;
  }

  .site-header__lang {
    display: inline-flex;
  }

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

  .site-nav,
  .js .site-nav {
    position: static;
    display: block;
    flex: 1;
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
    animation: none;
  }

  .site-nav__list,
  .js .site-nav__list {
    display: flex;
    align-items: center;
    column-gap: var(--space-7);
  }

  .js .site-nav__item {
    border: 0;
  }

  .site-nav__link,
  .js .site-nav__link {
    min-height: var(--tap-min);
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-nav);
  }

  .site-nav__item--cta,
  .js .site-nav__item--cta {
    margin-left: auto;
    padding: 0;
  }

  .site-nav__cta {
    width: auto;
    min-height: 2.5rem;
    padding-inline: var(--space-6);
    font-size: var(--text-2xs);
  }

  /* ---- Footer : une ligne, comme les maquettes ---- */

  .site-footer {
    padding-block: var(--space-6) var(--space-5);
  }

  .site-footer__main {
    grid-template-columns: auto 1fr auto;
    gap: var(--space-8);
  }

  .site-footer__aside {
    grid-column: auto;
    grid-template-columns: none;
    justify-items: end;
    text-align: right;
  }

  .site-footer__nav-list {
    column-gap: var(--space-7);
  }
}

/* ==========================================================================
   Large desktop — >= 1440px
   ========================================================================== */

@media (min-width: 1440px) {
  :root {
    --grid-gutter: 3rem;
    --grid-gap: 2rem;
  }

  .col {
    --_span: var(--span-xl, var(--span-lg, var(--grid-columns)));
    --_start: var(--start-xl, var(--start-lg, var(--start-md, var(--start, auto))));
    grid-row: var(--row-xl, var(--row-lg, var(--row-md, var(--row, auto))));
  }

  .site-nav__list,
  .js .site-nav__list {
    column-gap: var(--space-8);
  }
}

/* ==========================================================================
   Repli navigateurs sans container queries (Safari < 16) : --W est alors
   calculé sur la largeur de la fenêtre. Les compositions restent identiques.
   ========================================================================== */

@supports not (container-type: inline-size) {
  /* `html` élève la spécificité : ces règles doivent l'emporter sur les
     déclarations --W des feuilles de page, chargées après celle-ci. */
  html .hero,
  html .carte-hero,
  html .maison-hero,
  html .jrn,
  html .jrn-hero,
  html .rsv,
  html .rsv-hero,
  html .edito-hero {
    --W: min(100vw, 105rem);
    --frame-left: calc((100vw - var(--W)) / 2);
  }
}