/* Cohérence cardiaque guidée, inc/outils.php [ls_coherence], assets/coherence.js */

.ls-coh {
	--lshc-creux: inset 0 2px 4px rgb(27 29 62 / .10), inset 0 0 0 1px var(--wp--preset--color--bordure);
	display: grid;
	justify-items: center;
	gap: 18px;
	margin: var(--wp--preset--spacing--40) 0;
	padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 36px);
	background: linear-gradient(180deg, var(--wp--preset--color--lavande-clair), var(--wp--preset--color--blanc) 70%);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: var(--wp--custom--rayon--encart, 20px);
	box-shadow: var(--wp--custom--ombre--deux);
}

/* La bulle */
.ls-coh__scene {
	position: relative;
	display: grid;
	place-items: center;
	width: min(300px, 78vw);
	aspect-ratio: 1;
}
.ls-coh__anneau { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ls-coh__piste { fill: none; stroke: rgb(27 29 62 / .08); stroke-width: 2; }
.ls-coh__progression {
	fill: none;
	stroke: var(--wp--preset--color--terracotta);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
}
.ls-coh__bulle {
	grid-area: 1 / 1;
	width: 84%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #fff 0, var(--wp--preset--color--lavande-clair) 22%, var(--wp--preset--color--lavande) 70%, var(--wp--preset--color--indigo) 130%);
	box-shadow: 0 18px 40px rgb(72 66 160 / .22), inset 0 -10px 30px rgb(72 66 160 / .18);
	transform: scale(.62);
	will-change: transform;
	transition: filter 1.2s ease;
}
.ls-coh[data-phase="expiration"] .ls-coh__bulle { filter: hue-rotate(-38deg) saturate(.8); }
.ls-coh__centre { grid-area: 1 / 1; position: relative; text-align: center; pointer-events: none; }
.ls-coh__centre p { margin: 0; }
.ls-coh__consigne {
	font-family: var(--wp--preset--font-family--titre);
	font-size: clamp(1.6rem, 5vw, 2.2rem);
	font-weight: 400;
	line-height: 1.1;
	color: var(--wp--preset--color--nuit);
}
.ls-coh__compte {
	min-height: 1.4em;
	margin-top: 4px !important;
	font-size: var(--wp--preset--font-size--grand);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--indigo);
}
.ls-coh__reste {
	min-height: 1.6em;
	margin: 0;
	font-size: var(--wp--preset--font-size--petit);
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--texte-doux);
	text-align: center;
}

/* Boutons */
.ls-coh__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.ls-coh__lancer,
.ls-coh__arreter {
	min-height: 48px;
	padding: 10px 28px;
	border-radius: var(--wp--custom--rayon--pastille, 999px);
	font: inherit;
	font-weight: 500;
	cursor: pointer;
	transition: background-color var(--duree-rapide, 160ms), transform 75ms ease;
}
.ls-coh__lancer {
	min-width: 160px;
	border: 0;
	background: var(--wp--preset--color--nuit);
	box-shadow: 0 1px 2px rgb(27 29 62 / .2), 0 6px 16px rgb(27 29 62 / .18);
	color: var(--wp--preset--color--creme);
}
.ls-coh__lancer:hover { background: var(--wp--preset--color--nuit-profond); }
.ls-coh__lancer:disabled { opacity: .55; cursor: default; }
.ls-coh__arreter {
	border: 1px solid var(--wp--preset--color--nuit);
	background: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--nuit);
}
.ls-coh__arreter[hidden] { display: none; }
.ls-coh__lancer:active,
.ls-coh__arreter:active { transform: translateY(1px); }
.ls-coh__lancer:focus-visible,
.ls-coh__arreter:focus-visible { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 3px; }

/* Réglages */
.ls-coh__reglages {
	display: grid;
	gap: 16px;
	justify-items: center;
	width: 100%;
	margin-top: 6px;
	padding-top: var(--wp--preset--spacing--30, 24px);
	border-top: 1px solid var(--wp--preset--color--bordure);
	transition: opacity var(--duree-rapide, 160ms);
}
.ls-coh.is-marche .ls-coh__reglages { opacity: .4; pointer-events: none; }
.ls-coh__choix { display: grid; justify-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.ls-coh__choix legend {
	float: left;
	width: 100%;
	margin-bottom: 8px;
	padding: 0;
	font-size: var(--wp--preset--font-size--micro);
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--texte-doux);
}
.ls-coh__pastilles {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	padding: 5px;
	border-radius: var(--wp--custom--rayon--pastille, 999px);
	background: var(--wp--preset--color--sable);
	box-shadow: var(--lshc-creux);
}
.ls-coh__pastilles input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ls-coh__pastilles label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	padding: 6px 16px;
	border-radius: var(--wp--custom--rayon--pastille, 999px);
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--texte);
	cursor: pointer;
	transition: background-color var(--duree-rapide, 160ms), color var(--duree-rapide, 160ms);
}
.ls-coh__pastilles label span { font-size: var(--wp--preset--font-size--micro); color: inherit; opacity: .8; }
.ls-coh__pastilles input:checked + label {
	background: var(--wp--preset--color--nuit);
	color: var(--wp--preset--color--creme);
	box-shadow: 0 1px 2px rgb(27 29 62 / .2), 0 4px 10px rgb(27 29 62 / .15);
}
.ls-coh__pastilles input:focus-visible + label { outline: 2px solid var(--wp--preset--color--terracotta); outline-offset: 2px; }
.ls-coh__son {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: var(--wp--preset--font-size--petit);
	color: var(--wp--preset--color--texte);
	cursor: pointer;
}
.ls-coh__son input { width: 20px; height: 20px; accent-color: var(--wp--preset--color--nuit); }
.ls-coh__sans-script { margin: 0; }

@media (max-width: 600px) {
	.ls-coh__choix { width: 100%; }
	.ls-coh__pastilles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); width: 100%; border-radius: var(--wp--custom--rayon--vignette, 12px); }
	.ls-coh__pastilles label { flex-direction: column; justify-content: center; gap: 0; min-height: 44px; padding: 6px 8px; border-radius: 9px; line-height: 1.25; text-align: center; }
}