/* --- Styles spécifiques Horloge --- */
.page {
  max-width: 1400px;               /* ← largeur réduite */
  margin: 0 auto;
  padding: clamp(12px, 2vw, 24px);
  font-size: clamp(18px, 2vw, 22px);
}

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
}

/* Bouton accueil */
.home-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(60px, 4.8vw, 80px);
  height: clamp(60px, 4.8vw, 80px);
  border-radius: 18px;
  background: var(--card-2);
  color: var(--text);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  touch-action: manipulation;
}
.home-btn svg {
  width: 56%;
  height: 56%;
  stroke: var(--text);
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-btn:active { transform: scale(.98); filter: brightness(.98); }

/* Accessibilité : cache visuellement les labels Minutes/Sec */
.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;
}

/* Bloc horloge principale */
.clock-hero {
  text-align: center;
  margin: 0 auto 16px;
}
.hero-time {
  font-size: clamp(40px, 6vw, 80px);   /* taille conservée (compacte) */
  font-weight: 800;
  margin-bottom: 6px;
}
.hero-date {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--muted);
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.tab {
  appearance: none;
  border: 0;
  background: var(--card-2);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: clamp(14px, 1.8vw, 16px);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-1);
  display: flex; align-items: center; gap: 6px;
}
.tab.active {
  background: linear-gradient(135deg,#4da3ff 0%,#7fb7ff 100%);
  color: #0b1220;
}
.tab svg { width:18px; height:18px; stroke: currentColor; }

/* Panels */
.panels {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}
.panel { display: none; }
.panel.show { display: block; }

.card {
  background: var(--card);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-1);
  padding: clamp(12px, 2vw, 18px);
}

/* ===== Compte à rebours ===== */
.cd-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;                 /* un peu plus d’air */
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.cd-inputs input {
  width: clamp(64px, 6.2vw, 92px);      /* un peu plus large */
  padding: 8px 10px;                    /* ↑ */
  border-radius: 10px;                  /* ↑ */
  border: 1px solid rgba(255,255,255,.06);
  background: var(--card-2);
  color: var(--text);
  font-size: clamp(18px, 2.2vw, 24px);  /* ↑ */
  text-align: center;
  -moz-appearance: textfield;
}
.cd-inputs input::-webkit-outer-spin-button,
.cd-inputs input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.cd-inputs .sep{
  opacity:.75;
  font-weight: 800;
  font-size: clamp(20px, 2.6vw, 28px);  /* ↑ séparateur plus lisible */
}

/* Affichages agrandis */
.cd-display,
.sw-display {
  text-align: center;
  font-weight: 800;
  letter-spacing: 1px;
  font-size: clamp(40px, 6.6vw, 72px);  /* ← plus grand qu’avant */
  margin-bottom: 12px;
}

/* Presets */
.presets {
  display: flex;
  gap: 8px;
}
.btn.ghost {
  background: var(--card-2);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: clamp(14px, 1.9vw, 18px);
  box-shadow: var(--shadow-1);
  cursor: pointer;
}

/* ===== Actions : boutons agrandis ===== */
.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.icon-btn {
  appearance: none;
  border: 0;
  width: clamp(56px, 5.2vw, 84px);   /* ↑ plus larges */
  height: clamp(56px, 5.2vw, 84px);  /* ↑ plus hauts */
  border-radius: 16px;               /* ↑ */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--card-2);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}
.icon-btn svg {
  width: 62%;                        /* icône plus grande */
  height: 62%;
  stroke: var(--text);
  fill: none;
  stroke-width: 2.6;                 /* trait un poil plus épais */
}
.icon-btn.primary { background: linear-gradient(135deg,#4da3ff 0%,#7fb7ff 100%); }
.icon-btn.danger  { background: linear-gradient(135deg,#ff6b6b 0%,#ff8e8e 100%); }
.icon-btn:active { transform: scale(.96); filter: brightness(.95); }

/* ===== Overlay alarme (version compacte) ===== */
.alarm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center;
  z-index: 2000;
}
.alarm-overlay.show { display: flex; }

.alarm-card {
  background: var(--card);
  border-radius: 16px;
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(255,255,255,.08);
  padding: 18px;
  display: grid;
  gap: 14px;
  text-align: center;
  width: min(480px, 90vw);
}

.alarm-icon { width: 72px; margin: 0 auto; }
.alarm-text { font-size: clamp(18px, 2vw, 22px); }
.alarm-actions { display: flex; gap: 8px; justify-content: center; }

/* Boutons standards */
.btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: clamp(14px, 1.8vw, 16px);
  box-shadow: var(--shadow-1);
}
.btn.primary { background: linear-gradient(135deg,#4da3ff 0%,#7fb7ff 100%); color:#0b1220; }
.btn.danger  { background: linear-gradient(135deg,#ff6b6b 0%,#ff8e8e 100%); color:#0b1220; }
.btn.lg     { padding: 12px 16px; font-size: clamp(16px, 2vw, 18px); }

/* ==== Animation overlay alarme ==== */
.alarm-overlay{
  background: radial-gradient(120% 120% at 50% 30%, rgba(77,163,255,.18), rgba(0,0,0,.75));
  backdrop-filter: blur(2px);
  animation: bgPulse 1.2s ease-in-out infinite alternate;
}

.alarm-icon{
  position: relative;
  width: 92px;              /* ajustable */
  height: 92px;             /* ajustable */
  margin: 0 auto;
  display: grid;
  place-items: center;
  animation: shake 0.45s ease-in-out infinite alternate;
}
.alarm-icon svg{
  width: 100%; height: 100%;
  stroke: #4da3ff; fill: none; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 6px 18px rgba(77,163,255,.35));
}

.alarm-icon .ring-left,
.alarm-icon .ring-right{
  position: absolute;
  top: 8px;
  width: 18px; height: 18px;
  border: 3px solid #4da3ff;
  border-radius: 50%;
  opacity: .9;
}
.alarm-icon .ring-left { left: -8px; animation: ring 0.9s ease-out infinite; }
.alarm-icon .ring-right{ right: -8px; animation: ring 0.9s ease-out 0.45s infinite; }

/* Keyframes */
@keyframes shake {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg); }
}
@keyframes ring {
  0%   { transform: scale(.7); opacity:.95; }
  100% { transform: scale(1.5); opacity:0; }
}
@keyframes bgPulse{
  from { background-color: rgba(10,14,22,.85); }
  to   { background-color: rgba(10,14,22,.70); }
}