[hidden] { display: none !important; }
:root {
  --bg: #f6f6fa;
  --card: #ffffff;
  --text: #1c1b29;
  --muted: #6b6a80;
  --border: #e2e1ec;
  --accent: #5b4fd8;
  --tick-view: #8f86f0; /* violet éclairci : contraste avec le noir des segments */
  --hot: #e0207a; /* magenta framboise : ce qui doit ressortir le plus */
  --hot-ink: #fff;
  --accent-ink: #ffffff;
  --accent-soft: #ecebfb;
  --danger: #c0392b;
  --code-bg: #efeef6;
  --shadow: 0 1px 2px rgb(20 16 60 / 0.05), 0 2px 8px rgb(20 16 60 / 0.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #13131a;
    --card: #1c1b26;
    --text: #e8e7f2;
    --muted: #9796ad;
    --border: #2c2b3b;
    --accent: #9d93ff;
    --hot: #ff5ca8;
    --hot-ink: #1b0a13; /* magenta clair : texte sombre, plus lisible */
    --tick-view: var(--accent);
    --accent-ink: #14122b;
    --accent-soft: #26233f;
    --danger: #ef7d71;
    --code-bg: #24233a;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #13131a;
    --card: #1c1b26;
    --text: #e8e7f2;
    --muted: #9796ad;
    --border: #2c2b3b;
    --accent: #9d93ff;
    --hot: #ff5ca8;
    --hot-ink: #1b0a13; /* magenta clair : texte sombre, plus lisible */
    --tick-view: var(--accent);
    --accent-ink: #14122b;
    --accent-soft: #26233f;
    --danger: #ef7d71;
    --code-bg: #24233a;
    --shadow: none;
    color-scheme: dark;
}
/* Noir pur (écrans OLED) : en thème sombre, fond noir absolu ; les cartes
   et les contrôles gardent juste assez de relief pour se détacher. */
@media (prefers-color-scheme: dark) {
  :root[data-oled]:not([data-theme="light"]) {
    --bg: #000; --card: #0d0d12; --border: #24232f; --code-bg: #17161f; --accent-soft: #1b1930;
    --pill-bg: #24232f; --wire: #5c5978;
  }
}
:root[data-oled][data-theme="dark"] {
  --bg: #000; --card: #0d0d12; --border: #24232f; --code-bg: #17161f; --accent-soft: #1b1930;
  --pill-bg: #24232f; --wire: #5c5978;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  margin: 0;
  display: flex; flex-direction: column;
  height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
button, input, textarea { font: inherit; color: inherit; }

/* Fil : défile au-dessus du dock ; les notes sont calées en bas. */
#scroller { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-top: env(safe-area-inset-top); scrollbar-width: none; position: relative; }
#scroller::-webkit-scrollbar { display: none; }
/* Colonne des notes : centrée sur l'écran tant que la colonne de côté (58 px)
   tient à côté ; sinon poussée par elle, jusqu'à 16 px du bord opposé ; puis
   rognée. Ces deux variables placent aussi les pilules et le champ de
   recherche (les % valent la largeur de l'écran pour tous). */
body {
  --note-w: min(640px, 100% - 58px - 16px);
  --note-x: clamp(16px, (100% - var(--note-w)) / 2, 100% - 58px - var(--note-w));
}
body.side-left { --note-x: max(58px, (100% - var(--note-w)) / 2); }
body.side-empty { --note-w: min(640px, 100% - 32px); --note-x: calc((100% - var(--note-w)) / 2); }
.feed-wrap {
  min-height: 100%; width: var(--note-w); margin-left: var(--note-x); padding: 16px 0 calc(84px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; justify-content: flex-end;
}

/* Commandes flottantes du bas, à portée de pouce (d'après la maquette :
   pilules noires accolées, colonne de navigation à droite). */
/* Survols : sur le noir du thème clair, un même pourcentage de blanc se voit
   beaucoup moins que sur le gris violacé du thème sombre, d'où des dosages par thème. */
:root { --pill-bg: #000; --pill-ink: #ffffff; --wire: var(--pill-bg); --sep: color-mix(in srgb, var(--pill-ink) 20%, transparent); --hov-row: 12%; --hov-btn: 32%; --hov-pill: 24%; --open-bg: 17%; --ctl-bottom: calc(14px + env(safe-area-inset-bottom)); --pill-h: 42px; --pr-o: 21px; --pr-i: 7px; }
:root.pill-labels { --pill-h: 58px; --pr-o: 29px; --pr-i: 8px; }
.pill-icons { display: flex; align-items: center; gap: 6px; }
/* Un peu d'air entre les trois points et les badges. */
.status .pill-icons:has(.dot:not([hidden])) > svg { margin-right: 6px; }
/* Thème sombre : pas d'interface claire qui éblouit dans le noir. Comme les
   surfaces « élevées » de Material 3 ou d'iOS, les commandes sont un gris
   violacé plus clair que le fond ; les fils et segments un ton au-dessus. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pill-bg: #3a374d; --pill-ink: #f1f0f8; --wire: #6b6788; --sep: color-mix(in srgb, var(--pill-ink) 16%, transparent); --hov-row: 6%; --hov-btn: 22%; --hov-pill: 16%; --open-bg: 10%; } }
:root[data-theme="dark"] { --pill-bg: #3a374d; --pill-ink: #f1f0f8; --wire: #6b6788; --sep: color-mix(in srgb, var(--pill-ink) 16%, transparent); --hov-row: 6%; --hov-btn: 22%; --hov-pill: 16%; --open-bg: 10%; }

.pills {
  /* Centrée sur la colonne des notes (décalée par la colonne de défilement), pas sur l'écran. */
  position: fixed; left: calc(var(--note-x) + var(--note-w) / 2); transform: translateX(-50%); bottom: var(--ctl-bottom); z-index: 8; /* au-dessus du menu qui grandit */
  display: flex; gap: 2px;
}
.pill-btn {
  height: var(--pill-h); min-width: 92px; padding: 0 20px; border: 0; border-radius: 21px; cursor: pointer;
  background: var(--pill-bg); color: var(--pill-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
/* Une seule pilule, sécable au centre. */
.pill-btn:first-child { border-radius: var(--pr-o) var(--pr-i) var(--pr-i) var(--pr-o); }
.pill-btn:last-child { border-radius: var(--pr-i) var(--pr-o) var(--pr-o) var(--pr-i); }
.pill-btn:active, .round:active { transform: scale(.96); }
/* Le badge de droite est concentrique avec l'arrondi de la pilule : son centre
   est à un demi-rayon de pilule du bord (rayon pilule − rayon badge). */
.pill-btn.status { padding: 0 calc(var(--pr-o) - 9px) 0 18px; }
.pill-btn.status:has(#dot-store:empty) { padding-right: calc(var(--pr-o) - 5.5px); }
/* Pastilles masquées : c'est la dernière visible qui se cale sur l'arrondi. */
.pill-btn.status:has(#dot-store[hidden]):has(#dot-sync:empty) { padding-right: calc(var(--pr-o) - 5.5px); }
.pill-btn.status:has(#dot-store[hidden]):has(#dot-sync:not(:empty)) { padding-right: calc(var(--pr-o) - 9px); }
.pill-btn.status:has(#dot-store[hidden]):has(#dot-sync[hidden]) { padding-right: calc(var(--pr-o) - 9px); }
.pill-btn.status:has(#dot-store[hidden]):has(#dot-sync[hidden]):has(#dot-app-pill[hidden]) { padding: 0 18px; }
/* Le « + » ne fait qu'une chose : il est plus étroit que le menu, qui en contient beaucoup. */
#new-note { min-width: 58px; padding: 0 16px; }
.pill-btn.status { min-width: 0; align-items: flex-end; }
.pill-btn.status:has(#dot-store[hidden]):has(#dot-sync[hidden]):has(#dot-app-pill[hidden]) { align-items: center; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: #8a889c; flex: none; display: inline-block; }
/* Pastille avec un nombre : elle devient un petit badge (notes en attente de
   synchro, notes stockées), au même style que celui de la recherche. */
.dot:not(:empty) {
  width: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #0b0b10; font-style: normal;
}
.dot[data-state="live"] { background: #6ee7a8; }
.dot[data-state="wait"] { background: #fbbf24; }
.dot[data-state="error"] { background: #f87171; }
.dot[data-state="off"]:empty { background: transparent; border: 2px solid currentColor; opacity: .5; }
.dot.store { background: transparent; border: 2px solid currentColor; opacity: .5; }
.dot.store.is-local { border-style: dashed; border-width: 1.5px; opacity: .7; }
.dot.store.is-alert { background: var(--hot); border: 0; opacity: 1; color: #fff; }
.dot.store.is-warn { background: #fbbf24; border: 0; opacity: 1; }
.pill-icons .dot[hidden] { display: none; }
.sync-forget { margin-top: 10px; }
.link-btn { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.dot.neutral { background: transparent; border: 2px solid currentColor; opacity: .5; }
/* Apparence n'a pas d'état : la place de la pastille reste, pour aligner les titres. */
.dot.spacer { visibility: hidden; }

.side {
  position: fixed; right: max(4px, env(safe-area-inset-right)); bottom: var(--ctl-bottom); z-index: 6;
  width: 48px; display: flex; flex-direction: column; align-items: center;
}
.round {
  border: 0; cursor: pointer; background: var(--pill-bg); color: var(--pill-ink); display: grid; place-items: center;
}
#jump-up, #jump-down { width: 32px; height: 54px; }
/* Les deux flèches se touchent : une seule pilule, pincée en V sur les côtés. */
#jump-up { border-radius: 16px 16px 0 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px)); }
/* Au toucher, chaque flèche rétrécit vers la jonction, qui reste soudée. */
#jump-up { transform-origin: 50% 100%; }
#jump-down { transform-origin: 50% 0; }
#jump-down { border-radius: 0 0 16px 16px; clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%, 0 7px); }
.round.search { margin-top: 10px; width: 46px; height: 68px; border-radius: 23px; }

/* Barre de défilement façon Google Wave : à droite, le trait des notes (un
   segment arrondi par note, en accent pour les notes à l'écran, en magenta
   pour la note en cours d'édition) ; à côté, dans l'axe des flèches, le curseur,
   relié aux flèches par son propre fil qui le suit. */
.rail { position: relative; width: 48px; margin-bottom: 22px; cursor: pointer; touch-action: none; }
/* Glisser la poignée ne sélectionne pas le texte des étiquettes voisines. */
.side { user-select: none; -webkit-user-select: none; }
.tick {
  position: absolute; right: 2px; width: 3px; border-radius: 1.5px;
  background: var(--wire);
  /* Les segments à l'écran avancent vers le curseur, la note éditée plus encore. */
  --shift: 0px; transform: translateX(calc(var(--shift) * var(--toward, -1)));
  transition: background-color 150ms cubic-bezier(.2,0,0,1), transform 200ms cubic-bezier(.2,0,0,1);
}
.tick.in-view { background: var(--tick-view); --shift: 3px; }
.tick.focused { background: var(--hot); --shift: 6px; }
/* Changement de période (Hier, Lundi…) : un trait fin en travers des segments. */
.rail-period { position: absolute; right: 0; width: 14px; height: 1px; margin-top: -0.5px; background: var(--wire); pointer-events: none; }
.rail-thumb {
  position: absolute; left: calc(50% - 5px); width: 10px; border-radius: 5px; background: var(--wire);
}
.rail.dragging .rail-thumb { background: var(--accent); }
.rail-link { position: absolute; left: calc(50% - 1px); width: 2px; bottom: -22px; background: var(--wire); }

/* Panneau déplié depuis la pilule : état et réglages, en accordéon. Au repos,
   l'ombre est une box-shadow du panneau : un filtre sur ce calque plein écran
   laissait des traces sous Safari quand un tiroir se refermait. Pendant le
   morphing, le panneau est découpé (sa box-shadow avec) et c'est le calque
   qui porte l'ombre, en filtre, pour suivre la forme animée (voir morph). */
.island-layer { position: fixed; inset: 0; z-index: 7; pointer-events: none; }
.island {
  /* Entre le bord de l'écran et la colonne de défilement, sans la recouvrir. */
  position: fixed; left: 12px; right: 58px; margin: 0 auto; pointer-events: auto;
  bottom: calc(var(--ctl-bottom) + var(--pill-h) + 8px); width: min(380px, calc(100vw - 70px));
  max-height: calc(100dvh - var(--kb) - var(--ctl-bottom) - var(--pill-h) - 28px); overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none;
  background: var(--pill-bg); color: var(--pill-ink); border-radius: 24px; padding: 6px;
  box-shadow: 0 12px 22px rgb(0 0 0 / .28);
  scrollbar-width: none;
}
.island::-webkit-scrollbar { display: none; }
/* Contenu qui dépasse en haut ou en bas : un fondu de la couleur du panneau,
   collé au bord (sticky), qui ne prend pas de place dans le flux. */
.island::before, .island::after {
  content: ''; display: block; position: sticky; z-index: 3; left: 0; right: 0; height: 36px; margin: -6px -6px 0;
  pointer-events: none; opacity: 0; transition: opacity 150ms linear;
}
.island::before { top: -6px; margin-bottom: -30px; background: linear-gradient(var(--pill-bg), transparent); }
.island::after { bottom: -6px; margin-top: -30px; margin-bottom: -6px; background: linear-gradient(transparent, var(--pill-bg)); }
.island.more-up::before, .island.more-down::after { opacity: 1; }
/* Voile de la couleur de la pilule : il masque le contenu pendant que la
   pilule grandit ; seules les pastilles passent au-dessus. */
.island-veil { position: absolute; inset: 0; z-index: 1; background: var(--pill-bg); opacity: 0; pointer-events: none; }
.island .dot { position: relative; z-index: 2; }

/* La pilule devient le menu : elle grandit en montant juste au-dessus des
   commandes ; sa place reste vide (un appui dessus referme le menu) et le
   « + » ne bouge pas. */
body.island-open #status-pill { visibility: hidden; }

/* Libellés optionnels des deux pilules. */
/* Les icônes restent centrées dans la pilule ; le libellé se loge dessous. */
.pill-btn { position: relative; }
.pill-label { display: none; position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; line-height: 1; opacity: .85; }
body.pill-labels .pill-label { display: block; }
body.pill-labels .pill-icons svg { width: 18px; height: 18px; }

.island .group { border-radius: 18px; transition: background 200ms cubic-bezier(.2,0,0,1); }
.island .group { position: relative; }
.island .group + .group { margin-top: 2px; }
/* Filet entre les sections, sur toute la zone cliquable de l'en-tête (pas sous le bouton rond), pour
   que chaque section (pastille, titre, bouton) se lise comme un tout. Inutile
   autour d'une section ouverte : son fond la délimite déjà. */
.island .group + .group::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 56px; height: 1px;
  background: var(--sep);
}
body.side-left .island .group + .group::before { left: 56px; right: 0; }
.island .group.is-open::before, .island .group.is-open + .group::before { opacity: 0; }
/* Pareil autour d'un en-tête survolé : son fond le délimite. (Souris seulement :
   au doigt, le survol resterait collé après le toucher.) */
@media (hover: hover) {
  .island .group:has(> .group-head .head-btn:hover)::before,
  .island .group:has(> .group-head .head-btn:hover) + .group::before { opacity: 0; }
}
/* Groupe ouvert : un fond un peu plus marqué réunit le tiroir et son en-tête. */
.island .group.is-open { background: color-mix(in srgb, var(--pill-ink) var(--open-bg), transparent); }
.group-head { display: flex; align-items: center; gap: 8px; }
.head-btn {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; line-height: 1.3;
  border: 0; border-radius: 18px; background: none; color: inherit; font: inherit; text-align: left;
}
/* Pastille alignée sur la ligne du titre (1.3rem de haut), pas
   centrée sur tout l'en-tête : elle reste en face du titre quand le résumé
   s'allonge. */
.head-btn { align-items: flex-start; }
.head-btn > .dot { margin-top: calc((1.3rem - 11px) / 2); }
.head-btn > .dot:not(:empty) { margin-top: calc((1.3rem - 18px) / 2); }
.head-btn strong { line-height: 1.3rem; }
/* Application : la pastille n'apparaît que pour une mise à jour. */
.dot.app { background: var(--accent); color: var(--accent-ink); }
/* Place gardée dans le menu (alignement), rien dans la pilule. */
#dot-app:not(.is-update) { visibility: hidden; }
/* Colonne des pastilles à largeur fixe, qu'elles portent un nombre ou non. */
.head-btn > .dot:empty { margin-left: 3.5px; margin-right: 3.5px; }
/* Survol réservé aux souris et pavés : au doigt, l'état « survolé » reste collé
   au bouton après le toucher. Le clavier garde son contour :focus-visible. */
@media (hover: hover) { .head-btn:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-row), transparent); } }
.head-btn:focus-visible, .head-act:focus-visible, .tile:focus-visible, .code-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Action la plus courante du groupe, à portée même replié. */
.head-act {
  flex: none; width: 40px; height: 40px; margin-right: 8px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--pill-ink) 12%, transparent); color: inherit; cursor: pointer;
}
/* Bouton absent : sa place reste, pour aligner les en-têtes de tous les groupes. */
.group-head .head-act[hidden] { display: grid !important; visibility: hidden; }
@media (hover: hover) { .head-act:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-btn), transparent); } }
.sum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* Tiroir : la hauteur passe de 0 à son contenu (Material 3 : 300 ms en
   décélérant à l'ouverture, 200 ms en accélérant à la fermeture). */
.drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms cubic-bezier(.3,0,.8,.15); }
.group.is-open .drawer { grid-template-rows: 1fr; transition-duration: 300ms; transition-timing-function: cubic-bezier(.05,.7,.1,1); }
/* position: relative : les éléments en absolu des tiroirs fermés (boutons radio
   masqués des réglages) restent coupés, sans agrandir la zone de défilement du menu. */
.drawer-inner { position: relative; min-height: 0; overflow: hidden; }
.drawer .panel { opacity: 0; transition: opacity 150ms linear; }
.group.is-open .drawer .panel { opacity: 1; transition-delay: 50ms; }
.panel { padding: 12px 14px 4px; }
.callout { margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, #fbbf24 22%, transparent); font-size: 13.5px; line-height: 1.4; }
.callout p { margin: 0 0 8px; }
/* Boutons d'action en tuiles égales : icône au-dessus, libellé dessous. */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; margin: 10px 0; }
.tiles > [hidden] { display: none; }
.tile {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px 8px; border: 0; cursor: pointer;
  background: color-mix(in srgb, var(--pill-ink) 12%, transparent); color: inherit; font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.2;
}
.tile { border-radius: 6px; }
/* Arrondi extérieur sur le premier et le dernier bouton VISIBLES (certains
   sont masqués selon l'état : mise à jour, dossier, installation). */
.tile:not([hidden]):not(.tile:not([hidden]) ~ .tile) { border-top-left-radius: 14px; border-bottom-left-radius: 14px; }
.tile:not([hidden]):not(:has(~ .tile:not([hidden]))) { border-top-right-radius: 14px; border-bottom-right-radius: 14px; }
@media (hover: hover) { .tile:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-btn), transparent); } }
/* Champ du code et bouton copier, accolés. */
.code-field { display: flex; gap: 2px; margin: 10px 0; }
.island .code-field #sync-code { flex: 1; min-width: 0; border-radius: 12px 4px 4px 12px; }
.code-btn { flex: none; width: 44px; display: grid; place-items: center; border: 0; border-radius: 4px 12px 12px 4px; cursor: pointer;
  background: color-mix(in srgb, var(--pill-ink) 12%, transparent); color: inherit; }
@media (hover: hover) { .code-btn:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-btn), transparent); } }
/* Apparence : une ligne par réglage, contrôles de même largeur. */
.opt-grid { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 12px; }
.opt-name { font-size: 13px; opacity: .7; }
.panel .opt-grid .segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: auto; }
.opt-grid .segmented span { padding: 6px 4px; text-align: center; font-size: 13.5px; white-space: nowrap; }
.space-bar { display: block; height: 4px; margin-top: 6px; border-radius: 2px; background: color-mix(in srgb, currentColor 16%, transparent); overflow: hidden; }
.space-bar[hidden] { display: none; }
.space-bar span { display: block; height: 100%; border-radius: 2px; background: var(--accent);
  transform-origin: left; transform: scaleX(var(--fill, 0)); transition: transform 300ms cubic-bezier(.2,0,0,1); }
.space-bar.is-full span { background: var(--hot); }
.panel .row { margin: 8px 0; gap: 6px; }
.island-sub { font-size: 13px; opacity: .7; overflow-wrap: anywhere; }
.panel p.island-sub { margin: 0 0 4px; }
.island code { font-size: .92em; }
.island-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px 6px; }
/* Rien à y montrer (le total est sous « Stockage ») : pas d'espace vide en bas. */
.island-foot { display: none; }
.chip {
  border: 0; border-radius: 999px; padding: 7px 13px; cursor: pointer; font-size: 14px; font-weight: 600;
  background: color-mix(in srgb, var(--pill-ink) 14%, transparent); color: var(--pill-ink);
}
@media (hover: hover) { .chip:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-btn), transparent); } }
.chip.primary { background: var(--pill-ink); color: var(--pill-bg); }
.chip:disabled { opacity: .5; }
.island #sync-code {
  flex: 1; width: 100%; padding: 9px 12px; border-radius: 12px; border: 0;
  background: color-mix(in srgb, var(--pill-ink) 10%, transparent); color: var(--pill-ink);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.island #sync-code::placeholder { color: var(--pill-ink); opacity: .45; }
.island .qr-box { margin: 10px 0 4px; }
.island .qr-img svg { width: 100%; max-width: 240px; box-sizing: border-box; }
#qr-box[data-state="error"] figcaption { color: #fca5a5; opacity: 1; }
.segmented { display: inline-flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--pill-ink) 10%, transparent); }
.segmented label { cursor: pointer; }
/* Noir pur ne joue qu'en thème sombre : estompé (mais réglable) en clair. */
.oled-opt { transition: opacity 150ms cubic-bezier(.2,0,0,1); }
:root.is-light .oled-opt { opacity: .45; }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented span { display: block; padding: 6px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: .7; }
.segmented input:checked + span { background: var(--pill-ink); color: var(--pill-bg); opacity: 1; }
.segmented input:focus-visible + span { outline: 2px solid var(--accent); }

/* Recherche : la loupe se déploie en un champ noir, à la même hauteur, vers
   le centre. Il recouvre les pilules du bas le temps de la recherche. */
.search-layer {
  position: fixed; inset: 0; z-index: 9; pointer-events: none;
  filter: drop-shadow(0 10px 20px rgb(0 0 0 / .25));
}
.search-field {
  /* Au-dessus des pilules, entre le bord et la colonne latérale (comme le menu). */
  position: fixed; bottom: calc(var(--ctl-bottom) + var(--pill-h) + 8px); left: var(--note-x); width: var(--note-w); height: 68px;
  transition: left 400ms cubic-bezier(.05, .7, .1, 1), width 400ms cubic-bezier(.05, .7, .1, 1);
  display: flex; align-items: center; pointer-events: auto;
  background: var(--pill-bg); color: var(--pill-ink); border-radius: 23px; padding-left: 20px;
}
.search-veil { position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--pill-bg); opacity: 0; pointer-events: none; }
.search-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-field { column-gap: 10px; }
.search-count { display: flex; align-items: center; gap: 0; }
.search-badge.inline { position: static; transform: none; display: inline-block; margin-right: 4px; font-size: 10.5px; height: 16px; line-height: 16px; min-width: 18px; }
#search { width: 100%; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; font-size: 17px; padding: 0; }
#search::placeholder { color: inherit; opacity: .5; }
.search-count { font-size: 12px; color: color-mix(in srgb, var(--pill-ink) 65%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-count .search-badge { color: #fff; }
.search-line { display: flex; align-items: center; gap: 6px; }
.search-clear {
  flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: color-mix(in srgb, var(--pill-ink) 14%, transparent); color: inherit;
}
.search-icon { position: relative; z-index: 3; flex: none; width: 46px; height: 68px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; }
/* Survol de la loupe (fermer) : un disque discret derrière l'icône. */
.search-icon::before { content: ""; position: absolute; inset: 15px 4px; border-radius: 50%; background: transparent; z-index: -1; }
body.search-open #search-toggle { visibility: hidden; }
/* Filtre actif, champ refermé : la loupe affiche le nombre de notes trouvées. */
#search-toggle { position: relative; }
.search-badge {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  min-width: 20px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
body.search-active #search-toggle > svg { transform: translateY(-9px); }
mark.hit { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

.btn {
  padding: 9px 14px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--card); cursor: pointer; white-space: nowrap;
}
@media (hover: hover) { .btn:hover { border-color: var(--muted); } }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.icon-btn { background: none; border: 0; padding: 10px; border-radius: 8px; cursor: pointer; color: var(--muted); display: grid; place-items: center; }
@media (hover: hover) { .icon-btn:hover { background: var(--accent-soft); color: var(--text); } }
.link { background: none; border: 0; padding: 2px 4px; cursor: pointer; color: var(--muted); font-size: 13px; }
@media (hover: hover) { .link:hover { color: var(--accent); } }
.link.danger.armed { color: var(--danger); }
@media (hover: hover) { .link.danger:hover { color: var(--danger); } }
.link.danger.armed { font-weight: 600; }
.note:has(.armed) .note-actions { opacity: 1; }

.pill {
  font-size: 13px; padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--card); color: var(--muted);
}
.pill::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: var(--muted); vertical-align: 1px; }
.pill[data-state="wait"]::before { background: #d9a227; }
.pill[data-state="live"] { color: var(--accent); border-color: var(--accent); }
.pill[data-state="live"]::before { background: var(--accent); }

.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent);
}

.note {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
textarea {
  width: 100%; border: 0; outline: 0; resize: none; background: transparent;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14.5px; line-height: 1.6;
}
.composer-foot, .note-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.composer-foot { margin-top: 4px; }
.hint, .note-foot time { font-size: 12.5px; color: var(--muted); }

#feed { display: flex; flex-direction: column; gap: 12px; }
/* Intercalaire de période (Aujourd'hui, Hier, Lundi, La semaine dernière…) :
   un écart plus grand avant la première note de la période, avec son nom au
   milieu. Posé dans la marge de la note, pour que le fil ne compte que des
   notes (saut d'une note à l'autre, barre de défilement). C'est une pilule
   cliquable, de la couleur des pilules du bas : elle ramène au début de la
   période (l'intercalaire en haut de la vue). */
.note.period-start { position: relative; margin-top: 52px; }
.period-label, .period-float {
  white-space: nowrap; padding: 4px 12px; border: 0; border-radius: 999px; font-family: inherit;
  font-size: 15px; font-weight: 650; line-height: 20px; letter-spacing: .01em; cursor: pointer;
  background: var(--pill-bg); color: var(--pill-ink); box-shadow: 0 2px 10px rgb(0 0 0 / .18);
  transition: background-color 150ms cubic-bezier(.2,0,0,1), transform 100ms cubic-bezier(.2,0,0,1);
}
.period-label { position: absolute; left: 50%; bottom: 100%; margin-bottom: 10px; translate: -50% 0; }
.period-label:active, .period-float:active { transform: scale(.96); }
.period-label:focus-visible, .period-float:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .period-label:hover, .period-float.is-on:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-pill), var(--pill-bg)); } }
/* La période en cours reste en haut de l'écran tant qu'on est dedans ;
   l'intercalaire suivant la pousse en arrivant (comme un en-tête collant). */
.period-float {
  position: fixed; z-index: 5; top: calc(env(safe-area-inset-top) + 10px); left: calc(var(--note-x) + var(--note-w) / 2);
  translate: -50% 0; visibility: hidden;
}
.period-float.is-on { visibility: visible; }
.note.period-pinned > .period-label { visibility: hidden; }
.note { padding: 14px 16px 8px; }
.note.editing { border-color: var(--accent); }
.note .md { cursor: text; overflow-wrap: anywhere; }
.note-foot { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 6px; }
.note-actions { opacity: .0; transition: opacity .15s; }
.note:hover .note-actions, .note:focus-within .note-actions { opacity: 1; }
@media (hover: none) { .note-actions { opacity: 1; } }

.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3 { line-height: 1.25; margin: 1em 0 .4em; }
.md h1 { font-size: 1.4em; } .md h2 { font-size: 1.2em; } .md h3 { font-size: 1.05em; }
.md p, .md ul, .md ol, .md pre, .md blockquote, .md table { margin: .5em 0; }
.md ul, .md ol { padding-left: 1.4em; }
.md a { color: var(--accent); }
.md code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--code-bg); padding: .1em .35em; border-radius: 4px; }
.md pre { background: var(--code-bg); padding: 10px 12px; border-radius: 8px; overflow-x: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { border-left: 3px solid var(--accent); margin-left: 0; padding-left: 12px; color: var(--muted); }
.md img { max-width: 100%; }
.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.md th, .md td { border: 1px solid var(--border); padding: 4px 8px; }
.md hr { border: 0; border-top: 1px solid var(--border); }
.md li:has(> input[type="checkbox"]) { list-style: none; margin-left: -1.3em; }

.empty { text-align: center; padding: 32px 0; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }

dialog {
  width: min(560px, 100vw); max-width: 100vw; max-height: 85dvh;
  margin: auto auto 0; border: 1px solid var(--border); border-bottom: 0; border-radius: 18px 18px 0 0; padding: 0;
  background: var(--card); color: var(--text);
  display: none; flex-direction: column;
}
dialog[open] { display: flex; }
dialog > section, dialog > .dlg-head { flex: none; }
dialog { overflow-y: auto; }
.dlg-foot { position: sticky; bottom: 0; background: var(--card); padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); margin-top: auto; }
.btn.wide { width: 100%; padding: 11px; font-weight: 600; }
dialog::backdrop { background: rgb(0 0 0 / .35); }
.dlg-head { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px 0; }
.dlg-head h2 { margin: 0; font-size: 18px; }
dialog section { padding: 4px 18px 14px; border-bottom: 1px solid var(--border); }
dialog section:last-child { border-bottom: 0; }
dialog h3 { font-size: 15px; margin: 12px 0 4px; }
dialog p { margin: 6px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
#sync-code {
  flex: 1; min-width: 180px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); font-family: ui-monospace, Menlo, Consolas, monospace;
}

.toast {
  position: fixed; left: 50%; bottom: calc(150px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 10;
  background: var(--text); color: var(--bg); padding: 9px 16px; border-radius: 10px; font-size: 14px;
  max-width: calc(100vw - 32px); box-shadow: 0 4px 16px rgb(0 0 0 / .2);
}

}

.qr-box { margin: 4px 0 10px; text-align: center; }
.qr-img svg { width: min(300px, 80vw); height: auto; background: #fff; border-radius: 10px; padding: 8px; }

/* Éditeur (CodeMirror) avec rendu Markdown en direct */
.editor .cm-editor { background: transparent; font-size: 16px; line-height: 1.55; }
.editor .cm-editor.cm-focused { outline: none; }
.editor .cm-scroller { font-family: inherit; overflow: visible; }
.editor .cm-content { padding: 0; caret-color: var(--text); }
.editor .cm-line { padding: 0; }
.editor .cm-cursor { border-left-color: var(--text); }
.editor .cm-selectionBackground, .editor .cm-focused .cm-selectionBackground { background: var(--accent-soft) !important; }
.editor .cm-placeholder { color: var(--muted); }
.cm-md-mark { color: var(--muted); }
.cm-md-link { color: var(--accent); text-decoration: underline; }
.cm-md-code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--code-bg); border-radius: 4px; padding: .1em .2em; }
.cm-md-codeblock { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; background: var(--code-bg); }
.cm-md-codeblock .cm-md-code { background: none; padding: 0; }
.cm-md-quoteline { border-left: 3px solid var(--accent); padding-left: 12px !important; color: var(--muted); }
.cm-md-bullet { color: var(--muted); display: inline-block; width: .8em; }
.cm-md-check { margin: 0 .2em 0 0; vertical-align: -2px; cursor: pointer; accent-color: var(--accent); }
#qr-box[data-state="error"] figcaption { color: var(--danger); }
#qr-box[data-state="busy"] figcaption::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; border: 2px solid var(--accent); border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.qr-box { scroll-margin-bottom: 90px; }

/* Scanner de QR code */
.scanner-view { position: relative; background: #000; aspect-ratio: 1; max-height: 60dvh; overflow: hidden; }
.scanner-view video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scanner-frame { position: absolute; inset: 15%; border: 3px solid rgb(255 255 255 / .85); border-radius: 16px; box-shadow: 0 0 0 999px rgb(0 0 0 / .25); }
.scanner-status { margin: 12px 18px 0; text-align: center; }
#scanner[data-state="error"] .scanner-status { color: var(--danger); }
#scanner[data-state="error"] .scanner-view { display: none; }
#scanner .dlg-foot { margin: 0; }
#scanner .dlg-foot .btn { flex: 1; }

/* Note vierge en fin de fil */
.note.blank { border-style: dashed; box-shadow: none; background: transparent; }
.note.blank:focus-within { border-style: solid; background: var(--card); border-color: var(--accent); }
.note.blank .cm-content { min-height: 3.1em; }
.radio { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.radio:has(input:checked) { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.radio input { accent-color: var(--accent); }

/* Présentation épurée : pas de cartes, un simple filet entre les notes */
body.plain #feed { gap: 0; }
body.plain .note { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 18px 4px 10px; border-top: 1px solid var(--border); }
body.plain .note:first-child { border-top: 0; }
/* Épuré : l'intercalaire remplace le filet entre deux notes. */
body.plain .note.period-start { border-top: 0; margin-top: 40px; }
body.plain .note.period-start > .period-label { margin-bottom: -4px; }
body.plain .note-foot { border-top: 0; }
body.plain .note.blank { border-top: 1px dashed var(--border); }
body.plain .note.editing:not(.blank) { background: var(--card); border-radius: 12px; }

#search::-webkit-search-cancel-button { display: none; }
.segmented + .segmented { margin-top: 8px; }
.panel .segmented { display: flex; width: fit-content; }

/* Colonne de défilement à gauche : tout est en miroir (trait à gauche du
   curseur, tirets vers la droite). */
body.side-left .side { right: auto; left: max(4px, env(safe-area-inset-left)); }
body.side-left .tick { right: auto; left: 2px; --toward: 1; }
body.side-left .rail-period { right: auto; left: 0; }
/* Noms des périodes le long de la barre : au survol (souris) ou pendant le
   glisser (doigt). La période en cours prend la couleur des pilules. */
/* Ombre portée sur l'ensemble (une box-shadow ne suivrait pas la pointe). */
#rail-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .25)); transition: opacity 150ms cubic-bezier(.3,0,.8,.15); }
.rail.dragging #rail-labels, .rail.labels-on #rail-labels { opacity: 1; transition: opacity 150ms cubic-bezier(.2,0,0,1); }
@media (hover: hover) { .rail:hover #rail-labels { opacity: 1; transition: opacity 150ms cubic-bezier(.2,0,0,1); } }
.rail-label {
  position: absolute; right: calc(100% + 6px); translate: 0 -50%; display: none; white-space: nowrap;
  padding: 3px 5px 3px 9px; border-radius: 999px 0 0 999px; font-size: 12.5px; font-weight: 650; line-height: 16px;
  background: var(--pill-bg); color: var(--pill-ink);
}
/* Côté barre : une pointe vers son tiret plutôt qu'un arrondi. */
.rail-label::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 100%; width: 10px;
  background: inherit; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.rail-label.is-shown { display: block; }
/* Période en cours : fond magenta. */
.rail-label.is-current { background: var(--hot); color: var(--hot-ink); }
/* Son tiret aussi, tant que les noms sont visibles. */
.rail.dragging .rail-period.is-current, .rail.labels-on .rail-period.is-current { background: var(--hot); }
@media (hover: hover) { .rail:hover .rail-period.is-current { background: var(--hot); } }
body.side-left .rail-label { right: auto; left: calc(100% + 6px); padding: 3px 9px 3px 5px; border-radius: 0 999px 999px 0; }
body.side-left .rail-label::after { left: auto; right: 100%; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
body.side-left .search-field { flex-direction: row-reverse; padding: 0 20px 0 0; }
body.side-left .island { left: 58px; right: 12px; }
/* Les boutons ronds du menu passent du côté de la barre, sous le même pouce. */
body.side-left .group-head { flex-direction: row-reverse; }
body.side-left .head-act { margin-right: 0; margin-left: 8px; }
.island-sub[data-extra]:not([data-extra=""])::after { content: " · " attr(data-extra); }
/* Stockage et synchro : l'état puis, à la ligne, le nombre de notes. */
#island-store[data-extra]:not([data-extra=""])::after, #island-sync[data-extra]:not([data-extra=""])::after { content: attr(data-extra); display: block; }
#theme-quick .ico { display: none; }
#theme-quick[data-theme-now="auto"] .t-auto, #theme-quick[data-theme-now="light"] .t-light, #theme-quick[data-theme-now="dark"] .t-dark { display: block; }
/* Le total est déjà donné sous « Stockage ». */
#count { display: none; }

/* Entrées et sorties d'écran (Material 3) : les éléments de côté arrivent par
   le bord en décélérant (emphasized decelerate, 400 ms) et repartent en
   accélérant (emphasized accelerate, 200 ms). */
.side-nav { display: flex; flex-direction: column; align-items: center; }
.side-nav, #search-toggle {
  transition: transform 400ms cubic-bezier(.05, .7, .1, 1), visibility 0s;
}
.side-nav.is-out, #search-toggle.is-out {
  transform: translateX(calc(100% + 24px)); visibility: hidden;
  transition: transform 200ms cubic-bezier(.3, 0, .8, .15), visibility 0s 200ms;
}
body.side-left .side-nav.is-out, body.side-left #search-toggle.is-out { transform: translateX(calc(-100% - 24px)); }
/* Pas d'animation au chargement de la page. */
html.no-anim .side-nav, html.no-anim #search-toggle { transition: none; }
#search-toggle:active { transition: none; }

/* Colonne de côté vide (aucune note) : le centre reprend toute la largeur,
   au même rythme que les éléments qui entrent ou sortent par le bord. */
.feed-wrap { transition: width 400ms cubic-bezier(.05, .7, .1, 1), margin-left 400ms cubic-bezier(.05, .7, .1, 1); }
.pills { transition: left 400ms cubic-bezier(.05, .7, .1, 1), translate var(--kb-motion); }
body.side-empty .island, body.side-empty.side-left .island { left: 12px; right: 12px; width: min(380px, calc(100vw - 24px)); }
html.no-anim .feed-wrap, html.no-anim .pills, html.no-anim .search-field { transition: none; }
/* Champ ouvert : le fil remonte pour que la dernière note reste visible au-dessus. */
body.search-open .feed-wrap { padding-bottom: calc(84px + 76px + env(safe-area-inset-bottom)); }

/* Options de recherche : sur la ligne du compte, bascules compactes allumées en blanc. */
.search-meta { display: flex; align-items: center; gap: 5px; }
.search-meta .search-count { flex: 1; min-width: 0; }
.search-opt {
  flex: none; min-width: 28px; height: 20px; padding: 0 5px; border: 0; border-radius: 6px; cursor: pointer;
  /* Éteint : un vrai petit bouton (fond léger et contour), allumé : plein blanc. */
  background: color-mix(in srgb, var(--pill-ink) 12%, transparent); color: color-mix(in srgb, var(--pill-ink) 80%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pill-ink) 28%, transparent);
  font-size: 11.5px; font-weight: 700; line-height: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (hover: hover) { .search-opt:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-btn), transparent); } }
.search-opt[aria-pressed="true"] { background: var(--pill-ink); color: var(--pill-bg); box-shadow: none; }
.search-field { column-gap: 8px; }

/* Clavier virtuel : l'interface du bas monte avec lui par une simple
   translation (composée sur le GPU, sans recalcul de mise en page), au rythme
   Material 3 : décélération à l'ouverture, accélération à la fermeture. Le fil,
   lui, est raccourci une seule fois de la hauteur du clavier. */
:root { --kb: 0px; --kb-motion: 200ms cubic-bezier(.3, 0, .8, .15); }
html.kb-open { --kb-motion: 300ms cubic-bezier(.05, .7, .1, 1); }
body { padding-bottom: var(--kb); }
.pills, .side, .island-layer, .search-layer, .toast { translate: 0 calc(-1 * var(--kb)); }
.side, .island-layer, .search-layer, .toast { transition: translate var(--kb-motion); }

/* Fil entre les flèches et la loupe, comme celui du curseur. Quand la loupe
   disparaît (plus de notes), il se rétracte vers les flèches en accélérant,
   puis repousse en décélérant quand elle revient. */
.side-nav { position: relative; }
.side-nav::after {
  content: ""; position: absolute; left: calc(50% - 1px); top: 100%; width: 2px; height: 10px;
  background: var(--wire); transform-origin: top;
  transition: transform 200ms cubic-bezier(.05, .7, .1, 1);
}
.side:has(#search-toggle.is-out) .side-nav::after {
  transform: scaleY(0); transition: transform 150ms cubic-bezier(.3, 0, .8, .15);
}
/* Champ ouvert : le coude (ci-dessous) part exactement de ce trait, qui
   s'efface d'un coup pendant que le coude prend le relais, et revient d'un
   coup à la fermeture, quand le coude est redevenu ce même trait. */
body.search-open .side-nav::after { transform: scaleY(0); transition: none; }
body.link-instant .side-nav::after, html.no-anim .side-nav::after { transition: none; }

/* Champ de recherche ouvert : un coude arrondi relie la flèche du bas au bord
   du champ (géométrie et animation calculées dans app.js). */
.search-elbow {
  position: fixed; z-index: 6; pointer-events: none; display: none;
  border: 0 solid var(--wire); border-right-width: 2px; border-bottom-width: 2px; border-bottom-right-radius: 8px;
  translate: 0 calc(-1 * var(--kb)); transition: translate var(--kb-motion);
}
body.side-left .search-elbow { border-right-width: 0; border-left-width: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 8px; }

/* Reprise du champ de recherche pendant son ouverture : la translation du
   clavier s'applique d'un coup, l'animation en cours la compense. */
html.kb-instant .search-layer, html.kb-instant .search-elbow { transition: none; }

/* Chemin du sous-dossier d'une note, à côté de sa date. */
.note-folder { margin: 0 auto 0 6px; font-size: 12.5px; color: var(--muted); }
.note-folder::before { content: "· "; }

/* Retour de survol des commandes flottantes et des réglages (souris seulement,
   cf. plus haut) : les surfaces pleines s'éclaircissent d'un ton vers l'encre. */
@media (hover: hover) {
  .pill-btn:hover, .round:hover { background: color-mix(in srgb, var(--pill-ink) var(--hov-pill), var(--pill-bg)); }
  .search-clear:hover { background: color-mix(in srgb, var(--pill-ink) 26%, transparent); }
  .search-icon:hover::before { background: color-mix(in srgb, var(--pill-ink) 14%, transparent); }
  .segmented label:hover input:not(:checked) + span { opacity: 1; background: color-mix(in srgb, var(--pill-ink) 10%, transparent); }
  .link-btn:hover { text-decoration-thickness: 2px; }
  .rail:hover .rail-thumb { background: color-mix(in srgb, var(--wire) 50%, var(--accent)); }
}