/*
 * Drache d'Avril — Push catégorie (bloc drache/category-push).
 * Réf design : Figma node 14329:21101 (section CATEGORIES, 4 pushes).
 *
 * Un push = un cadre de 594 × 640 (ratio de la maquette) contenant trois calques :
 *   .category-push::before   : le cercle blanc, décentré (z 0)
 *   .category-push__covers   : les couvertures produits empilées (z 1)
 *   .category-push__label    : le nom de la catégorie en arc de cercle (z 2)
 *   .category-push__badge    : pastille optionnelle, image du menu Pastilles (z 3)
 *
 * Toutes les positions sont en % du cadre, donc le push est homothétique : une
 * seule variable (--cp-w) commande sa taille, tout le reste suit.
 *
 * Deux axes de variation, indépendants :
 *   --{slug}      : disposition des couvertures, art-dirigée par catégorie
 *   --side-{l|r}  : alignement dans la section + côté de l'arc de texte
 *
 * Valeurs relevées node par node dans Figma ; les knobs de réglage fin sont les
 * variables --cp-* déclarées ci-dessous.
 */

/*
 * Taille du push, source unique. Maquette : 594 px pour un canvas 1440 (≈ 41 %).
 * Posée aussi sur le conteneur de l'éditeur : Gutenberg enveloppe chaque bloc,
 * et c'est ce conteneur qui porte le chevauchement côté canvas (cf. plus bas).
 *
 * [data-type="drache/…"] n'existe QUE dans l'éditeur (c'est Gutenberg qui pose
 * l'attribut sur le conteneur du bloc) : il suffit à lui seul à cibler le canvas,
 * sans dépendre de la classe .editor-styles-wrapper portée par l'iframe.
 */
.category-push,
[data-type="drache/category-push"] {
	--cp-w: min(594px, 44vw);
}

/*
 * Éditeur : le bloc est un lien, et ses couvertures captent le clic avant le
 * conteneur Gutenberg. Résultat, cliquer dessus tentait de partir vers la page
 * catégorie au lieu de sélectionner le bloc. On neutralise les événements
 * pointeur sur tout le rendu : le clic traverse jusqu'au conteneur, qui gère la
 * sélection. Le lien et les animations de survol restent intacts en front.
 */
[data-type="drache/category-push"] .category-push {
	pointer-events: none;
}

.category-push {
	/* Cercle blanc : mesures relevées dans le cadre 594 × 640. */
	--cp-circle-x: 18.77%;
	--cp-circle-y: 13.1%;
	--cp-circle-size: 74.35%;

	/* Cercle porteur du texte. Il n'est PAS concentrique au cercle blanc dans la
	   maquette : centre décalé vers le bas-gauche, rayon légèrement inférieur. */
	--cp-label-x: 50.4%;
	--cp-label-y: 53.6%;
	--cp-label-r: 36.2%;
	--cp-label-rotate: 0deg;

	/* Réglages de la couronne de texte. Dans un SVG, 1 px CSS = 1 unité du viewBox
	   (ici 200 = 2 × rayon), donc ces valeurs suivent l'échelle du push, pas celle
	   de la page. Maquette : 46.658 px de fonte pour un rayon de 214 px, soit
	   21.8 unités, et 33.9 px d'avance par lettre, soit ~1.5 de letter-spacing. */
	--cp-label-size: 21.8px;
	--cp-label-tracking: 1.5px;

	/* Largeur par défaut d'une couverture, surchargée par variante. */
	--cp-cover-w: 50%;
	--cp-cover-shadow: none;

	/* Rythme de l'éventail. Même durée à l'aller et au retour : si la sortie
	   paraît traînante, c'est ici qu'on la dissocie. --dda-spring est l'easing
	   ressort maison (main.css) ; plus la durée monte, plus son rebond se voit. */
	--cp-fan-duration: 0.9s;
	--cp-fan-ease: var(--dda-spring, ease);

	position: relative;
	display: block;
	width: var(--cp-w);
	aspect-ratio: 594 / 640;
	text-decoration: none;
	color: inherit;
}

/*
 * Empilement des pushes dans la section : chevauchement vertical de 280 px pour
 * 594 px de large dans la maquette, soit 47.1 % de --cp-w. En % de margin ça se
 * calculerait sur la largeur de la SECTION, d'où le calc() sur --cp-w.
 *
 * La remontée porte sur les pushes IMPAIRS (1er et 3e) : ils viennent chevaucher
 * ce qui les précède, les pairs restent en place. nth-of-type et non nth-child
 * pour rester juste si un bloc d'un autre type s'intercale dans la section.
 */
.category-push:nth-of-type(odd),
[data-type="drache/category-push"]:nth-of-type(odd) {
	margin-block-start: calc(var(--cp-w) * -0.471);
}

/* Alignement dans la section. Spécificité (0,1,0) : bat les marges auto que la
   mise en page "contenu centré" de Gutenberg pose en :where() sur les enfants. */
.category-push--side-left {
	margin-inline-end: auto;
}
.category-push--side-right {
	margin-inline-start: auto;
	/* Le texte passe sur l'arc bas-droite (4h30) : c'est le SVG entier qui pivote,
	   startOffset n'étant pas pilotable en CSS. Le cercle porteur est le miroir
	   du cas gauche par rapport à l'axe vertical du cercle blanc. */
	--cp-label-rotate: -90deg;
	--cp-label-x: 60.7%;
}

/* Cercle blanc. */
.category-push::before {
	content: "";
	position: absolute;
	z-index: 0;
	left: var(--cp-circle-x);
	top: var(--cp-circle-y);
	width: var(--cp-circle-size);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--wp--preset--color--blanc, #fff);
}

/* ----------------------------------------------------------------------------
 * Couvertures
 * -------------------------------------------------------------------------- */

.category-push__covers {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
}

/*
 * Chaque couverture est posée par son CENTRE (left/top + translate -50 %), ce qui
 * rend les valeurs relevées dans Figma directement transposables et découple la
 * position de la taille réelle de l'image.
 *
 * translate et rotate en propriétés séparées (et non en transform) : le survol
 * réécrit la translation sans perdre la rotation de pose, et inversement.
 *
 * Les réglages par couverture, tous surchargés par variante plus bas :
 *   --cp-cover-x / --cp-cover-y  position du centre, relevée dans Figma
 *   --cp-rot                     rotation de pose
 *   --cp-fan-x / -y / -rot       écart au survol (ouverture de l'éventail)
 *
 * Et un réglage par variante :
 *   --cp-shift-y                 remontée ou descente de TOUTE la pile, pour
 *                                corriger un débord sans toucher aux valeurs
 *                                Figma couverture par couverture
 *
 * Les écarts sont en % de la couverture elle-même : ils suivent donc l'échelle
 * du push, comme le reste.
 */
.category-push__cover {
	--cp-cover-x: 50%;
	--cp-cover-y: 50%;
	--cp-rot: 0deg;
	--cp-fan-x: 0%;
	--cp-fan-y: 0%;
	--cp-fan-rot: 0deg;

	position: absolute;
	left: var(--cp-cover-x);
	top: calc(var(--cp-cover-y) + var(--cp-shift-y, 0%));
	width: var(--cp-cover-w);
	height: auto;
	translate: -50% -50%;
	rotate: var(--cp-rot);
	box-shadow: var(--cp-cover-shadow);
	transition:
		translate var(--cp-fan-duration) var(--cp-fan-ease),
		rotate var(--cp-fan-duration) var(--cp-fan-ease);
}

/*
 * Survol : l'éventail s'ouvre. Chaque couverture s'écarte du centre de la pile
 * en accentuant sa propre rotation, dans le prolongement de sa pose — celles qui
 * penchent à droite partent à droite, celles qui penchent à gauche partent à
 * gauche. La maquette ne spécifie aucun état de survol (pas de variante hover
 * dans le composant Figma) : les valeurs d'ouverture sont à art-diriger.
 */
.category-push:hover .category-push__cover {
	translate: calc(-50% + var(--cp-fan-x)) calc(-50% + var(--cp-fan-y));
	rotate: calc(var(--cp-rot) + var(--cp-fan-rot));
}

/* ----------------------------------------------------------------------------
 * Nom de la catégorie, en couronne
 * -------------------------------------------------------------------------- */

.category-push__label {
	position: absolute;
	z-index: 2;
	left: var(--cp-label-x);
	top: var(--cp-label-y);
	width: calc(var(--cp-label-r) * 2);
	aspect-ratio: 1;
	translate: -50% -50%;
	pointer-events: none;
}
.category-push__label-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	rotate: var(--cp-label-rotate);
}
.category-push__label text {
	font-family: var(--wp--preset--font-family--headings, "Intro Rust", sans-serif);
	font-weight: var(--wp--custom--typography--weight--base, 700);
	font-size: var(--cp-label-size);
	letter-spacing: var(--cp-label-tracking);
	text-transform: uppercase;
	/* Centre les glyphes SUR le chemin (et non posés dessus par leur ligne de base) :
	   le rayon --cp-label-r correspond ainsi au centre des lettres, comme relevé. */
	dominant-baseline: central;
	fill: var(--wp--preset--color--noir, #1f2937);
}

/* ----------------------------------------------------------------------------
 * Pastille optionnelle (« New » sur le push stickers de la maquette)
 * -------------------------------------------------------------------------- */

/*
 * La pastille est une pastille administrable (menu Pastilles), comme sur les
 * cartes : son image porte couleur et libellé. Cette règle ne fait plus que la
 * placer et l'incliner. Pas de rapport de forme imposé, l'image porte le sien.
 */
.category-push__badge {
	position: absolute;
	z-index: 3;
	left: 87.2%;
	top: 12%;
	width: 27.2%;
	translate: -50% -50%;
	rotate: 14.4deg;
	pointer-events: none;
}
.category-push__badge-image {
	display: block;
	width: 100%;
	height: auto;
}

/* ----------------------------------------------------------------------------
 * Variantes par type (= slug de la catégorie).
 * Centres en % du cadre 594 × 640, rotations telles que relevées.
 * L'ordre DOM suit l'ordre de sélection des produits : le premier est au fond.
 * -------------------------------------------------------------------------- */

/* Les livrets : deux couvertures cartonnées côte à côte, ombre portée violette.
   L'éventail les sépare franchement, il n'y a que deux pièces à écarter. */
.category-push--livrets {
	--cp-cover-w: 48.3%;
	--cp-cover-shadow: var(--wp--preset--shadow--violet-md, 0 8px 0 0 #7631ff);
}
.category-push--livrets .category-push__cover:nth-child(1) {
	--cp-cover-x: 67.3%;
	--cp-cover-y: 36.8%;
	--cp-rot: 16deg;
	--cp-fan-x: 10%;
	--cp-fan-y: 3%;
	--cp-fan-rot: 10deg;
}
.category-push--livrets .category-push__cover:nth-child(2) {
	--cp-cover-x: 51.6%;
	--cp-cover-y: 35.8%;
	--cp-rot: -3deg;
	--cp-fan-x: -10%;
	--cp-fan-y: -2%;
	--cp-fan-rot: -10deg;
}

/* Les affiches : éventail de 4, pas de rotation régulier de ~8.7°.
   L'ouverture prolonge ce pas, du plus incliné au moins incliné. */
.category-push--affiches {
	--cp-cover-w: 48.7%;
	/* Écart assumé vs Figma : à la position de la maquette, le bas des affiches
	   descend sur la couronne de texte. Toute la pile remonte d'un bloc, un seul
	   chiffre à retoucher si le réglage doit bouger. */
	--cp-shift-y: -6%;
}
.category-push--affiches .category-push__cover:nth-child(1) {
	--cp-cover-x: 57.2%;
	--cp-cover-y: 46.9%;
	--cp-rot: 21.5deg;
	--cp-fan-x: 8%;
	--cp-fan-y: 4%;
	--cp-fan-rot: 9deg;
}
.category-push--affiches .category-push__cover:nth-child(2) {
	--cp-cover-x: 52.2%;
	--cp-cover-y: 42.4%;
	--cp-rot: 12.8deg;
	--cp-fan-x: 3%;
	--cp-fan-y: 1.5%;
	--cp-fan-rot: 3deg;
}
.category-push--affiches .category-push__cover:nth-child(3) {
	--cp-cover-x: 46.6%;
	--cp-cover-y: 38.6%;
	--cp-rot: 4.1deg;
	--cp-fan-x: -3%;
	--cp-fan-y: -1.5%;
	--cp-fan-rot: -3deg;
}
.category-push--affiches .category-push__cover:nth-child(4) {
	--cp-cover-x: 40.4%;
	--cp-cover-y: 35.7%;
	--cp-rot: -4.6deg;
	--cp-fan-x: -8%;
	--cp-fan-y: -4%;
	--cp-fan-rot: -9deg;
}

/* Les cartes : format paysage, éparpillées plutôt qu'en éventail régulier.
   L'ouverture les disperse depuis le centre de la pile, chacune vers son coin. */
.category-push--cartes {
	--cp-cover-w: 55%;
}
.category-push--cartes .category-push__cover:nth-child(1) {
	--cp-cover-x: 65.9%;
	--cp-cover-y: 34.5%;
	--cp-rot: 1deg;
	--cp-fan-x: 9%;
	--cp-fan-y: -4%;
	--cp-fan-rot: 7deg;
}
.category-push--cartes .category-push__cover:nth-child(2) {
	--cp-cover-x: 57.7%;
	--cp-cover-y: 50.2%;
	--cp-rot: 25.2deg;
	--cp-fan-x: 2%;
	--cp-fan-y: 9%;
	--cp-fan-rot: 9deg;
}
.category-push--cartes .category-push__cover:nth-child(3) {
	--cp-cover-x: 45.3%;
	--cp-cover-y: 28.5%;
	--cp-rot: -6.8deg;
	--cp-fan-x: -9%;
	--cp-fan-y: -5%;
	--cp-fan-rot: -8deg;
}

/* Les stickers : formes découpées (PNG détourés), tailles inégales.
   Valeurs de pose relevées dans Figma, ouverture NON validée : les visuels
   manquent encore, rien de tout ça n'a été vu à l'écran. */
.category-push--stickers {
	--cp-cover-w: 54%;
}
.category-push--stickers .category-push__cover:nth-child(1) {
	--cp-cover-w: 54.7%;
	--cp-cover-x: 66.5%;
	--cp-cover-y: 30.3%;
	--cp-rot: 22.2deg;
	--cp-fan-x: 8%;
	--cp-fan-y: -5%;
	--cp-fan-rot: 8deg;
}
.category-push--stickers .category-push__cover:nth-child(2) {
	--cp-cover-w: 52.8%;
	--cp-cover-x: 34.5%;
	--cp-cover-y: 61%;
	--cp-rot: 25.3deg;
	--cp-fan-x: -8%;
	--cp-fan-y: 7%;
	--cp-fan-rot: 8deg;
}
.category-push--stickers .category-push__cover:nth-child(3) {
	--cp-cover-w: 56.5%;
	--cp-cover-x: 35.7%;
	--cp-cover-y: 39.5%;
	--cp-rot: 0deg;
	--cp-fan-x: -7%;
	--cp-fan-y: -4%;
	--cp-fan-rot: -8deg;
}
.category-push--stickers .category-push__cover:nth-child(4) {
	--cp-cover-w: 51.5%;
	--cp-cover-x: 61.4%;
	--cp-cover-y: 50.2%;
	--cp-rot: 16deg;
	--cp-fan-x: 7%;
	--cp-fan-y: 6%;
	--cp-fan-rot: 6deg;
}

/* ----------------------------------------------------------------------------
 * Mobile : les pushes s'empilent à la verticale, sans décalage. Le push occupe
 * presque toute la largeur, l'alternance gauche/droite n'a plus de place pour
 * s'exprimer (tout est centré) et le chevauchement disparaît.
 * -------------------------------------------------------------------------- */
@media (max-width: 781px) {
	/*
	 * La section est un groupe Gutenberg en grille à colonnes fixées (réglage du
	 * contenu, pas du bloc) : c'est cette grille qui produit le zigzag en desktop.
	 * Le core ne prévoit aucun repli responsive quand le nombre de colonnes est
	 * fixé, les pushes resteraient donc à l'étroit dans deux colonnes. On force
	 * une colonne unique, et seulement sur la grille qui porte nos pushes — d'où
	 * le :has(), qui laisse intactes les autres grilles de la page.
	 *
	 * Alternative native si tu préfères éviter cette règle : régler le groupe sur
	 * une largeur minimale de colonne plutôt qu'un nombre de colonnes. Le core
	 * génère alors un auto-fill qui retombe seul à une colonne.
	 */
	.is-layout-grid:has(> .category-push),
	.is-layout-grid:has(> [data-type="drache/category-push"]) {
		grid-template-columns: 1fr;
	}

	.category-push,
	[data-type="drache/category-push"] {
		--cp-w: min(420px, 92vw);
	}
	.category-push--side-left,
	.category-push--side-right {
		margin-inline: auto;
	}
	.category-push:nth-of-type(odd),
	[data-type="drache/category-push"]:nth-of-type(odd) {
		margin-block-start: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.category-push__cover {
		transition: none;
	}
	/* L'éventail ne s'ouvre pas : on rétablit la pose de repos. */
	.category-push:hover .category-push__cover {
		translate: -50% -50%;
		rotate: var(--cp-rot);
	}
}

/* Messages d'aide affichés dans l'éditeur uniquement (cf. render.php). */
.category-push--empty,
.category-push__notice {
	margin: 0;
	padding: var(--wp--preset--spacing--40, 1rem);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: var(--wp--preset--font-size--sm, 0.75rem);
}