/*
 * « La démarche » — section 04/08 of the validated homepage — and its generic
 * twin « Étapes ». Loaded only when a block carries .is-style-gb-demarche,
 * .is-style-gb-sceau or .is-style-gb-temps.
 *
 * Three independent styles: the seal and the steps work outside the section.
 * Colours: currentColor and presets only. Sizes: theme.json or the literal
 * clamp() of d4-pavillon.css.
 */

/* ───────────────────────────────── the section: title row + seal ── */
/* Title and seal share one row, the seal AGAINST the title (justify-content:
   start), not pushed to the right edge: the 3-year cycle qualifies the step. */
.is-style-gb-demarche .gb-demarche__tete { display: grid; grid-template-columns: auto auto; justify-content: start;
	align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.is-style-gb-demarche .gb-demarche__tete > *,
.is-style-gb-demarche .gb-tete > * { margin-block-start: 0; }
/* The seal straddles the top edge of the section: --haut exceeds the section
   padding (7.5 rem max), the excess is the visible overlap. */
.is-style-gb-demarche .gb-enjambe { --haut: clamp(5.5rem, 11vw, 11rem);
	position: relative; z-index: 3; margin-block-start: calc(var(--haut) * -1); }
.is-style-gb-demarche .gb-demarche__norme { max-inline-size: var(--wp--custom--mesure);
	font-size: var(--wp--preset--font-size--large); } /* one step above the body (SA, 11/09) */

/* ───────────────────────────────────────────────────── the seal ── */
/* A group carrying the inverse couple, cut to the festooned shape by the mask.
   Label on top, then value and unit side by side on one baseline. */
.is-style-gb-sceau { display: grid; grid-template-columns: auto auto; justify-content: center; align-content: center;
	align-items: baseline; column-gap: 0.08em; text-align: center; box-sizing: border-box;
	inline-size: clamp(11rem, 18vw, 17rem); aspect-ratio: 1; padding: 18%;
	-webkit-mask: url("../../img/sceau.svg") center / contain no-repeat;
	mask: url("../../img/sceau.svg") center / contain no-repeat; }
.is-style-gb-sceau > * { margin-block-start: 0; }
.is-style-gb-sceau .gb-sceau__l { grid-column: 1 / -1; font-size: clamp(0.7rem, 0.95vw, 0.875rem); line-height: 1.24;
	margin-block-end: 0.3em; }
.is-style-gb-sceau .gb-sceau__v,
.is-style-gb-sceau .gb-sceau__u { font-family: var(--wp--preset--font-family--heading); font-weight: 900;
	line-height: 1.02; letter-spacing: -0.055em; font-feature-settings: "tnum"; }
/* The label spanning both columns widens them: value and unit must hug the seam
   (end / start), not the centre of their own column — else « 3 » and « ans » drift apart. */
.is-style-gb-sceau .gb-sceau__v { font-size: clamp(1.9rem, 3.3vw, 2.9rem); text-align: end; }
.is-style-gb-sceau .gb-sceau__u { font-size: calc(clamp(1.9rem, 3.3vw, 2.9rem) * 0.38); text-align: start; padding-inline-start: 0.12em; }

/* ─────────────────────────────────────────── the linked steps ── */
/* A columns block drawn as a grid: no gutter, a 3 px rule between the steps,
   a 5 px thread on top that reveals as the row enters the viewport. */
.wp-block-columns.is-style-gb-temps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
	position: relative; margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.wp-block-columns.is-style-gb-temps::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0;
	block-size: 5px; background: currentColor; transform-origin: 0 50%;
	animation: gb-temps-fil 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes gb-temps-fil { from { scale: 0 1; } to { scale: 1 1; } }
/* Scroll-driven where supported: the thread draws itself as the row comes up. */
@supports (animation-timeline: view()) {
	.wp-block-columns.is-style-gb-temps::before { animation-timeline: view(); animation-range: cover 0% cover 30%; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-columns.is-style-gb-temps::before { animation: none; scale: 1 1; }
}

.is-style-gb-temps > .wp-block-column { display: grid; gap: 0.7rem; align-content: start; position: relative;
	padding: 1.6rem clamp(1rem, 2vw, 1.8rem) 1.6rem 0; }
.is-style-gb-temps > .wp-block-column > * { margin-block-start: 0; margin-block-end: 0; }
.is-style-gb-temps > .wp-block-column + .wp-block-column { padding-inline-start: clamp(1rem, 2vw, 1.8rem);
	border-inline-start: 3px solid color-mix(in oklab, currentColor 22%, transparent); }

/* Ghost index: hushed until the step is hovered. */
.is-style-gb-temps .gb-temps__n { font-family: var(--wp--preset--font-family--heading); font-weight: 900;
	font-size: clamp(2.3rem, 4.2vw, 4rem); line-height: 0.9; font-feature-settings: "tnum"; letter-spacing: -0.06em;
	opacity: 0.78; transition: opacity 0.25s; }
.is-style-gb-temps > .wp-block-column:hover .gb-temps__n { opacity: 1; }

/* The step's title is a link that covers the whole step; the ↗ only shows on
   hover or focus — the affordance without the noise. */
.is-style-gb-temps .wp-block-heading { font-size: clamp(1rem, 1.7vw, 1.4rem); }
.is-style-gb-temps .wp-block-heading a { color: inherit; text-decoration: none; }
.is-style-gb-temps .wp-block-heading a::before { content: ""; position: absolute; inset: 0; }
.is-style-gb-temps .wp-block-heading a::after { content: "\2197"; position: absolute; inset-block-start: 0.2rem;
	inset-inline-end: clamp(0.4rem, 1vw, 1.2rem); font-family: var(--wp--preset--font-family--data); font-weight: 400;
	font-size: 1rem; letter-spacing: 0; opacity: 0; translate: -4px 4px; transition: opacity 0.22s, translate 0.22s; }
.is-style-gb-temps > .wp-block-column:hover .wp-block-heading a::after,
.is-style-gb-temps .wp-block-heading a:focus-visible::after { opacity: 1; translate: 0 0; }
.is-style-gb-temps .is-style-gb-note { max-inline-size: 28ch; }

/* The 3D vignette: hard shadow, lifts on hover. */
.is-style-gb-temps .gb-temps__vignette { margin: 1rem 0 0; }
.is-style-gb-temps .gb-temps__vignette img { display: block; inline-size: min(100%, 11rem); block-size: auto;
	box-shadow: 8px 8px 0 color-mix(in oklab, var(--gb-encre) 22%, transparent); /* transitioned: resolved ink, see ouverture.css */
	transition: translate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-style-gb-temps > .wp-block-column:hover .gb-temps__vignette img { translate: -3px -3px;
	box-shadow: 14px 14px 0 color-mix(in oklab, var(--gb-encre) 28%, transparent); }

/* The monoline icon (generic twin, or when the SA removes the vignette). */
.is-style-gb-temps .gb-icone { inline-size: clamp(3rem, 4vw, 3.8rem); block-size: auto; aspect-ratio: 1; fill: none;
	stroke: currentColor; stroke-width: var(--wp--custom--trait-monoligne); stroke-linecap: round; stroke-linejoin: round;
	opacity: 0.55; margin-block-start: 0.8rem; transition: opacity 0.25s, rotate 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.is-style-gb-temps > .wp-block-column:hover .gb-icone { opacity: 1; rotate: -7deg; }

/* ───────────────────────────────────────────────── adaptations ── */
@media (max-width: 1000px) {
	.wp-block-columns.is-style-gb-temps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.is-style-gb-temps > .wp-block-column:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; }
}
@media (max-width: 760px) {
	.wp-block-columns.is-style-gb-temps { grid-template-columns: minmax(0, 1fr); }
	.is-style-gb-temps > .wp-block-column + .wp-block-column { border-inline-start: 0; padding-inline-start: 0;
		border-block-start: 3px solid color-mix(in oklab, currentColor 22%, transparent); }
	.is-style-gb-temps .gb-temps__vignette img { inline-size: min(60%, 12rem); }
	/* The seal still straddles the top edge, but sits first in the title row —
	   no longer out at the right edge, far from what it qualifies. */
	.is-style-gb-demarche .gb-demarche__tete { grid-template-columns: minmax(0, 1fr); }
	.is-style-gb-demarche .gb-enjambe { order: -1; inline-size: fit-content; margin-block-start: 0; }
}