/* Affichage des 4 colonnes */
.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 colonnes fixes */
  gap: 20px;
}

/* Taille d'une colonne */
.column {
  padding: 20px;
  box-sizing: border-box;
}

/* Responsive : une colonne par ligne */
@media (max-width: 768px) {
  .grid-container {
	grid-template-columns: 1fr;
  }
}


/* Affichage titre - oeuvres lues, vues, jouées */
.css-tol {
  max-width: 100%;
  padding: 0px;
  font-size: 25px;
  max-width: 980px;
  font-family: "Gotham Narrow",Arial,serif;
  font-weight: 800;
  text-transform: uppercase;
}

/* Réduction de la taille du titre précédent pour les écrans mobiles (max-width: 768px) */
@media (max-width: 768px) {
  .css-tol {
	font-size: 24px;
  }
}

/* Affichage titre oeuvres */
.css-titreoeuvre {
  text-align : center;
  margin: 5 px 0 25px;
  font-size: 13px;
}

/* Affichage date de parution */
.css-dateparution {
  text-align : center;
  margin: 5px 0 25px;
  font-size: 12px;
}

/* Affichage console de jeu */
.css-consoledejeu {
  text-align : center;
  margin: 5px 0 25px;
  font-size: 12px;
}


.column img {
  opacity: 1;
  cursor: auto;
}

.column img:hover {
  opacity: 0.8;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

body {
  font-family: Arial;
  padding: 10px;
  background: white;
  display: block;
  margin: 8px;
}





.css-om3e2 {
  text-align : center;
  max-width: 100%;
  padding: 20px;
  font-size: 42px;
  max-width: 980px;
  
}

.css-cvK8p {
  
  color: var(--article-body-color);
	  line-height: 1.6;
	  margin-top: 0px;
	  margin-right: auto;
	  margin-bottom: 0px;
	  margin-left: auto;;
	  max-width: 980px;
	  padding: 30px;
	  font-family : "Open Sans",Arial,sans-serif;
	  font-size: 16px;
	}
	
	
	.rtecenter {
	  max-width: 980px;
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	}
	
	.rtecenter2 {
	  max-width: 450px;
	  display: block;
	  margin-left: auto;
	  margin-right: auto;
	}
	
	.css-cvK8p img {
	  margin: 1em 0;
	  max-width: 100%;
	}
	
	
	
	h1, h2, h3, h4, h5, h6 {
	  font-family: "Gotham Narrow",Arial,serif;
	  font-weight: 800;
	  text-transform: uppercase;
	}
	
	.collapsible {
	  color: black;
	  cursor: pointer;
	  padding: 18px;
	  width: 100%;
	  border: none;
	  text-align: left;
	  outline: none;
	  font-size: 15px;
	}
	
	.active, .collapsible:hover {
	  background-color: ;
	}
	
	.collapsible:after {
	  content: '\002B';
	  color: black;
	  font-weight: bold;
	  float: right;
	  margin-left: 5px;
	}
	
	.active:after {
	  content: "\2212";
	}
	
	.content {
	  padding: 0 18px;
	  max-height: 0;
	  overflow: hidden;
	  transition: max-height 0.2s ease-out;
	  background-color: #ffffff;
	}
	
	html {
overflow-y: scroll;
}
	
/* Style the button that is used to open and close the collapsible content */
.collapsible {
  background-color: #FFFFFF;
  color: #FFFFFF;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
  background-color: #FFFFFF;
}