/* ═══════════════════════════════════════════════════════════════════════════
   07 — LES QUESTIONS QUI REVIENNENT

   Bande lin (`.fmt-section--lin`) : colonne de titre à gauche, accordéons à
   droite. Les panneaux sont des `<details>` natifs servis par le bloc
   core/details : le clavier, le focus et la recherche dans la page
   fonctionnent sans JavaScript. `assets/js/faq.js` n'ajoute que
   l'exclusivité — un panneau ouvert à la fois.

   Les panneaux (`.fmt-card`) se détachent de la bande par la teinte de la
   surface relevée, sans contour ni ombre (règle du client). Toutes les règles
   sont qualifiées par `.fmt-faq` : `fmt/privee-faq` réemploie les classes
   `.fmt-faq__*` avec un autre dessin, il ne doit rien hériter d'ici.
   ═══════════════════════════════════════════════════════════════════════════ */

.fmt-faq {
	/* Le chevron du kit (`chevron-down` de Lucide, trait 1,5), en masque : sa
	   couleur vient de `currentColor`, le tracé ne porte qu'un noir de
	   découpe. Aucun fichier à charger. */
	--faq-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/*
 * core/columns impose une marge basse de 1,75 em : on la rend au rembourrage
 * de la bande.
 */
.fmt-faq .fmt-faq__grille.wp-block-columns {
	gap: var(--space-32) var(--space-64);
	margin-block: 0;
}

/* Colonne de titre à largeur fixe. On l'écrit ici plutôt que dans l'attribut
   `width` du bloc : WordPress y répondrait par un style en ligne. Le repli
   mobile de core/columns reste prioritaire (flex-basis: 100% !important). */
.fmt-faq .fmt-faq__grille > .fmt-faq__intro {
	flex-basis: 400px;
	flex-grow: 0;
}

/* Titre de section du kit : 30 px au téléphone, 48 px au bureau. */
.fmt-faq .fmt-faq__titre {
	font-size: var(--wp--preset--font-size--display-m);
	line-height: var(--lh-section);
	letter-spacing: var(--track-section);
}

.fmt-faq .fmt-faq__liste {
	display: flex;
	flex-direction: column;
	gap: var(--space-12);
}

.fmt-faq .fmt-faq__liste > * {
	margin-block: 0;
}

/* ───────────────────────────────────────────────────────────────────────────
   Un panneau

   `.fmt-card` donne la teinte et le rayon 4 ; on n'ajoute ici que le
   comportement d'ouverture. Au survol de la question, la teinte fonce d'un
   cran, comme toute carte-lien du système.
   ─────────────────────────────────────────────────────────────────────────── */

.fmt-faq .fmt-faq__item:has(> summary:hover) {
	background: var(--surface-contenant-survol);
}

.fmt-faq .fmt-faq__item > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-16);
	padding: var(--space-24);
	border-radius: var(--radius-4);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	line-height: var(--lh-ui);
	color: var(--text-heading);
	cursor: pointer;
	list-style: none;
}

/* Le triangle par défaut du navigateur : masqué des deux façons qui existent.
   Les deux règles restent séparées — un sélecteur inconnu invalide la règle
   entière, et `::-webkit-details-marker` n'existe pas hors de WebKit. */
.fmt-faq .fmt-faq__item > summary::marker {
	content: "";
}

.fmt-faq .fmt-faq__item > summary::-webkit-details-marker {
	display: none;
}

/* Le chevron : fermé il pointe vers le bas, ouvert vers le haut — un
   demi-tour, une fois, à la durée des éléments d'interface. */
.fmt-faq .fmt-faq__item > summary::after {
	content: "";
	flex: none;
	inline-size: 20px;
	block-size: 20px;
	background-color: currentColor;
	-webkit-mask: var(--faq-chevron) center / contain no-repeat;
	mask: var(--faq-chevron) center / contain no-repeat;
	transition: transform var(--dur-ui) var(--ease-soft);
}

.fmt-faq .fmt-faq__item[open] > summary::after {
	transform: rotate(180deg);
}

.fmt-faq .fmt-faq__reponse {
	margin: 0;
	padding: 0 var(--space-24) var(--space-24);
	max-inline-size: 47.5rem;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--lh-body);
	color: var(--text-muted);
	text-wrap: pretty;
}

@media (max-width: 781px) {
	.fmt-faq .fmt-faq__liste {
		gap: var(--space-8);
	}

	.fmt-faq .fmt-faq__item > summary {
		gap: var(--space-12);
		padding: var(--space-16);
		font-size: var(--wp--preset--font-size--medium);
	}

	.fmt-faq .fmt-faq__reponse {
		padding: 0 var(--space-16) var(--space-16);
		font-size: var(--wp--preset--font-size--small);
	}
}