/*
 * « Ouverture » — section 01/08 of the validated homepage, and the generic page
 * opening. Loaded only when a group carries .is-style-gb-ouverture,
 * .is-style-gb-drisse or .is-style-gb-pavillon.
 *
 * The halyard (drisse) is a native flex group (space-between, wrap): the SA keeps
 * the native controls, WordPress zeroes the block-gap margins itself, and only the
 * gap is ours. The line is a ::before of the group, the ring a ::before of each
 * pavillon — nothing the SA can delete by accident, so no extra block, no lock.
 */

/* ─────────────────────────────── the rive: title, lyrique, chapô, buttons ── */
/* The rive is a flow group: its rhythm is set here, not by the theme block gap. */
.is-style-gb-ouverture .gb-ouverture__rive > * { margin-block-start: clamp(2rem, 4vw, 3.4rem); }
.is-style-gb-ouverture .gb-ouverture__rive > :first-child { margin-block-start: 0; }
/* The light second line hugs the h1 — .34em of its own size, the mockup's <span>. */
.is-style-gb-ouverture .gb-ouverture__rive > .is-style-gb-lyrique { margin-block-start: 0.34em; }

/* Title + logo (11/09): the round certification mark FLOATS at the right of the h1.
   A flex row was tried first: it took its width from the title, and the one long
   word (« ENVIRONNEMENTALE ») broke in two at 1440. Floated, the mark only borrows
   the first two lines, which are short; the last line keeps the full measure.
   The white tile, its padding and its offset shadow (11/09) are REMOVED at the
   client's request (Marianne, 15/09): transparent ground, the mark drawn at the
   full size the tile used to occupy — the box (.gb-ouverture__logo) is unchanged,
   only the img loses its plate. */
.is-style-gb-ouverture .gb-ouverture__tete.wp-block-group { display: flow-root; }
.is-style-gb-ouverture .gb-ouverture__tete > * { margin-block: 0; }
/* Un cran plus grand et décalé vers la gauche (Marianne, 17/09/2026) : +15 % sur la
   taille, et une marge de fin qui l'écarte du bord de la rive au lieu de l'y coller.
   Il reste sous la dernière ligne du titre — vérifié à 1440 et 390. */
.is-style-gb-ouverture .gb-ouverture__logo { float: inline-end; inline-size: clamp(8rem, 15vw, 13.2rem);
	margin: 0.4rem clamp(0.5rem, 2vw, 2rem) 1rem clamp(1.5rem, 4vw, 4rem); }
.is-style-gb-ouverture .gb-ouverture__logo img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1; }

/* Chapô + buttons: a native flex group, bottom-aligned; only the gaps are ours. */
.is-style-gb-ouverture .gb-ouverture__bas.wp-block-group { gap: 2rem clamp(2rem, 5vw, 5rem); }
.is-style-gb-ouverture .gb-ouverture__bas .wp-block-buttons { gap: 1rem; }
/* The socle paints the outline hover with currentColor, but core puts the label
   directly in the <a>: with no child to recolour, the text would vanish into its
   own ground. text-fill-color paints it without touching currentColor. */
.is-style-gb-ouverture .wp-block-button.is-style-outline .wp-block-button__link:hover { -webkit-text-fill-color: var(--gb-fond); }

/* The label above the halyard: one more breath than the other rows, lighter ink. */
.is-style-gb-ouverture .gb-ouverture__rive > .gb-ouverture__cle {
	margin-block-start: calc(clamp(2rem, 4vw, 3.4rem) + clamp(1rem, 2vw, 2rem)); opacity: 0.8; }

/* ───────────────────────────────────────────────────────────── the halyard ── */
/* Since the vignettes replaced the flags (31/08), the line stops at the margins
   and the pavillons hang at the same height: the halyard is taut. */
.is-style-gb-drisse { position: relative; min-inline-size: 0;
	--gb-pav: clamp(7rem, 11vw, 10.5rem);
	--gb-zone: calc(var(--gb-pav) + 2.1rem); }
.is-style-gb-drisse.wp-block-group { gap: clamp(0.7rem, 1.8vw, 1.8rem); }
.is-style-gb-ouverture .gb-ouverture__rive > .is-style-gb-drisse { margin-block-start: clamp(2rem, 4vw, 3.2rem); }
.is-style-gb-drisse::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px;
	background: currentColor; opacity: 0.55; transform-origin: 0 50%;
	animation: gb-tendre 1.1s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes gb-tendre { from { scale: 0 1; } to { scale: 1 1; } }

/* ───────────────────────────────────────────────────────────── a pavillon ── */
/* Three rows: a zone of fixed height where the vignette hangs, then the name,
   then the count — so the names align whatever the image does. */
.is-style-gb-pavillon { position: relative; flex: 0 0 var(--gb-pav); min-inline-size: 0;
	display: grid; grid-template-rows: var(--gb-zone) auto auto; gap: 0.4rem; justify-items: start; }
/* Two classes: this sheet prints before global styles, and core's flow margin
   (`:root :where(.is-layout-flow) > *`) is also (0,1,0) — a tie it would win. */
.is-style-gb-pavillon.wp-block-group > * { margin-block-start: 0; margin-block-end: 0; }
/* The ring on the halyard. */
.is-style-gb-pavillon::before { content: ""; position: absolute; inset-block-start: -3px; margin-inline-start: 0.9rem;
	inline-size: 9px; block-size: 9px; background: currentColor; opacity: 0.55; }
.is-style-gb-pavillon .wp-block-image { margin: 0; inline-size: 100%; align-self: start; }
.is-style-gb-pavillon .wp-block-image img { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 1;
	margin-block-start: 1.5rem; transform-origin: 0 0;
	/* The shadow is TRANSITIONED, so its colour must be resolvable: `currentColor` inside
	   color-mix() stays unresolved, Chrome cannot interpolate between two such colours and
	   paints the shadow transparent mid-way (it vanished on hover, 15/09). --gb-encre is the
	   couple's ink, a real value. */
	box-shadow: 8px 8px 0 color-mix(in oklab, var(--gb-encre) 22%, transparent);
	animation: gb-hisser 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: var(--gb-d, 420ms);
	transition: rotate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
		box-shadow 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
/* Hoisted one after the other, 120 ms apart. */
.is-style-gb-pavillon:nth-child(2) { --gb-d: 540ms; }
.is-style-gb-pavillon:nth-child(3) { --gb-d: 660ms; }
.is-style-gb-pavillon:nth-child(4) { --gb-d: 780ms; }
.is-style-gb-pavillon:nth-child(5) { --gb-d: 900ms; }
.is-style-gb-pavillon:nth-child(n+6) { --gb-d: 1020ms; }
@keyframes gb-hisser { from { opacity: 0; translate: 0 -2.4rem; rotate: -9deg; } }
.is-style-gb-pavillon:hover .wp-block-image img,
.is-style-gb-pavillon:focus-within .wp-block-image img { rotate: -3deg; translate: 0 -0.5rem;
	box-shadow: 16px 16px 0 color-mix(in oklab, var(--gb-encre) 30%, transparent); }

/* Name and count. Floors at 0.6875 rem (nothing smaller on the site). */
.is-style-gb-pavillon .gb-pavillon__n { font-family: var(--wp--preset--font-family--heading); font-weight: 800;
	font-size: clamp(0.6875rem, 0.92vw, 0.85rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.14; }
/* Full ink (29/09/2026): 0.7 is under the 0.78 floor and fails 4.5:1 on most couples. */
.is-style-gb-pavillon .gb-pavillon__c { opacity: 1; font-size: 0.6875rem; }

/* The socle floor shortens durations but keeps delays: a `backwards` entrance
   would stay invisible for its whole delay. Off entirely, line fully drawn. */
@media (prefers-reduced-motion: reduce) {
	.is-style-gb-drisse::before,
	.is-style-gb-pavillon .wp-block-image img { animation: none; }
}

/* ───────────────────────────────────────── « Voir la vidéo » and its modal ── */
/* The video button: an outline button of the same height as its neighbours, with
   the film's thumbnail flush left (a CSS background — the theme's still at 8 s,
   overridden by video-modale.js with the poster chosen in the modal) and a
   chartreuse play disc drawn on it. Nothing else in the hero moves. */
.is-style-gb-ouverture .gb-video-bouton .wp-block-button__link { position: relative; padding-inline-start: 0; gap: 0.9em; overflow: hidden; }
.is-style-gb-ouverture .gb-video-bouton .wp-block-button__link::before { content: ""; flex: none; align-self: stretch; inline-size: 5.8rem;
	background: radial-gradient(circle at center, var(--wp--preset--color--chartreuse) 0.85rem, transparent calc(0.85rem + 1px)),
		var(--gb-video-vignette, url("../../img/video-affiche-700.webp")) center / cover no-repeat; }
.is-style-gb-ouverture .gb-video-bouton .wp-block-button__link::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 2.9rem;
	translate: -30% -50%; inline-size: 0; block-size: 0;
	border-block: 0.42em solid transparent; border-inline-start: 0.68em solid var(--wp--preset--color--indigo); }
.is-style-gb-ouverture .gb-video-bouton .wp-block-button__link:hover::after,
.is-style-gb-ouverture .gb-video-bouton .wp-block-button__link:focus-visible::after { border-inline-start-color: var(--wp--preset--color--indigo); }
/* The modal group is invisible on the front until video-modale.js hoists it into a
   <dialog>; the editor shows it (editor.css) so the SA can pick the file. */
.gb-modale:not(dialog) { display: none; }
dialog.gb-modale { inline-size: min(94vw, 72rem); max-inline-size: none; max-block-size: 94vh; padding: clamp(1.2rem, 3vw, 2.4rem);
	border: 0; background: var(--wp--preset--color--blanc); color: var(--wp--preset--color--indigo);
	box-shadow: 14px 14px 0 color-mix(in oklab, currentColor 22%, transparent); }
dialog.gb-modale::backdrop { background: color-mix(in oklab, var(--wp--preset--color--indigo) 82%, transparent); }
dialog.gb-modale .gb-modale__titre { margin: 0 3.5rem 1rem 0; font-size: clamp(1.25rem, 2.4vw, 2rem); }
dialog.gb-modale .gb-modale__lecteur { margin: 0; }
dialog.gb-modale .gb-modale__lecteur video { display: block; inline-size: 100%; block-size: auto; max-block-size: 70vh; aspect-ratio: 16 / 9; }
dialog.gb-modale .gb-modale__lien { margin: 1rem 0 0; }
dialog.gb-modale .gb-modale__lien a { color: inherit; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.24em; }
dialog.gb-modale .gb-modale__fermer { position: absolute; inset-block-start: clamp(0.8rem, 2vw, 1.4rem); inset-inline-end: clamp(0.8rem, 2vw, 1.4rem);
	inline-size: 2.75rem; block-size: 2.75rem; padding: 0; border: 3px solid currentColor; border-radius: var(--wp--custom--rayon, 0);
	background: transparent; color: inherit; font: 700 1.7rem/1 inherit; cursor: pointer; }
dialog.gb-modale .gb-modale__fermer:hover,
dialog.gb-modale .gb-modale__fermer:focus-visible { background: var(--wp--preset--color--indigo); color: var(--wp--preset--color--blanc); outline-offset: 3px; }

/* ─────────────────────────────────────────────────────────── adaptations ── */
@media (max-width: 1000px) {
	.is-style-gb-drisse.wp-block-group { gap: 0.6rem; }
	.is-style-gb-pavillon .wp-block-image img { margin-block-start: 1.2rem; }
}
@media (max-width: 760px) {
	.is-style-gb-drisse.wp-block-group { gap: 1rem; }
	.is-style-gb-pavillon { flex: 0 0 calc(33.333% - 0.7rem); grid-template-rows: auto auto auto; }
	.is-style-gb-pavillon .wp-block-image img { margin-block-start: 0; }
	.is-style-gb-ouverture .gb-ouverture__bas .wp-block-buttons,
	.is-style-gb-ouverture .gb-ouverture__bas .wp-block-button { inline-size: 100%; }
	.is-style-gb-ouverture .gb-ouverture__bas .wp-block-button__link { inline-size: 100%; justify-content: center; }
	.is-style-gb-ouverture .gb-video-bouton .wp-block-button__link { justify-content: flex-start; }
	/* The logo goes above the title, small and left, so the title keeps the width. */
	.is-style-gb-ouverture .gb-ouverture__logo { float: none; inline-size: 6rem; margin: 0 0 1.2rem; }
}