/*
 Name:           Monney Studio Signature
 Theme URI:      https://monney.studio
 Description:    Monney Studio – Votre agence freelance de communication
 Author:         Anael Monney
 Author URI:     https://monney.studio
 Template:       Divi
 Version:        2.0.1
*/
 
.monney-signature {
    --ms-signature-height: 46px;
    --ms-signature-collapsed-width: 46px;
    --ms-signature-expanded-width: 220px;
    --ms-signature-offset: 18px;
    --ms-signature-radius: 999px;

    opacity: 0;
        visibility: hidden;
        transform: translateY(14px);
        pointer-events: none;

        transition:
            opacity 300ms ease,
            transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
            visibility 0s linear 350ms;
    
    position: fixed;
    bottom: max(
        var(--ms-signature-offset),
        env(safe-area-inset-bottom)
    );
    z-index: 9998;

    display: block;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    font-size: 12px;
    line-height: 1;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.monney-signature.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;

    transition:
        opacity 300ms ease,
        transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 0s;
}

.monney-signature--bottom-right {
    right: max(
        var(--ms-signature-offset),
        env(safe-area-inset-right)
    );
}

.monney-signature--bottom-left {
    left: max(
        var(--ms-signature-offset),
        env(safe-area-inset-left)
    );
}

.monney-signature--dark {
    --ms-signature-background: rgba(17, 17, 17, 0.94);
    --ms-signature-background-hover: rgba(17, 17, 17, 0.99);
    --ms-signature-text: #ffffff;

    --ms-signature-border: rgba(255, 255, 255, 0.16);

    --ms-signature-shadow:
        0 8px 28px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.1);
}

.monney-signature--light {
    --ms-signature-background: rgba(255, 255, 255, 0.94);
    --ms-signature-background-hover: rgba(255, 255, 255, 0.99);
    --ms-signature-text: #161616;

    --ms-signature-border: rgba(20, 20, 20, 0.12);

    --ms-signature-shadow:
        0 8px 28px rgba(0, 0, 0, 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
}

.monney-signature__link {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    touch-action: manipulation;
    
    width: var(--ms-signature-collapsed-width);
    height: var(--ms-signature-height);

    overflow: hidden;

    color: var(--ms-signature-text);
    text-decoration: none;
    white-space: nowrap;

    background: var(--ms-signature-background);
    border: 1px solid var(--ms-signature-border);
    border-radius: var(--ms-signature-radius);

    box-shadow: var(--ms-signature-shadow);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    box-sizing: border-box;

    transition:
        width 320ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

.monney-signature__link:hover,
.monney-signature__link:focus-visible,
.monney-signature.is-open .monney-signature__link {
    width: var(--ms-signature-expanded-width);

    color: var(--ms-signature-text);
    text-decoration: none;

    background: var(--ms-signature-background-hover);

    transform: translateY(-2px);

    box-shadow:
        0 13px 36px rgba(0, 0, 0, 0.18),
        0 3px 10px rgba(0, 0, 0, 0.08);
}

.monney-signature__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.monney-signature__icon {
    display: grid;
    flex: 0 0 var(--ms-signature-height);
    width: var(--ms-signature-height);
    height: var(--ms-signature-height);
    place-items: center;
}

.monney-signature__logo-circle {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
}

.monney-signature__logo {
    display: block;
    width: 30px;
    height: 30px;
    max-width: none;
    flex: none;
    object-fit: contain;
    image-rendering: auto;
    transform: none;
    pointer-events: none;
}

.monney-signature__label {
    display: block;
    flex: 0 0 auto;

    padding-right: 20px;

    overflow: visible;

    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.01em;

    opacity: 0;
    transform: translateX(-6px);

    transition:
        opacity 180ms ease 50ms,
        transform 240ms ease 50ms;
}

.monney-signature__link:hover .monney-signature__label,
.monney-signature__link:focus-visible .monney-signature__label,
.monney-signature.is-open .monney-signature__label {
    opacity: 1;
    transform: translateX(0);
}

.monney-signature--bottom-left .monney-signature__link {
    flex-direction: row-reverse;
}

.monney-signature--bottom-left .monney-signature__label {
    padding-right: 0;
    padding-left: 20px;

    transform: translateX(6px);
}

.monney-signature--bottom-left
    .monney-signature__link:hover
    .monney-signature__label,
.monney-signature--bottom-left
    .monney-signature__link:focus-visible
    .monney-signature__label,
.monney-signature--bottom-left.is-open
    .monney-signature__label {
    transform: translateX(0);
}

@media (max-width: 767px) {
    .monney-signature {
        --ms-signature-height: 42px;
        --ms-signature-collapsed-width: 42px;
        --ms-signature-expanded-width: 210px;
        --ms-signature-offset: 12px;
    }

    .monney-signature__logo-circle {
        width: 32px;
        height: 32px;
    }

    .monney-signature__logo {
        width: 22px;
        height: 22px;
    }

    .monney-signature__link:hover {
        width: var(--ms-signature-collapsed-width);
        transform: none;
    }

    .monney-signature.is-open .monney-signature__link,
    .monney-signature__link:focus-visible {
        width: var(--ms-signature-expanded-width);
    }
}

@media (prefers-reduced-motion: reduce) {
    .monney-signature__link,
    .monney-signature__label {
        transition: none;
    }
}