/* ═════════════════════════════════════════════════════════════
   Cycle — système de design (iOS 18, app Santé)
   ═════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light dark;

  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --bg: #F2F2F7;
  --card: #FFFFFF;
  --sheet: #FFFFFF;
  --sheet-card: #F2F2F7;
  --label: #000000;
  --label-2: #8E8E93;
  --label-3: rgba(60, 60, 67, 0.3);
  --sep: rgba(60, 60, 67, 0.2);
  --fill: rgba(118, 118, 128, 0.12);
  --fill-strong: rgba(118, 118, 128, 0.2);
  --seg-thumb: #FFFFFF;

  --accent: #FF375F;
  --accent-2: #FF6B8B;
  --accent-ink: #E0144A;
  --accent-soft: rgba(255, 55, 95, 0.25);
  --accent-wash: rgba(255, 55, 95, 0.12);
  --band-p: #FFCDD7;           /* accent à 25 % sur carte blanche, opaque pour des jointures nettes */
  --grad: linear-gradient(135deg, #FF375F 0%, #FF6B8B 100%);
  --red: #FF3B30;
  --red-wash: rgba(255, 59, 48, 0.12);

  --bar-bg: rgba(249, 249, 249, 0.78);
  --bar-plain: rgba(242, 242, 247, 0.82);
  --bar-dense: rgba(249, 249, 249, 0.92);
  --tab-off: #999999;
  --track: rgba(118, 118, 128, 0.14);

  --shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.04), 0 4px 18px rgba(0, 0, 0, 0.045);
  --btn-shadow: 0 8px 20px -6px rgba(255, 55, 95, 0.5);

  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --font-round: ui-rounded, -apple-system, "SF Pro Rounded", "SF Pro Display", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1C1C1E;
    --sheet: #1C1C1E;
    --sheet-card: #2C2C2E;
    --label: #FFFFFF;
    --label-2: #8E8E93;
    --label-3: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.6);
    --fill: rgba(118, 118, 128, 0.24);
    --fill-strong: rgba(118, 118, 128, 0.32);
    --seg-thumb: #636366;

    --accent-ink: #FF7A96;
    --accent-wash: rgba(255, 55, 95, 0.18);
    --band-p: #5E2431;           /* accent à ~30 % sur #1C1C1E */
    --red: #FF453A;
    --red-wash: rgba(255, 69, 58, 0.18);

    --bar-bg: rgba(22, 22, 23, 0.72);
    --bar-plain: rgba(0, 0, 0, 0.78);
    --bar-dense: rgba(22, 22, 23, 0.9);
    --tab-off: #8E8E93;
    --track: rgba(118, 118, 128, 0.24);

    --shadow: none;
    --btn-shadow: none;
  }
}

/* ───────── Base ───────── */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: var(--app-h, 100%);
  overflow: hidden;
  background: var(--bg);
  overscroll-behavior: none;
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.41px;
  color: var(--label);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }

button {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { cursor: default; }
button:focus { outline: none; }
button:focus-visible, [role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[role="button"]:focus { outline: none; }

svg { display: block; overflow: visible; }

.tnum { font-variant-numeric: tabular-nums; }

/* ───────── Structure ───────── */

/* --app-h : hauteur réelle de l'écran (voir fitScreen dans app.js) */
#app {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: var(--app-h, 100%);
  overflow: hidden;
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition: opacity 280ms var(--spring), transform 420ms var(--spring), visibility 0s linear 420ms;
  will-change: opacity, transform;
}
.view.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 320ms var(--spring), transform 420ms var(--spring), visibility 0s;
}

.scroller {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  padding:
    calc(var(--sat) + 44px)
    calc(16px + var(--sar))
    calc(var(--sab) + 49px + 32px)
    calc(16px + var(--sal));
}
.scroller, .ob-page { scrollbar-width: none; }
.scroller::-webkit-scrollbar, .ob-page::-webkit-scrollbar { display: none; }

/* ───────── Barre de navigation (verre dépoli) ───────── */

.navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding-top: var(--sat);
  height: calc(var(--sat) + 44px);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0.5px 0 var(--sep);
  opacity: 0;
  transition: opacity 240ms ease;
}
.navbar.is-scrolled::before { opacity: 1; }

.navbar-title {
  position: relative;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.41px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 220ms ease, transform 360ms var(--spring);
}
.navbar.is-scrolled .navbar-title { opacity: 1; transform: none; }

.navbar-cal::before { background: var(--bar-dense); }
.navbar-cal {
  height: auto;
  display: block;
  pointer-events: auto;
}
.navbar-row {
  position: relative;
  height: 44px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 calc(8px + var(--sar)) 0 calc(8px + var(--sal));
}
.navbar-side { display: flex; }
.navbar-side-end { justify-content: flex-end; }

.bar-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  padding: 0 8px;
  color: var(--accent);
  font-size: 17px;
  letter-spacing: -0.41px;
  transition: opacity 200ms ease;
}
.bar-btn:active { opacity: 0.4; transition-duration: 0s; }

.weekdays {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0 calc(24px + var(--sar)) 6px calc(24px + var(--sal));
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.06px;
  color: var(--label-2);
  text-align: center;
}

/* ───────── En-tête « Large Title » ───────── */

.large-header { padding: 6px 4px 14px; }
.eyebrow {
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.08px;
  color: var(--label-2);
  text-transform: uppercase;
}
.large-title {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.37px;
  transform-origin: 0 50%;
  will-change: transform;
}

/* ───────── Cartes ───────── */

.stack { display: grid; gap: 16px; }

.card {
  position: relative;
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;
}

.pressable {
  transition: transform 420ms var(--spring);
  -webkit-tap-highlight-color: transparent;
}
.pressable:active {
  transform: scale(0.97);
  transition-duration: 160ms;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.24px;
  color: var(--accent);
}
.card-head svg { width: 18px; height: 18px; flex: none; }
.card-head .chev { margin-left: auto; }

.chev {
  width: 8px;
  height: 14px;
  flex: none;
  color: var(--label-3);
}

.title-2 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: 0.36px;
}

.footnote {
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--label-2);
}

.fine-print {
  margin: 24px 16px 0;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--label-2);
  text-align: center;
}

/* Apparition en cascade */
.intro .reveal {
  animation: rise 560ms var(--spring) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* ───────── Anneau du cycle ───────── */

.ring-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 16px;
}
.ring-wrap {
  position: relative;
  width: 248px;
  height: 248px;
}
.ring { width: 100%; height: 100%; }

.ring-track { fill: none; stroke: var(--track); stroke-width: 24; }
.ring-tick { fill: var(--label-3); }

.ring-rot {
  transform: rotate(-90deg);
  transform-origin: 140px 140px;
  transition: transform 600ms var(--spring);
}
.ring-arc {
  fill: none;
  stroke-width: 24;
  stroke-linecap: round;
  transition: stroke-dashoffset 1100ms var(--spring), stroke-dasharray 600ms var(--spring), opacity 300ms ease;
}
.ring-halo { opacity: 0.45; }
@media (prefers-color-scheme: dark) { .ring-halo { opacity: 0.6; } }

.ring-dot {
  transform-origin: 140px 140px;
  transition: transform 1100ms var(--spring), opacity 300ms ease;
}
.ring-dot-halo { fill: #FFFFFF; }
.ring-dot-core { fill: var(--accent); }

.ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}
.ring-day {
  font-family: var(--font-round);
  font-size: 40px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: 0;
}
.ring-day small {
  font-size: 0.62em;
  font-weight: 600;
  margin-right: 0.2em;
}
.ring-sub {
  margin-top: 4px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--label-2);
}
.ring-chip {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.08px;
}

.ring-stats {
  align-self: stretch;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 20px;
  padding-top: 14px;
  border-top: 0.5px solid var(--sep);
}
.ring-stats > div {
  text-align: center;
  position: relative;
}
.ring-stats > div + div::before {
  content: "";
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 0.5px;
  background: var(--sep);
}
.stat-value {
  display: block;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  display: block;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0;
  color: var(--label-2);
}

/* ───────── Carte « Prochaines règles » ───────── */

.next-date {
  margin-top: 10px;
  text-wrap: balance;
}
.next-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 10px;
}
.pill {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent-ink);
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.24px;
  font-variant-numeric: tabular-nums;
}

.progress {
  position: relative;
  height: 8px;
  margin-top: 14px;
  border-radius: 4px;
  background: var(--track);
  overflow: hidden;
  isolation: isolate;
}
.progress > i {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: var(--grad);
  transform: translateX(-100%);
  transition: transform 900ms var(--spring);
}
.progress-ticks {
  display: grid;
  margin-top: 6px;
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0.07px;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.progress-ticks span { text-align: center; }
.progress-ticks span.is-on { color: var(--accent-ink); font-weight: 600; }

.calm {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 10px;
}
.calm p { font-size: 15px; line-height: 20px; letter-spacing: -0.24px; color: var(--label-2); }
.calm strong { display: block; color: var(--label); font-size: 17px; line-height: 22px; letter-spacing: -0.41px; font-weight: 600; margin-bottom: 2px; }

/* ───────── Carte « Plaquette » ───────── */

.pack-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.pack-main { min-width: 0; }
.pack-main .title-2 small {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.41px;
  color: var(--label-2);
}
.pack-state {
  margin-top: 2px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--label-2);
}
.blister {
  display: grid;
  grid-template-columns: repeat(7, 10px);
  gap: 5px;
  padding: 10px;
  border-radius: 14px;
  background: var(--fill);
  flex: none;
}
.blister i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fill-strong);
}
.blister i.taken { background: var(--accent-soft); }
.blister i.now { background: var(--accent); box-shadow: 0 0 0 2.5px var(--accent-wash); }
.blister i.pause { background: transparent; box-shadow: inset 0 0 0 1.5px var(--label-3); }
.blister i.pause.taken { box-shadow: inset 0 0 0 1.5px var(--accent-soft); }
.blister i.pause.now { background: transparent; box-shadow: inset 0 0 0 2px var(--accent), 0 0 0 2.5px var(--accent-wash); }
/* Pilules où les règles sont prévues */
.blister i.per:not(.now) { box-shadow: inset 0 0 0 2px var(--accent); }

.pack-next {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 0.5px solid var(--sep);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
}
.pack-next span:first-child { color: var(--label-2); white-space: nowrap; }
.pack-next span:last-child { font-weight: 600; text-align: right; }

/* ───────── Mini frise 7 jours ───────── */

.week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 10px -6px -4px;
}
.wday {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 2px 0 6px;
  min-height: 44px;
  border-radius: 14px;
  transition: transform 420ms var(--spring), background-color 200ms ease;
}
.wday:active { transform: scale(0.92); transition-duration: 140ms; }
.wday-name {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--label-2);
}
.wday-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wday.is-today .wday-name { color: var(--accent); }
.wday.is-today .wday-num { background: var(--accent); color: #FFFFFF; }
.wday-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.wday-dot.p { background: var(--accent-soft); }
.wday-dot.c { background: var(--accent); }

/* ───────── Calendrier ───────── */

.cal-scroller {
  padding-top: 0;
  padding-bottom: calc(var(--sab) + 49px + 76px);
}
.cal-spacer { height: calc(var(--sat) + 44px + 22px); }
.month { position: relative; }
.month + .month { margin-top: 4px; }
.month-title {
  position: -webkit-sticky;
  position: sticky;
  top: calc(var(--sat) + 44px + 22px);
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 calc(-16px - var(--sar)) 0 calc(-16px - var(--sal));
  padding: 14px calc(20px + var(--sar)) 10px calc(20px + var(--sal));
  background: var(--bar-plain);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.35px;
}
.month-title.is-current .month-name { color: var(--accent); }
.month-year {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.41px;
  color: var(--label-2);
  font-variant-numeric: tabular-nums;
}
.month-card { padding: 6px 8px; }
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.day {
  position: relative;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 22px;
  font-variant-numeric: tabular-nums;
}
.day.is-empty { pointer-events: none; }
.band {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: -0.5px;
  right: -0.5px;
  background: var(--band-p);
}
.band.c { background: var(--accent); }
.band.s { left: 3px; border-top-left-radius: 18px; border-bottom-left-radius: 18px; }
.band.e { right: 3px; border-top-right-radius: 18px; border-bottom-right-radius: 18px; }
.num {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: transform 380ms var(--spring);
}
.day:active .num { transform: scale(0.86); transition-duration: 120ms; }
.day.has-p .num { color: var(--accent-ink); font-weight: 600; }
.day.has-c .num { color: #FFFFFF; font-weight: 600; }
.day.is-today .num {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 700;
}
.day.is-today.has-p .num,
.day.is-today.has-c .num { box-shadow: 0 0 0 2px var(--card); }
.day.flash .num { animation: flash 700ms var(--spring); }
/* Premier jour d'une plaquette */
.day.is-pack::after {
  content: '';
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 8px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--label-2);
}
.day.is-pack.has-c::after, .day.is-pack.is-today::after { background: #FFFFFF; }
.day.is-pack.has-p::after { background: var(--accent-ink); }
@keyframes flash {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.legend {
  position: absolute;
  left: 50%;
  bottom: calc(var(--sab) + 49px + 12px);
  z-index: 5;
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 0 0 0.5px var(--sep), 0 6px 20px rgba(0, 0, 0, 0.06);
  transform: translateX(-50%);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--label-2);
  white-space: nowrap;
  pointer-events: none;
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 18px; height: 10px; border-radius: 5px; display: block; }
.sw-p { background: var(--accent-soft); }
.sw-c { background: var(--accent); }
.sw-pack { width: 5px; height: 5px; border-radius: 50%; background: var(--label-2); display: block; }

/* ───────── Réglages : listes groupées ───────── */

.group-header {
  margin: 24px 16px 7px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  letter-spacing: -0.08px;
  color: var(--label-2);
  text-transform: uppercase;
}
.large-header + .group-header { margin-top: 8px; }
.group {
  background: var(--card);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.group-pad { padding: 12px; }
.group-spaced { margin-top: 32px; }
.group-footer {
  margin: 8px 16px 0;
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.08px;
  color: var(--label-2);
}

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 8px 16px;
  text-align: left;
  transition: background-color 300ms ease;
}
.row + .row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 57px;
  right: 0;
  height: 1px;
  background: var(--sep);
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
.row-link:active, .row-destructive:active { background: var(--fill-strong); transition-duration: 0s; }

.row-icon {
  flex: none;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--grad);
  color: #FFFFFF;
}
.row-icon svg { width: 19px; height: 19px; }
.row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 13px; line-height: 18px; letter-spacing: -0.08px; color: var(--label-2); }
.row-value { color: var(--label-2); white-space: nowrap; }
.row-destructive {
  justify-content: center;
  min-height: 52px;
  color: var(--red);
  font-size: 17px;
}
.row-disabled .row-title, .row-disabled .row-sub, .row-disabled .row-icon { opacity: 0.4; }

/* Stepper iOS */
.stepper {
  flex: none;
  display: flex;
  align-items: center;
  height: 32px;
  border-radius: 9px;
  background: var(--fill);
}
.stepper button {
  position: relative;
  width: 47px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--label);
  transition: background-color 250ms ease, opacity 200ms ease;
}
.stepper button::after { content: ""; position: absolute; inset: -6px 0; }
.stepper button svg { width: 14px; height: 14px; }
.stepper button:active { background: var(--fill-strong); transition-duration: 0s; }
.stepper button:disabled { opacity: 0.25; background: none; }
.stepper i { width: 1px; height: 18px; background: var(--sep); }

/* Contrôle segmenté iOS */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 2px;
  height: 36px;
  border-radius: 10px;
  background: var(--fill);
}
.seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / 3);
  border-radius: 8px;
  background: var(--seg-thumb);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  transition: transform 460ms var(--spring);
}
.segmented button {
  position: relative;
  z-index: 1;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: -0.24px;
  font-variant-numeric: tabular-nums;
  transition: opacity 200ms ease;
}
.segmented button::after { content: ""; position: absolute; inset: -6px 0; }
.segmented button[aria-checked="true"] { font-weight: 600; }
.segmented button:active { opacity: 0.55; }

.privacy {
  margin: 40px 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--label-2);
  font-size: 13px;
  line-height: 18px;
  letter-spacing: -0.08px;
}
.privacy svg { width: 24px; height: 24px; margin-bottom: 8px; }
.privacy strong { color: var(--label); font-weight: 600; }
.privacy .version { margin-top: 12px; font-size: 12px; }

/* ───────── Barre d'onglets ───────── */

.tabbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 20;
  height: calc(49px + var(--sab));
  padding: 0 var(--sar) var(--sab) var(--sal);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tabbar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bar-bg);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 -0.5px 0 var(--sep);
}
.tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  padding-top: 5px;
  height: 49px;
  color: var(--tab-off);
  font-size: 10px;
  line-height: 12px;
  font-weight: 500;
  letter-spacing: 0.1px;
  transition: color 200ms ease;
}
.tab svg {
  width: 28px;
  height: 28px;
  transition: transform 380ms var(--spring);
}
.tab:active svg { transform: scale(0.86); transition-duration: 120ms; }
.tab.is-active { color: var(--accent); }

/* ───────── Boutons ───────── */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  border-radius: 16px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.41px;
  transition: transform 420ms var(--spring), opacity 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.btn:active { transform: scale(0.97); transition-duration: 160ms; }
.btn-primary {
  background: var(--grad);
  color: #FFFFFF;
  box-shadow: var(--btn-shadow);
}
.btn-primary:disabled {
  background: var(--fill-strong);
  color: var(--label-3);
  box-shadow: none;
  transform: none;
}
.btn-tinted { background: var(--accent-wash); color: var(--accent-ink); }
.btn-danger { background: var(--red); color: #FFFFFF; }
.btn-danger-tinted { background: var(--red-wash); color: var(--red); }
.btn-plain { background: var(--fill); color: var(--label); }
.btn + .btn { margin-top: 10px; }

/* ───────── Feuilles modales ───────── */

.sheet-layer {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: var(--app-h, 100%);
  z-index: 100;
}
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  opacity: 0;
  transition: opacity 420ms var(--spring);
}
@media (prefers-color-scheme: dark) { .sheet-backdrop { background: rgba(0, 0, 0, 0.55); } }
.sheet-layer.is-open .sheet-backdrop { opacity: 1; }

.sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: calc(100% - var(--sat) - 12px);
  padding: 0 calc(16px + var(--sar)) calc(var(--sab) + 16px) calc(16px + var(--sal));
  border-radius: 28px 28px 0 0;
  background: var(--sheet);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 520ms var(--spring);
  touch-action: none;
  will-change: transform;
}
.sheet-layer.is-open .sheet { transform: translateY(0); }
.sheet::after {
  /* prolonge la feuille sous le rebond */
  content: "";
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 200px;
  background: var(--sheet);
}
.grabber {
  width: 36px;
  height: 5px;
  margin: 6px auto 0;
  border-radius: 3px;
  background: var(--label-3);
}
.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 52px;
  margin: 0 -8px;
}
.sheet-head .bar-btn:last-child { justify-self: end; font-weight: 600; }
.sheet-head h2 {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.41px;
}

.sheet-day { padding-top: 18px; padding-bottom: 20px; }
.sheet-title {
  font-size: 22px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0.35px;
}
.sheet-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--label-2);
}
.sheet-status i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--fill-strong);
}
.sheet-status i.p { background: var(--accent-soft); }
.sheet-status i.c { background: var(--accent); }
.sheet-info {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--sheet-card);
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--label-2);
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.sheet-info span:last-child { color: var(--label); font-weight: 500; text-align: right; }
.sheet-actions { margin-top: 20px; }

.sheet-alert { text-align: center; padding-top: 20px; }
.alert-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--red-wash);
  color: var(--red);
}
.alert-icon svg { width: 26px; height: 26px; }
.sheet-alert p {
  margin: 8px 8px 0;
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--label-2);
}
.sheet-alert .sheet-actions { margin-top: 24px; }

.sheet-grouped { background: var(--bg); }
.sheet-grouped::after { background: var(--bg); }
@media (prefers-color-scheme: dark) {
  .sheet-grouped { background: var(--card); }
  .sheet-grouped::after { background: var(--card); }
  .sheet-grouped .picker-card { background: var(--sheet-card); }
}
.sheet-grouped .picker-card { box-shadow: var(--shadow); }
.sheet-note { margin: 12px 8px 4px; font-size: 13px; line-height: 18px; letter-spacing: -0.08px; color: var(--label-2); }

/* ───────── Sélecteur de date en ligne ───────── */

.picker-card { padding: 8px 12px 10px; }
.picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding-left: 4px;
}
.picker-label {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
  letter-spacing: -0.41px;
}
.picker-nav { display: flex; margin-right: -6px; }
.picker-nav button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--accent);
  transition: opacity 200ms ease;
}
.picker-nav button:active { opacity: 0.4; transition-duration: 0s; }
.picker-nav button:disabled { color: var(--label-3); }
.picker-nav svg { width: 11px; height: 18px; }
.picker-wd {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 2px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: -0.08px;
  color: var(--label-3);
  text-align: center;
  text-transform: uppercase;
}
.picker-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 44px;
  height: 264px;
  margin-top: 4px;
}
.picker-grid.slide-l { animation: slideL 380ms var(--spring); }
.picker-grid.slide-r { animation: slideR 380ms var(--spring); }
@keyframes slideL { from { opacity: 0; transform: translateX(24px); } }
@keyframes slideR { from { opacity: 0; transform: translateX(-24px); } }
.pk {
  display: grid;
  place-items: center;
  font-size: 20px;
  line-height: 25px;
  letter-spacing: 0.38px;
  font-variant-numeric: tabular-nums;
}
.pk span {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transition: background-color 250ms ease, color 250ms ease, transform 380ms var(--spring);
}
.pk:active span { transform: scale(0.88); transition-duration: 120ms; }
.pk.is-today span { color: var(--accent); font-weight: 600; }
.pk.is-sel span {
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 600;
}
.pk:disabled span { color: var(--label-3); }

/* ───────── Onboarding ───────── */

#onboarding {
  position: fixed;
  top: 0; right: 0; left: 0;
  height: var(--app-h, 100%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: opacity 450ms var(--spring), transform 600ms var(--spring);
}
#onboarding[hidden] { display: none; }
#onboarding.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}
.ob-top {
  flex: none;
  height: calc(var(--sat) + 44px);
  padding: var(--sat) 0 0 calc(4px + var(--sal));
  display: flex;
  align-items: center;
}
.ob-back { transition: opacity 260ms ease; }
.ob-back svg { width: 12px; height: 20px; margin-right: 2px; }
.ob-back.is-hidden { opacity: 0; pointer-events: none; }
.ob-viewport { flex: 1; min-height: 0; overflow: hidden; }
.ob-track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: transform 560ms var(--spring);
  will-change: transform;
}
.ob-page {
  width: calc(100% / 3);
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  padding: 0 calc(20px + var(--sar)) 24px calc(20px + var(--sal));
  transition: opacity 400ms ease;
}
.ob-page:not(.is-current) { opacity: 0.3; }

.ob-hero {
  display: flex;
  justify-content: center;
  padding: 4px 0 20px;
}
.ob-ring { width: 136px; height: 136px; }
.ob-arc {
  fill: none;
  stroke-width: 24;
  stroke-linecap: round;
  stroke-dasharray: 101 1408;
  stroke-dashoffset: 125;
}
.ob-halo { opacity: 0.5; }
.ob-page.is-current .ob-arc { animation: obDraw 1400ms var(--spring) 200ms forwards; }
@keyframes obDraw { to { stroke-dashoffset: -12; } }
.ob-orbit {
  transform-origin: 140px 140px;
  animation: orbit 14s linear infinite;
}
@keyframes orbit { to { transform: rotate(360deg); } }
.ob-drop {
  transform-origin: 140px 150px;
  animation: dropIn 900ms var(--spring) 500ms both;
}
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px) scale(0.6); } }

.ob-title {
  font-size: 34px;
  line-height: 41px;
  font-weight: 700;
  letter-spacing: 0.37px;
  text-align: center;
  text-wrap: balance;
}
.ob-lead {
  margin: 10px auto 0;
  max-width: 320px;
  font-size: 17px;
  line-height: 22px;
  color: var(--label-2);
  text-align: center;
  text-wrap: balance;
}
.ob-title-left, .ob-lead-left { text-align: left; max-width: none; margin-left: 4px; }
.ob-title-left { margin-top: 8px; }
.ob-lead-left { margin-bottom: 24px; }

.features {
  display: grid;
  gap: 20px;
  margin: 28px 4px 0;
}
.features li { display: flex; gap: 16px; align-items: flex-start; }
.features li > span:last-child {
  font-size: 15px;
  line-height: 20px;
  letter-spacing: -0.24px;
  color: var(--label-2);
}
.features strong {
  display: block;
  font-size: 17px;
  line-height: 22px;
  letter-spacing: -0.41px;
  font-weight: 600;
  color: var(--label);
  margin-bottom: 1px;
}
.f-icon {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.f-icon svg { width: 30px; height: 30px; }

.ob-bottom {
  flex: none;
  padding: 12px calc(20px + var(--sar)) calc(var(--sab) + 16px) calc(20px + var(--sal));
}
.dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-bottom: 18px;
}
.dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--label);
  opacity: 0.2;
  transition: opacity 300ms ease;
}
.dots i.is-active { opacity: 0.9; }

/* ───────── Simulation iPhone (contrôle qualité : ?sim) ───────── */

html.sim {
  --sat: 59px;
  --sab: 34px;
}
html.sim body::before {
  content: "";
  position: fixed;
  top: 11px;
  left: 50%;
  width: 125px;
  height: 37px;
  margin-left: -62.5px;
  border-radius: 20px;
  background: #000;
  z-index: 1000;
  pointer-events: none;
}
html.sim body::after {
  content: "";
  position: fixed;
  bottom: 8px;
  left: 50%;
  width: 134px;
  height: 5px;
  margin-left: -67px;
  border-radius: 3px;
  background: var(--label);
  z-index: 1000;
  pointer-events: none;
}

/* ───────── Mouvement réduit ───────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .ob-orbit { animation: none; }
}