@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/dsfr/DsfrSkipLink.svelte

@@ -0,0 +1,990 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-skiplink",
+    props: {
+      items: { attribute: "items", type: "Array" },
+      ariaLabel: { attribute: "aria-label", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+import DsfrLink from "./DsfrLink.svelte";
+setThemeable($host());
+let { items = [], ariaLabel = "Accès rapide" } = $props();
+</script>
+
+<div class="fr-skiplinks">
+  <nav role="navigation" aria-label={ariaLabel} class="fr-container">
+    <ul class="fr-skiplinks__list">
+      {#each items as { label, href } (href)}
+        <li>
+          <DsfrLink {href} {label} />
+        </li>
+      {/each}
+    </ul>
+  </nav>
+</div>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */.fr-skiplinks{--ul-type:none;--ol-type:none;--ul-start:0;--ol-start:0;--xl-block:0;--li-bottom:0;--ol-content:none;--idle:transparent;--hover:var(--background-contrast-grey-hover);--active:var(--background-contrast-grey-active);background-color:var(--background-contrast-grey);opacity:0;padding:1rem 0;position:absolute;top:0;transform:translateY(-100%)}.fr-skiplinks:focus-within{opacity:1;position:relative;transform:translateY(0)}.fr-skiplinks__list{display:flex;flex-direction:column}.fr-skiplinks__list>li{margin-bottom:1rem}.fr-skiplinks__list>li:before{content:none}.fr-skiplinks__list>li .fr-link{font-size:1rem;line-height:1.5rem;padding:0}.fr-skiplinks__list>li .fr-link:after,.fr-skiplinks__list>li .fr-link:before{--icon-size:1rem}.fr-skiplinks__list>li:last-child{margin-bottom:0}.fr-skiplinks__list:focus-within{position:relative;transform:translateY(0)}@media (min-width:36em){
+  /*! media sm */}@media (min-width:48em){
+  /*! media md */.fr-skiplinks{padding:.75rem 0}.fr-skiplinks__list>li{margin:0 .5rem}.fr-skiplinks__list{flex-direction:row;flex-wrap:wrap;margin:0 -1rem}}@media (min-width:62em){
+  /*! media lg */}@media (min-width:78em){
+  /*! media xl */}:root {
+  --ul-type: disc;
+  --ol-type: decimal;
+  --ul-start: 1rem;
+  --ol-start: 1.5rem;
+  --xl-block: 0.5rem;
+  --li-bottom: 0.25rem;
+  --xl-base: 1em;
+  --ol-content: counters(li-counter, ".") ".\00a0\00a0";
+}
+
+ul,
+ol,
+dl {
+  margin: 0;
+  padding: 0;
+  margin-block-start: var(--xl-block);
+  margin-block-end: var(--xl-block);
+  --xl-size: var(--xl-base);
+}
+
+ul {
+  list-style-type: var(--ul-type);
+  padding-inline-start: var(--ul-start);
+}
+ul > li::marker {
+  font-size: calc(var(--xl-size) * 0.9);
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  ul > li::marker {
+    color: graytext;
+  }
+}
+
+ol {
+  list-style-type: var(--ol-type);
+  padding-inline-start: var(--ol-start);
+  counter-reset: li-counter;
+}
+ol > li {
+  counter-increment: li-counter;
+}
+ol > li::marker {
+  content: var(--ol-content);
+  font-size: var(--xl-size);
+  font-weight: bold;
+}
+
+dl,
+dd {
+  margin: 0;
+  padding-inline-start: var(--ul-start);
+}
+
+li,
+dd,
+dt {
+  --xl-base: calc(var(--xl-size) * 0.9);
+  padding-bottom: var(--li-bottom);
+}
+
+.fr-raw-list {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+}
+
+.fr-list {
+  --ul-type: disc;
+  --ol-type: decimal;
+  --ul-start: 1rem;
+  --ol-start: 1.5rem;
+  --xl-block: 0.5rem;
+  --li-bottom: 0.25rem;
+  --xl-base: 1em;
+  --ol-content: counters(li-counter, ".") ".\00a0\00a0";
+}
+
+.fr-container, .fr-container-sm, .fr-container-md, .fr-container-lg, .fr-container-xl {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.fr-container {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.fr-container--fluid {
+  padding-left: 0;
+  padding-right: 0;
+  max-width: none;
+  overflow: hidden;
+}
+
+.fr-grid-row--gutters {
+  margin: -0.5rem;
+}
+.fr-grid-row--gutters > [class^=fr-col-], .fr-grid-row--gutters > [class*=" fr-col-"],
+.fr-grid-row--gutters > .fr-col {
+  padding: 0.5rem;
+}
+
+.fr-grid-row--no-gutters {
+  margin: 0;
+}
+.fr-grid-row--no-gutters > [class^=fr-col-], .fr-grid-row--no-gutters > [class*=" fr-col-"],
+.fr-grid-row--no-gutters > .fr-col {
+  padding: 0;
+}
+
+.fr-col {
+  flex: 1;
+}
+
+.fr-col-1 {
+  flex: 0 0 calc(100% / 12);
+  width: calc(100% / 12);
+  max-width: calc(100% / 12);
+}
+
+.fr-col-offset-1:not(.fr-col-offset-1--right) {
+  margin-left: calc(100% / 12);
+}
+.fr-col-offset-1--right {
+  margin-right: calc(100% / 12);
+}
+
+.fr-col-2 {
+  flex: 0 0 calc(200% / 12);
+  width: calc(200% / 12);
+  max-width: calc(200% / 12);
+}
+
+.fr-col-offset-2:not(.fr-col-offset-2--right) {
+  margin-left: calc(200% / 12);
+}
+.fr-col-offset-2--right {
+  margin-right: calc(200% / 12);
+}
+
+.fr-col-3 {
+  flex: 0 0 calc(300% / 12);
+  width: calc(300% / 12);
+  max-width: calc(300% / 12);
+}
+
+.fr-col-offset-3:not(.fr-col-offset-3--right) {
+  margin-left: calc(300% / 12);
+}
+.fr-col-offset-3--right {
+  margin-right: calc(300% / 12);
+}
+
+.fr-col-4 {
+  flex: 0 0 calc(400% / 12);
+  width: calc(400% / 12);
+  max-width: calc(400% / 12);
+}
+
+.fr-col-offset-4:not(.fr-col-offset-4--right) {
+  margin-left: calc(400% / 12);
+}
+.fr-col-offset-4--right {
+  margin-right: calc(400% / 12);
+}
+
+.fr-col-5 {
+  flex: 0 0 calc(500% / 12);
+  width: calc(500% / 12);
+  max-width: calc(500% / 12);
+}
+
+.fr-col-offset-5:not(.fr-col-offset-5--right) {
+  margin-left: calc(500% / 12);
+}
+.fr-col-offset-5--right {
+  margin-right: calc(500% / 12);
+}
+
+.fr-col-6 {
+  flex: 0 0 calc(600% / 12);
+  width: calc(600% / 12);
+  max-width: calc(600% / 12);
+}
+
+.fr-col-offset-6:not(.fr-col-offset-6--right) {
+  margin-left: calc(600% / 12);
+}
+.fr-col-offset-6--right {
+  margin-right: calc(600% / 12);
+}
+
+.fr-col-7 {
+  flex: 0 0 calc(700% / 12);
+  width: calc(700% / 12);
+  max-width: calc(700% / 12);
+}
+
+.fr-col-offset-7:not(.fr-col-offset-7--right) {
+  margin-left: calc(700% / 12);
+}
+.fr-col-offset-7--right {
+  margin-right: calc(700% / 12);
+}
+
+.fr-col-8 {
+  flex: 0 0 calc(800% / 12);
+  width: calc(800% / 12);
+  max-width: calc(800% / 12);
+}
+
+.fr-col-offset-8:not(.fr-col-offset-8--right) {
+  margin-left: calc(800% / 12);
+}
+.fr-col-offset-8--right {
+  margin-right: calc(800% / 12);
+}
+
+.fr-col-9 {
+  flex: 0 0 calc(900% / 12);
+  width: calc(900% / 12);
+  max-width: calc(900% / 12);
+}
+
+.fr-col-offset-9:not(.fr-col-offset-9--right) {
+  margin-left: calc(900% / 12);
+}
+.fr-col-offset-9--right {
+  margin-right: calc(900% / 12);
+}
+
+.fr-col-10 {
+  flex: 0 0 calc(1000% / 12);
+  width: calc(1000% / 12);
+  max-width: calc(1000% / 12);
+}
+
+.fr-col-offset-10:not(.fr-col-offset-10--right) {
+  margin-left: calc(1000% / 12);
+}
+.fr-col-offset-10--right {
+  margin-right: calc(1000% / 12);
+}
+
+.fr-col-11 {
+  flex: 0 0 calc(1100% / 12);
+  width: calc(1100% / 12);
+  max-width: calc(1100% / 12);
+}
+
+.fr-col-offset-11:not(.fr-col-offset-11--right) {
+  margin-left: calc(1100% / 12);
+}
+.fr-col-offset-11--right {
+  margin-right: calc(1100% / 12);
+}
+
+.fr-col-12 {
+  flex: 0 0 calc(1200% / 12);
+  width: calc(1200% / 12);
+  max-width: calc(1200% / 12);
+}
+
+.fr-col-offset-12:not(.fr-col-offset-12--right) {
+  margin-left: calc(1200% / 12);
+}
+.fr-col-offset-12--right {
+  margin-right: calc(1200% / 12);
+}
+
+@media (min-width: 36em) {
+  .fr-container-sm {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .fr-container-sm--fluid {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: none;
+    overflow: hidden;
+  }
+  .fr-grid-row-sm--gutters {
+    margin: -0.5rem;
+  }
+  .fr-grid-row-sm--gutters > [class^=fr-col-], .fr-grid-row-sm--gutters > [class*=" fr-col-"],
+  .fr-grid-row-sm--gutters > .fr-col {
+    padding: 0.5rem;
+  }
+  .fr-grid-row-sm--no-gutters {
+    margin: 0;
+  }
+  .fr-grid-row-sm--no-gutters > [class^=fr-col-], .fr-grid-row-sm--no-gutters > [class*=" fr-col-"],
+  .fr-grid-row-sm--no-gutters > .fr-col {
+    padding: 0;
+  }
+  .fr-col-sm {
+    flex: 1;
+  }
+  .fr-col-sm-1 {
+    flex: 0 0 calc(100% / 12);
+    width: calc(100% / 12);
+    max-width: calc(100% / 12);
+  }
+  .fr-col-offset-sm-1:not(.fr-col-offset-sm-1--right) {
+    margin-left: calc(100% / 12);
+  }
+  .fr-col-offset-sm-1--right {
+    margin-right: calc(100% / 12);
+  }
+  .fr-col-sm-2 {
+    flex: 0 0 calc(200% / 12);
+    width: calc(200% / 12);
+    max-width: calc(200% / 12);
+  }
+  .fr-col-offset-sm-2:not(.fr-col-offset-sm-2--right) {
+    margin-left: calc(200% / 12);
+  }
+  .fr-col-offset-sm-2--right {
+    margin-right: calc(200% / 12);
+  }
+  .fr-col-sm-3 {
+    flex: 0 0 calc(300% / 12);
+    width: calc(300% / 12);
+    max-width: calc(300% / 12);
+  }
+  .fr-col-offset-sm-3:not(.fr-col-offset-sm-3--right) {
+    margin-left: calc(300% / 12);
+  }
+  .fr-col-offset-sm-3--right {
+    margin-right: calc(300% / 12);
+  }
+  .fr-col-sm-4 {
+    flex: 0 0 calc(400% / 12);
+    width: calc(400% / 12);
+    max-width: calc(400% / 12);
+  }
+  .fr-col-offset-sm-4:not(.fr-col-offset-sm-4--right) {
+    margin-left: calc(400% / 12);
+  }
+  .fr-col-offset-sm-4--right {
+    margin-right: calc(400% / 12);
+  }
+  .fr-col-sm-5 {
+    flex: 0 0 calc(500% / 12);
+    width: calc(500% / 12);
+    max-width: calc(500% / 12);
+  }
+  .fr-col-offset-sm-5:not(.fr-col-offset-sm-5--right) {
+    margin-left: calc(500% / 12);
+  }
+  .fr-col-offset-sm-5--right {
+    margin-right: calc(500% / 12);
+  }
+  .fr-col-sm-6 {
+    flex: 0 0 calc(600% / 12);
+    width: calc(600% / 12);
+    max-width: calc(600% / 12);
+  }
+  .fr-col-offset-sm-6:not(.fr-col-offset-sm-6--right) {
+    margin-left: calc(600% / 12);
+  }
+  .fr-col-offset-sm-6--right {
+    margin-right: calc(600% / 12);
+  }
+  .fr-col-sm-7 {
+    flex: 0 0 calc(700% / 12);
+    width: calc(700% / 12);
+    max-width: calc(700% / 12);
+  }
+  .fr-col-offset-sm-7:not(.fr-col-offset-sm-7--right) {
+    margin-left: calc(700% / 12);
+  }
+  .fr-col-offset-sm-7--right {
+    margin-right: calc(700% / 12);
+  }
+  .fr-col-sm-8 {
+    flex: 0 0 calc(800% / 12);
+    width: calc(800% / 12);
+    max-width: calc(800% / 12);
+  }
+  .fr-col-offset-sm-8:not(.fr-col-offset-sm-8--right) {
+    margin-left: calc(800% / 12);
+  }
+  .fr-col-offset-sm-8--right {
+    margin-right: calc(800% / 12);
+  }
+  .fr-col-sm-9 {
+    flex: 0 0 calc(900% / 12);
+    width: calc(900% / 12);
+    max-width: calc(900% / 12);
+  }
+  .fr-col-offset-sm-9:not(.fr-col-offset-sm-9--right) {
+    margin-left: calc(900% / 12);
+  }
+  .fr-col-offset-sm-9--right {
+    margin-right: calc(900% / 12);
+  }
+  .fr-col-sm-10 {
+    flex: 0 0 calc(1000% / 12);
+    width: calc(1000% / 12);
+    max-width: calc(1000% / 12);
+  }
+  .fr-col-offset-sm-10:not(.fr-col-offset-sm-10--right) {
+    margin-left: calc(1000% / 12);
+  }
+  .fr-col-offset-sm-10--right {
+    margin-right: calc(1000% / 12);
+  }
+  .fr-col-sm-11 {
+    flex: 0 0 calc(1100% / 12);
+    width: calc(1100% / 12);
+    max-width: calc(1100% / 12);
+  }
+  .fr-col-offset-sm-11:not(.fr-col-offset-sm-11--right) {
+    margin-left: calc(1100% / 12);
+  }
+  .fr-col-offset-sm-11--right {
+    margin-right: calc(1100% / 12);
+  }
+  .fr-col-sm-12 {
+    flex: 0 0 calc(1200% / 12);
+    width: calc(1200% / 12);
+    max-width: calc(1200% / 12);
+  }
+  .fr-col-offset-sm-12:not(.fr-col-offset-sm-12--right) {
+    margin-left: calc(1200% / 12);
+  }
+  .fr-col-offset-sm-12--right {
+    margin-right: calc(1200% / 12);
+  }
+}
+@media (min-width: 48em) {
+  .fr-container-md {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .fr-container-md--fluid {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: none;
+    overflow: hidden;
+  }
+  .fr-grid-row-md--gutters {
+    margin: -0.5rem;
+  }
+  .fr-grid-row-md--gutters > [class^=fr-col-], .fr-grid-row-md--gutters > [class*=" fr-col-"],
+  .fr-grid-row-md--gutters > .fr-col {
+    padding: 0.5rem;
+  }
+  .fr-grid-row-md--no-gutters {
+    margin: 0;
+  }
+  .fr-grid-row-md--no-gutters > [class^=fr-col-], .fr-grid-row-md--no-gutters > [class*=" fr-col-"],
+  .fr-grid-row-md--no-gutters > .fr-col {
+    padding: 0;
+  }
+  .fr-col-md {
+    flex: 1;
+  }
+  .fr-col-md-1 {
+    flex: 0 0 calc(100% / 12);
+    width: calc(100% / 12);
+    max-width: calc(100% / 12);
+  }
+  .fr-col-offset-md-1:not(.fr-col-offset-md-1--right) {
+    margin-left: calc(100% / 12);
+  }
+  .fr-col-offset-md-1--right {
+    margin-right: calc(100% / 12);
+  }
+  .fr-col-md-2 {
+    flex: 0 0 calc(200% / 12);
+    width: calc(200% / 12);
+    max-width: calc(200% / 12);
+  }
+  .fr-col-offset-md-2:not(.fr-col-offset-md-2--right) {
+    margin-left: calc(200% / 12);
+  }
+  .fr-col-offset-md-2--right {
+    margin-right: calc(200% / 12);
+  }
+  .fr-col-md-3 {
+    flex: 0 0 calc(300% / 12);
+    width: calc(300% / 12);
+    max-width: calc(300% / 12);
+  }
+  .fr-col-offset-md-3:not(.fr-col-offset-md-3--right) {
+    margin-left: calc(300% / 12);
+  }
+  .fr-col-offset-md-3--right {
+    margin-right: calc(300% / 12);
+  }
+  .fr-col-md-4 {
+    flex: 0 0 calc(400% / 12);
+    width: calc(400% / 12);
+    max-width: calc(400% / 12);
+  }
+  .fr-col-offset-md-4:not(.fr-col-offset-md-4--right) {
+    margin-left: calc(400% / 12);
+  }
+  .fr-col-offset-md-4--right {
+    margin-right: calc(400% / 12);
+  }
+  .fr-col-md-5 {
+    flex: 0 0 calc(500% / 12);
+    width: calc(500% / 12);
+    max-width: calc(500% / 12);
+  }
+  .fr-col-offset-md-5:not(.fr-col-offset-md-5--right) {
+    margin-left: calc(500% / 12);
+  }
+  .fr-col-offset-md-5--right {
+    margin-right: calc(500% / 12);
+  }
+  .fr-col-md-6 {
+    flex: 0 0 calc(600% / 12);
+    width: calc(600% / 12);
+    max-width: calc(600% / 12);
+  }
+  .fr-col-offset-md-6:not(.fr-col-offset-md-6--right) {
+    margin-left: calc(600% / 12);
+  }
+  .fr-col-offset-md-6--right {
+    margin-right: calc(600% / 12);
+  }
+  .fr-col-md-7 {
+    flex: 0 0 calc(700% / 12);
+    width: calc(700% / 12);
+    max-width: calc(700% / 12);
+  }
+  .fr-col-offset-md-7:not(.fr-col-offset-md-7--right) {
+    margin-left: calc(700% / 12);
+  }
+  .fr-col-offset-md-7--right {
+    margin-right: calc(700% / 12);
+  }
+  .fr-col-md-8 {
+    flex: 0 0 calc(800% / 12);
+    width: calc(800% / 12);
+    max-width: calc(800% / 12);
+  }
+  .fr-col-offset-md-8:not(.fr-col-offset-md-8--right) {
+    margin-left: calc(800% / 12);
+  }
+  .fr-col-offset-md-8--right {
+    margin-right: calc(800% / 12);
+  }
+  .fr-col-md-9 {
+    flex: 0 0 calc(900% / 12);
+    width: calc(900% / 12);
+    max-width: calc(900% / 12);
+  }
+  .fr-col-offset-md-9:not(.fr-col-offset-md-9--right) {
+    margin-left: calc(900% / 12);
+  }
+  .fr-col-offset-md-9--right {
+    margin-right: calc(900% / 12);
+  }
+  .fr-col-md-10 {
+    flex: 0 0 calc(1000% / 12);
+    width: calc(1000% / 12);
+    max-width: calc(1000% / 12);
+  }
+  .fr-col-offset-md-10:not(.fr-col-offset-md-10--right) {
+    margin-left: calc(1000% / 12);
+  }
+  .fr-col-offset-md-10--right {
+    margin-right: calc(1000% / 12);
+  }
+  .fr-col-md-11 {
+    flex: 0 0 calc(1100% / 12);
+    width: calc(1100% / 12);
+    max-width: calc(1100% / 12);
+  }
+  .fr-col-offset-md-11:not(.fr-col-offset-md-11--right) {
+    margin-left: calc(1100% / 12);
+  }
+  .fr-col-offset-md-11--right {
+    margin-right: calc(1100% / 12);
+  }
+  .fr-col-md-12 {
+    flex: 0 0 calc(1200% / 12);
+    width: calc(1200% / 12);
+    max-width: calc(1200% / 12);
+  }
+  .fr-col-offset-md-12:not(.fr-col-offset-md-12--right) {
+    margin-left: calc(1200% / 12);
+  }
+  .fr-col-offset-md-12--right {
+    margin-right: calc(1200% / 12);
+  }
+}
+@media (min-width: 62em) {
+  .fr-container, .fr-container-sm, .fr-container-md {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .fr-container-lg {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+  .fr-container-lg--fluid {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: none;
+    overflow: hidden;
+  }
+  .fr-grid-row--gutters, .fr-grid-row-sm--gutters, .fr-grid-row-md--gutters {
+    margin: -0.75rem;
+  }
+  .fr-grid-row--gutters > [class^=fr-col-], .fr-grid-row--gutters > [class*=" fr-col-"],
+  .fr-grid-row--gutters > .fr-col, .fr-grid-row-sm--gutters > [class^=fr-col-], .fr-grid-row-sm--gutters > [class*=" fr-col-"],
+  .fr-grid-row-sm--gutters > .fr-col, .fr-grid-row-md--gutters > [class^=fr-col-], .fr-grid-row-md--gutters > [class*=" fr-col-"],
+  .fr-grid-row-md--gutters > .fr-col {
+    padding: 0.75rem;
+  }
+  .fr-grid-row-lg--gutters {
+    margin: -0.75rem;
+  }
+  .fr-grid-row-lg--gutters > [class^=fr-col-], .fr-grid-row-lg--gutters > [class*=" fr-col-"],
+  .fr-grid-row-lg--gutters > .fr-col {
+    padding: 0.75rem;
+  }
+  .fr-grid-row-lg--no-gutters {
+    margin: 0;
+  }
+  .fr-grid-row-lg--no-gutters > [class^=fr-col-], .fr-grid-row-lg--no-gutters > [class*=" fr-col-"],
+  .fr-grid-row-lg--no-gutters > .fr-col {
+    padding: 0;
+  }
+  .fr-col-lg {
+    flex: 1;
+  }
+  .fr-col-lg-1 {
+    flex: 0 0 calc(100% / 12);
+    width: calc(100% / 12);
+    max-width: calc(100% / 12);
+  }
+  .fr-col-offset-lg-1:not(.fr-col-offset-lg-1--right) {
+    margin-left: calc(100% / 12);
+  }
+  .fr-col-offset-lg-1--right {
+    margin-right: calc(100% / 12);
+  }
+  .fr-col-lg-2 {
+    flex: 0 0 calc(200% / 12);
+    width: calc(200% / 12);
+    max-width: calc(200% / 12);
+  }
+  .fr-col-offset-lg-2:not(.fr-col-offset-lg-2--right) {
+    margin-left: calc(200% / 12);
+  }
+  .fr-col-offset-lg-2--right {
+    margin-right: calc(200% / 12);
+  }
+  .fr-col-lg-3 {
+    flex: 0 0 calc(300% / 12);
+    width: calc(300% / 12);
+    max-width: calc(300% / 12);
+  }
+  .fr-col-offset-lg-3:not(.fr-col-offset-lg-3--right) {
+    margin-left: calc(300% / 12);
+  }
+  .fr-col-offset-lg-3--right {
+    margin-right: calc(300% / 12);
+  }
+  .fr-col-lg-4 {
+    flex: 0 0 calc(400% / 12);
+    width: calc(400% / 12);
+    max-width: calc(400% / 12);
+  }
+  .fr-col-offset-lg-4:not(.fr-col-offset-lg-4--right) {
+    margin-left: calc(400% / 12);
+  }
+  .fr-col-offset-lg-4--right {
+    margin-right: calc(400% / 12);
+  }
+  .fr-col-lg-5 {
+    flex: 0 0 calc(500% / 12);
+    width: calc(500% / 12);
+    max-width: calc(500% / 12);
+  }
+  .fr-col-offset-lg-5:not(.fr-col-offset-lg-5--right) {
+    margin-left: calc(500% / 12);
+  }
+  .fr-col-offset-lg-5--right {
+    margin-right: calc(500% / 12);
+  }
+  .fr-col-lg-6 {
+    flex: 0 0 calc(600% / 12);
+    width: calc(600% / 12);
+    max-width: calc(600% / 12);
+  }
+  .fr-col-offset-lg-6:not(.fr-col-offset-lg-6--right) {
+    margin-left: calc(600% / 12);
+  }
+  .fr-col-offset-lg-6--right {
+    margin-right: calc(600% / 12);
+  }
+  .fr-col-lg-7 {
+    flex: 0 0 calc(700% / 12);
+    width: calc(700% / 12);
+    max-width: calc(700% / 12);
+  }
+  .fr-col-offset-lg-7:not(.fr-col-offset-lg-7--right) {
+    margin-left: calc(700% / 12);
+  }
+  .fr-col-offset-lg-7--right {
+    margin-right: calc(700% / 12);
+  }
+  .fr-col-lg-8 {
+    flex: 0 0 calc(800% / 12);
+    width: calc(800% / 12);
+    max-width: calc(800% / 12);
+  }
+  .fr-col-offset-lg-8:not(.fr-col-offset-lg-8--right) {
+    margin-left: calc(800% / 12);
+  }
+  .fr-col-offset-lg-8--right {
+    margin-right: calc(800% / 12);
+  }
+  .fr-col-lg-9 {
+    flex: 0 0 calc(900% / 12);
+    width: calc(900% / 12);
+    max-width: calc(900% / 12);
+  }
+  .fr-col-offset-lg-9:not(.fr-col-offset-lg-9--right) {
+    margin-left: calc(900% / 12);
+  }
+  .fr-col-offset-lg-9--right {
+    margin-right: calc(900% / 12);
+  }
+  .fr-col-lg-10 {
+    flex: 0 0 calc(1000% / 12);
+    width: calc(1000% / 12);
+    max-width: calc(1000% / 12);
+  }
+  .fr-col-offset-lg-10:not(.fr-col-offset-lg-10--right) {
+    margin-left: calc(1000% / 12);
+  }
+  .fr-col-offset-lg-10--right {
+    margin-right: calc(1000% / 12);
+  }
+  .fr-col-lg-11 {
+    flex: 0 0 calc(1100% / 12);
+    width: calc(1100% / 12);
+    max-width: calc(1100% / 12);
+  }
+  .fr-col-offset-lg-11:not(.fr-col-offset-lg-11--right) {
+    margin-left: calc(1100% / 12);
+  }
+  .fr-col-offset-lg-11--right {
+    margin-right: calc(1100% / 12);
+  }
+  .fr-col-lg-12 {
+    flex: 0 0 calc(1200% / 12);
+    width: calc(1200% / 12);
+    max-width: calc(1200% / 12);
+  }
+  .fr-col-offset-lg-12:not(.fr-col-offset-lg-12--right) {
+    margin-left: calc(1200% / 12);
+  }
+  .fr-col-offset-lg-12--right {
+    margin-right: calc(1200% / 12);
+  }
+}
+@media (min-width: 78em) {
+  .fr-container, .fr-container-sm, .fr-container-md, .fr-container-lg {
+    max-width: 78rem;
+  }
+  .fr-container-xl {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    max-width: 78rem;
+  }
+  .fr-container-xl--fluid {
+    padding-left: 0;
+    padding-right: 0;
+    max-width: none;
+    overflow: hidden;
+  }
+  .fr-grid-row-xl--gutters {
+    margin: -0.75rem;
+  }
+  .fr-grid-row-xl--gutters > [class^=fr-col-], .fr-grid-row-xl--gutters > [class*=" fr-col-"],
+  .fr-grid-row-xl--gutters > .fr-col {
+    padding: 0.75rem;
+  }
+  .fr-grid-row-xl--no-gutters {
+    margin: 0;
+  }
+  .fr-grid-row-xl--no-gutters > [class^=fr-col-], .fr-grid-row-xl--no-gutters > [class*=" fr-col-"],
+  .fr-grid-row-xl--no-gutters > .fr-col {
+    padding: 0;
+  }
+  .fr-col-xl {
+    flex: 1;
+  }
+  .fr-col-xl-1 {
+    flex: 0 0 calc(100% / 12);
+    width: calc(100% / 12);
+    max-width: calc(100% / 12);
+  }
+  .fr-col-offset-xl-1:not(.fr-col-offset-xl-1--right) {
+    margin-left: calc(100% / 12);
+  }
+  .fr-col-offset-xl-1--right {
+    margin-right: calc(100% / 12);
+  }
+  .fr-col-xl-2 {
+    flex: 0 0 calc(200% / 12);
+    width: calc(200% / 12);
+    max-width: calc(200% / 12);
+  }
+  .fr-col-offset-xl-2:not(.fr-col-offset-xl-2--right) {
+    margin-left: calc(200% / 12);
+  }
+  .fr-col-offset-xl-2--right {
+    margin-right: calc(200% / 12);
+  }
+  .fr-col-xl-3 {
+    flex: 0 0 calc(300% / 12);
+    width: calc(300% / 12);
+    max-width: calc(300% / 12);
+  }
+  .fr-col-offset-xl-3:not(.fr-col-offset-xl-3--right) {
+    margin-left: calc(300% / 12);
+  }
+  .fr-col-offset-xl-3--right {
+    margin-right: calc(300% / 12);
+  }
+  .fr-col-xl-4 {
+    flex: 0 0 calc(400% / 12);
+    width: calc(400% / 12);
+    max-width: calc(400% / 12);
+  }
+  .fr-col-offset-xl-4:not(.fr-col-offset-xl-4--right) {
+    margin-left: calc(400% / 12);
+  }
+  .fr-col-offset-xl-4--right {
+    margin-right: calc(400% / 12);
+  }
+  .fr-col-xl-5 {
+    flex: 0 0 calc(500% / 12);
+    width: calc(500% / 12);
+    max-width: calc(500% / 12);
+  }
+  .fr-col-offset-xl-5:not(.fr-col-offset-xl-5--right) {
+    margin-left: calc(500% / 12);
+  }
+  .fr-col-offset-xl-5--right {
+    margin-right: calc(500% / 12);
+  }
+  .fr-col-xl-6 {
+    flex: 0 0 calc(600% / 12);
+    width: calc(600% / 12);
+    max-width: calc(600% / 12);
+  }
+  .fr-col-offset-xl-6:not(.fr-col-offset-xl-6--right) {
+    margin-left: calc(600% / 12);
+  }
+  .fr-col-offset-xl-6--right {
+    margin-right: calc(600% / 12);
+  }
+  .fr-col-xl-7 {
+    flex: 0 0 calc(700% / 12);
+    width: calc(700% / 12);
+    max-width: calc(700% / 12);
+  }
+  .fr-col-offset-xl-7:not(.fr-col-offset-xl-7--right) {
+    margin-left: calc(700% / 12);
+  }
+  .fr-col-offset-xl-7--right {
+    margin-right: calc(700% / 12);
+  }
+  .fr-col-xl-8 {
+    flex: 0 0 calc(800% / 12);
+    width: calc(800% / 12);
+    max-width: calc(800% / 12);
+  }
+  .fr-col-offset-xl-8:not(.fr-col-offset-xl-8--right) {
+    margin-left: calc(800% / 12);
+  }
+  .fr-col-offset-xl-8--right {
+    margin-right: calc(800% / 12);
+  }
+  .fr-col-xl-9 {
+    flex: 0 0 calc(900% / 12);
+    width: calc(900% / 12);
+    max-width: calc(900% / 12);
+  }
+  .fr-col-offset-xl-9:not(.fr-col-offset-xl-9--right) {
+    margin-left: calc(900% / 12);
+  }
+  .fr-col-offset-xl-9--right {
+    margin-right: calc(900% / 12);
+  }
+  .fr-col-xl-10 {
+    flex: 0 0 calc(1000% / 12);
+    width: calc(1000% / 12);
+    max-width: calc(1000% / 12);
+  }
+  .fr-col-offset-xl-10:not(.fr-col-offset-xl-10--right) {
+    margin-left: calc(1000% / 12);
+  }
+  .fr-col-offset-xl-10--right {
+    margin-right: calc(1000% / 12);
+  }
+  .fr-col-xl-11 {
+    flex: 0 0 calc(1100% / 12);
+    width: calc(1100% / 12);
+    max-width: calc(1100% / 12);
+  }
+  .fr-col-offset-xl-11:not(.fr-col-offset-xl-11--right) {
+    margin-left: calc(1100% / 12);
+  }
+  .fr-col-offset-xl-11--right {
+    margin-right: calc(1100% / 12);
+  }
+  .fr-col-xl-12 {
+    flex: 0 0 calc(1200% / 12);
+    width: calc(1200% / 12);
+    max-width: calc(1200% / 12);
+  }
+  .fr-col-offset-xl-12:not(.fr-col-offset-xl-12--right) {
+    margin-left: calc(1200% / 12);
+  }
+  .fr-col-offset-xl-12--right {
+    margin-right: calc(1200% / 12);
+  }
+}
+:host {
+  display: block;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background-color: var(--background-default-grey);
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  color: var(--text-default-grey);
+  background-color: transparent;
+}
+
+.fr-skiplinks {
+  box-sizing: border-box;
+}</style>