/* Bureau des exemples StillDeep, a la Windows 11 : fond, icones, fenetres, barre des taches, menu Demarrer, avis.
   Theme du systeme du visiteur ; accent de la marque StillDeep (docs/brand). Aucun style en ligne : position et taille
   des fenetres viennent de desktop.js par le CSSOM. */

.sdd,
.sdd-boot,
.sdd-reconnect {
    --sdd-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Noto Sans", Ubuntu, Cantarell, sans-serif;
    --sdd-accent: #2563EB;
    --sdd-accent-2: #4F46E5;
    --sdd-on-accent: #FFFFFF;
    --sdd-text: #1B1B1B;
    --sdd-text-muted: #5D5D5D;
    --sdd-hover: rgb(0 0 0 / .05);
    --sdd-hover-strong: rgb(0 0 0 / .07);
    --sdd-taskbar: rgb(238 240 245 / .84);
    --sdd-line: rgb(0 0 0 / .08);
    --sdd-flyout: rgb(244 245 248 / .9);
    --sdd-flyout-solid: #F7F8FA;
    --sdd-flyout-line: rgb(0 0 0 / .1);
    --sdd-field: rgb(255 255 255 / .75);
    --sdd-tile-hover: rgb(255 255 255 / .6);
    --sdd-frame: #F3F4F7;
    --sdd-frame-line: rgb(0 0 0 / .16);
    --sdd-dialog: #FFFFFF;
    --sdd-dialog-footer: #F3F4F7;
    --sdd-button: #FDFDFD;
    --sdd-button-line: rgb(0 0 0 / .14);
    --sdd-zone: rgb(0 0 0 / .06);
    --sdd-close: #C42B1C;
    --sdd-shadow: 0 0 0 1px rgb(0 0 0 / .04), 0 4px 14px rgb(0 0 0 / .14);
    --sdd-shadow-active: 0 0 0 1px rgb(0 0 0 / .06), 0 14px 42px rgb(0 0 0 / .26), 0 2px 8px rgb(0 0 0 / .1);
    --sdd-wallpaper: url(wallpaper-light.svg);
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    .sdd,
    .sdd-boot,
    .sdd-reconnect {
        --sdd-accent: #7FA6FF;
        --sdd-accent-2: #8B7CF6;
        --sdd-on-accent: #0D0F12;
        --sdd-text: #F3F3F3;
        --sdd-text-muted: #C2C5CC;
        --sdd-hover: rgb(255 255 255 / .06);
        --sdd-hover-strong: rgb(255 255 255 / .09);
        --sdd-taskbar: rgb(26 28 33 / .84);
        --sdd-line: rgb(255 255 255 / .08);
        --sdd-flyout: rgb(36 38 44 / .9);
        --sdd-flyout-solid: #24262C;
        --sdd-flyout-line: rgb(255 255 255 / .1);
        --sdd-field: rgb(255 255 255 / .06);
        --sdd-tile-hover: rgb(255 255 255 / .07);
        --sdd-frame: #202226;
        --sdd-frame-line: rgb(255 255 255 / .12);
        --sdd-dialog: #2B2D33;
        --sdd-dialog-footer: #202226;
        --sdd-button: #373A41;
        --sdd-button-line: rgb(255 255 255 / .1);
        --sdd-zone: rgb(255 255 255 / .08);
        --sdd-shadow: 0 0 0 1px rgb(0 0 0 / .3), 0 4px 14px rgb(0 0 0 / .4);
        --sdd-shadow-active: 0 0 0 1px rgb(0 0 0 / .4), 0 14px 42px rgb(0 0 0 / .55), 0 2px 8px rgb(0 0 0 / .3);
        --sdd-wallpaper: url(wallpaper-dark.svg);
        color-scheme: dark;
    }
}

.sdd {
    position: fixed;
    inset: 0;
    /* clip et non hidden : un champ qui prend le focus hors de l'ecran ne fait pas defiler le bureau. */
    overflow: clip;
    color: var(--sdd-text);
    font: 13px/1.4 var(--sdd-font);
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.sdd.is-moving,
.sdd.is-moving * {
    cursor: default;
}

.sdd.is-moving .sdd-window__body {
    pointer-events: none;
}

.sdd button,
.sdd input {
    font: inherit;
}

.sdd svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sdd-wallpaper {
    position: absolute;
    inset: 0;
    background: #9DB6EE var(--sdd-wallpaper) center / cover no-repeat;
}

/* Icones du bureau, en colonnes depuis le coin haut gauche. */
.sdd-icons {
    position: absolute;
    inset: 6px auto 54px 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-flow: column wrap;
    align-content: flex-start;
    gap: 2px;
}

.sdd-icon {
    width: 78px;
    padding: 6px 2px 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: none;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 0 2px rgb(0 0 0 / .9), 0 1px 3px rgb(0 0 0 / .8), 0 0 8px rgb(0 0 0 / .4);
    cursor: default;
}

.sdd-icon:hover {
    background: rgb(255 255 255 / .14);
    border-color: rgb(255 255 255 / .18);
}

.sdd-icon.is-selected {
    background: rgb(255 255 255 / .24);
    border-color: rgb(255 255 255 / .34);
}

.sdd-icon__image {
    width: 48px;
    height: 48px;
    filter: drop-shadow(0 2px 3px rgb(0 0 0 / .3));
}

.sdd-icon__glyph {
    width: 44px;
    height: 44px;
    margin: 2px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: linear-gradient(135deg, #3B82F6, #4F46E5);
    box-shadow: 0 2px 6px rgb(0 0 0 / .3);
}

.sdd-icon__glyph .sdd-glyph {
    width: 26px;
    height: 26px;
}

.sdd-icon__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* Icones du site, traits noirs : blancs sur la pastille d'accent. */
.sdd-glyph {
    filter: invert(1);
}

/* Fenetres : la zone couvre l'ecran sauf la barre des taches ; seules les fenetres recoivent le pointeur. */
.sdd-area {
    position: absolute;
    inset: 0 0 48px;
    overflow: clip;
    pointer-events: none;
}

.sdd-window {
    position: absolute;
    top: 40px;
    left: 40px;
    width: 800px;
    height: 600px;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: clip;
    pointer-events: auto;
    /* Chaque fenetre empile son contenu chez elle : rien d'une fenetre du fond ne passe devant une autre. */
    isolation: isolate;
    border-radius: 8px;
    outline: 1px solid var(--sdd-frame-line);
    background: var(--sdd-frame);
    color: var(--sdd-text);
    box-shadow: var(--sdd-shadow);
    transition: transform .2s cubic-bezier(.1, .9, .2, 1), opacity .2s ease;
    animation: sdd-open .18s cubic-bezier(.1, .9, .2, 1);
}

.sdd-window.is-active {
    box-shadow: var(--sdd-shadow-active);
}

.sdd-window.is-auto {
    height: auto;
}

.sdd-window--maximized,
.sdd-window--left,
.sdd-window--right,
.sdd-window--top-left,
.sdd-window--top-right,
.sdd-window--bottom-left,
.sdd-window--bottom-right {
    height: auto !important;
    max-height: none;
    border-radius: 0;
}

.sdd-window--maximized {
    inset: 0 !important;
    width: auto !important;
    outline: none;
}

.sdd-window--left,
.sdd-window--right {
    top: 0 !important;
    bottom: 0 !important;
    width: 50% !important;
}

.sdd-window--left,
.sdd-window--top-left,
.sdd-window--bottom-left {
    left: 0 !important;
}

.sdd-window--right,
.sdd-window--top-right,
.sdd-window--bottom-right {
    left: 50% !important;
}

.sdd-window--top-left,
.sdd-window--top-right,
.sdd-window--bottom-left,
.sdd-window--bottom-right {
    width: 50% !important;
}

.sdd-window--top-left,
.sdd-window--top-right {
    top: 0 !important;
    bottom: 50% !important;
}

.sdd-window--bottom-left,
.sdd-window--bottom-right {
    top: 50% !important;
    bottom: 0 !important;
}

.sdd-window.is-minimized {
    visibility: hidden;
    opacity: 0;
    transform: translateY(40%) scale(.55);
    pointer-events: none;
    transition: transform .2s ease-in, opacity .2s ease-in, visibility 0s .2s;
}

.sdd-window.is-closing {
    pointer-events: none;
    animation: sdd-close .16s ease-in forwards;
}

.sdd-window.is-flashing .sdd-titlebar {
    animation: sdd-flash .1s steps(1) 6 alternate;
}

@keyframes sdd-open {
    from {
        opacity: 0;
        transform: scale(.94);
    }
}

@keyframes sdd-close {
    to {
        opacity: 0;
        transform: scale(.94);
    }
}

@keyframes sdd-flash {
    to {
        background: var(--sdd-hover-strong);
        color: var(--sdd-text-muted);
    }
}

.sdd-titlebar {
    flex: none;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 12px;
    font-size: 12px;
    cursor: default;
}

.sdd-window:not(.is-active) .sdd-titlebar {
    color: var(--sdd-text-muted);
}

.sdd-titlebar__icon {
    flex: none;
    width: 16px;
    height: 16px;
}

.sdd-titlebar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sdd-caption {
    display: flex;
    align-self: stretch;
}

.sdd-caption__button {
    width: 46px;
    height: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: default;
}

.sdd-caption__button:hover {
    background: var(--sdd-hover-strong);
}

.sdd-caption__button--close:hover {
    background: var(--sdd-close);
    color: #FFFFFF;
}

.sdd-caption__button svg {
    width: 10px;
    height: 10px;
    stroke-width: 1;
}

/* Dispositions d'ancrage : au survol prolonge du bouton Agrandir. */
.sdd-caption__max {
    position: relative;
}

.sdd-snap {
    position: absolute;
    top: 34px;
    right: -46px;
    z-index: 20;
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--sdd-flyout-line);
    border-radius: 8px;
    background: var(--sdd-flyout-solid);
    box-shadow: 0 8px 24px rgb(0 0 0 / .22);
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s, visibility 0s .12s;
}

.sdd-caption__max:hover .sdd-snap {
    opacity: 1;
    visibility: visible;
    transition: opacity .12s .5s, visibility 0s .5s;
}

.sdd-snap__layout {
    width: 96px;
    height: 60px;
    display: grid;
    gap: 3px;
}

.sdd-snap__layout--halves {
    grid-template-columns: 1fr 1fr;
}

.sdd-snap__layout--quarters {
    grid-template: 1fr 1fr / 1fr 1fr;
}

.sdd-snap__zone {
    padding: 0;
    border: 1px solid var(--sdd-button-line);
    border-radius: 4px;
    background: var(--sdd-zone);
    cursor: default;
}

.sdd-snap__zone:hover {
    border-color: var(--sdd-accent);
    background: var(--sdd-accent);
}

.sdd-window__body {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    -webkit-user-select: text;
    user-select: text;
}

.sdd-window.is-auto .sdd-window__body {
    flex: none;
    max-height: calc(100vh - 96px);
}

.sdd-modal-cover {
    position: absolute;
    inset: 0;
    z-index: 30;
}

.sdd-resize {
    position: absolute;
    z-index: 25;
}

.sdd-resize--n,
.sdd-resize--s {
    left: 8px;
    right: 8px;
    height: 5px;
    cursor: ns-resize;
}

.sdd-resize--n {
    top: 0;
}

.sdd-resize--s {
    bottom: 0;
}

.sdd-resize--e,
.sdd-resize--w {
    top: 8px;
    bottom: 8px;
    width: 5px;
    cursor: ew-resize;
}

.sdd-resize--e {
    right: 0;
}

.sdd-resize--w {
    left: 0;
}

.sdd-resize--ne,
.sdd-resize--nw,
.sdd-resize--se,
.sdd-resize--sw {
    width: 10px;
    height: 10px;
}

.sdd-resize--ne {
    top: 0;
    right: 0;
    cursor: nesw-resize;
}

.sdd-resize--sw {
    bottom: 0;
    left: 0;
    cursor: nesw-resize;
}

.sdd-resize--nw {
    top: 0;
    left: 0;
    cursor: nwse-resize;
}

.sdd-resize--se {
    right: 0;
    bottom: 0;
    cursor: nwse-resize;
}

.sdd-snap-preview {
    position: absolute;
    inset: 8px;
    border: 1px solid rgb(255 255 255 / .55);
    border-radius: 8px;
    background: rgb(255 255 255 / .22);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    transition: opacity .12s, inset .14s ease;
}

.sdd-snap-preview.is-visible {
    opacity: 1;
}

.sdd-snap-preview[data-zone="Left"] {
    inset: 8px 50% 8px 8px;
}

.sdd-snap-preview[data-zone="Right"] {
    inset: 8px 8px 8px 50%;
}

.sdd-snap-preview[data-zone="TopLeft"] {
    inset: 8px 50% 50% 8px;
}

.sdd-snap-preview[data-zone="TopRight"] {
    inset: 8px 8px 50% 50%;
}

.sdd-snap-preview[data-zone="BottomLeft"] {
    inset: 50% 50% 8px 8px;
}

.sdd-snap-preview[data-zone="BottomRight"] {
    inset: 50% 8px 8px 50%;
}

.sdd-crash {
    max-width: 520px;
    margin: 48px auto;
    padding: 24px;
    font-family: var(--sdd-font);
}

.sdd-crash__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
}

.sdd-crash__detail {
    margin: 0 0 16px;
    color: var(--sdd-text-muted);
}

/* Boutons et boites du systeme. */
.sdd-button {
    min-width: 120px;
    height: 32px;
    padding: 0 16px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--sdd-button-line);
    border-radius: 4px;
    background: var(--sdd-button);
    color: var(--sdd-text);
    font: 14px var(--sdd-font);
    text-decoration: none;
    cursor: default;
}

.sdd-button:hover {
    filter: brightness(.97);
}

.sdd-button--accent {
    border-color: var(--sdd-accent);
    background: var(--sdd-accent);
    color: var(--sdd-on-accent);
}

.sdd-message {
    background: var(--sdd-dialog);
    color: var(--sdd-text);
    font: 14px/1.45 var(--sdd-font);
}

.sdd-message__body {
    display: flex;
    gap: 16px;
    padding: 20px 24px 28px;
}

.sdd-message__icon {
    flex: none;
    width: 32px;
    height: 32px;
}

.sdd-message__icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2;
}

.sdd-message__icon--info,
.sdd-message__icon--question {
    color: var(--sdd-accent);
}

.sdd-message__icon--warning {
    color: #C78A00;
}

.sdd-message__icon--error {
    color: var(--sdd-close);
}

.sdd-message__text {
    margin: 4px 0 0;
    white-space: pre-line;
}

.sdd-message__buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 20px 24px;
    border-top: 1px solid var(--sdd-flyout-line);
    background: var(--sdd-dialog-footer);
}

/* Avis en bas a droite. */
.sdd-toasts {
    position: absolute;
    right: 12px;
    bottom: 60px;
    z-index: 800;
    width: 364px;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

.sdd-toast {
    display: grid;
    grid-template-columns: 20px 1fr auto;
    gap: 6px 12px;
    align-items: center;
    padding: 14px 12px 16px 16px;
    border: 1px solid var(--sdd-flyout-line);
    border-radius: 8px;
    background: var(--sdd-flyout);
    -webkit-backdrop-filter: blur(30px) saturate(1.6);
    backdrop-filter: blur(30px) saturate(1.6);
    box-shadow: 0 8px 32px rgb(0 0 0 / .26);
    animation: sdd-toast-in .32s cubic-bezier(.1, .9, .2, 1);
}

@keyframes sdd-toast-in {
    from {
        opacity: 0;
        transform: translateX(110%);
    }
}

.sdd-toast__icon {
    width: 20px;
    height: 20px;
}

.sdd-toast__title {
    font-weight: 600;
}

.sdd-toast__close {
    width: 28px;
    height: 28px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
}

.sdd-toast__close:hover {
    background: var(--sdd-hover-strong);
}

.sdd-toast__close svg {
    width: 10px;
    height: 10px;
}

.sdd-toast__text {
    grid-column: 2 / 4;
    margin: 0;
    color: var(--sdd-text-muted);
    white-space: pre-line;
}

/* Barre des taches. */
.sdd-taskbar {
    position: absolute;
    inset: auto 0 0;
    z-index: 1000;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--sdd-line);
    background: var(--sdd-taskbar);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    backdrop-filter: blur(40px) saturate(1.6);
}

.sdd-taskbar__apps {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sdd-taskbutton {
    position: relative;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    cursor: default;
}

.sdd-taskbutton:hover,
.sdd-taskbutton.is-open,
.sdd-taskbutton.is-active {
    border-color: var(--sdd-line);
    background: var(--sdd-tile-hover);
}

.sdd-taskbutton__logo,
.sdd-taskbutton__icon {
    width: 24px;
    height: 24px;
    transition: transform .12s;
}

.sdd-taskbutton:active .sdd-taskbutton__logo,
.sdd-taskbutton:active .sdd-taskbutton__icon {
    transform: scale(.86);
}

.sdd-taskbutton__pill {
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 6px;
    height: 3px;
    border-radius: 2px;
    background: var(--sdd-text-muted);
    opacity: 0;
    transform: translateX(-50%);
    transition: width .22s cubic-bezier(.1, .9, .2, 1), background .22s;
}

.sdd-taskbutton.is-running .sdd-taskbutton__pill {
    opacity: 1;
}

.sdd-taskbutton.is-active .sdd-taskbutton__pill {
    width: 16px;
    background: var(--sdd-accent);
}

.sdd-tray {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
}

.sdd-tray__icons {
    height: 40px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
}

.sdd-tray__icons svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.3;
}

.sdd-tray__icons:hover,
.sdd-clock:hover {
    background: var(--sdd-hover);
}

.sdd-clock {
    height: 40px;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    border-radius: 4px;
    line-height: 1.35;
}

.sdd-show-desktop {
    align-self: stretch;
    width: 12px;
    margin-left: 4px;
    padding: 0;
    border: 0;
    border-left: 1px solid var(--sdd-line);
    background: transparent;
    cursor: default;
}

.sdd-show-desktop:hover {
    background: var(--sdd-hover-strong);
}

/* Menu Demarrer. */
.sdd-scrim {
    position: absolute;
    inset: 0;
    z-index: 900;
}

.sdd-start {
    position: absolute;
    bottom: 60px;
    left: 50%;
    z-index: 950;
    width: min(642px, calc(100% - 24px));
    height: min(726px, calc(100% - 72px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--sdd-flyout-line);
    border-radius: 8px;
    background: var(--sdd-flyout);
    -webkit-backdrop-filter: blur(60px) saturate(1.8);
    backdrop-filter: blur(60px) saturate(1.8);
    box-shadow: 0 32px 64px rgb(0 0 0 / .28), 0 2px 21px rgb(0 0 0 / .2);
    transform: translateX(-50%);
    animation: sdd-start-in .24s cubic-bezier(.1, .9, .2, 1);
}

@keyframes sdd-start-in {
    from {
        opacity: 0;
        transform: translate(-50%, 48px);
    }
}

.sdd-start__search {
    height: 36px;
    margin: 28px 32px 6px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--sdd-flyout-line);
    border-bottom: 2px solid var(--sdd-accent);
    border-radius: 18px;
    background: var(--sdd-field);
}

.sdd-start__search svg {
    flex: none;
    width: 15px;
    height: 15px;
    stroke-width: 1.5;
    color: var(--sdd-text-muted);
}

.sdd-start__query {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
}

.sdd-start__query::placeholder {
    color: var(--sdd-text-muted);
}

.sdd-start__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 4px 32px 20px;
}

.sdd-start__heading {
    margin: 18px 4px 8px;
    font-size: 14px;
    font-weight: 600;
}

.sdd-start__grid {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 4px;
    list-style: none;
}

.sdd-tile {
    width: 100%;
    height: 92px;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 12px;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: default;
}

.sdd-tile:hover,
.sdd-result:hover {
    border-color: var(--sdd-line);
    background: var(--sdd-tile-hover);
}

.sdd-tile__icon {
    width: 32px;
    height: 32px;
}

.sdd-tile__glyph {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--sdd-accent), var(--sdd-accent-2));
}

.sdd-tile__glyph .sdd-glyph {
    width: 20px;
    height: 20px;
}

.sdd-tile__label {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.sdd-start__results {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sdd-result {
    width: 100%;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    text-align: left;
    text-decoration: none;
    cursor: default;
}

.sdd-result__icon {
    width: 32px;
    height: 32px;
}

.sdd-result__text {
    display: flex;
    flex-direction: column;
}

.sdd-result__hint,
.sdd-power__hint {
    color: var(--sdd-text-muted);
    font-size: 12px;
}

.sdd-start__empty {
    margin: 8px 4px;
    color: var(--sdd-text-muted);
}

.sdd-start__footer {
    flex: none;
    height: 64px;
    padding: 0 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--sdd-flyout-line);
    background: var(--sdd-hover);
}

.sdd-start__user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sdd-avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sdd-accent);
    color: var(--sdd-on-accent);
    font-weight: 600;
}

.sdd-power {
    position: relative;
}

.sdd-power__button {
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: inherit;
}

.sdd-power__button:hover {
    border-color: var(--sdd-line);
    background: var(--sdd-tile-hover);
}

.sdd-power__button svg,
.sdd-power__item svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.4;
}

.sdd-power__menu {
    position: absolute;
    right: 0;
    bottom: 46px;
    min-width: 260px;
    padding: 4px;
    border: 1px solid var(--sdd-flyout-line);
    border-radius: 8px;
    background: var(--sdd-flyout-solid);
    box-shadow: 0 8px 24px rgb(0 0 0 / .24);
}

.sdd-power__item {
    width: 100%;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    text-align: left;
}

.sdd-power__item:hover {
    background: var(--sdd-hover-strong);
}

.sdd-power__text {
    display: flex;
    flex-direction: column;
}

/* Demarrage et reconnexion, rendus hors du circuit. */
.sdd-boot {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    background: #000000;
}

body:has(.sdd) .sdd-boot {
    display: none;
}

.sdd-boot__logo {
    width: 112px;
    height: 112px;
}

.sdd-boot__dots {
    position: relative;
    width: 40px;
    height: 40px;
}

.sdd-boot__dots i {
    position: absolute;
    inset: 0;
    animation: sdd-orbit 2.2s cubic-bezier(.5, .15, .5, .85) infinite;
}

.sdd-boot__dots i::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #FFFFFF;
}

.sdd-boot__dots i:nth-child(2) {
    animation-delay: .12s;
}

.sdd-boot__dots i:nth-child(3) {
    animation-delay: .24s;
}

.sdd-boot__dots i:nth-child(4) {
    animation-delay: .36s;
}

.sdd-boot__dots i:nth-child(5) {
    animation-delay: .48s;
}

@keyframes sdd-orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(720deg);
    }
}

.sdd-reconnect {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    place-items: center;
    background: rgb(0 0 0 / .55);
    font: 14px/1.4 var(--sdd-font);
}

.sdd-reconnect.components-reconnect-show,
.sdd-reconnect.components-reconnect-retrying,
.sdd-reconnect.components-reconnect-paused,
.sdd-reconnect.components-reconnect-failed,
.sdd-reconnect.components-reconnect-rejected,
.sdd-reconnect.components-reconnect-resume-failed {
    display: grid;
}

.sdd-reconnect__box {
    min-width: 300px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    border-radius: 8px;
    background: var(--sdd-dialog);
    color: var(--sdd-text);
    box-shadow: 0 24px 64px rgb(0 0 0 / .4);
}

.sdd-reconnect__dots i::before {
    background: var(--sdd-accent);
}

.sdd-reconnect__wait,
.sdd-reconnect__lost {
    margin: 0;
}

.sdd-reconnect__lost,
.sdd-reconnect__restart,
.sdd-reconnect.components-reconnect-failed .sdd-reconnect__wait,
.sdd-reconnect.components-reconnect-rejected .sdd-reconnect__wait,
.sdd-reconnect.components-reconnect-resume-failed .sdd-reconnect__wait,
.sdd-reconnect.components-reconnect-failed .sdd-reconnect__dots,
.sdd-reconnect.components-reconnect-rejected .sdd-reconnect__dots,
.sdd-reconnect.components-reconnect-resume-failed .sdd-reconnect__dots {
    display: none;
}

.sdd-reconnect.components-reconnect-failed .sdd-reconnect__lost,
.sdd-reconnect.components-reconnect-rejected .sdd-reconnect__lost,
.sdd-reconnect.components-reconnect-resume-failed .sdd-reconnect__lost,
.sdd-reconnect.components-reconnect-failed .sdd-reconnect__restart,
.sdd-reconnect.components-reconnect-rejected .sdd-reconnect__restart,
.sdd-reconnect.components-reconnect-resume-failed .sdd-reconnect__restart {
    display: inline-grid;
}

/* Telephone et petite tablette : chaque fenetre prend l'ecran, la barre des taches garde l'essentiel. */
@media (max-width: 760px) {
    .sdd-window {
        inset: 0 !important;
        width: auto !important;
        height: auto !important;
        max-height: none;
        border-radius: 0;
    }

    .sdd-window.is-dialog {
        inset: auto 8px 8px !important;
        max-height: calc(100% - 16px);
        border-radius: 8px;
    }

    .sdd-resize,
    .sdd-caption__max {
        display: none;
    }

    .sdd-tray__icons,
    .sdd-clock__date {
        display: none;
    }

    .sdd-start__grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .sdd-start__body,
    .sdd-start__footer {
        padding-inline: 16px;
    }

    .sdd-start__search {
        margin-inline: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sdd-window,
    .sdd-start,
    .sdd-toast,
    .sdd-snap-preview,
    .sdd-taskbutton__pill {
        transition: none;
        animation: none;
    }
}