:root{
  --bg:#ffffff;
  --fg:#111111;
}

*{box-sizing:border-box}
html,body{height:100%}
html{background:var(--bg);color:var(--fg)}
body{margin:0;font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}

/* Layout */
.page{min-height:100svh;display:grid;place-items:center;padding:24px}

/* Clock */
.clock{font-variant-numeric:tabular-nums;letter-spacing:.02em;display:flex;align-items:center;font-weight:900;font-size:clamp(48px,14vw,180px)}
.digit{position:relative;display:inline-block;width:0.72em;height:1em;overflow:hidden}
.stack{position:absolute;left:0;top:0;width:100%;height:auto;display:flex;flex-direction:column;will-change:transform;transition:transform 360ms cubic-bezier(.2,.7,.2,1)}
.num{line-height:1em;height:1em}
.sep{display:inline-block;padding:0 .08em;opacity:.9}

@media (prefers-reduced-motion: reduce){
  .stack{transition:none !important}
}

@media (min-width:768px){ .clock{letter-spacing:.01em} }
@media (max-width:360px){ .digit{width:0.68em} }

/* === PATCH RESPONSIVE MINIMAL (à coller en bas) === */

/* 1) La ligne s'adapte et peut passer sur plusieurs lignes si besoin */
#clock{
  display: flex;              /* garde l'alignement existant */
  flex-wrap: wrap;            /* autorise le retour à la ligne en petit écran */
  justify-content: center;
  gap: clamp(12px, 2.5vw, 28px);
  padding: clamp(8px, 2vw, 24px);
}

/* 2) Taille des chiffres et étiquettes fluide (mobile → grand écran) */
#clock,
#clock .digits .num{
  font-size: clamp(36px, 12vw, 120px);
  line-height: 1;
}

#clock .label{
  font-size: clamp(12px, 2.4vw, 16px);
}

/* 3) Largeur des digits relative pour éviter les sauts/chevauchements */
#clock .digit{
  width: clamp(0.62em, 4vw, 0.78em);
}

/* 4) Cache les deux-points quand ça passe sur plusieurs lignes (évite les “petits points” mal placés) */
@media (max-width: 560px){
  #clock .sep{ display: none; }
}

/* 5) Si tu as des blocs/groupes (.digits ou .block), ils prennent 50% sous 560px */
@media (max-width: 560px){
  #clock > .digits,
  #clock > .block{
    flex: 1 1 240px;          /* 2 colonnes fluides */
    max-width: 340px;
  }
}