/* Countdown Perruque. Couleurs personnalisables via les variables ci-dessous. */
.cdp {
	--cdp-text: #fffaf4;
	--cdp-accent: #eed9ab;
	--cdp-muted: rgba(255, 250, 244, 0.7);
	--cdp-line: rgba(255, 250, 244, 0.22);

	container-type: inline-size;
	box-sizing: border-box;
	width: 100%;
	max-width: 640px;
	margin: 2em auto;
	padding: 0 16px;
	text-align: center;
	color: var(--cdp-text);
}

.cdp[data-theme="clair"] {
	--cdp-text: #39121c;
	--cdp-accent: #922c4a;
	--cdp-muted: rgba(57, 18, 28, 0.68);
	--cdp-line: rgba(57, 18, 28, 0.18);
}

/* Surtitre */
.cdp__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0 0 40px;
	font: 600 11px/1.2 Arial, Helvetica, sans-serif;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--cdp-accent);
}

.cdp__eyebrow::before,
.cdp__eyebrow::after {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}

/* Titre */
.cdp__title {
	position: relative;
	z-index: 0; /* les cheveux arrière passent derrière les lettres, pas derrière le fond */
	margin: 0;
	padding: 0.28em 0 0.12em; /* place pour la perruque au-dessus et les talons en dessous */
	font-size: clamp(32px, 15cqi, 94px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.055em;
	color: var(--cdp-text);
	text-shadow: 0 3px 24px rgba(0, 0, 0, 0.12);
}

.cdp__subtitle {
	max-width: 34em;
	margin: 18px auto 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--cdp-muted);
}

/* Lettres décorées */
.cdp__deco {
	position: relative;
	display: inline-block;
	letter-spacing: 0;
}

.cdp__deco--wig {
	padding: 0 0.1em; /* laisse tomber les cheveux sans écraser les lettres voisines */
}

.cdp__base {
	display: inline-block;
	width: 0;
	height: 0;
	vertical-align: baseline;
}

.cdp__layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

.cdp__hair path {
	fill: none;
	stroke-linecap: round;
}

.cdp__hair--back {
	z-index: -1;
}

.cdp__hair--front {
	z-index: 1;
	filter: drop-shadow(0 0.01em 0.012em rgba(60, 35, 0, 0.35));
}

/* Compteur */
.cdp__timer {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	margin-top: 38px;
	padding-top: 28px;
	border-top: 1px solid var(--cdp-line);
}

.cdp__unit + .cdp__unit {
	border-left: 1px solid var(--cdp-line);
}

.cdp__value {
	display: block;
	font-size: clamp(23px, 10.5cqi, 64px);
	font-weight: 500;
	line-height: 1;
	letter-spacing: -0.055em;
	font-variant-numeric: tabular-nums;
}

.cdp__unit--seconds .cdp__value {
	color: var(--cdp-accent);
}

.cdp__label {
	display: block;
	margin-top: 13px;
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--cdp-muted);
}

/* Fin du compte à rebours */
.cdp__done {
	display: none;
	margin: 38px 0 0;
	padding-top: 28px;
	border-top: 1px solid var(--cdp-line);
	font-size: clamp(22px, 7cqi, 40px);
	font-weight: 600;
	color: var(--cdp-accent);
}

.cdp.is-done .cdp__timer { display: none; }
.cdp.is-done .cdp__done  { display: block; }

@container (max-width: 380px) {
	.cdp__eyebrow { font-size: 9px; margin-bottom: 28px; }
	.cdp__label   { font-size: 8px; letter-spacing: 0.1em; }
}

@media (max-width: 480px) {
	.cdp { padding: 0 12px; }
	.cdp__timer { padding-top: 22px; }
}