/* CSS Document */

.accordeon{
	position: relative;
	width: 100%;
	overflow: hidden;
}

.accordeon_contenu{
	position: relative;
	width: 100%;
	overflow: hidden;
	display: none; /* jQuery gère l'affichage */
}

/* =========================================
   ACCORDÉON - TITRES NIVEAU 1
   ========================================= */

.accordeon.niveau1 > .accordeon_titre{
	position: relative;
	padding: 18px 70px 18px 20px;
	cursor: pointer;
	background-color: #ECECEC;	
	
	-webkit-transition: background-color 0.4s;
	-moz-transition: background-color 0.4s;
	-ms-transition: background-color 0.4s;
	-o-transition: background-color 0.4s;
	transition: background-color 0.4s;
}

.accordeon.niveau1 > .accordeon_titre:hover{
	background-color: rgba(0,173,109,0.10);
}

.accordeon.niveau1 + .accordeon.niveau1{
	margin-top: 12px;
}

/* ROND VERT */
.accordeon.niveau1 > .accordeon_titre::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #00b26b;
	z-index: 0;
}

/* PLUS / MOINS BLANC (animé) */
.accordeon.niveau1 > .accordeon_titre::before {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 38px;
	height: 38px;
	z-index: 1;

	/* centrage + rotation éventuelle */
	transform: translateY(-50%) rotate(0deg);
	transform-origin: center;

	/* 2 barres : horizontale + verticale */
	background-image:
		linear-gradient(#fff, #fff),
		linear-gradient(#fff, #fff);
	background-repeat: no-repeat, no-repeat;
	background-position: center center, center center;

	/* + par défaut */
	background-size:
		18px 2px,   /* barre horizontale */
		2px 18px;   /* barre verticale */

	/* Transitions */
	transition:
		transform 0.35s ease,
		background-size 0.25s ease;
}

/* Hover : petite rotation (optionnel) */
.accordeon.niveau1 > .accordeon_titre:hover::before {
	transform: translateY(-50%) rotate(90deg);
}

/* État ouvert : on "rétracte" la barre verticale => + devient - */
.accordeon.niveau1.open > .accordeon_titre::before {
	background-size:
		18px 2px,   /* barre horizontale inchangée */
		2px 0px;    /* barre verticale disparaît */
}

/* (Optionnel) éviter l'effet hover quand c'est déjà ouvert */
.accordeon.niveau1.open > .accordeon_titre:hover::before {
	transform: translateY(-50%) rotate(0deg);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* =========================================
   ACCORDÉON - TITRES NIVEAU 2
   ========================================= */
.accordeon.niveau2 > .accordeon_titre {
  position: relative;
  margin: 0;
  padding: 16px 52px 16px 0px; /* espace à droite pour la flèche */
  border-bottom: 2px solid #DFDFDF;
  cursor: pointer;

  /* Pour bien aligner le contenu */
  display: flex;
  align-items: center;

  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover / focus */
.accordeon.niveau2 > .accordeon_titre:hover {
  background: #F1F1F1;
}

/*
.accordeon.niveau2 > .accordeon_titre:focus,
.accordeon.niveau2 > .accordeon_titre:focus-visible {
  outline: 2px solid #1f4f53;
  outline-offset: -2px;
}*/

/* Flèche (image SVG en pseudo-élément) */
.accordeon.niveau2 > .accordeon_titre::after {
  content: "";
  position: absolute;
  right: 16px;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.25s ease;

  background-image: url("../../images/special/accordeon.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.accordeon.niveau2.open > .accordeon_titre::after {
  transform: translateY(-50%) rotate(180deg);
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

/* ===============================
   ACCORDÉON - TITRES NIVEAU 3
   =============================== */
.accordeon.niveau3 > .accordeon_titre {
  position: relative;
  margin: 0;
  padding: 12px 46px 12px 0px; /* plus compact + espace pour la flèche */
  border-bottom: 2px solid #DFDFDF;
  cursor: pointer;

  display: flex;
  align-items: center;

  color: #00AD6D;

  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover */
.accordeon.niveau3 > .accordeon_titre:hover {
  background: #F1F1F1;
}

/* Flèche droite (SVG niveau 3) */
.accordeon.niveau3 > .accordeon_titre::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 0.25s ease;

  background: url("../../images/special/accordeon2.svg") center / contain no-repeat;
}

/* Rotation quand l'accordéon est ouvert (classe ajoutée par ton JS) */
.accordeon.niveau3.open > .accordeon_titre::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Option alternative si tu pilotes via aria-expanded */
.accordeon.niveau3 > .accordeon_titre[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(180deg);
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */

.accordeon_text_separation{
	position: relative;
	width: 100%;
	border-bottom: 2px solid #DFDFDF;
	margin-top: 10px;
	margin-bottom: 10px;
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */