body
{
	margin:0;
	background-color:#e5e5e5;
	font-family: arial ;
	font-size: 15px;
	text-align: justify;
}
header {
    background-color: #a39dfe;
    text-decoration: none;
    position: sticky;
    padding: 10px 20px;
    border-bottom: 1px solid black;
    top: 0;
    z-index: 1000;
}

section {
    scroll-margin-top: 86px;
    /* ajuste selon la hauteur du header*/
}


/* pour renforcer; pourvue que tout les navigateurs reconnaisse l'espace invisible sous le header */

[id]::before {
    content: "";
    display: block;
    height: 5px;
    /* hauteur du header*/
    margin-top: -5px;
}
header h1 {
	margin: 0;
	font-size: 20px;
	color: #23043c;
}
nav a {
	text-decoration:none;
	margin: 0px 10px;
	color: #1e293b;
	font-weight: bold;
	font-size:16px;
}
nav a:hover{
	background-color: #B3B3B3;
	color: white;
}
section {
	max-width: 960px;
	margin: 30px auto;
	padding: 0px 20px;
}
h2 {
	margin-top:0;
	color:#0f172a;
}
.stats {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
}
.stat {
	background: white;
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 20px;
}
th, td {
	border: 1px solid black;
	padding: 8px;
	text-align: left;
}
th {
	background-color:#f1f5f9;
}
footer {
	text-align:center;
	background-color:#767677;
	border-top: 1px solid black;
}
.search-box {
	margin-top: 10px;
}

.carousel-container {
      position: relative;
      width: 600px;   /* largeur = 3 images de 200px */
      margin: auto;
    }

    .carousel {
      overflow: hidden;
      border: 2px solid #ccc;
      border-radius: 10px;
    }

    .carousel-track {
      display: flex;
      transition: transform 1s ease;
    }

    .carousel img {
      width: 200px;
      height: 150px;
      flex-shrink: 0;
    }

    /* Boutons gauche/droite */
    .btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.6);
      color: white;
      border: none;
      padding: 10px;
      cursor: pointer;
      border-radius: 50%;
      font-size: 20px;
    }

    .btn:hover {
      background: rgba(0, 0, 0, 0.8);
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;

    }

	img,
	table,
	td,
	blockquote,
	code,
	pre,
	textarea,
	input,
	iframe,
	object,
	embed,
	.carousel-container,
	video {
	    max-width: 100%;
	}