/*!*************************************************************************************************************************************************************************************!*\
  !*** 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/footer.scss ***!
  \*************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Footer
 */
/**
 * 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.
 */
.footer {
  z-index: 400;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
  position: relative;
}

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

.footer a.footer-button--light {
  background-color: #ffffff;
  color: #000000;
}

.footer a.footer-button--light:hover, .footer a.footer-button--light:focus {
  background-color: #000000;
  color: #ffffff;
}

.footer a.footer-button--light:focus {
  outline-color: #ffffff;
  outline-offset: -4px;
  outline-style: solid;
  outline-width: 2px;
}

.footer a.footer-button--dark {
  background-color: #000000;
  color: #ffffff;
}

.footer a.footer-button--dark:hover, .footer a.footer-button--dark:focus {
  background-color: #ffffff;
  color: #000000;
}

.footer a.footer-button--dark:focus {
  box-shadow: 0 0 0 1px #000000 inset;
  outline-color: #000000;
  outline-offset: -6px;
  outline-style: solid;
  outline-width: 2px;
}

.footer-main {
  background-color: #ffffff;
  padding: 4em 0;
}

.footer-main .tel {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-decoration: underline;
}

.footer-main .mail {
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.footer-contact {
  margin-bottom: 3em;
  transition: margin-bottom 0.125s ease-out;
}

.footer-contact .organisme-vivant {
  padding-bottom: 5px;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 27px;
  letter-spacing: 2px;
  white-space: nowrap;
}

.footer-contact .organisme-vivant .text-gris {
  color: #c1c1c1 !important;
}

.footer-contact-inner--right {
  max-width: 18.25em;
}

.footer-address {
  text-align: left;
}

.footer-address p > span + span.contact-row:before {
  content: "|";
  padding: 0 0.25em 0 0;
  position: relative;
  top: -1px;
}

.footer-address-title {
  align-items: flex-start;
  display: flex;
  flex-direction: row;
  font-size: 1.25em;
  line-height: 1.375em;
  margin-bottom: 1rem;
}

.footer-address-title svg {
  fill: #e30513;
  flex-shrink: 0;
  height: 1.2em;
  margin-right: 0.5em;
  position: relative;
  top: -0.05em;
}

.footer-address-title-unit,
.footer-address-title-subunit {
  display: block;
}

.footer-address-title-unit {
  font-weight: 700;
}

.footer-address-title-subunit {
  font-size: 0.9em;
  font-weight: 400;
  margin-left: -28px;
}

.footer-address-name {
  font-size: 0.875em;
  font-weight: 700;
  margin-bottom: 0.25em;
}

.footer-address-infos {
  font-size: 0.875em;
  margin-bottom: 1rem;
}

.footer-address-infos:last-child {
  margin-bottom: 0;
}

.footer-address-infos .contact-row {
  display: inline;
}

.footer-address-infos a {
  color: #000000;
  text-decoration: underline;
}

.footer-social {
  display: flex;
  flex-flow: wrap;
  font-size: 1em;
  gap: 0.75em;
  justify-content: flex-start;
}

.footer-social li {
  display: flex;
  list-style-type: none;
}

.footer-social a {
  background-color: #ffffff;
  border: 1px solid transparent;
  display: inline-block;
  transition: background-color 0.125s ease;
}

.footer-social a:hover, .footer-social a:focus {
  background-color: #000000;
  outline: none;
}

.footer-social a:hover svg, .footer-social a:focus svg {
  fill: #ffffff;
}

.footer-social svg {
  display: block;
  fill: #000000;
  height: 2em;
  padding: 0.25em;
  transition: fill 0.125s ease;
  width: 2em;
}

.footer-button {
  border: 1px solid #000000;
  display: block;
  font-size: 1em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  padding: 0.75em 1.5em;
  text-align: center;
  text-decoration: none;
}

.footer-button:hover, .footer-button:focus {
  text-decoration: none;
}

.footer-utils {
  text-align: left;
}

.footer-navigation li {
  font-size: 0.875em;
  list-style-type: none;
  height: 30px;
}

.footer-navigation a {
  color: #000000;
  display: inline-block;
}

.footer-navigation-group + .footer-navigation-group {
  margin-top: 2em;
}

.footer-navigation-title {
  font-size: 0.875em;
  font-weight: 700;
  line-height: 1.375em;
  margin-bottom: 0.5rem;
}

.footer-emergency {
  margin-top: 2em;
}

.footer-emergency-title {
  font-size: 0.875em;
  font-weight: 700;
  margin: 0;
  margin-bottom: 0.5rem;
}

.footer .footer-emergency-title a {
  color: #e30513;
  text-decoration: none;
  text-transform: uppercase;
}

.footer .footer-emergency-title a:hover {
  text-decoration: underline;
}

.footer-emergency-text {
  font-size: 0.875em;
}

.footer-emergency-text a {
  margin: 0;
  padding: 0;
  color: #000000;
  text-decoration: none;
}

.footer-logos {
  margin-top: 3em;
  text-align: center;
}

.footer-logo {
  display: inline-block;
  height: 52px;
  transition: filter 0.125s ease, opacity 0.125s ease;
}

.footer-logo:hover, .footer-logo:focus {
  filter: grayscale(0%);
  opacity: 1;
}

.footer-logo:focus {
  outline-color: #000000;
  outline-style: solid;
  outline-width: 1px;
  outline-offset: 0.5em;
}

.footer-logo img {
  display: block;
  height: 100%;
  width: auto;
}

.footer-accreditations {
  margin-right: auto;
}

.footer-accreditations .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 1em 2em;
  justify-content: center;
  margin-bottom: 3em;
}

.footer-accreditations-title {
  font-size: 0.875em;
  font-weight: 700;
  margin-bottom: 1.5em;
}

.footer .logo-ul-city {
  display: block;
  width: 216px;
}

.footer-bottom {
  background-color: #000000;
  color: #ffffff;
  padding-bottom: 1em;
  padding-top: 1em;
  text-align: center;
}

.footer-copyright {
  font-size: 0.75em;
  margin-bottom: 0;
}

.footer-copyright span + span:before {
  content: "|";
  padding: 0 0.333em;
  position: relative;
  top: -1px;
}

.footer-legal {
  font-size: 0.75em;
  margin-bottom: 0;
  margin-top: 0.5em;
}

.footer-legal li {
  display: block;
  margin-top: 0.17em;
}

.footer-legal a {
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 400;
}

.footer-legal a:focus {
  outline-color: #b3b3b3;
}

.footer-copyright,
.footer-legal {
  line-height: 1.5em;
}

@media (min-width: 470px) {
  .footer-legal {
    margin-top: 0;
  }

  .footer-legal li {
    display: inline-block;
    margin-top: 0;
  }

  .footer-legal li + li:before {
    content: "|";
    padding: 0 0.5em;
    position: relative;
    top: -1px;
  }
}

@media (min-width: 576px) {
  .footer-navigation {
    align-items: flex-start;
    display: flex;
    gap: 2em;
    justify-content: space-between;
  }

  .footer-navigation-group {
    flex: 1 1 33%;
  }

  .footer-navigation-group + .footer-navigation-group {
    margin-top: 0;
  }
}

@media (min-width: 670px) {
  .footer-contact {
    display: flex;
    justify-content: space-between;
    gap: 2em;
  }

  .footer-social {
    justify-content: flex-end;
    margin-bottom: 0;
  }

  .footer-button {
    max-width: none;
    min-width: 12em;
  }

  .footer-utils {
    gap: 2em;
  }

  .footer-logos {
    display: flex;
    justify-content: flex-end;
    gap: 2em;
  }

  .footer-bottom {
    text-align: left;
  }
}

@media (min-width: 768px) {
  .footer-address-title-inner {
    text-align: left;
  }

  .footer-utils {
    display: flex;
    justify-content: space-between;
    max-width: 50em;
    transition: max-width 0.125s ease;
  }

  .footer-navigation {
    flex: 1 1 75%;
  }

  .footer-emergency {
    flex: 1 1 25%;
    margin-top: 0;
  }

  .footer-bottom-inner {
    display: flex;
    flex-wrap: wrap;
  }

  .footer-logos {
    text-align: left;
  }

  .footer-accreditations .menu {
    margin-bottom: 0;
  }

  .footer-copyright,
  .footer-legal {
    flex-shrink: 0;
  }

  .footer-legal {
    display: flex;
  }

  .footer-legal:before {
    content: "|";
    padding: 0 0.5em;
    position: relative;
    top: -1px;
  }

  .footer-legal li {
    display: flex;
  }
}

@media (min-width: 992px) {
  .footer-contact {
    display: flex;
    justify-content: space-between;
  }
}

@media (min-width: 1200px) {
  .footer-main .tel {
    text-decoration: unset;
  }

  .footer-utils {
    max-width: 72%;
  }
}