/* barre/barre.css — la barre du haut : zones, boutons, menus et paliers de place
   Quatre zones, de gauche à droite : le tableau courant (logo, nom, Tableau / Agenda, pastilles des tableaux, puis
   .topbar-affichage : zoom du tableau et membres connectés), la recherche, les outils du tableau, puis « moi »
   (menu ⋯, Paramètres, avatar du profil).
   Dans le HTML, la vue, la recherche et les outils sont regroupés dans .topbar-ligne2 (transparente sur une ligne).
   Quand la place manque, barre/disposition.js pose data-densite sur .topbar (premier palier qui tient) :
     0  tout est écrit ;
     1  les outils perdent leur texte (icône seule, le nom reste dans l'infobulle) ;
     2  la recherche se replie en loupe (elle se déplie au clic, ou tant qu'elle contient un texte) ;
     3  deux lignes : en haut le tableau courant (avec zoom et présence) et « moi », en bas la vue, la recherche et les outils ;
     4  deux lignes serrées (téléphone) : Tableau / Agenda en icônes, nom du tableau plus étroit, recherche en loupe,
        nom du tableau sur une ligne, sans le logo, le bouton Vue éclatée (Ctrl+↓ reste) ni le « + » des tableaux (il est
        dans « Gérer les tableaux »), les 6 pastilles des tableaux toujours visibles, zoom réduit à − et +, présence sans sa propre pastille ; les outils défilent.
   Chargé juste avant interface/surcharges.css. Toutes les tailles suivent --ui-scale-factor (75 % / 100 %). */
 /* ==================== BARRE SUPÉRIEURE ==================== */
 .topbar{
 display:flex; align-items:center; flex-wrap:nowrap; gap:calc(8px * var(--ui-scale-factor));
 min-height:calc(38px * var(--ui-scale-factor)); box-sizing:border-box;
 padding:calc(5.5px * var(--ui-scale-factor)) calc(10px * var(--ui-scale-factor));
 border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);
 background:var(--surface); flex-shrink:0; position:relative;
 }
 .topbar .tb-icone{width:calc(13px * var(--ui-scale-factor)); height:calc(13px * var(--ui-scale-factor)); flex:none; display:block;}

 /* ---- Zone 1 : le tableau courant ---- */
 .brand{display:flex; align-items:center; gap:calc(5px * var(--ui-scale-factor)); min-width:0; flex:none;}
 .brand-mark{
 width:calc(21px * var(--ui-scale-factor)); height:calc(21px * var(--ui-scale-factor)); border-radius:calc(6px * var(--ui-scale-factor)); flex-shrink:0;
 background:linear-gradient(155deg,var(--accent),var(--accent-dim));
 display:flex; align-items:center; justify-content:center;
 box-shadow:0 calc(2px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)) color-mix(in srgb,var(--accent) 28%,transparent);
 }
 .board-title-input{
 background:transparent; border:calc(1px * var(--ui-scale-factor)) solid transparent; border-radius:calc(5px * var(--ui-scale-factor));
 font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-weight:650; font-size:calc(12.5px * var(--ui-scale-factor)); line-height:1.18;
 color:var(--text); padding:calc(3.75px * var(--ui-scale-factor)) calc(5px * var(--ui-scale-factor)); width:calc(124px * var(--ui-scale-factor)); min-width:calc(45px * var(--ui-scale-factor)); max-width:46vw;
 resize:none; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; box-sizing:border-box;
 /* Hauteur en lignes (--board-title-lines, posé par fitBoardTitle) : elle suit aussitôt la taille d'interface. */
 height:calc(var(--board-title-lines,1) * 1.18em + calc(9.5px * var(--ui-scale-factor)));
 }
 .board-title-input:hover{border-color:var(--border);}
 .board-title-input:focus{outline:none; border-color:var(--accent); background:var(--surface-2);}
 .view-switch{
 display:flex; flex:none; background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);
 border-radius:calc(7px * var(--ui-scale-factor)); padding:calc(2px * var(--ui-scale-factor)); gap:calc(1.5px * var(--ui-scale-factor));
 }
 .view-btn{
 display:inline-flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor));
 border:none; background:transparent; color:var(--text-dim); cursor:pointer; white-space:nowrap;
 font:600 calc(10px * var(--ui-scale-factor))/1 system-ui; padding:calc(4.5px * var(--ui-scale-factor)) calc(8.5px * var(--ui-scale-factor)); border-radius:calc(5px * var(--ui-scale-factor));
 transition:background .15s ease,color .15s ease;
 }
 .view-btn .tb-icone{width:calc(11.5px * var(--ui-scale-factor)); height:calc(11.5px * var(--ui-scale-factor));}
 .view-btn:hover{color:var(--text);}
 .view-btn.active{background:var(--surface-3); color:var(--text); box-shadow:0 calc(1px * var(--ui-scale-factor)) calc(2px * var(--ui-scale-factor)) rgba(0,0,0,.25);}

 /* ---- Zone 2 : la recherche ---- */
 .topbar-search{
 display:flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor)); box-sizing:border-box;
 height:calc(25px * var(--ui-scale-factor)); margin-left:auto;
 flex:0 1 calc(200px * var(--ui-scale-factor)); min-width:calc(120px * var(--ui-scale-factor)); max-width:calc(240px * var(--ui-scale-factor));
 background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); border-radius:calc(7px * var(--ui-scale-factor)); padding:0 calc(7px * var(--ui-scale-factor));
 transition:border-color .15s ease,box-shadow .15s ease;
 }
 .topbar-search-icone{display:flex; color:var(--text-faint); flex:none;}
 .topbar-search-icone .tb-icone{width:calc(12px * var(--ui-scale-factor)); height:calc(12px * var(--ui-scale-factor));}
 .topbar-search input{width:100%; min-width:0; background:transparent; border:0; outline:none; color:var(--text); font:inherit; font-size:calc(10.5px * var(--ui-scale-factor)); line-height:1.3; padding:calc(4px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor));}
 .topbar-search input::placeholder{color:var(--text-faint);}
 .topbar-search input::-webkit-search-cancel-button{display:none;}
 .topbar-search:focus-within{border-color:var(--accent); box-shadow:0 0 0 calc(2px * var(--ui-scale-factor)) color-mix(in srgb,var(--accent) 22%,transparent);}

 /* ---- Zone 3 : les outils du tableau ---- */
 .topbar-outils{display:flex; align-items:center; gap:calc(2px * var(--ui-scale-factor)); flex:none;}
 .history-group{display:flex; gap:calc(1px * var(--ui-scale-factor));}
 .topbar-separateur{width:calc(1px * var(--ui-scale-factor)); height:calc(15px * var(--ui-scale-factor)); background:var(--border-soft); margin:0 calc(3px * var(--ui-scale-factor)); flex:none;}
 .topbar .tb-btn{
 position:relative; display:inline-flex; align-items:center; justify-content:center; gap:calc(4.5px * var(--ui-scale-factor));
 height:calc(25px * var(--ui-scale-factor)); min-width:calc(25px * var(--ui-scale-factor)); box-sizing:border-box;
 padding:0 calc(7px * var(--ui-scale-factor)); border:calc(1px * var(--ui-scale-factor)) solid transparent; border-radius:calc(6px * var(--ui-scale-factor));
 background:transparent; color:var(--text-dim); font:600 calc(10px * var(--ui-scale-factor))/1 system-ui; white-space:nowrap; cursor:pointer;
 transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease;
 }
 .topbar .tb-btn:hover{background:var(--surface-2); color:var(--text);}
 .topbar .tb-btn:focus-visible{outline:calc(2px * var(--ui-scale-factor)) solid color-mix(in srgb,var(--accent) 70%,transparent); outline-offset:calc(1px * var(--ui-scale-factor));}
 .topbar .tb-btn:disabled{opacity:.32; cursor:default; background:transparent;}
 .topbar .history-btn{padding:0;}
 /* Fenêtre ouverte (Listes, Étiquettes, Règles), Paramètres ouverts, menu ouvert, Compacter enfoncé : bouton enfoncé. */
 .topbar .tb-btn.window-open,.topbar .tb-btn.settings-open,.topbar .tb-btn[aria-expanded="true"],.topbar .tb-btn.is-pressed{
 background:color-mix(in srgb,var(--surface-2) 72%,#000 28%); border-color:color-mix(in srgb,var(--border) 78%,#000 22%); color:var(--text);
 box-shadow:inset 0 calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor)) rgba(0,0,0,.28);
 }
 .topbar .tb-btn.is-pressed{border-color:color-mix(in srgb,var(--accent) 65%,var(--border)); color:var(--accent);}
 .topbar .rules-btn.has-reminders{color:var(--remind); border-color:color-mix(in srgb,var(--remind) 55%,transparent);}
 /* Zoom du tableau et membres connectés : juste après les pastilles des tableaux (et « Vue éclatée »). */
 .topbar-affichage{display:flex; align-items:center; gap:calc(8px * var(--ui-scale-factor)); flex:none;}
 .board-zoom{display:flex; align-items:center; flex:none; gap:0; padding:calc(1.5px * var(--ui-scale-factor)); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); border-radius:calc(7px * var(--ui-scale-factor)); background:var(--surface-2);}
 .board-zoom button{height:calc(20px * var(--ui-scale-factor)); min-width:calc(19px * var(--ui-scale-factor)); padding:0 calc(3px * var(--ui-scale-factor)); border:0; border-radius:calc(5px * var(--ui-scale-factor)); background:transparent; color:var(--text-dim); font:600 calc(10.5px * var(--ui-scale-factor))/1 system-ui; cursor:pointer;}
 .board-zoom button:hover{background:var(--surface-3); color:var(--text);}
 .board-zoom button:disabled{opacity:.3; cursor:default;}
 #boardZoomReset{min-width:calc(36px * var(--ui-scale-factor)); font-size:calc(8.5px * var(--ui-scale-factor)); font-variant-numeric:tabular-nums;}

 /* ---- Zone 4 : moi (présence, menu ⋯, Paramètres, profil) ---- */
 .topbar-moi{display:flex; align-items:center; gap:calc(3px * var(--ui-scale-factor)); flex:none; padding-left:calc(8px * var(--ui-scale-factor)); border-left:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .topbar .settings-btn .ui-icon{width:calc(13px * var(--ui-scale-factor)); height:calc(13px * var(--ui-scale-factor));}
 .topbar-menu-wrap{position:relative; display:flex;}
 .topbar-menu{
 position:absolute; right:0; top:calc(100% + calc(6px * var(--ui-scale-factor))); z-index:5000;
 display:flex; flex-direction:column; min-width:calc(190px * var(--ui-scale-factor)); max-width:calc(100vw - calc(16px * var(--ui-scale-factor)));
 padding:calc(4px * var(--ui-scale-factor)); box-sizing:border-box;
 background:var(--surface); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(9px * var(--ui-scale-factor));
 box-shadow:0 calc(12px * var(--ui-scale-factor)) calc(32px * var(--ui-scale-factor)) rgba(0,0,0,.45);
 transform-origin:top right; animation:topbarMenuEntree .14s ease-out;
 }
 .topbar-menu[hidden]{display:none;}
 @keyframes topbarMenuEntree{from{opacity:0;transform:translateY(calc(-4px * var(--ui-scale-factor))) scale(.98);}to{opacity:1;transform:none;}}
 .topbar-menu-item{
 display:flex; align-items:center; gap:calc(8px * var(--ui-scale-factor)); width:100%; box-sizing:border-box;
 padding:calc(6.5px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor)); border:0; border-radius:calc(6px * var(--ui-scale-factor));
 background:transparent; color:var(--text); font:500 calc(10.5px * var(--ui-scale-factor))/1.2 system-ui; text-align:left; cursor:pointer; white-space:nowrap;
 }
 .topbar-menu-item > span:first-of-type{flex:1 1 auto;}
 .topbar-menu-item .tb-icone{color:var(--text-dim);}
 .topbar-menu-item:hover,.topbar-menu-item:focus-visible{background:var(--surface-2); outline:none;}
 .topbar-menu-item:hover .tb-icone,.topbar-menu-item:focus-visible .tb-icone{color:var(--text);}
 .topbar-menu-separateur{height:calc(1px * var(--ui-scale-factor)); background:var(--border-soft); margin:calc(4px * var(--ui-scale-factor)) calc(3px * var(--ui-scale-factor));}

 /* ---- Paliers (barre/disposition.js) ---- */
 /* Sur une ligne, .topbar-ligne2 est transparente : vue, recherche et outils se rangent entre les tableaux et « moi ». */
 .topbar-ligne2{display:contents;}
 .topbar .brand{order:0;}
 .topbar .view-switch{order:1;}
 .topbar .board-workspaces{order:2;}
 .topbar .topbar-affichage{order:3;}
 .topbar .topbar-search{order:4;}
 .topbar .topbar-outils{order:5;}
 .topbar .topbar-moi{order:6;}
 .topbar:not([data-densite="0"]) .topbar-outils .long{display:none;}
 .topbar:not([data-densite="0"]) .topbar-outils .tb-btn{padding:0;}
 /* Paliers 2 et 4 : la recherche n'est plus qu'une loupe ; elle se déplie par-dessus les outils quand on s'en sert. */
 .topbar[data-densite="2"] .topbar-search, .topbar[data-densite="4"] .topbar-search{flex:none; min-width:0; width:calc(25px * var(--ui-scale-factor)); padding:0; justify-content:center; cursor:pointer;}
 .topbar[data-densite="2"] .topbar-search input, .topbar[data-densite="4"] .topbar-search input{width:0; padding:0;}
 .topbar[data-densite="2"] .topbar-search .search-clear, .topbar[data-densite="4"] .topbar-search .search-clear{display:none;}
 .topbar[data-densite="2"] .topbar-search:is(:focus-within,:has(.search-clear.visible)), .topbar[data-densite="4"] .topbar-search:is(:focus-within,:has(.search-clear.visible)){
 position:absolute; z-index:30; right:calc(10px * var(--ui-scale-factor)); width:min(calc(260px * var(--ui-scale-factor)),calc(100% - calc(20px * var(--ui-scale-factor))));
 padding:0 calc(7px * var(--ui-scale-factor)); justify-content:flex-start; cursor:text; box-shadow:0 calc(6px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) rgba(0,0,0,.4);
 }
 .topbar[data-densite="2"] .topbar-search:is(:focus-within,:has(.search-clear.visible)) input, .topbar[data-densite="4"] .topbar-search:is(:focus-within,:has(.search-clear.visible)) input{width:100%; padding:calc(4px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor));}
 .topbar[data-densite="2"] .topbar-search:is(:focus-within,:has(.search-clear.visible)) .search-clear.visible, .topbar[data-densite="4"] .topbar-search:is(:focus-within,:has(.search-clear.visible)) .search-clear.visible{display:flex;}
 /* Paliers 3 et 4 : deux lignes. En haut : le tableau courant (zoom et présence compris) et « moi » ; en bas : vue, recherche, outils. */
 .topbar:is([data-densite="3"],[data-densite="4"]){flex-wrap:wrap; row-gap:calc(6px * var(--ui-scale-factor));}
 .topbar:is([data-densite="3"],[data-densite="4"]) .topbar-moi{margin-left:auto; border-left:0; padding-left:0;}
 .topbar:is([data-densite="3"],[data-densite="4"]) .topbar-ligne2{display:flex; align-items:center; gap:calc(8px * var(--ui-scale-factor)); order:9; flex:1 0 100%; min-width:0;}
 .topbar[data-densite="3"] .topbar-search{flex:1 1 calc(120px * var(--ui-scale-factor)); max-width:none; min-width:calc(70px * var(--ui-scale-factor)); margin-left:0;}
 .topbar:is([data-densite="3"],[data-densite="4"]) .topbar-outils{flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none; padding:calc(5px * var(--ui-scale-factor)) calc(7px * var(--ui-scale-factor)) calc(1px * var(--ui-scale-factor)) 0; margin:calc(-4px * var(--ui-scale-factor)) 0 0;}
 .topbar:is([data-densite="3"],[data-densite="4"]) .topbar-outils::-webkit-scrollbar{display:none;}
 .topbar[data-densite="4"] .view-btn-texte{display:none;}
 .topbar[data-densite="4"] .view-btn{padding:calc(4.5px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor));}
 .topbar[data-densite="4"]{gap:calc(5px * var(--ui-scale-factor)); padding-left:calc(7px * var(--ui-scale-factor)); padding-right:calc(7px * var(--ui-scale-factor));}
 .topbar[data-densite="4"] .brand-mark{display:none;}
 .topbar[data-densite="4"] .board-title-input{width:calc(58px * var(--ui-scale-factor)); white-space:pre;}
 /* Présence au plus serré : sa propre pastille (l'avatar est juste à côté) disparaît, les autres se chevauchent. */
 .topbar[data-densite="4"] .presence-dot.is-me{display:none;}
 .topbar[data-densite="4"] .presence-dot:not(.is-me) ~ .presence-dot{margin-left:calc(-8px * var(--ui-scale-factor));}
 .topbar[data-densite="4"] .topbar-affichage{gap:calc(5px * var(--ui-scale-factor));}
 /* Zoom au plus serré : − et + seulement (le pourcentage revient dès qu'il y a la place). */
 .topbar[data-densite="4"] #boardZoomReset{display:none;}
 .topbar[data-densite="4"] .topbar-moi .tb-btn{min-width:calc(21px * var(--ui-scale-factor)); padding:0;}
 .topbar[data-densite="4"] .profil-btn{width:round(calc(24px * var(--ui-scale-factor)),1px); height:round(calc(24px * var(--ui-scale-factor)),1px);}
 .topbar[data-densite="4"] .profil-btn .profil-avatar{width:calc(round(calc(24px * var(--ui-scale-factor)),1px) - 2px); height:calc(round(calc(24px * var(--ui-scale-factor)),1px) - 2px);}
 .topbar[data-densite="4"] .overview-toggle-btn{display:none;}
 /* … et sans le « + » des tableaux : « Gérer les tableaux » (⋯) garde « Nouveau tableau ». */
 .topbar[data-densite="4"] .board-workspace-add{display:none;}
 .topbar[data-densite="4"] .topbar-moi{gap:calc(1px * var(--ui-scale-factor));}
 .topbar[data-densite="4"] .topbar-ligne2{gap:calc(5px * var(--ui-scale-factor));}
 .topbar[data-densite="4"] .topbar-outils{flex:1 1 auto;}
 /* Libellé « Vue éclatée » : dès que la barre se resserre, il ne reste que l'icône. */
 .topbar:not([data-densite="0"]) .overview-toggle-label{display:none;}
 .topbar:not([data-densite="0"]) .overview-toggle-btn{padding-right:calc(4px * var(--ui-scale-factor));}