body {
	font-family: 'Arial', sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f5f5f5; /* Couleur principale 1 (légèrement plus claire) */
	color: #444; /* Couleur principale 2 (légèrement plus foncée) */
}

header {
	background-color: #333; /* Couleur principale 2 */
	color: #fff;
	text-align: center;
	padding: 1.5em; /* Un peu plus d'espace autour du texte */
}

section {
	max-width: 800px;
	margin: 20px auto;
	padding: 30px; /* Un peu plus d'espace intérieur */
	background-color: #fff; /* Couleur principale 2 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Légère ombre pour la profondeur */
	border-radius: 8px; /* Coins arrondis pour une touche élégante */
}

iframe {
	width: 100%;
	height: 450px; /* Légèrement plus grande pour un meilleur impact visuel */
	border: none; /* Supprime la bordure autour de la vidéo */
	border-radius: 8px; /* Coins arrondis pour s'harmoniser avec la section */
}

h1 {
	color: #ffd500; /* Couleur principale 2 */
	margin-bottom: 20px; /* Un peu plus d'espace sous le titre */
}

p {
	line-height: 1.8; /* Légèrement plus d'espace entre les lignes */
	color: #555; /* Légèrement plus foncée que la couleur principale 1 */
}

pre {
	font-size:14px;
	line-height: 1.8; /* Légèrement plus d'espace entre les lignes */
	color: #555; /* Légèrement plus foncée que la couleur principale 1 */
}

img{
	width: 100%;
}

a {
	text-decoration: none;
	color: black;
	font-size:15px;
	transition: font-weight 0.1s ease; /* Ajouter une transition en douceur */
}

a:hover {
	text-decoration: none;
	font-weight: bold;
}		

.category {
	color: #666; /* Couleur légèrement plus foncée pour la catégorie */
	margin-top: 5px; /* Un peu d'espace au-dessus de la catégorie */
}

.back-button {
	display: inline-block;
	padding: 10px 20px;
	background-color: #333; /* Couleur principale 2 */
	color: #fff;
	text-decoration: none;
	border-radius: 5px;
	margin-top: 20px;
}
		
.contenu {
	margin-left: 2em;
    margin-right: 2em;
}

.endpage {
	margin-top:5em;
}
/*-----------------
	Diaporama
*/-----------------

img {
vertical-align: middle;
}
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Boutons next & previous */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #ffd500;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position de "next button" à la droite */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* En survol, ajoutez la couleur noire de l'arrière-plan avec un peu see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption */
.text {
color: #ffd500;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #ffffff;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #999999;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #ffd500;
}
/* Fading animation */

.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}

@-webkit-keyframes fade {
from {
  opacity: 0.4;
}
to {
  opacity: 1;
}
}
@keyframes fade {
from {
  opacity: 0.4;
}
to {
  opacity: 1;
}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev,
.next,
.text {
  font-size: 11px;
}
}




<!-- HTML !-->
<button class="button-32" role="button">Retour au PortFolio</button>

/* CSS */
.button32 {
  background-color: #fff000;
  border-radius: 12px;
  color: #000;
  margin:3em 0;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 15px;
  text-align: center;
  transition: 200ms;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button32:not(:disabled):hover,
.button32:not(:disabled):focus {
  outline: 0;
  background: #f4e603;
  box-shadow: 0 0 0 2px rgba(0,0,0,.2), 0 3px 8px 0 rgba(0,0,0,.15);
}

.button32:disabled {
  filter: saturate(0.2) opacity(0.5);
  -webkit-filter: saturate(0.2) opacity(0.5);
  cursor: not-allowed;
}