/*
 * « Questions fréquentes » (section 06/08 of the validated homepage) and its generic
 * twin « Accordéon ». Loaded only when a group carries .is-style-gb-faq.
 *
 * Native <details>/<summary>: the marker is a drawn « + » (two 4 px bars) that turns
 * into a cross when the answer opens. The summary is rich text, so the bars live on
 * the summary's own ::before/::after, not on a span (the mockup's .faq__m).
 * Rules: structural 22 % of the current ink, top of the list and bottom of each item.
 */
.is-style-gb-faq { margin-block-start: clamp(2rem, 4vw, 3rem);
	border-block-start: 3px solid color-mix(in oklab, currentColor 22%, transparent); }
/* WordPress spaces the children of a flow group (blockGap): the rules carry the rhythm here. */
.is-style-gb-faq > .wp-block-details { margin-block: 0;
	border-block-end: 3px solid color-mix(in oklab, currentColor 22%, transparent); }

.is-style-gb-faq summary { position: relative; display: block; list-style: none; cursor: pointer;
	padding-block: 1.15rem; padding-inline-end: calc(1.05rem + 1.5rem);
	font-family: var(--wp--preset--font-family--heading); font-weight: 700; letter-spacing: -0.03em;
	font-size: clamp(1rem, 1.7vw, 1.3rem); line-height: 1.25;
	transition: padding-inline-start 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-style-gb-faq summary::-webkit-details-marker { display: none; }
.is-style-gb-faq summary:hover { padding-inline-start: 0.7rem; }
.is-style-gb-faq summary:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* The « + »: two bars sharing one centre, 1.05 rem wide, 4 px thick, at the end of the line. */
.is-style-gb-faq summary::before,
.is-style-gb-faq summary::after { content: ""; position: absolute; inset-inline-end: 0;
	inset-block-start: calc(50% - 2px); inline-size: 1.05rem; block-size: 4px; background: currentColor;
	transition: rotate 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-style-gb-faq summary::after { rotate: 90deg; }
.is-style-gb-faq .wp-block-details[open] > summary::before { rotate: 135deg; }
.is-style-gb-faq .wp-block-details[open] > summary::after { rotate: 225deg; }

/* The answer: reading width, breathing room before the next rule. */
.is-style-gb-faq .wp-block-details > :not(summary) { margin-block: 0; max-inline-size: 65ch; line-height: 1.55; }
.is-style-gb-faq .wp-block-details > :not(summary) + * { margin-block-start: 0.8rem; }
.is-style-gb-faq .wp-block-details > :last-child:not(summary) { padding-block-end: 1.5rem; }

/* The mockup's breakpoints for its offsets (d4-pavillon.css, 1200 and 760 px): the socle
   has no media query for .is-style-gb-decale(-fin), so the two elements of this section
   carry their own — on a phone, the title and the list take the whole rive. */
@media (max-width: 1200px) {
	.gb-faq__tete.is-style-gb-decale { margin-inline-start: clamp(0rem, 7vw, 7rem); }
}
@media (max-width: 760px) {
	.gb-faq__tete.is-style-gb-decale { margin-inline-start: 0; }
	.is-style-gb-faq.is-style-gb-decale-fin { margin-inline-end: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.is-style-gb-faq summary, .is-style-gb-faq summary::before, .is-style-gb-faq summary::after { transition: none; }
}