/* KenhoWeb Visite Guidée v1.0.2 — styles de la visite (bleu nuit / or, couleurs du ministère) */

/* Anti-conflit : tant que la visite est ouverte, on masque les fenêtres
   Popup Maker (le popup d'inscription aux méditations, déclenché à 10 s,
   ne doit jamais se battre avec la visite). */
html.kwvg-actif .pum-overlay,
html.kwvg-actif .pum-container {
	display: none !important;
}

/* Racine : couvre tout l'écran et intercepte les clics vers la page. */
#kwvg-racine {
	position: fixed;
	inset: 0;
	z-index: 100010;
}
#kwvg-racine[hidden] {
	display: none;
}

/* Fond assombri (étapes centrées, sans cible). */
#kwvg-fond {
	position: absolute;
	inset: 0;
	background: rgba(5, 14, 26, .78);
}
#kwvg-fond[hidden] {
	display: none;
}

/* Projecteur : le grand box-shadow assombrit tout sauf la zone vedette. */
#kwvg-projecteur {
	position: fixed;
	border: 2px solid #c9a227;
	border-radius: 14px;
	box-shadow: 0 0 0 9999px rgba(5, 14, 26, .78);
	pointer-events: none;
	transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}
#kwvg-projecteur[hidden] {
	display: none;
}

/* Carte de note. */
#kwvg-carte {
	position: fixed;
	z-index: 100011;
	width: min(420px, calc(100vw - 24px));
	box-sizing: border-box;
	background: #0b1c33;
	color: #e8e2cf;
	border: 1.5px solid #c9a227;
	border-radius: 16px;
	padding: 20px 20px 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
	font-size: 15.5px;
	line-height: 1.55;
}
#kwvg-carte.kwvg-centree {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#kwvg-etape {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #c9a227;
}
#kwvg-titre {
	margin: 6px 34px 8px 0;
	font-size: 20px;
	line-height: 1.3;
	color: #ffffff;
}
#kwvg-texte {
	margin: 0 0 16px;
	color: #e8e2cf;
}
#kwvg-fermer {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 0;
	background: rgba(255, 255, 255, .1);
	color: #ffffff;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}
/* v1.0.2 — LE contrôle du son des notes parlées : gros bouton rond FIXE,
   indépendant de la carte, en haut à droite de l'écran. Fond bleu nuit et
   bordure dorée : visible sur fond clair comme sur fond sombre. Icône =
   haut-parleur blanc dessiné en SVG (dans le JS), plus d'émoji texte.
   z-index 100020 : au-dessus de la racine (100010), du projecteur et de
   la carte (100011) — le plus élevé de tout le système de visite.
   Pendant qu'une note parle, il pulse doucement en doré. */
#kwvg-son-fixe {
	position: fixed;
	top: calc(12px + env(safe-area-inset-top));
	right: 12px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #0b1c33;
	border: 2px solid #c9a227;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
	z-index: 100020;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
#kwvg-son-fixe[hidden] {
	display: none;
}
#kwvg-son-fixe svg {
	display: block;
	flex: none;
}
#kwvg-son-fixe.kwvg-son-joue {
	animation: kwvg-pulsion-son 1.4s ease-in-out infinite;
}
@keyframes kwvg-pulsion-son {
	0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 0 rgba(201, 162, 39, .45); }
	50% { box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 12px rgba(201, 162, 39, 0); }
}
#kwvg-boutons {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}
#kwvg-nav {
	display: flex;
	gap: 8px;
}
#kwvg-passer {
	background: none;
	border: 0;
	color: #b9c4d4;
	font-size: 13.5px;
	text-decoration: underline;
	cursor: pointer;
	padding: 8px 2px;
}
#kwvg-prec {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #ffffff;
	font-weight: 600;
	font-size: 15px;
	padding: 11px 16px;
	border-radius: 10px;
	cursor: pointer;
}
#kwvg-prec[hidden] {
	display: none;
}
#kwvg-suiv {
	background: #c9a227;
	border: 0;
	color: #0b1c33;
	font-weight: 700;
	font-size: 15.5px;
	padding: 11px 20px;
	border-radius: 10px;
	cursor: pointer;
}

/* Écran 0 : le choix de la langue, avant tout le reste. En mode langue,
   la carte masque le compteur, le texte d'étape et la navigation. */
#kwvg-langues[hidden] {
	display: none;
}
#kwvg-carte.kwvg-mode-langue #kwvg-etape,
#kwvg-carte.kwvg-mode-langue #kwvg-texte,
#kwvg-carte.kwvg-mode-langue #kwvg-boutons {
	display: none;
}
/* Signature de Kenho en en-tête de l'écran 0 (identique en toute langue). */
.kwvg-signature {
	margin: 0 0 12px;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: .4px;
	text-align: center;
	color: #c9a227;
}
.kwvg-ligne-langue {
	margin: 0 0 4px;
	font-size: 15px;
	color: #e8e2cf;
}
.kwvg-ligne-langue:first-child {
	font-weight: 700;
	color: #ffffff;
}
.kwvg-choix-langues {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 16px 0 10px;
}
.kwvg-btn-langue {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 54px;
	padding: 10px 14px;
	background: rgba(255, 255, 255, .07);
	border: 1.5px solid rgba(201, 162, 39, .65);
	border-radius: 12px;
	color: #ffffff;
	font-size: 16.5px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.kwvg-btn-langue img {
	border-radius: 4px;
	flex: none;
}
.kwvg-btn-langue:active {
	background: rgba(201, 162, 39, .25);
}
#kwvg-continuer-fr {
	display: block;
	margin: 2px auto 0;
	background: none;
	border: 0;
	color: #b9c4d4;
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
	padding: 8px 4px;
}
@media (max-width: 380px) {
	.kwvg-choix-langues {
		grid-template-columns: 1fr;
	}
}

/* Petit bouton flottant de reprise, visible sur chaque page tant qu'une
   visite commencée n'est pas terminée (sous le tiroir : z-index 99990). */
#kwvg-reprendre {
	position: fixed;
	right: 14px;
	bottom: calc(16px + env(safe-area-inset-bottom));
	z-index: 99990;
	background: #0b1c33;
	color: #f3d97a;
	border: 1.5px solid #c9a227;
	border-radius: 999px;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
	cursor: pointer;
}
#kwvg-reprendre[hidden] {
	display: none;
}