/* ===========================================================
   RÈGLES COMMUNES DES THÈMES
   =========================================================== */
.business-overlay {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    text-align: center;
    padding: 28px;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(8px);
}

    .business-page .business-overlay {
        background: linear-gradient( to bottom, var(--theme-overlay-top), var(--theme-overlay-bottom) );
    }



    .business-page.theme-tattoo .language-switcher a {
        color: #f4ede1;
    }

    .business-page.theme-tattoo h1,
    .business-page.theme-tattoo h2,
    .business-page.theme-tattoo p {
        text-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    }


/* ===========================================================
   LIENS PRINCIPAUX — BANDEAU HORIZONTAL DÉFILANT
   Sous le sous-titre, avant la description
   Aucun cadre individuel, icônes blanches, libellés sur 2 lignes
   =========================================================== */

.business-page .business-overlay .business-links {
    box-sizing: border-box;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: safe center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 0;
    margin: 40px auto 22px;
    padding: 8px 0;
    align-self: center;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--compact-link-bg) 40%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 0;
    border-radius: 8px;
}

    .business-page .business-overlay .business-links::-webkit-scrollbar {
        display: none;
    }

    .business-page .business-overlay .business-links .business-link {
        box-sizing: border-box;
        position: relative;
        display: flex;
        flex: 0 0 90px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: auto;
        gap: 9px;
        width: 90px;
        min-width: 90px;
        max-width: 90px;
        min-height: 0;
        margin: 0;
        padding: 2px 5px;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        color: #fff;
        opacity: 1;
        scroll-snap-align: start;
        transition: opacity .15s ease;
    }

        /* Annule les anciennes têtes de boutons en T */
        .business-page .business-overlay .business-links .business-link::before {
            content: none;
        }

        .business-page .business-overlay .business-links .business-link .business-link-icon {
            position: static;
            display: block;
            flex: 0 0 27px;
            width: 27px;
            height: 27px;
            margin: 0;
            transform: none;
            object-fit: contain;
            filter: brightness(0) invert(1);
        }

        .business-page .business-overlay .business-links .business-link > span {
            box-sizing: border-box;
            position: static;
            display: -webkit-box;
            width: 100%;
            max-width: 100%;
            min-height:0;
            height: auto;
            margin: 0;
            padding: 0;
            overflow: hidden;
            border: 0;
            border-radius: 0;
            background: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            color: #fff;
            font-size: 10.5px;
            font-weight: 500;
            line-height: 1.3;
            text-align: center;
            white-space: normal;
            overflow-wrap: anywhere;
            text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            transform: none;
        }

        .business-page .business-overlay .business-links .business-link.business-link-primary > span {
            font-weight: 600;
        }

    .business-page .business-overlay .business-links a.business-link:hover {
        background: transparent;
        opacity: .72;
    }

    .business-page .business-overlay .business-links a.business-link:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }

    .business-page .business-overlay .business-links .business-link.business-link-disabled {
        opacity: .43;
        cursor: default;
    }

/* Quatre liens de 90px occupent 360px. Sur les très petits mobiles,
   on réduit chaque emplacement pour préserver presque quatre icônes. */
@media (max-width: 359px) {
    .business-page .business-overlay .business-links .business-link {
        flex-basis: 80px;
        width: 80px;
        min-width: 80px;
        max-width: 80px;
    }
}



/* ============================================
   FORMULAIRE CONTACT — APPARENCE DARK
   ============================================ */

.business-page .business-stay-informed {
    background: rgba(0, 0, 0, .35);
    border: 1px solid rgba(255, 255, 255, .35);
    color: var(--accent, #fff);
    backdrop-filter: blur(8px);
}

.business-page .business-stay-informed-panel {
    background: rgba(20, 20, 24, .85);
    border: 1px solid rgba(255, 255, 255, .2);
    backdrop-filter: blur(12px);
    color: #fff;
}

    .business-page .business-stay-informed-panel label {
        color: #fff;
    }

    .business-page .business-stay-informed-panel input[type="text"] {
        border: 1px solid rgba(255,255,255,.25);
        background: rgba(255,255,255,.12);
        color: #fff;
    }

        .business-page .business-stay-informed-panel input[type="text"]:focus {
            border-color: var(--accent, #fff);
        }

    .business-page .business-stay-informed-panel button {
        background: var(--accent, #fff);
        color: #171717;
    }

    .business-page .business-stay-informed-panel small {
        color: rgba(255,255,255,.65);
    }

.business-page .business-contact-success {
    background: rgba(20, 20, 24, .85);
    color: #fff;
}


.business-page .business-overlay {
    margin: clamp(24px, 8vh, 80px) auto 24px;
}

@media (max-width: 700px) {
    .business-page .business-overlay {
        margin: 12px auto 24px;
    }
}

.business-page {
    background-image: var(--business-bg-image);
}

.business-page-full {
    background-image: none;
}

    .business-page-full::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        background-image: var(--business-bg-image);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        pointer-events: none;
    }

.business-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

    .business-page-full .business-video {
        position: fixed;
    }

  
    /* ===========================================================
   DARK — BLOC DESCRIPTION
   =========================================================== */

    .business-page .business-overlay p.business-description {
        box-sizing: border-box;
        width: 100%;
        margin: 22px auto;
        padding: 20px 22px;
        background: color-mix( in srgb, var(--compact-link-bg) 40%, transparent );
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border: 0;
        border-radius: 8px;
        color: #fff;
        line-height: 1.7;
        text-align: left;
        text-shadow: none;
    }

/* ============================================
   DARK — BANDEAU SUPÉRIEUR
   ============================================ */

.business-page.theme-dark .business-topbar {
    display: contents;
}

/* DARK — Conteneur des actions du bandeau */

.business-page.theme-dark .business-topbar-actions {
    display: contents;
}

.business-page.theme-dark .business-languages {
    display: contents;
}
.business-page.theme-dark .business-hero {
    display: contents;
}
.business-page.theme-dark .business-feature {
    display: none;
}

/* ============================================
   DARK — ORDRE IDENTITÉ ET LANGUES
   ============================================ */

.business-page.theme-dark .business-brand {
    display: flex;
    flex-direction: column;
}

.business-page.theme-dark .business-languages {
    display: block;
    order: -1;
}

.business-page.theme-dark .business-identity {
    display: block;
    order: 0;
}