/* Dashboard Draisienne — colonne unique pensée pour l'iPhone.
   Jetons de couleur en clair/sombre, puis les écrans dans l'ordre :
   gate appareil, gate installation, connexion, tableau de bord.

   Parti pris : contraste élevé (les gris secondaires tiennent le 7:1 sur fond
   clair, lisible en plein soleil) et densité serrée, pour que le montant
   restant, la roue et l'ajout rapide tiennent sur un seul écran. */

:root {
  --accent: #10b981;
  --accent-ink: #ffffff;
  --bg: #f2f4f7;
  --bg2: #e7ebf1;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #4b5563;
  --line: #d8dee7;
  --field: #f1f4f8;
  --danger: #c81e1e;
  --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .05);
  --font-display: "Bricolage Grotesque", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --r: 22px;
}

/* Thème de l'iPhone, sauf si la page impose un choix */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --bg: #0b0d12;
    --bg2: #11151d;
    --surface: #161a23;
    --ink: #f3f4f6;
    --muted: #aab4c3;
    --line: #313a4a;
    --field: #1d222d;
    --danger: #f87171;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}

/* Choix fait dans les réglages : passe devant le thème du système */
:root[data-mode="light"] {
  --bg: #f2f4f7;
  --bg2: #e7ebf1;
  --surface: #ffffff;
  --ink: #111827;
  --muted: #4b5563;
  --line: #d8dee7;
  --field: #f1f4f8;
  --danger: #c81e1e;
  --shadow: 0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .05);
  color-scheme: light;
}

:root[data-mode="dark"] {
  --bg: #0b0d12;
  --bg2: #11151d;
  --surface: #161a23;
  --ink: #f3f4f6;
  --muted: #aab4c3;
  --line: #313a4a;
  --field: #1d222d;
  --danger: #f87171;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;          /* pas de rebond élastique */
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  overscroll-behavior: none;
  touch-action: manipulation;         /* pas de zoom double-tap */
  background: var(--bg);               /* fond uni, pas de halo en haut */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  max-width: 520px;
  margin-inline: auto;
  padding-inline: 16px;
  padding-top: 0;
  padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}

button {
  font: inherit;
  color: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.screen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Vue d'ensemble et historique : écran figé, aucun défilement de page,
   aucun rebond. Seule la liste d'historique défile, dans sa propre zone.
   Les écrans de connexion et d'installation restent défilables (Safari,
   petits iPhone), donc le verrou ne s'applique qu'ici. */
html[data-view="locked"],
html[data-view="locked"] body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

html[data-view="locked"] .screen:not([hidden]) {
  flex: 1 1 auto;
  min-height: 0;
}

.view {
  min-height: 0;
}

.history-top {
  gap: 10px;
  flex: none;
}

.history-top h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.4rem;
  margin: 0;
  letter-spacing: -.015em;
}

.history-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 4px 15px;
}

/* Bouton d'accès à l'historique : pas un menu, juste un bouton. */
.history-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.history-link:active {
  transform: scale(.99);
}

.history-link-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.history-link-meta svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
}

/* ---------- Cartes et typographie commune ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 15px;
}

.card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  margin: 0 0 10px;
  letter-spacing: -.01em;
}

.eyebrow {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.hint {
  font-size: .87rem;
  color: var(--muted);
  margin: 0;
}

.hint b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.btn {
  border: 0;
  cursor: pointer;
  min-height: 50px;
  border-radius: 15px;
  padding: 12px 18px;
  font-weight: 800;
  font-size: 1.02rem;
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform .1s, opacity .15s;
}

.btn:active {
  transform: scale(.98);
}

.btn:disabled {
  opacity: .35;
  box-shadow: none;
  cursor: default;
}

.btn.ghost {
  background: var(--field);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line);
}

.btn.quiet {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  border: 1px solid var(--line);
  font-size: .95rem;
  font-weight: 700;
  min-height: 46px;
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.row > * {
  flex: 1 1 140px;
}

/* ---------- Écrans de gate (pas un iPhone, pas encore installé) ---------- */

.gate {
  min-height: 78vh;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  justify-content: center;
  text-align: center;
  padding-bottom: 24px;
}

.mark {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 23px;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
  flex: none;
}

.mark svg {
  width: 50px;
  height: 50px;
  color: var(--accent-ink);
}

.gate h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -.015em;
}

.gate p {
  color: var(--muted);
  margin: 0;
  font-size: .94rem;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}

.steps .num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: .88rem;
  flex: none;
}

.steps .what {
  font-size: .94rem;
}

.steps .what b {
  font-weight: 800;
}

.steps .what svg {
  width: 17px;
  height: 17px;
  vertical-align: -3px;
  color: var(--accent);
}

/* ---------- Connexion ---------- */

#screenLogin {
  min-height: 76vh;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  justify-content: center;
}

.login-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.login-head h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -.015em;
}

.error {
  margin: 0;
  color: var(--danger);
  font-size: .89rem;
  font-weight: 700;
}

/* ---------- En-tête du tableau de bord ---------- */

/* Barre du haut collante, pleine largeur et parfaitement opaque.
   iOS 26/27 floute une bande d'environ 40 pt en haut des apps installees
   (le « scroll edge effect » de Liquid Glass). Aucun meta ni propriete CSS
   ne le desactive : WebKit ne saute l'effet que si l'element du bord haut
   est fixe ou collant, occupe toute la largeur et peint une couleur unie,
   qu'il prolonge alors dans la zone systeme. D'ou les marges negatives qui
   annulent le padding lateral du body. */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 20;
  flex: none;
  background: var(--bg);
  margin-inline: -16px;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 10px;
}

.brand {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.top h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.45rem;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -.015em;
}

.status {
  font-size: .78rem;
  font-weight: 600;
  color: var(--muted);
  margin: 3px 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.status.ok .dot {
  background: var(--accent);
}

.status.busy .dot {
  background: #d97706;
}

.iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  flex: none;
}

.iconbtn svg {
  width: 22px;
  height: 22px;
}

/* ---------- Carte principale ---------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.big {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.95rem, 9.4vw, 2.7rem);
  line-height: 1;
  margin: 5px 0 0;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
}

.big.done {
  color: var(--accent);
}

.sub {
  margin: 6px 0 0;
  font-size: .87rem;
  color: var(--muted);
}

.ring {
  position: relative;
  width: 104px;
  height: 104px;
}

.ring svg {
  width: 100%;
  height: 100%;
  display: block;
}

.ring .track {
  stroke: var(--field);
}

.ring .bar {
  stroke: var(--accent);
  transition: stroke-dashoffset .6s cubic-bezier(.2, .8, .2, 1);
}

.ring .spokes {
  stroke: var(--line);
}

.ring .spin {
  transform-origin: 60px 60px;
  transition: transform .6s cubic-bezier(.2, .8, .2, 1);
}

.ring .pct {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.ring .pct span {
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 8px;
}

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.stat {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 10px 12px;
  min-width: 0;
}

.stat .v {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  margin: 2px 0 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.stat .k {
  font-size: .76rem;
  color: var(--muted);
  margin: 0;
  font-weight: 700;
}

.stat.edit {
  cursor: pointer;
  text-align: left;
  width: 100%;
  display: block;
}

.stat.edit .k {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.stat.edit .pen {
  color: var(--accent);
  font-weight: 800;
}

/* La tuile du prix est un <button> : son montant est un <span> qu'il faut
   passer en bloc, ce que la CSP interdirait de faire en attribut style. */
.stat.edit .v {
  display: block;
}

/* ---------- Formulaires ---------- */

.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Les cinq montants rapides sur une seule ligne, à largeur égale. */
.chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}

.chip {
  border: 1px solid var(--line);
  background: var(--field);
  border-radius: 999px;
  padding: 8px 2px;
  min-height: 42px;
  font-weight: 700;
  font-size: .94rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}

.chip:active {
  transform: scale(.97);
}

.fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted);
}

.inwrap {
  position: relative;
}

.inwrap .unit {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  font-weight: 800;
  pointer-events: none;
}

.in {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--line);
  border-radius: 13px;
  padding: 11px 13px;
  min-height: 48px;
  transition: border-color .15s, background .15s;
  -webkit-appearance: none;
  appearance: none;
}

.in.num {
  font-size: 1.18rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  padding-right: 38px;
}

.in:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
}

.in::placeholder {
  color: var(--muted);
  opacity: .65;
}

/* ---------- Historique ---------- */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}

.list li:first-child {
  border-top: 0;
  padding-top: 2px;
}

.badge {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--accent);
  font-weight: 800;
  font-size: 1.05rem;
}

.meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.note {
  font-size: .9rem;
  overflow-wrap: anywhere;
}

.when {
  font-size: .78rem;
  color: var(--muted);
  font-weight: 500;
}

.del {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 11px;
  padding: 8px 11px;
  min-height: 40px;
  cursor: pointer;
  font-size: .84rem;
  font-weight: 700;
}

.del.sure {
  color: var(--danger);
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.empty {
  color: var(--muted);
  margin: 0;
  font-size: .92rem;
}

/* ---------- Feuille des réglages ---------- */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  z-index: 10;
  animation: fade .2s ease;
}

.sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 11;
  max-width: 520px;
  margin-inline: auto;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 24px 24px 0 0;
  padding: 10px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 32px rgba(0, 0, 0, .22);
  animation: up .25s cubic-bezier(.2, .8, .2, 1);
  display: flex;
  flex-direction: column;
  gap: 15px;
  max-height: 88vh;
  overflow-y: auto;
}

.grab {
  width: 38px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  margin: 0 auto 2px;
  flex: none;
}

.sheet h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  margin: 0;
  letter-spacing: -.01em;
}

.seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: var(--field);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 14px;
}

.seg button {
  border: 0;
  background: transparent;
  border-radius: 10px;
  min-height: 44px;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted);
}

.seg button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .16);
}

.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sw {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 2px var(--line);
  cursor: pointer;
  padding: 0;
}

.sw[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--ink);
}

.sw.custom {
  position: relative;
  overflow: hidden;
  background: conic-gradient(#ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444);
}

.sw.custom input {
  position: absolute;
  inset: -8px;
  width: 60px;
  height: 60px;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}

.group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sheet-foot {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.who {
  font-size: .8rem;
  color: var(--muted);
  margin: 0;
  text-align: center;
  font-weight: 600;
}

/* ---------- Notification ---------- */

.toast {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 488px;
  margin-inline: auto;
  background: var(--ink);
  color: var(--surface);
  padding: 12px 16px;
  border-radius: 13px;
  font-weight: 700;
  z-index: 20;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

@keyframes up {
  from { transform: translateY(100%); }
  to { transform: none; }
}

@keyframes fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ring .bar,
  .ring .spin,
  .btn,
  .chip {
    transition: none;
  }

  .sheet,
  .scrim {
    animation: none;
  }
}