:root {
  --fond: #14161c;
  --fond2: #1d2029;
  --fond3: #262a35;
  --trait: #333845;
  --texte: #e9ecf2;
  --fin: #99a0b0;
  --or: #ffc94d;
  --vert: #3ddc84;
  --ambre: #ffb02e;
  --rouge: #ff5a52;
  --r: 12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: contain;
}

.barre {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: var(--fond);
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 20;
}
.barre h1 { font-size: 1.12rem; margin: 0; letter-spacing: .02em; font-weight: 700; }
.barre h1 span { color: var(--or); }

button {
  font: inherit; color: var(--texte);
  background: var(--fond3); border: 1px solid var(--trait);
  border-radius: 10px; padding: .55rem .85rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:active { transform: translateY(1px); }
button.primaire { background: #2f5ad6; border-color: #3d6ae8; font-weight: 600; }
button.rouge { background: #b8302a; border-color: #d4433c; font-weight: 600; }
button.gros { padding: .95rem 1.4rem; font-size: 1.05rem; border-radius: 14px; min-width: 14rem; }
button.icone { background: none; border: none; font-size: 1.3rem; padding: .3rem .5rem; }
button.pastille { padding: .4rem .6rem; border-radius: 9px; min-width: 2.6rem; }
button.pastille.large { min-width: auto; }
button.bascule[aria-pressed="true"] { background: var(--or); color: #1a1a1a; border-color: var(--or); font-weight: 600; }
button[disabled] { opacity: .45; cursor: default; }

input, select {
  font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 10px; padding: .5rem .6rem;
}
input[type=number] { width: 4.6rem; text-align: center; }

.onglets {
  display: flex; gap: 4px; padding: 8px 10px;
  background: var(--fond); border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 19; overflow-x: auto;
}
.onglets button {
  flex: 1 1 0; background: none; border: none; border-radius: 10px;
  color: var(--fin); padding: .55rem .4rem; white-space: nowrap; font-size: .95rem;
}
.onglets button.actif { background: var(--fond3); color: var(--texte); font-weight: 600; }

main { padding: 14px 12px calc(28px + env(safe-area-inset-bottom)); max-width: 980px; margin: 0 auto; }
.ecran { display: none; }
.ecran.actif { display: block; }

.carte {
  background: var(--fond2); border: 1px solid var(--trait);
  border-radius: var(--r); padding: 14px; margin-bottom: 14px;
}
.carte h2 { font-size: 1rem; margin: 0 0 .7rem; color: var(--fin); text-transform: uppercase; letter-spacing: .05em; }

.rangee { display: flex; gap: 10px; align-items: center; justify-content: center; margin: .7rem 0; }
.rangee.serre { gap: 7px; }
.rangee.enroule { flex-wrap: wrap; }
.rangee.entre { justify-content: space-between; }
.message { color: var(--fin); font-size: .9rem; text-align: center; margin: .4rem 0 0; min-height: 1.2em; }
.message.alerte { color: var(--rouge); }
.astuce { color: var(--fin); font-size: .85rem; margin: .6rem 0 0; }
.etiquette { color: var(--fin); font-size: .85rem; }
.sep { width: 1px; height: 1.4rem; background: var(--trait); }
.fin { color: var(--fin); }

/* ── accordeur ── */
.accordeur { text-align: center; }
.note-grande { margin: 10px 0 6px; }
#j-nom { font-size: clamp(3.6rem, 19vw, 6rem); font-weight: 300; line-height: 1; letter-spacing: -.02em; }
#j-nom.juste { color: var(--vert); }
#j-nom.proche { color: var(--ambre); }
#j-detail { font-size: .95rem; margin-top: .45rem; min-height: 1.3em; }

.jauge { position: relative; height: 62px; margin: 14px auto 2px; max-width: 460px; }
.jauge-graduations { position: absolute; inset: 14px 0 auto; height: 22px; }
.jauge-graduations span { position: absolute; top: 0; width: 2px; height: 14px; background: var(--trait); transform: translateX(-1px); }
.jauge-graduations span.centre { height: 22px; background: var(--fin); }
.jauge-zone {
  position: absolute; left: 44%; width: 12%; top: 14px; height: 22px;
  background: rgba(61, 220, 132, .14); border-left: 1px solid rgba(61,220,132,.4); border-right: 1px solid rgba(61,220,132,.4);
}
.aiguille {
  position: absolute; top: 6px; left: 50%; width: 4px; height: 38px;
  background: var(--or); border-radius: 2px; transform: translateX(-2px);
  transition: left .07s linear, background .15s;
  box-shadow: 0 0 10px rgba(255,201,77,.5);
}
.aiguille.juste { background: var(--vert); box-shadow: 0 0 12px rgba(61,220,132,.6); }
.jauge-legende { position: absolute; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-between; color: var(--fin); font-size: .75rem; }

.pos-manche { min-height: 1.5em; color: var(--or); font-size: 1rem; letter-spacing: .04em; margin-top: .4rem; }

.niveau { height: 7px; background: var(--fond3); border-radius: 4px; overflow: hidden; max-width: 460px; margin: 14px auto; }
.niveau > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--vert), var(--or)); transition: width .08s linear; }

.ruban { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 16px; min-height: 2.4rem; }
.ruban span {
  background: var(--fond3); border: 1px solid var(--trait); border-radius: 8px;
  padding: .3rem .55rem; font-size: .95rem; font-variant-numeric: tabular-nums;
}
.ruban span b { color: var(--or); font-weight: 600; }

/* ── enregistrement ── */
.champ-tempo { text-align: center; }
.champ-tempo > label { display: block; color: var(--fin); font-size: .85rem; margin-bottom: .3rem; }
.unite { color: var(--fin); font-size: .85rem; }
.grille-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: .9rem; }
.grille-reglages label { display: flex; flex-direction: column; gap: .3rem; color: var(--fin); font-size: .85rem; }
.grille-reglages select, .grille-reglages input { color: var(--texte); }

.temoin { text-align: center; }
.temps { display: flex; gap: 10px; justify-content: center; margin-bottom: .8rem; }
.temps i {
  width: 16px; height: 16px; border-radius: 50%; background: var(--fond3);
  border: 1px solid var(--trait); display: block;
}
.temps i.on { background: var(--or); border-color: var(--or); }
.temps i.on.decompte { background: var(--rouge); border-color: var(--rouge); }
.compteur { font-size: 2.6rem; font-weight: 300; line-height: 1.1; }
.live { font-size: 1.3rem; color: var(--or); min-height: 1.5em; }

/* ── partition ── */
.titre-champ { width: 100%; font-size: 1.1rem; font-weight: 600; margin-bottom: .6rem; }
.papier {
  background: #fff; border-radius: var(--r); padding: 4px;
  overflow-x: auto; margin-bottom: 14px;
}
.papier svg { max-width: 100%; height: auto; }
.transpo b { min-width: 2.2rem; text-align: center; display: inline-block; font-size: 1.1rem; color: var(--or); }
.capo { color: var(--fin); font-size: .85rem; display: inline-flex; gap: .4rem; align-items: center; }

/* ── mes lignes ── */
.ligne-item { background: var(--fond2); border: 1px solid var(--trait); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; }
.ligne-item .haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ligne-item .nom { font-weight: 600; }
.ligne-item .meta { color: var(--fin); font-size: .82rem; }
.ligne-item .actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: .6rem; }
.ligne-item .actions button { padding: .4rem .7rem; font-size: .9rem; }

@media (max-width: 520px) {
  button.gros { min-width: 11rem; }
  .rangee { flex-wrap: wrap; }
}

/* ── écran Générer ── */
textarea {
  width: 100%; font: inherit; color: var(--texte);
  background: var(--fond); border: 1px solid var(--trait);
  border-radius: 10px; padding: .6rem; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem;
}
code { background: var(--fond3); border-radius: 5px; padding: .05rem .3rem; font-size: .85em; }
.carte.interne { background: var(--fond3); margin: .8rem 0 0; }

.grille-accords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: .8rem; }
.mesure-accords {
  display: flex; align-items: center; gap: 4px;
  background: var(--fond3); border: 1px solid var(--trait);
  border-radius: 10px; padding: .25rem .4rem;
}
.mesure-accords .num { color: var(--fin); font-size: .72rem; min-width: 1rem; text-align: center; }
.mesure-accords button {
  background: none; border: none; padding: .3rem .45rem; border-radius: 7px;
  font-weight: 600; color: var(--or); font-size: .98rem;
}
.mesure-accords button.choisi { background: var(--or); color: #1a1a1a; }
.mesure-accords.faux { border-color: var(--rouge); }

.champ-niveau { margin-top: 1rem; }
.champ-niveau > label { display: block; color: var(--fin); font-size: .85rem; margin-bottom: .4rem; }
.champ-niveau > label b { color: var(--texte); }
.champ-niveau input[type=range] { width: 100%; accent-color: var(--or); }
.echelle { display: flex; justify-content: space-between; color: var(--fin); font-size: .75rem; }