.scm-horloge {
    box-sizing: border-box;
    width: 100%;
    max-width: 400px;
    margin: 1.25rem auto;
    padding: 1rem 0.75rem 1.25rem;
    border: 1px solid #dce6f3;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f5f9ff);
    color: #172c48;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-align: center;
}
.scm-horloge *, .scm-horloge *::before, .scm-horloge *::after {box-sizing: border-box;}
.scm-horloge__cadran {display: block; width: 100%; max-width: 340px; height: auto; margin: auto; overflow: visible;}
.scm-horloge__bord {fill: none; stroke: #cad7e9; stroke-width: 2;}
.scm-horloge__cercle {fill: none; stroke: #e8eef7; stroke-width: 1.5;}
.scm-horloge__trait {stroke: #7386a3; stroke-width: 1.5;}
.scm-horloge__chiffre {font-size: 15px; font-weight: 550; fill: #233b5a;}
.scm-horloge__aiguille {stroke: #2780d4; stroke-width: 5; stroke-linecap: round; transition: x2 .2s ease, y2 .2s ease;}
.scm-horloge__centre {fill: #2780d4;}
.scm-horloge__legende {font-size: 12px; fill: #6a7d97;}
.scm-horloge__calcul {display: block; font-size: clamp(15px, 4vw, 19px); line-height: 1.45; font-weight: 700; font-variant-numeric: tabular-nums; color: #183450;}
.scm-horloge__controles {display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 12px; margin-top: 15px;}
.scm-horloge__ajout {font-size: 14px; white-space: nowrap;}
.scm-horloge__bouton {display: flex; align-items: center; justify-content: center; flex: 0 0 42px; width: 42px; height: 42px; padding: 0; border: 1px solid #aac2dc; border-radius: 50%; background: #fff; color: #195a99; font: 600 21px/1 system-ui, sans-serif; cursor: pointer; transition: background .12s ease, border-color .12s ease;}
.scm-horloge__bouton:hover:not(:disabled) {background: #eaf4ff; border-color: #2780d4;}
.scm-horloge__bouton:focus-visible {outline: 3px solid #2780d4; outline-offset: 2px;}
.scm-horloge__bouton:disabled {opacity: .35; cursor: not-allowed;}
@media (max-width: 340px) {.scm-horloge__controles {gap: 6px;} .scm-horloge__ajout {font-size: 12px;} .scm-horloge__bouton {width: 36px; height: 36px; flex-basis: 36px;}}
@media (prefers-reduced-motion: reduce) {.scm-horloge__aiguille {transition: none;}}