/* ==========================================================
   HEADER — TABLETTE
   Fichier : tablette.css
   Breakpoint : 768px à 991.98px
   ========================================================== */

@media screen and (min-width: 850.01px) and (max-width: 991.98px) {

    .main-header {
        --header-horizontal-padding: clamp(20px, 3vw, 32px);

        --header-dark-blue: #063f52;
        --header-light-blue: #e2f3f7;
        --header-yellow: #ffd500;
        --header-border: #edf0f1;
        --header-white: #ffffff;

        --header-topbar-height: 40px;
        --header-main-row-height: 82px;
        --header-navigation-row-height: 64px;

        width: 100%;
        color: var(--header-dark-blue);
        background-color: var(--header-white);
    }

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

    /* ==============================
       Barre supérieure
       ============================== */

    .main-header__topbar {
        width: 100%;
        height: var(--header-topbar-height);
        background-color: var(--header-yellow);
    }

    .main-header__topbar-container {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        padding-inline: var(--header-horizontal-padding);

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

    /* ==============================
       Horaires
       ============================== */

    .main-header__schedule {
        min-width: 0;

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

        color: var(--header-dark-blue);
        line-height: 1;
        white-space: nowrap;
    }

    .main-header__schedule img {
        display: block;
        flex: 0 0 auto;

        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .main-header__schedule span {
        overflow: hidden;

        font-size: 12px !important;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ==============================
       Réseaux sociaux
       ============================== */

    .main-header__socials {
        flex: 0 0 auto;

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

        font-size: 12px;
        white-space: nowrap;
    }

    .main-header__socials a {
        display: flex;
        align-items: center;
        justify-content: center;

        color: inherit;
        text-decoration: none;
    }

    .main-header__socials img {
        display: block;

        width: 17px;
        height: 17px;
        object-fit: contain;
    }

    /* ==============================
       Conteneur principal
       ============================== */

    .main-header__navigation-container {
        width: 100%;
        margin: 0 auto;
        padding-inline: var(--header-horizontal-padding);

        display: grid;
        grid-template-columns: minmax(140px, 1fr) auto;
        grid-template-areas:
            "logo actions"
            "navigation navigation";

        align-items: stretch;
        background-color: var(--header-white);
    }

    /* ==============================
       Logo
       ============================== */

    .main-header__logo {
        grid-area: logo;

        min-width: 0;
        min-height: var(--header-main-row-height);

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

        color: inherit;
        text-decoration: none;
    }

    .main-header__logo img {
        display: block;

        width: clamp(120px, 16vw, 140px);
        max-width: 100%;
        height: auto;
    }

    /* ==============================
       Actions
       ============================== */

    .main-header__actions {
        grid-area: actions;

        min-width: 0;
        min-height: var(--header-main-row-height);

        display: grid;
        grid-template-columns: minmax(135px, 1.35fr) minmax(95px, 1fr) 58px;
    }

    .header-action {
        min-width: 0;
        min-height: var(--header-main-row-height);

        display: flex;
        align-items: center;
        justify-content: center;
        gap: 7px;

        padding: 14px 9px;

        color: var(--header-dark-blue);
        background-color: var(--header-white);
        border-left: 1px solid var(--header-border);

        font-size: clamp(11px, 1.35vw, 13px);
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;

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

    .header-action:hover,
    .header-action:focus-visible {
        background-color: #f3f8fa;
    }

    .header-action__icon {
        display: block;
        flex: 0 0 auto;

        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .header-action--contact {
        padding: 0;
        background-color: var(--header-light-blue);
    }

    .header-action--contact:hover,
    .header-action--contact:focus-visible {
        background-color: #d4edf3;
    }

    /* ==============================
       Navigation
       ============================== */

    .main-navigation {
        grid-area: navigation;

        min-width: 0;
        min-height: var(--header-navigation-row-height);

        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        align-items: stretch;

        border-top: 1px solid var(--header-border);
    }

    .main-navigation__link {
        position: relative;
        min-width: 0;

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

        padding: 14px 5px;

        color: var(--header-dark-blue);

        font-size: clamp(11px, 1.45vw, 13px);
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;

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

    .main-navigation__link::after {
        content: "";

        position: absolute;
        right: 18%;
        bottom: 8px;
        left: 18%;

        height: 3px;
        background-color: currentColor;

        transform: scaleX(0);
        transform-origin: center;

        transition: transform 180ms ease;
    }

    .main-navigation__link:hover::after,
    .main-navigation__link:focus-visible::after {
        transform: scaleX(1);
    }

    .main-navigation__link--clim:hover,
    .main-navigation__link--clim:focus-visible {
        color: #79b29a;
    }

    .main-navigation__link--renov:hover,
    .main-navigation__link--renov:focus-visible {
        color: #f39a18;
    }

    .main-navigation__link--pool:hover,
    .main-navigation__link--pool:focus-visible {
        color: #078ccb;
    }

    .main-navigation__link--building:hover,
    .main-navigation__link--building:focus-visible {
        color: #ed3d2e;
    }
}