/**
 * 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).
 *
 * Couleurs :
 *  - État par défaut (au repos) : contour + point dans le bleu actif du
 *    site (--Blue), ou blanc si le fond détecté sous le curseur est
 *    sombre (classe .on-dark, cf. cursor.js). Ce choix clair/sombre
 *    n'est plus un seuil de luminance arbitraire : cursor.js calcule le
 *    ratio de contraste réel (WCAG) entre le fond détecté et chacune
 *    des deux variantes, et retient celle qui contraste le mieux — ça
 *    s'adapte correctement même sur les tons pastel de la charte
 *    (#D7A1C4 / #7DAEDC), que l'ancien seuil (moyenne RGB brute, sans
 *    correction gamma) classait à tort comme "clairs" alors qu'un
 *    curseur blanc y devient presque invisible.
 *  - État survol (.is-hovering) : le rond se remplit avec le dégradé de
 *    marque déjà utilisé ailleurs sur le site (fil décoratif, listes à
 *    puce, preloader) : #D7A1C4 → #7DAEDC. Ce dégradé pastel offre un
 *    contraste correct aussi bien sur fond clair que sombre, donc pas
 *    besoin de variante .on-dark ici — seule la flèche reste dans le
 *    bleu actif --Blue, pour rester lisible sur ce dégradé dans tous
 *    les cas (plus besoin de la règle .on-dark.is-hovering séparée
 *    qu'il fallait avant pour éviter le blanc sur blanc).
 *  - États grab/grabbing : restent dans --Blue (logique utilitaire,
 *    distincte du dégradé "CTA"), avec variante blanche sur fond sombre
 *    comme avant.
 *
 * 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 (y compris les fonds en dégradé désormais, cf.
 * cursor.js) est plus fiable, indépendamment de ce souci.
 */

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

html.has-custom-cursor {
	/*
	 * Source de vérité unique pour les couleurs du curseur, posées ici
	 * (sur <html>, pas sur .custom-cursor) pour être aussi accessibles
	 * par .custom-cursor-click-ripple, un élément séparé.
	 * --cc-blue reprend la custom property globale du site si elle
	 * existe, avec un fallback qui correspond à la vraie valeur déjà
	 * utilisée par ailleurs dans ce fichier (rgba(2, 30, 254, ...) pour
	 * les états grab/grabbing) — avant, le fallback de var(--Blue, ...)
	 * tombait sur #000000 (noir), incohérent avec le reste du fichier.
	 */
	--cc-blue: var(--Blue, #7DAEDC);
	--cc-gradient: linear-gradient(135deg, #D7A1C4 0%, #7DAEDC 100%);
}

.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(--cc-blue);
	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(--cc-blue);
	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. Toujours dans le bleu actif :
   le fond du rond devient le dégradé de marque au survol (voir plus
   bas), qui contraste correctement avec ce bleu foncé aussi bien sur
   fond de page clair que sombre — plus besoin de variante .on-dark
   pour la flèche. */
.custom-cursor__icon {
	width: 16px;
	height: 16px;
	color: white;
	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) : contour/point repassent en
   blanc. Ne concerne que l'état par défaut et grab/grabbing — l'état
   hover utilise le dégradé de marque dans les deux cas (cf. plus haut
   et plus bas), il n'a donc pas besoin de variante .on-dark. ────────── */

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

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

/* ── État "hover" : lien/bouton — anneau plein en dégradé de marque,
   flèche visible ─────────────────────────────────────────────────── */

.custom-cursor.is-hovering .custom-cursor__ring {
	width: 52px;
	height: 52px;
	background: var(--cc-gradient);
	border-color: transparent;
}

.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;
	/*
	 * rgba() ne peut pas être dérivé directement de --cc-blue (qui
	 * résout à une couleur opaque, pas à un triplet r,g,b réutilisable)
	 * sans que le thème expose aussi une variable des composantes (ex :
	 * --Blue-rgb: 2, 30, 254). Si cette variable existe ou est ajoutée
	 * un jour côté global, remplacer par rgba(var(--Blue-rgb), 0.08)
	 * pour que ces états suivent aussi automatiquement --Blue. En
	 * attendant, la valeur reste alignée à la main sur le fallback de
	 * --cc-blue (#021EFE = rgb(2, 30, 254)) ci-dessus.
	 */
	background: rgba(2, 30, 254, 0.08);
	border-color: var(--cc-blue);
	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(--cc-blue);
	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(--cc-blue);
	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;
	}
}