/* =========================================================================
   Mobile header: the primary menu collapses behind a hamburger
   ========================================================================= */
@media (max-width: 900px) {
  .site-header__burger { display: inline-flex; }

  /* Logo on the left; search and the menu button together on the right. */
  .site-header__top-inner {
    grid-template-columns: 1fr auto auto;
    gap: 0;
    padding-block: 14px;
  }
  .site-header__brand { grid-column: 1; grid-row: 1; justify-self: start; }
  .site-header__actions { grid-column: 2; grid-row: 1; gap: 4px; }
  /* Pulled in so the two icons read as a pair; the tap areas still 44px. */
  .site-header__burger { grid-column: 3; grid-row: 1; margin-block: 0; margin-inline: -6px -10px; }
  /* The utility link and the login button move into the open panel. */
  .site-header__global,
  .site-header__login { display: none; }
  .site-header__logo { width: 120px; }
  .site-header__search { width: 44px; height: 44px; }

  .site-header__nav {
    display: none;
    position: absolute;
    inset-inline-start: 0; inset-inline-end: 0;
    top: 100%;
    max-height: calc(100svh - 100%);
    overflow-y: auto;
    background: var(--syn-green-800);
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
  }
  .is-nav-open .site-header__nav { display: block; }
  /* Open, the whole header becomes a full-screen green panel: logo, search
     and close button on top, the links scrolling underneath. */
  .site-header.is-nav-open {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 0;
    /* Frosted green: the page shows through, blurred. */
    background: rgba(38, 70, 0, 0.78);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    backdrop-filter: blur(22px) saturate(140%);
  }
  /* Browsers without the blur get the solid green, so text stays legible. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-nav-open { background: var(--syn-green-800); }
  }
  .site-header.is-nav-open .site-header__top { flex: none; border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .site-header.is-nav-open .site-header__nav {
    position: static;
    background: none;
    flex: 1 0 auto;
    max-height: none;
    overflow: visible;
    box-shadow: none;
  }
  html.is-nav-locked { overflow: hidden; }
  .site-header__nav > .container > * { border-top: 0; }
  .site-header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 4px 0 12px;
  }
  .site-header__nav li { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
  .site-header__nav a,
  .site-header__nav li > span { display: block; padding: 15px 4px; font-size: 1rem; }
  /* The open menu has no search; the panel is for navigating. */
  .is-nav-open .site-header__search { display: none; }

  /* Dropdowns: closed until their chevron (or a label-only parent) is
     tapped, then indented under the parent. */
  .site-header__nav li.menu-item--expanded > :is(a, span) { padding-inline-end: 56px; }
  .site-header__nav li.menu-item--expanded > :is(a, span)::after { content: none; }
  .site-header__nav li.menu-item--expanded > span { cursor: pointer; }
  .site-header__subtoggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: 3px;
    inset-inline-end: -8px;
    width: 52px;
    height: 48px;
    padding: 0;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
  }
  .site-header__subtoggle::before {
    content: "";
    width: 18px; height: 18px;
    background: currentColor;
    -webkit-mask: var(--icon-chevron) center / contain no-repeat;
    mask: var(--icon-chevron) center / contain no-repeat;
    transition: transform 0.2s ease;
  }
  .is-sub-open > .site-header__subtoggle::before { transform: rotate(180deg); }
  .site-header__nav ul ul {
    position: static;
    display: none;
    min-width: 0;
    padding-block: 0 8px; padding-inline: 16px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    /* No panel of its own: the desktop dropdown's frosted glass would draw a
       second green box over the menu's blur. */
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .site-header__nav ul ul::before { content: none; }
  .site-header__nav li.is-sub-open > ul,
  .site-header__nav li.is-sub-open:hover > ul { display: flex; }
  /* Desktop's hover opening does not apply in the panel. */
  .site-header__nav li:not(.is-sub-open):hover > ul,
  .site-header__nav li:not(.is-sub-open):focus-within > ul { display: none; }
  .site-header__nav ul ul li { border-bottom: 0; }
  .site-header__nav ul ul a { padding: 10px 4px; font-size: 0.94rem; opacity: 0.85; }
  /* "Se connecter", right under the menu links: a full-width outline
     button, easy to spot and to tap. */
  .site-header__nav a.site-header__login--in-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 18px 0 0;
    padding: 12px 20px;
    border: 1px solid #fff;
    border-radius: 16px;
    font-size: 0.94rem;
    font-weight: 700;
    color: #fff;
  }
  .site-header__nav a.site-header__login--in-panel:hover,
  .site-header__nav a.site-header__login--in-panel:focus-visible { opacity: 1; background: var(--syn-green-500); }
  /* Beats the block rule the panel applies to its links. */
  .site-header__nav a.site-header__global--in-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0;
    margin: 18px 4px 22px;
  }

  /* Without the nav row the header is shorter, so the hero can start higher. */
  .hero { padding-block: 150px 80px; }
  .hero--center { padding-block: 140px 70px; }
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --section-y: 56px; --r-band: 24px; }

  .hero { min-height: 0; padding-block: 130px 64px; }
  .hero__actions { margin-top: 32px; }
  .hero__actions a { min-height: 48px; padding: 12px 20px; }

  .section__head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .section__head--centered { align-items: center; }
  .section__head--split { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .card-grid__items,
  .features__items,
  .block-ref__content .views-element-container > div { grid-template-columns: 1fr; }

  .card-grid__items .card__media { aspect-ratio: 4 / 3; }
  .spotlight { grid-template-columns: 1fr; }
  .spotlight .card__title { font-size: 1.5rem; }
  .numbered__media { min-height: 260px; }

  .media-band__head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }

  /* Two independent columns rather than grid rows, so a wrapped label never
     adds space beside it: every link has the same gap below it. */
  .site-footer__menu-col ul { display: block; columns: 2; column-gap: 20px; }
  .site-footer__menu-col ul > li { break-inside: avoid; margin-bottom: 12px; }
  .site-footer__menu-col li,
  .site-footer__menu-col a,
  .site-footer__menu-col li > span { line-height: 1.35; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
  .site-footer__newsletter,
  .newsletter,
  .site-footer__tagline { max-width: none; }
  .newsletter .form-text,
  .newsletter__input { width: 100%; }
  .site-footer__tagline { margin-bottom: 28px; }
  .site-footer__legal-links { flex-wrap: wrap; gap: 8px 20px; }

  /* The card in view takes its hover look, so every card keeps the panel's
     padding and a transparent top rule (no jump when it lights up), inside
     the 16px gutter rather than outset past it. */
  .features--media .feature { margin: 0; padding: 16px 16px 20px; border-top: 4px solid transparent; border-radius: 20px; }

  /* The newsletter pill has a fixed-width button; let it shrink so the whole
     field stays inside the gutter on phones. */
  .newsletter { max-width: 100%; }
  .newsletter__submit { width: auto; padding: 12px 20px; }
  .newsletter__input { padding: 10px 14px; }
}