/* ==========================================================
   HEADER MOBILE SEPARE
   ========================================================== */

.header-mobile {
    display: none;
}

/* Desktop/tablette : on garde ton header.tpl */
@media screen and (min-width: 850px) {
    .header-mobile {
        display: none !important;
    }
}

/* Mobile : on cache le header PC et on affiche le header mobile */
@media screen and (max-width: 849.98px) {
    .main-header {
        display: none !important;
    }

    .header-mobile {
        display: block;
    }

    body {
        padding-top: 78px;
    }

    .header-mobile {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;

        width: 100%;
        background: #ffffff;
        color: #063f52;
    }

    .header-mobile *,
    .header-mobile *::before,
    .header-mobile *::after {
        box-sizing: border-box;
    }

    .header-mobile a {
        color: inherit;
        text-decoration: none;
    }

    .header-mobile__topbar {
        height: 24px;
        padding: 0 10px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;

        background: #ffd500;
    }

    .header-mobile__schedule {
        min-width: 0;

        display: flex;
        align-items: center;
        gap: 5px;

        overflow: hidden;
        white-space: nowrap;
        line-height: 1;
    }

    .header-mobile__schedule img {
        width: 13px;
        height: 13px;
        flex: 0 0 auto;
        display: block;
    }

    .header-mobile__schedule span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 11px;
        line-height: 1;
    }

    .header-mobile__social {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;

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

    .header-mobile__social img {
        width: 14px;
        height: 14px;
        display: block;
    }

    .header-mobile__main {
        height: 54px;

        display: grid;
        grid-template-columns: 56px 1fr 56px;
        align-items: center;

        background: #ffffff;
        border-bottom: 1px solid #edf0f1;
    }

    .header-mobile__topbar {
        display: flex;
        align-items: center;
        width: 100%;
    }

    .header-mobile__schedule {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .header-mobile__socials {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .header-mobile__social {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;

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

    .header-mobile__social img {
        display: block;
        width: 14px;
        height: 14px;
    }

    .header-mobile__burger {
        width: 56px;
        height: 54px;
        padding: 0;

        position: relative;

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

        border: 0;
        border-right: 1px solid #edf0f1;
        background: #faf7df;
        cursor: pointer;
    }

    .header-mobile__burger span {
        position: absolute;

        width: 18px;
        height: 2px;

        background: #063f52;
        transition: transform 180ms ease;
    }

    .header-mobile__burger span:first-child {
        transform: translateY(-5px);
    }

    .header-mobile__burger span:last-child {
        transform: translateY(5px);
    }

    .header-mobile.is-open .header-mobile__burger span:first-child {
        transform: rotate(45deg);
    }

    .header-mobile.is-open .header-mobile__burger span:last-child {
        transform: rotate(-45deg);
    }

    .header-mobile__logo {
        height: 54px;

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

    .header-mobile__logo img {
        width: 105px;
        height: auto;
        display: block;
    }

    .header-mobile__mail {
        width: 56px;
        height: 54px;

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

        background: #e2f3f7;
        border-left: 1px solid #edf0f1;
    }

    .header-mobile__mail img {
        width: 18px;
        height: 18px;
        display: block;
    }

    .header-mobile__nav {
        display: none;

        position: absolute;
        top: 78px;
        left: 0;
        right: 0;

        width: 100%;
        background: #ffffff;
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    }

    .header-mobile.is-open .header-mobile__nav {
        display: block;
    }

    .header-mobile__link {
        min-height: 48px;
        padding: 0 16px;

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

        border-bottom: 1px solid #edf0f1;
        background: #ffffff;
        color: #063f52;

        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        text-align: center;
        white-space: nowrap;

        transition: background-color 180ms ease, color 180ms ease;
    }

    .header-mobile__link--home {
        min-height: 34px;

        background: #063f52;
        color: #ffffff;

        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .header-mobile__link--clim:hover,
    .header-mobile__link--clim:focus-visible {
        background: #74AE93;
        color: #ffffff;
    }

    .header-mobile__link--renov:hover,
    .header-mobile__link--renov:focus-visible {
        background: #F59C1E;
        color: #ffffff;
    }

    .header-mobile__link--pool:hover,
    .header-mobile__link--pool:focus-visible {
        background: #0787C5;
        color: #ffffff;
    }

    .header-mobile__link--building:hover,
    .header-mobile__link--building:focus-visible {
        background: #E30613;
        color: #ffffff;
    }

    .header-mobile__link--store:hover,
    .header-mobile__link--store:focus-visible {
        background: #FFD500;
        color: #063f52;
    }

    .header-mobile__link--quote:hover,
    .header-mobile__link--quote:focus-visible,
    .header-mobile__link--contact:hover,
    .header-mobile__link--contact:focus-visible {
        background: #47AECC;
        color: #ffffff;
    }
}

/* Header desktop fixé au scroll */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;

    width: 100%;
    background: #ffffff;
}

/* Hauteur du header desktop pour éviter que le contenu passe dessous */
body {
    padding-top: 153px;
}

/* Mobile : tu gardes ton header mobile déjà fixed */
@media screen and (max-width: 849.98px) {
    body {
        padding-top: 78px;
    }
}