:root {
  color-scheme: dark;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000;
  color: #f5f9ff;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { min-height: 100vh; min-height: 100dvh; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
button { font: inherit; }
button:focus-visible { outline: 3px solid #d1ffd7; outline-offset: 4px; }
.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  overflow: hidden;
  isolation: isolate;
}
.time-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 .4vw;
  pointer-events: none;
}
.time-display {
  display: block;
  width: 99.2vw;
  height: 88dvh;
  max-width: none;
  max-height: none;
  overflow: visible;
  shape-rendering: geometricPrecision;
}
.time-display[data-characters="5"] {
  width: 99.5vw;
  height: 92dvh;
}
.time-display[data-characters="8"] {
  width: 99.2vw;
  height: 86dvh;
}
/* Sept segments propres et découpés : zéro filtre, zéro ombre, zéro lueur diffuse. */
.segment {
  stroke: none;
  fill: #02070b;
}
.segment.on { fill: #39caff; }
.colon-dot { fill: #39caff; stroke: none; }
.control-panel {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px max(18px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: linear-gradient(to top, rgba(0, 0, 0, .94) 0%, rgba(0, 0, 0, .78) 70%, transparent 100%);
  transition: opacity .32s ease, transform .32s ease;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.control-panel.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.control-row { display: flex; justify-content: center; align-items: stretch; gap: clamp(6px, 1.4vw, 13px); margin: 0 auto; max-width: 900px; }
.control {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  flex: 1 1 0;
  border-radius: 16px;
  border: 1px solid #2bc86c;
  background: rgba(11, 41, 24, .97);
  color: #72ff9f;
  padding: 10px 7px;
  font-size: clamp(9px, 2.4vw, 14px);
  font-weight: 800;
  letter-spacing: .045em;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: inset 0 0 16px rgba(32, 184, 88, .12), 0 0 18px rgba(0, 195, 87, .07);
}
.control.primary { background: linear-gradient(160deg, #12592b, #0d3821); border-color: #43ff8f; color: #b5ffc7; }
.control:active { background: #236c3a; transform: scale(.985); }
.control-icon { height: 21px; width: 21px; flex: 0 0 21px; stroke: currentColor; fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.hidden { display: none !important; }
.status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; margin-top: 13px; min-height: 18px; }
.wake-status { display: flex; align-items: center; justify-content: center; gap: 7px; color: #9eabaf; font-size: 11px; font-weight: 500; text-align: center; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #c5a049; flex: 0 0 7px; }
.status-dot.ok { background: #4cf895; box-shadow: 0 0 8px rgba(38, 243, 122, .7); }
.status-dot.warn { background: #ffa15c; }
.install-btn { color: #74ffa7; background: transparent; border: 0; font-weight: 800; font-size: 11px; letter-spacing: .05em; padding: 3px 8px; cursor: pointer; }
.install-btn[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 350px) {
  .control-row { gap: 6px; }
  .control { flex-direction: column; gap: 3px; padding: 8px 4px; font-size: 10px; min-height: 69px; border-radius: 12px; }
  .control-icon { width: 19px; height: 19px; flex-basis: 19px; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .time-display { height: 72dvh; }
  .time-display[data-characters="5"] { height: 77dvh; }
  .time-display[data-characters="8"] { height: 69dvh; }
  .time-shell { transform: translateY(-4dvh); }
  .control-panel { padding-top: 18px; }
  .control { min-height: 42px; border-radius: 12px; padding: 6px 10px; }
  .control-icon { width: 17px; height: 17px; flex-basis: 17px; }
  .status-row { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .control-panel { transition: none; } }

/* Paramètres : overlay tactile, indépendant de l'auto-masquage des commandes. */
.settings-overlay {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgba(0, 0, 0, .88);
  overflow-y: auto;
}
.settings-overlay[hidden] { display: none !important; }
.settings-card {
  width: min(100%, 470px);
  max-height: 100%;
  overflow-y: auto;
  border: 1px solid #1b5339;
  background: #07120d;
  border-radius: 20px;
  padding: clamp(16px, 4vw, 26px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .65);
}
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.settings-head h1 { margin: 0; font-size: clamp(19px, 5vw, 24px); font-weight: 750; color: #ddffe9; }
.settings-close {
  cursor: pointer; min-width: 42px; min-height: 42px;
  border: 1px solid #25583c; background: #13291e; color: #a6f7c4;
  border-radius: 12px; font-size: 28px; line-height: 1;
}
.settings-label { margin: 18px 0 12px; font-size: 14px; color: #a5ceba; font-weight: 650; }
.settings-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.settings-option {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-width: 0; min-height: 98px; padding: 15px 12px;
  border-radius: 13px; background: #0b1912; border: 1px solid #29503a;
  color: #c4ddcb; cursor: pointer; text-align: left;
}
.settings-option[aria-pressed="true"] {
  border-color: #63ffa0; color: #b0ffd1;
  background: #133922; box-shadow: inset 0 0 0 1px rgba(99,255,160,.35);
}
.option-time { font-weight: 800; font-size: clamp(19px, 5vw, 25px); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.option-desc { font-size: 11px; line-height: 1.35; }
.settings-hint { font-size: 12px; line-height: 1.5; color: #8da89a; margin: 15px 0 0; }
@media (max-width: 520px) {
  .control-icon { width: 18px; height: 18px; flex-basis: 18px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .settings-card { padding: 12px 20px; }
  .settings-label { margin: 4px 0 7px; }
  .settings-option { min-height: 62px; padding: 8px 12px; gap: 2px; }
  .settings-hint { margin: 7px 0 0; }
}