/* RDN — Chasse aux fantômes.
   Habillage repris du thème du site (Astra) : Lexend pour les titres, Inter pour le texte,
   vert sauge des liens. Aucune couleur de marque nouvelle, aucun redesign.
   Mouvement : motion.csv — survol = preset 1 (180ms / power1.out),
   ouverture = preset 10 (240ms / power1.inOut), flottement = preset 15 (1400ms / sine.inOut). */

.rdn-chasse-hote { position: relative; }

.rdn-chasse-perso {
	position: absolute;
	transform: translate(-50%, -50%);
	min-width: 46px;              /* cible tactile et lisibilité : jamais plus petit */
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	z-index: 30;                  /* au-dessus de la loupe de zoom WooCommerce */
	opacity: .94;
	/* Respiration : il avance vers le visiteur puis recule. Le mouvement d'échelle
	   accroche l'œil bien mieux qu'une translation, sans déplacer la cachette.
	   L'ampleur est posée par le serveur dans --rdn-ampleur. */
	animation: rdn-chasse-respire 1600ms cubic-bezier(.37,0,.63,1) infinite alternate;
	transition: opacity 180ms cubic-bezier(.25,.46,.45,.94);
}
.rdn-chasse-perso svg {
	width: 100%;
	height: auto;
	display: block;
	/* Liseré blanc façon autocollant : une silhouette pleine, même noire, reste lisible
	   sur une toile cirée sombre comme sur une nappe blanche ou à motifs.
	   Les passes s'enchaînent, chacune épaissit le halo de la précédente. */
	filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff)
	        drop-shadow(0 0 1.5px #fff) drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
.rdn-chasse-perso:hover,
.rdn-chasse-perso:focus-visible { opacity: 1; }
.rdn-chasse-perso:focus-visible { outline: 3px solid #819381; outline-offset: 4px; border-radius: 6px; }
.rdn-chasse-perso.est-attrape { animation: none; scale: .3; opacity: 0; transition: scale 260ms, opacity 260ms; }

@keyframes rdn-chasse-respire {
	from { scale: 1; }
	to   { scale: var(--rdn-ampleur, 2); }
}

/* L'infobulle. Volontairement SŒUR du bouton et non dedans : placée à l'intérieur,
   elle grandirait et rétrécirait avec la respiration du personnage. */
.rdn-chasse-bulle {
	position: absolute;
	transform: translate(-50%, 0);
	z-index: 31;
	max-width: 190px;
	padding: 7px 11px;
	border-radius: 7px;
	background: rgba(21, 18, 15, .93);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
	pointer-events: none;          /* ne vole jamais le clic au personnage */
	opacity: 0;
	transition: opacity 180ms cubic-bezier(.25,.46,.45,.94);
}
.rdn-chasse-bulle::after {       /* la petite pointe vers le personnage */
	content: '';
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom-color: rgba(21, 18, 15, .93);
}
.rdn-chasse-perso:hover + .rdn-chasse-bulle,
.rdn-chasse-perso:focus-visible + .rdn-chasse-bulle,
.rdn-chasse-bulle.est-visible { opacity: 1; }

/* ------------------------------------------------------------- la fenêtre */

.rdn-chasse-fond {
	position: fixed;
	inset: 0;
	z-index: 100010;              /* au-dessus du widget de chat (99999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(32, 30, 28, .62);
	animation: rdn-chasse-apparait 240ms cubic-bezier(.45,0,.55,1) both;
}
.rdn-chasse-boite {
	position: relative;
	width: 100%;
	max-width: 420px;
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 32px 26px 26px;
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(0,0,0,.28);
	font-family: 'Inter', sans-serif;
	color: #4a4a4a;
	text-align: center;
	animation: rdn-chasse-monte 240ms cubic-bezier(.45,0,.55,1) both;
}
@keyframes rdn-chasse-apparait { from { opacity: 0 } to { opacity: 1 } }
@keyframes rdn-chasse-monte { from { opacity: 0; translate: 0 10px } to { opacity: 1; translate: 0 0 } }

.rdn-chasse-fermer {
	position: absolute;
	top: 6px; right: 10px;
	width: 44px; height: 44px;
	border: 0; background: none;
	font-size: 28px; line-height: 1;
	color: #8a8a8a; cursor: pointer;
}
.rdn-chasse-fermer:hover { color: #3a3a3a; }

.rdn-chasse-sur {
	margin: 0 0 4px;
	font-size: 14px; letter-spacing: .09em; text-transform: uppercase; color: #819381;
}
.rdn-chasse-titre {
	margin: 0 0 18px;
	font-family: 'Lexend', sans-serif;
	font-size: 30px; line-height: 1.2; font-weight: 600; color: #2f2a26;
}
.rdn-chasse-texte { margin: 14px 0 0; font-size: 15px; line-height: 1.55; }
.rdn-chasse-explique {
	margin: -8px 0 18px;
	font-size: 14px; line-height: 1.5; color: #6e6e6e;
}
.rdn-chasse-pied { margin: 16px 0 0; font-size: 13px; text-align: center; }
.rdn-chasse-pied a { color: #6e6e6e; text-decoration: underline; }
.rdn-chasse-pied a:hover { color: #5d6e5d; }
.rdn-chasse-code-etiq { margin: 0 0 6px; font-size: 14px; color: #6e6e6e; }

.rdn-chasse-code {
	display: flex; align-items: stretch; gap: 8px;
	justify-content: center;
}
.rdn-chasse-code code {
	flex: 1 1 auto;
	padding: 13px 14px;
	border: 2px dashed #819381;
	border-radius: 8px;
	background: #f4f7f4;
	font-family: 'Lexend', sans-serif;   /* jamais de police mono pour un code à recopier */
	font-size: 23px; letter-spacing: .07em; font-weight: 600; color: #2f2a26;
}
/* Le thème colore tous les boutons en jaune : on reprend la main sans toucher au thème. */
.rdn-chasse-boite button.rdn-chasse-copier {
	flex: 0 0 auto;
	padding: 0 16px; min-height: 48px;
	border: 1px solid #819381; border-radius: 8px;
	background: #fff; background-image: none; background-color: #fff;
	color: #5d6e5d;
	font-family: inherit; font-size: 15px; font-weight: 500; text-transform: none;
	letter-spacing: normal; cursor: pointer;
	transition: background-color 180ms cubic-bezier(.25,.46,.45,.94);
}
.rdn-chasse-boite button.rdn-chasse-copier:hover { background-color: #f0f4f0; color: #4c5a4c; }

.rdn-chasse-form { margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid #e8e8e4; text-align: left; }
.rdn-chasse-label { display: block; margin-bottom: 9px; font-size: 15px; color: #4a4a4a; }
.rdn-chasse-ligne { display: flex; gap: 8px; }
.rdn-chasse-ligne input[type="email"] {
	flex: 1 1 auto; min-width: 0;
	padding: 12px 13px; min-height: 48px;
	border: 1px solid #cfcfc9; border-radius: 8px;
	font-family: inherit; font-size: 16px;   /* 16px : empêche le zoom auto sur iPhone */
	color: #2f2a26; background: #fff;
}
.rdn-chasse-ligne input[type="email"]:focus-visible { outline: 2px solid #819381; outline-offset: 1px; }
.rdn-chasse-ligne button {
	flex: 0 0 auto;
	padding: 0 18px; min-height: 48px;
	border: 0; border-radius: 8px;
	background: #819381; color: #fff;
	font-family: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
	transition: background 180ms cubic-bezier(.25,.46,.45,.94);
}
.rdn-chasse-ligne button:hover { background: #6c7d6c; }

.rdn-chasse-case {
	display: flex; gap: 9px; align-items: flex-start;
	margin-top: 13px; font-size: 14px; line-height: 1.45; color: #6e6e6e;
}
.rdn-chasse-case input { margin-top: 3px; width: 17px; height: 17px; flex: 0 0 auto; }
.rdn-chasse-retour { margin: 11px 0 0; min-height: 20px; font-size: 14px; color: #5d6e5d; }

@media (max-width: 420px) {
	.rdn-chasse-boite { padding: 28px 18px 20px; }
	.rdn-chasse-titre { font-size: 26px; }
	.rdn-chasse-code { flex-direction: column; }
	.rdn-chasse-code code { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
	.rdn-chasse-perso { animation: none; }
	.rdn-chasse-fond, .rdn-chasse-boite { animation-duration: 1ms; }
	.rdn-chasse-perso, .rdn-chasse-copier, .rdn-chasse-ligne button { transition-duration: 1ms; }
}