/* ═══════════════════════════════════════════════════════════════════════
   NewsGrid — barre UMD et qualité de service par vignette
   ═══════════════════════════════════════════════════════════════════════

   UMD, « Under Monitor Display » : en régie, chaque moniteur porte sous
   l'image un bandeau qui dit ce qu'on regarde et dans quel état c'est. Les
   badges existants (latence, débit) flottaient PAR-DESSUS l'image, à des
   coins différents, et disparaissaient avec le chrome de la carte. On les
   rassemble dans un bandeau fixe, lisible sans survol et sans masquer un
   seul pixel de vidéo.

   Couleurs d'état : jetons StudioTools (--st-ok / --st-warn / --st-over).
   Elles ne voyagent JAMAIS seules — chaque état porte aussi une icône.
   Mesuré : vert #3dce6a et ambre #e8a010 ne sont séparés que de ΔE 7,2 en
   deutéranopie ; sans l'icône, un opérateur daltonien confondrait « OK » et
   « alerte ». Le contraste sur le fond de barre est lui conforme (≥ 3:1).
   ═══════════════════════════════════════════════════════════════════════ */

.ng-umd {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  height: 19px;
  padding: 0 0.35rem;
  background: var(--st-surface, #121215);
  border-top: 1px solid var(--st-line, #26262c);
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10px;
  line-height: 1;
  color: var(--st-text-2, #a3a3ad);
  user-select: none;
  overflow: hidden;
  container-type: inline-size;
  container-name: ng-umd;
}

/* ——— Numéro de case ———
   Les touches 1 à 9 donnent l'écoute à la case correspondante, mais rien ne
   disait quelle vignette portait quel numéro : le raccourci existait sans
   être utilisable. Dessiné comme une touche pour que le lien soit évident.
   Au-delà de la 9e case, le numéro reste affiché pour se repérer, mais sans
   l'habillage de touche — aucun raccourci n'y mène. */
.ng-umd__case {
  flex: 0 0 auto;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--st-text-3, #6e6e79);
}
.ng-umd__case[data-clavier="1"] {
  border: 1px solid var(--st-line-2, #35353d);
  border-bottom-width: 2px;
  background: var(--st-raised, #1c1c21);
  color: var(--st-text-2, #a3a3ad);
}

/* ——— Enregistrement en cours ———
   Convention régie : le point rouge ne ment pas. Il clignote pour qu'on ne
   laisse pas tourner un enregistrement oublié. */
.ng-umd__rec {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 0.2rem;
  padding: 0 0.28rem;
  height: 13px;
  border-radius: 3px;
  background: var(--st-over, #ff4444);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ng-umd__rec::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fff;
  animation: ng-umd-pulse 1.2s ease-in-out infinite;
}
.ng-umd[data-rec="1"] .ng-umd__rec { display: inline-flex; }

/* ——— Pastille d'état : couleur + icône, jamais la couleur seule ——— */
.ng-umd__etat {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.ng-umd__etat .st-icon {
  font-size: 13px;
  line-height: 1;
}
.ng-umd[data-etat="ok"] .ng-umd__etat { color: var(--st-ok, #3dce6a); }
.ng-umd[data-etat="warn"] .ng-umd__etat { color: var(--st-warn, #e8a010); }
.ng-umd[data-etat="fault"] .ng-umd__etat { color: var(--st-over, #ff4444); }
.ng-umd[data-etat="idle"] .ng-umd__etat { color: var(--st-text-3, #6e6e79); }

/* Un défaut persistant doit accrocher l'œil de l'autre bout de la régie. */
@keyframes ng-umd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ng-umd[data-etat="fault"] .ng-umd__etat .st-icon {
  animation: ng-umd-pulse 1.4s ease-in-out infinite;
}

/* Cliquable : prendre l'écoute sur cette case. */
.ng-umd:hover { background: var(--st-surface-2, #16161a); }

.ng-umd__nom {
  /* Le nom ne prend plus toute la place restante : il la partage avec le
     programme en cours, et plafonne pour qu'une chaine au nom a rallonge
     n'efface pas ce qui passe a l'antenne. */
  flex: 0 1 auto;
  max-width: 42%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--st-text, #fff);
}

/* ——— Programme en cours (EPG) ———
   La raison d'être d'un UMD en régie : dire ce qui passe à l'antenne. On le
   met en retrait typographique du nom de chaîne — le nom identifie le
   moniteur, le programme est l'information qui change. */
.ng-umd__epg {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  overflow: hidden;
}
.ng-umd__epg[hidden] { display: none; }
.ng-umd__epg-titre {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--st-text-2, #a3a3ad);
  text-transform: none;
  letter-spacing: 0;
}
.ng-umd__epg-titre::before {
  content: "· ";
  color: var(--st-text-3, #6e6e79);
}
.ng-umd__epg-heure {
  flex: 0 0 auto;
  color: var(--st-text-3, #6e6e79);
  font-variant-numeric: tabular-nums;
}

/* Le tally d'écoute : quelle vignette part dans les enceintes. */
.ng-umd__audio {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  gap: 0.15rem;
  padding: 0 0.28rem;
  height: 13px;
  border-radius: 3px;
  background: var(--st-accent, #e4002b);
  color: var(--st-on-accent, #fff);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
.ng-umd[data-audio="1"] .ng-umd__audio { display: inline-flex; }

.ng-umd__src {
  flex: 0 0 auto;
  color: var(--st-text-3, #6e6e79);
  font-variant-numeric: tabular-nums;
}

/* ——— Mesures : colonnes de chiffres, donc chasse fixe ——— */
.ng-umd__mesures {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
  font-variant-numeric: tabular-nums;
}
.ng-umd__mesures > b {
  font-weight: 500;
  color: var(--st-text-2, #a3a3ad);
}
/* Seule la mesure fautive se teinte : le chiffre lui-même sert d'étiquette,
   la couleur n'ajoute qu'un repère. */
.ng-umd__mesures > b[data-alerte="warn"] { color: var(--st-warn, #e8a010); }
.ng-umd__mesures > b[data-alerte="fault"] { color: var(--st-over, #ff4444); }

/* ——— Sparkline : une seule série, donc pas de légende ——— */
.ng-umd__spark {
  flex: 0 0 auto;
  width: 52px;
  height: 13px;
  display: block;
  overflow: visible;
}
.ng-umd__spark .ng-spark-aire { display: none; }
.ng-umd__spark .ng-spark-ligne {
  fill: none;
  stroke: var(--st-info, #4aa3ff);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
/* Repère de fin : le point courant, ancré au dernier échantillon. */
.ng-umd__spark .ng-spark-tete {
  fill: var(--st-info, #4aa3ff);
  stroke: var(--st-surface, #121215);
  stroke-width: 1;
}

/* ——— Étroitesse : on retire par ordre d'importance croissante ———
   La largeur de référence est celle du bandeau, pas de la fenêtre : dans une
   mosaïque, deux vignettes de la même page n'ont pas la même largeur. */
@container ng-umd (max-width: 380px) {
  .ng-umd__epg-heure { display: none; }
}
@container ng-umd (max-width: 300px) {
  .ng-umd__spark { display: none; }
}
@container ng-umd (max-width: 260px) {
  .ng-umd__mesures > b[data-q="def"] { display: none; }
}
@container ng-umd (max-width: 230px) {
  .ng-umd__mesures > b[data-q="lat"] { display: none; }
}
@container ng-umd (max-width: 180px) {
  .ng-umd__mesures > b[data-q="kbps"] { display: none; }
  .ng-umd__src { display: none; }
}
@container ng-umd (max-width: 150px) {
  /* Trop étroit pour deux informations : le nom de la chaîne prime. */
  .ng-umd__epg { display: none; }
  .ng-umd__nom { max-width: 100%; }
}
@container ng-umd (max-width: 120px) {
  .ng-umd__mesures { display: none; }
}

/* Le mode « clean » sert à faire une sortie propre : rien de notre bandeau. */
body.clean-output .ng-umd { display: none !important; }

/* ——— Aide-mémoire des raccourcis (touche ?) ——— */
#ngShortcuts {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#ngShortcuts.is-open { display: flex; }
#ngShortcuts .ng-sc-panneau {
  width: min(560px, 100%);
  max-height: 84vh;
  overflow-y: auto;
  background: var(--st-surface, #121215);
  border: 1px solid var(--st-line, #26262c);
  border-radius: 12px;
  padding: 18px 20px;
  font-family: var(--st-font, system-ui, sans-serif);
  color: var(--st-text, #fff);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
#ngShortcuts h2 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
}
#ngShortcuts .ng-sc-sous {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--st-text-2, #a3a3ad);
}
#ngShortcuts dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 0;
  font-size: 12.5px;
}
#ngShortcuts dt { justify-self: start; }
#ngShortcuts dd {
  margin: 0;
  color: var(--st-text-2, #a3a3ad);
  align-self: center;
}
#ngShortcuts kbd {
  display: inline-block;
  min-width: 18px;
  padding: 2px 6px;
  border: 1px solid var(--st-line-2, #35353d);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--st-raised, #1c1c21);
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 11px;
  text-align: center;
  color: var(--st-text, #fff);
}
#ngShortcuts .ng-sc-groupe {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-text-3, #6e6e79);
}
#ngShortcuts .ng-sc-groupe:first-child { margin-top: 0; }

/* ——— Doublons rendus inutiles par le bandeau ———
   Latence et débit flottaient par-dessus la vidéo, à deux coins différents,
   et n'apparaissaient qu'au survol. Le bandeau les porte en permanence et
   sans masquer un pixel : on retire les badges.

   Le titre posé en haut au centre disparaît pour la même raison, et une
   seconde : mesuré sur des vignettes de 480 px, il chevauchait la rangée de
   commandes de 48 à 95 px. Le bandeau nomme la chaîne en permanence, donc
   rien n'est perdu — l'URL du flux, qu'il portait en infobulle, est reprise
   dans celle du bandeau. Une ligne à retirer ici pour revenir en arrière. */
.channel-card:has(.ng-umd) [data-hls-latency],
.channel-card:has(.ng-umd) [data-hls-bitrate],
.channel-card:has(.ng-umd) .js-channel-title {
  display: none !important;
}

/* ——— Sommaire du panneau de contrôle ———
   Collant sous l'en-tête, dont la hauteur varie (nom du preset actif) : son
   décalage est posé en JS, pas en dur. Défilement horizontal si les puces
   débordent, plutôt qu'un retour à la ligne qui volerait de la hauteur. */
.ng-panel-nav {
  /* Indispensable : #controlPanel est un conteneur flex en colonne dont le
     contenu déborde, et « overflow-x: auto » ci-dessous annule la taille
     minimale automatique d'un élément flex (min-height:auto ne vaut qu'avec
     overflow:visible). Sans cette ligne, le navigateur écrase le sommaire à
     8 px de haut et il devient illisible. */
  flex: 0 0 auto;
  position: sticky;
  /* Au-dessus des blocs qui suivent : plusieurs sont en position:relative et,
     sans z-index explicite ici, ils se peignent par-dessus le sommaire
     collant simplement parce qu'ils viennent après dans le DOM. */
  z-index: 11;
  display: flex;
  gap: 3px;
  margin: 0 -0.25rem 0.25rem;
  padding: 5px 0.25rem;
  background: var(--st-surface, #121215);
  border-bottom: 1px solid var(--st-line, #26262c);
  overflow-x: auto;
  scrollbar-width: none;
}
.ng-panel-nav::-webkit-scrollbar { display: none; }

.ng-panel-nav__puce {
  flex: 0 0 auto;
  /* Mesuré : à 8 px de marge latérale les six puces totalisent 344 px pour
     323 px utiles, et « Filtres » sortait du panneau. À 5 px elles tiennent
     toutes, sans défilement horizontal à découvrir. */
  padding: 3px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  font-family: var(--st-font, system-ui, sans-serif);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--st-text-3, #6e6e79);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.ng-panel-nav__puce:hover {
  background: var(--st-hover, #26262c);
  color: var(--st-text, #fff);
}
.ng-panel-nav__puce:focus-visible {
  outline: 2px solid var(--st-accent, #e4002b);
  outline-offset: 1px;
}
/* La section à l'écran : soulignée ET contrastée, pas seulement colorée. */
.ng-panel-nav__puce[data-courante="1"] {
  background: var(--st-raised, #1c1c21);
  border-color: var(--st-line-2, #35353d);
  color: var(--st-text, #fff);
}

@media (prefers-reduced-motion: reduce) {
  .ng-panel-nav__puce { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Commandes de vignette — en haut, discrètes, intégrées
   ═══════════════════════════════════════════════════════════════════════

   Avant : une pastille sombre posée au centre-bas de l'image, avec ombre
   portée, chaque icône dans son propre carré gris. Trois couches de décor
   pour sept boutons, au-dessus de la vidéo, et en concurrence directe avec
   l'URL du flux, l'EPG et le bandeau UMD.

   Maintenant : rangée unique en haut à droite, côté opposé au titre. Plus
   de pastille ni de carrés — les icônes flottent sur un dégradé qui les
   rend lisibles sur une image claire sans jamais masquer la vidéo. Le
   dégradé n'apparaît qu'avec le reste du chrome, donc l'image est intacte
   au repos.

   Les couleurs d'état ne sont pas touchées : le rouge d'enregistrement et
   le vert de focus audio restent des repères de régie. */

.ng-cmd {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 11;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 2px 3px 10px;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.5) 0%,
    rgba(0, 0, 0, 0.22) 55%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.15s ease;
}
.channel-card.chrome-revealed .ng-cmd { opacity: 1; }

/* Plus de pastille : la barre n'est plus qu'un alignement. */
.ng-cmd .card-toolbar {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
}

/* Plus de carré gris par icône — le glyphe seul, en retrait. */
.ng-cmd .tv-icon-btn__box {
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  border-radius: 6px;
  transition: background 0.12s ease, color 0.12s ease;
}
.ng-cmd .tv-icon-btn:hover .tv-icon-btn__box {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.ng-cmd .tv-icon-btn:active .tv-icon-btn__box { transform: scale(0.94); }
.ng-cmd .tv-icon-btn:focus-visible .tv-icon-btn__box {
  outline: 2px solid var(--st-accent, #e4002b);
  outline-offset: 1px;
}

/* États de régie conservés tels quels : enregistrement et focus audio. */
.ng-cmd .tv-icon-btn .record-btn-icon {
  background: transparent;
  color: var(--st-over, #ff4444);
}
.ng-cmd .tv-icon-btn:hover .record-btn-icon {
  background: rgba(255, 68, 68, 0.2);
}
.ng-cmd .tv-icon-btn.is-active .tv-icon-btn__box {
  background: rgba(61, 206, 106, 0.22);
  color: var(--st-ok, #3dce6a);
}

@media (prefers-reduced-motion: reduce) {
  .ng-cmd,
  .ng-cmd .tv-icon-btn__box { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Panneau de contrôle — alignement sur le socle StudioTools
   ═══════════════════════════════════════════════════════════════════════

   Le panneau était bâti avec la palette Tailwind par défaut : six teintes
   d'accent (sky, emerald, violet, cyan, amber, rose) et trois rayons
   différents (xl, 2xl, full), là où le socle maison n'en prévoit qu'un seul
   — --st-radius, 8 px — et réserve la couleur aux états de régie.

   On ramène donc : surfaces --st-surface-2 sur filet --st-line, rayon
   unique, libellés en mono capitales comme dans demo-ui.html, et texte sur
   l'échelle --st-text. Seul le rouge d'accent subsiste, sur l'action
   destructrice, parce qu'il doit se repérer au coup d'œil.

   Tout passe par la spécificité (#controlPanel …), sans !important : les
   utilitaires Tailwind restent en place, ils sont simplement dominés. */

/* ——— Un seul rayon ——— */
#controlPanel [class*="rounded-"] {
  border-radius: var(--st-radius, 8px);
}
/* Éléments stylés par la CSS de l'app, dont la classe ne contient pas
   « rounded- » : sections (16 px), vignettes de disposition (12 px) et le
   champ d'intervalle, qui porte la classe « rounded » sans tiret. */
#controlPanel .ng-panel-section,
#controlPanel .layout-scheme-btn,
#controlPanel [class~="rounded"] {
  border-radius: var(--st-radius, 8px);
}
/* Rayon intérieur pour les petits éléments imbriqués, comme les pastilles
   de couleur de demo-ui.html : 8 px sur 18 px de haut ferait bulle. */
#controlPanel .layout-scheme-icon {
  border-radius: 5px;
}

/* Les pastilles de comptage restent des pilules : c'est leur forme propre. */
#controlPanel [class*="rounded-full"],
#controlPanel #channelCount,
#controlPanel #presetCount,
#controlPanel #playlistSyncBadge {
  border-radius: 999px;
}

/* ——— Surfaces des sections ——— */
#controlPanel > div[class*="rounded-"],
#controlPanel .ng-panel-section {
  background: var(--st-surface-2, #16161a);
  border: 1px solid var(--st-line, #26262c);
  box-shadow: none;
}

/* ——— Boutons : le décor part, la fonction reste ——— */
#controlPanel button[class*="-sky-"],
#controlPanel button[class*="-emerald-"],
#controlPanel button[class*="-violet-"],
#controlPanel button[class*="-cyan-"],
#controlPanel button[class*="-amber-"],
#controlPanel a[class*="-violet-"],
#controlPanel a[class*="-sky-"] {
  background: var(--st-raised, #1c1c21);
  border-color: var(--st-line-2, #35353d);
  color: var(--st-text, #fff);
}
#controlPanel button[class*="-sky-"]:hover,
#controlPanel button[class*="-emerald-"]:hover,
#controlPanel button[class*="-violet-"]:hover,
#controlPanel button[class*="-cyan-"]:hover,
#controlPanel button[class*="-amber-"]:hover,
#controlPanel a[class*="-violet-"]:hover,
#controlPanel a[class*="-sky-"]:hover {
  background: var(--st-hover, #26262c);
  border-color: var(--st-line-2, #35353d);
  color: var(--st-text, #fff);
}
/* Action destructrice : le seul endroit où la couleur reste un signal. */
#controlPanel button[class*="-rose-"] {
  background: transparent;
  border-color: var(--st-accent-line, rgba(228, 0, 43, 0.34));
  color: var(--st-accent-text, #ff4152);
}
#controlPanel button[class*="-rose-"]:hover {
  background: var(--st-accent-soft, rgba(228, 0, 43, 0.16));
  border-color: var(--st-accent, #e4002b);
}

/* ——— Champs ——— */
#controlPanel input[type="text"],
#controlPanel input[type="search"],
#controlPanel input:not([type]),
#controlPanel select {
  background: var(--st-surface, #121215);
  border: 1px solid var(--st-line-2, #35353d);
  border-radius: var(--st-radius, 8px);
  color: var(--st-text, #fff);
}
#controlPanel input:focus,
#controlPanel select:focus {
  outline: 2px solid var(--st-accent, #e4002b);
  outline-offset: 1px;
  border-color: transparent;
}

/* ——— Libellés de section : la typographie du socle ——— */
#controlPanel .ng-panel-section > div > p:first-child,
#controlPanel h2,
#controlPanel h3,
#controlPanel label,
#controlPanel [class*="uppercase"][class*="tracking-"] {
  font-family: var(--st-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st-text-3, #6e6e79);
}
/* Les titres de section gardent leur poids, pas leur teinte. */
#controlPanel h2 {
  font-family: var(--st-font, system-ui, sans-serif);
  font-size: 13px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--st-text, #fff);
}

/* ——— Textes d'accompagnement ——— */
#controlPanel [class*="text-slate-4"],
#controlPanel [class*="text-slate-5"] {
  color: var(--st-text-3, #6e6e79);
}
#controlPanel [class*="text-sky-"],
#controlPanel [class*="text-emerald-"],
#controlPanel [class*="text-violet-"],
#controlPanel [class*="text-cyan-"],
#controlPanel [class*="text-amber-"] {
  color: var(--st-text-2, #a3a3ad);
}

/* ═══════════════════════════════════════════════════════════════════════
   Marque NewsGrid — icône « tv » devant le nom
   ═══════════════════════════════════════════════════════════════════════

   Posée en ::before plutôt qu'en markup : le nom de l'app dans la barre est
   écrit par /assets/studiotools-appbar.js, qui sert TOUTES les apps du
   catalogue. Y toucher aurait donné une télé à LevelScope et à EventClock.
   Cette feuille n'étant chargée que par NewsGrid, la règle est naturellement
   cantonnée ici.

   Même ligature et mêmes réglages de variation que .st-icon, pour que ce
   soit le même dessin que partout ailleurs dans le système. */

.st-appbar-app::before,
#splashScreen .splash-title::before {
  content: "tv";
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
  display: inline-block;
  vertical-align: -0.16em;
}

/* Barre d'application : calée sur la capitale du mono, pas sur sa chasse. */
.st-appbar-app::before {
  font-size: 15px;
  line-height: 1;
  margin-right: 5px;
}

/* Splash : l'icône suit la taille du mot, donc en em. Le halo vert du
   titre vient de text-shadow, qui s'applique aussi au glyphe — les deux
   restent solidaires quelle que soit la largeur d'écran. */
#splashScreen .splash-title::before {
  font-size: 0.92em;
  margin-right: 0.28em;
  vertical-align: -0.1em;
}

/* Écrans étroits : le socle réduit déjà le nom de l'app, l'icône suit. */
@media (max-width: 520px) {
  .st-appbar-app::before {
    font-size: 13px;
    margin-right: 4px;
  }
}