/*
 * Drache d'Avril — Présentation marque (bloc drache/marque).
 * Réf design : Figma node 14627:3356 (section « Qui se cache derrière… »).
 *
 * Trois calques :
 *   .marque__flower  : tulipe + feuilles, derrière le texte (z 0)
 *   .marque__content : le flux, surtitre + titre puis le bloc de texte (z 1)
 *   .marque__clouds  : les nuages, par-dessus tout et saignés sur les bords (z 2)
 *
 * Les nuages sont AU-DESSUS du contenu, pas derrière : l'animation prévue les
 * fait s'écarter pour révéler le titre, donc ils doivent pouvoir le recouvrir.
 *
 * Toutes les positions sont en pourcentage de leur cadre, donc la composition
 * est homothétique : elle suit la largeur de la page sans réglage par palier.
 * Valeurs relevées node par node dans Figma, canvas 1440, contenu 1280.
 *
 * Piège de relevé, pour les prochaines fois : sur un nœud PIVOTÉ, get_metadata
 * renvoie l'origine du nœud après rotation, pas sa boîte englobante. L'écart
 * vaut largeur × sin(angle) en Y quand l'angle est négatif, hauteur × sin(angle)
 * en X quand il est positif. Ce sont les insets du contexte de design qui
 * donnent la vraie boîte, et c'est elle qu'il faut poser en CSS puisque
 * rotate() garde le centre fixe.
 *
 * Le fond céladon et le quadrillage ne sont pas ici : ils restent portés par le
 * core/group qui contient le bloc, comme pour category-push et product-carousel.
 */

.marque {
	/* Largeur du contenu, et largeur de la couche de nuages : 1958.68 / 1440 de
	   la fenêtre. Le dépassement de 36 % est ce qui garantit que les nuages
	   saignent toujours des deux côtés, quelle que soit la largeur. */
	--mq-content-w: 1280px;
	--mq-clouds-w: 136.019vw;

	/* Piste de défilement : distance pendant laquelle le titre reste collé. */
	--mq-runway: 80vh;

	/*
	 * Bornes de la course des nuages, lues par view.js. Elles disent où se
	 * trouve le HAUT DU TITRE dans l'écran, en part de hauteur de fenêtre :
	 * 0.75 = aux trois quarts vers le bas, une valeur négative = déjà sorti par
	 * le haut. L'exposant règle la courbe, 1 étant linéaire.
	 *
	 * Ici la fin est négative parce que le titre est COLLÉ : il reste immobile
	 * au centre pendant que la piste, elle, continue de défiler. L'écartement
	 * occupe donc tout le temps du collage.
	 */
	--mq-clouds-start: 0.75;
	--mq-clouds-end: -0.45;
	--mq-clouds-power: 2.4;

	/*
	 * Course des nuages. --mq-clouds va de 0 (groupe resserré sur le titre) à 1
	 * (sortis du cadre) et c'est le script qui l'écrit. --mq-cloud-mid dit à quel
	 * moment de cette course on passe par la composition de la maquette : les
	 * nuages la traversent sans s'y arrêter.
	 *
	 * --mq-spread est la course ramenée à ce point de passage. Elle vaut 1 sur la
	 * maquette, et dépasse 1 ensuite : les mêmes formules de déplacement et
	 * d'échelle prolongent alors le mouvement dans la direction déjà relevée,
	 * sans rien avoir à mesurer de plus.
	 *
	 * VALEUR PAR DÉFAUT = le point de passage, donc la maquette validée. Sans JS
	 * ni en mouvement réduit, la section garde ses nuages aux bords.
	 */
	/*
	 * 0.45 et pas plus haut : c'est l'olive qui commande. Sa position de maquette
	 * la met déjà au bord droit, il lui faut donc une longue course après le
	 * point de passage pour dégager complètement le cadre. Calculé, pas deviné :
	 * son bord gauche ne dépasse la fenêtre qu'au-delà d'une course de 2,09 fois
	 * le point de passage.
	 */
	--mq-cloud-mid: 0.45;

	/*
	 * Écart entre l'accroche et le titre. Il s'ouvre au départ et se referme au
	 * moment du collage, ce qui fait que les deux lignes ne se calent pas
	 * exactement en même temps : le titre rattrape l'accroche.
	 *
	 * --mq-gap va de 0 (écart ouvert) à 1 (écart de la maquette), écrit par le
	 * script. --mq-gap-open est le supplément courant, consommé à deux endroits :
	 * l'écart du titre, et le décalage des nuages, qui doivent suivre le titre
	 * puisque c'est lui qu'ils couvrent.
	 *
	 * Par défaut 1, donc l'écart de la maquette : sans script, rien ne bouge.
	 */
	--mq-gap-extra: 60px;
	--mq-gap: 1;
	--mq-gap-open: calc(var(--mq-gap-extra) * (1 - var(--mq-gap)));
	--mq-clouds: var(--mq-cloud-mid);
	--mq-spread: calc(var(--mq-clouds) / var(--mq-cloud-mid));

	/* Ligne de collage. La hauteur du titre suit les tailles en vw, donc sa
	   moitié vaut ~10vw + 20px : le titre se cale au centre de la fenêtre à
	   toutes les largeurs, sans mesure en JS. */
	--mq-pin-top: max(2rem, calc(50vh - 10vw - 20px));

	position: relative;
	/*
	 * clip et NON hidden, pour deux raisons.
	 * 1. hidden crée un conteneur de défilement, et un élément collant se cale
	 *    sur le conteneur de défilement le plus proche : le titre ne collerait
	 *    jamais. clip rogne sans créer de conteneur.
	 * 2. C'est la convention du thème : main.css clippe le débord horizontal sur
	 *    .site-main et univers.css documente le refus de hidden sur une section.
	 */
	overflow: clip;
	isolation: isolate;
}

/* -------------------------------------------------------------------------
   Piste de défilement et collage du titre
   ---------------------------------------------------------------------- */

/*
 * .marque__stage n'a pas d'autre rôle que de donner sa course au titre collé.
 * Le titre se décolle quand le bas de la piste arrive, c'est-à-dire pile quand
 * .marque__text entre. À cet instant le titre est visuellement au bas de la
 * piste et le texte juste dessous : la composition finale est exactement la
 * maquette, sans espace vide résiduel.
 *
 * La course est un ÉLÉMENT DE FLUX, .marque__runway, et pas un padding sur la
 * piste ni une marge sur le titre. Le bloc englobant d'un élément collant est la
 * boîte de CONTENU de son parent : un padding en est exclu, et une marge posée
 * sur le titre ne lui a donné aucune course non plus (vérifié dans le
 * navigateur). Un élément vide dans le flux, lui, allonge la boîte de contenu
 * d'exactement ce qu'on veut, sans estimer la hauteur du titre.
 */
.marque__stage {
	position: relative;
}

/* La piste elle-même : du vide, dont la seule fonction est la durée du collage. */
.marque__runway {
	height: var(--mq-runway);
}

/* -------------------------------------------------------------------------
   Contenu
   ---------------------------------------------------------------------- */

.marque__content {
	position: relative;
	z-index: 1;
	max-width: var(--mq-content-w);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--6-xl, 5rem) var(--wp--preset--spacing--8-xl, 10rem);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--7-xl, 7.5rem);
}

/*
 * Le titre porte les nuages : ils le recouvrent au départ et doivent le suivre
 * tant qu'il est collé. z-index 2 pour que la couche passe devant le bloc de
 * texte, qui monte sous elle.
 */
.marque__head {
	position: sticky;
	top: var(--mq-pin-top);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--wp--preset--spacing--3-xl, 2.5rem) + var(--mq-gap-open));
	text-align: center;
}

/*
 * Les tailles sont en vw borné plutôt qu'en palier : la maquette est calée sur
 * 1440, et 120 px y valent 8.333vw. Le texte suit donc la même homothétie que
 * les décors, avec un plancher pour rester lisible en mobile.
 */
.marque__eyebrow {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: clamp(1.5rem, 2.778vw, var(--wp--preset--font-size--3-xl, 2.5rem));
	line-height: var(--wp--custom--typography--headings--h3--line-height, 1.2);
	letter-spacing: var(--wp--custom--typography--headings--h3--letter-spacing, -2px);
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

.marque__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: clamp(3rem, 8.333vw, var(--wp--preset--font-size--8-xl, 7.5rem));
	/* La maquette cale le titre à 120/120, pas sur le 1.125 du design system. */
	line-height: 1;
	letter-spacing: var(--wp--custom--typography--headings--h1--letter-spacing, -2px);
	color: var(--wp--preset--color--violet-bolder, #28076e);
	text-align: center;
}

/* -------------------------------------------------------------------------
   Bloc de texte : deux colonnes décalées de part et d'autre de la tulipe
   ---------------------------------------------------------------------- */

/*
 * Grille relevée dans le cadre de 1280 :
 *   117 de marge | 465 de colonne | 230 de gouttière (la tulipe) | 450 | reste
 * Les décalages verticaux passent par un padding en % : un pourcentage de
 * padding se résout TOUJOURS sur la largeur, jamais sur la hauteur, donc le
 * décalage reste proportionnel sans dépendre de la hauteur du texte.
 */
/*
 * Pas de position: relative ici, volontairement. La tulipe s'ancre sur le BAS de
 * .marque__content, pas sur ce bloc : c'est ce qui la colle au bas de la
 * section. Positionner ce conteneur en ferait le repère et casserait l'ancrage.
 */
.marque__text {
	display: grid;
	grid-template-columns: 9.1406% 36.3281% 17.9688% 35.1563% 1fr;
	align-items: start;
}

.marque__para {
	margin: 0;
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-size: clamp(1.25rem, 2.222vw, var(--wp--preset--font-size--2-xl, 2rem));
	line-height: var(--wp--custom--typography--headings--h4--line-height, 1.25);
	letter-spacing: var(--wp--custom--typography--headings--h4--letter-spacing, -2px);
	color: var(--wp--preset--color--violet-bolder, #28076e);
}

/* Le texte passe devant la tulipe. */
.marque__para,
.marque__col {
	position: relative;
	z-index: 1;
}

/*
 * Apparition des deux phrases, gauche puis droite, et parallaxe une fois qu'elles
 * sont là. Même principe que les nuages : les variables valent leur état de repos
 * par défaut, donc le texte est lisible et à sa place si rien ne tourne.
 *
 * Les deux décalages s'additionnent dans un seul translate, puisqu'ils portent
 * sur la même propriété :
 *   - la montée d'apparition, qui s'annule quand --mq-reveal atteint 1 ;
 *   - la parallaxe, pilotée par --mq-para.
 *
 * --mq-para vaut 0.5 quand le bloc de texte est à sa hauteur de lecture : le
 * facteur (1 - 2 × para) s'annule alors, et la composition est EXACTEMENT celle
 * de la maquette à ce moment-là. Il va de +1 à -1 sur la traversée, donc chaque
 * colonne dérive de son amplitude vers le bas puis vers le haut.
 *
 * Amplitudes de signes opposés : la colonne de gauche monte un peu plus vite que
 * la page, celle de droite un peu moins. Elles se décalent l'une par rapport à
 * l'autre au lieu de glisser ensemble, ce qui prolonge le jeu de plans des
 * nuages. Petites valeurs volontairement : la colonne de droite porte le bouton,
 * qui ne doit pas donner l'impression de flotter.
 */
.marque__para--left,
.marque__col {
	opacity: var(--mq-reveal, 1);
	translate: 0 calc(
		(1 - var(--mq-reveal, 1)) * 1.5rem
		+ var(--mq-para-amp, 0px) * (1 - 2 * var(--mq-para, 0.5))
	);
}

.marque__para--left {
	--mq-reveal: var(--mq-text-1, 1);
	--mq-para-amp: 160px;
}

.marque__col {
	--mq-reveal: var(--mq-text-2, 1);
	--mq-para-amp: -48px;
}

/* 99.59 px de décalage sur une colonne de 465. */
.marque__para--left {
	grid-column: 2;
	padding-block-start: 21.4172%;
}

/* 162.59 px de décalage sur une colonne de 450 (top -37.41 + padding 200). */
.marque__col {
	grid-column: 4;
	padding-block-start: 36.1311%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--3-xl, 2.5rem);
}

/* Le CTA vient de core/buttons : on ne restyle rien, button.css fait le travail. */
.marque__col .wp-block-buttons {
	margin: 0;
}

/* -------------------------------------------------------------------------
   Tulipe et feuilles
   ---------------------------------------------------------------------- */

/*
 * Le groupe est ancré au BAS de .marque__content, dont le bord bas est celui de
 * la section : la tige touche donc le bas de la section, sans écart, quelle que
 * soit la hauteur du texte au-dessus.
 *
 * Le décalage de 5.2681 % vers le haut n'est pas un réglage à l'œil : dans le
 * cadre relevé sur Figma, le pied de la plante tombe à 105.2681 % de la hauteur
 * (22.5348 + 82.7333), donc sous le cadre. On remonte d'exactement ce
 * dépassement pour que ce soit la PLANTE qui touche le bas, et non son cadre.
 *
 * Conséquence à connaître : la tulipe ne suit plus le texte s'il reflue, elle
 * reste collée au bas. C'est le comportement demandé.
 *
 * Cadre 336.01 × 621.27, posé à x 501 du contenu de 1280.
 */
.marque__flower {
	position: absolute;
	z-index: 0;
	left: 39.1406%;
	bottom: 0;
	translate: 0 -5.2681%;
	width: 26.2508%;
	aspect-ratio: 336.01 / 621.27;
	pointer-events: none;

	/*
	 * La tulipe pousse depuis le bas. Le pied de la plante tombe au bas du cadre,
	 * donc l'origine en bas fait sortir la tige du sol. L'étirement est uniforme
	 * et écrase donc un peu la fleur en début de course : c'est le prix d'un SVG
	 * partagé avec le bloc Univers et non découpé. Le dépassement en fin de
	 * course, calculé par le script, rattrape la lecture.
	 */
	transform-origin: center bottom;
	scale: 1 var(--mq-flower, 1);
}

/* L'instance « flower 2 » : 247 × 514 dans le cadre. */
.marque__plant {
	position: absolute;
	left: 9.8211%;
	top: 22.5348%;
	width: 73.5097%;
	height: 82.7333%;
}

.marque__tulip {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Feuille jaune, mesurée dans le cadre de la plante (247 × 514). */
.marque__leaf {
	position: absolute;
	left: 46.18%;
	top: 53.72%;
	width: 53.47%;
	height: 31.39%;
	z-index: 0;
}

/* Petite pousse verte au pied de la tige, dans le cadre du groupe. */
.marque__sprout {
	position: absolute;
	left: 26.4873%;
	top: 97.7031%;
	width: 25%;
	height: 15.0498%;
}

/*
 * Le « Je t'aime » de la tige n'a de sens qu'avec l'effeuillage du bloc Univers.
 * Ici la tulipe est un décor muet : on le masque. Les mots des pétales, eux,
 * sont déjà rose sur rose, donc invisibles comme dans la maquette.
 */
.marque__tulip .stem_text {
	opacity: 0;
}

/* -------------------------------------------------------------------------
   Nuages
   ---------------------------------------------------------------------- */

/*
 * Calque unique de 1958.68 × 924.01, ancré au TITRE et non à la section, pour
 * qu'il suive le titre collé. Dans la maquette le calque est 256.41 px au-dessus
 * du haut du titre (-176.41 du haut de section, moins les 80 de padding), soit
 * 27.7495 % de sa propre hauteur : un translate en % se résout sur la taille de
 * l'élément, donc le décalage reste proportionnel. Même logique pour les
 * 33.34 px de décentrage horizontal, qui valent 1.7022 % de sa largeur.
 */
.marque__clouds {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 0;
	width: var(--mq-clouds-w);
	aspect-ratio: 1958.681 / 924.014;
	/*
	 * Le décalage vertical suit le titre : quand l'écart s'ouvre, le titre
	 * descend d'autant et les nuages avec lui, sinon ils cesseraient de le
	 * couvrir au moment où c'est justement leur seul rôle.
	 */
	translate: calc(-50% + 1.7022%) calc(-27.7495% + var(--mq-gap-open));
	/*
	 * Surcote du groupe à l'état fermé. Elle était à 1.09 pour rattraper le point
	 * d'interrogation, absent du titre de la maquette de départ. Ramenée à 1 : le
	 * groupe était jugé trop gros, et l'écart qui s'ouvre éloigne l'accroche du
	 * titre, donc la géométrie relevée suffit désormais à couvrir.
	 *
	 * Bornée par max(0, …) : c'est une correction de l'état fermé, elle s'éteint
	 * sur la maquette et ne doit pas repartir en négatif pendant la sortie, ce
	 * qui rétrécirait le groupe alors qu'il doit continuer de grandir.
	 */
	scale: calc(1 + (var(--mq-cluster-boost, 1.05) - 1) * max(0, 1 - var(--mq-spread)));
	pointer-events: none; /* les nuages couvrent le texte : ils ne doivent rien capter */
}

/*
 * Chaque nuage porte sa position sur la maquette (left/top/width/height) et le
 * vecteur qui l'amène sur le titre à l'état fermé.
 *
 * Le mouvement est CONTINU : à --mq-spread = 0 le nuage est sur le titre, à 1 il
 * est sur la maquette, au-delà il poursuit dans la même direction et sort du
 * cadre. Un seul geste, pas deux phases. Comme la course est accélérée
 * (cf. view.js), la sortie est la partie la plus rapide.
 *
 * Rien n'est jamais caché : sans script la variable reste sur le point de
 * passage, donc sur la maquette validée.
 */
.marque__cloud {
	position: absolute;
	display: block;
	translate:
		calc(var(--cloud-dx, 0%) * (1 - var(--mq-spread)))
		calc(var(--cloud-dy, 0%) * (1 - var(--mq-spread)));
	/*
	 * Les nuages GROSSISSENT en s'écartant, chacun à son rythme : le jaune pâle
	 * ne prend que 6 %, l'orange 47 %, l'olive 70 %. C'est ce qui les fait jouer
	 * sur des plans différents, comme si l'olive venait vers le lecteur pendant
	 * que le jaune reste au fond. Réf : Figma 14361:2855 pour l'état de départ,
	 * 14627:3356 pour l'arrivée ; les vecteurs et les échelles ci-dessous sont
	 * relevés entre les deux, pas réglés à la main.
	 */
	scale: calc(1 + (var(--cloud-scale, 1) - 1) * (1 - var(--mq-spread)));
}

/*
 * Lilas. Il n'existe QUE dans l'état de départ : la maquette d'arrivée n'en a
 * que trois. Il ferme le bas-gauche du groupe, là où le titre passait entre les
 * autres, puis il sort du cadre par la gauche et devient invisible. Sa position
 * d'arrivée est donc la seule qui ne soit pas relevée dans Figma : elle est
 * choisie hors champ pour que l'état final reste exactement la maquette validée.
 * Cadre 410.52 × 217.133 au départ, pivoté de 1.87°.
 */
.marque__cloud--4 {
	left: -21.5395%;
	top: 68.565%;
	width: 31.4394%;
	height: 35.2483%;
	rotate: 1.87deg;
	--cloud-dx: 147%;
	--cloud-dy: -77%;
	--cloud-scale: 0.667;
}

/* Orange, haut gauche. Cadre 489.418 × 258.864, pivoté de -17.76°. */
.marque__cloud--1 {
	left: 1.4214%;
	top: 7.4074%;
	width: 24.9871%;
	height: 28.0152%;
	rotate: -17.76deg;
	--cloud-dx: 109.6%;
	--cloud-dy: 87.4%;
	--cloud-scale: 0.678;
}

/* Jaune pâle, haut droite. Cadre 353.512 × 186.98, pivoté de 21.89°. */
.marque__cloud--2 {
	left: 68.4205%;
	top: 15.4872%;
	width: 18.049%;
	height: 20.2356%;
	rotate: 21.89deg;
	--cloud-dx: -137.2%;
	--cloud-dy: 97.4%;
	--cloud-scale: 0.94;
}

/*
 * Olive, droite. Seul nuage à porter une ombre portée, et le SVG exporté inclut
 * la marge de cette ombre : 2.43 % de plus à droite, 4.59 % en bas. Le pivot est
 * donc décalé sur le centre du nuage lui-même, pas sur celui du fichier.
 * Cadre 675.591 × 364.872, pivoté de -24.25°.
 */
.marque__cloud--3 {
	left: 64.1531%;
	top: 49.2476%;
	width: 34.4926%;
	height: 39.4877%;
	rotate: -24.25deg;
	transform-origin: 48.8123% 47.8058%;
	--cloud-dx: -80.1%;
	/* Relevé : dy -23%, échelle 0.587. Corrigé ici parce que l'état de départ
	   Figma porte « Drache D'avril » sans point d'interrogation : le vrai titre
	   est plus large et plus haut à droite, et le « ? » dépassait de l'olive. */
	--cloud-dy: -25%;
	--cloud-scale: 0.66;
}

/* Les SVG remplissent leur cadre ; l'éditeur sert des <img>, mêmes règles. */
.marque__cloud > svg,
.marque__cloud > img,
.marque__tulip > svg,
.marque__tulip > img,
.marque__leaf > svg,
.marque__leaf > img,
.marque__sprout > svg,
.marque__sprout > img {
	display: block;
	width: 100%;
	height: 100%;
}

/*
 * Gouttière tant que la largeur maximale ne la fournit pas elle-même.
 *
 * Le contenu est plafonné à 1280 et centré : au-delà, les marges automatiques
 * l'écartent des bords. En dessous elles tombent à zéro et il ne reste rien —
 * sur toute la plage tablette le contenu touchait le bord de l'écran.
 * 1328 = 1280 + les deux fois 24 qu'on veut voir.
 */
@media (max-width: 1328px) {
	.marque__content {
		padding-inline: var(--wp--preset--spacing--xl, 1.5rem);
	}
}

/* -------------------------------------------------------------------------
   Empilage
   ---------------------------------------------------------------------- */

/*
 * Sous 1024, la composition en trois zones n'a plus la place de tenir : le texte
 * passe en une colonne centrée et la tulipe descend dessous. Pas de maquette
 * mobile pour cette section, ces règles sont à valider en recette.
 */
@media (max-width: 781px) {
	/*
	 * VERSION SIMPLIFIÉE DE LA SÉQUENCE (décision d'Hubert).
	 *
	 * On garde ce qui porte le geste de marque : les nuages qui s'écartent et
	 * l'apparition des deux phrases. On abandonne le collage du titre et la
	 * parallaxe, qui demandaient chacun leur propre calibrage sur un écran
	 * étroit et déraillaient plus qu'ils n'apportaient.
	 *
	 * Les variables sont ramenées à leur état de repos plutôt que le script
	 * désarmé : il continue de les écrire, mais celles-ci gagnent par la media
	 * query. Une seule source de vérité, ici.
	 */
	.marque {
		/*
		 * !important, et ce n'est pas un raccourci : le script écrit ces variables
		 * en style INLINE sur la section, et un inline bat toute déclaration de
		 * feuille. Sans ça la parallaxe restait active en mobile, avec ses 160 px
		 * d'amplitude, et les deux paragraphes se chevauchaient.
		 */
		--mq-runway: 0px !important;
		--mq-gap: 1 !important;
		--mq-para: 0.5 !important;

		/*
		 * Sans script, le titre reste LISIBLE : les nuages sont sortis.
		 * Pas de !important, contrairement aux trois variables du dessus : le
		 * script doit pouvoir reprendre la main et jouer la séquence.
		 */
		--mq-clouds: 1;

		/*
		 * La course des nuages se termine BIEN AVANT que le titre ne sorte de
		 * l'écran. Les bornes de bureau ne valent rien ici : elles s'étalent sur
		 * 1,2 fenêtre parce que le titre y est collé et attend. En mobile il
		 * défile normalement, donc à ces bornes-là il quittait le haut de
		 * l'écran alors que les nuages n'étaient sortis qu'aux deux tiers, et le
		 * titre n'était jamais lu en clair.
		 *
		 * Départ à 0.85 : les nuages s'écartent dès que le titre pointe en bas
		 * de l'écran. Fin à 0.15 : ils ont fini quand il arrive en haut, encore
		 * entier. Soit 0,7 fenêtre de défilement, contre 1,2 en bureau.
		 *
		 * Exposant ramené de 2,4 à 1,6 : sur une course plus courte, 2,4 ne
		 * laissait rien voir jusqu'aux trois quarts puis précipitait tout. Le
		 * mouvement accélère toujours, mais il se lit.
		 */
		--mq-clouds-start: 0.85;
		--mq-clouds-end: 0.15;
		--mq-clouds-power: 1.6;
	}

	/*
	 * relative et non static : le collage disparaît dans les deux cas, mais
	 * relative garde le titre comme bloc englobant du calque de nuages. En
	 * static le calque se serait raccroché à .marque__content, donc au haut de
	 * la SECTION, et la grappe n'aurait plus rien eu à voir avec le titre.
	 */
	.marque__head {
		position: relative;
		/*
		 * Et top remis à auto : relative honore top, contrairement à static. Le
		 * --mq-pin-top du collage, qui vaut la moitié de la fenêtre, décalait le
		 * titre de plusieurs centaines de pixels hors de sa piste.
		 */
		top: auto;
	}

	.marque__runway {
		display: none;
	}

	/* ---------------------------------------------------------------------
	   Nuages — relevés sur la maquette mobile de l'état COUVERT
	   (Figma 14651:6211, 393 px).
	   ------------------------------------------------------------------ */

	/*
	 * En bureau le calque est un cadre à lui, plus large que la fenêtre, dans
	 * lequel les nuages sont placés à leur position d'ARRIVÉE ; un vecteur les
	 * ramène ensuite sur le titre. Ce modèle ne se transpose pas : la maquette
	 * mobile ne donne que l'état couvert, et rien de l'arrivée.
	 *
	 * Le calque épouse donc exactement le bloc titre (345 × 196 sur les 393 de
	 * la maquette), et le modèle s'inverse : left/top portent la position
	 * COUVERTE, et --cloud-out-* dit par où chacun sort. Une seule maquette à
	 * relever, une seule direction à choisir.
	 */
	.marque__clouds {
		inset: 0;
		width: auto;
		height: auto;
		aspect-ratio: auto;
		translate: 0;
		scale: 1;
	}

	/*
	 * Piloté par --mq-clouds (0 couvert, 1 sorti) et NON par --mq-spread, qui
	 * est cette course ramenée au point de passage de la maquette de bureau et
	 * grimpe jusqu'à 2,2 : les nuages seraient partis deux fois trop loin.
	 */
	.marque__cloud {
		translate:
			calc(var(--cloud-out-x, 0%) * var(--mq-clouds))
			calc(var(--cloud-out-y, 0%) * var(--mq-clouds));
		scale: calc(1 + var(--cloud-grow, 0.5) * var(--mq-clouds));
	}

	/*
	 * Les taux de grossissement sont ceux de la version bureau, lus à l'envers :
	 * le crème ne bouge presque pas d'échelle et reste au fond, l'olive et le
	 * lilas viennent vers le lecteur. C'est ce décalage qui fait les plans.
	 */

	/* Lilas, bas gauche. Sort par la gauche en descendant. */
	.marque__cloud--4 {
		left: -4.652%;
		top: 59.107%;
		width: 62.783%;
		height: 58.452%;
		--cloud-out-x: -180%;
		--cloud-out-y: 60%;
		--cloud-grow: 0.5;
	}

	/* Orange, haut gauche. */
	.marque__cloud--1 {
		left: 1.24%;
		top: 30.291%;
		width: 54.065%;
		height: 50.335%;
		rotate: -5.4deg;
		--cloud-out-x: -170%;
		--cloud-out-y: -60%;
		--cloud-grow: 0.47;
	}

	/* Crème, haut droite. Le plan du fond : presque pas d'échelle. */
	.marque__cloud--2 {
		left: 33.171%;
		top: 25.893%;
		width: 57.054%;
		height: 53.118%;
		rotate: 7.09deg;
		--cloud-out-x: 170%;
		--cloud-out-y: -60%;
		--cloud-grow: 0.06;
	}

	/*
	 * Olive, bas droite. Sa boîte est celle du FICHIER, ombre portée comprise,
	 * d'où les 2,43 % de large et 4,59 % de haut en plus par rapport au nuage
	 * lui-même. Le transform-origin de la règle de bureau reste valable, il est
	 * exprimé dans cette même boîte.
	 */
	.marque__cloud--3 {
		left: 36.864%;
		top: 57.638%;
		width: 67.583%;
		height: 64.246%;
		rotate: -8.08deg;
		--cloud-out-x: 180%;
		--cloud-out-y: 60%;
		--cloud-grow: 0.52;
	}

	/*
	 * Mise en page relevée sur la maquette mobile (Figma 14649:6021, 393 px).
	 * Le contenu y fait 345 px, soit 24 px de gouttière de chaque côté.
	 */
	.marque__content {
		padding-block: var(--wp--preset--spacing--6-xl, 5rem);
		/* 120 px entre le bloc titre et le bloc de texte, comme en bureau.
		   Redit ici plutôt qu'hérité : c'est une valeur de la maquette mobile,
		   elle ne doit pas suivre silencieusement un changement côté bureau. */
		gap: var(--wp--preset--spacing--7-xl, 7.5rem);
	}

	/* L'accroche et le titre restent CENTRÉS : seuls les paragraphes passent à
	   gauche. L'interlettrage tombe à 0, contre -2px en bureau. */
	.marque__head {
		gap: var(--wp--preset--spacing--xl, 1.5rem);
	}

	.marque__eyebrow {
		/*
		 * 20 px FIXES, et non le pas lg du thème : celui-ci est fluide et tombe
		 * à 15 px sous 500 de large. La maquette mobile cale l'accroche à 20 sur
		 * 28 d'interligne, c'est elle qui donne au bloc titre sa hauteur de 196.
		 */
		font-size: 1.25rem;
		line-height: 1.4;
		letter-spacing: 0;
	}

	.marque__title {
		/* 64 px sur 72 d'interligne. */
		font-size: 4rem;
		line-height: 1.125;
		letter-spacing: 0;
	}

	/*
	 * Le bloc de texte passe en colonne simple, aligné à GAUCHE. Chaque
	 * paragraphe porte un retrait à droite qui dégage la tulipe : 80 px pour le
	 * premier, 120 px pour le second, relevés sur la maquette et exprimés en
	 * pourcentage pour suivre la largeur.
	 */
	.marque__text {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		text-align: left;
		gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	}

	.marque__para {
		font-size: 1.125rem;
		line-height: 1.3333;
		letter-spacing: 0;
	}

	.marque__para--left {
		padding-block-start: 0;
		padding-inline-end: 23.2%;
	}

	.marque__col {
		padding-block-start: 0;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--3-xl, 2.5rem);
	}

	.marque__para--right {
		padding-inline-end: 34.8%;
	}

	/*
	 * Le bouton garde sa taille de libellé (20 px dans la maquette) et resserre
	 * son padding à 16 px, soit 0.8em. C'est le padding qui faisait déborder, pas
	 * la police. Le clamp ne sert que pour les écrans plus étroits que 393.
	 *
	 * Quatre classes dans le sélecteur : la règle de WordPress en compte trois
	 * (.wp-block-button .wp-block-button__link.has-lg-font-size) et à égalité
	 * c'est son ordre source qui l'emporte.
	 */
	.marque .marque__col .wp-block-button .wp-block-button__link {
		font-size: clamp(0.9375rem, 5vw, 1.25rem) !important;
		padding-inline: 0.8em;
		white-space: nowrap;
	}

	/*
	 * La tulipe n'est plus centrée sous le texte : elle se cale en bas à DROITE
	 * et déborde jusqu'au bord de la section, derrière le bouton dont seule sa
	 * feuille jaune ressort. Le retrait négatif compense la gouttière du contenu.
	 */
	.marque__flower {
		position: absolute;
		left: auto;
		/*
		 * 163,93 px de large sur les 393 de la maquette, et un débord de 9,93 px
		 * au-delà du bord droit. Exprimés en pourcentage de .marque__content, qui
		 * est pleine largeur ici : la tulipe suit donc la fenêtre.
		 */
		right: -2.527%;
		bottom: 0;
		width: 41.713%;
		/*
		 * MIROIR horizontal : dans la maquette mobile la fleur est retournée,
		 * corolle à droite et feuille à gauche, pour que la tige tombe derrière
		 * le bouton et non dans le vide. Le -1 se substitue au 1 de la règle de
		 * bureau ; le second terme reste la pousse de la tulipe.
		 */
		scale: -1 var(--mq-flower, 1);
		/* Le cadre se resserre sur la plante : le cadrage large de la maquette
		   de bureau ne servait qu'à caler la tulipe entre les deux colonnes. */
		aspect-ratio: 247 / 514;
	}

	.marque__plant {
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/*
	 * La pousse jaune sort de derrière le bouton, au pied de la tige, et se fait
	 * rogner par le bas de la section.
	 *
	 * Ses pourcentages sont recalculés : ils se lisent sur .marque__flower, dont
	 * le cadrage mobile est plus serré que celui de bureau. Les mêmes valeurs
	 * l'auraient posée ailleurs.
	 */
	.marque__sprout {
		/*
		 * left se lit AVANT le miroir : la pousse est à gauche de la tige dans le
		 * dessin, le retournement l'amène à droite comme dans la maquette.
		 */
		left: 22.77%;
		top: 90.86%;
		width: 33.98%;
		height: 18.19%;
	}
}

/* -------------------------------------------------------------------------
   Éditeur et mouvement réduit
   ---------------------------------------------------------------------- */

/*
 * [data-type="drache/…"] n'existe QUE dans l'éditeur : c'est Gutenberg qui pose
 * l'attribut sur le conteneur du bloc. On y neutralise la piste et le collage,
 * sinon le bloc s'étirerait sur deux écrans dans le canvas. L'éditeur montre
 * donc l'état final, celui de la maquette. Même sélecteur que category-push.
 */
[data-type="drache/marque"] .marque__head {
	position: static;
}

[data-type="drache/marque"] .marque__runway {
	display: none;
}

/*
 * Mouvement réduit : le script ne s'arme pas, mais on reforce les variables ici
 * au cas où le réglage système change après le montage. Tout est visible, rien
 * ne bouge.
 */
@media (prefers-reduced-motion: reduce) {
	.marque {
		/* Le point de passage, donc la maquette avec ses nuages. Surtout pas 1,
		   qui est l'état sorti du cadre. */
		--mq-clouds: var(--mq-cloud-mid);
		--mq-gap: 1;
		--mq-para: 0.5;
		--mq-text-1: 1;
		--mq-text-2: 1;
		--mq-flower: 1;
	}

	.marque__head {
		position: static;
	}

	.marque__runway {
		display: none;
	}
}

/*
 * En mobile le point de passage n'a pas de sens : la maquette de l'état couvert
 * cache justement le titre. Sans mouvement, on montre l'état sorti.
 */
@media (prefers-reduced-motion: reduce) and (max-width: 781px) {
	.marque {
		--mq-clouds: 1;
	}
}