/* 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 {
  /* LA PALETTE DE L'APPLICATION DU MAC (`notes/page.html`), valeur pour valeur :
     l'iPad et le téléphone avaient la leur, brune, si bien qu'une même note n'avait
     pas la même allure d'un appareil à l'autre. */
  --fond: #F5F6F3;
  --fond-carte: #FFFFFF;
  --fond-barre: #ECEEE9;
  --trait: #D3D8D2;
  --texte: #1E2A32;
  --discret: #4B5A64;
  --accent: #2160B6;
  --danger: #B5473A;
  --tag-fond: #E7F0FD;
  --tag-encre: #1B4FA6;
  --rayon: 10px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    --fond: #151B20;
    --fond-carte: #222C34;
    --fond-barre: #1C242A;
    --trait: #2E3A42;
    --texte: #ECEFEA;
    --discret: #B6C0C6;
    --accent: #6FB0EC;
    --danger: #E4837A;
    --tag-fond: #17293F;
    --tag-encre: #8FBEF5;
    --sur-accent: #0E1A24;
  }
}

:root[data-theme="sombre"] {
  --fond: #151B20;
  --fond-carte: #222C34;
  --fond-barre: #1C242A;
  --trait: #2E3A42;
  --texte: #ECEFEA;
  --discret: #B6C0C6;
  --accent: #6FB0EC;
  --danger: #E4837A;
  --tag-fond: #17293F;
  --tag-encre: #8FBEF5;
  --sur-accent: #0E1A24;
}

/* `hidden` l'emporte TOUJOURS. Une règle `display: flex` posée sur un bloc
   (le bandeau vocal, la barre de la corbeille) passait devant l'attribut : le
   bandeau « Note vocale » et « Restaurer / Supprimer définitivement » s'affichaient
   sur toutes les notes. */
[hidden] { display: none !important; }

* { 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: var(--sur-accent, #fff);
  font-weight: 600;
}

button[disabled] { opacity: 0.5; }

.aide, .note { font-size: 0.82rem; color: var(--discret); margin: 8px 0 0; }
/* « Mémoriser cet appareil » : la case et son libellé sur une ligne */
label.case { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--texte); }
label.case input { width: auto; margin: 0; }
/* le statut de synchro est un LIEN : on le touche pour forcer une synchro
   (ou rouvrir la session si elle a expiré) — il remplace le bouton du pied */
#etat-sync { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.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);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* PAS DE MARGE INTÉRIEURE. Safari sur iPad et iPhone (et Firefox, qui en est
     l'habillage) donne à tout <button> une marge d'environ 1em de chaque côté :
     dans un rond de 40 px à 1.25rem, il ne restait RIEN pour l'icône, que le
     flex écrasait à zéro — les outils du Dessin n'avaient plus d'icône, quand
     les boutons à libellé (qui posent leur marge) s'affichaient. Android met
     6 px : rien ne s'y voyait. */
  padding: 0;
}
.rond.actif { background: var(--accent); color: var(--sur-accent, #fff); border-color: var(--accent); }
/* Icônes plates monochromes : tracé seul, teinté par la couleur du bouton. */
.ic { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rond .ic { width: 20px; height: 20px; min-width: 20px; flex: none; }
/* Sur une tablette, chaque bouton dit ce qu'il fait : quatre ronds sans mot ne
   se devinaient pas. Sur un téléphone, la place manque — l'icône reste seule, et
   son nom est dans `aria-label` et `title`. */
.rond .lib { display: none; }
@media (min-width: 700px) {
  .barre .rond.libelle { width: auto; padding: 0 14px 0 11px; gap: 6px; border-radius: 999px; }
  .barre .rond.libelle .lib { display: inline; font-size: 0.9rem; }
}
/* Écrire | Aperçu, en toutes lettres comme sur le Mac : un œil seul ne disait pas
   qu'il basculait, ni dans quel sens. */
.seg { display: inline-flex; border: 1px solid var(--trait); border-radius: 999px; overflow: hidden;
       background: var(--fond-carte); flex: none; }
.seg button { padding: 8px 14px; font-size: 0.9rem; color: var(--discret); }
.seg button + button { border-left: 1px solid var(--trait); }
.seg button.actif { background: var(--accent); color: var(--sur-accent, #fff); }
/* Sur un téléphone, sept commandes tiennent sur une ligne : un peu moins d'air
   (le bouton PDF a fait déborder la barre de 14 px à 390 px). */
@media (max-width: 430px) {
  .barre { gap: 4px; padding-left: 8px; padding-right: 8px; }
  .barre .rond { width: 36px; height: 36px; }
  .seg button { padding: 8px 10px; font-size: 0.85rem; }
}
/* l'icône occupe la moitié du rond : à 26 px, elle se perdait dans le bleu */
.fab .ic { width: 30px; height: 30px; min-width: 30px; flex: none; stroke-width: 2.2; }

.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); }
/* Le statut de connexion, LISIBLE d'un coup d'œil (#336) : une pastille colorée
   dit l'état — verte à jour, grise hors ligne, ambre en attente d'envoi, rouge
   à reconnecter, bleue pendant l'échange. */
.etat-sync { margin-left: auto; font-size: 0.75rem; color: var(--discret);
  display: inline-flex; align-items: center; gap: 6px; }
.etat-sync::before { content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--discret); flex: none; }
.etat-sync[data-etat="ok"]::before { background: #2E9E5B; }
.etat-sync[data-etat="offline"]::before { background: #9AA5AB; }
.etat-sync[data-etat="attente"]::before { background: #E2B45A; }
.etat-sync[data-etat="encours"]::before { background: #4C9AFF; }
.etat-sync[data-etat="attention"]::before { background: #D64B3C; }
.etat-sync[data-etat="attention"] { color: #D64B3C; }

.etiquettes {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px 0;
  scrollbar-width: none;
}
.etiquettes::-webkit-scrollbar { display: none; }
/* LES ÉTIQUETTES, comme sur le Mac : des pastilles en capitales, bleu sur bleu
   pâle. Le filtre choisi se détache en plein. */
.tag, .etiquettes button {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  background: var(--tag-fond); color: var(--tag-encre);
  text-transform: uppercase; letter-spacing: .05em; font-size: 10px; font-weight: 700;
  line-height: 1; border-radius: 999px; padding: 6px 10px; white-space: nowrap; border: 1px solid transparent;
}
.etiquettes button { padding: 8px 12px; }
.etiquettes button.actif { background: var(--accent); color: var(--sur-accent, #fff); }

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

.liste { flex: 1; overflow-y: auto; list-style: none; margin: 0; padding: 8px 12px 88px; }   /* 88 px : sous les boutons flottants */
.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; min-width: 0; }
.titre-note .ttxt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* le portefeuille : badge dans le coin haut-droit, à sa couleur — comme sur le Mac */
.titre-note .port-badge { flex: none; margin-left: auto; align-self: flex-start;
  text-transform: uppercase; letter-spacing: .04em; font-size: 10px; font-weight: 800;
  line-height: 1; border-radius: 4px; padding: 4px 7px; max-width: 45%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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; display: flex; flex-wrap: wrap;
        align-items: center; gap: 4px 6px; }
.meta .tag { padding: 4px 8px; font-size: 9.5px; }
.meta .attente { color: var(--accent); }
.vide { text-align: center; color: var(--discret); margin: 32px 12px; }

/* Les boutons flottants en bas à droite : nouvelle note, note vocale. */
.fab-groupe {
  position: fixed;
  right: calc(16px + env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 20;
}
.fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--sur-accent, #fff);
  font-size: 1.5rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* même raison que `.rond` : la marge de Safari réduisait l'icône à 8 px */
  padding: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
}
.fab:active { transform: translateY(1px); }
/* le micro en train d'enregistrer : rouge, et il respire */
.fab-mic.enr { background: var(--danger); animation: fab-pulse 1.1s ease-in-out infinite; }
@keyframes fab-pulse { 0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,.28); } 50% { box-shadow: 0 0 0 8px rgba(200, 60, 50, 0.25); } }
@media (prefers-reduced-motion: reduce) { .fab-mic.enr { animation: none; } }

/* Une indication qui n'interrompt rien : l'autorisation de l'appareil photo. */
.bandeau-info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px;
  background: var(--tag-fond); color: var(--tag-encre); border-bottom: 1px solid var(--trait); font-size: 0.85rem; }
.bandeau-info .actions-info { display: inline-flex; gap: 12px; margin-left: auto; }
.bandeau-info .lien { padding: 2px 0; }

/* Le bandeau d'une note vocale dans l'éditeur : son statut et le lecteur audio. */
.bandeau-vocal {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: var(--fond-barre);
  border-bottom: 1px solid var(--trait);
  font-size: 0.85rem;
  color: var(--discret);
}
.bandeau-vocal audio { width: 100%; }
.bandeau-vocal .ligne-vocal { display: flex; align-items: center; gap: 6px; }
.bandeau-vocal .ic { width: 16px; height: 16px; flex: none; }

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

#texte {
  flex: 1;
  width: 100%;
  border: none;
  resize: none;
  padding: 14px 16px;
  background: var(--fond);
  font-size: 17px;
  line-height: 1.55;
}
/* L'aperçu Markdown : il remplace la zone d'édition quand on bascule. */
.apercu-md {
  flex: 1; width: 100%; overflow: auto; padding: 14px 16px;
  background: var(--fond); font-size: 16px; line-height: 1.55; -webkit-overflow-scrolling: touch;
}
.apercu-md h1, .apercu-md h2, .apercu-md h3 { line-height: 1.25; margin: .6em 0 .3em; }
.apercu-md h1 { font-size: 1.5em; } .apercu-md h2 { font-size: 1.3em; } .apercu-md h3 { font-size: 1.12em; }
.apercu-md p, .apercu-md ul, .apercu-md ol, .apercu-md blockquote, .apercu-md pre { margin: .5em 0; }
.apercu-md a { color: var(--accent); }
.apercu-md blockquote { padding: 2px 12px; border-left: 3px solid var(--accent); color: var(--discret); }
.apercu-md code { background: var(--tag-fond); color: var(--tag-encre); border-radius: 4px; padding: 1px 5px; font-size: .92em; }
.apercu-md pre { background: var(--tag-fond); color: var(--tag-encre); border-radius: 8px; padding: 10px; overflow: auto; font-size: 13px; }
.apercu-md pre code { background: none; color: inherit; padding: 0; }
.apercu-md img { max-width: 100%; border-radius: 8px; }
.apercu-md .callout { border: 1px solid var(--trait); border-left: 4px solid var(--discret); border-radius: 8px; padding: 8px 12px; margin: .7em 0; background: var(--fond-barre); }
.apercu-md .callout .callout-tete { font-weight: 700; font-size: .92em; margin-bottom: 2px; }
.apercu-md .callout-info, .apercu-md .callout-note { border-left-color: #0092CF; }
.apercu-md .callout-tip, .apercu-md .callout-astuce, .apercu-md .callout-success, .apercu-md .callout-succes, .apercu-md .callout-ok { border-left-color: #74C82D; }
.apercu-md .callout-warning, .apercu-md .callout-attention, .apercu-md .callout-important { border-left-color: #FAA80C; }
.apercu-md .callout-danger, .apercu-md .callout-erreur, .apercu-md .callout-error { border-left-color: #D9201F; }
.apercu-md .callout-question, .apercu-md .callout-faq { border-left-color: #A2086F; }
.hex-puce { display: inline-block; width: 0.82em; height: 0.82em; border-radius: 3px;
            margin-right: 0.3em; vertical-align: -0.1em; border: 1px solid rgba(128,128,128,.45); }
.apercu-md table { border-collapse: collapse; display: block; overflow-x: auto; }
.apercu-md th, .apercu-md td { border: 1px solid var(--trait); padding: 5px 9px; text-align: left; }
.apercu-md th { background: var(--fond-barre); }
.apercu-md ul.taches { list-style: none; padding-left: 4px; }
.apercu-md .md-media { color: var(--discret); font-style: italic; }
/* Une image jointe, recollée en mémoire. Un schéma se rouvre au toucher : le
   curseur et le liseré le disent avant qu'on essaie. */
.apercu-md img.media-image { display: block; max-width: 100%; max-height: 70vh; margin: 10px auto;
  border-radius: 8px; border: 1px solid var(--trait); background: #fff; }
.apercu-md img.media-image.dessin { cursor: pointer; }
.apercu-md img.media-image.dessin:active { outline: 2px solid var(--accent); }

/* --- le dessin --- */

.barre-dessin { flex-wrap: wrap; justify-content: space-between; row-gap: 6px; }
/* Annuler et Enregistrer aux deux bouts de la première ligne, les outils dessous
   sur toute la largeur : sans ça, chacun prenait une ligne à lui. */
.barre-dessin .outils-dessin { order: 3; flex-basis: 100%; }
.barre-dessin .lien.fort { font-weight: 600; }
.outils-dessin { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; justify-content: center; }
.groupe-dessin { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.outils-dessin .rond.actif { background: var(--accent); color: var(--sur-accent, #fff); border-color: var(--accent); }
/* le champ de texte posé sur la feuille : transparent, à la taille du texte du schéma */
.saisie-dessin { position: absolute; z-index: 2; min-width: 6em; padding: 0; margin: 0; border: 1px dashed var(--accent);
  background: rgba(255, 255, 255, 0.85); font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.25; resize: none; overflow: hidden; outline: none; }
/* Un bouton DÉSACTIVÉ garde son icône lisible. Safari (iPad, iPhone) lui impose
   une couleur grise très pâle, et deux opacités s'y ajoutaient : « annuler » et
   « rétablir » n'étaient plus que deux ronds vides. Une couleur posée, une seule
   atténuation. */
.rond[disabled], .rond:disabled { color: var(--discret); -webkit-text-fill-color: var(--discret); opacity: 0.45; }
.couleurs-dessin { display: inline-flex; gap: 6px; padding: 0 4px; }
/* `flex: none` : une barre trop étroite comprimait les pastilles en ovales */
.couleurs-dessin .pastille { flex: none; width: 30px; height: 30px; min-width: 30px; min-height: 30px;
  aspect-ratio: 1; padding: 0; -webkit-appearance: none; appearance: none; border-radius: 50%;
  border: 2px solid var(--fond-carte); box-shadow: 0 0 0 1px var(--trait); }
.couleurs-dessin .pastille.actif { box-shadow: 0 0 0 2px var(--accent); }
#dessin-epaisseur { width: 110px; accent-color: var(--accent); }
.zone-dessin { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center;
  background: var(--fond-barre); overflow: hidden; padding-bottom: env(safe-area-inset-bottom); }
/* La feuille ne défile ni ne zoome : chaque geste y est un trait. Sans
   `touch-action: none`, le premier mouvement du stylet ferait défiler la page. */
#toile-photo { position: absolute; top: 0; left: 0; display: block; touch-action: none; -webkit-user-select: none;
  user-select: none; -webkit-touch-callout: none; }
#zone-photo { background: #1d1d1f; }
.lien[disabled] { opacity: 0.45; }
#toile { position: absolute; top: 0; left: 0; display: block; touch-action: none; -webkit-user-select: none;
  user-select: none; -webkit-touch-callout: none; }
/* Les étiquettes de la note : posées en pastilles (× pour en retirer une), le
   champ n'en ajoute que de nouvelles — comme sur le Mac. */
.barre-etiquettes { flex-wrap: wrap; }
.tags-note { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tags-note .tag .x { font-size: 12px; line-height: 1; padding: 0 0 0 2px; color: inherit; opacity: .7; }
.barre-etiquettes input { flex: 1; min-width: 10rem; width: auto; }
.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);
}

/* le numéro de version, discret, sous le titre de l'écran d'ouverture */
.version { margin: -12px 0 14px; font-size: 0.75rem; color: var(--discret); }
/* Sous la liste : UNE ligne discrète. Elle portait la marge des boutons
   flottants (88 px) et faisait un bandeau vide au bas de l'écran ; cette marge
   est désormais celle de la liste, dont la dernière note reste au-dessus d'eux. */
.version-liste { margin: 0; padding: 2px 12px calc(2px + env(safe-area-inset-bottom)); text-align: center;
  font-size: 0.7rem; line-height: 1.2; flex: none; }
.alerte-stockage { margin: 4px 12px; flex: none; }
/* ce que la page doit dire après une ouverture (la biométrie à reprendre au
   format 2, une phrase changée par le code de secours) : sous la liste, sans gêner */
.avis-liste { margin: 4px 12px; flex: none; }
.bascule .lien + .lien { margin-left: 12px; }
/* le panneau du compte */
.compte h2 { font-size: 1.05rem; margin: 26px 0 6px; }
#bouton-biometrie { display: block; width: 100%; margin-top: 10px; padding: 12px; border-radius: var(--rayon);
  background: var(--fond-carte); color: var(--accent); border: 1px solid var(--accent); font: inherit; }
.compte .action { display: block; width: 100%; margin-top: 12px; padding: 12px; border-radius: var(--rayon);
  background: var(--fond-carte); border: 1px solid var(--trait); color: var(--accent); font-weight: 600; text-align: center; }
.compte .action.danger { color: var(--danger); }
.compte .confirmer { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--rayon); }
.compte .confirmer p { margin: 0 0 6px; font-size: 0.88rem; }
#ecran-compte { overflow-y: auto; }
/* les relais de secours : une ligne par relais, son état dessous */
.compte fieldset.nu { border: 0; padding: 0; margin: 0; min-width: 0; }
.compte fieldset:disabled, .relais-liste.grise { opacity: 0.5; }
.relais-liste { list-style: none; margin: 8px 0 0; padding: 0; }
.relais-liste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 8px 0;
  border-bottom: 1px solid var(--trait); }
.relais-liste .relais-nom { font-weight: 600; overflow-wrap: anywhere; }
.relais-liste .relais-etat { flex: 1 1 100%; font-size: 0.82rem; color: var(--discret); order: 3; }
.relais-liste li[data-etat="erreur"] .relais-etat, .relais-liste li[data-etat="reconnecter"] .relais-etat { color: var(--danger); }
.relais-liste .actions-info { display: inline-flex; gap: 12px; margin-left: auto; }
/* les appareils et les serveurs : la même liste que les relais, une pastille d'état
   devant le nom, ce que chaque serveur en sait dessous */
#ecran-appareils { overflow-y: auto; }
.onglets .rond.petit { width: 32px; height: 32px; margin-left: 2px; }
.onglets .rond.petit .ic { width: 18px; height: 18px; min-width: 18px; }
.appareils .relais-nom::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; background: var(--discret); vertical-align: middle; }
.appareils li[data-etat="ok"] .relais-nom::before { background: #2E9E5B; }
.appareils li[data-etat="retard"] .relais-nom::before { background: #E2B45A; }
.appareils li[data-etat="erreur"] .relais-nom::before { background: #D64B3C; }
.appareils .appareil-moi { font-size: 0.7rem; font-weight: 600; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: middle; }
.appareils .appareil-serveur { display: block; }
.appareils .confirmer { flex: 1 1 100%; order: 4; margin-top: 4px; padding: 8px 10px; border: 1px solid var(--danger);
  border-radius: var(--rayon); font-size: 0.85rem; }
.appareils .confirmer .lien { margin-right: 14px; }

/* les portefeuilles en tête de liste, à leur couleur */
.etiquettes button.port { border: 2px solid transparent; }
.etiquettes button.port.actif { border-color: var(--texte); box-shadow: 0 0 0 1px var(--fond); }

/* « Portefeuilles », dans la barre des onglets : un geste, pas une vue */
.onglet-action { padding: 6px 10px; border-radius: 999px; font-size: 0.85rem; color: var(--accent); }
/* ce qui attend un geste se lit dans la liste : un conflit, une dictée, un verrou */
.meta .pastille-note { border-radius: 999px; padding: 2px 8px; font-size: 0.68rem; font-weight: 600;
  background: var(--tag-fond); color: var(--tag-encre); }
.meta .pastille-note.conflit { background: #FBE3DF; color: #9C2F22; }
.meta .pastille-note.vocal-attente { background: #FDF0D5; color: #7A5300; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .meta .pastille-note.conflit { background: #4A2420; color: #F2B4AA; }
  :root:not([data-theme="clair"]) .meta .pastille-note.vocal-attente { background: #3D3218; color: #F1D08A; }
}
:root[data-theme="sombre"] .meta .pastille-note.conflit { background: #4A2420; color: #F2B4AA; }
:root[data-theme="sombre"] .meta .pastille-note.vocal-attente { background: #3D3218; color: #F1D08A; }

/* Sous le texte : le portefeuille, les versions, le verrou. Une ligne à part,
   qui passe à la ligne : la barre du haut ne tient plus un bouton de plus à 390 px. */
.barre-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 6px 12px;
  border-top: 1px solid var(--trait); background: var(--fond-barre); }
.barre-outils select { max-width: 60%; min-width: 0; padding: 6px 8px; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte); font: inherit; font-size: 16px; }
.lien.fort { font-weight: 600; }

/* le bandeau du verrou d'une note */
.bandeau-verrou { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--fond-barre);
  border-bottom: 1px solid var(--trait); font-size: 0.85rem; }
.bandeau-verrou p { margin: 0; color: var(--discret); }
.actions-verrou { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bandeau-verrou .action, .panneau .action { padding: 9px 14px; border-radius: var(--rayon); background: var(--fond-carte);
  border: 1px solid var(--trait); color: var(--accent); font-weight: 600; }
.bandeau-verrou .erreur { margin: 0; }

/* les versions et le conflit : des écrans qui défilent */
#ecran-versions, #ecran-conflit, #ecran-portefeuilles { overflow-y: auto; }
.panneau { padding: 12px 12px calc(16px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px;
  max-width: 64rem; width: 100%; margin: 0 auto; }
.panneau h2 { font-size: 1rem; margin: 8px 0 0; }
.liste-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.liste-versions button { width: 100%; display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 10px 12px;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond-carte); }
.liste-versions button.actif { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.liste-versions .quand { flex: none; font-size: 0.78rem; color: var(--discret); }
.liste-versions .ttxt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#versions-apercu { flex: none; min-height: 6rem; border: 1px solid var(--trait); border-radius: var(--rayon); }
.conflit-cotes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .conflit-cotes { grid-template-columns: 1fr; } }
.conflit-cote { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.conflit-cote h2 { margin: 0; }
.conflit-cote .aide { margin: 0; }
.conflit-cote pre { margin: 0; padding: 10px; min-height: 8rem; max-height: 40vh; overflow: auto; white-space: pre-wrap;
  word-break: break-word; font: 14px/1.5 ui-monospace, "SF Mono", Menlo, monospace; background: var(--fond-carte);
  border: 1px solid var(--trait); border-radius: var(--rayon); }
#conflit-fusion { width: 100%; min-height: 10rem; padding: 10px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-carte); font-size: 16px; resize: vertical; }

/* les portefeuilles */
.pf-liste { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf { padding: 10px 12px; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond-carte); }
.pf-tete { display: flex; align-items: center; gap: 10px; }
.pf-tete .pf-nom { flex: 1; min-width: 0; padding: 8px 10px; }
.pf-compte { flex: none; font-size: 0.78rem; color: var(--discret); }
.pf-couleurs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pf-couleurs .pastille { width: 28px; height: 28px; flex: none; padding: 0; border-radius: 50%;
  border: 2px solid var(--fond-carte); box-shadow: 0 0 0 1px var(--trait); }
.pf-couleurs .pastille.auto { background: repeating-linear-gradient(45deg, var(--fond-barre) 0 4px, var(--trait) 4px 8px); }
.pf-couleurs .pastille.actif { box-shadow: 0 0 0 2px var(--accent); }
.lien-note { color: var(--accent); cursor: pointer; border-bottom: 1px dotted var(--accent); }
.lien-carte { cursor: pointer; text-decoration: underline dotted; }