/*
 * Carte-accordéon partagée par les listes de la FAQ (templates/taxonomy-faq_category.html)
 * et par les questions similaires de la page de détail (blocks/faq-related-questions).
 * Design strictement identique au bloc solea/faq-accordion (blocks/faq-accordion/style.css,
 * règles .solea-faq-accordion__item*) pour une expérience cohérente sur tout le parcours FAQ.
 */
.solea-faq-question-grid .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.solea-faq-card.solea-card-clickable {
	cursor: pointer;
}

.solea-faq-card {
	box-sizing: border-box;
	width: 100%;
	padding: 28px 32px;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	background: var(--wp--preset--color--brand-canvas);
}

.solea-faq-card > * {
	margin-block-start: 0 !important;
}

.solea-faq-card__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	color: var(--wp--preset--color--base);
	overflow-wrap: anywhere;
}

.solea-faq-card__heading::-webkit-details-marker {
	display: none;
}

.solea-faq-card__heading .wp-block-post-title {
	min-width: 0;
	margin: 0;
}

.solea-faq-card__heading::after {
	content: "+";
	flex: none;
	display: inline-grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.solea-faq-card[open] > .solea-faq-card__heading::after {
	transform: rotate(45deg);
}

.solea-faq-card__answer,
.solea-faq-card .wp-block-post-excerpt {
	margin: 16px 0 0 !important;
	color: var(--wp--preset--color--brand-muted);
	font-size: 0.9375rem;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.solea-faq-card__answer p {
	margin: 0;
}

.solea-faq-card__link,
.solea-faq-card .wp-block-read-more {
	display: inline-flex;
	margin-top: 12px;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.solea-faq-card__link:hover,
.solea-faq-card__link:focus-visible,
.solea-faq-card .wp-block-read-more:hover,
.solea-faq-card .wp-block-read-more:focus-visible {
	color: var(--wp--preset--color--brand-accent-light);
}

/*
 * Bandeau plein largeur en tête des pages d'archives FAQ. Même langage
 * visuel que le footer (assets/css/site-footer.css) : fond violet foncé et
 * motif de points en ::before plutôt qu'un wp:group avec aria-hidden, pour
 * les mêmes raisons (core/group ne supporte pas aria-hidden en HTML brut).
 *
 * Pas de "align":"full" dans le template : comme le header/footer, ce bloc
 * est déjà au premier niveau du template (hors de "main"), donc il occupe
 * naturellement 100% de la largeur sans les marges négatives générées par
 * alignfull — celles-ci, combinées à useRootPaddingAwareAlignments, créaient
 * un léger écart à droite qui se voyait au niveau du rail mini-sidebar.
 */
.solea-faq-banner {
	position: relative;
	overflow: hidden;
	/*
	 * Ce bloc est un enfant direct de .wp-site-blocks, où les styles
	 * globaux de WordPress (:where(.wp-site-blocks) > *) ajoutent un
	 * margin-block-start de 24px — visible ici comme un liseré blanc entre
	 * le header et le bandeau, puisque cette marge n'a pas de fond.
	 */
	margin-block-start: 0;
	background: var(--wp--preset--color--brand-purple-dark);
	color: var(--wp--preset--color--base);
	/*
	 * padding-top is larger than the other sides to clear .solea-logo-badge
	 * (site-logo-badge.css), which overhangs below the header by design —
	 * otherwise the badge covers the title on this banner.
	 */
	padding: clamp(110px, 12vw, 160px) clamp(28px, 4.5vw, 56px) clamp(64px, 7vw, 104px);
}

.solea-faq-banner::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 520px;
	height: 340px;
	color: var(--wp--preset--color--brand-purple-light);
	opacity: 0.3;
	background-image: radial-gradient(currentColor 1.8px, transparent 1.9px);
	background-size: 13px 13px;
	-webkit-mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
	mask-image: radial-gradient(circle at 100% 0%, #000, transparent 70%);
	pointer-events: none;
}

.solea-faq-banner .solea-faq-search__heading {
	color: var(--wp--preset--color--base);
}

/*
 * Variante réduite pour la page de détail (templates/single-faq.html) : juste
 * le fil d'Ariane + le titre. Le padding-top est plus généreux que le
 * padding-bottom car .solea-logo-badge (site-logo-badge.css) déborde
 * volontairement sous le header — sans cette marge, le badge chevauche le
 * fil d'Ariane/titre juste en dessous.
 */
.solea-faq-banner--small {
	padding: clamp(100px, 11vw, 150px) clamp(28px, 4.5vw, 56px) clamp(40px, 5vw, 64px);
}

.solea-faq-banner--small::before {
	width: 320px;
	height: 220px;
}

.solea-faq-main {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(40px, 5vw, 72px);
}

/*
 * Le badge du logo (site-logo-badge.css) repasse en mode statique (ne
 * déborde plus sous le header) à partir de 1179px, donc la marge de
 * dégagement ci-dessus ne se justifie plus au-delà de ce point.
 */
@media (max-width: 1179px) {
	.solea-faq-banner {
		padding: clamp(64px, 8vw, 96px) 24px 48px;
	}

	.solea-faq-banner--small {
		padding: clamp(64px, 8vw, 96px) 24px 40px;
	}
}