/* Mobile-first. Le seul point de bascule élargit pour l'ordinateur.

   Deux partis pris structurants, hérités du passage de design :

   1. La carte est le conteneur paresseux. Quatre habitudes ne sont pas quatre
      objets distincts : c'est une liste. Elles vivent donc sur une seule
      surface, séparées par des filets, et c'est l'espacement qui fait la
      hiérarchie. Aucune carte n'est imbriquée dans une autre.

   2. Rien d'actionnable derrière un survol. Ce qui est cliquable est visible
      en permanence, sinon c'est inatteignable au doigt. */

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
.hidden { display: none !important; }

/* ─── Surfaces du navigateur ───
   La sélection, le curseur, l'anneau de focus et les ascenseurs arrivent avec
   des valeurs par défaut qui n'appartiennent à aucun design. Les habiller
   coûte quinze lignes et c'est ce qui distingue une page construite d'une page
   assemblée. */

::selection { background: var(--accent-soft); color: var(--text); }

:root { caret-color: var(--accent); accent-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}
:focus:not(:focus-visible) { outline: none; }

* { scrollbar-width: thin; scrollbar-color: var(--border-firm) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-firm);
  border-radius: var(--r-full);
  border: 3px solid var(--bg);
}

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Les chiffres qui comptent ne doivent pas sauter d'une valeur à l'autre. */
.tnum, .streak-count, .count, .group-head span, .legacy-table { font-variant-numeric: tabular-nums; }

/* ─── Connexion et configuration ─── */

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--s6);
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--lift-2);
  padding: var(--s8) var(--s6) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.login-card h1 {
  font-size: 1.375rem;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin-bottom: var(--s1);
}
.login-card label {
  font-size: var(--t-meta);
  color: var(--text-2);
  margin-top: var(--s1);
}
.login-card input {
  height: var(--tap);
  padding: 0 var(--s3);
  background: var(--sunken);
  border: 1px solid var(--control-line);
  border-radius: var(--r2);
  transition: border-color var(--dur-fast) var(--ease);
}
.login-card input::placeholder { color: var(--text-3); }
.login-card button[type="submit"] {
  height: var(--tap);
  margin-top: var(--s2);
  border-radius: var(--r2);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease);
}
.login-card button[type="submit"]:disabled { opacity: .55; cursor: default; }
.login-error { color: var(--alert); font-size: var(--t-meta); }
.setup-intro { font-size: var(--t-meta); color: var(--text-2); }

/* ─── Ossature ─── */

.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-top);
}

.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 0 var(--s4);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: var(--safe-top);
  z-index: 10;
}
.topbar-title {
  font-size: var(--t-title);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.topbar-title .app-name { display: none; }
.topbar-right { display: flex; align-items: center; gap: var(--s2); }

.icon-btn {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  border-radius: var(--r2);
  color: var(--text-3);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:active { background: var(--hover); color: var(--text-2); }

.sync-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--done);
  transition: background var(--dur) var(--ease);
}
.sync-dot.is-syncing { background: var(--accent); }
.sync-dot.is-offline { background: var(--text-3); }

.banner {
  padding: var(--s3) var(--s4);
  background: var(--alert-soft);
  border-bottom: 1px solid var(--border);
  color: var(--alert);
  font-size: var(--t-meta);
}

.content {
  flex: 1;
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) calc(var(--tabbar-h) + var(--safe-bottom) + var(--s8));
}

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(var(--tabbar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 20;
}
.tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
  font-size: var(--t-micro);
  transition: color var(--dur-fast) var(--ease);
}
.tab.is-active { color: var(--accent); }

/* ─── Habitudes ───
   Une liste sur une seule surface, pas quatre cartes identiques. */

.day-label {
  font-size: var(--t-meta);
  color: var(--text-2);
  margin-bottom: var(--s4);
}

.habit-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--lift-1);
  overflow: hidden;
}

.habit {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  min-height: 62px;
  padding: 0 var(--s4);
  text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease);
}
.habit:last-child { border-bottom: none; }
.habit:active { background: var(--hover); }
.habit.is-done { background: var(--done-soft); }
.habit.is-missed .habit-label { color: var(--text-3); text-decoration: line-through; }

.habit-box {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: 2px solid var(--control-line);
  border-radius: 8px;
  color: transparent;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
.habit-box svg { width: 15px; height: 15px; }
.habit.is-done .habit-box {
  background: var(--done);
  border-color: var(--done);
  color: var(--on-accent);
}
.habit.is-missed .habit-box { border-color: var(--text-3); }
.habit.is-missed .habit-box::after {
  content: '';
  width: 11px; height: 2px;
  background: var(--text-3);
  border-radius: 1px;
}
.habit.is-missed .habit-box svg { display: none; }

.habit-label { font-weight: 500; }

/* Le seul moment animé de l'app.
   Cocher une habitude est le geste pour lequel elle existe : la coche se
   trace, elle n'apparaît pas. Rien d'autre n'est chorégraphié, et l'animation
   ne se joue qu'au moment du clic, jamais au chargement. */
.habit.just-checked .habit-box svg polyline {
  stroke-dasharray: 26;
  animation: draw-check 340ms var(--ease) forwards;
}
@keyframes draw-check {
  from { stroke-dashoffset: 26; }
  to   { stroke-dashoffset: 0; }
}
.habit.just-checked .habit-box {
  animation: settle 340ms var(--ease);
}
@keyframes settle {
  0%   { transform: scale(1); }
  35%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

.hint {
  margin-top: var(--s5);
  font-size: var(--t-meta);
  color: var(--text-2);
  max-width: 62ch;
}

/* ─── Historique ─── */

.streaks {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--lift-1);
  overflow: hidden;
}

.streak {
  padding: var(--s4);
  border-bottom: 1px solid var(--border);
}
.streak:last-child { border-bottom: none; }

.streak-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.streak-head h2 {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.streak-count { font-size: var(--t-meta); color: var(--text-3); white-space: nowrap; }
.streak-count.is-on { color: var(--done); font-weight: 600; }

.dots { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; }
.dot {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--sunken);
  border: none;
  padding: 0;
  position: relative;
  transition: background var(--dur-fast) var(--ease);
}
/* Cible tactile élargie sans agrandir la marque. */
.dot::after { content: ''; position: absolute; inset: -7px -1px; }
.dot.is-done { background: var(--done); }
.dot.is-missed { background: var(--miss); }

.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: var(--s4);
  color: var(--accent);
  font-size: var(--t-meta);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legacy { margin-top: var(--s2); }
.legacy-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: var(--r2);
}
.legacy-table { border-collapse: collapse; font-size: var(--t-micro); white-space: nowrap; }
.legacy-table th, .legacy-table td {
  padding: var(--s1) var(--s2);
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  text-align: center;
}
.legacy-table thead th { background: var(--sunken); font-weight: 600; }
.legacy-table tbody th { background: var(--surface); font-weight: 500; text-align: left; }
.legacy-table td.is-done { color: var(--done); font-weight: 700; }
.legacy-table td.is-missed { color: var(--text-3); }

/* ─── Capture (notes et missions) ─── */

.capture { display: flex; gap: var(--s2); margin-bottom: var(--s5); }
.capture input {
  flex: 1;
  min-width: 0;
  height: var(--tap);
  padding: 0 var(--s4);
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: var(--r2);
  transition: border-color var(--dur-fast) var(--ease);
}
.capture input::placeholder { color: var(--text-3); }
.capture input:focus { border-color: var(--accent); }
.capture button {
  width: var(--tap); height: var(--tap);
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--r2);
  transition: background var(--dur-fast) var(--ease);
}

/* ─── Notes ─── */

.notes {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
.note { padding: var(--s4); border-bottom: 1px solid var(--border); }
.note:last-child { border-bottom: none; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.note-actions { display: flex; gap: var(--s2); margin-top: var(--s3); }

.ghost-btn {
  min-height: 36px;
  padding: 0 var(--s3);
  font-size: var(--t-meta);
  color: var(--text-2);
  background: var(--sunken);
  border-radius: var(--r1);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.ghost-btn:active { background: var(--border); color: var(--text); }

.empty {
  margin-top: var(--s12);
  text-align: center;
  color: var(--text-2);
  font-size: var(--t-label);
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

/* ─── Missions ─── */

.filters { margin-bottom: var(--s4); }

.chips {
  display: flex;
  gap: var(--s2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--s2);
}
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 var(--s4);
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-firm);
  font-size: var(--t-meta);
  color: var(--text-2);
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.segmented {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: var(--sunken);
  border-radius: var(--r2);
}
.segmented button {
  flex: 1;
  min-height: 34px;
  border-radius: var(--r1);
  font-size: var(--t-meta);
  color: var(--text-2);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.segmented button.is-on {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--lift-1);
}
.segmented .count { color: var(--text-3); font-size: var(--t-micro); }

/* Plus d'espace au-dessus d'un titre qu'en dessous : le blanc rattache le
   titre à ce qui le suit, pas à ce qui le précède. */
.group { margin-top: var(--s8); }
.group:first-of-type { margin-top: 0; }
.group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s2);
  padding: 0 var(--s1);
}
.group-head h2 {
  font-size: var(--t-meta);
  font-weight: 600;
  color: var(--text-2);
  letter-spacing: 0.01em;
}
.group-head span { font-size: var(--t-micro); color: var(--text-3); white-space: nowrap; }

.rows {
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r3);
  box-shadow: var(--lift-1);
  overflow: hidden;
}
.row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.row:last-child { border-bottom: none; }

.row-check {
  position: relative;
  width: var(--tap);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: transparent;
}
/* Le cadre est un ::before absolu, donc peint au-dessus du contenu non
   positionné : sans z-index il masquait entièrement la coche. */
.row-check svg { width: 15px; height: 15px; position: relative; z-index: 1; }
.row-check::before {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  border: 2px solid var(--control-line);
  border-radius: 7px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.row.is-done .row-check { color: var(--on-accent); }
.row.is-done .row-check::before { background: var(--done); border-color: var(--done); }
.row.is-done .row-text { color: var(--text-3); text-decoration: line-through; }

.row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  padding: var(--s3) var(--s4) var(--s3) var(--s1);
  text-align: left;
  min-height: var(--tap);
}
.row-text { overflow-wrap: anywhere; }
.row-badges { display: flex; flex-wrap: wrap; gap: var(--s1); }

.badge {
  padding: 1px var(--s2);
  border-radius: var(--r-full);
  font-size: var(--t-micro);
  background: var(--sunken);
  color: var(--text-2);
}
.badge.is-urgent { background: var(--alert-soft); color: var(--alert); }
.badge.is-doing { background: var(--accent-soft); color: var(--accent-hi); }
.badge.is-late { background: var(--alert-soft); color: var(--alert); font-weight: 600; }

/* Kanban.
   Les colonnes n'ont pas de surface : une carte dans une carte est toujours
   une erreur. Le titre et l'espacement suffisent à les délimiter.
   Sur téléphone, une seule colonne à la fois. */
.board-tabs { margin: var(--s4) 0 var(--s3); }
.board { display: flex; flex-direction: column; gap: var(--s2); }
.column { display: none; flex-direction: column; gap: var(--s2); min-height: 100px; }
.column.is-current { display: flex; }
.column-head { display: none; }

.card {
  display: flex;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card.is-dragging {
  box-shadow: var(--lift-3);
  border-color: var(--accent-line);
  transform: rotate(0.8deg);
}
.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s1);
  padding: var(--s3) var(--s4);
  text-align: left;
}
.card-text { overflow-wrap: anywhere; }
.card-client { font-size: var(--t-micro); color: var(--text-3); }
.card-move {
  width: var(--tap);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: var(--text-3);
  border-left: 1px solid var(--border);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.card-move:active { background: var(--hover); color: var(--text-2); }

.column-empty {
  padding: var(--s4) var(--s1);
  font-size: var(--t-meta);
  color: var(--text-3);
}

.drop-placeholder {
  border: 2px dashed var(--accent-line);
  border-radius: var(--r2);
  background: var(--accent-soft);
}

/* ─── Feuilles ─── */

.sheet {
  position: fixed;
  inset: 0;
  background: oklch(24% 0.014 264 / 0.42);
  display: flex;
  align-items: flex-end;
  z-index: 100;
  animation: veil var(--dur) var(--ease);
}
@keyframes veil { from { opacity: 0; } }

.sheet-panel {
  width: 100%;
  background: var(--surface);
  border-radius: var(--r3) var(--r3) 0 0;
  padding: var(--s5) var(--s4) calc(var(--s4) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  animation: rise var(--dur-slow) var(--ease);
}
@keyframes rise { from { transform: translateY(14px); } }

.sheet-panel h2 { font-size: var(--t-label); margin-bottom: var(--s1); }
.sheet-opt, .sheet-cancel {
  min-height: var(--tap);
  border-radius: var(--r2);
  background: var(--sunken);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease);
}
.sheet-opt:active { background: var(--border); }
.sheet-opt.is-primary { background: var(--accent); color: var(--on-accent); }
.sheet-cancel { margin-top: var(--s2); color: var(--text-2); background: none; }

.sheet-panel.detail { max-height: 88dvh; overflow-y: auto; }
.detail textarea, .detail input, .detail select {
  width: 100%;
  padding: var(--s3);
  background: var(--sunken);
  border: 1px solid var(--border-firm);
  border-radius: var(--r2);
  font-size: var(--t-body);   /* sous 16px, iOS zoome au focus */
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease);
}
.detail textarea:focus, .detail input:focus, .detail select:focus { border-color: var(--accent); }
.detail #d-text { font-weight: 500; }
.detail label { font-size: var(--t-micro); color: var(--text-2); margin-top: var(--s1); }
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2) var(--s3);
  align-items: center;
}
.detail-grid label { margin: 0; }
.toggle-btn {
  min-height: var(--tap);
  border-radius: var(--r2);
  background: var(--sunken);
  color: var(--text-2);
  font-weight: 500;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.toggle-btn.is-on { background: var(--alert-soft); color: var(--alert); }
.detail-meta { font-size: var(--t-micro); color: var(--text-3); }
.detail-actions { display: flex; flex-direction: column; gap: var(--s1); }
.danger-btn {
  min-height: var(--tap);
  border-radius: var(--r2);
  color: var(--alert);
  font-size: var(--t-meta);
  transition: background var(--dur-fast) var(--ease);
}
.danger-btn:active { background: var(--alert-soft); }

/* ─── Ordinateur ─── */

@media (min-width: 768px) {
  .content { padding: var(--s8) var(--s6) var(--s10); max-width: 720px; }

  .topbar-title #view-title { display: none; }
  .topbar-title .app-name { display: inline; }

  .tabbar {
    position: sticky;
    top: calc(var(--topbar-h) + var(--safe-top));
    bottom: auto;
    height: auto;
    padding: 0;
    border-top: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .tab {
    flex: 0 0 auto;
    flex-direction: row;
    gap: var(--s2);
    padding: var(--s3) var(--s5);
    font-size: var(--t-label);
  }
  .tab.is-active { box-shadow: inset 0 -2px 0 var(--accent); }

  .dots { gap: var(--s1); }

  .sheet { align-items: center; justify-content: center; }
  .sheet-panel {
    max-width: 440px;
    border-radius: var(--r3);
    padding-bottom: var(--s5);
    box-shadow: var(--lift-3);
  }

  /* Les trois colonnes tiennent : on montre tout et on masque le sélecteur. */
  .content:has(.board) { max-width: 1000px; }
  .board-tabs { display: none; }
  .board { flex-direction: row; align-items: flex-start; gap: var(--s4); }
  .column { display: flex; flex: 1 1 0; min-width: 0; }
  .column-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--t-meta);
    font-weight: 600;
    color: var(--text-2);
    padding: 0 var(--s1) var(--s1);
    border-bottom: 1px solid var(--border);
    margin-bottom: var(--s1);
  }

  .filters { display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
  .filters .chips { padding-bottom: 0; }
  .segmented { flex: 0 0 auto; }
  .segmented button { padding: 0 var(--s4); }
}

/* Le survol n'ajoute que du confort, jamais de l'information. */
@media (hover: hover) {
  .habit:hover { background: var(--hover); }
  .habit.is-done:hover { background: var(--done-soft); }
  .icon-btn:hover { background: var(--hover); color: var(--text-2); }
  .ghost-btn:hover { background: var(--border); color: var(--text); }
  .tab:hover { color: var(--text-2); }
  .tab.is-active:hover { color: var(--accent); }
  .dot:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
  .sheet-opt:hover { background: var(--border); }
  .chip:hover { border-color: var(--text-3); }
  .chip.is-on:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
  .card:hover { border-color: var(--border-firm); }
  .card-move:hover { background: var(--hover); color: var(--text-2); }
  .login-card button[type="submit"]:hover:not(:disabled) { background: var(--accent-hi); }
  .capture button:hover { background: var(--accent-hi); }
  .row-body:hover .row-text { color: var(--accent-hi); }
  .danger-btn:hover { background: var(--alert-soft); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}