/* Page de console de la passerelle — couleurs du thème sombre du Hub, polices du système (aucun fichier externe). */
:root { --fond: #0d1118; --s1: #161c27; --s2: #1b2230; --b1: #2a3344; --txt: #e6eaf0; --txt2: #c9d1dc; --txt3: #8d99ab; --cyan: #22b8cf; --rouge: #f06a6a; --ambre: #e3a33b; --vert: #3ecf8e; }
html, body { margin: 0; height: 100%; background: var(--fond); color: var(--txt); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { display: flex; flex-direction: column; overflow: hidden; }
.barre { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--s1); border-bottom: 1px solid var(--b1); box-sizing: border-box; }
.titre { display: flex; flex-direction: column; min-width: 0; flex: 1 1 220px; }
.titre strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.titre span { font-size: 12px; color: var(--txt3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.etat { font-size: 12.5px; font-weight: 700; color: var(--ambre); }
.etat.ok { color: var(--vert); }
.etat.ko { color: var(--rouge); }
.reste { font-size: 12px; color: var(--txt3); }
button { font: inherit; font-size: 12.5px; font-weight: 700; min-height: 36px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--b1); background: var(--s2); color: var(--txt2); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--cyan); color: var(--txt); }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
button.rouge { color: var(--rouge); border-color: color-mix(in srgb, var(--rouge) 45%, var(--b1)); }
main { flex: 1 1 auto; min-height: 0; position: relative; overflow: hidden; background: #000; }
.avis { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(13, 17, 24, .92); box-sizing: border-box; }
.avis[hidden] { display: none; }
.carte { max-width: 520px; width: 100%; background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; padding: 24px; box-sizing: border-box; }
.carte h1 { margin: 0 0 8px; font-size: 20px; }
.carte p { margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--txt2); }
.carte .petit { font-size: 12.5px; color: var(--txt3); margin: 0; }
@media (max-width: 640px) { .barre { padding: 8px; } button { padding: 0 10px; } }