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

/* ¯¯¯¯¯¯¯¯¯ *\
  TABLE
\* ˍˍˍˍˍˍˍˍˍ */
.village-table {
  --table-offset: 1rem;
  --text-spacing: 0;
  --title-spacing: 0;
  position: relative;
  margin-bottom: 2.5rem;
  padding-top: var(--table-offset);
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

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

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

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

.village-table[data-village-js-table=true] caption {
  position: absolute;
  top: 0;
}

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

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

.village-table th {
  font-weight: 700;
}

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

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

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

/*
* Cache la caption
*/
.village-table--no-caption {
  padding-top: 0;
}

.village-table--no-caption 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;
}

/*
* Fixe le caption en bas du tableau
*/
.village-table--caption-bottom {
  padding-top: 0;
  margin-bottom: 0;
  margin-top: 1rem;
}

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

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

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

/*
* pas de scroll ni de shadow
*/
.village-table--no-scroll {
  min-width: auto;
}

.village-table--no-scroll table {
  overflow-x: hidden;
}

.village-table--no-scroll caption {
  max-width: calc(100vw - 2rem);
}

/*
* Fixe la taille des colonnes du tableau
*/
.village-table--layout-fixed table {
  display: table;
  table-layout: fixed;
}

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

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

  /**
  * Modifier ombre à droite
  **/

  /**
  * Modifier combinaison ombre à gauche et ombre à droite
  **/
}

.village-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;
}

.village-table__shadow--left::before {
  box-shadow: inset 2rem 0 1rem -2rem #161616, inset 0 0 0 0 #161616;
}

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

.village-table__shadow--left.village-table__shadow--right::before {
  content: "";
  display: block;
  box-shadow: inset 2rem 0 1rem -2rem #161616, inset -2rem 0 1rem -2rem #161616;
}

/*
* Positionnement ombres sur le tableau sans caption
*/
.village-table--no-caption .village-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
*/
.village-table--caption-bottom .village-table__shadow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

:root[data-village-theme=dark] .village-table__shadow::before {
  opacity: 1;
}

.village-table tbody {
  background-color: var(--background-alt-grey);

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

.village-table tbody tr:nth-child(even) {
  background-color: var(--background-contrast-grey);

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

.village-table--village-color3 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color3 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color3), var(--border-plain-village-color3));
  background-color: var(--background-contrast-village-color3);

  --idle: transparent;
  --hover: var(--background-contrast-village-color3-hover);
  --active: var(--background-contrast-village-color3-active);
}

.village-table--village-color3 tbody {
  background-color: var(--background-alt-village-color3);

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

.village-table--village-color3 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color3);

  --idle: transparent;
  --hover: var(--background-contrast-village-color3-hover);
  --active: var(--background-contrast-village-color3-active);
}

.village-table--village-color3.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color3), var(--border-default-village-color3));
}

.village-table--village-color4 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color4 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color4), var(--border-plain-village-color4));
  background-color: var(--background-contrast-village-color4);

  --idle: transparent;
  --hover: var(--background-contrast-village-color4-hover);
  --active: var(--background-contrast-village-color4-active);
}

.village-table--village-color4 tbody {
  background-color: var(--background-alt-village-color4);

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

.village-table--village-color4 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color4);

  --idle: transparent;
  --hover: var(--background-contrast-village-color4-hover);
  --active: var(--background-contrast-village-color4-active);
}

.village-table--village-color4.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color4), var(--border-default-village-color4));
}

.village-table--village-color5 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color5 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color5), var(--border-plain-village-color5));
  background-color: var(--background-contrast-village-color5);

  --idle: transparent;
  --hover: var(--background-contrast-village-color5-hover);
  --active: var(--background-contrast-village-color5-active);
}

.village-table--village-color5 tbody {
  background-color: var(--background-alt-village-color5);

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

.village-table--village-color5 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color5);

  --idle: transparent;
  --hover: var(--background-contrast-village-color5-hover);
  --active: var(--background-contrast-village-color5-active);
}

.village-table--village-color5.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color5), var(--border-default-village-color5));
}

.village-table--village-color6 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color6 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color6), var(--border-plain-village-color6));
  background-color: var(--background-contrast-village-color6);

  --idle: transparent;
  --hover: var(--background-contrast-village-color6-hover);
  --active: var(--background-contrast-village-color6-active);
}

.village-table--village-color6 tbody {
  background-color: var(--background-alt-village-color6);

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

.village-table--village-color6 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color6);

  --idle: transparent;
  --hover: var(--background-contrast-village-color6-hover);
  --active: var(--background-contrast-village-color6-active);
}

.village-table--village-color6.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color6), var(--border-default-village-color6));
}

.village-table--village-color7 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color7 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color7), var(--border-plain-village-color7));
  background-color: var(--background-contrast-village-color7);

  --idle: transparent;
  --hover: var(--background-contrast-village-color7-hover);
  --active: var(--background-contrast-village-color7-active);
}

.village-table--village-color7 tbody {
  background-color: var(--background-alt-village-color7);

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

.village-table--village-color7 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color7);

  --idle: transparent;
  --hover: var(--background-contrast-village-color7-hover);
  --active: var(--background-contrast-village-color7-active);
}

.village-table--village-color7.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color7), var(--border-default-village-color7));
}

.village-table--village-color8 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color8 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color8), var(--border-plain-village-color8));
  background-color: var(--background-contrast-village-color8);

  --idle: transparent;
  --hover: var(--background-contrast-village-color8-hover);
  --active: var(--background-contrast-village-color8-active);
}

.village-table--village-color8 tbody {
  background-color: var(--background-alt-village-color8);

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

.village-table--village-color8 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color8);

  --idle: transparent;
  --hover: var(--background-contrast-village-color8-hover);
  --active: var(--background-contrast-village-color8-active);
}

.village-table--village-color8.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color8), var(--border-default-village-color8));
}

.village-table--village-color9 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color9 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color9), var(--border-plain-village-color9));
  background-color: var(--background-contrast-village-color9);

  --idle: transparent;
  --hover: var(--background-contrast-village-color9-hover);
  --active: var(--background-contrast-village-color9-active);
}

.village-table--village-color9 tbody {
  background-color: var(--background-alt-village-color9);

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

.village-table--village-color9 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color9);

  --idle: transparent;
  --hover: var(--background-contrast-village-color9-hover);
  --active: var(--background-contrast-village-color9-active);
}

.village-table--village-color9.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color9), var(--border-default-village-color9));
}

.village-table--village-color10 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color10 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color10), var(--border-plain-village-color10));
  background-color: var(--background-contrast-village-color10);

  --idle: transparent;
  --hover: var(--background-contrast-village-color10-hover);
  --active: var(--background-contrast-village-color10-active);
}

.village-table--village-color10 tbody {
  background-color: var(--background-alt-village-color10);

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

.village-table--village-color10 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color10);

  --idle: transparent;
  --hover: var(--background-contrast-village-color10-hover);
  --active: var(--background-contrast-village-color10-active);
}

.village-table--village-color10.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color10), var(--border-default-village-color10));
}

.village-table--village-color11 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color11 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color11), var(--border-plain-village-color11));
  background-color: var(--background-contrast-village-color11);

  --idle: transparent;
  --hover: var(--background-contrast-village-color11-hover);
  --active: var(--background-contrast-village-color11-active);
}

.village-table--village-color11 tbody {
  background-color: var(--background-alt-village-color11);

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

.village-table--village-color11 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color11);

  --idle: transparent;
  --hover: var(--background-contrast-village-color11-hover);
  --active: var(--background-contrast-village-color11-active);
}

.village-table--village-color11.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color11), var(--border-default-village-color11));
}

.village-table--village-color12 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color12 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color12), var(--border-plain-village-color12));
  background-color: var(--background-contrast-village-color12);

  --idle: transparent;
  --hover: var(--background-contrast-village-color12-hover);
  --active: var(--background-contrast-village-color12-active);
}

.village-table--village-color12 tbody {
  background-color: var(--background-alt-village-color12);

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

.village-table--village-color12 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color12);

  --idle: transparent;
  --hover: var(--background-contrast-village-color12-hover);
  --active: var(--background-contrast-village-color12-active);
}

.village-table--village-color12.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color12), var(--border-default-village-color12));
}

.village-table--village-color13 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color13 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color13), var(--border-plain-village-color13));
  background-color: var(--background-contrast-village-color13);

  --idle: transparent;
  --hover: var(--background-contrast-village-color13-hover);
  --active: var(--background-contrast-village-color13-active);
}

.village-table--village-color13 tbody {
  background-color: var(--background-alt-village-color13);

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

.village-table--village-color13 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color13);

  --idle: transparent;
  --hover: var(--background-contrast-village-color13-hover);
  --active: var(--background-contrast-village-color13-active);
}

.village-table--village-color13.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color13), var(--border-default-village-color13));
}

.village-table--village-color14 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color14 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color14), var(--border-plain-village-color14));
  background-color: var(--background-contrast-village-color14);

  --idle: transparent;
  --hover: var(--background-contrast-village-color14-hover);
  --active: var(--background-contrast-village-color14-active);
}

.village-table--village-color14 tbody {
  background-color: var(--background-alt-village-color14);

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

.village-table--village-color14 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color14);

  --idle: transparent;
  --hover: var(--background-contrast-village-color14-hover);
  --active: var(--background-contrast-village-color14-active);
}

.village-table--village-color14.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color14), var(--border-default-village-color14));
}

.village-table--village-color15 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color15 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color15), var(--border-plain-village-color15));
  background-color: var(--background-contrast-village-color15);

  --idle: transparent;
  --hover: var(--background-contrast-village-color15-hover);
  --active: var(--background-contrast-village-color15-active);
}

.village-table--village-color15 tbody {
  background-color: var(--background-alt-village-color15);

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

.village-table--village-color15 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color15);

  --idle: transparent;
  --hover: var(--background-contrast-village-color15-hover);
  --active: var(--background-contrast-village-color15-active);
}

.village-table--village-color15.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color15), var(--border-default-village-color15));
}

.village-table--village-color16 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color16 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color16), var(--border-plain-village-color16));
  background-color: var(--background-contrast-village-color16);

  --idle: transparent;
  --hover: var(--background-contrast-village-color16-hover);
  --active: var(--background-contrast-village-color16-active);
}

.village-table--village-color16 tbody {
  background-color: var(--background-alt-village-color16);

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

.village-table--village-color16 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color16);

  --idle: transparent;
  --hover: var(--background-contrast-village-color16-hover);
  --active: var(--background-contrast-village-color16-active);
}

.village-table--village-color16.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color16), var(--border-default-village-color16));
}

.village-table--village-color17 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color17 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color17), var(--border-plain-village-color17));
  background-color: var(--background-contrast-village-color17);

  --idle: transparent;
  --hover: var(--background-contrast-village-color17-hover);
  --active: var(--background-contrast-village-color17-active);
}

.village-table--village-color17 tbody {
  background-color: var(--background-alt-village-color17);

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

.village-table--village-color17 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color17);

  --idle: transparent;
  --hover: var(--background-contrast-village-color17-hover);
  --active: var(--background-contrast-village-color17-active);
}

.village-table--village-color17.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color17), var(--border-default-village-color17));
}

.village-table--village-color18 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color18 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color18), var(--border-plain-village-color18));
  background-color: var(--background-contrast-village-color18);

  --idle: transparent;
  --hover: var(--background-contrast-village-color18-hover);
  --active: var(--background-contrast-village-color18-active);
}

.village-table--village-color18 tbody {
  background-color: var(--background-alt-village-color18);

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

.village-table--village-color18 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color18);

  --idle: transparent;
  --hover: var(--background-contrast-village-color18-hover);
  --active: var(--background-contrast-village-color18-active);
}

.village-table--village-color18.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color18), var(--border-default-village-color18));
}

.village-table--village-color19 {
  /* Style bordered, ajoute des bordures entre chaque ligne */
}

.village-table--village-color19 thead {
  background-image: linear-gradient(0deg, var(--border-plain-village-color19), var(--border-plain-village-color19));
  background-color: var(--background-contrast-village-color19);

  --idle: transparent;
  --hover: var(--background-contrast-village-color19-hover);
  --active: var(--background-contrast-village-color19-active);
}

.village-table--village-color19 tbody {
  background-color: var(--background-alt-village-color19);

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

.village-table--village-color19 tbody tr:nth-child(even) {
  background-color: var(--background-contrast-village-color19);

  --idle: transparent;
  --hover: var(--background-contrast-village-color19-hover);
  --active: var(--background-contrast-village-color19-active);
}

.village-table--village-color19.village-table--bordered tbody tr {
  background-image: linear-gradient(0deg, var(--border-default-village-color19), var(--border-default-village-color19));
}

.village-table--bordered tbody tr:nth-child(even) {
  background-color: transparent;

  --hover: inherit;
  --active: inherit;
}
@media (min-width: 36em) {
  /*! media sm */
}
@media (min-width: 48em) {
  /*! media md */
  .village-table caption {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .village-table td,
  .village-table th {
    padding: 1rem;
  }

  .village-table thead td,
  .village-table thead th {
    padding-bottom: 1.125rem;
  }
}
@media (min-width: 62em) {
  /*! media lg */
}
@media (min-width: 78em) {
  /*! media xl */
}