/**
 * Curseur personnalisé — MyProd
 * Actif uniquement en desktop (souris fine + hover), voir cursor.js.
 * La classe .has-custom-cursor n'est posée qu'en JS -> si le script ne
 * charge pas, le curseur natif reste affiché normalement (jamais de
 * curseur invisible par défaut).
 */

html.has-custom-cursor,
html.has-custom-cursor * {
	cursor: none !important;
}

/* Parent : uniquement positionné (translateX/Y à chaque frame, voir
   cursor.js). L'enfant .custom-cursor__arrow gère forme, taille et
   animations (scale/rotate) indépendamment de la position. */
.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 10000;
	opacity: 0;
	will-change: transform;
}

/* Base commune aux deux glyphes (flèche / main) : même empilement,
   seule l'opacity/scale gérée en JS (anime.js) diffère entre eux pour
   passer de l'un à l'autre. */
.custom-cursor__glyph {
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	/* Pivot proche de la pointe/du poignet (haut-gauche du SVG), pas du
	   centre : le scale/rotate donne l'impression que c'est ce point
	   précis qui "s'accroche", comme un sticker qu'on colle, plutôt
	   qu'une simple mise à l'échelle générique depuis le centre. */
	transform-origin: 14% 14%;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.35));
}

.custom-cursor__glyph svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.custom-cursor__glyph path {
	fill: #792C3E;
	fill-rule: nonzero;
	stroke: #fefefe;
	stroke-width: 2.2;
	stroke-linejoin: round;
	stroke-linecap: round;
	transition: fill 0.25s ease-out;
}

/* La main est masquée par défaut (opacity posée aussi en JS via
   anime.set implicite au premier changement d'état, mais ce fallback
   CSS évite un flash visible avant le premier hover). */
.custom-cursor__glyph--hand {
	opacity: 0;
	transform: scale(0.5);
}

/* Couleur d'accent au survol / grab (même teinte que le reste de la
   charte). */
.custom-cursor.is-hovering .custom-cursor__glyph--hand path,
.custom-cursor.is-grab .custom-cursor__glyph--hand path,
.custom-cursor.is-grabbing .custom-cursor__glyph--hand path {
	fill: #792C3E;
}

/* Effet de clic "dans le vide" : étoile temporaire, positionnée en
   fixed au point de clic exact (translate -50%/-50% pour centrer),
   retirée du DOM par le JS une fois son animation terminée. */
.custom-cursor-click-burst {
	position: fixed;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px; /* centre l'élément sur les coordonnées left/top posées en JS */
	pointer-events: none;
	z-index: 10001;
}

.custom-cursor-click-burst svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.custom-cursor-click-burst path {
	fill: #792C3E;
	stroke: #fefefe;
	stroke-width: 1.6;
	stroke-linejoin: round;
}