/* Horloge en ligne */
.o-horloge [hidden] { display: none !important; }
.o-horloge-ecran {
  --oh-fond: var(--surface-2); --oh-texte: var(--texte); --oh-accent: var(--marque);
  position: relative; container-type: inline-size; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 260px; padding: 28px 12px 22px; border-radius: var(--rayon); background: var(--oh-fond); color: var(--oh-texte); text-align: center;
}
.o-horloge-ecran[data-theme="clair"] { --oh-fond: #ffffff; --oh-texte: #141a2a; --oh-accent: #c2410c; box-shadow: inset 0 0 0 1px var(--bord); }
.o-horloge-ecran[data-theme="sombre"] { --oh-fond: #000000; --oh-texte: #c9d1e3; --oh-accent: #ff8a65; }
.o-horloge-ecran[data-theme="perso"] { --oh-accent: var(--oh-texte); }
.o-horloge-heure {
  margin: 0; font: 700 min(calc(160cqi / var(--car, 8)), 34vh)/1.05 var(--police);
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em; white-space: nowrap;
}
.o-horloge-ampm { font-size: .38em; font-weight: 600; letter-spacing: 0; }
.o-horloge-cadran { width: min(62cqi, 46vh, 400px); height: auto; overflow: visible; }
.o-horloge-bord { fill: none; stroke: currentColor; stroke-width: 3; }
.o-horloge-grad { stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; opacity: .55; }
.o-horloge-grad.grand { stroke-width: 3.2; opacity: 1; }
.o-horloge-chiffre { fill: currentColor; font: 600 15px var(--police); text-anchor: middle; dominant-baseline: central; }
.o-horloge-a-h, .o-horloge-a-m, .o-horloge-a-s { stroke-linecap: round; }
.o-horloge-a-h { stroke: currentColor; stroke-width: 7; }
.o-horloge-a-m { stroke: currentColor; stroke-width: 4.5; }
.o-horloge-a-s { stroke: var(--oh-accent); stroke-width: 1.8; }
.o-horloge-axe { fill: var(--oh-accent); }
.o-horloge-date { margin: 4px 0 0; font-size: clamp(1rem, 3.4cqi, 2.4rem); font-weight: 500; }
.o-horloge-zone { margin: 0; font-size: .9rem; opacity: .85; }
.o-horloge-sortir { position: absolute; top: 14px; right: 14px; background: transparent; color: var(--oh-texte); border-color: currentColor; transition: opacity .3s; }
.o-horloge-ecran.en-plein { width: 100%; height: 100%; min-height: 100vh; border-radius: 0; padding: 4vh 3vw; box-shadow: none; }
.o-horloge-ecran.en-plein .o-horloge-heure { font-size: min(calc(170cqi / var(--car, 8)), 58vh); }
.o-horloge-ecran.en-plein .o-horloge-cadran { width: min(80cqi, 74vh); }
.o-horloge-ecran.en-plein .o-horloge-date { font-size: clamp(1.1rem, 3.6cqi, 4rem); }
.o-horloge-ecran.en-plein .o-horloge-zone { font-size: clamp(.9rem, 1.6cqi, 1.4rem); }
.o-horloge-ecran.pleine-page { position: fixed; inset: 0; z-index: 10000; width: 100vw; height: 100dvh; min-height: 0; }
html.o-horloge-bloque { overflow: hidden; }
.o-horloge-ecran.curseur-cache { cursor: none; }
.o-horloge-ecran.curseur-cache .o-horloge-sortir:not(:focus-visible) { opacity: 0; }
.o-horloge-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; }
.o-horloge-message { display: block; min-height: 1.4em; margin: 8px 0; text-align: center; }
.o-horloge-message:empty { display: block; }
.o-horloge .reglages { margin-top: 6px; }
.o-horloge .reglages select { width: 100%; }
.o-horloge-couleurs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; grid-column: 1 / -1; }
.o-horloge-contraste { flex: 1 1 220px; font-size: .88rem; color: var(--texte-2); }
.o-horloge-contraste.bas { color: var(--erreur-texte); }
.o-horloge-note { margin: 16px 0 4px; color: var(--texte-2); font-size: .88rem; }
@media (prefers-reduced-motion: reduce) { .o-horloge-sortir { transition: none; } }
@media (max-width: 480px) {
  .o-horloge-ecran { min-height: 200px; padding: 22px 8px 18px; }
  .o-horloge-cadran { width: min(78cqi, 46vh); }
}