/* ===== ellab-clipboard — 📋 presse-papiers (fenêtre au-dessus du cadre de la machine) ===== */
:root {
    --ellab-clip-accent: var(--ellab-home-accent, #3b6e8f);
    --ellab-clip-accent-soft: #eef3f7;
    --ellab-clip-alert: #ffb020;
    --ellab-clip-ok: #2f8a5b;
    --ellab-clip-warn: #b26a00;
}
body .ellab-paste button, body button.ellab-fr-btn[data-fr="clip"] { text-transform: none; letter-spacing: 0; }
/* point sur le bouton : texte copié dans la machine, pas encore récupéré sur le PC */
body button.ellab-fr-btn[data-fr="clip"].has-clip::after {
    content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ellab-clip-alert); box-shadow: 0 0 0 2px #22343b; animation: ellab-clip-pop .3s ease-out;
}
@keyframes ellab-clip-pop { from { transform: scale(0); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { body button.ellab-fr-btn[data-fr="clip"].has-clip::after { animation: none; } }

.ellab-paste {
    position: absolute; right: 14px; top: 46px; z-index: 30; width: 440px; max-width: calc(100% - 28px);
    max-height: calc(100% - 60px); overflow: auto; box-sizing: border-box;
    background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); padding: 14px 16px; color: #333;
}
.ellab-paste h4 { margin: 0 0 2px; font-size: 14px; }
.ellab-paste p { margin: 0 0 8px; font-size: 11.5px; color: #7b858a; }
.ellab-clip-sec { margin: 12px 0 6px; font-size: 10.5px; font-weight: bold; letter-spacing: .08em; text-transform: uppercase; color: var(--ellab-clip-accent); }
.ellab-clip-sec-to { padding-top: 12px; border-top: 1px solid #e6ebed; }
.ellab-paste textarea {
    width: 100%; box-sizing: border-box; resize: vertical; overflow: auto; white-space: pre; outline: none;
    border: 1px solid var(--ellab-clip-accent); border-radius: 8px; padding: 8px 10px;
    font: 12.5px Consolas, monospace; color: #222;
}
.ellab-paste textarea.ellab-clip-from { height: 64px; min-height: 40px; max-height: 200px; border-color: #d5dee1; background: #f6f9fa; color: #333; }
.ellab-paste textarea.ellab-clip-to { height: 150px; min-height: 84px; max-height: 420px; }
.ellab-paste textarea:focus-visible { box-shadow: 0 0 0 3px var(--ellab-clip-accent-soft); }
.ellab-clip-fromact { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.ellab-clip-fmsg { flex: 1; font-size: 11.5px; color: #7b858a; }
.ellab-clip-fmsg.warn { color: var(--ellab-clip-warn); }
.ellab-clip-info { font-size: 10.5px; color: #9aa3a8; margin-top: 4px; }
body .ellab-paste button {
    min-width: 0; margin: 0; box-shadow: none; font: inherit; cursor: pointer; border: none; border-radius: 8px;
}
body .ellab-paste button.ellab-clip-copy, body .ellab-paste button.ellab-clip-go {
    font-size: 12.5px; padding: 6px 12px; background: var(--ellab-clip-accent); color: #fff; font-weight: bold;
}
body .ellab-paste button:disabled { background: #cfd8db; cursor: default; }
body .ellab-paste button.ellab-clip-opt {
    display: flex; width: 100%; gap: 10px; align-items: flex-start; text-align: left; margin-top: 8px; padding: 9px 11px;
    border: 1px solid #e3e8ea; border-radius: 9px; background: #fff; color: #333;
}
body .ellab-paste button.ellab-clip-opt.sel { border-color: var(--ellab-clip-accent); background: var(--ellab-clip-accent-soft); }
.ellab-clip-opt > i { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #c3cdd0; margin-top: 2px; box-sizing: border-box; }
.ellab-clip-opt.sel > i { border: 5px solid var(--ellab-clip-accent); }
.ellab-clip-opt b { display: block; font-size: 13px; }
.ellab-clip-opt small { display: block; font-size: 11.5px; color: #7b858a; }
.ellab-clip-enter { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11.5px; color: #555; cursor: pointer; }
.ellab-clip-act { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
body .ellab-paste button.ellab-clip-cancel { font-size: 12.5px; padding: 7px 14px; background: #eef2f3; color: #555; }

.ellab-clip-toast {
    position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 9999;
    max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px;
    background: #1f2a30; color: #fff; font-size: 13px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
}
.ellab-clip-toast.ok { background: var(--ellab-clip-ok); }
.ellab-clip-toast.warn { background: var(--ellab-clip-warn); }
/* ellab-help — bouton « ? » et fenêtre d'aide.
 * Couleurs neutres en variables : le pack de marque les redéfinit sur :root. */
:root {
    --ellab-help-accent: #3b6e8f;
    --ellab-help-accent-dark: #2c3e50;
    --ellab-help-accent-soft: #e8f0f5;
    --ellab-help-text: #2f3a40;
    --ellab-help-muted: #7a868c;
    --ellab-help-bg: #ffffff;
    --ellab-help-nav-bg: #f4f6f8;
    --ellab-help-border: #e3e7ea;
}

/* Bouton, à gauche du menu utilisateur (style « verre », lisible sur l'en-tête)
 * « body button.… » : passe devant le style des boutons de Guacamole */
body button.ellab-help-btn {
    min-width: 0; box-shadow: none; text-transform: none; letter-spacing: 0;
    flex: none; width: 34px; height: 34px; margin: 0 .6em 0 auto; padding: 0;
    border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; cursor: pointer;
    background: var(--ellab-help-accent); color: #fff; font: bold 17px/1 sans-serif;
    transition: filter .15s, transform .15s;
}
body button.ellab-help-btn:hover,
body button.ellab-help-btn:focus-visible { filter: brightness(1.15); outline: none; transform: scale(1.06); }
body button.ellab-help-btn.pulse { animation: ellab-help-pulse 2s ease-out 4; }
@keyframes ellab-help-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(59, 110, 143, .6); }
    70%  { box-shadow: 0 0 0 12px rgba(59, 110, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(59, 110, 143, 0); }
}
@media (prefers-reduced-motion: reduce) {
    body button.ellab-help-btn.pulse { animation: none; }
}
/* le menu utilisateur suit le bouton, sans repousser à droite */
body .home-view .connection-list-ui > .header .ellab-help-btn + .user-menu { margin-left: 0; }

/* Fenêtre */
.ellab-help { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.ellab-help-backdrop { position: absolute; inset: 0; background: rgba(20, 28, 34, .55); }
.ellab-help-box {
    position: relative; display: flex; flex-direction: column;
    width: min(940px, 94vw); height: min(680px, 88vh); overflow: hidden;
    background: var(--ellab-help-bg); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, .3);
    color: var(--ellab-help-text); font-size: 15px;
}
.ellab-help-head {
    display: flex; align-items: center; gap: 1em; padding: .9em 1.2em .9em 1.5em;
    background: linear-gradient(120deg, var(--ellab-help-accent), var(--ellab-help-accent-dark)); color: #fff;
}
body .ellab-help-head h2 { margin: 0; padding: 0; font-size: 1.15em; font-weight: bold; text-transform: none; letter-spacing: 0; color: #fff; }
body button.ellab-help-x {
    min-width: 0; padding: 0; box-shadow: none;
    margin-left: auto; width: 32px; height: 32px; border: none; border-radius: 8px; cursor: pointer;
    background: rgba(255, 255, 255, .15); color: #fff; font-size: 22px; line-height: 1;
}
body button.ellab-help-x:hover,
body button.ellab-help-x:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }

.ellab-help-main { flex: 1; display: grid; grid-template-columns: 210px 1fr; min-height: 0; }
.ellab-help-nav {
    display: flex; flex-direction: column; gap: 2px; padding: 1em .6em; overflow: auto;
    background: var(--ellab-help-nav-bg); border-right: 1px solid var(--ellab-help-border);
}
.ellab-help-nav a { padding: .5em .8em; border-radius: 8px; color: var(--ellab-help-text); text-decoration: none; font-size: .9em; }
.ellab-help-nav a:hover { background: var(--ellab-help-accent-soft); }
.ellab-help-nav a.on { background: var(--ellab-help-accent-soft); color: var(--ellab-help-accent); font-weight: bold; }

.ellab-help-body { overflow: auto; padding: .4em 1.8em 1.4em; scroll-behavior: smooth; }
.ellab-help-body section { padding: 1em 0 .4em; border-bottom: 1px solid var(--ellab-help-border); scroll-margin-top: .5em; }
.ellab-help-body section:last-of-type { border-bottom: none; }
.ellab-help-body h3 { margin: 0 0 .5em; font-size: 1.02em; color: var(--ellab-help-accent); }
.ellab-help-body p, .ellab-help-body li { margin: .35em 0; line-height: 1.55; font-size: .93em; }
.ellab-help-body ul { margin: .3em 0; padding-left: 1.2em; }
.ellab-help-body kbd {
    display: inline-block; padding: 0 .4em; border: 1px solid #cfd6d9; border-bottom-width: 2px; border-radius: 4px;
    background: #f7f9fa; font: .85em/1.6 monospace; color: #33434a;
}
.ellab-help-chip {
    display: inline-block; padding: .05em .55em; border: 1px solid var(--ellab-help-border); border-radius: 6px;
    background: var(--ellab-help-accent-soft); color: var(--ellab-help-accent); font-size: .9em; white-space: nowrap;
}
.ellab-help-hint { margin-top: 1.2em !important; color: var(--ellab-help-muted); font-size: .85em !important; }
.ellab-help-support { color: var(--ellab-help-muted); font-size: .85em !important; }
.ellab-help-support a { color: var(--ellab-help-accent); }
.ellab-help-ver { margin: .3em 0 0 !important; color: var(--ellab-help-muted); font: .78em/1.4 monospace !important; }

@media (max-width: 680px) {
    .ellab-help-main { grid-template-columns: 1fr; }
    .ellab-help-nav { display: none; }
    .ellab-help-body { padding: .4em 1em 1em; }
}
/* ===== ellab-home — accueil après connexion (Guacamole 1.6.0) =====
   Mise en page : barre latérale « Toutes les connexions » à gauche (rétractable),
   « Connexions récentes » en tuiles de verre sur dégradé, à droite.
   Couleurs, dégradé et logo en variables : le pack de marque les redéfinit sur :root.
   Le préfixe « body » assure la priorité sur les règles de Guacamole. */

:root {
    --ellab-sidebar: 300px; --ellab-sidebar-mini: 64px;
    --ellab-home-accent: #3b6e8f;
    --ellab-home-accent-dark: #2c4f66;
    --ellab-home-accent-soft: rgba(59, 110, 143, .12);
    --ellab-home-live: #7fe0c4;
    --ellab-home-panel-logo: none;
    --ellab-home-panel-gradient:
        radial-gradient(900px 600px at 90% -10%, rgba(214, 226, 236, .95), transparent 60%),
        radial-gradient(800px 700px at -5% 110%, rgba(36, 50, 66, .95), transparent 60%),
        linear-gradient(160deg, #b9c9d6 0%, #8aa3b6 30%, #5b7489 62%, #34465a 100%);
}

/* --- Couleur de survol / sélection : turquoise au lieu du vert #CDA --- */
body .list-item:not(.selected) .caption:hover,
body .menu-dropdown .menu-contents li a:hover,
body .page-tabs .page-list li a[href]:hover,
body .section-tabs li a:hover { background-color: var(--ellab-home-accent-soft); }
body .list-item.selected { background: var(--ellab-home-accent-soft); }

/* --- Fond clair + grand panneau en dégradé (inspiration CloudShare) --- */
body.home { background: #f4f5f6; min-height: 100vh; overflow-x: hidden; }

body .home-view {
    display: grid; min-height: 100vh;
    grid-template-columns: var(--ellab-sidebar) 1fr;
    grid-template-rows: 72px auto 1fr;
    grid-template-areas: "brand rhead" "ahead recent" "tree recent";
    transition: grid-template-columns .25s ease;
}
body .home-view:has(.ellab-sb-toggle:checked) { grid-template-columns: var(--ellab-sidebar-mini) 1fr; }
body .home-view .connection-list-ui { display: contents; }
.ellab-sb-toggle { display: none; }

/* Panneau : pseudo-élément placé dans la colonne de droite, sous la liste */
body .home-view::before {
    content: ""; grid-column: 2; grid-row: 1 / 4; margin: 14px 14px 14px 0;
    border-radius: 18px; box-shadow: 0 10px 40px rgba(30,60,70,.18);
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='260' viewBox='0 0 1200 260'%3E%3Cg fill='%23ffffff' fill-opacity='.07'%3E%3Crect x='520' y='20' width='160' height='72' rx='6'/%3E%3Crect x='1040' y='20' width='160' height='72' rx='6'/%3E%3Crect x='346' y='104' width='160' height='72' rx='6'/%3E%3Crect x='693' y='104' width='160' height='72' rx='6'/%3E%3Crect x='866' y='104' width='160' height='72' rx='6'/%3E%3Crect x='1040' y='104' width='160' height='72' rx='6'/%3E%3Crect x='173' y='188' width='160' height='72' rx='6'/%3E%3Crect x='346' y='188' width='160' height='72' rx='6'/%3E%3Crect x='520' y='188' width='160' height='72' rx='6'/%3E%3Crect x='693' y='188' width='160' height='72' rx='6'/%3E%3Crect x='866' y='188' width='160' height='72' rx='6'/%3E%3Crect x='1040' y='188' width='160' height='72' rx='6'/%3E%3C/g%3E%3C/svg%3E") right bottom / 1200px 260px no-repeat,
        var(--ellab-home-panel-logo) 64% 46% / min(28%, 360px) auto no-repeat,
        var(--ellab-home-panel-gradient);
}
body .home-view > .connection-list-ui > .header:nth-child(1),
body .home-view > .connection-list-ui > div.recent-connections { position: relative; z-index: 1; }

/* Bloc marque (haut de la barre latérale) : logo du pack de marque, sinon son nom */
.ellab-brand {
    grid-area: brand; display: flex; align-items: center; gap: .5em;
    padding: 0 .75em 0 1.1em; background: transparent; overflow: hidden;
}
.ellab-brand .ellab-logo-full { height: 32px; }
.ellab-brand .ellab-logo-mini { height: 30px; display: none; }
.ellab-brand-name { font-size: 1.25em; font-weight: bold; color: var(--ellab-home-accent-dark); white-space: nowrap; }
.ellab-brand .ellab-brand-initial {
    width: 30px; height: 30px; border-radius: 8px; align-items: center; justify-content: center;
    background: var(--ellab-home-accent); color: #fff; font-weight: bold;
}
.ellab-sb-btn {
    margin-left: auto; flex: none; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 6l-6 6 6 6' fill='none' stroke='%236b7378' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; transition: background-color .15s, transform .25s;
}
.ellab-sb-btn:hover { background-color: var(--ellab-home-accent-soft); }

/* Barre latérale : en-tête + arbre */
body .home-view .connection-list-ui > .header:nth-child(3) {
    grid-area: ahead; flex-direction: column; align-items: stretch; gap: .6em;
    margin: 0; padding: .4em 1em .6em; background: transparent; border: none; box-shadow: none;
}
body .home-view .connection-list-ui > .all-connections {
    grid-area: tree; margin: 0; padding: 0 .6em 1.5em; overflow: auto;
    background: transparent;
    position: relative; z-index: 0; /* garde les traits de l'arbre visibles */
}
body .home-view .connection-list-ui > .header:nth-child(3) .user-menu { display: none; }

/* Barre repliée */
.home-view:has(.ellab-sb-toggle:checked) .ellab-brand { padding: 0; justify-content: center; flex-direction: column; gap: 0; }
.home-view:has(.ellab-sb-toggle:checked) .ellab-logo-full,
.home-view:has(.ellab-sb-toggle:checked) .ellab-brand-name { display: none; }
.home-view:has(.ellab-sb-toggle:checked) .ellab-logo-mini { display: block; height: 26px; }
.home-view:has(.ellab-sb-toggle:checked) .ellab-brand-initial { display: flex; width: 26px; }
.home-view:has(.ellab-sb-toggle:checked) .ellab-sb-btn { margin: 0; width: 26px; height: 22px; background-size: 15px; transform: rotate(180deg); }
.home-view:has(.ellab-sb-toggle:checked) .connection-list-ui > .header:nth-child(3) > *,
.home-view:has(.ellab-sb-toggle:checked) .connection-list-ui > .all-connections > * { display: none; }
.home-view:has(.ellab-sb-toggle:checked) .connection-list-ui > .header:nth-child(3)::after {
    content: ""; display: block; width: 24px; height: 24px; margin: .4em auto;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h4.6l2 2.2h8.4A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z' fill='%23e3ebf1' stroke='%233b6e8f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; opacity: .9;
}

/* --- Titres de section --- */
body .home-view .header h2 {
    display: flex; align-items: center; gap: .6em; margin: 0; padding: 0;
    font-size: .78em; font-weight: bold; letter-spacing: .1em; text-transform: uppercase; color: #6b7378;
}
body .home-view .header h2::before {
    content: ""; width: 18px; height: 3px; border-radius: 2px; background: var(--ellab-home-accent);
}

/* En-tête du panneau (Connexions récentes + menu utilisateur) */
body .home-view .connection-list-ui > .header:nth-child(1) {
    grid-area: rhead; align-items: center; margin: 14px 14px 0 0; padding: 0 1.6em 0 2em;
    background: transparent; border: none; box-shadow: none;
}
body .home-view .connection-list-ui > .header:nth-child(1) h2 { color: #fff; font-size: .78em; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
body .home-view .connection-list-ui > .header:nth-child(1) h2::before { background: #fff; }

/* --- Menu utilisateur (sur le dégradé) --- */
body .home-view .user-menu .menu-dropdown {
    border: 1px solid rgba(255,255,255,.35); border-radius: 22px; background: rgba(255,255,255,.14);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
body .home-view .user-menu .menu-dropdown > .menu-title,
body .home-view .user-menu .menu-dropdown > .menu-indicator { filter: brightness(0) invert(1); font-weight: bold; }
body .menu-dropdown .menu-contents {
    border: 1px solid #e6e9eb; border-radius: 10px; overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,.18); background: #fff;
}

/* --- Filtre --- */
body .home-view .header .filter { padding: 0; }
body .home-view .header .filter input.search-string {
    width: 100%; box-sizing: border-box; padding: .55em .9em .55em 2.2em;
    border: 1px solid #dde2e5; border-radius: 20px; background-color: #f7f9fa;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='6.5' fill='none' stroke='%238a9399' stroke-width='2'/%3E%3Cpath d='M16 16l4.5 4.5' stroke='%238a9399' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 1.1em; background-position: .75em center;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
body .home-view .header .filter input.search-string:focus {
    outline: none; background-color: #fff; border-color: var(--ellab-home-accent); box-shadow: 0 0 0 3px var(--ellab-home-accent-soft);
}

/* --- Connexions récentes : liste verticale de cartes --- */
body .home-view .connection-list-ui > div.recent-connections {
    grid-area: recent; align-self: start;
    display: flex; flex-direction: column; gap: 7px;
    width: 300px; margin: 0; padding: .4em 0 2em 2em; text-align: left;
}
body .home-view div.recent-connections div.connection {
    cursor: pointer; /* carte entière cliquable */
    width: auto; max-width: none; margin: 0; padding: .6em .85em .55em;
    background: rgba(28,52,60,.42); border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    transition: background .15s, transform .15s;
}
body .home-view div.recent-connections div.connection:hover { background: rgba(28,52,60,.62); transform: translateX(3px); }
body .home-view .recent-connections .connection a { display: block; text-decoration: none; }
body .home-view .recent-connections .connection .thumbnail { display: none; }
body .home-view .recent-connections .connection .caption { padding: 0; text-align: left; }
body .home-view .recent-connections .connection .caption .name {
    display: block; margin: 0 1.5em 0 0; font-size: .9em; color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ellab-status { display: flex; align-items: center; gap: .45em; margin-top: .2em; font-size: .74em; color: rgba(255,255,255,.75); }
.ellab-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ellab-home-live); box-shadow: 0 0 0 2px rgba(127,224,196,.25); }

/* La plus récente : carte blanche mise en avant */
body .home-view div.recent-connections div.connection:first-of-type { background: #fff; border-color: #fff; box-shadow: 0 6px 20px rgba(20,40,50,.18); }
body .home-view div.recent-connections div.connection:first-of-type .name { color: #222; font-weight: bold; }
body .home-view div.recent-connections div.connection:first-of-type .ellab-status { color: #6b7378; }
body .home-view div.recent-connections div.connection:first-of-type .ellab-status::before { background: var(--ellab-home-accent); box-shadow: 0 0 0 2px var(--ellab-home-accent-soft); }

body .home-view .recent-connections .placeholder {
    margin: .2em 0 0; padding: .8em 1em; border-radius: 8px; font-size: .85em; font-style: italic;
    color: rgba(255,255,255,.85); background: rgba(28,52,60,.28); border: 1px dashed rgba(255,255,255,.3);
}
body .home-view .recent-connections .connection .remove-recent {
    top: 50%; right: 10px; width: 18px; height: 18px; margin-top: -9px; padding: 4px; box-sizing: border-box;
    background: rgba(255,255,255,.9); border-radius: 50%; opacity: .8;
}
body .home-view .recent-connections .connection .remove-recent:hover { opacity: 1; }

/* --- Arborescence --- */
body .home-view .all-connections .caption { padding: .42em .5em; border-radius: 8px; cursor: pointer; }
body .home-view .all-connections .caption .name { color: #333; margin-left: .35em; font-size: .95em; }
body .home-view .all-connections .expandable > .caption .icon.expand {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 4l4 4-4 4' fill='none' stroke='%236b7378' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: 16px; background-position: center;
    width: 18px; height: 18px; transition: transform .15s;
}
body .home-view .all-connections .expandable.expanded > .caption .icon.expand { transform: rotate(90deg); }
body .home-view .all-connections .expandable.empty > .caption .icon.expand { opacity: .3; transform: none; }
body .home-view .all-connections a.home-connection-group::before {
    content: ""; display: inline-block; width: 18px; height: 18px; margin-left: .2em;
    vertical-align: middle; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 6.5A1.5 1.5 0 0 1 4.5 5h4.6l2 2.2h8.4A1.5 1.5 0 0 1 21 8.7v9.8a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z' fill='%23e3ebf1' stroke='%233b6e8f' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
body .home-view .all-connections .connection .icon.type { opacity: .7; }
body .home-view .expandable > .children { margin-left: 16px; padding-left: 16px; }
body .home-view .expandable.expanded > .children > .list-item:before { border-left-color: #dfe4e6; left: -16px; }
body .home-view .expandable.expanded > .children > .list-item:after { border-bottom-color: #dfe4e6; left: -16px; width: 14px; top: 1.1em; }
body .home-view .pager .set-page.current { background: var(--ellab-home-accent); color: #fff; border-radius: 6px; }

/* ===== Colonne des cartes rétractable, pastilles, ouverture des machines ===== */

/* Bouton replier / déplier (début de l'en-tête « Connexions récentes ») */
body button.ellab-cards-btn {
    min-width: 0; box-shadow: none; border: none; text-transform: none; letter-spacing: 0;
    flex: none; width: 26px; height: 26px; margin-right: .7em; border-radius: 7px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.2); color: #fff; font-size: 20px; font-weight: bold; line-height: 1; padding-bottom: 2px; box-sizing: border-box;
    transition: background .15s;
}
body button.ellab-cards-btn::before { content: "\2039"; }
body button.ellab-cards-btn:hover { background: rgba(255,255,255,.35); }
body .home-view.ellab-cards-off button.ellab-cards-btn::before { content: "\203A"; }
.home-view.ellab-cards-off .connection-list-ui > .header:nth-child(1) h2 { visibility: hidden; }
.home-view.ellab-cards-off .connection-list-ui > div.recent-connections { display: none; }

/* Bandeau des pastilles */
body .home-view .connection-list-ui > .ellab-pills {
    grid-area: recent; align-self: start; display: none; position: relative; z-index: 3;
    flex-direction: column; align-items: center; gap: 8px;
    width: 58px; margin: .4em 0 0 2em; padding: 10px 0; box-sizing: border-box;
    border-radius: 12px; background: rgba(28,52,60,.35);
}
.home-view.ellab-cards-off .connection-list-ui > .ellab-pills { display: flex; }
.ellab-pill {
    position: relative; width: 38px; height: 38px; border-radius: 9px; text-decoration: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); color: #fff;
    font-size: 11.5px; font-weight: bold; letter-spacing: .02em; transition: background .15s, border-color .15s;
}
.ellab-pill:hover { background: rgba(255,255,255,.3); border-color: #fff; }
.ellab-pill.is-last { background: #fff; color: var(--ellab-home-accent-dark); }
.ellab-pill.is-live::after {
    content: ""; position: absolute; right: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ellab-home-live); border: 2px solid #fff;
}
.ellab-pill-tip {
    display: none; position: absolute; left: 48px; top: 50%; transform: translateY(-50%); z-index: 20;
    padding: 7px 11px; border-radius: 8px; white-space: nowrap; text-align: left;
    background: #1f2a30; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.ellab-pill-tip::before {
    content: ""; position: absolute; left: -5px; top: 50%; margin-top: -5px;
    border: 5px solid transparent; border-left: 0; border-right-color: #1f2a30;
}
.ellab-pill-tip b { display: block; font-size: 12.5px; }
.ellab-pill-tip small { display: block; font-size: 10.5px; color: #c9d6df; margin-top: 1px; }
.ellab-pill:hover .ellab-pill-tip { display: block; }

/* Boutons ↗ / ⇥ au survol d'une machine de l'arborescence */
body .home-view .all-connections .caption { position: relative; }
.ellab-acts {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: none; gap: 4px;
}
body .home-view .all-connections .caption:hover > .ellab-acts { display: flex; }
.ellab-act {
    width: 22px; height: 22px; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 12px;
    background: #fff; border: 1px solid #dfe5e7; color: var(--ellab-home-accent-dark);
}
.ellab-act:hover { border-color: var(--ellab-home-accent); }
.ellab-act.is-default { background: var(--ellab-home-accent); border-color: var(--ellab-home-accent); color: #fff; }

/* Boutons ↗ / ⇥ sur les cartes récentes (visibles au survol) */
body .home-view .recent-connections .connection .ellab-card-acts {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: none; gap: 4px; z-index: 2;
}
body .home-view .recent-connections .connection:hover .ellab-card-acts { display: flex; }
body .home-view .recent-connections .connection:hover .caption .name { margin-right: 4.8em; }
.home-view.ellab-has-side .recent-connections .connection:hover .caption .name { margin-right: 6.6em; }
body .home-view .recent-connections .connection .ellab-act { width: 26px; height: 26px; font-size: 13px; border-radius: 7px;
    background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.25); color: #fff; }
body .home-view .recent-connections .connection .ellab-act.is-default { background: var(--ellab-home-accent); border-color: var(--ellab-home-accent); color: #fff; }
body .home-view .recent-connections .connection:first-of-type .ellab-act { background: #eef4f5; border-color: #dfe8ea; color: var(--ellab-home-accent-dark); }
body .home-view .recent-connections .connection:first-of-type .ellab-act.is-default { background: var(--ellab-home-accent); border-color: var(--ellab-home-accent); color: #fff; }
/* le × de suppression passe à gauche des icônes */
body .home-view .recent-connections .connection:hover .remove-recent { right: 74px; }
.home-view.ellab-has-side .recent-connections .connection:hover .remove-recent { right: 104px; }

/* Préférence d'ouverture (bas de la barre latérale) */
.ellab-openpref {
    margin: 1.2em .4em .4em; padding: .7em .75em; border-radius: 10px;
    background: #fff; border: 1px solid #e6e9eb; font-size: .78em; color: #6b7378;
}
.ellab-seg { display: flex; margin-top: .45em; border: 1px solid #dde2e5; border-radius: 8px; overflow: hidden; }
.ellab-seg span { flex: 1; text-align: center; padding: .45em .3em; cursor: pointer; color: #555; }
.ellab-seg span + span { border-left: 1px solid #dde2e5; }
.ellab-seg span.on { background: var(--ellab-home-accent); color: #fff; font-weight: bold; }
.ellab-openpref small { display: block; margin-top: .45em; font-size: .92em; color: #9aa3a8; }

/* --- Mobile : barre latérale au-dessus, en accordéon --- */
@media (max-width: 760px) {
    body .home-view, body .home-view:has(.ellab-sb-toggle:checked) {
        grid-template-columns: 1fr; grid-template-rows: 60px auto auto 64px auto;
        grid-template-areas: "brand" "ahead" "tree" "rhead" "recent";
    }
    body .home-view::before { grid-column: 1; grid-row: 4 / 6; margin: 8px; background-size: 0 0, 60% auto, auto, auto, auto; background-position: right bottom, 50% 85%, 0 0, 0 0, 0 0; }
    body .home-view .connection-list-ui > .header:nth-child(1) { margin: 8px 8px 0; padding: 0 1em; }
    body .home-view .connection-list-ui > div.recent-connections { width: auto; padding: .4em 1.4em 9em; }
    body .home-view .connection-list-ui > .ellab-pills { flex-direction: row; flex-wrap: wrap; width: auto; margin: .4em 1.4em; padding: 8px; }
    .ellab-pill-tip { left: 50%; top: 46px; transform: translateX(-50%); }
    .ellab-pill-tip::before { display: none; }
    .ellab-sb-btn { transform: rotate(-90deg); }
    .home-view:has(.ellab-sb-toggle:checked) .ellab-brand { flex-direction: row; padding: 0 .75em 0 1.1em; }
    .home-view:has(.ellab-sb-toggle:checked) .ellab-logo-full { display: block; }
    .home-view:has(.ellab-sb-toggle:checked) .ellab-brand-name { display: inline; }
    .home-view:has(.ellab-sb-toggle:checked) .ellab-brand-initial { display: none; }
    .home-view:has(.ellab-sb-toggle:checked) .ellab-logo-mini { display: none; }
    .home-view:has(.ellab-sb-toggle:checked) .ellab-sb-btn { margin-left: auto; width: 30px; height: 30px; transform: rotate(90deg); }
    .home-view:has(.ellab-sb-toggle:checked) .connection-list-ui > .header:nth-child(3),
    .home-view:has(.ellab-sb-toggle:checked) .connection-list-ui > .all-connections { display: none; }
}

/* Infobulle flottante : nom complet des cartes (et des machines tronquées de l'arborescence) */
.ellab-float-tip {
    display: none; position: fixed; z-index: 9990; pointer-events: none;
    max-width: 420px; padding: 7px 11px; border-radius: 8px; text-align: left;
    background: #1f2a30; color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.ellab-float-tip b { display: block; font-size: 12.5px; word-break: break-word; }
.ellab-float-tip small { display: block; font-size: 10.5px; color: #c9d6df; margin-top: 1px; }
/* noms longs dans l'arborescence : coupés proprement */
body .home-view .all-connections .caption .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; max-width: calc(100% - 3.2em); vertical-align: middle; }

/* Repères fournis par d'autres modules (machine connectée en arrière-plan, affichée à côté) */
.ellab-pill.is-shown { outline: 2px solid #fff; outline-offset: 2px; }
.ellab-live { display: block; margin-top: .2em; font-size: .74em; color: var(--ellab-home-live); }
body .home-view .all-connections .caption.is-live .name { font-weight: bold; }
@media (prefers-reduced-motion: reduce) {
    body .home-view, body .home-view div.recent-connections div.connection, .ellab-sb-btn { transition: none; }
}
/* ===== ellab-lab — énoncé du TP (panneau de l'espace de travail) =====
   Couleurs neutres en variables, redéfinies par le pack de marque. */
:root {
    --ellab-lab-accent: var(--ellab-home-accent, #3b6e8f);
    --ellab-lab-accent-dark: var(--ellab-home-accent-dark, #2c4f66);
    --ellab-lab-accent-soft: #edf2f6;
    --ellab-lab-ok: #2f8a5b;
    --ellab-lab-warn: #b7791f;
}

/* Bouton : remise à zéro du style des boutons de Guacamole */
body .ellab-lab button {
    min-width: 0; margin: 0; box-shadow: none; text-transform: none; letter-spacing: 0; font: inherit; line-height: inherit;
}

.ellab-work-panel.ellab-lab { position: relative; gap: 12px; }
.ellab-tp {
    flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 14px; box-shadow: 0 12px 40px rgba(20, 40, 50, .25); color: #333;
}
.ellab-tp-head { padding: 16px 22px 0; border-bottom: 1px solid #eef1f2; }
.ellab-tp-crumb { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: #8a9399; }
.ellab-tp-right { display: flex; align-items: center; gap: 8px; flex: none; }
.ellab-tp-src { background: var(--ellab-lab-accent-soft); color: var(--ellab-lab-accent-dark); border-radius: 20px; padding: 2px 9px; font-size: 10.5px; font-weight: bold; }
body .ellab-lab button.ellab-tp-hide {
    cursor: pointer; font-size: 11px; font-weight: bold; color: var(--ellab-lab-accent-dark);
    background: var(--ellab-lab-accent-soft); border: 1px solid #d9e3ea; border-radius: 7px; padding: 3px 8px;
}
body .ellab-lab button.ellab-tp-hide:hover { border-color: var(--ellab-lab-accent); }
.ellab-tp-title { margin: 6px 0 4px; font-size: 1.3em; color: #222; text-align: left; }
.ellab-tp-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: #6b7378; margin-bottom: 10px; }
.ellab-tp-meta b { color: #333; }
.ellab-tp-timer { background: var(--ellab-lab-accent-soft); color: var(--ellab-lab-accent-dark); border-radius: 20px; padding: 1px 10px; font-weight: bold; }
.ellab-tp-timer:empty { display: none; }
.ellab-tp-prog { height: 6px; border-radius: 4px; background: #e8eeef; overflow: hidden; margin-bottom: 10px; }
.ellab-tp-prog i { display: block; height: 100%; width: 0; background: var(--ellab-lab-accent); transition: width .3s; }
.ellab-tp-tabs { display: flex; gap: 18px; font-size: 13px; }
body .ellab-lab .ellab-tp-tabs button {
    padding: 8px 0; color: #6b7378; cursor: pointer; background: none; border: none; border-bottom: 2px solid transparent; border-radius: 0;
}
body .ellab-lab .ellab-tp-tabs button:hover { color: #333; }
body .ellab-lab .ellab-tp-tabs button.on { color: var(--ellab-lab-accent-dark); font-weight: bold; border-bottom-color: var(--ellab-lab-accent); }
.ellab-tp-body { flex: 1; overflow-y: auto; padding: 14px 22px 20px; font-size: 13.5px; line-height: 1.6; color: #444; }
.ellab-tp-foot { padding: 9px 22px; border-top: 1px solid #eef1f2; font-size: 11.5px; color: #8a9399; }

/* contenu */
.ellab-tp-body img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid #eef1f2; margin: 6px 0; }
.ellab-tp-body blockquote { margin: 10px 0; padding: 7px 12px; border-left: 3px solid #f5b544; background: #fff8ec; border-radius: 0 8px 8px 0; color: #7a5a1c; }
.ellab-tp-body blockquote p { margin: 0; }
.ellab-tp-body code { font-family: Consolas, "Courier New", monospace; font-size: .92em; background: #eef2f3; border-radius: 4px; padding: 1px 4px; }
.ellab-tp-body a { color: var(--ellab-lab-accent-dark); }
.ellab-intro { margin-bottom: 8px; }
.ellab-step { margin: 0 0 14px; }
.ellab-step-head { display: flex; align-items: center; gap: 10px; }
.ellab-step-head h2 { margin: 0; font-size: 1.02em; color: #222; text-transform: none; letter-spacing: 0; }
body .ellab-lab button.ellab-check {
    flex: none; width: 18px; height: 18px; padding: 0; border-radius: 6px; border: 2px solid #cfd8db; background: #fff;
    cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px;
}
body .ellab-lab button.ellab-check:hover, body .ellab-lab button.ellab-check:focus-visible { border-color: var(--ellab-lab-accent); outline: none; }
body .ellab-lab .ellab-step.done button.ellab-check { background: var(--ellab-lab-accent); border-color: var(--ellab-lab-accent); }
.ellab-step.done .ellab-check::after { content: "✓"; }
.ellab-step.done .ellab-step-head h2 { color: #9aa3a8; text-decoration: line-through; }
.ellab-step-body { padding-left: 30px; }
.ellab-step.done .ellab-step-body { opacity: .55; }

/* blocs de commandes */
.ellab-code { margin: 8px 0 10px; }
.ellab-code pre { position: relative; margin: 0; padding: 11px 46px 11px 13px; background: #1f2a30; color: #d6eef0; border-radius: 9px; overflow-x: auto; }
.ellab-tp-body .ellab-code pre code { background: none; padding: 0; color: inherit; font-size: 12.5px; line-height: 1.55; white-space: pre; }
body .ellab-lab button.ellab-copy {
    position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; padding: 0; border-radius: 6px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 14px;
    color: #b5c6cc; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12);
}
body .ellab-lab button.ellab-copy:hover { color: #fff; background: rgba(255, 255, 255, .18); }
body .ellab-lab button.ellab-copy.ok { color: #7fe0c4; }
.ellab-send { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
body .ellab-lab button.ellab-send-btn {
    cursor: pointer; font-size: 11.5px; font-weight: bold; padding: 5px 10px; border: none; border-radius: 7px;
    background: var(--ellab-lab-accent); color: #fff;
}
body .ellab-lab button.ellab-send-btn:hover { background: var(--ellab-lab-accent-dark); }
body .ellab-lab button.ellab-send-btn:disabled { background: #cfd8db; cursor: default; }
.ellab-target { font-size: 11.5px; border: 1px solid #dde2e5; border-radius: 7px; padding: 4px 6px; background: #fff; color: #555; max-width: 150px; }
.ellab-send-msg { font-size: 11.5px; color: #6b7378; }
.ellab-send-msg.ok { color: var(--ellab-lab-ok); font-weight: bold; }
.ellab-send-msg.warn { color: var(--ellab-lab-warn); }
body .ellab-lab button.ellab-link {
    cursor: pointer; margin-left: 8px; padding: 0; border: none; background: none;
    font-weight: bold; color: var(--ellab-lab-accent-dark); text-decoration: underline;
}
.ellab-res { padding-left: 18px; }
.ellab-res li { margin: 6px 0; }
.ellab-locked { padding: 14px; border-radius: 10px; background: #f4f7f8; color: #6b7378; }
.ellab-notes {
    width: 100%; height: calc(100% - 4px); min-height: 240px; box-sizing: border-box; padding: 12px;
    border: 1px solid #dde2e5; border-radius: 10px; font: inherit; color: #333; resize: vertical;
}

/* énoncé masqué : bouton « Afficher » (machine non affichée) ou fine colonne (machine à côté) */
body .ellab-lab button.ellab-tp-show {
    display: none; position: absolute; right: 0; top: 0; cursor: pointer; border: none;
    background: #fff; color: var(--ellab-lab-accent-dark); font-weight: bold; font-size: 12.5px;
    padding: 9px 14px; border-radius: 10px; box-shadow: 0 10px 30px rgba(20, 40, 50, .25);
}
.ellab-lab.tp-hidden:not(.split) .ellab-tp { display: none; }
body .ellab-lab.tp-hidden:not(.split) button.ellab-tp-show { display: block; }
.ellab-tp-rail { display: none; }
.ellab-work.split .ellab-lab.tp-hidden { flex: 0 0 46px; }
.ellab-lab.split.tp-hidden .ellab-tp { display: none; }
.ellab-lab.split.tp-hidden .ellab-tp-rail {
    display: flex; flex: 0 0 46px; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(20, 40, 50, .2);
}
body .ellab-lab button.ellab-rail-open {
    width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; background: var(--ellab-lab-accent); color: #fff; font-weight: bold;
}
.ellab-rail-title, .ellab-rail-timer { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: bold; color: #333; white-space: nowrap; }
.ellab-rail-timer { font-size: 10.5px; color: var(--ellab-lab-accent-dark); }
.ellab-rail-prog { width: 6px; height: 140px; border-radius: 4px; background: #e8eeef; position: relative; overflow: hidden; }
.ellab-rail-prog i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: var(--ellab-lab-accent); }
/* ===== ellab-login — page de connexion (Guacamole 1.6.0) =====
   Logo, fond et couleurs en variables : le pack de marque les redéfinit sur :root. */
:root {
    --ellab-login-accent: #3b6e8f;
    --ellab-login-accent-dark: #2c4f66;
    --ellab-login-accent-soft: rgba(59, 110, 143, .14);
    --ellab-login-muted: #757575;
    --ellab-login-bg: linear-gradient(160deg, #b9c9d6 0%, #8aa3b6 30%, #5b7489 62%, #34465a 100%);
    --ellab-login-logo: none;
}

/* Fond : photo + voile sombre pour la lisibilité
   (div.login-ui : même priorité que la règle « background: white » de Guacamole) */
div.login-ui {
    background: linear-gradient(rgba(10,20,25,.35), rgba(10,20,25,.35)), var(--ellab-login-bg);
    background-size: cover; background-position: left top; background-repeat: no-repeat;
}

/* Carte à droite (le fond du pack de marque reste visible à gauche) */
.login-ui .login-dialog-middle { text-align: right; padding-right: 8%; }
.login-ui .login-dialog {
    max-width: 420px;
    text-align: left;
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    background: rgba(255,255,255,.96);
    padding: 1.5em 1.75em 1.25em;
}

/* Logo du pack de marque (sinon le logo de Guacamole) */
body.ellab-has-logo .login-ui .login-dialog .logo {
    background-image: var(--ellab-login-logo);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 230px;
    height: 48px;
    margin: 0.25em auto 0.75em;
}

/* Titre et version */
.login-ui .login-dialog .version { text-align: center; padding-bottom: 0.5em; }
.login-ui .login-dialog .version .app-name {
    font-size: 1.15em;
    letter-spacing: .02em;
    text-transform: none;
    color: #333;
    white-space: nowrap;
}
.login-ui .login-dialog .version .version-number { display: none; }
.ellab-subtitle { color: var(--ellab-login-muted); font-size: .9em; margin-top: .2em; }

/* Champs et bouton */
.login-ui .login-fields input[type="text"],
.login-ui .login-fields input[type="password"] { border-radius: 6px; }
.login-ui .login-fields input:focus { border-color: var(--ellab-login-accent); outline: none; box-shadow: 0 0 0 2px var(--ellab-login-accent-soft); }
.login-ui .buttons input[type="submit"] {
    background: var(--ellab-login-accent);
    border: none;
    border-radius: 6px;
    transition: background .15s;
}
.login-ui .buttons input[type="submit"]:hover { background: var(--ellab-login-accent-dark); }

/* Connexion par le fournisseur d'identité : liens natifs de Guacamole masqués, boutons dans la carte */
.login-ui .sso-providers.ellab-sso-native { display: none; }
.ellab-sso { margin-top: .9em; }
.ellab-sso-or {
    display: flex; align-items: center; gap: .75em;
    color: var(--ellab-login-muted); font-size: .8em; text-transform: uppercase; letter-spacing: .08em;
}
.ellab-sso-or::before, .ellab-sso-or::after { content: ""; flex: 1; border-top: 1px solid #dde2e5; }
a.ellab-sso-btn {
    display: block; margin-top: .75em; padding: .65em 1em; box-sizing: border-box; width: 100%;
    border: 1px solid var(--ellab-login-accent); border-radius: 6px; background: #fff;
    color: var(--ellab-login-accent); font-weight: bold; text-align: center; text-decoration: none;
    transition: background .15s;
}
a.ellab-sso-btn:hover, a.ellab-sso-btn:focus-visible { background: var(--ellab-login-accent-soft); outline: none; }

/* Pied de carte */
.ellab-footer { margin-top: 1em; text-align: center; font-size: .8em; color: var(--ellab-login-muted); line-height: 1.4; }
.ellab-footer a { color: var(--ellab-login-accent); text-decoration: none; }
.ellab-footer a:hover { text-decoration: underline; }
.ellab-version { margin-top: .6em; font-size: .85em; opacity: .55; letter-spacing: .02em; }

/* Menu en haut à droite */
.ellab-nav {
    position: fixed; top: 0; right: 0; z-index: 20;
    display: flex; align-items: center; gap: .15em; padding: 1em 2em;
}
body .ellab-nav .ellab-nav-item {
    min-width: 0; margin: 0; border: none; box-shadow: none; background: none; text-transform: none; letter-spacing: 0; font-family: inherit;
    display: inline-block; cursor: pointer;
    color: #fff; text-decoration: none; font-weight: bold; font-size: .95em;
    padding: .45em .9em; border-radius: 6px;
    text-shadow: 0 1px 3px rgba(0,0,0,.55);
    transition: background .15s;
}
body .ellab-nav .ellab-nav-item:hover, body .ellab-nav .ellab-nav-item:focus-visible, body .ellab-nav .ellab-dd.open > .ellab-nav-item {
    background: var(--ellab-login-accent); text-shadow: none; outline: none;
}
.ellab-caret {
    display: inline-block; width: 0; height: 0; margin-left: .3em; vertical-align: middle;
    border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor;
    transition: transform .2s;
}
.ellab-dd.open .ellab-caret { transform: rotate(180deg); }

/* Listes déroulantes (ouvertes au clic, au clavier ; Échap ou clic ailleurs pour fermer) */
.ellab-dd { position: relative; outline: none; }
.ellab-dd-menu {
    position: absolute; right: 0; top: calc(100% + 10px);
    padding: .9em; background: #fff; border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28); text-align: left; color: #333;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .15s, transform .15s, visibility 0s linear .3s;
}
.ellab-dd-menu::before { /* pont invisible au-dessus de la liste */
    content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px;
}
.ellab-dd-menu::after { /* petite flèche */
    content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
    background: #fff; transform: rotate(45deg); border-radius: 2px;
}
.ellab-dd.open .ellab-dd-menu {
    opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.ellab-dd-title {
    font-size: .72em; font-weight: bold; letter-spacing: .08em; text-transform: uppercase;
    color: #999; margin: 0 0 .7em .2em;
}

/* Partenaires : grille de tuiles */
.ellab-partners { width: 340px; }
.ellab-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.ellab-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55em;
    padding: .9em .6em .7em; border: 1px solid #ececec; border-radius: 10px; text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ellab-tile:hover { border-color: var(--ellab-login-accent); box-shadow: 0 4px 14px var(--ellab-login-accent-soft); transform: translateY(-1px); }
.ellab-tile-logo { height: 44px; width: 100%; display: flex; align-items: center; justify-content: center; }
.ellab-tile-logo img { max-height: 44px; max-width: 128px; object-fit: contain; }
.ellab-tile-logo b { font-size: .95em; color: #333; }
.ellab-tile-host { font-size: .72em; color: #888; }
.ellab-tile:hover .ellab-tile-host { color: var(--ellab-login-accent-dark); }

/* Support : lignes icône + texte */
.ellab-support { width: 270px; }
.ellab-row {
    display: flex; align-items: center; gap: .75em; padding: .55em .5em;
    border-radius: 8px; text-decoration: none; color: #333;
}
.ellab-row:hover { background: var(--ellab-login-accent-soft); }
.ellab-row-icon {
    flex: none; width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--ellab-login-accent-soft); color: var(--ellab-login-accent-dark);
}
.ellab-row-icon.ellab-row-wa { background: rgba(37,211,102,.15); color: #1a9e4b; }
.ellab-row-icon { font-size: 16px; }
.ellab-row-text { display: flex; flex-direction: column; line-height: 1.3; }
.ellab-row-text b { font-size: .88em; }
.ellab-row-text small { font-size: .78em; color: #888; }

/* Bascule de langue */
.ellab-lang { margin-left: .6em; display: inline-flex; border: 1px solid rgba(255,255,255,.7); border-radius: 6px; overflow: hidden; }
.ellab-lang button {
    min-width: 0; margin: 0; border: none; border-radius: 0; box-shadow: none; background: none; cursor: pointer;
    color: #fff; text-decoration: none; font-weight: bold; font-size: .8em;
    padding: .35em .6em; text-shadow: 0 1px 3px rgba(0,0,0,.55);
}
.ellab-lang button.active { background: #fff; color: var(--ellab-login-accent-dark); text-shadow: none; }
.ellab-lang button:not(.active):hover { background: var(--ellab-login-accent-soft); }

/* Guide du lab (fenêtre) */
.ellab-guide { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; }
.ellab-guide-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); cursor: pointer; }
.ellab-guide-box {
    position: relative; width: min(560px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow-y: auto;
    background: #fff; border-radius: 10px; padding: 1.5em 1.75em; text-align: left;
    box-shadow: 0 20px 60px rgba(0,0,0,.4); color: #333;
}
.ellab-guide-box h2 { margin: 0 0 .5em; font-size: 1.3em; color: var(--ellab-login-accent-dark); }
.ellab-guide-box h3 { margin: 1em 0 .25em; font-size: 1em; }
.ellab-guide-box p { margin: .25em 0; font-size: .9em; line-height: 1.5; color: #555; }
body button.ellab-guide-close {
    position: absolute; top: .3em; right: .5em; min-width: 0; margin: 0; padding: 0 .2em; border: none; box-shadow: none;
    background: none; font-size: 1.8em; line-height: 1; color: #999; cursor: pointer;
}
body button.ellab-guide-close:hover { color: #333; }

/* Mobile : carte centrée, menu compact */
@media (max-width: 720px) {
    .login-ui .login-dialog .version .app-name { white-space: normal; }
    .login-ui .login-dialog-middle { text-align: center; padding-right: 0; }
    .ellab-nav { left: 0; justify-content: center; flex-wrap: wrap; padding: .5em; background: rgba(0,0,0,.5); }
    .ellab-nav-item { font-size: .82em; padding: .4em .55em; }
    .ellab-lang { margin-left: .3em; }
    .ellab-partners { width: 290px; }
    .ellab-dd-menu { right: -40px; }
}
/* ellab-messages — cloche, liste et bandeau. Couleurs neutres en variables (pack de marque). */
:root {
    --ellab-msg-accent: #3b6e8f;
    --ellab-msg-alert: #d08a1e;
    --ellab-msg-alert-soft: #fff6e6;
    --ellab-msg-text: #333;
    --ellab-msg-muted: #8a959b;
    --ellab-msg-border: #eef1f2;
}

body button.ellab-msg-bell {
    position: relative; flex: none; min-width: 0; width: 34px; height: 34px; margin: 0 .6em 0 auto; padding: 0;
    box-shadow: none; text-transform: none; letter-spacing: 0;
    border: 1px solid rgba(0, 0, 0, .15); border-radius: 50%; cursor: pointer;
    background: #fff; font: 16px/1 sans-serif;
}
body button.ellab-msg-bell:hover, body button.ellab-msg-bell:focus-visible { filter: brightness(.95); outline: none; }
.ellab-msg-bell i {
    position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box;
    border-radius: 9px; border: 2px solid #fff; background: var(--ellab-msg-alert); color: #fff;
    font: bold 10px/14px sans-serif; font-style: normal; text-align: center;
}
/* cloche, aide, menu utilisateur : groupés à droite */
body .home-view .connection-list-ui > .header .ellab-msg-bell + .ellab-help-btn,
body .home-view .connection-list-ui > .header .ellab-msg-bell + .user-menu { margin-left: 0; }

.ellab-msg-toast {
    position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 9999;
    display: flex; gap: 12px; align-items: flex-start; overflow: hidden;
    width: min(560px, calc(100vw - 32px)); box-sizing: border-box; padding: 12px 14px;
    background: #fff; color: var(--ellab-msg-text); border-left: 5px solid var(--ellab-msg-alert);
    border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .3); font-size: 13px;
}
.ellab-msg-toast .ic { font-size: 20px; }
.ellab-msg-toast .tx { flex: 1; }
.ellab-msg-toast b { display: block; font-size: 11px; color: var(--ellab-msg-alert); letter-spacing: .05em; text-transform: uppercase; }
.ellab-msg-toast .tx span { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; }
body .ellab-msg-toast button.x {
    min-width: 0; padding: 0 4px; margin: 0; box-shadow: none; border: none; background: none;
    cursor: pointer; color: #999; font-size: 15px;
}
.ellab-msg-toast .bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--ellab-msg-alert);
    animation: ellab-msg-bar 9s linear forwards;
}
@keyframes ellab-msg-bar { to { width: 0; } }
@media (prefers-reduced-motion: reduce) { .ellab-msg-toast .bar { animation: none; } }

.ellab-msg-drawer {
    position: fixed; z-index: 9998; width: min(340px, calc(100vw - 20px)); overflow: hidden;
    background: #fff; color: var(--ellab-msg-text); border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, .4);
}
.ellab-msg-drawer h4 {
    display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 12px 14px;
    font-size: 13.5px; border-bottom: 1px solid var(--ellab-msg-border);
}
body .ellab-msg-drawer button.ellab-msg-readall {
    min-width: 0; margin: 0; padding: 0; box-shadow: none; border: none; background: none; text-transform: none;
    font-size: 11px; font-weight: bold; color: var(--ellab-msg-accent); cursor: pointer;
}
body .ellab-msg-drawer button.ellab-msg-readall:disabled { color: var(--ellab-msg-muted); cursor: default; }
.ellab-msg-list { max-height: 40vh; overflow-y: auto; }
.ellab-msg { padding: 10px 14px; border-bottom: 1px solid var(--ellab-msg-border); font-size: 12.5px; line-height: 1.4; }
.ellab-msg small { display: block; margin-bottom: 2px; font-size: 10.5px; color: var(--ellab-msg-muted); }
.ellab-msg.new { background: var(--ellab-msg-alert-soft); border-left: 3px solid var(--ellab-msg-alert); }
.ellab-msg-foot {
    padding: 7px 14px; text-align: right; font-size: 10.5px; color: var(--ellab-msg-muted);
    background: #fafbfb; border-top: 1px solid var(--ellab-msg-border);
}
/* ===== ellab-workspace — machines « à côté » sur l'accueil =====
   Grille de l'accueil (ellab-home) étendue d'une colonne « work » quand une machine est affichée
   ou quand un panneau (ex. énoncé du TP) est présent. Couleurs neutres en variables (pack de marque). */
:root {
    --ellab-ws-accent: var(--ellab-home-accent, #3b6e8f);
    --ellab-ws-live: var(--ellab-home-live, #7fe0c4);
    --ellab-ws-head-bg: #1d2529;
    --ellab-ws-head-fg: #d7e2e8;
}

body .home-view.ellab-split,
body .home-view.ellab-has-panel {
    grid-template-columns: var(--ellab-sidebar, 300px) auto minmax(0, 1fr);
    grid-template-areas: "brand rhead rhead" "ahead recent work" "tree recent work";
}
body .home-view.ellab-split:has(.ellab-sb-toggle:checked),
body .home-view.ellab-has-panel:has(.ellab-sb-toggle:checked) { grid-template-columns: var(--ellab-sidebar-mini, 64px) auto minmax(0, 1fr); }
body .home-view.ellab-split::before,
body .home-view.ellab-has-panel::before { grid-column: 2 / 4; }
body .home-view.ellab-split .connection-list-ui > div.recent-connections,
body .home-view.ellab-has-panel .connection-list-ui > div.recent-connections { padding-right: 0; }
/* le menu utilisateur passe au-dessus de l'espace de travail */
body .home-view .connection-list-ui > .header:nth-child(1) { position: relative; z-index: 6; }
body .home-view .user-menu .menu-contents { z-index: 50; }

.ellab-work {
    grid-area: work; position: sticky; top: 76px; align-self: start; z-index: 2;
    display: flex; gap: 12px; min-width: 0;
    height: calc(100vh - 104px); margin: .2em 28px 0 1.2em;
}
.ellab-work-panel { display: none; }
.home-view.ellab-has-panel .ellab-work-panel { display: flex; flex: 1; min-width: 0; }
.ellab-work.split .ellab-work-panel { flex: 0 0 400px; }
.ellab-work.split { margin-left: .6em; margin-right: 14px; }

/* Hors « à côté », le cadre n'est pas masqué (display:none) mais garé hors écran avec une vraie taille :
   Guacamole ne connecte une machine qu'une fois sa zone d'affichage dimensionnée. */
.ellab-frame {
    flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: #0c0c0c; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.ellab-work:not(.split) .ellab-frame {
    position: fixed; left: -30000px; top: 0; width: 1280px; height: 800px; visibility: hidden; pointer-events: none;
}
.ellab-frame:fullscreen { border-radius: 0; }
.ellab-fr-head {
    display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px;
    background: var(--ellab-ws-head-bg); color: var(--ellab-ws-head-fg); font-size: 12px;
}
.ellab-fr-name { display: flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ellab-fr-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #f5b544; }
.ellab-fr-dot.on { background: var(--ellab-ws-live); }
.ellab-fr-dot.off { background: #e2564a; }
.ellab-fr-btns { display: flex; gap: 6px; flex: none; }
body button.ellab-fr-btn {
    position: relative; min-width: 0; margin: 0; box-shadow: none; border: none; text-transform: none; letter-spacing: 0;
    cursor: pointer; font-size: 11.5px; padding: 4px 9px; border-radius: 6px;
    background: rgba(255, 255, 255, .08); color: var(--ellab-ws-head-fg);
}
body button.ellab-fr-btn:hover, body button.ellab-fr-btn:focus-visible { background: rgba(255, 255, 255, .18); color: #fff; outline: none; }
body button.ellab-fr-btn.primary { background: var(--ellab-ws-accent); color: #fff; font-weight: bold; }
body button.ellab-fr-btn.danger:hover { background: #e2564a; color: #fff; }
.ellab-fr-body { flex: 1; position: relative; }
/* un cadre par machine : seul le cadre actif est visible */
.ellab-fr-body iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000;
    display: block; visibility: hidden; pointer-events: none;
}
.ellab-fr-body iframe.on { visibility: visible; pointer-events: auto; z-index: 1; }

/* cartes ajoutées pour les machines ouvertes hors « connexions récentes » */
body .home-view .recent-connections:has(.ellab-synth) .placeholder { display: none !important; }
body .home-view .recent-connections .connection.is-live .ellab-status { display: none; }
/* arborescence : point vert sur l'icône des machines connectées */
body .home-view .all-connections .caption.is-live .icon.type { position: relative; overflow: visible; }
body .home-view .all-connections .caption.is-live .icon.type::after {
    content: ""; position: absolute; right: -3px; bottom: -2px; width: 8px; height: 8px; border-radius: 50%;
    background: var(--ellab-ws-live); border: 2px solid #fff;
}
.ellab-pill.is-live::before {
    content: ""; position: absolute; left: -3px; bottom: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--ellab-ws-live); border: 2px solid #34465a;
}

@media (max-width: 760px) {
    body .home-view.ellab-split, body .home-view.ellab-has-panel,
    body .home-view.ellab-split:has(.ellab-sb-toggle:checked), body .home-view.ellab-has-panel:has(.ellab-sb-toggle:checked) {
        grid-template-columns: 1fr; grid-template-areas: "brand" "ahead" "tree" "rhead" "recent" "work";
        grid-template-rows: 60px auto auto 64px auto auto;
    }
    body .home-view.ellab-split::before, body .home-view.ellab-has-panel::before { grid-column: 1; grid-row: 4 / 7; }
    .ellab-work { position: relative; top: 0; height: 75vh; margin: 8px 16px 16px; }
    .ellab-work.split { flex-direction: column; }
    .ellab-work.split .ellab-work-panel { flex: 0 0 45%; }
}
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

/* Label/tag denoting the user that shared a connection */
.jdbc-share-tag {

    background: #0095ff;
    padding: 0.25em;

    -moz-border-radius:    0.25em;
    -webkit-border-radius: 0.25em;
    -khtml-border-radius:  0.25em;
    border-radius:         0.25em;

    color: white;
    font-size: 0.75em;
    font-weight: bold;

}
/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.login-ui .sso-providers {

    padding: 0.25em 0.5em;
    position: absolute;
    bottom: 0;
    left: 0;

}

.sso-providers ul {
    list-style: none;
}

.sso-providers ul, .sso-providers li {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.sso-providers li::before {
    content: ' / ';
}

.sso-providers li:first-child::before {
    display: none;
}