/* ═══════════════════════════════════════════════════════════════════════
   PIPSTER PRO — TerminalToolRail, la feuille
   ─────────────────────────────────────────────────────────────────────
   Elle est chargée APRÈS `terminal-ogilio.css` et lui emprunte tous ses
   jetons : rampe neutre, rayons, survol, élévation. Une barre d'outils
   qui se donnerait ses propres gris serait la seule pièce du terminal à
   ne pas suivre le thème — et il y en a deux, plus les peaux.

   POURQUOI UN FICHIER À PART. La peau habille la production ; ceci est
   un composant NEUF, comme gold-classic.css ou ladder.css. Le mélanger
   aux 5 500 lignes de la peau, c'était rendre son retrait impossible et
   rouvrir la dispersion que la peau a mis trois passes à refermer.

   ORDRE DE GRANDEUR — la barre coûte 54 px, soit 3,4 % d'un écran de
   1600. La colonne qu'elle remplace en coûtait 64, et le graphique n'y
   gagnait rien puisque le panneau restait ouvert de l'autre côté.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --og-rail-w: 54px;

  /* ── LE ROUGE DE LA PASTILLE N'EST PAS CELUI DE LA BOUGIE ──────────
     `--down` (#EF5350 en sombre) est la couleur d'une BOUGIE : elle est
     lue par app.js au montage du graphique, et elle est calibrée pour
     être vue sur un fond noir, pas pour porter du texte. Mesuré : blanc
     sur #EF5350 = 3,49:1, sous le seuil AA pour un chiffre de 9,5 px en
     gras. La peau s'était déjà donné la règle — séparer l'ENCRE du LAVIS
     et ne toucher qu'à la clarté, jamais à la teinte. Même teinte (0°),
     clarté descendue : 4,95:1 en sombre, et le lavis reste à 3,28:1 de la
     barre, donc la pastille se détache toujours.
     En clair, `--down` vaut déjà #C0322E (5,62:1) : rien à corriger, mais
     le jeton est écrit en toutes lettres — un jeton qui change de sens
     d'un thème à l'autre est la moitié des pièges de cette peau. */
  --rail-alert-bg: #D32F2F;
  /* Le rang d'un outil : 38×34 dans une piste de 54, soit 8 px de part
     et d'autre. Relevé sur la barre du haut d'ogilio, qui pose 36 px. */
  --rail-item-w: 38px;
  --rail-item-h: 34px;
}
:root[data-theme="light"] { --rail-alert-bg: #C0322E; }

/* ═══════════════════════════════════════════════════════════════════════
   1. LA BARRE
   ─────────────────────────────────────────────────────────────────────
   Dernière colonne de la coquille, à l'opposé de l'ancienne latérale :

     #ogShell (flex row)
       #chartWrapper   le plateau — élastique
       #ogRail         54 px, coin haut-droit

   Elle porte la MÊME surface que la colonne qu'elle remplace : c'est de
   la navigation, elle recule. En sombre l'élévation est une lumière,
   donc elle est plus claire que le plateau ; en clair elle est plus
   sombre — un seul jeton, `--og-sb-bg`, et chaque thème dit ce qu'il
   veut. (Il est défini par la peau, §10.)
   ═══════════════════════════════════════════════════════════════════════ */
body #ogRail {
  flex: 0 0 var(--og-rail-w);
  width: var(--og-rail-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
  background: var(--og-sb-bg, var(--surface-2));
  border-start-end-radius: var(--og-corner);
  position: relative;
  z-index: 20;   /* au-dessus du panneau en survol, sous les menus (90) */
}

body #ogRailMain {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  overflow-y: auto;
  overflow-x: hidden;
  /* La barre garde sa largeur quand elle déborde : une glissière de
     4 px, invisible au repos, qui n'apparaît qu'au survol de la barre.
     Même réglage que l'ancienne colonne. */
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color .2s ease;
}
body #ogRail:hover #ogRailMain { scrollbar-color: var(--border-strong) transparent; }
body #ogRailMain::-webkit-scrollbar { width: 4px; }
body #ogRailMain::-webkit-scrollbar-thumb { background: transparent; border-radius: 2px; }
body #ogRail:hover #ogRailMain::-webkit-scrollbar-thumb { background: var(--border-strong); }

body #ogRailFoot {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding-block-start: 6px;
  margin-block-start: 2px;
}
/* Le pied se détache par un filet, pas par un écart : « tous les outils »
   et l'aide ne sont pas des outils de plus, ce sont les commandes DE la
   barre. Le filet le dit en un pixel. */
body #ogRailFoot::before {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  background: var(--border);
  margin: 0 auto 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. ToolRailItem — les cinq états
   ─────────────────────────────────────────────────────────────────────
     normal    icône en --text-3, fond transparent
     survol    fond --og-hover, icône --text
     actif     fond --og-active, icône --text, liseré interne à l'accent
     pastille  cercle rouge (compte) ou point coloré (état)
     verrouillé icône à 45 %, cadenas en filigrane

   L'ACTIF PORTE UN LISERÉ, ET PAS SEULEMENT UN FOND. Le fond seul se
   confond avec le survol dès qu'on passe la souris à côté ; c'est le
   défaut classique d'une barre d'icônes. Le liseré de 2 px sur le bord
   INTERNE (côté panneau) fait en plus le lien visuel avec le panneau
   qu'il commande — on lit « ce bouton ouvre ça ».
   ═══════════════════════════════════════════════════════════════════════ */
body .rail-item {
  position: relative;
  flex: none;
  width: var(--rail-item-w);
  height: var(--rail-item-h);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--og-radius-sm);
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
body .rail-item .ico { width: 18px; height: 18px; display: block; }

body .rail-item:hover { background: var(--og-hover); color: var(--text); }
body .rail-item:focus-visible {
  outline: 2px solid var(--accent, #4E7FFF);
  outline-offset: -2px;
}

body .rail-item.on {
  background: var(--og-active);
  color: var(--text);
}
body .rail-item.on::before {
  content: '';
  position: absolute;
  inset-inline-start: -8px;      /* le bord interne, côté panneau */
  inset-block: 6px;
  width: 2px;
  border-radius: 2px;
  background: var(--accent, #4E7FFF);
}

/* Un séparateur de rubrique dans la barre : le même filet que le pied. */
body .rail-sep {
  display: block;
  width: 26px;
  height: 1px;
  flex: none;
  background: var(--border);
  margin: 5px auto;
}

/* ── Verrouillé ────────────────────────────────────────────────────
   L'entrée reste CLIQUABLE : pour une section du panneau elle ouvre
   l'encart d'offre que saas-app.js y a posé, pour une commande elle
   ouvre la fenêtre d'offre. Un bouton grisé et mort n'apprend rien ;
   celui-ci explique. On ne le passe donc pas sous 45 % — et un
   composant réellement inactif serait hors du critère de contraste,
   ce qu'il n'est pas. */
body .rail-item.is-locked { color: var(--text-3); opacity: .62; }
body .rail-item.is-locked:hover { opacity: 1; }
body .rail-item.is-locked::after {
  content: '';
  position: absolute;
  inset-block-end: 4px;
  inset-inline-end: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  opacity: .8;
}
/* La pastille prime sur le témoin de verrou : les deux occupent le même
   coin, et une pastille est une information du jour. */
body .rail-item.is-locked:has(> .rail-badge:not([hidden]))::after { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   3. ToolRailBadge
   ─────────────────────────────────────────────────────────────────────
   Deux natures, et elles ne se ressemblent pas exprès :

     .is-alert  cercle ROUGE avec un compte (1, 2, … 9+) ou un « ! ».
                Le rouge est réservé à ce qui demande une action.
     .is-state  point de 7 px coloré par le sens — hausse ou baisse.
                Aucun texte : ce n'est pas un compte, c'est une couleur.

   `hidden` plutôt qu'une chaîne vide : une pastille vide garderait sa
   poche et son écart. Le script ne l'écrit que lorsqu'elle change.
   ═══════════════════════════════════════════════════════════════════════ */
body .rail-badge {
  position: absolute;
  inset-block-start: 1px;
  inset-inline-end: 1px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
body .rail-badge[hidden] { display: none; }

body .rail-badge.is-alert {
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--rail-alert-bg, #D32F2F);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
  /* Un détourage de la couleur de la barre : sans lui, la pastille se
     colle à l'icône et les deux formes se lisent comme une seule. */
  box-shadow: 0 0 0 2px var(--og-sb-bg, var(--surface-2));
}

body .rail-badge.is-state {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  box-shadow: 0 0 0 2px var(--og-sb-bg, var(--surface-2));
}
body .rail-badge.is-state.is-up { background: var(--up, #26A69A); }
body .rail-badge.is-state.is-dn { background: var(--down, #EF5350); }

/* ── `display` POSÉ PAR UNE RÈGLE BAT L'ATTRIBUT `hidden` ───────────
   Le piège que cette peau s'était déjà écrit, et j'y suis retombé au
   premier essai : la feuille du navigateur ne fait qu'un `display: none`
   à spécificité NULLE. `body .rail-badge.is-alert { display: grid }`
   l'écrase, et les pastilles de la cloche et du calendrier s'affichaient
   en permanence — deux ronds rouges VIDES, qui annoncent une alerte qui
   n'existe pas. Mesuré : `hidden` valait `true`, `display` valait `grid`.

   La reprise doit venir APRÈS et peser au moins autant : deux classes
   plus l'attribut battent une classe. */
body .rail-badge[hidden],
body .rail-badge.is-alert[hidden],
body .rail-badge.is-state[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   4. L'EN-TÊTE DU PANNEAU ET SA POIGNÉE
   ─────────────────────────────────────────────────────────────────────
   Sans onglets visibles, la colonne doit dire ce qu'elle montre. L'en-tête
   nomme la section et porte le seul geste dont elle a besoin : se replier.

   LA RANGÉE D'ONGLETS N'EST PAS SUPPRIMÉE, ELLE EST MASQUÉE ICI. Sous
   1024 px le panneau est un tiroir dont elle est la poignée, et
   gold-classic.js clique `.og-tab[data-og-dock="gold"]` pour amener sa
   carte au panneau — un nœud masqué reste cliquable, un nœud absent non.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  body #ogPanel > #ogTabs { display: none; }

  body #ogPanelHead {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 9px 8px 9px 12px;
    border-bottom: 1px solid var(--border);
    min-height: 40px;
  }
  body #ogPanelHead .ogph-ico {
    flex: none;
    display: inline-grid;
    place-items: center;
    color: var(--text-3);
  }
  body #ogPanelHead .ogph-ico .ico { width: 15px; height: 15px; display: block; }
  body #ogPanelHead .ogph-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body #ogPanelHead .ogph-close {
    flex: none;
    width: 26px; height: 26px;
    display: inline-grid; place-items: center;
    padding: 0; border: none; background: transparent;
    border-radius: var(--og-radius-sm);
    color: var(--text-3);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
  }
  body #ogPanelHead .ogph-close:hover { background: var(--og-hover); color: var(--text); }
  body #ogPanelHead .ogph-close .ico { width: 15px; height: 15px; display: block; }
  /* En arabe, « replier vers la droite » se replie vers la gauche. */
  [dir="rtl"] body #ogPanelHead .ogph-close .ico { transform: scaleX(-1); }
}
@media (max-width: 1023px) {
  body #ogPanelHead { display: none; }
}

/* ── La poignée de réouverture ─────────────────────────────────────
   Pincée sur le bord interne de la barre, elle n'existe QUE panneau
   replié : ouverte, la croix de l'en-tête fait déjà l'aller. Elle ne
   flotte pas au-dessus du graphique — elle est fille de la barre, donc
   elle ne peut recouvrir ni l'échelle de prix, ni une étiquette de
   niveau, ni un signal. */
body #ogPanelGrab {
  position: absolute;
  inset-inline-start: -7px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 14px; height: 46px;
  display: none;
  place-items: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--raised);
  color: var(--text-3);
  cursor: pointer;
  z-index: 2;
  transition: color .15s ease, background .15s ease;
}
body #ogPanelGrab .ico { width: 12px; height: 12px; display: block; }
body #ogPanelGrab:hover { background: var(--og-active); color: var(--text); }
[dir="rtl"] body #ogPanelGrab .ico { transform: scaleX(-1); }
html.og-panel-off body #ogPanelGrab { display: grid; }
/* En plein cadre tout le panneau s'efface : lui proposer de le rouvrir
   par une poignée, c'est offrir de défaire le mode par une commande qui
   ne le dit pas. Les trois sorties du mode restent celles du mode. */
html.og-focus body #ogPanelGrab { display: none; }
@media (max-width: 1023px) { body #ogPanelGrab { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   5. LE PANNEAU REPLIÉ — `html.og-panel-off`
   ─────────────────────────────────────────────────────────────────────
   Repris À L'IDENTIQUE du plein cadre (peau, §34) : deux pistes des deux
   côtés, la seconde à zéro. `minmax(0,1fr) 340px` → `minmax(0,1fr)`
   changerait le NOMBRE de pistes, deux listes de longueurs différentes
   ne s'interpolent pas, et la colonne sauterait au lieu de glisser.

   `column-gap` seulement, pas `gap` : la bannière partenaire vit dans la
   même grille sur sa propre rangée, et lui retirer son écart de rangée
   la collerait au graphique.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  html.og-panel-off body #ogWs {
    grid-template-columns: minmax(0, 1fr) 0px;
    column-gap: 0;
  }
  html.og-panel-off body #ogWs > #ogPanel {
    opacity: 0;
    pointer-events: none;
  }
  /* `visibility` part APRÈS la transition : à largeur nulle un panneau
     reste focusable, et on tabulerait dans une colonne invisible. */
  html.og-panel-off body #ogWs > #ogPanel {
    visibility: hidden;
    transition: transform .26s cubic-bezier(.4, 0, .2, 1),
                opacity .2s ease,
                visibility 0s linear .26s;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. ToolsLauncher — « Tous les outils »
   ─────────────────────────────────────────────────────────────────────
   Une carte flottante ancrée au bouton, pas un plein écran : on y vient
   pour prendre un outil, pas pour quitter le graphique. Deux colonnes,
   des rubriques, une étoile par rang.
   ═══════════════════════════════════════════════════════════════════════ */
body #ogLauncher {
  position: fixed;
  z-index: 95;              /* au-dessus de #tfMenu/#csMenu (90) */
  width: 460px;
  max-width: calc(100vw - 16px);
  max-height: min(560px, calc(100vh - 24px));
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: var(--og-radius-md);
  box-shadow: var(--og-lift-2);
  overflow: hidden;
}
body #ogLauncher[hidden] { display: none; }

body #ogLauncher .lau-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 10px 14px;
  border-bottom: 1px solid var(--border);
}
body #ogLauncher .lau-h {
  flex: 1 1 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
}
body #ogLauncher .lau-x {
  flex: none;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  padding: 0; border: none; background: transparent;
  border-radius: var(--og-radius-sm);
  color: var(--text-3); cursor: pointer;
}
body #ogLauncher .lau-x:hover { background: var(--og-hover); color: var(--text); }
body #ogLauncher .lau-x .ico { width: 15px; height: 15px; display: block; }

body #ogLauncher .lau-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 8px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
body #ogLauncher .lau-sect-h {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 6px 5px;
}
body #ogLauncher .lau-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
@media (max-width: 560px) {
  body #ogLauncher .lau-grid { grid-template-columns: minmax(0, 1fr); }
}

body #ogLauncher .lau-row {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--og-radius-sm);
  min-width: 0;
}
body #ogLauncher .lau-row:hover { background: var(--og-hover); }

body #ogLauncher .lau-go {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px 7px 8px;
  border: none;
  background: transparent;
  border-radius: var(--og-radius-sm);
  color: var(--text-2);
  cursor: pointer;
  text-align: start;
  font: inherit;
}
body #ogLauncher .lau-go .ico { width: 16px; height: 16px; flex: none; color: var(--text-3); }
body #ogLauncher .lau-go:hover,
body #ogLauncher .lau-row:hover .lau-go { color: var(--text); }
body #ogLauncher .lau-go:hover .ico { color: var(--text); }
body #ogLauncher .lau-lbl {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body #ogLauncher .lau-go.is-locked .lau-lbl { color: var(--text-3); }
body #ogLauncher .lau-lock { flex: none; display: inline-grid; place-items: center; color: var(--text-3); }
body #ogLauncher .lau-lock .ico { width: 12px; height: 12px; }

body #ogLauncher .lau-star {
  flex: none;
  width: 26px; height: 26px;
  display: inline-grid; place-items: center;
  margin-inline-end: 4px;
  padding: 0; border: none; background: transparent;
  border-radius: var(--og-radius-sm);
  color: var(--text-3);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}
body #ogLauncher .lau-star .ico { width: 14px; height: 14px; display: block; }
/* L'étoile n'apparaît qu'au survol du rang — SAUF quand elle est allumée :
   un épinglage déjà pris doit se voir sans avoir à le chercher. */
body #ogLauncher .lau-row:hover .lau-star,
body #ogLauncher .lau-star:focus-visible,
body #ogLauncher .lau-star.on { opacity: 1; }
body #ogLauncher .lau-star:hover { background: var(--og-active); color: var(--text); }
body #ogLauncher .lau-star.on { color: var(--warn, #F0A020); }
body #ogLauncher .lau-star.on .ico { fill: currentColor; }

/* ═══════════════════════════════════════════════════════════════════════
   7. LE PLEIN CADRE GARDE LA BARRE
   ─────────────────────────────────────────────────────────────────────
   Décision reprise telle quelle de la peau (§34, demande du 2026-08-04) :
   le mode efface ce qui COMMENTE le marché, or une barre de navigation ne
   commente rien — c'est le moyen d'aller ailleurs. La faire disparaître
   enfermerait dans un mode dont on ne sort plus qu'à l'aveugle. Elle
   coûte 3,4 % de la largeur.

   Rien à écrire pour ça. Ce qui suit ne fait qu'éteindre les états qui
   n'ont plus de sens : aucune section n'est ouverte, donc aucun bouton
   n'est actif.
   ═══════════════════════════════════════════════════════════════════════ */
html.og-focus body .rail-item.on { background: transparent; color: var(--text-3); }
html.og-focus body .rail-item.on::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   8. LES ÉCRANS PLUS ÉTROITS
   ─────────────────────────────────────────────────────────────────────
   Deux régimes, et le seuil n'est PAS un choix de cette feuille : c'est
   celui que la peau et le mode Disposition emploient déjà.

     ≥ 1024   le panneau est une colonne — le graphique la cède, et la
              rend d'un clic sur la croix de l'en-tête.
     < 1024   la barre se retire. Le panneau y est un tiroir du bas réglé
              au pixel (voir la peau, §33.2) : 54 px de navigation
              permanente lui prendraient 15 % de la largeur, et sa rangée
              d'onglets fait déjà le travail.

   POURQUOI PAS D'ÉTAGE INTERMÉDIAIRE EN RECOUVREMENT. Le premier jet en
   avait un : entre 1024 et 1279 px le panneau se posait SUR le graphique
   plutôt que de lui prendre sa place. C'était défendable en surface —
   340 px de colonne y ramènent le graphique sous 700 — et le user
   l'autorisait. Mais un panneau posé sur le bord droit du graphique
   couvre exactement l'ÉCHELLE DE PRIX, les étiquettes de niveau et la
   cote en direct : la consigne dit noir sur blanc que rien ne doit les
   masquer, et ce sont les trois choses qu'on lit le plus.

   Le repli fait mieux, et il est déjà là : un clic rend TOUTE la largeur,
   pas les deux tiers, et il se voit. Mesuré à 1100 px avec la colonne
   ouverte : 658 px de graphique — étroit mais entier ; replié : 1002 px.
   Un recouvrement aurait donné 986 px dont 292 illisibles.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
  body #ogRail { display: none; }

  /* ── LE MENU AU DOIGT ────────────────────────────────────────────
     Sous ce seuil, le menu n'est plus une commodité de souris : c'est
     le SEUL chemin vers les outils que la barre portait. Ses rangs
     mesuraient 32 px, une cible de curseur. La peau s'était déjà donné
     44 px pour tout ce qui passe sous le pouce (§33.7) ; on reprend la
     même valeur plutôt que d'en inventer une troisième.

     L'étoile cesse de se cacher : il n'y a pas de survol au doigt, et
     une commande qui n'apparaît qu'au survol n'existe pas ici. */
  body #ogLauncher .lau-go { min-height: 44px; padding-block: 10px; }
  body #ogLauncher .lau-lbl { font-size: 13.5px; }
  body #ogLauncher .lau-star { width: 40px; height: 40px; opacity: 1; }
  body #ogLauncher .lau-star .ico { width: 16px; height: 16px; }
  body #ogLauncher .lau-x { width: 40px; height: 40px; }
  body #ogLauncher .lau-head { padding: 8px 8px 8px 14px; }
  /* Une barre absente ne doit pas laisser un état derrière elle : le
     tiroir reprend la main, et le script retire la classe au passage du
     seuil. Cette règle est la ceinture. */
  html.og-panel-off body #ogWs { grid-template-columns: minmax(0, 1fr); }
  html.og-panel-off body #ogWs > #ogPanel { opacity: 1; visibility: visible; pointer-events: auto; }
}

/* Le déclencheur du menu dans la barre du haut ne sert QUE là où la
   barre latérale n'est pas : au-dessus du seuil, le pied de la barre
   porte déjà « tous les outils », et deux boutons pour un seul menu
   seraient exactement le doublon qu'on s'interdit ici. */
@media (min-width: 1024px) {
  body #toolbar #ogBurger { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. MOUVEMENT
   ─────────────────────────────────────────────────────────────────────
   150 à 200 ms sur les états, 260 ms sur la colonne — la courbe de la
   peau, pour que la barre et le panneau bougent ensemble. Mouvement
   réduit : la bascule reste immédiate, l'état final est le même. On ne
   « ralentit » pas une animation dont on ne veut pas.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body .rail-item,
  body #ogPanelGrab,
  body #ogLauncher .lau-star,
  body #ogPanelHead .ogph-close { transition: none !important; }
}