body,
option,
input,
textarea,
select,
button {
	font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.125rem;
	font-stretch: normal;
	font-style: normal;
	font-weight: 400;
	line-height: 1.85625rem
}

*[hidden] {
	display: none
}

th {
	font-weight: 600
}

td,
th {
	padding: 0.928125rem 1.125rem;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word
}

thead th {
	border-bottom: 0.135rem solid #595959;
	border-left: 0.0675rem solid #cccccc;
	padding-bottom: 0.39375rem
}

thead th:first-child {
	border-left: 0
}

tbody tr:hover {
	background-color: rgb(249.9, 249.9, 249.9)
}

table {
	display: table;
	table-layout: fixed;
	width: 100%
}

@media all and (max-width:1024px) {
	table {
		display: none
	}
}

@media all and (max-width:1024px) {
	table thead {
		display: none
	}
}

table tr {
	border-bottom-width: 0.135rem
}

table tr td,
table tr th {
	overflow: hidden;
	padding: 0.3375rem 0.225rem
}

@media all and (max-width:1024px) {

	table tr td,
	table tr th {
		border: 0;
		display: inline-block
	}
}

@media all and (max-width:1024px) {
	table tr {
		display: inline-block;
		margin: 0.675rem 0
	}
}

@media all and (max-width:1024px) {
	table {
		display: inline-block
	}
}

fieldset label,
fieldset legend {
	display: block
}

fieldset legend {
	margin: 1.125rem 0
}

input,
textarea,
select,
button {
	display: inline-block;
	padding: 0.61875rem
}

input+label,
input+input[type=checkbox],
input+input[type=radio],
textarea+label,
textarea+input[type=checkbox],
textarea+input[type=radio],
select+label,
select+input[type=checkbox],
select+input[type=radio],
button+label,
button+input[type=checkbox],
button+input[type=radio] {
	page-break-before: always
}

input,
select,
label {
	margin-right: 0.225rem
}

textarea {
	min-height: 5.625rem;
	min-width: 22.5rem
}

label {
	display: inline-block;
	margin-bottom: 0.7875rem
}

label+* {
	page-break-before: always
}

label>input {
	margin-bottom: 0
}

input[type=submit],
input[type=reset],
button {
	background: rgb(242.25, 242.25, 242.25);
	color: rgb(25.25, 25.25, 25.25);
	cursor: pointer;
	display: inline;
	margin-right: 0.45rem;
	padding: 0.4078125rem 1.4625rem;
	text-align: center
}

input[type=submit]:hover,
input[type=reset]:hover,
button:hover {
	background: none;
	color: lightseagreen;
}

input[type=submit][disabled],
input[type=reset][disabled],
button[disabled] {
	background: rgb(186, 20, 20);
	color: rgb(63.5, 63.5, 63.5);
	cursor: not-allowed
}

input[type=submit],
button[type=submit] {
	background: lightseagreen;
	color: #fff
}

input[type=submit]:hover,
button[type=submit]:hover {
	background: none;
	color: lightseagreen;
}

input,
select,
textarea {
	margin-bottom: 1.125rem
}

input[type=text],
input[type=password],
input[type=email],
input[type=url],
input[type=phone],
input[type=tel],
input[type=number],
input[type=datetime],
input[type=date],
input[type=month],
input[type=week],
input[type=color],
input[type=time],
input[type=search],
input[type=range],
input[type=file],
input[type=datetime-local],
select,
textarea {
	border: 1px solid #595959;
	padding: 0.3375rem 0.39375rem
}

input[type=checkbox],
input[type=radio] {
	flex-grow: 0;
	height: 1.85625rem;
	margin-left: 0;
	margin-right: 9px;
	vertical-align: middle
}

input[type=checkbox]+label,
input[type=radio]+label {
	page-break-before: avoid
}

select[multiple] {
	min-width: 270px
}

body,
input,
textarea,
select,
button,
option {
	font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1.125rem;
	font-stretch: normal;
	font-style: normal;
	font-weight: 400;
	line-height: 1.85625rem
}

pre,
code,
kbd,
samp,
var,
output {
	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
	font-size: 0.9rem
}

pre {
	border-left: 0.1125rem solid rgb(88.5, 192, 114);
	line-height: 1.575rem;
	overflow: auto;
	padding-left: 18px
}

pre code {
	background: none;
	border: 0;
	line-height: 1.85625rem;
	padding: 0
}

code,
kbd {
	background: rgb(218, 241, 223.6666666667);
	color: #2a6f3b;
	display: inline-block;
	line-height: 1.125rem;
	padding: 0.225rem 0.39375rem 0.16875rem
}

kbd {
	background: #2a6f3b;
	color: #fff
}

mark {
	background: #ffc;
	padding: 0 0.225rem
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #000;
	margin-bottom: 1.125rem
}

h1 {
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 2.7rem;
	margin-top: 4.5rem
}

h2 {
	font-size: 1.575rem;
	font-weight: 400;
	line-height: 2.1375rem;
}

h3 {
	font-size: 1.35rem;
	line-height: 1.6875rem;
	margin-top: 2.25rem
}

h4 {
	font-size: 1.125rem;
	line-height: 1.4625rem;
	margin-top: 1.125rem
}

h5 {
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.35rem;
	text-transform: uppercase
}

h6 {
	color: #595959;
	font-size: 0.9rem;
	font-weight: bold;
	line-height: 1.125rem;
	text-transform: uppercase
}

a {
	color: #275a90;
	text-decoration: none
}

a:hover {
	text-decoration: underline
}

hr {
	border-bottom: 1px solid #595959
}

figcaption,
small {
	font-size: 0.95625rem
}

figcaption {
	color: #595959
}

var,
em,
i {
	font-style: italic
}

dt,
strong,
b {
	font-weight: 600
}

del,
s {
	text-decoration: line-through
}

ins,
u {
	text-decoration: underline
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline
}

sup {
	top: -0.5em
}

sub {
	bottom: -0.25em
}

* {
	border: 0;
	border-collapse: separate;
	border-spacing: 0;
	box-sizing: border-box;
	margin: 0;
	max-width: 100%;
	padding: 0;
	vertical-align: baseline
}

html,
body {
	width: 100%
}

html {
	height: 100%
}

body {
	background: #fff;
	color: rgb(25.5, 25.5, 25.5);
	padding: 36px
}

section {
	margin-left: auto;
	margin-right: auto;
	width: 900px
}

aside {
	float: right;
	width: 285px
}

article,
header,
footer {
	padding: 43.2px
}

article {
	background: #fff;
	border: 1px solid rgb(216.75, 216.75, 216.75)
}

nav {
	text-align: center
}

nav ul {
	list-style: none;
	margin-left: 0;
	text-align: center
}

nav ul li {
	display: inline-block;
	margin-left: 9px;
	margin-right: 9px;
	vertical-align: middle
}

nav ul li:first-child {
	margin-left: 0
}

nav ul li:last-child {
	margin-right: 0
}

ol,
ul {
	margin-left: 31.5px
}

li dl,
li ol,
li ul {
	margin-bottom: 0
}

dl {
	display: inline-block
}

dt {
	padding: 0 1.125rem
}

dd {
	padding: 0 1.125rem 0.28125rem
}

dd:last-of-type {
	border-bottom: 0.0675rem solid #595959
}

dd+dt {
	border-top: 0.0675rem solid #595959;
	padding-top: 0.5625rem
}

blockquote {
	border-left: 0.135rem solid #595959;
	padding: 0.28125rem 1.125rem 0.28125rem 0.99rem
}

blockquote footer {
	color: #595959;
	font-size: 0.84375rem;
	margin: 0
}

blockquote p {
	margin-bottom: 0
}

img {
	height: auto;
	margin: 0 auto
}

figure img {
	display: block
}

@media (max-width:767px) {
	body {
		padding: 18px 0
	}

	article {
		border: 0;
		padding: 18px
	}

	header,
	footer {
		padding: 18px
	}

	textarea,
	input,
	select {
		min-width: 0
	}

	fieldset {
		min-width: 0
	}

	fieldset * {
		flex-grow: 1;
		page-break-before: auto
	}

	section {
		width: auto
	}

	x:-moz-any-link {
		display: table-cell
	}
}

/*
Added
*/

li button {
	font-family: system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 1rem;
	font-stretch: normal;
	font-style: normal;
	font-weight: 200;
	line-height: 1rem;
	margin-right: 0;
    padding: 3px;
}

li button:hover {
    background: none;
    color: lightseagreen;
}

form > fieldset {
    width: min(100%, 400px);
    margin-inline: auto;
  }
  
  main {
    min-height: 100vh;
    display: grid;
    place-items: center;
  }
  
  form input,
  form button,
  form select,
  form textarea {
    width: 100%;
  }

/*
  Dark Mode
*/

:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --muted: #555;
    --border: #d9d9d9;
    --panel: #f7f7f7;
    --link: #0645ad;
    --accent: #245b8c;
    --switch-bg: #0f1115;
    --switch-txt: #e7e7e7;
	--disabled-bg: #d2d2d2;
	--row-hover: rgba(32, 178, 170, 0.10);
    color-scheme: light;
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #0f1115;
      --text: #e7e7e7;
      --muted: #b5b5b5;
      --border: #2a2e36;
      --panel: #171a21;
      --link: #79a6ff;
      --accent: #a7c1ff;
      --switch-bg: #ffffff;
      --switch-txt: #1a1a1a;
	  --disabled-bg: #07080a;
	  --row-hover: rgba(32, 178, 170, 0.18);
      color-scheme: dark;
    }
  }
  
  html, body { background: var(--bg); color: var(--text); }
  a { color: var(--link); }
  a:hover { color: var(--accent); }
  hr, fieldset, table, th, td { border-color: var(--border) !important; }
  pre, code, kbd, samp { background: var(--panel); }
  input, select, textarea, h2 { background: var(--bg); color: var(--text); border-color: var(--border); }
  button { background: var(--panel); border-color: var(--border); color: var(--text); }
  li button { background: var(--switch-bg); color: var(--switch-txt); }
  nav, header, footer, section, article { background: transparent; }
  button:disabled {background: var(--disabled-bg); color: var(--text);}

  article {
    border: 1px solid var(--border);
    background: var(--bg);
  }
  
  :root[data-theme="light"] {
    --bg:#fff; --text:#1a1a1a; --muted:#555; --border:#d9d9d9; --panel:#f7f7f7;
    --link:#0645ad; --accent:#245b8c; --switch-bg: #0f1115; --switch-txt: #e7e7e7; color-scheme: light;
	--disabled-bg: #d2d2d2; --row-hover: rgba(32, 178, 170, 0.12);
  }
  :root[data-theme="dark"] {
    --bg:#0f1115; --text:#e7e7e7; --muted:#b5b5b5; --border:#2a2e36; --panel:#171a21;
    --link:#79a6ff; --accent:#a7c1ff; --switch-bg: #ffffff; --switch-txt: #1a1a1a; color-scheme: dark;
	--disabled-bg: #07080a; --row-hover: rgba(32, 178, 170, 0.18);
  }

  .spin {
    display: inline-block;
    animation: rotation 30s linear infinite;
  }
  
  @keyframes rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  ::selection {
    background: lightseagreen;  /* couleur de fond quand sélectionné */
    color: #fff;          /* couleur du texte sélectionné */
  }

  table tbody tr:hover {
	background-color: var(--row-hover) !important;
  }
  
  /* si tu utilises aussi des <li> pour la liste, même rendu : */
  ul li:hover {
	background-color: var(--row-hover) !important;
  }