/* Widgets à intégrer : même DA que le site (chiffres en Anton, fond de couleur, blanc), sans rien autour. */
@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:block;src:url(fonts/anton-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/dm-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/dm-sans-latin-700-normal.woff2) format('woff2')}
:root { --bg: #E2462F; --fg: #FFFFFF; --on: #E2462F; --frame: color-mix(in srgb, var(--fg) 17%, transparent); --frame-hi: color-mix(in srgb, var(--fg) 27%, transparent); --ease: cubic-bezier(.2, .7, .2, 1); }
html, body { margin: 0; height: 100%; }
html { background: var(--bg); }
html.is-clear, html.is-clear body { background: transparent; }
body { display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--fg); font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-weight: 500; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.w-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }
.w-box { display: flex; flex-direction: column; align-items: center; line-height: 1; white-space: nowrap; font-size: 100px; }
.dg { display: inline-block; width: .5em; text-align: center; }
.sp { display: inline-block; }
.w-lbl { margin: 0 0 .1em; max-width: 14em; overflow: hidden; text-overflow: ellipsis; font-size: .17em; font-weight: 700; line-height: 1.25; }
.is-small .w-lbl, .is-small .cd-u small, .is-small .tm-btns { display: none; }

/* Horloge en chiffres : heures et minutes, puis AM/PM et secondes en petit à droite (comme l'horloge mondiale du site) */
.ck-row { display: flex; align-items: center; font-family: 'Anton', Impact, sans-serif; }
.ck-hm { line-height: .84; }
.ck-side { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: .7em; margin-left: .14em; }
.ck-side:has(> .ck-ap:empty) { justify-content: flex-end; }
.ck-ap { font-family: 'DM Sans', system-ui, sans-serif; font-weight: 700; font-size: .12em; letter-spacing: .06em; }
.ck-ap:empty { display: none; }
.ck-s { font-size: .3em; line-height: .8; }
.is-tiny .ck-side { display: none; }
/* Horloge à aiguilles */
.ck--a .ck-face { width: 2.2em; height: 2.2em; overflow: visible; }
.ck--a .w-lbl { margin: .1em 0 0; font-size: .2em; order: 2; }
.ck-dial { fill: var(--frame); }
.ck-ticks line { stroke: var(--fg); stroke-linecap: round; }
.ck-hh, .ck-mh, .ck-sh { stroke: var(--fg); stroke-linecap: round; }
.ck-hh { stroke-width: 9; }
.ck-mh { stroke-width: 6; }
.ck-sh { stroke-width: 2.4; opacity: .85; }
.ck-hub { fill: var(--fg); }

/* Compte à rebours : un cadre par unité, le libellé en dessous */
.cd-row { display: flex; align-items: flex-start; gap: .12em; font-family: 'Anton', Impact, sans-serif; }
.cd-u { display: flex; flex-direction: column; align-items: center; gap: .1em; }
.cd-n { display: block; padding: .1em .08em .06em; border-radius: .12em; background: var(--frame); line-height: 1; }
.cd-u small { font-family: 'DM Sans', system-ui, sans-serif; font-size: .15em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.cd-sep { display: none; }
.is-tiny .cd-sep { display: block; padding-top: .06em; }
.is-tiny .cd-n { background: transparent; padding: 0; }
.is-tiny .cd-row { gap: .02em; }
.cd-end { margin: 0; font-family: 'Anton', Impact, sans-serif; font-size: .7em; line-height: 1.1; max-width: 12em; white-space: normal; text-align: center; text-wrap: balance; animation: w-up .5s var(--ease) both; }
.cd-end[hidden], .cd-row[hidden] { display: none; }

/* Minuteur : les chiffres se touchent pour démarrer ; deux petits boutons en dessous */
.tm-time { display: block; padding: .02em .1em 0; border: 0; border-radius: .1em; background: transparent; font-family: 'Anton', Impact, sans-serif; font-size: 1em; line-height: .96; cursor: pointer; transition: background-color .15s; }
.tm-time:hover, .tm-time:focus-visible { background: var(--frame); outline: none; }
.tm-bar { display: block; width: 100%; height: .035em; margin: .08em 0 .12em; border-radius: 1em; background: var(--frame); overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: var(--fg); transform-origin: left; transform: scaleX(0); transition: transform .2s linear; }
.tm-btns { display: flex; gap: .1em; }
.tm-btn { display: grid; place-items: center; width: .5em; height: .36em; padding: 0; border: 0; border-radius: .09em; background: var(--frame); cursor: pointer; transition: background-color .15s; }
.tm-btn:hover, .tm-btn:focus-visible { background: var(--frame-hi); outline: none; }
.tm-btn svg { width: .22em; height: .22em; }
.tm-go { background: var(--fg); color: var(--on); }
.tm-go:hover, .tm-go:focus-visible { background: var(--fg); box-shadow: 0 0 0 .04em var(--frame-hi); }
.tm.is-over .tm-time { background: var(--fg); color: var(--on); animation: w-bump .6s var(--ease) 3; }
.is-tiny .tm-bar { display: none; }
@keyframes w-up { from { transform: translateY(.3em); } }
@keyframes w-bump { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .cd-end, .tm.is-over .tm-time { animation: none; } }

/* Marque discrète : n'apparaît qu'au survol, en glissant depuis le bas */
.w-brand { position: fixed; right: 6px; bottom: 4px; padding: 2px 6px; border-radius: 6px; background: var(--frame); color: var(--fg); font-size: 11px; font-weight: 700; text-decoration: none; transform: translateY(150%); transition: transform .25s var(--ease); }
body:hover .w-brand, .w-brand:focus-visible { transform: none; }
@media (hover: none) { .w-brand { display: none; } }