/*
 * 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;

}
.totp-enroll p,.totp-details{font-size:.8em}.totp-qr-code{text-align:center}.totp-qr-code img{margin:1em;border:1px solid rgba(0,0,0,0.25);box-shadow:1px 1px 2px rgba(0,0,0,0.25);cursor:pointer}h3.totp-details-header{font-size:.8em}h3.totp-details-header::before{content:'▸ '}.totp-details-visible h3.totp-details-header::before{content:'▾ '}.totp-details,.totp-hide-details{display:none}.totp-details-visible .totp-details{display:table}.totp-details-visible .totp-hide-details{display:inline}.totp-details-visible .totp-show-details{display:none}.totp-hide-details,.totp-show-details{color:blue;text-decoration:underline;cursor:pointer;margin:0 .25em;font-weight:normal}.totp-details{margin:0 auto}.totp-details th{padding-right:.25em;text-align:left}.totp-details td{font-family:monospace}.totp-detail{display:inline-block;margin:0 .25em}/*
 * Orso Dark Theme for Apache Guacamole 1.6.0
 * Palette: sombre, sobre, accents vert Orso.
 *
 * Logo futur :
 * - le bloc .orso-logo-placeholder est actuellement un wordmark CSS.
 * - lorsqu'un logo sera disponible, remplacer son contenu par une image
 *   via l'extension HTML/CSS ou reconstruire le JAR avec la ressource.
 */

:root {
    --orso-bg: #101417;
    --orso-bg-elevated: #171d21;
    --orso-panel: #1d252a;
    --orso-panel-hover: #263138;
    --orso-border: #334149;
    --orso-text: #eef4f1;
    --orso-muted: #9caeaa;
    --orso-accent: #36c56f;
    --orso-accent-hover: #47d980;
    --orso-accent-soft: rgba(54, 197, 111, 0.16);
    --orso-danger: #e86969;
    --orso-shadow: 0 18px 55px rgba(0, 0, 0, 0.38);
    --orso-radius: 14px;
}

/* Base */
html,
body,
body.client {
    background: var(--orso-bg) !important;
    color: var(--orso-text) !important;
}

body,
input,
button,
select,
textarea {
    font-family: "Segoe UI", Roboto, Arial, sans-serif !important;
}

a {
    color: var(--orso-accent) !important;
}

a:hover {
    color: var(--orso-accent-hover) !important;
}

/* Header / navigation */
.header,
.header .header-contents,
.menu,
.menu-body,
.user-menu,
.settings,
.list-item,
.page,
.view,
.home-page,
.login-ui {
    color: var(--orso-text);
}

.header,
.header .header-contents {
    background: #13191d !important;
    border-bottom: 1px solid var(--orso-border) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22) !important;
}

.header h2,
.header .title,
.header .user-menu .name {
    color: var(--orso-text) !important;
}

.menu,
.menu-body,
.user-menu,
.settings-menu {
    background: var(--orso-bg-elevated) !important;
    border-color: var(--orso-border) !important;
    box-shadow: var(--orso-shadow) !important;
}

.menu a,
.menu .menu-option,
.user-menu a {
    color: var(--orso-text) !important;
}

.menu a:hover,
.menu .menu-option:hover,
.user-menu a:hover,
.menu .selected {
    background: var(--orso-accent-soft) !important;
    color: var(--orso-accent-hover) !important;
}

/* Pages and panels */
.page,
.home-page,
.settings,
.manage,
.history,
.preferences,
.connection-list,
.connection-group,
.list,
.form,
.dialog,
.modal,
.section {
    background-color: transparent !important;
    color: var(--orso-text) !important;
}

.content,
.content-panel,
.settings .settings-page,
.manage .manage-page,
.list-item,
.connection,
.connection-group,
.dialog,
.modal {
    border-color: var(--orso-border) !important;
}

.list-item,
.connection,
.connection-group,
.settings .section,
.form .section {
    background: var(--orso-panel) !important;
    border: 1px solid var(--orso-border) !important;
    border-radius: var(--orso-radius) !important;
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.16) !important;
}

.list-item:hover,
.connection:hover,
.connection-group:hover {
    background: var(--orso-panel-hover) !important;
    border-color: rgba(54, 197, 111, 0.55) !important;
}

.list-item .name,
.connection .name,
.connection-group .name,
h1, h2, h3, h4, h5, label {
    color: var(--orso-text) !important;
}

.caption,
.description,
.placeholder,
.empty,
.help,
.hint,
.timestamp {
    color: var(--orso-muted) !important;
}

/* Inputs */
input,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="number"] {
    background: #11171a !important;
    color: var(--orso-text) !important;
    border: 1px solid var(--orso-border) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--orso-accent) !important;
    box-shadow: 0 0 0 3px var(--orso-accent-soft) !important;
    outline: none !important;
}

select option {
    background: var(--orso-bg-elevated);
    color: var(--orso-text);
}

/* Buttons */
button,
.button,
input[type="submit"],
input[type="button"],
.login-ui .login-dialog .buttons input {
    background: var(--orso-accent) !important;
    color: #08120d !important;
    border: 0 !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 22px rgba(54, 197, 111, 0.22) !important;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease !important;
}

button:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background: var(--orso-accent-hover) !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(54, 197, 111, 0.30) !important;
}

button.cancel,
.button.cancel,
button.delete,
.button.danger {
    background: #3a2225 !important;
    color: #ffdcdc !important;
    box-shadow: none !important;
}

/* Login */
.login-ui {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 14%, rgba(54, 197, 111, 0.14), transparent 31%),
        radial-gradient(circle at 85% 78%, rgba(54, 197, 111, 0.08), transparent 36%),
        linear-gradient(145deg, #0d1114 0%, #131a1e 48%, #0d1215 100%) !important;
}

.login-ui .login-dialog {
    width: min(420px, calc(100vw - 34px)) !important;
    padding: 30px 30px 26px !important;
    background: rgba(25, 33, 38, 0.95) !important;
    border: 1px solid rgba(116, 143, 136, 0.30) !important;
    border-radius: 20px !important;
    box-shadow: var(--orso-shadow) !important;
    backdrop-filter: blur(16px);
}

.login-ui .login-dialog .logo {
    display: none !important;
}

.orso-branding {
    text-align: center;
    margin: 2px 0 24px;
}

.orso-logo-placeholder {
    width: 92px;
    height: 92px;
    margin: 0 auto 16px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(145deg, rgba(54, 197, 111, 0.22), rgba(54, 197, 111, 0.06)),
        var(--orso-panel);
    border: 1px solid rgba(54, 197, 111, 0.46);
    color: var(--orso-accent-hover);
    font-weight: 900;
    font-size: 19px;
    letter-spacing: .14em;
    text-indent: .14em;
    box-shadow: inset 0 0 24px rgba(54, 197, 111, 0.08);
}

.orso-branding-title {
    margin: 0;
    color: var(--orso-text);
    font-size: 26px;
    font-weight: 750;
    letter-spacing: .01em;
}

.orso-branding-subtitle {
    margin: 7px 0 0;
    color: var(--orso-muted);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.login-ui .login-dialog .login-fields {
    margin-top: 4px !important;
}

.login-ui .login-dialog input {
    min-height: 44px !important;
}

.login-ui .login-dialog .buttons {
    margin-top: 20px !important;
}

.login-ui .login-dialog .buttons input {
    width: 100% !important;
    min-height: 46px !important;
}

/* Notifications, dialogs and tables */
.notification,
.error-message,
.warning,
.dialog,
.modal {
    background: var(--orso-bg-elevated) !important;
    color: var(--orso-text) !important;
    border-color: var(--orso-border) !important;
}

table,
thead,
tbody,
tr,
td,
th {
    border-color: var(--orso-border) !important;
}

th {
    background: #151c20 !important;
    color: var(--orso-muted) !important;
}

td {
    background: var(--orso-panel) !important;
    color: var(--orso-text) !important;
}

tr:hover td {
    background: var(--orso-panel-hover) !important;
}

/* Scrollbars */
* {
    scrollbar-color: #43545c #151b1f;
    scrollbar-width: thin;
}

*::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

*::-webkit-scrollbar-track {
    background: #151b1f;
}

*::-webkit-scrollbar-thumb {
    background: #43545c;
    border: 3px solid #151b1f;
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb:hover {
    background: #587078;
}

/* Mobile */
@media (max-width: 640px) {
    .login-ui .login-dialog {
        padding: 24px 20px 22px !important;
        border-radius: 17px !important;
    }

    .orso-logo-placeholder {
        width: 76px;
        height: 76px;
        border-radius: 20px;
    }

    .orso-branding-title {
        font-size: 23px;
    }
}
/* ==========================================================
   Orso Dark Theme 1.1
   Corrections ciblées :
   - menu utilisateur entièrement sombre ;
   - respiration des pages d'administration ;
   - groupes imbriqués moins "empilés" et mieux espacés.
   ========================================================== */

/* Menu utilisateur / menu contextuel */
.user-menu,
.user-menu .menu-body,
.user-menu .menu-contents,
.user-menu .menu-dropdown,
.user-menu .menu-item,
.user-menu .menu-option,
.header .user-menu,
.header .user-menu .menu-body,
.header .user-menu .menu-contents {
    background: #171d21 !important;
    color: var(--orso-text) !important;
    border-color: var(--orso-border) !important;
}

.user-menu .info,
.user-menu .user-info,
.user-menu .menu-header,
.user-menu .menu-title,
.user-menu .name,
.user-menu .role,
.user-menu .organization,
.user-menu span,
.user-menu div,
.user-menu a {
    color: var(--orso-text) !important;
}

.user-menu .role,
.user-menu .organization,
.user-menu .description {
    color: var(--orso-muted) !important;
}

.user-menu hr,
.user-menu .divider,
.user-menu .menu-separator {
    border-color: var(--orso-border) !important;
    background: var(--orso-border) !important;
}

.user-menu a,
.user-menu .menu-option,
.user-menu .menu-item {
    background: transparent !important;
}

.user-menu a:hover,
.user-menu .menu-option:hover,
.user-menu .menu-item:hover {
    background: var(--orso-accent-soft) !important;
    color: var(--orso-accent-hover) !important;
}

.user-menu .disconnect,
.user-menu .logout,
.user-menu [class*="logout"],
.user-menu [class*="disconnect"] {
    background: #442528 !important;
    color: #ffdede !important;
}

.user-menu .disconnect:hover,
.user-menu .logout:hover,
.user-menu [class*="logout"]:hover,
.user-menu [class*="disconnect"]:hover {
    background: #583034 !important;
    color: #ffffff !important;
}

/* Pages d'administration : remettre de l'air */
.settings .settings-page,
.manage .manage-page,
.settings-page,
.manage-page {
    padding: 18px 18px 26px !important;
}

.settings .section,
.manage .section,
.settings-page > .section,
.manage-page > .section,
.connection-list,
.connection-group-list {
    margin: 14px 0 !important;
    padding: 16px !important;
}

.settings .section > p:first-child,
.manage .section > p:first-child {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    line-height: 1.55 !important;
}

.settings .buttons,
.manage .buttons,
.settings .action-buttons,
.manage .action-buttons,
.settings .toolbar,
.manage .toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 14px 0 16px !important;
}

.settings .toolbar input,
.manage .toolbar input,
.settings .filter,
.manage .filter {
    min-height: 38px !important;
}

/* Arbres de groupes : retraits et espacements progressifs */
.connection-group,
.connection-group-list,
.manage .connection-group,
.settings .connection-group {
    box-sizing: border-box !important;
}

.connection-group {
    margin: 8px 0 !important;
    padding: 7px 10px !important;
}

.connection-group .connection-group,
.connection-group .connection,
.connection-group .list-item {
    margin-left: 18px !important;
    width: calc(100% - 18px) !important;
}

.connection-group .connection-group {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    background: rgba(24, 32, 36, 0.78) !important;
    border-color: rgba(79, 101, 111, 0.72) !important;
}

.connection-group .connection-group .connection-group,
.connection-group .connection-group .connection,
.connection-group .connection-group .list-item {
    margin-left: 20px !important;
    width: calc(100% - 20px) !important;
}

.connection-group .connection,
.connection-group .list-item {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 10px !important;
}

.connection-group > .name,
.connection-group .caption,
.connection-group .connection > .name,
.connection-group .list-item > .name {
    line-height: 1.35 !important;
}

/* Eviter l'effet "trois grosses bulles collées" */
.connection-group + .connection-group {
    margin-top: 10px !important;
}

.connection-group .connection-group::before {
    content: "";
    display: block;
    position: absolute;
    left: -10px;
    top: 13px;
    bottom: 13px;
    width: 1px;
    background: rgba(54, 197, 111, 0.20);
}

.connection-group .connection-group {
    position: relative !important;
}

/* Les emplacements de création restent discrets */
.connection-group .placeholder,
.connection-group .empty,
.connection-group [class*="new-connection"],
.connection-group [class*="new-group"] {
    color: #71817e !important;
    opacity: .84;
}

/* Mobile : conserver des retraits raisonnables */
@media (max-width: 640px) {
    .settings .settings-page,
    .manage .manage-page,
    .settings-page,
    .manage-page {
        padding: 12px 10px 20px !important;
    }

    .settings .section,
    .manage .section {
        padding: 12px !important;
    }

    .connection-group .connection-group,
    .connection-group .connection,
    .connection-group .list-item {
        margin-left: 10px !important;
        width: calc(100% - 10px) !important;
    }
}
/* ==========================================================
   Orso Dark Theme 1.2
   Refonte ciblée de l'arborescence des connexions :
   - suppression des cadres imbriqués sur les groupes parents ;
   - indentation par ligne verticale discrète ;
   - seule la connexion finale conserve une vraie carte.
   ========================================================== */

/* Neutraliser l'apparence "carte" héritée sur les groupes */
.connection-group,
.connection-group .connection-group,
.manage .connection-group,
.settings .connection-group {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 8px 0 !important;
    overflow: visible !important;
}

/* Ligne du groupe lui-même */
.connection-group > .name,
.connection-group > .caption,
.connection-group > .header,
.connection-group > .list-item:first-child,
.connection-group > .connection-group-header {
    background: rgba(29, 37, 42, 0.92) !important;
    border: 1px solid var(--orso-border) !important;
    border-radius: 10px !important;
    padding: 9px 12px !important;
    margin: 0 0 6px !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
}

/* Zone enfant d'un groupe : plus de cadre complet */
.connection-group > .children,
.connection-group > .contents,
.connection-group > .connection-group-contents,
.connection-group > ul,
.connection-group > div:not(.name):not(.caption):not(.header):not(.list-item):not(.connection-group-header) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Indentation claire mais légère */
.connection-group .connection-group,
.connection-group .connection,
.connection-group .list-item {
    margin-left: 28px !important;
    width: calc(100% - 28px) !important;
}

/* Axe vertical de hiérarchie */
.connection-group .connection-group,
.connection-group .connection {
    position: relative !important;
}

.connection-group .connection-group::before,
.connection-group .connection::before {
    content: "";
    position: absolute;
    left: -16px;
    top: -8px;
    bottom: -8px;
    width: 1px;
    background: rgba(54, 197, 111, 0.24);
}

.connection-group .connection-group::after,
.connection-group .connection::after {
    content: "";
    position: absolute;
    left: -16px;
    top: 19px;
    width: 11px;
    height: 1px;
    background: rgba(54, 197, 111, 0.24);
}

/* La connexion finale reste une carte, mais plus légère */
.connection-group .connection,
.connection-group .connection.list-item,
.connection-group .list-item.connection {
    background: rgba(29, 37, 42, 0.96) !important;
    border: 1px solid rgba(79, 101, 111, 0.78) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    min-height: 40px !important;
}

/* Les sous-groupes restent lisibles, sans nouveau grand cadre */
.connection-group .connection-group > .name,
.connection-group .connection-group > .caption,
.connection-group .connection-group > .header,
.connection-group .connection-group > .list-item:first-child,
.connection-group .connection-group > .connection-group-header {
    background: rgba(24, 31, 35, 0.88) !important;
    border: 1px solid rgba(79, 101, 111, 0.62) !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

/* Éviter les cadres hérités autour des niveaux racines */
.connection-list > .connection-group,
.connection-group-list > .connection-group,
.home-page .connection-group,
.manage .connection-group {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Un peu d'espace entre les racines Camille / Julien */
.connection-list > .connection-group + .connection-group,
.connection-group-list > .connection-group + .connection-group {
    margin-top: 14px !important;
}

/* Mobile */
@media (max-width: 640px) {
    .connection-group .connection-group,
    .connection-group .connection,
    .connection-group .list-item {
        margin-left: 18px !important;
        width: calc(100% - 18px) !important;
    }

    .connection-group .connection-group::before,
    .connection-group .connection::before {
        left: -10px;
    }

    .connection-group .connection-group::after,
    .connection-group .connection::after {
        left: -10px;
        width: 7px;
    }
}
/* ==========================================================
   Orso Dark Theme 1.3
   Logo Orso intégré à la page de connexion.
   ========================================================== */

.orso-logo-placeholder {
    display: none !important;
}

.orso-logo-wrap {
    width: 132px;
    height: 132px;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 48%, rgba(54, 197, 111, 0.12), transparent 66%);
}

.orso-logo {
    display: block;
    width: 124px;
    height: 124px;
    object-fit: contain;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.42));
}

@media (max-width: 640px) {
    .orso-logo-wrap {
        width: 112px;
        height: 112px;
        margin-bottom: 14px;
    }

    .orso-logo {
        width: 106px;
        height: 106px;
    }
}
/* ==========================================================
   Orso Dark Theme 1.4
   Arborescence des connexions entièrement aplatie.
   ========================================================== */

/* Conteneur global de l'arbre */
.connection-list,
.connection-group-list,
.home-page .connection-list,
.home-page .connection-group-list {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 8px 12px 18px !important;
}

/* Tous les groupes deviennent structurels, sans carte */
.connection-group,
.connection-group .connection-group,
.connection-group-list .connection-group,
.connection-list .connection-group,
.home-page .connection-group {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Ligne de titre d'un groupe : plate et compacte */
.connection-group > .name,
.connection-group > .caption,
.connection-group > .header,
.connection-group > .connection-group-header,
.connection-group > .list-item:first-child:not(.connection) {
    display: flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 7px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(79, 101, 111, 0.34) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--orso-text) !important;
}

/* Groupes racine : un peu plus visibles */
.connection-list > .connection-group > .name,
.connection-group-list > .connection-group > .name,
.home-page .connection-group-list > .connection-group > .name {
    min-height: 46px !important;
    padding: 10px 12px !important;
    margin-top: 6px !important;
    background: rgba(24, 31, 35, 0.72) !important;
    border: 1px solid rgba(79, 101, 111, 0.48) !important;
    border-radius: 10px !important;
}

/* Sous-groupes : simples lignes, sans bulle */
.connection-group .connection-group > .name,
.connection-group .connection-group > .caption,
.connection-group .connection-group > .header,
.connection-group .connection-group > .connection-group-header,
.connection-group .connection-group > .list-item:first-child:not(.connection) {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(79, 101, 111, 0.28) !important;
    border-radius: 0 !important;
    padding: 7px 8px !important;
    min-height: 36px !important;
}

/* Retrait progressif */
.connection-group .connection-group,
.connection-group .connection,
.connection-group .list-item {
    margin-left: 24px !important;
    width: calc(100% - 24px) !important;
}

.connection-group .connection-group .connection-group,
.connection-group .connection-group .connection,
.connection-group .connection-group .list-item {
    margin-left: 22px !important;
    width: calc(100% - 22px) !important;
}

/* Ligne verticale de hiérarchie */
.connection-group .connection-group,
.connection-group .connection {
    position: relative !important;
}

.connection-group .connection-group::before,
.connection-group .connection::before {
    content: "";
    position: absolute;
    left: -13px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(54, 197, 111, 0.22);
}

.connection-group .connection-group::after,
.connection-group .connection::after {
    content: "";
    position: absolute;
    left: -13px;
    top: 19px;
    width: 9px;
    height: 1px;
    background: rgba(54, 197, 111, 0.22);
}

/* Connexion finale : seule vraie carte */
.connection-group .connection,
.connection-group .connection.list-item,
.connection-group .list-item.connection {
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    margin-top: 7px !important;
    margin-bottom: 7px !important;
    padding: 8px 12px !important;
    background: rgba(29, 37, 42, 0.92) !important;
    border: 1px solid rgba(79, 101, 111, 0.62) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

.connection-group .connection:hover,
.connection-group .connection.list-item:hover,
.connection-group .list-item.connection:hover {
    background: rgba(38, 49, 56, 0.96) !important;
    border-color: rgba(54, 197, 111, 0.52) !important;
}

/* Supprimer les fonds/bordures des enveloppes internes */
.connection-group > div:not(.name):not(.caption):not(.header):not(.connection):not(.list-item):not(.connection-group-header),
.connection-group > ul,
.connection-group > .children,
.connection-group > .contents,
.connection-group > .connection-group-contents {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Eviter l'énorme cadre de fond autour d'un groupe développé */
.connection-group[aria-expanded="true"],
.connection-group.expanded,
.connection-group.open {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Mobile */
@media (max-width: 640px) {
    .connection-list,
    .connection-group-list {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .connection-group .connection-group,
    .connection-group .connection,
    .connection-group .list-item {
        margin-left: 16px !important;
        width: calc(100% - 16px) !important;
    }

    .connection-group .connection-group::before,
    .connection-group .connection::before,
    .connection-group .connection-group::after,
    .connection-group .connection::after {
        left: -9px;
    }
}