@lab-anssi/ui-kit 1.61.3 → 1.62.1

package/dist/dsfr/DsfrContainer.svelte

@@ -0,0 +1,894 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-container",
+    props: {
+      fluid: { attribute: "fluid", type: "Boolean" },
+    },
+  }}
+/>
+
+<script lang="ts">let { fluid = false } = $props();
+</script>
+
+<div class={[!fluid && "fr-container", fluid && "fr-container--fluid"]}>
+  <slot></slot>
+</div>
+
+<style>.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(dsfr-container) {
+  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-container {
+  box-sizing: border-box;
+}
+
+.fr-container-fluid {
+  box-sizing: border-box;
+}</style>