/* Watermarks: thin line motifs from the identity, painted in the slate token through a mask, set toward a corner and
   partly cut by their host, which clips them. Empty pseudo-elements: nothing reaches the accessibility tree.
   Strokes use non-scaling-stroke so they stay 2 px at every size. */

:root {
	--filigrane-goutte: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='black' stroke-width='2'><style>*{vector-effect:non-scaling-stroke}</style><circle cx='50' cy='50' r='49'/><path d='M2.5 64C9 46 27 30 48 24s23-8 29.5-15M23 91c-5-19-2-35 13-43s38-13 53-28M24 91c6-15 16-25 28-30s33-10 46-22'/><ellipse cx='55' cy='8.5' rx='8.5' ry='3.3' transform='rotate(-6 55 8.5)'/></svg>");
	--filigrane-element: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 92 362' fill='none' stroke='black' stroke-width='2'><style>*{vector-effect:non-scaling-stroke}</style><rect x='4' y='2' width='82' height='290' rx='8'/><path d='M14 16v262M0 302h90M21 312v10h48v-10M23 322h44v11H23zM39 333v27h12v-27M39 340h12M39 346h12M39 352h12'/><rect y='292' width='90' height='20' rx='2'/></svg>");
	--filigrane-coupe: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='40 4 180 376' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><style>*{vector-effect:non-scaling-stroke}</style><rect x='108' y='8' width='24' height='12' rx='4'/><rect x='50' y='20' width='140' height='12' rx='4'/><rect x='44' y='34' width='152' height='150' rx='4'/><rect x='76' y='66' width='26' height='114' rx='6'/><rect x='138' y='66' width='26' height='114' rx='6'/><rect x='44' y='190' width='152' height='176' rx='4'/><rect x='52' y='366' width='136' height='10' rx='3'/><path d='M45 52h150M89 180v18m62-18v18M45 262c13 0 25-6 38-6s25 6 38 6 25-6 38-6 25 6 36 6M196 340h20v12m-6-12v-12'/><path d='M89 206v40m62-40v40' stroke-dasharray='6 10'/></svg>");
	--filigrane-vague: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64' fill='none' stroke='url(%23g)' stroke-width='2'><style>*{vector-effect:non-scaling-stroke}</style><linearGradient id='g' x2='140' gradientUnits='userSpaceOnUse'><stop stop-opacity='0'/><stop offset='1'/></linearGradient><path id='w' d='M-132 20c22 0 44-14 66-14s44 14 66 14 44-14 66-14 44 14 66 14 44-14 66-14 44 14 66 14 44-14 66-14 44 14 66 14 44-14 66-14 44 14 66 14'/><use href='%23w' x='40' y='14' stroke-opacity='.7'/><use href='%23w' x='80' y='28' stroke-opacity='.5'/><use href='%23w' x='120' y='42' stroke-opacity='.3'/></svg>");
}

.temps-dedans,
.temps-quotidien,
.temps-choix,
.conseils {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

.temps-dedans::before,
.temps-quotidien::before,
.temps-choix::before,
.conseils::before,
main.page > h1:first-child::before {
	content: "";
	position: absolute;
	z-index: -1;
	aspect-ratio: var(--filigrane-ratio);
	background: var(--ardoise);
	opacity: .05;
	pointer-events: none;
	-webkit-mask: var(--filigrane) center / contain no-repeat;
	mask: var(--filigrane) center / contain no-repeat;
}

/* Home 3 · Dedans: a Black Berkey® element. Phones: lying along the top edge, in the padding above the kicker, its
   dome out of frame on the right. Wider screens: leaning above the photo of the element, its dome cut by the top edge. */
.temps-dedans::before {
	--filigrane: var(--filigrane-element);
	--filigrane-ratio: 92 / 362;
	width: 96px;
	top: -165px;
	right: 41px;
	rotate: 90deg;
}

/* Home 5 · Au quotidien: the footer wave in four lines, fading in from the left, top right. */
.temps-quotidien::before {
	--filigrane: var(--filigrane-vague);
	--filigrane-ratio: 25 / 4;
	width: max(110%, 440px);
	top: 8px;
	right: -30%;
}

/* Home 7 · Lequel est fait pour vous ?: the cross-section of the system, top right, only its lower chamber in frame
   (in the top padding on phones, beside the heading and above the photos on wider screens). */
.temps-choix::before {
	--filigrane: var(--filigrane-coupe);
	--filigrane-ratio: 180 / 376;
	--l: clamp(156px, 30vw, 440px + var(--gain) * .3548);
	width: var(--l);
	top: calc(96px - var(--l) * 2.09);
	right: -10%;
}

@media (min-width: 900px) {
	.temps-dedans::before {
		width: calc(230px + var(--gain) * .1855);
		top: calc(-340px - var(--gain) * .2742);
		right: auto;
		left: 12%;
		rotate: 32deg;
	}

	.temps-quotidien::before {
		width: 62%;
		top: 88px;
		right: -14%;
	}

	.temps-choix::before {
		top: calc(440px + var(--gain) * .3548 - var(--l) * 2.09);
		right: -8%;
	}
}

/* « Recevoir nos conseils »: the wave along the bottom, to the right of the button. */
.conseils::before {
	--filigrane: var(--filigrane-vague);
	--filigrane-ratio: 25 / 4;
	width: 80%;
	bottom: -12px;
	right: -24%;
}

/* Inner pages, title area: the logo symbol hanging from the header beside the title, cut by the header and by the right
   edge. Anchored to the title (its lowest point stays 12 px under it, above the first paragraph), clipped sideways by
   the page wrapper (full width, see pages.css), whose stacking context keeps it under the sticky header; above the
   title it runs under the opaque header. On white: lighter. */
main.page > h1:first-child {
	position: relative;
}

main.page {
	isolation: isolate;
	overflow-x: clip;
}

main.page > h1:first-child::before {
	--filigrane: var(--filigrane-goutte);
	--filigrane-ratio: 1;
	--d: max(260px, 40vw);
	width: var(--d);
	bottom: -12px;
	left: calc(100vw - max(var(--g), (100vw - var(--largeur)) / 2) - var(--decalage) - var(--d) * .7);
	opacity: .035;
}

/* Home only: the motif lags behind the scroll like a distant layer (compositor-only), on precise pointers without
   reduced motion. It is cut by its section (overflow: clip), never by its own box, so the cut stays on the section
   edge while it moves. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
		.temps-dedans,
		.temps-quotidien,
		.temps-choix {
			view-timeline: --filigrane block;
		}

		.temps-dedans::before,
		.temps-quotidien::before,
		.temps-choix::before {
			animation: filigrane-derive linear both;
			animation-timeline: --filigrane;
		}
	}
}

@keyframes filigrane-derive {
	from { translate: 0 -64px; }
	to { translate: 0 64px; }
}