/* ============================================================
   CMS PUBLIC - ACTIONS FIXES - CSS TECHNIQUE
   ============================================================

   Structure, positionnement et comportement des actions
   fixes liées à l'écran.

   L'habillage visuel est géré par la CharteGraph.
   ============================================================ */

/* ============================================================
   ACTIONS FIXES - DEVIS / CONTACT - STRUCTURE
   ============================================================ */

.site-fixed-quote,
.site-fixed-contact {
    position: fixed;
    z-index: 13000;

    transform: translateX(0);
    opacity: 1;
}

.site-fixed-quote.is-hidden,
.site-fixed-contact.is-hidden {
    opacity: 0;
    pointer-events: none;
}

.site-fixed-quote {
    top: 10px;
    right: 0;

    display: flex;
    align-items: flex-end;

    transition:
        transform 1300ms ease,
        opacity 1300ms ease;
}

.site-fixed-quote.is-hidden {
    transform: translateX(110%);
}

.site-fixed-contact {
    left: 0;
    bottom: 0;

    transition:
        transform 700ms ease,
        opacity 700ms ease;
}

.site-fixed-contact.is-hidden {
    transform: translateX(-110%);
}

.site-fixed-quote__link {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-decoration: none;
}

.site-fixed-contact__link {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-fixed-quote__portrait {
    display: block;
    width: auto;
    height: auto;
    max-width: 170px;
    object-fit: contain;
}

.site-fixed-quote__icon,
.site-fixed-contact__icon {
    display: block;
    object-fit: contain;
}

.site-fixed-quote__icon {
    width: 24px;
    height: 24px;
}

.site-fixed-contact__icon {
    width: 28px;
    height: 28px;
}

.site-fixed-quote__close,
.site-fixed-contact__close {
    position: absolute;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;

    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.site-fixed-quote__close {
    top: calc(100% - 31px);
    right: 5px;
}

.site-fixed-contact__close {
    top: 50%;
    left: 7px;
    transform: translateY(-50%);
}

@media (max-width: 600px) {
    .site-fixed-quote {
        top: 95px;
    }

    .site-fixed-contact {
        bottom: 12px;
    }
}

/* ============================================================
   ACTIONS FIXES - RÉSEAUX SOCIAUX - STRUCTURE
   ============================================================ */

.site-fixed-socials {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 13000;

    display: flex;
    flex-direction: column;
    align-items: stretch;

    overflow: hidden;
}

.site-fixed-socials__toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    border: 0;
    cursor: pointer;
}

.site-fixed-socials__arrow {
    display: block;

    transform: rotate(45deg);
    transition: transform 350ms ease;
}

.site-fixed-socials.is-collapsed .site-fixed-socials__arrow {
    transform: rotate(225deg);
}

.site-fixed-socials__link {
    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

.site-fixed-socials__link img {
    display: block;
    object-fit: contain;
}

.site-fixed-socials__link:hover,
.site-fixed-socials__link:focus-visible {
    transform: translateX(-3px);
}

.site-fixed-socials__list {
    display: grid;
    grid-template-rows: repeat(5, 48px);

    max-height: 290px;
    opacity: 1;

    transition:
        max-height 500ms ease,
        opacity 350ms ease;
}

.site-fixed-socials.is-collapsed .site-fixed-socials__list {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

@media (max-width: 600px) {
    .site-fixed-socials {
        bottom: 12px;
    }

    .site-fixed-socials__list {
        grid-template-rows: repeat(5, 52px);
        max-height: 260px;
    }
}


/* ============================================================
   ACTIONS FIXES - MENU MOBILE - STRUCTURE
   ============================================================ */

.site-fixed-menu {
    position: fixed;
    top: 16px;
    left: 0;
    z-index: 13000;

    display: none;
    align-items: center;

    border: 0;

    cursor: pointer;
}

.site-fixed-menu__icon {
    display: flex;
    flex-direction: column;
}

.site-fixed-menu__icon span {
    display: block;
    width: 100%;
    background: currentColor;
}

@media (max-width: 991px) {
    .site-fixed-menu {
        display: flex;
    }
}