/**
 * Wink — component styles.
 *
 * Tokens (colours, type scale, spacing) come from theme.json as CSS custom properties.
 * This file only styles what theme.json cannot express: block style variations,
 * layout components used by patterns, and motion.
 *
 * Naming: `.is-style-*` = block style variation (selectable in the editor),
 *         `.wink-*`     = structural class set by a pattern.
 */

/* ---------- Surfaces ----------
 * Semantic tokens (theme.json > custom.color, Tailwind and shadcn naming) default to the
 * dark surface, like the body. Light surfaces redefine them, as the .dark class does in
 * Tailwind, in reverse. Components read only the semantic tokens.
 */
.is-style-section-creme,
.is-style-section-creme-2,
.site-header-part.is-scrolled,
.wink-quote {
	--wp--custom--color--background: var(--wp--preset--color--creme);
	--wp--custom--color--foreground: var(--wp--preset--color--noir);
	--wp--custom--color--card: var(--wp--preset--color--creme);
	--wp--custom--color--card-foreground: var(--wp--preset--color--noir);
	--wp--custom--color--secondary: var(--wp--preset--color--creme-2);
	--wp--custom--color--secondary-foreground: var(--wp--preset--color--noir);
	--wp--custom--color--muted: var(--wp--preset--color--creme-2);
	--wp--custom--color--muted-foreground: var(--wp--preset--color--ink-muted);
	--wp--custom--color--accent: var(--wp--preset--color--bronze-ink);
	--wp--custom--color--accent-foreground: var(--wp--preset--color--creme);
	--wp--custom--color--border: var(--wp--custom--line--on-light);
	--wp--custom--color--input: var(--wp--preset--color--noir);
	--wp--custom--color--destructive: var(--wp--custom--danger);
	--wp--custom--color--destructive-foreground: var(--wp--preset--color--creme);
}

.is-style-section-creme-2 {
	--wp--custom--color--background: var(--wp--preset--color--creme-2);
	--wp--custom--color--muted: var(--wp--preset--color--creme);
}

.is-style-section-noir-2 {
	--wp--custom--color--background: var(--wp--preset--color--noir-2);
}

:root {
	--wink-ease: var(--wp--custom--ease);
	--wink-header-h: var(--wp--custom--header-height);
	--wink-line: var(--wp--custom--line--on-dark);
}

.is-style-section-creme,
.is-style-section-creme-2 {
	--wink-line: var(--wp--custom--line--on-light);
}

html {
	scroll-behavior: smooth;
}

/* Form controls do not inherit the font by default. */
button,
input,
select,
textarea {
	font: inherit;
}

body {
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	font-optical-sizing: auto;
}

/* Paint the phone's top safe-area band behind the fixed header. */
body::before {
	content: "";
	position: fixed;
	inset: 0 0 auto;
	height: env(safe-area-inset-top, 0);
	z-index: 60;
	background: var(--wp--preset--color--noir);
}

::selection {
	background: var(--wp--preset--color--bronze);
	color: var(--wp--preset--color--noir);
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

:where(p) {
	text-wrap: pretty;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--creme);
	color: var(--wp--preset--color--noir);
}

/* ---------- Header ----------
 * Transparent over the hero with a hairline underneath. It slides away while
 * scrolling down and comes back on a white bar when scrolling up (theme.js).
 */
.site-header-part {
	z-index: 50;
	inset-inline: 0;
	color: var(--wp--preset--color--creme);
	border-bottom: 1px solid var(--wp--custom--line--on-dark);
	transition:
		transform 0.5s var(--wink-ease),
		background-color 0.4s var(--wink-ease),
		border-color 0.4s var(--wink-ease),
		color 0.4s var(--wink-ease);
}

.has-hero .site-header-part {
	position: fixed;
	top: env(safe-area-inset-top, 0);
}

.has-solid-header .site-header-part {
	position: sticky;
	top: env(safe-area-inset-top, 0);
	background-color: var(--wp--preset--color--noir);
}

.admin-bar.has-hero .site-header-part,
.admin-bar.has-solid-header .site-header-part {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + env(safe-area-inset-top, 0));
}

.site-header-part.is-hidden {
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px) - env(safe-area-inset-top, 0px)));
}

.site-header-part.is-scrolled {
	background-color: var(--wp--preset--color--creme);
	border-color: var(--wp--custom--line--on-light);
	color: var(--wp--preset--color--noir);
}

.site-header {
	min-height: var(--wink-header-h);
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--20) !important;
}

.site-header > .alignwide:first-child {
	align-items: center;
}

/* Mouse clicks never draw a focus box; keyboard focus keeps a clear bronze ring. */
:where(a, button, [tabindex]):focus:not(:focus-visible) {
	outline: none;
}

:where(a, button, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--bronze-hi);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
	transition: outline-offset 0.2s var(--wink-ease);
}

.site-header .wp-block-navigation-item__content {
	-webkit-tap-highlight-color: transparent;
}

/* Breadcrumbs (core block in the header part): a quiet path under the menu. */
.wink-crumbs {
	margin-block-start: var(--wp--preset--spacing--20) !important;
	padding-block-start: var(--wp--preset--spacing--10);
	font-size: var(--wp--preset--font-size--xs);
	color: inherit;
}

.wink-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.wink-crumbs li {
	opacity: 0.72;
}

.wink-crumbs li:not(:last-child)::after {
	margin-inline: 0.6rem;
	color: var(--wp--preset--color--bronze);
	opacity: 1;
}

.wink-crumbs li:last-child {
	opacity: 1;
}


.wink-crumbs a {
	display: inline-block;
	padding-block: 0.6rem;
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentcolor, currentcolor) no-repeat left bottom / 0% 1px;
	transition: background-size 0.4s var(--wink-ease);
}

.wink-crumbs a:hover,
.wink-crumbs a:focus-visible {
	background-size: 100% 1px;
}

@media (max-width: 781px) {

	.wink-crumbs li:not(:last-child):not(:nth-last-child(2)) {
		display: none;
	}
}

.site-header .wp-block-site-title a {
	color: inherit;
}

.site-header .wp-block-site-tagline {
	margin-top: 2px;
	padding-left: 3px;
}

.site-header-part.is-scrolled .wp-block-site-tagline {
	color: var(--wp--preset--color--bronze-ink);
}

.site-header .wp-block-navigation-item__content {
	color: inherit;
	opacity: 0.9;
	position: relative;
	padding-block: 6px;
	transition: opacity 0.3s var(--wink-ease);
}

.site-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 1px;
	background: currentcolor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.4s var(--wink-ease);
}

.site-header .wp-block-navigation-item__content:hover,
.site-header .current-menu-item > .wp-block-navigation-item__content {
	color: inherit;
	opacity: 1;
}

.site-header .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--noir) !important;
	color: var(--wp--preset--color--creme) !important;
	padding-top: calc(env(safe-area-inset-top, 0) + 1.5rem);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: clamp(2rem, 9vw, 3rem);
	font-weight: 400;
	letter-spacing: -0.03em;
	line-height: 1.15;
}

@media (max-width: 781px) {

	.site-header .wp-block-buttons {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.site-header-part {
		transition: none;
	}
}

/* ---------- Paragraph & heading styles ---------- */

/* Section label: a quiet bronze word above the heading (no rule, no capitals). */
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--bronze);
}

.is-style-section-creme .is-style-eyebrow,
.is-style-section-creme-2 .is-style-eyebrow {
	color: var(--wp--preset--color--bronze-ink);
}

.is-style-lede {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	max-width: 58ch;
}

.is-style-signature,
.wp-block-heading.is-style-signature {
	font-family: var(--wp--preset--font-family--script);
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	font-size: clamp(2.4rem, 6vw, 5rem);
}

.wp-block-heading.is-style-display {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.035em;
}

/* Accent phrase in headings: an <em> is set in the logo script, in bronze. */
.wp-block-heading em {
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-weight: 400;
	font-size: 1.25em;
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-hi);
}

.is-style-section-creme .wp-block-heading em,
.is-style-section-creme-2 .wp-block-heading em {
	color: var(--wp--preset--color--bronze-ink);
}

/* Accent phrase in headings (editor "highlight" with a colour): the logo script in bronze,
 * the same treatment as the <em> accents. One accent device across the site. */
.wp-block-heading mark.has-inline-color {
	font-family: var(--wp--preset--font-family--script);
	font-size: 1.2em;
	font-weight: 400;
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-hi) !important;
}

.is-style-section-creme .wp-block-heading mark.has-inline-color,
.is-style-section-creme-2 .wp-block-heading mark.has-inline-color {
	color: var(--wp--preset--color--bronze-ink) !important;
}

/* ---------- Text roll (theme.js wraps link labels) ----------
 * On hover the label slides up and its copy (a text-shadow one line below) rolls in,
 * like a mechanical counter. One gesture for every text link on the site.
 */
.wink-roll {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	white-space: nowrap;
	line-height: 1.3;
}

.wink-roll__in {
	display: inline-block;
	text-shadow: 0 1.3em currentcolor;
	transition: transform 0.5s var(--wink-ease);
}

a:hover .wink-roll__in,
a:focus-visible .wink-roll__in {
	transform: translateY(-1.3em);
}

/* ---------- Icons (Lucide, copied by `npm run icons`) ----------
 * CSS-drawn icons are masks filled with currentColor, so they follow the text colour.
 * Inline SVGs from wink-core carry the `.wink-icon` class.
 */
.wp-block-button__link::after,
.wink-quote__submit::after,
.wink-quote__next::after,
.wink-quote__back::before,
.has-icon-arrow-left > .wp-block-button__link::before,
.wink-hero-expertises a::before,
.wp-block-list.is-style-checks > li::before {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background-color: currentcolor;
	-webkit-mask: var(--wink-icon) center / contain no-repeat;
	mask: var(--wink-icon) center / contain no-repeat;
	transition: transform 0.45s var(--wink-ease), opacity 0.35s var(--wink-ease);
}

/* Default icon for every action: ↗. */
.wp-block-button__link::after,
.wink-quote__submit::after,
.wink-hero-expertises a::before {
	--wink-icon: url(../icons/ui/arrow-up-right.svg);
}

.has-icon-arrow-left > .wp-block-button__link::before,
.wink-quote__back::before {
	--wink-icon: url(../icons/ui/arrow-left.svg);
}

.wink-quote__next::after {
	--wink-icon: url(../icons/ui/arrow-right.svg);
}

.wink-quote__next:hover::after {
	transform: translateX(3px);
}

.wink-quote__back:hover::before {
	transform: translateX(-3px);
}

.has-icon-arrow-left > .wp-block-button__link::after {
	content: none;
}

.has-icon-arrow-up > .wp-block-button__link::after {
	--wink-icon: url(../icons/ui/arrow-up.svg);
}

/* The icon follows where the action leads, so every call to action says what it does:
 * quote request, gallery, process, about, WhatsApp, form sending. Arrows stay for
 * plain navigation. */
.wp-block-button__link[href*="/devis"]::after {
	--wink-icon: url(../icons/ui/quote.svg);
}

.wp-block-button__link[href*="/realisations"]::after {
	--wink-icon: url(../icons/ui/gallery.svg);
}

.wp-block-button__link[href*="/notre-processus"]::after {
	--wink-icon: url(../icons/ui/process.svg);
}

.wp-block-button__link[href*="/a-propos"]::after {
	--wink-icon: url(../icons/ui/about.svg);
}

.is-style-whatsapp > .wp-block-button__link::after,
.wp-block-button__link[href*="wa.me"]::after {
	--wink-icon: url(../icons/ui/whatsapp.svg);
}

.wink-quote__submit::after {
	--wink-icon: url(../icons/ui/send.svg);
}

/* Contextual icons tilt on hover; the ↗ arrow keeps its diagonal step. */
.wp-block-button__link[href*="/devis"]:hover::after,
.wp-block-button__link[href*="/realisations"]:hover::after,
.wp-block-button__link[href*="/notre-processus"]:hover::after,
.wp-block-button__link[href*="/a-propos"]:hover::after,
.is-style-whatsapp > .wp-block-button__link:hover::after {
	transform: rotate(-8deg) scale(1.12);
}

.wp-block-list.is-style-checks > li::before {
	--wink-icon: url(../icons/ui/circle-check.svg);
}

.wink-icon {
	width: 1.125em;
	height: 1.125em;
	flex: none;
	vertical-align: -0.2em;
}

/* ---------- Buttons: one system ----------
 * Three variants, all with an icon: primary (bronze), outline, text link.
 * Hover: a panel slides across like the door of a dressing, and the icon steps
 * along its own direction. Colours come from the semantic tokens (foreground,
 * background), which each surface redefines: see "Surfaces" at the top of this file.
 */
.wp-block-button__link,
.wink-quote__submit,
.wink-quote__next,
.wink-quote__back {
	--door: var(--wp--custom--color--foreground);
	--door-ink: var(--wp--custom--color--background);
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	padding: 0.95rem 1.2rem 0.95rem 1.35rem;
	border: 1px solid var(--wp--preset--color--bronze);
	border-radius: var(--wp--custom--radius--sm);
	background:
		linear-gradient(var(--door), var(--door)) no-repeat left center / 0% 100%,
		var(--wp--preset--color--bronze);
	color: var(--wp--preset--color--noir);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition:
		background-size 0.55s var(--wink-ease),
		color 0.4s var(--wink-ease),
		border-color 0.4s var(--wink-ease);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wink-quote__submit:hover,
.wink-quote__submit:focus-visible,
.wink-quote__next:hover,
.wink-quote__next:focus-visible,
.wink-quote__back:hover,
.wink-quote__back:focus-visible {
	background-size: 100% 100%, auto;
	border-color: var(--door);
	color: var(--door-ink);
}

.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after,
.wink-quote__submit:hover::after {
	transform: translate(2px, -2px);
}

.has-icon-arrow-up > .wp-block-button__link:hover::after {
	transform: translateY(-3px);
}

.has-icon-arrow-left > .wp-block-button__link:hover::before {
	transform: translateX(-3px);
}

/* Outline: transparent, hairline border; the door fills with the surface's ink.
 * The header call to action uses it in every state. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.site-header .wp-block-button__link {
	background:
		linear-gradient(var(--door), var(--door)) no-repeat left center / 0% 100%,
		transparent;
	border-color: color-mix(in srgb, var(--wp--custom--color--foreground) 40%, transparent);
	color: var(--wp--custom--color--foreground);
}

.site-header .wp-block-button__link {
	padding-block: 0.7rem;
}

/* Text link: label and icon over a hairline that a bronze rule slides across. */
.wp-block-button.is-style-text-link > .wp-block-button__link {
	padding: 0 0 0.4rem;
	border: 0;
	border-radius: 0;
	background:
		linear-gradient(var(--wp--preset--color--bronze), var(--wp--preset--color--bronze)) no-repeat left bottom / 0% 2px,
		linear-gradient(currentcolor, currentcolor) no-repeat left bottom / 100% 1px;
	color: var(--wp--custom--color--foreground);
}

.wp-block-button.is-style-text-link > .wp-block-button__link:hover,
.wp-block-button.is-style-text-link > .wp-block-button__link:focus-visible {
	background-size: 100% 2px, 100% 1px;
	color: var(--wp--custom--color--foreground);
}

/* WhatsApp: same shape, brand green, deeper green door. */
.wp-block-button.is-style-whatsapp > .wp-block-button__link {
	--door: color-mix(in srgb, var(--wp--custom--whatsapp) 70%, var(--wp--preset--color--noir));
	--door-ink: var(--wp--preset--color--creme);
	background:
		linear-gradient(var(--door), var(--door)) no-repeat left center / 0% 100%,
		var(--wp--custom--whatsapp);
	border-color: var(--wp--custom--whatsapp);
	color: var(--wp--preset--color--creme);
}

/* ---------- Covers: hero, page hero, call-to-action band ---------- */
.wp-block-cover.is-style-hero,
.wp-block-cover.is-style-page-hero {
	padding-top: calc(var(--wink-header-h) + env(safe-area-inset-top, 0) + var(--wp--preset--spacing--50));
	align-items: flex-end;
}

/* Page heroes: the copy sits as far from the bottom edge as sections are apart. */
.wp-block-cover.is-style-page-hero {
	padding-bottom: var(--wp--preset--spacing--60);
}

.wp-block-cover.is-style-page-hero .is-style-lede {
	margin-block-end: 0;
}

.wp-block-cover.is-style-hero .wp-block-cover__image-background,
.wp-block-cover.is-style-page-hero .wp-block-cover__image-background {
	transform: scale(1.12);
	animation: wink-kenburns 14s var(--wink-ease) forwards;
}

.wp-block-cover.is-style-hero .wp-block-heading,
.wp-block-cover.is-style-page-hero .wp-block-heading {
	animation: wink-rise 1.2s var(--wink-ease) both;
}

@keyframes wink-kenburns {

	to {
		transform: scale(1.02);
	}
}

@keyframes wink-rise {

	from {
		clip-path: inset(0 0 100% 0);
		transform: translateY(0.3em);
	}

	to {
		clip-path: inset(0 0 -0.2em 0);
		transform: none;
	}
}

.wp-block-cover.is-style-cta-band .wp-block-cover__image-background {
	object-position: right center;
}

/* Votre projet: a live 3D wireframe house (assets/js/blueprint.js) on the right,
 * lit by a faint bronze glow. The overlay keeps the copy side dark. */
.wp-block-cover.is-style-cta-band {
	--wink-glow: color-mix(in srgb, var(--wp--preset--color--bronze) 14%, transparent);
	overflow: hidden;
	background:
		radial-gradient(circle at 72% 55%, var(--wink-glow), transparent 55%),
		var(--wp--preset--color--noir);
}

.wp-block-cover.is-style-cta-band .wp-block-cover__background {
	background: linear-gradient(90deg, var(--wp--preset--color--noir) 25%, rgb(10 11 11 / 0)) !important;
	opacity: 1 !important;
}

.wink-blueprint {
	position: absolute;
	top: 0;
	right: 0;
	width: 64%;
	height: 100%;
	pointer-events: none;
}

.wink-blueprint line {
	fill: none;
	stroke-linecap: round;
}

.wink-blueprint__frame {
	stroke: var(--wp--preset--color--creme);
	stroke-width: 1;
	stroke-opacity: 0.7;
}

.wink-blueprint__joinery {
	stroke: var(--wp--preset--color--bronze-hi);
	stroke-width: 1.25;
	transition: stroke-width 0.5s var(--wink-ease);
}

.is-exploded .wink-blueprint__joinery {
	stroke-width: 1.75;
}

.wink-blueprint__guide {
	stroke: var(--wp--preset--color--stone);
	stroke-width: 1;
	stroke-dasharray: 3 5;
	stroke-opacity: 0.55;
}

@media (max-width: 781px) {

	.wink-blueprint {
		width: 100%;
		opacity: 0.4;
	}

	/* The band is as tall as its copy: 60vh of centred space reads as a hole on phones. */
	.wp-block-cover.is-style-cta-band {
		min-height: 0 !important;
	}
}

/* Home hero: one visual, copy centred vertically, expertise links along the bottom. */

/* Extra bottom room keeps the expertise bar clear of the floating WhatsApp button. */
.wp-block-cover.is-style-hero {
	padding-bottom: var(--wp--preset--spacing--60);
}

/* On phones the copy spans the full width: shade evenly instead of from the left. */
@media (max-width: 781px) {

	.wp-block-cover.is-style-hero .wp-block-cover__background {
		background: var(--wp--custom--hero--veil-mobile) !important;
	}
}

.is-style-hero > .wp-block-cover__inner-container {
	align-self: stretch;
	display: flex;
	flex-direction: column;
}

.wink-hero-bottom {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
}

.wink-hero-copy {
	margin-block: auto !important;
	max-width: 52rem;
}

.wink-hero-copy > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-cover.is-style-hero .wink-hero-title {
	font-size: var(--wp--custom--hero--title-size);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.025em;
}

/* Signature: the process half of the promise is written in the logo's script. */
.wink-hero-title em {
	display: block;
	margin-block-start: 0.1em;
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-weight: 400;
	font-size: 1.3em;
	line-height: 0.95;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-hi);
}

.wink-hero-text {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.45;
	max-width: 44ch;
	color: var(--wp--preset--color--creme);
}

.wink-hero-cta {
	margin-block-start: var(--wp--preset--spacing--40) !important;
	gap: var(--wp--preset--spacing--20);
}

/* Expertise bar: hairline on top, one link per expertise (unordered: no numbering). */
.wink-hero-expertises {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border-top: 1px solid var(--wp--custom--line--on-dark);
}

.wink-hero-expertises a {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--10);
	padding-inline-end: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--creme);
	position: relative;
}

/* Trailing arrow (flex `order` puts the pseudo-element after the label). */
.wink-hero-expertises a::before {
	order: 1;
	opacity: 0.5;
}

.wink-hero-expertises a:hover::before,
.wink-hero-expertises a:focus-visible::before {
	opacity: 1;
	transform: translateX(4px);
}

/* Hover: the hairline above the link lights up. */
.wink-hero-expertises a::after {
	content: "";
	position: absolute;
	inset: -1px var(--wp--preset--spacing--30) auto 0;
	height: 1px;
	background: var(--wp--preset--color--creme);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.45s var(--wink-ease);
}

.wink-hero-expertises a:hover,
.wink-hero-expertises a:focus-visible {
	color: var(--wp--preset--color--creme);
}

.wink-hero-expertises a:hover::after,
.wink-hero-expertises a:focus-visible::after {
	transform: scaleX(1);
}

@media (max-width: 781px) {

	.wink-hero-expertises {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wink-hero-expertises a {
		padding-block: var(--wp--preset--spacing--20);
	}
}

/* ---------- Grids used by patterns ---------- */

/* Pourquoi choisir Wink Expo: panels joined by hairline seams (the grid gap shows the
 * line colour). On hover a bronze lamp follows the pointer (theme.js sets --mx/--my). */
.wink-trust.wink-trust {
	gap: 1px;
	background: var(--wp--custom--line--on-dark);
	border: 1px solid var(--wp--custom--line--on-dark);
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
}

.wink-trust > .wp-block-group {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--noir);
}

.wink-trust > .wp-block-group > * {
	margin: 0;
}

.wink-trust > .wp-block-group::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	--wink-lamp: color-mix(in srgb, var(--wp--preset--color--bronze) 24%, transparent);
	background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--wink-lamp), transparent 70%);
	opacity: 0;
	transition: opacity 0.5s var(--wink-ease);
}

.wink-trust > .wp-block-group:hover::before {
	opacity: 1;
}

.wink-trust .wp-block-image {
	margin-block-end: var(--wp--preset--spacing--30) !important;
}

.wink-trust .wp-block-image img {
	width: 40px;
	height: 40px;
	transition: transform 0.5s var(--wink-ease);
}

.wink-trust > .wp-block-group:hover .wp-block-image img {
	transform: translateY(-4px) scale(1.06);
}

.wink-trust .wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	transition: color 0.4s var(--wink-ease);
}

.wink-trust > .wp-block-group:hover .wp-block-heading {
	color: var(--wp--preset--color--bronze-hi);
}

.wink-trust p:not(.wp-block-heading) {
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--stone);
}

/* Qui sommes-nous: light heading with a script accent, short aside, value cards. */
.wink-intro {
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--60);
}

.wink-intro__title {
	flex: 1 1 34rem;
	max-width: 46rem;
}

.wink-intro__heading {
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.025em;
}

.wink-intro__heading em {
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-size: 1.3em;
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-ink);
}

.wink-intro__aside {
	flex: 0 1 26rem;
}

/* Fuse on hover (SVG added by theme.js): a bronze trail burns around the perimeter,
 * led by a glowing spark. Leaving the card retracts the trail quickly. */
.wink-fuse {
	position: absolute;
	inset: -1px;
	width: calc(100% + 2px);
	height: calc(100% + 2px);
	overflow: visible;
	pointer-events: none;
	fill: none;
	stroke-width: 1.5;
}

.wink-fuse__trail {
	stroke: var(--wp--preset--color--bronze);
	stroke-dasharray: 100 100;
	stroke-dashoffset: 100;
	transition: stroke-dashoffset 0.45s var(--wink-ease);
}

.wink-fuse__spark {
	stroke: var(--wp--preset--color--bronze-hi);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 1.2 98.8;
	stroke-dashoffset: 0;
	opacity: 0;
	filter: drop-shadow(0 0 3px var(--wp--preset--color--bronze-hi)) drop-shadow(0 0 8px var(--wp--preset--color--bronze));
}

.wink-values > .wp-block-group:hover .wink-fuse__trail {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset var(--wp--custom--fuse--duration) linear;
}

.wink-values > .wp-block-group:hover .wink-fuse__spark {
	animation: wink-fuse-spark var(--wp--custom--fuse--duration) linear forwards;
}

@keyframes wink-fuse-spark {

	0% {
		stroke-dashoffset: 1.2;
		opacity: 1;
	}

	92% {
		opacity: 1;
	}

	100% {
		stroke-dashoffset: -98.8;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wink-fuse {
		display: none;
	}

	.wink-values > .wp-block-group:hover {
		border-color: var(--wp--preset--color--bronze);
	}
}

.wink-intro__aside > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wink-values {
	gap: var(--wp--preset--spacing--30);
}

.wink-values > .wp-block-group {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--line--accent);
}

.wink-values > .wp-block-group > * {
	margin: 0;
}

.wink-values .wp-block-image img {
	width: 44px;
	height: 44px;
}

.wink-values .wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.wink-values .wp-block-heading + p {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
	color: var(--wp--preset--color--ink-muted);
}

.wink-step-num {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bronze-ink);
}

.is-style-section-noir .wink-step-num,
.is-style-section-noir-2 .wink-step-num {
	color: var(--wp--preset--color--bronze);
}

/* ---------- Process (home): a kitchen drawn in elevation builds as you scroll ----------
 * assets/js/process.js (GSAP) pins the section, draws the SVG and sets, on each step,
 * .is-current / .is-done and --fill (0–1, how much of that step has played).
 */
.wink-build-head {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
}

.wink-build-head .wp-block-heading {
	max-width: 16em;
	font-size: var(--wp--preset--font-size--2-xl);
}

.wink-build-head .wp-block-heading em {
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-size: 1.25em;
	line-height: 0.9;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-ink);
}

.wink-build {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) !important;
}

/* The drawing changes on every scroll frame: its own compositor layer keeps those repaints
 * inside the drawing instead of invalidating the whole page (the cause of scroll jank on phones). */
.wink-build__svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 44svh;
	overflow: visible;
	will-change: transform;
	transform: translateZ(0);
}

.wink-build__svg line,
.wink-build__svg rect,
.wink-build__svg path {
	fill: none;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.wink-build__survey line,
.wink-build__survey rect {
	stroke: var(--wp--preset--color--ink-muted);
	stroke-width: 1;
	stroke-opacity: 0.6;
}

.wink-build__labels text {
	font-size: 13px;
	letter-spacing: 0.06em;
	fill: var(--wp--preset--color--ink-muted);
}

.wink-build__design line,
.wink-build__design rect {
	stroke: var(--wp--preset--color--noir);
	stroke-width: 1.4;
}

.wink-build__wood-base {
	fill: var(--wp--preset--color--sable);
}

.wink-build__wood-grain {
	stroke: var(--wp--preset--color--bronze);
	stroke-width: 1;
	stroke-opacity: 0.45;
}

.wink-build__svg .wink-build__front {
	fill: url(#wink-wood);
	stroke: var(--wp--preset--color--noir);
	stroke-width: 1.2;
}

.wink-build__svg .wink-build__stone {
	fill: var(--wp--preset--color--noir-3);
	stroke: none;
}

.wink-build__fitting line {
	stroke: var(--wp--preset--color--noir);
	stroke-width: 2.2;
}

.wink-build__delivery line {
	stroke: var(--wp--preset--color--noir);
	stroke-width: 1;
}

.wink-build__svg .wink-build__lamp {
	fill: var(--wp--preset--color--noir);
}

.wink-build__svg .wink-build__object {
	stroke: var(--wp--preset--color--noir);
	stroke-width: 1.2;
}

.wink-build__svg .wink-build__glow {
	fill: url(#wink-glow);
	stroke: none;
}

.wink-build__glow-in {
	stop-color: var(--wp--preset--color--bronze-hi);
	stop-opacity: 0.55;
}

.wink-build__glow-out {
	stop-color: var(--wp--preset--color--bronze-hi);
	stop-opacity: 0;
}

/* Desktop with a mouse: the section is tall and its stage sticks while the timeline scrubs.
 * Touch screens play the drawing once instead (process.js), so they keep the normal height. */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {

	.js .wink-build-section {
		height: 230svh;
		padding-block: 0 !important;
	}

	.js .wink-build-section > .wink-build-stage {
		position: sticky;
		top: 0;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-block: var(--wp--preset--spacing--50);
	}
}

.wink-build-stage > * {
	width: 100%;
}

/* Steps: six columns under the drawing; each top rule fills as its step plays. */
.wink-build-section .wink-steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--30);
}

.wink-steps > .wp-block-group {
	position: relative;
	margin: 0;
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--custom--line--on-light);
}

.wink-steps > .wp-block-group::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--bronze);
	transform-origin: left;
	transform: scaleX(var(--fill, 0));
	will-change: transform; /* composited: filling the rule never repaints the step */
}

.wink-steps > .wp-block-group > * {
	margin: 0;
}

.wink-steps .wink-step-num {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bronze-ink);
}

.wink-steps .wp-block-heading {
	margin-block-start: 0.4rem;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--ink-muted);
	transition: color 0.4s var(--wink-ease);
}

.wink-steps .wp-block-heading + p {
	margin-block-start: 0.6rem;
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.5;
	color: var(--wp--preset--color--noir);
}

.wink-steps > .is-done .wp-block-heading,
.wink-steps > .is-current .wp-block-heading {
	color: var(--wp--preset--color--noir);
}

.wink-steps > .is-current .wink-step-num {
	color: var(--wp--preset--color--bronze-ink);
}

@media (max-width: 781px) {

	.wink-build-section .wink-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--wp--preset--spacing--40);
	}
}

/* ---------- Process page: the home drawing, vertical ----------
 * Steps on the left, the kitchen drawing sticky on the right. process.js scrubs the
 * drawing while the steps pass mid-screen and marks .is-current / .is-done; theme.js
 * fills the rail (--wink-progress).
 */
.wink-process-layout {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.wink-process-layout > .wink-build {
	position: sticky;
	top: calc(var(--wink-header-h) + var(--wp--preset--spacing--40));
	margin: 0 !important;
}

.wink-process-layout .wink-build__svg {
	max-height: 70svh;
}

.wink-process {
	position: relative;
	margin: 0 !important;
}

.wink-process__rail {
	position: absolute;
	left: 21px;
	top: 10px;
	bottom: 10px;
	width: 1px;
	background: var(--wp--custom--line--on-light);
}

.wink-process__rail i {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--bronze);
	transform-origin: top;
	transform: scaleY(var(--wink-progress, 0));
}

.wink-process > .wink-process-step {
	position: relative;
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--60) calc(44px + var(--wp--preset--spacing--40));
	transition: opacity 0.5s var(--wink-ease);
}

.wink-process > .wink-process-step > * {
	max-width: 36rem;
}

.wink-process-step .wink-step-num {
	position: absolute;
	left: 0;
	top: 0;
	width: 44px;
	height: 44px;
	margin: 0;
	display: grid;
	place-items: center;
	border: 1px solid var(--wp--custom--line--accent);
	border-radius: 50%;
	background: var(--wp--preset--color--creme-2);
	color: var(--wp--preset--color--bronze-ink);
	font-size: var(--wp--preset--font-size--sm);
	z-index: 1;
	transition: background-color 0.5s var(--wink-ease), color 0.5s var(--wink-ease), border-color 0.5s var(--wink-ease);
}

.wink-process-step.is-done .wink-step-num,
.wink-process-step.is-current .wink-step-num {
	background: var(--wp--preset--color--bronze);
	border-color: var(--wp--preset--color--bronze);
	color: var(--wp--preset--color--noir);
}

.wink-process-step .wp-block-heading {
	margin-block: 0.35rem var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
}

.wink-process-step .wp-block-heading + p {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.6;
}

.wink-process-step .wp-block-list {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Steps not reached yet are quieter; the one being drawn is fully legible. */
.js .wink-process-section .wink-process-step:not(.is-current, .is-done) {
	opacity: 0.45;
}

@media (max-width: 781px) {

	/* Phones: the drawing sticks under the header, the steps scroll beneath it. */
	.wink-process-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--40);
	}

	.wink-process-layout > .wink-build {
		order: -1;
		top: env(safe-area-inset-top, 0);
		z-index: 2;
		padding-block: var(--wp--preset--spacing--10);
		background: var(--wp--preset--color--creme-2);
		border-bottom: 1px solid var(--wp--custom--line--on-light);
	}

	.wink-process-layout .wink-build__svg {
		max-height: 26svh;
	}
}

/* ---------- Lists ---------- */
.wp-block-list.is-style-lined {
	list-style: none;
	padding-left: 0;
	border-top: 1px solid var(--wink-line);
}

.wp-block-list.is-style-lined > li {
	padding-block: 0.8em;
	border-bottom: 1px solid var(--wink-line);
	position: relative;
}

/* Checks: no rules; icon and first line share one baseline row, wrapped lines align
 * with the text, not under the icon. */
.wp-block-list.is-style-checks {
	display: grid;
	gap: 0.85rem;
	list-style: none;
	padding-left: 0 !important;
}

.wp-block-list.is-style-checks > li {
	display: grid;
	grid-template-columns: 1.25em minmax(0, 1fr);
	column-gap: 0.75em;
	align-items: start;
	line-height: 1.5;
	margin: 0;
}

.wp-block-list.is-style-checks > li::before {
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.125em;
	background-color: var(--wp--preset--color--bronze);
}

.is-style-section-creme .wp-block-list.is-style-checks > li::before,
.is-style-section-creme-2 .wp-block-list.is-style-checks > li::before {
	background-color: var(--wp--preset--color--bronze-ink);
}

/* ---------- Images ---------- */
.wink-parallax {
	overflow: hidden;
}

.wink-parallax img {
	will-change: transform;
}

/* ---------- Footer ----------
 * Brand and contact on the left, three link columns with bronze titles, a quiet
 * bottom bar. Sits on noir-2 so it reads as its own surface under noir sections.
 */
.site-footer {
	background: var(--wp--preset--color--noir-2);
	border-top: 1px solid var(--wp--custom--line--on-dark);
	padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
	font-size: var(--wp--preset--font-size--sm);
}

.site-footer a {
	text-decoration: none;
	color: var(--wp--preset--color--creme);
}

.site-footer .wp-block-site-title {
	font-size: 2.6rem;
}

.site-footer__brand > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.site-footer__about {
	max-width: 36ch;
	line-height: 1.65;
	color: rgb(251 250 245 / 0.78);
}

.site-footer .wink-contact.is-compact {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--stone);
}

/* A column left with only its title (e.g. no social network set yet in Réglages) is hidden. */
.site-footer__main > .wp-block-column:has(> .site-footer__title:only-child) {
	display: none;
}

.site-footer__title.wp-block-heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
	font-weight: 500;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-hi);
}

.site-footer__links {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__bottom {
	margin-block-start: var(--wp--preset--spacing--60) !important;
	padding-block-start: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--custom--line--on-dark);
	align-items: center;
	color: var(--wp--preset--color--stone);
}

.site-footer__bottom p {
	margin: 0;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-inline-end: auto !important;
}

.site-footer__legal a {
	display: inline-block;
	padding-block: 0.4rem;
	color: var(--wp--preset--color--creme);
}

@media (max-width: 781px) {

	.site-footer__main {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.site-footer__brand {
		grid-column: 1 / -1;
	}
}

/* The footer sits right under the last section: the root block gap left a 20px strip of the
 * body colour between them. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Full-width sections touch each other: no block gap showing the body colour between them. */
.wp-block-post-content > .alignfull + .alignfull,
.wp-site-blocks main > .alignfull + .alignfull {
	margin-block-start: 0 !important;
}

/* ---------- À propos ---------- */

/* Mosaic: one tall photo, three filling the rest; every frame is cropped to fill. */
.wink-mosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: repeat(2, clamp(12rem, 22vw, 20rem));
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--10);
	background: var(--wp--preset--color--noir);
}

.wink-mosaic > .wp-block-image {
	margin: 0 !important;
	overflow: hidden;
}

.wink-mosaic > .wp-block-image:first-child {
	grid-row: span 2;
}

.wink-mosaic > .wp-block-image:last-child {
	grid-column: span 2;
}

.wink-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--wink-ease);
}

.wink-mosaic > .wp-block-image:hover img {
	transform: scale(1.04);
}

/* Approach: heading on the left (sticky), commitments on the right between hairlines. */
.wink-approach__head .wp-block-heading em {
	font-family: var(--wp--preset--font-family--script);
	font-style: normal;
	font-size: 1.25em;
	letter-spacing: 0;
	color: var(--wp--preset--color--bronze-ink);
}

.wink-approach__item {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--custom--line--on-light);
	position: relative;
}

.wink-approach__item:last-child {
	border-bottom: 1px solid var(--wp--custom--line--on-light);
}

/* Hover: a bronze rule runs along the top hairline and the icon lifts. */
.wink-approach__item::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--wp--preset--color--bronze);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--wink-ease);
}

.wink-approach__item:hover::before {
	transform: scaleX(1);
}

.wink-approach__item > * {
	margin: 0 !important;
}

.wink-approach__item > .wp-block-image {
	grid-row: span 2;
	transition: transform 0.5s var(--wink-ease);
}

.wink-approach__item:hover > .wp-block-image {
	transform: translateY(-4px);
}

.wink-approach__item .wp-block-heading {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
}

.wink-approach__item p {
	margin-block-start: var(--wp--preset--spacing--10) !important;
	max-width: 52ch;
	color: var(--wp--preset--color--ink-muted);
}

@media (min-width: 782px) {

	.wink-approach__head > * {
		position: sticky;
		top: calc(var(--wink-header-h) + var(--wp--preset--spacing--30));
	}
}

@media (max-width: 781px) {

	.wink-mosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 16rem 10rem 10rem;
	}

	.wink-mosaic > .wp-block-image:first-child {
		grid-column: span 2;
		grid-row: auto;
	}

	.wink-mosaic > .wp-block-image:last-child {
		grid-column: span 2;
	}

	.wink-approach__item {
		grid-template-columns: 3rem minmax(0, 1fr);
	}
}

/* Search field: same underline field as the forms. */
.wp-block-search__inside-wrapper {
	gap: var(--wp--preset--spacing--20);
}

.wp-block-search__input {
	border: 0 !important;
	border-bottom: 1px solid var(--wp--custom--line--on-dark-strong) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font: inherit;
	font-size: var(--wp--preset--font-size--lg);
	padding: 0.6rem 0 !important;
}

.wp-block-search__input:focus {
	border-bottom-color: var(--wp--preset--color--bronze) !important;
	outline: none;
}

/* Quote page intro: heading left, one sentence right. */
.wink-quote-intro {
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	margin-block-end: var(--wp--preset--spacing--50) !important;
}

.wink-quote-intro > p {
	max-width: 30rem;
	margin: 0;
}

/* ---------- Empty states (gallery, expertises, search) ----------
 * Icon, a plain title saying what is missing, one sentence, one way on. */
.wink-empty {
	display: grid;
	justify-items: start;
	gap: var(--wp--preset--spacing--20);
	max-width: 36rem;
	padding: var(--wp--preset--spacing--50);
	border: 1px dashed var(--wp--custom--line--accent);
	border-radius: var(--wp--custom--radius--xl);
}

.wink-empty > * {
	margin: 0 !important;
}

.wink-empty > .wink-icon {
	width: 32px;
	height: 32px;
	color: var(--wp--preset--color--bronze);
}

.wink-empty.is-search::before {
	content: "";
	width: 32px;
	height: 32px;
	background-color: var(--wp--preset--color--bronze);
	-webkit-mask: url(../icons/ui/empty-search.svg) center / contain no-repeat;
	mask: url(../icons/ui/empty-search.svg) center / contain no-repeat;
}

.wink-empty__title {
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.wink-empty .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--20) !important;
}

/* ---------- Legal pages (templates/page-legal.html) ----------
 * A reading page: one narrow column, company details as a two-column sheet. */
.wink-legal .wp-block-post-title {
	font-size: var(--wp--preset--font-size--2-xl);
	font-weight: 400;
	letter-spacing: -0.025em;
}

.wink-legal__updated {
	margin-block-start: var(--wp--preset--spacing--20) !important;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--custom--color--muted-foreground);
}

.wink-legal__updated::before {
	content: "Mise à jour le ";
}

.wink-legal .wp-block-post-content {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.7;
}

.wink-legal .wp-block-post-content h2 {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 500;
}

.wink-legal .wp-block-post-content > :first-child {
	margin-block-start: 0;
}

.wink-legal__facts {
	display: grid;
	grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
	border-top: 1px solid var(--wp--custom--color--border);
}

.wink-legal__facts > p {
	margin: 0 !important;
	padding-block: var(--wp--preset--spacing--20);
	border-bottom: 1px solid var(--wp--custom--color--border);
}

.wink-legal__label {
	font-weight: 600;
}

@media (max-width: 599px) {

	.wink-legal__facts {
		grid-template-columns: minmax(0, 1fr);
	}

	.wink-legal__facts > .wink-legal__label {
		padding-block-end: 0;
		border-bottom: 0;
	}
}

/* Placeholders the client must fill in before going live: impossible to miss. */
mark.wink-todo {
	padding: 0.1em 0.35em;
	background: color-mix(in srgb, var(--wp--preset--color--bronze) 28%, transparent);
	color: inherit;
	border-radius: var(--wp--custom--radius--sm);
}

/* ---------- 404 ---------- */
.wink-404__code {
	margin: 0;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bronze-ink);
}

.wink-404 h1 {
	font-size: var(--wp--preset--font-size--3-xl);
}

.wink-404__links {
	margin-block-start: var(--wp--preset--spacing--40) !important;
	align-items: center;
}

.wink-404__plan {
	width: 100%;
	height: auto;
	fill: none;
	stroke: var(--wp--preset--color--noir);
	stroke-width: 1.2;
}

.wink-404__plan rect {
	stroke-dasharray: 6 6;
	animation: wink-404-draw 18s linear infinite;
}

.wink-404__plan text {
	fill: var(--wp--preset--color--ink-muted);
	stroke: none;
	font-size: 13px;
}

.wink-404__plan .wink-404__q {
	font-family: var(--wp--preset--font-family--script);
	font-size: 96px;
	fill: var(--wp--preset--color--bronze);
}

@keyframes wink-404-draw {

	to {
		stroke-dashoffset: -240;
	}
}

@media (prefers-reduced-motion: reduce) {

	.wink-404__plan rect {
		animation: none;
	}
}

/* ---------- Responsive: shared fixes ---------- */

/* Touch screens and phones: link labels wrap normally (no roll). */
@media (hover: none), (max-width: 781px) {

	.wink-roll,
	.wink-roll__in {
		display: inline;
		overflow: visible;
		white-space: normal;
		text-shadow: none;
	}
}

/* Tablets and small laptops: the full menu and the quote button only fit on one line from
 * 1200px, so the burger takes over below that
 * (WordPress only switches at 600px). */
@media (max-width: 1199px) {

	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Phones: the contact column gets the full width so the e-mail never breaks. */
@media (max-width: 781px) {

	.site-footer__main > .wp-block-column:nth-child(4),
	.site-footer__main > .wp-block-column:nth-child(5) {
		grid-column: 1 / -1;
	}
}

/* Small tablets: the footer has room for its three link columns side by side. */
@media (min-width: 600px) and (max-width: 781px) {

	.site-footer__main {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.site-footer__main > .wp-block-column:nth-child(4) {
		grid-column: auto;
	}
}

/* Touch: every control gets a 44px target without changing how it looks. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
	margin-inline-end: -10px;
}

@media (pointer: coarse) {

	.wp-block-button.is-style-text-link > .wp-block-button__link {
		padding-block-start: 0.75rem;
	}

	.wp-block-post-terms a,
	.wp-block-breadcrumbs a {
		display: inline-block;
		padding-block: 0.6rem;
	}
}

/* Value cards: two by two until four fit with their longest title (three would leave an orphan). */
@media (max-width: 1299px) {

	.wink-values.wink-values {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Phones: cards read as rows, icon beside the title, so the section is half as tall. */
@media (max-width: 599px) {

	.wink-values.wink-values {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--preset--spacing--20);
	}

	.wink-values > .wp-block-group,
	.wink-trust > .wp-block-group {
		display: grid;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--30);
		row-gap: var(--wp--preset--spacing--10);
		align-items: start;
		padding: var(--wp--preset--spacing--30);
	}

	.wink-values > .wp-block-group > .wp-block-image,
	.wink-trust > .wp-block-group > .wp-block-image {
		grid-row: span 2;
		margin: 0 !important;
	}

	.wink-values .wp-block-image img,
	.wink-trust .wp-block-image img {
		width: 2.25rem !important;
		height: 2.25rem !important;
	}

	.wink-values .wp-block-heading {
		margin-block-start: 0;
		font-size: var(--wp--preset--font-size--lg);
	}

	.wink-values .wp-block-heading + p {
		margin-block-start: 0;
	}

	/* Home hero: expertise links as a list, arrow at the end of each row. */
	.wink-hero-expertises {
		grid-template-columns: minmax(0, 1fr);
	}

	.wink-hero-expertises a {
		justify-content: space-between;
		padding-block: 0.7rem;
		padding-inline-end: 0;
		border-bottom: 1px solid var(--wp--custom--line--on-dark);
	}

	.wink-hero-expertises li:last-child a {
		border-bottom: 0;
	}

	.wink-hero-expertises a::after {
		inset-inline-end: 0;
	}

	/* Home process: one step per row, number in its own column. */
	.wink-build-section .wink-steps {
		grid-template-columns: minmax(0, 1fr);
		row-gap: var(--wp--preset--spacing--30);
	}

	.wink-build-section .wink-steps > .wp-block-group {
		display: grid;
		grid-template-columns: 2.5rem minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--20);
	}

	.wink-build-section .wink-steps > .wp-block-group > .wink-step-num {
		grid-row: span 2;
		padding-block-start: 0.2rem;
	}

	.wink-build-section .wink-steps .wp-block-heading {
		margin-block-start: 0;
		font-size: var(--wp--preset--font-size--lg);
	}

	.wink-build-section .wink-steps .wp-block-heading + p {
		margin-block-start: 0.25rem;
		font-size: var(--wp--preset--font-size--sm);
	}
}

/* Footer links: comfortable tap targets. */
.site-footer__links,
.site-footer .wink-contact.is-compact {
	gap: 0.3rem;
}

.site-footer__links a,
.site-footer .wink-contact.is-compact a,
.site-footer .wink-contact.is-social-list a {
	display: inline-block;
	padding-block: 0.4rem;
}

/* ---------- Motion (progressive enhancement: content is visible without it) ---------- */
@supports (animation-timeline: view()) {

	@media (prefers-reduced-motion: no-preference) {

		.wink-reveal {
			animation: wink-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 28%;
		}

		.wp-block-image.is-style-reveal img {
			animation: wink-reveal-img linear both;
			animation-timeline: view();
			animation-range: entry 0% cover 40%;
		}
	}
}

@keyframes wink-reveal {

	from {
		opacity: 0.15;
		transform: translateY(36px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes wink-reveal-img {

	from {
		clip-path: inset(14% 8%);
	}

	to {
		clip-path: inset(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.001s !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001s !important;
		scroll-behavior: auto !important;
	}
}

/* Inline text colour (editor "Highlight" format) must never show the browser's yellow mark background. */
mark.has-inline-color {
	background-color: transparent;
}