header {
    position: -webkit-sticky; /* Pour compatibilité Safari */
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000; /* Assure que le menu est au-dessus */
    background-color: #97f0ed; /* Évite la transparence */
    padding: 20px 0 20px 0;
}
/* Menu de navigation */
header nav {
  font-size: 1rem;
  line-height: 2;
  padding: 1rem 0 0 0;
}

/* Utilisez Flexbox pour permettre aux éléments de s'adapter a la taille des blocs, selon les besoins. */
header nav ul,
header nav ol {
  align-content: space-around;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* Les éléments de liste sont des éléments en ligne; faites-les se comporter comme des blocs.*/
header nav ul li,
header nav ol li {
  display: inline-block;
}

header nav a,
header nav a:visited {
  margin: 0 0.5rem 1rem 0.5rem;
  border: 1px solid black;
  border-radius: 10px 10px;
  color: blueviolet;
  display: inline-block;
  padding: 0.1rem 1rem;
  text-decoration: none;
}

header nav a:hover,
header nav a.current,
header nav a[aria-current="page"],
header nav a[aria-current="true"] {
  background: white;
  border-color: black;
/*  color: var(--accent);*/
  color: blue;
  cursor: pointer;
}

/* Réduire le menu latéral sur mobile */
@media only screen and (max-width: 720px) {
  header nav a {
    border: none;
    padding: 0;
    text-decoration: underline;
    line-height: 1;
  }

  header nav a.current {
    background: none;
  }
}
html, body {
 margin: 0;
 padding: 0;
 }
body {
 background-color: white; 
 font-family: cursive, sans-serif; 
 font-size: 100%;
}
/* Make the body a nice central block */
body {
  color: wheat;
  background-color: brown;
  font-size: 1.15rem;
  line-height: 1.5;
  display: grid;
  grid-template-columns: 1fr min(45rem, 90%) 1fr;
  margin: 0;
}
body > * {
  grid-column: 2;
}

h1 {
 font-size: 200%; 
 color: navy; 
 text-align: center;
 }
h2 {
 font-size: 150%; 
 color: red; 
 padding-left: 15px;
 }
p,ul,li,td {
 color: black; 
 }
a:link {
 color: green;
 text-decoration: underline;
 }
a:visited {
 color: gray;
 }
a:hover {
 color: red;
 text-decoration: none;
}
a:active, a:focus {
 color: red;
}
.haut {
    text-align:right;
    position: fixed;
    bottom : 100px;
    right: 100px;
}
.bandeau-fixe {
  position: absolute; /* Fixe l'élément par rapport à la fenêtre */
  top: 0;          /* Aligne en haut */
  left: 0;         /* Aligne à gauche */
  width: 100%;     /* Prend toute la largeur */
  height: 260px;    /* Exemple de hauteur */
  background-color: #fff; /* Fond opaque pour la lisibilité */
  z-index: 1000;   /* Assure qu'il passe au-dessus du reste */
}
/* Classes for notices */
.notice {
  background: var(--accent-bg);
  border: var(--border-width) solid var(--border);
  border-radius: var(--standard-border-radius);
  padding: 0 0.5rem 0 0.5rem;
  margin: 1rem 0;
}

div.notice p:first-of-type {
	margin-top: 0;
}

div.notice p:last-of-type {
	margin-bottom: 0;
}