/*
 * « Pourquoi s’engager ? » — section 05/08 of the validated homepage — and its
 * generic twin, the indexed list. Loaded only when a list carries
 * .is-style-gb-indexee or a group carries .is-style-gb-pourquoi.
 *
 * Source: d4-pavillon.css « les bénéfices, en indices fantômes » + « lien-detail ».
 * Colours: currentColor only — the couple variation of the section sets the ink.
 */

/* ─────────────────────────────── the indexed list (generic) ── */
/* Two columns; the index « 01 » … is a CSS counter drawn in ::before, so it is
   never in the editor's content (the SA adds an item, the numbering follows). */
.wp-block-list.is-style-gb-indexee { list-style: none; margin: 0; padding: 0; counter-reset: gb-indexee;
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(2.5rem, 5vw, 5rem); }
/* The item is a hanging indent, not a grid: a grid would turn every inline run
   and every <strong> of a plain-text item into its own cell. The index is a FLOAT
   pulled back into the padding (zero-width margin box, so it never shortens a line):
   it sits on the first line whether the text follows it inline (front) or in the
   box the editor wraps around a list item's text (li > div) — same rendering in both
   (05/09). Its line box equals the text's, so the two baselines meet. */
.is-style-gb-indexee > li { --gb-indexee-col: clamp(2.6rem, 4vw, 4rem); --gb-indexee-gap: clamp(0.8rem, 1.6vw, 1.4rem);
	--gb-indexee-retrait: 0rem; --gb-indexee-taille: clamp(1.05rem, 1.7vw, 1.4rem);
	position: relative; counter-increment: gb-indexee; margin: 0;
	padding-block: clamp(0.9rem, 1.8vw, 1.4rem);
	padding-inline-start: calc(var(--gb-indexee-col) + var(--gb-indexee-gap) + var(--gb-indexee-retrait));
	font-size: var(--gb-indexee-taille); line-height: 1.3;
	border-block-end: 3px solid color-mix(in oklab, currentColor 22%, transparent);
	transition: padding-inline-start 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* Hover moves the ink and the padding, never the geometry of the list. */
.is-style-gb-indexee > li:hover { --gb-indexee-retrait: 0.7rem; }
/* The ghost index: Unbounded 900, 30 % ink, full ink on hover. A ::before is
   invisible to assistive technology by nature — no aria-hidden needed. */
.is-style-gb-indexee > li::before { content: counter(gb-indexee, decimal-leading-zero);
	float: inline-start; inline-size: var(--gb-indexee-col);
	margin-inline: calc(-1 * (var(--gb-indexee-col) + var(--gb-indexee-gap))) var(--gb-indexee-gap);
	font-family: var(--wp--preset--font-family--heading); font-weight: 900;
	font-size: clamp(1.1rem, 1.8vw, 1.65rem); line-height: calc(1.3 * var(--gb-indexee-taille)); opacity: 0.78;
	font-feature-settings: "tnum"; letter-spacing: -0.055em; transition: opacity 0.25s; }
.is-style-gb-indexee > li:hover::before { opacity: 1; }

/* An item may be a link (retour client du 02/09 : each benefit leads to its
   development on « Pourquoi adhérer ? »). The link stretches over the whole
   item (::before) ; the ↗ only shows on hover or focus — affordance without noise. */
/* `.wp-block-list` is load-bearing: the socle's `.entry-content a:not([class])`
   (0,2,1) makes every bare link inline-block — an atomic box that would inherit
   the negative text-indent and throw the index onto the next line as soon as
   the text wraps (seen at 390 px). (0,2,2) keeps the link inline. */
.wp-block-list.is-style-gb-indexee > li a { color: inherit; text-decoration: none; display: inline; min-block-size: 0; }
.is-style-gb-indexee > li a::before { content: ""; position: absolute; inset: 0; }
.is-style-gb-indexee > li a::after { content: "↗"; display: inline-block; margin-inline-start: 0.45em;
	font-family: var(--wp--preset--font-family--data); font-weight: 400; font-size: 0.75em;
	opacity: 0; translate: -4px 4px; transition: opacity 0.22s, translate 0.22s; }
.is-style-gb-indexee > li:hover a::after,
.is-style-gb-indexee > li a:focus-visible::after { opacity: 1; translate: 0 0; }
/* The focus ring must frame the whole item, not the inline text: the link is
   stretched, so the ring is drawn by the item when its link is focused. */
.is-style-gb-indexee > li a:focus-visible { outline: none; }
.is-style-gb-indexee > li:has(a:focus-visible) { outline: 3px solid currentColor; outline-offset: 3px; }

/* ──────────────────────────────────── the section (homepage) ── */
/* .gb-tete is a flex drawn by the socle: WordPress's flow layout would still
   push the h2 down by one blockGap. */
.is-style-gb-pourquoi .gb-tete > * { margin-block-start: 0; }
.is-style-gb-pourquoi .is-style-gb-indexee { margin-block-start: clamp(2rem, 4vw, 3rem); }

/* ──────────────────────────────────────────── adaptations ── */
/* The offset of the title follows the mockup: shorter under 1200 px, gone under
   760 px. The socle only knows the wide value — set here, for this section. */
@media (max-width: 1200px) {
	.is-style-gb-pourquoi .is-style-gb-decale { margin-inline-start: clamp(0rem, 7vw, 7rem); }
}
@media (max-width: 760px) {
	.wp-block-list.is-style-gb-indexee { grid-template-columns: 1fr; }
	.is-style-gb-pourquoi .is-style-gb-decale { margin-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.is-style-gb-indexee > li, .is-style-gb-indexee > li::before, .is-style-gb-indexee > li a::after { transition: none; }
	.is-style-gb-indexee > li a::after { translate: 0 0; }
}