/* 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;
  /* un relais qui attend un geste : orange, ni rouge (rien n'est en panne) ni bleu */
  --avert: #C2650F;
  /* le fond rouge du glisser-pour-supprimer, sous une poubelle blanche */
  --suppr-fond: #D64B3C;
  /* ce qui est JUSTE (deux saisies identiques, une clé assez longue) : un vert qui se lit
     sur la carte (5 : 1), jamais seul — un mot et un ✓ l'accompagnent toujours */
  --ok: #2B7A4B;
  /* le bouton « Continuer avec Google », aux couleurs de sa charte */
  --google-fond: #FFFFFF;
  --google-trait: #747775;
  --google-texte: #1F1F1F;
  --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;
    --avert: #F0A04B;
    --suppr-fond: #C2453A;
    --ok: #6CC893;
    --google-fond: #131314;
    --google-trait: #8E918F;
    --google-texte: #E3E3E3;
  }
}

: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;
  --avert: #F0A04B;
  --suppr-fond: #C2453A;
  --ok: #6CC893;
  --google-fond: #131314;
  --google-trait: #8E918F;
  --google-texte: #E3E3E3;
}

/* `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%;
  /* Le surlignage de toucher du navigateur est peint PAR-DESSUS tout, à la
     place qu'avait l'élément touché : la pastille « Acme » du panneau, touchée
     pour ouvrir sa fiche, laissait un rectangle bleu clair vide au milieu de la
     feuille modale, au-dessus de Voisinage / Fusionner / Ignorer. Chaque bouton
     a déjà son propre :active ; ce voile-là n'apporte rien. */
  -webkit-tap-highlight-color: transparent;
  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; }

/* LA MARQUE « inspire. » : l'infini, une image, et le NOM, un MASQUE (marque-nom.png,
   l'alpha seul des lettres dessinées) peint de la couleur du texte du thème. Les
   dessins ont le mot en gris foncé sur transparent : posé tel quel, il disparaissait
   sur le fond sombre ; repeint en texte HTML, il perdait les lettres de l'auteur.
   Les proportions sont celles des dessins, tout se règle par `--h-infini` : dans le
   BANDEAU, le nom fait 0,62 de la hauteur de l'infini et s'en écarte de 0,31 ; dans la
   version CONDENSÉE (`.marque-pile`), il fait 0,5 de sa hauteur, 0,08 sous lui. */
.marque { --h-infini: 36px; display: inline-flex; align-items: center; gap: calc(var(--h-infini) * 0.31);
  margin: 0; line-height: 1; flex: none; }
.marque-infini { display: block; height: var(--h-infini); width: auto; flex: none; }
.marque-nom { display: block; flex: none; height: calc(var(--h-infini) * 0.62); aspect-ratio: 468 / 128;
  background-color: var(--texte);
  -webkit-mask: url(/marque-nom.png) center / contain no-repeat; mask: url(/marque-nom.png) center / contain no-repeat;
  /* le mot reste dans la page (lecteurs d'écran, Ctrl+F), poussé hors du cadre */
  overflow: hidden; white-space: nowrap; text-indent: 100%; color: transparent; }
.marque-pile { flex-direction: column; gap: calc(var(--h-infini) * 0.077); }
.marque-pile .marque-nom { height: calc(var(--h-infini) * 0.504); }
/* le contraste élevé de Windows remplace les couleurs : le nom prend celle du texte */
@media (forced-colors: active) { .marque-nom { background-color: CanvasText; forced-color-adjust: none; } }
/* l'écran d'ouverture : la version condensée, grande, au centre de la colonne */
.marque-ouverture { --h-infini: 84px; display: flex; width: max-content; margin: 0 auto 22px; }
#ecran-ouverture .version { text-align: center; }
/* la tête de la liste (tablette, téléphone) : la version condensée, à la hauteur du champ */
.marque-barre { --h-infini: 26px; margin: -2px 2px -2px 0; }

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;
}

/* « Continuer » du code de secours : le geste principal de son écran, hors formulaire */
form > button[type="submit"], #bouton-compris, #secours-confirmer {
  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 */
/* le statut de synchro se TOUCHE : on le touche pour forcer une synchro (ou rouvrir
   la session si elle a expiré) — il remplace le bouton du pied. Sans soulignement :
   « à jour » souligné en tête de liste se lisait comme un lien vers une autre page,
   et chargeait l'œil à chaque regard. L'indice reste au curseur et au survol. */
#etat-sync { cursor: pointer; text-decoration: none; }
@media (hover: hover) { #etat-sync:hover { color: var(--texte); } }
.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; }
/* La croix est DANS le champ, à droite ; le texte s'arrête avant elle. Celle de
   Safari et de Chrome est retirée : deux croix l'une sur l'autre. */
.champ-recherche { position: relative; flex: 1; min-width: 0; display: flex; }
.champ-recherche input[type="search"] { padding-right: 38px; min-width: 0; }
#recherche::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.effacer-recherche { position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; margin-top: -14px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--discret); background: var(--fond-barre); }
.effacer-recherche .ic { width: 14px; height: 14px; flex: none; stroke-width: 2.4; }
/* au doigt, une cible plus grande que la croix qu'on voit */
.effacer-recherche::after { content: ""; position: absolute; inset: -8px; }
.effacer-recherche:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.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 prend un peu moins de la moitié du rond, le rapport des icônes du
   système : à 30 px dans 56, le micro et le + écrasaient le rond qui les porte. */
.fab .ic { width: 22px; height: 22px; min-width: 22px; flex: none; stroke-width: 2.2; }

.onglets {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--trait);
}
/* « Carnets » (`.onglet-action`, un écran à part) a l'allure exacte des onglets */
.onglet, .onglet-action {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--discret);
  border: 1px solid transparent;
}
.onglet.actif { background: var(--fond-carte); color: var(--texte); border: 1px solid var(--trait); }
/* Notes, Corbeille, Carnets sur UNE ligne, quelle que soit la colonne : sans
   `nowrap`, « Carnets » passait seul à la ligne dans la liste de l'iPad en portrait
   (~232 px). Dans une colonne étroite (requête de conteneur sur la liste), les
   pastilles se resserrent ; leur cible au doigt reste de 44 px par un débord
   invisible au-dessus et au-dessous, sans grandir la barre. */
.onglet, .onglet-action { white-space: nowrap; flex: none; position: relative; }
html:not([data-bureau]) .onglet::after, html:not([data-bureau]) .onglet-action::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
html[data-espace] #ecran-liste { container-type: inline-size; container-name: liste; }
@container liste (max-width: 300px) {
  #ecran-liste .onglets { gap: 2px; padding-left: 8px; padding-right: 8px; }
  #ecran-liste .onglet, #ecran-liste .onglet-action { padding: 6px 7px; font-size: 0.8rem; }
}
/* 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; }
/* L'AVERTISSEMENT DES RELAIS : sur un ordinateur, la phrase entière après « à jour » ;
   ailleurs, l'icône seule (orange, plate), qui dit le détail à qui la touche. */
.avis-sync { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px;
  padding: 0; border-radius: 50%; color: var(--avert); }
.avis-sync .ic { width: 18px; height: 18px; flex: none; }
.avis-sync:focus-visible { outline: 2px solid var(--accent); }
html[data-bureau] .avis-sync { display: none; }
html:not([data-bureau]) .etat-sync .etat-detail { display: none; }

.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 --- */

/* L'ÉCHELLE DE LA LISTE : titre, résumé, méta. Le corps de 16 px de la page faisait
   des encarts de note où deux lignes de résumé tenaient à peine dans une colonne
   de tablette ; un cran plus bas, on lit autant de notes que sur le Mac, et rien
   ne descend sous 11 px. À côté de l'éditeur (la colonne), un demi-cran encore. */
:root { --t-titre: 15px; --t-resume: 13px; --t-meta: 11.5px; }
html[data-espace] { --t-titre: 14px; --t-resume: 12.5px; --t-meta: 11px; }

/* La marge basse laisse la dernière note AU-DESSUS des boutons flottants (`--pile`) ;
   à côté de l'éditeur, ils ne sont plus sur la liste. */
.liste { flex: 1; overflow-y: auto; list-style: none; margin: 0;
  padding: 8px 12px var(--pile); }
html[data-espace] .liste { padding-bottom: 16px; }
.liste li {
  padding: 10px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--fond-carte);
}
.liste li:active { border-color: var(--accent); }
.titre-note { font-size: var(--t-titre); line-height: 1.35; font-weight: 600; display: flex; gap: var(--ecart-titre, 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; }
/* Les icônes que la page AJOUTE à la liste (étoile, confidentielle, verrou, pièce
   jointe) : les tracés plats de la planche, teintés par le texte — plus d'émoji,
   colorés et dessinés autrement d'un appareil à l'autre. */
/* L'ÉTOILE D'ÉPINGLAGE, à gauche du titre. Sa place (16 px) est RÉSERVÉE sur chaque
   encart, étoile montrée ou non : un titre qui glisse de 22 px dès que la souris
   passe dessus faisait trembler la liste qu'on parcourt. L'étoile vide reste
   focalisable au clavier (`opacity`, pas `visibility`) ; au doigt, sans survol pour
   la révéler, elle n'existe que sur la note ouverte, sans quoi un toucher invisible
   épinglerait. La zone de toucher déborde de 8 px (32 px) sur la marge de l'encart. */
.titre-note .etoile-note { position: relative; flex: none; align-self: center; display: inline-flex;
  align-items: center; justify-content: center; width: var(--larg-etoile, 16px); height: 16px; padding: 0; margin: 0;
  color: var(--discret); opacity: 0; transition: opacity .12s; }
.titre-note .etoile-note::after { content: ""; position: absolute; inset: -8px; }
.titre-note .etoile-note .ic { width: 15px; height: 15px; stroke-width: 1.8; }
.titre-note .etoile-note.pleine { color: var(--accent); opacity: 1; }
.titre-note .etoile-note.pleine .ic { fill: currentColor; }
.titre-note .etoile-note:focus-visible { opacity: 1; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
@media (hover: hover) {
  .liste li:hover .etoile-note:not([disabled]) { opacity: 1; }
  .titre-note .etoile-note:not(.pleine):hover { color: var(--accent); }
}
@media (hover: none) {
  .titre-note .etoile-note:not(.pleine) { visibility: hidden; }
  .liste li.choisie .etoile-note:not(.pleine):not([disabled]) { visibility: visible; opacity: .45; }
}
.titre-note .confidentielle { align-self: center; display: inline-flex; flex: none; color: var(--discret);
  width: var(--larg-cadenas, 13px); }
.titre-note .confidentielle .ic { width: 13px; height: 13px; }
/* LE RÉSUMÉ ET LA LIGNE DES DATES ET TAGS commencent où commence le TEXTE du titre,
   pas au bord de l'encart : la place de l'étoile (et du cadenas d'une note
   confidentielle) décalait le titre seul, et l'œil qui descend l'encart butait sur
   deux marges. Les mêmes variables que l'étoile et le cadenas, pour que les deux
   retraits ne puissent pas diverger. Dans la corbeille, sans étoile, rien ne se
   décale : titre et résumé partent du bord. */
.liste { --larg-etoile: 16px; --larg-cadenas: 13px; --ecart-titre: 6px; }
.liste li.avec-etoile > .apercu, .liste li.avec-etoile > .meta {
  margin-left: calc(var(--larg-etoile) + var(--ecart-titre)); }
.liste li.avec-cadenas > .apercu, .liste li.avec-cadenas > .meta {
  margin-left: calc(var(--larg-cadenas) + var(--ecart-titre)); }
.liste li.avec-etoile.avec-cadenas > .apercu, .liste li.avec-etoile.avec-cadenas > .meta {
  margin-left: calc(var(--larg-etoile) + var(--larg-cadenas) + 2 * var(--ecart-titre)); }
.liste .ic-media { width: 1.05em; height: 1.05em; vertical-align: -0.17em; margin-right: 0.2em; stroke-width: 1.8; }
.meta .pastille-note .ic { width: 11px; height: 11px; vertical-align: -1px; margin-right: 3px; }
.liste-versions .ic, .tk-ech .ic, .md-media .ic, .lien-carte .ic, #versions-apercu .ic, .apercu-md .vide .ic {
  width: 1em; height: 1em; vertical-align: -0.14em; margin-right: 0.25em; }
.apercu { color: var(--discret); font-size: var(--t-resume); margin-top: 2px;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta { color: var(--discret); font-size: var(--t-meta); margin-top: 5px; display: flex; flex-wrap: wrap;
        align-items: center; gap: 4px 6px; }
.meta .tag { padding: 3px 7px; 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 DE L'ÉCRAN : nouvelle note, note vocale.
   Fixés à la fenêtre, à l'écart des bords arrondis et de la barre d'accueil
   (`safe-area`). Montrés avec la liste (le téléphone), ou dès qu'elle partage
   l'écran : liste repliée, ils restent là où on les attend. 48 px : au-dessus
   des 44 px qu'un doigt demande, sans plus. */
.fab-groupe {
  display: none;
  position: fixed;
  right: calc(14px + env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  flex-direction: column;
  gap: 10px;
  z-index: 20;
}
#ecran-liste.visible ~ .fab-groupe, html[data-espace] .fab-groupe { display: flex; }
/* le clavier à l'écran est monté (`majClavier`) : rien ne flotte entre les touches */
html[data-clavier] .fab-groupe, html[data-voile] .fab-groupe { display: none !important; }
/* L'ÉCRITURE COMPACTE (`majClavier`) : le clavier de la tablette monté sur le texte de
   la note. La page tient dans la hauteur VISIBLE (`--vv-h`) ; le classement, les
   onglets, les bandeaux, l'aide-mémoire et les actions se replient ; une barre fine
   garde Écrire / Aperçu et « Terminer ». */
.seul-compact { display: none; }
html[data-ecriture-compacte], html[data-ecriture-compacte] body { height: var(--vv-h, 100%); overflow: hidden; }
html[data-ecriture-compacte] #ecran-editeur .ligne-meta, html[data-ecriture-compacte] #onglets-notes,
html[data-ecriture-compacte] #memo, html[data-ecriture-compacte] #ecran-editeur .bandeau-info,
html[data-ecriture-compacte] #bandeau-vocal, html[data-ecriture-compacte] #ecran-editeur .grp-actions,
html[data-ecriture-compacte] #bouton-retour, html[data-ecriture-compacte] #ecran-editeur .encoche,
html[data-ecriture-compacte] #barre-corbeille { display: none !important; }
html[data-ecriture-compacte] #ecran-editeur > .barre-action { min-height: 0; height: auto; padding-top: 4px; padding-bottom: 4px;
  flex-wrap: nowrap; }
html[data-ecriture-compacte] #ecran-editeur > .barre-action .seg button { padding-top: 4px; padding-bottom: 4px; }
html[data-ecriture-compacte][data-espace] #ecran-editeur > .barre-action { height: 46px; }
html[data-ecriture-compacte] #bouton-terminer { display: inline-flex; align-items: center; order: 9; margin-left: auto;
  min-height: 36px; padding: 0 12px; }
/* Le thème et le compte, sur une tablette ou un téléphone : au-dessus du micro et du
   +, alignés sur leur axe, plus petits (44 px, la cible du doigt) et GRIS — ils
   servent moins, ils se voient moins. */
.pile-secondaire { display: none; flex-direction: column; align-items: center; gap: 10px; }
.pile-secondaire:not(:empty) { display: flex; }
.pile-secondaire .rond { width: 44px; height: 44px; margin: 0 2px; background: var(--fond-barre); color: var(--discret);
  border: 1px solid var(--trait); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); }
.fab {
  width: 48px;
  height: 48px;
  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; }
/* L'ICÔNE D'UN ENCADRÉ (et d'un lien de carte mentale) : un tracé plat du module
   commun, teint à la couleur du bord de l'encadré — plus d'émoji, dessiné autrement
   d'un appareil à l'autre. Le type se dit en mots aux seuls lecteurs d'écran
   (`.md-lecteur`). Hors de `.apercu-md` : l'impression et l'export PDF les gardent. */
.md-callout-icone { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.17em; margin-right: 0.35em; color: var(--discret); }
.md-callout-icone--note, .md-callout-icone--info { color: #0092CF; }
.md-callout-icone--astuce, .md-callout-icone--succes { color: #74C82D; }
.md-callout-icone--attention, .md-callout-icone--important { color: #FAA80C; }
.md-callout-icone--danger { color: #D9201F; }
.md-callout-icone--question { color: #A2086F; }
.md-callout-icone--carte { color: inherit; margin-right: 0.25em; }
.md-lecteur { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.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, .apercu-md img.media-image.retouchable { cursor: pointer; }
.apercu-md img.media-image.dessin:active, .apercu-md img.media-image.retouchable:active,
.apercu-md img.media-image.retouchable:focus-visible { outline: 2px solid var(--accent); }
#photo-taille { max-width: 11rem; }
.photo-dimensions { font-size: 0.8rem; color: var(--discret); font-variant-numeric: tabular-nums; }

/* --- 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; }
/* La zone aussi : WebKit d'iOS décide du geste (défilement, zoom de la page) sur
   l'élément touché ET ses ancêtres ; un parent qui le laisse faire annulait les
   pointeurs au second doigt. */
#zone-dessin { touch-action: none; }
/* Le diagnostic `#diag-dessin` : un encart discret, qui ne prend aucun geste. */
.diag-dessin { position: absolute; top: 8px; left: 8px; z-index: 5; pointer-events: none; white-space: pre;
  font: 11px/1.35 ui-monospace, Menlo, monospace; color: #fff; background: rgba(0, 0, 0, 0.72);
  padding: 6px 8px; border-radius: 6px; max-width: calc(100% - 16px); overflow: hidden; }
/* LE CLASSEMENT DE LA NOTE (`.ligne-meta` du Mac) : sous la barre d'action, UNE
   ligne — les étiquettes en pastilles (× pour en retirer une), le champ qui n'en
   ajoute que de nouvelles, le portefeuille, le dossier. Elle ne passe jamais à la
   ligne : trop étroite (un téléphone), elle défile de côté. */
.ligne-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; padding: 6px 12px; flex: none;
  border-bottom: 1px solid var(--trait); background: var(--fond); overflow-x: auto; scrollbar-width: none; }
.ligne-meta::-webkit-scrollbar { display: none; }
.ligne-meta > * { flex: none; }
.tags-note { display: flex; flex-wrap: nowrap; gap: 4px; align-items: center; }
.tags-note:empty { display: none; }
.tags-note .tag .x { font-size: 12px; line-height: 1; padding: 0 0 0 2px; color: inherit; opacity: .7; }
/* 16 px : en dessous, Safari sur iPhone zoome à la mise au point */
.ligne-meta input { flex: 1 1 9rem; min-width: 9rem; width: auto; padding: 5px 12px; border-radius: 999px; font-size: 16px; }
.ligne-meta select { max-width: 14rem; min-width: 0; padding: 5px 8px; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte); font: inherit; font-size: 16px; }
@media (min-width: 700px) { .ligne-meta select { font-size: 0.85rem; } }
/* AU DOIGT, le carnet et le dossier ont la hauteur, le bord et l'arrondi du champ
   « ajouter un tag… » : Safari d'iOS dessinait ses listes déroulantes à sa façon,
   plus basses et carrées, et la ligne avait l'air de trois morceaux. L'apparence du
   système est ôtée, la flèche redessinée en fond (SVG), la hauteur commune posée une
   fois (`--h-champ-meta`), boîte bordure comprise. */
html:not([data-bureau]) .ligne-meta { --h-champ-meta: 36px; }
html:not([data-bureau]) .ligne-meta input,
html:not([data-bureau]) .ligne-meta select { box-sizing: border-box; height: var(--h-champ-meta);
  min-height: var(--h-champ-meta); line-height: normal; margin: 0; border: 1px solid var(--trait);
  border-radius: 999px; vertical-align: middle; }
html:not([data-bureau]) .ligne-meta input { padding-top: 0; padding-bottom: 0; }
html:not([data-bureau]) .ligne-meta select { -webkit-appearance: none; appearance: none;
  padding: 0 28px 0 12px; background-repeat: no-repeat; background-position: right 10px center; background-size: 12px 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238593A0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ligne-meta .etat-note { font-size: 0.8rem; color: var(--discret); white-space: nowrap; }
.ligne-meta .etat-note:empty { display: none; }
.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); }
/* l'éditeur, collé sous la version : une seule mention, pas un second paragraphe */
.version + .droits { margin-top: -12px; }
/* 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 CINQ RUBRIQUES DU COMPTE (coque 86). Étroit (téléphone, iPad en portrait) : la
   liste des rubriques, chacune une rangée qu'on touche, son état dessous ; une rubrique
   ouverte remplace la liste, avec « ‹ Rubriques ». Large (≥ 900 px) : les onglets en
   colonne à gauche, collés en haut quand la rubrique défile, et la rubrique à droite. */
.compte-cadre { width: 100%; max-width: 34rem; margin: 0 auto; }
.compte-cadre .colonne.compte { margin: 0; padding-top: 12px; }
.compte-rubriques { padding: 18px 16px 0; }
#ecran-compte[data-vue="rubrique"] .compte-rubriques { display: none; }
#compte-onglets { display: flex; flex-direction: column; gap: 8px; }
#compte-onglets [role="tab"] { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0;
  padding: 10px 12px 10px 14px; border: 1px solid var(--trait); border-radius: 14px; background: var(--fond-carte);
  color: var(--texte); text-align: left; cursor: pointer; }
#compte-onglets [role="tab"] > .ic:first-child { flex: none; color: var(--accent); }
#compte-onglets [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rub-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rub-titre { font-weight: 650; font-size: 1rem; }
.rub-etat { font-size: 0.8rem; color: var(--discret); overflow-wrap: anywhere; }
.rub-etat:empty { display: none; }
.rub-etat[data-ton="attention"] { color: var(--avert); }
.rub-etat[data-ton="ok"]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px;
  border-radius: 50%; background: #2E9E5B; vertical-align: 1px; }
.rub-chevron { flex: none; color: var(--discret); }
.rubrique-retour { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; margin: -6px 0 0 -6px;
  padding: 0 6px; font-weight: 600; }
.compte .rubrique-titre { font-size: 1.4rem; margin: 4px 0 2px; letter-spacing: -0.01em; }
.compte .rubrique-aide { margin: 0 0 4px; font-size: 0.88rem; }
.rubrique:focus { outline: none; }
/* une carte : ce qui va ensemble, sous un titre */
.bloc-compte { margin-top: 14px; padding: 2px 16px 16px; border: 1px solid var(--trait); border-radius: 14px;
  background: var(--fond-carte); }
.bloc-compte > h3 { font-size: 1rem; margin: 14px 0 2px; }
.bloc-compte .action { background: var(--fond); }
.compte .bloc-compte input:is([type="text"], [type="password"], [type="email"], [type="url"], [type="number"], [type="search"]) {
  background: var(--fond); }
.sous-bloc { margin-top: 18px; padding-top: 2px; border-top: 1px solid var(--trait); }
.sous-bloc > h4 { font-size: 0.92rem; margin: 12px 0 2px; }
.bloc-compte.zone-danger { margin-top: 30px; border-color: var(--danger); }
.bloc-compte.zone-danger > h3 { color: var(--danger); }
.relais-liste:not(:empty) + .vide-si-liste { display: none; }
/* le message d'un geste reste en vue, en haut de la rubrique, quoi qu'on ait fait défiler */
.compte #compte-message { position: sticky; top: 8px; z-index: 3; margin: 0 0 6px; padding: 10px 12px;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12); }
.compte #compte-message.erreur { border-color: var(--danger); color: var(--danger); }
@media (min-width: 900px) {
  .compte-cadre { display: grid; grid-template-columns: 15.5rem minmax(0, 40rem); gap: 32px; justify-content: center;
    max-width: 64rem; padding: 0 24px; }
  .compte-rubriques { position: sticky; top: 0; align-self: start; padding: 24px 0; }
  #ecran-compte[data-vue] .compte-rubriques { display: block; }
  #compte-onglets { gap: 2px; }
  #compte-onglets [role="tab"] { min-height: 52px; border-color: transparent; background: transparent; border-radius: 10px; }
  #compte-onglets [role="tab"][aria-selected="true"] { background: var(--tag-fond); color: var(--tag-encre); }
  #compte-onglets [role="tab"][aria-selected="true"] .rub-etat:not([data-ton="attention"]) { color: var(--tag-encre); }
  .rub-chevron, .rubrique-retour { display: none; }
  .compte-cadre .colonne.compte { max-width: none; padding: 24px 0 calc(32px + env(safe-area-inset-bottom)); }
}
@media (min-width: 900px) and (hover: hover) {
  #compte-onglets [role="tab"][aria-selected="false"]:hover { background: var(--fond-barre); } }
/* LES CHAMPS DU COMPTE, tous à la même hauteur : les adresses (url, email) et le
   plafond (number) n'avaient pas la règle des champs texte — Safari leur gardait sa
   hauteur, son bord et son arrondi à lui, et la colonne alternait deux tailles. Une
   hauteur FIXE (pas un padding, que chaque type interprète) et l'apparence native
   retirée : le même rectangle partout, Safari d'iPadOS compris. */
:root { --h-champ: 46px; }
.compte input:is([type="text"], [type="password"], [type="email"], [type="url"], [type="number"], [type="search"]) {
  display: block; width: 100%; height: var(--h-champ); margin: 0; padding: 0 12px; line-height: normal;
  border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte);
  font-size: 16px; -webkit-appearance: none; appearance: none; }
/* 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; }
/* un relais appris par le compte, qui attend le mot de passe : bleu, pas rouge —
   rien n'est en panne, il reste un geste à faire */
.appareils li[data-etat="connecter"] .relais-nom::before { background: #4C9AFF; }
.relais-liste li[data-etat="connecter"] .relais-etat { color: var(--accent); }
.appareils .relais-connexion { border-color: var(--accent); }
.appareils .relais-connexion label { display: block; margin-bottom: 6px; }
.appareils .relais-connexion input { display: block; width: 100%; margin-top: 4px; font-size: 16px; }

/* 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); }

/* 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; }
/* une transcription demandée ici (coque 86) : l'attente et le travail en bleu, l'échec en rouge */
.meta .pastille-note.note-nee.echec { background: #FBE3DF; color: #9C2F22; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) .meta .pastille-note.note-nee.echec { background: #4A2420; color: #F2B4AA; }
}
:root[data-theme="sombre"] .meta .pastille-note.note-nee.echec { background: #4A2420; color: #F2B4AA; }
#bandeau-note-nee[data-etat="echec"] #etat-note-nee { color: var(--danger); }
/* le compte des transcriptions qui attendent, sur leur bouton ou leur entrée de menu */
.compte-attente { display: inline-block; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px;
  background: var(--accent); color: var(--sur-accent, #fff); font-size: 0.7rem; font-weight: 700; line-height: 18px;
  text-align: center; vertical-align: middle; font-variant-numeric: tabular-nums; }

.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; }

/* --- le texte et son aperçu --- */

/* La boîte du texte et de l'aperçu : l'un OU l'autre, en colonne (téléphone,
   « Écrire », « Aperçu ») ; les deux en ligne en « Côte à côte ». `min-height: 0`,
   sans quoi la boîte ne rétrécit pas sous son contenu et pousse les barres du
   bas hors de l'écran. */
.corps-note { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.corps-note.cote { flex-direction: row; }
.corps-note.cote > #texte, .corps-note.cote > #apercu { flex: 1 1 0; width: auto; min-width: 0; }
.corps-note.cote > #apercu { border-left: 1px solid var(--trait); }

/* --- la mise en page du Mac, quand l'écran la permet ---
   `data-largeur` (etroit, moyen, large) et `data-espace` (liste, editeur) sont
   posés sur <html> par le script, d'après les MÊMES seuils que ses
   `matchMedia` : le script et la feuille ne peuvent pas se contredire sur ce
   qui est montré. Sans eux (avant le script, ou sur un téléphone), rien ne
   change : un écran à la fois. Les écrans secondaires (compte, versions,
   dessin…) restent plein écran : `data-espace` n'est posé que pour la liste et
   l'éditeur. */
.ecran-vide, .panneau-note { display: none; }
html:not([data-largeur="moyen"]):not([data-largeur="large"]) .seul-multi,
html:not([data-largeur="large"]) .seul-large,
html:not([data-bureau]) .seul-bureau,
html[data-largeur="large"] .sauf-large { display: none; }
/* `data-bureau` : un écran d'au moins 1280 px, à la souris (`deBureau` du script).
   Ailleurs — une tablette, un téléphone, une fenêtre étroite —, ni « Liste » ni
   « Infos » (les encoches les remplacent), ni côte à côte, ni pastilles de
   portefeuille : rien de ce qui ne tient qu'à la souris dans la place d'un bureau. */
html:not([data-bureau]) #etiquettes { display: none; }

/* Les colonnes de côté, plus étroites que celles du Mac : la note est ce qu'on lit.
   À 1024 px (l'iPad en paysage), la liste prend 246 px et laisse 778 px à la note ;
   à 768 px, 232 px et 536 px ; dès 1280 px, le panneau s'y ajoute (256 px). */
html[data-espace] { --col-liste: clamp(232px, 24vw, 320px); --col-panneau: clamp(220px, 20vw, 300px); }
/* une RANGÉE : la liste, l'éditeur (ou sa place vide), le panneau ; ce qui est
   caché ne prend pas de place, si bien que replier la liste ou fermer le
   panneau rend la largeur au texte sans autre calcul */
html[data-espace] body { display: flex; flex-direction: row; }
html[data-espace] #ecran-liste { display: flex; flex: 0 0 var(--col-liste); min-width: 0; position: relative;
  overflow: hidden; border-right: 1px solid var(--trait); }
/* une colonne de 250 px ne tient pas « Notes, Corbeille, Portefeuilles » et
   l'état de la synchronisation sur une ligne : ils passent à la suivante */
html[data-espace] #ecran-liste .onglets { flex-wrap: wrap; row-gap: 2px; }
html[data-espace] #ecran-editeur, html[data-espace] .ecran-vide { flex: 1 1 0; min-width: 0; }
html[data-espace="liste"] .ecran-vide { display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 24px; color: var(--discret); }
.ecran-vide p { margin: 4px 0; max-width: 26rem; }
.ecran-vide kbd, .panneau-note kbd { font: 0.8em ui-monospace, "SF Mono", Menlo, monospace; padding: 1px 5px;
  border: 1px solid var(--trait); border-radius: 4px; background: var(--fond-carte); }
html[data-espace="editeur"][data-liste-masquee] #ecran-liste { display: none; }
html[data-largeur="large"][data-espace="editeur"]:not([data-panneau-ferme]) .panneau-note {
  display: flex; flex-direction: column; flex: 0 0 var(--col-panneau); min-width: 0;
  border-left: 1px solid var(--trait); background: var(--fond-barre); }
/* LES POIGNÉES DE LARGEUR, à la souris seulement (`data-bureau`) : une bande fine
   sur le bord intérieur de la liste et du panneau, visible au survol. Au doigt, les
   encoches suffisent — une bande de 6 px sous le pouce se prendrait pour un défilement.
   La largeur tirée est posée par le script dans --col-liste / --col-panneau. */
.poignee { display: none; }
html[data-bureau][data-espace] .poignee { display: block; position: absolute; top: 0; bottom: 0; z-index: 7;
  width: 6px; cursor: col-resize; touch-action: none; background: transparent; transition: background .12s; }
html[data-bureau][data-espace] .poignee-liste { right: 0; }
html[data-bureau][data-espace] .poignee-panneau { left: 0; }
html[data-bureau] .panneau-note { position: relative; }
html[data-bureau] .poignee:hover, html[data-bureau] .poignee.tiree { background: var(--accent); opacity: .45; }
html[data-bureau] .poignee:focus-visible { outline: none; background: var(--accent); opacity: .7; }
html[data-tirage] body { cursor: col-resize; user-select: none; -webkit-user-select: none; }
/* À côté de la liste, il n'y a pas de « retour » : la liste est déjà là. Le
   téléphone garde le sien. */
html[data-espace] #bouton-retour { display: none; }

/* LES BOUTONS FLOTTANTS au-dessus de la note ne cachent rien : quand ils tombent sur
   l'éditeur (pas de panneau à droite), le texte, l'aperçu et ce qui est sous eux
   gardent à droite une marge de leur largeur — une ligne de la note ne passe jamais
   sous le micro. Sur le panneau, c'est lui qui défile assez loin pour dégager sa fin.
   `--pile` : la hauteur de la pile (deux boutons sur l'ordinateur, quatre ailleurs). */
html { --pile: calc(124px + env(safe-area-inset-bottom)); }
html:not([data-bureau]) { --pile: calc(236px + env(safe-area-inset-bottom)); }
html[data-espace="editeur"] #ecran-editeur { --fab-reserve: 62px; }
html[data-espace] #ecran-editeur .barre-corbeille, html[data-espace] #ecran-editeur .memo {
  padding-right: calc(12px + var(--fab-reserve, 0px)); }
html[data-espace] #ecran-editeur #texte, html[data-espace] #ecran-editeur #apercu {
  padding-right: calc(16px + var(--fab-reserve, 0px)); }
/* LE PANNEAU OUVERT : la pile se pose en bas à droite de la COLONNE CENTRALE, pas de
   l'écran. Fixée au coin de la fenêtre, elle tombait sur le panneau — sur l'iPad en
   paysage, le texte des adresses et les boutons + et − de la carte passaient dessous,
   à moins de faire défiler. Le panneau ne réserve donc plus rien : rien n'est jamais
   sous elle. (`--col-panneau` est la largeur du panneau, bordure comprise.) */
html[data-largeur="large"][data-espace="editeur"]:not([data-panneau-ferme]) .fab-groupe {
  right: calc(var(--col-panneau) + 14px); }

/* LES ENCOCHES (tablette, fenêtre étroite) : une languette au milieu du bord de la
   note, à la frontière de la liste et à celle du panneau. Discrètes — 20 px de
   large, la couleur des barres —, mais touchables : leur zone sensible (`::after`)
   fait 56 × 80 px. Le texte s'écarte d'autant du bord, pour que la
   languette ne couvre aucune lettre. */
.encoche { display: none; }
html[data-espace="editeur"]:not([data-bureau]) .encoche-liste,
html[data-largeur="large"][data-espace="editeur"]:not([data-bureau]) .encoche-panneau { display: flex; }
html[data-espace] #ecran-editeur { position: relative; }
.encoche { position: absolute; top: 50%; z-index: 6; width: 20px; height: 64px; margin-top: -32px; padding: 0;
  align-items: center; justify-content: center; background: var(--fond-barre); color: var(--discret);
  border: 1px solid var(--trait); font-size: 20px; line-height: 1; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }
.encoche::after { content: ""; position: absolute; top: -8px; bottom: -8px; }
.encoche-liste { left: 0; border-left: none; border-radius: 0 10px 10px 0; }
.encoche-liste::after { left: -12px; right: -24px; }   /* à gauche, un débord ne fait pas défiler */
.encoche-panneau { right: 0; border-right: none; border-radius: 10px 0 0 10px; }
.encoche-panneau::after { left: -36px; right: 0; }   /* rien au-delà du bord : la page déborderait */
.encoche:active { color: var(--accent); }
.encoche:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
html[data-espace="editeur"]:not([data-bureau]) #ecran-editeur #texte,
html[data-espace="editeur"]:not([data-bureau]) #ecran-editeur #apercu { padding-left: 30px; }
html[data-largeur="large"][data-espace="editeur"]:not([data-bureau]) #ecran-editeur #texte,
html[data-largeur="large"][data-espace="editeur"]:not([data-bureau]) #ecran-editeur #apercu {
  padding-right: calc(30px + var(--fab-reserve, 0px)); }
/* la note ouverte se voit dans la liste */
.liste li.choisie { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.liste li { cursor: pointer; }

/* LA BARRE D'ACTION : la vue à gauche, les actions à droite, deux groupes qui
   ne passent jamais à la ligne chacun. Sur un téléphone, la barre, elle, y passe :
   les actions descendent sous la vue, collées à droite (`margin-left: auto`). */
.barre-action { flex-wrap: wrap; row-gap: 6px; }
.grp-vue, .grp-actions { display: flex; flex-wrap: nowrap; align-items: center; flex: none; }
.grp-actions { gap: 2px; margin-left: auto; }
.barre-action .rond { width: 36px; height: 36px; }

/* À côté de la liste, les deux bandeaux du haut — la recherche à gauche, la barre
   d'action au centre — ont la MÊME hauteur, fixée, et leurs bords se continuent.
   La barre d'action y tient sur une ligne : si la colonne manque de place (une
   fenêtre de 700 px), c'est le groupe des actions qui défile de côté — jamais la
   barre qui grandit. Le menu d'Imprimer, posé sur la fenêtre, n'en est pas coupé. */
html[data-espace] { --h-barre: calc(61px + env(safe-area-inset-top)); }
html[data-espace] #ecran-liste > .barre, html[data-espace] #ecran-editeur > .barre-action {
  height: var(--h-barre); flex: none; flex-wrap: nowrap; }
html[data-espace] .grp-actions { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
html[data-espace] .grp-actions::-webkit-scrollbar { display: none; }
/* Les libellés ne s'écrivent que si la COLONNE les tient tous (une requête de
   conteneur : la largeur de l'écran ne dit rien de celle de l'éditeur). En dessous,
   l'icône seule ; son nom reste dans `aria-label` et `title`. */
html[data-espace] #ecran-editeur { container-type: inline-size; }
html[data-espace] #ecran-editeur .barre > .rond.libelle { width: 36px; padding: 0; border-radius: 50%; }
html[data-espace] #ecran-editeur .barre > .rond.libelle .lib { display: none; }
@container (min-width: 1150px) {
  html[data-espace] #ecran-editeur .barre > .rond.libelle { width: auto; padding: 0 14px 0 11px; gap: 6px; border-radius: 999px; }
  html[data-espace] #ecran-editeur .barre > .rond.libelle .lib { display: inline; font-size: 0.9rem; }
}
/* LES ACTIONS DE LA NOTE, chacune son mot SOUS son icône, partout : Dessin, Photo,
   PDF, Favori… sans mot, neuf ronds ne se devinaient pas, et un libellé à côté de
   l'icône ne tenait qu'à partir de 1150 px de colonne. Dessous, en 10 px, les neuf
   tiennent sur une ligne à côté de la liste de l'iPad (778 px en paysage, 536 en
   portrait). Des cases de barre d'outils, pas des ronds : sans bordure, le mot fait
   le bouton. */
.barre-action .grp-actions { gap: 0; }
.barre-action .grp-actions .rond.libelle { flex-direction: column; justify-content: center; gap: 2px; width: auto;
  min-width: 32px; height: 44px; padding: 2px 2px; border-radius: 9px; border-color: transparent; background: none; }
.barre-action .grp-actions .rond.libelle .lib { display: block; font-size: 10px; line-height: 1.1; font-weight: 500;
  white-space: nowrap; letter-spacing: -0.02em; }
/* la vue (Écrire | Aperçu) et les bords de la barre cèdent un peu d'air aux mots */
.barre-action .seg button { padding-left: 10px; padding-right: 10px; }
html[data-espace]:not([data-bureau]) #ecran-editeur > .barre-action { padding-left: 8px; padding-right: 8px; gap: 6px; }
/* Si les mots ne tiennent pas À CET ÉCRAN (`ajusterMotsActions` mesure, avec la
   police de l'appareil) : d'abord serrés, puis — sur un téléphone, en dernier
   recours — l'icône seule, son nom restant dans `aria-label` et `title`. */
.barre-action.mots-serres .grp-actions .rond.libelle { min-width: 30px; padding: 2px 1px; }
.barre-action.mots-serres .grp-actions .rond.libelle .lib { font-size: 9.5px; letter-spacing: -0.04em; }
.barre-action.sans-mots .grp-actions .rond.libelle { min-width: 36px; height: 36px; padding: 0; }
.barre-action.sans-mots .grp-actions .rond.libelle .lib { display: none; }
.barre-action .grp-actions .rond.libelle .ic { width: 20px; height: 20px; min-width: 20px; }
.barre-action .grp-actions .rond.libelle:active { background: var(--fond-carte); }
.barre-action .grp-actions .rond.libelle.actif { background: var(--tag-fond); color: var(--accent); border-color: transparent; }
/* Protéger (verrouillée) et Confidentiel s'allument, comme sur le Mac */
#bouton-verrou.actif, #bouton-confidentiel.actif { color: var(--accent); border-color: var(--accent);
  background: var(--tag-fond); }

/* Le tri : un bouton et son menu PARTOUT, l'ordinateur compris (l'utilisateur l'a
   préféré à la liste déroulante) ; `#choix-tri` reste, caché, porteur de l'état */
.menu-page.tri-compact:not([hidden]) { display: inline-flex; }
#choix-tri { display: none; }
.menu [role="menuitemradio"][aria-checked="true"]::before { content: "✓ "; color: var(--accent); }
.menu [role="menuitemradio"][aria-checked="false"] { padding-left: 25px; }
#bouton-liste.actif, #bouton-panneau.actif { background: var(--tag-fond); color: var(--tag-encre); border-color: var(--trait); }

/* Les onglets des notes ouvertes, ceux du Mac (`#onglets` de notes/page.html) */
.onglets-notes { display: flex; gap: 2px; padding: 6px 10px 0; overflow-x: auto; flex: none;
  border-bottom: 1px solid var(--trait); background: var(--fond-barre); scrollbar-width: none; }
.onglets-notes::-webkit-scrollbar { display: none; }
.onglets-notes .onglet-note { display: flex; align-items: center; gap: 6px; max-width: 220px; flex: none;
  padding: 6px 8px 6px 12px; border: 1px solid var(--trait); border-bottom: none; border-radius: 8px 8px 0 0;
  background: var(--fond-barre); color: var(--discret); font-size: 13px; cursor: pointer; white-space: nowrap; }
.onglets-notes .onglet-note.actif { background: var(--fond); color: var(--texte); font-weight: 600; }
.onglets-notes .onglet-note .nom { overflow: hidden; text-overflow: ellipsis; }
.onglets-notes .onglet-note .fermer { color: inherit; font-size: 15px; line-height: 1; padding: 0 2px;
  border-radius: 4px; opacity: .6; }
.onglets-notes .onglet-note .fermer:hover { opacity: 1; background: var(--trait); }
/* le « + » au bout des onglets : une note neuve, comme le bouton flottant */
.onglets-notes .onglet-plus { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0 0 3px 4px; padding: 0; border-radius: 8px; color: var(--discret); }
.onglets-notes .onglet-plus .ic { width: 16px; height: 16px; flex: none; }
.onglets-notes .onglet-plus:hover, .onglets-notes .onglet-plus:active { background: var(--trait); color: var(--accent); }
html:not([data-bureau]) .onglets-notes .onglet-plus { width: 34px; height: 30px; }

/* Le panneau de droite. Rien n'y déborde EN LARGEUR : une barre de défilement de
   côté y venait (l'iPad, 1024 px) d'une ligne « disponible sur la version
   ordinateur » en `nowrap` et d'enfants de flex et de grille qui gardaient leur
   largeur de contenu. Chaque enfant peut rétrécir (`min-width: 0`), les médias se
   tiennent dans la colonne, et `overflow-x: hidden` ne sert plus qu'en dernier
   recours. */
.panneau-tete { display: flex; align-items: center; gap: 8px; padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--trait); flex: none; }
.panneau-tete .titre-panneau { flex: 1; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--discret); }
.panneau-tete .lien { padding: 2px 6px; color: var(--discret); }
.panneau-corps { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom); }
.panneau-corps > *, .meta-corps > *, .meta-corps li, .meta-corps dd { min-width: 0; max-width: 100%; }
.meta-corps img, .meta-corps svg, .meta-corps canvas, .meta-corps .carte { max-width: 100%; }
.meta-corps button { max-width: 100%; overflow-wrap: anywhere; }
.meta-corps .onto-chip { max-width: 100%; white-space: normal; text-align: left; }
.meta-sec { border-bottom: 1px solid var(--trait); }
.meta-sec > summary { list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; gap: 6px; padding: 8px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--discret); }
.meta-sec > summary::-webkit-details-marker { display: none; }
.meta-sec > summary::before { content: "▾"; font-size: 9px; width: 9px; transition: transform .15s; }
.meta-sec:not([open]) > summary::before { transform: rotate(-90deg); }
/* un cran sous le corps de la note : le panneau accompagne, il ne se lit pas en premier */
.meta-corps { padding: 0 12px 10px; font-size: 12.5px; overflow-wrap: anywhere; }
.meta-corps .vide-sec { color: var(--discret); font-size: 12px; margin: 0; }
.meta-corps dl { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 2px 10px; margin: 0; }
.meta-corps dt { color: var(--discret); }
.meta-corps dd { margin: 0; }
.meta-corps .tags-sec { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.meta-corps .port-sec { display: inline-block; text-transform: uppercase; letter-spacing: .04em; font-size: 10px;
  font-weight: 800; border-radius: 4px; padding: 4px 7px; }
.plan-note { list-style: none; margin: 0; padding: 0; }
.plan-note button { display: block; width: 100%; text-align: left; padding: 3px 8px; border-radius: 6px;
  color: var(--texte); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-note button:hover { background: var(--fond-carte); color: var(--accent); }
.plan-note .n2 button { padding-left: 20px; font-size: 12px; }
.plan-note .n3 button { padding-left: 32px; font-size: 11.5px; color: var(--discret); }
.meta-mac { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.meta-mac .menu-titre { margin: 0 0 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--discret); }
.meta-mac-ligne { font-size: 11.5px; color: var(--discret); overflow-wrap: anywhere; }
/* une capacité que la source sait faire, sur la note : un bouton, comme ceux des sections */
.capacites-note { padding: 10px 12px 0; display: flex; flex-wrap: wrap; gap: 6px; }

/* --- la tête de la liste, les dossiers, le lot (étape 3a) --- */

/* Liste | Arbre, le tri, l'étiquette, puis les petits ronds : une ligne qui passe à
   la suivante plutôt que de déborder (à 390 px comme dans une colonne de 250 px). */
/* `--ecart-outils-liste` sous la ligne Sélection / flou : collée au premier encart de
   note, elle se lisait comme sa bordure */
:root { --ecart-outils-liste: 8px; }
.outils-liste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 12px var(--ecart-outils-liste); }
.outils-liste .espace { flex: 1; }
.outils-liste select { min-width: 0; max-width: 100%; padding: 5px 8px; border: 1px solid var(--trait);
  border-radius: var(--rayon); background: var(--fond-carte); color: var(--texte); font: inherit; font-size: 16px; }
.seg.petit button { padding: 5px 12px; font-size: 0.85rem; }
/* Liste et Arbre, avec l'icône du Mac devant le mot */
.seg button:has(.ic-mode) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg .ic-mode { width: 15px; height: 15px; flex: none; }
.outils-liste .rond.petit { width: 32px; height: 32px; }
.outils-liste .rond.petit .ic { width: 18px; height: 18px; min-width: 18px; }
.outils-liste .rond.petit.libelle { width: auto; padding: 0 10px 0 7px; gap: 5px; border-radius: 999px; }
.outils-liste .rond.petit.libelle .lib { display: inline; font-size: 0.8rem; }
@media (min-width: 700px) { .outils-liste select { font-size: 0.85rem; } }

/* LES MENUS DE LA PAGE (tri, Outils, Imprimer) : enfants de <body>, à position fixe,
   placés par le script contre leur bouton (`placerMenu`). Dans leur colonne, ils
   étaient coupés par elle (`overflow: hidden`) et passaient sous la note ; celui
   d'Imprimer se plaçait par rapport à l'éditeur (son `container-type` le rend bloc
   conteneur des positions fixes), pas de la fenêtre. Au-dessus de tout, sauf des
   feuilles, qui les ferment. */
.menu-page { position: relative; display: inline-flex; }
.menu { position: fixed; left: 0; top: 0; z-index: 35; min-width: min(15rem, calc(100vw - 16px)); max-width: calc(100vw - 16px);
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; padding: 4px; border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-carte); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18); }
.menu > button { text-align: left; padding: 9px 12px; border-radius: 6px; color: var(--texte); font-size: 0.92rem; }
.menu > button:hover, .menu > button:focus-visible { background: var(--fond-barre); color: var(--accent); }
.sur-mac-menu { border-top: 1px solid var(--trait); margin-top: 4px; padding: 6px 12px 4px; }
.sur-mac-menu p { display: flex; gap: 10px; align-items: baseline; margin: 2px 0; font-size: 0.8rem; color: var(--discret); }
.sur-mac-menu .menu-titre { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.capacites-outils { display: flex; flex-direction: column; }
.capacites-outils > button { text-align: left; padding: 9px 12px; border-radius: 6px; color: var(--texte); font-size: 0.92rem; }
.capacites-outils > button:hover, .capacites-outils > button:focus-visible { background: var(--fond-barre); color: var(--accent); }
html:not([data-largeur="moyen"]):not([data-largeur="large"]) .sur-mac-menu { display: none; }

/* Le lot choisi */
.barre-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 8px 12px 0; padding: 6px 10px;
  border: 1px solid var(--accent); border-radius: var(--rayon); background: var(--tag-fond); color: var(--tag-encre);
  font-size: 0.85rem; }
.barre-selection .espace { flex: 1; }
.barre-selection .lien { padding: 4px 2px; }
.liste li.selectionnee { border-color: var(--accent); background: var(--tag-fond); box-shadow: inset 4px 0 0 var(--accent); }

/* L'arbre (la vue hiérarchique du Mac) : des en-têtes de dossier repliables, le
   portefeuille à sa couleur, des feuilles compactes. */
.liste.arbre { padding-left: 8px; padding-right: 8px; }
.liste.arbre ul { list-style: none; margin: 0; padding: 0; }
.liste.arbre li.enfants { padding: 0; margin: 0; border: none; background: none; }
.liste li.dossier { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 2px 0;
  border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer; user-select: none;
  -webkit-user-select: none; }
.liste li.dossier.dossier-port { margin-top: 10px; font-weight: 700; }
.liste li.dossier:first-child { margin-top: 0; }
.liste li.dossier .chevron { display: inline-block; width: 10px; transform: rotate(90deg); transition: transform .12s; }
.liste li.dossier.replie .chevron { transform: rotate(0deg); }
.liste li.dossier .dnom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.liste li.dossier .actes { margin-left: auto; display: inline-flex; gap: 2px; }
.liste li.dossier .actes button { color: inherit; padding: 0 7px; border-radius: 6px; font-size: 1rem; line-height: 1.6; opacity: .75; }
@media (hover: hover) {
  .liste li.dossier .actes { visibility: hidden; }
  .liste li.dossier:hover .actes, .liste li.dossier:focus-within .actes { visibility: visible; }
}
.liste li.dossier.survol { outline: 2px dashed var(--accent); outline-offset: -2px; }
.liste li.feuille { padding: 7px 12px; margin-bottom: 4px; }
.liste li.feuille .titre-note { font-weight: 500; }
.liste li.dossier-ajout { padding: 8px 12px; margin: 10px 0 0; border: 1px dashed var(--trait); background: none;
  color: var(--discret); font-size: 0.85rem; cursor: pointer; }
.liste li.dossier-saisie { padding: 4px 10px; margin: 2px 0; border: none; background: none; }
.dossier-saisie form { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dossier-saisie input { flex: 1; min-width: 8rem; width: auto; padding: 6px 10px; }
.dossier-saisie .erreur { flex-basis: 100%; margin: 0; }

/* LE FLOU du partage d'écran (`#liste.flou` du Mac) : les notes non ouvertes, leur
   titre, leur résumé, leurs dates et étiquettes, et les noms des dossiers ;
   révélés au survol. */
#liste.flou li:not(.choisie) .ttxt, #liste.flou li:not(.choisie) .apercu,
#liste.flou li:not(.choisie) .meta, #liste.flou li:not(.choisie) .port-badge,
#liste.flou .dossier .dnom { filter: blur(5px); transition: filter .12s; user-select: none; -webkit-user-select: none; }
#liste.flou li:not(.choisie):hover .ttxt, #liste.flou li:not(.choisie):hover .apercu,
#liste.flou li:not(.choisie):hover .meta, #liste.flou li:not(.choisie):hover .port-badge,
#liste.flou .dossier:hover .dnom { filter: none; }

/* …et LE MÊME FLOU au-delà de la liste (`html[data-flou]`) : tout ce qui nomme une
   AUTRE note ou une entité hors de la note ouverte — les nœuds et les prédicats des
   graphes (sauf la note ouverte), les rétroliens, ce que deux notes partagent, la
   fiche d'une entité, les lieux de la carte du carnet, la chronologie et les thèmes.
   Révélé au survol, comme la liste. Le SVG passe par un filtre SVG (Safari). */
.defs-page { position: absolute; width: 0; height: 0; overflow: hidden; }
html[data-flou] .graphe-svg .g-noeud:not(.centre) text, html[data-flou] .graphe-svg .g-pred { filter: url(#rf-flou); }
html[data-flou] .graphe-svg .g-noeud:not(.centre):hover text { filter: none; }
html[data-flou] #vue-retroliens li, html[data-flou] .graphe-lien, html[data-flou] .graphe-legende .leg-theme,
html[data-flou] #fiche-corps .fiche-notes, html[data-flou] #fiche-corps .fiche-rel, html[data-flou] #fiche-corps .fiche-vars,
html[data-flou] #fiche-corps .fiche-attrs, html[data-flou] #titre-fiche, html[data-flou] #titre-graphe,
html[data-flou] #carte-lieux li, html[data-flou] #vue-corps .vue-lib, html[data-flou] #vue-corps .vue-notes,
html[data-flou] #vue-corps .vue-theme > h3, html[data-flou] #vue-corps .vue-theme > h4, html[data-flou] #taches-corps .tk-note,
html[data-flou] #vue-corps .chrono-lib, html[data-flou] #vue-corps .chrono-bulle, html[data-flou] #vue-corps .chrono-filtres .chrono-nom {
  filter: blur(5px); transition: filter .12s; user-select: none; -webkit-user-select: none; }
html[data-flou] #vue-retroliens li:hover, html[data-flou] #carte-lieux li:hover, html[data-flou] #fiche-corps .fiche-notes:hover,
html[data-flou] #fiche-corps .fiche-rel:hover, html[data-flou] #vue-corps .vue-notes:hover,
html[data-flou] #vue-corps .chrono-el:hover .chrono-lib, html[data-flou] #vue-corps .chrono-bulle:hover,
html[data-flou] #vue-corps .chrono-filtres .chrono-pastille:hover .chrono-nom,
html[data-flou] #vue-corps .chrono-tag:hover .chrono-nom { filter: none; }

/* L'aide-mémoire du Markdown, au pied du texte (`#memo` du Mac) */
.memo { flex: none; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 16px 7px; border-top: 1px dashed var(--trait);
  background: var(--fond); color: var(--discret); font-size: 11.5px; }
.memo code { font: 11px ui-monospace, "SF Mono", Menlo, monospace; color: var(--texte); background: var(--fond-barre);
  border-radius: 4px; padding: 1px 5px; }
.memo span { white-space: nowrap; }
/* LE PIED DES RACCOURCIS (coque 86) : UNE ligne — ce qui dépasse défile de côté, sans
   barre —, un bouton qui le replie en un mot, et rien sur une fenêtre basse : le texte
   d'abord */
.memo { flex-wrap: nowrap; align-items: center; gap: 10px; }
.memo-replier { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px 1px 2px; border-radius: 6px;
  color: var(--discret); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.memo-replier .ic { width: 14px; height: 14px; transition: transform .15s; }
@media (hover: hover) { .memo-replier:hover { background: var(--fond-barre); color: var(--texte); } }
.memo-replier:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.memo-contenu { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 12px; min-width: 0; overflow-x: auto;
  scrollbar-width: none; }
.memo-contenu::-webkit-scrollbar { display: none; }
.memo-touches { display: inline-flex; gap: 10px; padding-left: 10px; border-left: 1px solid var(--trait); }
.memo kbd { font: 600 10.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--texte); border: 1px solid var(--trait);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--fond-carte); }
html .memo.replie, html[data-bureau] .memo.replie { padding-top: 2px; padding-bottom: 2px; }
.memo.replie .memo-contenu { display: none; }
.memo.replie .memo-replier .ic { transform: rotate(-90deg); }
@media (max-height: 620px) { #memo { display: none !important; } }
#bouton-confidentiel.actif { font-weight: 600; }

/* --- l'aperçu, le panneau et les vues du carnet (étape 3b) --- */

/* Les requêtes ```rf``` (`.rf-requete` du Mac) : la liste des notes trouvées */
.apercu-md .rf-requete { border: 1px solid var(--trait); border-radius: 8px; padding: 8px 10px; margin: .6em 0;
  background: var(--fond-barre); }
.apercu-md .rf-requete .rf-tete { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--discret);
  margin-bottom: 4px; }
.apercu-md .rf-requete .rf-res { display: block; width: 100%; text-align: left; padding: 6px 0; color: var(--accent);
  font-size: 0.92em; }
.apercu-md .rf-requete .rf-res em { color: var(--discret); font-style: normal; font-size: 0.9em; }
.apercu-md .rf-requete .rf-vide { color: var(--discret); font-size: 0.85em; }
/* Les formules : en ligne dans le texte, centrées en bloc ; une ligne trop longue
   défile de côté plutôt que de faire déborder la note */
.rf-math { color: var(--discret); }
.rf-math .katex { color: var(--texte); }
.rf-math.bloc { display: block; text-align: center; margin: .6em 0; overflow-x: auto; overflow-y: hidden; }
/* La vignette YouTube (`.yt-embed` du Mac) : faite ici, aucune image d'ailleurs ;
   le lecteur ne vient qu'au toucher */
.apercu-md .yt-embed { margin: 10px auto; max-width: 640px; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden;
  background: #000; }
.apercu-md .yt-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.apercu-md .yt-play { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 10px; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff;
  background: radial-gradient(120% 120% at 50% 40%, #2a2a2a, #121212); }
.apercu-md .yt-play .yt-ico { width: 62px; height: 62px; border-radius: 50%; background: #D9201F; display: flex;
  align-items: center; justify-content: center; font-size: 26px; padding-left: 4px; }
.apercu-md .yt-play .yt-txt { font-size: 13px; opacity: .85; padding: 0 12px; text-align: center; }

/* Le panneau : propriétés, rétroliens, lieux */
.meta-corps dl.props-note { grid-template-columns: minmax(0, 40%) 1fr; }
.meta-corps dl.props-note dt { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  align-self: center; overflow: hidden; text-overflow: ellipsis; }
.liens-sec { list-style: none; margin: 4px 0 0; padding: 0; }
.liens-sec button { display: block; width: 100%; text-align: left; padding: 5px 6px; border-radius: 6px; color: var(--accent);
  font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liens-sec button:hover { background: var(--fond-carte); }
.lieux-liste { list-style: none; margin: 0 0 6px; padding: 0; }
.lieux-liste li { display: flex; flex-direction: column; gap: 1px; padding: 5px 0; border-bottom: 1px solid var(--trait); }
.lieux-liste li:last-child { border-bottom: none; }
.lieux-liste b, .lieux-liste button { font-weight: 600; text-align: left; overflow-wrap: anywhere; }
.lieux-liste button { padding: 2px 0; color: var(--accent); }
.lieux-liste span { color: var(--discret); font-size: 0.92em; font-variant-numeric: tabular-nums; }
.lieux-liste.adresses li { font-size: 0.95em; }
.meta-corps .action, .carte-avant .action, .capacites-note .action { padding: 8px 12px; margin: 4px 0; border-radius: var(--rayon);
  background: var(--fond-carte); border: 1px solid var(--trait); color: var(--accent); font-weight: 600; font-size: 0.85rem; }
html:not([data-bureau]) .meta-corps .action, html:not([data-bureau]) .carte-avant .action, html:not([data-bureau]) .capacites-note .action { min-height: 44px; }

/* LA CARTE, sans bibliothèque : des tuiles de 256 px posées, des épingles par-dessus.
   `touch-action: none` : le doigt la déplace au lieu de faire défiler le panneau. */
.carte { position: relative; overflow: hidden; background: var(--fond-barre); touch-action: none; cursor: grab;
  border: 1px solid var(--trait); border-radius: 8px; user-select: none; -webkit-user-select: none; }
.carte:active { cursor: grabbing; }
.carte-note { height: 220px; margin: 6px 0 2px; }
.carte-plan { position: absolute; inset: 0; will-change: transform; }
.carte-tuiles img { position: absolute; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.carte-epingles .epingle { position: absolute; transform: translate(-50%, -100%); line-height: 0; padding: 0;
  pointer-events: none; }
.carte-epingles .epingle.epingle-note { pointer-events: auto; cursor: pointer; }
.carte-epingles .epingle svg { width: 30px; height: 42px; display: block; }
.carte-epingles .epingle svg path { fill: #EA4335; }
.carte-epingles .epingle svg circle { fill: #fff; }
.carte-zoom { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.carte-zoom button { width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; border-radius: 7px;
  background: var(--fond-carte); color: var(--texte); border: 1px solid var(--trait); }
html:not([data-bureau]) .carte-zoom button { width: 44px; height: 44px; font-size: 22px; }
.carte-credit { position: absolute; bottom: 2px; right: 4px; z-index: 2; font-size: 10px; color: var(--discret);
  background: color-mix(in srgb, var(--fond-carte) 80%, transparent); padding: 0 4px; border-radius: 3px; }

/* LES FEUILLES du carnet (Tâches, Carte) : plein écran sur un téléphone ; ailleurs,
   une feuille posée au-dessus de la page, le reste voilé. `.voile > .feuille`, pas
   `.feuille` seul : une FEUILLE de l'arbre (`li.feuille`, une note dans son dossier)
   portait la même classe, et prenait l'ombre portée de la feuille — un dégradé gris
   sous chaque titre de la vue Arbre. */
.voile { position: fixed; inset: 0; z-index: 40; display: flex; background: var(--fond); }
.voile > .feuille { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--fond); }
@media (min-width: 700px) {
  .voile { align-items: center; justify-content: center; padding: 24px; background: rgba(10, 16, 20, 0.45); }
  .voile > .feuille { flex: none; width: min(760px, 100%); height: min(86vh, 100%); border: 1px solid var(--trait);
    border-radius: 14px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); }
  .voile > .feuille.feuille-large { width: min(1100px, 100%); height: min(90vh, 100%); }
}
.feuille-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: none;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px; background: var(--fond-barre); border-bottom: 1px solid var(--trait); }
@media (min-width: 700px) { .feuille-tete { padding-top: 10px; } }
.feuille-tete h2 { margin: 0; font-size: 1rem; }
.feuille-tete .feuille-info { color: var(--discret); font-size: 0.8rem; }
.feuille-tete .feuille-case { margin: 0 0 0 auto; font-size: 0.85rem; color: var(--discret); }
.feuille-tete .rond { margin-left: auto; font-size: 1rem; }
.feuille-tete .feuille-case + .rond { margin-left: 0; }
html:not([data-bureau]) .feuille-tete .rond { width: 44px; height: 44px; }
.feuille-message { margin: 0; padding: 8px 14px; background: var(--tag-fond); color: var(--tag-encre); }
.feuille-corps { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 16px calc(24px + env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch; }
.feuille-carte { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.feuille-carte .carte { flex: 1 1 60%; min-height: 240px; }
.feuille-carte .lieux-liste { flex: 0 1 auto; max-height: 34%; overflow-y: auto; margin: 0; font-size: 0.88rem; }
.feuille-carte .carte-avant .aide { margin: 4px 0 8px; }
/* une tâche (`.tk` du Mac) : la case et son texte d'un seul tenant — une cible large
   au doigt —, la note d'où elle vient, son échéance */
.tk-h { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--discret); margin: 16px 0 4px; }
.tk-h.tk-retard { color: var(--danger); }
.tk-h.tk-auj { color: var(--accent); }
.tk { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 6px 0; border-bottom: 1px solid var(--trait); }
.tk .tk-case { display: flex; align-items: baseline; gap: 10px; flex: 1 1 14rem; min-width: 0; margin: 0; color: var(--texte);
  font-size: 0.95rem; cursor: pointer; padding: 4px 0; }
.tk .tk-case input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--accent); transform: translateY(3px); }
html:not([data-bureau]) .tk .tk-case input { width: 22px; height: 22px; }
.tk.fait .tk-txt { text-decoration: line-through; color: var(--discret); }
.tk .tk-note { flex: none; max-width: 16rem; color: var(--accent); font-size: 0.8rem; padding: 4px 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tk .tk-ech { flex: none; color: var(--discret); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

/* Le comparatif d'un conflit : une ligne par ligne, ce qui n'est que d'un côté en
   couleur (`.res-diff` du Mac) */
.diff-lignes .l { display: block; min-height: 1.5em; padding: 0 3px; border-radius: 3px; }
.l.retiree { background: color-mix(in srgb, #d33 20%, transparent); }
.l.ajoutee { background: color-mix(in srgb, #2ea043 22%, transparent); }
.legende-diff { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.legende-diff .l { display: inline-block; padding: 0 6px; border-radius: 3px; }
.actions-cote { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }

/* L'IMPRESSION (`#impression` du Mac) : cachée à l'écran, seule sur le papier. */
#impression { display: none; }
@page { size: A4; margin: 16mm 14mm; }
@media print {
  body > *:not(#impression) { display: none !important; }
  html, body { height: auto; background: #fff; }
  html[data-espace] body { display: block; }
  #impression { display: block; color: #111; font: 11pt/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
  #impression a { color: #1b4fa6; text-decoration: none; }
  #impression .imp-titre { font-size: 20pt; margin: 0 0 2mm; }
  #impression .imp-sous { color: #555; font-size: 9pt; margin: 0 0 6mm; }
  #impression .imp-meta-titre { font-size: 14pt; margin: 8mm 0 3mm; border-top: 1px solid #bbb; padding-top: 4mm; }
  #impression .imp-type { font-size: 8pt; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #666; margin: 0 0 1mm; }
  #impression .imp-liste { margin: 0; padding-left: 5mm; font-size: 10pt; }
  #impression .imp-corps h1 { font-size: 15pt; } #impression .imp-corps h2 { font-size: 13pt; }
  #impression .imp-corps h3 { font-size: 11.5pt; }
  #impression table { border-collapse: collapse; }
  #impression th, #impression td { border: 1px solid #999; padding: 1mm 2mm; font-size: 9.5pt; }
  #impression pre, #impression code { background: #f0f3f8; color: #1b4fa6; }
  #impression pre { padding: 2mm 3mm; border-radius: 1.5mm; white-space: pre-wrap; }
  #impression img { max-width: 100%; }
  #impression .rf-math.bloc { display: block; text-align: center; margin: 2mm 0; }
  #impression .rf-requete .rf-res { display: block; color: #1b4fa6; }
  /* les encadrés, sur le papier comme à l'écran : la boîte, son bord de couleur, son
     icône (un trait, que l'impression garde même sans les arrière-plans) */
  #impression .callout { border: 1px solid #ccc; border-left: 4px solid #8593A0; border-radius: 2mm; padding: 2mm 3mm;
    margin: 3mm 0; break-inside: avoid; }
  #impression .callout-tete { font-weight: 700; margin-bottom: 1mm; }
  #impression .callout-info, #impression .callout-note { border-left-color: #0092CF; }
  #impression .callout-tip, #impression .callout-astuce, #impression .callout-success, #impression .callout-succes,
  #impression .callout-ok { border-left-color: #74C82D; }
  #impression .callout-warning, #impression .callout-attention, #impression .callout-important { border-left-color: #FAA80C; }
  #impression .callout-danger, #impression .callout-erreur, #impression .callout-error { border-left-color: #D9201F; }
  #impression .callout-question, #impression .callout-faq { border-left-color: #A2086F; }
  #impression blockquote { margin: 2mm 0; padding: 0 3mm; border-left: 2px solid #1b4fa6; color: #333; }
  #impression ul.taches { list-style: none; padding-left: 1mm; }
  #impression ul.taches li { display: flex; align-items: flex-start; gap: 2mm; }
  #impression ul.taches input { margin: 1mm 0 0; }
}

/* --- l'ontologie publiée par le Mac (la fiche, le graphe, le panneau) ---
   Les couleurs des types sont celles du Mac (`GE_PALETTE`) : un individu est bleu
   des deux côtés. */
.t-individu { --type: #4C9AFF; } .t-organisation { --type: #E0837A; } .t-lieu { --type: #57B894; }
.t-evenement { --type: #C792EA; } .t-date { --type: #E0A21B; } .t-objet { --type: #8593A0; } .t-concept { --type: #23807A; }
.onto-type { margin: 8px 0 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--discret); }
.onto-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.onto-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--trait); border-left: 4px solid var(--type, var(--trait)); background: var(--fond-carte);
  color: var(--texte); font-size: 12.5px; min-height: 30px; }
.onto-chip .n { font-size: 10.5px; color: var(--discret); }
.onto-chip:active, .onto-chip:hover { border-color: var(--accent); }
html:not([data-bureau]) .onto-chip { min-height: 36px; }
.meta-corps .onto-pied, .meta-corps .onto-alerte { margin-top: 8px; }
.onto-alerte { color: var(--accent) !important; }

.graphe-svg { display: block; width: 100%; height: 100%; touch-action: none; user-select: none;
  -webkit-user-select: none; background: var(--fond-carte); border-radius: var(--rayon); }
.graphe-svg.graphe-petit { height: 300px; border: 1px solid var(--trait); }
.graphe-boite { position: relative; margin-top: 6px; }
.g-arete { fill: none; stroke: var(--discret); stroke-opacity: .55; stroke-width: 1.4; }
.g-arete.sec { stroke-opacity: .25; }
.g-arete.faible { stroke-dasharray: 4 3; stroke-opacity: .4; }
.g-fleche { fill: var(--discret); }
.g-noeud .g-coeur { fill: var(--type, var(--accent)); stroke: var(--fond-carte); stroke-width: 1.5; }
.g-noeud.note .g-coeur { fill: var(--accent); }
.g-noeud.centre .g-coeur { stroke: var(--texte); stroke-width: 2; }
.g-noeud text { fill: var(--texte); font-size: 11px; pointer-events: none; paint-order: stroke;
  stroke: var(--fond-carte); stroke-width: 3px; stroke-linejoin: round; }
.g-noeud { cursor: pointer; }
/* LE PRÉDICAT SUR L'ARÊTE (« travaille pour », « fournit ») : une étiquette sur un
   fond qui la détache du trait, au milieu de l'arête ; jamais une cible du doigt */
.g-pred { pointer-events: none; }
.g-pred rect { fill: var(--fond-carte); stroke: var(--trait); stroke-width: 1; opacity: .94; }
.g-pred text { fill: var(--texte); font-size: 10.5px; font-weight: 600; }
.graphe-svg.preds-survol .g-pred { display: none; }
.graphe-svg.preds-survol .g-pred.vu, .graphe-svg.preds-survol.preds-zoom .g-pred { display: inline; }

/* LE GRAPHE DES NOTES à l'allure du Mac (`#grapheSvg` de notes/page.html) : un rendu
   « HUD » sur fond sombre FIXE (#222), quel que soit le thème — nœuds pleins à halo
   discret, à la couleur de leur thème, la note ouverte qui pulse, des liens courbes
   parcourus d'un flux. Le flux et la pulsation sont des animations CSS, que le
   compositeur tient sans le script ; « mouvement réduit » les arrête. */
.graphe-svg.graphe-hud { --gr-fond: #222222; --gr-noeud: #c3d2da; --gr-lueur: #4fd3ff; background: var(--gr-fond); }
.graphe-hud .g-fond { fill: var(--gr-fond); }
.graphe-hud .g-maille { fill: none; stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.graphe-hud .g-arete { stroke: rgba(255, 255, 255, .22); stroke-opacity: 1; stroke-width: 1.4; stroke-linecap: round; }
.graphe-hud .g-arete.sec { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.graphe-hud .g-arete.actif { stroke: var(--gr-lueur); stroke-width: 2.2; }
.graphe-hud .g-flux { fill: none; stroke: var(--gr-lueur); stroke-width: 1.7; stroke-linecap: round; pointer-events: none;
  stroke-dasharray: 2.5 17; opacity: .85; animation: gr-flux 1.15s linear infinite; }
@keyframes gr-flux { to { stroke-dashoffset: -19.5; } }
.graphe-hud .g-arete-cible { fill: none; stroke: transparent; stroke-width: 16; cursor: pointer; }
.graphe-hud .g-noeud { animation: gr-pop .45s ease both; }
@keyframes gr-pop { from { opacity: 0; } to { opacity: 1; } }
.graphe-hud .g-halo { fill: var(--gr-noeud); opacity: .16; pointer-events: none; }
.graphe-hud .g-noeud .g-coeur { fill: var(--gr-noeud); stroke: rgba(255, 255, 255, .22); stroke-width: 1.1;
  transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.graphe-hud .g-noeud.centre .g-halo { fill: var(--accent); opacity: .3; }
.graphe-hud .g-noeud.centre .g-coeur { fill: var(--accent); stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.graphe-hud .g-pulse { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .65; pointer-events: none;
  transform-box: fill-box; transform-origin: center; animation: gr-pulse 2.4s ease-out infinite; }
@keyframes gr-pulse { 0% { transform: scale(.7); opacity: .65; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@media (hover: hover) { .graphe-hud .g-noeud:hover .g-coeur { transform: scale(1.35); } }
.graphe-hud .g-noeud text { fill: #e4edf2; font-weight: 600; stroke: var(--gr-fond); }
.graphe-hud ~ .graphe-zoom button, .graphe-corps .graphe-svg.graphe-hud { border: 0; }
@media (prefers-reduced-motion: reduce) {
  .graphe-hud .g-flux, .graphe-hud .g-pulse, .graphe-hud .g-noeud { animation: none; }
}
/* ce que deux notes partagent, sur un lien touché */
.graphe-lien { position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 2; pointer-events: none;
  background: rgba(12, 16, 20, .86); border: 1px solid rgba(79, 211, 255, .35); border-radius: 8px;
  padding: 7px 10px; color: #e4edf2; font-size: 12px; line-height: 1.5; }
.graphe-lien[hidden] { display: none; }
.graphe-lien .gl-notes { font-weight: 700; display: block; margin-bottom: 3px; }
.graphe-lien .gl-ent { display: inline-block; background: rgba(79, 211, 255, .16); border: 1px solid rgba(79, 211, 255, .3);
  border-radius: 10px; padding: 1px 8px; margin: 2px 4px 0 0; }
/* la légende des thèmes (`#themesLegende` du Mac) */
.graphe-legende .leg-theme { display: inline-flex; align-items: center; gap: 5px; }
.graphe-legende .leg-theme i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.graphe-legende.graphe-legende-petite { border-top: 0; padding: 6px 0 0; }
.graphe-corps { position: relative; display: flex; padding: 8px; overflow: hidden; }
.graphe-corps .graphe-svg { flex: 1; min-height: 240px; }
.graphe-vide { flex: 1; align-self: center; }
.graphe-zoom { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.graphe-zoom button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--trait);
  background: var(--fond-barre); color: var(--texte); font-size: 20px; line-height: 1; }
.graphe-legende { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 14px calc(8px + env(safe-area-inset-bottom));
  font-size: 0.78rem; color: var(--discret); border-top: 1px solid var(--trait); }
.graphe-legende span[class^="t-"]::before { content: ""; display: inline-block; width: 9px; height: 9px;
  margin-right: 5px; border-radius: 50%; background: var(--type); }
.graphe-filtres { display: flex; flex-direction: column; gap: 4px; padding: 6px 14px; border-bottom: 1px solid var(--trait);
  font-size: 0.8rem; max-height: 30vh; overflow-y: auto; }
.filtre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.filtre-ligne .filtre-lbl { font-weight: 700; color: var(--discret); min-width: 5.5rem; }
.filtre-ligne label { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
.filtre-ligne label[class^="t-"] { border-left: 4px solid var(--type); padding-left: 4px; }

.fiche-corps .fiche-lbl { margin: 14px 0 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--discret); }
.fiche-corps ul { list-style: none; margin: 0; padding: 0; }
.fiche-vars { margin: 0; color: var(--discret); }
.fiche-attrs li { padding: 2px 0; }
.fiche-notes li button, .fiche-fusion-res button { display: block; width: 100%; text-align: left; padding: 8px 6px;
  border-radius: 6px; color: var(--texte); min-height: 40px; }
.fiche-notes li button:hover, .fiche-fusion-res button:hover { background: var(--fond-barre); color: var(--accent); }
.fiche-rel li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; padding: 4px 0; }
.fiche-rel li.faible { opacity: .75; }
.fiche-rel .lecture { color: var(--discret); font-style: italic; }
.fiche-rel .lien { min-height: 36px; }
.demandes li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0;
  border-bottom: 1px solid var(--trait); }
.demandes .etat-demande { color: var(--discret); font-size: 0.85rem; }
.demandes li.attente .etat-demande { color: var(--accent); }
.demandes .lien { margin-left: auto; min-height: 36px; }
.fiche-fusion { margin-top: 10px; }
.fiche-fusion input { width: 100%; font-size: 16px; }
.fiche-fusion-res .t { float: right; color: var(--discret); font-size: 0.8rem; }
.fiche-confirmer { margin-top: 12px; }
.fiche-pied { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--trait); background: var(--fond-barre); }
.fiche-pied .danger { margin-left: auto; }
.fiche-graphe { min-height: 60px; }
.fiche-pied .action, .fiche-confirmer .action { width: auto; margin: 0; padding: 8px 14px; min-height: 40px; }
.fiche-pied .action.danger, .fiche-confirmer .action.danger { color: var(--danger); }
.fiche-confirmer { padding: 10px 12px; border: 1px solid var(--danger); border-radius: var(--rayon); }
.fiche-confirmer .lien { margin-left: 12px; }
.fiche-pied .action, .fiche-confirmer .action { border: 1px solid var(--trait); border-radius: var(--rayon);
  background: var(--fond-carte); color: var(--texte); }
.fiche-pied .action.danger, .fiche-confirmer .action.danger { color: var(--danger); border-color: var(--danger); }

/* L'ouverture en mode biométrie : le compte, puis un seul grand bouton */
.bloc-bio { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.bloc-bio[hidden] { display: none; }
.bio-compte { margin: 0; color: var(--discret); }
.bio-compte b { color: var(--texte); overflow-wrap: anywhere; }
.bio-principal { display: block; width: 100%; padding: 16px; border-radius: var(--rayon); border: none;
  background: var(--accent); color: var(--sur-accent, #fff); font: inherit; font-weight: 600; font-size: 1.05rem; min-height: 52px; }
#dessin-doigt svg[hidden] { display: none; }
.panneau-tete .lien .ic { width: 16px; height: 16px; flex: none; vertical-align: middle; }
.feuille-tete .rond .ic { width: 18px; height: 18px; flex: none; }

/* GLISSER POUR SUPPRIMER (au doigt, dans la liste) : l'encart part vers la gauche et
   découvre, à sa place, une poubelle blanche sur fond rouge ; passé le seuil, il
   demande « Supprimer ? » en lui-même. `pan-y` laisse au navigateur le défilement
   vertical : un geste qui monte ou descend fait défiler, il n'est jamais lu comme un
   glisser — c'est le verrouillage d'axe, fait par le navigateur avant le script. */
.liste li.glissable { position: relative; overflow: hidden; touch-action: pan-y; }
.liste li .fond-suppr { position: absolute; top: 0; right: 0; bottom: 0; width: var(--tire, 0px); display: flex;
  align-items: center; justify-content: center; overflow: hidden; background: var(--suppr-fond); color: #fff;
  pointer-events: none; }
.liste li .fond-suppr .ic { width: 22px; height: 22px; flex: none; opacity: var(--avance, 0);
  transform: scale(calc(0.6 + 0.4 * var(--avance, 0))); }
.liste li.glisse > :not(.fond-suppr):not(.confirmer-suppr) { transform: translateX(calc(-1 * var(--tire, 0px))); }
.liste li.glisse.revient > :not(.fond-suppr):not(.confirmer-suppr) { transition: transform .22s ease-out; }
.liste li.glisse.revient .fond-suppr { transition: width .22s ease-out; }
.liste li .confirmer-suppr { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 14px; background: var(--suppr-fond); color: #fff; font-weight: 600; font-size: var(--t-titre); }
.liste li .confirmer-suppr .ic { width: 18px; height: 18px; flex: none; }
.liste li .confirmer-suppr .espace { flex: 1; }
.liste li .confirmer-suppr button { color: #fff; font-weight: 600; font-size: 0.9rem; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7); min-height: 36px; }
.liste li .confirmer-suppr button.oui { background: #fff; color: var(--suppr-fond); border-color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .liste li.glisse.revient > *, .liste li.glisse.revient .fond-suppr { transition: none; }
}

/* LE FILTRE QUI CACHE DES NOTES se dit au-dessus de la liste (`majFiltreActif`) :
   « 26 notes sur 403 — filtre : … », et sa croix le retire. */
.filtre-actif { display: flex; flex: none; align-items: center; gap: 8px; margin: 6px 12px 0; padding: 6px 10px;
  border-radius: var(--rayon); background: var(--fond-carte); border: 1px solid var(--trait);
  font-size: 0.8rem; color: var(--discret); }
.filtre-actif span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.filtre-actif .lien { flex: none; padding: 2px 6px; font-size: 0.95rem; color: var(--accent); }
html:not([data-bureau]) .filtre-actif .lien { min-width: 36px; min-height: 36px; }
/* L'AUTOREMPLISSAGE de la recherche se signale au script par une animation de rien
   (`animationstart`), la seule trace qu'un navigateur en laisse : il l'efface. */
@keyframes rf-autorempli { from { opacity: 1; } to { opacity: 1; } }
#recherche:-webkit-autofill { animation: rf-autorempli 1ms; }
#recherche:autofill { animation: rf-autorempli 1ms; }

/* L'ACCUEIL DES INVITÉS (lot 0). Le code de secours se lit d'un coup d'œil et se
   recopie sans ambiguïté : chasse fixe, groupes séparés, coupé seulement aux tirets. */
.code-secours { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.05rem;
  letter-spacing: 0.04em; line-height: 1.7; padding: 12px; border: 1px solid var(--danger);
  border-radius: var(--rayon); word-spacing: 0.2em; overflow-wrap: anywhere; user-select: all; }
.avertissement strong { color: var(--texte); }
.relais-liste li .lien-invitation { flex: 1 1 100%; font-size: 0.8rem; }
.aide-calcul { font-size: 0.8rem; color: var(--discret); margin: 4px 0 6px; white-space: normal; }

/* LE LOT 3 (notes-appareil.js) : ce que la page du Mac montrait. La pause d'un
   garde-fou se voit — un liseré d'alerte —, la frise et les thèmes se lisent en
   colonne, une note s'y touche comme un lien. */
.pause-calcul { border-left: 3px solid var(--danger); padding: 4px 0 4px 8px; }
.pause-calcul .lien { margin-right: 10px; }
.vue-frise { list-style: none; margin: 0; padding: 0; }
.vue-annee { font-weight: 700; margin: 14px 0 4px; }
.vue-evt { margin: 4px 0; }
.vue-evt time { display: inline-block; min-width: 5.5em; color: var(--discret); font-variant-numeric: tabular-nums; }
.vue-notes .vue-note { margin-right: 10px; font-size: 0.9rem; }
.vue-theme { border-left: 4px solid var(--discret); padding: 2px 0 6px 10px; margin: 10px 0; }
.vue-theme.sous { margin-left: 6px; }
.vue-theme h3, .vue-theme h4 { margin: 2px 0 4px; }
.vue-lecture { margin: 10px 0; padding: 8px 12px; border-left: 3px solid var(--discret); line-height: 1.6; }
.vue-pied .action { margin: 4px 8px 4px 0; }

/* LA FRISE DE LA CHRONOLOGIE (notes-chronologie.js). Les couleurs sont celles de la
   page — aucune teinte à elle, sinon celles des carnets, posées par le script en
   variables (`--c`, `--c-fond`, `--c-tige`) : le thème sombre suit sans une règle
   de plus, hormis le voile de l'aperçu. Au doigt (`.chrono.tactile`), toute cible
   fait 44 px. */
.chrono { --chrono-voile: rgba(30, 42, 50, 0.10); --recul: 8px;
  display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.chrono.tactile { --recul: 11px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) .chrono { --chrono-voile: rgba(0, 0, 0, 0.42); } }
:root[data-theme="sombre"] .chrono { --chrono-voile: rgba(0, 0, 0, 0.42); }

.chrono-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.chrono-nav { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--trait);
  border-radius: 999px; background: var(--fond-carte); }
.chrono-btn { min-height: 32px; padding: 0 12px; border-radius: 999px; color: var(--texte); font-size: 0.86rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.chrono-btn.ic-seul { width: 32px; padding: 0; color: var(--discret); }
.chrono-btn .ic { width: 18px; height: 18px; flex: none; }
@media (hover: hover) { .chrono-btn:hover, .chrono-seg:hover { background: var(--fond-barre); color: var(--texte); } }
.chrono-btn:focus-visible, .chrono-seg:focus-visible, .chrono-pastille:focus-visible, .chrono-el:focus-visible,
.chrono-fenetre:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chrono-periode { font-weight: 650; font-size: 1rem; margin-right: auto; padding: 0 4px; font-variant-numeric: tabular-nums; }
.chrono-intervalles { display: inline-flex; padding: 2px; gap: 2px; border-radius: 999px; background: var(--fond-barre);
  border: 1px solid var(--trait); }
.chrono-seg { min-height: 28px; padding: 0 11px; border-radius: 999px; font-size: 0.82rem; color: var(--discret); white-space: nowrap; }
.chrono-seg.actif { background: var(--fond-carte); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.chrono-filtres-btn { border: 1px solid var(--trait); background: var(--fond-carte); }
.chrono-filtres-btn.actif { border-color: var(--accent); color: var(--accent); }
.chrono-compte { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent);
  color: var(--sur-accent, #fff); font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; }
.chrono-resume { margin: -4px 0 0; font-size: 0.8rem; color: var(--discret); font-variant-numeric: tabular-nums; }

/* la frise : la grille et ses bandes, la piste des éléments, l'axe */
.chrono-frise { position: relative; flex: none; overflow: hidden; border: 1px solid var(--trait); border-radius: 12px;
  background: var(--fond-carte); touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  outline: none; -webkit-tap-highlight-color: transparent; }
.chrono-frise:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.chrono-frise.glisse { cursor: grabbing; }
.chrono-frise.glisse .chrono-el { pointer-events: none; }
.chrono-grille, .chrono-axe, .chrono-piste { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.chrono-grille, .chrono-axe { pointer-events: none; }
.chrono-piste { will-change: transform; }
.chrono-bande { position: absolute; left: 0; top: 0; bottom: 0; background: var(--fond); opacity: 0.6; }
.chrono-trait { position: absolute; left: 0; top: 0; height: var(--y-axe); width: 1px; background: var(--trait); opacity: 0.5; }
.chrono-trait.fort { opacity: 1; }
.chrono-axe::before { content: ""; position: absolute; left: 0; right: 0; top: var(--y-axe); height: 1px; background: var(--discret); opacity: 0.45; }
.chrono-gr { position: absolute; left: 0; top: calc(var(--y-axe) + 6px); font-size: 0.72rem; color: var(--discret);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.chrono-gr.majeure { top: calc(var(--y-axe) + 24px); font-size: 0.8rem; font-weight: 650; color: var(--texte); }
.chrono-aujourdhui { position: absolute; left: -1px; top: 0; height: var(--y-axe); width: 2px; background: var(--accent);
  pointer-events: none; z-index: 1; opacity: 0.85; }
.chrono-aujourdhui.a-gauche span { left: auto; right: 5px; }
.chrono-aujourdhui span { position: absolute; top: 5px; left: 5px; padding: 1px 8px; border-radius: 999px; background: var(--accent);
  color: var(--sur-accent, #fff); font-size: 0.68rem; font-weight: 650; white-space: nowrap; }

/* un élément : une pastille (sa date au point de gauche), un point quand la place
   manque, une plage pour ce qui est daté au mois ou à l'année ; la tige le relie à l'axe */
.chrono-el { --c: var(--discret); --c-fond: var(--fond-barre); --c-tige: var(--trait);
  position: absolute; left: 0; top: 0; height: 24px; padding: 0 9px 0 2px; display: flex; align-items: center; gap: 6px;
  border-radius: 999px; border: 1px solid var(--trait); background: var(--fond-carte); color: var(--texte);
  font-size: 12.5px; font-weight: 500; line-height: 1; white-space: nowrap; text-align: left; z-index: 2;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); transition: border-color 0.12s, box-shadow 0.12s; }
.chrono-el::before { content: ""; position: absolute; left: calc(var(--recul) - 1.5px); top: 100%; width: 1px;
  height: var(--tige); background: var(--c-tige); pointer-events: none; }
.chrono-el .chrono-pt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.chrono-el.est-evt .chrono-pt { border-radius: 2px; transform: rotate(45deg) scale(0.86); }
.chrono-el.t-date .chrono-pt { background: var(--fond-carte); box-shadow: inset 0 0 0 2px var(--c); }
.chrono-el .chrono-lib { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chrono-pl { display: inline-flex; gap: 2px; margin-left: -3px; }
.chrono-pl span { width: 6px; height: 6px; border-radius: 50%; }
@media (hover: hover) {
  .chrono-el:hover { border-color: var(--c); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16); z-index: 4; }
}
.chrono-el.point { padding: 0; justify-content: center; border-color: transparent; background: transparent; box-shadow: none; }
.chrono-el.point::before { left: calc(50% - 0.5px); top: 50%; }
.chrono-el.point .chrono-pt { box-shadow: 0 0 0 2px var(--fond-carte); }
.chrono-el.t-date.point .chrono-pt { box-shadow: inset 0 0 0 2px var(--c), 0 0 0 2px var(--fond-carte); }
.chrono-el.point .chrono-lib, .chrono-el.point .chrono-pl { display: none; }
/* le titre d'un point, au survol ou au clavier */
.chrono-el.point:hover .chrono-lib, .chrono-el.point:focus-visible .chrono-lib {
  display: block; position: absolute; left: calc(100% + 2px); top: 50%; transform: translateY(-50%); max-width: 260px;
  padding: 5px 9px; border-radius: 8px; background: var(--texte); color: var(--fond); font-size: 12px; }
.chrono-el.plage { padding-left: 8px; border-radius: 6px; border-left: 3px solid var(--c);
  background: linear-gradient(to right, var(--c-fond) var(--plage), var(--fond-carte) var(--plage)); }
.chrono-el.plage::before { display: none; }
.chrono-el.plage .chrono-pt { display: none; }
.chrono-groupe { position: absolute; left: 0; top: 0; height: 24px; min-width: 32px; padding: 0 8px; border-radius: 999px;
  background: var(--tag-fond); color: var(--tag-encre); font-size: 0.72rem; font-weight: 700; z-index: 2;
  font-variant-numeric: tabular-nums; }
.chrono.tactile .chrono-el { height: 36px; padding: 0 12px 0 4px; font-size: 14px; gap: 7px; }
.chrono.tactile .chrono-el .chrono-pt { width: 12px; height: 12px; }
.chrono.tactile .chrono-el.point { padding: 0; }
.chrono.tactile .chrono-el.plage { padding-left: 10px; }
.chrono.tactile .chrono-el::after, .chrono.tactile .chrono-groupe::after { content: ""; position: absolute; inset: -4px; }
.chrono.tactile .chrono-groupe { height: 28px; min-width: 40px; }

.chrono-bulle { position: absolute; left: 0; top: 0; z-index: 6; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--trait); background: var(--fond-carte); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); cursor: auto; }
.chrono-bulle-titre { display: block; font-size: 0.92rem; }
.chrono-bulle-date { display: block; font-size: 0.78rem; color: var(--discret); margin-bottom: 4px; }
.chrono-bulle ul { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.chrono-bulle li .vue-note { display: block; width: 100%; text-align: left; padding: 8px 2px; }
.chrono-vide { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center;
  color: var(--discret); font-size: 0.9rem; z-index: 3; }
.chrono-vide p { margin: 0 0 8px; }
.chrono-vide-act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.chrono-vide .chrono-btn { border: 1px solid var(--trait); background: var(--fond-carte); }

/* l'aperçu de toute la période : la densité, et la fenêtre — un cadre clair, le reste voilé */
.chrono-apercu { position: relative; flex: none; height: 58px; overflow: hidden; border: 1px solid var(--trait);
  border-radius: 10px; background: var(--fond-carte); touch-action: none; cursor: pointer; user-select: none;
  -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.chrono-densite { position: absolute; left: 0; top: 5px; width: 100%; height: 34px; display: block; }
.chrono-densite-barres { fill: var(--accent); opacity: 0.5; }
.chrono-apercu-axe span { position: absolute; left: 0; bottom: 3px; padding-left: 3px; font-size: 0.66rem;
  color: var(--discret); white-space: nowrap; border-left: 1px solid var(--trait); line-height: 1.1; }
.chrono-apercu-axe span.an { font-weight: 700; color: var(--texte); }
.chrono-fenetre { position: absolute; left: 0; top: 0; bottom: 0; border: 2px solid var(--accent); border-radius: 9px;
  box-shadow: 0 0 0 9999px var(--chrono-voile); cursor: grab; outline: none; }
.chrono-apercu.glisse .chrono-fenetre { cursor: grabbing; }
.chrono-poignee { position: absolute; top: 0; bottom: 0; width: 16px; cursor: ew-resize; touch-action: none; }
.chrono-poignee.g { left: -9px; }
.chrono-poignee.d { right: -9px; }
.chrono-poignee::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 22px; margin: -11px 0 0 -2.5px;
  border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 2px var(--fond-carte); }
/* LES COUPURES de l'aperçu (coque 86) : un vide long réduit à quelques pixels, hachuré,
   « ⫽ » au milieu et sa durée dans l'axe (« 987 ans ») ; une date isolée garde son
   segment étroit, son année dessous */
.chrono-coupures { position: absolute; left: 0; top: 0; bottom: 0; right: 0; pointer-events: none; }
.chrono-coupure { position: absolute; left: 0; top: 0; bottom: 18px; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, transparent 0 5px, var(--trait) 5px 6px); opacity: 0.9; }
.chrono-coupure-marque { font-size: 1rem; line-height: 1; color: var(--discret); background: var(--fond-carte); padding: 0 2px;
  border-radius: 4px; }
.chrono-apercu-axe span.ecart { padding-left: 0; font-style: italic; white-space: nowrap; }
.chrono-apercu-axe span.isole { padding-left: 0; }
/* sous l'aperçu : les dates isolées aux bords, la saisie de l'intervalle, les années */
.chrono-isoles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: -4px; }
.chrono-isoles-avant, .chrono-isoles-apres { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chrono-isoles-apres { margin-left: auto; justify-content: flex-end; }
.chrono-isoles .chrono-btn { border: 1px dashed var(--trait); background: var(--fond-carte); font-size: 0.8rem; min-height: 28px; }
.chrono-isoles .chrono-tout-isoles { border-style: solid; }
.chrono-isoles-reste { font-size: 0.76rem; color: var(--discret); }
.chrono-reglage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: -2px; }
.chrono-saisie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.chrono-champ { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.82rem; color: var(--discret); }
.chrono-saisie input[type="text"] { width: 7.5rem; padding: 5px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.chrono-saisie input[aria-invalid="true"] { border-color: var(--danger); }
.chrono-saisie > button.chrono-afficher { width: auto; margin: 0; padding: 0 14px; border: 1px solid var(--trait); border-radius: 999px;
  background: var(--fond-carte); color: var(--accent); font-weight: 600; }
.chrono-saisie-aide { flex-basis: 100%; font-size: 0.74rem; color: var(--discret); }
.chrono-saisie-aide.erreur { color: var(--danger); }
.chrono-annees { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 999px; background: var(--fond-barre);
  border: 1px solid var(--trait); font-variant-numeric: tabular-nums; }
.chrono-annee { min-height: 26px; padding: 0 9px; }
.chrono-annee.actif { background: var(--fond-carte); color: var(--texte); font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.chrono.tactile .chrono-isoles .chrono-btn, .chrono.tactile .chrono-annee { min-height: 44px; }
.chrono.tactile .chrono-saisie input[type="text"] { min-height: 44px; }
.chrono.tactile .chrono-apercu { height: 64px; }
.chrono.tactile .chrono-poignee { width: 44px; }
.chrono.tactile .chrono-poignee.g { left: -23px; }
.chrono.tactile .chrono-poignee.d { right: -23px; }

/* l'équivalent liste, sous l'aperçu */
.chrono-liste-titre { margin: 8px 0 0; font-size: 0.84rem; font-weight: 650; color: var(--discret); }
.chrono .vue-frise { margin-top: -4px; }
.chrono .vue-evt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.chrono .vue-evt .chrono-pt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--discret); align-self: center; }
.chrono .vue-evt:not(.t-note) .chrono-pt { border-radius: 1px; transform: rotate(45deg); }
.chrono .vue-evt time { min-width: 4.5em; }
.chrono .vue-lib { font-weight: 550; }
.chrono .chrono-genre { font-size: 0.76rem; }
.chrono.tactile .vue-note { min-height: 44px; }

/* les filtres : un panneau sous la barre ; sur un téléphone, une feuille au bas de l'écran */
.chrono-filtres { border: 1px solid var(--trait); border-radius: 12px; background: var(--fond-carte); padding: 10px 14px 14px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 22px; }
.chrono-filtres-tete { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; }
.chrono-filtres-tete h3 { margin: 0 auto 0 0; font-size: 0.95rem; }
.chrono-termine { border: 1px solid var(--trait); }
.chrono-groupe-filtre { border: none; margin: 0; padding: 0; min-width: 0; }
.chrono-groupe-filtre legend { padding: 0; margin-bottom: 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--discret); }
.chrono-pastilles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.chrono-pastille { min-height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--trait); background: var(--fond);
  color: var(--texte); font-size: 0.84rem; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.chrono-pastille .chrono-pt { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--discret); }
.chrono-pastille .chrono-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrono-pastille[aria-pressed="true"] { background: var(--tag-fond); border-color: var(--accent); color: var(--tag-encre); font-weight: 600; }
.chrono-n { color: var(--discret); font-size: 0.74rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.chrono-coche { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--discret); position: relative; flex: none; }
.chrono-pastille[aria-pressed="true"] .chrono-coche { background: var(--accent); border-color: var(--accent); }
.chrono-pastille[aria-pressed="true"] .chrono-coche::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 4px; height: 8px;
  border: solid var(--sur-accent, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.chrono-tags .aide { margin: 0; }
input.chrono-chercher-tag { margin-top: 8px; padding: 7px 10px; }
.chrono-liste-tags { list-style: none; margin: 6px 0 0; padding: 0; max-height: 200px; overflow-y: auto; }
.chrono-tag { display: flex; align-items: center; gap: 9px; margin: 0; padding: 5px 2px; color: var(--texte); font-size: 0.88rem; cursor: pointer; }
.chrono-tag input { margin: 0; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.chrono-tag .chrono-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chrono-tag .chrono-n { margin-left: auto; }

.chrono.tactile .chrono-btn { min-height: 44px; padding: 0 14px; font-size: 0.92rem; }
.chrono.tactile .chrono-btn.ic-seul { width: 44px; padding: 0; }
.chrono.tactile .chrono-seg { min-height: 44px; padding: 0 13px; font-size: 0.88rem; }
.chrono.tactile .chrono-pastille { min-height: 44px; padding: 0 14px; font-size: 0.92rem; }
.chrono.tactile .chrono-tag { min-height: 44px; }
.chrono.tactile .chrono-tag input { width: 20px; height: 20px; }

@media (max-width: 699px) {
  .chrono-periode { order: -1; flex-basis: 100%; font-size: 1.05rem; }
  .chrono-intervalles { order: 3; flex-basis: 100%; justify-content: space-between; }
  .chrono-intervalles .chrono-seg { flex: 1; padding: 0 4px; }
  .chrono-barre { gap: 8px 6px; }
  .chrono.tactile .chrono-auj-btn { padding: 0 8px; }
  .chrono-filtres-btn { margin-left: auto; }
  .chrono-filtres-btn .lib { display: none; }
  .chrono-filtres { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 74vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; border-bottom: none; padding: 14px 16px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.28); grid-template-columns: 1fr; }
  .chrono-filtres::before { content: ""; position: absolute; left: 50%; top: 6px; width: 36px; height: 4px; margin-left: -18px;
    border-radius: 2px; background: var(--trait); }
}
@media (min-width: 700px) { .chrono-termine { display: none; } }

/* L'IDENTITÉ (lot 1). Le QR code reste noir sur blanc, même en thème sombre : un
   lecteur lit mal un QR inversé. L'empreinte et le code se comparent d'un coup
   d'œil d'un écran à l'autre : chasse fixe, groupes séparés. */
.qr { margin: 12px 0; }
/* LE QR À SA TAILLE ENTIÈRE : qr.js pose une largeur multiple du nombre de modules
   (≥ 240 px, un module = un nombre entier de pixels CSS). Ramené à 220 px par CSS, un
   module faisait 4,15 px — des modules inégaux, que les lecteurs moins tolérants
   qu'OpenCV lisent mal. Noir sur BLANC pur dans tous les thèmes : rien ne le
   reteinte, ni le mode sombre, ni un contraste forcé. */
.qr svg { display: block; max-width: 100%; height: auto; border-radius: 4px; forced-color-adjust: none; }
.empreinte { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.06em; }
.code-appairage { font-size: 1.6rem; text-align: center; letter-spacing: 0.14em; }
.codes-liste { columns: 2; margin: 8px 0; padding-left: 1.6em; }
.video-appairage { width: 100%; max-height: 50vh; margin-top: 10px; border-radius: var(--rayon); background: #000; }
/* le texte de l'accord du calcul déporté, mot pour mot celui du Mac : ses retraits comptent */
.avertissement-deporte { white-space: pre-wrap; font-family: inherit; font-size: 0.9em; line-height: 1.45;
  margin: 8px 0; padding: 10px 12px; border-radius: var(--rayon); background: rgba(127, 127, 127, 0.1); }
#ecran-mdp-oubli, #ecran-reinitialisation, #ecran-facteur, #ecran-appairage { overflow-y: auto; }

/* --- lot 5 : l'autocomplétion [[, les modèles, l'export PDF (notes-outils.js) --- */

/* LA LISTE DES TITRES sous le curseur, celle du Mac (`#autoLien`) : posée sur la page,
   au-dessus des feuilles ; au doigt, des lignes assez hautes pour être touchées. */
.auto-lien { position: fixed; z-index: 60; min-width: 180px; max-width: min(340px, calc(100vw - 16px)); overflow: hidden;
  background: var(--fond-carte); border: 1px solid var(--trait); border-radius: 8px;
  box-shadow: 0 1px 2px rgba(30, 42, 50, 0.08), 0 6px 18px rgba(30, 42, 50, 0.12); }
.auto-lien .al-item { padding: 6px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; color: var(--texte); }
html:not([data-bureau]) .auto-lien .al-item { padding: 10px 12px; font-size: 15px; }
.auto-lien .al-item.sel, .auto-lien .al-item:hover { background: var(--tag-fond); color: var(--tag-encre); }

/* Les modèles : une ligne par modèle — son nom (qu'on renomme en place), deux lignes
   de son texte, puis « Nouvelle note » et « Supprimer » */
.modeles-liste { list-style: none; margin: 0 0 14px; padding: 0; }
.modeles-liste li { padding: 10px 0; border-bottom: 1px solid var(--trait); }
.modeles-liste li.vide-sec { color: var(--discret); font-size: 0.9rem; }
.modeles-liste .modele-nom { width: 100%; padding: 6px 10px; font-weight: 600; border: 1px solid transparent;
  background: none; border-radius: 8px; font-size: 16px; }
.modeles-liste .modele-nom:hover, .modeles-liste .modele-nom:focus { border-color: var(--trait); background: var(--fond-carte); }
.modeles-liste .modele-apercu { margin: 2px 10px 6px; color: var(--discret); font-size: 0.82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modele-actes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 10px; }
.modele-actes .modele-question { font-size: 0.85rem; color: var(--danger); }
.modele-actes .action, .form-modele .action, .actions-export .action { padding: 8px 14px; border-radius: var(--rayon);
  background: var(--fond-carte); border: 1px solid var(--trait); color: var(--accent); font-weight: 600; font-size: 0.88rem; }
.modele-actes .action.danger { color: var(--danger); border-color: var(--danger); }
html:not([data-bureau]) .modele-actes .action, html:not([data-bureau]) .form-modele .action,
html:not([data-bureau]) .actions-export .action { min-height: 44px; }
.ligne-modele { display: flex; gap: 8px; align-items: center; }
.ligne-modele input { flex: 1; min-width: 0; }
.form-modele label { margin-top: 4px; }
@media (min-width: 700px) { .voile > .feuille.feuille-courte { height: auto; max-height: min(86vh, 100%); } }
.actions-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 14px; }

/* L'EXPORT PDF (`#impression.imp-export`) : un document à partager — le titre en
   Fraunces (Georgia à défaut), la date et le classement en petit, le rendu complet ;
   les schémas et les photos en pleine largeur, jamais coupés d'une page à l'autre. */
@media print {
  #impression.imp-export { font-family: "Nunito Sans", "Segoe UI", system-ui, -apple-system, sans-serif; }
  #impression.imp-export .imp-titre { font-family: "Fraunces", Georgia, serif; font-size: 22pt; line-height: 1.2; }
  #impression.imp-export .imp-sous { margin-bottom: 8mm; padding-bottom: 3mm; border-bottom: 1px solid #ccc; }
  #impression.imp-export .imp-corps h1, #impression.imp-export .imp-corps h2,
  #impression.imp-export .imp-corps h3 { font-family: "Fraunces", Georgia, serif; break-after: avoid; }
  #impression.imp-export img { display: block; width: 100%; height: auto; max-height: none; margin: 3mm 0;
    break-inside: avoid; border: 0; }
  #impression.imp-export table { width: 100%; break-inside: auto; }
  #impression.imp-export tr { break-inside: avoid; }
  #impression.imp-export th { background: #eef1f4; }
}

/* ===================================================== LES SAISIES DOUBLES (coque 87)
   Un secret qu'on CHOISIT se tape deux fois (app.js, `amenagerSaisies`) : l'œil dans le
   premier champ, l'indicateur « identiques / différents » à droite du second. */
.champ-secret { position: relative; }
.champ-secret > input { padding-right: 52px; }
.champ-secret > input[data-double] { padding-right: 8.2rem; }
.champ-secret .oeil { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 44px; height: 40px; border-radius: 8px; color: var(--discret); }
.champ-secret .oeil[aria-pressed="true"] { color: var(--accent); }
.champ-secret .oeil:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.concordance { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); font-size: 0.82rem;
  font-weight: 600; white-space: nowrap; pointer-events: none; }
.concordance[data-etat="identiques"] { color: var(--ok); }
.concordance[data-etat="differents"] { color: var(--danger); }

/* LA JAUGE DE LA CLÉ : une barre qui avance (transition), trois couleurs ET trois mots */
.jauge-cle { --part: 0; --jauge: var(--trait); margin: 8px 0 2px; }
.jauge-cle[data-niveau="faible"] { --jauge: var(--danger); }
.jauge-cle[data-niveau="moyenne"] { --jauge: var(--avert); }
.jauge-cle[data-niveau="forte"] { --jauge: var(--ok); }
.jauge-piste { height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.jauge-barre { display: block; height: 100%; width: 100%; border-radius: 3px; background: var(--jauge);
  transform: scaleX(var(--part)); transform-origin: left center; transition: transform .35s ease, background-color .35s ease; }
.jauge-criteres { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 6px 0 0; padding: 0;
  list-style: none; font-size: 0.8rem; color: var(--discret); }
.jauge-criteres li.ok { color: var(--ok); font-weight: 600; }
.jauge-coche { display: inline-block; width: 1em; text-align: center; }
.jauge-compte { font-variant-numeric: tabular-nums; opacity: 0.85; }
.jauge-etat { margin: 2px 0 0; font-size: 0.8rem; color: var(--discret); }
.jauge-cle[data-niveau="faible"] .jauge-etat { color: var(--danger); }
.jauge-cle[data-niveau="forte"] .jauge-etat { color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .jauge-barre { transition: none; } }

/* LA DERNIÈRE ÉTAPE d'un compte né par Google : le bandeau, la clé, son bouton — et
   rien d'autre de l'écran d'ouverture */
.etape-cle { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 6px; padding: 14px 16px;
  border: 1px solid var(--ok); border-radius: 14px; background: var(--fond-carte); }
.etape-cle .etape-coche { flex: none; color: var(--ok); }
.etape-cle p { margin: 0; }
.etape-cle .etape-numero { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--discret); }
.etape-cle .etape-titre { font-size: 1.15rem; font-weight: 700; color: var(--ok); }
.etape-cle .etape-suite { margin-top: 2px; font-weight: 600; }
.etape-cle .aide { margin-top: 6px; }
#form-ouverture[data-etape="cle"] > :not(#etape-cle):not(#bloc-phrase):not(#bouton-ouvrir):not(#erreur-ouverture) {
  display: none; }
#form-ouverture[data-etape="cle"] #aide-phrase-perdue { display: none; }

/* LE BOUTON D'UN FOURNISSEUR D'IDENTITÉ. Google : sa charte « Sign in with Google »
   (fond blanc, bordure #747775, texte #1F1F1F ; en sombre #131314, #8E918F, #E3E3E3),
   son « G » de 20 px, 12 px de marge et 10 px entre le logo et le texte, 40 px de haut
   au moins. La police est celle du système : la page n'en charge aucune d'ailleurs. */
.oidc-boutons { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bouton-oidc { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px;
  padding: 10px 12px; border-radius: 22px; border: 1px solid var(--trait); background: var(--fond-carte);
  color: var(--texte); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; }
.bouton-oidc.oidc-google { border-color: var(--google-trait); background: var(--google-fond); color: var(--google-texte); }
.bouton-oidc .oidc-logo { flex: none; width: 20px; height: 20px; }
.bouton-oidc.oidc-generique .oidc-logo { color: var(--accent); }
.bouton-oidc:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .bouton-oidc:hover { filter: brightness(0.97); } }

/* ce que fait chaque passkey, dit sur sa ligne */
.passkey-role { display: inline-block; margin-left: 2px; padding: 0 8px; border: 1px solid var(--trait); border-radius: 10px;
  font-size: 0.75rem; color: var(--discret); white-space: nowrap; }
.passkey-role.ouvre { border-color: var(--ok); color: var(--ok); }

/* L'ÉCRAN DE VERROUILLAGE (app.js, `ajusterFormulaire`) : seule la clé est attendue ;
   l'adresse se lit comme un texte, et ce qui ne sert qu'à une première connexion part */
#form-ouverture[data-verrou="1"] :is(#bloc-memoriser, #oidc-ouverture, #bascule-inscription, #bascule-mdp-oubli,
  #bascule-appairage, #lien-decouvrir) { display: none !important; }
#form-ouverture[data-verrou="1"] #identifiant { border-color: transparent; background: transparent; box-shadow: none;
  padding-left: 0; font-weight: 600; color: var(--texte); cursor: default; }