/*
 * « Le référentiel » — section 03/08 of the validated homepage — and the generic
 * « Encadré documentaire ». Loaded only when a group carries .is-style-gb-familles,
 * .is-style-gb-famille or .is-style-gb-encadre.
 *
 * The socle zeroes p and heading margins, so every vertical rhythm is set here.
 * Colours: currentColor and the 22 % structural rule only.
 */

/* ───────────────────────────────────────── the section ── */
.is-style-gb-familles .gb-familles__chapo { margin-block-start: 1.6rem; }
.is-style-gb-familles .gb-familles__chapo > .is-style-gb-chapo { max-inline-size: 52ch; }
.is-style-gb-familles .gb-familles__liste { margin-block-start: clamp(2.5rem, 5vw, 4rem); }
.is-style-gb-familles .gb-familles__liste > * { margin-block-start: 0; }
.is-style-gb-familles .gb-familles__liste > .is-style-gb-famille:last-child { border-block-end: 3px solid color-mix(in oklab, currentColor 22%, transparent); }
.is-style-gb-familles .is-style-gb-encadre { margin-block-start: clamp(2.5rem, 5vw, 4rem); }

/* ───────────────────────────────────── one family row ── */
/* The vignette becomes the structure of the page: a big column at left, the
   criteria at right. Drawn in CSS (a custom column template), so the flow
   margins of the children are reset. */
.is-style-gb-famille { display: grid; grid-template-columns: clamp(8rem, 13vw, 14rem) minmax(0, 1fr);
	gap: clamp(1.2rem, 3vw, 3rem); align-items: start; padding-block: clamp(1.6rem, 3vw, 2.6rem);
	border-block-start: 3px solid color-mix(in oklab, currentColor 22%, transparent); }
.is-style-gb-famille > * { margin-block-start: 0; }
.is-style-gb-famille .gb-famille__vignette { margin: 0; }
.is-style-gb-famille .gb-famille__vignette img { display: block; inline-size: 100%; block-size: auto;
	box-shadow: 7px 7px 0 color-mix(in oklab, currentColor 22%, transparent);
	transition: rotate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* The hover tilts the vignette; the row's geometry never moves. */
.is-style-gb-famille:hover .gb-famille__vignette img { rotate: -3deg; }
.is-style-gb-famille .gb-famille__titre { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1rem; }
.is-style-gb-famille .gb-famille__titre > * { margin-block-start: 0; }
.is-style-gb-famille .gb-famille__titre .wp-block-heading { font-size: clamp(1.05rem, 1.8vw, 1.55rem); }
.is-style-gb-famille .gb-famille__nombre { opacity: 0.8; }
.is-style-gb-famille .gb-famille__note { margin-block-start: 0.4rem; }
/* The criteria: two columns, reference in Martian Mono then the label. */
.is-style-gb-famille .gb-famille__criteres { list-style: none; margin: 1.1rem 0 0; padding: 0;
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem clamp(1.5rem, 3vw, 3rem);
	max-inline-size: 70rem; }
/* The item is a hanging indent, NOT a grid: the editor wraps the text of a list item
   in its own box (li > div), and a grid would drop that whole box in the reference
   column (05/09). The reference is an inline block pulled back into the padding, so
   the same rule draws the same two columns in the editor and on the front. */
.is-style-gb-famille .gb-famille__criteres > li { padding-inline-start: 4.6rem;
	font-size: 0.9375rem; line-height: 1.34; padding-block: 0.3rem; margin: 0; }
/* 0.6875 rem: the accessibility floor of the socle (the mockup wrote 0.625). */
.is-style-gb-famille .gb-famille__criteres li strong { display: inline-block; inline-size: 4rem;
	margin-inline: -4.6rem 0.6rem; font-family: var(--wp--preset--font-family--data);
	font-size: 0.6875rem; font-variation-settings: "wdth" 82; letter-spacing: 0.05em; opacity: 0.8;
	font-weight: 600; }

/* ─────────────────────────────── the documentary box ── */
/* flow-root contains the floated illustration; the border is the full ink. */
.is-style-gb-encadre { display: flow-root; position: relative; padding: clamp(1.6rem, 3.4vw, 3rem);
	border: 4px solid currentColor; }
.is-style-gb-encadre .gb-encadre__illu { float: inline-end; inline-size: min(34%, 22rem);
	margin: 0 0 1.4rem clamp(1.4rem, 3vw, 2.6rem); }
.is-style-gb-encadre .gb-encadre__illu img { display: block; inline-size: 100%; block-size: auto;
	box-shadow: 10px 10px 0 color-mix(in oklab, currentColor 22%, transparent); }
.is-style-gb-encadre .gb-encadre__fiche { margin-block-start: 1.4rem; max-inline-size: 72ch; }
.is-style-gb-encadre .gb-encadre__fiche > * { margin-block-start: 0; }
/* One row = label / value, on a 2 px structural rule. */
.is-style-gb-encadre .gb-encadre__ligne { display: grid; grid-template-columns: minmax(0, 12rem) 1fr; gap: 1rem;
	padding-block: 0.75rem; border-block-start: 2px solid color-mix(in oklab, currentColor 22%, transparent); }
.is-style-gb-encadre .gb-encadre__ligne > * { margin-block-start: 0; }
/* Full ink (29/09/2026): at 0.7 this 12 px label fell to 3.99:1 on glace, and below 4.5:1 on
   seven of the nine couples a section can take. Hierarchy is carried by size and face. */
.is-style-gb-encadre .gb-encadre__ligne > :first-child { opacity: 1; }
.is-style-gb-encadre .gb-encadre__ref { font-size: 0.9375rem; letter-spacing: 0.05em; }
.is-style-gb-encadre .gb-encadre__audit { margin-block-start: 1.4rem; }

/* ──────────────────────────────────────── adaptations ── */
@media (max-width: 1200px) {
	/* The socle's offset has no breakpoint yet: scoped here, same values as the mockup. */
	.is-style-gb-familles .is-style-gb-decale { margin-inline-start: clamp(0rem, 7vw, 7rem); }
}
@media (max-width: 1000px) {
	.is-style-gb-famille { grid-template-columns: clamp(6rem, 14vw, 9rem) minmax(0, 1fr); }
	.is-style-gb-famille .gb-famille__criteres { grid-template-columns: 1fr; }
	.is-style-gb-encadre .gb-encadre__illu { float: none; inline-size: 100%; margin: 0 0 1.6rem; }
	.is-style-gb-encadre .gb-encadre__ligne { grid-template-columns: 1fr; gap: 0.2rem; }
}
@media (max-width: 760px) {
	.is-style-gb-familles .is-style-gb-decale { margin-inline: 0; }
	.is-style-gb-famille { grid-template-columns: 1fr; }
	.is-style-gb-famille .gb-famille__vignette { inline-size: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.is-style-gb-famille:hover .gb-famille__vignette img { rotate: none; }
}