/*!*************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[0].use[1]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./assets/src/scss/layout/header.scss ***!
  \*************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Header
 */
/**
 * Import settings, functions, mixins, variables.
 */
/**
 * Add customizable settings to help implementing to all website.
 */
/**
 * @TODO: Define the responsive way to resize the website.
 *
 * With the "fixed" method, the website will have multiple pre-defined breakpoints.
 * With the fluid" method, the website will always use 100% of the available space.
 *
 * @usage $website-container-type: "fixed";
 * @usage $website-container-type: "fluid";
 */
/**
 * @TODO: Define the way to contain the header.
 *
 * With the "contained" method, the header will be contained with the website content.
 * With the "stretched" method, the header will be not contained with the website content.
 *
 * @usage $header-container-type: "contained";
 * @usage $header-container-type: "stretched";
 */
/**
 * @TODO: Define the max-width that the website will stop stretching.
 * *
 * @usage $website-container-max-width: 1940px;
 * @usage $website-container-max-width: 1600px;
 * @usage $website-container-max-width: 1280px;
 */
/**
 * @TODO: If true, compile styles for submenu.
 *
 * @usage $header-with-submenu: false;
 * @usage $header-with-submenu: true;
 */
/**
 * @TODO: If true, never compile styles to bring the menu in desktop mode.
 * @TODO: If false, compile styles to bring the menu in desktop mode when body does not have "always-force-mobile-menu" class.
 *
 * @usage $always-force-mobile-menu: false;
 * @usage $always-force-mobile-menu: true;
 */
/**
 * @TODO: Define if you use the font-size hack
 *
 * Fixes the font-size hack for websites using 62.5% font-sizing to use em as pixel.
 * Change $font-size-hack to true if your website use the font-size hack.
 *
 * @param {Length} $value - The value to fix.
 * @param {Boolean} [$font-size-hack: false] - Whether the font-size hack is used on the website.
 * @return {Length} - The fixed value.
 *
 * @usage fix-font-size-hack(1em, false) => 1em
 * @usage fix-font-size-hack(1em, true) => 1.6em
 * @usage fix-font-size-hack(1rem, false) => 1rem
 * @usage fix-font-size-hack(1rem, true) => 1.6rem
 */
/**
 * @TODO: Insert the prefix name that you want to see before some classes that wraps round the main elements.
 *
 * This is done to prevent name-clashes between generic names.
 * This can be left empty and it will not cause issues.
 * Be cautious, if you use this settings, the html examples given with this packages will not
 * work properly until you adjust the class names with the prefix you configured bellow.
 *
 * For now only the classes are prefixed with this variable:
 * .container
 * .container-fullwidth
 * .header
 * .footer
 * .main
 * .divider
 *
 * @usage $prefix: "normes-web-";
 * @usage $prefix: "ulaval-";
 */
/**
 * Define basic functions that can be used by any website.
 */
/*
 * Remove the unit of a length
 * @param {Number} $number - Number to remove unit from
 * @return {Number} - Unitless number
¸*/
/**
 * Converts a pixel value to an rem value based on a given context.
 *
 * @param {Number|Length} $pixels - The pixel value to convert to rem.
 * @param {Number|Length} [$context: $browser-context] - The context value in pixels used for the conversion.
 * @return {Length} - The calculated value in rem.
 *
 * @usage rem(16px) => 1rem
 * @usage rem(24) => 1.5rem
 * @usage rem(16, 10) => 1.6rem
 */
/**
 * Converts a pixel value to an em value based on a given context.
 *
 * @param {Number|Length} $pixels - The pixel value to convert to em.
 * @param {Number|Length} [$context: $browser-context] - The context value in pixels used for the conversion.
 * @return {Length} - The calculated value in em.
 *
 * @usage em(16px) => 1em
 * @usage em(24) => 1.5em
 * @usage em(16, 10) => 1.6em
 */
/**
 * Converts a em value to an pixel value based on a given context.
 *
 * @param {Number|Length} $em - The em value to convert to pixels.
 * @param {Number|Length} [$context: $browser-context] - The context value in em used for the conversion.
 * @return {Length} - The calculated value in pixels.
 *
 * @usage px(1em) => 16px
 * @usage px(1) => 16px
 * @usage px(1, 10) => 10px
 */
/**
 * Define basic mixins that can be used by any website.
 */
/**
 * Creates a fluid transition for a specified CSS property between two breakpoints.
 *
 * @param {String} $property - The CSS property to apply the fluid transition to.
 * @param {Value} $value-start - The starting value of the property.
 * @param {Value} $value-end - The ending value of the property.
 * @param {Breakpoint} $breakpoint-start - The starting breakpoint where the fluid transition begins.
 * @param {Breakpoint} $breakpoint-end - The ending breakpoint where the fluid transition stops.
 *
 * @example
 * // Usage:
 * .element {
 *   @include property-with-fluid-value('font-size', 18px, 24px, 1280px, 1600px);
 * }
 *
 *  // Output:
 * .element {
 *   font-size: 14px;
 *   font-size: calc(14px + (6vw - 48px) * 0.0666667);
 * }
 */
/**
 * Generates a z-index property with optional adjustments and importance.
 *
 * @param {String} $layer - The logical layer name for the desired z-index value.
 * @param {Number} $added-value - (Optional) Additional value to adjust the z-index.
 *
 * @example
 * // Usage:
 * .modal {
 *   @include z-index('modal', 10);
 * }
 *
 * // Output:
 * .modal {
 *   z-index: 610;
 * }
 */
/**
 * Define basic breakpoints that can be used by any website.
 * Always use mobile-first when using breakpoints.
 */
/**
 * Define basic colors that can be used by any website.
 */
/**
 * Define basic website container variables.
 */
.mobile-menu-open.university {
  padding-top: 5.625em;
}

.mobile-menu-open.unit {
  padding-top: 7.625em;
}

.mobile-menu-open.unit-with-submenu {
  padding-top: 9.875em;
}

.mobile-menu-open {
  overflow: hidden;
  padding-right: 1em;
}

.mobile-menu-open .header {
  background-color: #000000;
  height: 100vh;
  left: 0;
  overflow-y: scroll;
  position: fixed;
  top: 0;
  z-index: 900;
  transition-delay: 0.4s;
  transition-property: background-color;
}

.mobile-menu-open .header:after {
  width: 100%;
}

.mobile-menu-open .header a.header-title,
.mobile-menu-open .header a.header-university-link,
.mobile-menu-open .header a.header-unit-link {
  color: #ffffff;
}

.mobile-menu-open .header a.header-title:focus,
.mobile-menu-open .header a.header-university-link:focus,
.mobile-menu-open .header a.header-unit-link:focus {
  outline-color: #ffffff;
}

.mobile-menu-open .header .university-logo-fill {
  fill: #ffffff;
}

.mobile-menu-open .header-main-utilities-action svg {
  fill: #ffffff;
}

.mobile-menu-open .header-main-utilities-action:hover, .mobile-menu-open .header-main-utilities-action:active, .mobile-menu-open .header-main-utilities-action:focus {
  background-color: #ffffff;
}

.mobile-menu-open .header-main-utilities-action:hover svg, .mobile-menu-open .header-main-utilities-action:active svg, .mobile-menu-open .header-main-utilities-action:focus svg {
  fill: #000000;
}

.mobile-menu-open .header-main-utilities-action:focus {
  outline-color: #000000;
}

.mobile-menu-open .header-mobile-menu {
  transform: translateX(0);
}

.mobile-menu-open .header-container {
  background-color: initial;
}

.mobile-menu-open .header-top-brand .divider {
  border-left: 1px solid #ffffff;
}

.header {
  box-shadow: 0 1px 7px 0 rgba(0, 0, 0, 0.15);
  position: relative;
  width: 100%;
  z-index: 500;
}

.header:before, .header:after {
  content: "";
  display: block;
}

.header:before {
  background-image: linear-gradient(90deg, #e30513, #e30513 80%, #ffc103 80%, #ffc103);
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-size: 100% 8px;
  height: 8px;
  position: relative;
  z-index: 540;
}

.header:after {
  background-color: #000000;
  height: 100vh;
  position: absolute;
  top: 0;
  transition: width 0.4s ease;
  width: 0;
}

.header a:hover, .header a:focus, .header a:visited {
  color: unset;
}

.header a.header-title,
.header a.header-university-link,
.header a.header-unit-link {
  transition: color 0.5s ease;
}

.header a.header-title:focus,
.header a.header-university-link:focus,
.header a.header-unit-link:focus {
  outline-color: #000000;
  outline-offset: 2px;
  outline-style: solid;
  outline-width: 1px;
}

.header a.header-title {
  color: #000000;
  display: block;
  font-weight: 700;
  line-height: 1.1;
  margin: -0.25em;
  padding: 0.25em;
  text-decoration: none;
}

@media (min-width: 0) {
  .header a.header-title {
    font-size: 18px;
  }
}

@media (min-width: 1280px) {
  .header a.header-title {
    font-size: calc(18px + 6 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header a.header-title {
    font-size: 24px;
  }
}

.header a.header-title:hover, .header a.header-title:focus {
  text-decoration: underline;
}

.header a.header-university-link,
.header a.header-unit-link {
  color: #000000;
  text-decoration: none;
}

.header a.header-university-link:hover, .header a.header-university-link:focus,
.header a.header-unit-link:hover,
.header a.header-unit-link:focus {
  text-decoration: underline;
}

.header a.header-university-link {
  display: flex;
  white-space: nowrap;
  padding: 2px;
  margin: -2px;
}

.header a.header-unit-link {
  padding: 0 2px;
  margin: 0 -2px;
}

.header .university-logo-simplified {
  display: block;
  margin-right: 0.625em;
  width: 19px;
}

.header .university-logo {
  display: block;
  width: 128px;
}

.header .university-logo-fill {
  transition: fill 0.4s ease;
}

.header-top-meta,
.header-main-nav,
.header-secondary-nav,
.header-language-switcher {
  display: none;
}

.header-container {
  background-color: #ffffff;
  position: relative;
  z-index: 520;
}

@media (min-width: 0) {
  .header-container > .container {
    padding-bottom: 10px;
  }
}

@media (min-width: 1280px) {
  .header-container > .container {
    padding-bottom: calc(10px + 6 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-container > .container {
    padding-bottom: 16px;
  }
}

@media (min-width: 0) {
  .header-container > .container {
    padding-top: 12px;
  }
}

@media (min-width: 1280px) {
  .header-container > .container {
    padding-top: calc(12px + 4 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-container > .container {
    padding-top: 16px;
  }
}

.header-top,
.header-main {
  align-items: center;
  display: flex;
}

.header-top-brand,
.header-top-meta {
  min-height: 1.5em;
}

@media (min-width: 0) {
  .header-top-brand,
  .header-top-meta {
    margin-bottom: 8px;
  }
}

@media (min-width: 1280px) {
  .header-top-brand,
  .header-top-meta {
    margin-bottom: calc(8px + 8 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-top-brand,
  .header-top-meta {
    margin-bottom: 16px;
  }
}

.header-top-brand {
  align-items: flex-start;
  display: flex;
}

.header-top-brand .divider {
  align-self: stretch;
  border-left: 1px solid #000000;
  margin: 0 0.5em;
  position: relative;
  top: -1px;
}

.header-top-meta {
  margin-left: auto;
}

.header-main {
  min-height: 3.75em;
}

@media (min-width: 0) {
  .header-main {
    column-gap: 32px;
  }
}

@media (min-width: 1280px) {
  .header-main {
    column-gap: calc(32px + 32 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-main {
    column-gap: 64px;
  }
}

.header-main-utilities {
  display: flex;
  margin-left: auto;
}

.header-main-utilities-action {
  background-color: transparent;
  cursor: pointer;
  height: 3em;
  transition: background-color 0.125s ease;
  width: 3em;
}

.header-main-utilities-action svg {
  height: 1em;
  width: 1em;
  transition: fill 0.125s ease;
}

.header-main-utilities-action svg.close,
.header-main-utilities-action svg.menu {
  transition: fill 0.125s ease, transform 0.25s ease;
}

.header-main-utilities-action svg.chevron-right-angle-down {
  margin-left: 0.25em;
  transform: rotate(0);
  width: 0.75em;
  transition: fill 0.125s ease, transform 0.125s ease;
}

.header-main-utilities-action:hover, .header-main-utilities-action:active, .header-main-utilities-action:focus {
  background-color: #000000;
}

.header-main-utilities-action:hover svg, .header-main-utilities-action:active svg, .header-main-utilities-action:focus svg {
  fill: #ffffff;
}

.header-main-utilities-action:focus {
  outline-color: #ffffff;
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px;
}

.header-main-utilities-action[aria-expanded=true] {
  background-color: #000000;
}

.header-main-utilities-action[aria-expanded=true] .switch-toggle {
  top: 0;
}

.header-main-utilities-action[aria-expanded=true] svg {
  fill: #ffffff;
}

.header-main-utilities-action[aria-expanded=true] svg.chevron-right-angle-down {
  transform: rotate(180deg);
}

.header-search-trigger .switch-toggle,
.header-main-utilities-action {
  align-items: center;
  display: flex;
  justify-content: center;
}

.header-search-trigger.header-main-utilities-action {
  display: block;
}

.header-search-trigger {
  overflow: hidden;
  position: relative;
}

.header-search-trigger .switch-toggle {
  height: 100%;
  position: absolute;
  transition: top 0.25s ease-in-out;
  width: 100%;
}

.header-search-trigger .switch-toggle--close {
  top: -100%;
}

.header-search-trigger .switch-toggle--search {
  top: 0;
}

.header-search-trigger[aria-expanded=true] .switch-toggle--close {
  top: 0;
}

.header-search-trigger[aria-expanded=true] .switch-toggle--search {
  top: 100%;
}

.header-search {
  animation: slide-out-top 0.25s ease;
  background: #000000;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  transform: translateY(-100%);
  z-index: 510;
}

.header-search.open {
  animation: slide-in-top 0.25s ease;
  display: block;
  transform: none;
}

.header-search:not(.open).remove {
  animation: slide-out-top 0.25s ease;
  display: block;
}

.mobile-menu-open .header-search:not(.open).remove {
  animation: none;
  display: none;
}

.header-search-container {
  padding-bottom: 1.5em;
  padding-top: 1.5em;
}

.header-search-form {
  color: #ffffff;
  display: flex;
  flex-direction: column;
}

.header-search-type {
  border: 0;
  display: flex;
  margin-bottom: 1.25em;
  padding: 0;
}

.header-search-type label {
  border: 1px solid #ffffff;
  cursor: pointer;
  font-size: 0.875em;
  margin-right: 0.75em;
  padding: 0.25em 1em;
}

.header-search-type label:hover {
  background-color: #ffffff;
  color: #000000;
}

.header-search-type label:focus,
.header-search-type input:focus + label {
  outline-color: #ffffff;
  outline-offset: -3px;
  outline-style: solid;
  outline-width: 3px;
}

.header-search-type input:checked + label {
  background-color: #ffffff;
  color: #000000;
}

.header-search-type input:checked + label:focus,
.header-search-type input:checked:focus + label {
  outline-color: #000000;
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px;
}

.header-search-main {
  align-items: stretch;
  display: flex;
}

.header-search-input[type=search],
.header-search-input,
.header-search-button {
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 0;
  display: flex;
}

.header-search-input {
  background-color: #ffffff;
  flex: 1;
  font-size: 1em;
  margin-right: -2px;
  padding: 0.75em 1em;
}

.header-search-input:hover {
  outline-color: #808080;
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px;
}

.header-search-input:focus {
  outline-color: #000000;
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px;
}

.header-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

.header-search-button {
  background-color: #ffffff;
  padding: 1.125em;
}

.header-search-button:hover, .header-search-button:focus {
  background-color: #000000;
  outline-color: #ffffff;
  outline-offset: -2px;
  outline-style: solid;
  outline-width: 2px;
}

.header-search-button:hover svg, .header-search-button:focus svg {
  fill: #ffffff;
}

.header-search-button svg {
  height: 1em;
  width: 1em;
}

.header-secure-area,
.header-language-switcher {
  position: relative;
}

.header-language-switcher--mobile {
  text-transform: uppercase;
  margin-bottom: 3em;
}

.header-language-switcher--mobile .menu {
  display: flex;
  font-size: 1.25em;
  gap: 1.2em;
}

.header-language-switcher--mobile a.menu-link {
  color: #ffffff;
  text-decoration: none;
}

.header-language-switcher--mobile a.menu-link:hover {
  text-decoration: underline;
}

.header-language-switcher--mobile a.menu-link:focus {
  outline: 1px solid #ffffff;
}

.header-language-switcher--mobile .current-language {
  color: #ffffff;
  font-weight: 700;
  text-decoration: underline;
}

.header-language-switcher-trigger {
  background: none;
  border: 0;
  box-sizing: border-box;
  color: #000000;
  cursor: pointer;
  font-weight: 600;
  height: 100%;
  line-height: 1em;
  text-transform: uppercase;
}

.header-language-switcher-trigger span {
  font-size: 0.875em;
}

.header-language-switcher-trigger:hover, .header-language-switcher-trigger:active, .header-language-switcher-trigger:focus, .header-language-switcher-trigger[aria-expanded=true] {
  color: #ffffff;
}

.header-secure-area-list,
.header-language-switcher-list {
  background-color: #000000;
  color: #ffffff;
  position: absolute;
  right: 0;
  top: 100%;
  white-space: nowrap;
}

.header-secure-area-list {
  padding: 2px;
}

.header-language-switcher-list {
  left: 0;
  padding: 0 2px 2px 2px;
  text-transform: uppercase;
}

.header-secure-area-list-item a,
.header-language-switcher-list-item a {
  align-items: center;
  color: #ffffff;
  display: flex;
  padding: 0.438em 0.5em;
  text-decoration: none;
}

.header-secure-area-list-item a span,
.header-language-switcher-list-item a span {
  font-size: 0.875em;
}

.header-secure-area-list-item a:hover, .header-secure-area-list-item a:active, .header-secure-area-list-item a:focus,
.header-language-switcher-list-item a:hover,
.header-language-switcher-list-item a:active,
.header-language-switcher-list-item a:focus {
  background-color: #ffffff;
  color: #000000;
}

.header-secure-area-list-item + .header-secure-area-list-item,
.header-language-switcher-list-item {
  border-top: 1px solid #ffffff;
}

.header-menu-trigger {
  position: relative;
}

.header-menu-trigger svg {
  transform: rotate(0);
  position: absolute;
}

.header-menu-trigger .menu {
  opacity: 1;
}

.header-menu-trigger .close {
  opacity: 0;
}

.header-menu-trigger[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.header-menu-trigger[aria-expanded=true] .menu {
  opacity: 0;
}

.header-menu-trigger[aria-expanded=true] .close {
  opacity: 1;
}

.header-menu-trigger:hover, .header-menu-trigger:focus {
  background-color: #000000;
}

.header-menu-trigger:hover svg.nav-mobile-icon, .header-menu-trigger:focus svg.nav-mobile-icon {
  fill: #ffffff;
}

.header-mobile-menu {
  animation: slide-out-left 0.5s ease;
  background-color: #000000;
  display: none;
  position: relative;
  transform: translateX(-100vw);
  z-index: 530;
}

.header-mobile-menu.open {
  animation: slide-in-left 0.5s ease;
  display: block;
}

.header-mobile-menu .header-main-nav,
.header-mobile-menu .header-secondary-nav {
  display: block;
}

.header-main-nav .menu {
  display: flex;
}

.header-main-nav .menu-item {
  align-items: center;
  display: flex;
  padding-top: 0.375em;
}

.header-main-nav a.menu-link {
  background-image: linear-gradient(90deg, #e30513, #e30513);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 0 4px;
  padding-bottom: 0.417em;
  text-align: center;
  text-decoration: none;
  transition: background-size 0.25s ease;
}

.header-main-nav a.menu-link:hover, .header-main-nav a.menu-link:focus {
  background-size: 100% 4px;
  background-position-x: left;
}

.header-main-nav a.menu-link:focus {
  outline-color: #ffffff;
  outline-offset: 3px;
  outline-style: solid;
  outline-width: 1px;
}

.header-main-nav a.menu-link.is-active {
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 100% 4px;
}

.header-main-nav--mobile {
  margin-top: 2.375em;
  margin-bottom: 3em;
}

.header-main-nav--mobile .menu {
  flex-direction: column;
  gap: 1em;
}

.header-main-nav--mobile a.menu-link {
  color: #ffffff;
  font-size: 1.5em;
  line-height: 1.2;
}

.header-main-nav--mobile a.menu-link.is-active {
  background-image: linear-gradient(90deg, #ffffff, #ffffff);
}

@media (min-width: 0) {
  .header-main-nav--desktop .menu {
    column-gap: 24px;
  }
}

@media (min-width: 1280px) {
  .header-main-nav--desktop .menu {
    column-gap: calc(24px + 8 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-main-nav--desktop .menu {
    column-gap: 32px;
  }
}

.header-main-nav--desktop a.menu-link {
  color: #000000;
  font-size: 1em;
  font-weight: 700;
  line-height: 1.25;
}

.header-main-nav--desktop a.menu-link.is-active {
  background-image: linear-gradient(90deg, #000000, #000000);
}

.header-main-nav--desktop a.menu-link.is-active:hover, .header-main-nav--desktop a.menu-link.is-active:focus {
  background-image: linear-gradient(90deg, #e30513, #e30513);
}

.header-secondary-nav .menu {
  display: flex;
}

.header-secondary-nav a.menu-link {
  text-decoration: none;
}

.header-secondary-nav a.menu-link:hover, .header-secondary-nav a.menu-link:focus {
  text-decoration: underline;
}

.header-secondary-nav .menu-item {
  display: flex;
}

.header-secondary-nav--mobile {
  margin-bottom: 2.375em;
}

.header-secondary-nav--mobile .menu {
  flex-direction: column;
  gap: 1em;
}

.header-secondary-nav--mobile a.menu-link {
  color: #ffffff;
  font-size: 1.25em;
}

.header-secondary-nav--mobile a.menu-link:focus {
  outline-color: #ffffff;
}

.header-secondary-nav--desktop .menu {
  justify-content: flex-end;
}

@media (min-width: 0) {
  .header-secondary-nav--desktop .menu {
    column-gap: 16px;
  }
}

@media (min-width: 1280px) {
  .header-secondary-nav--desktop .menu {
    column-gap: calc(16px + 8 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-secondary-nav--desktop .menu {
    column-gap: 24px;
  }
}

.header-secondary-nav--desktop a.menu-link {
  color: #000000;
  font-size: 0.875em;
  line-height: 1.2;
}

.header-secondary-nav--desktop a.menu-link:focus {
  outline-color: #000000;
}

.header-top-brand .divider {
  transition: border-left 0.5s ease;
}

@media (min-width: 1280px) {
  .mobile-menu-open:not(.always-force-mobile-menu) {
    overflow: initial;
  }

  .mobile-menu-open:not(.always-force-mobile-menu).unit, .mobile-menu-open:not(.always-force-mobile-menu).unit-with-submenu, .mobile-menu-open:not(.always-force-mobile-menu).university {
    padding-top: 0;
    padding-right: 0;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header {
    background-color: #ffffff;
    height: initial;
    left: initial;
    overflow-y: initial;
    position: relative;
    top: initial;
    transition-delay: initial;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header:after {
    display: none;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header .university-logo-fill {
    fill: #000000;
    transition: none;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header a.header-title,
  .mobile-menu-open:not(.always-force-mobile-menu) .header a.header-university-link,
  .mobile-menu-open:not(.always-force-mobile-menu) .header a.header-unit-link {
    color: unset;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header a.header-title:focus,
  .mobile-menu-open:not(.always-force-mobile-menu) .header a.header-university-link:focus,
  .mobile-menu-open:not(.always-force-mobile-menu) .header a.header-unit-link:focus {
    outline-color: #000000;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action svg {
    fill: #000000;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:hover, .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:active, .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:focus {
    background-color: #000000;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:hover svg, .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:active svg, .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:focus svg {
    fill: #ffffff;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header-main-utilities-action:focus {
    outline-color: #ffffff;
  }

  .mobile-menu-open:not(.always-force-mobile-menu) .header-top-brand .divider {
    border-left: 1px solid #000000;
  }

  body:not(.always-force-mobile-menu) .header-menu-trigger .nav-mobile-icon {
    opacity: 0;
    transform: rotate(-180deg);
    transform-origin: 50% 50%;
  }

  body:not(.always-force-mobile-menu) .header-menu-trigger,
  body:not(.always-force-mobile-menu) .header-mobile-menu.open {
    display: none;
  }

  body:not(.always-force-mobile-menu) .header-top {
    justify-content: flex-end;
  }

  body:not(.always-force-mobile-menu) .header-top-meta,
  body:not(.always-force-mobile-menu) .header-main-nav,
  body:not(.always-force-mobile-menu) .header-secondary-nav,
  body:not(.always-force-mobile-menu) .header-language-switcher {
    display: block;
  }

  body:not(.always-force-mobile-menu) .header-main-brand {
    flex: 0 0 auto;
  }

  body:not(.always-force-mobile-menu) .header-main-nav a.menu-link:focus {
    outline-color: #000000;
    outline-offset: 3px;
    outline-style: solid;
    outline-width: 1px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header:after {
    transition: none;
  }

  .header-main-nav a.menu-link {
    transition: none;
  }
}

@keyframes slide-in-left {
  from {
    transform: translateX(-100vw);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100vw);
  }
}

@keyframes slide-in-top {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slide-out-top {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100%);
  }
}

/**
 * Import settings, functions, mixins, variables.
 */
/**
 * Add customizable settings to help implementing to all website.
 */
/**
 * @TODO: Define the responsive way to resize the website.
 *
 * With the "fixed" method, the website will have multiple pre-defined breakpoints.
 * With the fluid" method, the website will always use 100% of the available space.
 *
 * @usage $website-container-type: "fixed";
 * @usage $website-container-type: "fluid";
 */
/**
 * @TODO: Define the way to contain the header.
 *
 * With the "contained" method, the header will be contained with the website content.
 * With the "stretched" method, the header will be not contained with the website content.
 *
 * @usage $header-container-type: "contained";
 * @usage $header-container-type: "stretched";
 */
/**
 * @TODO: Define the max-width that the website will stop stretching.
 * *
 * @usage $website-container-max-width: 1940px;
 * @usage $website-container-max-width: 1600px;
 * @usage $website-container-max-width: 1280px;
 */
/**
 * @TODO: If true, compile styles for submenu.
 *
 * @usage $header-with-submenu: false;
 * @usage $header-with-submenu: true;
 */
/**
 * @TODO: If true, never compile styles to bring the menu in desktop mode.
 * @TODO: If false, compile styles to bring the menu in desktop mode when body does not have "always-force-mobile-menu" class.
 *
 * @usage $always-force-mobile-menu: false;
 * @usage $always-force-mobile-menu: true;
 */
/**
 * @TODO: Define if you use the font-size hack
 *
 * Fixes the font-size hack for websites using 62.5% font-sizing to use em as pixel.
 * Change $font-size-hack to true if your website use the font-size hack.
 *
 * @param {Length} $value - The value to fix.
 * @param {Boolean} [$font-size-hack: false] - Whether the font-size hack is used on the website.
 * @return {Length} - The fixed value.
 *
 * @usage fix-font-size-hack(1em, false) => 1em
 * @usage fix-font-size-hack(1em, true) => 1.6em
 * @usage fix-font-size-hack(1rem, false) => 1rem
 * @usage fix-font-size-hack(1rem, true) => 1.6rem
 */
/**
 * @TODO: Insert the prefix name that you want to see before some classes that wraps round the main elements.
 *
 * This is done to prevent name-clashes between generic names.
 * This can be left empty and it will not cause issues.
 * Be cautious, if you use this settings, the html examples given with this packages will not
 * work properly until you adjust the class names with the prefix you configured bellow.
 *
 * For now only the classes are prefixed with this variable:
 * .container
 * .container-fullwidth
 * .header
 * .footer
 * .main
 * .divider
 *
 * @usage $prefix: "normes-web-";
 * @usage $prefix: "ulaval-";
 */
/**
 * Define basic functions that can be used by any website.
 */
/*
 * Remove the unit of a length
 * @param {Number} $number - Number to remove unit from
 * @return {Number} - Unitless number
¸*/
/**
 * Converts a pixel value to an rem value based on a given context.
 *
 * @param {Number|Length} $pixels - The pixel value to convert to rem.
 * @param {Number|Length} [$context: $browser-context] - The context value in pixels used for the conversion.
 * @return {Length} - The calculated value in rem.
 *
 * @usage rem(16px) => 1rem
 * @usage rem(24) => 1.5rem
 * @usage rem(16, 10) => 1.6rem
 */
/**
 * Converts a pixel value to an em value based on a given context.
 *
 * @param {Number|Length} $pixels - The pixel value to convert to em.
 * @param {Number|Length} [$context: $browser-context] - The context value in pixels used for the conversion.
 * @return {Length} - The calculated value in em.
 *
 * @usage em(16px) => 1em
 * @usage em(24) => 1.5em
 * @usage em(16, 10) => 1.6em
 */
/**
 * Converts a em value to an pixel value based on a given context.
 *
 * @param {Number|Length} $em - The em value to convert to pixels.
 * @param {Number|Length} [$context: $browser-context] - The context value in em used for the conversion.
 * @return {Length} - The calculated value in pixels.
 *
 * @usage px(1em) => 16px
 * @usage px(1) => 16px
 * @usage px(1, 10) => 10px
 */
/**
 * Define basic mixins that can be used by any website.
 */
/**
 * Creates a fluid transition for a specified CSS property between two breakpoints.
 *
 * @param {String} $property - The CSS property to apply the fluid transition to.
 * @param {Value} $value-start - The starting value of the property.
 * @param {Value} $value-end - The ending value of the property.
 * @param {Breakpoint} $breakpoint-start - The starting breakpoint where the fluid transition begins.
 * @param {Breakpoint} $breakpoint-end - The ending breakpoint where the fluid transition stops.
 *
 * @example
 * // Usage:
 * .element {
 *   @include property-with-fluid-value('font-size', 18px, 24px, 1280px, 1600px);
 * }
 *
 *  // Output:
 * .element {
 *   font-size: 14px;
 *   font-size: calc(14px + (6vw - 48px) * 0.0666667);
 * }
 */
/**
 * Generates a z-index property with optional adjustments and importance.
 *
 * @param {String} $layer - The logical layer name for the desired z-index value.
 * @param {Number} $added-value - (Optional) Additional value to adjust the z-index.
 *
 * @example
 * // Usage:
 * .modal {
 *   @include z-index('modal', 10);
 * }
 *
 * // Output:
 * .modal {
 *   z-index: 610;
 * }
 */
/**
 * Define basic breakpoints that can be used by any website.
 * Always use mobile-first when using breakpoints.
 */
/**
 * Define basic colors that can be used by any website.
 */
/**
 * Define basic website container variables.
 */
.mobile-menu-open .header-sub-nav {
  display: none;
}

.header-sub-nav {
  align-items: center;
  background-color: #000000;
  column-gap: 2em;
  display: flex;
  min-height: 36px;
}

.header-sub-nav .container {
  display: flex;
  padding-bottom: 0;
  padding-top: 0;
  width: 100%;
}

.header-sub-nav .menu {
  align-items: stretch;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
}

.header-sub-nav .menu-item {
  display: flex;
}

.header-sub-nav .menu-item + .menu-item a.menu-link {
  border-top: 1px solid #ffffff;
}

.header-sub-nav a.menu-link {
  align-items: center;
  color: #ffffff;
  display: flex;
  flex-grow: 1;
  font-size: 0.875em;
  min-height: 36px;
  position: relative;
  text-decoration: none;
}

.header-sub-nav a.menu-link:before, .header-sub-nav a.menu-link:after {
  background-color: #000000;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

.header-sub-nav a.menu-link:before {
  right: 100%;
}

.header-sub-nav a.menu-link:after {
  left: 100%;
}

.header-sub-nav a.menu-link:hover, .header-sub-nav a.menu-link:focus {
  background-color: #ffffff;
  color: #000000;
  outline-color: #000000;
  outline-offset: -3px;
  outline-style: solid;
  outline-width: 1px;
}

.header-sub-nav a.menu-link:hover:before, .header-sub-nav a.menu-link:hover:after, .header-sub-nav a.menu-link:focus:before, .header-sub-nav a.menu-link:focus:after {
  background-color: #ffffff;
}

@media (min-width: 0) {
  .header-sub-nav-container {
    column-gap: 32px;
  }
}

@media (min-width: 1280px) {
  .header-sub-nav-container {
    column-gap: calc(32px + 32 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-sub-nav-container {
    column-gap: 64px;
  }
}

.header-sub-nav-top {
  align-items: center;
  column-gap: 2em;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.header-sub-nav-top-wrapper {
  column-gap: 2em;
  justify-content: space-between;
}

.header-sub-nav-main {
  background-color: #000000;
  display: none;
  left: 0;
  overflow: hidden;
  position: absolute;
  right: 0;
  top: 100%;
}

.header-sub-nav-main.open {
  border-top: 1px solid #ffffff;
  display: flex;
}

.header-sub-nav-main .container {
  padding-bottom: 0.25em;
  padding-top: 0.25em;
}

a.header-sub-nav-title {
  color: #ffffff;
  font-weight: 700;
  margin: 0 -10px;
  padding: 0.438em 10px;
  text-decoration: none;
}

@media (min-width: 0) {
  a.header-sub-nav-title {
    font-size: 14px;
  }
}

@media (min-width: 1280px) {
  a.header-sub-nav-title {
    font-size: calc(14px + 2 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  a.header-sub-nav-title {
    font-size: 16px;
  }
}

a.header-sub-nav-title:visited {
  color: #ffffff;
}

a.header-sub-nav-title:hover, a.header-sub-nav-title:focus {
  text-decoration: underline;
  color: #ffffff;
}

a.header-sub-nav-title:focus {
  outline-color: #ffffff;
  outline-offset: -6px;
  outline-style: solid;
  outline-width: 1px;
}

.header-sub-nav-button {
  align-items: center;
  background-color: #000000;
  border-bottom: none;
  border-left: 1px #ffffff solid;
  border-right: 1px #ffffff solid;
  border-top: none;
  cursor: pointer;
  display: flex;
  flex: 0 0 3em;
  justify-content: center;
  min-height: 36px;
  transition: background-color 0.125s ease;
}

.header-sub-nav-button svg {
  fill: #ffffff;
  height: 1em;
  transform: rotate(0);
  transition: fill 0.125s ease, transform 0.125s ease;
  width: 1em;
}

.header-sub-nav-button:hover, .header-sub-nav-button:focus {
  background-color: #ffffff;
}

.header-sub-nav-button:hover svg, .header-sub-nav-button:focus svg {
  fill: #000000;
}

.header-sub-nav-button[aria-expanded=true] svg {
  transform: rotate(180deg);
}

.header-sub-nav a.menu-link {
  padding-left: 2px;
  padding-right: 2px;
}

@media (min-width: 768px) {
  .header-sub-nav a.menu-link {
    padding-left: 3px;
    padding-right: 3px;
  }
}

@media (min-width: 992px) {
  .header-sub-nav a.menu-link {
    padding-left: 5px;
    padding-right: 5px;
  }
}

@media (min-width: 1200px) {
  .header-sub-nav a.menu-link {
    padding-left: 6px;
    padding-right: 6px;
  }
}

@media (min-width: 1280px) {
  .header-sub-nav-main .container {
    padding-left: 12px;
  }
}

@media (min-width: 1280px) {
  .header-sub-nav-main .container {
    padding-left: calc(12px + 4 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-sub-nav-main .container {
    padding-left: 16px;
  }
}

@media (min-width: 1280px) {
  .header-sub-nav-main .container {
    padding-right: 12px;
  }
}

@media (min-width: 1280px) {
  .header-sub-nav-main .container {
    padding-right: calc(12px + 4 * (100vw - 1280px) / 320);
  }
}

@media (min-width: 1600px) {
  .header-sub-nav-main .container {
    padding-right: 16px;
  }
}

@media (min-width: 1280px) {
  .mobile-menu-open .header-sub-nav {
    display: flex;
  }

  .header-sub-nav .menu {
    flex-direction: row;
    justify-content: initial;
  }

  .header-sub-nav .menu-item + .menu-item a.menu-link {
    border-top: 0;
  }

  .header-sub-nav a.menu-link:before, .header-sub-nav a.menu-link:after {
    display: none;
  }

  .header-sub-nav a.menu-link .container {
    transition: none;
  }

  .header-sub-nav-top {
    width: auto;
  }

  .header-sub-nav-main {
    display: flex;
    left: initial;
    overflow: initial;
    position: initial;
    right: initial;
    top: initial;
  }

  .header-sub-nav-main.open {
    border-top: 0;
  }

  .header-sub-nav-button {
    display: none;
  }

  .header-sub-nav a.menu-link {
    padding-left: 0;
    padding-right: 0;
  }
}