/* RF Notes — la page mobile.
   Sobre et lisible à une main : les commandes vivent en haut et en bas de
   l'écran, jamais au milieu, parce qu'un pouce n'atteint pas le milieu d'un
   téléphone tenu d'une seule main. Aucune police, aucun script venus d'ailleurs. */

:root {
  --fond: #faf8f6;
  --fond-carte: #ffffff;
  --fond-barre: #f2efec;
  --trait: #e2dcd6;
  --texte: #1d1d1f;
  --discret: #6b645e;
  --accent: #9a5b2c;
  --danger: #a3372c;
  --rayon: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #1b1917;
    --fond-carte: #262320;
    --fond-barre: #211e1c;
    --trait: #3a3532;
    --texte: #f2efed;
    --discret: #a59d96;
    --accent: #d99a5f;
    --danger: #e0796c;
  }
}

:root[data-theme="sombre"] {
  --fond: #1b1917;
  --fond-carte: #262320;
  --fond-barre: #211e1c;
  --trait: #3a3532;
  --texte: #f2efed;
  --discret: #a59d96;
  --accent: #d99a5f;
  --danger: #e0796c;
}

* { box-sizing: border-box; }

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

.ecran { display: none; height: 100%; flex-direction: column; }
.ecran.visible { display: flex; }

.colonne {
  max-width: 34rem;
  width: 100%;
  margin: auto;
  padding: 24px 16px calc(24px + env(safe-area-inset-bottom));
}

h1 { font-size: 1.5rem; margin: 0 0 18px; letter-spacing: -0.01em; }

label { display: block; margin: 14px 0 4px; font-size: 0.85rem; color: var(--discret); }

input, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="password"], input[type="search"] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
  /* 16px au moins : en dessous, Safari sur iPhone zoome à la mise au point
     et l'utilisateur se retrouve avec une page décalée qu'il n'a pas demandée. */
  font-size: 16px;
}

input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  cursor: pointer;
  border: none;
  background: none;
}

form > button[type="submit"], #bouton-compris {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

button[disabled] { opacity: 0.5; }

.aide, .note { font-size: 0.82rem; color: var(--discret); margin: 8px 0 0; }
.erreur { color: var(--danger); font-size: 0.88rem; margin-top: 12px; }
.bascule { text-align: center; margin-top: 16px; }

.lien {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 8px 4px;
}
.lien.danger { color: var(--danger); }

/* --- la barre du haut --- */

.barre {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
  background: var(--fond-barre);
  border-bottom: 1px solid var(--trait);
}
.barre input[type="search"] { flex: 1; }
.grandit { flex: 1; font-size: 0.82rem; color: var(--discret); }

.rond {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--accent);
  background: var(--fond-carte);
  border: 1px solid var(--trait);
}
.rond.actif { background: var(--accent); color: #fff; border-color: var(--accent); }

.onglets {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--trait);
}
.onglet {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--discret);
}
.onglet.actif { background: var(--fond-carte); color: var(--texte); border: 1px solid var(--trait); }
.etat-sync { margin-left: auto; font-size: 0.75rem; color: var(--discret); }

.etiquettes {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px 0;
  scrollbar-width: none;
}
.etiquettes::-webkit-scrollbar { display: none; }
.etiquettes button {
  flex: none;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--trait);
  background: var(--fond-carte);
  font-size: 0.8rem;
  color: var(--discret);
}
.etiquettes button.actif { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- la liste --- */

.liste { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px 16px; }
.liste li {
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}
.liste li:active { border-color: var(--accent); }
.titre-note { font-weight: 600; display: flex; gap: 6px; align-items: baseline; }
.titre-note .epingle { color: var(--accent); }
.apercu { color: var(--discret); font-size: 0.85rem; margin-top: 2px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { color: var(--discret); font-size: 0.72rem; margin-top: 6px; }
.meta .attente { color: var(--accent); }
.vide { text-align: center; color: var(--discret); margin: 32px 12px; }

.pied {
  display: flex;
  justify-content: space-around;
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
  background: var(--fond-barre);
}

/* --- l'éditeur --- */

#texte {
  flex: 1;
  width: 100%;
  border: none;
  resize: none;
  padding: 14px 16px;
  background: var(--fond);
  font-size: 17px;
  line-height: 1.55;
}
.barre-etiquettes, .barre-corbeille {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait);
  background: var(--fond-barre);
}