@codegouvfr/react-dsfr/dsfr/component/table/table.main.css

French State Design System React integration library

/*!
 * DSFR v1.13.2 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
@charset "UTF-8";

/* ¯¯¯¯¯¯¯¯¯ *\
  TABLE
\* ˍˍˍˍˍˍˍˍˍ */
.fr-table {
  --table-offset: calc(0px);
  --row-height: 0.125rem;
  --text-spacing: 0;
  --title-spacing: 0;
  position: relative;
  margin-bottom: 2.5rem;
  margin-top: 1rem;
  /*
  * Cache la caption
  */

  /*
  * Fixe le caption en bas du tableau
  */

  /* Style bordered, ajoute des bordures verticales entre chaque cellule */

  /* Désactive le scroll horizontal */
  padding-top: var(--table-offset);
  /*
  * Cache la caption
  */

  /*
  * Fixe le caption en bas du tableau
  */

  /*
  * pas de scroll ni de shadow
  */

  /*
  * Fixe la taille des colonnes du tableau
  */

  /* Style bordered, ajoute des bordures entre chaque ligne */
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.fr-table__container {
  overflow: auto;
  padding-top: var(--table-offset);
}

.fr-table__content .fr-cell--fixed .fr-checkbox-group + *,
.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group + *,
.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group + *,
.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group + * {
  margin-left: 0.5rem;
}

.fr-table__content .fr-cell--fixed .fr-checkbox-group .fr-label,
.fr-table__content .fr-cell--fixed\@sm .fr-checkbox-group .fr-label,
.fr-table__content .fr-cell--fixed\@md .fr-checkbox-group .fr-label,
.fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group .fr-label {
  color: transparent;
  width: 0;
  pointer-events: none;
}

.fr-table__content .fr-cell--fixed .fr-checkbox-group .fr-label::before,
.fr-table__content .fr-cell--fixed\@sm .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\@lg .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\@sm .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\@lg .fr-checkbox-group input[type=checkbox] {
  left: 0.25rem;
}

.fr-table__content .fr-cell--fixed {
  position: sticky;
  left: 0;
  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 {
  display: flex;
  align-items: center;
  margin: 0 -0.5rem;
}

.fr-table__content .fr-cell--inline > * {
  margin: 0 0.5rem;
}

.fr-table__content .fr-cell--multiline,
.fr-table__content .fr-cell--multiline * {
  white-space: normal;
}

.fr-table__content .fr-cell--sort {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fr-table__content .fr-cell--sort .fr-btn--sort {
  margin-left: 1rem;
}

.fr-table__content .fr-col--xs {
  white-space: normal;
  min-width: 4rem;
}

.fr-table__content .fr-col--sm {
  white-space: normal;
  min-width: 5rem;
}

.fr-table__content .fr-col--md {
  white-space: normal;
  min-width: 12.5rem;
}

.fr-table__content .fr-col--lg {
  white-space: normal;
  min-width: 25rem;
}

.fr-table__content table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

.fr-table__content table thead {
  position: relative;
}

.fr-table__content table thead::before {
  content: "";
  display: block;
  position: absolute;
  top: inherit;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  z-index: 1;
}

.fr-table__content table thead th {
  font-weight: 700;
  background-color: var(--background-alt-grey);

  --idle: transparent;
  --hover: var(--background-alt-grey-hover);
  --active: var(--background-alt-grey-active);
  background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey)), linear-gradient(0deg, var(--border-contrast-grey), var(--border-contrast-grey));
}

.fr-table__content table thead th[role=columnheader] {
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 100% 0;
  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 {
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 100% 0;
  background-color: var(--background-alt-grey);

  --idle: transparent;
  --hover: var(--background-alt-grey-hover);
  --active: var(--background-alt-grey-active);
  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 {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--row-height);
  z-index: 2;
  pointer-events: none;
  transform: translateY(-0.125rem);
  background-size: 0.125rem 100%, 0.125rem 100%, 100% 0.125rem, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 100% 0, 0 0, 0 100%;
  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));
}

.fr-table__content table tbody tr[aria-selected=true]::after,
.fr-table__content table tbody tr[aria-selected=true] + tr::after {
  content: "";
}

.fr-table__content table tbody tr[aria-selected=true] + tr[aria-selected=true]::after {
  background-size: 0.125rem 100%, 0.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% 0.125rem, 0 0;
}

.fr-table__content table tbody tr:last-of-type[aria-selected=true]::after {
  background-size: 0.125rem 100%, 0.125rem 100%, 100% 0.125rem, 100% 0.125rem;
}

.fr-table__content table tbody tr[aria-selected=true] + tr:last-of-type[aria-selected=true]::after {
  background-size: 0.125rem 100%, 0.125rem 100%, 0 0, 100% 0.125rem;
}

.fr-table__content th,
.fr-table__content td {
  display: table-cell;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

.fr-table__content th .fr-checkbox-group,
.fr-table__content td .fr-checkbox-group {
  display: inline-block;
}

.fr-table__content th .fr-checkbox-group .fr-label,
.fr-table__content td .fr-checkbox-group .fr-label {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.fr-table caption {
  position: initial;
  font-size: 1.375rem;
  line-height: 1.75rem;
  margin: var(--title-spacing);
  font-weight: 700;
  margin-bottom: 1rem;
  text-align: left;
}

.fr-table caption .fr-table__caption__desc {
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

.fr-table__detail {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--text-mention-grey);
}

.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 {
  content: "";
  display: block;
  position: absolute;
  top: var(--table-offset);
  left: 0;
  width: 100%;
  height: calc(100% - var(--table-offset));
  z-index: 1;
  background-position: 0 0, 0 0, 100% 100%, 0 100%;
  background-size: 100% 1px, 1px 100%, 1px 100%, 100% 1px;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  pointer-events: none;
}

.fr-table__header .fr-table__detail {
  margin-bottom: 1rem;
}

.fr-table__header .fr-segmented {
  margin-bottom: 1rem;
}

.fr-table__footer--start {
  margin-top: 1rem;
}

.fr-table__footer--start .fr-table__detail {
  padding-right: 0.5rem;
}

.fr-table__footer--middle {
  margin-top: 1rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.fr-table__footer--middle .fr-pagination {
  margin-top: 0.75rem;
}

.fr-table__footer--end {
  margin-top: 1.5rem;
  flex: 1 0 100%;
}

.fr-table--sm .fr-table__content th,
.fr-table--sm .fr-table__content td {
  padding: 0.25rem 0.75rem;
}

.fr-table--lg .fr-table__content th,
.fr-table--lg .fr-table__content td {
  padding: 0.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 {
  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;
  height: 0;
}

.fr-table.fr-table--caption-bottom {
  margin-bottom: 0;
}

.fr-table.fr-table--caption-bottom .fr-table__wrapper {
  margin-top: 0;
  margin-bottom: calc(var(--table-offset) + 1.5rem);
}

.fr-table.fr-table--caption-bottom .fr-table__wrapper::after {
  bottom: 0;
  top: auto;
  height: 100%;
}

.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 {
  margin-bottom: 0;
  margin-top: 1rem;
  height: min-content;
  caption-side: bottom;
}

.fr-table.fr-table--caption-bottom[data-fr-js-table=true] caption {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 1rem;
}

.fr-table.fr-table--bordered .fr-table__content th,
.fr-table.fr-table--bordered .fr-table__content td {
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 100% 0;
}

.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 th,
.fr-table.fr-table--no-scroll .fr-table__wrapper .fr-table__content table td {
  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 {
  background-image: linear-gradient(0deg, var(--border-contrast-grey), var(--border-contrast-grey)), linear-gradient(0deg, var(--border-contrast-grey), var(--border-contrast-grey));
  background-color: var(--background-default-grey);

  --idle: transparent;
  --hover: var(--background-default-grey-hover);
  --active: var(--background-default-grey-active);
}

.fr-table::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
}

.fr-table:not(.fr-table--no-scroll) > table {
  width: 100%;
}

.fr-table > table {
  width: 100%;
  display: block;
  overflow: auto;
  border-spacing: 0;
}

.fr-table > table td,
.fr-table > table th {
  text-align: left;
  vertical-align: middle;
  display: table-cell;
  border: 0;
  padding: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5rem;
}

.fr-table > table th {
  font-weight: 700;
}

.fr-table > table thead {
  background-size: 100% 1px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: linear-gradient(0deg, var(--border-plain-grey), var(--border-plain-grey));
  background-color: var(--background-alt-grey);

  --idle: transparent;
  --hover: var(--background-alt-grey-hover);
  --active: var(--background-alt-grey-active);
  color: var(--text-title-grey);
}

.fr-table > table thead td,
.fr-table > table thead th {
  font-weight: 700;
  padding-bottom: 0.875rem;
}

.fr-table[data-fr-js-table=true] > table thead,
.fr-table[data-fr-js-table=true] > table tbody {
  position: relative;
}

.fr-table[data-fr-js-table=true] > table thead::after,
.fr-table[data-fr-js-table=true] > table tbody::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: no-repeat, no-repeat, no-repeat;
  pointer-events: none;
}

.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 {
  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;
  height: 0;
}

.fr-table--caption-bottom {
  padding-top: 0;
  margin-top: 1rem;
}

.fr-table--caption-bottom > table {
  margin-bottom: calc(var(--table-offset) + 2.75rem);
}

.fr-table--caption-bottom > table caption {
  margin-top: 1rem;
  height: min-content;
  caption-side: bottom;
}

.fr-table--caption-bottom[data-fr-js-table=true] > table::after {
  bottom: 0;
  top: auto;
  height: 100%;
}

.fr-table--caption-bottom[data-fr-js-table=true] > table caption {
  position: absolute;
  top: 100%;
  right: 0;
  bottom: 0;
  left: 0;
  margin-top: 1rem;
}

.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-size: 100% 1px;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: linear-gradient(0deg, var(--border-default-grey), var(--border-default-grey));

  /* Style bordered, enleve le style even/odd  */
}

.fr-table--bordered > table tbody tr:last-child {
  background-image: none;
}

/*
* Ombres ajoutées en Js si le contenu est plus grand que le conteneur
*/
.fr-table > table.fr-table__shadow {
  /**
  * Modifier ombre à gauche
  **/

  /**
  * Modifier ombre à droite
  **/
}

.fr-table > table.fr-table__shadow::before {
  content: "";
  display: block;
  position: absolute;
  top: var(--table-offset);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 0 #161616, inset 0 0 0 0 #161616;
  opacity: 0.32;
  pointer-events: none;
  transition: box-shadow 0.3s;
}

.fr-table > table.fr-table__shadow--left {
  /**
  * Modifier combinaison ombre à gauche et ombre à droite
  **/
}

.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 {
  content: "";
  display: block;
  box-shadow: inset 2rem 0 1rem -2rem #161616, inset -2rem 0 1rem -2rem #161616;
}

.fr-table > table.fr-table__shadow--right::before {
  box-shadow: inset 0 0 0 0 #161616, inset -2rem 0 1rem -2rem #161616;
}

/*
* Positionnement ombres sur le tableau sans caption
*/
.fr-table--no-caption > table.fr-table__shadow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/*
* Positionnement ombres sur le tableau avec caption en bas
*/
.fr-table--caption-bottom > table.fr-table__shadow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 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 thead::after,
.fr-table > table tbody::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 {
  background-color: var(--background-default-grey);

  --idle: transparent;
  --hover: var(--background-default-grey-hover);
  --active: var(--background-default-grey-active);
}

.fr-table > table tbody tr:nth-child(even) {
  background-color: var(--background-alt-grey);

  --idle: transparent;
  --hover: var(--background-alt-grey-hover);
  --active: var(--background-alt-grey-active);
}

.fr-table--green-tilleul-verveine {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-green-tilleul-verveine), var(--border-plain-green-tilleul-verveine));
  background-color: var(--background-contrast-green-tilleul-verveine);

  --idle: transparent;
  --hover: var(--background-contrast-green-tilleul-verveine-hover);
  --active: var(--background-contrast-green-tilleul-verveine-active);
}

.fr-table--green-tilleul-verveine > table tbody {
  background-color: var(--background-alt-green-tilleul-verveine);

  --idle: transparent;
  --hover: var(--background-alt-green-tilleul-verveine-hover);
  --active: var(--background-alt-green-tilleul-verveine-active);
}

.fr-table--green-tilleul-verveine > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-green-tilleul-verveine);

  --idle: transparent;
  --hover: var(--background-contrast-green-tilleul-verveine-hover);
  --active: var(--background-contrast-green-tilleul-verveine-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-green-bourgeon), var(--border-plain-green-bourgeon));
  background-color: var(--background-contrast-green-bourgeon);

  --idle: transparent;
  --hover: var(--background-contrast-green-bourgeon-hover);
  --active: var(--background-contrast-green-bourgeon-active);
}

.fr-table--green-bourgeon > table tbody {
  background-color: var(--background-alt-green-bourgeon);

  --idle: transparent;
  --hover: var(--background-alt-green-bourgeon-hover);
  --active: var(--background-alt-green-bourgeon-active);
}

.fr-table--green-bourgeon > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-green-bourgeon);

  --idle: transparent;
  --hover: var(--background-contrast-green-bourgeon-hover);
  --active: var(--background-contrast-green-bourgeon-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-green-emeraude), var(--border-plain-green-emeraude));
  background-color: var(--background-contrast-green-emeraude);

  --idle: transparent;
  --hover: var(--background-contrast-green-emeraude-hover);
  --active: var(--background-contrast-green-emeraude-active);
}

.fr-table--green-emeraude > table tbody {
  background-color: var(--background-alt-green-emeraude);

  --idle: transparent;
  --hover: var(--background-alt-green-emeraude-hover);
  --active: var(--background-alt-green-emeraude-active);
}

.fr-table--green-emeraude > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-green-emeraude);

  --idle: transparent;
  --hover: var(--background-contrast-green-emeraude-hover);
  --active: var(--background-contrast-green-emeraude-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-green-menthe), var(--border-plain-green-menthe));
  background-color: var(--background-contrast-green-menthe);

  --idle: transparent;
  --hover: var(--background-contrast-green-menthe-hover);
  --active: var(--background-contrast-green-menthe-active);
}

.fr-table--green-menthe > table tbody {
  background-color: var(--background-alt-green-menthe);

  --idle: transparent;
  --hover: var(--background-alt-green-menthe-hover);
  --active: var(--background-alt-green-menthe-active);
}

.fr-table--green-menthe > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-green-menthe);

  --idle: transparent;
  --hover: var(--background-contrast-green-menthe-hover);
  --active: var(--background-contrast-green-menthe-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-green-archipel), var(--border-plain-green-archipel));
  background-color: var(--background-contrast-green-archipel);

  --idle: transparent;
  --hover: var(--background-contrast-green-archipel-hover);
  --active: var(--background-contrast-green-archipel-active);
}

.fr-table--green-archipel > table tbody {
  background-color: var(--background-alt-green-archipel);

  --idle: transparent;
  --hover: var(--background-alt-green-archipel-hover);
  --active: var(--background-alt-green-archipel-active);
}

.fr-table--green-archipel > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-green-archipel);

  --idle: transparent;
  --hover: var(--background-contrast-green-archipel-hover);
  --active: var(--background-contrast-green-archipel-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-blue-ecume), var(--border-plain-blue-ecume));
  background-color: var(--background-contrast-blue-ecume);

  --idle: transparent;
  --hover: var(--background-contrast-blue-ecume-hover);
  --active: var(--background-contrast-blue-ecume-active);
}

.fr-table--blue-ecume > table tbody {
  background-color: var(--background-alt-blue-ecume);

  --idle: transparent;
  --hover: var(--background-alt-blue-ecume-hover);
  --active: var(--background-alt-blue-ecume-active);
}

.fr-table--blue-ecume > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-blue-ecume);

  --idle: transparent;
  --hover: var(--background-contrast-blue-ecume-hover);
  --active: var(--background-contrast-blue-ecume-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-blue-cumulus), var(--border-plain-blue-cumulus));
  background-color: var(--background-contrast-blue-cumulus);

  --idle: transparent;
  --hover: var(--background-contrast-blue-cumulus-hover);
  --active: var(--background-contrast-blue-cumulus-active);
}

.fr-table--blue-cumulus > table tbody {
  background-color: var(--background-alt-blue-cumulus);

  --idle: transparent;
  --hover: var(--background-alt-blue-cumulus-hover);
  --active: var(--background-alt-blue-cumulus-active);
}

.fr-table--blue-cumulus > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-blue-cumulus);

  --idle: transparent;
  --hover: var(--background-contrast-blue-cumulus-hover);
  --active: var(--background-contrast-blue-cumulus-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-purple-glycine), var(--border-plain-purple-glycine));
  background-color: var(--background-contrast-purple-glycine);

  --idle: transparent;
  --hover: var(--background-contrast-purple-glycine-hover);
  --active: var(--background-contrast-purple-glycine-active);
}

.fr-table--purple-glycine > table tbody {
  background-color: var(--background-alt-purple-glycine);

  --idle: transparent;
  --hover: var(--background-alt-purple-glycine-hover);
  --active: var(--background-alt-purple-glycine-active);
}

.fr-table--purple-glycine > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-purple-glycine);

  --idle: transparent;
  --hover: var(--background-contrast-purple-glycine-hover);
  --active: var(--background-contrast-purple-glycine-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-pink-macaron), var(--border-plain-pink-macaron));
  background-color: var(--background-contrast-pink-macaron);

  --idle: transparent;
  --hover: var(--background-contrast-pink-macaron-hover);
  --active: var(--background-contrast-pink-macaron-active);
}

.fr-table--pink-macaron > table tbody {
  background-color: var(--background-alt-pink-macaron);

  --idle: transparent;
  --hover: var(--background-alt-pink-macaron-hover);
  --active: var(--background-alt-pink-macaron-active);
}

.fr-table--pink-macaron > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-pink-macaron);

  --idle: transparent;
  --hover: var(--background-contrast-pink-macaron-hover);
  --active: var(--background-contrast-pink-macaron-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-pink-tuile), var(--border-plain-pink-tuile));
  background-color: var(--background-contrast-pink-tuile);

  --idle: transparent;
  --hover: var(--background-contrast-pink-tuile-hover);
  --active: var(--background-contrast-pink-tuile-active);
}

.fr-table--pink-tuile > table tbody {
  background-color: var(--background-alt-pink-tuile);

  --idle: transparent;
  --hover: var(--background-alt-pink-tuile-hover);
  --active: var(--background-alt-pink-tuile-active);
}

.fr-table--pink-tuile > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-pink-tuile);

  --idle: transparent;
  --hover: var(--background-contrast-pink-tuile-hover);
  --active: var(--background-contrast-pink-tuile-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-yellow-tournesol), var(--border-plain-yellow-tournesol));
  background-color: var(--background-contrast-yellow-tournesol);

  --idle: transparent;
  --hover: var(--background-contrast-yellow-tournesol-hover);
  --active: var(--background-contrast-yellow-tournesol-active);
}

.fr-table--yellow-tournesol > table tbody {
  background-color: var(--background-alt-yellow-tournesol);

  --idle: transparent;
  --hover: var(--background-alt-yellow-tournesol-hover);
  --active: var(--background-alt-yellow-tournesol-active);
}

.fr-table--yellow-tournesol > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-yellow-tournesol);

  --idle: transparent;
  --hover: var(--background-contrast-yellow-tournesol-hover);
  --active: var(--background-contrast-yellow-tournesol-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-yellow-moutarde), var(--border-plain-yellow-moutarde));
  background-color: var(--background-contrast-yellow-moutarde);

  --idle: transparent;
  --hover: var(--background-contrast-yellow-moutarde-hover);
  --active: var(--background-contrast-yellow-moutarde-active);
}

.fr-table--yellow-moutarde > table tbody {
  background-color: var(--background-alt-yellow-moutarde);

  --idle: transparent;
  --hover: var(--background-alt-yellow-moutarde-hover);
  --active: var(--background-alt-yellow-moutarde-active);
}

.fr-table--yellow-moutarde > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-yellow-moutarde);

  --idle: transparent;
  --hover: var(--background-contrast-yellow-moutarde-hover);
  --active: var(--background-contrast-yellow-moutarde-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-orange-terre-battue), var(--border-plain-orange-terre-battue));
  background-color: var(--background-contrast-orange-terre-battue);

  --idle: transparent;
  --hover: var(--background-contrast-orange-terre-battue-hover);
  --active: var(--background-contrast-orange-terre-battue-active);
}

.fr-table--orange-terre-battue > table tbody {
  background-color: var(--background-alt-orange-terre-battue);

  --idle: transparent;
  --hover: var(--background-alt-orange-terre-battue-hover);
  --active: var(--background-alt-orange-terre-battue-active);
}

.fr-table--orange-terre-battue > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-orange-terre-battue);

  --idle: transparent;
  --hover: var(--background-contrast-orange-terre-battue-hover);
  --active: var(--background-contrast-orange-terre-battue-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-brown-cafe-creme), var(--border-plain-brown-cafe-creme));
  background-color: var(--background-contrast-brown-cafe-creme);

  --idle: transparent;
  --hover: var(--background-contrast-brown-cafe-creme-hover);
  --active: var(--background-contrast-brown-cafe-creme-active);
}

.fr-table--brown-cafe-creme > table tbody {
  background-color: var(--background-alt-brown-cafe-creme);

  --idle: transparent;
  --hover: var(--background-alt-brown-cafe-creme-hover);
  --active: var(--background-alt-brown-cafe-creme-active);
}

.fr-table--brown-cafe-creme > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-brown-cafe-creme);

  --idle: transparent;
  --hover: var(--background-contrast-brown-cafe-creme-hover);
  --active: var(--background-contrast-brown-cafe-creme-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-brown-caramel), var(--border-plain-brown-caramel));
  background-color: var(--background-contrast-brown-caramel);

  --idle: transparent;
  --hover: var(--background-contrast-brown-caramel-hover);
  --active: var(--background-contrast-brown-caramel-active);
}

.fr-table--brown-caramel > table tbody {
  background-color: var(--background-alt-brown-caramel);

  --idle: transparent;
  --hover: var(--background-alt-brown-caramel-hover);
  --active: var(--background-alt-brown-caramel-active);
}

.fr-table--brown-caramel > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-brown-caramel);

  --idle: transparent;
  --hover: var(--background-contrast-brown-caramel-hover);
  --active: var(--background-contrast-brown-caramel-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-brown-opera), var(--border-plain-brown-opera));
  background-color: var(--background-contrast-brown-opera);

  --idle: transparent;
  --hover: var(--background-contrast-brown-opera-hover);
  --active: var(--background-contrast-brown-opera-active);
}

.fr-table--brown-opera > table tbody {
  background-color: var(--background-alt-brown-opera);

  --idle: transparent;
  --hover: var(--background-alt-brown-opera-hover);
  --active: var(--background-alt-brown-opera-active);
}

.fr-table--brown-opera > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-brown-opera);

  --idle: transparent;
  --hover: var(--background-contrast-brown-opera-hover);
  --active: var(--background-contrast-brown-opera-active);
}

.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 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.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 {
  background-image: linear-gradient(0deg, var(--border-plain-beige-gris-galet), var(--border-plain-beige-gris-galet));
  background-color: var(--background-contrast-beige-gris-galet);

  --idle: transparent;
  --hover: var(--background-contrast-beige-gris-galet-hover);
  --active: var(--background-contrast-beige-gris-galet-active);
}

.fr-table--beige-gris-galet > table tbody {
  background-color: var(--background-alt-beige-gris-galet);

  --idle: transparent;
  --hover: var(--background-alt-beige-gris-galet-hover);
  --active: var(--background-alt-beige-gris-galet-active);
}

.fr-table--beige-gris-galet > table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-beige-gris-galet);

  --idle: transparent;
  --hover: var(--background-contrast-beige-gris-galet-hover);
  --active: var(--background-contrast-beige-gris-galet-active);
}

.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(even) {
  background-color: transparent;

  --hover: inherit;
  --active: inherit;
}
@media (min-width: 36em) {
  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */
  .fr-table__content .fr-cell--fixed\@sm {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .fr-table__content .fr-cell--fixed\@md {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .fr-table caption {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .fr-table__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .fr-table__header .fr-table__detail {
    order: 1;
    flex: 1;
    padding-right: 0.5rem;
  }

  .fr-table__header .fr-btns-group {
    order: 2;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .fr-table__header .fr-segmented {
    order: 3;
    flex: 0;
    padding-left: 0.5rem;
  }

  .fr-table__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .fr-table__footer .fr-select-group .fr-select {
    width: 16rem;
  }

  .fr-table__footer .fr-btns-group {
    padding-left: 0.5rem;
  }

  .fr-table__footer--start {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }

  .fr-table__footer--start .fr-select-group {
    padding-left: 0.5rem;
    padding-right: 0.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 {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .fr-table__footer--middle {
    display: block;
    padding-left: 0.5rem;
    padding-right: 0.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\@sm .fr-checkbox-group .fr-label,
  .fr-table__content .fr-cell--fixed\@md .fr-checkbox-group .fr-label,
  .fr-table__content .fr-cell--fixed\@lg .fr-checkbox-group .fr-label {
    opacity: 0;
  }

  .fr-table__content .fr-cell--fixed,
  .fr-table__content .fr-cell--fixed\@sm,
  .fr-table__content .fr-cell--fixed\@md,
  .fr-table__content .fr-cell--fixed\@lg {
    outline: 1px solid;
  }

  .fr-table__content table tbody tr::after {
    border: 2px solid highlight;
  }

  .fr-table__content th,
  .fr-table__content td {
    border: 1px solid;
  }
}