@lab-anssi/ui-kit 1.61.3 → 1.62.0

package/dist/dsfr/DsfrTable.svelte

@@ -0,0 +1,829 @@
+<svelte:options
+  customElement={{
+    tag: "dsfr-table",
+    props: {
+      id: { attribute: "id", type: "String" },
+      caption: { attribute: "caption", type: "String" },
+      captionDetail: { attribute: "caption-detail", type: "String" },
+      noCaption: { attribute: "no-caption", type: "Boolean" },
+      captionBottom: { attribute: "caption-bottom", type: "Boolean" },
+      bordered: { attribute: "bordered", type: "Boolean" },
+      noScroll: { attribute: "no-scroll", type: "Boolean" },
+      multiline: { attribute: "multiline", type: "Boolean" },
+      layoutFixed: { attribute: "layout-fixed", type: "Boolean" },
+      size: { attribute: "size", type: "String" },
+      fixedFirstCellHead: { attribute: "fixed-first-cell-head", type: "Boolean" },
+      hasHeader: { attribute: "has-header", type: "Boolean" },
+      hasHeaderSegmented: { attribute: "has-header-segmented", type: "Boolean" },
+      hasHeaderSearch: { attribute: "has-header-search", type: "Boolean" },
+      hasHeaderDetails: { attribute: "has-header-details", type: "Boolean" },
+      headerDetails: { attribute: "header-details", type: "String" },
+      hasHeaderButtons: { attribute: "has-header-buttons", type: "Boolean" },
+      hasFooter: { attribute: "has-footer", type: "Boolean" },
+      hasFooterSelect: { attribute: "has-footer-select", type: "Boolean" },
+      hasFooterPagination: { attribute: "has-footer-pagination", type: "Boolean" },
+      hasFooterButtons: { attribute: "has-footer-buttons", type: "Boolean" },
+      table: { attribute: "table", type: "Object" },
+      columns: { attribute: "columns", type: "Array" },
+      rows: { attribute: "rows", type: "Array" },
+      itemsPerPage: { attribute: "items-per-page", type: "Array" },
+      totalRows: { attribute: "total-rows", type: "Number" },
+      rich: { attribute: "rich", type: "Boolean" },
+      selectable: { attribute: "selectable", type: "Boolean" },
+      selectAll: { attribute: "select-all", type: "Boolean" },
+      rowKey: { attribute: "row-key", type: "String" },
+      selectedRowKeys: { attribute: "selected-row-keys", type: "Array" },
+      disabledRowKeys: { attribute: "disabled-row-keys", type: "Array" },
+    },
+  }}
+/>
+
+<script lang="ts">import { setThemeable } from "../utilitaires";
+import { setIndeterminate } from "../directives/actions.svelte";
+import DsfrPagination from "./DsfrPagination.svelte";
+import DsfrSelect from "./DsfrSelect.svelte";
+setThemeable($host());
+let wrapperEl = $state();
+let captionEl = $state();
+/**
+* Observateur de redimensionnement qui met à jour le décalage du tableau en fonction de la hauteur de la légende.
+* Calcule la hauteur de la légende et définit la variable CSS `--table-offset` pour ajuster l'espacement du wrapper.
+* Le callback `update` est appelé chaque fois que la légende change de taille.
+*/
+$effect(() => {
+	if (noCaption || !wrapperEl || !captionEl) {
+		wrapperEl?.style.removeProperty("--table-offset");
+		return;
+	}
+	const update = () => {
+		wrapperEl.style.removeProperty("--table-offset");
+		const height = captionEl.getBoundingClientRect().height;
+		wrapperEl.style.setProperty("--table-offset", `calc(${height}px + 1rem)`);
+	};
+	update();
+	const observer = new ResizeObserver(update);
+	observer.observe(captionEl);
+	return () => observer.disconnect();
+});
+let { id, caption, captionDetail, noCaption = false, captionBottom = false, bordered = false, noScroll = false, multiline = false, layoutFixed = false, size = "md", fixedFirstCellHead = false, hasHeader = false, hasHeaderSegmented = false, hasHeaderSearch = false, hasHeaderDetails = false, headerDetails, hasHeaderButtons = false, hasFooter = false, hasFooterSelect = false, hasFooterPagination = false, hasFooterButtons = false, table, columns, rows, itemsPerPage = [
+	5,
+	10,
+	20
+], totalRows, onpagechanged, onrowsperpagechanged, rich = false, selectable = false, selectAll = false, rowKey, selectedRowKeys, disabledRowKeys, onselectionchanged } = $props();
+// Génère l'en-tête du tableau à partir de `columns` si fournies _(custom API)_, sinon à partir de `table` _(API DSFR)_.
+let computedThead = $derived(columns ? [columns.map((col) => ({
+	content: col.label,
+	size: col.size,
+	align: col.align,
+	valign: col.valign,
+	fixed: col.fixed,
+	sort: col.sort,
+	inline: col.inline,
+	multiline: col.multiline
+}))] : table?.thead ?? []);
+// Génère le corps du tableau à partir de `rows` et `columns` si fournies _(custom API)_, sinon à partir de `table` _(API DSFR)_.
+let computedTbodies = $derived(rows && columns ? [rows.map((row) => columns.map((col) => ({
+	content: row[col.key] != null ? String(row[col.key]) : "",
+	align: col.align,
+	valign: col.valign,
+	fixed: col.fixed,
+	inline: col.inline,
+	multiline: col.multiline
+})))] : table?.tbodies ?? []);
+// En mode serveur (présence de `totalRows`), le consommateur final gère le découpage, le composant lui affiche toutes les lignes reçues.
+// En mode client (mode par défaut), le composant calcule lui-même le nombre total depuis les données.
+let isServerSide = $derived(totalRows !== undefined);
+let nbRows = $derived(isServerSide ? totalRows ?? 0 : computedTbodies[0]?.length ?? 0);
+let rowsPerPage = $derived(itemsPerPage[0]);
+let currentPage = $state(1);
+let totalPages = $derived(Math.ceil(nbRows / rowsPerPage));
+// Calcule les lignes à afficher en fonction du mode (serveur/client) et de la pagination
+let displayedRows = $derived.by(() => {
+	const allRows = computedTbodies[0] ?? [];
+	// En mode serveur, toutes les lignes reçues sont déjà filtrées par le parent
+	if (isServerSide) return allRows;
+	// Sans pagination ni sélection, afficher toutes les lignes
+	if (!hasFooterSelect && !hasFooterPagination) return allRows;
+	// Découper les lignes selon la page courante et le nombre de lignes par page
+	return allRows.slice((currentPage - 1) * rowsPerPage, currentPage * rowsPerPage);
+});
+let paginationPages = $derived(Array.from({ length: totalPages }, (_, i) => ({
+	label: String(i + 1),
+	title: `Page ${i + 1}`,
+	href: "#",
+	displayedLg: false
+})));
+/**
+* Gère le changement du nombre de lignes à afficher par page.
+* Réinitialise la page courante à 1 et émet l'événement associé.
+*
+* @param {string} value - La nouvelle valeur du nombre de lignes par page (sous forme de chaîne)
+*/
+function handleRowsPerPageChange(value) {
+	const newValue = parseInt(value, 10);
+	rowsPerPage = newValue;
+	currentPage = 1;
+	onrowsperpagechanged?.(newValue);
+	$host()?.dispatchEvent(new CustomEvent("rowsperpagechanged", {
+		detail: newValue,
+		bubbles: true
+	}));
+}
+/**
+* Gère le changement de page.
+* Met à jour la page courante et émet l'événement associé.
+*
+* @param {number} page - La nouvelle page courante
+*/
+function handlePageChange(page) {
+	currentPage = page;
+	onpagechanged?.(page);
+	$host()?.dispatchEvent(new CustomEvent("pagechanged", {
+		detail: page,
+		bubbles: true
+	}));
+}
+/**
+* Récupère la clé d'une ligne.
+* En l'absence de `rowKey`, l'index de la ligne sert d'identifiant.
+*
+* @param row - La ligne dont on veut obtenir la clé
+* @param rowIndex - L'index de la ligne
+*
+* @returns La clé de la ligne (propriété `rowKey` ou index)
+*/
+function getRowKey(row, rowIndex) {
+	if (rowKey && row[rowKey] != null) return row[rowKey];
+	return rowIndex;
+}
+let internalSelectedKeys = $state([]);
+let isSelectionControlled = $derived(selectedRowKeys !== undefined);
+let activeSelectedKeys = $derived(isSelectionControlled ? selectedRowKeys ?? [] : internalSelectedKeys);
+let selectedKeysSet = $derived(new Set(activeSelectedKeys));
+let disabledKeysSet = $derived(new Set(disabledRowKeys ?? []));
+let displayedRowKeys = $derived.by(() => {
+	if (!selectable || !selectAll) return [];
+	return displayedRows.map((_, index) => {
+		const rowIndex = (currentPage - 1) * rowsPerPage + index;
+		const originalRow = rows?.[isServerSide ? index : rowIndex] ?? {};
+		return getRowKey(originalRow, rowIndex);
+	}).filter((key) => !disabledKeysSet.has(key));
+});
+let allRowsSelected = $derived(displayedRowKeys.length > 0 && displayedRowKeys.every((key) => selectedKeysSet.has(key)));
+let someRowsSelected = $derived(displayedRowKeys.some((key) => selectedKeysSet.has(key)) && !allRowsSelected);
+/**
+* Vérifie si une ligne est actuellement sélectionnée.
+*
+* @param row - La ligne à vérifier
+* @param rowIndex - L'index de la ligne
+*
+* @returns `true` si la ligne est sélectionnée, `false` sinon
+*/
+function isRowSelected(row, rowIndex) {
+	return selectedKeysSet.has(getRowKey(row, rowIndex));
+}
+/**
+* Vérifie si une ligne est actuellement désactivée.
+*
+* @param row - La ligne à vérifier
+* @param rowIndex - L'index de la ligne
+*
+* @returns `true` si la ligne est désactivée, `false` sinon
+*/
+function isRowDisabled(row, rowIndex) {
+	return disabledKeysSet.has(getRowKey(row, rowIndex));
+}
+/**
+* Gère la sélection ou la désélection d'une ligne du tableau.
+*
+* Met à jour l'état interne de sélection (ou contrôlé de l'extérieur) et déclenche
+* les callbacks et événements appropriés avec la liste mise à jour des clés sélectionnées
+* et des lignes correspondantes.
+*
+* @param row - La ligne à sélectionner ou désélectionner
+* @param rowIndex - L'index de la ligne dans le tableau
+* @param checked - Indique si la ligne doit être sélectionnée (`true`) ou désélectionnée (`false`)
+*/
+function handleRowSelection(row, rowIndex, checked) {
+	const key = getRowKey(row, rowIndex);
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const updatedSelection = new Set(activeSelectedKeys);
+	if (checked) updatedSelection.add(key);
+	else updatedSelection.delete(key);
+	const updatedKeys = Array.from(updatedSelection);
+	const updatedRows = (rows ?? []).filter((r, i) => updatedSelection.has(getRowKey(r, i)));
+	if (!isSelectionControlled) internalSelectedKeys = updatedKeys;
+	onselectionchanged?.(updatedKeys, updatedRows);
+	$host()?.dispatchEvent(new CustomEvent("selectionchanged", {
+		detail: {
+			keys: updatedKeys,
+			rows: updatedRows
+		},
+		bubbles: true
+	}));
+}
+/**
+* Sélectionne ou désélectionne toutes les lignes actuellement affichées,
+* puis émet l'événement de changement de sélection.
+*
+* @param checked - Indique si toutes les lignes visibles doivent être sélectionnées (`true`) ou désélectionnées (`false`).
+*/
+function handleSelectAll(checked) {
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const updatedSelection = new Set(activeSelectedKeys);
+	for (const key of displayedRowKeys) {
+		if (checked) updatedSelection.add(key);
+		else updatedSelection.delete(key);
+	}
+	const updatedKeys = Array.from(updatedSelection);
+	const updatedRows = (rows ?? []).filter((r, i) => updatedSelection.has(getRowKey(r, i)));
+	if (!isSelectionControlled) internalSelectedKeys = updatedKeys;
+	onselectionchanged?.(updatedKeys, updatedRows);
+	$host()?.dispatchEvent(new CustomEvent("selectionchanged", {
+		detail: {
+			keys: updatedKeys,
+			rows: updatedRows
+		},
+		bubbles: true
+	}));
+}
+/**
+* Action Svelte : crée un `<slot name="...">` programmatiquement dans le `<td>`,
+* en déplaçant le contenu Svelte existant comme fallback du slot.
+* Contourne la restriction compile-time de Svelte sur les noms de slot dynamiques.
+* Est un no-op si `slotName` est null (mode non-rich).
+*/
+function cellSlot(node, slotName) {
+	if (!slotName) return;
+	const slot = document.createElement("slot");
+	slot.name = slotName;
+	while (node.firstChild) {
+		slot.appendChild(node.firstChild);
+	}
+	node.appendChild(slot);
+	return {
+		update(newSlotName) {
+			if (newSlotName) slot.name = newSlotName;
+		},
+		destroy() {
+			while (slot.firstChild) {
+				node.insertBefore(slot.firstChild, slot);
+			}
+			slot.remove();
+		}
+	};
+}
+/**
+* Action Svelte : observe la hauteur du `<tr>` et synchronise la CSS custom property `--row-height`,
+* reproduisant le comportement de `table-row.js` du DSFR.
+*/
+function rowHeight(node, enabled) {
+	const ROW_HEIGHT_OFFSET_PX = 2;
+	let height = 0;
+	let observer;
+	const update = () => {
+		const newHeight = node.getBoundingClientRect().height + ROW_HEIGHT_OFFSET_PX;
+		if (height === newHeight) return;
+		height = newHeight;
+		node.style.setProperty("--row-height", `${height}px`);
+	};
+	const start = () => {
+		if (observer) return;
+		update();
+		observer = new ResizeObserver(update);
+		observer.observe(node);
+	};
+	const stop = () => {
+		observer?.disconnect();
+		observer = undefined;
+		height = 0;
+		node.style.removeProperty("--row-height");
+	};
+	if (enabled) start();
+	return {
+		update(newEnabled) {
+			if (newEnabled) start();
+			else stop();
+		},
+		destroy() {
+			stop();
+		}
+	};
+}
+/**
+* Génère les classes CSS applicables à une cellule de tableau en fonction de ses propriétés.
+*
+* @param cell La cellule dont les classes doivent être générées
+* @param isHeader Indique si la cellule est un en-tête de colonne
+* @param forceFixed Force l'application de la classe de cellule fixe
+* @returns Les classes CSS à appliquer à la cellule
+*/
+function getCellClasses(cell, isHeader = false, forceFixed = false) {
+	const classes = [];
+	if ("size" in cell && cell.size) classes.push(`fr-col--${cell.size}`);
+	if (cell.align === "center") classes.push("fr-cell--center");
+	if (cell.align === "right") classes.push("fr-cell--right");
+	if (cell.valign === "top") classes.push("fr-cell--top");
+	if (cell.valign === "bottom") classes.push("fr-cell--bottom");
+	if (forceFixed || cell.fixed === true) classes.push("fr-cell--fixed");
+	else if (typeof cell.fixed === "string") classes.push(`fr-cell--fixed@${cell.fixed}`);
+	if (cell.inline) classes.push("fr-cell--inline");
+	if (cell.multiline) classes.push("fr-cell--multiline");
+	if (isHeader && "sort" in cell && cell.sort) classes.push("fr-cell--sort");
+	return classes;
+}
+</script>
+
+<div
+  id={id ? `${id}-component` : undefined}
+  class={["fr-table", `fr-table--${size}`]}
+  class:fr-table--no-caption={noCaption}
+  class:fr-table--caption-bottom={!noCaption && captionBottom}
+  class:fr-table--bordered={bordered}
+  class:fr-table--no-scroll={noScroll}
+  class:fr-table--multiline={multiline}
+  class:fr-table--layout-fixed={layoutFixed}
+  data-fr-js-table="true"
+>
+  {#if hasHeader}
+    <div class="fr-table__header">
+      {#if hasHeaderSegmented}
+        <slot name="headersegmented"></slot>
+      {/if}
+
+      {#if hasHeaderSearch}
+        <slot name="headersearch"></slot>
+      {/if}
+
+      {#if hasHeaderDetails && headerDetails}
+        <p class="fr-table__detail">{headerDetails}</p>
+      {/if}
+
+      {#if hasHeaderButtons}
+        <slot name="headerbuttons"></slot>
+      {/if}
+
+      <slot name="tableheader"></slot>
+    </div>
+  {/if}
+
+  <div bind:this={wrapperEl} class="fr-table__wrapper">
+    <div class="fr-table__container">
+      <div class="fr-table__content">
+        <slot name="tablecontent">
+          <table {id}>
+            <caption bind:this={captionEl}>
+              {caption}
+              {#if captionDetail}
+                <div class="fr-table__caption__desc">{captionDetail}</div>
+              {/if}
+            </caption>
+
+            {#if computedThead.length}
+              <thead>
+                {#each computedThead as row, headerRowIndex (headerRowIndex)}
+                  <tr>
+                    {#if selectable && headerRowIndex === 0}
+                      <th class="fr-cell--fixed" role="columnheader">
+                        {#if selectAll}
+                          {@const selectAllId = `${id ?? "table"}-select-all`}
+
+                          <div class="fr-checkbox-group fr-checkbox-group--sm">
+                            <input
+                              type="checkbox"
+                              id={selectAllId}
+                              checked={allRowsSelected}
+                              use:setIndeterminate={someRowsSelected}
+                              onchange={(event) =>
+                                handleSelectAll((event.currentTarget as HTMLInputElement).checked)}
+                            />
+                            <label class="fr-label" for={selectAllId}> Sélectionner tout </label>
+                          </div>
+                        {:else}
+                          <span class="fr-sr-only">Sélectionner</span>
+                        {/if}
+                      </th>
+                    {/if}
+                    {#each row as cell, colIndex (colIndex)}
+                      <th
+                        scope="col"
+                        class={getCellClasses(
+                          cell,
+                          true,
+                          fixedFirstCellHead && headerRowIndex === 0 && colIndex === 0,
+                        )}
+                      >
+                        {cell.content}
+                      </th>
+                    {/each}
+                  </tr>
+                {/each}
+              </thead>
+            {/if}
+
+            {#if nbRows === 0}
+              <tbody>
+                <tr>
+                  <td colspan={(computedThead[0]?.length ?? 1) + (selectable ? 1 : 0)}>
+                    <slot name="empty"></slot>
+                  </td>
+                </tr>
+              </tbody>
+            {:else}
+              {#each computedTbodies as tbody, tIndex (tIndex)}
+                <tbody>
+                  {#each tIndex === 0 ? displayedRows : tbody as row, index (index)}
+                    {@const rowIndex =
+                      tIndex === 0 ? (currentPage - 1) * rowsPerPage + index : index}
+                    {@const originalRow =
+                      tIndex === 0 ? (rows?.[isServerSide ? index : rowIndex] ?? {}) : undefined}
+                    {@const selected =
+                      selectable && originalRow ? isRowSelected(originalRow, rowIndex) : undefined}
+                    {@const disabled =
+                      selectable && originalRow ? isRowDisabled(originalRow, rowIndex) : undefined}
+
+                    <tr
+                      use:rowHeight={selectable && tIndex === 0}
+                      id={id ? `${id}-row-key-${rowIndex}` : undefined}
+                      data-row-key={rowIndex}
+                      aria-selected={selected}
+                    >
+                      {#if selectable && tIndex === 0 && originalRow}
+                        {@const checkboxId = `${id ?? "table"}-select-checkbox-${rowIndex}`}
+
+                        <th class="fr-cell--fixed" scope="row">
+                          <div class="fr-checkbox-group fr-checkbox-group--sm">
+                            <input
+                              type="checkbox"
+                              data-fr-row-select="true"
+                              id={checkboxId}
+                              checked={selected}
+                              {disabled}
+                              onchange={(event) =>
+                                handleRowSelection(
+                                  originalRow,
+                                  rowIndex,
+                                  (event.currentTarget as HTMLInputElement).checked,
+                                )}
+                            />
+                            <label class="fr-label" for={checkboxId}>
+                              Sélectionner la ligne {rowIndex + 1}
+                            </label>
+                          </div>
+                        </th>
+                      {/if}
+                      {#each row as cell, cellIndex (cellIndex)}
+                        {@const col = columns?.[cellIndex]}
+                        <td
+                          class={getCellClasses(cell)}
+                          use:cellSlot={col && (rich || col.rich)
+                            ? `cell:${col.key}:${rowIndex}`
+                            : null}
+                        >
+                          {cell.content}
+                        </td>
+                      {/each}
+                    </tr>
+                  {/each}
+                </tbody>
+              {/each}
+            {/if}
+          </table>
+        </slot>
+      </div>
+    </div>
+  </div>
+
+  {#if hasFooter}
+    <div class="fr-table__footer">
+      {#if hasFooterSelect}
+        <div class="fr-table__footer--start">
+          <p class="fr-table__detail">
+            {(currentPage - 1) * rowsPerPage + 1}-{Math.min(currentPage * rowsPerPage, nbRows)} sur {nbRows}
+            {nbRows > 1 ? "lignes" : "ligne"}
+          </p>
+
+          <slot name="footerselect">
+            {#if itemsPerPage.length > 1}
+              <DsfrSelect
+                id={`${id}-footer-select`}
+                label="Nombre de lignes par page"
+                placeholder="Nombre de lignes par page"
+                hideLabel
+                placeholderDisabled
+                value={String(rowsPerPage)}
+                options={itemsPerPage.map((item) => ({
+                  value: item.toString(),
+                  label: `${item} lignes par page`,
+                }))}
+                onvaluechanged={handleRowsPerPageChange}
+              />
+            {/if}
+          </slot>
+        </div>
+      {/if}
+
+      {#if hasFooterPagination}
+        <div class="fr-table__footer--middle">
+          <slot name="footerpagination">
+            <DsfrPagination
+              pages={paginationPages}
+              currentPageIndex={currentPage}
+              hasPrevAndNext
+              prev={{ label: "Précédent", href: "#", title: "Page précédente" }}
+              next={{ label: "Suivant", href: "#", title: "Page suivante" }}
+              onpagechange={handlePageChange}
+            />
+          </slot>
+        </div>
+      {/if}
+
+      {#if hasFooterButtons}
+        <div class="fr-table__footer--end">
+          <div class="fr-table__footer--end-wrapper">
+            <slot name="footerbuttons"></slot>
+          </div>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ */.fr-table{--table-offset:0px;--row-height:0.125rem;--text-spacing:0;--title-spacing:0;margin-bottom:2.5rem;margin-top:1rem;position:relative}.fr-table,.fr-table__container{padding-top:var(--table-offset)}.fr-table__container{overflow:auto}.fr-table--multiline .fr-table__content td,.fr-table--multiline .fr-table__content th{white-space:normal}.fr-table__content .fr-cell--fixed .fr-checkbox-group+*,.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group+*,.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group+*,.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group+*{margin-left:.5rem}.fr-table__content .fr-cell--fixed .fr-checkbox-group .fr-label,.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group .fr-label,.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group .fr-label,.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group .fr-label{color:transparent;pointer-events:none;width:0}.fr-table__content .fr-cell--fixed .fr-checkbox-group .fr-label:before,.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group .fr-label:before,.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group .fr-label:before,.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group .fr-label:before{left:-1.25rem}.fr-table__content .fr-cell--fixed .fr-checkbox-group input[type=checkbox],.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group input[type=checkbox],.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group input[type=checkbox],.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group input[type=checkbox]{left:.25rem}.fr-table__content .fr-cell--fixed{left:0;position:sticky;z-index:1}.fr-table__content .fr-cell--center{text-align:center}.fr-table__content .fr-cell--right{text-align:right}.fr-table__content .fr-cell--top{vertical-align:top}.fr-table__content .fr-cell--bottom{vertical-align:bottom}.fr-table__content .fr-cell__title{font-weight:700}.fr-table__content .fr-cell__desc{font-weight:400}.fr-table__content .fr-cell--inline{align-items:center;display:flex;margin:0 -.5rem}.fr-table__content .fr-cell--inline>*{margin:0 .5rem}.fr-table__content .fr-cell--multiline,.fr-table__content .fr-cell--multiline *{white-space:normal}.fr-table__content .fr-cell--sort{align-items:center;display:flex;justify-content:space-between}.fr-table__content .fr-cell--sort [class*=" fr-btn--sort"],.fr-table__content .fr-cell--sort [class^=fr-btn--sort]{margin-left:1rem}.fr-table__content .fr-col--xs{min-width:4rem;white-space:normal}.fr-table__content .fr-col--sm{min-width:5rem;white-space:normal}.fr-table__content .fr-col--md{min-width:12.5rem;white-space:normal}.fr-table__content .fr-col--lg{min-width:25rem;white-space:normal}.fr-table__content table{border-collapse:collapse;border-spacing:0;width:100%}.fr-table__content table thead{position:relative}.fr-table__content table thead:before{bottom:0;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:inherit;width:100%;z-index:1}.fr-table__content table thead th{--idle:transparent;--hover:var(--background-alt-grey-hover);--active:var(--background-alt-grey-active);background-color:var(--background-alt-grey);background-image:linear-gradient(0deg,var(--border-plain-grey),var(--border-plain-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey));font-weight:700}.fr-table__content table thead th[role=columnheader]{background-image:linear-gradient(0deg,var(--border-plain-grey),var(--border-plain-grey)),linear-gradient(0deg,var(--border-plain-grey),var(--border-plain-grey))}.fr-table__content table tbody th,.fr-table__content table thead th[role=columnheader]{background-position:0 100%,100% 0;background-repeat:no-repeat,no-repeat;background-size:100% 1px,1px 100%}.fr-table__content table tbody th{--idle:transparent;--hover:var(--background-alt-grey-hover);--active:var(--background-alt-grey-active);background-color:var(--background-alt-grey);background-image:linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-plain-grey),var(--border-plain-grey))}.fr-table__content table tbody tr:after{background-image:linear-gradient(0deg,var(--border-action-high-blue-france),var(--border-action-high-blue-france)),linear-gradient(0deg,var(--border-action-high-blue-france),var(--border-action-high-blue-france)),linear-gradient(0deg,var(--border-action-high-blue-france),var(--border-action-high-blue-france)),linear-gradient(0deg,var(--border-action-high-blue-france),var(--border-action-high-blue-france));background-position:0 0,100% 0,0 0,0 100%;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-size:.125rem 100%,.125rem 100%,100% .125rem,0 0;height:var(--row-height);left:0;pointer-events:none;position:absolute;transform:translateY(-.125rem);width:100%;z-index:2}.fr-table__content table tbody tr[aria-selected=true]+tr:after,.fr-table__content table tbody tr[aria-selected=true]:after{content:""}.fr-table__content table tbody tr[aria-selected=true]+tr[aria-selected=true]:after{background-size:.125rem 100%,.125rem 100%,0 0,0 0}.fr-table__content table tbody tr[aria-selected=true]+tr:not([aria-selected=true]):after{background-size:0 0,0 0,100% .125rem,0 0}.fr-table__content table tbody tr:last-of-type[aria-selected=true]:after{background-size:.125rem 100%,.125rem 100%,100% .125rem,100% .125rem}.fr-table__content table tbody tr[aria-selected=true]+tr:last-of-type[aria-selected=true]:after{background-size:.125rem 100%,.125rem 100%,0 0,100% .125rem}.fr-table__content td,.fr-table__content th{background-position:100% 100%;background-repeat:no-repeat;background-size:100% 1px;display:table-cell;font-size:.875rem;line-height:1.5rem;padding:.5rem 1rem;text-align:left;vertical-align:middle;white-space:nowrap}.fr-table__content td .fr-checkbox-group,.fr-table__content th .fr-checkbox-group{display:inline-block}.fr-table__content td .fr-checkbox-group .fr-label,.fr-table__content th .fr-checkbox-group .fr-label{font-size:.875rem;line-height:1.5rem}.fr-table caption{font-size:1.375rem;font-weight:700;line-height:1.75rem;margin:var(--title-spacing);margin-bottom:1rem;position:static;text-align:left}.fr-table caption .fr-table__caption__desc{font-size:1rem;font-weight:400;line-height:1.5rem;margin-top:1rem}.fr-table__detail{color:var(--text-mention-grey);font-size:.875rem;line-height:1.5rem}.fr-table[data-fr-js-table=true] caption{position:absolute;top:0}.fr-table[data-fr-js-table=true] .fr-table__wrapper{position:relative}.fr-table[data-fr-js-table=true] .fr-table__wrapper:after{background-position:0 0,0 0,100% 100%,0 100%;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-size:100% 1px,1px 100%,1px 100%,100% 1px;content:"";display:block;height:calc(100% - var(--table-offset));left:0;pointer-events:none;position:absolute;top:var(--table-offset);width:100%;z-index:1}.fr-table__header .fr-search-bar,.fr-table__header .fr-segmented,.fr-table__header .fr-table__detail{margin-bottom:1rem}.fr-table__footer--start{margin-top:1rem}.fr-table__footer--start .fr-table__detail{padding-right:.5rem}.fr-table__footer--middle{align-items:center;display:flex;flex-direction:row;justify-content:center;margin-top:1rem}.fr-table__footer--middle .fr-pagination{margin-top:.75rem}.fr-table__footer--end{flex:1 0 100%;margin-top:1.5rem}.fr-table--sm .fr-table__content td,.fr-table--sm .fr-table__content th{padding:.25rem .75rem}.fr-table--lg .fr-table__content td,.fr-table--lg .fr-table__content th{padding:.75rem 1.5rem}.fr-table.fr-table--no-caption .fr-table__wrapper .fr-table__container{padding-top:0}.fr-table.fr-table--no-caption .fr-table__wrapper caption{clip:rect(0,0,0,0);border:0;display:block;height:1px;height:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fr-table.fr-table--caption-bottom{margin-bottom:0}.fr-table.fr-table--caption-bottom .fr-table__wrapper{margin-bottom:calc(var(--table-offset) + 1.5rem);margin-top:0}.fr-table.fr-table--caption-bottom .fr-table__wrapper:after{bottom:0;height:100%;top:auto}.fr-table.fr-table--caption-bottom .fr-table__wrapper .fr-table__container{padding-top:0}.fr-table.fr-table--caption-bottom .fr-table__wrapper caption{caption-side:bottom;height:min-content;margin-bottom:0;margin-top:1rem}.fr-table.fr-table--caption-bottom[data-fr-js-table=true] caption{bottom:0;left:0;margin-top:1rem;position:absolute;right:0;top:100%}.fr-table.fr-table--bordered .fr-table__content td,.fr-table.fr-table--bordered .fr-table__content th{background-position:0 100%,100% 0;background-repeat:no-repeat,no-repeat;background-size:100% 1px,1px 100%}.fr-table.fr-table--no-scroll .fr-table__wrapper{width:fit-content}.fr-table.fr-table--no-scroll .fr-table__wrapper .fr-table__content table{width:auto}.fr-table.fr-table--no-scroll .fr-table__wrapper .fr-table__content table td,.fr-table.fr-table--no-scroll .fr-table__wrapper .fr-table__content table th{white-space:normal}.fr-table__wrapper:after{background-image:linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey))}.fr-table__content table caption{color:var(--text-title-grey)}.fr-table__content table tbody td{--idle:transparent;--hover:var(--background-default-grey-hover);--active:var(--background-default-grey-active);background-color:var(--background-default-grey);background-image:linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey))}.fr-table:before{content:"";display:block;height:0;width:100%}.fr-table:not(.fr-table--no-scroll)>table{width:100%}.fr-table>table{border-spacing:0;display:block;overflow:auto;width:100%}.fr-table>table td,.fr-table>table th{border:0;display:table-cell;font-size:.875rem;line-height:1.5rem;padding:.75rem;text-align:left;vertical-align:middle}.fr-table>table th{font-weight:700}.fr-table>table thead{--idle:transparent;--hover:var(--background-alt-grey-hover);--active:var(--background-alt-grey-active);background-color:var(--background-alt-grey);background-image:linear-gradient(0deg,var(--border-plain-grey),var(--border-plain-grey));background-position:bottom;background-repeat:no-repeat;background-size:100% 1px;color:var(--text-title-grey)}.fr-table>table thead td,.fr-table>table thead th{font-weight:700;padding-bottom:.875rem}.fr-table[data-fr-js-table=true]>table tbody,.fr-table[data-fr-js-table=true]>table thead{position:relative}.fr-table[data-fr-js-table=true]>table tbody:after,.fr-table[data-fr-js-table=true]>table thead:after{background-repeat:no-repeat,no-repeat,no-repeat;content:"";display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%;z-index:1}.fr-table[data-fr-js-table=true]>table thead:after{background-position:0 0,0 0,100% 100%;background-size:100% 1px,1px 100%,1px 100%}.fr-table[data-fr-js-table=true]>table tbody:after{background-position:0 0,0 100%,100% 0;background-size:1px 100%,100% 1px,1px 100%}.fr-table--no-caption{padding-top:0}.fr-table--no-caption>table caption{clip:rect(0,0,0,0);border:0;display:block;height:1px;height:0;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fr-table--caption-bottom{margin-top:1rem;padding-top:0}.fr-table--caption-bottom>table{margin-bottom:calc(var(--table-offset) + 2.75rem)}.fr-table--caption-bottom>table caption{caption-side:bottom;height:min-content;margin-top:1rem}.fr-table--caption-bottom[data-fr-js-table=true]>table:after{bottom:0;height:100%;top:auto}.fr-table--caption-bottom[data-fr-js-table=true]>table caption{bottom:0;left:0;margin-top:1rem;position:absolute;right:0;top:100%}.fr-table--no-scroll{min-width:auto}.fr-table--no-scroll>table{overflow-x:hidden}.fr-table--no-scroll>table caption{max-width:calc(100vw - 2rem)}.fr-table--layout-fixed>table{display:table;table-layout:fixed}.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-grey),var(--border-default-grey));background-position:bottom;background-repeat:no-repeat;background-size:100% 1px}.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table>table.fr-table__shadow:before{bottom:0;box-shadow:inset 0 0 0 0 #161616,inset 0 0 0 0 #161616;content:"";display:block;left:0;opacity:.32;pointer-events:none;position:absolute;right:0;top:var(--table-offset);transition:box-shadow .3s;z-index:1}.fr-table>table.fr-table__shadow--left:before{box-shadow:inset 2rem 0 1rem -2rem #161616,inset 0 0 0 0 #161616}.fr-table>table.fr-table__shadow--left.fr-table__shadow--right:before{box-shadow:inset 2rem 0 1rem -2rem #161616,inset -2rem 0 1rem -2rem #161616;content:"";display:block}.fr-table>table.fr-table__shadow--right:before{box-shadow:inset 0 0 0 0 #161616,inset -2rem 0 1rem -2rem #161616}.fr-table--caption-bottom>table.fr-table__shadow:before,.fr-table--no-caption>table.fr-table__shadow:before{bottom:0;content:"";display:block;left:0;position:absolute;right:0;top:0}:root[data-fr-theme=dark] .fr-table>table.fr-table__shadow:before{opacity:1}.fr-table>table caption{color:var(--text-title-grey)}.fr-table>table tbody:after,.fr-table>table thead:after{background-image:linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey)),linear-gradient(0deg,var(--border-contrast-grey),var(--border-contrast-grey))}.fr-table>table tbody{--idle:transparent;--hover:var(--background-default-grey-hover);--active:var(--background-default-grey-active);background-color:var(--background-default-grey)}.fr-table>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-alt-grey-hover);--active:var(--background-alt-grey-active);background-color:var(--background-alt-grey)}.fr-table--green-tilleul-verveine>table:after{background-image:linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine)),linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine)),linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine)),linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine))}.fr-table--green-tilleul-verveine>table thead{--idle:transparent;--hover:var(--background-contrast-green-tilleul-verveine-hover);--active:var(--background-contrast-green-tilleul-verveine-active);background-color:var(--background-contrast-green-tilleul-verveine);background-image:linear-gradient(0deg,var(--border-plain-green-tilleul-verveine),var(--border-plain-green-tilleul-verveine))}.fr-table--green-tilleul-verveine>table tbody{--idle:transparent;--hover:var(--background-alt-green-tilleul-verveine-hover);--active:var(--background-alt-green-tilleul-verveine-active);background-color:var(--background-alt-green-tilleul-verveine)}.fr-table--green-tilleul-verveine>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-green-tilleul-verveine-hover);--active:var(--background-contrast-green-tilleul-verveine-active);background-color:var(--background-contrast-green-tilleul-verveine)}.fr-table--green-tilleul-verveine.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-green-tilleul-verveine),var(--border-default-green-tilleul-verveine))}.fr-table--green-tilleul-verveine.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--green-bourgeon>table:after{background-image:linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon)),linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon)),linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon)),linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon))}.fr-table--green-bourgeon>table thead{--idle:transparent;--hover:var(--background-contrast-green-bourgeon-hover);--active:var(--background-contrast-green-bourgeon-active);background-color:var(--background-contrast-green-bourgeon);background-image:linear-gradient(0deg,var(--border-plain-green-bourgeon),var(--border-plain-green-bourgeon))}.fr-table--green-bourgeon>table tbody{--idle:transparent;--hover:var(--background-alt-green-bourgeon-hover);--active:var(--background-alt-green-bourgeon-active);background-color:var(--background-alt-green-bourgeon)}.fr-table--green-bourgeon>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-green-bourgeon-hover);--active:var(--background-contrast-green-bourgeon-active);background-color:var(--background-contrast-green-bourgeon)}.fr-table--green-bourgeon.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-green-bourgeon),var(--border-default-green-bourgeon))}.fr-table--green-bourgeon.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--green-emeraude>table:after{background-image:linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude)),linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude)),linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude)),linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude))}.fr-table--green-emeraude>table thead{--idle:transparent;--hover:var(--background-contrast-green-emeraude-hover);--active:var(--background-contrast-green-emeraude-active);background-color:var(--background-contrast-green-emeraude);background-image:linear-gradient(0deg,var(--border-plain-green-emeraude),var(--border-plain-green-emeraude))}.fr-table--green-emeraude>table tbody{--idle:transparent;--hover:var(--background-alt-green-emeraude-hover);--active:var(--background-alt-green-emeraude-active);background-color:var(--background-alt-green-emeraude)}.fr-table--green-emeraude>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-green-emeraude-hover);--active:var(--background-contrast-green-emeraude-active);background-color:var(--background-contrast-green-emeraude)}.fr-table--green-emeraude.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-green-emeraude),var(--border-default-green-emeraude))}.fr-table--green-emeraude.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--green-menthe>table:after{background-image:linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe)),linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe)),linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe)),linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe))}.fr-table--green-menthe>table thead{--idle:transparent;--hover:var(--background-contrast-green-menthe-hover);--active:var(--background-contrast-green-menthe-active);background-color:var(--background-contrast-green-menthe);background-image:linear-gradient(0deg,var(--border-plain-green-menthe),var(--border-plain-green-menthe))}.fr-table--green-menthe>table tbody{--idle:transparent;--hover:var(--background-alt-green-menthe-hover);--active:var(--background-alt-green-menthe-active);background-color:var(--background-alt-green-menthe)}.fr-table--green-menthe>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-green-menthe-hover);--active:var(--background-contrast-green-menthe-active);background-color:var(--background-contrast-green-menthe)}.fr-table--green-menthe.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-green-menthe),var(--border-default-green-menthe))}.fr-table--green-menthe.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--green-archipel>table:after{background-image:linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel)),linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel)),linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel)),linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel))}.fr-table--green-archipel>table thead{--idle:transparent;--hover:var(--background-contrast-green-archipel-hover);--active:var(--background-contrast-green-archipel-active);background-color:var(--background-contrast-green-archipel);background-image:linear-gradient(0deg,var(--border-plain-green-archipel),var(--border-plain-green-archipel))}.fr-table--green-archipel>table tbody{--idle:transparent;--hover:var(--background-alt-green-archipel-hover);--active:var(--background-alt-green-archipel-active);background-color:var(--background-alt-green-archipel)}.fr-table--green-archipel>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-green-archipel-hover);--active:var(--background-contrast-green-archipel-active);background-color:var(--background-contrast-green-archipel)}.fr-table--green-archipel.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-green-archipel),var(--border-default-green-archipel))}.fr-table--green-archipel.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--blue-ecume>table:after{background-image:linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume)),linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume)),linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume)),linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume))}.fr-table--blue-ecume>table thead{--idle:transparent;--hover:var(--background-contrast-blue-ecume-hover);--active:var(--background-contrast-blue-ecume-active);background-color:var(--background-contrast-blue-ecume);background-image:linear-gradient(0deg,var(--border-plain-blue-ecume),var(--border-plain-blue-ecume))}.fr-table--blue-ecume>table tbody{--idle:transparent;--hover:var(--background-alt-blue-ecume-hover);--active:var(--background-alt-blue-ecume-active);background-color:var(--background-alt-blue-ecume)}.fr-table--blue-ecume>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-blue-ecume-hover);--active:var(--background-contrast-blue-ecume-active);background-color:var(--background-contrast-blue-ecume)}.fr-table--blue-ecume.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-blue-ecume),var(--border-default-blue-ecume))}.fr-table--blue-ecume.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--blue-cumulus>table:after{background-image:linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus)),linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus)),linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus)),linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus))}.fr-table--blue-cumulus>table thead{--idle:transparent;--hover:var(--background-contrast-blue-cumulus-hover);--active:var(--background-contrast-blue-cumulus-active);background-color:var(--background-contrast-blue-cumulus);background-image:linear-gradient(0deg,var(--border-plain-blue-cumulus),var(--border-plain-blue-cumulus))}.fr-table--blue-cumulus>table tbody{--idle:transparent;--hover:var(--background-alt-blue-cumulus-hover);--active:var(--background-alt-blue-cumulus-active);background-color:var(--background-alt-blue-cumulus)}.fr-table--blue-cumulus>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-blue-cumulus-hover);--active:var(--background-contrast-blue-cumulus-active);background-color:var(--background-contrast-blue-cumulus)}.fr-table--blue-cumulus.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-blue-cumulus),var(--border-default-blue-cumulus))}.fr-table--blue-cumulus.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--purple-glycine>table:after{background-image:linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine)),linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine)),linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine)),linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine))}.fr-table--purple-glycine>table thead{--idle:transparent;--hover:var(--background-contrast-purple-glycine-hover);--active:var(--background-contrast-purple-glycine-active);background-color:var(--background-contrast-purple-glycine);background-image:linear-gradient(0deg,var(--border-plain-purple-glycine),var(--border-plain-purple-glycine))}.fr-table--purple-glycine>table tbody{--idle:transparent;--hover:var(--background-alt-purple-glycine-hover);--active:var(--background-alt-purple-glycine-active);background-color:var(--background-alt-purple-glycine)}.fr-table--purple-glycine>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-purple-glycine-hover);--active:var(--background-contrast-purple-glycine-active);background-color:var(--background-contrast-purple-glycine)}.fr-table--purple-glycine.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-purple-glycine),var(--border-default-purple-glycine))}.fr-table--purple-glycine.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--pink-macaron>table:after{background-image:linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron)),linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron)),linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron)),linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron))}.fr-table--pink-macaron>table thead{--idle:transparent;--hover:var(--background-contrast-pink-macaron-hover);--active:var(--background-contrast-pink-macaron-active);background-color:var(--background-contrast-pink-macaron);background-image:linear-gradient(0deg,var(--border-plain-pink-macaron),var(--border-plain-pink-macaron))}.fr-table--pink-macaron>table tbody{--idle:transparent;--hover:var(--background-alt-pink-macaron-hover);--active:var(--background-alt-pink-macaron-active);background-color:var(--background-alt-pink-macaron)}.fr-table--pink-macaron>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-pink-macaron-hover);--active:var(--background-contrast-pink-macaron-active);background-color:var(--background-contrast-pink-macaron)}.fr-table--pink-macaron.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-pink-macaron),var(--border-default-pink-macaron))}.fr-table--pink-macaron.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--pink-tuile>table:after{background-image:linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile)),linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile)),linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile)),linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile))}.fr-table--pink-tuile>table thead{--idle:transparent;--hover:var(--background-contrast-pink-tuile-hover);--active:var(--background-contrast-pink-tuile-active);background-color:var(--background-contrast-pink-tuile);background-image:linear-gradient(0deg,var(--border-plain-pink-tuile),var(--border-plain-pink-tuile))}.fr-table--pink-tuile>table tbody{--idle:transparent;--hover:var(--background-alt-pink-tuile-hover);--active:var(--background-alt-pink-tuile-active);background-color:var(--background-alt-pink-tuile)}.fr-table--pink-tuile>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-pink-tuile-hover);--active:var(--background-contrast-pink-tuile-active);background-color:var(--background-contrast-pink-tuile)}.fr-table--pink-tuile.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-pink-tuile),var(--border-default-pink-tuile))}.fr-table--pink-tuile.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--yellow-tournesol>table:after{background-image:linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol)),linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol)),linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol)),linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol))}.fr-table--yellow-tournesol>table thead{--idle:transparent;--hover:var(--background-contrast-yellow-tournesol-hover);--active:var(--background-contrast-yellow-tournesol-active);background-color:var(--background-contrast-yellow-tournesol);background-image:linear-gradient(0deg,var(--border-plain-yellow-tournesol),var(--border-plain-yellow-tournesol))}.fr-table--yellow-tournesol>table tbody{--idle:transparent;--hover:var(--background-alt-yellow-tournesol-hover);--active:var(--background-alt-yellow-tournesol-active);background-color:var(--background-alt-yellow-tournesol)}.fr-table--yellow-tournesol>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-yellow-tournesol-hover);--active:var(--background-contrast-yellow-tournesol-active);background-color:var(--background-contrast-yellow-tournesol)}.fr-table--yellow-tournesol.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-yellow-tournesol),var(--border-default-yellow-tournesol))}.fr-table--yellow-tournesol.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--yellow-moutarde>table:after{background-image:linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde)),linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde)),linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde)),linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde))}.fr-table--yellow-moutarde>table thead{--idle:transparent;--hover:var(--background-contrast-yellow-moutarde-hover);--active:var(--background-contrast-yellow-moutarde-active);background-color:var(--background-contrast-yellow-moutarde);background-image:linear-gradient(0deg,var(--border-plain-yellow-moutarde),var(--border-plain-yellow-moutarde))}.fr-table--yellow-moutarde>table tbody{--idle:transparent;--hover:var(--background-alt-yellow-moutarde-hover);--active:var(--background-alt-yellow-moutarde-active);background-color:var(--background-alt-yellow-moutarde)}.fr-table--yellow-moutarde>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-yellow-moutarde-hover);--active:var(--background-contrast-yellow-moutarde-active);background-color:var(--background-contrast-yellow-moutarde)}.fr-table--yellow-moutarde.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-yellow-moutarde),var(--border-default-yellow-moutarde))}.fr-table--yellow-moutarde.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--orange-terre-battue>table:after{background-image:linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue)),linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue)),linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue)),linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue))}.fr-table--orange-terre-battue>table thead{--idle:transparent;--hover:var(--background-contrast-orange-terre-battue-hover);--active:var(--background-contrast-orange-terre-battue-active);background-color:var(--background-contrast-orange-terre-battue);background-image:linear-gradient(0deg,var(--border-plain-orange-terre-battue),var(--border-plain-orange-terre-battue))}.fr-table--orange-terre-battue>table tbody{--idle:transparent;--hover:var(--background-alt-orange-terre-battue-hover);--active:var(--background-alt-orange-terre-battue-active);background-color:var(--background-alt-orange-terre-battue)}.fr-table--orange-terre-battue>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-orange-terre-battue-hover);--active:var(--background-contrast-orange-terre-battue-active);background-color:var(--background-contrast-orange-terre-battue)}.fr-table--orange-terre-battue.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-orange-terre-battue),var(--border-default-orange-terre-battue))}.fr-table--orange-terre-battue.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--brown-cafe-creme>table:after{background-image:linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme)),linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme)),linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme)),linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme))}.fr-table--brown-cafe-creme>table thead{--idle:transparent;--hover:var(--background-contrast-brown-cafe-creme-hover);--active:var(--background-contrast-brown-cafe-creme-active);background-color:var(--background-contrast-brown-cafe-creme);background-image:linear-gradient(0deg,var(--border-plain-brown-cafe-creme),var(--border-plain-brown-cafe-creme))}.fr-table--brown-cafe-creme>table tbody{--idle:transparent;--hover:var(--background-alt-brown-cafe-creme-hover);--active:var(--background-alt-brown-cafe-creme-active);background-color:var(--background-alt-brown-cafe-creme)}.fr-table--brown-cafe-creme>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-brown-cafe-creme-hover);--active:var(--background-contrast-brown-cafe-creme-active);background-color:var(--background-contrast-brown-cafe-creme)}.fr-table--brown-cafe-creme.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-brown-cafe-creme),var(--border-default-brown-cafe-creme))}.fr-table--brown-cafe-creme.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--brown-caramel>table:after{background-image:linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel)),linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel)),linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel)),linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel))}.fr-table--brown-caramel>table thead{--idle:transparent;--hover:var(--background-contrast-brown-caramel-hover);--active:var(--background-contrast-brown-caramel-active);background-color:var(--background-contrast-brown-caramel);background-image:linear-gradient(0deg,var(--border-plain-brown-caramel),var(--border-plain-brown-caramel))}.fr-table--brown-caramel>table tbody{--idle:transparent;--hover:var(--background-alt-brown-caramel-hover);--active:var(--background-alt-brown-caramel-active);background-color:var(--background-alt-brown-caramel)}.fr-table--brown-caramel>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-brown-caramel-hover);--active:var(--background-contrast-brown-caramel-active);background-color:var(--background-contrast-brown-caramel)}.fr-table--brown-caramel.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-brown-caramel),var(--border-default-brown-caramel))}.fr-table--brown-caramel.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--brown-opera>table:after{background-image:linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera)),linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera)),linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera)),linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera))}.fr-table--brown-opera>table thead{--idle:transparent;--hover:var(--background-contrast-brown-opera-hover);--active:var(--background-contrast-brown-opera-active);background-color:var(--background-contrast-brown-opera);background-image:linear-gradient(0deg,var(--border-plain-brown-opera),var(--border-plain-brown-opera))}.fr-table--brown-opera>table tbody{--idle:transparent;--hover:var(--background-alt-brown-opera-hover);--active:var(--background-alt-brown-opera-active);background-color:var(--background-alt-brown-opera)}.fr-table--brown-opera>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-brown-opera-hover);--active:var(--background-contrast-brown-opera-active);background-color:var(--background-contrast-brown-opera)}.fr-table--brown-opera.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-brown-opera),var(--border-default-brown-opera))}.fr-table--brown-opera.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--beige-gris-galet>table:after{background-image:linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet)),linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet)),linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet)),linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet))}.fr-table--beige-gris-galet>table thead{--idle:transparent;--hover:var(--background-contrast-beige-gris-galet-hover);--active:var(--background-contrast-beige-gris-galet-active);background-color:var(--background-contrast-beige-gris-galet);background-image:linear-gradient(0deg,var(--border-plain-beige-gris-galet),var(--border-plain-beige-gris-galet))}.fr-table--beige-gris-galet>table tbody{--idle:transparent;--hover:var(--background-alt-beige-gris-galet-hover);--active:var(--background-alt-beige-gris-galet-active);background-color:var(--background-alt-beige-gris-galet)}.fr-table--beige-gris-galet>table tbody tr:nth-child(2n){--idle:transparent;--hover:var(--background-contrast-beige-gris-galet-hover);--active:var(--background-contrast-beige-gris-galet-active);background-color:var(--background-contrast-beige-gris-galet)}.fr-table--beige-gris-galet.fr-table--bordered>table tbody tr{background-image:linear-gradient(0deg,var(--border-default-beige-gris-galet),var(--border-default-beige-gris-galet))}.fr-table--beige-gris-galet.fr-table--bordered>table tbody tr:last-child{background-image:none}.fr-table--bordered>table tbody tr:nth-child(2n){--hover:inherit;--active:inherit;background-color:transparent}@media (min-width:36em){
+  /*! media sm */}@media (min-width:48em){
+  /*! media md */.fr-table__content .fr-cell--fixed\@md,.fr-table__content .fr-cell--fixed\@sm{left:0;position:sticky;z-index:1}.fr-table caption{font-size:1.5rem;line-height:2rem}.fr-table__header{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.fr-table__header .fr-search-bar{order:1;padding-right:.5rem}.fr-table__header .fr-table__detail{flex:1;order:1;padding-right:.5rem}.fr-table__header .fr-btns-group{order:2;padding-left:.5rem;padding-right:.5rem}.fr-table__header .fr-segmented{flex:0;margin-left:auto;order:3;padding-left:.5rem}.fr-table__footer{align-items:center;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between}.fr-table__footer .fr-select-group .fr-select{width:16rem}.fr-table__footer .fr-btns-group{padding-left:.5rem}.fr-table__footer--start{align-items:center;display:flex;flex-direction:row;justify-content:flex-start}.fr-table__footer--start .fr-select-group{padding-left:.5rem;padding-right:.5rem}.fr-table__footer--start .fr-select-group .fr-select{margin-top:0}.fr-table>table td,.fr-table>table th{padding:1rem}.fr-table>table thead td,.fr-table>table thead th{padding-bottom:1.125rem}}@media (min-width:62em){
+  /*! media lg */.fr-table__content .fr-cell--fixed\@lg{left:0;position:sticky;z-index:1}.fr-table__footer--middle{display:block;padding-left:.5rem;padding-right:.5rem}.fr-table__footer--middle .fr-pagination__list{flex-wrap:nowrap}.fr-table__footer--end{flex:1 0 0}}@media (min-width:78em){
+  /*! media xl */}@media (-ms-high-contrast:active),(forced-colors:active){.fr-table__content .fr-cell--fixed .fr-checkbox-group .fr-label,.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group .fr-label,.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group .fr-label,.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group .fr-label{opacity:0}.fr-table__content .fr-cell--fixed,.fr-table__content .fr-cell--fixed\@lg,.fr-table__content .fr-cell--fixed\@md,.fr-table__content .fr-cell--fixed\@sm{outline:1px solid}.fr-table__content table tbody tr:after{border:2px solid highlight}.fr-table__content td,.fr-table__content th{border:1px solid}}/*!
+ * DSFR v1.14.4 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
+ *//* ¯¯¯¯¯¯¯¯¯ *\
+  CHECKBOX
+\* ˍˍˍˍˍˍˍˍˍ */
+.fr-checkbox-group {
+  position: relative;
+}
+
+.fr-checkbox-group input[type=checkbox] {
+  position: absolute;
+  margin: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  opacity: 0;
+}
+
+.fr-checkbox-group input[type=checkbox] + label {
+  --data-uri-svg: none;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  margin-left: 2rem;
+  /**
+  * On ajoute l'icône check-line en taille sm via un pseudo element before
+  */
+}
+
+.fr-checkbox-group input[type=checkbox] + label .fr-hint-text {
+  margin: 0;
+  width: 100%;
+}
+
+.fr-checkbox-group input[type=checkbox] + label::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: -2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 0.5rem;
+  border-radius: 0.25rem;
+  background-size: 0.25rem 0.25rem, calc(100% - 0.25rem) 1px, 0.25rem 0.25rem, 1px calc(100% - 0.5rem), 0.25rem 0.25rem, calc(100% - 0.5rem) 1px, 0.25rem 0.25rem, 1px calc(100% - 0.5rem), 1rem;
+  background-position: 0 0, 0.25rem 0, 100% 0, 0 0.25rem, 100% 100%, calc(100% - 0.25rem) 100%, 0 100%, 100% 0.25rem, center;
+  background-repeat: no-repeat;
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-action-high-blue-france) 4px, var(--border-action-high-blue-france) 5px, transparent 6px), linear-gradient(var(--border-action-high-blue-france), var(--border-action-high-blue-france)), var(--data-uri-svg);
+}
+
+.fr-checkbox-group--sm input[type=checkbox] {
+  top: 0.25rem;
+  width: 1rem;
+  height: 1rem;
+}
+
+.fr-checkbox-group--sm input[type=checkbox] + label {
+  margin-left: 1.5rem;
+}
+
+.fr-checkbox-group--sm input[type=checkbox] + label::before {
+  width: 1rem;
+  height: 1rem;
+  margin-top: 0.25rem;
+  left: -1.5rem;
+}
+
+.fr-checkbox-group--error::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -0.75rem;
+  width: 2px;
+  height: 100%;
+  background-color: var(--border-plain-error);
+
+  --idle: transparent;
+  --hover: var(--border-plain-error-hover);
+  --active: var(--border-plain-error-active);
+}
+
+.fr-checkbox-group--valid::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -0.75rem;
+  width: 2px;
+  height: 100%;
+  background-color: var(--border-plain-success);
+
+  --idle: transparent;
+  --hover: var(--border-plain-success-hover);
+  --active: var(--border-plain-success-active);
+}
+
+.fr-checkbox-group .fr-message:first-child {
+  margin-top: 1rem;
+}
+
+.fr-checkbox-group input[type=checkbox]:checked + label::before {
+  background-color: var(--background-active-blue-france);
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), var(--data-uri-svg);
+
+  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f5f5fe' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
+}
+
+:root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:checked + label::before {
+  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23000091' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
+}
+
+.fr-checkbox-group input[type=checkbox]:disabled + label::before {
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--background-disabled-grey) 4px, var(--background-disabled-grey) 5px, transparent 6px), linear-gradient(var(--background-disabled-grey), var(--background-disabled-grey)), var(--data-uri-svg);
+}
+
+.fr-checkbox-group input[type=checkbox]:disabled:checked + label::before {
+  background-color: var(--background-disabled-grey);
+
+  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23929292' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
+}
+
+:root[data-fr-theme=dark] .fr-checkbox-group input[type=checkbox]:disabled:checked + label::before {
+  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23666' d='M10 15.17l9.2-9.2 1.4 1.42L10 18l-6.36-6.36 1.4-1.42z'/></svg>");
+}
+
+.fr-checkbox-group--error input[type=checkbox] + label,
+.fr-checkbox-group--error input[type=checkbox]:checked + label {
+  color: var(--text-default-error);
+}
+
+.fr-checkbox-group--error input[type=checkbox] + label::before,
+.fr-checkbox-group--error input[type=checkbox]:checked + label::before {
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg);
+}
+
+.fr-checkbox-group--valid input[type=checkbox] + label,
+.fr-checkbox-group--valid input[type=checkbox]:checked + label {
+  color: var(--text-default-success);
+}
+
+.fr-checkbox-group--valid input[type=checkbox] + label::before,
+.fr-checkbox-group--valid input[type=checkbox]:checked + label::before {
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg);
+}
+
+.fr-fieldset--error .fr-checkbox-group input[type=checkbox] + label::before {
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-error) 4px, var(--border-plain-error) 5px, transparent 6px), linear-gradient(var(--border-plain-error), var(--border-plain-error)), var(--data-uri-svg);
+}
+
+.fr-fieldset--valid .fr-checkbox-group input[type=checkbox] + label::before {
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-plain-success) 4px, var(--border-plain-success) 5px, transparent 6px), linear-gradient(var(--border-plain-success), var(--border-plain-success)), var(--data-uri-svg);
+}
+
+.fr-fieldset .fr-fieldset__content .fr-checkbox-group--sm label::before {
+  margin-top: 0.25rem;
+}
+
+.fr-fieldset .fr-fieldset__content .fr-checkbox-group input[type=checkbox] {
+  margin-top: 0.75rem;
+}
+@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-checkbox-group input[type=checkbox] {
+    opacity: 1;
+  }
+
+  .fr-checkbox-group input[type=checkbox]:disabled + label {
+    color: graytext;
+  }
+
+  .fr-checkbox-group input[type=checkbox] + label::before {
+    display: none;
+  }
+}
+: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-table {
+  box-sizing: border-box;
+}
+
+.fr-checkbox-group {
+  --checkbox-gap-sm: -1.25rem;
+}
+.fr-checkbox-group input[type=checkbox]:checked + label::before, .fr-checkbox-group input[type=checkbox]:disabled + label::before, .fr-checkbox-group input[type=checkbox]:indeterminate + label::before {
+  --data-uri-svg: none;
+}
+.fr-checkbox-group input[type=checkbox]:checked + label::after, .fr-checkbox-group input[type=checkbox]:disabled + label::after, .fr-checkbox-group input[type=checkbox]:indeterminate + label::after {
+  position: absolute;
+  z-index: 1;
+}
+.fr-checkbox-group input[type=checkbox]:checked:not(:indeterminate) + label::after {
+  content: "";
+  display: inline-block;
+  width: var(--checkmark-size, 24px);
+  height: var(--checkmark-size, 24px);
+  background-color: var(--icon-check-color, var(--text-inverted-blue-france));
+  clip-path: polygon(41.7% 63.2%, 80% 24.9%, 85.8% 30.8%, 41.7% 75%, 15.2% 48.5%, 21% 42.6%);
+  left: var(--checkbox-gap, -2rem);
+  top: calc(var(--checkmark-size, 24px) * var(--checkmark-scale, 0.7) / 2);
+  transform: translateY(-50%);
+  scale: var(--checkmark-scale, 0.7);
+}
+.fr-checkbox-group input[type=checkbox]:disabled + label::after {
+  --icon-check-color: currentColor;
+}
+.fr-checkbox-group input[type=checkbox]:indeterminate + label::before {
+  background-color: var(--background-active-blue-france);
+}
+.fr-checkbox-group input[type=checkbox]:indeterminate + label::after {
+  content: "";
+  display: inline-block;
+  background-color: var(--text-inverted-blue-france);
+  width: calc(var(--checkmark-size, 24px) * 0.38);
+  height: var(--dash-height, 2px);
+  top: calc((var(--checkmark-size, 24px) - var(--dash-height, 2px)) / 2);
+  left: calc(var(--checkbox-gap, -2rem) + var(--checkmark-size, 24px) / 2);
+  transform: translateX(-50%);
+}
+.fr-checkbox-group .fr-label::before {
+  --data-uri-svg: none;
+}
+.fr-checkbox-group--sm {
+  --checkbox-gap: var(--checkbox-gap-sm, -1.5rem);
+  --checkmark-size: 1rem;
+  --checkmark-scale: 1;
+}
+.fr-checkbox-group--sm label::after {
+  margin-top: 0.25rem;
+}
+
+.fr-sr-only {
+  clip-path: inset(100%);
+  clip: rect(1px, 1px, 1px, 1px);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  padding: 0;
+  width: 1px;
+}
+
+.fr-checkbox-group input[type=checkbox]:indeterminate + label::before {
+  background-color: var(--background-active-blue-france);
+  background-image: radial-gradient(at 5px 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) 4px, transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at calc(100% - 5px) calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), radial-gradient(at 5px calc(100% - 4px), transparent 4px, var(--border-active-blue-france) 4px, var(--border-active-blue-france) 5px, transparent 6px), linear-gradient(var(--border-active-blue-france), var(--border-active-blue-france)), var(--data-uri-svg);
+  --data-uri-svg: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23f5f5fe' d='M5 11h14v2H5z'/></svg>");
+}</style>