.c-hdr {
  position: relative;
}

.c-hdeco {
  overflow: hidden;
  height  : var(--c-hdeco-height);
}

.c-hdr-home {
  --c-hdeco-height: 15vh;
}

.c-hdr-portail {
  --c-hdeco-height: 12vh;
}

.c-hdr-page {
  --c-hdeco-height: 10vh;
}

.c-hdr-logo {
  position: absolute;
  z-index : 1;
  left    : var(--margin-md);
  bottom  : 0;
  height  : calc(var(--c-hdeco-height) / 3);
  width   : auto;
}

.c-hdr-logo>img {
  height       : 100%;
  width        : auto;
  border       : var(--border-thin) solid var(--gray-light);
  border-bottom: none;
}

@media (min-width: 48rem) {
  .c-hdr {
    position          : unset;
    max-width         : var(--max-width);
    margin            : 0 auto;
    display           : grid;
    grid              : "logo content""deco deco";
    grid-template-rows: var(--main-menu-height) var(--c-hdeco-height);
  }

  .c-hcontent {
    position : fixed;
    max-width: var(--max-width);
    width    : 100%;
    z-index  : 5;
  }

  .c-hcontent::before {
    position        : fixed;
    content         : "";
    left            : 0;
    top             : var(--drupal-displace-offset-top);
    width           : 100%;
    height          : calc(var(--main-menu-height) + var(--border-thin));
    background-color: var(--main-bg);
    border-bottom   : var(--border-thin) solid var(--main-fg);
  }

  .c-hdeco {
    position  : absolute;
    grid-area : deco;
    width     : 100%;
    left      : 0;
    margin-top: var(--main-menu-height);
  }

  .c-hdr-home {
    --c-hdeco-height: 15rem;
  }

  .c-hdr-portail {
    --c-hdeco-height: 12rem;
  }

  .c-hdr-page {
    --c-hdeco-height: 10rem;
  }

  .c-hdr-logo {
    position: fixed;
    z-index : 6;
    bottom  : unset;
    left    : unset;
    height  : auto;
  }

  .c-hdr-logo>img {
    height      : var(--main-menu-height);
    border-top  : none;
    border-left : var(--border-thick) solid var(--gray-strong);
    border-right: var(--border-thick) solid var(--gray-strong);
  }
}