/**
 * NOVFR LP Kit - minuteur (quatre minutes).
 * Chemin : assets/css/countdown.css
 *
 * Même logique de couleurs que les autres widgets : valeurs de repli ici,
 * marque du site sur :root (--novfr-lp-*), onglet Style du widget sur le
 * widget lui-même. Le widget est prévu pour une section sombre : chiffres
 * à la couleur d'accent, textes clairs.
 *
 * Épinglé (.novfr-countdown--pin) : le bloc réserve une hauteur d'écran plus
 * la longueur de défilement, et son contenu reste collé en haut pendant que
 * le visiteur fait défiler ; le script fait descendre le chrono et allume les
 * étapes. Statique, dans l'éditeur ou avec « moins d'animations » : simple
 * bloc, tout visible.
 */

.novfr-countdown {
	--nc-time: var(--novfr-lp-accent, #d63a35);
	--nc-caption: var(--novfr-lp-muted, #d9c5d6);
	--nc-heading: var(--novfr-lp-on-surface, #fff);
	--nc-step: var(--novfr-lp-muted, #d9c5d6);
	--nc-step-strong: var(--novfr-lp-on-surface, #fff);
	--nc-bg: transparent;
	--nc-scroll: 100vh;
	--nc-gap: 64px;
	--nc-steps-gap: 10px;
	/* Repli : le widget règle « Espace sous le titre » à 32 / 26 / 22 px par défaut. */
	--nc-heading-gap: 14px;
	--nc-dim: 0.18;

	min-width: 0;
}

/* Deux colonnes sur écran large, une seule en dessous. */
.novfr-countdown .novfr-countdown-inner {
	align-items: start;
	box-sizing: border-box;
	display: grid;
	gap: 24px var(--nc-gap);
	padding-block: 56px;
}

@media (min-width: 896px) {
	.novfr-countdown .novfr-countdown-inner {
		grid-template-columns: 1fr 1fr;
	}
}

/* Chrono. */
.novfr-countdown .novfr-countdown-time {
	color: var(--nc-time);
	font-size: clamp(62px, 8.4vw, 120px);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -0.05em;
	line-height: 0.85;
}

.novfr-countdown .novfr-countdown-caption {
	color: var(--nc-caption);
	font-size: 16px;
	line-height: 1.5;
	margin: 18px 0 0;
	max-width: 36ch;
}

/* Titre et étapes. */
.novfr-countdown .novfr-countdown-heading {
	color: var(--nc-heading);
	margin: 0 0 var(--nc-heading-gap);
}

.novfr-countdown .novfr-countdown-list {
	display: flex;
	flex-direction: column;
	gap: var(--nc-steps-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

.novfr-countdown .novfr-countdown-step {
	color: var(--nc-step);
	font-size: clamp(19px, 2.6vw, 26px);
	line-height: 1.3;
	margin: 0;
	padding: 0;
}

.novfr-countdown .novfr-countdown-step b,
.novfr-countdown .novfr-countdown-step strong {
	color: var(--nc-step-strong);
	font-weight: 700;
}

/* Épinglé : l'étape atteinte s'allume, les suivantes restent en retrait. */
.novfr-countdown--pin .novfr-countdown-step {
	opacity: var(--nc-dim);
	transform: translateY(6px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.novfr-countdown--pin .novfr-countdown-step.is-on {
	opacity: 1;
	transform: none;
}

/* Une hauteur d'écran plus la longueur du défilement (100vh = un écran). */
.novfr-countdown--pin {
	min-height: calc(100svh + var(--nc-scroll));
}

@media (min-width: 896px) {
	.novfr-countdown--pin .novfr-countdown-inner {
		align-content: center;
		min-height: 100svh;
		position: sticky;
		top: 0;
	}
}

/*
 * Grand écran, bloc plus haut que l'écran (portable, fenêtre réduite) : le
 * script pose --compact, le bloc se resserre. Les écarts réglés dans le
 * widget sont réduits en proportion, pas remplacés ; le texte ne grossit
 * jamais. S'il ne tient toujours pas, le script pose --loose : plus
 * d'épinglage, le bloc défile normalement et rien n'est jamais coupé.
 */
@media (min-width: 896px) {
	.novfr-countdown--compact .novfr-countdown-inner {
		padding-block: 24px;
	}

	.novfr-countdown--compact .novfr-countdown-heading {
		margin-bottom: calc(var(--nc-heading-gap) * 0.6);
	}

	.novfr-countdown--compact .novfr-countdown-list {
		gap: calc(var(--nc-steps-gap) * 0.55);
	}

	.novfr-countdown--compact .novfr-countdown-step {
		font-size: clamp(17px, min(2.6vw, 3.2vh), 26px);
	}

	.novfr-countdown--pin.novfr-countdown--loose {
		min-height: 0;
	}

	.novfr-countdown--loose .novfr-countdown-inner {
		min-height: 0;
		position: static;
	}
}

/* Petit écran : le chrono reste collé en haut pendant que les étapes défilent dessous. */
@media (max-width: 895px) {
	.novfr-countdown--pin .novfr-countdown-clock {
		background: var(--nc-bg);
		padding-block: 12px;
		position: sticky;
		top: 8px;
		z-index: 2;
	}

	.novfr-countdown .novfr-countdown-caption {
		font-size: 14px;
		margin-top: 10px;
	}
}

/*
 * Seules les règles --pin posent hauteur, épinglage et retrait des étapes :
 * sans --pin (réglage coupé, ou éditeur Elementor) le bloc est statique,
 * tout visible. « Moins d'animations » défait --pin ci-dessous.
 */
@media (prefers-reduced-motion: reduce) {
	.novfr-countdown--pin {
		min-height: 0;
	}

	.novfr-countdown--pin .novfr-countdown-inner,
	.novfr-countdown--pin .novfr-countdown-clock {
		min-height: 0;
		position: static;
	}

	.novfr-countdown--pin .novfr-countdown-step {
		opacity: 1;
		transform: none;
		transition: none;
	}
}