/*
 * Drache d'Avril — Hero stickers (bloc drache/hero-stickers).
 *
 * Porté du hero-stickers V1, tokens remappés sur theme.json :
 *   V1 --bg-green-default      -> --wp--preset--color--green
 *   V1 --bg-yellow-default     -> --wp--preset--color--yellow
 *   V1 --bg-violet-default     -> --wp--preset--color--violet
 *   V1 --bg-elevation (blanc)  -> --wp--preset--color--blanc
 *   V1 --bg-violet-desat-subtler (ombre) -> color-mix sur rose-04 (violet désaturé)
 *
 * Couche absolue posée sur la SECTION du hero. La section (groupe core) doit être
 * en position:relative : le quadrillage le fait déjà (.has-quadrillage), sinon
 * ajouter une classe relative au groupe.
 *
 * Positions art-dirigées ici (mobile par défaut + >=1280). Le visiteur peut
 * déplacer chaque sticker (view.js) : translate via --x/--y, inclinaison via --r.
 */

/* Le groupe qui contient directement les stickers devient le référentiel de
   l'overlay absolu (pas besoin que le quadrillage soit actif pour ça). Il lui
   faut quand même une hauteur : règle une min-height sur ce groupe. */
.wp-block-group:has(> .hero-stickers) {
	position: relative;
}

/* Même chose côté éditeur, où le DOM diffère (le bloc est imbriqué dans des
   wrappers Gutenberg) : on cible le groupe qui contient le bloc stickers pour
   qu'il serve de référentiel à l'overlay (wrapper du bloc en absolu). */
.editor-styles-wrapper .wp-block-group:has(.wp-block-drache-hero-stickers) {
	position: relative;
}

/* Front uniquement : tout le contenu du hero (texte ET ses groupes wrappers) ne
   doit pas intercepter le pointeur, sinon ces grandes boîtes bloquent le grab des
   stickers derrière. On neutralise donc tous les enfants du groupe hero sauf la
   couche stickers, puis on réactive les éléments interactifs (liens, bouton).
   Exclu de l'éditeur (body.editor-styles-wrapper) pour pouvoir y cliquer/éditer. */
body:not(.editor-styles-wrapper) .wp-block-group:has(> .hero-stickers) > :not(.hero-stickers) {
	pointer-events: none;
}
body:not(.editor-styles-wrapper) .wp-block-group:has(> .hero-stickers) :where(a, button, input, select, textarea, label, summary) {
	pointer-events: auto;
}

.hero-stickers {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	/* Le groupe en layout "contraint" cape ses enfants à la content-size : on
	   neutralise ce max-width (et le margin-inline auto) pour que l'overlay
	   couvre toute la section. Alternative écartée : alignfull, qui colle mal à
	   un élément en position absolue. */
	max-width: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	pointer-events: none; /* laisse passer les clics vers le texte derrière */
}

/* La contrainte de layout du thème (.is-layout-constrained > :where(...)) pose
   max-width: content-size + margin-inline: auto !important, et son CSS se charge
   APRÈS hero.css. À spécificité égale (0,1,0) elle gagne donc au source order,
   même avec !important de notre côté. On double la classe (0,2,0) pour passer
   devant sans ambiguïté. */
.wp-block-drache-hero-stickers.hero-stickers,
.editor-styles-wrapper .wp-block-drache-hero-stickers {
	max-width: none !important;
	margin-inline: 0 !important;
}

.hero-stickers .hero-stickers-content {
	position: absolute;
	inset: 0;
	left: 50%;
	width: 100%;
	height: 100%;
	max-width: 1600px;
	transform: translateX(-50%);
}

/* Translate (drag) + inclinaison (drag) pilotés par view.js. La rotation de base
   de chaque forme est posée sur le SVG, pas ici, pour ne pas la perdre au drag. */
.hero-stickers .sticker {
	transform: translate3d(var(--x, 0), var(--y, 0), 0) rotate(var(--r, 0deg));
	will-change: transform;
	pointer-events: auto;
	cursor: grab;
	user-select: none;
	-webkit-user-drag: none;
	touch-action: none;
}
.hero-stickers[data-draggable-container="0"] .sticker {
	pointer-events: none;
	cursor: default;
}
.hero-stickers .sticker.is-dragging {
	cursor: grabbing;
}
.hero-stickers .sticker-content {
	display: inline-block;
	transition: transform 0.4s var(--dda-spring, ease);
}
.hero-stickers .sticker:hover .sticker-content {
	transform: rotate(-2deg) scale(1.025);
}

/* --- Cloud --- */
.hero-stickers .cloud {
	position: absolute;
	top: 80px;
	right: -40px;
	filter: drop-shadow(16px 16px 0 color-mix(in srgb, var(--wp--preset--color--rose-04) 25%, transparent));
}
.hero-stickers .cloud-illustration {
	width: 240px;
	height: auto;
	fill: var(--wp--preset--color--green, #89a135);
	stroke: var(--wp--preset--color--blanc, #fff);
	stroke-width: 8px;
	paint-order: stroke;
	transform: rotate(-12deg);
}

/* --- Star --- */
.hero-stickers .star {
	position: absolute;
	top: 136px;
	left: 0;
	filter: drop-shadow(16px 16px 0 color-mix(in srgb, var(--wp--preset--color--rose-04) 25%, transparent));
}
.hero-stickers .star-illustration {
	width: 80px;
	height: auto;
	fill: var(--wp--preset--color--yellow, #ffffab);
	stroke: var(--wp--preset--color--blanc, #fff);
	stroke-width: 8;
	paint-order: stroke;
	transform: rotate(-24deg);
}

/* --- Heart (photo) --- */
.hero-stickers .heart {
	position: absolute;
	right: -80px;
	bottom: -104px;
	filter: drop-shadow(24px 24px 0 var(--wp--preset--color--yellow, #ffffab));
}
.hero-stickers .heart-illustration {
	width: 400px;
	height: auto;
	fill: var(--wp--preset--color--blanc, #fff);
	stroke: var(--wp--preset--color--violet, #7631ff);
	stroke-width: 4;
	paint-order: stroke;
	transform: rotate(24deg);
}

/* --- Flower (desktop only) --- */
.hero-stickers .flower {
	position: absolute;
	bottom: -80px;
	left: 240px;
	display: none;
}
.hero-stickers .flower-illustration {
	width: 160px;
	height: auto;
}

/* Réduit le tremblement pour qui préfère moins d'animation. */
@media (prefers-reduced-motion: reduce) {
	.hero-stickers .sticker-content { transition: none; }
}

@media (min-width: 1280px) {
	.hero-stickers .hero-stickers-content { min-width: 1440px; }

	.hero-stickers .cloud { top: 160px; right: 24px; }
	.hero-stickers .cloud-illustration { width: 320px; stroke-width: 12px; }

	.hero-stickers .star { top: 240px; left: 40px; }
	.hero-stickers .star-illustration { width: 200px; stroke-width: 8; }

	.hero-stickers .heart { right: -120px; bottom: -64px; }
	.hero-stickers .heart-illustration { width: 640px; }

	.hero-stickers .flower { display: inline-block; bottom: -80px; left: 240px; }
}