/**
 * 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).
 *
 * Style : point + anneau sobres. Couleur AUTO-ADAPTATIVE : bleu par
 * défaut (fonds clairs), blanc quand cursor.js détecte un fond sombre
 * sous le curseur (classe .on-dark, cf. cursor.js) — pas de
 * mix-blend-mode ici : sur ce site, un ancêtre (transform/filter/
 * opacity quelque part sur body ou un wrapper) isole le contexte
 * d'empilement et casse le blend, qui finissait par toujours rendre
 * la même couleur peu importe le fond réel. La détection JS directe
 * de la couleur de fond est plus fiable, indépendamment de ce souci.
 */

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

.custom-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 10000;
	opacity: 0;
}

/* Point : repère précis de la position réelle du pointeur (aucun
   retard, posé directement par cursor.js à chaque pointermove). */
.custom-cursor__dot {
	position: absolute;
	top: 0;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--Blue, #2E73B7);
	transition: opacity 0.2s ease, background 0.25s ease;
	will-change: transform;
}

/* Anneau : suit avec un léger retard (lerp géré en JS). will-change
   sur transform uniquement — width/height/background/border
   transitionnent normalement, le double-translate(-50%,-50%) posé par
   le JS les garde parfaitement centrés pendant ces changements de
   taille (pourcentages recalculés en continu par le navigateur). */
.custom-cursor__ring {
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1.5px solid var(--Blue, #2E73B7);
	background: transparent;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
	transition:
		width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.3s ease,
		border-color 0.25s ease,
		border-style 0.15s ease;
	will-change: transform;
}

/* Flèche "→" : masquée par défaut, apparaît au survol (cf. état
   .is-hovering plus bas). Même tracé que l'icône des .btn-cta, pour
   rester cohérent avec le reste du site. */
.custom-cursor__icon {
	width: 16px;
	height: 16px;
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s ease, color 0.25s ease;
}

.custom-cursor__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* ── Fond sombre détecté (cf. cursor.js) : tout repasse en blanc ──── */

.custom-cursor.on-dark .custom-cursor__dot {
	background: #fff;
}

.custom-cursor.on-dark .custom-cursor__ring {
	border-color: #fff;
}

/* Sur fond sombre, la flèche (visible seulement quand le rond se
   remplit, cf. .is-hovering plus bas) doit redevenir bleue : sinon
   blanc sur blanc au moment où le rond blanc se remplit. */
.custom-cursor.on-dark.is-hovering .custom-cursor__icon {
	color: var(--Blue, #2E73B7);
}

/* ── État "hover" : lien/bouton — anneau plein, flèche visible ────── */

.custom-cursor.is-hovering .custom-cursor__ring {
	width: 52px;
	height: 52px;
	background: var(--Blue, #2E73B7);
	border-color: var(--Blue, #2E73B7);
}

.custom-cursor.on-dark.is-hovering .custom-cursor__ring {
	background: #fff;
	border-color: #fff;
}

.custom-cursor.is-hovering .custom-cursor__dot {
	opacity: 0;
}

.custom-cursor.is-hovering .custom-cursor__icon {
	opacity: 1;
}

/* ── État "grab" : élément déplaçable — anneau pointillé, plus grand ── */

.custom-cursor.is-grab .custom-cursor__ring {
	width: 60px;
	height: 60px;
	background: rgba(2, 30, 254, 0.08);
	border-color: var(--Blue, #2E73B7);
	border-style: dashed;
}

.custom-cursor.on-dark.is-grab .custom-cursor__ring {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}

.custom-cursor.is-grab .custom-cursor__dot {
	opacity: 0;
}

/* ── État "grabbing" : déplacement en cours — anneau plein, resserré ── */

.custom-cursor.is-grabbing .custom-cursor__ring {
	width: 44px;
	height: 44px;
	background: rgba(2, 30, 254, 0.18);
	border-color: var(--Blue, #2E73B7);
	border-style: solid;
}

.custom-cursor.on-dark.is-grabbing .custom-cursor__ring {
	background: rgba(255, 255, 255, 0.3);
	border-color: #fff;
}

.custom-cursor.is-grabbing .custom-cursor__dot {
	opacity: 0;
}

/* ── Clic dans le vide : ripple (anneau qui grandit en s'estompant) ── */

.custom-cursor-click-ripple {
	position: fixed;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 2px solid var(--Blue, #2E73B7);
	pointer-events: none;
	z-index: 10001;
	animation: cursor-ripple 0.5s ease-out forwards;
}

.custom-cursor-click-ripple.on-dark {
	border-color: #fff;
}

@keyframes cursor-ripple {
	from {
		transform: translate(-50%, -50%) scale(0.4);
		opacity: 0.9;
	}
	to {
		transform: translate(-50%, -50%) scale(1.8);
		opacity: 0;
	}
}