/**
 * FAQ Plugin - faq-styles.css
 *
 * Variables CSS surchargeables par le thème :
 *
 *   .faq-container {
 *     --faq-border-color:   #votre-couleur;
 *     --faq-question-color: #votre-couleur;
 *     --faq-answer-color:   #votre-couleur;
 *     --faq-accent-color:   #votre-couleur;
 *   }
 */

/* -------------------------------------------------------------------------
   Variables — valeurs par défaut, surchargeables par le thème.
   ------------------------------------------------------------------------- */
.faq-container {
	--faq-border-color:    #ddd;
	--faq-question-color:  #333;
	--faq-answer-color:    #555;
	--faq-accent-color:    currentColor;
	--faq-spacing:         15px;
	--faq-transition-dur:  0.3s;

	margin: 20px 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
   Item (conteneur question + réponse).
   ------------------------------------------------------------------------- */
.faq-item {
	margin-bottom: var( --faq-spacing );
	border-bottom: 1px solid var( --faq-border-color );
	padding-bottom: 10px;
}

.faq-item:last-child {
	border-bottom: none;
}

/* -------------------------------------------------------------------------
   Question (rôle bouton).
   Reset des marges/paddings pour neutraliser les styles h3 du thème.
   ------------------------------------------------------------------------- */
.faq-question {
	display:      flex;
	align-items:  center;
	cursor:       pointer;
	user-select:  none;
	font-weight:  bold;
	color:        var( --faq-question-color );

	/* Reset des marges h3 imposées par le thème. */
	margin:  0;
	padding: 8px 0;

	/* Assure que le focus est visible sans outline par défaut du thème. */
	outline: none;
}

/* Focus visible (accessibilité clavier). */
.faq-question:focus-visible {
	outline:        2px solid var( --faq-accent-color );
	outline-offset: 3px;
	border-radius:  2px;
}

/* Flèche d'indicateur. */
.faq-question::before {
	content:      '▶';
	font-size:    0.75em;
	flex-shrink:  0;
	margin-right: 8px;
	color:        var( --faq-accent-color );
	transition:   transform var( --faq-transition-dur ) ease;
}

/* Rotation de la flèche quand la réponse est ouverte.
   Double sélecteur : classe CSS + attribut ARIA pour la robustesse. */
.faq-question.open::before,
.faq-question[aria-expanded="true"]::before {
	transform: rotate( 90deg );
}

/* -------------------------------------------------------------------------
   Réponse.

   IMPORTANT : max-height est volontairement absent de .faq-answer.is-open.
   C'est le JS qui l'injecte via style inline (answer.scrollHeight),
   ce qui garantit une animation calibrée sur la hauteur réelle du contenu
   et non sur une valeur arbitraire (ex. 2000px).

   Seuls max-height et opacity sont dans la transition — pas le padding,
   qui ajouterait du jank visuel sans bénéfice.
   ------------------------------------------------------------------------- */
.faq-answer {
	overflow:    hidden;
	max-height:  0;
	opacity:     0;

	/* Padding constant — clippé par overflow:hidden quand max-height vaut 0. */
	padding: 8px 8px 8px 24px;

	color:     var( --faq-answer-color );
	font-size: 1em;

	/* Transition uniquement sur max-height et opacity. */
	transition:
		max-height var( --faq-transition-dur ) ease,
		opacity    var( --faq-transition-dur ) ease;
}

/* État ouvert — max-height est défini par le JS en inline style. */
.faq-answer.is-open {
	opacity:    1;
	margin-top: 4px;
}

/* Sous-titres dans les réponses. */
.faq-answer h3,
.faq-answer h4 {
	font-size:     1.05em;
	font-weight:   bold;
	margin-top:    10px;
	margin-bottom: 5px;
	color:         var( --faq-question-color );
}

/* Liens dans les réponses. */
.faq-answer a {
	color: var( --faq-accent-color );
}