/* 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-marge-gauche: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 1600' fill='none' stroke='black' stroke-width='2'><style>*{vector-effect:non-scaling-stroke}</style><g transform='translate(150 90) rotate(-10) scale(1.25) translate(-45 0)'><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'/></g><g transform='translate(40 960) scale(2.2)'><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)'/></g></svg>");
	--filigrane-marge-droite: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 1600' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><style>*{vector-effect:non-scaling-stroke}</style><g transform='translate(51 160) scale(1.1) translate(-40 -4)'><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'/></g><linearGradient id='g' x2='140' gradientUnits='userSpaceOnUse'><stop stop-opacity='0'/><stop offset='1'/></linearGradient><g transform='translate(-20 1120) scale(.85)' stroke='url(%23g)'><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'/></g></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: .08;
	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. On white: 7 %. */
.conseils::before {
	--filigrane: var(--filigrane-vague);
	--filigrane-ratio: 25 / 4;
	width: 80%;
	bottom: -12px;
	right: -24%;
	opacity: .07;
}

/* 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: .06;
}

/* Strength (decision of 25/10, option A): 8 % on the grey bands of the home, 7 % on white, 6 % behind the titles of
   inner pages; phones, where the motif comes closer to the text, one step lighter. */
@media (max-width: 899px) {
	.temps-dedans::before,
	.temps-quotidien::before,
	.temps-choix::before {
		opacity: .06;
	}

	main.page > h1:first-child::before {
		opacity: .05;
	}
}

/* Side margins of wide screens (decision of 25/10, option B): from 1 680 px, one layer over the whole page, its motifs
   only in the margins beyond the content width (each tile ends 28 px or more before it), scrolling with the page. Two
   composed tiles (left: element and drop; right: cross-section and wave, half a period lower) repeat down the page.
   It sits over the bands, whose grey or white stays under it, and under the sticky header (z-index 50); the opening of
   the home stays above it, its photo running to the window edge. Nothing below 1 680 px (test:
   outils/wordpress/tests-js/filigranes-marges.test.mjs). */
@media (min-width: 1680px) {
	body {
		position: relative;
	}

	body::after {
		--m: calc((100vw - var(--largeur)) / 2);
		--t: min(var(--m) - 56px, 320px);
		--p: calc(var(--t) * 16 / 3);
		content: "";
		position: absolute;
		inset: 0;
		z-index: 40;
		background: var(--ardoise);
		opacity: .06;
		pointer-events: none;
		-webkit-mask:
			var(--filigrane-marge-gauche) left calc((var(--m) - var(--t)) / 2) top 120px / var(--t) var(--p) repeat-y,
			var(--filigrane-marge-droite) right calc((var(--m) - var(--t)) / 2) top calc(120px + var(--p) / 2) / var(--t) var(--p) repeat-y;
		mask:
			var(--filigrane-marge-gauche) left calc((var(--m) - var(--t)) / 2) top 120px / var(--t) var(--p) repeat-y,
			var(--filigrane-marge-droite) right calc((var(--m) - var(--t)) / 2) top calc(120px + var(--p) / 2) / var(--t) var(--p) repeat-y;
	}

	.temps-ouverture > section {
		z-index: 41;
	}
}

/* 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; }
}