/* RF Notes — LE MODE BUREAU, à l'allure de la version ordinateur (lot 5).
   Chargé après style.css. Tout est sous `html[data-bureau]` (≥ 1280 px, pointeur fin) :
   la tablette et le téléphone gardent la page web telle qu'elle est. Les valeurs sont
   celles de `notes/page.html`, règle pour règle — la police, les tailles, les groupes
   en pilule étiquetés, la liste plate, l'en-tête —, pour que l'utilisateur retrouve
   sur la page web l'écran qu'il préfère. AUCUNE POLICE N'EST TÉLÉCHARGÉE : la page du
   Mac nomme Nunito Sans et Fraunces sans les embarquer (le dépôt n'en a pas les
   fichiers) ; installées sur l'ordinateur, elles servent ici aussi, sinon la police du
   système et Georgia, exactement comme là-bas. Jamais un service de polices tiers :
   la politique de la page et la confidentialité l'interdisent. */

/* Les éléments du bureau n'existent pas ailleurs */
.entete-bureau, .lbl-bureau, .lib-bureau, .grp-meta-bureau { display: none; }

/* Les deux teintes du Mac que la palette de la page n'avait pas : l'encre pâle des
   étiquettes de groupe, et le fond de la note choisie dans la liste */
html[data-bureau] { --b-encre3: #7C8A93; --b-choisie: #DCE7F6;
  --t-titre: 15px; --t-resume: 13px; --t-meta: 12px; }
@media (prefers-color-scheme: dark) {
  html[data-bureau]:not([data-theme="clair"]) { --b-encre3: #8593A0; --b-choisie: #22303F; }
}
html[data-bureau][data-theme="sombre"] { --b-encre3: #8593A0; --b-choisie: #22303F; }

/* le corps à 15 px, la racine à 16 : les tailles en rem (étiquettes, boutons, titre)
   sont celles du Mac, dont la racine garde la taille du navigateur */
html[data-bureau] { font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif; font-size: 16px; }
html[data-bureau] body { font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif; font-size: 15px; line-height: 1.45; }

/* LA GRILLE : l'en-tête sur toute la largeur, puis la liste, la note, le panneau. Ce qui
   est caché ne prend pas de colonne (`auto`) : replier la liste rend la place à la note. */
html[data-bureau][data-espace] body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr); }
html[data-bureau][data-espace] .entete-bureau { display: flex; grid-column: 1 / -1; grid-row: 1; }
html[data-bureau][data-espace] #ecran-liste { grid-column: 1; grid-row: 2; width: var(--col-liste); height: auto;
  min-height: 0; background: var(--fond-carte); }
html[data-bureau][data-espace] #ecran-editeur, html[data-bureau][data-espace] .ecran-vide { grid-column: 2; grid-row: 2;
  height: auto; min-height: 0; }
html[data-bureau][data-espace] .panneau-note { grid-column: 3; grid-row: 2; width: var(--col-panneau); min-height: 0;
  background: var(--fond); }

/* --- l'en-tête (`header` du Mac) --- */
.entete-bureau { flex-direction: column; gap: 8px; padding: 10px 16px 12px; border-bottom: 1px solid var(--trait);
  background: var(--fond); min-width: 0; }
.entete-bureau .eb-haut { display: flex; align-items: center; gap: 10px 14px; }
.entete-bureau .eb-marque { flex: 1 1 0; min-width: 0; }
/* le nom de l'application : le BANDEAU d'« inspire. » (style.css, `.marque`) à la place
   du « Notes » en Fraunces, à 36 px — la hauteur que prenaient le titre et sa ligne */
.entete-bureau .marque-bandeau { --h-infini: 36px; }
.entete-bureau .eb-sous { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; min-width: 0; }
.entete-bureau .eb-marque small { display: block; font-family: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  font-weight: 400; font-size: 0.78rem; line-height: 1.2; color: var(--b-encre3); letter-spacing: 0; }
.entete-bureau .eb-centre { flex: 0 1 auto; }
.entete-bureau .eb-droite { flex: 1 1 0; min-width: 0; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.entete-bureau .eb-outils { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* « Notes » à gauche, « Outils » poussé à droite sur la MÊME ligne : la marge auto
   le pousse aussi quand il passe à la ligne, faute de largeur */
.entete-bureau #eb-outils-g { margin-left: auto; }
/* faute de place pour les deux sur une ligne (notes-bureau.js, `ajusterOutils`) :
   « Outils » en icônes, l'infobulle de chaque bouton dit le geste */
.entete-bureau.eb-outils-icones #eb-outils-g > button > span { display: none; }
/* en second recours, « Notes » aussi — sauf « Nouvelle », qui garde son mot */
.entete-bureau.eb-notes-icones #eb-notes > button:not(#fab-nouvelle) > span:not(.lbl) { display: none; }
/* un bouton de capacité absente (`hidden`) ne prend pas de place : la règle des
   boutons de groupe, qui pose `display`, l'emporterait sur l'attribut */
.entete-bureau [hidden] { display: none !important; }
.entete-bureau .eb-sync { display: inline-flex; align-items: center; gap: 6px; }

/* LES GROUPES EN PILULE, une étiquette en capitales et des boutons sans bordure (`.grp`) */
html[data-bureau] .grp-b, html[data-bureau] .grp-actions, html[data-bureau] .grp-vue {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--trait);
  border-radius: 999px; background: var(--fond-barre); }
html[data-bureau] .grp-b .lbl, html[data-bureau] .lbl-bureau { display: inline; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--b-encre3); padding: 0 6px 0 8px; white-space: nowrap; }
.entete-bureau .grp-b > button, .entete-bureau .grp-b .menu-page > button, .entete-bureau .eb-droite > button,
.entete-bureau .eb-sync > button {
  font: inherit; font-size: 0.8rem; font-weight: 600; line-height: 1.45; color: var(--discret); background: transparent;
  border: 1px solid transparent; border-radius: 999px; padding: 4px 9px; width: auto; height: auto; min-width: 0;
  display: inline-flex; align-items: center; gap: 5px; box-shadow: none; white-space: nowrap; }
.entete-bureau .grp-b > button:hover, .entete-bureau .grp-b .menu-page > button:hover { background: var(--fond-carte);
  border-color: var(--trait); color: var(--texte); }
.entete-bureau button .ic { width: 15px; height: 15px; min-width: 15px; flex: none; }
.entete-bureau .grp-b > button.actif { background: var(--fond-carte); border-color: var(--accent); color: var(--accent); }
html[data-bureau] .entete-bureau .lib-bureau { display: inline; }
/* le micro qui enregistre reste rouge et respire, dans le groupe comme en bouton flottant */
.entete-bureau .fab-mic.enr { background: var(--danger); color: #fff; }
.entete-bureau .fab:active { transform: none; }
/* le thème et le compte : des pilules bordées, en haut à droite (« Thème : auto » du Mac) */
.entete-bureau .eb-droite > button { background: var(--fond-carte); border-color: var(--trait); font-size: 0.78rem;
  padding: 0.4em 0.9em; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.entete-bureau .eb-droite > button:hover { color: var(--texte); border-color: var(--b-encre3); }
/* la recherche et le filtre, dans le groupe « Chercher » */
.entete-bureau .champ-recherche { flex: none; width: 320px; max-width: 42vw; }
.entete-bureau .champ-recherche input[type="search"] { font: inherit; font-size: 0.8rem; color: var(--texte);
  padding: 4px 30px 4px 11px; border-radius: 999px; border: 1px solid var(--trait); background: var(--fond-carte); }
.entete-bureau .effacer-recherche { width: 22px; height: 22px; margin-top: -11px; right: 5px; background: none; }
.entete-bureau select { font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--discret); max-width: 240px;
  background: var(--fond-carte); border: 1px solid var(--trait); border-radius: 999px; padding: 5px 11px; }
/* LA PASTILLE DE SYNCHRONISATION (`#pastilleSync` du Mac) : une pilule, son point de couleur */
.entete-bureau .etat-sync { margin: 0; gap: 7px; font-size: 12px; color: var(--discret); border: 1px solid var(--trait);
  border-radius: 999px; padding: 4px 11px 4px 9px; background: var(--fond-carte); white-space: nowrap; }
.entete-bureau .etat-sync:hover { background: var(--fond-barre); }
.entete-bureau .etat-sync::before { width: 9px; height: 9px; }
.entete-bureau .eb-sync > #bouton-appareils { border-color: var(--trait); background: var(--fond-carte); padding: 3px 8px; }
.entete-bureau .eb-sync > #bouton-appareils:hover { border-color: var(--accent); color: var(--accent); }

/* Ce que l'en-tête remplace : la tête de la liste (recherche, thème, compte), les
   boutons flottants (le + et le micro sont dans « Notes »), « Liste » et « Infos » de
   la barre (les ENCOCHES du Mac les remplacent, au bord de la note) */
html[data-bureau][data-espace] #ecran-liste > .barre,
html[data-bureau][data-espace] .fab-groupe, html[data-bureau] #bouton-liste, html[data-bureau] #bouton-panneau {
  display: none !important; }
html[data-bureau][data-espace="editeur"] #ecran-editeur { --fab-reserve: 0px; }
html[data-bureau][data-espace="editeur"] .encoche-liste,
html[data-bureau][data-largeur="large"][data-espace="editeur"] .encoche-panneau { display: flex; }
html[data-bureau] .encoche:hover { color: var(--accent); }

/* --- la colonne de la liste (`#colonneListe` du Mac) --- */
/* LES ONGLETS Notes / Corbeille en tête de la liste, comme sur la tablette : ils
   changent la liste, c'est là qu'on les cherche. Au style des pilules du bureau ;
   « Carnets » a son bouton dans « Outils », l'état de la synchronisation sa pastille
   dans l'en-tête */
html[data-bureau] #ecran-liste > .onglets { gap: 4px; padding: 8px 10px; background: var(--fond-carte); }
html[data-bureau] #ecran-liste > .onglets .onglet { flex: 1; font-size: 0.8rem; font-weight: 600; color: var(--discret);
  background: var(--fond-carte); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 9px; }
html[data-bureau] #ecran-liste > .onglets .onglet:hover { color: var(--texte); background: var(--fond-barre); }
html[data-bureau] #ecran-liste > .onglets .onglet.actif { background: var(--fond-barre); border-color: var(--accent); color: var(--accent); }
html[data-bureau] #ecran-liste > .onglets #bouton-portefeuilles { display: none; }
html[data-bureau] .outils-liste { padding: 8px 10px var(--ecart-outils-liste); gap: 4px; border-bottom: 1px solid var(--trait); background: var(--fond-carte); }
html[data-bureau] .outils-liste .seg { flex: 1; border: 0; background: none; gap: 4px; overflow: visible; }
html[data-bureau] .outils-liste .seg button, html[data-bureau] .outils-liste .rond.petit {
  font-size: 0.8rem; font-weight: 600; color: var(--discret); background: var(--fond-carte); border: 1px solid var(--trait);
  border-radius: 999px; padding: 4px 9px; height: auto; }
html[data-bureau] .outils-liste .seg button { flex: 1; }
html[data-bureau] .outils-liste .seg button + button { border-left: 1px solid var(--trait); }
html[data-bureau] .outils-liste .seg button.actif { background: var(--fond-barre); border-color: var(--accent); color: var(--accent); }
html[data-bureau] .outils-liste .rond.petit { width: auto; min-width: 32px; }
html[data-bureau] .outils-liste .rond.petit[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--fond-barre); }
html[data-bureau] .outils-liste select { font-size: 0.8rem; font-weight: 600; color: var(--discret); border-radius: 999px; padding: 4px 9px; }
html[data-bureau] .outils-liste .espace { display: none; }
/* une ligne comme `#listeModes` du Mac — Liste, Arbre, le tri en bouton, la sélection,
   le flou */
html[data-bureau] .outils-liste #bouton-selection .lib { display: none; }
html[data-bureau] .outils-liste #bouton-selection { padding: 4px 9px; }
html[data-bureau] #etiquettes { padding: 8px 10px; border-bottom: 1px solid var(--trait); background: var(--fond-carte); }
/* LA LISTE PLATE du Mac : des lignes, pas des cartes ; la note ouverte sur fond bleu pâle */
html[data-bureau] .liste { padding: 0 0 16px; background: var(--fond-carte); }
html[data-bureau] .liste > li:where(:not(.dossier):not(.enfants):not(.dossier-ajout):not(.dossier-saisie)),
html[data-bureau] .liste.arbre li.feuille {
  margin: 0; padding: 10px 14px; border: 0; border-bottom: 1px solid var(--trait); border-radius: 0; background: none; }
html[data-bureau] .liste li:not(.dossier):hover { background: var(--fond-barre); }
html[data-bureau] .liste li.choisie, html[data-bureau] .liste li.choisie:hover { background: var(--b-choisie);
  border-color: var(--trait); box-shadow: none; }
html[data-bureau] .liste li.selectionnee { background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: inset 3px 0 0 var(--accent); }
html[data-bureau] .liste.arbre li.feuille { padding-top: 7px; padding-bottom: 7px; border-bottom: none; }
html[data-bureau] .liste .apercu { color: var(--discret); }
html[data-bureau] .liste .meta { color: var(--b-encre3); margin-top: 4px; }
html[data-bureau] .filtre-actif, html[data-bureau] .barre-selection { margin: 8px 10px 0; }

/* --- la barre de la note (`#barreNote` du Mac) : le groupe « Note », puis le
   classement et le groupe « Vue » sur la ligne du dessous --- */
html[data-bureau][data-espace] #ecran-editeur > .barre-action { height: auto; flex-wrap: wrap; gap: 6px 8px;
  padding: 8px 14px; background: var(--fond); border-bottom: 0; }
html[data-bureau] .barre-action .grp-actions { flex: 0 1 auto; margin-left: 0; flex-wrap: wrap; overflow: visible; }
html[data-bureau] .barre-action .grp-actions .rond.libelle,
html[data-bureau] .barre-action.mots-serres .grp-actions .rond.libelle,
html[data-bureau] .barre-action.sans-mots .grp-actions .rond.libelle {
  flex-direction: row; gap: 5px; width: auto; min-width: 0; height: auto; padding: 4px 9px; border-radius: 999px;
  border: 1px solid transparent; background: transparent; color: var(--discret); }
html[data-bureau] .barre-action .grp-actions .rond.libelle .lib,
html[data-bureau] .barre-action.mots-serres .grp-actions .rond.libelle .lib,
html[data-bureau] .barre-action.sans-mots .grp-actions .rond.libelle .lib {
  display: inline; font-size: 0.8rem; font-weight: 600; letter-spacing: 0; line-height: 1.45; }
html[data-bureau] .barre-action .grp-actions .rond.libelle .ic { width: 15px; height: 15px; min-width: 15px; }
html[data-bureau] .barre-action .grp-actions .rond.libelle:hover { background: var(--fond-carte); border-color: var(--trait);
  color: var(--texte); }
html[data-bureau] .barre-action .grp-actions .rond.libelle.actif,
html[data-bureau] #bouton-verrou.actif, html[data-bureau] #bouton-confidentiel.actif {
  background: var(--fond-carte); border-color: var(--accent); color: var(--accent); }
html[data-bureau] .barre-action .grp-actions .menu-page { display: inline-flex; }
/* une colonne de note étroite (1280 px, panneau ouvert) : le groupe « Note » garde UNE
   ligne — une pilule sur deux lignes ne se lit plus comme un groupe — en serrant ses
   boutons et en taisant son étiquette, comme le Mac replie ses barres */
@container (max-width: 780px) {
  html[data-bureau] .barre-action .grp-actions .rond.libelle,
  html[data-bureau] .barre-action.mots-serres .grp-actions .rond.libelle,
  html[data-bureau] .barre-action.sans-mots .grp-actions .rond.libelle { padding: 4px 6px; gap: 4px; }
  html[data-bureau] .barre-action .grp-actions .lbl-bureau { display: none; }
}
html[data-bureau] #ligne-meta { flex-wrap: wrap; gap: 8px 14px; padding: 0 14px 8px; overflow: visible;
  background: var(--fond); border-bottom: 1px solid var(--trait); }
html[data-bureau] .grp-meta-bureau { display: inline-flex; flex: 1 1 220px; min-width: 220px; gap: 8px; flex-wrap: nowrap; }
html[data-bureau] .grp-meta-bureau .tags-note { flex: 0 1 auto; min-width: 0; overflow: hidden; }
html[data-bureau] .grp-meta-bureau input { flex: 1 1 140px; min-width: 90px; font: inherit; font-size: 0.8rem; color: var(--texte);
  background: var(--fond-carte); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 11px; }
html[data-bureau] .grp-meta-bureau select { flex: 0 1 180px; min-width: 110px; max-width: 40%; font: inherit; font-size: 0.8rem; font-weight: 600;
  color: var(--discret); background: var(--fond-carte); border: 1px solid var(--trait); border-radius: 999px; padding: 5px 11px; }
html[data-bureau] .grp-meta-bureau .tags-note:not(:empty) { padding-left: 6px; }
html[data-bureau] #ligne-meta .grp-vue { margin-left: auto; }
html[data-bureau] .grp-vue .seg { border: 0; background: none; gap: 4px; overflow: visible; }
html[data-bureau] .grp-vue .seg button, html[data-bureau] .barre-action .grp-vue .seg button {
  font-size: 0.8rem; font-weight: 600; color: var(--discret); padding: 4px 9px; border: 1px solid transparent;
  border-radius: 999px; background: transparent; }
html[data-bureau] .grp-vue .seg button + button { border-left: 1px solid transparent; }
html[data-bureau] .grp-vue .seg button:hover { background: var(--fond-carte); border-color: var(--trait); color: var(--texte); }
html[data-bureau] .grp-vue .seg button.actif { background: var(--fond-carte); border-color: var(--accent); color: var(--accent); }

/* --- la note : la même police à l'écriture et à la lecture, 15,5 px, interligne 1,65 ;
   le texte sur le fond de la page, l'aperçu sur la carte blanche ; les titres en Fraunces --- */
html[data-bureau] #ecran-editeur #texte, html[data-bureau] #ecran-editeur #apercu {
  font-family: inherit; font-size: 15.5px; line-height: 1.65; padding: 18px 30px; }
html[data-bureau] #ecran-editeur #texte { background: var(--fond); }
html[data-bureau] #ecran-editeur #apercu { background: var(--fond-carte); }
html[data-bureau] .apercu-md h1, html[data-bureau] .apercu-md h2, html[data-bureau] .apercu-md h3 {
  font-family: "Fraunces", Georgia, serif; line-height: 1.2; margin: .6em 0 .3em; }
html[data-bureau] .apercu-md h1 { font-size: 2em; }
html[data-bureau] .apercu-md h2 { font-size: 1.5em; margin-top: 1.5em; }
html[data-bureau] .apercu-md h3 { font-size: 1.17em; margin-top: 1.1em; }
html[data-bureau] .apercu-md h2:first-child, html[data-bureau] .apercu-md h3:first-child { margin-top: .2em; }
html[data-bureau] .apercu-md ul.taches li { display: flex; align-items: flex-start; gap: 8px; margin: .18em 0; }
html[data-bureau] .apercu-md ul.taches input { flex: none; margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--accent); }
html[data-bureau] .apercu-md table { margin: .8em 0; font-size: .95em; }
html[data-bureau] .apercu-md th, html[data-bureau] .apercu-md td { padding: 5px 10px; }
html[data-bureau] .apercu-md code { padding: 5px; }
html[data-bureau] .apercu-md hr { border: 0; border-top: 1px solid var(--trait); margin: 1em 0; }
html[data-bureau] .memo { padding: 7px 22px 8px; }

/* --- le panneau (`#panneauCarte` du Mac) --- */
html[data-bureau] .panneau-tete { padding: 8px 12px; }
html[data-bureau] .panneau-tete .titre-panneau { font-size: 0.82rem; font-weight: 700; letter-spacing: 0;
  text-transform: none; color: var(--texte); }
html[data-bureau] .meta-sec > summary { padding: 5px 12px; background: var(--fond-barre); font-size: 0.72rem;
  letter-spacing: .04em; color: var(--b-encre3); }
html[data-bureau] .meta-corps { padding: 8px 12px; font-size: 13px; }

/* le menu « … » des Outils ne redit pas ce qui a son bouton dans l'en-tête */
html[data-bureau] #menu-carnet .double-bureau { display: none; }