@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/dsfr/DsfrRange.svelte

@@ -0,0 +1,1329 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-range",
+    props: {
+      id: { attribute: "id", type: "String" },
+      label: { attribute: "label", type: "String" },
+      hideLabel: { attribute: "hide-label", type: "Boolean" },
+      name: { attribute: "name", type: "String" },
+      hint: { attribute: "hint", type: "String" },
+      size: { attribute: "size", type: "String" },
+      min: { attribute: "min", type: "Number" },
+      max: { attribute: "max", type: "Number" },
+      value: { attribute: "value", type: "Number", reflect: true },
+      step: { attribute: "step", type: "Number" },
+      prefix: { attribute: "prefix", type: "String" },
+      suffix: { attribute: "suffix", type: "String" },
+      disabled: { attribute: "disabled", type: "Boolean" },
+      isDouble: { attribute: "is-double", type: "Boolean" },
+      value2: { attribute: "value2", type: "Number", reflect: true },
+      minValueLabel: { attribute: "min-value-label", type: "String" },
+      maxValueLabel: { attribute: "max-value-label", type: "String" },
+      isStep: { attribute: "is-step", type: "Boolean" },
+      indicators: { attribute: "indicators", type: "Boolean" },
+      status: { attribute: "status", type: "String" },
+      errorMessage: { attribute: "error-message", type: "String" },
+      hideOutputLabel: { attribute: "hide-output-label", type: "Boolean" },
+      labelSize: { attribute: "label-size", type: "String" },
+      labelWeight: { attribute: "label-weight", type: "String" },
+    },
+  }}
+/>
+
+<script lang="ts">import { untrack } from "svelte";
+import { setThemeable } from "../utilitaires";
+import DsfrLabel from "./DsfrLabel.svelte";
+setThemeable($host());
+let { id, label, hideLabel = false, name, hint, size = "md", min, max, value = $bindable(), step = 1, prefix, suffix, disabled = false, isDouble = false, value2 = $bindable(), minValueLabel, maxValueLabel, isStep = false, indicators = true, status = "default", errorMessage: _errorMessage, hideOutputLabel = false, onvaluechanged, onvalue2changed, labelSize, labelWeight } = $props();
+const decorate = (val) => `${prefix ?? ""}${val}${suffix ?? ""}`;
+// Diamètres du thumb selon le DSFR source : 24px (md) / 16px (sm)
+const THUMB_MD = 24;
+const THUMB_SM = 16;
+let rangeEl = $state();
+let rangeWidth = $state(0);
+// Observe la largeur du conteneur pour recalculer les positions
+$effect(() => {
+	if (!rangeEl) return;
+	const observer = new ResizeObserver(() => {
+		rangeWidth = rangeEl.getBoundingClientRect().width;
+	});
+	observer.observe(rangeEl);
+	return () => observer.disconnect();
+});
+const isLabelEmpty = $derived(label === "");
+// Espace total réservé aux thumbs aux extrémités du rail (1 thumb en simple, 2 en double)
+const thumbDiameter = $derived(size === "sm" ? THUMB_SM : THUMB_MD);
+// Largeur du rail disponible pour le déplacement des thumbs
+const thumbsReservedWidth = $derived(isDouble ? thumbDiameter * 2 : thumbDiameter);
+// Amplitude totale des valeurs possibles (max - min)
+const usableRailWidth = $derived(rangeWidth - thumbsReservedWidth);
+// Position du 1er curseur sur le rail
+const valueRange = $derived(max - min);
+// Position du 2e curseur sur le rail (mode double uniquement)
+const valueRatio = $derived(valueRange > 0 ? (value - min) / valueRange : 0);
+const value2Ratio = $derived(valueRange > 0 ? (value2 - min) / valueRange : 0);
+// Texte de la bulle (décoration prefix/suffix, "val1 - val2" en double)
+const outputText = $derived(isDouble ? `${decorate(value)} - ${decorate(value2)}` : decorate(value));
+// Transform CSS de la bulle : centrée sur le thumb courant (ou la moyenne en double)
+const outputTransform = $derived.by(() => {
+	const r = isDouble ? (valueRatio + value2Ratio) / 2 : valueRatio;
+	return `translateX(${(r * rangeWidth).toFixed(2)}px) translateX(-${(r * 100).toFixed(2)}%)`;
+});
+// --progress-right : bord droit de la barre colorée
+// --progress-left  : bord gauche en mode double uniquement
+const progressRight = $derived(`${(usableRailWidth * (isDouble ? value2Ratio : valueRatio) + thumbsReservedWidth * (isDouble ? .75 : .5)).toFixed(2)}px`);
+const progressLeft = $derived(isDouble ? `${(usableRailWidth * valueRatio + thumbsReservedWidth * .25).toFixed(2)}px` : undefined);
+// --step-width : espacement visuel des crans (mode step uniquement)
+const stepWidth = $derived.by(() => {
+	if (!isStep || valueRange === 0) return undefined;
+	const steps = valueRange / step;
+	let sw = usableRailWidth / steps;
+	if (sw < 1 || !isFinite(sw)) sw = 4;
+	while (sw < 4) sw *= 2;
+	return `${sw.toFixed(3)}px`;
+});
+// En mode double (value doit toujours être ≤ value2)
+// Quand input1 dépasse input2, on pousse input2 vers la droite
+function handleInput1(e) {
+	const newVal = parseFloat(e.target.value);
+	value = newVal;
+	onvaluechanged?.(newVal);
+	$host()?.dispatchEvent(new CustomEvent("valuechanged", {
+		detail: newVal,
+		bubbles: true
+	}));
+	if (isDouble && value2 < newVal) {
+		untrack(() => value2 = newVal);
+		onvalue2changed?.(newVal);
+		$host()?.dispatchEvent(new CustomEvent("value2changed", {
+			detail: newVal,
+			bubbles: true
+		}));
+	}
+}
+// Quand input2 passe sous input1, on ramène input1 vers la gauche
+function handleInput2(e) {
+	const newVal = parseFloat(e.target.value);
+	value2 = newVal;
+	onvalue2changed?.(newVal);
+	$host()?.dispatchEvent(new CustomEvent("value2changed", {
+		detail: newVal,
+		bubbles: true
+	}));
+	if (isDouble && value > newVal) {
+		untrack(() => value = newVal);
+		onvaluechanged?.(newVal);
+		$host()?.dispatchEvent(new CustomEvent("valuechanged", {
+			detail: newVal,
+			bubbles: true
+		}));
+	}
+}
+</script>
+
+<div
+  class={[
+    "fr-range-group",
+    disabled && "fr-range-group--disabled",
+    status === "error" && "fr-range-group--error",
+  ]}
+  id="{id}-group"
+>
+  <DsfrLabel
+    for={id}
+    {label}
+    {hint}
+    id="{id}-label"
+    {status}
+    {disabled}
+    hidden={hideLabel || isLabelEmpty}
+    {labelSize}
+    {labelWeight}
+  />
+
+  <div
+    bind:this={rangeEl}
+    class={[
+      "fr-range",
+      size === "sm" && "fr-range--sm",
+      isDouble && "fr-range--double",
+      isStep && "fr-range--step",
+    ]}
+    data-fr-prefix={prefix}
+    data-fr-suffix={suffix}
+    data-fr-js-range="true"
+    style:--progress-left={progressLeft}
+    style:--progress-right={progressRight}
+    style:--step-width={stepWidth}
+  >
+    <span
+      class="fr-range__output"
+      class:fr-range__output--hide={hideOutputLabel}
+      style:transform={outputTransform}
+    >
+      {outputText}
+    </span>
+
+    <input
+      {id}
+      {name}
+      type="range"
+      aria-labelledby={isDouble ? `${id} ${id}-label` : `${id}-label`}
+      aria-label={isDouble ? minValueLabel : undefined}
+      {min}
+      {max}
+      {value}
+      oninput={handleInput1}
+      {step}
+      {disabled}
+      aria-describedby="{id}-messages"
+    />
+
+    {#if isDouble}
+      <input
+        id="{id}-2"
+        name={name ? `${name}-2` : undefined}
+        type="range"
+        aria-labelledby="{id}-2 {id}-label"
+        aria-label={maxValueLabel}
+        {min}
+        {max}
+        value={value2}
+        oninput={handleInput2}
+        {step}
+        {disabled}
+        aria-describedby="{id}-messages"
+      />
+    {/if}
+
+    {#if indicators}
+      <span class="fr-range__min" aria-hidden="true">{decorate(min)}</span>
+      <span class="fr-range__max" aria-hidden="true">{decorate(max)}</span>
+    {/if}
+  </div>
+
+  <slot name="messagesgroup"></slot>
+</div>
+
+<style>@charset "UTF-8"; /*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */ /* ¯¯¯¯¯¯¯¯¯ *\
+  FORM
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-label {
+  display: block;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: var(--text-label-grey);
+}
+
+.fr-label + .fr-input,
+.fr-label + .fr-input-wrap,
+.fr-label + .fr-select {
+  margin-top: 0.5rem;
+}
+
+.fr-hint-text {
+  display: block;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+
+  --text-spacing: 0 0 1rem;
+}
+
+.fr-hint-text + .fr-hint-text {
+  margin-top: 0.25rem;
+}
+
+.fr-fieldset {
+  position: relative;
+  margin: 0 -0.75rem 1rem;
+  padding: 0 0.25rem;
+  display: flex;
+  flex-direction: row;
+  align-items: last baseline;
+  flex-wrap: wrap;
+  border: 0;
+}
+
+.fr-fieldset__legend {
+  padding-bottom: 1rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  margin-left: -0.25rem;
+  margin-right: -0.25rem;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  font-weight: 700;
+  width: 100%;
+  color: var(--text-label-grey);
+}
+
+.fr-fieldset__legend--regular {
+  font-weight: 400;
+}
+
+.fr-fieldset__legend .fr-hint-text {
+  margin-top: 0.5rem;
+  font-weight: 400;
+}
+
+.fr-fieldset--valid,
+.fr-fieldset--error,
+.fr-fieldset--info {
+  background-repeat: no-repeat;
+  background-position: 0 -2.25rem;
+  background-size: 2px calc(100% + 1.25rem);
+}
+
+.fr-fieldset--valid .fr-fieldset__legend,
+.fr-fieldset--error .fr-fieldset__legend,
+.fr-fieldset--info .fr-fieldset__legend {
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 2px 100%;
+}
+
+.fr-fieldset__element {
+  flex: 1 1 100%;
+  max-width: 100%;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.fr-fieldset__element--inline {
+  flex: 0 0 auto;
+}
+
+.fr-fieldset__element--inline-grow,
+.fr-fieldset__element--inline\@md.fr-fieldset__element--inline-grow {
+  flex-grow: 1;
+}
+
+.fr-fieldset__element.fr-fieldset__element--year {
+  flex: 0 0 8rem;
+}
+
+.fr-fieldset__element--year:not(.fr-fieldset__element--inline) {
+  margin-right: calc(100% - 8rem);
+}
+
+.fr-fieldset__element.fr-fieldset__element--postal {
+  flex: 0 0 16rem;
+}
+
+.fr-fieldset__element--postal:not(.fr-fieldset__element--inline) {
+  margin-right: calc(100% - 16rem);
+}
+
+.fr-fieldset__element.fr-fieldset__element--number {
+  flex: 0 0 6rem;
+}
+
+.fr-fieldset__element--number:not(.fr-fieldset__element--inline) {
+  margin-right: calc(100% - 6rem);
+}
+
+.fr-fieldset__legend > h1:last-child::after,
+.fr-fieldset__legend > h2:last-child::after,
+.fr-fieldset__legend > h3:last-child::after,
+.fr-fieldset__legend > h4:last-child::after,
+.fr-fieldset__legend > h5:last-child::after,
+.fr-fieldset__legend > h6:last-child::after,
+.fr-fieldset__legend > p:last-child::after,
+.fr-fieldset__legend > .fr-fieldset:last-child::after,
+.fr-fieldset__element > h1:last-child::after,
+.fr-fieldset__element > h2:last-child::after,
+.fr-fieldset__element > h3:last-child::after,
+.fr-fieldset__element > h4:last-child::after,
+.fr-fieldset__element > h5:last-child::after,
+.fr-fieldset__element > h6:last-child::after,
+.fr-fieldset__element > p:last-child::after,
+.fr-fieldset__element > .fr-fieldset:last-child::after {
+  content: "";
+  display: block;
+  margin-bottom: -1rem;
+}
+
+.fr-fieldset > .fr-messages-group {
+  flex: 1 1 100%;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.fr-fieldset > .fr-messages-group > .fr-message:last-child {
+  margin-bottom: 1rem;
+}
+
+.fr-message {
+  --comma: ", ";
+  --content: var(--comma);
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin: 0 0 0.25rem 0;
+}
+
+.fr-message::after {
+  content: var(--content);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap; /* added line */
+  border: 0;
+  display: block;
+}
+
+.fr-message:last-child {
+  --comma: ". ";
+  margin-bottom: 0;
+}
+
+.fr-message--error::before,
+.fr-message--valid::before,
+.fr-message--warning::before,
+.fr-message--info::before {
+  flex: 0 0 auto;
+  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%;
+  --icon-size: 1rem;
+  content: "";
+  display: inline-block;
+  margin-right: 0.25rem;
+  margin-top: 0.125rem;
+}
+
+.fr-message--error::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--error-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--error-fill.svg");
+}
+
+.fr-message--valid::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--success-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--success-fill.svg");
+}
+
+.fr-message--info::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--info-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--info-fill.svg");
+}
+
+.fr-message--warning::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--warning-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--warning-fill.svg");
+}
+
+.fr-select-group--valid label,
+.fr-input-group--valid label,
+.fr-range-group--valid label,
+.fr-upload-group--valid label {
+  color: var(--text-default-success);
+}
+
+.fr-select-group--error label,
+.fr-input-group--error label,
+.fr-range-group--error label,
+.fr-upload-group--error label {
+  color: var(--text-default-error);
+}
+
+.fr-select-group--info label,
+.fr-input-group--info label,
+.fr-range-group--info label,
+.fr-upload-group--info label {
+  color: var(--text-default-info);
+}
+
+.fr-select-group--disabled label,
+.fr-select-group--disabled .fr-hint-text,
+.fr-input-group--disabled label,
+.fr-input-group--disabled .fr-hint-text,
+.fr-range-group--disabled label,
+.fr-range-group--disabled .fr-hint-text,
+.fr-upload-group--disabled label,
+.fr-upload-group--disabled .fr-hint-text {
+  color: var(--text-disabled-grey);
+}
+
+.fr-label--error {
+  color: var(--text-default-error);
+}
+
+.fr-label--success {
+  color: var(--text-default-success);
+}
+
+.fr-label--info {
+  color: var(--text-default-info);
+}
+
+.fr-label--disabled,
+.fr-label--disabled .fr-hint-text {
+  color: var(--text-disabled-grey);
+}
+
+.fr-hint-text,
+.fr-message {
+  color: var(--text-mention-grey);
+}
+
+.fr-message--error {
+  color: var(--text-default-error);
+}
+
+.fr-message--valid {
+  color: var(--text-default-success);
+}
+
+.fr-message--info {
+  color: var(--text-default-info);
+}
+
+.fr-message--warning {
+  color: var(--text-default-warning);
+}
+
+.fr-fieldset:disabled .fr-label,
+.fr-fieldset:disabled .fr-hint-text,
+.fr-fieldset:disabled .fr-fieldset__legend {
+  color: var(--text-disabled-grey);
+}
+
+.fr-fieldset input:disabled + label,
+.fr-fieldset input:disabled + label .fr-hint-text,
+.fr-fieldset input:disabled + label + .fr-hint-text {
+  color: var(--text-disabled-grey);
+}
+
+.fr-fieldset--error,
+.fr-fieldset--error .fr-fieldset__legend {
+  background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error));
+}
+
+.fr-fieldset--error .fr-fieldset__legend,
+.fr-fieldset--error .fr-label {
+  color: var(--text-default-error);
+}
+
+.fr-fieldset--valid,
+.fr-fieldset--valid .fr-fieldset__legend {
+  background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success));
+}
+
+.fr-fieldset--valid .fr-fieldset__legend,
+.fr-fieldset--valid .fr-label {
+  color: var(--text-default-success);
+}
+
+.fr-fieldset--info,
+.fr-fieldset--info .fr-fieldset__legend {
+  background-image: linear-gradient(0deg, var(--border-plain-info), var(--border-plain-info));
+}
+
+.fr-fieldset--info .fr-fieldset__legend,
+.fr-fieldset--info .fr-label {
+  color: var(--text-default-info);
+}
+
+.fr-select-group:not(:last-child),
+.fr-input-group:not(:last-child) {
+  margin-bottom: 1.5rem;
+}
+
+.fr-select-group .fr-label .fr-hint-text,
+.fr-input-group .fr-label .fr-hint-text {
+  margin-top: 0.25rem;
+}
+
+.fr-fieldset--inline .fr-fieldset__content {
+  display: flex;
+  align-items: baseline;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin: -0.75rem 0.5rem 0 0.5rem;
+}
+
+.fr-fieldset--inline .fr-checkbox-group {
+  display: inline-flex;
+  margin-bottom: 0;
+}
+
+.fr-fieldset--inline .fr-checkbox-group:first-child {
+  margin-top: 0;
+}
+
+.fr-fieldset--inline .fr-checkbox-group:not(:last-child) {
+  margin-right: 1.25rem;
+}
+
+.fr-fieldset--inline .fr-checkbox-group:last-child {
+  margin-bottom: 0;
+}
+
+.fr-fieldset--inline .fr-radio-group {
+  display: inline-flex;
+}
+
+.fr-fieldset--inline .fr-radio-group:not(:last-child) {
+  margin-right: 1.75rem;
+}
+
+.fr-fieldset--inline .fr-radio-group:first-child {
+  margin-top: 0;
+}
+
+.fr-fieldset--inline .fr-radio-group:last-child {
+  margin-bottom: 0;
+}
+
+.fr-fieldset__content {
+  position: relative;
+  margin: 0 0.5rem;
+  width: 100%;
+}
+
+.fr-fieldset__content .fr-radio-group:first-child,
+.fr-fieldset__content .fr-checkbox-group:first-child {
+  margin-top: -0.75rem;
+}
+
+.fr-fieldset__content .fr-radio-group label,
+.fr-fieldset__content .fr-checkbox-group label {
+  padding: 0.75rem 0;
+}
+
+.fr-fieldset__content .fr-radio-group:not(.fr-radio-rich) input[type=radio] + label::before,
+.fr-fieldset__content .fr-checkbox-group input[type=checkbox] + label::before {
+  top: 0.75rem;
+}
+
+.fr-fieldset__content + .fr-error-text,
+.fr-fieldset__content + .fr-valid-text,
+.fr-fieldset__content + .fr-info-text {
+  margin-top: 0;
+  margin-left: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.fr-error-text,
+.fr-valid-text,
+.fr-info-text {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  margin-top: 1rem;
+  margin-bottom: 0;
+}
+
+.fr-error-text::before,
+.fr-valid-text::before,
+.fr-info-text::before {
+  flex: 0 0 auto;
+  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%;
+  --icon-size: 1rem;
+  content: "";
+  display: inline-block;
+  margin-right: 0.25rem;
+}
+
+.fr-error-text + .fr-error-text,
+.fr-error-text + .fr-valid-text,
+.fr-error-text + .fr-info-text,
+.fr-valid-text + .fr-error-text,
+.fr-valid-text + .fr-valid-text,
+.fr-valid-text + .fr-info-text,
+.fr-info-text + .fr-error-text,
+.fr-info-text + .fr-valid-text,
+.fr-info-text + .fr-info-text {
+  margin-top: 0.25rem;
+}
+
+.fr-error-text::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--error-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--error-fill.svg");
+}
+
+.fr-valid-text::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--success-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--success-fill.svg");
+}
+
+.fr-info-text::before {
+  -webkit-mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--info-fill.svg");
+  mask-image: url("https://lab-anssi-ui-kit-prod-s3-assets.cellar-c2.services.clever-cloud.com/icones/dsfr/system/fr--info-fill.svg");
+}
+
+.fr-error-text {
+  color: var(--text-default-error);
+}
+
+.fr-valid-text {
+  color: var(--text-default-success);
+}
+
+.fr-info-text {
+  color: var(--text-default-info);
+}
+
+.fr-fieldset--valid .fr-fieldset__content::before {
+  box-shadow: inset 2px 0 0 0 var(--border-plain-success);
+}
+
+.fr-fieldset--error .fr-fieldset__content::before {
+  box-shadow: inset 2px 0 0 0 var(--border-plain-error);
+}
+
+.fr-fieldset--info .fr-fieldset__content::before {
+  box-shadow: inset 2px 0 0 0 var(--border-plain-info);
+}
+@media (min-width: 36em) {
+  /*! media sm */
+}
+@media (min-width: 48em) {
+  /*! media md */
+  .fr-fieldset__element--inline\@md {
+    flex: 0 0 auto;
+  }
+
+  .fr-fieldset__element--year.fr-fieldset__element--inline\@md {
+    margin-right: 0;
+  }
+
+  .fr-fieldset__element--postal.fr-fieldset__element--inline\@md {
+    margin-right: 0;
+  }
+
+  .fr-fieldset__element--number.fr-fieldset__element--inline\@md {
+    margin-right: 0;
+  }
+}
+@media (min-width: 62em) {
+  /*! media lg */
+}
+@media (min-width: 78em) {
+  /*! media xl */
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-fieldset:disabled .fr-label,
+  .fr-fieldset:disabled .fr-hint-text,
+  .fr-fieldset:disabled .fr-fieldset__legend {
+    color: graytext;
+  }
+
+  .fr-fieldset input:disabled + label,
+  .fr-fieldset input:disabled + label .fr-hint-text,
+  .fr-fieldset input:disabled + label + .fr-hint-text {
+    color: graytext;
+  }
+
+  .fr-message--error::before,
+  .fr-message--error::after,
+  .fr-message--valid::before,
+  .fr-message--valid::after,
+  .fr-message--warning::before,
+  .fr-message--warning::after,
+  .fr-message--info::before,
+  .fr-message--info::after {
+    forced-color-adjust: none;
+    background-color: canvastext;
+  }
+
+  .fr-error-text::before,
+  .fr-valid-text::before,
+  .fr-info-text::before {
+    forced-color-adjust: none;
+    background-color: canvastext;
+  }
+}
+/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */
+/* ¯¯¯¯¯¯¯¯¯ *\
+  RANGE
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-range-group {
+  position: relative;
+}
+
+.fr-range-group--valid::before,
+.fr-range-group--error::before {
+  content: "";
+  display: block;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: -0.75rem;
+  bottom: 0;
+  left: -0.75rem;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 0.125rem 100%;
+}
+
+.fr-range {
+  --thumb-size: 1.5rem;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.fr-range input[type=range] {
+  outline: none;
+  width: 100%;
+}
+
+.fr-range__output {
+  visibility: hidden;
+  color: var(--text-active-blue-france);
+}
+
+.fr-range__output,
+.fr-range__min,
+.fr-range__max {
+  text-align: center;
+  min-width: var(--thumb-size);
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+}
+
+.fr-range[data-fr-js-range] {
+  --progress-left: 0;
+  --progress-right: calc(var(--thumb-size) * 0.5);
+}
+
+.fr-range[data-fr-js-range]::before,
+.fr-range[data-fr-js-range]::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 1.625rem;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 0.75rem;
+  border-radius: 0.375rem;
+  forced-color-adjust: none;
+}
+
+.fr-range[data-fr-js-range]::before {
+  outline-offset: -1px;
+  box-shadow: inset 0 0 0 1px var(--border-action-high-blue-france);
+}
+
+.fr-range[data-fr-js-range]::after {
+  clip-path: polygon(var(--progress-left) 0, var(--progress-right) 0, var(--progress-right) 100%, var(--progress-left) 100%);
+  background-color: var(--background-active-blue-france);
+
+  --idle: transparent;
+  --hover: var(--background-active-blue-france-hover);
+  --active: var(--background-active-blue-france-active);
+}
+
+.fr-range[data-fr-js-range] input[type=range] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background-color: transparent;
+  width: 100%;
+  height: var(--thumb-size);
+  z-index: 1;
+}
+
+.fr-range[data-fr-js-range] input[type=range]:not(:only-of-type) {
+  pointer-events: none;
+}
+
+.fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  border: none;
+  pointer-events: auto;
+  z-index: calc(var(--ground) + 500);
+  background-color: var(--background-raised-grey);
+  --hover: var(--background-raised-grey-hover);
+  --active: var(--background-raised-grey-active);
+  filter: drop-shadow(var(--raised-shadow));
+  background-color: var(--background-default-grey);
+
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  border: 1px solid var(--border-action-high-blue-france);
+}
+
+.fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb:active {
+  z-index: 2;
+}
+
+.fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: var(--thumb-size);
+  height: var(--thumb-size);
+  border-radius: 50%;
+  border: none;
+  pointer-events: auto;
+  z-index: calc(var(--ground) + 500);
+  background-color: var(--background-raised-grey);
+  --hover: var(--background-raised-grey-hover);
+  --active: var(--background-raised-grey-active);
+  filter: drop-shadow(var(--raised-shadow));
+  background-color: var(--background-default-grey);
+
+  --idle: transparent;
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  border: 1px solid var(--border-action-high-blue-france);
+}
+
+.fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb:active {
+  z-index: 2;
+}
+
+.fr-range[data-fr-js-range] input[type=range]:disabled {
+  border-color: graytext;
+}
+
+.fr-range[data-fr-js-range] .fr-range__output {
+  visibility: visible;
+}
+
+.fr-range--sm {
+  --thumb-size: 1rem;
+}
+
+.fr-range--sm[data-fr-js-range]::before,
+.fr-range--sm[data-fr-js-range]::after {
+  top: 1.5rem;
+  height: 0.5rem;
+  border-radius: 0.25rem;
+}
+
+.fr-range--step[data-fr-js-range] {
+  --step-width: 0;
+}
+
+.fr-range--step[data-fr-js-range]::before,
+.fr-range--step[data-fr-js-range]::after {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+  background-repeat: repeat-x;
+  background-size: var(--step-width) 100%;
+  background-position: 0.625rem 0;
+  background-clip: content-box;
+}
+
+.fr-range--step.fr-range--sm[data-fr-js-range]::before,
+.fr-range--step.fr-range--sm[data-fr-js-range]::after {
+  background-position: 0.375rem 0;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.fr-range--double .fr-range__output {
+  min-width: calc(var(--thumb-size) * 2);
+}
+
+.fr-range--double[data-fr-js-range] input[type=range] {
+  width: calc(100% - var(--thumb-size));
+}
+
+.fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(1) {
+  margin-right: var(--thumb-size);
+}
+
+.fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(2) {
+  position: absolute;
+  right: 0;
+  top: 1.25rem;
+}
+
+.fr-range--double.fr-range--step[data-fr-js-range]::before,
+.fr-range--double.fr-range--step[data-fr-js-range]::after {
+  background-size: 0;
+}
+
+.fr-range[data-fr-js-range] input[type=range]:disabled::-webkit-slider-thumb {
+  border: 1px solid var(--border-disabled-grey);
+}
+
+.fr-range[data-fr-js-range] input[type=range]:disabled::-moz-range-thumb {
+  border: 1px solid var(--border-disabled-grey);
+}
+
+.fr-range__min,
+.fr-range__max {
+  color: var(--text-mention-grey);
+}
+
+.fr-range--step[data-fr-js-range]::before {
+  background-image: radial-gradient(circle at 2px 50%, var(--background-action-high-blue-france) 0, var(--background-action-high-blue-france) 1px, transparent 1px);
+}
+
+.fr-range--step[data-fr-js-range]::after {
+  background-image: radial-gradient(circle at 2px 50%, var(--background-action-low-blue-france) 0, var(--background-action-low-blue-france) 2px, transparent 2px);
+  box-shadow: inset 10px 0 0 0 var(--border-active-blue-france), inset -10px 0 0 0 var(--border-active-blue-france);
+}
+
+.fr-range--step.fr-range--sm[data-fr-js-range]::after {
+  box-shadow: inset 6px 0 0 0 var(--border-active-blue-france), inset -6px 0 0 0 var(--border-active-blue-france);
+}
+
+.fr-range-group--error::before {
+  background-image: linear-gradient(0deg, var(--border-plain-error), var(--border-plain-error));
+}
+
+.fr-range-group--valid::before {
+  background-image: linear-gradient(0deg, var(--border-plain-success), var(--border-plain-success));
+}
+
+.fr-range-group--disabled .fr-range[data-fr-js-range]::before {
+  box-shadow: inset 0 0 0 1px var(--border-disabled-grey);
+}
+
+.fr-range-group--disabled .fr-range[data-fr-js-range]::after {
+  background-color: var(--background-disabled-grey);
+
+  --idle: transparent;
+  --hover: var(--background-disabled-grey-hover);
+  --active: var(--background-disabled-grey-active);
+}
+
+.fr-range-group--disabled .fr-range--step[data-fr-js-range]::before {
+  background-image: radial-gradient(circle at 2px 50%, var(--background-disabled-grey) 0, var(--background-disabled-grey) 1px, transparent 1px);
+}
+
+.fr-range-group--disabled .fr-range--step[data-fr-js-range]::after {
+  background-image: radial-gradient(circle at 2px 50%, var(--background-default-grey) 0, var(--background-default-grey) 2px, transparent 2px);
+  box-shadow: inset 10px 0 0 0 var(--border-disabled-grey), inset -10px 0 0 0 var(--border-disabled-grey);
+}
+
+.fr-range-group--disabled .fr-range__output,
+.fr-range-group--disabled .fr-range__min,
+.fr-range-group--disabled .fr-range__max {
+  color: var(--text-disabled-grey);
+}
+@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 (-ms-high-contrast: active), (forced-colors: active) {
+  .fr-range-group--disabled .fr-range__output,
+  .fr-range-group--disabled .fr-range__min,
+  .fr-range-group--disabled .fr-range__max {
+    color: graytext;
+  }
+
+  .fr-range-group--disabled .fr-range[data-fr-js-range]::before,
+  .fr-range-group--disabled .fr-range[data-fr-js-range]::after {
+    border: 1px solid graytext;
+  }
+
+  .fr-range-group--disabled .fr-label,
+  .fr-range-group--disabled .fr-label .fr-hint-text {
+    color: graytext;
+  }
+
+  .fr-range input[type=range] {
+    border: none;
+  }
+
+  .fr-range[data-fr-js-range]::before {
+    box-shadow: 0 0 0 1px buttontext;
+  }
+
+  .fr-range[data-fr-js-range]::after {
+    background-color: highlight;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range] {
+    border: none;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range]:focus::-webkit-slider-thumb {
+    outline-color: highlight;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range]:focus::-moz-range-thumb {
+    outline-color: highlight;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range]::-webkit-slider-thumb {
+    background: buttontext;
+    box-shadow: none;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range]::-moz-range-thumb {
+    background: buttontext;
+    box-shadow: none;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range]:disabled::-webkit-slider-thumb {
+    background: graytext;
+  }
+
+  .fr-range[data-fr-js-range] input[type=range]:disabled::-moz-range-thumb {
+    background: graytext;
+  }
+
+  .fr-range--step[data-fr-js-range]::before {
+    background-image: radial-gradient(circle at 2px 50%, buttontext 0, buttontext 1px, transparent 1px);
+  }
+
+  .fr-range--step[data-fr-js-range]::after {
+    box-shadow: inset 10px 0 0 0 highlight, inset -10px 0 0 0 highlight;
+    background-image: radial-gradient(circle at 2px 50%, highlighttext 0, highlighttext 2px, transparent 2px);
+  }
+
+  .fr-range--step.fr-range--sm[data-fr-js-range]::after {
+    box-shadow: inset 6px 0 0 0 highlight, inset -6px 0 0 0 highlight;
+  }
+
+  .fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(1) {
+    border-right: none;
+  }
+
+  .fr-range--double[data-fr-js-range] input[type=range]:nth-of-type(2) {
+    border-left: none;
+  }
+}
+input,
+select,
+textarea {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  font-family: "Marianne", arial, sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+  border-radius: 0;
+  border: 0;
+  background-color: transparent;
+  margin: 0;
+}
+@media (-ms-high-contrast: active), (forced-colors: active) {
+  input,
+  select,
+  textarea {
+    border: 1px solid;
+  }
+}
+
+input[type=search] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+input[type=checkbox],
+input[type=radio],
+input[type=range] {
+  -webkit-appearance: auto;
+  -moz-appearance: auto;
+  appearance: auto;
+}
+
+input::-webkit-contacts-auto-fill-button,
+input::-webkit-credentials-auto-fill-button {
+  margin-left: 1rem;
+  margin-right: -1px;
+  width: 1.25rem;
+  height: 1.25rem;
+  -webkit-mask-size: 1.25rem 1.25rem;
+}
+
+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;
+}
+
+a, button, input[type=checkbox], input[type=checkbox] + label, input[type=radio], input[type=radio] + label, input[type=file], input[type=range], input[type=button], input[type=image], input[type=reset], input[type=submit], select, video[controls], audio[controls], details, details > summary:first-of-type {
+  cursor: pointer;
+}
+
+input[type=range]:disabled::-webkit-slider-thumb, input[type=range]:disabled::-webkit-slider-thumb:active {
+  cursor: not-allowed;
+}
+
+input[type=range]:disabled::-moz-range-thumb, input[type=range]:disabled::-moz-range-thumb:active {
+  cursor: not-allowed;
+}
+
+input[type=range]:disabled::-ms-thumb, input[type=range]:disabled::-ms-thumb:active {
+  cursor: not-allowed;
+}
+
+a:not([href]), button:disabled, input:disabled, input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=radio]:disabled, input[type=radio]:disabled + label, input[type=file]:disabled, input[type=range]:disabled, input[type=button]:disabled, input[type=image]:disabled, input[type=reset]:disabled, input[type=submit]:disabled, select:disabled, textarea:disabled, video:not([href])[controls], audio:not([href])[controls] {
+  cursor: not-allowed;
+}
+
+input[type=range]::-webkit-slider-thumb {
+  cursor: grab;
+}
+
+input[type=range]::-moz-range-thumb {
+  cursor: grab;
+}
+
+input[type=range]::-ms-thumb {
+  cursor: grab;
+}
+
+input[type=range]::-webkit-slider-thumb:active {
+  cursor: grabbing;
+}
+
+input[type=range]::-moz-range-thumb:active {
+  cursor: grabbing;
+}
+
+input[type=range]::-ms-thumb:active {
+  cursor: grabbing;
+}
+
+/**
+ * Override de l'opacité chrome sur un élément disabled
+ */
+a:not([href]), button:disabled, input:disabled, input[type=checkbox]:disabled, input[type=checkbox]:disabled + label, input[type=radio]:disabled, input[type=radio]:disabled + label, select:disabled, textarea:disabled, video:not([href]), audio:not([href]) {
+  opacity: 1;
+}
+
+input,
+select,
+textarea,
+label,
+button,
+a {
+  -webkit-tap-highlight-color: transparent;
+}
+
+: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-range-group {
+  box-sizing: border-box;
+}
+.fr-range-group *,
+.fr-range-group *::after,
+.fr-range-group *::before {
+  box-sizing: inherit;
+}
+
+.fr-range[data-fr-js-range] .fr-range__output.fr-range__output--hide {
+  visibility: hidden;
+}</style>