, donc 1 em au-dessus ET en dessous par défaut, qui s'ajoutaient à l'écart de la section — deux lignes d'aide écartaient un dialogue de 60 px pour rien (20 septembre 2026). */ .dlg-help { font-size: var(--fs-ui); color: var(--fg2); line-height: 1.6; margin: 0; } .dlg-error { color: var(--red); font-size: var(--fs-ui); min-height: 1.2em; } /* UN AVERTISSEMENT N'EST PAS UN REFUS. Le rouge de « .dlg-error » dit qu'un geste vient d'échouer ; celui-ci dit qu'une installation est perfectible, et il est là à l'ouverture du panneau. Un encadré, pour qu'il ne se lise pas comme un paragraphe d'aide de plus — c'est la seule ligne du panneau qui parle d'un trou. */ .dlg-warn { font-size: var(--fs-ui); line-height: 1.55; color: var(--fg); background: var(--bg3); border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: 8px; padding: 10px 12px; margin: 0 0 14px; } .dlg .tw { margin: 0; } /* Un tableau de valeurs COURTES se centre — ce n'est pas de la prose. Les tableaux de chemins, eux, restent à gauche : un chemin se lit au début. */ .dlg .tw-mid th, .dlg .tw-mid td { text-align: center; vertical-align: middle; } .dlg .tw-mid .row-actions { justify-content: center; } .dlg .tw-mid td.row-actions { text-align: center; } /* ---- ce qui a changé entre deux versions ---- Lister et restaurer sans montrer la différence oblige à restaurer pour savoir ce qu'on restaure. */ .diff { margin: 18px 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: auto; font-family: var(--mono); font-size: var(--fs-floor); line-height: 1.6; } .diff-l { padding: 1px 12px; white-space: pre-wrap; word-break: break-word; } .diff-l.more { background: color-mix(in srgb, var(--green) 16%, transparent); } .diff-l.less { background: color-mix(in srgb, var(--red) 16%, transparent); } .diff-l.gap { background: var(--bg3); color: var(--fg3); font-size: var(--fs-floor); padding: 4px 12px; } /* ============================================================ LES DIALOGUES À ONGLETS Les réglages tenaient dans une bande affichée en permanence. Découpés en sections, chaque écran est court — donc lu — et l'onglet dit où chercher la prochaine fois. ============================================================ */ /* PASSÉS À LA LIGNE, JAMAIS GLISSÉS (UI.md, règle 46) : à 390 px, « 💾 Mes données » sortait du cadre et rien ne disait qu'il existait. */ .dlg-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); margin: 0 0 16px; padding: 0 0 8px; } /* MÊME REPROCHE QUE LES ONGLETS D'UN CHAPITRE, MÊME REMÈDE. « 📖 Lecture » et « 💾 Mes données » n'avaient ni fond ni filet — mesurés le 9 septembre 2026 à « transparent » et quatre bordures à 0 : seul l'onglet choisi se voyait, et on ne savait pas que les deux autres s'ouvraient. */ .dlg-tab { flex: 1 1 auto; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; color: var(--fg2); font: inherit; font-size: var(--fs-ui); padding: 9px 14px; min-height: 48px; cursor: pointer; white-space: nowrap; } .dlg-tab:hover { color: var(--fg); border-color: var(--blue); } .dlg-tab.active { color: var(--bg); background: var(--blue); border-color: var(--blue); font-weight: 600; } /* ---- le panneau d'un onglet : des SECTIONS, pas une file ---- Chaque `section()` est un bloc. Sur un écran large, deux tiennent côte à côte : le panneau des préférences descendait sur trois écrans de haut alors que les deux tiers de la largeur restaient vides. Une section qui porte un TABLEAU reprend toute la largeur — la couper en deux ne rendrait service à personne. */ .dlg-panel { display: grid; grid-template-columns: 1fr; gap: 4px 34px; align-items: start; } /* Le cadre d'un onglet : il ne se voit pas, ses sections restent les cases de la grille — sans quoi le panneau n'aurait plus qu'un seul enfant. La réserve d'une section qui se remplit plus tard (`dlg-slot`) obéit à la même règle, et pour la même raison. */ .dlg-tabbed, .dlg-slot { display: contents; } /* L'avertissement traverse, et le verdict de la sonde avec lui : posés sur le panneau lui-même, ils en sont des cases — seuls dans leur colonne, ils laissaient l'autre vide. */ /* EN DESCENDANT, ET NON EN ENFANT DIRECT : le contenu d'un onglet vit dans un `.dlg-tabbed` (lui-même en `display:contents`), donc rien n'est jamais l'enfant direct du panneau. La règle ne visait que les sections, et le verdict de la porte restait coincé dans une colonne. */ .dlg-panel .dlg-warn, .dlg-panel .wide { grid-column: 1 / -1; } @media (min-width: 860px) { .dlg-wide .dlg-panel { grid-template-columns: 1fr 1fr; } .dlg-wide .dlg-panel .dlg-sec:has(.tw), .dlg-wide .dlg-panel .dlg-sec:has(.perm-row), .dlg-wide .dlg-panel .dlg-sec:has(.group) { grid-column: 1 / -1; } } /* Le rythme de « Où j'en suis », le plus lisible des écrans : 6 px entre deux éléments, et une section qui ne prend pas 32 px de vide autour d'elle. */ .dlg-sec { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 0 12px; min-width: 0; } /* UN BOUTON QUI SUIT UN CHAMP PREND DE L'AIR : collé à 6 px sous « Nom du groupe », « Créer » se lisait comme une partie du champ. */ .dlg .dlg-field + .btn, .dlg .dlg-field + .dlg-error + .btn { margin-top: 10px; } .dlg-sec > .tw { align-self: stretch; } .dlg-sec > .dlg-field, .dlg-sec > .toolbar { align-self: stretch; } /* La barre d'actions d'une section n'est pas la barre collante d'une page : elle ne colle à rien et ne pose pas de trait. */ .dlg-sec > .toolbar { position: static; background: none; backdrop-filter: none; border: none; padding: 0; margin: 0; } .dlg-error:empty { min-height: 0; } .dlg-choice { margin: 0; width: 100%; } .dlg-choice select { width: 100%; max-width: 360px; } .dlg-size { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dlg-size-v { font-family: var(--mono); font-size: var(--fs-floor); color: var(--fg3); min-width: 4.2em; text-align: right; } /* UN CURSEUR, peint à la main dans les deux moteurs. Le rendu natif prend l'accent du système, pas celui du thème : sur « forêt » ou « contraste », un curseur bleu de Windows au milieu d'une palette verte est la seule chose de la page qui n'obéisse à rien. `accent-color` ne suffit pas — il ne touche ni la hauteur de la piste ni la taille de la poignée, et la poignée native fait 20 px sur Firefox, 12 sur Chrome. */ /* `flex-basis` court À DESSEIN : le panneau range ses sections en DEUX colonnes dès qu'il a la place, et chacune ne fait alors que 235 px. Avec 150 px de base, le curseur et sa valeur les remplissaient à eux seuls et le bouton « ↩️ » passait à la ligne. */ .dlg-range { flex: 1 1 90px; min-width: 84px; height: 22px; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .dlg-range:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .dlg-range::-webkit-slider-runnable-track { height: 4px; border-radius: 3px; background: var(--line); } .dlg-range::-moz-range-track { height: 4px; border-radius: 3px; background: var(--line); } .dlg-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -5.5px; border-radius: 50%; background: var(--blue); border: 2px solid var(--bg2); transition: .15s; } .dlg-range::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--blue); border: 2px solid var(--bg2); } .dlg-range:hover::-webkit-slider-thumb { transform: scale(1.15); } .dlg-check { display: flex; align-items: center; gap: 8px; font-size: var(--fs-ui); color: var(--fg2); cursor: pointer; } .dlg .mono { font-family: var(--mono); font-size: var(--fs-floor); } /* MÊME ÉCART QUE LA COLONNE DU MENU « ⋯ » (7 px) : à 5 px, les trois icônes d'une ligne se lisaient comme un seul bloc, et la destructive n'était pas plus détachée que les deux autres — mesuré le 19 septembre 2026. */ .dlg .row-actions { display: flex; gap: 7px; white-space: nowrap; } .dlg .row-actions .danger { margin-left: 5px; } /* SAUF QUAND C'EST UNE CELLULE : un `