/*
 * Drache d'Avril — Bloc univers (cercle "coloré ludique créatif").
 * Réf design : Figma node 14329:21077.
 *
 * Structure (3 calques, tous animables car vrais éléments DOM) :
 *   .univers__bg      : le cercle jaune, géré indépendamment (z 0)
 *   .univers__decor   : les décos en <img> (tulipes, cœur, étoiles, gribouillis) (z 1)
 *   .univers__content : le texte contour (z 2)
 *
 * Overflow : la section coupe ce qui déborde (overflow:hidden) pour éviter le
 * scroll horizontal ; les décos en bord (cœur à gauche, etc.) sont donc rognées
 * au bord, comme dans la maquette.
 *
 * Positions/tailles des décos = à la louche, à affiner. Chaque déco a sa classe
 * pour pouvoir l'animer/repositionner individuellement.
 */

.univers {
	position: relative;
	/* Contexte d'empilement : sans ça, la couche back en z-index:-1 "s'échappe"
	   derrière toute la section et ses tulipes ne sont plus survolables. isolate
	   scope le z-1 dans la section (au-dessus du fond, sous le cercle). */
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: end;
	min-height: min(960px, 120vw);
	/* Pas d'overflow:hidden ici (ça coupait le cercle). Le débord horizontal est
	   clippé au niveau de la page (.site-main, cf. main.css), ce qui évite le
	   scroll sans rogner le cercle verticalement. */
	overflow: visible;
	padding-block: var(--wp--preset--spacing--11-xl, 20rem);
	padding-inline-end: var(--wp--preset--spacing--4-xl, 3rem);
}

/* Fond jaune, indépendant (repositionne/anime à volonté). */
.univers__bg {
	position: absolute;
	z-index: 0;
	top: 54%;
	left: 64%;
	transform: translate(-50%, -50%);
	width: min(840px, 90vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--yellow, #ffffab);
	box-shadow: 1.5rem 1.5rem 0 0 var(--wp--preset--color--jaune-01, #FFFA26);
}

/* Texte contour : Intro Rust Bold en lettres creuses, trait orange. */
.univers__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
}
.univers .univers__title {
	margin: 0;
	text-align: right;
	text-transform: uppercase;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: var(--wp--preset--font-size--8-xl, 7.5rem);
	line-height: 1;
	/* color:transparent monté en spécificité pour battre :root :where(p){color:noir}. */
	color: transparent;
	-webkit-text-stroke: var(--univers-stroke, 4px) var(--wp--preset--color--orange, #fc4c02);
	text-stroke: var(--univers-stroke, 4px) var(--wp--preset--color--orange, #fc4c02);
}

/* Décos : vrais éléments (animables). Le conteneur couvre la section. */
.univers__decor__front,
.univers__decor__back {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.univers__decor__back{
	z-index: -1;
}

.univers__deco {
	position: absolute;
	display: block;
	height: auto;
}
/* Front : SVG inline (animable) ; éditeur : <img>. Les deux remplissent la
   largeur posée par la classe --xxx, hauteur auto selon le ratio. */
.univers__deco > svg,
.univers__deco > img {
	display: block;
	width: 100%;
	height: auto;
}
/* Laisse dépasser ce qui sort du viewBox (pétales qui s'envolent) : un <svg> est
   en overflow:hidden par défaut, ce qui coupait les pétales au bord du SVG. */
.univers__deco > svg {
	overflow: visible;
}
.univers__deco--tulip-1   { top: 8%;  left: 12%; width: 120px; transform: rotate(-24deg); }
.univers__deco--tulip-2   { top: 4%;  left: 24%; width: 128px; transform: rotate(-8deg); }
.univers__deco--tulip-3   { top: 4%;  left: 38%; width: 120px; transform: rotate(12deg); }
.univers__deco--heart     { top: 66%; left: 8%; width: 150px; transform: rotate(24deg);}
/* Étoile 1 et gribouillis 1 remontés de 24 (demande d'Hubert du 2026-10-08).
   Le mobile pose sa propre position, plus bas, et n'est pas concerné. */
.univers__deco--star-1    { top: calc(17% - 24px); right: 22%; width: 52px; }
.univers__deco--star-2    { top: 82%; left: 76%; width: 70px; }
.univers__deco--squiggle-1 { top: calc(20% - 24px); right: 30%; width: 80px; }
.univers__deco--squiggle-2 { top: 68%; left: 54%; width: 180px; }

/*
 * Apparition des étoiles et courbes — même séquence que le décor du livret sur
 * la fiche produit (media-text-decor.css, « Apparition des décors »).
 *
 *   paire du haut  l'étoile, puis la courbe, qui part de l'étoile ;
 *   paire du bas   la courbe, qui finit sur l'étoile, puis l'étoile.
 *
 * L'étoile apparaît en fondu en tournant dans le sens antihoraire ; la courbe
 * se dessine à travers son masque (cf. squiggle1.svg et squiggle2.svg). Le
 * tracé du haut commence près de l'étoile et se dévoile depuis son DÉBUT
 * (décalage 1) ; celui du bas aussi, d'où un dévoilement depuis sa FIN
 * (décalage -1) pour finir sur elle.
 *
 * L'étoile tourne par son <svg> et non par le <span>, qui peut porter d'autres
 * transformations (retournement mobile).
 *
 * ÉTAT DE REPOS = ÉTAT FINAL : view.js pose .est-arme puis .est-joue, et ne le
 * fait pas en mouvement réduit.
 */
.univers__deco--star-1,
.univers__deco--squiggle-1 {
	--univers-etoile-delai: 0ms;
	--univers-trace-delai: 350ms;
	--univers-trace-depart: 1;
}

.univers__deco--star-2,
.univers__deco--squiggle-2 {
	--univers-trace-delai: 0ms;
	--univers-etoile-delai: 750ms;
	--univers-trace-depart: -1;
}

.univers__deco.est-arme > svg.star-illustration {
	opacity: 0;
	rotate: 30deg;
}

.univers__deco.est-arme .univers__trace {
	stroke-dashoffset: var(--univers-trace-depart);
}

/* Après .est-arme, à poids égal : c'est l'ordre qui la fait gagner. */
.univers__deco.est-joue > svg.star-illustration {
	opacity: 1;
	rotate: 0deg;
	transition:
		opacity 500ms ease-out var(--univers-etoile-delai),
		rotate 800ms cubic-bezier(0.33, 1, 0.68, 1) var(--univers-etoile-delai);
}

.univers__deco.est-joue .univers__trace {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 900ms cubic-bezier(0.65, 0, 0.35, 1) var(--univers-trace-delai);
}

/*
 * Mobile, relevé sur la frame Figma 14649:5955 (393 px).
 *
 * Le cercle passe à GAUCHE et déborde de ce côté, alors qu'il déborde à droite
 * en bureau ; le texte se centre dedans au lieu d'être ferré à droite. La
 * section perd son alignement à droite, qui n'avait de sens qu'avec le texte
 * de la colonne à sa gauche.
 */
@media (max-width: 781px) {
	/*
	 * Boîte de section relevée sur la maquette : 393 × 696, gouttière de 24 et
	 * 160 de padding vertical. La hauteur est FIXÉE parce que toute la
	 * composition se positionne en pourcentage dedans, et que le contenu (trois
	 * lignes de titre écrites avec des <br>) ne la fait pas varier.
	 */
	.univers {
		/*
		 * PLEINE LARGEUR. Le bloc est un enfant normal du groupe de section, donc
		 * il vit dans la gouttière de 16 px de la page — alors que la maquette
		 * fait saigner le cercle par le bord droit. La marge négative le ramène
		 * aux dimensions de la fenêtre, et toutes les positions ci-dessous se
		 * lisent enfin sur les 393 px de la maquette et non sur 361.
		 */
		margin-inline: calc(50% - 50vw);
		justify-content: center;
		align-items: start;
		/*
		 * 320 en haut, 160 en bas : c'est ce padding qui donne à la section ses
		 * 696 px de haut (320 + 216 de titre + 160), pas une hauteur minimale.
		 * Le titre n'est donc PAS centré verticalement, il tombe 80 px sous le
		 * milieu comme dans la maquette.
		 */
		padding-block: var(--wp--preset--spacing--11-xl, 20rem) var(--wp--preset--spacing--8-xl, 10rem);
		padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
		min-height: 0;
	}

	/*
	 * La colonne de texte qui précède la section perd son padding du bas.
	 * Empilées, les deux colonnes ne sont plus côte à côte : ces 160 px ne
	 * séparent plus rien, ils ajoutent juste du vide au-dessus du cercle, qui a
	 * déjà les siens.
	 *
	 * !important assumé. Le padding vient du réglage Dimensions du bloc, donc
	 * d'un style INLINE qu'aucune spécificité de sélecteur ne peut battre. Même
	 * cas que la réserve du nuage dans footer.css, et borné pareil à une seule
	 * propriété.
	 *
	 * Désignée par :has() : le bloc colonnes ne porte aucune classe qui lui soit
	 * propre, alors que « la colonne voisine du bloc univers » reste vrai même si
	 * la section change de place dans la page.
	 */
	.wp-block-columns:has(> .wp-block-column .univers) > .wp-block-column:not(:has(.univers)) {
		padding-bottom: 0 !important;
		padding-top: 5rem !important;
	}

	.univers__content {
		width: 100%;
	}

	/* Pleine largeur, sinon la boîte épouse le texte et le ferrage à droite
	   n'a plus rien sur quoi s'exercer. */
	.univers .univers__title {
		width: 100%;
	}

	.univers .univers__title {
		/* La maquette ferre le titre à DROITE, comme en bureau. */
		text-align: right;
		font-size: 4rem;
		line-height: 1.125;
		--univers-stroke: 3px;
	}

	/*
	 * Cercle : 466 sur les 393 de la maquette, donc il saigne à droite. Il était
	 * à 420 et posé trop à gauche, ce qui décalait toute la composition.
	 * Pas d'ombre portée en mobile, la maquette n'en a pas.
	 */
	.univers__bg {
		top: 65.66%;
		left: 64.38%;
		width: min(466px, 118.6vw);
		box-shadow: none;
	}

	/*
	 * Les deux calques de décor cessent de couvrir la section pour épouser
	 * EXACTEMENT la boîte du cercle. C'est lui l'ancre de la composition : les
	 * positions ci-dessous se lisent donc toutes en pourcentage de son diamètre,
	 * sur les deux axes puisque la boîte est carrée, et l'ensemble grandit et
	 * rétrécit d'un bloc avec lui.
	 */
	.univers__decor__front,
	.univers__decor__back {
		inset: auto;
		top: 65.66%;
		left: 64.38%;
		translate: -50% -50%;
		width: min(466px, 118.6vw);
		aspect-ratio: 1;
	}

	/*
	 * Tulipes, cœur : positionnés par leur CENTRE, seul point qui ne bouge pas
	 * quand on tourne un élément. Les relevés Figma sont des boîtes englobantes ;
	 * la largeur ci-dessous est celle du dessin AVANT rotation, recalculée depuis
	 * la boîte et l'angle.
	 */
	.univers__deco--tulip-1 {
		left: 18.76%;
		top: -0.8%;
		width: 26.88%;
		translate: -50% -50%;
		transform: rotate(-15.65deg);
	}

	.univers__deco--tulip-2 {
		left: 38.08%;
		top: -5.16%;
		width: 26.02%;
		translate: -50% -50%;
		transform: rotate(-7.6deg);
	}

	.univers__deco--tulip-3 {
		left: 66.28%;
		top: -9.2%;
		width: 26.46%;
		translate: -50% -50%;
		transform: rotate(7.5deg);
	}

	.univers__deco--heart {
		left: 15.06%;
		top: 86.1%;
		width: 25.77%;
		translate: -50% -50%;
		transform: rotate(17.42deg);
	}

	/* Étoiles et gribouillis : posés par leur coin, ils ne tournent pas.
	   right remis à auto, la règle de base les calait par la droite. */
	.univers__deco--star-1 {
		left: 54.59%;
		top: 2.79%;
		right: auto;
		width: 6.43%;
	}

	.univers__deco--squiggle-1 {
		left: 46.14%;
		top: 6.81%;
		right: auto;
		width: 8.19%;
		/* Retourné horizontalement dans la maquette. */
		scale: -1 1;
	}

	.univers__deco--star-2 {
		left: 69.47%;
		top: 81.37%;
		width: 9.13%;
	}

	.univers__deco--squiggle-2 {
		left: 47.22%;
		top: 65.32%;
		width: 21.78%;
	}
}

/*
 * Tablette, colonnes côte à côte (WordPress les empile sous 782).
 *
 * Le bloc colonnes porte un blockGap à « none », pensé pour le bureau où les
 * 1280 px laissent de l'air entre le texte et le cercle. Entre 782 et 1024 il
 * n'y en a plus : le cercle vient mordre sur le texte de gauche.
 *
 * Spécificité montée à trois classes : l'écart de 0 vient d'une classe
 * .wp-container-* générée par le moteur de mise en page, imprimée dans le head
 * comme cette feuille.
 */
@media (min-width: 782px) and (max-width: 1024px) {
	.site-main .wp-block-columns:has(> .wp-block-column .univers) {
		column-gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	}

	/*
	 * La composition de bureau est calée sur 1440, où le cercle (840) et la
	 * colonne qui l'accueille (720) sont dans un rapport de 1,17. Sur cette
	 * plage la colonne tombe à 370-490 mais le cercle, lui, reste à 90vw : il
	 * débordait sur le texte de gauche, et le titre en 8-xl se coupait en plein
	 * mot faute de place.
	 *
	 * Toutes les valeurs ci-dessous sont donc la maquette 1440 ramenée à la
	 * largeur de l'écran — une homothétie, pas un troisième dessin. Chaque
	 * nombre est le rapport de la valeur de bureau à 1440 : 840/1440 = 58,3vw,
	 * 960/1440 = 66,7vw, 320/1440 = 22,2vw, 120/1440 = 8,33vw, 4/1440 = 0,28vw.
	 * Les décors, eux, sont déjà en pourcentage de la section et suivent seuls.
	 */
	.univers {
		/*
		 * La hauteur, elle, ne suit PAS la réduction, et c'est mesuré : la
		 * colonne de gauche ne se met pas à l'échelle avec la fenêtre, son texte
		 * occupe 577 à 628 px sur toute la plage. À 66,7vw la section tombait à
		 * 683 et c'est la colonne de gauche qui commandait la hauteur du bloc :
		 * il ne restait que ses 160 px de padding sous le bouton, et le décor de
		 * la section suivante venait s'y poser. 860 rend l'air qu'il y a en
		 * bureau, à la proportion près.
		 */
		min-height: 860px;
		padding-block: 22.2vw;
		padding-inline-end: 3.33vw;
	}

	.univers__bg {
		width: 58.3vw;
		/* L'ombre suit la même réduction que le reste (24/1440). */
		box-shadow: 1.67vw 1.67vw 0 0 var(--wp--preset--color--jaune-01, #fffa26);
	}

	.univers .univers__title {
		font-size: 8.33vw;
		--univers-stroke: 0.28vw;
	}

	/*
	 * Les décors ont une largeur en PIXELS, contrairement à leurs positions qui
	 * sont en pourcentage de la section. Ils ne suivaient donc pas la réduction
	 * et se retrouvaient 1,75 fois trop gros : le cœur venait toucher le « C »
	 * de CRÉATIF. Mêmes rapports que ci-dessus, valeur de bureau divisée par
	 * 1440.
	 */
	/*
	 * Les tulipes sont ACCROCHÉES AU CERCLE, pas à la section.
	 *
	 * Leur « top » de base est un pourcentage de la hauteur de section. Or sur
	 * cette plage cette hauteur est fixe (860, commandée par la colonne de
	 * gauche) pendant que le cercle, lui, grandit en vw : à 820 les tulipes
	 * flottaient au-dessus de lui, à 1024 elles auraient disparu derrière.
	 *
	 * --u-circle-top est le haut du cercle : son centre (54 % de la section)
	 * moins son rayon (la moitié de 58,3vw). Chaque tulipe s'en écarte ensuite
	 * vers le haut d'une fraction de SA hauteur, celle qui laisse dehors la même
	 * part qu'en bureau — 80 % de la première enterrés, 73 % de la deuxième,
	 * 67 % de la troisième, relevés au navigateur à 1440.
	 *
	 * Hauteurs déduites de la largeur et du ratio du SVG : 165/343 pour les
	 * roses (17,32vw), 160/387 pour la rouge (21,5vw).
	 */
	.univers {
		--u-circle-top: calc(54% - 29.15vw);
	}

	.univers__deco--tulip-1 { width: 8.33vw; top: calc(var(--u-circle-top) - 4.33vw); }
	.univers__deco--tulip-2 { width: 8.89vw; top: calc(var(--u-circle-top) - 5.81vw); }
	.univers__deco--tulip-3 { width: 8.33vw; top: calc(var(--u-circle-top) - 5.72vw); }
	.univers__deco--heart      { width: 10.42vw; }
	.univers__deco--star-1     { width: 3.61vw; }
	.univers__deco--star-2     { width: 4.86vw; }
	.univers__deco--squiggle-1 { width: 5.56vw; }
	.univers__deco--squiggle-2 { width: 12.5vw; }
}

/*
 * Tulipes : balancement "au vent". La tige (svg entier) se balance ; à l'intérieur
 * du SVG, la fleur (#flower) et la feuille (#leaf) ont leur propre mouvement,
 * SYNCHRONISÉ au balancement (même durée + déphasage par tulipe). La rotation de
 * pose reste sur le span (non écrasée). Ciblage [id="..."] car le SVG est inliné
 * plusieurs fois (ids dupliqués) ; ça ne marche qu'en FRONT (SVG inline) — en
 * éditeur les décos sont des <img> opaques. Vaut pour les deux tulipes (rose et
 * rouge) dès que leur SVG porte les ids #flower / #leaf.
 */
@keyframes drache-sway {
	0%, 100% { transform: rotate(-1.5deg); }
	50%      { transform: rotate(2.25deg); }
}
@keyframes drache-flower {
	0%, 100% { transform: rotate(-4.5deg); }
	50%      { transform: rotate(6.5deg); }
}
@keyframes drache-leaf {
	0%, 100% { transform: rotate(-8deg); }
	50%      { transform: rotate(12deg); }
}

/* Tige (svg entier) — pivot en bas. */
.univers__deco--tulip-1 > svg, .univers__deco--tulip-1 > img,
.univers__deco--tulip-2 > svg, .univers__deco--tulip-2 > img,
.univers__deco--tulip-3 > svg, .univers__deco--tulip-3 > img {
	transform-origin: bottom center;
	animation: drache-sway 7s ease-in-out infinite;
	will-change: transform;
}
/* Fleur — pivot à sa base (jonction avec la tige). */
.univers__deco--tulip-1 [id="flower"],
.univers__deco--tulip-2 [id="flower"],
.univers__deco--tulip-3 [id="flower"] {
	transform-box: fill-box;
	transform-origin: bottom center;
	animation: drache-flower 7s ease-in-out infinite;
}
/* Feuille — flottement. transform-origin à ajuster selon le point d'attache. */
.univers__deco--tulip-1 [id="leaf"],
.univers__deco--tulip-2 [id="leaf"],
.univers__deco--tulip-3 [id="leaf"] {
	transform-box: fill-box;
	transform-origin: bottom center;
	animation: drache-leaf 7s ease-in-out infinite;
}

/* Synchro par tulipe : même durée + déphasage sur tige, fleur et feuille. */
.univers__deco--tulip-2 > svg, .univers__deco--tulip-2 > img,
.univers__deco--tulip-2 [id="flower"], .univers__deco--tulip-2 [id="leaf"] {
	animation-duration: 8.5s;
	animation-delay: -2.5s;
}
.univers__deco--tulip-3 > svg, .univers__deco--tulip-3 > img,
.univers__deco--tulip-3 [id="flower"], .univers__deco--tulip-3 [id="leaf"] {
	animation-duration: 6.5s;
	animation-delay: -4s;
}

@media (prefers-reduced-motion: reduce) {
	.univers__deco--tulip-1 > svg, .univers__deco--tulip-1 > img,
	.univers__deco--tulip-2 > svg, .univers__deco--tulip-2 > img,
	.univers__deco--tulip-3 > svg, .univers__deco--tulip-3 > img,
	.univers [id="flower"], .univers [id="leaf"] {
		animation: none;
	}
}

/*
 * Survol d'une tulipe : on rend la tulipe cliquable (le décor est en
 * pointer-events:none par défaut), on GÈLE le balancement (tige + feuille) et on
 * remplace le mouvement de la fleur par un tremblement rapide.
 */
.univers__deco--tulip-1,
.univers__deco--tulip-2,
.univers__deco--tulip-3 {
	pointer-events: auto;
}

@keyframes drache-tremble {
	0%, 100% { transform: rotate(0); }
	20% { transform: rotate(-2deg); }
	40% { transform: rotate(2deg); }
	60% { transform: rotate(-1deg); }
	80% { transform: rotate(1deg); }
}

.univers__deco--tulip-1:hover > svg, .univers__deco--tulip-1:hover > img,
.univers__deco--tulip-2:hover > svg, .univers__deco--tulip-2:hover > img,
.univers__deco--tulip-3:hover > svg, .univers__deco--tulip-3:hover > img,
.univers__deco--tulip-1:hover [id="leaf"],
.univers__deco--tulip-2:hover [id="leaf"],
.univers__deco--tulip-3:hover [id="leaf"] {
	animation-play-state: paused;
}

.univers__deco--tulip-1:hover [id="flower"],
.univers__deco--tulip-2:hover [id="flower"],
.univers__deco--tulip-3:hover [id="flower"] {
	animation: drache-tremble 1s ease-in-out infinite;
}

/* Dès qu'un pétale s'est envolé (classe is-plucked posée par view.js), on coupe
   le tremblement au survol. Spécificité (0,4,0) > la règle de tremble (0,3,0). */
.univers__deco.is-plucked:hover [id="flower"] {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.univers__deco--tulip-1:hover [id="flower"],
	.univers__deco--tulip-2:hover [id="flower"],
	.univers__deco--tulip-3:hover [id="flower"] {
		animation: none;
	}
}

/*
 * Pétales qui s'envolent au clic (cf. view.js). On utilise les propriétés
 * translate/rotate (et non transform) pour ne pas écraser un éventuel transform
 * de base du groupe pétale. La trajectoire (--fly-x/-y/-r) est tirée au sort en JS.
 */
.univers .js-petal {
	transform-box: fill-box;
	transform-origin: center;
	/* Reset animé : en retirant .petal--flown, ces props reviennent à l'état de
	   base en douceur (les pétales "repoussent" depuis scale 0). */
	transition: translate 0.6s ease, rotate 0.6s ease, scale 0.6s ease, opacity 0.6s ease;
}

/* Vol : le pétale suit --fly-* en fondant à 0, PUIS revient (invisible) à sa
   position d'origine en scale 0. forwards garde cet état final. */
@keyframes drache-petal-fly {
	0%   { translate: 0 0; rotate: 0deg; scale: 1; opacity: 1; }
	65%  { translate: var(--fly-x, 0) var(--fly-y, -180px); rotate: var(--fly-r, 90deg); scale: 1; opacity: 0; }
	100% { translate: 0 0; rotate: 0deg; scale: 0; opacity: 0; }
}
.univers .js-petal.petal--flown {
	animation: drache-petal-fly 1.1s ease-out forwards;
}

/* Le label révélé : une fois le pétale envolé (groupe .is-flown), on agrandit
   le texte à 16. CSS font-size l'emporte sur l'attribut font-size du SVG. */
.univers [id^="petal-"] text {
	transition: font-size 0.3s ease;
}
.univers [id^="petal-"].is-flown text {
	font-size: 16px;
}
.univers .univers__deco--tulip-2 [id^="petal-"].is-flown text {
	font-size: 24px;
}

.univers__deco .stem_text{
	opacity: 0;
}

/*
 * Cœur : petit battement (double pulse "lub-dub"). On anime le scale de l'élément
 * interne (svg/img) ; la rotation de pose reste sur le span. Origin au centre.
 */
@keyframes drache-heartbeat {
	0%, 26%, 100% { transform: scale(1); }
	7%  { transform: scale(1.06); }
	14% { transform: scale(1); }
	20% { transform: scale(1.04); }
}
.univers__deco--heart > svg,
.univers__deco--heart > img {
	transform-origin: center;
	animation: drache-heartbeat 2.6s ease-in-out infinite;
	will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
	.univers__deco--heart > svg,
	.univers__deco--heart > img {
		animation: none;
	}
}
.univers__deco:hover .stem_text{
	opacity: 0.2;
}

.univers__deco.is-plucked .stem_text{
	opacity: 1;
}

.univers [id^="petal-4"].is-flown #heart_1,
.univers [id^="petal-4"].is-flown #heart_2,
.univers [id^="petal-4"].is-flown #heart_3 {
	transform: translate(10px, -32px);
}

/*
 * Pas de vent en mobile (décision d'Hubert : sur un petit écran le balancement
 * permanent des trois tulipes fait trop). Seul le mouvement AMBIANT est coupé —
 * le tremblement au survol et l'envol des pétales au clic restent, ce sont des
 * réponses à un geste, pas du décor qui bouge tout seul.
 *
 * Placé en fin de fichier, et pas dans la media query du haut : une media query
 * n'augmente pas la spécificité, donc ces règles doivent venir APRÈS celles qui
 * posent les animations pour les emporter.
 */
@media (max-width: 781px) {
	.univers__deco--tulip-1 > svg, .univers__deco--tulip-1 > img,
	.univers__deco--tulip-2 > svg, .univers__deco--tulip-2 > img,
	.univers__deco--tulip-3 > svg, .univers__deco--tulip-3 > img,
	.univers [id="flower"], .univers [id="leaf"] {
		animation: none;
	}
}