/*
 * Widget « Compte à rebours du colloque » — feuille de style.
 * Reprise des règles .countdown / .cd de colloque-pilier-preview-v2.html.
 *
 * Mêmes écarts assumés que dans les deux autres widgets :
 *   1. Toutes les classes sont préfixées « ucc- » et portées par le conteneur
 *      « .ucc ». L'aperçu utilisait .countdown et .cd, qui entreraient en
 *      collision avec le thème comme avec les widgets « uci- » et « ucp- ».
 *   2. Aucune règle globale (body, section, h1-h4, a) n'est reprise.
 *   3. Aucune famille de police n'est imposée. Les deux familles de
 *      l'aperçu passent par des variables branchées sur la typographie globale
 *      d'Elementor (Réglages du site → Typographie) :
 *        --ucc-f-titre → global « Primaire »  (Playfair Display)
 *        --ucc-f-cond  → global « Accent »    (Roboto Condensed)
 *      Le second argument de var() n'est pas « inherit » mais la famille
 *      elle-même : globale non réglée, on retombe sur Playfair Display et
 *      Roboto Condensed, et non sur la police du thème. Les fichiers de police
 *      sont chargés par le plugin (handle « unico-colloque-fonts »).
 *
 * @package unico-colloque
 */

.ucc {
	/* Palette — surchargée en ligne par les contrôles Elementor. */
	--ucc-num: #FFFFFF;
	--ucc-lbl: #C8973C;
	--ucc-fond: rgba(255, 255, 255, .07);
	--ucc-bordure: rgba(200, 151, 60, .32);
	--ucc-fini: #FFFFFF;
	--ucc-note: #E6DCC4;
	--ucc-icone: #C8973C;

	/* Familles : globales Elementor si elles sont réglées, sinon celles de l'aperçu. */
	--ucc-f-titre: var(--e-global-typography-primary-font-family, "Playfair Display", Georgia, "Times New Roman", serif);
	--ucc-f-cond: var(--e-global-typography-accent-font-family, "Roboto Condensed", "Arial Narrow", Arial, sans-serif);

	/* Disposition. */
	--ucc-align: center;
	--ucc-cadran-min: 104px;
	--ucc-gap: 16px;
	--ucc-radius: 14px;
	--ucc-flou: 6px;
	--ucc-lbl-espace: 1.8px;

	/*
	 * Colonne alignée sur --ucc-align : c'est ce qui aligne d'un seul réglage
	 * la rangée de cadrans et le bloc de bascule, qui n'ont pas la même largeur.
	 * Un « margin: auto » sur le second n'aurait pas suffi : les contrôles
	 * Elementor écrivent leurs variables dans une feuille de style, jamais dans
	 * un attribut style, un sélecteur d'attribut n'aurait donc rien accroché.
	 */
	display: flex;
	flex-direction: column;
	align-items: var(--ucc-align);
	line-height: 1.7;
}

.ucc *,
.ucc *::before,
.ucc *::after {
	box-sizing: border-box;
}

/*
 * Neutralisation des styles du thème hôte.
 *
 * Ce widget ne contient ni <button> ni <input> : le blindage y est donc plus
 * court que dans les widgets Intervenants et Programme, mais il reste
 * nécessaire. Le thème d'unico.cd impose une marge basse à tous les <p>, une
 * mise en italique aux <i> — ce qui déforme l'icône Font Awesome du message de
 * bascule — et des ombres portées sur les <b> des blocs sombres. Sans ces
 * règles, les cadrans se décalent les uns par rapport aux autres selon qu'ils
 * portent ou non un libellé.
 *
 * D'où le !important, employé ici et nulle part ailleurs dans le widget : un
 * widget doit rendre à l'identique quel que soit le thème dans lequel on le pose.
 */
.ucc .ucc-num,
.ucc .ucc-lbl,
.ucc .ucc-fini-titre,
.ucc .ucc-fini-note {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	float: none;
	max-width: none;
	width: auto;
}

.ucc .ucc-fini-icone i,
.ucc .ucc-fini-icone svg {
	font-style: normal;
	background: none !important;
	box-shadow: none !important;
	vertical-align: middle;
}

/* Certains thèmes ignorent l'attribut « hidden ». Le widget s'en sert. */
.ucc [hidden] {
	display: none !important;
}

/* Repli si le thème ne fournit pas .screen-reader-text. */
.ucc .screen-reader-text,
.ucc .ucc-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==================================================================
 * Les cadrans
 * ================================================================== */

.ucc-grille {
	display: flex;
	justify-content: var(--ucc-align);
	gap: var(--ucc-gap);
	flex-wrap: wrap;
	max-width: 100%;
}

.ucc-cadran {
	min-width: var(--ucc-cadran-min);
	padding: 16px 10px;
	background: var(--ucc-fond);
	border: 1px solid var(--ucc-bordure);
	border-radius: var(--ucc-radius);
	-webkit-backdrop-filter: blur(var(--ucc-flou));
	backdrop-filter: blur(var(--ucc-flou));
	text-align: center;
}

.ucc-num {
	display: block;
	font-family: var(--ucc-f-titre);
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
	color: var(--ucc-num);

	/*
	 * Chiffres à chasse fixe : sans cela, un « 1 » plus étroit qu'un « 8 » fait
	 * respirer la boîte à chaque seconde et l'ensemble tressaute.
	 */
	font-variant-numeric: tabular-nums;
	-webkit-font-feature-settings: "tnum";
	font-feature-settings: "tnum";
}

.ucc-lbl {
	display: block;
	margin-top: 7px;
	font-family: var(--ucc-f-cond);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: var(--ucc-lbl-espace);
	color: var(--ucc-lbl);
}

/*
 * Le seul mouvement du widget : le chiffre qui change remonte de six pixels en
 * s'éclaircissant. La classe est posée par le script à chaque changement de
 * valeur, et retirée à la fin de l'animation.
 */
@keyframes ucc-tic {
	from {
		opacity: .35;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.ucc-cadran.is-tic .ucc-num {
	animation: ucc-tic .38s cubic-bezier(.2, .7, .2, 1);
}

/* ==================================================================
 * Le message de bascule
 * ================================================================== */

.ucc-fini {
	display: flex;
	align-items: center;
	justify-content: var(--ucc-align);
	gap: 16px;
	padding: 18px 26px;
	background: var(--ucc-fond);
	border: 1px solid var(--ucc-bordure);
	border-radius: var(--ucc-radius);
	-webkit-backdrop-filter: blur(var(--ucc-flou));
	backdrop-filter: blur(var(--ucc-flou));
	text-align: left;
	max-width: 100%;
}

.ucc-fini-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	font-size: 26px;
	color: var(--ucc-icone);
}

.ucc-fini-icone svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ucc-fini-titre {
	display: block;
	font-family: var(--ucc-f-titre);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--ucc-fini);
}

.ucc-fini-note {
	margin-top: 6px !important;
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--ucc-note);
}

/* ==================================================================
 * Adaptation aux petites largeurs
 * ================================================================== */

@media (max-width: 900px) {
	.ucc-num {
		font-size: 29px;
	}

	.ucc-cadran {
		padding: 13px 8px;
	}
}

@media (max-width: 520px) {
	.ucc {
		--ucc-gap: 10px;
	}

	.ucc-num {
		font-size: 25px;
	}

	.ucc-lbl {
		font-size: 10px;
		letter-spacing: 1.2px;
	}

	.ucc-fini {
		flex-direction: column;
		text-align: center;
		padding: 18px 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ucc-cadran.is-tic .ucc-num {
		animation: none;
	}
}