/* ===================== FlyDeals : style iOS (Human Interface Guidelines) ===================== */
:root {
  /* couleurs systeme iOS - mode clair */
  --bg: #f2f2f7;                 /* systemGroupedBackground */
  --cell: #ffffff;               /* secondarySystemGroupedBackground */
  --cell-press: #d1d1d6;
  --fill: rgba(118, 118, 128, 0.12);   /* tertiarySystemFill */
  --fill-2: rgba(118, 118, 128, 0.2);
  --label: #000000;
  --label-2: rgba(60, 60, 67, 0.6);    /* secondaryLabel */
  --label-3: rgba(60, 60, 67, 0.3);    /* tertiaryLabel */
  --sep: rgba(60, 60, 67, 0.29);       /* separator */
  --tint: #007aff;               /* systemBlue */
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --seg-on: #ffffff;
  --material: rgba(249, 249, 249, 0.8);
  --shadow-seg: 0 3px 8px rgba(0, 0, 0, 0.12), 0 3px 1px rgba(0, 0, 0, 0.04);
  --tab-h: 50px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --cell: #1c1c1e;
    --cell-press: #2c2c2e;
    --fill: rgba(118, 118, 128, 0.24);
    --fill-2: rgba(118, 118, 128, 0.32);
    --label: #ffffff;
    --label-2: rgba(235, 235, 245, 0.6);
    --label-3: rgba(235, 235, 245, 0.3);
    --sep: rgba(84, 84, 88, 0.65);
    --tint: #0a84ff;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --seg-on: #636366;
    --material: rgba(22, 22, 24, 0.78);
    --shadow-seg: 0 3px 8px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--label);
  font: 17px/1.29 -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.022em;
  padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 24px);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: var(--tint); text-decoration: none; }
svg { display: block; }

/* ---------- barre de navigation ---------- */
.navbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
  transition: background 0.2s, box-shadow 0.2s;
}
.navbar.scrolled {
  background: var(--material);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 0.5px 0 var(--sep);
}
.nav-inner { height: 44px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; max-width: 720px; margin: 0 auto; padding: 0 8px; }
.nav-title { text-align: center; font-weight: 600; font-size: 17px; opacity: 0; transform: translateY(4px); transition: 0.2s; }
.navbar.scrolled .nav-title { opacity: 1; transform: none; }
.nav-btn { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; color: var(--tint); cursor: pointer; }
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.spin svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { max-width: 720px; margin: 0 auto; padding: 0 16px; }
.view { display: none; }
.view.active { display: block; animation: appear 0.22s ease-out; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

.large-title { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: 0.011em; margin: 2px 0 2px; }
.caption {
  display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 0;
  background: none; border: 0; color: var(--label-2); font-size: 13px; letter-spacing: -0.006em; cursor: pointer; text-align: left;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--label-3); flex: none; }
.dot.ok { background: var(--green); }
.dot.late { background: var(--orange); }
.dot.bad { background: var(--red); }

/* ---------- recherche ---------- */
.search {
  display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px;
  background: var(--fill); border-radius: 10px; margin-bottom: 12px; color: var(--label-2);
}
.search svg { width: 17px; height: 17px; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: 17px; color: var(--label); height: 100%; }
.search input::placeholder { color: var(--label-2); }
.search input::-webkit-search-cancel-button { filter: grayscale(1); }

/* ---------- controle segmente ---------- */
.segmented {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
  background: var(--fill); border-radius: 9px; padding: 2px; margin-bottom: 10px;
}
.segmented button {
  border: 0; background: none; border-radius: 7px; padding: 6px 4px; font-size: 13px; font-weight: 500;
  letter-spacing: -0.006em; color: var(--label); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.18s;
}
.segmented button[aria-selected="true"] { background: var(--seg-on); box-shadow: var(--shadow-seg); font-weight: 600; }
.segmented .count { color: var(--label-2); font-weight: 500; margin-left: 3px; }

/* ---------- menus deroulants (pull-down) ---------- */
.toolbar { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.menu { position: relative; display: inline-flex; align-items: center; gap: 2px; color: var(--tint); font-size: 15px; font-weight: 500; cursor: pointer; min-width: 0; }
.menu { padding: 6px 0; }
.menu-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
/* le vrai menu est invisible et pose par-dessus l'etiquette : le chevron reste colle au texte */
.menu select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.menu svg { width: 14px; height: 14px; flex: none; }

/* ---------- carte d'annonce facon carte d'embarquement ---------- */
.deal-list { display: grid; gap: 14px; }
.deal {
  --tier: var(--green);
  position: relative; background: var(--cell); border-radius: 20px; padding: 16px 16px 6px;
  scroll-margin-top: 70px; overflow: hidden;
}
.deal.tier-great { --tier: var(--orange); }
.deal.tier-error { --tier: var(--red); }
.deal.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 35% { box-shadow: 0 0 0 3px var(--tier); } 100% { box-shadow: 0 0 0 0 transparent; } }

.deal-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.tier-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--tier); letter-spacing: 0.02em; text-transform: uppercase; }
.tier-label i { width: 8px; height: 8px; border-radius: 50%; background: var(--tier); }
.deal-age { font-size: 13px; color: var(--label-2); }
.deal-age.old { color: var(--orange); }

.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.city .code { display: block; font: 700 30px/1.05 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; letter-spacing: 0.01em; }
.city .name { display: block; font-size: 13px; color: var(--label-2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city.end { text-align: right; }
.route-mid { display: flex; align-items: center; gap: 4px; color: var(--label-3); min-width: 64px; }
.route-mid::before, .route-mid::after { content: ""; flex: 1; border-top: 1.5px dashed var(--label-3); }
.route-mid svg { width: 20px; height: 20px; color: var(--tier); transform: rotate(90deg); }

.price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.price { font: 800 40px/1 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif; letter-spacing: -0.02em; }
.was { font-size: 17px; color: var(--label-2); text-decoration: line-through; }
.pct {
  font-size: 15px; font-weight: 700; color: var(--tier); background: color-mix(in srgb, var(--tier) 16%, transparent);
  padding: 3px 9px; border-radius: 999px; letter-spacing: -0.01em;
}
.deal-sub { font-size: 15px; color: var(--label-2); margin: 6px 0 0; }

/* perforation de carte d'embarquement */
.perf { position: relative; height: 22px; margin: 10px -16px 0; }
.perf::before { content: ""; position: absolute; left: 18px; right: 18px; top: 50%; border-top: 1.5px dashed var(--sep); }
.perf i { position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); transform: translateY(-50%); }
.perf i:first-child { left: -11px; }
.perf i:last-child { right: -11px; }

.dates { list-style: none; margin: 0; padding: 0; }
.dates li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 0; }
.dates li + li { box-shadow: 0 -0.5px 0 var(--sep); }
.dates .when { flex: 1; min-width: 0; }
.dates .when b { display: block; font-size: 16px; font-weight: 600; }
.dates .when small { display: block; font-size: 13px; color: var(--label-2); margin-top: 1px; }
.dates .dprice { font-weight: 600; font-size: 17px; white-space: nowrap; }
.btn-tinted {
  display: inline-flex; align-items: center; gap: 3px; padding: 6px 12px; border-radius: 999px; border: 0;
  background: color-mix(in srgb, var(--tint) 15%, transparent); color: var(--tint); font-size: 15px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.btn-tinted svg { width: 12px; height: 12px; }
.btn-tinted:active, .btn-filled:active { opacity: 0.6; }
.deal-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 0 8px; font-size: 12px; color: var(--label-2); box-shadow: 0 -0.5px 0 var(--sep); }
.deal-foot a { font-weight: 500; }
.sample-note { font-size: 13px; font-weight: 600; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); border-radius: 10px; padding: 7px 10px; margin: 0 0 12px; }

/* ---------- listes groupees (Reglages / En direct) ---------- */
.group { background: var(--cell); border-radius: 12px; overflow: hidden; margin: 0 0 8px; padding: 0; list-style: none; }
.group-header { font-size: 13px; color: var(--label-2); text-transform: uppercase; letter-spacing: 0.02em; margin: 22px 16px 7px; }
.group-footer { font-size: 13px; color: var(--label-2); margin: 6px 16px 0; line-height: 1.35; }
.row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 11px 16px; position: relative; }
.row + .row::before, .list li + li::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--sep); }
.row-icon { width: 29px; height: 29px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff; }
.row-icon svg { width: 18px; height: 18px; }
.row-icon + .row-main { flex: 1; }
.row-main { flex: 1; min-width: 0; }
.row-title { display: block; font-size: 17px; }
.row-sub { display: block; font-size: 15px; color: var(--label-2); margin-top: 1px; }
.row-value { color: var(--label-2); font-size: 17px; white-space: nowrap; }
.row.with-icon + .row::before, .row.with-icon + .row.with-icon::before { left: 57px; }
.row-action { width: 100%; text-align: left; background: none; border: 0; color: var(--tint); cursor: pointer; }
.row-action:active, .list a:active { background: var(--cell-press); }
.progress { height: 6px; background: var(--fill); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress span { display: block; height: 100%; background: var(--tint); border-radius: 999px; }

.steps { margin: 0; padding: 4px 16px 12px 36px; color: var(--label-2); font-size: 15px; }
.steps li { margin: 6px 0; }
.steps b { color: var(--label); font-weight: 600; }
.sub-code {
  display: block; width: calc(100% - 32px); margin: 0 16px 12px; min-height: 84px; border: 0; border-radius: 10px; padding: 10px;
  background: var(--fill); color: var(--label-2); font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: none;
}
.btn-filled {
  display: block; width: calc(100% - 32px); margin: 4px 16px 14px; height: 50px; border: 0; border-radius: 12px;
  background: var(--tint); color: #fff; font-size: 17px; font-weight: 600; cursor: pointer;
}

/* liste En direct */
.list li { position: relative; }
.list a { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 10px 16px; color: inherit; }
.list .t { font-size: 16px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .s { font-size: 13px; color: var(--label-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list .p { text-align: right; font-weight: 600; font-size: 16px; }
.list .d { justify-self: end; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.list .d.down { color: var(--green); background: color-mix(in srgb, var(--green) 15%, transparent); }
.list .d.up { color: var(--label-2); background: var(--fill); }

/* pastilles de selection (destinations, departs) */
.chips-label { font-size: 13px; color: var(--label-2); padding: 12px 16px 0; position: relative; }
.chips-label::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; border-top: 0.5px solid var(--sep); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 14px; }
.chip {
  border: 0; border-radius: 999px; padding: 7px 12px; background: var(--fill); color: var(--label);
  font-size: 15px; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.chip[aria-pressed="true"] { background: var(--tint); color: #fff; font-weight: 600; }
.chip:active { opacity: 0.6; }
.row .dot.big { width: 10px; height: 10px; }
.note-inline { margin: 0 16px 12px; padding: 9px 12px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); }

/* interrupteur iOS */
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 999px; background: var(--fill-2); position: relative; cursor: pointer; flex: none; transition: background 0.2s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 3px 1px rgba(0, 0, 0, 0.06); transition: transform 0.2s; }
.switch:checked { background: var(--green); }
.switch:checked::after { transform: translateX(20px); }
.switch-row { cursor: pointer; }

.empty { text-align: center; color: var(--label-2); padding: 48px 24px; font-size: 15px; }
.empty svg { width: 44px; height: 44px; margin: 0 auto 10px; color: var(--label-3); }
.empty-title { font-size: 20px; font-weight: 600; color: var(--label); margin: 0 0 6px; }
.empty p { margin: 0; }

/* ---------- barre d'onglets ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(3, 1fr);
  height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--material); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 -0.5px 0 var(--sep);
}
.tabbar button { background: none; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #8e8e93; font-size: 10px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; padding-top: 4px; }
.tabbar svg { width: 26px; height: 26px; }
.tabbar svg .fill { fill: currentColor; }
.tabbar button[aria-selected="true"] { color: var(--tint); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);
  transform: translate(-50%, 12px) scale(0.96); opacity: 0; pointer-events: none; transition: 0.22s;
  background: var(--material); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  color: var(--label); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; z-index: 40;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }

@media (min-width: 720px) {
  .deal-list { grid-template-columns: 1fr 1fr; }
  .deal.tier-error { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }