@lab-anssi/ui-kit 1.61.2 → 1.62.0

package/dist/dsfr/DsfrFooter.svelte

@@ -0,0 +1,2370 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-footer",
+    props: {
+      id: { attribute: "id", type: "String" },
+      isMourning: { attribute: "is-mourning", type: "Boolean" },
+      brandLogoTitle: { attribute: "brand-logo-title", type: "String" },
+      brandLinkTitle: { attribute: "brand-link-title", type: "String" },
+      brandLinkHref: { attribute: "brand-link-href", type: "String" },
+      brandLinkId: { attribute: "brand-link-id", type: "String" },
+      hasBrandOperator: { attribute: "has-brand-operator", type: "Boolean" },
+      brandOperatorAlt: { attribute: "brand-operator-alt", type: "String" },
+      brandOperatorSrc: { attribute: "brand-operator-src", type: "String" },
+      brandOperatorStyle: { attribute: "brand-operator-style", type: "String" },
+      hasDescription: { attribute: "has-description", type: "Boolean" },
+      contentDescription: { attribute: "content-description", type: "String" },
+      hasPartners: { attribute: "has-partners", type: "Boolean" },
+      partnerTitle: { attribute: "partner-title", type: "String" },
+      mainPartnerSrc: { attribute: "main-partner-src", type: "String" },
+      mainPartnerHref: { attribute: "main-partner-href", type: "String" },
+      mainPartnerAlt: { attribute: "main-partner-alt", type: "String" },
+      mainPartnerStyle: { attribute: "main-partner-style", type: "String" },
+      subPartners: { attribute: "sub-partners", type: "Array" },
+      bottomLinks: { attribute: "bottom-links", type: "Array" },
+      bottomCopyright: { attribute: "bottom-copyright", type: "String" },
+      compact: { attribute: "compact", type: "Boolean" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+setThemeable($host(), false);
+let { id, isMourning, brandLogoTitle = "République<br>Française", brandLinkTitle, brandLinkHref, brandLinkId, hasBrandOperator, brandOperatorAlt = "", brandOperatorSrc, brandOperatorStyle, hasDescription, contentDescription, hasPartners, partnerTitle, mainPartnerSrc, mainPartnerHref, mainPartnerAlt = "", mainPartnerStyle, subPartners, bottomLinks, bottomCopyright, compact } = $props();
+/** Liste des liens (non modifiables) */
+const contentLinks = [
+	{
+		label: "info.gouv.fr",
+		href: "https://info.gouv.fr",
+		blank: true,
+		attributes: { title: "info.gouv.fr - nouvelle fenêtre" }
+	},
+	{
+		label: "service-public.gouv.fr",
+		href: "https://service-public.gouv.fr",
+		blank: true,
+		attributes: { title: "service-public.gouv.fr - nouvelle fenêtre" }
+	},
+	{
+		label: "legifrance.gouv.fr",
+		href: "https://legifrance.gouv.fr",
+		blank: true,
+		attributes: { title: "legifrance.gouv.fr - nouvelle fenêtre" }
+	},
+	{
+		label: "data.gouv.fr",
+		href: "https://data.gouv.fr",
+		blank: true,
+		attributes: { title: "data.gouv.fr - nouvelle fenêtre" }
+	}
+];
+$effect(() => {
+	const rootElement = $host() ?? document.documentElement;
+	if (isMourning) {
+		rootElement.setAttribute("data-fr-mourning", "");
+	} else {
+		rootElement.removeAttribute("data-fr-mourning");
+	}
+});
+</script>
+
+<footer class="fr-footer" class:fr-footer--compact={compact} role="contentinfo" {id}>
+  <div class="fr-container">
+    {#if !compact}
+      <div class="fr-footer__body">
+        <div class="fr-footer__brand fr-enlarge-link">
+          {#if hasBrandOperator}
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            <p class="fr-logo">{@html brandLogoTitle}</p>
+            <a
+              id={brandLinkId}
+              title={brandLinkTitle}
+              href={brandLinkHref}
+              class="fr-footer__brand-link"
+            >
+              <img
+                class="fr-footer__logo"
+                style={brandOperatorStyle}
+                src={brandOperatorSrc}
+                alt={brandOperatorAlt}
+              />
+            </a>
+          {:else}
+            <a id={brandLinkId} title={brandLinkTitle} href={brandLinkHref}>
+              <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+              <p class="fr-logo">{@html brandLogoTitle}</p>
+            </a>
+          {/if}
+        </div>
+        <div class="fr-footer__content">
+          {#if hasDescription}
+            {#if $$slots.description}
+              <slot name="description"></slot>
+            {:else if contentDescription}
+              <p class="fr-footer__content-desc">
+                <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+                {@html contentDescription}
+              </p>
+            {/if}
+          {/if}
+          {#if contentLinks.length > 0}
+            <ul class="fr-footer__content-list">
+              {#each contentLinks as link, index (link.href)}
+                <li class="fr-footer__content-item">
+                  <a
+                    title={link.attributes?.title}
+                    id={"footer__content-link-" + index}
+                    href={link.href}
+                    target={link.blank ? "_blank" : "_self"}
+                    rel={link.blank ? "noopener external" : undefined}
+                    class="fr-footer__content-link"
+                  >
+                    {link.label}
+                  </a>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </div>
+      </div>
+      {#if hasPartners}
+        <div class="fr-footer__partners">
+          <h2 class="fr-footer__partners-title">{partnerTitle}</h2>
+          <div class="fr-footer__partners-logos">
+            <div class="fr-footer__partners-main">
+              <a class="fr-footer__partners-link" href={mainPartnerHref}>
+                <img
+                  class="fr-footer__logo"
+                  style={mainPartnerStyle}
+                  src={mainPartnerSrc}
+                  alt={mainPartnerAlt}
+                />
+              </a>
+            </div>
+            {#if subPartners && subPartners.length > 0}
+              <div class="fr-footer__partners-sub">
+                <ul>
+                  {#each subPartners as link, index (index)}
+                    <li>
+                      <a class="fr-footer__partners-link" href={link.href}>
+                        <img
+                          class="fr-footer__logo"
+                          style={link.style}
+                          src={link.src}
+                          alt={link.alt}
+                        />
+                      </a>
+                    </li>
+                  {/each}
+                </ul>
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    {/if}
+    <div class="fr-footer__bottom">
+      {#if bottomLinks && bottomLinks.length > 0}
+        <ul class="fr-footer__bottom-list">
+          {#each bottomLinks as link, index (index)}
+            <li class="fr-footer__bottom-item">
+              <a
+                id={"footer__bottom-link-" + index}
+                href={link.href}
+                class="fr-footer__bottom-link"
+              >
+                {link.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+      {#if bottomCopyright}
+        <div class="fr-footer__bottom-copy">
+          <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+          <p>{@html bottomCopyright}</p>
+        </div>
+      {/if}
+    </div>
+  </div>
+</footer>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ *//* ¯¯¯¯¯¯¯¯¯ *\
+  LOGO
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-logo {
+  --text-spacing: 0;
+  --underline-img: none;
+  display: inline-block;
+  font-weight: 700;
+  line-height: 1.0317460317em;
+  letter-spacing: -0.01em;
+  text-transform: uppercase;
+  vertical-align: middle;
+  text-indent: -0.1em;
+  font-size: 1.05rem;
+  color: var(--text-black-white-grey);
+}
+
+.fr-logo::before {
+  width: 2.75rem;
+  height: 1rem;
+  margin-bottom: 0.3333333333rem;
+  background-size: 2.75rem 1.125rem, 2.75rem 1rem, 0;
+  background-position: 0 -0.0625rem, 0 0, 0 0;
+  content: "";
+  display: block;
+  background-repeat: no-repeat, no-repeat, no-repeat;
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18'%3E%3Cpath fill='%23fff' d='M11.3 10.2c-.9.6-1.7 1.3-2.3 2.1v-.1c.4-.5.7-1 1-1.5.4-.2.7-.5 1-.8.5-.5 1-1 1.7-1.3.3-.1.5-.1.8 0-.1.1-.2.1-.4.2H13v-.1c-.3.3-.7.5-1 .9-.1.2-.2.6-.7.6 0 .1.1 0 0 0zm1.6 4.6c0-.1-.1 0-.2 0l-.1.1-.1.1-.2.2s.1.1.2 0l.1-.1c.1 0 .2-.1.2-.2.1 0 .1 0 .1-.1 0 .1 0 0 0 0zm-1.6-4.3c.1 0 .2 0 .2-.1s.1-.1.1-.1v-.1c-.2.1-.3.2-.3.3zm2.4 1.9s0-.1 0 0c.1-.1.2-.1.3-.1.7-.1 1.4-.3 2.1-.6-.8-.5-1.7-.9-2.6-1h.1c-.1-.1-.3-.1-.5-.2h.1c-.2-.1-.5-.1-.7-.2.1 0 .2-.2.2-.3h-.1c-.4.2-.6.5-.8.9.2.1.5 0 .7.1h-.3c-.1 0-.2.1-.2.2h.1c-.1 0-.1.1-.2.1.1.1.2 0 .4 0 0 .1.1.1.1.1-.1 0-.2.1-.3.3-.1.2-.2.2-.3.3v.1c-.3.2-.6.5-.9.8v.1c-.1.1-.2.1-.2.2v.1c.4-.1.6-.4 1-.5l.6-.3c.2 0 .3-.1.5-.1v.1h.2c0 .1-.2 0-.1.1s.3.1.4 0c.2-.2.3-.2.4-.2zM12.4 14c-.4.2-.9.2-1.2.4 0 0 0 .1-.1.1 0 0-.1 0-.1.1-.1 0-.1.1-.2.2l-.1.1s0 .1.1 0l.1-.1s-.1.1-.1.2V15.3l-.1.1s0 .1-.1.1l-.1.1.2-.2.1-.1h.2s0-.1.1-.1c.1-.1.2-.2.3-.2h.1c.1-.1.3-.1.4-.2.1-.1.2-.2.3-.2.2-.2.5-.3.8-.5-.1 0-.2-.1-.3-.1 0 .1-.2 0-.3 0zM30 9.7c-.1.2-.4.2-.6.3-.2.2 0 .4.1.5.1.3-.2.5-.4.5.1.1.2.1.2.1 0 .2.2.2.1.4s-.5.3-.3.5c.1.2.1.5 0 .7-.1.2-.3.4-.5.5-.2.1-.4.1-.6 0-.1 0-.1-.1-.2-.1-.5-.1-1-.2-1.5-.2-.1 0-.3.1-.4.1-.1.1-.3.2-.4.3l-.1.1c-.1.1-.2.2-.2.3-.1.2-.2.4-.2.6-.2.5-.2 1 0 1.4 0 0 1 .3 1.7.6.2.1.5.2.7.4l1.7 1H13.2l1.6-1c.6-.4 1.3-.7 2-1 .5-.2 1.1-.5 1.5-.9.2-.2.3-.4.5-.5.3-.4.6-.7 1-1l.3-.3s0-.1.1-.1c-.2.1-.2.2-.4.2 0 0-.1 0 0-.1s.2-.2.3-.2v-.1c-.4 0-.7.2-1 .5h-.2c-.5.2-.8.5-1.2.7v-.1c-.2.1-.4.2-.5.2-.2 0-.5.1-.8 0-.4 0-.7.1-1.1.2-.2.1-.4.1-.6.2v.1l-.2.2c-.2.1-.3.2-.5.4l-.5.5h-.1l.1-.1.1-.1c0-.1.1-.1.1-.2.2-.1.3-.3.5-.4 0 0-.1 0 0 0 0 0 0-.1.1-.1l-.1.1c-.1.1-.1.2-.2.2v-.1-.1l.2-.2c.1-.1.2-.1.3-.2h.1c-.2.1-.3.1-.5.2H14h-.1c0-.1.1-.1.2-.2h.1c1-.8 2.3-.6 3.4-1 .1-.1.2-.1.3-.2.1-.1.3-.2.5-.3.2-.2.4-.4.5-.7v-.1c-.4.4-.8.7-1.3 1-.6.2-1.3.4-2 .4 0-.1.1-.1.1-.1 0-.1.1-.1.1-.2h.1s0-.1.1-.1h.1c-.1-.1-.3.1-.4 0 .1-.1 0-.2.1-.2h.1s0-.1.1-.1c.5-.3.9-.5 1.3-.7-.1 0-.1.1-.2 0 .1 0 0-.1.1-.1.3-.1.6-.3.9-.4-.1 0-.2.1-.3 0 .1 0 .1-.1.2-.1v-.1h0c0-.1.1 0 .2-.1h-.1c.1-.1.2-.2.4-.2 0-.1-.1 0-.1-.1h.1-.5c-.1 0 0-.1 0-.1.1-.2.2-.5.3-.7h-.1c-.3.3-.8.5-1.2.6h-.2c-.2.1-.4.1-.5 0-.1-.1-.2-.2-.3-.2-.2-.1-.5-.3-.8-.4-.7-.2-1.5-.4-2.3-.3.3-.1.7-.2 1.1-.3.5-.2 1-.3 1.5-.3h-.3c-.4 0-.9.1-1.3.2-.3.1-.6.2-.9.2-.2.1-.3.2-.5.2v-.1c.3-.4.7-.7 1.1-.8.5-.1 1.1 0 1.6.1.4 0 .8.1 1.1.2.1 0 .2.2.3.3.2.1.4 0 .5.1v-.2c.1-.1.3 0 .4 0 .2-.2-.2-.4-.3-.6v-.1c.2.2.5.4.7.6.1.1.5.2.5 0-.2-.3-.4-.6-.7-.9v-.2c-.1 0-.1 0-.1-.1-.1-.1-.1-.2-.1-.3-.1-.2 0-.4-.1-.5-.1-.2-.1-.3-.1-.5-.1-.5-.2-1-.3-1.4-.1-.6.3-1 .6-1.5.2-.4.5-.7.8-1 .1-.4.3-.7.6-1 .3-.3.6-.5.9-.6.3-.1.5-.2.8-.3l2.5-.4H25l1.8.3c.1 0 .2 0 .2.1.1.1.3.2.4.2.2.1.4.3.6.5.1.1.2.3.1.4-.1.1-.1.4-.2.4-.2.1-.4.1-.6.1-.1 0-.2 0-.4-.1.5.2.9.4 1.2.8 0 .1.2.1.3.1v.1c-.1.1-.1.1-.1.2h.1c.1-.1.1-.4.3-.3.2.1.2.3.1.4-.1.1-.2.2-.4.3v.2c.1.1.1.2.2.4s.1.5.2.7c.1.5.2.9.2 1.4 0 .2-.1.5 0 .7l.3.6c.1.2.2.3.3.5.2.3.6.6.4 1zm-15.6 5.2c-.1 0-.1.1-.1.1s.1 0 .1-.1zm5.8-1.8c-.1.1 0 0 0 0zm-6.7-.2c0 .1.1 0 .1 0 .2-.1.5 0 .6-.2-.1-.1-.2 0-.2-.1-.1 0-.2 0-.2.1-.1.1-.3.1-.3.2z'/%3E%3Cpath fill='gray' d='M27.9 6.8c.1 0 .3 0 .3.1-.1.2-.4.3-.6.5h-.1c-.1.1-.1.2-.1.2h-.3c.1.1.3.2.5.2l.1.1h.2V8c-.1.1-.2.1-.4.1.2.1.5.1.7 0 .2-.1 0-.4.1-.5-.1 0 0-.1-.1-.1.1-.1.1-.2.2-.2s.1 0 .2-.1c0-.1-.1-.1-.1-.2.2-.1.3-.3.3-.5 0-.1-.3-.1-.4-.2h-.5c-.2 0-.3.1-.5.1l-.6.3c.2-.1.4-.1.7-.2 0 .3.2.3.4.3'/%3E%3C/svg%3E"), linear-gradient(90deg, #000091 0%, #000091 50%, #e1000f 50%, #e1000f 100%), linear-gradient(90deg, #000 0%, #000 100%);
+  forced-color-adjust: none;
+}
+
+:root[data-fr-mourning] .fr-logo::before {
+  background-size: 2.75rem 1.125rem, 0, 2.75rem 1rem;
+  box-shadow: 0 0 0 1px #fff;
+}
+
+.fr-logo::after {
+  min-width: 2.625rem;
+  background-size: 5.25rem 3.75rem;
+  background-position: 0 calc(100% + 1.875rem);
+  padding-top: 2.2083333333rem;
+  content: "";
+  display: block;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 252 180'%3E%3Cdefs%3E%3Csymbol id='a' viewBox='0 0 11 15.5'%3E%3Cpath d='M10.4 5.3C11.9 1.5 10.1 0 7.9 0 4.2 0 0 6.5 0 11.7c0 2.5 1.2 3.8 3 3.8 2.1 0 4.3-2 6.2-5.5h-1c-1.2 1.5-2.6 2.6-3.9 2.6-1.3 0-2-.8-2-2.6a10.7 10.7 0 01.3-2.2zm-4-3.1c1.1 0 2 .8 1.5 2.6L3.1 6.1c.8-2.2 2.2-4 3.4-4z'/%3E%3C/symbol%3E%3Csymbol id='b' viewBox='0 0 12.4 21.8'%3E%3Cuse width='11' height='15.5' y='6.4' href='%23a'/%3E%3Cpath d='M7.9 4.7L12.4.6V0h-3L6.7 4.7H8z'/%3E%3C/symbol%3E%3Csymbol id='c' viewBox='0 0 11.5 19'%3E%3Cpath d='M1.7 5.7h2.6L.1 17.1a1.3 1.3 0 001.2 2c3 0 6.4-2.6 7.8-6.2h-.7a9.4 9.4 0 01-5.1 3.5L7 5.7H11l.5-1.6H7.7L9 0H7.6L4.9 4.1l-3.2.4v1.2z'/%3E%3C/symbol%3E%3Csymbol id='d' viewBox='0 0 9.8 21.9'%3E%3Cpath d='M7.6 8c.3-1-.4-1.6-1-1.6-2.2 0-5 2.1-6 5h.7A5.6 5.6 0 014.4 9L.1 20.3a1.1 1.1 0 001 1.6c2.2 0 4.7-2 5.8-5H6A5.6 5.6 0 013 19.5zM8 3.7a1.8 1.8 0 001.8-1.8A1.8 1.8 0 008 0a1.8 1.8 0 00-1.8 1.8A1.8 1.8 0 008 3.6'/%3E%3C/symbol%3E%3Csymbol id='e' viewBox='0 0 14.8 15.5'%3E%3Cpath d='M3.3 3.1c.7 0 1 1 0 3.4l-3 6.8c-.7 1.3 0 2.2 1.2 2.2a1.3 1.3 0 001.5-1l3-8C7.4 4.8 10 3 11 3s.8.6.3 1.6l-4.6 9a1.3 1.3 0 001.1 1.9c2.3 0 5-2 6-5h-.6A5.6 5.6 0 0110 13l4-8a6.1 6.1 0 00.8-2.8A2 2 0 0012.6 0c-2 0-3.6 2.2-6 5V2.8C6.6 1.4 6.1 0 4.8 0 3.2 0 1.8 2.5.7 4.9h.7c.7-1.1 1.3-1.8 2-1.8'/%3E%3C/symbol%3E%3Csymbol id='f' viewBox='0 0 12 15.5'%3E%3Cpath d='M11.8 3.5c.5-1.9.2-3.5-1.2-3.5-1.8 0-2.3 1.2-4 5V2.8C6.5 1.3 6 0 4.6 0 3.1 0 1.7 2.5.5 5h.8C2 3.7 2.8 3 3.3 3c.7 0 1 1 0 3.4l-3 6.8c-.7 1.3 0 2.1 1.2 2.1a1.3 1.3 0 001.5-1l3-8a50.3 50.3 0 012.6-3h3.2z'/%3E%3C/symbol%3E%3Csymbol id='g' viewBox='0 0 14.7 16.2'%3E%3Cpath d='M10.5 13.1c-.6 0-1-1 0-3.4L14.6.1 13.4 0l-1.3 1.3h-.3C6.1 1.3 0 8.6 0 14.2a2 2 0 002.1 2.1c1.7 0 3.3-2.4 5.2-5l-.1 1c-.3 2.6.6 4 2 4 1.5 0 3-2.4 4-4.9h-.7c-.7 1.1-1.5 1.8-2 1.8zM7.9 9.8c-1.3 1.6-3.4 3.5-4.3 3.5-.5 0-.9-.5-.9-1.6 0-3.5 4-8.2 6-8.2a4.2 4.2 0 011.4.2z'/%3E%3C/symbol%3E%3Csymbol id='h' viewBox='0 0 21.9 19.8'%3E%3Cpath d='M11.2 19.8l.3-.9c-3.8-.7-4.3-.7-2.7-4.8l1.4-3.9h3c1.9 0 1.9.9 1.6 3h1l2.6-6.9h-1c-1 1.6-1.8 2.9-3.8 2.9h-3l2-5.6c.8-2 1.1-2.4 3.7-2.4h.7c2.6 0 3 .7 3 3.5h1l.9-4.7H7.3L7 .9c3 .6 3.3.9 2 4.8L5.7 14c-1.5 3.9-2 4.2-5.5 4.8l-.3.9z'/%3E%3C/symbol%3E%3Csymbol id='i' viewBox='0 0 10.1 21.9'%3E%3Cpath d='M2.9 19.4L10.1.3 9.8 0l-5 .6v.6l1 .7c.9.7.6 1.3-.2 3.4L.2 19.9a1.3 1.3 0 001.1 2c2.3 0 4.7-2.1 5.8-5h-.7a6.5 6.5 0 01-3.5 2.5'/%3E%3C/symbol%3E%3Csymbol id='j' viewBox='0 0 18 22'%3E%3Cpath d='M18 .6h-4.3a3.8 3.8 0 00-2.1-.6A6.6 6.6 0 005 6.5a3.3 3.3 0 003 3.6c-1.9.8-3 1.8-3 2.9a1.7 1.7 0 00.9 1.5c-4.3 1.3-6 2.8-6 4.7 0 2 2.6 2.8 5.6 2.8 5.3 0 9.6-2.7 9.6-5.1 0-1.8-1.6-2.5-4.3-3.3-2.2-.7-3.2-.8-3.2-1.6A2.4 2.4 0 019 10.2a6.6 6.6 0 006.1-6.5 4.5 4.5 0 00-.2-1.5h2.5zM9.8 16.2c2.1.7 3 1 3 1.6 0 1.4-2 2.5-5.6 2.5-2.7 0-4-.6-4-2 0-1.5 1.4-2.5 3.5-3.3a21.5 21.5 0 003 1.2zM9 9c-1 0-1.3-.8-1.3-1.7 0-2.8 1.4-6.2 3.5-6.2 1 0 1.3.8 1.3 1.6 0 2.9-1.4 6.3-3.5 6.3z'/%3E%3C/symbol%3E%3Csymbol id='k' viewBox='0 0 23 25.1'%3E%3Cpath d='M14.3 15.6c1.9 0 2 .8 1.6 2.8H17l2.5-6.8h-1c-1 1.6-1.7 2.9-3.8 2.9h-4.1l2-5.6c.7-2 1-2.4 3.7-2.4H18c2.6 0 3 .7 3 3.5h1l.9-4.7H7.3l-.3.9c3 .6 3.3.9 2 4.8l-3.2 8.4c-1.5 3.9-2 4.2-5.6 4.8l-.2 1h17.4l3.2-5h-1.2c-2 2-4 3.8-8 3.8-4.7 0-4.3-.3-2.7-4.6l1.4-3.8h4.2zm2.3-11.8L21 .6V0h-3l-2.6 3.9h1.2v-.1z'/%3E%3C/symbol%3E%3Csymbol id='l' viewBox='0 0 13.6 21.8'%3E%3Cpath d='M11.4 6.4c-2 0-4 2.2-5.8 4.8L9.6.3 9.4 0l-5 .6V1l1 .8c.9.7.6 1.3-.2 3.4L.8 16.8A13.9 13.9 0 000 19c0 1.4 1.8 2.7 3.5 2.7 3.8 0 10-6.9 10-12.2 0-2.3-.5-3.2-2.1-3.2zM4.8 19.5c-.8 0-1.9-.7-1.9-1.3a15.5 15.5 0 01.8-2.2L5 12.7C6.3 11 8.4 9.3 9.6 9.3c.7 0 1.2.4 1.2 1.5 0 3.1-2.9 8.7-6 8.7z'/%3E%3C/symbol%3E%3Csymbol id='m' viewBox='0 0 19.2 19.9'%3E%3Cpath d='M17.6 0H7.3L7 .9c3 .6 3.3.9 2 4.8l-3.2 8.5c-1.5 3.9-2 4.2-5.5 4.8L0 20h15.7l3.5-6H18c-2 2-4.2 4.8-7.7 4.8-2.7 0-3-.5-1.6-4.5l3.1-8.5c1.4-3.9 2-4.2 5.5-4.8z'/%3E%3C/symbol%3E%3Csymbol id='n' viewBox='0 0 126 90'%3E%3Cuse width='12.4' height='21.8' x='112.7' y='66.1' href='%23b'/%3E%3Cuse width='11.5' height='19' x='102.2' y='69' href='%23c'/%3E%3Cuse width='9.8' height='21.9' x='93.6' y='66.1' href='%23d'/%3E%3Cuse width='14.8' height='15.5' x='77.2' y='72.5' href='%23e'/%3E%3Cuse width='12' height='15.5' x='65.7' y='72.5' href='%23f'/%3E%3Cuse width='11' height='15.5' x='54.3' y='72.5' href='%23a'/%3E%3Cuse width='11.5' height='19' x='43.7' y='69' href='%23c'/%3E%3Cuse width='14.7' height='16.2' x='28.9' y='71.8' href='%23g'/%3E%3Cuse width='12' height='15.5' x='19.6' y='72.5' href='%23f'/%3E%3Cuse width='21.9' height='19.8' y='67.6' href='%23h'/%3E%3Cuse width='12.4' height='21.8' x='77.3' y='33.1' href='%23b'/%3E%3Cuse width='11.5' height='19' x='66.8' y='36' href='%23c'/%3E%3Cuse width='9.8' height='21.9' x='58.2' y='33' href='%23d'/%3E%3Cuse width='10.1' height='21.9' x='49.4' y='33.1' href='%23i'/%3E%3Cuse width='14.7' height='16.2' x='34.9' y='38.8' href='%23g'/%3E%3Cuse width='18' height='22' x='18.6' y='39.4' href='%23j'/%3E%3Cuse width='23' height='25.1' y='29.3' href='%23k'/%3E%3Cuse width='12.4' height='21.8' x='76.8' y='.1' href='%23b'/%3E%3Cuse width='11.5' height='19' x='66.2' y='2.9' href='%23c'/%3E%3Cuse width='12' height='15.5' x='54.8' y='6.5' href='%23f'/%3E%3Cuse width='11' height='15.5' x='43.4' y='6.4' href='%23a'/%3E%3Cuse width='13.6' height='21.8' x='29.4' y='.1' href='%23l'/%3E%3Cuse width='9.8' height='21.9' x='20.6' href='%23d'/%3E%3Cuse width='19.2' height='19.9' y='1.4' href='%23m'/%3E%3C/symbol%3E%3C/defs%3E%3Cuse fill='%23000' width='126' height='90' x='0' y='0' href='%23n'/%3E%3Cuse fill='%23fff' width='126' height='90' x='126' y='90' href='%23n'/%3E%3C/svg%3E");
+}
+
+[data-fr-theme=dark] .fr-logo::after {
+  background-position: -2.625rem 100%;
+}
+
+.fr-logo--sm {
+  font-size: 0.7875rem;
+}
+
+.fr-logo--sm::before {
+  width: 2.0625rem;
+  height: 0.75rem;
+  margin-bottom: 0.25rem;
+  background-size: 2.0625rem 0.84375rem, 2.0625rem 0.75rem, 0;
+  background-position: 0 -0.046875rem, 0 0, 0 0;
+}
+
+:root[data-fr-mourning] .fr-logo--sm::before {
+  background-size: 2.0625rem 0.84375rem, 0, 2.0625rem 0.75rem;
+}
+
+.fr-logo--sm::after {
+  min-width: 1.96875rem;
+  background-size: 3.9375rem 2.8125rem;
+  background-position: 0 calc(100% + 1.40625rem);
+  padding-top: 1.65625rem;
+}
+
+[data-fr-theme=dark] .fr-logo--sm::after {
+  background-position: -1.96875rem 100%;
+}
+
+.fr-logo--lg {
+  font-size: 1.3125rem;
+}
+
+.fr-logo--lg::before {
+  width: 3.4375rem;
+  height: 1.25rem;
+  margin-bottom: 0.4166666667rem;
+  background-size: 3.4375rem 1.40625rem, 3.4375rem 1.25rem, 0;
+  background-position: 0 -0.078125rem, 0 0, 0 0;
+}
+
+:root[data-fr-mourning] .fr-logo--lg::before {
+  background-size: 3.4375rem 1.40625rem, 0, 3.4375rem 1.25rem;
+}
+
+.fr-logo--lg::after {
+  min-width: 3.28125rem;
+  background-size: 6.5625rem 4.6875rem;
+  background-position: 0 calc(100% + 2.34375rem);
+  padding-top: 2.7604166667rem;
+}
+
+[data-fr-theme=dark] .fr-logo--lg::after {
+  background-position: -3.28125rem 100%;
+}
+
+@media (min-width: 36em) {
+  /*! media sm */
+}
+
+@media (min-width: 48em) {
+  /*! media md */
+}
+
+@media (min-width: 62em) {
+  /*! media lg */
+}
+
+@media (min-width: 78em) {
+  /*! media xl */
+}
+
+@media (prefers-color-scheme: dark) and (forced-colors: active) {
+  .fr-logo::after {
+    background-position: -2.625rem 100%;
+  }
+
+  [data-fr-theme=dark] .fr-logo::after {
+    background-position: -2.625rem 100%;
+  }
+
+  .fr-logo--sm::after {
+    background-position: -1.96875rem 100%;
+  }
+
+  [data-fr-theme=dark] .fr-logo--sm::after {
+    background-position: -1.96875rem 100%;
+  }
+
+  .fr-logo--lg::after {
+    background-position: -3.28125rem 100%;
+  }
+
+  [data-fr-theme=dark] .fr-logo--lg::after {
+    background-position: -3.28125rem 100%;
+  }
+}
+
+@media (prefers-color-scheme: light) and (forced-colors: active) {
+  .fr-logo::after {
+    background-position: 0 calc(100% + 1.875rem);
+  }
+
+  [data-fr-theme=dark] .fr-logo::after {
+    background-position: 0 calc(100% + 1.875rem);
+  }
+
+  .fr-logo--sm::after {
+    background-position: 0 calc(100% + 1.40625rem);
+  }
+
+  [data-fr-theme=dark] .fr-logo--sm::after {
+    background-position: 0 calc(100% + 1.40625rem);
+  }
+
+  .fr-logo--lg::after {
+    background-position: 0 calc(100% + 2.34375rem);
+  }
+
+  [data-fr-theme=dark] .fr-logo--lg::after {
+    background-position: 0 calc(100% + 2.34375rem);
+  }
+}
+
+/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */
+
+/* ¯¯¯¯¯¯¯¯¯ *\
+  FOOTER
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-footer {
+  --ul-type: none;
+  --ol-type: none;
+  --ul-start: 0;
+  --ol-start: 0;
+  --xl-block: 0;
+  --li-bottom: 0;
+  --ol-content: none;
+  width: 100%;
+  padding-top: 2rem;
+  /**
+   * Conteneur du bloc marque, avec le logo principal et éventuellement
+   * un logo opérateur
+   */
+  /**
+   * Hauteur auto pour le logo opérateur
+   */
+  /**
+  * Contenu texte simple
+  */
+  /**
+  * Liste des liens situés en dessous de la partie texte
+  */
+  /**
+  * Catégorie (optionnel)
+  */
+  /**
+  * Style de la liste
+  */
+  /**
+  * Style du lien
+  */
+  /**
+  * Liste de liens avec séparateur
+  */
+  /**
+  * Style du lien de la liste
+  */
+  /**
+  * Copyright
+  */
+  /**
+  * Container des logos partenaires (principaux et secondaires)
+  */
+  /**
+  * Container des logos partenaires principaux
+  */
+  /**
+  * Container des logos partenaires secondaires
+  */
+  box-shadow: inset 0 2px 0 0 var(--border-plain-blue-france), inset 0 -1px 0 0 var(--border-default-grey);
+}
+
+.fr-footer__body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.fr-footer__body + .fr-footer__bottom {
+  margin-top: 1rem;
+}
+
+.fr-footer__brand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /**
+   * Si on ajoute un logo opérateur à côté du logo principal, on lui applique une marge à gauche
+   * On prévoit que le logo soit encapsulé dans un <a>, ou bien directement en img ou en svg
+   * (Eventuellement prévoir une classe pour pouvoir le mettre en background image)
+   */
+}
+
+.fr-footer__brand .fr-logo {
+  font-size: 1.05rem;
+  padding: 1rem;
+  margin: -1rem;
+}
+
+.fr-footer__brand .fr-logo::before {
+  width: 2.75rem;
+  height: 1rem;
+  margin-bottom: 0.3333333333rem;
+  background-size: 2.75rem 1.125rem, 2.75rem 1rem, 0;
+  background-position: 0 -0.0625rem, 0 0, 0 0;
+}
+
+:root[data-fr-mourning] .fr-footer__brand .fr-logo::before {
+  background-size: 2.75rem 1.125rem, 0, 2.75rem 1rem;
+}
+
+.fr-footer__brand .fr-logo::after {
+  min-width: 2.625rem;
+  background-size: 5.25rem 3.75rem;
+  background-position: 0 calc(100% + 1.875rem);
+  padding-top: 2.2083333333rem;
+}
+
+[data-fr-theme=dark] .fr-footer__brand .fr-logo::after {
+  background-position: -2.625rem 100%;
+}
+
+.fr-footer__brand-link {
+  display: flex;
+  flex-direction: row;
+
+  --external-link-content: none;
+}
+
+.fr-footer__brand .fr-logo + .fr-footer__brand-link {
+  margin-left: 1.5rem;
+}
+
+.fr-footer__logo {
+  height: auto;
+  max-height: 100%;
+}
+
+/**
+ * La partie "content" représente les informations sous forme de texte rajoutées dans le footer
+ * ainsi que les éventuels liens simples
+ */
+.fr-footer__content {
+  display: flex;
+  flex-wrap: wrap;
+  flex-basis: 100%;
+  margin-top: 1.5rem;
+}
+
+.fr-footer__content-desc {
+  --underline-img: linear-gradient(0deg, currentColor, currentColor);
+  --text-spacing: 0 0 0 0;
+  width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.fr-footer__content-list {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+  margin-bottom: -0.5rem;
+  margin-top: 1rem;
+  flex-wrap: wrap;
+}
+
+.fr-footer__content-list > li {
+  margin-right: 1.25rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.fr-footer__content-list > li::before {
+  content: none;
+}
+
+.fr-footer__content-list > li:last-child {
+  margin-right: 0;
+}
+
+.fr-footer__content-link {
+  font-weight: bold;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  color: var(--text-default-grey);
+}
+
+.fr-footer__content-link:not(:hover):not(:active) {
+  --underline-idle-width: 0;
+}
+
+/**
+ * La partie "top" du footer est constituée de colonnes basées sur le système de grille du Design System
+ * Ces colonnes sont constituées d’une catégorie (optionnel) et d'une liste verticale de liens
+ */
+.fr-footer__top {
+  display: flex;
+  margin: -1.875rem 0 1.5rem;
+  padding: 2rem 0 1.25rem;
+  background-color: var(--background-alt-grey);
+
+  --idle: transparent;
+  --hover: var(--background-alt-grey-hover);
+  --active: var(--background-alt-grey-active);
+}
+
+.fr-footer__top-cat {
+  margin: 0 0 0.75rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  display: block;
+  font-weight: 700;
+  text-align: left;
+  color: var(--text-title-grey);
+}
+
+.fr-footer__top-list {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin: 0;
+}
+
+.fr-footer__top-list li {
+  margin-bottom: 0.75rem;
+}
+
+.fr-footer__top-link {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.fr-footer__top-link:not(:hover):not(:active) {
+  --underline-idle-width: 0;
+}
+
+/**
+ * La partie "bottom" du footer est constituée d'une liste de liens simples (ferrée à gauche)
+ * ainsi que du copyright (ferré à droite)
+ */
+.fr-footer__bottom {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+  margin-top: 2.5rem;
+  box-shadow: inset 0 1px 0 0 var(--border-default-grey);
+}
+
+.fr-footer__bottom .fr-btn {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  min-height: 1.25rem;
+  padding: 0 0.5rem;
+  overflow: initial;
+  max-width: 100%;
+  max-height: none;
+  display: inline;
+  color: var(--text-mention-grey);
+}
+
+.fr-footer__bottom .fr-btn::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.5rem;
+}
+
+.fr-footer__bottom-list {
+  padding: 0.5rem 0;
+  width: 100%;
+  margin: 0;
+}
+
+.fr-footer__bottom-item {
+  position: relative;
+  margin: 0.5rem 0 0 0.25rem;
+  display: inline;
+}
+
+.fr-footer__bottom-item::before {
+  content: "";
+  display: inline-block;
+  vertical-align: middle;
+  position: relative;
+  width: 1px;
+  height: 1rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.625rem;
+  margin-top: 0.625rem;
+  box-shadow: inset 0 0 0 1px var(--border-default-grey);
+}
+
+.fr-footer__bottom-item:first-child {
+  margin: 0.5rem 0 0;
+}
+
+.fr-footer__bottom-item:first-child::before {
+  content: none;
+}
+
+.fr-footer__bottom-link {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  color: var(--text-mention-grey);
+}
+
+.fr-footer__bottom-link:not(:hover):not(:active) {
+  --underline-idle-width: 0;
+}
+
+.fr-footer__bottom-copy {
+  --text-spacing: 0 0 1rem 0;
+  margin-top: 0.5rem;
+  color: var(--text-mention-grey);
+}
+
+.fr-footer__bottom-copy * {
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+/**
+ * La partie "partners" du footer est constituée de logos organisés
+ * en partenaires principaux (ferré à gauche) et secondaires (ferrés à droite)
+ */
+.fr-footer__partners {
+  margin-top: 1rem;
+  padding-top: 1rem;
+  /**
+  * On surcharge le style du logo de base
+  */
+  box-shadow: inset 0 1px 0 0 var(--border-default-grey);
+}
+
+.fr-footer__partners a {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.fr-footer__partners .fr-footer__logo {
+  width: auto;
+  height: auto;
+  background-color: var(--background-default-grey);
+
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  box-shadow: inset 0 0 0 1px var(--border-default-grey);
+}
+
+.fr-footer__partners + .fr-footer__bottom {
+  margin-top: 0.5rem;
+}
+
+.fr-footer__partners-title {
+  --title-spacing: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+  font-weight: 400;
+  flex-basis: 100%;
+  text-align: center;
+  color: var(--text-default-grey);
+}
+
+.fr-footer__partners-link {
+  --external-link-content: none;
+}
+
+.fr-footer__partners-logos {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  margin: 0 0 -0.5rem 0;
+}
+
+.fr-footer__partners-main {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 2rem;
+}
+
+.fr-footer__partners-sub {
+  margin-bottom: 0.5rem;
+  /**
+  * On surcharge le style du lien pour les logos secondaires
+  */
+}
+
+.fr-footer__partners-sub,
+.fr-footer__partners-sub > ul {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.fr-footer__partners-sub > li:first-child,
+.fr-footer__partners-sub > ul > li:first-child {
+  margin-left: 0;
+}
+
+.fr-footer__partners-sub .fr-footer__partners-link {
+  margin-bottom: 1rem;
+}
+
+.fr-footer__partners .fr-footer__partners-link,
+.fr-footer__partners .fr-footer__partners-link:hover,
+.fr-footer__partners .fr-footer__partners-link:active {
+  background: #fff;
+}
+@media (min-width: 36em) {
+  /*! media sm */
+  .fr-footer__content-list > li {
+    margin-right: 1.5rem;
+  }
+
+  .fr-footer__partners-title {
+    text-align: left;
+  }
+
+  .fr-footer__partners-logos {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-right: -0.5rem;
+  }
+
+  .fr-footer__partners-main {
+    margin-bottom: 1rem;
+  }
+
+  .fr-footer__partners-sub,
+  .fr-footer__partners-sub > ul {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .fr-footer__partners-sub > li,
+  .fr-footer__partners-sub > ul > li {
+    margin: 0 0.5rem 0 0.5rem;
+  }
+
+  .fr-footer__partners-sub {
+    order: 3;
+  }
+}
+@media (min-width: 48em) {
+  /*! media md */
+  .fr-footer__body {
+    margin-bottom: 1.5rem;
+  }
+
+  .fr-footer__brand .fr-logo {
+    font-size: 1.3125rem;
+    padding: 1.25rem;
+    margin: -1.25rem;
+  }
+
+  .fr-footer__brand .fr-logo::before {
+    width: 3.4375rem;
+    height: 1.25rem;
+    margin-bottom: 0.4166666667rem;
+    background-size: 3.4375rem 1.40625rem, 3.4375rem 1.25rem, 0;
+    background-position: 0 -0.078125rem, 0 0, 0 0;
+  }
+
+  :root[data-fr-mourning] .fr-footer__brand .fr-logo::before {
+    background-size: 3.4375rem 1.40625rem, 0, 3.4375rem 1.25rem;
+  }
+
+  .fr-footer__brand .fr-logo::after {
+    min-width: 3.28125rem;
+    background-size: 6.5625rem 4.6875rem;
+    background-position: 0 calc(100% + 2.34375rem);
+    padding-top: 2.7604166667rem;
+  }
+
+  [data-fr-theme=dark] .fr-footer__brand .fr-logo::after {
+    background-position: -3.28125rem 100%;
+  }
+
+  .fr-footer__brand .fr-logo + .fr-footer__brand-link {
+    margin-left: 2rem;
+  }
+
+  .fr-footer__brand {
+    margin-right: 1rem;
+  }
+
+  .fr-footer__brand.fr-enlarge-link {
+    margin: -1rem 0 -1rem -1rem;
+    padding: 1rem;
+    align-self: flex-start;
+  }
+
+  .fr-footer__content {
+    margin-left: auto;
+  }
+
+  .fr-footer__content-list {
+    margin-top: 0.5rem;
+  }
+
+  .fr-footer__top {
+    margin: -1.875rem 0 2rem;
+  }
+
+  .fr-footer__bottom-item {
+    margin: 0.5rem 0 0 0.75rem;
+  }
+
+  .fr-footer__bottom-item::before {
+    margin-right: 0.75rem;
+  }
+
+  .fr-footer__partners-logos {
+    margin-right: -1rem;
+    flex-wrap: nowrap;
+  }
+
+  .fr-footer__partners-main + .fr-footer__partners-sub {
+    padding-left: 1rem;
+  }
+
+  .fr-footer__partners-sub > ul,
+  .fr-footer__partners-sub > ul > ul {
+    justify-content: flex-end;
+  }
+
+  .fr-footer__partners-sub,
+  .fr-footer__partners-sub > ul {
+    padding-top: 0;
+  }
+
+  .fr-footer__partners-sub > li,
+  .fr-footer__partners-sub > ul > li {
+    margin: 0 1rem 0 1rem;
+  }
+
+  .fr-footer__partners-sub .fr-footer__partners-link {
+    margin-bottom: 0.5rem;
+  }
+}
+@media (min-width: 62em) {
+  /*! media lg */
+  .fr-footer__content {
+    margin-top: 0;
+    flex-basis: 50%;
+    max-width: 36.75rem;
+  }
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-footer {
+    border-top: 2px solid;
+    padding-top: 1.875rem;
+  }
+
+  .fr-footer__bottom {
+    border-top: 1px solid;
+  }
+
+  .fr-footer__bottom-item .fr-btn {
+    border: none;
+  }
+
+  .fr-footer__partners {
+    border-top: 1px solid;
+  }
+}
+@media (prefers-color-scheme: dark) and (forced-colors: active) {
+  .fr-footer__brand .fr-logo::after {
+    background-position: -2.625rem 100%;
+  }
+
+  [data-fr-theme=dark] .fr-footer__brand .fr-logo::after {
+    background-position: -2.625rem 100%;
+  }
+}
+@media (prefers-color-scheme: light) and (forced-colors: active) {
+  .fr-footer__brand .fr-logo::after {
+    background-position: 0 calc(100% + 1.875rem);
+  }
+
+  [data-fr-theme=dark] .fr-footer__brand .fr-logo::after {
+    background-position: 0 calc(100% + 1.875rem);
+  }
+}
+@media (min-width: 48em) and (prefers-color-scheme: dark) and (forced-colors: active) {
+  .fr-footer__brand .fr-logo::after {
+    background-position: -3.28125rem 100%;
+  }
+
+  [data-fr-theme=dark] .fr-footer__brand .fr-logo::after {
+    background-position: -3.28125rem 100%;
+  }
+}
+@media (min-width: 48em) and (prefers-color-scheme: light) and (forced-colors: active) {
+  .fr-footer__brand .fr-logo::after {
+    background-position: 0 calc(100% + 2.34375rem);
+  }
+
+  [data-fr-theme=dark] .fr-footer__brand .fr-logo::after {
+    background-position: 0 calc(100% + 2.34375rem);
+  }
+}
+a {
+  text-decoration: var(--text-decoration);
+  color: inherit;
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  a:not([href]) {
+    color: graytext;
+  }
+}
+
+:root {
+  --underline-max-width: 100%;
+  --underline-hover-width: 0;
+  --underline-idle-width: var(--underline-max-width);
+  --underline-x: calc(var(--underline-max-width) * 0);
+  --underline-thickness: 0.0625em;
+  --underline-img: linear-gradient(0deg, currentColor, currentColor);
+  --external-link-content: '';
+  --text-decoration: none;
+}
+
+[href] {
+  background-image: var(--underline-img), var(--underline-img);
+  background-position: var(--underline-x) 100%, var(--underline-x) calc(100% - var(--underline-thickness));
+  background-repeat: no-repeat, no-repeat;
+  transition: background-size 0s;
+  background-size: var(--underline-hover-width) calc(var(--underline-thickness) * 2), var(--underline-idle-width) var(--underline-thickness);
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  [href], [href]:visited {
+    color: linktext;
+  }
+}
+
+[target=_blank]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[target=_blank]::after {
+  --icon-size: 1rem;
+}
+[target=_blank]::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  [target=_blank]::after {
+    forced-color-adjust: none;
+    background-color: linktext;
+  }
+}
+[target=_blank]::after {
+  content: var(--external-link-content);
+  margin-left: 0.25rem;
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  flex: 0 0 auto;
+  display: inline-block;
+  vertical-align: calc((0.75em - var(--icon-size)) * 0.5);
+  background-color: currentColor;
+  width: var(--icon-size);
+  height: var(--icon-size);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  --icon-size: 1rem;
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/external-link-line.svg");
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  [target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+    forced-color-adjust: none;
+    background-color: linktext;
+  }
+}
+[target=_blank][class^=fr-icon-]::after, [target=_blank][class*=" fr-icon-"]::after, [target=_blank][class^=fr-fi-]::after, [target=_blank][class*=" fr-fi-"]::after {
+  content: var(--external-link-content);
+  margin-left: 0.25rem;
+}
+
+form[target=_blank]::after {
+  content: none;
+}
+
+.fr-raw-link {
+  --text-decoration: none;
+}
+.fr-raw-link[href],
+.fr-raw-link [href] {
+  --underline-img: none;
+  --external-link-content: none;
+}
+
+.fr-reset-link {
+  --text-decoration: underline;
+}
+.fr-reset-link[href],
+.fr-reset-link [href] {
+  --underline-img: none;
+  text-underline-offset: 2px;
+}
+
+input[type=range]:focus::-webkit-slider-thumb {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+input[type=range]:focus::-moz-range-thumb {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+input[type=range]:focus::-ms-thumb {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+a:focus, button:focus, input:focus, input[type=checkbox]:focus + label::before, input[type=radio]:focus + label::before, input[type=button]:focus, input[type=image]:focus, input[type=reset]:focus, input[type=submit]:focus, select:focus, textarea:focus, [tabindex]:focus, video:focus[controls], audio:focus[controls], [contenteditable]:not([contenteditable=false]):focus, details:focus, details > summary:first-of-type:focus {
+  outline-offset: 2px;
+  outline-width: 2px;
+  outline-color: #0a76f6;
+}
+
+input[type=range]:focus::-webkit-slider-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus::-moz-range-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus::-ms-thumb {
+  outline-style: solid;
+}
+
+a:focus, button:focus, input:focus, input[type=checkbox]:focus + label::before, input[type=radio]:focus + label::before, input[type=button]:focus, input[type=image]:focus, input[type=reset]:focus, input[type=submit]:focus, select:focus, textarea:focus, [tabindex]:focus, video:focus[controls], audio:focus[controls], [contenteditable]:not([contenteditable=false]):focus, details:focus, details > summary:first-of-type:focus {
+  outline-style: solid;
+}
+
+input[type=range]:focus:not(:focus-visible)::-webkit-slider-thumb {
+  outline-style: none;
+}
+
+input[type=range]:focus:not(:focus-visible)::-moz-range-thumb {
+  outline-style: none;
+}
+
+input[type=range]:focus:not(:focus-visible)::-ms-thumb {
+  outline-style: none;
+}
+
+a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), input[type=checkbox]:focus:not(:focus-visible) + label::before, input[type=radio]:focus:not(:focus-visible) + label::before, input[type=button]:focus:not(:focus-visible), input[type=image]:focus:not(:focus-visible), input[type=reset]:focus:not(:focus-visible), input[type=submit]:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible), video:focus:not(:focus-visible)[controls], audio:focus:not(:focus-visible)[controls], [contenteditable]:not([contenteditable=false]):focus:not(:focus-visible), details:focus:not(:focus-visible), details > summary:first-of-type:focus:not(:focus-visible) {
+  outline-style: none;
+}
+
+input[type=range]:focus-visible::-webkit-slider-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus-visible::-moz-range-thumb {
+  outline-style: solid;
+}
+
+input[type=range]:focus-visible::-ms-thumb {
+  outline-style: solid;
+}
+
+a:focus-visible, button:focus-visible, input:focus-visible, input[type=checkbox]:focus-visible + label::before, input[type=radio]:focus-visible + label::before, input[type=button]:focus-visible, input[type=image]:focus-visible, input[type=reset]:focus-visible, input[type=submit]:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible, video:focus-visible[controls], audio:focus-visible[controls], [contenteditable]:not([contenteditable=false]):focus-visible, details:focus-visible, details > summary:first-of-type:focus-visible {
+  outline-style: solid;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  :root {
+    --brighten: -1;
+  }
+  a[href]:hover, button:not(:disabled):hover, input[type=button]:not(:disabled):hover, input[type=image]:not(:disabled):hover, input[type=reset]:not(:disabled):hover, input[type=submit]:not(:disabled):hover {
+    background-color: var(--hover-tint);
+  }
+  a[href]:active, button:not(:disabled):active, input[type=button]:not(:disabled):active, input[type=image]:not(:disabled):active, input[type=reset]:not(:disabled):active, input[type=submit]:not(:disabled):active {
+    background-color: var(--active-tint);
+  }
+  a[href]:hover, a[href]:active {
+    --underline-hover-width: var(--underline-max-width);
+  }
+}
+button, input[type=button], input[type=image], input[type=reset], input[type=submit] {
+  --hover-tint: var(--hover);
+  --active-tint: var(--active);
+}
+
+a {
+  --hover-tint: var(--idle);
+  --active-tint: var(--active);
+}
+
+.fr-enlarge-link {
+  position: relative;
+}
+.fr-enlarge-link a {
+  background-image: none;
+  outline-width: 0;
+}
+.fr-enlarge-link a::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline-offset: 2px;
+  outline-style: inherit;
+  outline-color: inherit;
+  outline-width: 2px;
+  z-index: 1;
+}
+@media (hover: hover) and (pointer: fine) {
+  .fr-enlarge-link a:hover, .fr-enlarge-link a:active {
+    background-image: none;
+  }
+  .fr-enlarge-link:hover {
+    background-color: var(--hover);
+  }
+  .fr-enlarge-link:active {
+    background-color: var(--active);
+  }
+}
+
+.fr-enlarge-button {
+  position: relative;
+}
+.fr-enlarge-button button {
+  background-image: none;
+  outline-width: 0;
+}
+.fr-enlarge-button button::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  outline-offset: 2px;
+  outline-style: inherit;
+  outline-color: inherit;
+  outline-width: 2px;
+  z-index: 1;
+}
+@media (hover: hover) and (pointer: fine) {
+  .fr-enlarge-button button:hover, .fr-enlarge-button button:active {
+    background-image: none;
+  }
+  .fr-enlarge-button:hover {
+    background-color: var(--hover);
+  }
+  .fr-enlarge-button:active {
+    background-color: var(--active);
+  }
+}
+
+h6 {
+  font-weight: 700;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+}
+@media (min-width: 48em) {
+  h6 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+h6 {
+  margin: var(--title-spacing);
+}
+
+h5 {
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  h5 {
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+  }
+}
+h5 {
+  margin: var(--title-spacing);
+}
+
+h4 {
+  font-weight: 700;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+}
+@media (min-width: 48em) {
+  h4 {
+    font-size: 1.5rem;
+    line-height: 2rem;
+  }
+}
+h4 {
+  margin: var(--title-spacing);
+}
+
+h3 {
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 2rem;
+}
+@media (min-width: 48em) {
+  h3 {
+    font-size: 1.75rem;
+    line-height: 2.25rem;
+  }
+}
+h3 {
+  margin: var(--title-spacing);
+}
+
+h2 {
+  font-weight: 700;
+  font-size: 1.75rem;
+  line-height: 2.25rem;
+}
+@media (min-width: 48em) {
+  h2 {
+    font-size: 2rem;
+    line-height: 2.5rem;
+  }
+}
+h2 {
+  margin: var(--title-spacing);
+}
+
+h1 {
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 2.5rem;
+}
+@media (min-width: 48em) {
+  h1 {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+h1 {
+  margin: var(--title-spacing);
+}
+
+p {
+  font-size: 1rem;
+  line-height: 1.5rem;
+  margin: var(--text-spacing);
+}
+
+: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";
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+:root {
+  box-sizing: border-box;
+}
+
+input,
+select,
+textarea,
+label,
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.fr-grid-row {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0;
+  padding: 0;
+}
+.fr-grid-row--top {
+  align-items: flex-start;
+}
+.fr-grid-row--bottom {
+  align-items: flex-end;
+}
+.fr-grid-row--middle {
+  align-items: center;
+}
+.fr-grid-row--left {
+  justify-content: flex-start;
+}
+.fr-grid-row--right {
+  justify-content: flex-end;
+}
+.fr-grid-row--center {
+  justify-content: center;
+}
+
+.fr-col--top {
+  align-self: flex-start;
+}
+.fr-col--bottom {
+  align-self: flex-end;
+}
+.fr-col--middle {
+  align-self: center;
+}
+
+.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);
+  }
+}
+@-moz-document url-prefix() {
+  :root[data-fr-scrolling] body {
+    position: sticky;
+  }
+  :root {
+    --underline-thickness: calc(0.0625em + 0.25px);
+  }
+}
+: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-footer {
+  box-sizing: border-box;
+}
+.fr-footer--compact {
+  padding-top: 0;
+}
+.fr-footer--compact .fr-footer__bottom {
+  box-shadow: none;
+  margin-top: 0;
+}
+.fr-footer__logo {
+  --border-default-grey: transparent;
+}
+.fr-footer :global(::slotted([slot="description"])) {
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}</style>