/* Base */
.cd {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums; /* évite le “saut” de chiffres */
  }
  
  /* Le bloc chiffres */
  .cd__text {
    display: inline-block;
    padding: 12px 16px;
    border-radius: 10px;
  }
  
  /* Message de fin */
  .cd__ended { font-weight: 600; }
  
  /* Thèmes (change via className) */
  .cd--dark .cd__text {
    background: #000;
    color: #fff;
  }
  .cd--light .cd__text {
    background: #fff;
    color: #111;
    border: 1px solid #e5e7eb;
  }
  .cd--accent .cd__text {
    background: #0f172a;
    color: #fef08a;
  }
  
  /* Tailles */
  .cd--sm .cd__text { font-size: 1.25rem; padding: 8px 12px; border-radius: 8px; }
  .cd--md .cd__text { font-size: 2rem;    }
  .cd--lg .cd__text { font-size: 3rem;    }
  
  /* Mise en page responsive (si nécessaire) */
  @media (max-width: 480px) {
    .cd--lg .cd__text { font-size: 2.25rem; }
  }
  
  /* Perf : si les timers sont plus bas que la ligne de flottaison */
  .cd { content-visibility: auto; }