/* =====================================================================
 * DP – Questions fréquentes
 * =====================================================================
 * Une liste de questions dépliables, séparées d'un filet, avec le signe
 * d'ouverture de la charte à droite.
 *
 * Le dessin est volontairement nu : pas de carte, pas d'ombre, pas d'aplat.
 * Une FAQ est une table des matières, et l'encadrer ligne par ligne la ferait
 * lire comme une grille de produits.
 * ===================================================================== */

.dp-faq {
	width: 100%;
	max-width: var(--dp-faq-width, 62rem);
	font-family: var(--dp-font-base, inherit);
}

.dp-faq__title {
	margin: 0 0 var(--dp-faq-row, 18px);
	font-family: var(--dp-font-heading, inherit);
	font-weight: var(--dp-font-heading-weight, 700);
	font-size: clamp(24px, 3vw, 34px);
	line-height: 1.2;
	/* Couleur explicite : beaucoup de thèmes posent `h1–h6 { color: inherit }`,
	   et le titre remonterait jusqu'à la couleur globale d'Elementor. */
	color: var(--dp-faq-title, var(--dp-color-text, #303030));
}

.dp-faq__intro {
	margin: 0 0 var(--dp-faq-row, 18px);
	font-size: var(--dp-text-body, 16px);
	line-height: var(--dp-leading-relaxed, 1.65);
	color: var(--dp-faq-answer, var(--dp-color-text-muted, #5b5b5b));
}

.dp-faq__item {
	border-top: 1px solid var(--dp-faq-rule, var(--dp-color-border, #dedede));
}

.dp-faq__item:last-child {
	border-bottom: 1px solid var(--dp-faq-rule, var(--dp-color-border, #dedede));
}

/* ── La question ────────────────────────────────────────────────────────
   Un `<button>` : il entre seul dans l'ordre de tabulation, répond à la barre
   d'espace comme à Entrée, et s'annonce comme une commande.

   Deux classes sur les règles de fond et de couleur : le thème repeint tout
   `<button>` en couleur de marque, et sa règle pèse une classe — à égalité,
   c'est l'ordre de chargement qui trancherait. */

.dp-faq .dp-faq__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	width: 100%;
	padding: var(--dp-faq-row, 18px) 0;
	padding-inline-start: var(--dp-faq-inset, 0px);
	border: 0;
	background: none;
	font-family: inherit;
	text-align: left;
	/* Le reset de Hello Elementor met `white-space: nowrap` sur tout bouton :
	   sans cela, une question un peu longue sort de la ligne. */
	white-space: normal;
	cursor: pointer;
	color: var(--dp-faq-question, var(--dp-color-text, #303030));
}

.dp-faq .dp-faq__head:hover {
	background: none;
	color: var(--dp-faq-question, var(--dp-color-text, #303030));
}

.dp-faq .dp-faq__head:hover .dp-faq__marker {
	transform: scale(1.12);
}

.dp-faq .dp-faq__head:focus-visible {
	outline: 3px solid var(--dp-color-primary-strong, #417e88);
	outline-offset: -3px;
	border-radius: var(--dp-radius-sm, 10px);
}

.dp-faq__question {
	font-family: var(--dp-font-heading, inherit);
	font-weight: 700;
	font-size: var(--dp-text-body-sm, 15px);
	line-height: 1.4;
	color: inherit;
}

/* ── Le signe d'ouverture ─────────────────────────────────────────────── */

.dp-faq__marker {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--dp-faq-marker, var(--dp-color-primary-strong, #417e88));
	transition: transform .2s var(--dp-ease, cubic-bezier(.4, 0, .2, 1));
}

/* Le plus devient moins : seul le trait vertical s'efface, et il pivote en
   s'effaçant — un trait qui disparaît net se lit comme un raté d'affichage. */
.dp-faq__bar {
	transform-origin: center;
	transition: transform .25s var(--dp-ease, cubic-bezier(.4, 0, .2, 1)),
	            opacity .25s var(--dp-ease, cubic-bezier(.4, 0, .2, 1));
}

.dp-faq__item.is-open .dp-faq__bar {
	transform: rotate(90deg);
	opacity: 0;
}

/* Le chevron et l'arc se retournent. */
.dp-faq--chevron .dp-faq__item.is-open .dp-faq__marker,
.dp-faq--dome .dp-faq__item.is-open .dp-faq__marker {
	transform: rotate(180deg);
}

.dp-faq--chevron .dp-faq__head:hover .dp-faq__marker,
.dp-faq--dome .dp-faq__head:hover .dp-faq__marker {
	transform: translateY(2px);
}

.dp-faq--chevron .dp-faq__item.is-open .dp-faq__head:hover .dp-faq__marker,
.dp-faq--dome .dp-faq__item.is-open .dp-faq__head:hover .dp-faq__marker {
	transform: rotate(180deg) translateY(2px);
}

/* ── La réponse ─────────────────────────────────────────────────────────
   L'ouverture est animée par une grille à une rangée : `grid-template-rows`
   passe de `0fr` à `1fr`, ce qui s'interpole — contrairement à `height: auto`,
   qui ne s'anime pas et obligerait à mesurer la hauteur en script à chaque
   redimensionnement.

   L'attribut `hidden` est retiré par le script avant l'ouverture, et reposé
   après la fermeture : c'est lui qui sort la réponse du parcours clavier et de
   la lecture d'écran, ce qu'une hauteur nulle ne fait pas. */

.dp-faq__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .3s var(--dp-ease, cubic-bezier(.4, 0, .2, 1));
}

.dp-faq__panel[hidden] {
	display: none;
}

.dp-faq__item.is-open .dp-faq__panel {
	grid-template-rows: 1fr;
}

.dp-faq__answer {
	overflow: hidden;
	min-height: 0;
	font-size: var(--dp-text-body-sm, 15px);
	line-height: var(--dp-leading-relaxed, 1.65);
	color: var(--dp-faq-answer, var(--dp-color-text-muted, #5b5b5b));
	padding-inline-start: var(--dp-faq-inset, 0px);
}

/* Le rembourrage du bas vit sur un enfant et non sur `.dp-faq__answer` : posé
   sur l'élément qui se replie, il resterait visible à l'état fermé et la ligne
   paraîtrait plus haute que les autres. */
.dp-faq__answer > :first-child { margin-top: 0; }
.dp-faq__answer > :last-child { margin-bottom: var(--dp-faq-row, 18px); }

.dp-faq__answer a {
	color: var(--dp-color-primary-strong, #417e88);
}

@media (prefers-reduced-motion: reduce) {
	.dp-faq__panel,
	.dp-faq__marker,
	.dp-faq__bar {
		transition-duration: .01ms;
	}
}

/* Une FAQ s'imprime dépliée : sur papier, personne ne peut cliquer. */
@media print {
	.dp-faq__panel[hidden] {
		display: grid;
	}

	.dp-faq__panel {
		grid-template-rows: 1fr;
	}

	.dp-faq__marker {
		display: none;
	}
}