/* Accordions CSS scope uniquement sur .accordions-tableau */
.accordions-tableau {
	padding: 20px;
	max-width: 70%; /* Largeur maximale choisie */
	margin: 0 auto;   /* Centrage horizontal */
  }
  
  .accordions-tableau .accordion {
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 8px;
	margin-bottom: 1rem;
	overflow: hidden;
	display: grid;
	grid-template-rows: 0fr 0fr;
	transition: grid-template-rows 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	opacity: 0.9;
  }
  
  .accordions-tableau .accordion:hover {
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.5);
  }
  
  .accordions-tableau .accordion:active {
	opacity: 1;
	box-shadow: 0 4px 7px 0 rgba(0, 0, 0, 0.3);
  }
  
  .accordions-tableau .accordion:target {
	/* Lorsque l’élément est ciblé, on étend la zone de contenu */
	grid-template-rows: 0fr 1fr;
  }
  
  .accordions-tableau .title a {
	display: flex;
	align-items: center;
	padding: 1rem 1.25rem;
	font-size: 1.25rem;
	font-weight: 800;
	color: inherit;
	text-decoration: none;
  }
  
  .accordions-tableau .title a::before {
	content: "\25B6"; /* Flèche droite */
	margin-right: 0.75rem;
	transition: transform 0.3s ease;
  }
  
  .accordions-tableau .accordion:target .title a::before {
	/* La flèche pivote quand l'accordéon est ouvert */
	transform: rotate(90deg);
  }
  
  .accordions-tableau .content {
	overflow: hidden;
	font-size: 1rem;
	line-height: 1.4;
	padding: 0 1.25rem;
	/* Cache le contenu en fermant sa hauteur */
	max-height: 0;
	transition: max-height 0.3s ease, padding 0.3s ease;
  }
  
  .accordions-tableau .accordion:target .content {
	/* Dévoile le contenu quand l’élément est ciblé (ajuste max-height si besoin) */
	max-height: 500px;
	padding: 1rem 1.25rem;
  }
  
  .accordions-tableau .content p {
	margin-bottom: 1rem;
  }
  
  .accordions-tableau .content a {
	color: inherit;
	font-weight: 800;
	text-decoration: underline;
  }
  
  .accordions-tableau .wrapper {
	padding: 1.05rem 1.25rem;
  }