/* base de la page qui s'applique partout */
body{
	margin-top: 50px;
	margin-left: 20%;
	margin-right: 20%;
	background-color: #fefae0;
	font-family: Arial, sans-serif;
}


/* Media query pour les écrans encore plus petits (par exemple, les smartphones) */
@media (max-width: 480px) {
  body {
		/* marges plus petites pour une meilleur lisibilité */
		margin-left: 5%;
		margin-right: 5%;
  }
}
/* Media query pour les écrans dont la largeur est inférieure à 768px (taille courante pour les tablettes et les mobiles en portrait) */
@media (max-width: 768px) {
  body {
		/* marges adapté à la taille de l'écran */
		margin-left: 10%;
		margin-right: 10%;
  }
	/* ajustement de la couverture du livre et de la description pour un appareil mobile */
	.resume{
		display: block; /* afficher à la verticale */
		width: auto;
	}
	.couverture{
		margin: 5px;
		object-fit: cover;
		width: 100%;
		height: auto;
	}
	.couvertureT{
		font-size: 200%;
		margin: 2%;
	}
	/* ajustement des texte pour un appareil mobile */
	h1{
		font-size: 100%;
		background-color: #dde5b6;
		border-radius: 5px;
		color: #344e41;
	}
	p{
		font-size: 150%;
	}
}
/* media auery pour les écrans plus grands (comme les ordinateurs)*/
@media (min-width: 769px) {
	.resume{
		display: inline-flex; /* afficher à l'horizontale */
		object-fit: contain; /* les élément preennent toute la place du div */

	}
	.couverture{
		/* Empeche l'image de changer de ratio et la met à une taille adapté*/
		box-sizing:content-box;
		object-fit:contain;
		width: 40%;
		height: auto;
	}
	.couvertureT{
		font-size: 250%;
		margin: 2%;
		width: 50%
	}
	h1{
		font-size: 400%;
		background-color: #dde5b6;
		border-radius: 5px;
		color: #344e41;
	}
	p{
		font-size: 180%;
	}
}
/* base pour le résumé et la couverture de l'histoire */
.resume{
	font-size: 8px;
	margin: 2%;
	border-radius: 10px;
	text-align: justify; /* justifier le texte */
}
.couverture{
	border-radius: 10px;
	height: auto;
	padding: 1%;
}


/* style légèrement arrondi confortable à voir pour les images */
img{
	width: 100%;
	border-radius: 10px;
}

/* Style du boutton */
button {
  padding: 17px 40px;
  border-radius: 50px;
  cursor: pointer;
  border: 0;
  background-color: white;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px; /* toute petite ombre */
  letter-spacing: 1.5px;
  text-transform: uppercase; /* mettre le texte en majuscules */
  font-size: 15px;
  transition: all 0.5s ease; /* temps de l'animation */
}
/* illuminer le bouton lorsque survolé */
button:hover {
  letter-spacing: 3px;
  background-color: #31572c;
  color: hsl(0, 0%, 100%);
}
/* animation du bouton lorque cliquer */
button:active {
  letter-spacing: 3px;
  background-color: #31572c;
  color: hsl(0, 0%, 100%);
  transform: translateY(10px);
  transition: 100ms;
}
/* Même chose pour les liens */
a {
  cursor: pointer;
  border: 0;
  letter-spacing: 1.5px;
  text-transform: uppercase; /* mettre le texte en majuscules */
  transition: all 0.5s ease; /* temps de l'animation */
	color: #132a13;
}
/* illuminer le bouton lorsque survolé */
a:hover {
  letter-spacing: 3px;
  color: #31572c;
}



/* style pour les textes des createurs du jeu */
.createurs{
	background-color: #dde5b6;
	padding: 20px;
	border-radius: 5px;
}
.createurs-name{
	background-color: #dde5b6;
	padding: 20px;
	border-radius: 5px;
	width: fit-content
}
/* ajustement de la taille de l'image de classification */
.classification{
	width: 20%;
	height: auto;
}
/* Style pour la liste des genre de l'histoires */
.genre{
	padding: 5px;
	margin: 8px;
	border-radius: 5px;
	color: #ecf39e;
	background-color: #588157;
}
/* Style pour les statistiques du jeu */
.parcours{
	box-sizing: content-box;
	background-color: white;
	padding: 10px;
	border-radius: 10px;
	font-size: 80%;
	display: flex; /* Active Flexbox pour le conteneur */
  align-items: center; /* Aligne les éléments verticalement au centre */
	justify-content: center; /* Centre horizontalement */
	transition: all 0.5s ease; /* temps de l'animation */
}
/* faire une animation uniquement sur les ordinateurs si la souris passe dessus */
@media (min-width: 769px) {
	.parcours:hover{
		background-color: #dde5b6;
		font-size: 200%;
	}
}

.nb{
	color: #31572c;
	font-size: 500%;
}
.nbtext{
	writing-mode: vertical-rl; /* Oriente le texte verticalement */
  text-orientation: upright; /* Maintient les caractères droits */

}
.exlink{
	margin: 10px;
	padding: 5px;
}
.card-container {
  display: flex;
  flex-wrap: wrap; /* Permet aux cartes de passer à la ligne sur les écrans plus petits */
  justify-content: center; /* Centre les cartes horizontalement */
}

.card {
  width: 300px; /* Largeur fixe des cartes */
  margin: 10px; /* Marge autour des cartes */
  overflow: hidden; /* Empêche l'image de dépasser */
	transform: translateY(10px);
  transition: all 0.5s ease;
}

.card:hover{
	width: 320px;
	/* transition: all 0.5s ease; /* temps de l'animation */*/
}


.card p{
	font-size: 100%;
}

.card img {
  width: 100%; /* L'image occupe toute la largeur de la carte */
  height: auto; /* Hauteur automatique pour conserver le ratio */
	background-image: repeating-linear-gradient(45deg, #931F1D 0, #931F1D 2px, transparent 0, transparent 50%);
	background-size: 32px 32px;
}



/* Style pour les écrans plus petits (responsive) */
@media (max-width: 768px) {
  .card {
    width: 90%; /* Les cartes occupent presque toute la largeur de l'écran */
    margin: 10px auto; /* Marge automatique à gauche et à droite pour centrer */

  }
}
.card-content1 {
  padding: 10px; /* Marge intérieure pour le contenu */
	background-color: #ff9b85;
	position: relative;
	top: -10px;
	border-radius: 10px;
	box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.4); /* Ajustez les valeurs ici */
}
.card-content2 {
  padding: 10px; /* Marge intérieure pour le contenu */
	background-color: #ffd97d;
	position: relative;
	top: -10px;
	border-radius: 10px;
	box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.4); /* Ajustez les valeurs ici */
}
.card-content3 {
  padding: 10px; /* Marge intérieure pour le contenu */
	background-color: #ee6055;
	position: relative;
	top: -10px;
	border-radius: 10px;
	box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.4); /* Ajustez les valeurs ici */
}
.card-content4 {
  padding: 10px; /* Marge intérieure pour le contenu */
	background-color: #fdcac7;
	position: relative;
	top: -10px;
	border-radius: 10px;
	box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.4); /* Ajustez les valeurs ici */
}
.card-content5 {
  padding: 10px; /* Marge intérieure pour le contenu */
	background-color: #dde5b6;
	position: relative;
	top: -10px;
	border-radius: 10px;
	box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.4); /* Ajustez les valeurs ici */
}
.card-content6 {
  padding: 10px; /* Marge intérieure pour le contenu */
	background-color: #e5e5e5;
	position: relative;
	top: -10px;
	border-radius: 10px;
	box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.4); /* Ajustez les valeurs ici */
}

.vert{
	background-color: #dde5b6;
	padding: 20px;
	border-radius: 5px;
	color: #344e41;
	display: flex;
	flex-wrap: wrap; /* Permet aux cartes de passer à la ligne sur les écrans plus petits */
}
.verttxt{
	margin-top: 30px;
	padding: 10px;
	box-sizing: content-box;
	border-width: 5px;
	border-style:double;
	border-radius: 10px;
	border-color: #344e41;
	padding-left: 2%;
	padding-right: 2%;
	display: inline-flex; /* afficher à l'horizontale */
	object-fit: contain; /* les élément preennent toute la place du div */
}
@media (max-width: 768px) {
	.verttxt{
		display: block;
	}
}
.verttxt p{
	width: 80%
}
.verttxt img{
	width: 20%;
	height: auto;
	box-sizing:content-box;
	object-fit:contain;
}