* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-plain);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

#root { display: flex; flex-direction: column; height: 100dvh; }

/* Sans cette règle, .main-col ne grandit pas sous 840 px et la barre du bas
   remonte coller au contenu. La version desktop existait déjà, pas la mobile.
   min-height: 0 est indispensable : sinon .view ne défile jamais et la colonne
   dépasse la hauteur du viewport. */
.main-col { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }

/* ---------- barre du haut ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; padding: 14px 16px 10px; flex: none;
}
.topbar h1 { margin: 0; font: 400 22px/28px var(--font-brand); }
.topbar h1 span { font-size: 14px; color: var(--on-surface-variant); }

.iconbtn {
  width: 40px; height: 40px; border-radius: var(--shape-full);
  border: 0; background: transparent; color: var(--on-surface-variant);
  font-size: 18px; cursor: pointer;
  transition: background-color var(--dur-effects) var(--spring-effects);
}
.iconbtn:hover { background: var(--sc-high); }

/* ---------- zone de contenu ---------- */
.view {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0 16px 16px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}

.section-label {
  font: 700 11px/16px var(--font-plain); letter-spacing: .045em;
  text-transform: uppercase; color: var(--on-surface-variant);
  margin-top: 6px;
}
.section-label.danger { color: var(--error); }

/* ---------- cartes : remplies, élévation 0 ---------- */
.card {
  background: var(--sc-highest); border-radius: var(--shape-m);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  border: 0;
}
.card.low  { background: var(--sc-low); }
.card.err  { background: var(--error-container); color: var(--on-error-container); }
.card.tert { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.card.tappable { cursor: pointer; transition: border-radius var(--dur-spatial) var(--spring-spatial); }
.card.tappable:active { border-radius: var(--shape-s); }

.between { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dim { color: var(--on-surface-variant); }

/* ---------- écran Capture ---------- */

/* L'onglet Capture porte aussi la liste des vocaux, dans la MÊME zone
   défilante. Sans ce bloc collant, la zone d'enregistrement était en flex: 1
   face à une liste qui grandit : le bouton se faisait comprimer puis pousser
   hors de l'écran. Il reste désormais visible quoi qu'il arrive, et la liste
   défile dessous. Le fond opaque est indispensable — sinon les vocaux
   défilent en transparence derrière le bouton. */
.capture-head {
  flex: none; position: sticky; top: 0; z-index: 2;
  background: var(--surface);
  padding: 8px 0 12px;
  display: flex; flex-direction: column; gap: 16px;
}

.capture-zone {
  flex: none; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
}

.timer {
  font: 500 36px/44px var(--font-brand);
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.timer.idle { color: var(--on-surface-variant); }

/* FAB large Material : 96 px, coins 28 px. Morphe en cercle à l'enregistrement. */
.fab-rec {
  /* flex: none — sans quoi le bouton se laisse écraser par un voisin qui pousse. */
  width: 96px; height: 96px; flex: none; border: 0;
  border-radius: var(--shape-xl);
  background: var(--primary-container); color: var(--on-primary-container);
  box-shadow: var(--elev-3); cursor: pointer;
  display: grid; place-items: center;
  transition: border-radius var(--dur-spatial) var(--spring-spatial),
              background-color var(--dur-effects) var(--spring-effects);
}
.fab-rec:active { border-radius: var(--shape-l); }
.fab-rec[data-recording="true"] {
  border-radius: var(--shape-full);
  background: var(--error-container); color: var(--on-error-container);
}
.fab-rec .mic {
  width: 32px; height: 32px; border-radius: 16px 16px 10px 10px;
  background: currentColor;
  transition: border-radius var(--dur-spatial) var(--spring-spatial),
              width var(--dur-spatial) var(--spring-spatial),
              height var(--dur-spatial) var(--spring-spatial);
}
.fab-rec[data-recording="true"] .mic {
  width: 28px; height: 28px; border-radius: var(--shape-s);
}

.hint { text-align: center; max-width: 26ch; color: var(--on-surface-variant); margin: 0; }

/* indicateur ondulé Material Expressive : amplitude 3, longueur d'onde 40 */
.wavy { width: 200px; height: 14px; display: block; }
.wavy path { animation: wave-scroll 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .wavy path { animation: none; } }
@keyframes wave-scroll { to { transform: translateX(-40px); } }

/* ---------- bandeau de synchronisation ---------- */
.syncbar {
  display: flex; align-items: center; gap: 10px; flex: none;
  background: var(--sc); border-radius: var(--shape-l);
  padding: 12px 14px; color: var(--on-surface-variant);
}
.syncbar.warn { background: var(--tertiary-container); color: var(--on-tertiary-container); }
.syncbar.err  { background: var(--error-container);    color: var(--on-error-container); }
.pip { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; }
.syncbar.warn .pip { background: var(--tertiary); }
.syncbar.err  .pip { background: var(--error); }

/* ---------- liste des vocaux ---------- */
.vrow { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.vrow + .vrow { border-top: 1px solid var(--outline-variant); }
.vtime { width: 40px; flex: none; color: var(--on-surface-variant); font-variant-numeric: tabular-nums; }
.vtext { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
         display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vmeta { flex: none; color: var(--on-surface-variant); }
.vcount { flex: none; color: var(--tertiary); font-weight: 700; }

.srcbtn {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  height: 32px; padding: 0 14px; border-radius: var(--shape-full);
  border: 1px solid var(--outline-variant); background: transparent;
  color: var(--on-surface-variant); cursor: pointer;
  transition: border-radius var(--dur-effects) var(--spring-effects);
}
.srcbtn:active { border-radius: var(--shape-s); }

.badge-status {
  padding: 2px 8px; border-radius: var(--shape-full);
  background: var(--secondary-container); color: var(--on-secondary-container);
}
.badge-status[data-status="failed"] { background: var(--error-container); color: var(--on-error-container); }
.badge-status[data-status="queued"], .badge-status[data-status="transcribing"] {
  background: var(--tertiary-container); color: var(--on-tertiary-container);
}

/* ---------- barre de navigation : 64 px, surface-container, pilule 56x32 ---------- */
.nav {
  /* box-sizing: border-box ferait manger les 64 px par l'inset de la barre
     gestuelle Android : on l'ajoute explicitement à la hauteur. */
  height: calc(64px + env(safe-area-inset-bottom));
  flex: none; display: grid; grid-template-columns: repeat(5, 1fr);
  align-items: center; background: var(--sc); box-shadow: var(--elev-2);
  padding-bottom: env(safe-area-inset-bottom);
}
.navitem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  min-width: 0;
}
.indicator {
  width: 56px; height: 32px; border-radius: var(--shape-full);
  display: grid; place-items: center; position: relative;
  transition: background-color var(--dur-effects) var(--spring-effects);
}
.navitem .glyph {
  width: 24px; height: 24px; fill: var(--on-surface-variant);
  transition: fill var(--dur-effects) var(--spring-effects);
}
.navitem .navlabel {
  color: var(--on-surface-variant); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.navitem[aria-selected="true"] .indicator { background: var(--secondary-container); }
.navitem[aria-selected="true"] .glyph { fill: var(--on-secondary-container); }
.navitem[aria-selected="true"] .navlabel { color: var(--secondary); font-weight: 700; }

.navitem .dot-badge::after {
  content: attr(data-count); position: absolute; top: -2px; right: 8px;
  min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--shape-full);
  background: var(--error); color: var(--surface);
  font: 700 9px/14px var(--font-plain); text-align: center;
}

/* Réactivité de la barre : le libellé se réduit avant l'icône, jamais l'inverse. */
@media (max-width: 359px) {
  .indicator { width: 48px; }
  .navitem .navlabel { font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 319px) {
  .navitem .navlabel { display: none; }
  .nav { height: 56px; }
}

/* ---------- connexion ---------- */
.login {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; padding: 24px;
}
.pin-input {
  width: 200px; height: 56px; text-align: center; letter-spacing: .5em;
  font: 500 24px/56px var(--font-brand);
  background: var(--sc-highest); color: var(--on-surface);
  border: 0; border-bottom: 1px solid var(--on-surface-variant);
  border-radius: var(--shape-xs) var(--shape-xs) 0 0;
  outline: none;
}
.pin-input:focus-visible { border-bottom: 2px solid var(--primary); }

.btn-filled {
  height: 40px; padding: 0 24px; border: 0; border-radius: var(--shape-full);
  background: var(--primary); color: var(--on-primary); cursor: pointer;
  font: 700 14px/20px var(--font-plain); letter-spacing: .0071em;
  transition: border-radius var(--dur-effects-fast) var(--spring-effects);
}
.btn-filled:active { border-radius: var(--shape-s); }
.btn-filled:disabled { background: color-mix(in srgb, var(--on-surface) 12%, transparent);
                       color: color-mix(in srgb, var(--on-surface) 38%, transparent); cursor: default; }

/* Bouton texte Material : dans la barre du haut, il ne doit pas concurrencer
   le titre. Hauteur 40 px pour rester atteignable au pouce malgré l'absence
   de fond. white-space: nowrap — le libellé change de longueur selon l'état. */
.btn-text {
  height: 40px; padding: 0 12px; border: 0; border-radius: var(--shape-full);
  background: transparent; color: var(--primary); cursor: pointer;
  font: 700 14px/20px var(--font-plain); letter-spacing: .0071em;
  white-space: nowrap; flex: none;
  transition: background-color var(--dur-effects) var(--spring-effects);
}
.btn-text:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 8%, transparent); }
.btn-text:disabled { color: color-mix(in srgb, var(--on-surface) 38%, transparent); cursor: default; }

.empty { text-align: center; color: var(--on-surface-variant); padding: 40px 20px; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---------- desktop : rail à la place des onglets ---------- */
@media (min-width: 840px) {
  #root { flex-direction: row-reverse; }
  .nav {
    height: 100dvh; width: 88px; grid-template-columns: none;
    grid-auto-rows: min-content; gap: 12px; align-content: start;
    padding-top: 24px; box-shadow: none;
    border-right: 1px solid var(--outline-variant);
  }
  .view { max-width: 720px; width: 100%; margin: 0 auto; }
}

/* ---------- menus Material 3 Expressive (écran Revue) ---------- */
/* La ligne sélectionnée est en tertiary-container, là où l'ancien Material
   utilisait secondary-container. */
.menu {
  background: var(--sc-low); border-radius: var(--shape-l);
  box-shadow: var(--elev-2); overflow: hidden; margin: 4px 0;
}
.menu-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px; border: 0; background: transparent; color: var(--on-surface);
  font: 400 14px/20px var(--font-plain); letter-spacing: .0071em;
  transition: background-color var(--dur-effects) var(--spring-effects);
}
.menu-item:hover { background: var(--sc); }
.menu-item[aria-selected="true"] {
  background: var(--tertiary-container); color: var(--on-tertiary-container); font-weight: 700;
}

/* Champ corrigeable : un tap ouvre le menu, pas de saisie clavier. */
.field {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 0; cursor: pointer; text-align: left;
  background: transparent; border: 0; border-top: 1px solid var(--outline-variant);
  color: inherit;
}
.field .k {
  font: 700 11px/16px var(--font-plain); letter-spacing: .045em;
  text-transform: uppercase; color: var(--on-surface-variant);
}
.field .v { font: 500 14px/20px var(--font-plain); display: inline-flex; align-items: center; gap: 6px; }
.field .v::after { content: "▾"; font-size: 10px; color: var(--on-surface-variant); }

.quote { border-left: 3px solid var(--tertiary); padding-left: 12px; color: var(--on-surface-variant); }

/* ---------- écran Jour ---------- */

/* Puces de filtre : même défilement horizontal contenu que les tuiles. */
.chiprow {
  display: flex; gap: 8px; overflow-x: auto; flex: none;
  padding-bottom: 2px; scrollbar-width: none;
}
.chiprow::-webkit-scrollbar { display: none; }

.chip {
  /* inline-flex : les liens wiki du détail sont des span, pas des boutons —
     sans ça leur texte ne serait pas centré dans les 32 px de haut. */
  flex: none; display: inline-flex; align-items: center;
  height: 32px; padding: 0 14px; border-radius: var(--shape-s);
  border: 1px solid var(--outline-variant); background: transparent;
  color: var(--on-surface-variant); cursor: pointer; white-space: nowrap;
  font: 500 14px/20px var(--font-plain); letter-spacing: .0071em;
  transition: background-color var(--dur-effects) var(--spring-effects);
}
.chip:not(button) { cursor: default; }
.chip.sel {
  background: var(--secondary-container); color: var(--on-secondary-container);
  border-color: transparent; font-weight: 700;
}

/* Tuiles de projet : défilement horizontal avec accroche, jamais de scroll latéral de la page. */
.projrow {
  display: flex; gap: 8px; overflow-x: auto; flex: none;
  scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none;
}
.projrow::-webkit-scrollbar { display: none; }

.proj {
  flex: none; width: 118px; scroll-snap-align: start;
  background: var(--sc-high); border: 0; border-radius: var(--shape-l);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 7px;
  color: var(--on-surface); cursor: pointer; text-align: left;
  transition: border-radius var(--dur-spatial) var(--spring-spatial),
              background-color var(--dur-effects) var(--spring-effects);
}
.proj:active { border-radius: var(--shape-s); }
.proj[aria-expanded="true"] { background: var(--primary-container); color: var(--on-primary-container); }
.proj .pn { font: 700 12px/16px var(--font-plain); }
.proj .pc { font: 400 11px/16px var(--font-plain); opacity: .8; }

.track { height: 4px; border-radius: var(--shape-full); background: var(--secondary-container); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: var(--shape-full); background: var(--primary); }
.proj[aria-expanded="true"] .track { background: rgba(255,255,255,.25); }
.proj[aria-expanded="true"] .track i { background: var(--on-primary-container); }

.sphtag { font: 700 11px/16px var(--font-plain); letter-spacing: .045em; flex: none; color: var(--on-surface-variant); }

.check {
  width: 18px; height: 18px; border-radius: 2px; padding: 0; flex: none; margin-top: 2px;
  border: 2px solid var(--on-surface-variant); background: transparent; cursor: pointer;
}
.check[aria-checked="true"] { background: var(--primary); border-color: var(--primary); }

.task-line { display: flex; gap: 10px; align-items: flex-start; }
.task-line .grow { flex: 1; min-width: 0; }