/**
 * Légumes au trait.
 *
 * La maquette pose ici et là un légume dessiné, très pâle, qui déborde d'un
 * bord de section. Ce sont des variantes de style des blocs de section —
 * groupe, colonnes, couverture — et de la colonne : on les active depuis le
 * panneau « Styles » du bloc, on ne les code pas dans les compositions.
 *
 * Une seule mécanique pour les quatre — un pseudo-élément derrière le contenu —
 * et une URL par légume, regroupées ici pour qu'un changement de fichier ne
 * demande qu'une ligne.
 */

:root {
	--pd-deco-asperges: url( "../images/deco-asperges.webp" );
	--pd-deco-carotte: url( "../images/deco-carotte.webp" );
	--pd-deco-rave: url( "../images/deco-rave.webp" );
	--pd-deco-tomate: url( "../images/deco-tomate.webp" );
}

/* -------------------------------------------------------------------
 * Mécanique commune
 * ------------------------------------------------------------------- */

[ class*="is-style-deco-" ] {
	position: relative;
	overflow: clip;
}

/*
 * Les dessins sont des traits noirs sur des aplats blancs. En fusion
 * « multiply », le blanc disparaît dans le fond, quel qu'il soit, et seul le
 * trait reste ; l'opacité le ramène au gris pâle de la maquette.
 */
[ class*="is-style-deco-" ]::after {
	content: "";
	position: absolute;
	z-index: 0;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
	mix-blend-mode: multiply;
	opacity: 0.35;
}

/* Le contenu repasse devant : le décor ne doit jamais gêner la lecture. */
[ class*="is-style-deco-" ] > * {
	position: relative;
	z-index: 1;
}

/* -------------------------------------------------------------------
 * Placements
 *
 * Chacun reprend la position et la taille qu'il occupe dans la maquette.
 * Les fichiers ont de larges marges transparentes : la boîte suit le ratio
 * de l'image, et c'est la hauteur de la section qui donne l'échelle, comme
 * sur la maquette où chaque légume est calé sur sa section.
 * ------------------------------------------------------------------- */

/*
 * Asperges : bord droit, debout sur le bas — pied de page. La botte occupe
 * 34 à 72 % de la largeur de l'image ; décalée de 39 % de sa boîte, elle
 * reste visible à 70 %, quel que soit l'écran.
 */
.is-style-deco-asperges::after {
	inset: auto 0 -12% 80%;
	height: 100%;
	aspect-ratio: 1943 / 2149;
	background-image: var( --pd-deco-asperges );
	background-position: right bottom;
}

/*
 * Carotte : bord droit, fanes sur toute la hauteur — section livraison.
 * La seule sans fusion : ses fanes sont des aplats noirs évidés de blanc,
 * comme sur le logo, et perdraient leur centre blanc en « multiply ».
 * Le dessin occupe 22 à 81 % de la largeur de l'image ; décalé de 31 % de
 * sa boîte, il est masqué à 20 % par le bord droit.
 */
.is-style-deco-carotte::after {
	inset: 0 0 auto 80%;
	height: 100%;
	aspect-ratio: 1478 / 2132;
	background-image: var( --pd-deco-carotte );
	background-position: right center;
	mix-blend-mode: normal;
	opacity: 0.2;
	/* Un liseré noir d'un pixel, calculé sur la transparence de l'image, la détache du vert. */
	filter: drop-shadow( 1px 0 0 #000 ) drop-shadow( -1px 0 0 #000 ) drop-shadow( 0 1px 0 #000 ) drop-shadow( 0 -1px 0 #000 );
}

/*
 * Rave : en bas, coupée par le bord, décalée vers la droite — section recettes.
 * Le style est posé sur la colonne de texte, pas sur la section : le décor
 * reste sous le texte et la photo d'en face ne le recouvre jamais. La
 * colonne est la plus haute des deux, elle donne la hauteur de la section.
 */
.is-style-deco-rave::after {
	inset: auto auto -22% 40%;
	height: 80%;
	aspect-ratio: 1667 / 1766;
	background-image: var( --pd-deco-rave );
	background-position: left bottom;
}

/* Tomate : sur la colonne de texte elle aussi, coupée par le bas — section démarche. */
.is-style-deco-tomate::after {
	inset: auto auto -9% 80%;
	width: min( 20vw, 230px );
	aspect-ratio: 699 / 681;
	background-image: var( --pd-deco-tomate );
	background-position: left bottom;
	opacity: 0.25;
}

/* Sur écran étroit, un décor qui déborde derrière le texte le rend illisible. */
@media ( max-width: 781px ) {
	.is-style-deco-rave::after,
	.is-style-deco-tomate::after {
		display: none;
	}

	.is-style-deco-asperges::after,
	.is-style-deco-carotte::after {
		opacity: 0.22;
	}
}