/*
 * frontend + editor (Gutenberg) content (in the iframe)
 * does not apply to the editor (Gutenbeg) UI in general
 */

/* Note on handling the absence of gaps between LPU sections ("bands").
 * By default, WordPress adds a gap between top-level page blocks through the
 * parent container's blockGap setting.
 *
 * In this theme, the page templates set blockGap to zero on wp:post-content so
 * that the consecutive top-level editorial sections (the ones directly inside
 * the root container) touch, as required by the design. When several sections
 * are nested in another container, set blockGap to zero on that container too.
 *
 */

/*****************************************************************************/
/* DECORATIVE MOTIFS                                                         */
/*****************************************************************************/
/* Decorative motifs are applied as backgrounds, not editorial images. */
/* to make repeatable would have to : 
   background-repeat: repeat-y;
   remove background-size: cover;*/
.lpu-motif {
  /* is at the top. Pattern may be at the top then nothing below if the content
  taller than the pattern*/
  background-position: center top;
  /*patterns not designed to be repeatable*/
  background-repeat: no-repeat;
  background-repeat: repeat-y;
  /* take entire width */
  background-size: cover;
}

.lpu-motif-1-bandeau {
  background-image: url("../images/motif-1-bandeau.svg");
}

.lpu-motif-1-carre {
  background-image: url("../images/motif-1-carre.svg");
}

.lpu-motif-2-bandeau {
  background-image: url("../images/motif-2-bandeau.svg");
}

.lpu-motif-2-carre {
  background-image: url("../images/motif-2-carre.svg");
}

.lpu-motif-3-bandeau {
  background-image: url("../images/motif-3-bandeau.svg");
}

.lpu-motif-3-carre {
  background-image: url("../images/motif-3-carre.svg");
}

.lpu-motif-4-bandeau {
  background-image: url("../images/motif-4-bandeau.svg");
}

.lpu-motif-4-carre {
  background-image: url("../images/motif-4-carre.svg");
}

.lpu-motif-5-bandeau {
  background-image: url("../images/motif-5-bandeau.svg");
}

.lpu-motif-5-carre {
  background-image: url("../images/motif-5-carre.svg");
}

.lpu-motif-7-bandeau {
  background-image: url("../images/motif-7-bandeau.svg");
}

.lpu-motif-7-carre {
  background-image: url("../images/motif-7-carre.svg");
}

.lpu-motif-8-bandeau {
  background-image: url("../images/motif-8-bandeau.svg");
}

.lpu-motif-8-carre {
  background-image: url("../images/motif-8-carre.svg");
}

/*****************************************************************************/
/* SPLIT-SECTION FRAMES                                                      */
/*****************************************************************************/
.wp-block-lpu-split-zone--frame-none {
  background: transparent;
}

.wp-block-lpu-split-zone--frame-ecru {
  background-color: var(--wp--preset--color--ecru);
}

.wp-block-lpu-split-zone--frame-green {
  background-color: var(--wp--preset--color--vert-fonce);
}

.wp-block-lpu-split-zone--frame-yellow {
  background-color: var(--wp--preset--color--jaune);
}

.wp-block-lpu-split-zone--frame-motif-1 {
  background: url("../images/motif-1-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-2 {
  background: url("../images/motif-2-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-3 {
  background: url("../images/motif-3-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-4 {
  background: url("../images/motif-4-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-5 {
  background: url("../images/motif-5-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-7 {
  background: url("../images/motif-7-carre.svg") center / cover no-repeat;
}

.wp-block-lpu-split-zone--frame-motif-8 {
  background: url("../images/motif-8-carre.svg") center / cover no-repeat;
}

/*****************************************************************************/
/* HEADER SHELL                                                              */
/*****************************************************************************/
.lpu-header {
  /* anchors mega menu */
  position: relative;
  z-index: 10;
  padding: 1rem clamp(1rem, 3vw, 3rem);
  background: var(--wp--preset--color--ecru);
  /* Shared colour for the logo and all menu foreground elements. */
  --lpu-header-foreground: var(--wp--preset--color--vert-fonce);
}

/*****************************************************************************/
/* TRANSPARENT HEADER STATE                                                  */
/*****************************************************************************/
/* .lpu-header-transparent = must use transparent header.
 * .lpu-header-transparent is set on the body by the php code of the theme.
 * Set if meta on a post, meta set when user activate a custom setting in the
 * page editor.
 */
body.lpu-header-transparent .lpu-header {
  /* Keep the transparent Home header out of normal flow so that the content
  can be at the top, right under the header (instead of below the header). */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  background: transparent;
}

/* Absolute positioning removes the transparent header from the normal
 * document flow, so it is not naturally under the admin bar.
 * Therefore account for WordPress's fixed admin bar when an editor
 * is previewing the page while logged in. Without this offset the admin bar
 * covers the top of the header and makes its contents appear shorter than
 * the opaque state. */
body.admin-bar.lpu-header-transparent .lpu-header {
  top: 32px;
}
/* WordPress uses a taller admin bar on narrow screens. */
@media screen and (max-width: 782px) {
  body.admin-bar.lpu-header-transparent .lpu-header {
    top: 46px;
  }
}

/* Applied to the element which is after the <header> : <main>. 
 * Must remove the top margin when using the transparent header, otherwise
 * there would be an empty space at the top of <main> : the margin.
 * With the non transparent header it's not much of a problem : just some
 * extra empty space on top. 
 */
body.lpu-header-transparent .wp-site-blocks > main.wp-block-group {
  margin-block-start: 0;
}

/* On a transparent header, the editor setting controls the logo and all menu
 * foreground elements independently from the header background. */
body.lpu-header-foreground-ecru .lpu-header {
  --lpu-header-foreground: var(--wp--preset--color--ecru);
}

/* Every open menu uses green on ecru, regardless of the page settings. */
body
  .lpu-header:has(
    /* in mobile mode : clicked on the hamburger buton and the mobile menu is
    open */
    .wp-block-navigation__responsive-container.is-menu-open,
    /* Core's actual expanded state, for mouse, touch and keyboard alike. */
    .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    .wp-block-navigation__submenu-icon[aria-expanded="true"]
  ) {
  --lpu-header-foreground: var(--wp--preset--color--vert-fonce);
  background: var(--wp--preset--color--ecru);
}

/*****************************************************************************/
/* HEADER FOREGROUND, FOCUS, AND LOGO VARIANTS                               */
/*****************************************************************************/
/* Make sure that the elements of the header have the --lpu-header-foreground
color */
/* menu items (technically their content) */
.lpu-header .wp-block-navigation-item__content,
 /* arrow of menu items with submenus */
.lpu-header .wp-block-navigation__submenu-icon,
 /* hamburger and mobile-overlay close buttons */
.lpu-header .wp-block-navigation__responsive-container-open,
.lpu-header .wp-block-navigation__responsive-container-close {
  color: var(--lpu-header-foreground) !important;
}

/* There are two logo variants (configured in the Customizer).
 * custom-logo is the green variant and lpu-logo-ecru is the ecru variant.
 * They follow the selected foreground colour. */
body.lpu-header-foreground-ecru
  .lpu-header
  .wp-block-site-logo:where(:has(img.lpu-logo-ecru))
  img.custom-logo {
  display: none;
}

body.lpu-header-foreground-ecru
  .lpu-header
  .wp-block-site-logo
  img.lpu-logo-ecru {
  display: block;
}

/* Every open menu uses the green logo on its opaque ecru background. */
body
  .lpu-header:has(
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    .wp-block-navigation__submenu-icon[aria-expanded="true"]
  )
  .wp-block-site-logo
  img.custom-logo {
  display: block;
}

body
  .lpu-header:has(
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation-submenu__toggle[aria-expanded="true"],
    .wp-block-navigation__submenu-icon[aria-expanded="true"]
  )
  .wp-block-site-logo
  img.lpu-logo-ecru {
  display: none;
}

/*****************************************************************************/
/* HEADER NAVIGATION CONTAINER                                               */
/*****************************************************************************/
/* The site logo sits inside the navigation, in the center grid track. Core
 * wraps it in a nav item li; only its own track is sized (auto), so the logo
 * never overlaps the two flanking nav-groups. */
.lpu-header .wp-block-site-logo {
  margin: 0;
  width: var(--wp--custom--header--logo-width);
  max-width: 100%;
}

.lpu-header .lpu-header__logo {
  max-width: min(var(--wp--custom--header--logo-width), calc(100vw - 2rem));
}

.lpu-header .wp-block-site-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* The header link stacks the green logo (custom_logo) and the ecru variant in
 * the same grid cell; the visibility rules above pick which one shows. */
.lpu-header__logo .custom-logo-link {
  display: grid;
  width: 100%;
}

.lpu-header__logo .custom-logo-link > img {
  grid-area: 1 / 1;
}

/* Hide the ecru variant by default. The selected and open-state rules above
 * have greater specificity and choose the visible variant. */
.lpu-header .wp-block-site-logo img.lpu-logo-ecru {
  display: none;
}

.lpu-header .wp-block-navigation {
  /* Limit maximum width of the menu to wideSize (theme.json) */
  width: min(100%, var(--wp--style--global--wide-size, 1200px));
  margin-inline: auto;
  min-width: 0;
  max-width: none;
}

.lpu-header .wp-block-navigation__responsive-container,
.lpu-header .wp-block-navigation__responsive-close,
.lpu-header .wp-block-navigation__responsive-dialog,
.lpu-header .wp-block-navigation__responsive-container-content {
  width: 100%;
}

.lpu-header .wp-block-navigation__container {
  width: 100%;
  max-width: none;
  align-items: center;
}

/* Desktop three-region layout: the two nav-groups share the side tracks and
 * the site logo keeps the center track, so the logo is centered by the grid
 * itself instead of by absolute positioning. Scoped to the closed container
 * so the mobile overlay keeps Core's single-column list. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 1rem;
}

/*****************************************************************************/
/* HEADER LINK TYPOGRAPHY AND INTERACTION                                    */
/*****************************************************************************/
/* Increase specificity to beat Core CSS that reduces padding with the following
selector :
`.wp-block-navigation-item.open-on-click .wp-block-navigation-submenu__toggle` */
.lpu-header
  .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
  padding-inline: 0.75rem;
  font-family: var(--wp--preset--font-family--ruden);
  font-size: 0.95rem;
  line-height: 1.1;
  text-transform: uppercase;
}

.lpu-header .wp-block-navigation-item__content:focus-visible,
.lpu-header .wp-block-navigation__submenu-icon:focus-visible,
.lpu-header .wp-block-navigation__responsive-container-open:focus-visible,
.lpu-header .wp-block-navigation__responsive-container-close:focus-visible,
.lpu-header .custom-logo-link:focus-visible {
  outline: 2px solid var(--lpu-header-foreground);
  /* too much offset, default is ok */
  /* outline-offset: 3px; */
}

.lpu-header .wp-block-navigation-item__content:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.lpu-header .wp-block-navigation__submenu-icon {
  color: var(--lpu-header-foreground);
}

.lpu-header .wp-block-navigation__responsive-container.is-menu-open {
  box-sizing: border-box;
  padding: 1.5rem;
  background: var(--wp--preset--color--ecru);
  color: var(--lpu-header-foreground);
}

.lpu-header
  .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content {
  font-size: 1.15rem;
}

/* The site logo is a nav item on desktop; in Core's open overlay it would
 * become an entry of the vertical list, so it is hidden there. */
.lpu-header
  .wp-block-navigation__responsive-container.is-menu-open
  li:has(.lpu-header__logo) {
  display: none;
}

/*****************************************************************************/
/* HEADER NAVIGATION GROUPS                                                  */
/*****************************************************************************/
/* Desktop nav-group: each group is a grid item hugging its rail edge.
 * min-width: 0 lets its 1fr track shrink; overflow: hidden clips a
 * still-too-wide group while navigation.js decides whether to switch to
 * compact. Scoped to the closed container so the mobile overlay keeps Core's
 * stacked list. */
.lpu-header .lpu-nav-group__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group {
  position: static;
  min-width: 0;
  /* overflow: hidden; */
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group__list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.25rem, 1vw, 1rem);
  min-width: 0;
}

/* content of nav section on the left justified towards the logo */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-header__navigation
  > .wp-block-navigation-item:first-child {
  justify-content: end;
}

/* The closing group sits in the last (1fr) track; pack its items toward the
 * rail's outer edge so the three regions mirror each other. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group:last-child
  .lpu-nav-group__list {
  justify-content: flex-end;
}

/* Keep every top-level label on one line; without nowrap the text wraps
 * inside a shrinking group and the overflow check never triggers. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group
  > .lpu-nav-group__list
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  white-space: nowrap;
}

/*****************************************************************************/
/* DESKTOP SUBMENU / MEGA-MENU PANEL                                         */
/*****************************************************************************/
/* Desktop: keep the whole nav stack static so the full-width submenu panel
 * anchors to .lpu-header (position: relative) rather than to the nav rail. */
.lpu-header .wp-block-navigation,
.lpu-header .wp-block-navigation__responsive-container:not(.is-menu-open),
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__responsive-close,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__responsive-dialog,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__responsive-container-content {
  position: static;
}

/* Mega-menu: where the submenu lives inside a nav-group list, it still opens
 * as a full-width panel under the header bar. */
.lpu-header .wp-block-navigation-submenu {
  position: static;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container {
  top: calc(100% - var(--lpu-submenu-overlap, 0px));
  /* Immediate switch to opaque to match the header. Without it the mega-menu
    fades (coming from  Core's panel fade)
   * Without it the header would immediately while the mega-menu would fade in
   * which looked wrong. */
  transition: none;
  inset-inline: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--md);
  width: auto;
  min-width: 0;
  height: auto;
  padding-block-start: calc(
    var(--wp--preset--spacing--md) + var(--lpu-submenu-overlap, 0px)
  );
  padding-inline: clamp(
    var(--wp--preset--spacing--md),
    3vw,
    var(--wp--preset--spacing--lg)
  );
  padding-block-end: var(--wp--preset--spacing--md);
  background: var(--wp--preset--color--ecru) !important;
  border: 0;
  color: var(--lpu-header-foreground);
  z-index: 1;
}

/* Raise the controls, not their parent items: the full-width panels must
 * remain in the header's stacking context so siblings can sit above them. */
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group__list
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group__list
  > .wp-block-navigation-item
  > .wp-block-navigation__submenu-icon,
.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-site-logo {
  position: relative;
  z-index: 2;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  flex: 0 0 var(--wp--custom--header--mega-menu-item-column-width);
  width: var(--wp--custom--header--mega-menu-item-column-width);
  min-width: 0;
}

.lpu-header
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content {
  display: block;
  padding: var(--wp--preset--spacing--xs) 0;
  width: 100%;
  min-width: 0;
  /* The generic header link rule above supplies the same Ruden typography,
   * uppercase treatment, and interaction as the parent menu items. */
  text-wrap: balance;
}

.lpu-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
  padding-inline: 0;
}

/*****************************************************************************/
/* OPTIONAL MEGA-MENU EXTRA CONTENT                                          */
/*****************************************************************************/
/* Optional extra mega-menu content (intro, images, see navigation-content.php)
Hidden by default, enabled on desktop only.*/
.lpu-menu-link-image,
.lpu-menu-intro {
  display: none;
}

/* desktop-only code */
@media (min-width: 601px) {
  /* Without an intro column, distribute the fixed-width link cards across
   * the panel instead of leaving the whole group aligned to the left edge. */
  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:not(:has(> .lpu-menu-intro)) {
    justify-content: space-evenly;
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:not(:has(> .lpu-menu-intro))
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    text-align: center;
  }

  /* Have the (optional) first item .lpu-menu-intro reserving the first
   * column of the grid, the the other items take the remainder columns.
   * It is a bit tricky to implement with gridbox.
   * Reserve the intro column for up to 10 rows of fixed-width links.
   * Row gaps must stay zero: otherwise unused rows add 10 empty gaps.
   * Link margins supply the vertical spacing only on occupied rows. */
  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:has(> .lpu-menu-intro) {
    display: grid;
    grid-template-columns:
      calc(
        var(--wp--custom--header--mega-menu-intro-column-width) +
          var(--wp--preset--spacing--sm)
      )
      repeat(auto-fill, var(--wp--custom--header--mega-menu-item-column-width));
    grid-auto-flow: row;
    grid-auto-rows: auto;
    align-content: start;
    row-gap: 0;
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container:has(> .lpu-menu-intro)
    > .wp-block-navigation-item {
    margin-block-end: var(--wp--preset--spacing--sm);
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container
    > .lpu-menu-intro {
    display: block;
    grid-column: 1;
    grid-row: 1 / span 10;
    width: var(--wp--custom--header--mega-menu-intro-column-width);
    padding-block: var(--wp--preset--spacing--xs);
    font-family: var(--wp--preset--font-family--dm-sans);
    font-size: var(--wp--preset--font-size--text);
    line-height: 1.5;
  }

  .lpu-header
    nav:not(.lpu-navigation--compact)
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group__list
    > .wp-block-navigation-submenu
    > .wp-block-navigation__submenu-container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content
    > .lpu-menu-link-image {
    display: block;
  }
}

.lpu-header .lpu-menu-link-image,
.lpu-header .lpu-menu-intro-image {
  width: 100%;
  height: auto;
}

.lpu-header .lpu-menu-link-image {
  margin-block-start: var(--wp--preset--spacing--xs);
  aspect-ratio: var(--wp--custom--header--mega-menu-item-image-ratio);
  object-fit: cover;
}

.lpu-header .lpu-menu-intro-image {
  margin-block-end: var(--wp--preset--spacing--xs);
  aspect-ratio: var(--wp--custom--header--mega-menu-intro-image-ratio);
  object-fit: cover;
}

.lpu-header .lpu-menu-intro p {
  margin: 0;
}

.lpu-header .lpu-menu-intro p + p {
  margin-block-start: var(--wp--preset--spacing--xs);
}

.lpu-header .lpu-menu-intro-heading {
  font-weight: 700;
}

/*****************************************************************************/
/* COMPACT HEADER NAVIGATION                                                 */
/*****************************************************************************/
/* Compact presentation, selected by navigation.js when one nav-group no
 * longer fits in its track. The grid keeps the logo in the middle; the two
 * groups are dropped. Core still owns the open overlay; these rules only
 * choose the closed presentation, mirroring Core's own responsive (<600px)
 * presentation so the switch between the two is seamless. */
.lpu-header .lpu-header__navigation.lpu-navigation--compact {
  display: block;
}

.lpu-header
  .lpu-header__navigation.lpu-navigation--compact
  .wp-block-navigation__responsive-container-open {
  box-sizing: border-box;
  display: flex;
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  position: absolute;
  inset-inline-start: clamp(1rem, 3vw, 3rem);
  inset-block-start: 50%;
  z-index: 3;
  transform: translateY(-50%);
}

.lpu-header
  .lpu-header__navigation.lpu-navigation--compact
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .wp-block-navigation__container {
  display: flex;
  justify-content: center;
}

.lpu-header
  .lpu-header__navigation.lpu-navigation--compact
  .wp-block-navigation__responsive-container:not(.is-menu-open)
  .lpu-nav-group {
  display: none;
}

/*****************************************************************************/
/* PHONE PRESENTATION                                                        */
/*****************************************************************************/
/* Below 600px Core hides the entire closed Navigation container so only the
 * hamburger survives. Keep the compact closed presentation on phones too:
 * centered logo with the open button at the rail's start, the same closed
 * look the JavaScript class produces at larger widths. */
@media screen and (max-width: 600px) {
  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: block;
  }

  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__container {
    display: flex;
    justify-content: center;
  }

  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group {
    display: none;
  }

  .lpu-header
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .wp-block-navigation__responsive-container-close {
    display: none;
  }

  .lpu-header
    nav.lpu-header__navigation
    .wp-block-navigation__responsive-container-open {
    box-sizing: border-box;
    display: flex;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    position: absolute;
    inset-inline-start: clamp(1rem, 3vw, 3rem);
    inset-block-start: 50%;
    z-index: 3;
    transform: translateY(-50%);
  }
}

/*****************************************************************************/
/* HEADER RESPONSIVE (900px)                                                 */
/*****************************************************************************/
@media (max-width: 900px) {
  .lpu-header {
    min-height: 4.5rem;
    padding: 0.75rem 1rem;
  }

  /* Shrink the grid item itself; limiting only the image height leaves an
   * unnecessarily wide logo track (and can distort the image). */
  .lpu-header .wp-block-site-logo {
    width: var(--wp--custom--header--reduced-logo-width);
  }

  .lpu-header
    .wp-block-navigation__responsive-container:not(.is-menu-open)
    .lpu-nav-group
    > .lpu-nav-group__list
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    font-size: var(--wp--custom--header--reduced-font-size);
  }
}

/*****************************************************************************/
/* HERO SECTION                                                              */
/*****************************************************************************/
/* Little line (in css, shoud probably be a graphic.
   The title is optional. Keeping the separator on the heading makes the
 * title + curve variant automatic and removes both when the title is deleted. */
.lpu-hero .lpu-hero__title::after {
  display: block;
  width: 11rem;
  height: 0.65rem;
  margin-block-start: var(--wp--preset--spacing--xs);
  border-bottom: 1.5px solid currentColor;
  border-radius: 0 0 27.5% 20%;
  content: "";
  transform: rotate(-0.3deg);
}

/*****************************************************************************/
/* CARD GRID                                                                 */
/*****************************************************************************/
/* gives more space above the title */
.lpu-card-grid {
  padding-block: var(--wp--preset--spacing--xl);
}

/* allows using margin: auto on the buttons to push them down so they are all
lined up at the bottom
*/
.lpu-card {
  display: flex;
  flex-direction: column;
}

/* makes the body expand to take all the size, allows having the buttons inside
being at the bottom  */
.lpu-card__body {
  flex-grow: 1;
}

/* make the titles be in uppercase through block markup instead */
/* .lpu-card__body > .wp-block-heading {
  text-transform: uppercase;
} */

/* push the button to the bottom */
.lpu-card__body .wp-block-buttons {
  margin-block-start: auto;
}

/*****************************************************************************/
/* FARM SELECTOR                                                             */
/*****************************************************************************/
.lpu-farm-selector {
  padding-block: calc(var(--wp--custom--spacing--section) * 2);
}

.lpu-farm-selector > .wp-block-heading {
  margin-block-end: var(--wp--custom--spacing--section);
}

.lpu-farm-selector__item {
  position: relative;
}

/* must replace with proper graphical elements */
.lpu-farm-selector__item + .lpu-farm-selector__item::before {
  position: absolute;
  top: 50%;
  left: 0;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  content: "✳";
  transform: translate(-50%, -50%);
}

.lpu-farm-selector__item .wp-block-heading {
  /* not used, another declaration uses !important */
  font-size: clamp(2rem, 5vw, 3.5rem);
}

.lpu-farm-selector__item a {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.lpu-farm-selector__item a:hover,
.lpu-farm-selector__item a:focus-visible {
  text-decoration-thickness: 3px;
}

/*****************************************************************************/
/* TEXT COLUMNS BAND                                                         */
/*****************************************************************************/
.lpu-columns-text {
  /* This composition intentionally leaves more room below the messages, as
   * in the "titre-colonnes" reference. Keep the values tied to the shared
   * spacing scale rather than introducing one-off pixel measurements. */
  padding-block-start: calc(var(--wp--custom--spacing--section) * 2);
  padding-block-end: calc(
    var(--wp--custom--spacing--section) * 2 + var(--wp--preset--spacing--lg)
  );
}

.lpu-columns-text > .lpu-columns-text__title {
  margin-block-end: calc(var(--wp--preset--spacing--xl) * 2);
  text-wrap: balance;
}

/* repeat the class selector to increase specificity */
.lpu-columns-text__columns.lpu-columns-text__columns {
  gap: var(--wp--preset--spacing--xl);
}

.lpu-columns-text__columns .wp-block-paragraph {
  max-width: 18rem;
  margin-block: 0;
  margin-inline: auto;
  text-align: center;
}

/*****************************************************************************/
/* GRAPHIC CALL-TO-ACTION BAND                                               */
/*****************************************************************************/
.lpu-graphic-band {
  padding-block: var(--wp--custom--spacing--section);
}

.lpu-graphic-band > .wp-block-heading {
  text-wrap: balance;
}

.lpu-graphic-band > .wp-block-buttons {
  margin-block-start: var(--wp--preset--spacing--lg);
}

/*****************************************************************************/
/* SECTION RESPONSIVE (781px)                                                */
/*****************************************************************************/
@media (max-width: 781px) {
  .lpu-card-grid,
  .lpu-farm-selector,
  .lpu-columns-text,
  .lpu-graphic-band {
    padding-inline: var(--wp--preset--spacing--md);
  }

  .lpu-farm-selector__columns {
    gap: var(--wp--preset--spacing--lg);
  }

  .lpu-farm-selector__item + .lpu-farm-selector__item::before {
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .lpu-columns-text {
    padding-block: var(--wp--custom--spacing--section);
  }

  .lpu-columns-text > .lpu-columns-text__title {
    margin-block-end: var(--wp--preset--spacing--xl);
  }

  .lpu-columns-text__columns .wp-block-paragraph {
    /* keep block of texts not too wide because they are not very wide
    on desktop : keep similar width. */
    max-width: 30rem;
  }
}

/*****************************************************************************/
/* GENERIC MAIN AND FOOTER TRANSITION                                        */
/*****************************************************************************/
main.wp-block-group {
  min-height: 30vh;
}

/* The footer follows the last editorial section directly. WordPress adds its
 * normal site-stack gap to every sibling; that creates an unintended écru
 * strip after a full-width closing band. */
.wp-site-blocks > main + footer.wp-block-template-part {
  margin-block-start: 0;
}

/*****************************************************************************/
/* FOOTER COMPONENT                                                          */
/*****************************************************************************/
/* Shared footer frame. The footer Navigation receives site-local content at
 * render time, while this layout and its visual treatment remain shared. */
.lpu-footer {
  position: relative;
  overflow: hidden;
  margin-block-start: 0;
  /* Dark green from the approved design palette. */
  background-color: var(--wp--preset--color--vert-fonce) !important;
  color: var(--wp--preset--color--ecru);
}

.lpu-footer::after {
  position: absolute;
  right: clamp(1.25rem, 4vw, 3.5rem);
  bottom: clamp(1rem, 3vw, 2rem);
  width: clamp(2.25rem, 4vw, 3.5rem);
  height: clamp(2.25rem, 4vw, 3.5rem);
  background: url("../images/footer/footer-star-ecru.svg") center / contain
    no-repeat;
  content: "";
  pointer-events: none;
}

/* 0-2-0 to outrank Core's rules*/
/* Had a funky issue when this rule was 0-1-0 : depending on whether or not
block style variation was used in the page the declarations in this rule
applied or not.
Turned out that there is wp core css with same specificity. The stylesheet
order changed depending on whether there was a block style variation or not. if
block style variation : creates a block-style-variation-styles-inline-css which
is before this file and has a dependency on global-styles-inline-css.
Consequence :
- block style variation => global-styles-inline-css above this file
- no block style variation => global-styles-inline-css after this file */
.lpu-footer > .lpu-footer__main {
  align-items: flex-start;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-block: 0;
}

.lpu-footer__identity .wp-block-image {
  width: 160px;
  max-width: 100%;
  margin: 0;
}

.lpu-footer__identity .wp-block-image > a {
  display: block;
  width: 100%;
}

.lpu-footer__identity .wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
}

.lpu-footer__intro {
  max-width: 13rem;
  margin: 0;
  font-family: var(--wp--preset--font-family--dm-sans);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--wp--preset--color--ecru);
}

.lpu-footer__links .wp-block-navigation {
  width: 100%;
  max-width: none;
  margin: 0;
}

.lpu-footer .wp-block-navigation__container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: var(--wp--preset--spacing--lg) clamp(1rem, 2vw, 2rem);
  width: 100%;
  max-width: none;
}

.lpu-footer .wp-block-navigation__container > .wp-block-navigation-submenu {
  display: block;
  min-width: 0;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu
  > .wp-block-navigation-item__content {
  display: block;
  padding: 0;
  margin-block-end: 0.65rem;
  font-family: var(--wp--preset--font-family--ruden);
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--wp--preset--color--ecru) !important;
  text-transform: uppercase;
}

.lpu-footer .wp-block-navigation__submenu-icon {
  display: none;
}

.lpu-footer .wp-block-navigation__submenu-container {
  position: static;
  display: block;
  visibility: visible;
  opacity: 1;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
}

/* Core's submenu rule is more specific than the generic footer rule above.
 * Repeat the direct-child relationship and force the footer columns open;
 * unlike the header, these submenus are always expanded. */
.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu
  > .wp-block-navigation__submenu-container {
  position: static !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

.lpu-footer
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item {
  display: block;
  min-width: 0;
}

.lpu-footer
  .wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  display: inline-block;
  padding: 0.18rem 0;
  font-family: var(--wp--preset--font-family--dm-sans);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--wp--preset--color--ecru) !important;
}

.lpu-footer
  .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content::before {
  content: "> ";
}

.lpu-footer .wp-block-navigation-item__content:hover,
.lpu-footer .wp-block-navigation-item__content:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  margin-block-start: 0.5rem;
  padding-block-start: 0.75rem;
  border-top: 1px solid rgba(248, 248, 240, 0.35);
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child
  > .wp-block-navigation-item__content {
  margin: 0;
  font-family: var(--wp--preset--font-family--ruden);
  font-size: 0.68rem;
  color: rgba(248, 248, 240, 0.8) !important;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child
  > .wp-block-navigation__submenu-container {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item__content {
  padding: 0;
  font-size: 0.68rem;
  color: rgba(248, 248, 240, 0.8) !important;
}

.lpu-footer
  .wp-block-navigation__container
  > .wp-block-navigation-submenu:last-child
  > .wp-block-navigation__submenu-container
  > .wp-block-navigation-item
  > .wp-block-navigation-item__content::before {
  content: "";
}

/* 0-2-0 specificity to always beat wp Core CSS */
.lpu-footer > .lpu-footer__bottom {
  align-items: center;
  gap: var(--wp--preset--spacing--md);
  margin-block-start: var(--wp--preset--spacing--lg);
  color: var(--wp--preset--color--ecru);
}

.lpu-footer__social,
.lpu-footer__copyright {
  margin-block: 0;
}

.lpu-footer__social .wp-social-link {
  background: transparent !important;
  color: var(--wp--preset--color--ecru) !important;
}

.lpu-footer__copyright {
  font-size: 0.75rem;
  color: rgba(248, 248, 240, 0.8);
}

@media (max-width: 900px) {
  .lpu-footer {
    padding-inline: 1rem !important;
  }

  /* 0-2-0 specificity to always beat wp Core CSS */
  .lpu-footer > .lpu-footer__main {
    flex-direction: column;
    gap: var(--wp--preset--spacing--lg);
  }

  .lpu-footer__main > .wp-block-column {
    flex-basis: 100% !important;
    width: 100%;
  }

  .lpu-footer__intro {
    max-width: 24rem;
  }

  .lpu-footer .wp-block-navigation__container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .lpu-footer {
    padding-top: 3rem !important;
    padding-bottom: 4rem !important;
  }

  .lpu-footer__identity .wp-block-image {
    width: 140px;
  }

  .lpu-footer .wp-block-navigation__container {
    grid-template-columns: 1fr;
  }

  /* 0-2-0 specificity to always beat wp Core CSS */
  .lpu-footer > .lpu-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/*****************************************************************************/
/* BUTTONS                                                                   */
/*****************************************************************************/
/* Color related features and constraints for buttons : 
 * - buttons have background color and text (and border) colors
 * - swap those colors on hover and :focus-visible;
 * - keep the border and focus outline synchronized with the text color
 * - make the arrow button work too
 * - set default color value (green text)
 * - must work when user selects text and/or background color manually in
 *   Gutenberg
 * - detect the parent section color when the button background is transparent
 *   (color underneath the button)
 * - do not require JavaScript
*/
/* CSS variables
 * 1) The following CSS variables determine the color of the button: 
 *    --lpu-button-text : color of button text, border, outline, and
 *      arrow. 
 *    --lpu-button-background : color of button background.
 *    --lpu-button-inverse-text : text color to use when hover/focus.
 *      Basically the same value as --lpu-button-background, except that it is
 *      not transparent by default.
 *
 * 2) The value of the following CSS variables is set in another
 *    stylesheet and is used here to help set the color of the button.
 *
 *    See themes/lepaysanurbain/functions.php lpu_enqueue_theme_styles() for the
 *    code that create the stylesheet that create these variables. 
 *
 *    The following variables contain information of text/background colors set
 *    manually by the user in Gutenberg on the element (or an ancestor of the
 *    element). It only works when the colors have been set using a color from a
 *    color palette, it does not work if the color is arbitrary
 *    CSS variables:
 * -  --lpu-button-surface : background color set manually by the user in
 *      Gutenberg on the button itself or the (nearest) ancestor to have a
 *      background set. Works thanks to CSS custom property inheritance : if
 *      ancestor set the variable but not the button : the value set by the
 *      ancestor is visible in the button. Only setif the color uses a preset
 *      color, does not work with arbitrary color. Attention risk of erroneous
 *      detection : 
	       - if set an arbitrary color on a parent instead of one from preset :
 *         ignored and could use color of an ancestor (that has used a preset)
	       - color changed dynamicalle (js)
 * -  --lpu-button-text : text color set directly by user in Gutenberg on the
 *      element (using a preset color).
 * -  --lpu-button-background, --lpu-button-inverse-text : background color set
 *      on the button. Value only set if the background color has been set on
 *      the button itself directly. Not set if background color set on ancestor
 *      only.
*/

/* set default colors for the button */
.wp-block-button__link {
  --lpu-button-text: var(--wp--preset--color--vert-fonce);
  --lpu-button-background: transparent;
  /* can't just use transparent on text when we want to show what is under the
    button. When text is transparent it shows the background of the button
     itself, not what is under the button */
  /* default for inverse-text is the background color set in Gutenberg on the 
  button or an ancestor or ecru */
  --lpu-button-inverse-text: var(
    --lpu-button-surface,
    var(--wp--preset--color--ecru)
  );
}

/* .lpu-button-on-color class is only used to change the defaults.
 It does not use transparency to avoid issues with backgrounds using colors or
 patterns.
*/
:where(.lpu-button-on-color) .wp-block-button__link {
  --lpu-button-text: var(--wp--preset--color--ecru);
  --lpu-button-inverse-text: var(--wp--preset--color--vert-fonce);
}

/* Actually use the CSS variables */
/* normal state of colors */
/* Colors set on elements in Gutenberg (text color, background color) end up as
 * class names on the div element (eg. .has-xxx-color) with CSS declarations
 * that use !important. Eg. user sets black on text on an element. Element
 * receives .has-black-color class. The following rule is applied:
 * .has-vert-grise-color {
      color: var(--wp--preset--color--vert-grise)!important;
 * }
 * wp core's palette code use !important. Our declarations must outrank them. 
 * For our declarations to win : 
 * - use !important
 * - double the classes in the selector */
.wp-block-button__link.wp-block-button__link {
  color: var(--lpu-button-text) !important;
  background-color: var(--lpu-button-background) !important;
  border-color: currentColor !important;
}

/* Actually use the CSS variables */
/* inverted colors on hover/focus.
 We have to beat the color that wp sets by default, especially when the color/
 background color is set manually in Gutenberg.
 */
/* 'interactive' state with swapped colors */
.wp-block-button__link.wp-block-button__link:hover,
.wp-block-button__link.wp-block-button__link:focus-visible {
  color: var(--lpu-button-inverse-text) !important;
  background-color: var(--lpu-button-text) !important;
}

/* @media not (prefers-reduced-motion) {
  .wp-block-button__link {
    transition:
      background-color 100ms ease,
      color 100ms ease;
  }
} */

/* style the outline */
.wp-block-button__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Arrow button with no visible text but a hidden text for a11y.
 * In Gutenberg : do not show the arrow but rather the text, allows user to set
 * the (hidden) text.
 * .wp-site-blocks exists in the frontend, not in the ditor.
 * Code below shows the arrow in the frontend only */
.wp-site-blocks .lpu-button-arrow .wp-block-button__link,
.wp-site-blocks .lpu-button-arrow .wp-block-button__link:hover,
.wp-site-blocks .lpu-button-arrow .wp-block-button__link:focus-visible {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.5rem;
  min-width: 3.5rem;
  height: 2.5rem;
  padding: 0;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.wp-site-blocks .lpu-button-arrow .wp-block-button__link::after {
  position: absolute;
  inset: 0;
  width: 1.75rem;
  height: 1.25rem;
  margin: auto;
  background-color: currentColor;
  content: "";
  mask: url("../images/arrow-right.svg") center / contain no-repeat;
  -webkit-mask: url("../images/arrow-right.svg") center / contain no-repeat;
}