* {
  font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures contextual;
  text-rendering: optimizeLegibility;
}
:root {
	--color: #2c59ab;
}
:before, :after {
  box-sizing: border-box;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
img {
  max-width: 100%;
}
body {
  min-height: 98vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Arial, "Open Sans", "Noto Sans", "Fira Sans", "Droid Sans", Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Emoji Regular";
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  max-width: 800px;
  width: 90%;
  margin: auto;
  padding: 1em;
  box-sizing: content-box;
}

main a {
  text-decoration: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1em;
  background-color: var(--color);
  color:#fff;
}

.header-content {
  display: flex;
  align-items: center;
  gap: 1em;
}

.header-content img {
  height: 100px;
}

.header-content h1 {
  font-size: 1.5em;
}
.header-content h1 {
    display: inline-block;
    position: relative;
    padding-bottom: 6px; /* Espace entre le texte et l'effet */
}

.header-content h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 6px;
   background: repeating-linear-gradient(
        to right,
        rgb(49,131,190) 0%, rgb(49,131,190) 2%,
        rgb(49,137,196) 2%, rgb(49,137,196) 4%,
        rgb(46,114,184) 4%, rgb(46,114,184) 6%,
        rgb(41,90,159) 6%, rgb(41,90,159) 8%,
        rgb(43,102,176) 8%, rgb(43,102,176) 10%,
        rgb(45,114,187) 10%, rgb(45,114,187) 12%,
        rgb(43,112,186) 12%, rgb(43,112,186) 14%,
        rgb(61,120,187) 14%, rgb(61,120,187) 16%,
        rgb(107,175,216) 16%, rgb(107,175,216) 18%,
        rgb(45,131,193) 18%, rgb(45,131,193) 20%,
        rgb(41,86,166) 20%, rgb(41,86,166) 22%,
        rgb(42,104,170) 22%, rgb(42,104,170) 24%,
        rgb(37,76,146) 24%, rgb(37,76,146) 26%,
        rgb(45,111,180) 26%, rgb(45,111,180) 28%,
        rgb(48,126,190) 28%, rgb(48,126,190) 30%,
        rgb(39,89,153) 30%, rgb(39,89,153) 32%,
        rgb(37,81,147) 32%, rgb(37,81,147) 34%,
        rgb(29,49,110) 34%, rgb(29,49,110) 36%,
        rgb(45,97,164) 36%, rgb(45,97,164) 38%,
        rgb(50,102,166) 38%, rgb(50,102,166) 40%,
        rgb(45,116,183) 40%, rgb(45,116,183) 42%,
        rgb(50,132,195) 42%, rgb(50,132,195) 44%,
        rgb(82,163,210) 44%, rgb(82,163,210) 46%,
        rgb(91,164,211) 46%, rgb(91,164,211) 48%,
        rgb(82,160,210) 48%, rgb(82,160,210) 50%,
        rgb(144,198,231) 50%, rgb(144,198,231) 52%,
        rgb(194,222,242) 52%, rgb(194,222,242) 54%,
        rgb(199,223,244) 54%, rgb(199,223,244) 56%,
        rgb(143,200,226) 56%, rgb(143,200,226) 58%,
        rgb(121,186,221) 58%, rgb(121,186,221) 60%,
        rgb(152,202,230) 60%, rgb(152,202,230) 62%,
        rgb(129,190,223) 62%, rgb(129,190,223) 64%,
        rgb(166,210,232) 64%, rgb(166,210,232) 66%,
        rgb(100,176,216) 66%, rgb(100,176,216) 68%,
        rgb(127,192,227) 68%, rgb(127,192,227) 70%,
        rgb(135,184,213) 70%, rgb(135,184,213) 72%,
        rgb(131,190,223) 72%, rgb(131,190,223) 74%,
        rgb(195,218,237) 74%, rgb(195,218,237) 76%,
        rgb(235,211,204) 76%, rgb(235,211,204) 78%,
        rgb(211,223,238) 78%, rgb(211,223,238) 80%,
        rgb(247,199,180) 80%, rgb(247,199,180) 82%,
        rgb(244,199,185) 82%, rgb(244,199,185) 84%,
        rgb(250,179,158) 84%, rgb(250,179,158) 86%,
        rgb(250,126,104) 86%, rgb(250,126,104) 88%,
        rgb(250,74,63) 88%, rgb(250,74,63) 90%,
        rgb(250,30,30) 90%, rgb(250,30,30) 92%,
        rgb(245,31,31) 92%, rgb(245,31,31) 94%,
        rgb(235,6,14) 94%, rgb(235,6,14) 96%,
        rgb(141,0,5) 96%, rgb(141,0,5) 98%,
        rgb(126,0,7) 98%, rgb(126,0,7) 100%
    );
}
nav {
  display: flex;
  gap: 1em;
  padding: .5em 1em;
}

nav a, footer a {
  color: #fff;
  font-weight: 500;
  text-decoration: none;
  transition: color .3s;
}

footer {
 width:100%;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 2em 0;
  text-align: center;
  background-color: #2c59ab;
}
/*
footer {
	display:flex;
	gap:1em;
	padding-top: 1em;
	justify-content:center;
	background-color: var(--color-header);
	text-align:center;
	
	position: absolute;
    left: 0;
    bottom: 0;
    height: 3em;
    width: 100%;
} */
table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid #ccc;
  padding: 1em;
}


@media (max-width: 800px) {
  nav {
    flex-direction: column;
    text-align: center;
    box-sizing: content-box;
  }
}