/* ═══════════════════════════════════════════════════════════════════════ LA DISPOSITION DU TERMINAL — FEUILLE DU MODE ET DE LA GRILLE ───────────────────────────────────────────────────────────────────── Deux choses ici, et rien d'autre : §1 La GRILLE, qui ne s'allume que sous `html.tl-on` — c'est-à-dire seulement quand le client a réellement déplacé un bloc. Tant qu'il n'a rien touché, aucune règle de ce fichier ne s'applique et la peau tourne exactement comme avant. §2 Le MODE ÉDITION, entièrement contenu dans `#tlOverlay`, un calque `position: fixed` posé dans . Il ne touche à aucun bloc du terminal : il les RECOPIE en fantômes qu'on attrape. C'est ce qui permet d'attraper la barre d'instrument sans que sa mise en page interne — une rangée flex serrée — ait à composer avec une poignée qu'on lui aurait injectée. Cette feuille est chargée APRÈS la peau : c'est la dernière couche, et c'est ce qu'exige une surcharge (même raison que terminal_style_tag()). ═══════════════════════════════════════════════════════════════════════ */ :root { /* La largeur historique du panneau. Elle est reprise telle quelle pour qu'un panneau replacé à gauche mesure exactement ce qu'il mesurait à droite — le client déplace un bloc, il n'en change pas. */ --tl-panel-w: 340px; } @media (max-width: 1439px) { :root { --tl-panel-w: 292px; } } /* ═══ §1. LA GRILLE ══════════════════════════════════════════════════ */ /* `body #chartWrapper` de la peau pèse un identifiant et un type ; on lui ajoute une classe et un type, donc on passe devant sans !important. */ html.tl-on body #chartWrapper { display: grid; align-items: stretch; /* La fermeture du panneau en plein cadre s'interpole parce que le moteur émet TOUJOURS trois colonnes, dont des `0px` — deux listes de longueurs différentes ne s'interpolent pas. */ transition: grid-template-columns .24s cubic-bezier(.4, 0, .2, 1); } /* LE POINT D'APPUI DE TOUT LE MODULE. `display: contents` fait de #chartStage et #ogPanel des enfants de grille de #chartWrapper sans les sortir de #ogWs : la parenté ne bouge pas, donc `body #ogWs > #ogPanel` et les observateurs de la peau continuent de trouver ce qu'ils visent. */ html.tl-on body #ogWs { display: contents; } /* La gouttière était portée par #ogWs, qui n'a plus de boîte. Celle de #chartWrapper la remplace pour tout le monde, à la même valeur. */ html.tl-on body #chartWrapper { gap: var(--og-stack-gap, 12px); } /* Un bloc posé dans une colonne latérale doit pouvoir rétrécir : sans `min-width: 0`, le contenu le plus large de la colonne impose sa largeur et la piste déborde en silence. */ html.tl-on body [data-tl-zone] { min-width: 0; min-height: 0; } /* Le panneau et le bandeau gardent le débordement interne qu'ils ont toujours eu, quel que soit l'endroit où ils atterrissent. */ html.tl-on body #ogPanel[data-tl-zone] { overflow: hidden; } /* ─── Le plein cadre ────────────────────────────────────────────────── La peau referme la colonne du panneau en écrivant sur `#ogWs`, qui n'a plus de grille à écrire. Le moteur retire donc lui-même le bloc du calcul des pistes ; il reste à l'effacer visuellement, ce que la peau faisait dans la règle devenue inopérante. LE CENTRE FAIT EXCEPTION : c'est l'occupant élastique, l'effacer laisserait un trou au milieu de l'écran. Un client qui a mis le panneau au centre a fait de lui son graphique. */ html.tl-on.og-focus body #ogPanel[data-tl-zone]:not([data-tl-zone="center"]) { opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .24s; } /* Le bandeau est déjà effacé par la peau quand il est dans la pile ; posé en colonne, il lui faut la même règle, sans quoi sa piste tombe à 0 px avec un contenu encore visible qui déborde par-dessus le graphique. */ html.tl-on.og-focus body #tvDashboard[data-tl-zone="left"], html.tl-on.og-focus body #tvDashboard[data-tl-zone="right"] { opacity: 0; visibility: hidden; } /* ─── Ce que la peau ne prévoyait pas : un bloc DE COLONNE ──────────── `#instrumentStrip` et `#tvDashboard` sont écrits comme des rangées pleine largeur. Posés dans une colonne de 300 px, leurs rangées flex doivent pouvoir revenir à la ligne, sinon elles poussent la piste. */ html.tl-on body #instrumentStrip[data-tl-zone="left"], html.tl-on body #instrumentStrip[data-tl-zone="right"], html.tl-on body #instrumentStrip[data-tl-zone="center"] { flex-wrap: wrap; align-content: flex-start; overflow-y: auto; } html.tl-on body #tvDashboard[data-tl-zone="left"], html.tl-on body #tvDashboard[data-tl-zone="right"], html.tl-on body #tvDashboard[data-tl-zone="center"] { overflow-y: auto; } html.tl-on body #tvDashboard[data-tl-zone="left"] .signal, html.tl-on body #tvDashboard[data-tl-zone="right"] .signal, html.tl-on body #tvDashboard[data-tl-zone="center"] .signal { flex-wrap: wrap; } /* Le ressort de la ligne de contexte pousse tout à l'opposé ; en colonne il n'a plus de sens et laisserait un vide de la hauteur de la piste. */ html.tl-on body #instrumentStrip[data-tl-zone="left"] .og-spring, html.tl-on body #instrumentStrip[data-tl-zone="right"] .og-spring { display: none; } /* ═══ §2. LE MODE ÉDITION ════════════════════════════════════════════ */ /* Le bouton de la barre du graphique, calqué sur celui du plein cadre — même boîte, même rayon, même bascule d'état. Deux commandes voisines qui font la même sorte de chose doivent se ressembler. */ body .chart-bar .cb-layout { display: inline-grid; place-items: center; width: 36px; min-height: 34px; flex: none; padding: 0; border: none; border-radius: var(--og-radius-sm); cursor: pointer; color: var(--text-3); background: transparent; transition: background .15s ease, color .15s ease; } body .chart-bar .cb-layout svg { width: 17px; height: 17px; } body .chart-bar .cb-layout:hover { color: var(--text); background: var(--og-hover); } html.tl-edit body .chart-bar .cb-layout { color: var(--text); background: var(--og-active); } /* Sous 1024 px il n'y a rien à disposer : le panneau y est un tiroir, pas une colonne. Un bouton qui n'ouvre rien est pire qu'un bouton absent. */ @media (max-width: 1023px) { body .chart-bar .cb-layout { display: none; } } #tlOverlay { position: fixed; inset: 0; z-index: 4000; /* Le calque ne capte rien de lui-même : seuls les fantômes et la barre sont cliquables. C'est ce qui laisse voir le terminal DESSOUS bouger en direct pendant qu'on déplace un bloc. */ pointer-events: none; font: inherit; } #tlOverlay[hidden] { display: none; } /* ─── Les cinq emplacements ──────────────────────────────────────── */ .tl-zone { position: absolute; top: 0; left: 0; display: grid; place-items: center; border-radius: var(--og-radius-md, 10px); border: 1.5px dashed color-mix(in srgb, var(--text-3) 45%, transparent); background: color-mix(in srgb, var(--surface-2) 30%, transparent); opacity: 0; transition: opacity .14s ease, border-color .14s ease, background .14s ease; } /* Les cibles n'apparaissent QUE pendant le geste : affichées en permanence, cinq rectangles en pointillé recouvriraient le terminal qu'on est précisément en train de regarder pour décider. */ #tlOverlay.is-dragging .tl-zone { opacity: 1; } #tlOverlay.is-dragging .tl-zone.is-target { border-color: var(--accent, #6aa9ff); border-style: solid; background: color-mix(in srgb, var(--accent, #6aa9ff) 16%, transparent); } .tl-zone-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); pointer-events: none; } .tl-zone.is-target .tl-zone-lbl { color: var(--text); } /* ─── Les fantômes : un par bloc, calqué sur sa boîte réelle ──────── */ .tl-ghost { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 0; font: inherit; pointer-events: auto; cursor: grab; border-radius: var(--og-radius-md, 10px); border: 1.5px solid color-mix(in srgb, var(--accent, #6aa9ff) 55%, transparent); background: color-mix(in srgb, var(--surface) 55%, transparent); backdrop-filter: blur(1px); color: var(--text); transition: background .14s ease, border-color .14s ease; } .tl-ghost:hover { background: color-mix(in srgb, var(--surface) 72%, transparent); } .tl-ghost:focus-visible { outline: 2px solid var(--accent, #6aa9ff); outline-offset: 2px; } .tl-ghost.is-drag { cursor: grabbing; z-index: 2; border-style: solid; border-color: var(--accent, #6aa9ff); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65); transition: none; } .tl-grip { display: grid; place-items: center; color: var(--accent, #6aa9ff); } .tl-grip svg { width: 18px; height: 18px; } .tl-ghost-lbl { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Un fantôme court — la barre d'instrument fait 44 px de haut — ne peut pas porter son étiquette sur deux lignes ; elle passe en rangée. */ .tl-ghost { flex-direction: row; } /* ─── La barre du mode ───────────────────────────────────────────── */ .tl-bar { position: absolute; inset-inline: 0; bottom: 18px; margin-inline: auto; width: max-content; max-width: calc(100vw - 32px); display: flex; align-items: center; gap: 8px; padding: 8px 10px; pointer-events: auto; border-radius: 999px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--border), 0 20px 44px -14px rgba(0, 0, 0, .7); /* Au-dessus des fantômes au repos : un fantôme couvre son bloc, et le bloc du bas arrive jusque sous la barre. */ z-index: 3; transition: opacity .14s ease; } /* ELLE S'EFFACE PENDANT LE GESTE, et ce n'est pas cosmétique : elle est posée en bas au centre, c'est-à-dire DANS la zone « Bas ». Visible, elle masque la cible qu'on vise ; cliquable, elle intercepte un relâchement qui voulait déposer. Le geste passe donc devant elle, dans les deux sens du terme. */ #tlOverlay.is-dragging .tl-bar { opacity: .18; pointer-events: none; } .tl-bar-t { font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-3); padding-inline: 6px 4px; } .tl-btn { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border: none; border-radius: 999px; cursor: pointer; color: var(--text-2); background: var(--og-hover, rgba(255, 255, 255, .06)); transition: background .15s ease, color .15s ease; } .tl-btn:hover { color: var(--text); } .tl-btn-ok { color: var(--surface); background: var(--text); } .tl-btn-ok:hover { color: var(--surface); opacity: .88; } /* L'annonce des lecteurs d'écran : elle doit être LUE, donc rester dans le document — `display: none` la rendrait muette. */ .tl-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { html.tl-on body #chartWrapper, .tl-zone, .tl-ghost { transition: none !important; } }