/* Compte à rebours vers une date */
.cd { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.4vh, 24px); text-align: center; width: 100%; }
.cd-lead { width: 100%; display: flex; justify-content: center; }
.cd-title { width: min(100%, 17em); min-height: 1.7em; padding: .12em .5em; border: 0; border-radius: 14px; background: var(--frame); color: var(--white); font: inherit; font-weight: 500; text-align: center; text-overflow: ellipsis; transition: background-color .15s; -webkit-appearance: none; appearance: none; }
.cd-title:hover { background: var(--frame-hi); }
.cd-title:focus { outline: none; background: var(--frame-hi); box-shadow: 0 0 0 2px var(--white); }
.cd-title::placeholder { color: color-mix(in srgb, var(--white) 62%, transparent); opacity: 1; }
.cd-count { display: flex; align-items: flex-start; justify-content: center; gap: clamp(8px, 1.6vw, 22px); font-family: var(--f-display); font-size: calc(clamp(52px, min(12vw, 18vh), 176px) * var(--cs, 1)); line-height: 1; }
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.cd-num { --n: 2; position: relative; overflow: hidden; height: 1.12em; width: calc(var(--n) * .54em + .14em); border-radius: .12em; background: var(--frame); font-variant-numeric: tabular-nums; transition: width .3s var(--ease); }
.cd-num span { position: absolute; inset: 0; display: grid; place-items: center; }
.cd-num .in { animation: cdIn .45s cubic-bezier(.2, .8, .2, 1) both; }
.cd-num .out { animation: cdOut .45s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes cdIn { from { transform: translateY(100%); } }
@keyframes cdOut { to { transform: translateY(-100%); } }
.cd-unit small { font-family: var(--f-body); font-size: clamp(12px, 1.25vw, 15px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cd.is-over .cd-num { background: var(--white); color: var(--bg); }
.cd-sentence { text-wrap: balance; }
.cd-note { margin: -.4em 0 0; min-height: 1.5em; font-size: clamp(17px, 1.8vw, 21px); font-weight: 700; }
.cd-bar svg { flex: none; }
.cd-bar [data-cd-copy][aria-pressed="true"] { background: var(--white); color: var(--bg); }
.hero.is-fs .cd-sentence, .hero.is-fs .cd-note:empty { display: none; }
@media (max-width: 720px) {
  .cd { gap: 14px; }
  .cd-title { font-size: 20px; }
}
@media (max-width: 400px) {
  .cd-count { gap: 6px; font-size: calc(clamp(44px, 13vw, 60px) * var(--cs, 1)); }
}